@hutusi/amytis 1.7.0 → 1.9.0

package/scripts/sync-book-chapters.ts

@@ -0,0 +1,210 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+
+// Usage:
+//   bun run sync-book                    # sync all books
+//   bun run sync-book <book-slug>        # sync one book
+//   bun run sync-book <book-slug> --update-titles  # also refresh titles from files
+//
+// Note: when the file is written, matter.stringify re-serializes all frontmatter fields
+// (e.g. drops explicit quotes on simple strings, normalises indentation). Expect a one-time
+// cosmetic formatting diff the first time you sync a pre-existing book file.
+
+const args = process.argv.slice(2);
+const targetSlug = args.find(a => !a.startsWith('--'));
+const updateTitles = args.includes('--update-titles');
+
+const booksDir = path.join(process.cwd(), 'content', 'books');
+
+// ── Types ─────────────────────────────────────────────────────────────────
+
+type ChapterRef = { title: string; id: string };
+type PartGroup  = { part: string; chapters: ChapterRef[] };
+type TocItem    = ChapterRef | PartGroup;
+
+// ── Helpers ───────────────────────────────────────────────────────────────
+
+function titleFromId(id: string): string {
+  return id
+    .split(/[-_]/)
+    .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+}
+
+function readChapterTitle(bookDir: string, id: string): string {
+  const candidates = [
+    path.join(bookDir, `${id}.mdx`),
+    path.join(bookDir, `${id}.md`),
+    path.join(bookDir, id, 'index.mdx'),
+    path.join(bookDir, id, 'index.md'),
+  ];
+  for (const p of candidates) {
+    if (fs.existsSync(p)) {
+      const { data } = matter(fs.readFileSync(p, 'utf8'));
+      return (data.title as string | undefined) || titleFromId(id);
+    }
+  }
+  return titleFromId(id);
+}
+
+/** Scan the book directory and return ids of all discovered chapters, sorted by name. */
+function discoverIds(bookDir: string): string[] {
+  const entries = fs.readdirSync(bookDir, { withFileTypes: true });
+  const ids: string[] = [];
+
+  for (const entry of entries.sort((a, b) => a.name.localeCompare(b.name))) {
+    // Skip the book index itself
+    if (entry.name === 'index.mdx' || entry.name === 'index.md') continue;
+
+    if (entry.isFile() && (entry.name.endsWith('.mdx') || entry.name.endsWith('.md'))) {
+      ids.push(entry.name.replace(/\.mdx?$/, ''));
+    } else if (entry.isDirectory()) {
+      // Only treat a folder as a chapter if it contains an index file
+      const hasIndex =
+        fs.existsSync(path.join(bookDir, entry.name, 'index.mdx')) ||
+        fs.existsSync(path.join(bookDir, entry.name, 'index.md'));
+      if (hasIndex) ids.push(entry.name);
+    }
+  }
+
+  return ids;
+}
+
+/** Return a flat list of all ids mentioned in a toc. */
+function flattenToc(toc: TocItem[]): string[] {
+  const ids: string[] = [];
+  for (const item of toc) {
+    if ('part' in item) {
+      for (const ch of item.chapters) ids.push(ch.id);
+    } else {
+      ids.push(item.id);
+    }
+  }
+  return ids;
+}
+
+/**
+ * Reconcile the existing toc against what is on disk:
+ * - Remove entries for files that no longer exist.
+ * - Optionally refresh titles from file frontmatter.
+ * - Append newly discovered ids as flat entries at the end.
+ */
+function reconcile(
+  toc: TocItem[],
+  bookDir: string,
+  discovered: Set<string>,
+): { updated: TocItem[]; added: string[]; removed: string[] } {
+  const added: string[] = [];
+  const removed: string[] = [];
+  const updated: TocItem[] = [];
+
+  // Walk existing toc, prune missing entries
+  for (const item of toc) {
+    if ('part' in item) {
+      const kept: ChapterRef[] = [];
+      for (const ch of item.chapters) {
+        if (discovered.has(ch.id)) {
+          kept.push(
+            updateTitles
+              ? { ...ch, title: readChapterTitle(bookDir, ch.id) }
+              : ch,
+          );
+        } else {
+          removed.push(ch.id);
+        }
+      }
+      if (kept.length > 0) updated.push({ part: item.part, chapters: kept });
+    } else {
+      if (discovered.has(item.id)) {
+        updated.push(
+          updateTitles
+            ? { ...item, title: readChapterTitle(bookDir, item.id) }
+            : item,
+        );
+      } else {
+        removed.push(item.id);
+      }
+    }
+  }
+
+  // Append ids that are on disk but not yet in toc
+  const existingIds = new Set(flattenToc(toc));
+  const newIds = [...discovered].filter(id => !existingIds.has(id)).sort();
+  for (const id of newIds) {
+    updated.push({ title: readChapterTitle(bookDir, id), id });
+    added.push(id);
+  }
+
+  return { updated, added, removed };
+}
+
+// ── Sync one book ─────────────────────────────────────────────────────────
+
+function syncBook(bookSlug: string): void {
+  const bookDir = path.join(booksDir, bookSlug);
+
+  const indexMdx = path.join(bookDir, 'index.mdx');
+  const indexMd  = path.join(bookDir, 'index.md');
+  let indexPath  = '';
+  if      (fs.existsSync(indexMdx)) indexPath = indexMdx;
+  else if (fs.existsSync(indexMd))  indexPath = indexMd;
+  else {
+    console.error(`  ✗  ${bookSlug}: no index.mdx / index.md found`);
+    return;
+  }
+
+  const raw = fs.readFileSync(indexPath, 'utf8');
+  const { data, content } = matter(raw);
+
+  if (data.chapters !== undefined && !Array.isArray(data.chapters)) {
+    console.error(`  ✗  ${bookSlug}: "chapters" frontmatter must be an array`);
+    return;
+  }
+
+  const discovered  = new Set(discoverIds(bookDir));
+  const existingToc = (data.chapters ?? []) as TocItem[];
+
+  const { updated, added, removed } = reconcile(existingToc, bookDir, discovered);
+
+  const titlesChanged = updateTitles && JSON.stringify(updated) !== JSON.stringify(existingToc);
+  const changed = added.length > 0 || removed.length > 0 || titlesChanged;
+  if (!changed) {
+    console.log(`  ✓  ${bookSlug}: up to date (${discovered.size} chapter${discovered.size === 1 ? '' : 's'})`);
+    return;
+  }
+
+  data.chapters = updated;
+  fs.writeFileSync(indexPath, matter.stringify(content, data));
+
+  console.log(`  ✓  ${bookSlug}:`);
+  if (added.length   > 0) console.log(`       + added:   ${added.join(', ')}`);
+  if (removed.length > 0) console.log(`       - removed: ${removed.join(', ')}`);
+  if (titlesChanged)      console.log(`       ↺ titles refreshed from files`);
+}
+
+// ── Entry point ───────────────────────────────────────────────────────────
+
+if (!fs.existsSync(booksDir)) {
+  console.error('No content/books directory found.');
+  process.exit(1);
+}
+
+console.log('Syncing book chapters…');
+
+if (targetSlug) {
+  const bookDir = path.join(booksDir, targetSlug);
+  if (!fs.existsSync(bookDir)) {
+    console.error(`Book "${targetSlug}" not found in ${booksDir}`);
+    process.exit(1);
+  }
+  syncBook(targetSlug);
+} else {
+  const entries = fs.readdirSync(booksDir, { withFileTypes: true });
+  const books   = entries.filter(e => e.isDirectory()).sort((a, b) => a.name.localeCompare(b.name));
+  if (books.length === 0) {
+    console.log('No books found.');
+  } else {
+    for (const entry of books) syncBook(entry.name);
+  }
+}

package/site.config.ts

@@ -1,8 +1,17 @@
+export interface NavChildItem {
+  name: string;
+  url: string;
+  external?: boolean;
+  dividerBefore?: boolean; // render a separator line before this item
+}
+
 export interface NavItem {
   name: string;
   url: string;
   weight: number;
+  external?: boolean;
   dropdown?: string[];
+  children?: NavChildItem[]; // static sub-links rendered as a dropdown
 }
 
 // Defined up-front so footer.connect can reference these URLs without duplication
@@ -16,7 +25,7 @@ export const siteConfig = {
 
   // ── Site identity ─────────────────────────────────────────────────────────
   title: { en: "Amytis", zh: "Amytis" },
-  description: { en: "A minimalist digital garden for growing thoughts and sharing knowledge.", zh: "一个极简的数字花园，用于培育思想和分享知识。" },
+  description: { en: "Amytis — an elegant open-source framework for building your personal digital garden.", zh: "Amytis — 优雅的开源数字花园框架。" },
   baseUrl: "https://example.com", // Replace with your actual domain
   ogImage: "/og-image.png", // Default OG/social preview image — place a 1200×630 PNG at public/og-image.png
   footerText: { en: `© ${new Date().getFullYear()} Amytis. All rights reserved.`, zh: `© ${new Date().getFullYear()} Amytis. 保留所有权利。` },
@@ -34,6 +43,12 @@ export const siteConfig = {
     { name: "Series", url: "/series", weight: 3, dropdown: ["digital-garden", "markdown-showcase", "ai-nexus-weekly"] },
     { name: "Books", url: "/books", weight: 4, dropdown: [] },
     { name: "About", url: "/about", weight: 5 },
+    { name: "More", url: "", weight: 6, children: [
+      { name: "Archive", url: "/archive" },
+      { name: "Tags", url: "/tags" },
+      { name: "Links", url: "/links" },
+      { name: "Subscribe", url: "/subscribe", dividerBefore: true },
+    ]},
   ] as NavItem[],
 
   // ── Footer ────────────────────────────────────────────────────────────────
@@ -79,7 +94,7 @@ export const siteConfig = {
   features: {
     posts: {
       enabled: true,
-      name: { en: "Posts", zh: "文章" },
+      name: { en: "Articles", zh: "文章" },
     },
     series: {
       enabled: true,
@@ -89,7 +104,7 @@ export const siteConfig = {
       enabled: true,
       name: { en: "Books", zh: "书籍" },
     },
-    flows: {
+    flow: {
       enabled: true,
       name: { en: "Flow", zh: "随笔" },
     },
@@ -97,9 +112,9 @@ export const siteConfig = {
 
   // ── Homepage ──────────────────────────────────────────────────────────────
   hero: {
-    tagline: { en: "Digital Garden", zh: "数字花园" },
-    title: { en: "Cultivating Digital Knowledge", zh: "培育数字知识" },
-    subtitle: { en: "A minimalist digital garden for growing thoughts and sharing knowledge.", zh: "一个极简的数字花园，用于培育思想和分享知识。" },
+    tagline: { en: "Open Source Digital Garden", zh: "开源数字花园框架" },
+    title: { en: "A home for ideas to grow, link, and evolve.", zh: "让想法生长、关联、演化的地方。" },
+    subtitle: { en: "An elegant, open-source framework for cultivating personal knowledge — from raw daily flows to refined articles, curated series, and structured books.", zh: "优雅的开源知识培育框架——从每日随笔到精炼文章，从系列合集到结构化书籍，层层深化。" },
   },
   homepage: {
     sections: [
@@ -115,8 +130,9 @@ export const siteConfig = {
   // ── Content ───────────────────────────────────────────────────────────────
   pagination: {
     posts: 5,
-    series: 1,
+    series: 5,
     flows: 20,
+    notes: 20,
   },
   posts: {
     toc: true,
@@ -134,6 +150,13 @@ export const siteConfig = {
   // ── Appearance ────────────────────────────────────────────────────────────
   themeColor: 'default', // 'default' | 'blue' | 'rose' | 'amber'
 
+  // ── Browser compatibility warning ─────────────────────────────────────────
+  browserCheck: {
+    // URL shown in the outdated-browser banner. Set to '' to hide the link
+    // (useful for corporate/intranet deployments where IT manages upgrades).
+    updateUrl: 'https://browsehappy.com/',
+  },
+
   // ── Analytics ─────────────────────────────────────────────────────────────
   analytics: {
     provider: 'umami', // 'umami' | 'plausible' | 'google' | null

package/src/app/authors/[author]/page.tsx

@@ -12,10 +12,12 @@ import TranslatedText from '@/components/TranslatedText';
 
 export async function generateStaticParams() {
   const authors = getAllAuthors();
+  const authorNames = Object.keys(authors);
+  if (authorNames.length === 0) return [{ author: '_' }];
   const params = new Set<string>();
 
   // Generate slug-based routes and keep legacy name-based routes for compatibility.
-  for (const authorName of Object.keys(authors)) {
+  for (const authorName of authorNames) {
     params.add(getAuthorSlug(authorName));
     params.add(authorName);
   }

package/src/app/books/[slug]/[chapter]/page.tsx

@@ -7,11 +7,12 @@ import { resolveLocale } from '@/lib/i18n';
 
 export async function generateStaticParams() {
   const books = getAllBooks();
+  if (books.length === 0) return [{ slug: '_', chapter: '_' }];
   const params: { slug: string; chapter: string }[] = [];
 
   for (const book of books) {
     for (const ch of book.chapters) {
-      params.push({ slug: book.slug, chapter: ch.file });
+      params.push({ slug: book.slug, chapter: ch.id });
     }
   }
 

package/src/app/books/[slug]/page.tsx

@@ -9,6 +9,7 @@ import { t, resolveLocale } from '@/lib/i18n';
 
 export async function generateStaticParams() {
   const books = getAllBooks();
+  if (books.length === 0) return [{ slug: '_' }];
   return books.map(book => ({ slug: book.slug }));
 }
 
@@ -104,7 +105,7 @@ export default async function BookLandingPage({ params }: { params: Promise<{ sl
           {firstChapter && (
             <div className="mt-8">
               <Link
-                href={`/books/${book.slug}/${firstChapter.file}`}
+                href={`/books/${book.slug}/${firstChapter.id}`}
                 className="inline-flex items-center gap-2 px-6 py-3 bg-accent text-white rounded-xl font-sans font-medium text-sm hover:bg-accent/90 no-underline transition-colors shadow-lg shadow-accent/20"
               >
                 {t('start_reading')}
@@ -130,9 +131,9 @@ export default async function BookLandingPage({ params }: { params: Promise<{ sl
                   </h3>
                   <ol className="space-y-2 pl-4 border-l-2 border-muted/10">
                     {item.chapters.map(ch => (
-                      <li key={ch.file}>
+                      <li key={ch.id}>
                         <Link
-                          href={`/books/${book.slug}/${ch.file}`}
+                          href={`/books/${book.slug}/${ch.id}`}
                           className="group flex items-center gap-3 py-2 text-foreground/80 hover:text-accent no-underline transition-colors"
                         >
                           <svg className="w-4 h-4 text-muted group-hover:text-accent flex-shrink-0 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -148,8 +149,8 @@ export default async function BookLandingPage({ params }: { params: Promise<{ sl
             } else {
               return (
                 <Link
-                  key={item.file}
-                  href={`/books/${book.slug}/${item.file}`}
+                  key={item.id}
+                  href={`/books/${book.slug}/${item.id}`}
                   className="group flex items-center gap-3 py-2 text-foreground/80 hover:text-accent no-underline transition-colors"
                 >
                   <svg className="w-4 h-4 text-muted group-hover:text-accent flex-shrink-0 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>

package/src/app/flows/[year]/[month]/[day]/page.tsx

@@ -1,15 +1,18 @@
-import { getAllFlows, getFlowBySlug, getAdjacentFlows } from '@/lib/markdown';
+import { getAllFlows, getFlowBySlug, getAdjacentFlows, buildSlugRegistry, getBacklinks } from '@/lib/markdown';
 import { siteConfig } from '../../../../../../site.config';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { t, resolveLocale } from '@/lib/i18n';
 import FlowCalendarSidebar from '@/components/FlowCalendarSidebar';
 import MarkdownRenderer from '@/components/MarkdownRenderer';
+import Backlinks from '@/components/Backlinks';
 import ShareBar from '@/components/ShareBar';
 import Link from 'next/link';
 
 export function generateStaticParams() {
+  if (siteConfig.features?.flow?.enabled === false) return [{ year: '_', month: '_', day: '_' }];
   const allFlows = getAllFlows();
+  if (allFlows.length === 0) return [{ year: '_', month: '_', day: '_' }];
   return allFlows.map(flow => {
     const [year, month, day] = flow.slug.split('/');
     return { year, month, day };
@@ -42,6 +45,7 @@ export async function generateMetadata({ params }: { params: Promise<{ year: str
 }
 
 export default async function FlowPage({ params }: { params: Promise<{ year: string; month: string; day: string }> }) {
+  if (siteConfig.features?.flow?.enabled === false) notFound();
   const { year, month, day } = await params;
   const slug = `${year}/${month}/${day}`;
   const flow = getFlowBySlug(slug);
@@ -50,56 +54,59 @@ export default async function FlowPage({ params }: { params: Promise<{ year: str
   const allFlows = getAllFlows();
   const entryDates = allFlows.map(f => f.date);
   const { prev, next } = getAdjacentFlows(flow.slug);
+  const slugRegistry = buildSlugRegistry();
+  const backlinks = getBacklinks(flow.slug);
   const flowUrl = `${siteConfig.baseUrl}/flows/${year}/${month}/${day}`;
 
+  const breadcrumb = (
+    <nav aria-label="Breadcrumb" className="flex flex-wrap items-center gap-1.5 text-sm text-muted">
+      <Link href="/flows" className="hover:text-accent no-underline shrink-0">
+        {t('all_flows')}
+      </Link>
+      <span className="text-muted/40" aria-hidden="true">›</span>
+      <Link href={`/flows/${year}`} className="hover:text-accent no-underline shrink-0">
+        {year}
+      </Link>
+      <span className="text-muted/40" aria-hidden="true">›</span>
+      <Link href={`/flows/${year}/${month}`} className="hover:text-accent no-underline shrink-0">
+        {month}
+      </Link>
+      <span className="text-muted/40" aria-hidden="true">›</span>
+      <span className="text-foreground shrink-0">{day}</span>
+    </nav>
+  );
+
   return (
     <div className="layout-main">
-      {/* Breadcrumb navigation */}
-      <nav className="flex items-center gap-1.5 text-sm text-muted mb-6">
-        <Link href="/flows" className="hover:text-accent no-underline">
-          {t('all_flows')}
-        </Link>
-        <span className="text-muted/40">›</span>
-        <Link href={`/flows/${year}`} className="hover:text-accent no-underline">
-          {year}
-        </Link>
-        <span className="text-muted/40">›</span>
-        <Link href={`/flows/${year}/${month}`} className="hover:text-accent no-underline">
-          {month}
-        </Link>
-        <span className="text-muted/40">›</span>
-        <span className="text-foreground">{day}</span>
-      </nav>
-
       <div className="flex gap-10">
-        <FlowCalendarSidebar entryDates={entryDates} currentDate={flow.date} />
+        <FlowCalendarSidebar entryDates={entryDates} currentDate={flow.date} breadcrumb={breadcrumb} />
 
         <article className="flex-1 min-w-0">
           {/* Header */}
           <header className="mb-8">
-            <time className="text-sm font-mono text-accent" data-pagefind-meta="date[content]">{flow.date}</time>
-            <h1 className="mt-2 text-3xl md:text-4xl font-serif font-bold text-heading">{flow.title}</h1>
+            <time className="text-base font-mono text-accent" data-pagefind-meta="date[content]">{flow.date}</time>
           </header>
 
           {/* Content */}
           <div className="prose prose-lg dark:prose-invert max-w-none">
-            <MarkdownRenderer content={flow.content} />
+            <MarkdownRenderer content={flow.content} slugRegistry={slugRegistry} />
           </div>
 
+          <Backlinks backlinks={backlinks} />
+
           <ShareBar url={flowUrl} title={flow.title} className="mt-8 mb-2" />
 
           {/* Prev/Next navigation */}
-          <nav className="mt-12 pt-12 border-t border-muted/20 grid grid-cols-2 gap-4">
+          <nav aria-label="Post navigation" className="mt-12 pt-12 border-t border-muted/20 grid grid-cols-2 gap-4">
             {prev ? (
               <Link
                 href={`/flows/${prev.slug}`}
                 className="group text-left no-underline"
               >
                 <span className="text-xs text-muted">{t('older')}</span>
-                <div className="text-sm font-medium text-heading group-hover:text-accent transition-colors truncate">
-                  {prev.title}
+                <div className="text-sm font-mono text-heading group-hover:text-accent transition-colors">
+                  {prev.date}
                 </div>
-                <span className="text-xs font-mono text-muted">{prev.date}</span>
               </Link>
             ) : <div />}
             {next ? (
@@ -108,10 +115,9 @@ export default async function FlowPage({ params }: { params: Promise<{ year: str
                 className="group text-right no-underline"
               >
                 <span className="text-xs text-muted">{t('newer')}</span>
-                <div className="text-sm font-medium text-heading group-hover:text-accent transition-colors truncate">
-                  {next.title}
+                <div className="text-sm font-mono text-heading group-hover:text-accent transition-colors">
+                  {next.date}
                 </div>
-                <span className="text-xs font-mono text-muted">{next.date}</span>
               </Link>
             ) : <div />}
           </nav>

package/src/app/flows/[year]/[month]/page.tsx

@@ -8,7 +8,9 @@ import PageHeader from '@/components/PageHeader';
 import FlowContent from '@/components/FlowContent';
 
 export function generateStaticParams() {
+  if (siteConfig.features?.flow?.enabled === false) return [{ year: '_', month: '_' }];
   const allFlows = getAllFlows();
+  if (allFlows.length === 0) return [{ year: '_', month: '_' }];
   const monthSet = new Set(allFlows.map(f => {
     const [year, month] = f.slug.split('/');
     return `${year}/${month}`;
@@ -30,6 +32,7 @@ export async function generateMetadata({ params }: { params: Promise<{ year: str
 }
 
 export default async function FlowsMonthPage({ params }: { params: Promise<{ year: string; month: string }> }) {
+  if (siteConfig.features?.flow?.enabled === false) notFound();
   const { year, month } = await params;
   const flows = getFlowsByMonth(year, month);
   if (flows.length === 0) notFound();
@@ -39,6 +42,20 @@ export default async function FlowsMonthPage({ params }: { params: Promise<{ yea
   const tags = getFlowTags();
   const monthLabel = new Date(parseInt(year), parseInt(month) - 1).toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
 
+  const breadcrumb = (
+    <nav aria-label="Breadcrumb" className="flex items-center gap-1.5 text-sm text-muted">
+      <Link href="/flows" className="hover:text-accent no-underline">
+        {t('all_flows')}
+      </Link>
+      <span className="text-muted/40" aria-hidden="true">›</span>
+      <Link href={`/flows/${year}`} className="hover:text-accent no-underline">
+        {year}
+      </Link>
+      <span className="text-muted/40" aria-hidden="true">›</span>
+      <span className="text-foreground">{month}</span>
+    </nav>
+  );
+
   return (
     <div className="layout-main">
       <PageHeader
@@ -48,24 +65,12 @@ export default async function FlowsMonthPage({ params }: { params: Promise<{ yea
         subtitleParams={{ count: flows.length }}
       />
 
-      {/* Breadcrumb navigation */}
-      <nav className="flex items-center gap-1.5 text-sm text-muted mb-6">
-        <Link href="/flows" className="hover:text-accent no-underline">
-          {t('all_flows')}
-        </Link>
-        <span className="text-muted/40">›</span>
-        <Link href={`/flows/${year}`} className="hover:text-accent no-underline">
-          {year}
-        </Link>
-        <span className="text-muted/40">›</span>
-        <span className="text-foreground">{month}</span>
-      </nav>
-
       <FlowContent
         flows={flows}
         entryDates={entryDates}
         tags={tags}
         currentDate={`${year}-${month}-01`}
+        breadcrumb={breadcrumb}
       />
     </div>
   );

package/src/app/flows/[year]/page.tsx

@@ -8,7 +8,9 @@ import PageHeader from '@/components/PageHeader';
 import FlowContent from '@/components/FlowContent';
 
 export function generateStaticParams() {
+  if (siteConfig.features?.flow?.enabled === false) return [{ year: '_' }];
   const allFlows = getAllFlows();
+  if (allFlows.length === 0) return [{ year: '_' }];
   const years = new Set(allFlows.map(f => f.slug.split('/')[0]));
   return Array.from(years).map(year => ({ year }));
 }
@@ -23,6 +25,7 @@ export async function generateMetadata({ params }: { params: Promise<{ year: str
 }
 
 export default async function FlowsYearPage({ params }: { params: Promise<{ year: string }> }) {
+  if (siteConfig.features?.flow?.enabled === false) notFound();
   const { year } = await params;
   const flows = getFlowsByYear(year);
   if (flows.length === 0) notFound();
@@ -44,38 +47,45 @@ export default async function FlowsYearPage({ params }: { params: Promise<{ year
     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
   ];
 
-  return (
-    <div className="layout-main">
-      <PageHeader
-        titleKey="flows_in_year"
-        titleParams={{ year }}
-        subtitleKey="flow_subtitle"
-        subtitleParams={{ count: flows.length }}
-      />
-
-      {/* Month navigation pills */}
-      <div className="flex flex-wrap items-center gap-2 mb-6">
-        <Link href="/flows" className="text-sm text-muted hover:text-accent no-underline">
-          ← {t('all_flows')}
+  const breadcrumb = (
+    <div className="space-y-2">
+      <nav aria-label="Breadcrumb" className="flex items-center gap-1.5 text-sm text-muted">
+        <Link href="/flows" className="hover:text-accent no-underline">
+          {t('all_flows')}
         </Link>
-        <span className="text-muted/30">|</span>
+        <span className="text-muted/40" aria-hidden="true">›</span>
+        <span className="text-foreground">{year}</span>
+      </nav>
+      <div className="flex flex-wrap gap-1.5">
         {sortedMonths.map(m => (
           <Link
             key={m}
             href={`/flows/${year}/${m}`}
-            className="inline-flex items-center gap-1 px-3 py-1 text-xs rounded-full border border-muted/20 text-foreground hover:border-accent hover:text-accent no-underline transition-colors"
+            className="inline-flex items-center gap-1 px-2.5 py-0.5 text-xs rounded-full border border-muted/20 text-foreground hover:border-accent hover:text-accent no-underline transition-colors"
           >
             {monthNames[parseInt(m, 10) - 1]}
             <span className="text-muted text-[10px]">({monthCounts[m]})</span>
           </Link>
         ))}
       </div>
+    </div>
+  );
+
+  return (
+    <div className="layout-main">
+      <PageHeader
+        titleKey="flows_in_year"
+        titleParams={{ year }}
+        subtitleKey="flow_subtitle"
+        subtitleParams={{ count: flows.length }}
+      />
 
       <FlowContent
         flows={flows}
         entryDates={entryDates}
         tags={tags}
         currentDate={`${year}-01-01`}
+        breadcrumb={breadcrumb}
       />
     </div>
   );