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

Stage all layout updates

Browse Source
This commit is contained in:
Gbanyan
2025-11-19 17:38:45 +08:00
parent 7ca7655e40
commit a249a120a5
15 changed files with 424 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,8 +6,8 @@ import { allPosts } from 'contentlayer/generated';
import { getPostBySlug, getRelatedPosts, getPostNeighbors } from '@/lib/posts'; import { getPostBySlug, getRelatedPosts, getPostNeighbors } from '@/lib/posts';
import { siteConfig } from '@/lib/config'; import { siteConfig } from '@/lib/config';
import { ReadingProgress } from '@/components/reading-progress'; import { ReadingProgress } from '@/components/reading-progress';
import { PostToc } from '@/components/post-toc';
import { ScrollReveal } from '@/components/scroll-reveal'; import { ScrollReveal } from '@/components/scroll-reveal';
import { PostLayout } from '@/components/post-layout';
import { PostCard } from '@/components/post-card'; import { PostCard } from '@/components/post-card';
import { PostStorylineNav } from '@/components/post-storyline-nav'; import { PostStorylineNav } from '@/components/post-storyline-nav';
import { SectionDivider } from '@/components/section-divider'; import { SectionDivider } from '@/components/section-divider';
@@ -43,17 +43,16 @@ export default function BlogPostPage({ params }: Props) {
const relatedPosts = getRelatedPosts(post, 3); const relatedPosts = getRelatedPosts(post, 3);
const neighbors = getPostNeighbors(post); const neighbors = getPostNeighbors(post);
const hasToc = /<h[23]/.test(post.body.html);
return ( return (
<> <>
<ReadingProgress /> <ReadingProgress />
<div className="flex gap-6 pt-4"> <PostLayout hasToc={hasToc}>
<aside className="hidden shrink-0 lg:block lg:w-44"> <div className="space-y-8">
<PostToc />
</aside>
<div className="flex-1 space-y-6">
<SectionDivider> <SectionDivider>
<ScrollReveal> <ScrollReveal>
<header className="mb-2 space-y-2"> <header className="mb-6 space-y-4 text-center">
{post.published_at && ( {post.published_at && (
<p className="type-small text-slate-500 dark:text-slate-500"> <p className="type-small text-slate-500 dark:text-slate-500">
{new Date(post.published_at).toLocaleDateString( {new Date(post.published_at).toLocaleDateString(
@@ -65,14 +64,14 @@ export default function BlogPostPage({ params }: Props) {
{post.title} {post.title}
</h1> </h1>
{post.tags && ( {post.tags && (
<div className="flex flex-wrap gap-2 pt-1"> <div className="flex flex-wrap justify-center gap-2 pt-2">
{post.tags.map((t) => ( {post.tags.map((t) => (
<Link <Link
key={t} key={t}
href={`/tags/${encodeURIComponent( href={`/tags/${encodeURIComponent(
t.toLowerCase().replace(/\s+/g, '-') 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" className="tag-chip rounded-full bg-accent-soft px-3 py-1 text-sm text-accent-textLight dark:bg-slate-800 dark:text-slate-100"
> >
#{t} #{t}
</Link> </Link>
@@ -85,16 +84,18 @@ export default function BlogPostPage({ params }: Props) {
<SectionDivider> <SectionDivider>
<ScrollReveal> <ScrollReveal>
<article className="prose prose-lg prose-slate max-w-none dark:prose-dark"> <article className="prose prose-lg prose-slate mx-auto max-w-none dark:prose-dark">
{post.feature_image && ( {post.feature_image && (
<Image <div className="-mx-4 mb-8 transition-all duration-500 sm:-mx-12 lg:-mx-20 group-[.toc-open]:lg:-mx-4">
src={post.feature_image.replace('../assets', '/assets')} <Image
alt={post.title} src={post.feature_image.replace('../assets', '/assets')}
width={1200} alt={post.title}
height={600} width={1200}
className="my-4 rounded" height={600}
/> className="w-full rounded-xl shadow-lg"
)} />
</div>
)}
<div dangerouslySetInnerHTML={{ __html: post.body.html }} /> <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
</article> </article>
</ScrollReveal> </ScrollReveal>
@@ -115,7 +116,7 @@ export default function BlogPostPage({ params }: Props) {
{relatedPosts.length > 0 && ( {relatedPosts.length > 0 && (
<SectionDivider> <SectionDivider>
<ScrollReveal> <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"> <section className="space-y-6 rounded-2xl border border-slate-200/60 bg-slate-50/50 p-8 dark:border-slate-800 dark:bg-slate-900/30">
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<h2 className="type-subtitle font-semibold text-slate-900 dark:text-slate-50"> <h2 className="type-subtitle font-semibold text-slate-900 dark:text-slate-50">
相關文章 相關文章
@@ -124,7 +125,7 @@ export default function BlogPostPage({ params }: Props) {
為你挑選相似主題 為你挑選相似主題
</p> </p>
</div> </div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{relatedPosts.map((related) => ( {relatedPosts.map((related) => (
<PostCard key={related._id} post={related} showTags={false} /> <PostCard key={related._id} post={related} showTags={false} />
))} ))}
@@ -134,7 +135,7 @@ export default function BlogPostPage({ params }: Props) {
</SectionDivider> </SectionDivider>
)} )}
</div> </div>
</div> </PostLayout>
</> </>
); );
} }

21
app/blog/page.tsx
View File

@@ -1,6 +1,7 @@
import { getAllPostsSorted } from '@/lib/posts'; import { getAllPostsSorted } from '@/lib/posts';
import { PostListWithControls } from '@/components/post-list-with-controls'; import { PostListWithControls } from '@/components/post-list-with-controls';
import { TimelineWrapper } from '@/components/timeline-wrapper'; import { TimelineWrapper } from '@/components/timeline-wrapper';
import { SidebarLayout } from '@/components/sidebar-layout';
export const metadata = { export const metadata = {
title: '所有文章' title: '所有文章'
@@ -11,15 +12,17 @@ export default function BlogIndexPage() {
return ( return (
<section className="space-y-4"> <section className="space-y-4">
<header className="space-y-1"> <SidebarLayout>
<h1 className="type-title font-semibold text-slate-900 dark:text-slate-50"> <header className="space-y-1">
所有文章 <h1 className="type-title font-semibold text-slate-900 dark:text-slate-50">
</h1> 所有文章
<p className="type-small text-slate-500 dark:text-slate-400"> </h1>
繼續往下滑，慢慢逛逛。 <p className="type-small text-slate-500 dark:text-slate-400">
</p> 繼續往下滑，慢慢逛逛。
</header> </p>
<PostListWithControls posts={posts} /> </header>
<PostListWithControls posts={posts} />
</SidebarLayout>
</section> </section>
); );
} }

9
app/layout.tsx
View File

@@ -3,6 +3,13 @@ import type { Metadata } from 'next';
import { siteConfig } from '@/lib/config'; import { siteConfig } from '@/lib/config';
import { LayoutShell } from '@/components/layout-shell'; import { LayoutShell } from '@/components/layout-shell';
import { ThemeProvider } from 'next-themes'; import { ThemeProvider } from 'next-themes';
import { Playfair_Display } from 'next/font/google';
const playfair = Playfair_Display({
subsets: ['latin'],
variable: '--font-serif-eng',
display: 'swap',
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
@@ -38,7 +45,7 @@ export default function RootLayout({
const theme = siteConfig.theme; const theme = siteConfig.theme;
return ( return (
<html lang={siteConfig.defaultLocale} suppressHydrationWarning> <html lang={siteConfig.defaultLocale} suppressHydrationWarning className={playfair.variable}>
<body> <body>
<style <style
// Set CSS variables for accent colors (light + dark variants) // Set CSS variables for accent colors (light + dark variants)

53
app/page.tsx
View File

@@ -3,39 +3,42 @@ import { getAllPostsSorted } from '@/lib/posts';
import { siteConfig } from '@/lib/config'; import { siteConfig } from '@/lib/config';
import { PostListItem } from '@/components/post-list-item'; import { PostListItem } from '@/components/post-list-item';
import { TimelineWrapper } from '@/components/timeline-wrapper'; import { TimelineWrapper } from '@/components/timeline-wrapper';
import { SidebarLayout } from '@/components/sidebar-layout';
export default function HomePage() { export default function HomePage() {
const posts = getAllPostsSorted().slice(0, siteConfig.postsPerPage); const posts = getAllPostsSorted().slice(0, siteConfig.postsPerPage);
return ( return (
<section className="space-y-6"> <section className="space-y-6">
<header className="space-y-1 text-center"> <SidebarLayout>
<h1 className="type-title font-bold text-slate-900 dark:text-slate-50"> <header className="space-y-1 text-center">
{siteConfig.name} 的最新動態 <h1 className="type-title font-bold text-slate-900 dark:text-slate-50">
</h1> {siteConfig.name} 的最新動態
<p className="type-small text-slate-600 dark:text-slate-300"> </h1>
{siteConfig.tagline} <p className="type-small text-slate-600 dark:text-slate-300">
</p> {siteConfig.tagline}
</header> </p>
</header>
<div> <div>
<div className="mb-3 flex items-baseline justify-between"> <div className="mb-3 flex items-baseline justify-between">
<h2 className="type-small font-semibold uppercase tracking-[0.4em] text-slate-500 dark:text-slate-400"> <h2 className="type-small font-semibold uppercase tracking-[0.4em] text-slate-500 dark:text-slate-400">
最新文章 最新文章
</h2> </h2>
<Link <Link
href="/blog" href="/blog"
className="text-xs text-blue-600 hover:underline dark:text-blue-400" className="text-xs text-blue-600 hover:underline dark:text-blue-400"
> >
所有文章 → 所有文章 →
</Link> </Link>
</div>
<TimelineWrapper>
{posts.map((post) => (
<PostListItem key={post._id} post={post} />
))}
</TimelineWrapper>
</div> </div>
<TimelineWrapper> </SidebarLayout>
{posts.map((post) => (
<PostListItem key={post._id} post={post} />
))}
</TimelineWrapper>
</div>
</section> </section>
); );
} }

102
app/pages/[slug]/page.tsx
View File

@@ -6,7 +6,9 @@ import { allPages } from 'contentlayer/generated';
import { getPageBySlug } from '@/lib/posts'; import { getPageBySlug } from '@/lib/posts';
import { siteConfig } from '@/lib/config'; import { siteConfig } from '@/lib/config';
import { ReadingProgress } from '@/components/reading-progress'; import { ReadingProgress } from '@/components/reading-progress';
import { PostToc } from '@/components/post-toc'; import { PostLayout } from '@/components/post-layout';
import { ScrollReveal } from '@/components/scroll-reveal';
import { SectionDivider } from '@/components/section-divider';
export function generateStaticParams() { export function generateStaticParams() {
return allPages.map((page) => ({ return allPages.map((page) => ({
@@ -35,55 +37,65 @@ export default function StaticPage({ params }: Props) {
if (!page) return notFound(); if (!page) return notFound();
const hasToc = /<h[23]/.test(page.body.html);
return ( return (
<> <>
<ReadingProgress /> <ReadingProgress />
<div className="flex gap-6 pt-4"> <PostLayout hasToc={hasToc}>
<aside className="hidden shrink-0 lg:block lg:w-44"> <div className="space-y-8">
<PostToc /> <SectionDivider>
</aside> <ScrollReveal>
<div className="flex-1"> <header className="mb-6 space-y-4 text-center">
<header className="mb-6 space-y-2"> {page.published_at && (
{page.published_at && ( <p className="type-small text-slate-500 dark:text-slate-500">
<p className="text-xs text-slate-500 dark:text-slate-500"> {new Date(page.published_at).toLocaleDateString(
{new Date(page.published_at).toLocaleDateString( siteConfig.defaultLocale
siteConfig.defaultLocale )}
</p>
)} )}
</p> <h1 className="type-display font-bold leading-tight text-slate-900 dark:text-slate-50">
)} {page.title}
<h1 className="text-2xl font-bold leading-tight text-slate-900 sm:text-3xl dark:text-slate-50"> </h1>
{page.title} {page.tags && (
</h1> <div className="flex flex-wrap justify-center gap-2 pt-2">
{page.tags && ( {page.tags.map((t) => (
<div className="flex flex-wrap gap-2 pt-1"> <Link
{page.tags.map((t) => ( key={t}
<Link href={`/tags/${encodeURIComponent(
key={t} t.toLowerCase().replace(/\s+/g, '-')
href={`/tags/${encodeURIComponent( )}`}
t.toLowerCase().replace(/\s+/g, '-') className="tag-chip rounded-full bg-accent-soft px-3 py-1 text-sm text-accent-textLight dark:bg-slate-800 dark:text-slate-100"
)}`} >
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>
#{t} ))}
</Link> </div>
))} )}
</div> </header>
)} </ScrollReveal>
</header> </SectionDivider>
<article className="prose prose-lg prose-slate max-w-none dark:prose-dark">
{page.feature_image && ( <SectionDivider>
<Image <ScrollReveal>
src={page.feature_image.replace('../assets', '/assets')} <article className="prose prose-lg prose-slate mx-auto max-w-none dark:prose-dark">
alt={page.title} {page.feature_image && (
width={1200} <div className="-mx-4 mb-8 transition-all duration-500 sm:-mx-12 lg:-mx-20 group-[.toc-open]:lg:-mx-4">
height={600} <Image
className="my-4 rounded" src={page.feature_image.replace('../assets', '/assets')}
/> alt={page.title}
)} width={1200}
<div dangerouslySetInnerHTML={{ __html: page.body.html }} /> height={600}
</article> className="w-full rounded-xl shadow-lg"
/>
</div>
)}
<div dangerouslySetInnerHTML={{ __html: page.body.html }} />
</article>
</ScrollReveal>
</SectionDivider>
</div> </div>
</div> </PostLayout>
</> </>
); );
} }

30
app/tags/[tag]/page.tsx
View File

@@ -2,6 +2,11 @@ import type { Metadata } from 'next';
import { allPosts } from 'contentlayer/generated'; import { allPosts } from 'contentlayer/generated';
import { PostListWithControls } from '@/components/post-list-with-controls'; import { PostListWithControls } from '@/components/post-list-with-controls';
import { getTagSlug } from '@/lib/posts'; import { getTagSlug } from '@/lib/posts';
import { SidebarLayout } from '@/components/sidebar-layout';
import { SectionDivider } from '@/components/section-divider';
import { ScrollReveal } from '@/components/scroll-reveal';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTag } from '@fortawesome/free-solid-svg-icons';
export function generateStaticParams() { export function generateStaticParams() {
const slugs = new Set<string>(); const slugs = new Set<string>();
@@ -43,11 +48,26 @@ export default function TagPage({ params }: Props) {
posts[0]?.tags?.find((t) => getTagSlug(t) === slug) ?? params.tag; posts[0]?.tags?.find((t) => getTagSlug(t) === slug) ?? params.tag;
return ( return (
<section className="space-y-4"> <SidebarLayout>
<h1 className="text-lg font-semibold text-slate-900 dark:text-slate-50"> <SectionDivider>
標籤：{tagLabel} <ScrollReveal>
</h1> <div className="motion-card mb-8 rounded-2xl border border-white/40 bg-white/60 p-8 text-center shadow-lg backdrop-blur-md dark:border-white/10 dark:bg-slate-900/60">
<div className="inline-flex items-center gap-2 text-accent">
<FontAwesomeIcon icon={faTag} className="h-5 w-5" />
<span className="type-small uppercase tracking-[0.4em] text-slate-500 dark:text-slate-400">
TAG ARCHIVE
</span>
</div>
<h1 className="type-title mt-2 font-semibold text-slate-900 dark:text-slate-50">
{tagLabel}
</h1>
<p className="type-small mt-2 text-slate-600 dark:text-slate-300">
收錄 {posts.length} 篇文章
</p>
</div>
</ScrollReveal>
</SectionDivider>
<PostListWithControls posts={posts} /> <PostListWithControls posts={posts} />
</section> </SidebarLayout>
); );
} }

91
app/tags/page.tsx
View File

@@ -5,6 +5,7 @@ import { faTags, faFire } from '@fortawesome/free-solid-svg-icons';
import { getAllTagsWithCount } from '@/lib/posts'; import { getAllTagsWithCount } from '@/lib/posts';
import { SectionDivider } from '@/components/section-divider'; import { SectionDivider } from '@/components/section-divider';
import { ScrollReveal } from '@/components/scroll-reveal'; import { ScrollReveal } from '@/components/scroll-reveal';
import { SidebarLayout } from '@/components/sidebar-layout';
export const metadata: Metadata = { export const metadata: Metadata = {
title: '標籤索引' title: '標籤索引'
@@ -24,52 +25,54 @@ export default function TagIndexPage() {
return ( return (
<section className="space-y-6"> <section className="space-y-6">
<SectionDivider> <SidebarLayout>
<ScrollReveal> <SectionDivider>
<div className="motion-card rounded-2xl border bg-white/90 p-6 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900"> <ScrollReveal>
<div className="inline-flex items-center gap-2 text-accent"> <div className="motion-card rounded-2xl border border-white/40 bg-white/60 p-8 text-center shadow-lg backdrop-blur-md dark:border-white/10 dark:bg-slate-900/60">
<FontAwesomeIcon icon={faTags} className="h-5 w-5" /> <div className="inline-flex items-center gap-2 text-accent">
<span className="type-small uppercase tracking-[0.4em] text-slate-500 dark:text-slate-400"> <FontAwesomeIcon icon={faTags} className="h-5 w-5" />
標籤索引 <span className="type-small uppercase tracking-[0.4em] text-slate-500 dark:text-slate-400">
</span> 標籤索引
</div>
<h1 className="type-title mt-2 font-semibold text-slate-900 dark:text-slate-50">
共 {tags.length} 組主題，任你探索
</h1>
<p className="type-small mt-2 text-slate-600 dark:text-slate-300">
熱度最高的標籤：
{topTags.map((t) => t.tag).join('、')}
</p>
</div>
</ScrollReveal>
</SectionDivider>
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
{tags.map(({ tag, slug, count }, index) => {
const color = colorClasses[index % colorClasses.length];
return (
<Link
key={tag}
href={`/tags/${slug}`}
className="motion-card flex flex-col rounded-xl border bg-white/90 p-4 shadow-sm transition hover:-translate-y-1 dark:border-slate-800 dark:bg-slate-900"
>
<span className={`mb-3 block h-1.5 w-16 rounded-full bg-gradient-to-r ${color}`} aria-hidden="true" />
<div className="flex items-center justify-between">
<h2 className="type-subtitle font-semibold text-slate-900 dark:text-slate-50">
{tag}
</h2>
<span className="type-small text-slate-600 dark:text-slate-300">
{count} 篇
</span> </span>
</div> </div>
<span className="mt-1 inline-flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400"> <h1 className="type-title mt-2 font-semibold text-slate-900 dark:text-slate-50">
<FontAwesomeIcon icon={faFire} className="h-3 w-3" /> 共 {tags.length} 組主題，任你探索
熱度 #{index + 1} </h1>
</span> <p className="type-small mt-2 text-slate-600 dark:text-slate-300">
</Link> 熱度最高的標籤：
); {topTags.map((t) => t.tag).join('、')}
})} </p>
</div> </div>
</ScrollReveal>
</SectionDivider>
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
{tags.map(({ tag, slug, count }, index) => {
const color = colorClasses[index % colorClasses.length];
return (
<Link
key={tag}
href={`/tags/${slug}`}
className="motion-card group flex flex-col rounded-2xl border border-white/40 bg-white/60 p-5 shadow-sm backdrop-blur-md transition-all hover:-translate-y-1 hover:shadow-xl dark:border-white/10 dark:bg-slate-900/60"
>
<span className={`mb-3 block h-1.5 w-16 rounded-full bg-gradient-to-r ${color}`} aria-hidden="true" />
<div className="flex items-center justify-between">
<h2 className="type-subtitle font-semibold text-slate-900 group-hover:text-blue-600 dark:text-slate-50 dark:group-hover:text-blue-400">
{tag}
</h2>
<span className="type-small text-slate-600 dark:text-slate-300">
{count} 篇
</span>
</div>
<span className="mt-1 inline-flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400">
<FontAwesomeIcon icon={faFire} className="h-3 w-3 text-orange-400" />
熱度 #{index + 1}
</span>
</Link>
);
})}
</div>
</SidebarLayout>
</section> </section>
); );
} }

15
app/template.tsx Normal file
View File

@@ -0,0 +1,15 @@
'use client';
import { motion } from 'framer-motion';
export default function Template({ children }: { children: React.ReactNode }) {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3, ease: 'easeOut' }}
>
{children}
</motion.div>
);
}

7
components/layout-shell.tsx
View File

@@ -1,6 +1,6 @@
import { SiteHeader } from './site-header'; import { SiteHeader } from './site-header';
import { SiteFooter } from './site-footer'; import { SiteFooter } from './site-footer';
import { RightSidebar } from './right-sidebar';
import { BackToTop } from './back-to-top'; import { BackToTop } from './back-to-top';
export function LayoutShell({ children }: { children: React.ReactNode }) { export function LayoutShell({ children }: { children: React.ReactNode }) {
@@ -8,10 +8,7 @@ export function LayoutShell({ children }: { children: React.ReactNode }) {
<div className="flex min-h-screen flex-col"> <div className="flex min-h-screen flex-col">
<SiteHeader /> <SiteHeader />
<main className="flex-1 container mx-auto px-4 py-6"> <main className="flex-1 container mx-auto px-4 py-6">
<div className="grid gap-8 lg:grid-cols-[minmax(0,3fr)_minmax(0,1.4fr)]"> {children}
<div>{children}</div>
<RightSidebar />
</div>
</main> </main>
<SiteFooter /> <SiteFooter />
<BackToTop /> <BackToTop />

75
components/post-layout.tsx Normal file
View File

@@ -0,0 +1,75 @@
'use client';
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faListUl, faChevronRight, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
import { PostToc } from './post-toc';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
export function PostLayout({ children, hasToc = true }: { children: React.ReactNode; hasToc?: boolean }) {
const [isTocOpen, setIsTocOpen] = useState(hasToc);
return (
<div className="relative">
<div className={cn(
"group grid gap-8 transition-all duration-500 ease-snappy",
isTocOpen && hasToc ? "lg:grid-cols-[1fr_16rem] toc-open" : "lg:grid-cols-[1fr_0rem]"
)}>
{/* Main Content Area */}
<div className="min-w-0">
<motion.div
layout
className={cn("mx-auto transition-all duration-500 ease-snappy", isTocOpen && hasToc ? "max-w-3xl" : "max-w-4xl")}
>
{children}
</motion.div>
</div>
{/* Sidebar (TOC) */}
<aside className="hidden lg:block">
<div className="sticky top-24 h-[calc(100vh-6rem)] overflow-hidden">
<AnimatePresence mode="wait">
{isTocOpen && hasToc && (
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 20 }}
transition={{ duration: 0.3 }}
className="h-full overflow-y-auto pr-2"
>
<PostToc />
</motion.div>
)}
</AnimatePresence>
</div>
</aside>
</div>
{/* Toggle Button (Glassmorphism Pill) */}
{hasToc && (
<motion.button
layout
onClick={() => setIsTocOpen(!isTocOpen)}
className={cn(
"fixed bottom-8 right-20 z-50 flex items-center gap-2 rounded-full border border-white/20 bg-white/80 px-4 py-2.5 shadow-lg backdrop-blur-md transition-all hover:bg-white hover:scale-105 dark:border-white/10 dark:bg-slate-900/80 dark:hover:bg-slate-900",
"text-sm font-medium text-slate-600 dark:text-slate-300"
)}
whileTap={{ scale: 0.95 }}
aria-label="Toggle Table of Contents"
>
<FontAwesomeIcon
icon={isTocOpen ? faChevronRight : faListUl}
className="h-3.5 w-3.5"
/>
<span>{isTocOpen ? 'Hide' : 'Menu'}</span>
</motion.button>
)}
</div>
);
}

2
components/post-list-item.tsx
View File

@@ -19,7 +19,7 @@ export function PostListItem({ post }: Props) {
post.description || post.custom_excerpt || post.body?.raw?.slice(0, 120); post.description || post.custom_excerpt || post.body?.raw?.slice(0, 120);
return ( return (
<article className="motion-card group relative flex gap-4 rounded-lg border border-slate-200/70 bg-white/90 p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900/80"> <article className="motion-card group relative flex gap-4 rounded-2xl border border-white/40 bg-white/60 p-5 shadow-lg backdrop-blur-md transition-all hover:scale-[1.01] hover:shadow-xl dark:border-white/10 dark:bg-slate-900/60">
<div className="pointer-events-none absolute inset-x-0 top-0 h-0.5 origin-left scale-x-0 bg-gradient-to-r from-blue-500 via-sky-400 to-indigo-500 opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100 dark:from-blue-400 dark:via-sky-300 dark:to-indigo-400" /> <div className="pointer-events-none absolute inset-x-0 top-0 h-0.5 origin-left scale-x-0 bg-gradient-to-r from-blue-500 via-sky-400 to-indigo-500 opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100 dark:from-blue-400 dark:via-sky-300 dark:to-indigo-400" />
{cover && ( {cover && (
<div className="relative flex h-24 w-24 flex-none overflow-hidden rounded-md bg-slate-100 dark:bg-slate-800 sm:h-auto sm:w-40"> <div className="relative flex h-24 w-24 flex-none overflow-hidden rounded-md bg-slate-100 dark:bg-slate-800 sm:h-auto sm:w-40">

10
components/sidebar-layout.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { RightSidebar } from './right-sidebar';
export function SidebarLayout({ children }: { children: React.ReactNode }) {
return (
<div className="grid gap-8 lg:grid-cols-[minmax(0,3fr)_minmax(0,1.4fr)]">
<div>{children}</div>
<RightSidebar />
</div>
);
}

61
package-lock.json generated
View File

@@ -14,6 +14,7 @@
"@fortawesome/react-fontawesome": "^3.1.0", "@fortawesome/react-fontawesome": "^3.1.0",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"contentlayer": "^0.3.4", "contentlayer": "^0.3.4",
"framer-motion": "^12.23.24",
"gray-matter": "^4.0.3", "gray-matter": "^4.0.3",
"markdown-wasm": "^1.2.0", "markdown-wasm": "^1.2.0",
"next": "^13.5.11", "next": "^13.5.11",
@@ -24,6 +25,7 @@
"rehype-autolink-headings": "^7.1.0", "rehype-autolink-headings": "^7.1.0",
"rehype-slug": "^6.0.0", "rehype-slug": "^6.0.0",
"remark-gfm": "^4.0.1", "remark-gfm": "^4.0.1",
"tailwind-merge": "^3.4.0",
"unist-util-visit": "^5.0.0" "unist-util-visit": "^5.0.0"
}, },
"devDependencies": { "devDependencies": {
@@ -4078,6 +4080,7 @@
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@rtsao/scc": "^1.1.0", "@rtsao/scc": "^1.1.0",
"array-includes": "^3.1.9", "array-includes": "^3.1.9",
@@ -4818,6 +4821,33 @@
"url": "https://github.com/sponsors/rawify" "url": "https://github.com/sponsors/rawify"
} }
}, },
"node_modules/framer-motion": {
"version": "12.23.24",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
"integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
"license": "MIT",
"dependencies": {
"motion-dom": "^12.23.23",
"motion-utils": "^12.23.6",
"tslib": "^2.4.0"
},
"peerDependencies": {
"@emotion/is-prop-valid": "*",
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@emotion/is-prop-valid": {
"optional": true
},
"react": {
"optional": true
},
"react-dom": {
"optional": true
}
}
},
"node_modules/fs-monkey": { "node_modules/fs-monkey": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.1.0.tgz", "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.1.0.tgz",
@@ -4981,9 +5011,9 @@
"license": "ISC" "license": "ISC"
}, },
"node_modules/glob": { "node_modules/glob": {
"version": "10.4.5", "version": "10.5.0",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
"integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
"dev": true, "dev": true,
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
@@ -11306,6 +11336,21 @@
"node": ">=16 || 14 >=14.17" "node": ">=16 || 14 >=14.17"
} }
}, },
"node_modules/motion-dom": {
"version": "12.23.23",
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
"integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
"license": "MIT",
"dependencies": {
"motion-utils": "^12.23.6"
}
},
"node_modules/motion-utils": {
"version": "12.23.6",
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
"integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
"license": "MIT"
},
"node_modules/mri": { "node_modules/mri": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -14236,6 +14281,16 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/tailwind-merge": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
"integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/dcastil"
}
},
"node_modules/tailwindcss": { "node_modules/tailwindcss": {
"version": "3.4.18", "version": "3.4.18",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz",

87
styles/globals.css
View File

@@ -34,12 +34,15 @@ body {
transform: translate(-50%, -10%); transform: translate(-50%, -10%);
opacity: 0; opacity: 0;
} }
15% { 15% {
opacity: 1; opacity: 1;
} }
85% { 85% {
opacity: 1; opacity: 1;
} }
100% { 100% {
transform: translate(-50%, 110%); transform: translate(-50%, 110%);
opacity: 0; opacity: 0;
@@ -122,12 +125,12 @@ body {
font-size: clamp(0.85rem, 0.2vw + 0.8rem, 0.95rem); font-size: clamp(0.85rem, 0.2vw + 0.8rem, 0.95rem);
} }
.prose h1 > a, .prose h1>a,
.prose h2 > a, .prose h2>a,
.prose h3 > a, .prose h3>a,
.prose h4 > a, .prose h4>a,
.prose h5 > a, .prose h5>a,
.prose h6 > a { .prose h6>a {
text-decoration: none !important; text-decoration: none !important;
color: inherit !important; color: inherit !important;
} }
@@ -153,13 +156,16 @@ body {
transform: translateX(-120%); transform: translateX(-120%);
opacity: 0; opacity: 0;
} }
30% { 30% {
opacity: 0.4; opacity: 0.4;
} }
60% { 60% {
transform: translateX(120%); transform: translateX(120%);
opacity: 0; opacity: 0;
} }
100% { 100% {
transform: translateX(120%); transform: translateX(120%);
opacity: 0; opacity: 0;
@@ -191,35 +197,52 @@ body {
} }
@layer components { @layer components {
.type-display { .type-display {
font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem);
line-height: 1.2; line-height: 1.2;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
} font-family: var(--font-serif-eng), "Songti SC", serif;
}
.type-title { .type-title {
font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem); font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem);
line-height: 1.3; line-height: 1.3;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
} font-family: var(--font-serif-eng), "Songti SC", serif;
letter-spacing: 0.02em;
}
.type-subtitle { .type-subtitle {
font-size: clamp(1.25rem, 0.9rem + 1vw, 1.9rem); font-size: clamp(1.25rem, 0.9rem + 1vw, 1.9rem);
line-height: 1.35; line-height: 1.35;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
} font-family: var(--font-serif-eng), "Songti SC", serif;
letter-spacing: 0.02em;
}
.type-body { .type-body {
font-size: clamp(1rem, 0.2vw + 0.9rem, 1.15rem); font-size: clamp(1rem, 0.2vw + 0.9rem, 1.15rem);
line-height: var(--line-height-body); line-height: var(--line-height-body);
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
} }
.type-small { .type-small {
font-size: clamp(0.85rem, 0.2vw + 0.8rem, 0.95rem); font-size: clamp(0.85rem, 0.2vw + 0.8rem, 0.95rem);
line-height: 1.4; line-height: 1.4;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
} }
h1 {
font-weight: 700;
letter-spacing: -0.03em;
font-family: var(--font-serif-eng), "Songti SC", serif;
}
h2 {
font-weight: 600;
letter-spacing: -0.02em;
font-family: var(--font-serif-eng), "Songti SC", serif;
}
.type-nav { .type-nav {
font-size: clamp(0.95rem, 0.2vw + 0.85rem, 1.05rem); font-size: clamp(0.95rem, 0.2vw + 0.85rem, 1.05rem);
@@ -242,4 +265,4 @@ body {
transition: color var(--motion-duration-short) var(--motion-ease-snappy), transition: color var(--motion-duration-short) var(--motion-ease-snappy),
transform var(--motion-duration-short) var(--motion-ease-snappy); transform var(--motion-duration-short) var(--motion-ease-snappy);
} }
} }

10
tailwind.config.js
View File

@@ -16,6 +16,10 @@ module.exports = {
textDark: 'var(--color-accent-text-dark)' textDark: 'var(--color-accent-text-dark)'
} }
}, },
fontFamily: {
'serif-eng': ['var(--font-serif-eng)', 'serif'],
'serif-cn': ['"Songti SC"', '"Noto Serif TC"', '"SimSun"', 'serif'],
},
transitionTimingFunction: { transitionTimingFunction: {
snappy: 'cubic-bezier(0.32, 0.72, 0, 1)' snappy: 'cubic-bezier(0.32, 0.72, 0, 1)'
}, },
@@ -54,11 +58,13 @@ module.exports = {
}, },
h1: { h1: {
fontWeight: '700', fontWeight: '700',
letterSpacing: '-0.03em' letterSpacing: '-0.03em',
fontFamily: 'var(--font-serif-eng), "Songti SC", serif',
}, },
h2: { h2: {
fontWeight: '600', fontWeight: '600',
letterSpacing: '-0.02em' letterSpacing: '-0.02em',
fontFamily: 'var(--font-serif-eng), "Songti SC", serif',
}, },
blockquote: { blockquote: {
fontStyle: 'normal', fontStyle: 'normal',