@hutusi/amytis 1.6.0 → 1.8.0

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

@@ -1,10 +1,12 @@
-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() {
@@ -24,6 +26,19 @@ export async function generateMetadata({ params }: { params: Promise<{ year: str
   return {
     title: `${flow.title} | ${resolveLocale(siteConfig.title)}`,
     description: flow.excerpt,
+    openGraph: {
+      title: flow.title,
+      description: flow.excerpt,
+      type: 'article',
+      publishedTime: flow.date,
+      url: `${siteConfig.baseUrl}/flows/${year}/${month}/${day}`,
+      siteName: resolveLocale(siteConfig.title),
+    },
+    twitter: {
+      card: 'summary',
+      title: flow.title,
+      description: flow.excerpt,
+    },
   };
 }
 
@@ -36,53 +51,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-16 pt-8 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">Older</span>
-                <div className="text-sm font-medium text-heading group-hover:text-accent transition-colors truncate">
-                  {prev.title}
+                <span className="text-xs text-muted">{t('older')}</span>
+                <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 ? (
@@ -90,11 +111,10 @@ export default async function FlowPage({ params }: { params: Promise<{ year: str
                 href={`/flows/${next.slug}`}
                 className="group text-right no-underline"
               >
-                <span className="text-xs text-muted">Newer</span>
-                <div className="text-sm font-medium text-heading group-hover:text-accent transition-colors truncate">
-                  {next.title}
+                <span className="text-xs text-muted">{t('newer')}</span>
+                <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

@@ -39,6 +39,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 +62,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

@@ -44,38 +44,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>
   );

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

@@ -2,9 +2,9 @@ import { getAllFlows, getFlowTags } from '@/lib/markdown';
 import { siteConfig } from '../../../../../site.config';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { t, resolveLocale } from '@/lib/i18n';
-import PageHeader from '@/components/PageHeader';
+import { t, tWith, resolveLocale } from '@/lib/i18n';
 import FlowContent from '@/components/FlowContent';
+import FlowHubTabs from '@/components/FlowHubTabs';
 
 const PAGE_SIZE = siteConfig.pagination.flows;
 
@@ -45,13 +45,7 @@ export default async function FlowsPaginatedPage({ params }: { params: Promise<{
 
   return (
     <div className="layout-main">
-      <PageHeader
-        titleKey="flow"
-        subtitleKey="page_of_total"
-        subtitleParams={{ page, total: totalPages }}
-        className="mb-12"
-      />
-
+      <FlowHubTabs subtitle={tWith('page_of_total', { page, total: totalPages })} />
       <FlowContent
         flows={flows}
         entryDates={entryDates}

package/src/app/flows/page.tsx

@@ -1,9 +1,9 @@
 import { getAllFlows, getFlowTags } from '@/lib/markdown';
 import { siteConfig } from '../../../site.config';
 import { Metadata } from 'next';
-import { t, resolveLocale } from '@/lib/i18n';
-import PageHeader from '@/components/PageHeader';
+import { t, tWith, resolveLocale } from '@/lib/i18n';
 import FlowContent from '@/components/FlowContent';
+import FlowHubTabs from '@/components/FlowHubTabs';
 
 const PAGE_SIZE = siteConfig.pagination.flows;
 
@@ -21,12 +21,7 @@ export default function FlowsPage() {
 
   return (
     <div className="layout-main">
-      <PageHeader
-        titleKey="flow"
-        subtitleKey="flow_subtitle"
-        subtitleParams={{ count: allFlows.length }}
-      />
-
+      <FlowHubTabs subtitle={tWith('flow_subtitle', { count: allFlows.length })} />
       <FlowContent
         flows={flows}
         entryDates={entryDates}

package/src/app/globals.css

@@ -54,6 +54,47 @@
   --accent-hover: #f59e0b;
 }
 
+/* Wikilink styles */
+.wikilink {
+  text-decoration: none;
+  transition: color 0.15s;
+}
+.wikilink::before,
+.wikilink::after {
+  font-family: var(--font-mono);
+  font-size: 0.72em;
+  opacity: 0.45;
+  vertical-align: 0.08em;
+  transition: opacity 0.15s;
+}
+.wikilink::before { content: '[['; }
+.wikilink::after  { content: ']]'; }
+.wikilink--resolved {
+  color: var(--accent);
+}
+.wikilink--resolved:hover,
+.wikilink--resolved:focus-visible {
+  color: var(--accent-hover);
+  text-decoration: underline;
+  outline: none;
+}
+.wikilink--resolved:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+.wikilink--resolved:hover::before,
+.wikilink--resolved:hover::after,
+.wikilink--resolved:focus-visible::before,
+.wikilink--resolved:focus-visible::after {
+  opacity: 0.75;
+}
+.wikilink--broken {
+  color: var(--muted);
+  text-decoration: underline dashed;
+  cursor: default;
+}
+
 /* PrismJS Syntax Highlighting Custom Theme */
 code[class*="language-"],
 pre[class*="language-"] {

package/src/app/graph/page.tsx

@@ -0,0 +1,19 @@
+import { Metadata } from 'next';
+import { t, resolveLocale } from '@/lib/i18n';
+import { siteConfig } from '../../../site.config';
+import FlowHubTabs from '@/components/FlowHubTabs';
+import KnowledgeGraph from '@/components/KnowledgeGraph';
+
+export const metadata: Metadata = {
+  title: `${t('tab_graph')} | ${resolveLocale(siteConfig.title)}`,
+  description: t('graph_subtitle'),
+};
+
+export default function GraphPage() {
+  return (
+    <div className="layout-main">
+      <FlowHubTabs subtitle={t('graph_subtitle')} />
+      <KnowledgeGraph />
+    </div>
+  );
+}

package/src/app/layout.tsx

@@ -6,7 +6,7 @@ import Analytics from "@/components/Analytics";
 import { siteConfig } from "../../site.config";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import { LanguageProvider } from "@/components/LanguageProvider";
-import { getAllSeries, getAllBooks } from "@/lib/markdown";
+import { getAllSeries, getAllBooks, getSeriesData } from "@/lib/markdown";
 import { resolveLocale } from "@/lib/i18n";
 import "./globals.css";
 
@@ -47,6 +47,12 @@ const baskerville = localFont({
   variable: "--font-baskerville",
 });
 
+const siteTwitterHandle = (() => {
+  const url = siteConfig.social?.twitter ?? '';
+  const m = url.match(/(?:twitter\.com|x\.com)\/([^/?#]+)/);
+  return m ? `@${m[1]}` : undefined;
+})();
+
 export const metadata: Metadata = {
   metadataBase: new URL(siteConfig.baseUrl),
   title: resolveLocale(siteConfig.title),
@@ -54,6 +60,17 @@ export const metadata: Metadata = {
   icons: {
     icon: "/icon.svg",
   },
+  openGraph: {
+    siteName: resolveLocale(siteConfig.title),
+    locale: siteConfig.i18n.defaultLocale,
+    type: 'website',
+    images: [{ url: siteConfig.ogImage, width: 1200, height: 630 }],
+  },
+  twitter: {
+    card: 'summary',
+    site: siteTwitterHandle,
+    creator: siteTwitterHandle,
+  },
 };
 
 export default function RootLayout({
@@ -61,30 +78,39 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const allSeries = getAllSeries();
-  const featuredSeries = siteConfig.series?.navbar;
-  
-  const seriesKeys = Object.keys(allSeries).sort();
-  const filteredKeys = featuredSeries 
-    ? seriesKeys.filter(slug => featuredSeries.includes(slug))
-    : seriesKeys.slice(0, 5);
+  const features = siteConfig.features;
 
-  const seriesList = filteredKeys.map(slug => ({
-    name: allSeries[slug][0]?.series || slug,
-    slug,
-  }));
+  // Build series list for navbar (only when series feature is enabled)
+  const seriesNavItem = siteConfig.nav.find(item => item.url === '/series');
+  const featuredSeries = seriesNavItem?.dropdown;
+  let seriesList: { name: string; slug: string }[] = [];
+  if (features?.series?.enabled !== false) {
+    const allSeries = getAllSeries();
+    const seriesKeys = Object.keys(allSeries).sort();
+    const filteredKeys = featuredSeries && featuredSeries.length > 0
+      ? seriesKeys.filter(slug => featuredSeries.includes(slug))
+      : seriesKeys.slice(0, 5);
+    seriesList = filteredKeys.map(slug => ({
+      name: getSeriesData(slug)?.title || allSeries[slug][0]?.series || slug,
+      slug,
+    }));
+  }
 
-  // Build books list for navbar
-  const allBooks = getAllBooks();
-  const featuredBookSlugs = siteConfig.books?.navbar;
-  const booksList = featuredBookSlugs && featuredBookSlugs.length > 0
-    ? allBooks
-        .filter(book => featuredBookSlugs.includes(book.slug))
-        .map(book => ({ name: book.title, slug: book.slug }))
-    : allBooks.map(book => ({ name: book.title, slug: book.slug }));
+  // Build books list for navbar (only when books feature is enabled)
+  const booksNavItem = siteConfig.nav.find(item => item.url === '/books');
+  const featuredBookSlugs = booksNavItem?.dropdown;
+  let booksList: { name: string; slug: string }[] = [];
+  if (features?.books?.enabled !== false) {
+    const allBooks = getAllBooks();
+    booksList = featuredBookSlugs && featuredBookSlugs.length > 0
+      ? allBooks
+          .filter(book => featuredBookSlugs.includes(book.slug))
+          .map(book => ({ name: book.title, slug: book.slug }))
+      : allBooks.slice(0, 5).map(book => ({ name: book.title, slug: book.slug }));
+  }
 
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang={siteConfig.i18n.defaultLocale} suppressHydrationWarning>
       <body
         className={`${inter.variable} ${baskerville.variable} font-sans min-h-screen transition-colors duration-300`}
         data-palette={siteConfig.themeColor}

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

@@ -0,0 +1,128 @@
+import { getAllNotes, getNoteBySlug, buildSlugRegistry, getBacklinks, getAdjacentNotes } from '@/lib/markdown';
+import { notFound } from 'next/navigation';
+import { Metadata } from 'next';
+import { siteConfig } from '../../../../site.config';
+import { t, resolveLocale } from '@/lib/i18n';
+import MarkdownRenderer from '@/components/MarkdownRenderer';
+import NoteSidebar from '@/components/NoteSidebar';
+import Tag from '@/components/Tag';
+import Link from 'next/link';
+
+export function generateStaticParams() {
+  const notes = getAllNotes();
+  // Return a placeholder when empty so Next.js static export doesn't error on the dynamic route
+  if (notes.length === 0) return [{ slug: '_empty' }];
+  return notes.map(note => ({ slug: note.slug }));
+}
+
+export const dynamicParams = false;
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+  const { slug } = await params;
+  const note = getNoteBySlug(slug);
+  if (!note) return { title: 'Not Found' };
+  return {
+    title: `${note.title} | ${resolveLocale(siteConfig.title)}`,
+    description: note.excerpt,
+    openGraph: {
+      title: note.title,
+      description: note.excerpt,
+      type: 'article',
+      publishedTime: note.date,
+      siteName: resolveLocale(siteConfig.title),
+    },
+  };
+}
+
+export default async function NotePage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const note = getNoteBySlug(slug);
+  if (!note) notFound();
+
+  const slugRegistry = buildSlugRegistry();
+  const backlinks = getBacklinks(slug);
+  const { prev, next } = getAdjacentNotes(slug);
+
+  const showToc = note.toc !== false && note.headings.length > 0;
+  const visibleBacklinks = note.backlinks !== false ? backlinks : [];
+  const showSidebar = showToc || visibleBacklinks.length > 0;
+
+  const breadcrumb = (
+    <nav aria-label="Breadcrumb" className="flex items-center gap-1.5 text-sm text-muted">
+      <Link href="/notes" className="hover:text-accent no-underline">
+        {t('notes')}
+      </Link>
+      <span className="text-muted/40" aria-hidden="true">›</span>
+      <span className="text-foreground truncate">{note.title}</span>
+    </nav>
+  );
+
+  return (
+    <div className="layout-main">
+      {!showSidebar && <div className="mb-6">{breadcrumb}</div>}
+
+      <div className={showSidebar
+        ? 'grid grid-cols-1 lg:grid-cols-[280px_minmax(0,1fr)] gap-8 items-start'
+        : 'max-w-3xl mx-auto'
+      }>
+        {showSidebar && (
+          <NoteSidebar
+            headings={note.headings}
+            showToc={showToc}
+            backlinks={visibleBacklinks}
+            breadcrumb={breadcrumb}
+          />
+        )}
+        <article className="min-w-0 max-w-3xl mx-auto">
+          <header className="mb-8 border-b border-muted/10 pb-8">
+            {note.draft && (
+              <div className="mb-4">
+                <span className="text-xs font-bold text-red-500 bg-red-100 dark:bg-red-900/30 px-2 py-1 rounded tracking-widest inline-block">
+                  DRAFT
+                </span>
+              </div>
+            )}
+            <time className="text-sm font-mono text-accent" data-pagefind-meta="date[content]">
+              {note.date}
+            </time>
+            <h1 className="mt-2 text-3xl md:text-4xl font-serif font-bold text-heading leading-tight">
+              {note.title}
+            </h1>
+            {note.tags.length > 0 && (
+              <div className="flex flex-wrap gap-2 mt-4">
+                {note.tags.map(tag => (
+                  <Tag key={tag} tag={tag} variant="default" />
+                ))}
+              </div>
+            )}
+          </header>
+
+          <MarkdownRenderer content={note.content} slug={note.slug} slugRegistry={slugRegistry} />
+
+          {/* Prev/Next navigation */}
+          <nav aria-label="Note navigation" className="mt-12 pt-12 border-t border-muted/20 grid grid-cols-2 gap-4">
+            {prev ? (
+              <Link href={`/notes/${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>
+                <span className="text-xs font-mono text-muted">{prev.date}</span>
+              </Link>
+            ) : <div />}
+            {next ? (
+              <Link href={`/notes/${next.slug}`} 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>
+                <span className="text-xs font-mono text-muted">{next.date}</span>
+              </Link>
+            ) : <div />}
+          </nav>
+        </article>
+      </div>
+    </div>
+  );
+}
+

package/src/app/notes/page/[page]/page.tsx

@@ -0,0 +1,58 @@
+import { getAllNotes, getNoteTags } from '@/lib/markdown';
+import { siteConfig } from '../../../../../site.config';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { t, resolveLocale } from '@/lib/i18n';
+import PageHeader from '@/components/PageHeader';
+import NoteContent from '@/components/NoteContent';
+import FlowHubTabs from '@/components/FlowHubTabs';
+
+const PAGE_SIZE = siteConfig.pagination.notes ?? 20;
+
+export function generateStaticParams() {
+  const allNotes = getAllNotes();
+  const totalPages = Math.ceil(allNotes.length / PAGE_SIZE);
+  const pageCount = Math.max(1, totalPages - 1);
+  return Array.from({ length: pageCount }, (_, i) => ({
+    page: (i + 2).toString(),
+  }));
+}
+
+export const dynamicParams = false;
+
+export async function generateMetadata({ params }: { params: Promise<{ page: string }> }): Promise<Metadata> {
+  const { page } = await params;
+  return {
+    title: `${t('notes')} - ${page} | ${resolveLocale(siteConfig.title)}`,
+  };
+}
+
+export default async function NotesPaginatedPage({ params }: { params: Promise<{ page: string }> }) {
+  const { page: pageStr } = await params;
+  const page = parseInt(pageStr, 10);
+  const allNotes = getAllNotes();
+  const totalPages = Math.ceil(allNotes.length / PAGE_SIZE);
+
+  if (page > totalPages) notFound();
+
+  const tags = getNoteTags();
+  const start = (page - 1) * PAGE_SIZE;
+  const notes = allNotes.slice(start, start + PAGE_SIZE);
+
+  return (
+    <div className="layout-main">
+      <PageHeader
+        titleKey="notes"
+        subtitleKey="page_of_total"
+        subtitleParams={{ page, total: totalPages }}
+        className="mb-12"
+      />
+      <FlowHubTabs />
+      <NoteContent
+        notes={notes}
+        tags={tags}
+        pagination={{ currentPage: page, totalPages, basePath: '/notes' }}
+      />
+    </div>
+  );
+}