Migrate to Contentlayer2

2025-11-19 21:46:49 +08:00
parent a249a120a5
commit 4c08413936
18 changed files with 1370 additions and 6377 deletions
--- a/components/post-card.tsx
+++ b/components/post-card.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import Image from 'next/image';
-import type { Post } from 'contentlayer/generated';
+import type { Post } from 'contentlayer2/generated';
 import { siteConfig } from '@/lib/config';
 import { faCalendarDays, faTags } from '@fortawesome/free-solid-svg-icons';
 import { MetaItem } from './meta-item';
--- a/components/post-layout.tsx
+++ b/components/post-layout.tsx
@@ -31,7 +31,7 @@ export function PostLayout({ children, hasToc = true }: { children: React.ReactN
                    </motion.div>
                </div>

-                {/* Sidebar (TOC) */}
+                {/* Desktop Sidebar (TOC) */}
                <aside className="hidden lg:block">
                    <div className="sticky top-24 h-[calc(100vh-6rem)] overflow-hidden">
                        <AnimatePresence mode="wait">
@@ -51,14 +51,32 @@ export function PostLayout({ children, hasToc = true }: { children: React.ReactN
                </aside>
            </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) */}
            {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"
+                        "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",
+                        "lg:right-20" // Adjust position for desktop
                    )}
                    whileTap={{ scale: 0.95 }}
                    aria-label="Toggle Table of Contents"
--- a/components/post-list-item.tsx
+++ b/components/post-list-item.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import Image from 'next/image';
-import type { Post } from 'contentlayer/generated';
+import { Post } from 'contentlayer2/generated';
 import { siteConfig } from '@/lib/config';
 import { faCalendarDays, faTags } from '@fortawesome/free-solid-svg-icons';
 import { MetaItem } from './meta-item';
--- a/components/post-list-with-controls.tsx
+++ b/components/post-list-with-controls.tsx
@@ -1,7 +1,7 @@
 'use client';

 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 {
  faArrowDownWideShort,
@@ -88,11 +88,10 @@ export function PostListWithControls({ posts, pageSize }: Props) {
          <button
            type="button"
            onClick={() => handleChangeSort('new')}
-            className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 transition duration-180 ease-snappy ${
-              sortOrder === 'new'
-                ? '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'
-            }`}
+            className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 transition duration-180 ease-snappy ${sortOrder === 'new'
+              ? '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'
+              }`}
          >
            <FontAwesomeIcon icon={faArrowDownWideShort} className="h-3 w-3" />
            新到舊
@@ -100,11 +99,10 @@ export function PostListWithControls({ posts, pageSize }: Props) {
          <button
            type="button"
            onClick={() => handleChangeSort('old')}
-            className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 transition duration-180 ease-snappy ${
-              sortOrder === 'old'
-                ? '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'
-            }`}
+            className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 transition duration-180 ease-snappy ${sortOrder === 'old'
+              ? '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'
+              }`}
          >
            <FontAwesomeIcon icon={faArrowUpWideShort} className="h-3 w-3" />
            舊到新
@@ -178,11 +176,10 @@ export function PostListWithControls({ posts, pageSize }: Props) {
                  key={p}
                  type="button"
                  onClick={() => goToPage(p)}
-                  className={`h-7 w-7 rounded text-xs ${
-                    isActive
-                      ? 'bg-blue-600 text-white dark:bg-blue-500'
-                      : 'hover:bg-slate-100 dark:hover:bg-slate-800'
-                  }`}
+                  className={`h-7 w-7 rounded text-xs ${isActive
+                    ? 'bg-blue-600 text-white dark:bg-blue-500'
+                    : 'hover:bg-slate-100 dark:hover:bg-slate-800'
+                    }`}
                >
                  {p}
                </button>
--- a/components/post-storyline-nav.tsx
+++ b/components/post-storyline-nav.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import type { Post } from 'contentlayer/generated';
+import { Post } from 'contentlayer2/generated';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowLeftLong, faArrowRightLong } from '@fortawesome/free-solid-svg-icons';

@@ -94,9 +94,8 @@ function Station({ station }: { station: StationConfig }) {
        {post.title}
      </p>
      <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 ${
-          align === 'end' ? 'self-end' : 'self-start'
-        }`}
+        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'
+          }`}
      />
    </Link>
  );
--- a/components/post-toc.tsx
+++ b/components/post-toc.tsx
@@ -10,7 +10,7 @@ interface TocItem {
  depth: number;
 }

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

  if (items.length === 0) return null;
--- a/components/right-sidebar.tsx
+++ b/components/right-sidebar.tsx
@@ -5,7 +5,7 @@ import { faGithub, faMastodon, faLinkedin } from '@fortawesome/free-brands-svg-i
 import { faFire, faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { siteConfig } from '@/lib/config';
 import { getAllTagsWithCount } from '@/lib/posts';
-import { allPages } from 'contentlayer/generated';
+import { allPages } from 'contentlayer2/generated';

 export function RightSidebar() {
  const tags = getAllTagsWithCount().slice(0, 5);
--- a/components/site-header.tsx
+++ b/components/site-header.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { ThemeToggle } from './theme-toggle';
 import { NavMenu, NavLinkItem, IconKey } from './nav-menu';
 import { siteConfig } from '@/lib/config';
-import { allPages } from 'contentlayer/generated';
+import { allPages } from 'contentlayer2/generated';

 export function SiteHeader() {
  const pages = allPages