@hutusi/amytis 1.7.0 → 1.8.0

package/scripts/generate-knowledge-graph.ts

@@ -0,0 +1,162 @@
+/**
+ * Generate public/knowledge-graph.json for the Knowledge Graph visualization.
+ *
+ * Nodes: all posts, all notes, and flows that appear as wikilink source/target.
+ * Edges: wikilink edges (from backlink index) + series membership edges.
+ *
+ * Run: NODE_ENV=production bun scripts/generate-knowledge-graph.ts
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { getAllPosts, getAllNotes, getAllFlows, getSeriesData } from '../src/lib/markdown';
+
+interface GraphNode {
+  id: string;
+  title: string;
+  type: 'post' | 'note' | 'flow' | 'series';
+  url: string;
+  connections: number;
+}
+
+interface GraphEdge {
+  source: string;
+  target: string;
+  type: 'wikilink' | 'series';
+}
+
+function extractWikilinks(content: string): string[] {
+  const slugs: string[] = [];
+  const re = /\[\[([^\]|]+?)(?:\|[^\]]+?)?\]\]/g;
+  let match;
+  while ((match = re.exec(content)) !== null) {
+    slugs.push(match[1].trim());
+  }
+  return slugs;
+}
+
+async function main() {
+  console.log('Generating knowledge graph…');
+
+  const posts = getAllPosts();
+  const notes = getAllNotes();
+  const flows = getAllFlows();
+
+  // Build id→node map
+  const nodeMap = new Map<string, GraphNode>();
+  const edges: GraphEdge[] = [];
+
+  // Add all posts and notes
+  for (const post of posts) {
+    nodeMap.set(post.slug, { id: post.slug, title: post.title, type: 'post', url: `/posts/${post.slug}`, connections: 0 });
+  }
+  for (const note of notes) {
+    nodeMap.set(note.slug, { id: note.slug, title: note.title, type: 'note', url: `/notes/${note.slug}`, connections: 0 });
+  }
+
+  // Track which flows appear in wikilinks (to avoid including ALL flows)
+  const linkedFlowSlugs = new Set<string>();
+
+  // Scan all content for wikilinks
+  const allContent: Array<{ slug: string; title: string; type: 'post' | 'note' | 'flow'; content: string; url: string }> = [
+    ...posts.map(p => ({ slug: p.slug, title: p.title, type: 'post' as const, content: p.content, url: `/posts/${p.slug}` })),
+    ...notes.map(n => ({ slug: n.slug, title: n.title, type: 'note' as const, content: n.content, url: `/notes/${n.slug}` })),
+    ...flows.map(f => ({ slug: f.slug, title: f.title, type: 'flow' as const, content: f.content, url: `/flows/${f.slug}` })),
+  ];
+
+  // Build wikilink edges (deduplicate per source document)
+  for (const item of allContent) {
+    const targets = extractWikilinks(item.content);
+    const seenTargets = new Set<string>();
+    for (const target of targets) {
+      if (target === item.slug) continue; // skip self
+      if (seenTargets.has(target)) continue; // skip duplicate within this doc
+      seenTargets.add(target);
+      edges.push({ source: item.slug, target, type: 'wikilink' });
+
+      // Ensure source exists in nodeMap
+      if (!nodeMap.has(item.slug)) {
+        nodeMap.set(item.slug, { id: item.slug, title: item.title, type: item.type, url: item.url, connections: 0 });
+        if (item.type === 'flow') linkedFlowSlugs.add(item.slug);
+      }
+      // Track referenced flows
+      const targetFlow = flows.find(f => f.slug === target);
+      if (targetFlow) {
+        linkedFlowSlugs.add(target);
+        if (!nodeMap.has(target)) {
+          nodeMap.set(target, { id: target, title: targetFlow.title, type: 'flow', url: `/flows/${target}`, connections: 0 });
+        }
+      }
+    }
+  }
+
+  // Add series nodes + series membership edges
+  const seriesSlugsSet = new Set<string>();
+  for (const post of posts) {
+    if (post.series) seriesSlugsSet.add(post.series);
+  }
+
+  for (const seriesSlug of seriesSlugsSet) {
+    const seriesData = getSeriesData(seriesSlug);
+    const seriesId = `series:${seriesSlug}`;
+    nodeMap.set(seriesId, {
+      id: seriesId,
+      title: seriesData?.title || seriesSlug,
+      type: 'series',
+      url: `/series/${seriesSlug}`,
+      connections: 0,
+    });
+    // Add edges from series to each post
+    for (const post of posts) {
+      if (post.series === seriesSlug) {
+        edges.push({ source: seriesId, target: post.slug, type: 'series' });
+      }
+    }
+  }
+
+  // Compute connection counts
+  for (const edge of edges) {
+    const src = nodeMap.get(edge.source);
+    if (src) src.connections++;
+    const tgt = nodeMap.get(edge.target);
+    if (tgt) tgt.connections++;
+  }
+
+  // Filter out nodes with no edges (isolated) to keep graph clean
+  const connectedIds = new Set<string>();
+  for (const edge of edges) {
+    connectedIds.add(edge.source);
+    connectedIds.add(edge.target);
+  }
+
+  // Always include all notes and posts (they are the knowledge base)
+  const nodes = Array.from(nodeMap.values()).filter(n =>
+    n.type === 'note' || n.type === 'post' || n.type === 'series' || connectedIds.has(n.id)
+  );
+
+  // Filter edges to only include those with both source and target in nodes
+  const validIds = new Set(nodes.map(n => n.id));
+  const validEdges = edges.filter(e => validIds.has(e.source) && validIds.has(e.target));
+
+  // Recompute connection counts from validEdges only (pre-filter counts were inflated)
+  const connectionCounts = new Map<string, number>();
+  for (const edge of validEdges) {
+    connectionCounts.set(edge.source, (connectionCounts.get(edge.source) ?? 0) + 1);
+    connectionCounts.set(edge.target, (connectionCounts.get(edge.target) ?? 0) + 1);
+  }
+  for (const node of nodes) {
+    node.connections = connectionCounts.get(node.id) ?? 0;
+  }
+
+  const graphData = { nodes, edges: validEdges };
+
+  const outputPath = path.join(process.cwd(), 'public', 'knowledge-graph.json');
+  fs.writeFileSync(outputPath, JSON.stringify(graphData, null, 2));
+
+  console.log(`✓ Written ${nodes.length} nodes, ${validEdges.length} edges → ${outputPath}`);
+}
+
+main().catch(err => {
+  console.error('Error generating knowledge graph:', err);
+  process.exit(1);
+});

package/scripts/new-flow.ts

@@ -2,14 +2,12 @@ import fs from 'fs';
 import path from 'path';
 
 const args = process.argv.slice(2);
-const title = args.filter(arg => !arg.startsWith('--'))[0];
 const useMdx = args.includes('--mdx');
 
 const now = new Date();
 const year = String(now.getFullYear());
 const month = String(now.getMonth() + 1).padStart(2, '0');
 const day = String(now.getDate()).padStart(2, '0');
-const dateStr = `${year}-${month}-${day}`;
 
 const ext = useMdx ? '.mdx' : '.md';
 const dirPath = path.join(process.cwd(), 'content', 'flows', year, month);
@@ -34,10 +32,7 @@ if (!fs.existsSync(dirPath)) {
   fs.mkdirSync(dirPath, { recursive: true });
 }
 
-const flowTitle = title || dateStr;
-
 const content = `---
-title: "${flowTitle}"
 tags: []
 ---
 

package/scripts/new-note.ts

@@ -0,0 +1,53 @@
+import fs from 'fs';
+import path from 'path';
+
+const args = process.argv.slice(2);
+const titleArg = args.filter(arg => !arg.startsWith('--'))[0];
+const useMd = args.includes('--md');
+
+if (!titleArg) {
+  console.error('Usage: bun run new-note "Note Title"');
+  process.exit(1);
+}
+
+// Slugify title
+const slug = titleArg
+  .toLowerCase()
+  .replace(/[^a-z0-9\u4e00-\u9fff]+/g, '-')
+  .replace(/^-|-$/g, '');
+
+const now = new Date();
+const dateStr = now.toISOString().split('T')[0];
+const ext = useMd ? '.md' : '.mdx';
+
+const notesDir = path.join(process.cwd(), 'content', 'notes');
+const targetPath = path.join(notesDir, `${slug}${ext}`);
+
+const altExt = useMd ? '.mdx' : '.md';
+const altPath = path.join(notesDir, `${slug}${altExt}`);
+
+if (fs.existsSync(targetPath)) {
+  console.error(`Error: Note already exists at ${targetPath}`);
+  process.exit(1);
+}
+
+if (fs.existsSync(altPath)) {
+  console.error(`Error: Note already exists at ${altPath}`);
+  process.exit(1);
+}
+
+if (!fs.existsSync(notesDir)) {
+  fs.mkdirSync(notesDir, { recursive: true });
+}
+
+const content = `---
+title: "${titleArg}"
+date: "${dateStr}"
+tags: []
+aliases: []
+---
+
+`;
+
+fs.writeFileSync(targetPath, content);
+console.log(`Created new note: ${targetPath}`);

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
@@ -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 ────────────────────────────────────────────────────────────────
@@ -93,6 +108,10 @@ export const siteConfig = {
       enabled: true,
       name: { en: "Flow", zh: "随笔" },
     },
+    notes: {
+      enabled: true,
+      name: { en: "Notes", zh: "笔记" },
+    },
   },
 
   // ── Homepage ──────────────────────────────────────────────────────────────
@@ -115,8 +134,9 @@ export const siteConfig = {
   // ── Content ───────────────────────────────────────────────────────────────
   pagination: {
     posts: 5,
-    series: 1,
+    series: 5,
     flows: 20,
+    notes: 20,
   },
   posts: {
     toc: true,

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

@@ -1,10 +1,11 @@
-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';
 
@@ -50,56 +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-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 +112,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

@@ -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>
+  );
+}