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

Add fluid typography scale and responsive headings

Browse Source
This commit is contained in:
gbanyan
2025-11-19 00:22:09 +08:00
parent b4ee8b122f
commit dc5ca97fee
9 changed files with 256 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,8 @@ import { PostToc } from '@/components/post-toc';
import { ScrollReveal } from '@/components/scroll-reveal';
import { PostCard } from '@/components/post-card';
import { PostStorylineNav } from '@/components/post-storyline-nav';
import { SectionDivider } from '@/components/section-divider';
import { FooterCue } from '@/components/footer-cue';
export function generateStaticParams() {
return allPosts.map((post) => ({
@@ -48,77 +50,87 @@ export default function BlogPostPage({ params }: Props) {
<PostToc />
</aside>
<div className="flex-1 space-y-6">
<ScrollReveal>
<header className="mb-2 space-y-2">
{post.published_at && (
<p className="text-xs text-slate-500 dark:text-slate-500">
{new Date(post.published_at).toLocaleDateString(
siteConfig.defaultLocale
)}
</p>
)}
<h1 className="text-2xl font-bold leading-tight text-slate-900 sm:text-3xl dark:text-slate-50">
{post.title}
</h1>
{post.tags && (
<div className="flex flex-wrap gap-2 pt-1">
{post.tags.map((t) => (
<Link
key={t}
href={`/tags/${encodeURIComponent(
t.toLowerCase().replace(/\s+/g, '-')
)}`}
className="rounded-full bg-accent-soft px-2 py-0.5 text-xs text-accent-textLight transition hover:bg-accent hover:text-white dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700"
>
#{t}
</Link>
))}
</div>
)}
</header>
</ScrollReveal>
<SectionDivider>
<ScrollReveal>
<header className="mb-2 space-y-2">
{post.published_at && (
<p className="type-small text-slate-500 dark:text-slate-500">
{new Date(post.published_at).toLocaleDateString(
siteConfig.defaultLocale
)}
</p>
)}
<h1 className="type-display font-bold leading-tight text-slate-900 dark:text-slate-50">
{post.title}
</h1>
{post.tags && (
<div className="flex flex-wrap gap-2 pt-1">
{post.tags.map((t) => (
<Link
key={t}
href={`/tags/${encodeURIComponent(
t.toLowerCase().replace(/\s+/g, '-')
)}`}
className="tag-chip rounded-full bg-accent-soft px-2 py-0.5 text-xs text-accent-textLight dark:bg-slate-800 dark:text-slate-100"
>
#{t}
</Link>
))}
</div>
)}
</header>
</ScrollReveal>
</SectionDivider>
<ScrollReveal>
<article className="prose prose-lg prose-slate max-w-none dark:prose-dark">
{post.feature_image && (
// feature_image is stored as "../assets/xyz", serve from "/assets/xyz"
// eslint-disable-next-line @next/next/no-img-element
<img
src={post.feature_image.replace('../assets', '/assets')}
alt={post.title}
className="my-4 rounded"
/>
)}
<div dangerouslySetInnerHTML={{ __html: post.body.html }} />
</article>
</ScrollReveal>
<SectionDivider>
<ScrollReveal>
<article className="prose prose-lg prose-slate max-w-none dark:prose-dark">
{post.feature_image && (
// feature_image is stored as "../assets/xyz", serve from "/assets/xyz"
// eslint-disable-next-line @next/next/no-img-element
<img
src={post.feature_image.replace('../assets', '/assets')}
alt={post.title}
className="my-4 rounded"
/>
)}
<div dangerouslySetInnerHTML={{ __html: post.body.html }} />
</article>
</ScrollReveal>
</SectionDivider>
<ScrollReveal>
<PostStorylineNav
current={post}
newer={neighbors.newer}
older={neighbors.older}
/>
</ScrollReveal>
<FooterCue />
<SectionDivider>
<ScrollReveal>
<PostStorylineNav
current={post}
newer={neighbors.newer}
older={neighbors.older}
/>
</ScrollReveal>
</SectionDivider>
{relatedPosts.length > 0 && (
<ScrollReveal>
<section className="space-y-4 rounded-xl border border-slate-200 bg-white/80 p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900/50">
<div className="flex items-center justify-between gap-2">
<h2 className="text-base font-semibold text-slate-900 dark:text-slate-50">
相關文章
</h2>
<p className="text-xs text-slate-500 dark:text-slate-400">
為你挑選相似主題
</p>
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{relatedPosts.map((related) => (
<PostCard key={related._id} post={related} showTags={false} />
))}
</div>
</section>
</ScrollReveal>
<SectionDivider>
<ScrollReveal>
<section className="space-y-4 rounded-xl border border-slate-200 bg-white/80 p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900/50">
<div className="flex items-center justify-between gap-2">
<h2 className="type-subtitle font-semibold text-slate-900 dark:text-slate-50">
相關文章
</h2>
<p className="type-small text-slate-500 dark:text-slate-400">
為你挑選相似主題
</p>
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{relatedPosts.map((related) => (
<PostCard key={related._id} post={related} showTags={false} />
))}
</div>
</section>
</ScrollReveal>
</SectionDivider>
)}
</div>
</div>

4
app/blog/page.tsx
View File

@@ -11,10 +11,10 @@ export default function BlogIndexPage() {
return (
<section className="space-y-4">
<header className="space-y-1">
<h1 className="text-lg font-semibold text-slate-900 dark:text-slate-50">
<h1 className="type-title font-semibold text-slate-900 dark:text-slate-50">
所有文章
</h1>
<p className="text-xs text-slate-500 dark:text-slate-400">
<p className="type-small text-slate-500 dark:text-slate-400">
繼續往下滑，慢慢逛逛。
</p>
</header>