Skip to content

Commit 4359498

Browse files
LuggaPuggaLuggaPugga
committed
refactor(blog): update styling and structure of blog page and sidebar for improved readability and consistency
1 parent e47be71 commit 4359498

File tree

2 files changed

+97
-64
lines changed

2 files changed

+97
-64
lines changed

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

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@ import type { Metadata } from "next"
66
import Link from "next/link"
77
import { notFound } from "next/navigation"
88

9-
export async function generateMetadata(
10-
{ params }: PageProps<"/blog/[slug]">,
11-
): Promise<Metadata> {
9+
export async function generateMetadata({ params }: PageProps<"/blog/[slug]">): Promise<Metadata> {
1210
const { slug } = await params
1311
const page = blog.getPage([slug])
1412

@@ -26,34 +24,34 @@ export default async function Page(props: PageProps<"/blog/[slug]">) {
2624
const { body: Mdx, toc } = page.data
2725
return (
2826
<>
29-
<header className="border-b border-white/10">
27+
<header className="border-b border-fd-border">
3028
<div className="container mx-auto px-4 py-12 md:py-16">
3129
<div className="mx-auto max-w-7xl">
3230
<div className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_280px]">
3331
<div className="max-w-3xl">
34-
<nav className="mb-6 text-sm text-neutral-500">
35-
<Link className="hover:text-white" href="/blog">
32+
<nav className="mb-6 text-sm text-fd-muted-foreground">
33+
<Link className="hover:text-fd-foreground" href="/blog">
3634
Blog
3735
</Link>
3836
<span className="mx-2">/</span>
39-
<span className="text-neutral-400">{page?.data.title}</span>
37+
<span className="text-fd-foreground">{page?.data.title}</span>
4038
</nav>
41-
<h1 className="text-4xl font-bold tracking-tight text-white md:text-5xl">
39+
<h1 className="text-4xl font-bold tracking-tight text-fd-foreground md:text-5xl">
4240
{page?.data.title}
4341
</h1>
4442
{page?.data.description && (
45-
<p className="mt-4 text-lg leading-relaxed text-neutral-400">
43+
<p className="mt-4 text-lg leading-relaxed text-fd-muted-foreground">
4644
{page?.data.description}
4745
</p>
4846
)}
49-
<div className="mt-6 flex flex-wrap items-center gap-4 text-sm text-neutral-400">
47+
<div className="mt-6 flex flex-wrap items-center gap-4 text-sm text-fd-muted-foreground">
5048
{page.data.author && (
5149
<div className="flex items-center gap-2">
52-
<span className="text-neutral-500">By</span>
53-
<span className="font-medium text-white">{page.data.author}</span>
50+
<span className="text-fd-muted-foreground">By</span>
51+
<span className="font-medium text-fd-foreground">{page.data.author}</span>
5452
</div>
5553
)}
56-
<div className="h-4 w-px bg-white/10" />
54+
<div className="h-4 w-px bg-fd-muted-foreground" />
5755
<time>
5856
{new Date(
5957
(await lastEdit(page)) ??
@@ -79,16 +77,16 @@ export default async function Page(props: PageProps<"/blog/[slug]">) {
7977
</article>
8078
{toc.length > 0 && (
8179
<aside className="hidden lg:block">
82-
<div className="sticky top-24 rounded-lg border border-white/10 p-4">
83-
<h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-neutral-400">
80+
<div className="sticky top-24 rounded-lg border border-fd-border p-4">
81+
<h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-fd-secondary-foreground">
8482
On This Page
8583
</h3>
8684
<nav className="space-y-1">
8785
{toc.map((item) => (
8886
<Link
8987
key={item.url}
9088
href={item.url}
91-
className="block rounded-md py-1.5 text-sm text-neutral-400 hover:text-white"
89+
className="block rounded-md py-1.5 text-sm text-fd-muted-foreground hover:text-fd-foreground"
9290
style={{ paddingLeft: `${(item.depth - 1) * 12}px` }}
9391
>
9492
{item.title}

‎src/components/blog/blog-sidebar.tsx‎

Lines changed: 83 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -50,54 +50,89 @@ export function BlogSidebar({ posts }: BlogSidebarProps) {
5050
: posts.filter((post) => post.data.category === selectedCategory)
5151

5252
return (
53-
<main className="container mx-auto my-12 space-y-10">
54-
<div className="mx-auto flex w-full gap-16 px-8">
55-
<aside className="w-48 flex-shrink-0">
56-
<h1 className="text-5xl font-semibold tracking-tight">Blog</h1>
57-
<nav className="mt-12 flex flex-col space-y-4 text-sm uppercase text-neutral-500">
58-
{categories.map((category) => (
59-
<button
60-
key={category}
61-
onClick={() => setSelectedCategory(category)}
62-
className={`flex items-center gap-2 text-left transition-colors hover:text-white uppercase text-md ${
63-
selectedCategory === category ? "text-white" : ""
64-
}`}
65-
>
66-
{getCategoryIcon(category)}
67-
{category}
68-
</button>
69-
))}
70-
</nav>
71-
</aside>
72-
<div className="flex flex-1 flex-col space-y-6 mt-22">
73-
{filteredPosts.map((post) => (
74-
<Link href={post.data.url} key={post.path} className="border border-white/20 p-4">
75-
<article className="group">
76-
<div className="flex flex-col space-y-3 p-6 transition-colors group-hover:border-white/20">
77-
<h2 className="text-2xl font-semibold text-white group-hover:text-white/90">
78-
{post.data.title}
79-
</h2>
80-
<p className="text-sm text-neutral-400">{post.data.description}</p>
81-
<p className="text-xs uppercase tracking-wide text-neutral-500 flex items-center gap-2">
82-
{getCategoryIcon(post.data.category ?? "All Posts")} {post.data.category} ·{" "}
83-
{new Date(
84-
(typeof post.data.date === "string"
85-
? post.data.date
86-
: post.data.date?.toISOString()) ??
87-
post.path.split("/").pop()?.replace(".mdx", "") ??
88-
"",
89-
).toLocaleDateString("en-US", {
90-
month: "short",
91-
day: "numeric",
92-
year: "numeric",
93-
})}
94-
</p>
95-
</div>
96-
</article>
97-
</Link>
98-
))}
53+
<>
54+
<header className="border-b border-fd-border">
55+
<div className="container mx-auto px-4 py-12 md:py-16">
56+
<div className="mx-auto max-w-7xl">
57+
<h1 className="text-4xl font-bold tracking-tight text-fd-foreground md:text-5xl">
58+
Blog
59+
</h1>
60+
<p className="mt-4 text-lg leading-relaxed text-fd-muted-foreground">
61+
Updates, devlogs, and notes from the team.
62+
</p>
63+
</div>
9964
</div>
100-
</div>
101-
</main>
65+
</header>
66+
67+
<main className="container mx-auto px-4 py-10">
68+
<div className="mx-auto max-w-7xl">
69+
<div className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_280px]">
70+
<section className="space-y-4">
71+
{filteredPosts.map((post) => (
72+
<Link
73+
href={post.data.url}
74+
key={post.path}
75+
className="group block rounded-lg border border-fd-border transition-colors hover:bg-fd-accent/10"
76+
>
77+
<article className="p-6">
78+
<h2 className="text-2xl font-semibold text-fd-foreground group-hover:text-fd-foreground/90">
79+
{post.data.title}
80+
</h2>
81+
{post.data.description && (
82+
<p className="mt-2 text-sm text-fd-muted-foreground">
83+
{post.data.description}
84+
</p>
85+
)}
86+
<div className="mt-4 flex flex-wrap items-center gap-3 text-xs uppercase tracking-wider text-fd-muted-foreground">
87+
<span className="inline-flex items-center gap-2">
88+
{getCategoryIcon(post.data.category ?? "All Posts")}{" "}
89+
{post.data.category ?? "other"}
90+
</span>
91+
<div className="h-3 w-px bg-fd-border" />
92+
<time>
93+
{new Date(
94+
(typeof post.data.date === "string"
95+
? post.data.date
96+
: post.data.date?.toISOString()) ??
97+
post.path.split("/").pop()?.replace(".mdx", "") ??
98+
"",
99+
).toLocaleDateString("en-US", {
100+
month: "long",
101+
day: "numeric",
102+
year: "numeric",
103+
})}
104+
</time>
105+
</div>
106+
</article>
107+
</Link>
108+
))}
109+
</section>
110+
111+
<aside className="hidden lg:block">
112+
<div className="sticky top-24 rounded-lg border border-fd-border p-4">
113+
<h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-fd-secondary-foreground">
114+
Filter
115+
</h3>
116+
<nav className="space-y-4 text-sm uppercase text-fd-muted-foreground">
117+
{categories.map((category) => (
118+
<button
119+
key={category}
120+
type="button"
121+
onClick={() => setSelectedCategory(category)}
122+
className={`flex items-center gap-2 text-left transition-colors hover:text-fd-foreground uppercase text-md ${
123+
selectedCategory === category ? "text-fd-foreground" : ""
124+
}`}
125+
>
126+
{getCategoryIcon(category)}
127+
{category}
128+
</button>
129+
))}
130+
</nav>
131+
</div>
132+
</aside>
133+
</div>
134+
</div>
135+
</main>
136+
</>
102137
)
103138
}

0 commit comments

Comments
 (0)