mirror of
https://github.com/better-auth/better-auth.git
synced 2026-05-22 14:21:55 -05:00
docs: improve Blog page UI (#8683)
This commit is contained in:
Taesu
GitHub
@@ -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>·</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">
|
||||
→
|
||||
@@ -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>·</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>·</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
|
||||
|
||||
@@ -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">·</span>
|
||||
{post.author?.twitter && (
|
||||
<>
|
||||
<span className="text-foreground/20">·</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">·</span>
|
||||
<span>{formatDate(post.date)}</span>
|
||||
</>
|
||||
)}
|
||||
{post.date && <span>{formatDate(post.date)}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user