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

21
app/blog/page.tsx
View File

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

9
app/layout.tsx
View File

@@ -3,6 +3,13 @@ import type { Metadata } from 'next';
import { siteConfig } from '@/lib/config';
import { LayoutShell } from '@/components/layout-shell';
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 = {
title: {
@@ -38,7 +45,7 @@ export default function RootLayout({
const theme = siteConfig.theme;
return (
<html lang={siteConfig.defaultLocale} suppressHydrationWarning>
<html lang={siteConfig.defaultLocale} suppressHydrationWarning className={playfair.variable}>
<body>
<style
// 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 { PostListItem } from '@/components/post-list-item';
import { TimelineWrapper } from '@/components/timeline-wrapper';
import { SidebarLayout } from '@/components/sidebar-layout';
export default function HomePage() {
const posts = getAllPostsSorted().slice(0, siteConfig.postsPerPage);
return (
<section className="space-y-6">
<header className="space-y-1 text-center">
<h1 className="type-title font-bold text-slate-900 dark:text-slate-50">
{siteConfig.name} 的最新動態
</h1>
<p className="type-small text-slate-600 dark:text-slate-300">
{siteConfig.tagline}
</p>
</header>
<SidebarLayout>
<header className="space-y-1 text-center">
<h1 className="type-title font-bold text-slate-900 dark:text-slate-50">
{siteConfig.name} 的最新動態
</h1>
<p className="type-small text-slate-600 dark:text-slate-300">
{siteConfig.tagline}
</p>
</header>
<div>
<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>
<Link
href="/blog"
className="text-xs text-blue-600 hover:underline dark:text-blue-400"
>
所有文章 →
</Link>
<div>
<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>
<Link
href="/blog"
className="text-xs text-blue-600 hover:underline dark:text-blue-400"
>
所有文章 →
</Link>
</div>
<TimelineWrapper>
{posts.map((post) => (
<PostListItem key={post._id} post={post} />
))}
</TimelineWrapper>
</div>
<TimelineWrapper>
{posts.map((post) => (
<PostListItem key={post._id} post={post} />
))}
</TimelineWrapper>
</div>
</SidebarLayout>
</section>
);
}

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

@@ -6,7 +6,9 @@ import { allPages } from 'contentlayer/generated';
import { getPageBySlug } from '@/lib/posts';
import { siteConfig } from '@/lib/config';
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() {
return allPages.map((page) => ({
@@ -35,55 +37,65 @@ export default function StaticPage({ params }: Props) {
if (!page) return notFound();
const hasToc = /<h[23]/.test(page.body.html);
return (
<>
<ReadingProgress />
<div className="flex gap-6 pt-4">
<aside className="hidden shrink-0 lg:block lg:w-44">
<PostToc />
</aside>
<div className="flex-1">
<header className="mb-6 space-y-2">
{page.published_at && (
<p className="text-xs text-slate-500 dark:text-slate-500">
{new Date(page.published_at).toLocaleDateString(
siteConfig.defaultLocale
<PostLayout hasToc={hasToc}>
<div className="space-y-8">
<SectionDivider>
<ScrollReveal>
<header className="mb-6 space-y-4 text-center">
{page.published_at && (
<p className="type-small text-slate-500 dark:text-slate-500">
{new Date(page.published_at).toLocaleDateString(
siteConfig.defaultLocale
)}
</p>
)}
</p>
)}
<h1 className="text-2xl font-bold leading-tight text-slate-900 sm:text-3xl dark:text-slate-50">
{page.title}
</h1>
{page.tags && (
<div className="flex flex-wrap gap-2 pt-1">
{page.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>
<article className="prose prose-lg prose-slate max-w-none dark:prose-dark">
{page.feature_image && (
<Image
src={page.feature_image.replace('../assets', '/assets')}
alt={page.title}
width={1200}
height={600}
className="my-4 rounded"
/>
)}
<div dangerouslySetInnerHTML={{ __html: page.body.html }} />
</article>
<h1 className="type-display font-bold leading-tight text-slate-900 dark:text-slate-50">
{page.title}
</h1>
{page.tags && (
<div className="flex flex-wrap justify-center gap-2 pt-2">
{page.tags.map((t) => (
<Link
key={t}
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"
>
#{t}
</Link>
))}
</div>
)}
</header>
</ScrollReveal>
</SectionDivider>
<SectionDivider>
<ScrollReveal>
<article className="prose prose-lg prose-slate mx-auto max-w-none dark:prose-dark">
{page.feature_image && (
<div className="-mx-4 mb-8 transition-all duration-500 sm:-mx-12 lg:-mx-20 group-[.toc-open]:lg:-mx-4">
<Image
src={page.feature_image.replace('../assets', '/assets')}
alt={page.title}
width={1200}
height={600}
className="w-full rounded-xl shadow-lg"
/>
</div>
)}
<div dangerouslySetInnerHTML={{ __html: page.body.html }} />
</article>
</ScrollReveal>
</SectionDivider>
</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 { PostListWithControls } from '@/components/post-list-with-controls';
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() {
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;
return (
<section className="space-y-4">
<h1 className="text-lg font-semibold text-slate-900 dark:text-slate-50">
標籤：{tagLabel}
</h1>
<SidebarLayout>
<SectionDivider>
<ScrollReveal>
<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} />
</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 { SectionDivider } from '@/components/section-divider';
import { ScrollReveal } from '@/components/scroll-reveal';
import { SidebarLayout } from '@/components/sidebar-layout';
export const metadata: Metadata = {
title: '標籤索引'
@@ -24,52 +25,54 @@ export default function TagIndexPage() {
return (
<section className="space-y-6">
<SectionDivider>
<ScrollReveal>
<div className="motion-card rounded-2xl border bg-white/90 p-6 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
<div className="inline-flex items-center gap-2 text-accent">
<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} 篇
<SidebarLayout>
<SectionDivider>
<ScrollReveal>
<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">
<div className="inline-flex items-center gap-2 text-accent">
<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>
<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" />
熱度 #{index + 1}
</span>
</Link>
);
})}
</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 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>
);
}

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 { SiteFooter } from './site-footer';
import { RightSidebar } from './right-sidebar';
import { BackToTop } from './back-to-top';
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">
<SiteHeader />
<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)]">
<div>{children}</div>
<RightSidebar />
</div>
{children}
</main>
<SiteFooter />
<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);
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" />
{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">

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",
"clsx": "^2.1.1",
"contentlayer": "^0.3.4",
"framer-motion": "^12.23.24",
"gray-matter": "^4.0.3",
"markdown-wasm": "^1.2.0",
"next": "^13.5.11",
@@ -24,6 +25,7 @@
"rehype-autolink-headings": "^7.1.0",
"rehype-slug": "^6.0.0",
"remark-gfm": "^4.0.1",
"tailwind-merge": "^3.4.0",
"unist-util-visit": "^5.0.0"
},
"devDependencies": {
@@ -4078,6 +4080,7 @@
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@rtsao/scc": "^1.1.0",
"array-includes": "^3.1.9",
@@ -4818,6 +4821,33 @@
"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": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.1.0.tgz",
@@ -4981,9 +5011,9 @@
"license": "ISC"
},
"node_modules/glob": {
"version": "10.4.5",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
"integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
"version": "10.5.0",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
"integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
"dev": true,
"license": "ISC",
"dependencies": {
@@ -11306,6 +11336,21 @@
"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": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -14236,6 +14281,16 @@
"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": {
"version": "3.4.18",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz",

85
styles/globals.css
View File

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

10
tailwind.config.js
View File

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