2024.garden
Tools
What worked
8 phases + 1 quick task, 257 commits, 21 completed plans — the site you are currently reading. Claude Code built the unified markdown pipeline (remarkParse → remarkGfm → remarkWikiLink → remarkEmbedContent → remarkCollectLinks → remarkObsidianHighlight → remarkImagePaths → remarkRehype → rehypeCallouts → rehypeSlug → rehypePrism) with consistent plugin ordering and a single code path for all 8 content types. AST-based link rewriting over regex held up under edge cases. Build-time link graph gives O(1) backlink lookup that scales past 500 pages. Sharp-based image compression during sync (quality 80, max 2000px) solved the asset size problem in Phase 8.
What broke
Low link density — only 4 cross-page wikilinks across 318 pages, which is a content curation problem rather than a technical one (the plumbing works, I just haven't linked enough). No test suite: Vitest is installed but unused and the complex pipeline is untested. 7 files still import from a deprecated backward-compat shim I keep forgetting to delete. Algolia SDK is installed but never wired for full-text search. dangerouslySetInnerHTML is safe today because I control all markdown but would need sanitization if anything about the source changes. Hardcoded asset routes are scattered as magic strings.
Roles
I set the editorial constraint — Obsidian-first rendering, one-way sync (vault is source of truth, never write back), shortest-path wikilink matching to exactly match Obsidian behavior. I chose the 8 content types and the maturity indicator scheme. Claude Code wrote the unified pipeline, the sync tool, the link graph builder, the hover previews, the dark mode, and every component you see. This is the site I use to publish — including publishing this entry about itself, which is a pleasing kind of self-reference.
2024.garden (Personal Digital Garden)
Overview
2024.garden is a personal digital garden and publishing platform (andrewlb.com) built on Next.js 14 that transforms an Obsidian vault into a seamlessly published website. It supports native Obsidian syntax (wikilinks, callouts, embeds, highlights) with bidirectional linking and a build-time link graph.
Target users: Single author (Andrew Lovett-Barron) publishing personal knowledge base.
Key Features
- Multi-type publishing — Blog, reading notes, weekly digests, STEM topics, projects, garden notes, talks, CV (8 content types)
- Obsidian-native syntax — Wikilinks resolve, callouts display, embeds work, highlights show
- Bidirectional links — Build-time link graph with backlinks section on every page
- Hover previews — Floating UI tooltips with content snippets on wikilinks
- Garden maturity — Seedling/Budding/Evergreen indicators signal content status
- Tag system — Tag index pages with case-insensitive matching
- Dark mode — System/manual toggle with consistent styling
- Sync pipeline — Automated vault ->
_content/sync with publish field validation - Image compression — Sharp integration (quality 80%, max 2000px) during sync
- RSS feed — Full-text subscription support
Architecture
Tech Stack
| Layer | Technology |
|---|---|
| Framework | Next.js 14.2.35 + React 18 + TypeScript 5 |
| Styling | Tailwind CSS 3.3 + styled-components 6.1 |
| Content | gray-matter, unified (remark/rehype) ecosystem |
| Wikilinks | @flowershow/remark-wiki-link 3.3.1 |
| Callouts | rehype-callouts 2.1.2 |
| Syntax | rehype-prism 2.3.2 |
| Sync | Custom TypeScript pipeline + sharp |
| Deployment | Vercel (SSG) |
Markdown Pipeline
Raw markdown
-> remarkParse
-> remarkGfm
-> remarkWikiLink (resolves [[links]])
-> remarkEmbedContent (![[notes]] -> cards)
-> remarkCollectLinks (extracts for graph)
-> remarkObsidianHighlight (==text== -> <mark>)
-> remarkImagePaths
-> remarkRehype
-> rehypeRaw
-> rehypeCallouts
-> rehypeSlug
-> rehypeAutolinkHeadings
-> rehypePrism
-> rehypeStringify
-> HTML
Content Architecture
_content/ # Published markdown (synced from vault)
blog/ # ~85 posts
reading/ # ~182 notes
week/ # ~30 digests
garden/ # Garden notes
project/ # ~15 projects
stem/ # ~10 topics
note/ # ~6 quick notes
talks/ # Talk pages
cv/ # CV content
public/assets/ # 552 compressed images
Development History
8 phases + 1 quick task, 257 commits, 21 completed plans:
| Phase | Focus |
|---|---|
| 1 | Pipeline foundation (unified remark/rehype, AST-based link rewriting) |
| 2 | Obsidian rendering (wikilinks, callouts, embeds, highlights) |
| 3 | Content graph (build-time link extraction, backlinks, hover previews) |
| 4 | Garden content type (maturity indicators, tags, tag pages) |
| 5 | Design refresh (dark mode, typography, homepage redesign) |
| 6 | Graph + polish fixes |
| 7 | Sync hardening (publish field aliasing, directory mapping, date optionality) |
| 8 | Asset compression (sharp integration, quality 80%, max 2000px) |
Architectural Decisions
| Decision | Rationale |
|---|---|
| Obsidian-first rendering | Author writes in Obsidian; site must render native syntax directly |
| Unified pipeline for all types | Consistent behavior, single code path |
| Build-time link graph | O(1) backlink lookup; no performance collapse at 300+ pages |
| Shortest-path wikilink matching | Matches Obsidian behavior exactly |
| AST-based plugins over regex | Robust link/image handling, extensible |
| One-way sync (vault -> site) | Never write back to vault; no sync conflicts |
| Atomic file writes | Safe sync even if process crashes mid-write |
Strengths
- Unified markdown pipeline — Single processor, consistent plugin ordering, well-documented
- Type safety — TypeScript strict, Zod validation for frontmatter
- Build-time optimizations — Link graph pre-computed, static HTML, scales to 500+ pages
- Clean separation — Sync, validation, config, graph, rendering each have one responsibility
- Obsidian compatibility — Wikilinks, callouts, embeds, highlights all work without conversion
- Documentation — 100+ planning files, architecture docs, decision logs
Weaknesses & Risks
- Low link density — Only 4 cross-page wikilinks across 318 pages (content curation issue)
- No test suite — Vitest installed but unused; complex pipeline untested
- Legacy imports — 7 files still import from deprecated backward-compat shim
- No full-text search — Algolia SDK installed but not wired
- dangerouslySetInnerHTML — Safe for trusted markdown but needs sanitization if source changes
- Hardcoded asset routes — Magic strings scattered across files
Connection to Other Projects
- Edytor — Phase 5 publishing pipeline will target 2024.garden
- PM Toolkit — Both use Obsidian vault as source of truth with YAML frontmatter
- CNC — Could potentially monitor the build/deploy pipeline