From b1be9cf61b1e6a61bcab476397b0d5eaff0785f0 Mon Sep 17 00:00:00 2001
From: Taesu <166604494+bytaesu@users.noreply.github.com>
Date: Thu, 19 Mar 2026 07:37:17 +0900
Subject: [PATCH] docs: improve Blog page UI (#8683)

---
 landing/app/blog/[[...slug]]/page.tsx       | 77 ++++-----------------
 landing/components/blog/blog-left-panel.tsx | 57 ++++++---------
 2 files changed, 36 insertions(+), 98 deletions(-)

diff --git a/landing/app/blog/[[...slug]]/page.tsx b/landing/app/blog/[[...slug]]/page.tsx
index 24f3f76ee0..920c4d04cb 100644
--- a/landing/app/blog/[[...slug]]/page.tsx
+++ b/landing/app/blog/[[...slug]]/page.tsx
@@ -46,9 +46,9 @@ function BlogList() {
 							href={`/blog/${post.slugs.join("/")}`}
 							className="group block border-b border-dashed border-foreground/[0.06] px-5 sm:px-6 lg:px-8 py-5 transition-colors hover:bg-foreground/[0.02]"
 						>
-							<div className="flex gap-5 items-start">
+							<div className="flex gap-5 items-center">
 								{post.data?.image && (
-									<div className="shrink-0 w-40 h-24 overflow-hidden border border-foreground/[0.06] hidden sm:block">
+									<div className="shrink-0 w-56 aspect-[1200/630] overflow-hidden border border-foreground/[0.06] hidden sm:block">
 										<Image
 											src={post.data.image}
 											alt={post.data.title}
@@ -59,15 +59,15 @@ function BlogList() {
 									</div>
 								)}
 								<div className="flex-1 min-w-0">
-									<h2 className="text-sm font-medium tracking-tight text-neutral-800 dark:text-neutral-200 group-hover:text-neutral-950 dark:group-hover:text-white transition-colors">
+									<h2 className="text-lg font-medium tracking-tight text-neutral-800 dark:text-neutral-200 group-hover:text-neutral-950 dark:group-hover:text-white transition-colors">
 										{post.data.title}
 									</h2>
 									{post.data.description && (
-										<p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400 line-clamp-1">
+										<p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400 line-clamp-1 max-w-4xl">
 											{post.data.description}
 										</p>
 									)}
-									<div className="mt-2 flex items-center gap-2 text-[11px] font-mono text-neutral-400 dark:text-neutral-500">
+									<div className="mt-2 flex flex-wrap items-center gap-2 text-[11px] font-mono text-neutral-400 dark:text-neutral-500">
 										{post.data.author?.name && (
 											<>
 												<span className="text-neutral-500 dark:text-neutral-400">
@@ -77,20 +77,14 @@ function BlogList() {
 											</>
 										)}
 										<span>{formatDate(post.data.date)}</span>
-										{post.data.tags && post.data.tags.length > 0 && (
-											<>
-												<span>&middot;</span>
-												{post.data.tags.slice(0, 3).map((tag: string) => (
-													<span
-														key={tag}
-														className="text-neutral-400 dark:text-neutral-600"
-													>
-														#{tag}
-													</span>
-												))}
-											</>
-										)}
 									</div>
+									{post.data.tags && post.data.tags.length > 0 && (
+										<div className="mt-1.5 flex flex-wrap items-center gap-2 text-[11px] font-mono text-neutral-400 dark:text-neutral-500">
+											{post.data.tags.slice(0, 3).map((tag: string) => (
+												<span key={tag}>#{tag}</span>
+											))}
+										</div>
+									)}
 								</div>
 								<span className="shrink-0 text-[11px] font-mono text-neutral-300 dark:text-neutral-600 group-hover:text-neutral-500 dark:group-hover:text-neutral-400 transition-colors self-center">
 									&rarr;
@@ -138,52 +132,7 @@ export default async function Page({
 
 			{/* Right panel — blog content */}
 			<div className="w-full lg:w-[70%] flex flex-col">
-				<div className="relative px-5 sm:px-6 lg:px-8 pb-24 pt-8 lg:pt-16">
-					{/* Header */}
-					<h1 className="text-3xl md:text-4xl font-semibold tracking-tight text-neutral-800 dark:text-neutral-200">
-						{title}
-					</h1>
-					{description && (
-						<p className="mt-2 text-neutral-500 dark:text-neutral-400">
-							{description}
-						</p>
-					)}
-
-					{/* Author & date */}
-					<div className="mt-4 mb-8 flex items-center gap-3 text-sm text-neutral-500 dark:text-neutral-400">
-						{page.data?.author?.name && (
-							<span className="font-medium text-neutral-700 dark:text-neutral-300">
-								{page.data.author.name}
-							</span>
-						)}
-						{page.data?.author?.twitter && (
-							<>
-								<span>&middot;</span>
-								<a
-									href={`https://x.com/${page.data.author.twitter}`}
-									target="_blank"
-									rel="noreferrer noopener"
-									className="text-xs font-mono hover:text-neutral-700 dark:hover:text-neutral-200 transition-colors"
-								>
-									@{page.data.author.twitter}
-								</a>
-							</>
-						)}
-						{date && (
-							<>
-								<span>&middot;</span>
-								<time
-									dateTime={String(date)}
-									className="text-xs font-mono text-neutral-400 dark:text-neutral-500"
-								>
-									{formatDate(date)}
-								</time>
-							</>
-						)}
-					</div>
-
-					<div className="border-t border-dashed border-foreground/10 mb-8" />
-
+				<div className="relative px-5 sm:px-6 lg:px-8 pb-24 pt-8 lg:py-24">
 					{/* Article body */}
 					<article className="prose prose-neutral dark:prose-invert max-w-3xl prose-headings:tracking-tight prose-a:decoration-dashed prose-a:underline-offset-4 prose-pre:rounded-none prose-pre:border prose-pre:border-foreground/10 prose-img:rounded-none">
 						<MDX
diff --git a/landing/components/blog/blog-left-panel.tsx b/landing/components/blog/blog-left-panel.tsx
index bfcdb6a240..f3d8d13805 100644
--- a/landing/components/blog/blog-left-panel.tsx
+++ b/landing/components/blog/blog-left-panel.tsx
@@ -30,33 +30,7 @@ export function BlogLeftPanel({ postCount, post }: BlogLeftPanelProps) {
 				<div className="hidden lg:block">
 					<HalftoneBackground />
 				</div>
-				{/* Mobile: just a back link */}
-				<div className="relative w-full py-4 lg:hidden">
-					<Link
-						href="/blog"
-						className="flex items-center gap-1.5 text-foreground/40 hover:text-foreground/70 transition-colors group w-fit"
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="12"
-							height="12"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							strokeWidth="2"
-							strokeLinecap="round"
-							strokeLinejoin="round"
-							className="transition-transform group-hover:-translate-x-0.5"
-						>
-							<path d="m15 18-6-6 6-6" />
-						</svg>
-						<span className="text-[11px] uppercase tracking-wider">
-							All posts
-						</span>
-					</Link>
-				</div>
-				{/* Desktop: full panel with title, meta, TOC */}
-				<div className="relative w-full hidden lg:flex flex-col justify-center lg:h-dvh">
+				<div className="relative w-full py-16 lg:py-0 flex flex-col justify-center lg:h-dvh">
 					<div className="space-y-4">
 						<Link
 							href="/blog"
@@ -81,25 +55,40 @@ export function BlogLeftPanel({ postCount, post }: BlogLeftPanelProps) {
 							</span>
 						</Link>
 
-						<div className="space-y-1 pt-1">
-							<h1 className="text-lg md:text-xl lg:text-2xl text-neutral-800 dark:text-neutral-200 tracking-tight leading-tight">
+						<div className="space-y-1 pt-1 max-w-md">
+							<h1 className="text-2xl lg:text-3xl text-neutral-800 dark:text-neutral-200 tracking-tight leading-tight">
 								{post.title}
 							</h1>
 							{post.description && (
-								<p className="text-[11px] text-foreground/40 leading-relaxed max-w-[280px] pt-0.5">
+								<p className="text-xs text-foreground/40 leading-relaxed pt-0.5">
 									{post.description}
 								</p>
 							)}
 						</div>
 
-						<div className="flex items-center gap-2 text-[11px] font-mono text-foreground/40">
+						<div className="flex flex-wrap items-center gap-2 text-[11px] font-mono text-foreground/40">
 							{post.author?.name && (
 								<span className="text-foreground/60">{post.author.name}</span>
 							)}
-							{post.author?.name && post.date && (
-								<span className="text-foreground/20">&middot;</span>
+							{post.author?.twitter && (
+								<>
+									<span className="text-foreground/20">&middot;</span>
+									<a
+										href={`https://x.com/${post.author.twitter}`}
+										target="_blank"
+										rel="noreferrer noopener"
+										className="text-foreground/40 hover:text-foreground/70 transition-colors"
+									>
+										@{post.author.twitter}
+									</a>
+								</>
+							)}
+							{post.date && (
+								<>
+									<span className="text-foreground/20">&middot;</span>
+									<span>{formatDate(post.date)}</span>
+								</>
 							)}
-							{post.date && <span>{formatDate(post.date)}</span>}
 						</div>
 					</div>
 				</div>