Skip to content

Commit 5ee890d

Browse files
xiaoyu2erxiaoyu2er
committed
style: update blog design
1 parent 933b810 commit 5ee890d

File tree

2 files changed

+213
-44
lines changed

2 files changed

+213
-44
lines changed

‎apps/docs/src/app/(home)/blog/[slug]/page.tsx‎

Lines changed: 49 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,26 +17,59 @@ export default async function Page(props: {
1717
const { body: Mdx, toc } = await page.data.load();
1818

1919
return (
20-
<div className="container my-6 max-w-[860px]">
21-
<Link
22-
href="/blog"
23-
className="text-sm mb-12 text-fd-muted-foreground inline-flex items-center gap-2 hover:text-fd-foreground transition-colors"
24-
>
25-
<BackButton /> Back to blog
26-
</Link>
20+
<main className="min-h-screen bg-fd-background">
21+
<div className="container max-w-4xl mx-auto px-6 py-16">
22+
{/* Back Navigation */}
23+
<Link
24+
href="/blog"
25+
className="inline-flex items-center gap-2 text-sm text-fd-muted-foreground hover:text-fd-foreground transition-colors mb-8 group"
26+
>
27+
<BackButton />
28+
<span className="group-hover:translate-x-1 transition-transform duration-300">
29+
Back to blog
30+
</span>
31+
</Link>
2732

28-
{page.data.date && (
29-
<p className=" text-neutral-600 py-2">
30-
{new Date(page.data.date).toDateString()}
31-
</p>
32-
)}
33+
{/* Article Header */}
34+
<header className="mb-12">
35+
{page.data.date && (
36+
<time className="text-sm text-fd-muted-foreground bg-fd-accent px-3 py-1 rounded-full inline-block mb-6">
37+
{new Date(page.data.date).toLocaleDateString('en-US', {
38+
year: 'numeric',
39+
month: 'long',
40+
day: 'numeric',
41+
})}
42+
</time>
43+
)}
3344

34-
<h1 className="mb-2 text-5xl font-bold py-6">{page.data.title}</h1>
45+
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-fd-foreground leading-tight mb-6">
46+
{page.data.title}
47+
</h1>
3548

36-
<div className="prose">
37-
<Mdx components={getBlogMDXComponents()} />
49+
{page.data.description && (
50+
<p className="text-xl text-fd-muted-foreground leading-relaxed max-w-3xl">
51+
{page.data.description}
52+
</p>
53+
)}
54+
</header>
55+
56+
{/* Article Content */}
57+
<article className="prose prose-lg prose-fd max-w-none">
58+
<Mdx components={getBlogMDXComponents()} />
59+
</article>
60+
61+
{/* Footer Navigation */}
62+
<footer className="mt-16 pt-8 border-t border-fd-border">
63+
<Link
64+
href="/blog"
65+
className="inline-flex items-center gap-2 px-6 py-3 bg-fd-card border border-fd-border text-fd-foreground font-semibold rounded-xl hover:shadow-lg transition-all duration-300 hover:scale-105 hover:border-purple-400"
66+
>
67+
<BackButton />
68+
Back to all posts
69+
</Link>
70+
</footer>
3871
</div>
39-
</div>
72+
</main>
4073
);
4174
}
4275

‎apps/docs/src/app/(home)/blog/page.tsx‎

Lines changed: 164 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,174 @@ export default function Page(): React.ReactElement {
88
(a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
99
);
1010

11-
const svg = `<svg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'>
12-
<filter id='noiseFilter'>
13-
<feTurbulence
14-
type='fractalNoise'
15-
baseFrequency='0.65'
16-
numOctaves='3'
17-
stitchTiles='stitch'/>
18-
</filter>
19-
20-
<rect width='100%' height='100%' filter='url(#noiseFilter)'/>
21-
</svg>`;
22-
2311
return (
24-
<main className="container max-sm:px-0 md:py-12">
25-
<div className="grid grid-cols-1 border md:grid-cols-3 lg:grid-cols-4">
26-
{posts.map((post) => (
27-
<Link
28-
key={post.url}
29-
href={post.url}
30-
className="flex flex-col bg-fd-card p-4 transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground"
31-
>
32-
<p className="font-medium">{post.data.title}</p>
33-
<p className="text-sm text-fd-muted-foreground">
34-
{post.data.description}
12+
<main className="min-h-screen bg-fd-background">
13+
{/* Hero Section */}
14+
<section className="w-full py-20 relative overflow-hidden">
15+
{/* Background decoration */}
16+
<div className="absolute inset-0 bg-fd-muted opacity-50" />
17+
<div className="absolute top-0 left-1/4 w-96 h-96 bg-purple-100 dark:bg-purple-900/20 rounded-full blur-3xl opacity-30" />
18+
<div className="absolute bottom-0 right-1/4 w-96 h-96 bg-blue-100 dark:bg-blue-900/20 rounded-full blur-3xl opacity-30" />
19+
20+
<div className="container max-w-6xl mx-auto px-6 relative z-10">
21+
<div className="text-center">
22+
<h1 className="text-5xl md:text-7xl font-extrabold text-fd-foreground mb-6 leading-tight">
23+
Blog
24+
</h1>
25+
<p className="text-xl md:text-2xl text-fd-muted-foreground max-w-3xl mx-auto leading-relaxed">
26+
Insights, tutorials, and updates about Next.js
27+
internationalization
3528
</p>
29+
</div>
30+
</div>
31+
</section>
3632

37-
<p className="mt-auto pt-4 text-xs text-fd-muted-foreground">
38-
{new Date(post.data.date ?? post.file.name).toDateString()}
33+
{/* Blog Posts Grid */}
34+
<section className="container max-w-6xl mx-auto px-6 py-16">
35+
{posts.length === 0 ? (
36+
<div className="text-center py-20">
37+
<div className="w-24 h-24 mx-auto mb-6 bg-fd-muted rounded-full flex items-center justify-center">
38+
<svg
39+
className="w-12 h-12 text-fd-muted-foreground"
40+
fill="none"
41+
stroke="currentColor"
42+
viewBox="0 0 24 24"
43+
>
44+
<title>No posts available</title>
45+
<path
46+
strokeLinecap="round"
47+
strokeLinejoin="round"
48+
strokeWidth={2}
49+
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
50+
/>
51+
</svg>
52+
</div>
53+
<h3 className="text-2xl font-bold text-fd-foreground mb-2">
54+
No posts yet
55+
</h3>
56+
<p className="text-fd-muted-foreground">
57+
Check back soon for new content!
3958
</p>
40-
</Link>
41-
))}
42-
</div>
59+
</div>
60+
) : (
61+
<div className="space-y-16">
62+
{/* Featured Post */}
63+
{posts.length > 0 && (
64+
<div>
65+
<div className="flex items-center gap-3 mb-8">
66+
<h2 className="text-3xl font-bold text-fd-foreground">
67+
Latest Post
68+
</h2>
69+
<span className="px-3 py-1 bg-fd-accent text-fd-accent-foreground text-sm font-medium rounded-full">
70+
Featured
71+
</span>
72+
</div>
73+
<Link
74+
href={posts[0].url}
75+
className="group block bg-fd-card border border-fd-border rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-[1.02] relative"
76+
>
77+
<div className="absolute inset-0 bg-purple-50 dark:bg-purple-900/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
78+
<div className="relative p-8 md:p-12">
79+
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
80+
<time className="text-fd-muted-foreground">
81+
{new Date(
82+
posts[0].data.date ?? posts[0].file.name,
83+
).toLocaleDateString('en-US', {
84+
year: 'numeric',
85+
month: 'long',
86+
day: 'numeric',
87+
})}
88+
</time>
89+
<div className="flex items-center text-purple-600 dark:text-purple-400 font-medium group-hover:translate-x-1 transition-transform duration-300">
90+
<span className="mr-2">Read more</span>
91+
<svg
92+
className="w-4 h-4"
93+
fill="none"
94+
stroke="currentColor"
95+
viewBox="0 0 24 24"
96+
>
97+
<title>Arrow right</title>
98+
<path
99+
strokeLinecap="round"
100+
strokeLinejoin="round"
101+
strokeWidth={2}
102+
d="M9 5l7 7-7 7"
103+
/>
104+
</svg>
105+
</div>
106+
</div>
107+
<h3 className="text-3xl md:text-4xl font-bold text-fd-foreground mb-4 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-300">
108+
{posts[0].data.title}
109+
</h3>
110+
<p className="text-lg text-fd-muted-foreground leading-relaxed">
111+
{posts[0].data.description}
112+
</p>
113+
</div>
114+
</Link>
115+
</div>
116+
)}
117+
118+
{/* Other Posts Grid */}
119+
{posts.length > 1 && (
120+
<div>
121+
<h2 className="text-3xl font-bold text-fd-foreground mb-8">
122+
All Posts
123+
</h2>
124+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
125+
{posts.slice(1).map((post) => (
126+
<Link
127+
key={post.url}
128+
href={post.url}
129+
className="group block bg-fd-card border border-fd-border rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 relative"
130+
>
131+
<div className="absolute inset-0 bg-purple-50 dark:bg-purple-900/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
132+
<div className="relative p-6">
133+
<div className="mb-4">
134+
<time className="text-sm text-fd-muted-foreground">
135+
{new Date(
136+
post.data.date ?? post.file.name,
137+
).toLocaleDateString('en-US', {
138+
year: 'numeric',
139+
month: 'short',
140+
day: 'numeric',
141+
})}
142+
</time>
143+
</div>
144+
145+
<h3 className="text-xl font-bold text-fd-foreground mb-3 line-clamp-2 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors duration-300">
146+
{post.data.title}
147+
</h3>
148+
149+
<p className="text-fd-muted-foreground text-sm leading-relaxed mb-4 line-clamp-3">
150+
{post.data.description}
151+
</p>
152+
153+
<div className="flex items-center text-purple-600 dark:text-purple-400 text-sm font-medium opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
154+
<span className="mr-2">Read article</span>
155+
<svg
156+
className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1"
157+
fill="none"
158+
stroke="currentColor"
159+
viewBox="0 0 24 24"
160+
>
161+
<title>Arrow right</title>
162+
<path
163+
strokeLinecap="round"
164+
strokeLinejoin="round"
165+
strokeWidth={2}
166+
d="M9 5l7 7-7 7"
167+
/>
168+
</svg>
169+
</div>
170+
</div>
171+
</Link>
172+
))}
173+
</div>
174+
</div>
175+
)}
176+
</div>
177+
)}
178+
</section>
43179
</main>
44180
);
45181
}

0 commit comments

Comments
 (0)