@hutusi/amytis 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -5,6 +5,55 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.8.0] - 2026-02-24
+
+### Added
+- **Digital Garden Foundation**: Introduced **Notes** (`content/notes/`) as atomic, evergreen units of knowledge.
+- **Interconnected Knowledge**:
+  - **Wiki-links**: Native support for `[[Slug]]` and `[[Slug|Display]]` bidirectional linking across all content types.
+  - **Backlinks**: Automated "Linked References" display with context snippets for every note.
+  - **Knowledge Graph**: Interactive, visual network map of the entire digital garden at `/graph`.
+- **Advanced Navigation**:
+  - **'More' Dropdown**: Configurable navbar menu for static child links (Archive, Tags, Links).
+  - **Scroll-aware UI**: Navbar now features scroll-triggered transparency and glassmorphism effects.
+  - **Active Route Tracking**: Visual indicators for currently active navigation paths.
+  - **Mobile Sub-groups**: Grouped navigation links in the mobile drawer for better information hierarchy.
+
+### Changed
+- **Content Experience**: Removed titles from daily Flows for a more immersive, journal-like journal experience.
+- **Layout Evolution**:
+  - Promoted `FlowHubTabs` to a primary page heading for easier navigation between Flows, Notes, and Graph.
+  - Moved note backlinks and breadcrumbs to the left sidebar for a cleaner, more aligned reading view.
+- **Improved Excerpts**: Refined logic to preserve content within inline code blocks during excerpt generation.
+
+### Fixed
+- **Navbar Stability**: Resolved a flash of transparency on initial mount by initializing scroll state correctly.
+- **Visual Distinction**: Added subtle bracket decorations and consistent hover states for wiki-links.
+- **Static Export**: Fixed handling of empty notes and trailing slashes in active state detection.
+
+## [1.7.0] - 2026-02-21
+
+### Added
+- **Subscription Hub**: Dedicated `/subscribe` page with support for RSS, Email/Substack, Telegram, and WeChat.
+- **Social Sharing**: New configurable `ShareBar` for posts and books with support for 10+ platforms (X, Reddit, Telegram, etc.).
+- **Enhanced Tags UX**:
+  - Redesigned tags index with A-Z grouping and popularity badges.
+  - Tabbed filtering for "Posts" vs "Flows" within each tag page.
+  - Sidebar-driven tag navigation with pagination and search.
+- **Improved Archive**: Redesigned chronological archive with year-based navigation, post counts, and series indicators.
+- **Content Expansion**: New multimedia showcase post and deep-dives on i18n routing strategies.
+- **Author Pages**: Added series contribution tracking and per-author book listings.
+
+### Changed
+- **Homepage Refinement**: Dynamic sections with configurable ordering, scrolling thresholds, and item limits via `site.config.ts`.
+- **Navigation Upgrade**: Segmented pill design for the language switcher and improved mobile drawer.
+- **Documentation**: Synchronized and streamlined `GEMINI.md`, `ARCHITECTURE.md`, and `TODO.md` roadmap.
+
+### Fixed
+- **Engineering**: Resolved multiple race conditions in scroll listeners via a new `useScrollY` singleton hook.
+- **Layout Consistency**: Standardized spacing, dividers, and typography across all content layouts.
+- **i18n Logic**: Fixed locale-specific TOC heading extraction and variant file exclusions.
+
 ## [1.6.0] - 2026-02-20
 
 ### Added

package/GEMINI.md

@@ -67,6 +67,12 @@ bun test
 - **Cover Images**: Support for local paths, external URLs, and dynamic desaturated gradients (`text:Label`).
 - **External Links**: Posts can include a list of curated external resources in frontmatter.
 
+### Digital Garden Features
+- **Notes**: Atomic, evergreen notes for personal knowledge management (`content/notes/`).
+- **Wiki-links**: Bidirectional linking using `[[Slug]]` syntax across all content types.
+- **Backlinks**: Automatic display of "Linked References" with context snippets.
+- **Knowledge Graph**: Interactive visualization of content relationships at `/graph`.
+
 ### Refined UX & Design
 - **Homepage**: Elegant layout with "Curated Series" and "Featured Stories" sections using horizontal scroll triggers.
 - **Navigation**: Command+K fuzzy search, sticky TOC with progress tracking, and Series Catalog sidebars.

package/README.md

@@ -9,10 +9,15 @@
 ## Features
 
 - **Digital Garden Philosophy:** Non-linear navigation through tags, series, authors, books, flows, and chronological archives.
+- **Interconnected Knowledge:**
+  - **Wiki-links:** Bidirectional linking (`[[Slug]]`) between all content types.
+  - **Backlinks:** Automatic "Linked References" display on notes.
+  - **Knowledge Graph:** Interactive visual map of your content connections.
 - **Full-text Search:** Fast, static client-side search across all content (Cmd/Ctrl+K) powered by Pagefind.
 - **Structured Content:**
   - **Series:** Multi-part content organization with manual or automatic ordering.
   - **Books:** Long-form content with explicit chapters, parts, and a dedicated reading interface.
+  - **Notes:** Atomic, evergreen concepts for personal knowledge management.
   - **Flows:** Stream-style daily notes or micro-blogging for quick thoughts.
 - **Rich MDX Content:**
   - GitHub Flavored Markdown (tables, task lists, strikethrough).
@@ -142,6 +147,10 @@ Create a directory in `content/series/` with an `index.mdx`.
 
 Books are for long-form, structured content. Create a directory in `content/books/`.
 
+### Notes
+
+Create evergreen notes in `content/notes/` (e.g., `concept.mdx`). Use `[[wiki-links]]` to connect them.
+
 ## Project Structure
 
 ```
@@ -150,21 +159,26 @@ amytis/
     posts/              # Blog posts
     series/             # Series collections
     books/              # Long-form books
+    notes/              # Digital garden notes
     flows/              # Daily notes (YYYY/MM/DD)
     about.mdx           # Static pages
   public/               # Static assets
   src/
     app/                # Next.js App Router pages
       books/            # Book routes
+      notes/            # Note routes
+      graph/            # Knowledge graph
       flows/            # Flow routes
     components/         # React components
     lib/
       markdown.ts       # Data access layer
+  site.config.ts        # Site configuration
 ```
 
 ## Documentation
 
 - [Architecture Overview](docs/ARCHITECTURE.md)
+- [Digital Garden Guide](docs/DIGITAL_GARDEN.md)
 - [Contributing Guide](docs/CONTRIBUTING.md)
 
 ## License

package/TODO.md

@@ -5,13 +5,25 @@
 - [ ] **Breadcrumbs**: Extend Flow breadcrumbs to standard Posts and Books.
 - [ ] **Dynamic OG**: Generate automated social cards with Satori for every post.
 - [ ] **PWA Support**: Add manifest and service worker for offline reading.
+- [ ] **SEO Boost**: Implement JSON-LD structured data for Articles, Books, and Breadcrumbs.
 
 ## 🌿 Digital Garden Evolution
-- [ ] **Backlinks**: Automatically list "Pages that link here" at the bottom of articles.
-- [ ] **Wiki-links**: Support `[[internal-link]]` syntax for easier cross-referencing.
-- [ ] **Knowledge Graph**: Interactive visual map of all connected notes.
+- [ ] **Knowledge Graph**: 
+  - [ ] Interactive fullscreen mode for the graph.
+  - [ ] Filter graph by tags or content types.
+  - [ ] "Local Graph" view in the sidebar of individual notes.
+- [ ] **Discovery**: 
+  - [ ] "On this day" section for Flows (history from previous years).
+  - [ ] RSS/Atom feeds for specific categories or tags.
+- [ ] **Notes**: Support for un-linked mentions (searching for note titles in plain text).
+
+## 🛠 Tooling & Maintenance
+- [ ] **Link Validator**: Script to check for broken internal wiki-links and external URLs.
+- [ ] **Content Porter**: Tool to import/export notes from Obsidian or Notion.
+- [ ] **Optimization**: Automatically compress and resize co-located images during build.
 
 ## ✅ Completed Highlights
+- [x] **Digital Garden**: Notes, Wiki-links, Backlinks, and interactive Knowledge Graph.
 - [x] **Pagefind Search**: High-performance static full-text indexing with rich UI.
 - [x] **Smart Navigation**: Persistent "Previous" and "Next" article links on all posts.
 - [x] **Multi-format Content**: Native support for **Posts**, **Series**, **Books**, and **Flows**.

package/bun.lock

@@ -7,6 +7,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",
@@ -30,6 +31,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",
@@ -556,7 +558,7 @@
 
     "comma-separated-tokens": ["comma-separated-tokens@2.0.3", "", {}, "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="],
 
-    "commander": ["commander@8.3.0", "", {}, "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="],
+    "commander": ["commander@7.2.0", "", {}, "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="],
 
     "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
 
@@ -1502,8 +1504,6 @@
 
     "cytoscape-fcose/cose-base": ["cose-base@2.2.0", "", { "dependencies": { "layout-base": "^2.0.0" } }, "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g=="],
 
-    "d3-dsv/commander": ["commander@7.2.0", "", {}, "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="],
-
     "d3-sankey/d3-array": ["d3-array@2.12.1", "", { "dependencies": { "internmap": "^1.0.0" } }, "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ=="],
 
     "d3-sankey/d3-shape": ["d3-shape@1.3.7", "", { "dependencies": { "d3-path": "1" } }, "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw=="],
@@ -1520,6 +1520,8 @@
 
     "is-bun-module/semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
 
+    "katex/commander": ["commander@8.3.0", "", {}, "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="],
+
     "mdast-util-find-and-replace/escape-string-regexp": ["escape-string-regexp@5.0.0", "", {}, "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="],
 
     "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],

package/content/flows/2026/02/05.md

@@ -1,5 +1,4 @@
 ---
-title: "Bun as a Package Manager"
 tags: ["tooling", "bun"]
 ---
 

package/content/flows/2026/02/10.mdx

@@ -1,8 +1,9 @@
 ---
-title: "On Digital Gardens"
 tags: ["writing", "digital-garden"]
 ---
 
 Been thinking about the difference between blogs and digital gardens. Blogs are streams — chronological, finished thoughts published into the void. Gardens are networks — interconnected ideas that grow and evolve over time.
 
 This site tries to bridge both: structured posts for polished essays, and this flow section for raw, daily observations. The garden metaphor resonates because ideas really do need tending.
+
+The [[zettelkasten-method]] is the underlying system that makes a garden actually work — atomic notes linked by meaning rather than filed in folders. And [[digital-garden-philosophy]] explores why publishing half-formed ideas in public is worth the discomfort.

package/content/flows/2026/02/15.md

@@ -1,8 +1,9 @@
 ---
-title: "Tailwind CSS v4 First Impressions"
 tags: ["css", "tailwind"]
 ---
 
 Upgraded the project to Tailwind CSS v4 today. The new CSS-first configuration approach is a breath of fresh air — no more `tailwind.config.js` for most use cases.
 
 The `@theme` directive for defining design tokens directly in CSS feels much more natural. Performance improvements are noticeable too, especially during development with faster HMR.
+
+More detailed notes captured in [[tailwind-v4]] — particularly the breaking changes around dark mode and `@apply`.

package/content/flows/2026/02/18.mdx

@@ -1,5 +1,4 @@
 ---
-title: "Exploring React Server Components"
 tags: ["react", "notes"]
 ---
 
@@ -12,3 +11,5 @@ Spent some time digging into React Server Components today. The mental model shi
 - Data fetching becomes much simpler without `useEffect` chains
 
 The composability of mixing server and client components in the same tree is elegant once you get used to it.
+
+Writing up a fuller note on this: [[react-server-components]].

package/content/flows/2026/02/20.md

@@ -1,5 +1,4 @@
 ---
-title: "Multimedia embeds in markdown"
 tags: ["video", "podcast", "markdown", "web"]
 ---
 

package/content/notes/algorithms-and-data-structures.mdx

@@ -0,0 +1,51 @@
+---
+title: "Algorithms and Data Structures"
+date: "2026-01-28"
+tags: ["algorithms", "computer-science", "fundamentals"]
+aliases: ["algorithms"]
+---
+
+Algorithms and data structures are the grammar of computation. You can write software without thinking about them explicitly, but the moment performance matters — or the problem gets hard — you need this vocabulary.
+
+## Why They Still Matter
+
+Modern abstractions (ORMs, high-level languages, framework magic) can obscure algorithmic complexity. But complexity doesn't disappear — it hides. A seemingly innocent nested loop in an ORM query is still O(n²). Knowing the fundamentals lets you see through the abstractions.
+
+## The Core Data Structures
+
+**Arrays** — contiguous memory, O(1) random access, O(n) insertion. The foundation of almost everything else.
+
+**Linked lists** — O(1) insertion at head, O(n) random access. Useful when you need frequent insertion/deletion and don't need random access.
+
+**Hash maps** — amortized O(1) for insert, lookup, delete. The most-used data structure in practice. Collision resolution strategy matters.
+
+**Trees** — hierarchical structure. Binary search trees give O(log n) operations when balanced. The key insight: balance is not automatic.
+
+**Heaps** — a tree where every parent is ≥ (max-heap) or ≤ (min-heap) its children. The natural implementation of a priority queue.
+
+**Graphs** — the most general structure. Almost every interesting problem is a graph problem in disguise.
+
+## Sorting as a Lens
+
+Sorting algorithms are pedagogically valuable because they expose different algorithmic strategies in a simple domain:
+
+- **Insertion sort** — O(n²) worst case, but excellent on nearly-sorted data
+- **Merge sort** — O(n log n) guaranteed, stable, but O(n) extra space
+- **QuickSort** — O(n log n) average, O(n²) worst case, but cache-friendly and in-place
+- **HeapSort** — O(n log n) guaranteed, O(1) space, but not stable and poor cache behavior
+
+The [[the-art-of-algorithms|QuickSort deep dive]] post covers the implementation and visualization in detail.
+
+## Complexity Intuition
+
+A useful mental model: for n = 1,000,000 operations per second,
+
+| Complexity | n=1000 | n=1,000,000 |
+|-----------|--------|-------------|
+| O(1)      | instant | instant |
+| O(log n)  | ~10 ops | ~20 ops |
+| O(n)      | 1ms     | 1s |
+| O(n log n)| ~10ms   | ~20s |
+| O(n²)     | 1s      | 11.5 days |
+
+This table should be tattooed on the inside of every programmer's eyelids.

package/content/notes/digital-garden-philosophy.mdx

@@ -0,0 +1,36 @@
+---
+title: "Digital Garden Philosophy"
+date: "2026-02-03"
+tags: ["digital-garden", "writing", "knowledge-management"]
+aliases: ["digital-gardens"]
+---
+
+A digital garden is a different way of thinking about a personal website. Unlike a blog — where posts are dated, finished, and pushed into a feed — a garden is a space of growing, evolving ideas.
+
+## The Garden vs. The Stream
+
+The stream metaphor (Twitter, blogs, newsletters) privileges recency. New things rise, old things sink. The garden metaphor privileges *connection*. Notes link to other notes; ideas accrete over time.
+
+Mike Caulfield's 2015 talk "The Garden and the Stream" is the canonical introduction to this distinction. He argues the stream has colonized how we think about the web, and that the garden offers a richer alternative.
+
+## Epistemic States
+
+In a garden, notes can exist at different stages of development:
+
+- **Seedling** — rough, barely-formed idea
+- **Budding** — developing, but incomplete
+- **Evergreen** — mature and stable (but still revisable)
+
+Publishing work-in-progress is uncomfortable at first. But it's honest, and it invites readers to engage with thinking rather than just conclusions.
+
+## This Garden
+
+[[welcome-to-amytis|This site's founding post]] describes the original intent. The notes section implements the garden layer on top of the existing blog structure.
+
+The underlying method is [[zettelkasten-method|Zettelkasten]]: atomic notes, linked by meaning rather than filed by category. The result is a network of ideas that can be navigated in any direction — following curiosity rather than chronology.
+
+## Further Reading
+
+- Mike Caulfield, *The Garden and the Stream: A Technopastoral*
+- Maggie Appleton's digital garden theory essays
+- Andy Matuschak's notes on evergreen note-writing

package/content/notes/react-server-components.mdx

@@ -0,0 +1,49 @@
+---
+title: "React Server Components"
+date: "2026-02-10"
+tags: ["react", "nextjs", "architecture"]
+---
+
+React Server Components (RSC) represent the most significant architectural shift in React since hooks. The mental model: components that run only on the server, produce static output, and ship *zero* JavaScript to the client.
+
+## The Key Insight
+
+Before RSC, React components were always client-side primitives — even when rendered on the server via SSR, their JavaScript was re-hydrated in the browser. RSC breaks this assumption. A server component:
+
+- Can directly `await` database queries, file reads, or API calls
+- Never re-renders on the client (no hydration cost)
+- Can import server-only packages without any client bundle impact
+
+## Composition Model
+
+The power is in the *composition*: you can freely mix server and client components in the same tree. A server component can render a client component; a client component can receive server-rendered children as props.
+
+```tsx
+// Server component — runs only on server
+async function ArticlePage({ slug }: { slug: string }) {
+  const post = await getPostBySlug(slug); // direct DB/file access
+  return (
+    <article>
+      <h1>{post.title}</h1>
+      <LikeButton postId={post.id} /> {/* client component */}
+      <MarkdownContent content={post.body} /> {/* server component */}
+    </article>
+  );
+}
+```
+
+## The "use client" Boundary
+
+`"use client"` marks the boundary where server-rendered output hands off to client-side JavaScript. It doesn't mean "client-only" — server-rendered HTML still crosses the boundary; only interactivity (event handlers, state) requires the client bundle.
+
+Common pitfall: passing non-serializable values (like a `Map` or class instance) through the boundary. These can't be serialized to JSON and will cause a runtime error.
+
+## Relation to Hooks
+
+RSC doesn't replace React hooks — hooks remain the right tool for client-side state and effects. The shift is that *data fetching* moves to the server, while *interactivity* stays with hooks on the client.
+
+The practical result: far less `useEffect` for data loading, simpler components, better performance.
+
+## In Next.js App Router
+
+Next.js App Router makes RSC the default. Every component in `app/` is a server component unless it declares `"use client"`. This site's data layer (`src/lib/markdown.ts`) runs exclusively on the server — no API routes needed.

package/content/notes/tailwind-v4.mdx

@@ -0,0 +1,45 @@
+---
+title: "Tailwind CSS v4"
+date: "2026-02-12"
+tags: ["css", "tailwind", "frontend"]
+aliases: ["tailwind-css-v4"]
+---
+
+Tailwind CSS v4 is a complete rewrite of the framework, shifting from a JavaScript-based configuration model to a CSS-first approach. The migration story is smoother than expected, and the performance improvements are significant.
+
+## CSS-First Configuration
+
+The biggest change: configuration moves from `tailwind.config.js` into your CSS file using the `@theme` directive.
+
+```css
+@import "tailwindcss";
+
+@theme {
+  --color-accent: oklch(60% 0.2 250);
+  --font-serif: "Georgia", serif;
+  --spacing-18: 4.5rem;
+}
+```
+
+This means your design tokens live in CSS — where they belong. You can inspect them in DevTools, use them in arbitrary CSS, and they compose naturally with CSS custom properties.
+
+## The New Engine
+
+v4's engine is built in Rust (via Lightning CSS) and is dramatically faster. Cold starts drop from seconds to milliseconds. The dev server no longer needs to scan your content for class names — it intercepts class usage at the PostCSS level.
+
+## Breaking Changes
+
+- No more `tailwind.config.js` for most use cases (it still exists for plugins)
+- Default ring width changed from 3px to 1px
+- Standalone opacity utilities removed — use slash syntax instead (e.g., `bg-black/50`)
+- The `!important` modifier moves to the end of the class name (e.g., `shadow-md!` not `!shadow-md`)
+- `@apply` works differently for custom utilities
+- Dark mode config moves to CSS: `@custom-variant dark (&:where(.dark, .dark *))`
+
+## Integration with React Server Components
+
+Tailwind v4 pairs well with [[react-server-components|React Server Components]]. Static CSS generation means zero runtime overhead — the right tool for a server-rendered architecture. The class scanning approach would have conflicted with server components anyway (no runtime class generation).
+
+## This Site
+
+This garden uses Tailwind v4 with a custom theme defined entirely in `src/app/globals.css`. Theme colors use CSS custom properties so the light/dark toggle works without JavaScript class manipulation.

package/content/notes/zettelkasten-method.mdx

@@ -0,0 +1,33 @@
+---
+title: "Zettelkasten Method"
+date: "2026-02-01"
+tags: ["zettelkasten", "note-taking", "knowledge-management"]
+---
+
+The Zettelkasten ("slip-box") method is a personal knowledge management system developed by sociologist Niklas Luhmann. He produced over 90 books and hundreds of articles, crediting much of his productivity to this system.
+
+## Core Principles
+
+**Atomic notes** — each note captures exactly one idea. If you need to say two things, write two notes. This constraint forces clarity and creates more connection points.
+
+**Linking over filing** — instead of organizing notes into folders or categories, you link them to related ideas. The structure that emerges is a network, not a tree.
+
+**Your own words** — always paraphrase rather than copy. The act of rewriting forces understanding and makes the note genuinely yours.
+
+**Permanent notes** — unlike fleeting notes (quick captures) or literature notes (summaries of sources), permanent notes are written to last. They connect to existing knowledge and stand alone without context.
+
+## Why It Works
+
+A folder system forces you to predict how you'll want to retrieve something. Linking lets you discover connections you didn't anticipate. Luhmann described his Zettelkasten as a "conversation partner" — it would surprise him with unexpected connections between distant ideas.
+
+The compounding effect is real: the more notes you have, the more connections are possible, and the more generative each new note becomes.
+
+## Relation to Digital Gardens
+
+[[digital-garden-philosophy]] takes the Zettelkasten spirit and applies it to public publishing. Where Luhmann's slip-box was private, a digital garden invites readers into the thinking process — with all its incompleteness and revision.
+
+## In This Garden
+
+This site implements Zettelkasten-style notes with bi-directional links. Any `[[wikilink]]` you write creates a connection that shows up in the backlinks panel of the target note.
+
+See the [[digital-garden-philosophy]] note for how this fits the broader philosophy of this garden.

package/docs/ARCHITECTURE.md

@@ -40,6 +40,11 @@ src/app/
     page.tsx                        # All books overview
     [slug]/page.tsx                 # Book landing page
     [slug]/[chapter]/page.tsx       # Individual book chapter
+  notes/
+    page.tsx                        # All notes list
+    [slug]/page.tsx                 # Individual note
+  graph/
+    page.tsx                        # Knowledge graph visualization
   flows/
     page.tsx                        # Flows stream/listing
     [year]/[month]/[day]/page.tsx   # Individual flow entry (optional if modal/stream used)
@@ -96,6 +101,9 @@ src/app/
 | `getAllBooks()` | `BookData[]` | All books metadata |
 | `getBookData(slug)` | `BookData \| null` | Single book metadata & TOC |
 | `getBookChapter(...)` | `BookChapterData` | Single chapter content |
+| `getAllNotes()` | `NoteData[]` | All notes, sorted by date |
+| `getNoteBySlug(slug)` | `NoteData \| null` | Single note content |
+| `getBacklinks(slug)` | `BacklinkSource[]` | Inbound links for a page |
 | `getFlowBySlug(slug)` | `FlowData \| null` | Single flow entry |
 | `getSeriesPosts(slug)` | `PostData[]` | Posts in a series |
 | `calculateReadingTime(content)` | `string` | Estimated reading time (multilingual) |

package/docs/CONTRIBUTING.md

@@ -55,6 +55,17 @@ Books are manually structured in `content/books/`.
 2. Add `index.mdx` with metadata and chapters configuration.
 3. Create the chapter files (`welcome.mdx`, `conclusion.mdx`) in the same folder.
 
+### Creating Notes (Digital Garden)
+
+Notes live in `content/notes/`.
+
+```bash
+# Create a new note
+bun run new "Zettelkasten Method" --note
+```
+
+Or manually create `content/notes/zettelkasten-method.mdx`.
+
 ### Importing Content
 
 ```bash

package/docs/DIGITAL_GARDEN.md

@@ -0,0 +1,64 @@
+# Digital Garden Features
+
+Amytis includes a suite of features designed for non-linear knowledge management, inspired by the "Digital Garden" philosophy. These features allow you to create an interconnected web of thoughts rather than just a linear stream of posts.
+
+## Core Concepts
+
+### 1. Notes (`/notes`)
+Notes are atomic units of knowledge. Unlike posts, which are often time-bound articles, notes are evergreen and concept-oriented.
+
+- **Location:** `content/notes/*.mdx`
+- **Frontmatter:**
+  ```yaml
+  ---
+  title: "Zettelkasten Method"
+  tags: ["pkm", "productivity"]
+  aliases: ["zettelkasten", "slip-box"] # Alternative names for wiki-linking
+  backlinks: true # Show backlinks at the bottom (default: true)
+  ---
+  ```
+
+### 2. Wiki-links
+You can link between any content (Posts, Notes, Flows) using double-bracket syntax: `[[Slug]]` or `[[Slug|Display Text]]`.
+
+- **Standard Link:** `[[zettelkasten-method]]` → links to `/notes/zettelkasten-method`
+- **Aliased Link:** `[[zettelkasten-method|The Slip Box]]` → links to same note but displays "The Slip Box"
+- **Cross-Type Linking:**
+  - If a slug matches a Note, it links to `/notes/[slug]`
+  - If it matches a Post, it links to `/posts/[slug]`
+  - If it matches a Flow, it links to `/flows/[slug]`
+
+### 3. Backlinks
+At the bottom of every Note, Amytis automatically generates a "Linked References" section. This lists every other page that links *to* the current note, along with a context snippet showing how it was referenced.
+
+### 4. Knowledge Graph
+The `/graph` route visualizes your entire digital garden as an interactive network graph.
+- **Nodes**: Represent Notes, Posts, and Flows.
+- **Edges**: Represent wiki-links connecting them.
+- **Interaction**: Click a node to navigate to that page.
+
+## How to Use
+
+1. **Create a Note**: Run `bun new "My Concept" --note` (or manually create `content/notes/my-concept.mdx`).
+2. **Link to it**: In a blog post or another note, type `[[my-concept]]`.
+3. **Explore**: Visit `/notes` to see your collection, or `/graph` to see the connections.
+
+## Configuration
+
+In `site.config.ts`, you can configure the graph visualization:
+
+```typescript
+export const siteConfig = {
+  // ...
+  features: {
+    graph: {
+      enabled: true,
+      name: { en: "Graph", zh: "知识图谱" },
+    },
+    notes: {
+      enabled: true,
+      name: { en: "Notes", zh: "笔记" },
+    }
+  }
+};
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hutusi/amytis",
-  "version": "1.7.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",
@@ -58,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",