@hutusi/amytis 1.7.0 → 1.9.0

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

@@ -2,13 +2,14 @@ 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;
 
 export function generateStaticParams() {
+  if (siteConfig.features?.flow?.enabled === false) return [{ page: '2' }];
   const allFlows = getAllFlows();
   const totalPages = Math.ceil(allFlows.length / PAGE_SIZE);
 
@@ -29,6 +30,7 @@ export async function generateMetadata({ params }: { params: Promise<{ page: str
 }
 
 export default async function FlowsPaginatedPage({ params }: { params: Promise<{ page: string }> }) {
+  if (siteConfig.features?.flow?.enabled === false) notFound();
   const { page: pageStr } = await params;
   const page = parseInt(pageStr, 10);
   const allFlows = getAllFlows();
@@ -45,13 +47,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,10 @@
 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 { notFound } from 'next/navigation';
+import { t, tWith, resolveLocale } from '@/lib/i18n';
 import FlowContent from '@/components/FlowContent';
+import FlowHubTabs from '@/components/FlowHubTabs';
 
 const PAGE_SIZE = siteConfig.pagination.flows;
 
@@ -13,6 +14,7 @@ export const metadata: Metadata = {
 };
 
 export default function FlowsPage() {
+  if (siteConfig.features?.flow?.enabled === false) notFound();
   const allFlows = getAllFlows();
   const totalPages = Math.ceil(allFlows.length / PAGE_SIZE);
   const flows = allFlows.slice(0, PAGE_SIZE);
@@ -21,12 +23,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,21 @@
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+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() {
+  if (siteConfig.features?.flow?.enabled === false) notFound();
+  return (
+    <div className="layout-main">
+      <FlowHubTabs subtitle={t('graph_subtitle')} />
+      <KnowledgeGraph />
+    </div>
+  );
+}

package/src/app/layout.tsx

@@ -3,6 +3,7 @@ import localFont from "next/font/local";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import Analytics from "@/components/Analytics";
+import BrowserDetectionBanner from "@/components/BrowserDetectionBanner";
 import { siteConfig } from "../../site.config";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import { LanguageProvider } from "@/components/LanguageProvider";
@@ -89,7 +90,7 @@ export default function RootLayout({
     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,
@@ -106,7 +107,7 @@ export default function RootLayout({
       ? 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 (
@@ -128,6 +129,7 @@ export default function RootLayout({
             <div className="selection:bg-accent/20 selection:text-accent dark:selection:bg-accent/30 dark:selection:text-accent min-h-screen flex flex-col">
               <Navbar seriesList={seriesList} booksList={booksList} />
               <main id="main-content" className="pt-16 flex-grow">
+                <BrowserDetectionBanner updateUrl={siteConfig.browserCheck?.updateUrl} />
                 {children}
               </main>
               <Footer />

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

@@ -0,0 +1,129 @@
+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() {
+  if (siteConfig.features?.flow?.enabled === false) return [{ slug: '_' }];
+  const notes = getAllNotes();
+  if (notes.length === 0) return [{ slug: '_' }];
+  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 }> }) {
+  if (siteConfig.features?.flow?.enabled === false) notFound();
+  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,60 @@
+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() {
+  if (siteConfig.features?.flow?.enabled === false) return [{ page: '2' }];
+  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 }> }) {
+  if (siteConfig.features?.flow?.enabled === false) notFound();
+  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>
+  );
+}

package/src/app/notes/page.tsx

@@ -0,0 +1,33 @@
+import { getAllNotes, getNoteTags } from '@/lib/markdown';
+import { siteConfig } from '../../../site.config';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { t, tWith, resolveLocale } from '@/lib/i18n';
+import NoteContent from '@/components/NoteContent';
+import FlowHubTabs from '@/components/FlowHubTabs';
+
+const PAGE_SIZE = siteConfig.pagination.notes ?? 20;
+
+export const metadata: Metadata = {
+  title: `${t('notes')} | ${resolveLocale(siteConfig.title)}`,
+  description: 'Knowledge base notes.',
+};
+
+export default function NotesPage() {
+  if (siteConfig.features?.flow?.enabled === false) notFound();
+  const allNotes = getAllNotes();
+  const totalPages = Math.ceil(allNotes.length / PAGE_SIZE);
+  const notes = allNotes.slice(0, PAGE_SIZE);
+  const tags = getNoteTags();
+
+  return (
+    <div className="layout-main">
+      <FlowHubTabs subtitle={tWith('notes_subtitle', { count: allNotes.length })} />
+      <NoteContent
+        notes={notes}
+        tags={tags}
+        pagination={totalPages > 1 ? { currentPage: 1, totalPages, basePath: '/notes' } : undefined}
+      />
+    </div>
+  );
+}

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

@@ -15,6 +15,7 @@ export async function generateStaticParams() {
   for (let i = 2; i <= totalPages; i++) {
     params.push({ page: i.toString() });
   }
+  if (params.length === 0) return [{ page: '2' }];
   return params;
 }
 

package/src/app/page.tsx

@@ -52,7 +52,7 @@ export default function Home() {
   // Load data only for sections that are both enabled on homepage and globally
   const allSeries = has('featured-series') && features?.series?.enabled !== false ? getFeaturedSeries() : {};
   const featuredBooks = has('featured-books') && features?.books?.enabled !== false ? getFeaturedBooks() : [];
-  const recentFlows = has('recent-flows') && features?.flows?.enabled !== false
+  const recentFlows = has('recent-flows') && features?.flow?.enabled !== false
     ? getRecentFlows(recentFlowsMax)
     : [];
   const needsPosts = has('featured-posts') || has('latest-posts');
@@ -87,15 +87,14 @@ export default function Home() {
         coverImage: b.coverImage,
         authors: b.authors,
         chapterCount: b.chapters.length,
-        firstChapter: b.chapters[0]?.file,
+        firstChapter: b.chapters[0]?.id,
       }))
     : [];
 
-  const recentNoteItems: RecentNoteItem[] = has('recent-flows') && features?.flows?.enabled !== false
+  const recentNoteItems: RecentNoteItem[] = has('recent-flows') && features?.flow?.enabled !== false
     ? recentFlows.map(f => ({
         slug: f.slug,
         date: f.date,
-        title: f.title,
         excerpt: f.excerpt,
       }))
     : [];
@@ -148,7 +147,7 @@ export default function Home() {
         if (features?.posts?.enabled === false) return null;
         return <LatestWritingSection key="latest-posts" posts={posts} totalCount={allPosts.length} />;
       case 'recent-flows':
-        if (features?.flows?.enabled === false) return null;
+        if (features?.flow?.enabled === false) return null;
         return <RecentNotesSection key="recent-flows" notes={recentNoteItems} />;
       default:
         return null;

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

@@ -1,4 +1,4 @@
-import { getPostBySlug, getAllPosts, getRelatedPosts, getSeriesPosts, getSeriesData, getAdjacentPosts, PostData } from '@/lib/markdown';
+import { getPostBySlug, getAllPosts, getRelatedPosts, getSeriesPosts, getSeriesData, getAdjacentPosts, buildSlugRegistry, getBacklinks, PostData } from '@/lib/markdown';
 import { notFound } from 'next/navigation';
 import PostLayout from '@/layouts/PostLayout';
 import SimpleLayout from '@/layouts/SimpleLayout';
@@ -30,6 +30,7 @@ function resolvePostFromParam(rawSlug: string) {
  */
 export async function generateStaticParams() {
   const posts = getAllPosts();
+  if (posts.length === 0) return [{ slug: '_' }];
   return posts.map((post) => ({ slug: post.slug }));
 }
 
@@ -99,6 +100,8 @@ export default async function PostPage({
 
   const relatedPosts = getRelatedPosts(slug);
   const { prev, next } = getAdjacentPosts(slug);
+  const slugRegistry = buildSlugRegistry();
+  const backlinks = getBacklinks(slug);
   let seriesPosts: PostData[] = [];
   let seriesTitle: string | undefined;
 
@@ -109,5 +112,5 @@ export default async function PostPage({
   }
 
   // Default to standard post layout
-  return <PostLayout post={post} relatedPosts={relatedPosts} seriesPosts={seriesPosts} seriesTitle={seriesTitle} prevPost={prev} nextPost={next} />;
+  return <PostLayout post={post} relatedPosts={relatedPosts} seriesPosts={seriesPosts} seriesTitle={seriesTitle} prevPost={prev} nextPost={next} backlinks={backlinks} slugRegistry={slugRegistry} />;
 }

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

@@ -3,6 +3,7 @@ import PostList from '@/components/PostList';
 import Pagination from '@/components/Pagination';
 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';
 
@@ -13,7 +14,7 @@ export function generateStaticParams() {
   const totalPages = Math.ceil(allPosts.length / PAGE_SIZE);
 
   // Generate params for page 2 to totalPages (page 1 is handled by /posts/page.tsx)
-  if (totalPages <= 1) return [];
+  if (totalPages <= 1) return [{ page: '2' }];
 
   return Array.from({ length: totalPages - 1 }, (_, i) => ({
     page: (i + 2).toString(),
@@ -35,6 +36,8 @@ export default async function PostsPage({ params }: { params: Promise<{ page: st
   const allPosts = getAllPosts();
   const totalPages = Math.ceil(allPosts.length / PAGE_SIZE);
 
+  if (isNaN(page) || page < 2 || page > totalPages) notFound();
+
   const start = (page - 1) * PAGE_SIZE;
   const end = start + PAGE_SIZE;
   const posts = allPosts.slice(start, end);

package/src/app/search.json/route.ts

@@ -1,4 +1,4 @@
-import { getAllPosts, getAllBooks, getBookChapter, getAllFlows } from '@/lib/markdown';
+import { getAllPosts, getAllBooks, getBookChapter, getAllFlows, getAllNotes } from '@/lib/markdown';
 import { stripMarkdown } from '@/lib/search-utils';
 
 export const dynamic = 'force-static';
@@ -20,11 +20,11 @@ export async function GET() {
   const books = getAllBooks();
   for (const book of books) {
     for (const ch of book.chapters) {
-      const chapter = getBookChapter(book.slug, ch.file);
+      const chapter = getBookChapter(book.slug, ch.id);
       if (chapter) {
         searchIndex.push({
           title: `${chapter.title} — ${book.title}`,
-          slug: `books/${book.slug}/${ch.file}`,
+          slug: `books/${book.slug}/${ch.id}`,
           date: book.date,
           excerpt: chapter.excerpt || '',
           category: 'Book',
@@ -49,5 +49,19 @@ export async function GET() {
     });
   }
 
+  // Add notes to search index
+  const notes = getAllNotes();
+  for (const note of notes) {
+    searchIndex.push({
+      title: note.title,
+      slug: `notes/${note.slug}`,
+      date: note.date,
+      excerpt: note.excerpt,
+      category: 'Note',
+      tags: note.tags,
+      content: stripMarkdown(note.content),
+    });
+  }
+
   return Response.json(searchIndex);
 }

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

@@ -23,6 +23,7 @@ export async function generateStaticParams() {
         }
     }
   });
+  if (params.length === 0) return [{ slug: '_', page: '2' }];
   return params;
 }
 

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

@@ -12,9 +12,9 @@ const PAGE_SIZE = siteConfig.pagination.series;
 
 export async function generateStaticParams() {
   const allSeries = getAllSeries();
-  return Object.keys(allSeries).map((slug) => ({
-    slug,
-  }));
+  const slugs = Object.keys(allSeries);
+  if (slugs.length === 0) return [{ slug: '_' }];
+  return slugs.map((slug) => ({ slug }));
 }
 
 export const dynamicParams = false;

package/src/app/sitemap.ts

@@ -34,7 +34,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
       priority: 0.8,
     },
     ...book.chapters.map((ch) => ({
-      url: `${baseUrl}/books/${book.slug}/${ch.file}`,
+      url: `${baseUrl}/books/${book.slug}/${ch.id}`,
       lastModified: book.date,
       changeFrequency: 'monthly' as const,
       priority: 0.7,

package/src/app/tags/[tag]/page.tsx

@@ -9,9 +9,9 @@ import TagContentTabs from '@/components/TagContentTabs';
 
 export async function generateStaticParams() {
   const tags = getAllTags();
-  return Object.keys(tags).map((tag) => ({
-    tag,
-  }));
+  const tagKeys = Object.keys(tags);
+  if (tagKeys.length === 0) return [{ tag: '_' }];
+  return tagKeys.map((tag) => ({ tag }));
 }
 
 export const dynamicParams = false;

package/src/components/Backlinks.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link';
+import { BacklinkSource } from '@/lib/markdown';
+import { t } from '@/lib/i18n';
+
+interface BacklinksProps {
+  backlinks: BacklinkSource[];
+}
+
+export default function Backlinks({ backlinks }: BacklinksProps) {
+  if (!backlinks.length) return null;
+
+  return (
+    <div className="mt-12 pt-12 border-t border-muted/20">
+      <h3 className="text-sm font-sans font-semibold uppercase tracking-widest text-muted mb-4">
+        {t('backlinks')}
+      </h3>
+      <div className="flex flex-col gap-4">
+        {backlinks.map(bl => (
+          <div key={`${bl.type}-${bl.slug}`} className="flex flex-col gap-1">
+            <div className="flex items-center gap-2">
+              <span className="text-[10px] font-sans font-bold uppercase tracking-widest text-muted/60 border border-muted/20 rounded px-1.5 py-0.5">
+                {bl.type}
+              </span>
+              <Link
+                href={bl.url}
+                className="text-sm font-medium text-heading hover:text-accent no-underline transition-colors"
+              >
+                {bl.title}
+              </Link>
+            </div>
+            {bl.context && (
+              <p className="text-sm text-muted leading-relaxed">&ldquo;{bl.context}&rdquo;</p>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}