Skip to content

Commit 15a08d1

Browse files
LuggaPuggaLuggaPugga
committed
refactor(blog): update styling and structure of blog components
1 parent eac9b96 commit 15a08d1

File tree

2 files changed

+94
-61
lines changed

2 files changed

+94
-61
lines changed

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

Lines changed: 13 additions & 13 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,36 @@ 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">
32+
<nav className="mb-6 text-sm text-fd-secondary-foreground">
3533
<Link className="hover:text-white" 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-secondary-foreground">{page?.data.title}</span>
4038
</nav>
4139
<h1 className="text-4xl font-bold tracking-tight text-white 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-secondary-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-secondary-foreground">
5048
{page.data.author && (
5149
<div className="flex items-center gap-2">
5250
<span className="text-neutral-500">By</span>
53-
<span className="font-medium text-white">{page.data.author}</span>
51+
<span className="font-medium text-fd-secondary-foreground">
52+
{page.data.author}
53+
</span>
5454
</div>
5555
)}
56-
<div className="h-4 w-px bg-white/10" />
56+
<div className="h-4 w-px bg-fd-border" />
5757
<time>
5858
{new Date(
5959
(await lastEdit(page)) ??
@@ -79,16 +79,16 @@ export default async function Page(props: PageProps<"/blog/[slug]">) {
7979
</article>
8080
{toc.length > 0 && (
8181
<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">
82+
<div className="sticky top-24 rounded-lg border border-fd-border p-4">
83+
<h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-fd-secondary-foreground">
8484
On This Page
8585
</h3>
8686
<nav className="space-y-1">
8787
{toc.map((item) => (
8888
<Link
8989
key={item.url}
9090
href={item.url}
91-
className="block rounded-md py-1.5 text-sm text-neutral-400 hover:text-white"
91+
className="block rounded-md py-1.5 text-sm text-fd-secondary-foreground hover:text-fd-secondary-foreground"
9292
style={{ paddingLeft: `${(item.depth - 1) * 12}px` }}
9393
>
9494
{item.title}

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

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

0 commit comments

Comments
 (0)