Skip to content

Commit 09a9702

Browse files
vukrosicvukrosic
committed
Implement dynamic frontmatter parsing for DeepSeek Sparse Attention page
- Introduced a new HeroData interface to manage title, subtitle, and tags. - Enhanced the DeepSeekProject component to fetch and parse frontmatter from markdown content, allowing for dynamic rendering of hero section data. - Updated the layout to display hero title, subtitle, and tags, improving the overall presentation and user engagement. - Adjusted the main content area for better spacing and organization.
1 parent 4d0d6fa commit 09a9702

File tree

2 files changed

+112
-41
lines changed

2 files changed

+112
-41
lines changed

‎app/blog/deepseek-sparse-attention/page.tsx‎

Lines changed: 103 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,87 @@ import { useLanguage } from "@/components/providers/language-provider";
55
import { MarkdownRenderer } from "@/components/markdown-renderer";
66
import { useEffect, useState } from "react";
77

8+
interface HeroData {
9+
title: string;
10+
subtitle: string;
11+
tags: string[];
12+
}
13+
814
export default function DeepSeekProject() {
915
const { language } = useLanguage();
1016
const [markdownContent, setMarkdownContent] = useState<string>('');
17+
const [heroData, setHeroData] = useState<HeroData | null>(null);
1118
const [isLoading, setIsLoading] = useState(true);
1219

1320
useEffect(() => {
1421
const fetchMarkdownContent = async () => {
1522
try {
1623
const response = await fetch('/deepseek-sparse-attention-content.md');
1724
const content = await response.text();
18-
setMarkdownContent(content);
25+
26+
// Parse frontmatter
27+
const frontmatterMatch = content.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);
28+
if (frontmatterMatch) {
29+
const frontmatterContent = frontmatterMatch[1];
30+
const markdownBody = frontmatterMatch[2];
31+
32+
// Parse YAML-like frontmatter (simple parsing for our use case)
33+
const heroData: HeroData = {
34+
title: "DeepSeek's Attention Revolution",
35+
subtitle: "⚡ From O(L²) to O(Lk) - The Lightning Indexer Breakthrough",
36+
tags: ["⏱️ Technical Deep Dive", "📄 Research Article"]
37+
};
38+
39+
// Extract values from frontmatter
40+
const lines = frontmatterContent.split('\n');
41+
let currentKey = '';
42+
let currentArray: string[] = [];
43+
44+
for (const line of lines) {
45+
const trimmedLine = line.trim();
46+
if (trimmedLine.startsWith('hero:')) continue;
47+
48+
if (trimmedLine.includes(':')) {
49+
const [key, ...valueParts] = trimmedLine.split(':');
50+
const value = valueParts.join(':').trim().replace(/^["']|["']$/g, '');
51+
52+
switch (key.trim()) {
53+
case 'title':
54+
heroData.title = value;
55+
break;
56+
case 'subtitle':
57+
heroData.subtitle = value;
58+
break;
59+
case 'tags':
60+
currentKey = 'tags';
61+
currentArray = [];
62+
break;
63+
}
64+
} else if (trimmedLine.startsWith('- ')) {
65+
if (currentKey === 'tags') {
66+
const tagValue = trimmedLine.substring(2).replace(/^["']|["']$/g, '');
67+
currentArray.push(tagValue);
68+
}
69+
} else if (trimmedLine === '' && currentArray.length > 0) {
70+
if (currentKey === 'tags') {
71+
heroData.tags = currentArray;
72+
currentArray = [];
73+
currentKey = '';
74+
}
75+
}
76+
}
77+
78+
// Handle final array
79+
if (currentArray.length > 0 && currentKey === 'tags') {
80+
heroData.tags = currentArray;
81+
}
82+
83+
setHeroData(heroData);
84+
setMarkdownContent(markdownBody);
85+
} else {
86+
// Fallback if no frontmatter
87+
setMarkdownContent(content);
88+
}
1989
} catch (error) {
2090
console.error('Failed to fetch markdown content:', error);
2191
setMarkdownContent('# Error loading content\n\nFailed to load the article content.');
@@ -56,71 +126,63 @@ export default function DeepSeekProject() {
56126
<div className="absolute bottom-1/4 right-1/6 w-2.5 h-2.5 bg-gradient-to-r from-cyan-400 to-blue-400 rounded-full opacity-55 animate-pulse delay-1000"></div>
57127
</div>
58128

59-
<div className="relative container mx-auto px-6 pt-32 pb-24">
129+
<div className="relative container mx-auto px-6 pt-32 pb-12">
60130
<div className="text-center max-w-4xl mx-auto">
61131
<div className="relative">
62132
<h1 className="text-4xl md:text-5xl lg:text-6xl font-medium mb-8 leading-tight">
63133
<span className="bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
64-
{language === 'en' ? 'DeepSeek\'s Attention Revolution' : 'DeepSeek 的注意力革命'}
134+
{heroData?.title || (language === 'en' ? 'DeepSeek\'s Attention Revolution' : 'DeepSeek 的注意力革命')}
65135
</span>
66136
</h1>
67-
<div className="text-lg md:text-xl text-slate-400 mb-4">
68-
{language === 'en'
137+
<div className="text-lg md:text-xl text-slate-400 mb-8">
138+
{heroData?.subtitle || (language === 'en'
69139
? '⚡ From O(L²) to O(Lk) - The Lightning Indexer Breakthrough'
70140
: '⚡ 从 O(L²) 到 O(Lk) - 闪电索引器突破'
71-
}
141+
)}
72142
</div>
73143

144+
{/* Tags */}
145+
{heroData?.tags && heroData.tags.length > 0 && (
146+
<div className="flex items-center justify-center gap-3 text-sm text-slate-400 mb-8">
147+
{heroData.tags.map((tag, index) => (
148+
<span key={index} className="flex items-center gap-2">
149+
{index > 0 && <span className="text-slate-600">•</span>}
150+
<span className="flex items-center gap-2">
151+
{tag.includes('⏱️') && (
152+
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
153+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
154+
</svg>
155+
)}
156+
{tag.includes('📄') && (
157+
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
158+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
159+
</svg>
160+
)}
161+
{tag.replace(/[⏱️📄]/g, '').trim()}
162+
</span>
163+
</span>
164+
))}
165+
</div>
166+
)}
167+
74168
{/* Glow effect for the title */}
75169
<div className="absolute inset-0 text-4xl md:text-5xl lg:text-6xl font-medium leading-tight blur-sm">
76170
<span className="bg-gradient-to-r from-blue-400/20 via-purple-400/20 to-cyan-400/20 bg-clip-text text-transparent">
77-
{language === 'en' ? 'DeepSeek\'s Attention Revolution' : 'DeepSeek 的注意力革命'}
171+
{heroData?.title || (language === 'en' ? 'DeepSeek\'s Attention Revolution' : 'DeepSeek 的注意力革命')}
78172
</span>
79173
</div>
80174
</div>
81-
82-
<p className="text-xl text-slate-300 mb-12 leading-relaxed">
83-
{language === 'en'
84-
? 'A deep dive into sparse attention and the Lightning Indexer - DeepSeek-V3.2-Exp'
85-
: '深入探讨稀疏注意力和闪电索引器 - DeepSeek-V3.2-Exp'
86-
}
87-
</p>
88175
</div>
89176
</div>
90177
</section>
91178

92179
{/* Main Content */}
93-
<main className="bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 min-h-screen py-20">
94-
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
180+
<main className="bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 min-h-screen">
181+
<div className="container mx-auto px-4 sm:px-6 lg:px-8 pt-8">
95182
{/* Article Container */}
96183
<article className="max-w-4xl mx-auto">
97184
{/* Content Card */}
98185
<div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-3xl shadow-2xl overflow-hidden">
99-
{/* Article Header */}
100-
<div className="bg-gradient-to-r from-blue-600/10 via-purple-600/10 to-cyan-600/10 border-b border-white/10 px-8 sm:px-12 py-8">
101-
<div className="flex items-center gap-3 text-sm text-slate-400 mb-4">
102-
<span className="flex items-center gap-2">
103-
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
104-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
105-
</svg>
106-
Technical Deep Dive
107-
</span>
108-
<span className="text-slate-600">•</span>
109-
<span className="flex items-center gap-2">
110-
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
111-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
112-
</svg>
113-
Research Article
114-
</span>
115-
</div>
116-
<h1 className="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent mb-4">
117-
DeepSeek Sparse Attention
118-
</h1>
119-
<p className="text-slate-400 text-lg leading-relaxed">
120-
A comprehensive exploration of the Lightning Indexer and Multi-Head Latent Attention architecture
121-
</p>
122-
</div>
123-
124186
{/* Article Body */}
125187
<div className="px-8 sm:px-12 py-12">
126188
<div className="prose prose-lg prose-invert max-w-none">

‎public/deepseek-sparse-attention-content.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
---
2+
hero:
3+
title: "DeepSeek Sparse Attention"
4+
subtitle: "⚡ From quadratic to near-linear attention - The Lightning Indexer Breakthrough"
5+
tags:
6+
- "⏱️ Technical Deep Dive"
7+
- "📄 Research Article"
8+
---
9+
110
Prerequisites: Attention Mechanism
211

312
**📺 Recommended Video Resource:** For a comprehensive understanding of attention mechanisms and DeepSeek's Multihead Latent Attention, watch this video: [DeeepSeek V3 From Scratch](https://youtu.be/TfEG0TwueTs)

0 commit comments

Comments
 (0)