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

Migrate to Contentlayer2

Browse Source
This commit is contained in:
gbanyan
2025-11-19 21:46:49 +08:00
parent a249a120a5
commit 4c08413936
18 changed files with 1370 additions and 6377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Line.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 386 KiB

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

@@ -2,7 +2,7 @@ import Link from 'next/link';
import Image from 'next/image'; import Image from 'next/image';
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { allPosts } from 'contentlayer/generated'; import { allPosts } from 'contentlayer2/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';

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

@@ -2,7 +2,7 @@ import Link from 'next/link';
import Image from 'next/image'; import Image from 'next/image';
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { allPages } from 'contentlayer/generated'; import { allPages } from 'contentlayer2/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';

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

@@ -1,5 +1,5 @@
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { allPosts } from 'contentlayer/generated'; import { allPosts } from 'contentlayer2/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 { SidebarLayout } from '@/components/sidebar-layout';

2
components/post-card.tsx
View File

@@ -1,6 +1,6 @@
import Link from 'next/link'; import Link from 'next/link';
import Image from 'next/image'; import Image from 'next/image';
import type { Post } from 'contentlayer/generated'; import type { Post } from 'contentlayer2/generated';
import { siteConfig } from '@/lib/config'; import { siteConfig } from '@/lib/config';
import { faCalendarDays, faTags } from '@fortawesome/free-solid-svg-icons'; import { faCalendarDays, faTags } from '@fortawesome/free-solid-svg-icons';
import { MetaItem } from './meta-item'; import { MetaItem } from './meta-item';

24
components/post-layout.tsx
View File

@@ -31,7 +31,7 @@ export function PostLayout({ children, hasToc = true }: { children: React.ReactN
</motion.div> </motion.div>
</div> </div>
{/* Sidebar (TOC) */} {/* Desktop Sidebar (TOC) */}
<aside className="hidden lg:block"> <aside className="hidden lg:block">
<div className="sticky top-24 h-[calc(100vh-6rem)] overflow-hidden"> <div className="sticky top-24 h-[calc(100vh-6rem)] overflow-hidden">
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
@@ -51,14 +51,32 @@ export function PostLayout({ children, hasToc = true }: { children: React.ReactN
</aside> </aside>
</div> </div>
{/* Mobile TOC Overlay */}
<AnimatePresence>
{isTocOpen && hasToc && (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 20 }}
transition={{ duration: 0.2 }}
className="fixed bottom-24 right-4 z-40 w-72 rounded-2xl border border-white/20 bg-white/90 p-6 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/90 lg:hidden"
>
<div className="max-h-[60vh] overflow-y-auto">
<PostToc onLinkClick={() => setIsTocOpen(false)} />
</div>
</motion.div>
)}
</AnimatePresence>
{/* Toggle Button (Glassmorphism Pill) */} {/* Toggle Button (Glassmorphism Pill) */}
{hasToc && ( {hasToc && (
<motion.button <motion.button
layout layout
onClick={() => setIsTocOpen(!isTocOpen)} onClick={() => setIsTocOpen(!isTocOpen)}
className={cn( 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", "fixed bottom-8 right-8 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" "text-sm font-medium text-slate-600 dark:text-slate-300",
"lg:right-20" // Adjust position for desktop
)} )}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
aria-label="Toggle Table of Contents" aria-label="Toggle Table of Contents"

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

@@ -1,6 +1,6 @@
import Link from 'next/link'; import Link from 'next/link';
import Image from 'next/image'; import Image from 'next/image';
import type { Post } from 'contentlayer/generated'; import { Post } from 'contentlayer2/generated';
import { siteConfig } from '@/lib/config'; import { siteConfig } from '@/lib/config';
import { faCalendarDays, faTags } from '@fortawesome/free-solid-svg-icons'; import { faCalendarDays, faTags } from '@fortawesome/free-solid-svg-icons';
import { MetaItem } from './meta-item'; import { MetaItem } from './meta-item';

11
components/post-list-with-controls.tsx
View File

@@ -1,7 +1,7 @@
'use client'; 'use client';
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import type { Post } from 'contentlayer/generated'; import { Post, Page } from 'contentlayer2/generated';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { import {
faArrowDownWideShort, faArrowDownWideShort,
@@ -88,8 +88,7 @@ export function PostListWithControls({ posts, pageSize }: Props) {
<button <button
type="button" type="button"
onClick={() => handleChangeSort('new')} onClick={() => handleChangeSort('new')}
className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 transition duration-180 ease-snappy ${ className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 transition duration-180 ease-snappy ${sortOrder === 'new'
sortOrder === 'new'
? 'bg-blue-600 text-white dark:bg-blue-500' ? 'bg-blue-600 text-white dark:bg-blue-500'
: 'bg-white text-slate-600 hover:bg-slate-200 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-700' : 'bg-white text-slate-600 hover:bg-slate-200 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-700'
}`} }`}
@@ -100,8 +99,7 @@ export function PostListWithControls({ posts, pageSize }: Props) {
<button <button
type="button" type="button"
onClick={() => handleChangeSort('old')} onClick={() => handleChangeSort('old')}
className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 transition duration-180 ease-snappy ${ className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 transition duration-180 ease-snappy ${sortOrder === 'old'
sortOrder === 'old'
? 'bg-blue-600 text-white dark:bg-blue-500' ? 'bg-blue-600 text-white dark:bg-blue-500'
: 'bg-white text-slate-600 hover:bg-slate-200 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-700' : 'bg-white text-slate-600 hover:bg-slate-200 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-700'
}`} }`}
@@ -178,8 +176,7 @@ export function PostListWithControls({ posts, pageSize }: Props) {
key={p} key={p}
type="button" type="button"
onClick={() => goToPage(p)} onClick={() => goToPage(p)}
className={`h-7 w-7 rounded text-xs ${ className={`h-7 w-7 rounded text-xs ${isActive
isActive
? 'bg-blue-600 text-white dark:bg-blue-500' ? 'bg-blue-600 text-white dark:bg-blue-500'
: 'hover:bg-slate-100 dark:hover:bg-slate-800' : 'hover:bg-slate-100 dark:hover:bg-slate-800'
}`} }`}

5
components/post-storyline-nav.tsx
View File

@@ -1,5 +1,5 @@
import Link from 'next/link'; import Link from 'next/link';
import type { Post } from 'contentlayer/generated'; import { Post } from 'contentlayer2/generated';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeftLong, faArrowRightLong } from '@fortawesome/free-solid-svg-icons'; import { faArrowLeftLong, faArrowRightLong } from '@fortawesome/free-solid-svg-icons';
@@ -94,8 +94,7 @@ function Station({ station }: { station: StationConfig }) {
{post.title} {post.title}
</p> </p>
<span <span
className={`mt-2 h-0.5 w-16 rounded-full bg-slate-200 transition group-hover:w-24 group-hover:bg-blue-400 dark:bg-slate-700 ${ className={`mt-2 h-0.5 w-16 rounded-full bg-slate-200 transition group-hover:w-24 group-hover:bg-blue-400 dark:bg-slate-700 ${align === 'end' ? 'self-end' : 'self-start'
align === 'end' ? 'self-end' : 'self-start'
}`} }`}
/> />
</Link> </Link>

7
components/post-toc.tsx
View File

@@ -10,7 +10,7 @@ interface TocItem {
depth: number; depth: number;
} }
export function PostToc() { export function PostToc({ onLinkClick }: { onLinkClick?: () => void }) {
const [items, setItems] = useState<TocItem[]>([]); const [items, setItems] = useState<TocItem[]>([]);
const [activeId, setActiveId] = useState<string | null>(null); const [activeId, setActiveId] = useState<string | null>(null);
const listRef = useRef<HTMLDivElement | null>(null); const listRef = useRef<HTMLDivElement | null>(null);
@@ -87,6 +87,11 @@ export function PostToc() {
url.hash = id; url.hash = id;
history.replaceState(null, '', url.toString()); history.replaceState(null, '', url.toString());
} }
// Trigger callback if provided (e.g. to close mobile menu)
if (onLinkClick) {
onLinkClick();
}
}; };
if (items.length === 0) return null; if (items.length === 0) return null;

2
components/right-sidebar.tsx
View File

@@ -5,7 +5,7 @@ import { faGithub, faMastodon, faLinkedin } from '@fortawesome/free-brands-svg-i
import { faFire, faArrowRight } from '@fortawesome/free-solid-svg-icons'; import { faFire, faArrowRight } from '@fortawesome/free-solid-svg-icons';
import { siteConfig } from '@/lib/config'; import { siteConfig } from '@/lib/config';
import { getAllTagsWithCount } from '@/lib/posts'; import { getAllTagsWithCount } from '@/lib/posts';
import { allPages } from 'contentlayer/generated'; import { allPages } from 'contentlayer2/generated';
export function RightSidebar() { export function RightSidebar() {
const tags = getAllTagsWithCount().slice(0, 5); const tags = getAllTagsWithCount().slice(0, 5);

2
components/site-header.tsx
View File

@@ -2,7 +2,7 @@ import Link from 'next/link';
import { ThemeToggle } from './theme-toggle'; import { ThemeToggle } from './theme-toggle';
import { NavMenu, NavLinkItem, IconKey } from './nav-menu'; import { NavMenu, NavLinkItem, IconKey } from './nav-menu';
import { siteConfig } from '@/lib/config'; import { siteConfig } from '@/lib/config';
import { allPages } from 'contentlayer/generated'; import { allPages } from 'contentlayer2/generated';
export function SiteHeader() { export function SiteHeader() {
const pages = allPages const pages = allPages

2
contentlayer.config.ts
View File

@@ -1,4 +1,4 @@
import { defineDocumentType, makeSource } from 'contentlayer/source-files'; import { defineDocumentType, makeSource } from 'contentlayer2/source-files';
import { visit } from 'unist-util-visit'; import { visit } from 'unist-util-visit';
import rehypeSlug from 'rehype-slug'; import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings'; import rehypeAutolinkHeadings from 'rehype-autolink-headings';

4
lib/posts.ts
View File

@@ -1,4 +1,4 @@
import { allPosts, allPages, Post, Page } from 'contentlayer/generated'; import { allPosts, allPages, Post, Page } from 'contentlayer2/generated';
export function getAllPostsSorted(): Post[] { export function getAllPostsSorted(): Post[] {
return [...allPosts].sort((a, b) => { return [...allPosts].sort((a, b) => {
@@ -27,7 +27,7 @@ export function getPageBySlug(slug: string): Page | undefined {
} }
export function getTagSlug(tag: string): string { export function getTagSlug(tag: string): string {
return encodeURIComponent(tag.toLowerCase().replace(/\s+/g, '-')); return tag.toLowerCase().replace(/\s+/g, '-');
} }
export function getAllTagsWithCount(): { tag: string; slug: string; count: number }[] { export function getAllTagsWithCount(): { tag: string; slug: string; count: number }[] {

2
next.config.mjs
View File

@@ -1,4 +1,4 @@
import { withContentlayer } from 'next-contentlayer'; import { withContentlayer } from 'next-contentlayer2';
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {

7650
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -20,12 +20,12 @@
"@fortawesome/free-solid-svg-icons": "^7.1.0", "@fortawesome/free-solid-svg-icons": "^7.1.0",
"@fortawesome/react-fontawesome": "^3.1.0", "@fortawesome/react-fontawesome": "^3.1.0",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"contentlayer": "^0.3.4", "contentlayer2": "^0.5.8",
"framer-motion": "^12.23.24", "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",
"next-contentlayer": "^0.3.4", "next-contentlayer2": "^0.5.8",
"next-themes": "^0.4.6", "next-themes": "^0.4.6",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",

2
tsconfig.json
View File

@@ -25,7 +25,7 @@
"@/*": [ "@/*": [
"./*" "./*"
], ],
"contentlayer/generated": [ "contentlayer2/generated": [
"./.contentlayer/generated" "./.contentlayer/generated"
] ]
}, },