gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine single post header layout and styling

Browse Source
This commit is contained in:
gbanyan
2025-11-17 18:12:09 +08:00
parent 3feeaf0fbc
commit 309e7fc2bc
1 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
app/blog/[slug]/page.tsx
View File

@@ -40,38 +40,44 @@ export default function BlogPostPage({ params }: Props) {
<aside className="hidden w-56 shrink-0 lg:block"> <aside className="hidden w-56 shrink-0 lg:block">
<PostToc /> <PostToc />
</aside> </aside>
<article className="prose prose-slate max-w-none flex-1 dark:prose-dark"> <div className="flex-1">
<h1>{post.title}</h1> <header className="mb-6 space-y-2">
{post.feature_image && ( {post.published_at && (
// feature_image is stored as "../assets/xyz", serve from "/assets/xyz" <p className="text-xs text-slate-500 dark:text-slate-400">
// eslint-disable-next-line @next/next/no-img-element {new Date(post.published_at).toLocaleDateString(
<img siteConfig.defaultLocale
src={post.feature_image.replace('../assets', '/assets')} )}
alt={post.title} </p>
className="my-4 rounded" )}
/> <h1 className="text-2xl font-bold leading-tight text-slate-900 sm:text-3xl dark:text-slate-50">
)} {post.title}
{post.published_at && ( </h1>
<p className="text-xs text-slate-500 dark:text-slate-400"> {post.tags && (
{new Date(post.published_at).toLocaleDateString( <div className="flex flex-wrap gap-2 pt-1">
siteConfig.defaultLocale {post.tags.map((t) => (
)} <span
</p> key={t}
)} className="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700 dark:bg-slate-800 dark:text-slate-200"
{post.tags && ( >
<p className="mt-1 text-xs text-slate-600 dark:text-slate-200"> #{t}
{post.tags.map((t) => ( </span>
<span ))}
key={t} </div>
className="mr-1 rounded bg-slate-100 px-1 dark:bg-slate-800" )}
> </header>
#{t} <article className="prose prose-slate max-w-none dark:prose-dark">
</span> {post.feature_image && (
))} // feature_image is stored as "../assets/xyz", serve from "/assets/xyz"
</p> // eslint-disable-next-line @next/next/no-img-element
)} <img
<div dangerouslySetInnerHTML={{ __html: post.body.html }} /> src={post.feature_image.replace('../assets', '/assets')}
</article> alt={post.title}
className="my-4 rounded"
/>
)}
<div dangerouslySetInnerHTML={{ __html: post.body.html }} />
</article>
</div>
</div> </div>
</> </>
); );