@hutusi/amytis 1.6.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

@@ -43,9 +43,13 @@ bun test
   - `archive/`: Timeline-based chronological archive grouped by year and month.
   - `tags/`: Popularity-sorted tag cloud and filtered listings.
   - `authors/`: Posts filtered by individual authors.
+  - `subscribe/`: Subscription options (RSS, Newsletter, Social).
+  - `search.json/`: Static search index generator (supplementary).
 - `src/lib/`: Core logic and utilities.
-  - `markdown.ts`: Advanced parsing for posts/series/flows, sorting, reading time calculation (multilingual), and metadata inheritance.
-- `src/components/`: Modular UI blocks (Hero, HorizontalScroll, Search, CoverImage, etc.).
+  - `markdown.ts`: Advanced parsing for posts/series/flows, sorting, and metadata.
+  - `search-utils.ts`: Content cleaning and search result processing.
+  - `shuffle.ts`: Deterministic and random array shuffling.
+- `src/components/`: Modular UI blocks (Hero, HorizontalScroll, Search, CoverImage, ShareBar, etc.).
 - `content/`: Source Markdown/MDX content.
 - `scripts/`: CLI tools for content management and asset processing.
 
@@ -63,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

@@ -1,25 +1,33 @@
 # Amytis Roadmap
 
-## 🚀 Immediate UX & Polish
-- [ ] **Interactive Code**: Add "Copy to Clipboard" buttons to code blocks.
+## 🚀 Priority UX & Engineering
 - [ ] **Image Zoom**: Implement medium-zoom or a lightbox for MDX images.
-- [ ] **Breadcrumbs**: Add path navigation (e.g., `Home > Books > Chapter`) to all pages.
-- [ ] **Smart Nav**: Add "Previous" and "Next" article links at the bottom of posts.
+- [ ] **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.
-- [ ] **Recent Notes**: Integrate a "Recent Flows" section on the homepage.
+- [ ] **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).
 
-## 🛠 Performance & Social
-- [ ] **Dynamic OG**: Generate automated social cards with Satori based on post titles.
-- [ ] **PWA**: Add a manifest and service worker for basic offline reading support.
-- [ ] **Search UI**: Refine Pagefind results with highlighted context and better mobile layout.
+## 🛠 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] **Full-text Search**: Migrated to **Pagefind** for high-performance static indexing.
+- [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**.
-- [x] **Scoped Publishing**: Official release as `@hutusi/amytis` on npm and GitHub.
-- [x] **Robust Engineering**: Zero hydration mismatches, full Zod validation, and 64+ automated tests.
-- [x] **Refined UI**: High-contrast typography, four color palettes, and horizontal featured scrolling.
-- [x] **Asset Pipeline**: Automatic co-located image mapping and WebP optimization.
+- [x] **Professional Publishing**: Scoped `@hutusi/amytis` package with OIDC Trusted Publishing.
+- [x] **Robust Engineering**: Zero hydration mismatches, Zod validation, and 64+ automated tests.
+- [x] **Refined UI**: High-contrast typography, four color palettes, and horizontal scroll featured sections.
+- [x] **Sub-features**: Newsletter/Subscribe page, Reading Progress, and Author Ecosystem.

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",
@@ -16,6 +17,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",
@@ -29,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",
@@ -555,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=="],
 
@@ -1237,6 +1240,8 @@
 
     "react-dom": ["react-dom@19.2.4", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.4" } }, "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ=="],
 
+    "react-icons": ["react-icons@5.5.0", "", { "peerDependencies": { "react": "*" } }, "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw=="],
+
     "react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
     "react-markdown": ["react-markdown@10.1.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "hast-util-to-jsx-runtime": "^2.0.0", "html-url-attributes": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "unified": "^11.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" }, "peerDependencies": { "@types/react": ">=18", "react": ">=18" } }, "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ=="],
@@ -1499,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=="],
@@ -1517,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/about.mdx

@@ -3,6 +3,7 @@ title: "About Amytis"
 date: "2026-01-07"
 excerpt: "Learn more about the philosophy and technology behind this digital garden."
 layout: "simple"
+toc: true
 ---
 
 # About the Garden

package/content/about.zh.mdx

@@ -0,0 +1,21 @@
+---
+title: "关于 Amytis"
+date: "2026-01-07"
+excerpt: "了解这座数字花园背后的理念与技术。"
+layout: "simple"
+---
+
+Amytis 是一座为长期思想培育而设计的数字花园。与博客不同，数字花园是一个持续演化的想法网络。
+
+## 技术栈
+
+- **Next.js 15+** — 基础框架
+- **Tailwind CSS v4** — 样式系统
+- **MDX** — 支持 React 组件的富内容格式
+- **Bun** — 极速开发体验
+
+## 理念
+
+我们相信**公开学习**的力量。这里是种下种子（初始笔记）、悉心耕耘（提炼与关联）、最终长成长青文章的地方。
+
+> "花园是最好的老师。它教人耐心与细心观察，教人勤劳与节俭，尤其教人全然的信任。" — Gertrude Jekyll

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

@@ -0,0 +1,15 @@
+---
+tags: ["video", "podcast", "markdown", "web"]
+---
+
+Tested multimedia embedding in Amytis today. Since `rehype-raw` is enabled, standard HTML `<iframe>`, `<video>`, and `<audio>` tags work directly inside Markdown — no plugins needed.
+
+A few patterns that work well:
+
+- **YouTube / Vimeo** — wrap in a `padding-bottom: 56.25%` container for responsive 16:9
+- **Spotify / Apple Podcasts** — fixed height iframes (152px for compact, 352px for full player)
+- **HTML5 `<video>`** — fully native, supports `poster`, `loop`, `autoplay muted`
+- **HTML5 `<audio>`** — great for podcast episodes or background music samples
+- **Twitch** — needs the `parent` query param set to your domain
+
+The `loading="lazy"` attribute is underused — always worth adding to below-the-fold embeds to keep the initial page fast.

package/content/links.mdx

@@ -0,0 +1,42 @@
+---
+title: "Links"
+date: "2026-01-01"
+excerpt: "A curated collection of resources, tools, and friends on the web."
+layout: "simple"
+toc: true
+---
+
+A living collection of places worth visiting — useful resources I return to, and friends whose writing I admire.
+
+---
+
+## Resources
+
+### Writing & Thinking
+
+- [Zettelkasten Method](https://zettelkasten.de/) — The definitive guide to networked note-taking and knowledge management.
+- [Andy Matuschak's Notes](https://notes.andymatuschak.org/) — A public working notebook from a researcher in tools for thought.
+- [LessWrong](https://www.lesswrong.com/) — A community blog focused on rationality and careful reasoning.
+
+### Development
+
+- [MDN Web Docs](https://developer.mozilla.org/) — The most reliable reference for web platform APIs.
+- [The Changelog](https://changelog.com/) — Podcasts and news for developers following open-source software.
+- [Hacker News](https://news.ycombinator.com/) — Technology news and community discussion curated by Y Combinator.
+
+### Design
+
+- [Refactoring UI](https://www.refactoringui.com/) — Practical design advice for developers, by the creators of Tailwind CSS.
+- [Sidebar.io](https://sidebar.io/) — Five design links every day, covering UI, typography, and visual inspiration.
+
+---
+
+## Friends
+
+- [Example Blog](https://example.com/) — A thoughtful writer exploring the intersection of technology and everyday life.
+- [Another Garden](https://example.com/) — Beautifully tended digital garden with notes on philosophy and code.
+- [Friend's Site](https://example.com/) — Short-form essays on creativity, craft, and the making of things.
+
+---
+
+*Know a link that belongs here? [Send it my way](/about).*

package/content/links.zh.mdx

@@ -0,0 +1,41 @@
+---
+title: "链接"
+date: "2026-01-01"
+excerpt: "精选资源、工具与友情链接。"
+layout: "simple"
+---
+
+持续更新的精选集合——常常造访的实用资源，以及值得关注的朋友们。
+
+---
+
+## 资源
+
+### 写作与思考
+
+- [卡片盒笔记法](https://zettelkasten.de/) — 网络化笔记与知识管理的权威指南。
+- [Andy Matuschak 的笔记](https://notes.andymatuschak.org/) — 思维工具研究者的公开工作笔记本。
+- [LessWrong](https://www.lesswrong.com/) — 专注于理性思维的社区博客。
+
+### 开发
+
+- [MDN Web Docs](https://developer.mozilla.org/) — 最可靠的 Web 平台 API 参考文档。
+- [The Changelog](https://changelog.com/) — 面向开发者的开源软件播客与资讯。
+- [Hacker News](https://news.ycombinator.com/) — Y Combinator 精选的技术资讯与社区讨论。
+
+### 设计
+
+- [Refactoring UI](https://www.refactoringui.com/) — Tailwind CSS 作者出品的开发者实用设计指南。
+- [Sidebar.io](https://sidebar.io/) — 每日五条设计链接，涵盖 UI、排版与视觉灵感。
+
+---
+
+## 朋友们
+
+- [示例博客](https://example.com/) — 探索技术与日常生活交汇点的深度写作者。
+- [另一座花园](https://example.com/) — 关于哲学与代码的精心耕耘的数字花园。
+- [朋友的站点](https://example.com/) — 关于创造、手艺与制作过程的短篇随笔。
+
+---
+
+*有好链接想推荐？[告诉我](/about)。*

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.