@hutusi/amytis 1.6.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hutusi/amytis",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "A high-performance digital garden and blog engine with Next.js 16 and Tailwind CSS v4",
   "repository": {
     "type": "git",
@@ -14,8 +14,9 @@
   "packageManager": "bun@1.3.4",
   "scripts": {
     "dev": "next dev",
-    "build": "bun scripts/copy-assets.ts && next build && next-image-export-optimizer && pagefind --site out",
-    "build:dev": "bun scripts/copy-assets.ts && next build && pagefind --site out --output-path public/pagefind",
+    "build": "bun scripts/copy-assets.ts && bun run build:graph && next build && next-image-export-optimizer && pagefind --site out",
+    "build:dev": "bun scripts/copy-assets.ts && bun run build:graph && next build && pagefind --site out --output-path public/pagefind",
+    "build:graph": "NODE_ENV=production bun scripts/generate-knowledge-graph.ts",
     "validate": "bun run lint && bun run test && bun run build:dev",
     "clean": "rm -rf .next out public/posts public/books public/flows",
     "new": "bun scripts/new-post.ts",
@@ -24,6 +25,7 @@
     "new-from-pdf": "bun scripts/new-from-pdf.ts",
     "new-from-images": "bun scripts/new-from-images.ts",
     "new-flow": "bun scripts/new-flow.ts",
+    "new-note": "bun scripts/new-note.ts",
     "series-draft": "bun scripts/series-draft.ts",
     "start": "next start",
     "lint": "eslint",
@@ -35,6 +37,7 @@
   "dependencies": {
     "@giscus/react": "^3.1.0",
     "@tailwindcss/typography": "^0.5.19",
+    "d3": "^7.9.0",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
     "image-size": "^2.0.2",
@@ -44,6 +47,7 @@
     "next-themes": "^0.4.6",
     "react": "19.2.4",
     "react-dom": "19.2.4",
+    "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.0",
     "rehype-katex": "^7.0.1",
@@ -57,6 +61,7 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",
     "@types/bun": "^1.3.9",
+    "@types/d3": "^7.4.3",
     "@types/image-size": "^0.8.0",
     "@types/node": "^24.10.13",
     "@types/react": "^19.2.14",

package/scripts/copy-assets.ts

@@ -51,7 +51,7 @@ function getSlugFromFilename(filename: string): string {
   const dateRegex = /^(\d{4}-\d{2}-\d{2})-(.*)$/;
   const match = nameWithoutExt.match(dateRegex);
 
-  if (match && !siteConfig.includeDateInUrl) {
+  if (match && !siteConfig.posts?.includeDateInUrl) {
     return match[2];
   }
   return nameWithoutExt;

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,67 +1,160 @@
+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
+const social = {
+  github: "https://github.com/hutusi/amytis",
+  twitter: "https://twitter.com/hutusi",
+  email: "mailto:huziyong@gmail.com",
+};
+
 export const siteConfig = {
+
+  // ── Site identity ─────────────────────────────────────────────────────────
   title: { en: "Amytis", zh: "Amytis" },
   description: { en: "A minimalist digital garden for growing thoughts and sharing knowledge.", zh: "一个极简的数字花园，用于培育思想和分享知识。" },
   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. 保留所有权利。` },
-  nav: [
-    { name: "Home", url: "/", weight: 1 },
-    { name: "Flow", url: "/flows", weight: 1.1 },
-    { name: "Books", url: "/books", weight: 1.3 },
-    { name: "Series", url: "/series", weight: 1.5 },
-    { name: "Archive", url: "/archive", weight: 2 },
-    { name: "Tags", url: "/tags", weight: 3 },
-    { name: "About", url: "/about", weight: 4 },
-  ],
-  social: {
-    github: "https://github.com/hutusi/amytis",
-    twitter: "https://twitter.com/hutusi",
-    email: "mailto:huziyong@gmail.com",
+
+  // ── i18n ──────────────────────────────────────────────────────────────────
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'zh'],
   },
-  series: {
-    navbar: ["digital-garden", "markdown-showcase", "ai-nexus-weekly"], // Slugs of series to show in navbar
+
+  // ── Navigation ────────────────────────────────────────────────────────────
+  nav: [
+    { name: "Flow", url: "/flows", weight: 1 },
+    { name: "Posts", url: "/posts", weight: 2 },
+    { 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 ────────────────────────────────────────────────────────────────
+  footer: {
+    explore: [
+      { name: "Archive", url: "/archive", weight: 1 },
+      { name: "Tags", url: "/tags", weight: 2 },
+      { name: "Links", url: "/links", weight: 3 },
+      { name: "About", url: "/about", weight: 4 },
+    ],
+    connect: [
+      { name: "GitHub", url: social.github, weight: 1 },
+      { name: "Twitter", url: social.twitter, weight: 2 },
+      { name: "RSS Feed", url: "/feed.xml", weight: 3 },
+      { name: "Subscribe", url: "/subscribe", weight: 4 },
+    ],
+    builtWith: {
+      show: true,
+      url: "https://github.com/hutusi/amytis",
+      text: { en: "Built with Amytis", zh: "基于 Amytis 构建" },
+    },
   },
-  books: {
-    navbar: [] as string[], // Slugs of books to show in navbar dropdown
+
+  // ── Social & sharing ──────────────────────────────────────────────────────
+  social,
+  share: {
+    enabled: true,
+    // Supported: twitter, facebook, linkedin, weibo, reddit, hackernews,
+    //            telegram, bluesky, mastodon, douban, zhihu, copy
+    platforms: ['twitter', 'facebook', 'linkedin', 'weibo', 'copy'],
   },
-  archive: {
-    showAuthors: true,
+  subscribe: {
+    substack: '',       // Substack publication URL, e.g., 'https://yourname.substack.com'
+    telegram: '',       // Telegram channel URL, e.g., 'https://t.me/yourchannel'
+    wechat: {
+      qrCode: '',       // Path to QR image in public/, e.g., '/images/wechat-qr.png'
+      account: '',      // WeChat official account ID/name shown below QR
+    },
+    email: '',          // Newsletter/mailing list URL (distinct from social.email contact address)
   },
-  pagination: {
-    posts: 5,
-    series: 1,
-    flows: 20,
+
+  // ── Features ──────────────────────────────────────────────────────────────
+  features: {
+    posts: {
+      enabled: true,
+      name: { en: "Posts", zh: "文章" },
+    },
+    series: {
+      enabled: true,
+      name: { en: "Series", zh: "系列" },
+    },
+    books: {
+      enabled: true,
+      name: { en: "Books", zh: "书籍" },
+    },
+    flows: {
+      enabled: true,
+      name: { en: "Flow", zh: "随笔" },
+    },
+    notes: {
+      enabled: true,
+      name: { en: "Notes", zh: "笔记" },
+    },
   },
-  includeDateInUrl: false,
-  // trailingSlash is configured in next.config.ts (Next.js handles URL normalization)
-  showFuturePosts: false,
-  toc: true,
-  themeColor: 'default', // 'default' | 'blue' | 'rose' | 'amber'
+
+  // ── 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: "一个极简的数字花园，用于培育思想和分享知识。" },
   },
-  about: {
-    title: { en: "About Amytis", zh: "关于 Amytis" },
-    subtitle: { en: "Learn more about the philosophy and technology behind this digital garden.", zh: "了解这座数字花园背后的理念与技术。" },
+  homepage: {
+    sections: [
+      { id: 'hero',            enabled: true, weight: 1 },
+      { id: 'featured-series', enabled: true, weight: 2, maxItems: 6, scrollThreshold: 2 },
+      { id: 'featured-books',  enabled: true, weight: 3, maxItems: 4, scrollThreshold: 2 },
+      { id: 'featured-posts',  enabled: true, weight: 4, maxItems: 4, scrollThreshold: 1 },
+      { id: 'latest-posts',    enabled: true, weight: 5, maxItems: 5 },
+      { id: 'recent-flows',    enabled: true, weight: 6, maxItems: 5 },
+    ],
   },
-  flows: {
-    recentCount: 5,
+
+  // ── Content ───────────────────────────────────────────────────────────────
+  pagination: {
+    posts: 5,
+    series: 5,
+    flows: 20,
+    notes: 20,
   },
-  featured: {
-    series: {
-      scrollThreshold: 2,  // Enable scrolling when more than this number
-      maxItems: 6,
-    },
-    stories: {
-      scrollThreshold: 1,  // Enable scrolling when more than this number
-      maxItems: 4,
+  posts: {
+    toc: true,
+    showFuturePosts: false,
+    includeDateInUrl: false,
+    // trailingSlash is configured in next.config.ts (Next.js handles URL normalization)
+    archive: {
+      showAuthors: true,
     },
   },
-  i18n: {
-    defaultLocale: 'en',
-    locales: ['en', 'zh'],
+  flows: {
+    recentCount: 5,
   },
+
+  // ── Appearance ────────────────────────────────────────────────────────────
+  themeColor: 'default', // 'default' | 'blue' | 'rose' | 'amber'
+
+  // ── Analytics ─────────────────────────────────────────────────────────────
   analytics: {
     provider: 'umami', // 'umami' | 'plausible' | 'google' | null
     umami: {
@@ -76,6 +169,8 @@ export const siteConfig = {
       measurementId: '', // G-XXXXXXXXXX
     },
   },
+
+  // ── Comments ──────────────────────────────────────────────────────────────
   comments: {
     provider: 'giscus', // 'giscus' | 'disqus' | null
     giscus: {
@@ -88,4 +183,11 @@ export const siteConfig = {
       shortname: '',
     },
   },
+
+  // ── Authors ───────────────────────────────────────────────────────────────
+  authors: {
+    // Map display name (as used in post frontmatter) to author profile
+    // "Author Name": { bio: "Short bio shown in author card below each post." },
+  } as Record<string, { bio?: string }>,
+
 };

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

@@ -53,15 +53,5 @@ export default async function Page({
     return <PostLayout post={page} />;
   }
 
-  if (slug === 'about' && siteConfig.about) {
-    return (
-      <SimpleLayout
-        post={page}
-        titleOverride={siteConfig.about.title}
-        subtitleOverride={siteConfig.about.subtitle}
-      />
-    );
-  }
-
   return <SimpleLayout post={page} />;
 }

package/src/app/archive/page.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
-import { getAllPosts, PostData } from '@/lib/markdown';
+import { getAllPosts, getSeriesData, PostData } from '@/lib/markdown';
 import { siteConfig } from '../../../site.config';
-import { resolveLocale } from '@/lib/i18n';
+import { resolveLocale, t } from '@/lib/i18n';
 import PageHeader from '@/components/PageHeader';
 
 export const metadata = {
@@ -41,12 +41,20 @@ function groupPostsByDate(posts: PostData[]): GroupedPosts {
 export default function ArchivePage() {
   const posts = getAllPosts();
   const groupedPosts = groupPostsByDate(posts);
-  const showAuthors = siteConfig.archive?.showAuthors;
+  const showAuthors = siteConfig.posts?.archive?.showAuthors;
 
   // Sort years descending to show newest content first
   const years = Object.keys(groupedPosts).sort((a, b) => Number(b) - Number(a));
   const totalPosts = posts.length;
 
+  // Build series slug → title map (one lookup per unique series)
+  const seriesSlugs = [...new Set(posts.filter(p => p.series).map(p => p.series!))];
+  const seriesTitleMap: Record<string, string> = {};
+  for (const slug of seriesSlugs) {
+    const data = getSeriesData(slug);
+    if (data) seriesTitleMap[slug] = data.title;
+  }
+
   return (
     <div className="layout-main">
       <PageHeader
@@ -57,7 +65,25 @@ export default function ArchivePage() {
         subtitleParams={{ count: totalPosts, years: years.length }}
       />
 
-      <main className="max-w-4xl mx-auto">
+      <main>
+        {/* Year-jump navigation — mirrors content grid to align with timeline column */}
+        {years.length > 1 && (
+          <div className="grid grid-cols-1 md:grid-cols-[200px_1fr] gap-8 md:gap-16 mb-16">
+            <div />
+            <nav aria-label="Jump to year" className="flex flex-wrap items-center gap-2">
+              {years.map(year => (
+                <a
+                  key={year}
+                  href={`#${year}`}
+                  className="text-xs font-mono text-muted hover:text-accent border border-muted/20 hover:border-accent/40 rounded px-3 py-1 transition-all duration-200 no-underline"
+                >
+                  {year}
+                </a>
+              ))}
+            </nav>
+          </div>
+        )}
+
         <div className="space-y-24">
           {years.map((year) => {
             // Sort months within the year in descending order (December -> January)
@@ -67,7 +93,7 @@ export default function ArchivePage() {
             const yearTotal = months.reduce((total, month) => total + groupedPosts[year][month].length, 0);
 
             return (
-              <section key={year} className="relative grid grid-cols-1 md:grid-cols-[200px_1fr] gap-8 md:gap-16">
+              <section key={year} id={year} className="relative grid grid-cols-1 md:grid-cols-[200px_1fr] gap-8 md:gap-16">
                 {/* Year Marker */}
                 <div className="relative">
                   <div className="sticky top-24 lg:top-32 text-left md:text-right">
@@ -75,7 +101,7 @@ export default function ArchivePage() {
                       {year}
                     </h2>
                     <span className="block text-xs font-bold uppercase tracking-widest text-muted mt-2">
-                      {yearTotal} Posts
+                      {yearTotal} {t('posts')}
                     </span>
                   </div>
                 </div>
@@ -91,7 +117,9 @@ export default function ArchivePage() {
                         
                         <h3 className="text-base font-sans font-bold uppercase tracking-widest text-accent mb-8">
                           {getMonthName(Number(month))}
-                          <span className="ml-2 text-xs font-normal text-muted/60">({monthPosts.length})</span>
+                          <span className="ml-2 inline-flex items-center text-[10px] font-mono text-muted/60 bg-muted/10 rounded px-1.5 py-0.5 align-middle leading-none">
+                            {monthPosts.length}
+                          </span>
                         </h3>
                         
                         <ul className="space-y-6">
@@ -113,10 +141,10 @@ export default function ArchivePage() {
                                         </h4>
                                         {post.series && (
                                           <span
-                                            title={post.series}
-                                            className="text-[10px] font-sans font-medium uppercase tracking-wider text-accent/60 border border-accent/20 rounded px-1.5 py-0.5 shrink-0 leading-none max-w-[10ch] truncate inline-block align-baseline"
+                                            title={seriesTitleMap[post.series] ?? post.series}
+                                            className="text-[10px] font-sans font-medium uppercase tracking-wider text-accent/60 border border-accent/20 rounded px-1.5 py-0.5 shrink-0 leading-none max-w-[14ch] truncate inline-block align-baseline"
                                           >
-                                            {post.series}
+                                            {seriesTitleMap[post.series] ?? post.series}
                                           </span>
                                         )}
                                       </div>

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

@@ -22,9 +22,27 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
     return { title: 'Book Not Found' };
   }
 
+  const ogImage = book.coverImage && !book.coverImage.startsWith('text:') && !book.coverImage.startsWith('./')
+    ? book.coverImage
+    : siteConfig.ogImage;
+
   return {
     title: `${book.title} | ${resolveLocale(siteConfig.title)}`,
     description: book.excerpt,
+    openGraph: {
+      title: book.title,
+      description: book.excerpt,
+      type: 'website',
+      url: `${siteConfig.baseUrl}/books/${slug}`,
+      siteName: resolveLocale(siteConfig.title),
+      images: [{ url: ogImage, width: 1200, height: 630, alt: book.title }],
+    },
+    twitter: {
+      card: ogImage !== siteConfig.ogImage ? 'summary_large_image' : 'summary',
+      title: book.title,
+      description: book.excerpt,
+      images: [ogImage],
+    },
   };
 }