diff --git a/.eleventyignore b/.eleventyignore
new file mode 100644
index 0000000..181e19e
--- /dev/null
+++ b/.eleventyignore
@@ -0,0 +1,2 @@
+node_modules
+interactive
diff --git a/.gitignore b/.gitignore
index d37fe4c..1b6c845 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,27 @@
+# Dependencies
 node_modules/
+
+# Build output
 _site/
-.env
-start.sh
-*.log
\ No newline at end of file
+pagefind/
+css/style.css
+
+# Cache
+.cache/
+
+# Content (symlinked at runtime)
+content/
+uploads/
+
+# Personal overrides (should be in parent repo)
+*.rmendes
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Editor
+.vscode/
+.idea/
+*.swp
+*.swo
diff --git a/.interface-design/system.md b/.interface-design/system.md
new file mode 100644
index 0000000..add79d4
--- /dev/null
+++ b/.interface-design/system.md
@@ -0,0 +1,152 @@
+# Design System — rmendes.net
+
+## Palette
+
+**Surfaces:** Warm stone — not yellow, not cold. The difference is felt, not seen.
+
+| Token | Hex | Role |
+|-------|-----|------|
+| surface-50 | `#faf8f5` | Canvas (light) |
+| surface-100 | `#f4f2ee` | Cards, elevated surfaces (light) |
+| surface-200 | `#e8e5df` | Standard borders, dividers |
+| surface-300 | `#d5d0c8` | Strong borders, input borders |
+| surface-400 | `#a09a90` | Muted text, placeholders |
+| surface-500 | `#7a746a` | Secondary text |
+| surface-600 | `#5c5750` | Supporting text |
+| surface-700 | `#3f3b35` | Dark mode borders |
+| surface-800 | `#2a2722` | Cards, elevated surfaces (dark) |
+| surface-900 | `#1c1b19` | Canvas (dark) |
+| surface-950 | `#0f0e0d` | Deepest dark |
+
+**Accent (Warm Amber):** Default interactive color — links, CTAs, focus rings.
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| accent-400 | `#fbbf24` | Dark mode: links, hover |
+| accent-500 | `#f59e0b` | — |
+| accent-600 | `#d97706` | Light mode: links, buttons |
+| accent-700 | `#b45309` | Light mode: hover, pressed |
+
+## Domain Colors
+
+Every section of the site has a color identity. On domain pages, links, hover states, and card borders use the domain color instead of amber.
+
+### Domain Map (complete — every page accounted for)
+
+| Domain | Tailwind color | Light text | Dark text | Pages |
+|--------|---------------|------------|-----------|-------|
+| **Writing** | amber (= accent) | amber-700 | amber-400 | `/blog/`, `/articles/`, `/notes/`, `/bookmarks/`, `/digest/`, `/news/`, `/categories/`, individual posts |
+| **Social** | rose | rose-600 | rose-400 | `/likes/`, `/replies/`, `/reposts/`, `/interactions/` |
+| **Code** | emerald | emerald-600 | emerald-400 | `/github/`, `/github/starred/` |
+| **Music** | purple | purple-600 | purple-400 | `/funkwhale/`, `/listening/` |
+| **Video** | red | red-600 | red-400 | `/youtube/` |
+| **Reading** | orange | orange-600 | orange-400 | `/blogroll/`, `/podroll/`, `/readlater/` |
+| **Neutral** | — (use accent) | — | — | `/` (home), `/about/`, `/cv/`, `/slashes/`, `/search/`, `/changelog/`, `/404` |
+
+### Brand Colors (hardcoded hex — not domain colors)
+
+These are third-party brand colors used in syndication badges and social widgets. Not part of the domain system.
+
+| Brand | Hex | Where |
+|-------|-----|-------|
+| Mastodon | `#a730b8` | Syndication badges, social-activity widget |
+| Bluesky | `#0085ff` | Syndication badges, social-activity widget |
+| LinkedIn | `#0a66c2` | Syndication badges |
+| IndieNews | `#ff5c00` | Syndication badges |
+| Mastodon alt | `#6364ff` | Syndication badges |
+
+### Domain Prominence (medium)
+
+On a domain page, these elements adopt the domain color:
+- **Page title** — tinted text or accent underline
+- **Links** — `text-[domain]-600 dark:text-[domain]-400`
+- **Hover states** — `hover:text-[domain]-700 dark:hover:text-[domain]-300`
+- **Card borders on hover** — `hover:border-[domain]-400 dark:hover:border-[domain]-600`
+- **Post-type badges** — domain-colored background/text
+
+These stay neutral (accent or surface) regardless of domain:
+- Header/navigation
+- Sidebar widget containers
+- Footer
+- Global UI (search, theme toggle)
+
+## Depth
+
+**Subtle shadows.** One consistent shadow level for elevated surfaces. Borders + shadow together.
+
+| Element | Treatment |
+|---------|-----------|
+| Cards, widgets | `shadow-sm` + `border border-surface-200 dark:border-surface-700` |
+| Avatars, album art | `shadow-lg` (depth gives images presence against flat surfaces) |
+| Modals | `shadow-xl` (overlay needs clear elevation) |
+| Hover on cards | No shadow change — border color shift only |
+
+**Gradients are allowed** for:
+- Now-playing cards (domain color tinted: `bg-gradient-to-br from-[color]-500/10`)
+- YouTube hero/live cards
+- Icon containers in reading pages (`from-[color]-400 to-[color]-600`)
+
+Gradients are NOT used for:
+- Standard cards, widgets, or page backgrounds
+
+## Typography
+
+| Role | Style | Usage |
+|------|-------|-------|
+| Headlines | Inter, `font-bold` | Page titles, section headings |
+| Body | Inter, normal weight | Paragraphs, descriptions |
+| Labels | Inter, `font-medium` or `font-semibold` | Badges, nav items, metadata labels |
+| **Dates/timestamps** | **`font-mono text-sm`** | Every `<time>` element, stat numbers, version numbers |
+| Code | `font-mono` | Commit SHAs, code blocks, technical identifiers |
+
+### Date treatment rule
+
+Every rendered date (via `dateDisplay` or `date()` filter) gets `font-mono`. This adds technical texture throughout the site — like timestamps in a log.
+
+## Spacing
+
+Base: 4px (Tailwind default rem scale).
+
+Extracted dominant patterns:
+- Component internal: `p-4` (cards), `p-3` (compact), `p-5` (featured)
+- Gaps: `gap-2` (tight lists), `gap-3` (standard), `gap-4` (spacious)
+- Section separation: `mb-6` to `mb-8`
+- Micro: `px-2 py-0.5` (badges), `px-3 py-1.5` (pills)
+
+## Border Radius
+
+| Element | Radius |
+|---------|--------|
+| Cards, inputs, buttons | `rounded-lg` (dominant: 124×) |
+| Avatars, status dots, badges | `rounded-full` (89×) |
+| Featured/hero cards | `rounded-xl` (21×) |
+| Now-playing sections | `rounded-xl sm:rounded-2xl` |
+
+## Interaction States
+
+Every interactive element needs:
+- **hover:** color shift (`transition-colors` — already dominant at 93×)
+- **focus:** visible ring (`focus:ring-2 focus:ring-accent-500` or domain equivalent)
+- **active:** not currently implemented — add where it matters (buttons)
+
+Card hover pattern: border color shifts to domain color, no shadow change.
+
+## Dark Mode
+
+- Class-based: `darkMode: "class"` — toggled via button in header
+- Surfaces invert: light canvas (`surface-50`) → dark canvas (`surface-900`)
+- Cards: `surface-100` → `surface-800`
+- Domain colors shift to 400-weight (brighter) in dark mode
+- Borders: `surface-200` → `surface-700`
+- Shadows remain `shadow-sm` (less visible but still present for subtle lift)
+
+## What Needs Implementation
+
+Audit findings — these are the gaps between this system and the current code:
+
+1. **font-mono on dates** — 80+ date elements need `font-mono text-sm` added
+2. **Domain colors on section pages** — page titles, links, hovers, card borders need domain color on their respective pages
+3. **Shadow standardization** — currently mixed; standardize to the levels defined above
+4. **Gradient cleanup** — remove `to-white` (github.njk), standardize gradient pattern
+5. **Focus states** — add `focus:ring-2` to all interactive elements (currently only 10 across 6 files)
+6. **Active states** — add to buttons
diff --git a/404.njk b/404.njk
new file mode 100644
index 0000000..cded812
--- /dev/null
+++ b/404.njk
@@ -0,0 +1,18 @@
+---
+layout: layouts/base.njk
+title: Page Not Found
+permalink: /404.html
+pagefindIgnore: true
+---
+<div class="text-center py-12">
+  <h1 class="text-4xl sm:text-6xl font-bold text-surface-300 dark:text-surface-700 mb-4">404</h1>
+  <h2 class="text-xl sm:text-2xl font-semibold text-surface-900 dark:text-surface-100 mb-4">Page Not Found</h2>
+  <p class="text-surface-600 dark:text-surface-400 mb-8">Sorry, the page you're looking for doesn't exist. Try searching for it below.</p>
+  <a href="/" class="inline-flex items-center gap-2 px-6 py-3 bg-accent-600 hover:bg-accent-700 text-white font-medium rounded-lg transition-colors mb-8">
+    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
+    Go back home
+  </a>
+</div>
+
+<div id="search-404" class="max-w-2xl mx-auto"></div>
+<script>initPagefind("#search-404", { showSubResults: true });</script>
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..531b500
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,547 @@
+# CLAUDE.md - Indiekit Eleventy Theme
+
+This file provides guidance to Claude Code when working with the Indiekit Eleventy theme.
+
+## Project Overview
+
+This is a comprehensive Eleventy theme designed for IndieWeb-powered personal websites using Indiekit. It renders Micropub posts (articles, notes, photos, bookmarks, likes, replies, reposts), integrates with Indiekit endpoint plugins for enhanced functionality (CV, homepage builder, GitHub, Funkwhale, Last.fm, YouTube, RSS, Microsub, etc.), and includes full webmention support.
+
+**Live Site:** https://rmendes.net
+**Used as Git submodule in:**
+- `/home/rick/code/indiekit-dev/indiekit-cloudron` (Cloudron deployment)
+- `/home/rick/code/indiekit-dev/indiekit-deploy` (Docker Compose deployment)
+
+## CRITICAL: Submodule Workflow
+
+**This repo is used as a Git submodule.** After ANY changes:
+
+1. **Edit, commit, and push** this repo (indiekit-eleventy-theme)
+2. **Update submodule pointer** in parent repo(s):
+
+```bash
+cd /home/rick/code/indiekit-dev/indiekit-cloudron
+git submodule update --remote eleventy-site
+git add eleventy-site
+git commit -m "chore: update eleventy-site submodule"
+git push origin main
+```
+
+3. **Redeploy:**
+
+```bash
+cd /home/rick/code/indiekit-dev/indiekit-cloudron
+make prepare  # REQUIRED — copies .rmendes files to non-suffixed versions
+cloudron build --no-cache && cloudron update --app rmendes.net --no-backup
+```
+
+**Common mistake:** Editing files in `indiekit-cloudron/eleventy-site/` instead of this repo. Those changes are ephemeral — always edit here.
+
+## CRITICAL: Indiekit Date Handling Convention
+
+**All dates MUST be stored and passed as ISO 8601 strings.** This is the universal pattern across Indiekit and ALL `@rmdes/*` plugins.
+
+### The Rule
+
+- **Storage (MongoDB):** Store dates as ISO strings (`new Date().toISOString()`), NEVER as JavaScript `Date` objects
+- **Controllers:** Pass date strings through to templates unchanged — NO conversion helpers, NO `formatDate()` wrappers
+- **Templates:** Use the `| date` Nunjucks filter for display formatting (e.g., `{{ value | date("PPp") }}`)
+- **Template guards:** Always wrap `| date` in `{% if value %}` to protect against null/undefined
+
+### Why This Matters
+
+The Nunjucks `| date` filter is `@indiekit/util`'s `formatDate()`, which calls `date-fns parseISO(string)`. It ONLY accepts ISO 8601 strings:
+
+- `Date` objects → `dateString.split is not a function` (CRASH)
+- `null` / `undefined` → `Cannot read properties of undefined (reading 'match')` (CRASH)
+- Pre-formatted strings (e.g., "8 Feb 2025") → Invalid Date (WRONG OUTPUT)
+- ISO strings (e.g., `"2025-02-08T14:30:00.000Z"`) → Correctly formatted (WORKS)
+
+### Correct Pattern
+
+```javascript
+// _data file - store/return ISO strings
+export default async function () {
+  const data = await fetch(...);
+  return {
+    lastSync: new Date().toISOString(),  // ← ISO string
+    items: data.map(item => ({
+      published: item.published || null,  // ← already ISO string from API
+    }))
+  };
+}
+```
+
+```nunjucks
+{# Template - use | date filter, guard for null #}
+{% if lastSync %}
+  {{ lastSync | date("PPp") }}
+{% endif %}
+```
+
+## Architecture
+
+### Data Flow: Plugin → JSON → _data → Template
+
+```
+Indiekit Plugin (backend)
+  → writes JSON to content/.indiekit/*.json
+  → _data/*.js reads JSON file
+  → Nunjucks template renders data
+```
+
+**Example:** CV plugin flow
+
+1. `@rmdes/indiekit-endpoint-cv` writes `content/.indiekit/cv.json`
+2. `_data/cv.js` reads the JSON file and exports the data
+3. `cv.njk` and `_includes/components/sections/cv-*.njk` render the data
+4. Homepage builder can include CV sections via `homepageConfig.sections`
+
+### Key Files by Function
+
+#### Core Configuration
+
+| File | Purpose |
+|------|---------|
+| `eleventy.config.js` | Eleventy configuration, plugins, filters, collections, post-build hooks |
+| `tailwind.config.js` | Tailwind CSS configuration (colors, typography) |
+| `postcss.config.js` | PostCSS pipeline (Tailwind, autoprefixer) |
+| `package.json` | Dependencies, scripts (`build`, `dev`, `build:css`) |
+
+#### Data Files (_data/)
+
+All `_data/*.js` files are ESM modules that export functions returning data objects. Most fetch from Indiekit plugin JSON files or external APIs.
+
+| File | Data Source | Purpose |
+|------|-------------|---------|
+| `site.js` | Environment variables | Site config (name, URL, author, social links) |
+| `cv.js` | `content/.indiekit/cv.json` | CV data from `@rmdes/indiekit-endpoint-cv` |
+| `homepageConfig.js` | `content/.indiekit/homepage.json` | Homepage layout from `@rmdes/indiekit-endpoint-homepage` |
+| `enabledPostTypes.js` | `content/.indiekit/post-types.json` or env | List of enabled post types for navigation |
+| `urlAliases.js` | `content/.indiekit/url-aliases.json` | Legacy URL mappings for webmentions |
+| `blogrollStatus.js` | Indiekit `/blogrollapi/api/status` | Checks if blogroll plugin is available |
+| `podrollStatus.js` | Indiekit `/podroll/api/status` | Checks if podroll plugin is available |
+| `githubActivity.js` | Indiekit `/githubapi/api/*` or GitHub API | GitHub commits, stars, featured repos |
+| `githubRepos.js` | GitHub API | Starred repositories for sidebar |
+| `funkwhaleActivity.js` | Indiekit Funkwhale plugin API | Listening activity |
+| `lastfmActivity.js` | Indiekit Last.fm plugin API | Scrobbles, loved tracks |
+| `newsActivity.js` | Indiekit IndieNews plugin API | Submitted IndieNews posts |
+| `youtubeChannel.js` | YouTube Data API v3 | Channel info, latest videos, live status |
+| `blueskyFeed.js` | Bluesky AT Protocol API | Recent Bluesky posts for sidebar |
+| `mastodonFeed.js` | Mastodon API | Recent Mastodon posts for sidebar |
+
+**Data Source Pattern:**
+
+Most plugin-dependent data files:
+1. Try to fetch from Indiekit plugin API first
+2. Fall back to direct API (if credentials available)
+3. Return `{ source: "indiekit" | "api" | "error", ...data }`
+4. Templates check `source` to conditionally display
+
+#### Layouts (_includes/layouts/)
+
+| File | Used By | Features |
+|------|---------|----------|
+| `base.njk` | All pages | Base HTML shell with header, footer, nav, meta tags |
+| `home.njk` | Homepage | Two-tier fallback: plugin-driven (homepage builder) or default (hero + recent posts) |
+| `post.njk` | Individual posts | h-entry microformat, Bridgy syndication, webmentions, reply context, photo gallery |
+| `page.njk` | Static pages | Simple content wrapper, no post metadata |
+
+#### Components (_includes/components/)
+
+| Component | Purpose |
+|-----------|---------|
+| `homepage-builder.njk` | Renders plugin-configured homepage layout (single/two-column, sections, sidebar) |
+| `homepage-section.njk` | Router for section types (hero, cv-*, custom-html, recent-posts) |
+| `homepage-sidebar.njk` | Renders plugin-configured sidebar widgets |
+| `homepage-footer.njk` | Optional homepage footer with admin link |
+| `sidebar.njk` | Default sidebar (author card, social activity, GitHub, Funkwhale, blogroll, categories) |
+| `blog-sidebar.njk` | Sidebar for blog/post pages (recent posts, categories) |
+| `h-card.njk` | Microformat2 h-card for author identity |
+| `reply-context.njk` | Displays reply-to/like-of/repost-of/bookmark-of context with h-cite |
+| `webmentions.njk` | Renders likes, reposts, replies from webmention.io + send form |
+| `empty-collection.njk` | Fallback message when a post type collection is empty |
+
+#### Sections (_includes/components/sections/)
+
+Homepage builder sections:
+
+| Section | Config Type | Purpose |
+|---------|-------------|---------|
+| `hero.njk` | `hero` | Full-width hero with avatar, name, bio, social links |
+| `recent-posts.njk` | `recent-posts` | Recent posts grid (configurable maxItems, postTypes filter) |
+| `cv-experience.njk` | `cv-experience` | Work experience timeline from CV data |
+| `cv-skills.njk` | `cv-skills` | Skills with proficiency bars from CV data |
+| `cv-education.njk` | `cv-education` | Education history from CV data |
+| `cv-projects.njk` | `cv-projects` | Featured projects from CV data |
+| `cv-interests.njk` | `cv-interests` | Personal interests from CV data |
+| `custom-html.njk` | `custom-html` | Arbitrary HTML content (from admin UI) |
+
+#### Widgets (_includes/components/widgets/)
+
+Sidebar widgets:
+
+| Widget | Data Source | Purpose |
+|--------|-------------|---------|
+| `author-card.njk` | `site.author` | h-card with avatar, bio, social links |
+| `social-activity.njk` | `blueskyFeed`, `mastodonFeed` | Recent posts from Bluesky/Mastodon |
+| `github-repos.njk` | `githubActivity`, `githubRepos` | Featured repos, recent commits |
+| `funkwhale.njk` | `funkwhaleActivity` | Now playing, listening stats |
+| `recent-posts.njk` | `collections.posts` | Recent posts list (for non-blog pages) |
+| `blogroll.njk` | Blogroll API | Recently updated blogs from OPML/Microsub |
+| `categories.njk` | `collections.categories` | Category list with post counts |
+
+#### Top-Level Templates (*.njk)
+
+Page templates in the root directory:
+
+| Template | Permalink | Purpose |
+|----------|-----------|---------|
+| `index.njk` | `/` | Homepage (uses `home.njk` layout) |
+| `about.njk` | `/about/` | About page with full h-card |
+| `cv.njk` | `/cv/` | CV page with all sections |
+| `blog.njk` | `/blog/` | All posts chronologically |
+| `articles.njk` | `/articles/` | Articles collection |
+| `notes.njk` | `/notes/` | Notes collection |
+| `photos.njk` | `/photos/` | Photos collection |
+| `bookmarks.njk` | `/bookmarks/` | Bookmarks collection |
+| `likes.njk` | `/likes/` | Likes collection |
+| `replies.njk` | `/replies/` | Replies collection |
+| `reposts.njk` | `/reposts/` | Reposts collection |
+| `interactions.njk` | `/interactions/` | Combined social interactions |
+| `slashes.njk` | `/slashes/` | Index of all slash pages |
+| `categories.njk` | `/categories/:slug/` | Posts by category (pagination template) |
+| `categories-index.njk` | `/categories/` | All categories index |
+| `github.njk` | `/github/` | GitHub activity page |
+| `funkwhale.njk` | `/funkwhale/` | Funkwhale listening page |
+| `listening.njk` | `/listening/` | Last.fm listening page |
+| `youtube.njk` | `/youtube/` | YouTube channel page |
+| `blogroll.njk` | `/blogroll/` | Blogroll page (client-side data fetch) |
+| `podroll.njk` | `/podroll/` | Podroll (podcast episodes) page |
+| `news.njk` | `/news/` | IndieNews submissions page |
+| `search.njk` | `/search/` | Pagefind search UI |
+| `feed.njk` | `/feed.xml` | RSS 2.0 feed |
+| `feed-json.njk` | `/feed.json` | JSON Feed 1.1 |
+| `404.njk` | `/404.html` | 404 error page |
+| `changelog.njk` | `/changelog/` | Site changelog |
+| `webmention-debug.njk` | `/webmention-debug/` | Debug page for webmentions |
+
+### Eleventy Configuration Highlights
+
+#### Collections
+
+| Collection | Glob Pattern | Purpose |
+|------------|--------------|---------|
+| `posts` | `content/**/*.md` | All content combined |
+| `articles` | `content/articles/**/*.md` | Long-form posts |
+| `notes` | `content/notes/**/*.md` | Short status updates |
+| `photos` | `content/photos/**/*.md` | Photo posts |
+| `bookmarks` | `content/bookmarks/**/*.md` | Saved links |
+| `likes` | `content/likes/**/*.md` | Liked posts |
+| `replies` | Filtered by `inReplyTo` property | Reply posts |
+| `reposts` | Filtered by `repostOf` property | Repost posts |
+| `pages` | `content/*.md` + `content/pages/*.md` | Slash pages (/about, /now, /uses, etc.) |
+| `feed` | `content/**/*.md` (first 20) | Homepage/RSS feed |
+| `categories` | Deduplicated from all posts | Category list |
+
+**Note:** `replies` and `reposts` collections are dynamically filtered by property, not by directory. Supports both camelCase (`inReplyTo`, `repostOf`) and underscore (`in_reply_to`, `repost_of`) naming.
+
+#### Custom Filters
+
+| Filter | Purpose | Usage |
+|--------|---------|-------|
+| `dateDisplay` | Format date as "January 1, 2025" | `{{ date \| dateDisplay }}` |
+| `isoDate` | Convert to ISO 8601 string | `{{ date \| isoDate }}` |
+| `date` | Format date with custom format | `{{ date \| date("MMM d, yyyy") }}` |
+| `truncate` | Truncate string to max length | `{{ text \| truncate(200) }}` |
+| `ogDescription` | Strip HTML, decode entities, truncate | `{{ content \| ogDescription(200) }}` |
+| `extractFirstImage` | Extract first `<img src>` from content | `{{ content \| extractFirstImage }}` |
+| `obfuscateEmail` | Convert email to HTML entities | `{{ email \| obfuscateEmail }}` |
+| `head` | Get first N items from array | `{{ array \| head(5) }}` |
+| `slugify` | Convert string to slug | `{{ name \| slugify }}` |
+| `hash` | MD5 hash of file for cache busting | `{{ '/css/style.css' \| hash }}` |
+| `timestamp` | Current Unix timestamp | `{{ '' \| timestamp }}` |
+| `webmentionsForUrl` | Filter webmentions by URL + aliases | `{{ webmentions \| webmentionsForUrl(page.url, urlAliases) }}` |
+| `webmentionsByType` | Filter by type (likes, reposts, replies) | `{{ mentions \| webmentionsByType('likes') }}` |
+| `jsonEncode` | JSON.stringify for JSON feed | `{{ value \| jsonEncode }}` |
+| `dateToRfc822` | RFC 2822 format for RSS | `{{ date \| dateToRfc822 }}` |
+
+#### Plugins
+
+| Plugin | Purpose |
+|--------|---------|
+| `@11ty/eleventy-plugin-rss` | RSS feed filters (dateToRfc2822, absoluteUrl) |
+| `@11ty/eleventy-plugin-syntaxhighlight` | Syntax highlighting for code blocks |
+| `@11ty/eleventy-img` | Automatic image optimization (webp, lazy loading) |
+| `eleventy-plugin-embed-everything` | Auto-embed YouTube, Vimeo, Mastodon, Bluesky, Spotify |
+| `@chrisburnell/eleventy-cache-webmentions` | Build-time webmention caching |
+| `@quasibit/eleventy-plugin-sitemap` | Sitemap generation |
+| `html-minifier-terser` | HTML minification (production only) |
+| `pagefind` | Search indexing (post-build via eleventy.after hook) |
+
+#### Transforms
+
+| Transform | Purpose |
+|-----------|---------|
+| `youtube-link-to-embed` | Converts YouTube links to embeds |
+| `htmlmin` | Minifies HTML (build mode only, not watch mode) |
+| `eleventyImageTransformPlugin` | Optimizes `<img>` tags |
+
+#### Post-Build Hooks (`eleventy.after`)
+
+1. **Pagefind indexing** — indexes all HTML files for search
+2. **WebSub hub notification** — notifies subscribers of feed updates (/, /feed.xml, /feed.json)
+
+### IndieWeb Features
+
+#### Microformats2
+
+- **h-card** (author identity): Name, photo, bio, location, social links with `rel="me"`
+- **h-entry** (post markup): All post types properly marked up
+- **h-feed** (feed markup): Machine-readable post lists
+- **h-cite** (reply context): Cites external content in replies/likes/reposts
+
+#### Webmentions
+
+- Build-time caching via `@chrisburnell/eleventy-cache-webmentions`
+- Client-side real-time fetching via `/js/webmentions.js`
+- Displays likes, reposts, replies with avatars
+- Send webmention form on every post
+- Legacy URL support via `urlAliases` (for micro.blog and old blog URLs)
+
+#### IndieAuth
+
+- `rel="me"` links in `<head>` for identity verification
+- Bluesky uses `rel="me atproto"` for AT Protocol verification
+- Fediverse creator meta tag for Mastodon verification
+
+#### Micropub Endpoints
+
+Base layout includes `<link>` tags pointing to Indiekit endpoints:
+
+```html
+<link rel="authorization_endpoint" href="{{ site.url }}/auth">
+<link rel="token_endpoint" href="{{ site.url }}/auth/token">
+<link rel="micropub" href="{{ site.url }}/micropub">
+<link rel="microsub" href="{{ site.url }}/microsub">
+```
+
+#### Bridgy Syndication
+
+Posts include hidden Bridgy syndication content in `post.njk`:
+
+```nunjucks
+<p class="p-summary e-bridgy-mastodon-content e-bridgy-bluesky-content hidden">
+  {# Interaction posts include emoji + target URL #}
+  🔖 {{ bookmarkedUrl }} - {{ description }}
+</p>
+```
+
+Bridgy reads this content when syndicating to Bluesky/Mastodon. Interaction types (bookmarks, likes, replies, reposts) include emoji prefix and target URL.
+
+## Code Style
+
+### TypeScript/JavaScript
+
+- **ESM modules:** `"type": "module"` in package.json
+- **Async data files:** `export default async function () { ... }`
+- **Data source pattern:** Return `{ source: "indiekit" | "api" | "error", ...data }`
+- **Date handling:** Always use ISO 8601 strings (`new Date().toISOString()`)
+
+### Nunjucks Templates
+
+- **Property name compatibility:** Support both camelCase and underscore names:
+
+```nunjucks
+{% set bookmarkedUrl = bookmarkOf or bookmark_of %}
+{% set replyTo = inReplyTo or in_reply_to %}
+```
+
+- **Date filter guards:** Always check for null/undefined:
+
+```nunjucks
+{% if published %}
+  {{ published | date("PPp") }}
+{% endif %}
+```
+
+- **Markdown engine disabled:** `markdownTemplateEngine: false` to prevent parsing `{{` in content
+- **Safe filter usage:** Use `| safe` for trusted HTML content only
+- **Microformats classes:** Follow IndieWeb conventions (h-entry, p-name, dt-published, e-content, u-photo, etc.)
+
+### CSS
+
+- **Tailwind CSS** for all styling
+- **Dark mode:** `dark:` variants, controlled by `.dark` class on `<html>`
+- **Custom color palette:** `primary` (blue) and `surface` (neutral)
+- **Typography plugin:** `prose` classes for content rendering
+- **Responsive design:** Mobile-first, breakpoints: `sm:`, `md:`, `lg:`
+
+## Common Tasks
+
+### Adding a New Post Type
+
+1. **Create collection** in `eleventy.config.js`:
+
+```javascript
+eleventyConfig.addCollection("checkins", function (collectionApi) {
+  return collectionApi
+    .getFilteredByGlob("content/checkins/**/*.md")
+    .sort((a, b) => b.date - a.date);
+});
+```
+
+2. **Create collection page** (e.g., `checkins.njk`):
+
+```nunjucks
+---
+layout: layouts/page.njk
+title: Check-ins
+withBlogSidebar: true
+permalink: /checkins/
+---
+{% for post in collections.checkins %}
+  {# render post #}
+{% endfor %}
+```
+
+3. **Add to enabledPostTypes** (optional, for nav):
+
+Edit `_data/enabledPostTypes.js` or set `POST_TYPES` env var.
+
+4. **Update `reply-context.njk`** if the post type has a target URL property.
+
+5. **Update `post.njk` Bridgy content** if the post type needs special syndication text.
+
+6. **Commit, push, and update submodule.**
+
+### Adding a New Data Source
+
+1. **Create `_data/newSource.js`:**
+
+```javascript
+import EleventyFetch from "@11ty/eleventy-fetch";
+
+const INDIEKIT_URL = process.env.SITE_URL || "https://example.com";
+
+export default async function () {
+  try {
+    const url = `${INDIEKIT_URL}/newapi/api/data`;
+    const data = await EleventyFetch(url, {
+      duration: "15m",
+      type: "json",
+    });
+    return {
+      source: "indiekit",
+      ...data,
+    };
+  } catch (error) {
+    console.log(`[newSource] API unavailable: ${error.message}`);
+    return {
+      source: "error",
+      items: [],
+    };
+  }
+}
+```
+
+2. **Use in template:**
+
+```nunjucks
+{% if newSource and newSource.source == "indiekit" %}
+  {% for item in newSource.items %}
+    {# render item #}
+  {% endfor %}
+{% endif %}
+```
+
+3. **Add status check** to base.njk navigation (if needed).
+
+### Adding a New Homepage Section
+
+1. **Create section template** in `_includes/components/sections/`:
+
+```nunjucks
+{# new-section.njk #}
+{% set sectionConfig = section.config or {} %}
+{% set maxItems = sectionConfig.maxItems or 5 %}
+
+<section class="mb-8 sm:mb-12">
+  <h2 class="text-xl sm:text-2xl font-bold">{{ sectionConfig.title or "New Section" }}</h2>
+  {# render content #}
+</section>
+```
+
+2. **Register in `homepage-section.njk`:**
+
+```nunjucks
+{% if section.type == "new-section" %}
+  {% include "components/sections/new-section.njk" %}
+```
+
+3. **Plugin integration:** The plugin that provides this section should register it via `homepageSections` in Indiekit.
+
+### Debugging Webmentions
+
+1. **Check build-time cache:** Look at `webmention-debug.njk` page
+2. **Check client-side fetch:** Open browser console, check for fetch requests to `/webmentions/api/mentions`
+3. **Verify target URL:** Webmentions must match exact URL (with or without trailing slash)
+4. **Check legacy URLs:** Verify `urlAliases` data includes old URLs if needed
+
+### Theming and Customization
+
+1. **Colors:** Edit `tailwind.config.js` → `theme.extend.colors`
+2. **Typography:** Edit `tailwind.config.js` → `theme.extend.typography`
+3. **CSS utilities:** Add custom utilities to `css/tailwind.css`
+4. **Rebuild CSS:** `npm run build:css` (or `make build:css` in parent repo)
+
+## Anti-Patterns
+
+1. ❌ **Forgetting to update submodule** after changes
+2. ❌ **Editing files in submodule directory** (`indiekit-cloudron/eleventy-site/`)
+3. ❌ **Using Date objects instead of ISO strings** for dates
+4. ❌ **Not guarding `| date` filters** against null/undefined
+5. ❌ **Using only underscore property names** (support both camelCase and underscore)
+6. ❌ **Using `markdownTemplateEngine: "njk"`** (breaks code samples with `{{`)
+7. ❌ **Hardcoding personal data in templates** (use environment variables)
+8. ❌ **Forgetting to run `make prepare`** before `cloudron build` (deploys stale config)
+9. ❌ **Using unsafe HTML string assignment in client-side JS** (security hooks reject it — use `createElement` + `textContent`)
+10. ❌ **Removing overrides without checking if they shadow submodule files** (causes stale data)
+
+## Troubleshooting
+
+### "dateString.split is not a function"
+
+**Cause:** A Date object was passed to the `| date` filter.
+**Fix:** Store dates as ISO strings from the start: `new Date().toISOString()`
+
+### Stale data in homepage/CV despite correct JSON files
+
+**Cause:** Override file in `indiekit-cloudron/overrides/eleventy-site/` shadows the submodule.
+**Fix:** Delete the override file and reset submodule: `cd eleventy-site && git checkout -- _data/file.js`
+
+### Webmentions not appearing
+
+**Causes:**
+- Build-time cache expired (rebuild to refresh)
+- Client-side JS blocked by CSP (check console)
+- Target URL mismatch (check with/without trailing slash)
+- webmention.io down (check status)
+
+**Fix:** Check `webmention-debug.njk` page, verify `webmentionsForUrl` filter is working.
+
+### Plugin data not appearing in navigation
+
+**Cause:** The plugin's status endpoint is unavailable or returning `source: "error"`.
+**Fix:** Check the plugin's API is running, verify environment variables are set.
+
+### YouTube embeds not working
+
+**Causes:**
+- URL doesn't match pattern (must be youtube.com/watch or youtu.be)
+- Link text doesn't contain "youtube" or URL (transform matches specific patterns)
+
+**Fix:** Use embed plugin shortcode or raw `<iframe>` instead.
+
+## Workspace Context
+
+This repo is part of the Indiekit development workspace at `/home/rick/code/indiekit-dev/`. See the workspace CLAUDE.md for the full repository map and plugin architecture.
diff --git a/README.md b/README.md
index 37a960a..b20af20 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,498 @@
-# blog :)
-try to emulate https://rmendes.net/
+# Indiekit Eleventy Theme
+
+A modern, IndieWeb-native Eleventy theme designed for [Indiekit](https://getindiekit.com/)-powered personal websites. Own your content, syndicate everywhere.
+
+## Features
+
+### IndieWeb First
+
+This theme is built from the ground up for the IndieWeb:
+
+- **Microformats2** markup (h-card, h-entry, h-feed, h-cite)
+- **Webmentions** via webmention.io (likes, reposts, replies)
+- **IndieAuth** with rel="me" verification
+- **Micropub** integration with Indiekit
+- **POSSE** syndication to Bluesky, Mastodon, LinkedIn, IndieNews
+
+### Full Post Type Support
+
+All IndieWeb post types via Indiekit:
+- **Articles** — Long-form blog posts with titles
+- **Notes** — Short status updates (like tweets)
+- **Photos** — Image posts with multi-photo galleries
+- **Bookmarks** — Save and share links with descriptions
+- **Likes** — Appreciate others' content
+- **Replies** — Respond to posts across the web
+- **Reposts** — Share others' content
+- **Pages** — Root-level slash pages (/about, /now, /uses)
+
+### Homepage Builder
+
+Dynamic, plugin-configured homepage with:
+- **Hero section** with avatar, bio, social links
+- **Recent posts** with configurable filtering
+- **CV sections** (experience, skills, education, projects, interests)
+- **Custom HTML** sections from admin UI
+- **Two-column layout** with configurable sidebar
+- **Single-column** or **full-width hero** layouts
+
+### Plugin Integration
+
+Integrates with custom Indiekit endpoint plugins:
+
+| Plugin | Features |
+|--------|----------|
+| `@rmdes/indiekit-endpoint-homepage` | Dynamic homepage builder with admin UI |
+| `@rmdes/indiekit-endpoint-cv` | CV/resume builder with admin UI |
+| `@rmdes/indiekit-endpoint-github` | GitHub activity, commits, stars, featured repos |
+| `@rmdes/indiekit-endpoint-funkwhale` | Listening activity from Funkwhale |
+| `@rmdes/indiekit-endpoint-lastfm` | Scrobbles and loved tracks from Last.fm |
+| `@rmdes/indiekit-endpoint-youtube` | Channel info, latest videos, live status |
+| `@rmdes/indiekit-endpoint-blogroll` | OPML/Microsub blog aggregator with admin UI |
+| `@rmdes/indiekit-endpoint-podroll` | Podcast episode aggregator |
+| `@rmdes/indiekit-endpoint-rss` | RSS feed reader with MongoDB caching |
+| `@rmdes/indiekit-endpoint-microsub` | Social reader with channels and timeline |
+
+### Modern Tech Stack
+
+- **Eleventy 3.0** — Fast, flexible static site generator
+- **Tailwind CSS** — Utility-first styling with dark mode
+- **Alpine.js** — Lightweight JavaScript framework
+- **Pagefind** — Fast client-side search
+- **Markdown-it** — Rich markdown with auto-linking
+- **Image optimization** — Automatic WebP conversion, lazy loading
+
+## Installation
+
+### As a Git Submodule (Recommended)
+
+This theme is designed to be used as a Git submodule in your Indiekit deployment repository:
+
+```bash
+# In your Indiekit deployment repo
+git submodule add https://github.com/rmdes/indiekit-eleventy-theme.git eleventy-site
+git submodule update --init --recursive
+cd eleventy-site
+npm install
+```
+
+**Why submodule?** Keeps the theme neutral (no personal data), allows upstream updates, and separates theme development from deployment.
+
+### Standalone Installation
+
+For local development or testing:
+
+```bash
+git clone https://github.com/rmdes/indiekit-eleventy-theme.git
+cd indiekit-eleventy-theme
+npm install
+```
+
+## Configuration
+
+**All configuration is done via environment variables** — the theme contains no hardcoded personal data.
+
+### Required Variables
+
+```bash
+# Site basics
+SITE_URL="https://your-site.com"
+SITE_NAME="Your Site Name"
+SITE_DESCRIPTION="A short description of your site"
+SITE_LOCALE="en"
+
+# Author info (displayed in h-card)
+AUTHOR_NAME="Your Name"
+AUTHOR_BIO="A short bio about yourself"
+AUTHOR_AVATAR="/images/avatar.jpg"
+```
+
+### Social Links
+
+Format: `Name|URL|icon,Name|URL|icon`
+
+```bash
+SITE_SOCIAL="GitHub|https://github.com/you|github,Mastodon|https://mastodon.social/@you|mastodon,Bluesky|https://bsky.app/profile/you|bluesky"
+```
+
+**Auto-generation:** If `SITE_SOCIAL` is not set, social links are automatically generated from feed credentials (GitHub, Bluesky, Mastodon, LinkedIn).
+
+### Optional Author Fields
+
+```bash
+AUTHOR_TITLE="Software Developer"
+AUTHOR_LOCATION="City, Country"
+AUTHOR_LOCALITY="City"
+AUTHOR_REGION="State/Province"
+AUTHOR_COUNTRY="Country"
+AUTHOR_ORG="Company Name"
+AUTHOR_PRONOUN="they/them"
+AUTHOR_CATEGORIES="IndieWeb,Open Source,Photography"  # Comma-separated
+AUTHOR_KEY_URL="https://keybase.io/you/pgp_keys.asc"
+AUTHOR_EMAIL="you@example.com"
+```
+
+### Social Activity Feeds
+
+For sidebar social activity widgets:
+
+```bash
+# Bluesky
+BLUESKY_HANDLE="you.bsky.social"
+
+# Mastodon
+MASTODON_INSTANCE="https://mastodon.social"
+MASTODON_USER="your-username"
+```
+
+### Plugin API Credentials
+
+#### GitHub Activity
+```bash
+GITHUB_USERNAME="your-username"
+GITHUB_TOKEN="ghp_xxxx"  # Personal access token (optional, increases rate limit)
+GITHUB_FEATURED_REPOS="user/repo1,user/repo2"  # Comma-separated
+```
+
+#### Funkwhale
+```bash
+FUNKWHALE_INSTANCE="https://your-instance.com"
+FUNKWHALE_USERNAME="your-username"
+FUNKWHALE_TOKEN="your-api-token"
+```
+
+#### YouTube
+```bash
+YOUTUBE_API_KEY="your-api-key"
+YOUTUBE_CHANNELS="@channel1,@channel2"  # Comma-separated handles
+```
+
+#### LinkedIn
+```bash
+LINKEDIN_USERNAME="your-username"
+```
+
+### Post Type Configuration
+
+Control which post types appear in navigation:
+
+```bash
+# Option 1: Environment variable (comma-separated)
+POST_TYPES="article,note,photo,bookmark"
+
+# Option 2: JSON file (written by Indiekit or deployer)
+# Create content/.indiekit/post-types.json:
+# ["article", "note", "photo"]
+```
+
+**Default:** All standard post types enabled (article, note, photo, bookmark, like, reply, repost).
+
+## Directory Structure
+
+```
+indiekit-eleventy-theme/
+├── _data/                    # Data files
+│   ├── site.js              # Site config from env vars
+│   ├── cv.js                # CV data from plugin
+│   ├── homepageConfig.js    # Homepage layout from plugin
+│   ├── enabledPostTypes.js  # Post types for navigation
+│   ├── githubActivity.js    # GitHub data (Indiekit API → GitHub API fallback)
+│   ├── funkwhaleActivity.js # Funkwhale listening activity
+│   ├── lastfmActivity.js    # Last.fm scrobbles
+│   ├── youtubeChannel.js    # YouTube channel info
+│   ├── blueskyFeed.js       # Bluesky posts for sidebar
+│   ├── mastodonFeed.js      # Mastodon posts for sidebar
+│   ├── blogrollStatus.js    # Blogroll API availability check
+│   └── urlAliases.js        # Legacy URL mappings for webmentions
+├── _includes/
+│   ├── layouts/
+│   │   ├── base.njk         # Base HTML shell (header, footer, nav)
+│   │   ├── home.njk         # Homepage layout (plugin vs default)
+│   │   ├── post.njk         # Individual post (h-entry, webmentions)
+│   │   └── page.njk         # Simple page layout
+│   ├── components/
+│   │   ├── homepage-builder.njk  # Renders plugin homepage config
+│   │   ├── homepage-section.njk  # Section router
+│   │   ├── sidebar.njk           # Default sidebar
+│   │   ├── h-card.njk            # Author identity card
+│   │   ├── reply-context.njk     # Reply/like/repost context
+│   │   └── webmentions.njk       # Webmention display + form
+│   │   ├── sections/
+│   │   │   ├── hero.njk          # Homepage hero
+│   │   │   ├── recent-posts.njk  # Recent posts grid
+│   │   │   ├── cv-experience.njk # Work experience timeline
+│   │   │   ├── cv-skills.njk     # Skills with proficiency
+│   │   │   ├── cv-education.njk  # Education history
+│   │   │   ├── cv-projects.njk   # Featured projects
+│   │   │   ├── cv-interests.njk  # Personal interests
+│   │   │   └── custom-html.njk   # Custom HTML content
+│   │   └── widgets/
+│   │       ├── author-card.njk   # Sidebar h-card
+│   │       ├── social-activity.njk  # Bluesky/Mastodon feed
+│   │       ├── github-repos.njk  # GitHub featured repos
+│   │       ├── funkwhale.njk     # Now playing widget
+│   │       ├── blogroll.njk      # Recently updated blogs
+│   │       └── categories.njk    # Category list
+├── css/
+│   ├── tailwind.css         # Tailwind source
+│   ├── style.css            # Compiled output (generated)
+│   └── prism-theme.css      # Syntax highlighting theme
+├── js/
+│   ├── webmentions.js       # Client-side webmention fetcher
+│   └── admin.js             # Admin auth detection (shows FAB + dashboard link)
+├── images/                  # Static images
+├── *.njk                    # Page templates (blog, about, cv, etc.)
+├── eleventy.config.js       # Eleventy configuration
+├── tailwind.config.js       # Tailwind configuration
+├── postcss.config.js        # PostCSS pipeline
+└── package.json             # Dependencies and scripts
+```
+
+## Usage
+
+### Development
+
+```bash
+# Install dependencies
+npm install
+
+# Development server with hot reload
+npm run dev
+# → http://localhost:8080
+
+# Build for production
+npm run build
+# → Output to _site/
+
+# Build CSS only (after Tailwind config changes)
+npm run build:css
+```
+
+### Content Directory
+
+The theme expects content in a `content/` directory (typically a symlink to Indiekit's content store):
+
+```
+content/
+├── .indiekit/               # Plugin data files
+│   ├── homepage.json        # Homepage builder config
+│   ├── cv.json              # CV data
+│   └── post-types.json      # Enabled post types
+├── articles/
+│   └── 2025-01-15-post.md
+├── notes/
+│   └── 2025-01-15-note.md
+├── photos/
+│   └── 2025-01-15-photo.md
+└── pages/
+    └── about.md             # Slash page
+```
+
+## Customization
+
+### Colors and Typography
+
+Edit `tailwind.config.js`:
+
+```javascript
+theme: {
+  extend: {
+    colors: {
+      primary: {
+        500: "#3b82f6",  // Your primary color
+        600: "#2563eb",
+        // ...
+      },
+    },
+    fontFamily: {
+      sans: ["Your Font", "system-ui", "sans-serif"],
+    },
+  },
+}
+```
+
+Then rebuild CSS: `npm run build:css`
+
+### Dark Mode
+
+The theme includes full dark mode support with `dark:` variants. Toggle is available in header/mobile nav, syncs with system preference.
+
+### Override Files
+
+When using as a submodule, place override files in your parent repo:
+
+```
+your-deployment-repo/
+├── overrides/
+│   └── eleventy-site/
+│       ├── _data/           # Override data files
+│       ├── images/          # Your images
+│       └── about.njk        # Override templates
+└── eleventy-site/           # This theme (submodule)
+```
+
+Override files are copied over the submodule during build.
+
+**Warning:** Be careful with `_data/` overrides — they can shadow dynamic plugin data. Use only for truly static customizations.
+
+## Plugin Integration
+
+### How Plugins Provide Data
+
+Indiekit plugins write JSON files to `content/.indiekit/*.json`. The theme's `_data/*.js` files read these JSON files at build time.
+
+**Example flow:**
+
+1. User edits CV in Indiekit admin UI (`/cv`)
+2. `@rmdes/indiekit-endpoint-cv` saves to `content/.indiekit/cv.json`
+3. Eleventy rebuild triggers (`_data/cv.js` reads the JSON file)
+4. CV sections render with new data
+
+### Homepage Builder
+
+The homepage builder is controlled by `@rmdes/indiekit-endpoint-homepage`:
+
+1. Plugin provides admin UI at `/homepage`
+2. User configures layout, sections, sidebar widgets
+3. Plugin writes `content/.indiekit/homepage.json`
+4. Theme renders configured layout (or falls back to default)
+
+**Fallback:** If no homepage plugin is installed, the theme shows a default layout (hero + recent posts + sidebar).
+
+### Adding Custom Sections
+
+To add a custom homepage section:
+
+1. Create template in `_includes/components/sections/your-section.njk`
+2. Register in `_includes/components/homepage-section.njk`:
+
+```nunjucks
+{% if section.type == "your-section" %}
+  {% include "components/sections/your-section.njk" %}
+{% endif %}
+```
+
+3. Plugin should register the section via `homepageSections` in Indiekit
+
+## Deployment
+
+### Cloudron
+
+See `indiekit-cloudron` repository for Cloudron deployment with this theme as submodule.
+
+### Docker Compose
+
+See `indiekit-deploy` repository for Docker Compose deployment with this theme as submodule.
+
+### Static Host (Netlify, Vercel, etc.)
+
+1. **Not recommended** — Indiekit needs a server for Micropub/Webmentions
+2. For static-only use (no Indiekit), set all env vars and run `npm run build`
+3. Deploy `_site/` directory
+
+## Pages Included
+
+| Page | URL | Description |
+|------|-----|-------------|
+| Home | `/` | Dynamic homepage (plugin or default) |
+| About | `/about/` | Full h-card with bio |
+| CV | `/cv/` | Resume with all sections |
+| Blog | `/blog/` | All posts chronologically |
+| Articles | `/articles/` | Long-form articles |
+| Notes | `/notes/` | Short status updates |
+| Photos | `/photos/` | Photo posts |
+| Bookmarks | `/bookmarks/` | Saved links |
+| Likes | `/likes/` | Liked posts |
+| Replies | `/replies/` | Responses to others |
+| Reposts | `/reposts/` | Shared content |
+| Interactions | `/interactions/` | Combined social interactions |
+| Slashes | `/slashes/` | Index of all slash pages |
+| Categories | `/categories/` | Posts by category |
+| GitHub | `/github/` | GitHub activity (if plugin enabled) |
+| Funkwhale | `/funkwhale/` | Listening history (if plugin enabled) |
+| Last.fm | `/listening/` | Last.fm scrobbles (if plugin enabled) |
+| YouTube | `/youtube/` | YouTube channel (if plugin enabled) |
+| Blogroll | `/blogroll/` | Blog aggregator (if plugin enabled) |
+| Podroll | `/podroll/` | Podcast episodes (if plugin enabled) |
+| IndieNews | `/news/` | IndieNews submissions (if plugin enabled) |
+| Search | `/search/` | Pagefind search UI |
+| RSS Feed | `/feed.xml` | RSS 2.0 feed |
+| JSON Feed | `/feed.json` | JSON Feed 1.1 |
+| Changelog | `/changelog/` | Site changelog |
+
+## IndieWeb Resources
+
+- [IndieWebify.me](https://indiewebify.me/) — Test your IndieWeb implementation
+- [Microformats Wiki](https://microformats.org/wiki/h-card) — Microformats2 reference
+- [webmention.io](https://webmention.io/) — Webmention service
+- [IndieAuth](https://indieauth.com/) — Authentication protocol
+- [Bridgy](https://brid.gy/) — Backfeed social interactions
+
+## Troubleshooting
+
+### Webmentions not appearing
+
+**Solution:**
+1. Check `SITE_URL` matches your live domain exactly
+2. Verify webmention.io API is responding: `https://webmention.io/api/mentions?target=https://your-site.com/`
+3. Check build-time cache at `/webmention-debug/`
+4. Ensure post URLs match exactly (with/without trailing slash)
+
+### Plugin data not showing
+
+**Solution:**
+1. Verify the plugin is installed and running in Indiekit
+2. Check environment variables are set correctly
+3. Check `content/.indiekit/*.json` files exist and are valid JSON
+4. Rebuild Eleventy to refresh data: `npm run build`
+
+### Dark mode not working
+
+**Solution:**
+1. Check browser console for JavaScript errors
+2. Verify Alpine.js loaded: `<script src="...alpinejs..."></script>`
+3. Clear localStorage: `localStorage.removeItem('theme')`
+
+### Search not working
+
+**Solution:**
+1. Check Pagefind indexed: `_site/_pagefind/` directory exists
+2. Rebuild with search indexing: `npm run build`
+3. Check search page is not blocked by CSP headers
+
+## Contributing
+
+This theme is tailored for a specific Indiekit deployment but designed to be adaptable. Contributions welcome:
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Test with `npm run dev`
+5. Submit a pull request
+
+**Guidelines:**
+- Keep theme neutral (no hardcoded personal data)
+- Use environment variables for all configuration
+- Maintain microformats2 markup
+- Test dark mode
+- Follow existing code style (ESM, Nunjucks, Tailwind)
+
+## License
+
+MIT
+
+## Credits
+
+- Built for [Indiekit](https://getindiekit.com/) by Paul Robert Lloyd
+- Inspired by the [IndieWeb](https://indieweb.org/) community
+- Styled with [Tailwind CSS](https://tailwindcss.com/)
+- Icons from [Heroicons](https://heroicons.com/)
+- Search by [Pagefind](https://pagefind.app/)
+- Static site generation by [Eleventy](https://11ty.dev/)
+
+## Related Projects
+
+- [Indiekit](https://github.com/getindiekit/indiekit) — Micropub server
+- [indiekit-cloudron](https://github.com/rmdes/indiekit-cloudron) — Cloudron deployment
+- [indiekit-deploy](https://github.com/rmdes/indiekit-deploy) — Docker Compose deployment
+- [@rmdes/indiekit-endpoint-*](https://github.com/rmdes?tab=repositories) — Custom Indiekit plugins
diff --git a/_data/blogrollStatus.js b/_data/blogrollStatus.js
new file mode 100644
index 0000000..aee1601
--- /dev/null
+++ b/_data/blogrollStatus.js
@@ -0,0 +1,34 @@
+/**
+ * Blogroll Status Data
+ * Checks if the blogroll API backend is available at build time.
+ * Used for conditional navigation — the blogroll page itself loads data client-side.
+ */
+
+import EleventyFetch from "@11ty/eleventy-fetch";
+
+const INDIEKIT_URL = process.env.SITE_URL || "https://example.com";
+
+export default async function () {
+  try {
+    const url = `${INDIEKIT_URL}/blogrollapi/api/status`;
+    console.log(`[blogrollStatus] Checking API: ${url}`);
+    const data = await EleventyFetch(url, {
+      duration: "15m",
+      type: "json",
+    });
+    console.log("[blogrollStatus] API available");
+    return {
+      available: true,
+      source: "indiekit",
+      ...data,
+    };
+  } catch (error) {
+    console.log(
+      `[blogrollStatus] API unavailable: ${error.message}`
+    );
+    return {
+      available: false,
+      source: "unavailable",
+    };
+  }
+}
diff --git a/_data/blueskyFeed.js b/_data/blueskyFeed.js
new file mode 100644
index 0000000..b0083bc
--- /dev/null
+++ b/_data/blueskyFeed.js
@@ -0,0 +1,68 @@
+/**
+ * Bluesky Feed Data
+ * Fetches recent posts from Bluesky using the AT Protocol API
+ */
+
+import EleventyFetch from "@11ty/eleventy-fetch";
+import { BskyAgent } from "@atproto/api";
+
+export default async function () {
+  const handle = process.env.BLUESKY_HANDLE || "";
+
+  try {
+    // Create agent and resolve handle to DID
+    const agent = new BskyAgent({ service: "https://bsky.social" });
+
+    // Get the author's feed using public API (no auth needed for public posts)
+    const feedUrl = `https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed?actor=${handle}&limit=10`;
+
+    const response = await EleventyFetch(feedUrl, {
+      duration: "15m", // Cache for 15 minutes
+      type: "json",
+      fetchOptions: {
+        headers: {
+          Accept: "application/json",
+        },
+      },
+    });
+
+    if (!response.feed) {
+      console.log("No Bluesky feed found for handle:", handle);
+      return [];
+    }
+
+    // Transform the feed into a simpler format
+    return response.feed.map((item) => {
+      // Extract rkey from AT URI (at://did:plc:xxx/app.bsky.feed.post/rkey)
+      const rkey = item.post.uri.split("/").pop();
+      const postUrl = `https://bsky.app/profile/${item.post.author.handle}/post/${rkey}`;
+
+      return {
+        text: item.post.record.text,
+        createdAt: item.post.record.createdAt,
+        uri: item.post.uri,
+        url: postUrl,
+        cid: item.post.cid,
+        author: {
+          handle: item.post.author.handle,
+          displayName: item.post.author.displayName,
+          avatar: item.post.author.avatar,
+        },
+        likeCount: item.post.likeCount || 0,
+        repostCount: item.post.repostCount || 0,
+        replyCount: item.post.replyCount || 0,
+        // Extract any embedded links or images
+        embed: item.post.embed
+          ? {
+              type: item.post.embed.$type,
+              images: item.post.embed.images || [],
+              external: item.post.embed.external || null,
+            }
+          : null,
+      };
+    });
+  } catch (error) {
+    console.error("Error fetching Bluesky feed:", error.message);
+    return [];
+  }
+}
diff --git a/_data/conversationMentions.js b/_data/conversationMentions.js
new file mode 100644
index 0000000..1652f37
--- /dev/null
+++ b/_data/conversationMentions.js
@@ -0,0 +1,14 @@
+import EleventyFetch from "@11ty/eleventy-fetch";
+
+export default async function () {
+  try {
+    const data = await EleventyFetch(
+      "http://127.0.0.1:8080/conversations/api/mentions?per-page=10000",
+      { duration: "15m", type: "json" }
+    );
+    return data.children || [];
+  } catch (e) {
+    console.log(`[conversationMentions] API unavailable: ${e.message}`);
+    return [];
+  }
+}
diff --git a/_data/cv.js b/_data/cv.js
new file mode 100644
index 0000000..a64d08f
--- /dev/null
+++ b/_data/cv.js
@@ -0,0 +1,37 @@
+/**
+ * CV Data — reads from indiekit-endpoint-cv plugin data file.
+ *
+ * The CV plugin writes content/.indiekit/cv.json on every save
+ * and on startup. Eleventy reads that file here.
+ *
+ * Falls back to empty defaults if no plugin is installed.
+ */
+
+import { readFileSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default function () {
+  try {
+    const cvPath = resolve(__dirname, "..", "content", ".indiekit", "cv.json");
+    const raw = readFileSync(cvPath, "utf8");
+    const data = JSON.parse(raw);
+    console.log("[cv] Loaded CV data from plugin");
+    return data;
+  } catch {
+    // No CV plugin data file — return empty defaults
+    return {
+      lastUpdated: null,
+      experience: [],
+      projects: [],
+      skills: {},
+      skillTypes: {},
+      languages: [],
+      education: [],
+      interests: {},
+      interestTypes: {},
+    };
+  }
+}
diff --git a/_data/cvPageConfig.js b/_data/cvPageConfig.js
new file mode 100644
index 0000000..456b388
--- /dev/null
+++ b/_data/cvPageConfig.js
@@ -0,0 +1,29 @@
+/**
+ * CV Page Configuration Data
+ * Reads config from indiekit-endpoint-cv plugin CV page builder.
+ * Falls back to null — cv.njk then uses the default hardcoded layout.
+ *
+ * The CV plugin writes a .indiekit/cv-page.json file that Eleventy watches.
+ * On change, a rebuild picks up the new config, allowing layout changes
+ * without a Docker rebuild.
+ */
+
+import { readFileSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default function () {
+  try {
+    // Resolve via the content/ symlink relative to the Eleventy project
+    const configPath = resolve(__dirname, "..", "content", ".indiekit", "cv-page.json");
+    const raw = readFileSync(configPath, "utf8");
+    const config = JSON.parse(raw);
+    console.log("[cvPageConfig] Loaded CV page builder config");
+    return config;
+  } catch {
+    // No CV page builder config — fall back to hardcoded layout in cv.njk
+    return null;
+  }
+}
diff --git a/_data/eleventyComputed.js b/_data/eleventyComputed.js
new file mode 100644
index 0000000..fa56636
--- /dev/null
+++ b/_data/eleventyComputed.js
@@ -0,0 +1,52 @@
+/**
+ * Computed data resolved during the data cascade.
+ *
+ * Eleventy 3.x parallel rendering causes `page.url`, `page.fileSlug`,
+ * and `page.inputPath` to return values from OTHER pages being processed
+ * concurrently. This affects both templates and eleventyComputed functions.
+ *
+ * IMPORTANT: Only `permalink` is computed here, because it reads from the
+ * file's own frontmatter data (per-file, immune to race conditions).
+ * OG image lookups are done in templates using the `permalink` data value
+ * and Nunjucks filters (see base.njk).
+ *
+ * NEVER use `page.url`, `page.fileSlug`, or `page.inputPath` here.
+ *
+ * See: https://github.com/11ty/eleventy/issues/3183
+ */
+
+export default {
+  eleventyComputed: {
+    // Compute permalink from file path for posts without explicit frontmatter permalink.
+    // Pattern: content/{type}/{yyyy}-{MM}-{dd}-{slug}.md → /{type}/{yyyy}/{MM}/{dd}/{slug}/
+    permalink: (data) => {
+      // Convert stale /content/ permalinks from pre-beta.37 posts to canonical format
+      if (data.permalink && typeof data.permalink === "string") {
+        const contentMatch = data.permalink.match(
+          /^\/content\/([^/]+)\/(\d{4})-(\d{2})-(\d{2})-(.+?)\/?$/
+        );
+        if (contentMatch) {
+          const [, type, year, month, day, slug] = contentMatch;
+          return `/${type}/${year}/${month}/${day}/${slug}/`;
+        }
+        // Valid non-/content/ permalink — use as-is
+        return data.permalink;
+      }
+
+      // No frontmatter permalink — compute from file path
+      // NOTE: data.page.inputPath may be wrong due to parallel rendering,
+      // but posts without frontmatter permalink are rare (only pre-beta.37 edge cases)
+      const inputPath = data.page?.inputPath || "";
+      const match = inputPath.match(
+        /content\/([^/]+)\/(\d{4})-(\d{2})-(\d{2})-(.+)\.md$/
+      );
+      if (match) {
+        const [, type, year, month, day, slug] = match;
+        return `/${type}/${year}/${month}/${day}/${slug}/`;
+      }
+
+      // For non-matching files (pages, root files), let Eleventy decide
+      return data.permalink;
+    },
+  },
+};
diff --git a/_data/enabledPostTypes.js b/_data/enabledPostTypes.js
new file mode 100644
index 0000000..989bc7a
--- /dev/null
+++ b/_data/enabledPostTypes.js
@@ -0,0 +1,50 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const CONTENT_DIR = process.env.CONTENT_DIR || "/data/content";
+
+// Standard post types for any Indiekit deployment
+const ALL_POST_TYPES = [
+  { type: "article", label: "Articles", path: "/articles/", createUrl: "/posts/create?type=article" },
+  { type: "note", label: "Notes", path: "/notes/", createUrl: "/posts/create?type=note" },
+  { type: "photo", label: "Photos", path: "/photos/", createUrl: "/posts/create?type=photo" },
+  { type: "bookmark", label: "Bookmarks", path: "/bookmarks/", createUrl: "/posts/create?type=bookmark" },
+  { type: "like", label: "Likes", path: "/likes/", createUrl: "/posts/create?type=like" },
+  { type: "reply", label: "Replies", path: "/replies/", createUrl: "/posts/create?type=reply" },
+  { type: "repost", label: "Reposts", path: "/reposts/", createUrl: "/posts/create?type=repost" },
+];
+
+/**
+ * Returns the list of enabled post types.
+ *
+ * Resolution order:
+ * 1. .indiekit/post-types.json in content dir (written by Indiekit or deployer)
+ * 2. POST_TYPES env var (comma-separated: "article,note,photo")
+ * 3. All standard post types (default)
+ */
+export default function () {
+  // 1. Try config file
+  try {
+    const configPath = resolve(CONTENT_DIR, ".indiekit", "post-types.json");
+    const raw = readFileSync(configPath, "utf8");
+    const types = JSON.parse(raw);
+    if (Array.isArray(types)) {
+      // Array of type strings: ["article", "note"]
+      return ALL_POST_TYPES.filter((pt) => types.includes(pt.type));
+    }
+    // Array of objects with at least { type }
+    return types;
+  } catch {
+    // File doesn't exist — fall through
+  }
+
+  // 2. Try env var
+  const envTypes = process.env.POST_TYPES;
+  if (envTypes) {
+    const types = envTypes.split(",").map((t) => t.trim().toLowerCase());
+    return ALL_POST_TYPES.filter((pt) => types.includes(pt.type));
+  }
+
+  // 3. Default — all standard types
+  return ALL_POST_TYPES;
+}
diff --git a/_data/funkwhaleActivity.js b/_data/funkwhaleActivity.js
new file mode 100644
index 0000000..316aeb4
--- /dev/null
+++ b/_data/funkwhaleActivity.js
@@ -0,0 +1,123 @@
+/**
+ * Funkwhale Activity Data
+ * Fetches from Indiekit's endpoint-funkwhale public API
+ */
+
+import EleventyFetch from "@11ty/eleventy-fetch";
+
+const INDIEKIT_URL = process.env.SITE_URL || "https://example.com";
+const FUNKWHALE_INSTANCE = process.env.FUNKWHALE_INSTANCE || "";
+
+/**
+ * Fetch from Indiekit's public Funkwhale API endpoint
+ */
+async function fetchFromIndiekit(endpoint) {
+  try {
+    const url = `${INDIEKIT_URL}/funkwhaleapi/api/${endpoint}`;
+    console.log(`[funkwhaleActivity] Fetching from Indiekit: ${url}`);
+    const data = await EleventyFetch(url, {
+      duration: "15m",
+      type: "json",
+    });
+    console.log(`[funkwhaleActivity] Indiekit ${endpoint} success`);
+    return data;
+  } catch (error) {
+    console.log(
+      `[funkwhaleActivity] Indiekit API unavailable for ${endpoint}: ${error.message}`
+    );
+    return null;
+  }
+}
+
+/**
+ * Format duration in seconds to human-readable string
+ */
+function formatDuration(seconds) {
+  if (!seconds || seconds < 0) return "0:00";
+
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+
+  if (hours > 24) {
+    const days = Math.floor(hours / 24);
+    return `${days}d`;
+  }
+
+  if (hours > 0) {
+    return `${hours}h ${minutes}m`;
+  }
+
+  return `${minutes}m`;
+}
+
+export default async function () {
+  try {
+    console.log("[funkwhaleActivity] Fetching Funkwhale data...");
+
+    // Fetch all data from Indiekit API
+    const [nowPlaying, listenings, favorites, stats] = await Promise.all([
+      fetchFromIndiekit("now-playing"),
+      fetchFromIndiekit("listenings"),
+      fetchFromIndiekit("favorites"),
+      fetchFromIndiekit("stats"),
+    ]);
+
+    // Check if we got data
+    const hasData = nowPlaying || listenings?.listenings?.length || stats?.summary;
+
+    if (!hasData) {
+      console.log("[funkwhaleActivity] No data available from Indiekit");
+      return {
+        nowPlaying: null,
+        listenings: [],
+        favorites: [],
+        stats: null,
+        instanceUrl: FUNKWHALE_INSTANCE,
+        source: "unavailable",
+      };
+    }
+
+    console.log("[funkwhaleActivity] Using Indiekit API data");
+
+    // Format stats with human-readable durations
+    let formattedStats = null;
+    if (stats?.summary) {
+      formattedStats = {
+        ...stats,
+        summary: {
+          all: {
+            ...stats.summary.all,
+            totalDurationFormatted: formatDuration(stats.summary.all?.totalDuration || 0),
+          },
+          month: {
+            ...stats.summary.month,
+            totalDurationFormatted: formatDuration(stats.summary.month?.totalDuration || 0),
+          },
+          week: {
+            ...stats.summary.week,
+            totalDurationFormatted: formatDuration(stats.summary.week?.totalDuration || 0),
+          },
+        },
+      };
+    }
+
+    return {
+      nowPlaying: nowPlaying || null,
+      listenings: listenings?.listenings || [],
+      favorites: favorites?.favorites || [],
+      stats: formattedStats,
+      instanceUrl: FUNKWHALE_INSTANCE,
+      source: "indiekit",
+    };
+  } catch (error) {
+    console.error("[funkwhaleActivity] Error:", error.message);
+    return {
+      nowPlaying: null,
+      listenings: [],
+      favorites: [],
+      stats: null,
+      instanceUrl: FUNKWHALE_INSTANCE,
+      source: "error",
+    };
+  }
+}
diff --git a/_data/githubActivity.js b/_data/githubActivity.js
new file mode 100644
index 0000000..d8a19a7
--- /dev/null
+++ b/_data/githubActivity.js
@@ -0,0 +1,284 @@
+/**
+ * GitHub Activity Data
+ * Fetches from Indiekit's endpoint-github public API
+ * Falls back to direct GitHub API if Indiekit is unavailable
+ */
+
+import EleventyFetch from "@11ty/eleventy-fetch";
+
+const GITHUB_USERNAME = process.env.GITHUB_USERNAME || "";
+const INDIEKIT_URL = process.env.SITE_URL || "https://example.com";
+
+// Fallback featured repos if Indiekit API unavailable (from env: comma-separated)
+const FALLBACK_FEATURED_REPOS = process.env.GITHUB_FEATURED_REPOS?.split(",").filter(Boolean) || [];
+
+/**
+ * Fetch from Indiekit's public GitHub API endpoint
+ */
+async function fetchFromIndiekit(endpoint) {
+  try {
+    const url = `${INDIEKIT_URL}/githubapi/api/${endpoint}`;
+    console.log(`[githubActivity] Fetching from Indiekit: ${url}`);
+    const data = await EleventyFetch(url, {
+      duration: "15m",
+      type: "json",
+    });
+    console.log(`[githubActivity] Indiekit ${endpoint} success`);
+    return data;
+  } catch (error) {
+    console.log(
+      `[githubActivity] Indiekit API unavailable for ${endpoint}: ${error.message}`
+    );
+    return null;
+  }
+}
+
+/**
+ * Fetch from GitHub API directly
+ */
+async function fetchFromGitHub(endpoint) {
+  const url = `https://api.github.com${endpoint}`;
+  const headers = {
+    Accept: "application/vnd.github.v3+json",
+    "User-Agent": "Eleventy-Site",
+  };
+
+  if (process.env.GITHUB_TOKEN) {
+    headers.Authorization = `Bearer ${process.env.GITHUB_TOKEN}`;
+  }
+
+  return await EleventyFetch(url, {
+    duration: "15m",
+    type: "json",
+    fetchOptions: { headers },
+  });
+}
+
+/**
+ * Truncate text with ellipsis
+ */
+function truncate(text, maxLength = 80) {
+  if (!text || text.length <= maxLength) return text || "";
+  return text.slice(0, maxLength - 1) + "...";
+}
+
+/**
+ * Extract commits from push events
+ */
+function extractCommits(events) {
+  if (!Array.isArray(events)) return [];
+
+  return events
+    .filter((event) => event.type === "PushEvent")
+    .flatMap((event) =>
+      (event.payload?.commits || []).map((commit) => ({
+        sha: commit.sha.slice(0, 7),
+        message: truncate(commit.message.split("\n")[0]),
+        url: `https://github.com/${event.repo.name}/commit/${commit.sha}`,
+        repo: event.repo.name,
+        repoUrl: `https://github.com/${event.repo.name}`,
+        date: event.created_at,
+      }))
+    )
+    .slice(0, 10);
+}
+
+/**
+ * Extract PRs/Issues from events
+ */
+function extractContributions(events) {
+  if (!Array.isArray(events)) return [];
+
+  return events
+    .filter(
+      (event) =>
+        (event.type === "PullRequestEvent" || event.type === "IssuesEvent") &&
+        event.payload?.action === "opened"
+    )
+    .map((event) => {
+      const item = event.payload.pull_request || event.payload.issue;
+      return {
+        type: event.type === "PullRequestEvent" ? "pr" : "issue",
+        title: truncate(item?.title),
+        url: item?.html_url,
+        repo: event.repo.name,
+        repoUrl: `https://github.com/${event.repo.name}`,
+        number: item?.number,
+        date: event.created_at,
+      };
+    })
+    .slice(0, 10);
+}
+
+/**
+ * Format starred repos
+ */
+function formatStarred(repos) {
+  if (!Array.isArray(repos)) return [];
+
+  return repos.map((repo) => ({
+    name: repo.full_name,
+    description: truncate(repo.description, 120),
+    url: repo.html_url,
+    stars: repo.stargazers_count,
+    language: repo.language,
+    topics: repo.topics?.slice(0, 5) || [],
+  }));
+}
+
+/**
+ * Fetch featured repos directly from GitHub (fallback)
+ */
+async function fetchFeaturedFromGitHub(repoList) {
+  const featured = [];
+
+  for (const repoFullName of repoList) {
+    try {
+      const repo = await fetchFromGitHub(`/repos/${repoFullName}`);
+      let commits = [];
+      try {
+        const commitsData = await fetchFromGitHub(
+          `/repos/${repoFullName}/commits?per_page=5`
+        );
+        commits = commitsData.map((c) => ({
+          sha: c.sha.slice(0, 7),
+          message: truncate(c.commit.message.split("\n")[0]),
+          url: c.html_url,
+          date: c.commit.author.date,
+        }));
+      } catch (e) {
+        console.log(`[githubActivity] Could not fetch commits for ${repoFullName}`);
+      }
+
+      featured.push({
+        fullName: repo.full_name,
+        name: repo.name,
+        description: repo.description,
+        url: repo.html_url,
+        stars: repo.stargazers_count,
+        forks: repo.forks_count,
+        language: repo.language,
+        isPrivate: repo.private,
+        commits,
+      });
+    } catch (error) {
+      console.log(`[githubActivity] Could not fetch ${repoFullName}: ${error.message}`);
+    }
+  }
+
+  return featured;
+}
+
+/**
+ * Fetch commits directly from user's recently pushed repos
+ * Fallback when events API doesn't include commit details
+ */
+async function fetchCommitsFromRepos(username, limit = 10) {
+  try {
+    const repos = await fetchFromGitHub(
+      `/users/${username}/repos?sort=pushed&per_page=5`
+    );
+
+    if (!Array.isArray(repos) || repos.length === 0) {
+      return [];
+    }
+
+    const allCommits = [];
+    for (const repo of repos.slice(0, 5)) {
+      try {
+        const repoCommits = await fetchFromGitHub(
+          `/repos/${repo.full_name}/commits?per_page=5`
+        );
+        for (const c of repoCommits) {
+          allCommits.push({
+            sha: c.sha.slice(0, 7),
+            message: truncate(c.commit?.message?.split("\n")[0]),
+            url: c.html_url,
+            repo: repo.full_name,
+            repoUrl: repo.html_url,
+            date: c.commit?.author?.date,
+          });
+        }
+      } catch {
+        // Skip repos we can't access
+      }
+    }
+
+    // Sort by date and limit
+    return allCommits
+      .sort((a, b) => new Date(b.date) - new Date(a.date))
+      .slice(0, limit);
+  } catch (error) {
+    console.log(`[githubActivity] Could not fetch commits from repos: ${error.message}`);
+    return [];
+  }
+}
+
+export default async function () {
+  try {
+    console.log("[githubActivity] Fetching GitHub data...");
+
+    // Try Indiekit public API first
+    const [indiekitStars, indiekitCommits, indiekitContributions, indiekitActivity, indiekitFeatured] =
+      await Promise.all([
+        fetchFromIndiekit("stars"),
+        fetchFromIndiekit("commits"),
+        fetchFromIndiekit("contributions"),
+        fetchFromIndiekit("activity"),
+        fetchFromIndiekit("featured"),
+      ]);
+
+    // Check if Indiekit API is available
+    const hasIndiekitData =
+      indiekitStars?.stars ||
+      indiekitCommits?.commits ||
+      indiekitFeatured?.featured;
+
+    if (hasIndiekitData) {
+      console.log("[githubActivity] Using Indiekit API data");
+      return {
+        stars: indiekitStars?.stars || [],
+        commits: indiekitCommits?.commits || [],
+        contributions: indiekitContributions?.contributions || [],
+        activity: indiekitActivity?.activity || [],
+        featured: indiekitFeatured?.featured || [],
+        source: "indiekit",
+      };
+    }
+
+    // Fallback to direct GitHub API
+    console.log("[githubActivity] Falling back to GitHub API");
+
+    const [events, starred, featured] = await Promise.all([
+      fetchFromGitHub(`/users/${GITHUB_USERNAME}/events/public?per_page=50`),
+      fetchFromGitHub(`/users/${GITHUB_USERNAME}/starred?per_page=20&sort=created`),
+      fetchFeaturedFromGitHub(FALLBACK_FEATURED_REPOS),
+    ]);
+
+    // Try to extract commits from events first
+    let commits = extractCommits(events || []);
+
+    // If events API didn't have commits, fetch directly from repos
+    if (commits.length === 0 && GITHUB_USERNAME) {
+      console.log("[githubActivity] Events API returned no commits, fetching from repos");
+      commits = await fetchCommitsFromRepos(GITHUB_USERNAME, 10);
+    }
+
+    return {
+      stars: formatStarred(starred || []),
+      commits,
+      contributions: extractContributions(events || []),
+      featured,
+      source: "github",
+    };
+  } catch (error) {
+    console.error("[githubActivity] Error:", error.message);
+    return {
+      stars: [],
+      commits: [],
+      contributions: [],
+      featured: [],
+      source: "error",
+    };
+  }
+}
diff --git a/_data/githubRepos.js b/_data/githubRepos.js
new file mode 100644
index 0000000..1b8fe5f
--- /dev/null
+++ b/_data/githubRepos.js
@@ -0,0 +1,48 @@
+/**
+ * GitHub Repos Data
+ * Fetches public repositories from GitHub API
+ */
+
+import EleventyFetch from "@11ty/eleventy-fetch";
+
+export default async function () {
+  const username = process.env.GITHUB_USERNAME || "";
+
+  try {
+    // Fetch public repos, sorted by updated date
+    const url = `https://api.github.com/users/${username}/repos?sort=updated&per_page=10&type=owner`;
+
+    const repos = await EleventyFetch(url, {
+      duration: "1h", // Cache for 1 hour
+      type: "json",
+      fetchOptions: {
+        headers: {
+          Accept: "application/vnd.github.v3+json",
+          "User-Agent": "Eleventy-Site",
+        },
+      },
+    });
+
+    // Filter and transform repos
+    return repos
+      .filter((repo) => !repo.fork && !repo.private) // Exclude forks and private repos
+      .map((repo) => ({
+        name: repo.name,
+        full_name: repo.full_name,
+        description: repo.description,
+        html_url: repo.html_url,
+        homepage: repo.homepage,
+        language: repo.language,
+        stargazers_count: repo.stargazers_count,
+        forks_count: repo.forks_count,
+        open_issues_count: repo.open_issues_count,
+        topics: repo.topics || [],
+        updated_at: repo.updated_at,
+        created_at: repo.created_at,
+      }))
+      .slice(0, 10); // Limit to 10 repos
+  } catch (error) {
+    console.error("Error fetching GitHub repos:", error.message);
+    return [];
+  }
+}
diff --git a/_data/githubStarred.js b/_data/githubStarred.js
new file mode 100644
index 0000000..659d181
--- /dev/null
+++ b/_data/githubStarred.js
@@ -0,0 +1,32 @@
+/**
+ * GitHub Starred Repos Metadata
+ * Fetches the starred API response (cached 15min) to extract totalCount.
+ * Only totalCount is passed to Eleventy's data cascade — the full star
+ * list is discarded after parsing, keeping build memory low.
+ * The starred page fetches all data client-side via Alpine.js.
+ */
+
+import EleventyFetch from "@11ty/eleventy-fetch";
+
+const INDIEKIT_URL = process.env.SITE_URL || "https://example.com";
+
+export default async function () {
+  try {
+    const url = `${INDIEKIT_URL}/githubapi/api/starred/all`;
+    const response = await EleventyFetch(url, {
+      duration: "15m",
+      type: "json",
+    });
+
+    return {
+      totalCount: response.totalCount || 0,
+      buildDate: new Date().toISOString(),
+    };
+  } catch (error) {
+    console.log(`[githubStarred] Could not fetch starred count: ${error.message}`);
+    return {
+      totalCount: 0,
+      buildDate: new Date().toISOString(),
+    };
+  }
+}
diff --git a/_data/homepageConfig.js b/_data/homepageConfig.js
new file mode 100644
index 0000000..ed5b2a7
--- /dev/null
+++ b/_data/homepageConfig.js
@@ -0,0 +1,29 @@
+/**
+ * Homepage Configuration Data
+ * Reads config from indiekit-endpoint-homepage plugin (when installed).
+ * Falls back to null — home.njk then uses the default layout.
+ *
+ * Future: The homepage plugin will write a .indiekit/homepage.json file
+ * that Eleventy watches. On change, a rebuild picks up the new config,
+ * allowing layout changes without a Docker rebuild.
+ */
+
+import { readFileSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default function () {
+  try {
+    // Resolve via the content/ symlink relative to the Eleventy project
+    const configPath = resolve(__dirname, "..", "content", ".indiekit", "homepage.json");
+    const raw = readFileSync(configPath, "utf8");
+    const config = JSON.parse(raw);
+    console.log("[homepageConfig] Loaded plugin config");
+    return config;
+  } catch {
+    // No homepage plugin config — this is the normal case for most deployments
+    return null;
+  }
+}
diff --git a/_data/lastfmActivity.js b/_data/lastfmActivity.js
new file mode 100644
index 0000000..d7dd837
--- /dev/null
+++ b/_data/lastfmActivity.js
@@ -0,0 +1,83 @@
+/**
+ * Last.fm Activity Data
+ * Fetches from Indiekit's endpoint-lastfm public API
+ */
+
+import EleventyFetch from "@11ty/eleventy-fetch";
+
+const INDIEKIT_URL = process.env.SITE_URL || "https://example.com";
+const LASTFM_USERNAME = process.env.LASTFM_USERNAME || "";
+
+/**
+ * Fetch from Indiekit's public Last.fm API endpoint
+ */
+async function fetchFromIndiekit(endpoint) {
+  try {
+    const url = `${INDIEKIT_URL}/lastfmapi/api/${endpoint}`;
+    console.log(`[lastfmActivity] Fetching from Indiekit: ${url}`);
+    const data = await EleventyFetch(url, {
+      duration: "15m",
+      type: "json",
+    });
+    console.log(`[lastfmActivity] Indiekit ${endpoint} success`);
+    return data;
+  } catch (error) {
+    console.log(
+      `[lastfmActivity] Indiekit API unavailable for ${endpoint}: ${error.message}`
+    );
+    return null;
+  }
+}
+
+export default async function () {
+  try {
+    console.log("[lastfmActivity] Fetching Last.fm data...");
+
+    // Fetch all data from Indiekit API
+    const [nowPlaying, scrobbles, loved, stats] = await Promise.all([
+      fetchFromIndiekit("now-playing"),
+      fetchFromIndiekit("scrobbles"),
+      fetchFromIndiekit("loved"),
+      fetchFromIndiekit("stats"),
+    ]);
+
+    // Check if we got data
+    const hasData = nowPlaying || scrobbles?.scrobbles?.length || stats?.summary;
+
+    if (!hasData) {
+      console.log("[lastfmActivity] No data available from Indiekit");
+      return {
+        nowPlaying: null,
+        scrobbles: [],
+        loved: [],
+        stats: null,
+        username: LASTFM_USERNAME,
+        profileUrl: LASTFM_USERNAME ? `https://www.last.fm/user/${LASTFM_USERNAME}` : null,
+        source: "unavailable",
+      };
+    }
+
+    console.log("[lastfmActivity] Using Indiekit API data");
+
+    return {
+      nowPlaying: nowPlaying || null,
+      scrobbles: scrobbles?.scrobbles || [],
+      loved: loved?.loved || [],
+      stats: stats || null,
+      username: LASTFM_USERNAME,
+      profileUrl: LASTFM_USERNAME ? `https://www.last.fm/user/${LASTFM_USERNAME}` : null,
+      source: "indiekit",
+    };
+  } catch (error) {
+    console.error("[lastfmActivity] Error:", error.message);
+    return {
+      nowPlaying: null,
+      scrobbles: [],
+      loved: [],
+      stats: null,
+      username: LASTFM_USERNAME,
+      profileUrl: null,
+      source: "error",
+    };
+  }
+}
diff --git a/_data/mastodonFeed.js b/_data/mastodonFeed.js
new file mode 100644
index 0000000..0c79abf
--- /dev/null
+++ b/_data/mastodonFeed.js
@@ -0,0 +1,96 @@
+/**
+ * Mastodon Feed Data
+ * Fetches recent posts from Mastodon using the public API
+ */
+
+import EleventyFetch from "@11ty/eleventy-fetch";
+
+export default async function () {
+  const instance = process.env.MASTODON_INSTANCE?.replace("https://", "") || "";
+  const username = process.env.MASTODON_USER || "";
+
+  try {
+    // First, look up the account ID
+    const lookupUrl = `https://${instance}/api/v1/accounts/lookup?acct=${username}`;
+
+    const account = await EleventyFetch(lookupUrl, {
+      duration: "1h", // Cache account lookup for 1 hour
+      type: "json",
+      fetchOptions: {
+        headers: {
+          Accept: "application/json",
+        },
+      },
+    });
+
+    if (!account || !account.id) {
+      console.log("Mastodon account not found:", username);
+      return [];
+    }
+
+    // Fetch recent statuses (excluding replies and boosts for cleaner feed)
+    const statusesUrl = `https://${instance}/api/v1/accounts/${account.id}/statuses?limit=10&exclude_replies=true&exclude_reblogs=true`;
+
+    const statuses = await EleventyFetch(statusesUrl, {
+      duration: "15m", // Cache for 15 minutes
+      type: "json",
+      fetchOptions: {
+        headers: {
+          Accept: "application/json",
+        },
+      },
+    });
+
+    if (!statuses || !Array.isArray(statuses)) {
+      console.log("No Mastodon statuses found for:", username);
+      return [];
+    }
+
+    // Transform statuses into a simpler format
+    return statuses.map((status) => ({
+      id: status.id,
+      url: status.url,
+      text: stripHtml(status.content),
+      htmlContent: status.content,
+      createdAt: status.created_at,
+      author: {
+        username: status.account.username,
+        displayName: status.account.display_name || status.account.username,
+        avatar: status.account.avatar,
+        url: status.account.url,
+      },
+      favouritesCount: status.favourites_count || 0,
+      reblogsCount: status.reblogs_count || 0,
+      repliesCount: status.replies_count || 0,
+      // Media attachments
+      media: status.media_attachments
+        ? status.media_attachments.map((m) => ({
+            type: m.type,
+            url: m.url,
+            previewUrl: m.preview_url,
+            description: m.description,
+          }))
+        : [],
+    }));
+  } catch (error) {
+    console.error("Error fetching Mastodon feed:", error.message);
+    return [];
+  }
+}
+
+// Simple HTML stripper for plain text display
+function stripHtml(html) {
+  if (!html) return "";
+  return html
+    .replace(/<br\s*\/?>/gi, " ")
+    .replace(/<\/p>/gi, " ")
+    .replace(/<[^>]+>/g, "")
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&nbsp;/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
diff --git a/_data/newsActivity.js b/_data/newsActivity.js
new file mode 100644
index 0000000..47499b8
--- /dev/null
+++ b/_data/newsActivity.js
@@ -0,0 +1,99 @@
+/**
+ * News/RSS Activity Data
+ * Fetches from Indiekit's endpoint-rss public API
+ */
+
+import EleventyFetch from "@11ty/eleventy-fetch";
+
+const INDIEKIT_URL = process.env.SITE_URL || "https://example.com";
+
+/**
+ * Fetch from Indiekit's public RSS API endpoint
+ */
+async function fetchFromIndiekit(endpoint) {
+  try {
+    const url = `${INDIEKIT_URL}/rssapi/api/${endpoint}`;
+    console.log(`[newsActivity] Fetching from Indiekit: ${url}`);
+    const data = await EleventyFetch(url, {
+      duration: "15m",
+      type: "json",
+    });
+    console.log(`[newsActivity] Indiekit ${endpoint} success`);
+    return data;
+  } catch (error) {
+    console.log(
+      `[newsActivity] Indiekit API unavailable for ${endpoint}: ${error.message}`
+    );
+    return null;
+  }
+}
+
+export default async function () {
+  try {
+    console.log("[newsActivity] Fetching RSS feed data...");
+
+    // Fetch all data from Indiekit API
+    const [itemsRes, feedsRes, statusRes] = await Promise.all([
+      fetchFromIndiekit("items?limit=50"),
+      fetchFromIndiekit("feeds"),
+      fetchFromIndiekit("status"),
+    ]);
+
+    // Check if we got data
+    const hasData = itemsRes?.items?.length || feedsRes?.feeds?.length;
+
+    if (!hasData) {
+      console.log("[newsActivity] No data available from Indiekit");
+      return {
+        items: [],
+        feeds: [],
+        status: null,
+        lastUpdated: null,
+        source: "unavailable",
+      };
+    }
+
+    console.log(
+      `[newsActivity] Got ${itemsRes?.items?.length || 0} items from ${feedsRes?.feeds?.length || 0} feeds`
+    );
+
+    // Create a map of feed IDs to feed info for quick lookup
+    const feedMap = new Map();
+    for (const feed of feedsRes?.feeds || []) {
+      feedMap.set(feed.id, feed);
+    }
+
+    // Enhance items with additional feed info
+    const items = (itemsRes?.items || []).map((item) => {
+      const feed = feedMap.get(item.feedId);
+      return {
+        ...item,
+        feedInfo: feed
+          ? {
+              title: feed.title,
+              siteUrl: feed.siteUrl,
+              imageUrl: feed.imageUrl,
+            }
+          : null,
+      };
+    });
+
+    return {
+      items,
+      feeds: feedsRes?.feeds || [],
+      pagination: itemsRes?.pagination || null,
+      status: statusRes || null,
+      lastUpdated: statusRes?.lastSync || new Date().toISOString(),
+      source: "indiekit",
+    };
+  } catch (error) {
+    console.error("[newsActivity] Error:", error.message);
+    return {
+      items: [],
+      feeds: [],
+      status: null,
+      lastUpdated: null,
+      source: "error",
+    };
+  }
+}
diff --git a/_data/podrollStatus.js b/_data/podrollStatus.js
new file mode 100644
index 0000000..cf117e5
--- /dev/null
+++ b/_data/podrollStatus.js
@@ -0,0 +1,34 @@
+/**
+ * Podroll Status Data
+ * Checks if the podroll API backend is available at build time.
+ * Used for conditional navigation — the podroll page itself loads data client-side.
+ */
+
+import EleventyFetch from "@11ty/eleventy-fetch";
+
+const INDIEKIT_URL = process.env.SITE_URL || "https://example.com";
+
+export default async function () {
+  try {
+    const url = `${INDIEKIT_URL}/podrollapi/api/status`;
+    console.log(`[podrollStatus] Checking API: ${url}`);
+    const data = await EleventyFetch(url, {
+      duration: "15m",
+      type: "json",
+    });
+    console.log("[podrollStatus] API available");
+    return {
+      available: true,
+      source: "indiekit",
+      ...data,
+    };
+  } catch (error) {
+    console.log(
+      `[podrollStatus] API unavailable: ${error.message}`
+    );
+    return {
+      available: false,
+      source: "unavailable",
+    };
+  }
+}
diff --git a/_data/recentComments.js b/_data/recentComments.js
new file mode 100644
index 0000000..bdd1ede
--- /dev/null
+++ b/_data/recentComments.js
@@ -0,0 +1,24 @@
+/**
+ * Recent Comments Data
+ * Fetches the 5 most recent comments at build time for the sidebar widget.
+ */
+
+import EleventyFetch from "@11ty/eleventy-fetch";
+
+const INDIEKIT_URL = process.env.SITE_URL || "https://example.com";
+
+export default async function () {
+  try {
+    const url = `${INDIEKIT_URL}/comments/api/comments?limit=5`;
+    console.log(`[recentComments] Fetching: ${url}`);
+    const data = await EleventyFetch(url, {
+      duration: "15m",
+      type: "json",
+    });
+    console.log(`[recentComments] Got ${(data.children || []).length} comments`);
+    return data.children || [];
+  } catch (error) {
+    console.log(`[recentComments] Unavailable: ${error.message}`);
+    return [];
+  }
+}
diff --git a/_data/site.js b/_data/site.js
new file mode 100644
index 0000000..7d3d342
--- /dev/null
+++ b/_data/site.js
@@ -0,0 +1,139 @@
+/**
+ * Site configuration for Eleventy
+ *
+ * Configure via environment variables in Cloudron app settings.
+ * All values have sensible defaults for initial deployment.
+ */
+
+// Parse social links from env (format: "name|url|icon,name|url|icon")
+function parseSocialLinks(envVar) {
+  if (!envVar) return [];
+  return envVar.split(",").map((link) => {
+    const [name, url, icon] = link.split("|").map((s) => s.trim());
+    // Bluesky requires "me atproto" for verification
+    const rel = url.includes("bsky.app") ? "me atproto" : "me";
+    return { name, url, rel, icon: icon || name.toLowerCase() };
+  });
+}
+
+// Get fediverse handle for fediverse:creator meta tag
+// Prefers the site's own ActivityPub identity over external Mastodon account
+function getFediverseCreator() {
+  // Primary: site's own ActivityPub actor (canonical fediverse identity)
+  const apHandle = process.env.ACTIVITYPUB_HANDLE;
+  if (apHandle) {
+    const domain = (process.env.SITE_URL || "https://example.com").replace(/^https?:\/\//, "");
+    return `@${apHandle}@${domain}`;
+  }
+  // Fallback: external Mastodon account (syndication target)
+  const instance = process.env.MASTODON_INSTANCE?.replace("https://", "") || "";
+  const user = process.env.MASTODON_USER || "";
+  if (instance && user) {
+    return `@${user}@${instance}`;
+  }
+  return "";
+}
+
+// Auto-generate social links from feed config when SITE_SOCIAL is not set
+function buildSocialFromFeeds() {
+  const links = [];
+  const github = process.env.GITHUB_USERNAME;
+  if (github) {
+    links.push({ name: "GitHub", url: `https://github.com/${github}`, rel: "me", icon: "github" });
+  }
+  const bskyHandle = process.env.BLUESKY_HANDLE;
+  if (bskyHandle) {
+    links.push({ name: "Bluesky", url: `https://bsky.app/profile/${bskyHandle}`, rel: "me atproto", icon: "bluesky" });
+  }
+  const mastoInstance = process.env.MASTODON_INSTANCE?.replace("https://", "");
+  const mastoUser = process.env.MASTODON_USER;
+  if (mastoInstance && mastoUser) {
+    links.push({ name: "Mastodon", url: `https://${mastoInstance}/@${mastoUser}`, rel: "me", icon: "mastodon" });
+  }
+  const linkedin = process.env.LINKEDIN_USERNAME;
+  if (linkedin) {
+    links.push({ name: "LinkedIn", url: `https://linkedin.com/in/${linkedin}`, rel: "me", icon: "linkedin" });
+  }
+  const apHandle = process.env.ACTIVITYPUB_HANDLE;
+  if (apHandle) {
+    const siteUrl = process.env.SITE_URL || "https://example.com";
+    links.push({ name: "ActivityPub", url: `${siteUrl}/activitypub/users/${apHandle}`, rel: "me", icon: "activitypub" });
+  }
+  return links;
+}
+
+// site.url: no trailing slash — used as URL base for path concatenation ({{ site.url }}/path)
+// site.me / site.author.url: trailing slash — Mastodon rel="me" requires exact match
+const siteUrlBase = (process.env.SITE_URL || "https://example.com").replace(/\/$/, "");
+const siteUrlWithSlash = siteUrlBase + "/";
+
+export default {
+  // Basic site info
+  name: process.env.SITE_NAME || "My IndieWeb Blog",
+  url: siteUrlBase,
+  me: siteUrlWithSlash,
+  locale: process.env.SITE_LOCALE || "en",
+  description:
+    process.env.SITE_DESCRIPTION ||
+    "An IndieWeb-powered blog with Micropub support",
+
+  // Author info (shown in h-card, about page, etc.)
+  author: {
+    name: process.env.AUTHOR_NAME || "Blog Author",
+    url: siteUrlWithSlash,
+    avatar: process.env.AUTHOR_AVATAR || "/images/default-avatar.svg",
+    title: process.env.AUTHOR_TITLE || "",
+    bio: process.env.AUTHOR_BIO || "Welcome to my IndieWeb blog.",
+    location: process.env.AUTHOR_LOCATION || "",
+    locality: process.env.AUTHOR_LOCALITY || "",
+    region: process.env.AUTHOR_REGION || "",
+    country: process.env.AUTHOR_COUNTRY || "",
+    org: process.env.AUTHOR_ORG || "",
+    pronoun: process.env.AUTHOR_PRONOUN || "",
+    categories: process.env.AUTHOR_CATEGORIES?.split(",").map(s => s.trim()) || [],
+    keyUrl: process.env.AUTHOR_KEY_URL || "",
+    email: process.env.AUTHOR_EMAIL || "",
+  },
+
+  // Social links (for rel="me" and h-card)
+  // Set SITE_SOCIAL env var as: "GitHub|https://github.com/user|github,Mastodon|https://mastodon.social/@user|mastodon"
+  // Falls back to auto-generating from feed config (GITHUB_USERNAME, BLUESKY_HANDLE, etc.)
+  social: parseSocialLinks(process.env.SITE_SOCIAL).length > 0
+    ? parseSocialLinks(process.env.SITE_SOCIAL)
+    : buildSocialFromFeeds(),
+
+  // Feed integrations (usernames for data fetching)
+  feeds: {
+    github: process.env.GITHUB_USERNAME || "",
+    bluesky: process.env.BLUESKY_HANDLE || "",
+    mastodon: {
+      instance: process.env.MASTODON_INSTANCE?.replace("https://", "") || "",
+      username: process.env.MASTODON_USER || "",
+    },
+  },
+
+  // Webmentions configuration
+  webmentions: {
+    domain: process.env.SITE_URL?.replace("https://", "").replace("http://", "") || "example.com",
+  },
+
+  // Fediverse creator for meta tag (e.g., @rick@rmendes.net)
+  fediverseCreator: getFediverseCreator(),
+
+  // Support/monetization configuration (used in _textcasting JSON Feed extension)
+  support: {
+    url: process.env.SUPPORT_URL || null,
+    stripe: process.env.SUPPORT_STRIPE_URL || null,
+    lightning: process.env.SUPPORT_LIGHTNING_ADDRESS || null,
+    paymentPointer: process.env.SUPPORT_PAYMENT_POINTER || null,
+  },
+
+  // Markdown for Agents — serve clean Markdown to AI agents
+  // Set MARKDOWN_AGENTS_ENABLED to "false" to disable entirely
+  markdownAgents: {
+    enabled: (process.env.MARKDOWN_AGENTS_ENABLED || "true").toLowerCase() === "true",
+    aiTrain: process.env.MARKDOWN_AGENTS_AI_TRAIN || "yes",
+    search: process.env.MARKDOWN_AGENTS_SEARCH || "yes",
+    aiInput: process.env.MARKDOWN_AGENTS_AI_INPUT || "yes",
+  },
+};
diff --git a/_data/urlAliases.js b/_data/urlAliases.js
new file mode 100644
index 0000000..1478a1f
--- /dev/null
+++ b/_data/urlAliases.js
@@ -0,0 +1,155 @@
+/**
+ * URL Aliases for Webmention Recovery
+ *
+ * Maps new URLs to their old URLs so webmentions from previous
+ * URL structures can be displayed on current pages.
+ *
+ * Place redirect map files in the parent directory of this theme:
+ * - redirects.map (e.g., micro.blog: /YYYY/MM/DD/slug.html → /notes/...)
+ * - old-blog-redirects.map (e.g., Known/WP: /YYYY/slug → /content/...)
+ */
+
+import { readFileSync, existsSync } from "fs";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const siteUrl = process.env.SITE_URL || "https://example.com";
+
+/**
+ * Parse a redirect map file into URL mappings
+ * Format: old_path new_path;
+ */
+function parseRedirectMap(filePath) {
+  const aliases = {};
+
+  if (!existsSync(filePath)) {
+    console.log(`[urlAliases] File not found: ${filePath}`);
+    return aliases;
+  }
+
+  try {
+    const content = readFileSync(filePath, "utf-8");
+    const lines = content.split("\n").filter((line) => {
+      const trimmed = line.trim();
+      return trimmed && !trimmed.startsWith("#");
+    });
+
+    for (const line of lines) {
+      // Format: /old/path /new/path;
+      const match = line.match(/^(\S+)\s+(\S+);?$/);
+      if (match) {
+        const [, oldPath, newPath] = match;
+        // Normalize paths (remove trailing slashes, ensure leading slash)
+        const normalizedNew = newPath.replace(/;$/, "").replace(/\/$/, "");
+        const normalizedOld = oldPath.replace(/\/$/, "");
+
+        // Map new URL → array of old URLs
+        if (!aliases[normalizedNew]) {
+          aliases[normalizedNew] = [];
+        }
+        aliases[normalizedNew].push(normalizedOld);
+      }
+    }
+  } catch (error) {
+    console.error(`[urlAliases] Error parsing ${filePath}:`, error.message);
+  }
+
+  return aliases;
+}
+
+/**
+ * Merge multiple alias maps
+ */
+function mergeAliases(...maps) {
+  const merged = {};
+  for (const map of maps) {
+    for (const [newUrl, oldUrls] of Object.entries(map)) {
+      if (!merged[newUrl]) {
+        merged[newUrl] = [];
+      }
+      merged[newUrl].push(...oldUrls);
+    }
+  }
+  return merged;
+}
+
+// Parse redirect maps from /app/pkg (Docker) or parent directory (local dev)
+// In Docker: eleventy-site is at /app/pkg/eleventy-site, maps are at /app/pkg/
+// In local dev: maps might be at ../
+const pkgRoot = resolve(__dirname, "../..");
+
+// Helper to find first existing file
+function findFile(candidates) {
+  for (const path of candidates) {
+    if (existsSync(path)) {
+      console.log(`[urlAliases] Found: ${path}`);
+      return path;
+    }
+  }
+  console.log(`[urlAliases] No file found in: ${candidates.join(", ")}`);
+  return null;
+}
+
+// Try multiple possible locations for each map type
+const microblogMapPath = findFile([
+  resolve(pkgRoot, "redirects.map"),
+  resolve(__dirname, "../../redirects.map"),
+]);
+
+const knownMapPath = findFile([
+  resolve(pkgRoot, "old-blog-redirects.map"),
+  resolve(__dirname, "../../old-blog-redirects.map"),
+]);
+
+const microblogAliases = microblogMapPath ? parseRedirectMap(microblogMapPath) : {};
+const knownAliases = knownMapPath ? parseRedirectMap(knownMapPath) : {};
+
+const allAliases = mergeAliases(microblogAliases, knownAliases);
+
+// Log summary
+const totalMappings = Object.keys(allAliases).length;
+const totalOldUrls = Object.values(allAliases).reduce((sum, urls) => sum + urls.length, 0);
+console.log(`[urlAliases] Loaded ${totalMappings} URL mappings with ${totalOldUrls} old URLs`);
+
+export default {
+  // The merged alias map: new URL → [old URLs]
+  aliases: allAliases,
+
+  // Site URL for building absolute URLs
+  siteUrl,
+
+  /**
+   * Get all URLs (old and new) that should be checked for webmentions
+   * @param {string} url - Current page URL (relative)
+   * @returns {string[]} - Array of absolute URLs to check
+   */
+  getAllUrls(url) {
+    const normalizedUrl = url.replace(/\/$/, "");
+    const urls = [
+      `${siteUrl}${url}`,
+      `${siteUrl}${normalizedUrl}`,
+    ];
+
+    // Add old URL variations
+    const oldUrls = allAliases[normalizedUrl] || [];
+    for (const oldUrl of oldUrls) {
+      urls.push(`${siteUrl}${oldUrl}`);
+      // Also try with trailing slash
+      urls.push(`${siteUrl}${oldUrl}/`);
+    }
+
+    // Deduplicate
+    return [...new Set(urls)];
+  },
+
+  /**
+   * Get just the old URLs for a given new URL
+   * @param {string} url - Current page URL (relative)
+   * @returns {string[]} - Array of old relative URLs
+   */
+  getOldUrls(url) {
+    const normalizedUrl = url.replace(/\/$/, "");
+    return allAliases[normalizedUrl] || [];
+  },
+};
diff --git a/_data/youtubeChannel.js b/_data/youtubeChannel.js
new file mode 100644
index 0000000..7fbf461
--- /dev/null
+++ b/_data/youtubeChannel.js
@@ -0,0 +1,206 @@
+/**
+ * YouTube Channel Data
+ * Fetches from Indiekit's endpoint-youtube public API
+ * Supports single or multiple channels
+ */
+
+import EleventyFetch from "@11ty/eleventy-fetch";
+
+const INDIEKIT_URL = process.env.SITE_URL || "https://example.com";
+
+/**
+ * Fetch from Indiekit's public YouTube API endpoint
+ */
+async function fetchFromIndiekit(endpoint) {
+  try {
+    const url = `${INDIEKIT_URL}/youtubeapi/api/${endpoint}`;
+    console.log(`[youtubeChannel] Fetching from Indiekit: ${url}`);
+    const data = await EleventyFetch(url, {
+      duration: "5m",
+      type: "json",
+    });
+    console.log(`[youtubeChannel] Indiekit ${endpoint} success`);
+    return data;
+  } catch (error) {
+    console.log(
+      `[youtubeChannel] Indiekit API unavailable for ${endpoint}: ${error.message}`
+    );
+    return null;
+  }
+}
+
+/**
+ * Format large numbers with locale separators
+ */
+function formatNumber(num) {
+  if (!num) return "0";
+  return new Intl.NumberFormat().format(num);
+}
+
+/**
+ * Format view count with K/M suffix for compact display
+ */
+function formatViewCount(num) {
+  if (!num) return "0";
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
+  }
+  if (num >= 1000) {
+    return (num / 1000).toFixed(1).replace(/\\.0$/, "") + "K";
+  }
+  return num.toString();
+}
+
+/**
+ * Format relative time from ISO date string
+ */
+function formatRelativeTime(dateString) {
+  if (!dateString) return "";
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffMs = now - date;
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffDays === 0) return "Today";
+  if (diffDays === 1) return "Yesterday";
+  if (diffDays < 7) return `${diffDays} days ago`;
+  if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`;
+  if (diffDays < 365) return `${Math.floor(diffDays / 30)} months ago`;
+  return `${Math.floor(diffDays / 365)} years ago`;
+}
+
+/**
+ * Format channel data with computed fields
+ */
+function formatChannel(channel) {
+  if (!channel) return null;
+  return {
+    ...channel,
+    subscriberCountFormatted: formatNumber(channel.subscriberCount),
+    videoCountFormatted: formatNumber(channel.videoCount),
+    viewCountFormatted: formatNumber(channel.viewCount),
+    url: `https://www.youtube.com/channel/${channel.id}`,
+  };
+}
+
+/**
+ * Format video data with computed fields
+ */
+function formatVideo(video) {
+  return {
+    ...video,
+    viewCountFormatted: formatViewCount(video.viewCount),
+    relativeTime: formatRelativeTime(video.publishedAt),
+  };
+}
+
+export default async function () {
+  try {
+    console.log("[youtubeChannel] Fetching YouTube data...");
+
+    // Fetch all data from Indiekit API
+    const [channelData, videosData, liveData] = await Promise.all([
+      fetchFromIndiekit("channel"),
+      fetchFromIndiekit("videos"),
+      fetchFromIndiekit("live"),
+    ]);
+
+    // Check if we got data
+    const hasData =
+      channelData?.channel ||
+      channelData?.channels?.length ||
+      videosData?.videos?.length;
+
+    if (!hasData) {
+      console.log("[youtubeChannel] No data available from Indiekit");
+      return {
+        channel: null,
+        channels: [],
+        videos: [],
+        videosByChannel: {},
+        liveStatus: null,
+        liveStatuses: [],
+        isMultiChannel: false,
+        source: "unavailable",
+      };
+    }
+
+    console.log("[youtubeChannel] Using Indiekit API data");
+
+    // Determine if multi-channel mode
+    const isMultiChannel = !!(channelData?.channels && channelData.channels.length > 1);
+
+    // Format channels
+    let channels = [];
+    let channel = null;
+
+    if (isMultiChannel) {
+      channels = (channelData.channels || []).map(formatChannel).filter(Boolean);
+      channel = channels[0] || null;
+    } else {
+      channel = formatChannel(channelData?.channel);
+      channels = channel ? [channel] : [];
+    }
+
+    // Format videos
+    const videos = (videosData?.videos || []).map(formatVideo);
+
+    // Group videos by channel if multi-channel
+    let videosByChannel = {};
+    if (isMultiChannel && videosData?.videosByChannel) {
+      for (const [channelName, channelVideos] of Object.entries(videosData.videosByChannel)) {
+        videosByChannel[channelName] = (channelVideos || []).map(formatVideo);
+      }
+    } else if (channel) {
+      videosByChannel[channel.configName || channel.title] = videos;
+    }
+
+    // Format live status
+    let liveStatus = null;
+    let liveStatuses = [];
+
+    if (liveData) {
+      if (isMultiChannel && liveData.liveStatuses) {
+        liveStatuses = liveData.liveStatuses;
+        // Find first live or upcoming
+        const live = liveStatuses.find((s) => s.isLive);
+        const upcoming = liveStatuses.find((s) => s.isUpcoming && !s.isLive);
+        liveStatus = {
+          isLive: !!live,
+          isUpcoming: !live && !!upcoming,
+          stream: live?.stream || upcoming?.stream || null,
+        };
+      } else {
+        liveStatus = {
+          isLive: liveData.isLive || false,
+          isUpcoming: liveData.isUpcoming || false,
+          stream: liveData.stream || null,
+        };
+        liveStatuses = [{ ...liveStatus, channelConfigName: channel?.configName }];
+      }
+    }
+
+    return {
+      channel,
+      channels,
+      videos,
+      videosByChannel,
+      liveStatus,
+      liveStatuses,
+      isMultiChannel,
+      source: "indiekit",
+    };
+  } catch (error) {
+    console.error("[youtubeChannel] Error:", error.message);
+    return {
+      channel: null,
+      channels: [],
+      videos: [],
+      videosByChannel: {},
+      liveStatus: null,
+      liveStatuses: [],
+      isMultiChannel: false,
+      source: "error",
+    };
+  }
+}
diff --git a/_includes/components/blog-sidebar.njk b/_includes/components/blog-sidebar.njk
new file mode 100644
index 0000000..286f819
--- /dev/null
+++ b/_includes/components/blog-sidebar.njk
@@ -0,0 +1,273 @@
+{# Blog Sidebar - Shown on individual post pages #}
+{# Data-driven when homepageConfig.blogPostSidebar is configured, otherwise falls back to default widgets #}
+{# Each widget is wrapped in a collapsible container with localStorage persistence #}
+{% from "components/icon.njk" import icon %}
+
+{% if homepageConfig and homepageConfig.blogPostSidebar and homepageConfig.blogPostSidebar.length %}
+  {# === Data-driven mode: render configured widgets === #}
+  {% for widget in homepageConfig.blogPostSidebar %}
+
+    {# Resolve widget title #}
+    {% if widget.type == "search" %}{% set widgetTitle = "Search" %}
+    {% elif widget.type == "social-activity" %}{% set widgetTitle = "Social Activity" %}
+    {% elif widget.type == "github-repos" %}{% set widgetTitle = "GitHub" %}
+    {% elif widget.type == "funkwhale" %}{% set widgetTitle = "Listening" %}
+    {% elif widget.type == "recent-posts" %}{% set widgetTitle = "Recent Posts" %}
+    {% elif widget.type == "blogroll" %}{% set widgetTitle = "Blogroll" %}
+    {% elif widget.type == "feedland" %}{% set widgetTitle = "FeedLand" %}
+    {% elif widget.type == "categories" %}{% set widgetTitle = "Categories" %}
+    {% elif widget.type == "webmentions" %}{% set widgetTitle = "Webmentions" %}
+    {% elif widget.type == "recent-comments" %}{% set widgetTitle = "Recent Comments" %}
+    {% elif widget.type == "fediverse-follow" %}{% set widgetTitle = "Fediverse" %}
+    {% elif widget.type == "author-card" %}{% set widgetTitle = "Author" %}
+    {% elif widget.type == "author-card-compact" %}{% set widgetTitle = "Author" %}
+    {% elif widget.type == "subscribe" %}{% set widgetTitle = "Subscribe" %}
+    {% elif widget.type == "toc" %}{% set widgetTitle = "Table of Contents" %}
+    {% elif widget.type == "post-categories" %}{% set widgetTitle = "Categories" %}
+    {% elif widget.type == "share" %}{% set widgetTitle = "Share" %}
+    {% elif widget.type == "custom-html" %}{% set widgetTitle = (widget.config.title if widget.config and widget.config.title) or "Custom" %}
+    {% else %}{% set widgetTitle = widget.type %}
+    {% endif %}
+
+    {# Resolve widget icon and accent border #}
+    {% if widget.type == "social-activity" %}
+      {% set widgetIcon = "globe" %}{% set widgetIconClass = "w-5 h-5 text-[#0085ff]" %}{% set widgetBorder = "border-l-[3px] border-l-[#0085ff]" %}
+    {% elif widget.type == "github-repos" %}
+      {% set widgetIcon = "github" %}{% set widgetIconClass = "w-5 h-5 text-surface-800 dark:text-surface-200" %}{% set widgetBorder = "border-l-[3px] border-l-surface-400 dark:border-l-surface-500" %}
+    {% elif widget.type == "funkwhale" %}
+      {% set widgetIcon = "headphones" %}{% set widgetIconClass = "w-5 h-5 text-purple-500" %}{% set widgetBorder = "border-l-[3px] border-l-purple-400 dark:border-l-purple-500" %}
+    {% elif widget.type == "blogroll" %}
+      {% set widgetIcon = "book-open" %}{% set widgetIconClass = "w-5 h-5 text-amber-500" %}{% set widgetBorder = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
+    {% elif widget.type == "feedland" %}
+      {% set widgetIcon = "rss" %}{% set widgetIconClass = "w-5 h-5 text-amber-500" %}{% set widgetBorder = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
+    {% elif widget.type == "subscribe" %}
+      {% set widgetIcon = "rss" %}{% set widgetIconClass = "w-5 h-5 text-orange-500" %}{% set widgetBorder = "border-l-[3px] border-l-orange-400 dark:border-l-orange-500" %}
+    {% elif widget.type == "fediverse-follow" %}
+      {% set widgetIcon = "user-plus" %}{% set widgetIconClass = "w-5 h-5 text-[#a730b8]" %}{% set widgetBorder = "border-l-[3px] border-l-[#a730b8]" %}
+    {% elif widget.type == "author-card" or widget.type == "author-card-compact" %}
+      {% set widgetIcon = "user" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "recent-posts" %}
+      {% set widgetIcon = "list" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "categories" or widget.type == "post-categories" %}
+      {% set widgetIcon = "tag" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "recent-comments" %}
+      {% set widgetIcon = "chat" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "search" %}
+      {% set widgetIcon = "search" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "webmentions" %}
+      {% set widgetIcon = "share" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "toc" %}
+      {% set widgetIcon = "list" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "share" %}
+      {% set widgetIcon = "share" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% else %}
+      {% set widgetIcon = "" %}{% set widgetIconClass = "" %}{% set widgetBorder = "" %}
+    {% endif %}
+
+    {% set widgetKey = "post-widget-" + widget.type + "-" + loop.index0 %}
+    {% set defaultOpen = "true" if loop.index0 < 3 else "false" %}
+
+    {# Collapsible wrapper — Alpine.js handles toggle, localStorage persists state #}
+    <div
+      class="widget-collapsible mb-4"
+      x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : {{ defaultOpen }} }"
+    >
+      <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden {{ widgetBorder }}">
+        <button
+          class="widget-header w-full p-4"
+          @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)"
+          :aria-expanded="open ? 'true' : 'false'"
+        >
+          <h3 class="widget-title font-bold text-lg flex items-center gap-2">
+            {% if widgetIcon %}{{ icon(widgetIcon, widgetIconClass) }}{% endif %}
+            {{ widgetTitle }}
+          </h3>
+          <svg
+            class="widget-chevron"
+            :class="open && 'rotate-180'"
+            fill="none" stroke="currentColor" viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </button>
+
+        <div
+          x-show="open"
+          x-transition:enter="transition ease-out duration-150"
+          x-transition:enter-start="opacity-0"
+          x-transition:enter-end="opacity-100"
+          x-transition:leave="transition ease-in duration-100"
+          x-transition:leave-start="opacity-100"
+          x-transition:leave-end="opacity-0"
+          x-cloak
+        >
+          {# Widget content — inner .widget provides padding, inner title hidden by CSS #}
+          {% if widget.type == "author-card-compact" %}
+            {% include "components/widgets/author-card-compact.njk" %}
+          {% elif widget.type == "author-card" %}
+            {% include "components/widgets/author-card.njk" %}
+          {% elif widget.type == "toc" %}
+            {% include "components/widgets/toc.njk" %}
+          {% elif widget.type == "post-categories" %}
+            {% include "components/widgets/post-categories.njk" %}
+          {% elif widget.type == "recent-posts" %}
+            {% include "components/widgets/recent-posts-blog.njk" %}
+          {% elif widget.type == "webmentions" %}
+            {% include "components/widgets/webmentions.njk" %}
+          {% elif widget.type == "share" %}
+            {% include "components/widgets/share.njk" %}
+          {% elif widget.type == "subscribe" %}
+            {% include "components/widgets/subscribe.njk" %}
+          {% elif widget.type == "social-activity" %}
+            {% include "components/widgets/social-activity.njk" %}
+          {% elif widget.type == "github-repos" %}
+            {% include "components/widgets/github-repos.njk" %}
+          {% elif widget.type == "funkwhale" %}
+            {% include "components/widgets/funkwhale.njk" %}
+          {% elif widget.type == "blogroll" %}
+            {% include "components/widgets/blogroll.njk" %}
+          {% elif widget.type == "feedland" %}
+            {% include "components/widgets/feedland.njk" %}
+          {% elif widget.type == "categories" %}
+            {% include "components/widgets/categories.njk" %}
+          {% elif widget.type == "recent-comments" %}
+            {% include "components/widgets/recent-comments.njk" %}
+          {% elif widget.type == "search" %}
+            {% include "components/widgets/search.njk" %}
+          {% elif widget.type == "fediverse-follow" %}
+            {% include "components/widgets/fediverse-follow.njk" %}
+          {% elif widget.type == "custom-html" %}
+            {% set wConfig = widget.config or {} %}
+            <is-land on:visible>
+            <div class="widget">
+              {% if wConfig.content %}
+              <div class="prose dark:prose-invert prose-sm max-w-none">
+                {{ wConfig.content | safe }}
+              </div>
+              {% endif %}
+            </div>
+            </is-land>
+          {% else %}
+            <!-- Unknown widget type: {{ widget.type }} -->
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
+  {% endfor %}
+{% else %}
+  {# === Fallback: default blog post sidebar (backward compatibility) === #}
+  {# Each widget wrapped in collapsible container #}
+
+  {# Author Card Compact #}
+  {% set widgetKey = "post-fb-author-card-compact" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("user", "w-5 h-5 text-surface-500") }} Author</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/author-card-compact.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Table of Contents #}
+  {% set widgetKey = "post-fb-toc" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("list", "w-5 h-5 text-surface-500") }} Table of Contents</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/toc.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Post Categories #}
+  {% set widgetKey = "post-fb-post-categories" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("tag", "w-5 h-5 text-surface-500") }} Categories</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/post-categories.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Recent Posts #}
+  {% set widgetKey = "post-fb-recent-posts" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("list", "w-5 h-5 text-surface-500") }} Recent Posts</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/recent-posts-blog.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Webmentions #}
+  {% set widgetKey = "post-fb-webmentions" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("share", "w-5 h-5 text-surface-500") }} Webmentions</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/webmentions.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Share #}
+  {% set widgetKey = "post-fb-share" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("share", "w-5 h-5 text-surface-500") }} Share</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/share.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Subscribe #}
+  {% set widgetKey = "post-fb-subscribe" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden border-l-[3px] border-l-orange-400 dark:border-l-orange-500">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("rss", "w-5 h-5 text-orange-500") }} Subscribe</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/subscribe.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Recent Comments #}
+  {% set widgetKey = "post-fb-recent-comments" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("chat", "w-5 h-5 text-surface-500") }} Recent Comments</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/recent-comments.njk" %}
+      </div>
+    </div>
+  </div>
+{% endif %}
diff --git a/_includes/components/comments.njk b/_includes/components/comments.njk
new file mode 100644
index 0000000..ddf074c
--- /dev/null
+++ b/_includes/components/comments.njk
@@ -0,0 +1,109 @@
+{# Comments section — shown on post pages before webmentions #}
+{# Collapsed when empty, auto-opens when comments exist #}
+{% set absoluteUrl = site.url + page.url %}
+
+<is-land on:visible>
+<section class="comments mt-8 pt-8 border-t border-surface-200 dark:border-surface-700" id="comments"
+         x-data="commentsSection('{{ absoluteUrl }}')"
+         x-init="init()">
+
+  <details class="group" x-bind:open="comments.length > 0 || showForm">
+    <summary class="flex items-center justify-between cursor-pointer list-none [&::-webkit-details-marker]:hidden" @click="showForm = true">
+      <h2 class="text-lg font-semibold text-surface-700 dark:text-surface-300">
+        Comments
+        <span x-show="comments.length > 0" x-text="'(' + comments.length + ')'" class="text-sm font-normal" x-cloak></span>
+      </h2>
+      <svg class="w-4 h-4 text-surface-400 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+      </svg>
+    </summary>
+
+    <div class="mt-4">
+      {# Status messages #}
+      <div x-show="statusMessage" x-cloak
+           x-bind:class="statusType === 'error' ? 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-400' :
+                          statusType === 'success' ? 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400' :
+                          'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400'"
+           class="p-3 rounded-lg mb-4 text-sm">
+        <span x-text="statusMessage"></span>
+      </div>
+
+      {# Sign-in form (shown when not authenticated) #}
+      <div x-show="!user" x-cloak>
+        <p class="text-sm text-surface-600 dark:text-surface-400 mb-3">Sign in with your website to comment:</p>
+        <form x-on:submit.prevent="startAuth()" class="flex gap-2 items-end flex-wrap">
+          <div class="flex-1 min-w-[200px]">
+            <label for="comment-me" class="block text-sm font-medium mb-1">Your website</label>
+            <input id="comment-me" type="url" x-model="meUrl"
+                   placeholder="https://yourdomain.com" required
+                   class="w-full px-3 py-2 border rounded-lg dark:bg-surface-800 dark:border-surface-600">
+          </div>
+          <button type="submit" class="button" x-bind:disabled="authLoading">
+            <span x-show="!authLoading">Sign In</span>
+            <span x-show="authLoading" x-cloak>Signing in...</span>
+          </button>
+        </form>
+      </div>
+
+      {# Comment form (shown when authenticated) #}
+      <div x-show="user" x-cloak>
+        <div class="flex items-center gap-2 mb-3 text-sm text-surface-600 dark:text-surface-400">
+          <span>Signed in as</span>
+          <a x-bind:href="user?.url" class="font-medium hover:underline" x-text="user?.name || user?.url" target="_blank" rel="noopener"></a>
+          <button x-on:click="signOut()" class="text-xs underline hover:no-underline">Sign out</button>
+        </div>
+
+        <form x-on:submit.prevent="submitComment()">
+          <textarea x-model="commentText" rows="4" required
+                    placeholder="Share your thoughts... (supports **bold**, *italic*, and [links](url))"
+                    class="w-full px-3 py-2 border rounded-lg mb-2 dark:bg-surface-800 dark:border-surface-600"
+                    x-bind:maxlength="maxLength"></textarea>
+          <div class="flex items-center justify-between">
+            <span class="text-xs text-surface-500" x-text="commentText.length + '/' + maxLength"></span>
+            <button type="submit" class="button" x-bind:disabled="submitting">
+              <span x-show="!submitting">Post Comment</span>
+              <span x-show="submitting" x-cloak>Posting...</span>
+            </button>
+          </div>
+        </form>
+      </div>
+
+      {# Comment list #}
+      <div class="mt-6 space-y-4">
+        <template x-if="loading">
+          <p class="text-sm text-surface-500">Loading comments...</p>
+        </template>
+
+        <template x-for="comment in comments" x-bind:key="comment.published">
+          <div class="p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
+            <div class="flex items-start gap-3">
+              <template x-if="comment.author?.photo">
+                <img x-bind:src="comment.author.photo" x-bind:alt="comment.author.name"
+                     class="w-8 h-8 rounded-full flex-shrink-0" loading="lazy">
+              </template>
+              <template x-if="!comment.author?.photo">
+                <div class="w-8 h-8 rounded-full bg-surface-200 dark:bg-surface-700 flex-shrink-0 flex items-center justify-center text-xs font-bold"
+                     x-text="(comment.author?.name || '?')[0].toUpperCase()">
+                </div>
+              </template>
+              <div class="flex-1">
+                <div class="flex items-center gap-2">
+                  <a x-bind:href="comment.author?.url" class="font-medium text-sm hover:underline" target="_blank" rel="noopener"
+                     x-text="comment.author?.name || comment.author?.url"></a>
+                  <time class="text-xs text-surface-500" x-bind:datetime="comment.published"
+                        x-text="new Date(comment.published).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })"></time>
+                </div>
+                <div class="mt-1 text-sm prose dark:prose-invert" x-html="comment.content?.html || comment.content?.text"></div>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <template x-if="!loading && comments.length === 0">
+          <p class="text-sm text-surface-500">No comments yet. Be the first to share your thoughts!</p>
+        </template>
+      </div>
+    </div>
+  </details>
+</section>
+</is-land>
diff --git a/_includes/components/cv-builder.njk b/_includes/components/cv-builder.njk
new file mode 100644
index 0000000..3699f73
--- /dev/null
+++ b/_includes/components/cv-builder.njk
@@ -0,0 +1,169 @@
+{#
+  CV Page Builder - renders configured layout, sections, and sidebar
+  from cvPageConfig (written by indiekit-endpoint-cv plugin)
+#}
+
+{% set layout = cvPageConfig.layout or "single-column" %}
+{% set hasSidebar = cvPageConfig.sidebar and cvPageConfig.sidebar.length %}
+
+{# CV identity — check cvPageConfig.identity first, fall back to site.author #}
+{% set cvId = cvPageConfig.identity if (cvPageConfig and cvPageConfig.identity) else {} %}
+{% set authorName = cvId.name or site.author.name %}
+{% set authorAvatar = cvId.avatar or site.author.avatar %}
+{% set authorTitle = cvId.title or site.author.title %}
+{% set authorBio = cvId.bio or site.author.bio %}
+{% set authorDescription = cvId.description or '' %}
+{% set socialLinks = cvId.social if (cvId.social and cvId.social.length) else site.social %}
+{% set cvLocality = cvId.locality or site.author.locality %}
+{% set cvCountry = cvId.country or site.author.country %}
+{% set cvOrg = cvId.org or site.author.org %}
+{% set cvUrl = cvId.url or '' %}
+{% set cvEmail = cvId.email or site.author.email %}
+{% set cvKeyUrl = cvId.keyUrl or site.author.keyUrl %}
+
+{# Hero — rendered at top when enabled (default: true) #}
+{% if cvPageConfig.hero.enabled != false %}
+<section class="mb-8 sm:mb-12">
+  <div class="flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
+    <img
+      src="{{ authorAvatar }}"
+      alt="{{ authorName }}"
+      class="w-24 h-24 sm:w-32 sm:h-32 rounded-full object-cover shadow-lg flex-shrink-0"
+      loading="eager"
+      eleventy:ignore
+    >
+    <div class="flex-1 min-w-0">
+      <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
+        {{ authorName }}
+      </h1>
+      {% if authorTitle %}
+      <p class="text-lg sm:text-xl text-accent-600 dark:text-accent-400 mb-3 sm:mb-4">
+        {{ authorTitle }}
+      </p>
+      {% endif %}
+      {% if authorBio %}
+      <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4">
+        {{ authorBio }}
+      </p>
+      {% endif %}
+      {% if authorDescription %}
+      <details class="mb-4 sm:mb-6">
+        <summary class="text-sm font-medium text-accent-600 dark:text-accent-400 cursor-pointer hover:underline list-none">
+          More about me &darr;
+        </summary>
+        <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mt-3">
+          {{ authorDescription }}
+        </p>
+      </details>
+      {% endif %}
+      {% from "components/social-icon.njk" import socialIcon, socialIconColorClass %}
+      {% if cvPageConfig.hero.showSocial != false and socialLinks %}
+      <div class="flex flex-wrap gap-3">
+        {% for link in socialLinks %}
+        <a
+          href="{{ link.url }}"
+          rel="{{ link.rel }} noopener"
+          class="inline-flex items-center gap-2 px-3 py-2 text-sm text-surface-700 dark:text-surface-300 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors"
+          target="_blank"
+        >
+          <span class="{{ socialIconColorClass(link.icon) }}">{{ socialIcon(link.icon, "w-5 h-5") }}</span>
+          <span class="text-sm font-medium">{{ link.name }}</span>
+        </a>
+        {% endfor %}
+      </div>
+      {% endif %}
+      {# Contact details — location, organization, website, email, PGP #}
+      {% if cvLocality or cvCountry or cvOrg or cvUrl or cvEmail or cvKeyUrl %}
+      <div class="flex flex-wrap gap-x-4 gap-y-1 mt-4 text-sm text-surface-500 dark:text-surface-400">
+        {% if cvLocality or cvCountry %}
+        <span>{% if cvLocality %}{{ cvLocality }}{% endif %}{% if cvLocality and cvCountry %}, {% endif %}{% if cvCountry %}{{ cvCountry }}{% endif %}</span>
+        {% endif %}
+        {% if cvOrg %}
+        <span>{{ cvOrg }}</span>
+        {% endif %}
+        {% if cvUrl %}
+        <span><a href="{{ cvUrl }}" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">{{ cvUrl | replace("https://", "") | replace("http://", "") }}</a></span>
+        {% endif %}
+        {% if cvEmail %}
+        <span><a href="mailto:{{ cvEmail }}" class="text-accent-600 dark:text-accent-400 hover:underline">{{ cvEmail }}</a></span>
+        {% endif %}
+        {% if cvKeyUrl %}
+        <span><a href="{{ cvKeyUrl }}" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">PGP Key</a></span>
+        {% endif %}
+      </div>
+      {% endif %}
+    </div>
+  </div>
+</section>
+{% endif %}
+
+{# Layout wrapper #}
+{% if layout == "single-column" %}
+
+  {# Single column — no sidebar, full width sections #}
+  <div class="cv-sections">
+    {% for section in cvPageConfig.sections %}
+      {% include "components/homepage-section.njk" %}
+    {% endfor %}
+  </div>
+
+{% elif layout == "two-column" and hasSidebar %}
+
+  {# Two column — sections + sidebar #}
+  <div class="layout-with-sidebar">
+    <div class="main-content">
+      <div class="cv-sections">
+        {% for section in cvPageConfig.sections %}
+          {% include "components/homepage-section.njk" %}
+        {% endfor %}
+      </div>
+    </div>
+    <aside class="sidebar" data-pagefind-ignore>
+      {% include "components/cv-sidebar.njk" %}
+    </aside>
+  </div>
+
+{% elif layout == "full-width-hero" %}
+
+  {# Full width hero (already rendered above), then two-column below #}
+  {% if hasSidebar %}
+  <div class="layout-with-sidebar">
+    <div class="main-content">
+      <div class="cv-sections">
+        {% for section in cvPageConfig.sections %}
+          {% include "components/homepage-section.njk" %}
+        {% endfor %}
+      </div>
+    </div>
+    <aside class="sidebar" data-pagefind-ignore>
+      {% include "components/cv-sidebar.njk" %}
+    </aside>
+  </div>
+  {% else %}
+  <div class="cv-sections">
+    {% for section in cvPageConfig.sections %}
+      {% include "components/homepage-section.njk" %}
+    {% endfor %}
+  </div>
+  {% endif %}
+
+{% else %}
+
+  {# Fallback — two-column without sidebar, or unknown layout #}
+  <div class="cv-sections">
+    {% for section in cvPageConfig.sections %}
+      {% include "components/homepage-section.njk" %}
+    {% endfor %}
+  </div>
+
+{% endif %}
+
+{# Last Updated #}
+{% if cv.lastUpdated %}
+<p class="text-sm text-surface-500 text-center mt-8">
+  Last updated: <time datetime="{{ cv.lastUpdated }}">{{ cv.lastUpdated | date("PPP") }}</time>
+</p>
+{% endif %}
+
+{# Footer — rendered after the main layout, full width #}
+{% include "components/cv-footer.njk" %}
diff --git a/_includes/components/cv-footer.njk b/_includes/components/cv-footer.njk
new file mode 100644
index 0000000..c86957e
--- /dev/null
+++ b/_includes/components/cv-footer.njk
@@ -0,0 +1,26 @@
+{# CV Page Builder Footer — renders footer items in a responsive 3-column grid #}
+{% if cvPageConfig.footer and cvPageConfig.footer.length %}
+<footer class="cv-footer mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-surface-200 dark:border-surface-700">
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+    {% for section in cvPageConfig.footer %}
+      {% if section.type == "custom-html" %}
+        {% set sectionConfig = section.config or {} %}
+        <div>
+          {% if sectionConfig.title %}
+          <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-3">{{ sectionConfig.title }}</h3>
+          {% endif %}
+          {% if sectionConfig.content %}
+          <div class="prose dark:prose-invert prose-sm max-w-none">
+            {{ sectionConfig.content | safe }}
+          </div>
+          {% endif %}
+        </div>
+      {% else %}
+        <div>
+          {% include "components/homepage-section.njk" %}
+        </div>
+      {% endif %}
+    {% endfor %}
+  </div>
+</footer>
+{% endif %}
diff --git a/_includes/components/cv-sidebar.njk b/_includes/components/cv-sidebar.njk
new file mode 100644
index 0000000..d27f903
--- /dev/null
+++ b/_includes/components/cv-sidebar.njk
@@ -0,0 +1,43 @@
+{# CV Page Builder Sidebar — renders widgets from cvPageConfig.sidebar #}
+{% if cvPageConfig.sidebar and cvPageConfig.sidebar.length %}
+  {% for widget in cvPageConfig.sidebar %}
+    {% if widget.type == "author-card" %}
+      {% include "components/widgets/author-card.njk" %}
+    {% elif widget.type == "social-activity" %}
+      {% include "components/widgets/social-activity.njk" %}
+    {% elif widget.type == "github-repos" %}
+      {% include "components/widgets/github-repos.njk" %}
+    {% elif widget.type == "funkwhale" %}
+      {% include "components/widgets/funkwhale.njk" %}
+    {% elif widget.type == "recent-posts" %}
+      {% include "components/widgets/recent-posts.njk" %}
+    {% elif widget.type == "blogroll" %}
+      {% include "components/widgets/blogroll.njk" %}
+    {% elif widget.type == "feedland" %}
+      {% include "components/widgets/feedland.njk" %}
+    {% elif widget.type == "categories" %}
+      {% include "components/widgets/categories.njk" %}
+    {% elif widget.type == "search" %}
+      {% include "components/widgets/search.njk" %}
+    {% elif widget.type == "webmentions" %}
+      {% include "components/widgets/webmentions.njk" %}
+    {% elif widget.type == "custom-html" %}
+      {# Custom content widget #}
+      {% set wConfig = widget.config or {} %}
+      <is-land on:visible>
+      <div class="widget">
+        {% if wConfig.title %}
+        <h3 class="widget-title">{{ wConfig.title }}</h3>
+        {% endif %}
+        {% if wConfig.content %}
+        <div class="prose dark:prose-invert prose-sm max-w-none">
+          {{ wConfig.content | safe }}
+        </div>
+        {% endif %}
+      </div>
+      </is-land>
+    {% else %}
+      <!-- Unknown widget type: {{ widget.type }} -->
+    {% endif %}
+  {% endfor %}
+{% endif %}
diff --git a/_includes/components/empty-collection.njk b/_includes/components/empty-collection.njk
new file mode 100644
index 0000000..8198853
--- /dev/null
+++ b/_includes/components/empty-collection.njk
@@ -0,0 +1,27 @@
+{# Empty collection placeholder — encourages creating content #}
+{# Usage: {% include "components/empty-collection.njk" %} with postType set before include #}
+{% set typeInfo = null %}
+{% for pt in enabledPostTypes %}
+  {% if pt.type == postType %}{% set typeInfo = pt %}{% endif %}
+{% endfor %}
+
+<div class="text-center py-12 px-4">
+  <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-surface-100 dark:bg-surface-800 mb-4">
+    <svg class="w-8 h-8 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
+    </svg>
+  </div>
+  <h2 class="text-lg font-semibold text-surface-700 dark:text-surface-300 mb-2">No {{ title | lower }} yet</h2>
+  <p class="text-surface-500 dark:text-surface-400 mb-6 max-w-md mx-auto">
+    This is where your {{ title | lower }} will appear once you start creating content.
+  </p>
+  {% if typeInfo %}
+  <a href="{{ typeInfo.createUrl }}"
+     class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-accent-600 text-white hover:bg-accent-700 transition-colors text-sm font-medium">
+    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round">
+      <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+    </svg>
+    Create your first {{ postType }}
+  </a>
+  {% endif %}
+</div>
diff --git a/_includes/components/fediverse-modal.njk b/_includes/components/fediverse-modal.njk
new file mode 100644
index 0000000..30699e0
--- /dev/null
+++ b/_includes/components/fediverse-modal.njk
@@ -0,0 +1,81 @@
+{# Shared fediverse instance picker modal #}
+{# Used by post.njk (interact), fediverse-follow.njk (follow), share.njk (share) #}
+{# Requires: modalTitle, modalDescription variables set before include #}
+<template x-if="showModal">
+  <div class="fixed inset-0 z-50 flex items-center justify-center p-4" @keydown.escape.window="showModal = false">
+    {# Backdrop #}
+    <div class="fixed inset-0 bg-black/40"
+         x-transition:enter="transition ease-out duration-200"
+         x-transition:enter-start="opacity-0"
+         x-transition:enter-end="opacity-100"
+         x-transition:leave="transition ease-in duration-150"
+         x-transition:leave-start="opacity-100"
+         x-transition:leave-end="opacity-0"
+         @click="showModal = false"></div>
+    {# Panel #}
+    <div class="relative bg-surface-50 dark:bg-surface-800 rounded-xl shadow-xl w-full max-w-sm p-6"
+         x-transition:enter="transition ease-out duration-200"
+         x-transition:enter-start="opacity-0 scale-95"
+         x-transition:enter-end="opacity-100 scale-100"
+         x-transition:leave="transition ease-in duration-150"
+         x-transition:leave-start="opacity-100 scale-100"
+         x-transition:leave-end="opacity-0 scale-95"
+         @click.stop>
+      <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-1">{{ modalTitle }}</h3>
+      <p class="text-sm text-surface-500 dark:text-surface-400 mb-4">{{ modalDescription }}</p>
+
+      {# Saved domains list #}
+      <template x-if="savedDomains.length > 0 && !showInput">
+        <div>
+          <div class="flex flex-col gap-2 mb-3">
+            <template x-for="item in savedDomains" :key="item.domain">
+              <div class="flex items-center gap-2 rounded-lg bg-surface-50 dark:bg-surface-700 hover:bg-surface-100 dark:hover:bg-surface-600 transition-colors">
+                <button class="flex-1 px-3 py-2.5 text-left text-sm font-medium text-surface-900 dark:text-surface-100 cursor-pointer"
+                        @click="useSaved(item.domain)"
+                        x-text="item.domain"></button>
+                <button class="px-2 py-2.5 text-surface-400 hover:text-red-500 transition-colors cursor-pointer"
+                        @click="deleteSaved(item.domain)"
+                        title="Remove">
+                  <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                </button>
+              </div>
+            </template>
+          </div>
+          <button class="w-full text-sm text-[#a730b8] hover:text-[#a730b8]/80 cursor-pointer font-medium"
+                  @click="showAddNew()">Use a different instance</button>
+          <div class="flex mt-3">
+            <button @click="showModal = false"
+                    class="w-full px-4 py-2 text-sm font-medium text-surface-600 dark:text-surface-300 bg-surface-100 dark:bg-surface-700 hover:bg-surface-200 dark:hover:bg-surface-600 rounded-lg transition-colors">
+              Cancel
+            </button>
+          </div>
+        </div>
+      </template>
+
+      {# New domain input #}
+      <template x-if="savedDomains.length === 0 || showInput">
+        <div>
+          <input x-ref="instanceInput"
+                 x-model="instance"
+                 @keydown.enter.prevent="confirm()"
+                 type="text"
+                 placeholder="mastodon.social"
+                 class="w-full px-3 py-2 border border-surface-300 dark:border-surface-600 rounded-lg bg-surface-50 dark:bg-surface-700 text-surface-900 dark:text-surface-100 placeholder-surface-400 focus:outline-none focus:ring-2 focus:ring-[#a730b8] focus:border-transparent text-sm">
+          <template x-if="error">
+            <p class="text-xs text-red-500 mt-1" x-text="error"></p>
+          </template>
+          <div class="flex gap-3 mt-4">
+            <button @click="showInput ? (showInput = false) : (showModal = false)"
+                    class="flex-1 px-4 py-2 text-sm font-medium text-surface-600 dark:text-surface-300 bg-surface-100 dark:bg-surface-700 hover:bg-surface-200 dark:hover:bg-surface-600 rounded-lg transition-colors"
+                    x-text="showInput && savedDomains.length > 0 ? 'Back' : 'Cancel'">
+            </button>
+            <button @click="confirm()"
+                    class="flex-1 px-4 py-2 text-sm font-medium text-white bg-[#a730b8] hover:bg-[#a730b8]/80 rounded-lg transition-colors">
+              Go
+            </button>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/_includes/components/funkwhale-stats-content.njk b/_includes/components/funkwhale-stats-content.njk
new file mode 100644
index 0000000..b7123a2
--- /dev/null
+++ b/_includes/components/funkwhale-stats-content.njk
@@ -0,0 +1,66 @@
+{# Stats Summary Cards #}
+{% if summary %}
+<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8">
+  <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center">
+    <span class="text-2xl font-bold text-purple-600 dark:text-purple-400 block">{{ summary.totalPlays or 0 }}</span>
+    <span class="text-xs text-surface-500 uppercase tracking-wide">Plays</span>
+  </div>
+  <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center">
+    <span class="text-2xl font-bold text-purple-600 dark:text-purple-400 block">{{ summary.uniqueTracks or 0 }}</span>
+    <span class="text-xs text-surface-500 uppercase tracking-wide">Tracks</span>
+  </div>
+  <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center">
+    <span class="text-2xl font-bold text-purple-600 dark:text-purple-400 block">{{ summary.uniqueArtists or 0 }}</span>
+    <span class="text-xs text-surface-500 uppercase tracking-wide">Artists</span>
+  </div>
+  <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center">
+    <span class="text-2xl font-bold text-purple-600 dark:text-purple-400 block">{{ summary.totalDurationFormatted or '0m' }}</span>
+    <span class="text-xs text-surface-500 uppercase tracking-wide">Listened</span>
+  </div>
+</div>
+{% endif %}
+
+{# Top Artists #}
+{% if topArtists and topArtists.length %}
+<div class="mb-8">
+  <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-4">Top Artists</h3>
+  <div class="space-y-2">
+    {% for artist in topArtists | head(5) %}
+    <div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+      <span class="w-6 h-6 flex items-center justify-center text-sm font-bold text-surface-400 bg-surface-100 dark:bg-surface-700 rounded-full">{{ loop.index }}</span>
+      <span class="flex-1 font-medium text-surface-900 dark:text-surface-100">{{ artist.name }}</span>
+      <span class="text-sm text-surface-500">{{ artist.playCount }} plays</span>
+    </div>
+    {% endfor %}
+  </div>
+</div>
+{% endif %}
+
+{# Top Albums #}
+{% if topAlbums and topAlbums.length %}
+<div>
+  <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-4">Top Albums</h3>
+  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 sm:gap-4">
+    {% for album in topAlbums | head(5) %}
+    <div class="text-center">
+      {% if album.coverUrl %}
+      <img src="{{ album.coverUrl }}" alt="" class="w-full aspect-square object-cover rounded-lg mb-2" loading="lazy" eleventy:ignore>
+      {% else %}
+      <div class="w-full aspect-square bg-surface-200 dark:bg-surface-700 rounded-lg mb-2 flex items-center justify-center">
+        <svg class="w-8 h-8 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2z"/>
+        </svg>
+      </div>
+      {% endif %}
+      <p class="text-sm font-medium text-surface-900 dark:text-surface-100 truncate">{{ album.title }}</p>
+      <p class="text-xs text-surface-500 truncate">{{ album.artist }}</p>
+      <p class="text-xs text-surface-400">{{ album.playCount }} plays</p>
+    </div>
+    {% endfor %}
+  </div>
+</div>
+{% endif %}
+
+{% if not summary and not topArtists and not topAlbums %}
+<p class="text-surface-600 dark:text-surface-400">No statistics available for this period.</p>
+{% endif %}
diff --git a/_includes/components/h-card.njk b/_includes/components/h-card.njk
new file mode 100644
index 0000000..8e1dc83
--- /dev/null
+++ b/_includes/components/h-card.njk
@@ -0,0 +1,111 @@
+{# h-card - IndieWeb identity microformat #}
+{# See: https://microformats.org/wiki/h-card #}
+{#
+   This is the canonical h-card component for the site.
+   Include in sidebar widgets, author cards, etc.
+#}
+{% set id = homepageConfig.identity if (homepageConfig and homepageConfig.identity) else {} %}
+{% set authorName = id.name or site.author.name %}
+{% set authorAvatar = id.avatar or site.author.avatar %}
+{% set authorTitle = id.title or site.author.title %}
+{% set authorBio = id.bio or site.author.bio %}
+{% set authorUrl = id.url or site.author.url %}
+{% set authorPronoun = id.pronoun or site.author.pronoun %}
+{% set authorLocality = id.locality or site.author.locality %}
+{% set authorCountry = id.country or site.author.country %}
+{% set authorLocation = site.author.location %}
+{% set authorOrg = id.org or site.author.org %}
+{% set authorEmail = id.email or site.author.email %}
+{% set authorKeyUrl = id.keyUrl or site.author.keyUrl %}
+{% set authorCategories = id.categories if (id.categories and id.categories.length) else site.author.categories %}
+{% set socialLinks = id.social if (id.social and id.social.length) else site.social %}
+
+<div class="h-card p-author" itemscope itemtype="http://schema.org/Person">
+  {# Hidden u-photo for reliable microformat parsing (some parsers struggle with img inside links) #}
+  <data class="u-photo hidden" value="{{ authorAvatar }}"></data>
+
+  <div class="flex items-center gap-4">
+    <a href="{{ authorUrl }}" class="u-url u-uid" rel="me" itemprop="url">
+      <img
+        src="{{ authorAvatar }}"
+        alt="{{ authorName }}"
+        class="w-16 h-16 rounded-full object-cover"
+        loading="lazy"
+        itemprop="image"
+      >
+    </a>
+    <div>
+      <a href="{{ authorUrl }}" class="u-url p-name font-bold text-lg block hover:text-accent-600 dark:hover:text-accent-400" itemprop="name">
+        {{ authorName }}
+      </a>
+      {% if authorPronoun %}
+      <span class="p-pronoun text-xs text-surface-500">({{ authorPronoun }})</span>
+      {% endif %}
+      <p class="p-job-title text-sm text-surface-600 dark:text-surface-400" itemprop="jobTitle">{{ authorTitle }}</p>
+      {# Structured address #}
+      <p class="p-adr h-adr text-sm text-surface-500 dark:text-surface-500" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
+        {% if authorLocality %}
+        <span class="p-locality" itemprop="addressLocality">{{ authorLocality }}</span>{% if authorCountry %}, {% endif %}
+        {% endif %}
+        {% if authorCountry %}
+        <span class="p-country-name" itemprop="addressCountry">{{ authorCountry }}</span>
+        {% endif %}
+        {# Fallback to legacy location field #}
+        {% if not authorLocality and authorLocation %}
+        <span class="p-locality">{{ authorLocation }}</span>
+        {% endif %}
+      </p>
+    </div>
+  </div>
+
+  {# Bio #}
+  <p class="p-note mt-3 text-sm text-surface-700 dark:text-surface-300" itemprop="description">{{ authorBio }}</p>
+
+  {# Organization #}
+  {% if authorOrg %}
+  <p class="mt-2 text-sm text-surface-600 dark:text-surface-400">
+    <span class="p-org" itemprop="worksFor">{{ authorOrg }}</span>
+  </p>
+  {% endif %}
+
+  {# Email and PGP Key #}
+  <div class="mt-2 flex flex-wrap gap-3 text-sm">
+    {% if authorEmail %}
+    {# Display text obfuscated to deter spam harvesters; href kept plain for browser compatibility #}
+    <a href="mailto:{{ authorEmail }}" class="u-email text-accent-600 dark:text-accent-400 hover:underline" itemprop="email">
+      ✉️ {{ authorEmail | obfuscateEmail | safe }}
+    </a>
+    {% endif %}
+    {% if authorKeyUrl %}
+    <a href="{{ authorKeyUrl }}" class="u-key text-surface-500 dark:text-surface-400 hover:underline" rel="pgpkey">
+      🔐 PGP Key
+    </a>
+    {% endif %}
+  </div>
+
+  {# Categories / Skills #}
+  {% if authorCategories and authorCategories.length %}
+  <div class="mt-3 flex flex-wrap gap-1">
+    {% for category in authorCategories %}
+    <span class="p-category text-xs px-2 py-0.5 bg-surface-100 dark:bg-surface-800 rounded">{{ category }}</span>
+    {% endfor %}
+  </div>
+  {% endif %}
+
+  {# Social links with rel="me" - critical for IndieWeb identity verification #}
+  {% from "components/social-icon.njk" import socialIcon %}
+  {% if socialLinks and socialLinks.length %}
+  <nav class="flex flex-wrap gap-3 mt-3" aria-label="Social links">
+    {% for link in socialLinks %}
+    <a
+      href="{{ link.url }}"
+      rel="{{ link.rel }} noopener"
+      class="u-url text-surface-500 hover:text-accent-600 dark:hover:text-accent-400 transition-colors"
+      aria-label="{{ link.name }}"
+      target="_blank">
+      {{ socialIcon(link.icon, "w-5 h-5") }}
+    </a>
+    {% endfor %}
+  </nav>
+  {% endif %}
+</div>
diff --git a/_includes/components/homepage-builder.njk b/_includes/components/homepage-builder.njk
new file mode 100644
index 0000000..b0ba263
--- /dev/null
+++ b/_includes/components/homepage-builder.njk
@@ -0,0 +1,86 @@
+{#
+  Homepage Builder - renders configured layout, sections, and sidebar
+  from homepageConfig (written by indiekit-endpoint-homepage plugin)
+#}
+
+{% set layout = homepageConfig.layout or "two-column" %}
+{% set hasSidebar = homepageConfig.sidebar and homepageConfig.sidebar.length %}
+
+{# Hero — rendered before layout wrapper when enabled #}
+{% if homepageConfig.hero and homepageConfig.hero.enabled %}
+  {% include "components/sections/hero.njk" %}
+{% endif %}
+
+{# Layout wrapper #}
+{% if layout == "single-column" %}
+
+  {# Single column — no sidebar, full width sections #}
+  <div class="homepage-sections">
+    {% for section in homepageConfig.sections %}
+      {% if section.type != "hero" %}
+        {% include "components/homepage-section.njk" %}
+      {% endif %}
+    {% endfor %}
+  </div>
+
+{% elif layout == "two-column" and hasSidebar %}
+
+  {# Two column — sections + sidebar #}
+  <div class="layout-with-sidebar">
+    <div class="main-content">
+      <div class="homepage-sections">
+        {% for section in homepageConfig.sections %}
+          {% if section.type != "hero" %}
+            {% include "components/homepage-section.njk" %}
+          {% endif %}
+        {% endfor %}
+      </div>
+    </div>
+    <aside class="sidebar" data-pagefind-ignore>
+      {% include "components/homepage-sidebar.njk" %}
+    </aside>
+  </div>
+
+{% elif layout == "full-width-hero" %}
+
+  {# Full width hero (already rendered above), then two-column below #}
+  {% if hasSidebar %}
+  <div class="layout-with-sidebar">
+    <div class="main-content">
+      <div class="homepage-sections">
+        {% for section in homepageConfig.sections %}
+          {% if section.type != "hero" %}
+            {% include "components/homepage-section.njk" %}
+          {% endif %}
+        {% endfor %}
+      </div>
+    </div>
+    <aside class="sidebar" data-pagefind-ignore>
+      {% include "components/homepage-sidebar.njk" %}
+    </aside>
+  </div>
+  {% else %}
+  <div class="homepage-sections">
+    {% for section in homepageConfig.sections %}
+      {% if section.type != "hero" %}
+        {% include "components/homepage-section.njk" %}
+      {% endif %}
+    {% endfor %}
+  </div>
+  {% endif %}
+
+{% else %}
+
+  {# Fallback — two-column without sidebar, or unknown layout #}
+  <div class="homepage-sections">
+    {% for section in homepageConfig.sections %}
+      {% if section.type != "hero" %}
+        {% include "components/homepage-section.njk" %}
+      {% endif %}
+    {% endfor %}
+  </div>
+
+{% endif %}
+
+{# Footer — rendered after the main layout, full width #}
+{% include "components/homepage-footer.njk" %}
diff --git a/_includes/components/homepage-footer.njk b/_includes/components/homepage-footer.njk
new file mode 100644
index 0000000..d6f917b
--- /dev/null
+++ b/_includes/components/homepage-footer.njk
@@ -0,0 +1,26 @@
+{# Homepage Builder Footer — renders footer items in a responsive 3-column grid #}
+{% if homepageConfig.footer and homepageConfig.footer.length %}
+<footer class="homepage-footer mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-surface-200 dark:border-surface-700">
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+    {% for section in homepageConfig.footer %}
+      {% if section.type == "custom-html" %}
+        {% set sectionConfig = section.config or {} %}
+        <div>
+          {% if sectionConfig.title %}
+          <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-3">{{ sectionConfig.title }}</h3>
+          {% endif %}
+          {% if sectionConfig.content %}
+          <div class="prose dark:prose-invert prose-sm max-w-none">
+            {{ sectionConfig.content | safe }}
+          </div>
+          {% endif %}
+        </div>
+      {% else %}
+        <div>
+          {% include "components/homepage-section.njk" %}
+        </div>
+      {% endif %}
+    {% endfor %}
+  </div>
+</footer>
+{% endif %}
diff --git a/_includes/components/homepage-section.njk b/_includes/components/homepage-section.njk
new file mode 100644
index 0000000..e7b8ee0
--- /dev/null
+++ b/_includes/components/homepage-section.njk
@@ -0,0 +1,56 @@
+{# Homepage Section Dispatcher — maps section.type to the right partial #}
+{% if section.type == "featured-posts" %}
+  {% include "components/sections/featured-posts.njk" %}
+{% elif section.type == "recent-posts" %}
+  {% include "components/sections/recent-posts.njk" %}
+{% elif section.type == "custom-html" %}
+  {% include "components/sections/custom-html.njk" %}
+{% elif section.type == "cv-experience" %}
+  {% include "components/sections/cv-experience.njk" ignore missing %}
+{% elif section.type == "cv-projects" %}
+  {% include "components/sections/cv-projects.njk" ignore missing %}
+{% elif section.type == "cv-projects-personal" %}
+  {% include "components/sections/cv-projects-personal.njk" ignore missing %}
+{% elif section.type == "cv-projects-work" %}
+  {% include "components/sections/cv-projects-work.njk" ignore missing %}
+{% elif section.type == "cv-skills" %}
+  {% include "components/sections/cv-skills.njk" ignore missing %}
+{% elif section.type == "cv-education" %}
+  {% include "components/sections/cv-education.njk" ignore missing %}
+{% elif section.type == "cv-interests" %}
+  {% include "components/sections/cv-interests.njk" ignore missing %}
+{% elif section.type == "cv-experience-personal" %}
+  {% include "components/sections/cv-experience-personal.njk" ignore missing %}
+{% elif section.type == "cv-experience-work" %}
+  {% include "components/sections/cv-experience-work.njk" ignore missing %}
+{% elif section.type == "cv-education-personal" %}
+  {% include "components/sections/cv-education-personal.njk" ignore missing %}
+{% elif section.type == "cv-education-work" %}
+  {% include "components/sections/cv-education-work.njk" ignore missing %}
+{% elif section.type == "cv-skills-personal" %}
+  {% include "components/sections/cv-skills-personal.njk" ignore missing %}
+{% elif section.type == "cv-skills-work" %}
+  {% include "components/sections/cv-skills-work.njk" ignore missing %}
+{% elif section.type == "cv-interests-personal" %}
+  {% include "components/sections/cv-interests-personal.njk" ignore missing %}
+{% elif section.type == "cv-interests-work" %}
+  {% include "components/sections/cv-interests-work.njk" ignore missing %}
+{% elif section.type == "cv-languages" %}
+  {% include "components/sections/cv-languages.njk" ignore missing %}
+{% elif section.type == "blogroll" %}
+  {% include "components/sections/blogroll.njk" ignore missing %}
+{% elif section.type == "podroll" %}
+  {% include "components/sections/podroll.njk" ignore missing %}
+{% elif section.type == "github-activity" %}
+  {% include "components/sections/github-activity.njk" ignore missing %}
+{% elif section.type == "youtube" %}
+  {% include "components/sections/youtube.njk" ignore missing %}
+{% elif section.type == "funkwhale" %}
+  {% include "components/sections/funkwhale.njk" ignore missing %}
+{% elif section.type == "lastfm" %}
+  {% include "components/sections/lastfm.njk" ignore missing %}
+{% elif section.type == "posting-activity" %}
+  {% include "components/sections/posting-activity.njk" ignore missing %}
+{% else %}
+  <!-- Unknown section type: {{ section.type }} -->
+{% endif %}
diff --git a/_includes/components/homepage-sidebar.njk b/_includes/components/homepage-sidebar.njk
new file mode 100644
index 0000000..5fec890
--- /dev/null
+++ b/_includes/components/homepage-sidebar.njk
@@ -0,0 +1,137 @@
+{# Homepage Builder Sidebar — renders widgets from homepageConfig.sidebar #}
+{# Each widget is wrapped in a collapsible container with localStorage persistence #}
+{% from "components/icon.njk" import icon %}
+
+{% if homepageConfig.sidebar and homepageConfig.sidebar.length %}
+  {% for widget in homepageConfig.sidebar %}
+
+    {# Resolve widget title #}
+    {% if widget.type == "search" %}{% set widgetTitle = "Search" %}
+    {% elif widget.type == "social-activity" %}{% set widgetTitle = "Social Activity" %}
+    {% elif widget.type == "github-repos" %}{% set widgetTitle = "GitHub" %}
+    {% elif widget.type == "funkwhale" %}{% set widgetTitle = "Listening" %}
+    {% elif widget.type == "recent-posts" %}{% set widgetTitle = "Recent Posts" %}
+    {% elif widget.type == "blogroll" %}{% set widgetTitle = "Blogroll" %}
+    {% elif widget.type == "feedland" %}{% set widgetTitle = "FeedLand" %}
+    {% elif widget.type == "categories" %}{% set widgetTitle = "Categories" %}
+    {% elif widget.type == "webmentions" %}{% set widgetTitle = "Webmentions" %}
+    {% elif widget.type == "recent-comments" %}{% set widgetTitle = "Recent Comments" %}
+    {% elif widget.type == "fediverse-follow" %}{% set widgetTitle = "Fediverse" %}
+    {% elif widget.type == "author-card" %}{% set widgetTitle = "Author" %}
+    {% elif widget.type == "custom-html" %}{% set widgetTitle = (widget.config.title if widget.config and widget.config.title) or "Custom" %}
+    {% else %}{% set widgetTitle = widget.type %}
+    {% endif %}
+
+    {# Resolve widget icon and accent border #}
+    {% if widget.type == "social-activity" %}
+      {% set widgetIcon = "globe" %}{% set widgetIconClass = "w-5 h-5 text-[#0085ff]" %}{% set widgetBorder = "border-l-[3px] border-l-[#0085ff]" %}
+    {% elif widget.type == "github-repos" %}
+      {% set widgetIcon = "github" %}{% set widgetIconClass = "w-5 h-5 text-surface-800 dark:text-surface-200" %}{% set widgetBorder = "border-l-[3px] border-l-surface-400 dark:border-l-surface-500" %}
+    {% elif widget.type == "funkwhale" %}
+      {% set widgetIcon = "headphones" %}{% set widgetIconClass = "w-5 h-5 text-purple-500" %}{% set widgetBorder = "border-l-[3px] border-l-purple-400 dark:border-l-purple-500" %}
+    {% elif widget.type == "blogroll" %}
+      {% set widgetIcon = "book-open" %}{% set widgetIconClass = "w-5 h-5 text-amber-500" %}{% set widgetBorder = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
+    {% elif widget.type == "feedland" %}
+      {% set widgetIcon = "rss" %}{% set widgetIconClass = "w-5 h-5 text-amber-500" %}{% set widgetBorder = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
+    {% elif widget.type == "subscribe" %}
+      {% set widgetIcon = "rss" %}{% set widgetIconClass = "w-5 h-5 text-orange-500" %}{% set widgetBorder = "border-l-[3px] border-l-orange-400 dark:border-l-orange-500" %}
+    {% elif widget.type == "fediverse-follow" %}
+      {% set widgetIcon = "user-plus" %}{% set widgetIconClass = "w-5 h-5 text-[#a730b8]" %}{% set widgetBorder = "border-l-[3px] border-l-[#a730b8]" %}
+    {% elif widget.type == "author-card" %}
+      {% set widgetIcon = "user" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "recent-posts" %}
+      {% set widgetIcon = "list" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "categories" %}
+      {% set widgetIcon = "tag" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "recent-comments" %}
+      {% set widgetIcon = "chat" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "search" %}
+      {% set widgetIcon = "search" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "webmentions" %}
+      {% set widgetIcon = "share" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% else %}
+      {% set widgetIcon = "" %}{% set widgetIconClass = "" %}{% set widgetBorder = "" %}
+    {% endif %}
+
+    {% set widgetKey = "widget-" + widget.type + "-" + loop.index0 %}
+    {% set defaultOpen = "true" if loop.index0 < 3 else "false" %}
+
+    {# Collapsible wrapper — Alpine.js handles toggle, localStorage persists state #}
+    <div
+      class="widget-collapsible mb-4"
+      x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : {{ defaultOpen }} }"
+    >
+      <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden {{ widgetBorder }}">
+        <button
+          class="widget-header w-full p-4"
+          @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)"
+          :aria-expanded="open ? 'true' : 'false'"
+        >
+          <h3 class="widget-title font-bold text-lg flex items-center gap-2">
+            {% if widgetIcon %}{{ icon(widgetIcon, widgetIconClass) }}{% endif %}
+            {{ widgetTitle }}
+          </h3>
+          <svg
+            class="widget-chevron"
+            :class="open && 'rotate-180'"
+            fill="none" stroke="currentColor" viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </button>
+
+        <div
+          x-show="open"
+          x-transition:enter="transition ease-out duration-150"
+          x-transition:enter-start="opacity-0"
+          x-transition:enter-end="opacity-100"
+          x-transition:leave="transition ease-in duration-100"
+          x-transition:leave-start="opacity-100"
+          x-transition:leave-end="opacity-0"
+          x-cloak
+        >
+          {# Widget content — inner .widget provides padding, inner title hidden by CSS #}
+          {% if widget.type == "author-card" %}
+            {% include "components/widgets/author-card.njk" %}
+          {% elif widget.type == "social-activity" %}
+            {% include "components/widgets/social-activity.njk" %}
+          {% elif widget.type == "github-repos" %}
+            {% include "components/widgets/github-repos.njk" %}
+          {% elif widget.type == "funkwhale" %}
+            {% include "components/widgets/funkwhale.njk" %}
+          {% elif widget.type == "recent-posts" %}
+            {% include "components/widgets/recent-posts.njk" %}
+          {% elif widget.type == "blogroll" %}
+            {% include "components/widgets/blogroll.njk" %}
+          {% elif widget.type == "feedland" %}
+            {% include "components/widgets/feedland.njk" %}
+          {% elif widget.type == "categories" %}
+            {% include "components/widgets/categories.njk" %}
+          {% elif widget.type == "search" %}
+            {% include "components/widgets/search.njk" %}
+          {% elif widget.type == "webmentions" %}
+            {% include "components/widgets/webmentions.njk" %}
+          {% elif widget.type == "recent-comments" %}
+            {% include "components/widgets/recent-comments.njk" %}
+          {% elif widget.type == "fediverse-follow" %}
+            {% include "components/widgets/fediverse-follow.njk" %}
+          {% elif widget.type == "custom-html" %}
+            {% set wConfig = widget.config or {} %}
+            <is-land on:visible>
+            <div class="widget">
+              {% if wConfig.content %}
+              <div class="prose dark:prose-invert prose-sm max-w-none">
+                {{ wConfig.content | safe }}
+              </div>
+              {% endif %}
+            </div>
+            </is-land>
+          {% else %}
+            <!-- Unknown widget type: {{ widget.type }} -->
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
+  {% endfor %}
+{% endif %}
diff --git a/_includes/components/icon.njk b/_includes/components/icon.njk
new file mode 100644
index 0000000..d538ddd
--- /dev/null
+++ b/_includes/components/icon.njk
@@ -0,0 +1,67 @@
+{#
+  Centralized UI icon macro
+  Usage: {% from "components/icon.njk" import icon %}
+         {{ icon("heart", "w-5 h-5 text-red-500") }}
+
+  All icons use stroke-width="2" unless they are filled icons.
+  Default size: w-5 h-5 (override via cssClass parameter)
+#}
+
+{% macro icon(name, cssClass) %}
+{% set cls = cssClass or "w-5 h-5" %}
+{%- if name == "heart" -%}
+<svg class="{{ cls }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
+{%- elif name == "bookmark" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+{%- elif name == "repost" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 014-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 01-4 4H3"/></svg>
+{%- elif name == "reply" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
+{%- elif name == "camera" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/></svg>
+{%- elif name == "article" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+{%- elif name == "note" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+{%- elif name == "music" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+{%- elif name == "tag" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
+{%- elif name == "rss" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1"/></svg>
+{%- elif name == "chat" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
+{%- elif name == "user" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+{%- elif name == "search" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+{%- elif name == "star" -%}
+<svg class="{{ cls }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+{%- elif name == "external-link" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+{%- elif name == "chevron-down" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 9l-7 7-7-7"/></svg>
+{%- elif name == "chevron-right" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg>
+{%- elif name == "globe" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
+{%- elif name == "github" -%}
+<svg class="{{ cls }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/></svg>
+{%- elif name == "list" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+{%- elif name == "share" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
+{%- elif name == "book-open" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
+{%- elif name == "headphones" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 18v-6a9 9 0 0118 0v6"/><path d="M21 19a2 2 0 01-2 2h-1a2 2 0 01-2-2v-3a2 2 0 012-2h3zM3 19a2 2 0 002 2h1a2 2 0 002-2v-3a2 2 0 00-2-2H3z"/></svg>
+{%- elif name == "mail" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+{%- elif name == "podcast" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17.657 18.657A8 8 0 016.343 7.343"/><path d="M9.879 16.121A3 3 0 1012.015 11L11 17H9c-2 0-3-2-3-3l.879-.879z"/></svg>
+{%- elif name == "user-plus" -%}
+<svg class="{{ cls }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
+{%- else -%}
+<!-- Unknown icon: {{ name }} -->
+{%- endif -%}
+{% endmacro %}
diff --git a/_includes/components/post-navigation.njk b/_includes/components/post-navigation.njk
new file mode 100644
index 0000000..0103704
--- /dev/null
+++ b/_includes/components/post-navigation.njk
@@ -0,0 +1,103 @@
+{# Post Navigation - Previous/Next (image-first, inspired by zachleat.com) #}
+{% set _prevPost = collections.posts | previousInCollection(page) %}
+{% set _nextPost = collections.posts | nextInCollection(page) %}
+
+{% if _prevPost or _nextPost %}
+<nav class="post-navigation mt-8 pt-6 border-t border-surface-200 dark:border-surface-700" aria-label="Post navigation">
+  <div class="grid grid-cols-2 gap-3 sm:gap-4">
+
+    {# ── Previous Post ── #}
+    {% if _prevPost %}
+    {% set _prevOgSlug = _prevPost.url | ogSlug %}
+    {% set _prevHasOg = _prevOgSlug | hasOgImage %}
+    {% set _prevTitle = _prevPost.data.title or _prevPost.data.name %}
+
+    {# Derive display text for non-article post types #}
+    {% set _likedUrl = _prevPost.data.likeOf or _prevPost.data.like_of %}
+    {% set _bookmarkedUrl = _prevPost.data.bookmarkOf or _prevPost.data.bookmark_of %}
+    {% set _repostedUrl = _prevPost.data.repostOf or _prevPost.data.repost_of %}
+    {% set _replyToUrl = _prevPost.data.inReplyTo or _prevPost.data.in_reply_to %}
+    {% if not _prevTitle %}
+      {% if _likedUrl %}
+        {% set _prevTitle = "Liked " + (_likedUrl | replace("https://", "") | truncate(40)) %}
+      {% elif _bookmarkedUrl %}
+        {% set _prevTitle = "Bookmarked " + (_bookmarkedUrl | replace("https://", "") | truncate(35)) %}
+      {% elif _repostedUrl %}
+        {% set _prevTitle = "Reposted " + (_repostedUrl | replace("https://", "") | truncate(35)) %}
+      {% elif _replyToUrl %}
+        {% set _prevTitle = "Reply to " + (_replyToUrl | replace("https://", "") | truncate(35)) %}
+      {% else %}
+        {% set _prevTitle = (_prevPost.templateContent | striptags | truncate(60)) or "Note" %}
+      {% endif %}
+    {% endif %}
+
+    <a href="{{ _prevPost.url }}" class="group relative block rounded-lg overflow-hidden bg-surface-100 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
+      {% if _prevHasOg %}
+      <img src="/og/{{ _prevOgSlug }}.png" alt="{{ _prevTitle }}" class="w-full aspect-[1.91/1] object-cover opacity-85 group-hover:opacity-100 transition-opacity" loading="lazy" decoding="async" eleventy:ignore>
+      <span class="absolute top-2 left-2 text-[10px] sm:text-xs font-semibold uppercase tracking-wide bg-white/90 dark:bg-surface-900/90 text-surface-700 dark:text-surface-300 px-2 py-0.5 rounded">
+        &larr; Previous
+      </span>
+      {% else %}
+      <div class="p-4 sm:p-5">
+        <span class="text-[10px] sm:text-xs font-semibold uppercase tracking-wide text-surface-500 block mb-2">&larr; Previous</span>
+        <span class="text-sm sm:text-base font-medium text-surface-900 dark:text-surface-100 group-hover:text-accent-600 dark:group-hover:text-accent-400 line-clamp-2 transition-colors">
+          {{ _prevTitle }}
+        </span>
+        <time class="text-xs text-surface-500 mt-1 block" datetime="{{ _prevPost.date | isoDate }}">{{ _prevPost.date | dateDisplay }}</time>
+      </div>
+      {% endif %}
+    </a>
+
+    {% else %}
+    <div class="rounded-lg bg-surface-50 dark:bg-surface-800/50 border border-surface-200/50 dark:border-surface-700/50"></div>
+    {% endif %}
+
+    {# ── Next Post ── #}
+    {% if _nextPost %}
+    {% set _nextOgSlug = _nextPost.url | ogSlug %}
+    {% set _nextHasOg = _nextOgSlug | hasOgImage %}
+    {% set _nextTitle = _nextPost.data.title or _nextPost.data.name %}
+
+    {# Derive display text for non-article post types #}
+    {% set _likedUrl = _nextPost.data.likeOf or _nextPost.data.like_of %}
+    {% set _bookmarkedUrl = _nextPost.data.bookmarkOf or _nextPost.data.bookmark_of %}
+    {% set _repostedUrl = _nextPost.data.repostOf or _nextPost.data.repost_of %}
+    {% set _replyToUrl = _nextPost.data.inReplyTo or _nextPost.data.in_reply_to %}
+    {% if not _nextTitle %}
+      {% if _likedUrl %}
+        {% set _nextTitle = "Liked " + (_likedUrl | replace("https://", "") | truncate(40)) %}
+      {% elif _bookmarkedUrl %}
+        {% set _nextTitle = "Bookmarked " + (_bookmarkedUrl | replace("https://", "") | truncate(35)) %}
+      {% elif _repostedUrl %}
+        {% set _nextTitle = "Reposted " + (_repostedUrl | replace("https://", "") | truncate(35)) %}
+      {% elif _replyToUrl %}
+        {% set _nextTitle = "Reply to " + (_replyToUrl | replace("https://", "") | truncate(35)) %}
+      {% else %}
+        {% set _nextTitle = (_nextPost.templateContent | striptags | truncate(60)) or "Note" %}
+      {% endif %}
+    {% endif %}
+
+    <a href="{{ _nextPost.url }}" class="group relative block rounded-lg overflow-hidden bg-surface-100 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
+      {% if _nextHasOg %}
+      <img src="/og/{{ _nextOgSlug }}.png" alt="{{ _nextTitle }}" class="w-full aspect-[1.91/1] object-cover opacity-85 group-hover:opacity-100 transition-opacity" loading="lazy" decoding="async" eleventy:ignore>
+      <span class="absolute top-2 right-2 text-[10px] sm:text-xs font-semibold uppercase tracking-wide bg-white/90 dark:bg-surface-900/90 text-surface-700 dark:text-surface-300 px-2 py-0.5 rounded">
+        Next &rarr;
+      </span>
+      {% else %}
+      <div class="p-4 sm:p-5 text-right">
+        <span class="text-[10px] sm:text-xs font-semibold uppercase tracking-wide text-surface-500 block mb-2">Next &rarr;</span>
+        <span class="text-sm sm:text-base font-medium text-surface-900 dark:text-surface-100 group-hover:text-accent-600 dark:group-hover:text-accent-400 line-clamp-2 transition-colors">
+          {{ _nextTitle }}
+        </span>
+        <time class="text-xs text-surface-500 mt-1 block" datetime="{{ _nextPost.date | isoDate }}">{{ _nextPost.date | dateDisplay }}</time>
+      </div>
+      {% endif %}
+    </a>
+
+    {% else %}
+    <div class="rounded-lg bg-surface-50 dark:bg-surface-800/50 border border-surface-200/50 dark:border-surface-700/50"></div>
+    {% endif %}
+
+  </div>
+</nav>
+{% endif %}
diff --git a/_includes/components/reply-context.njk b/_includes/components/reply-context.njk
new file mode 100644
index 0000000..bfa2781
--- /dev/null
+++ b/_includes/components/reply-context.njk
@@ -0,0 +1,74 @@
+{# Reply Context Component #}
+{# Displays rich context for replies, likes, reposts, and bookmarks #}
+{# Uses h-cite microformat for citing external content #}
+{# Includes unfurl card for rich link preview (OpenGraph metadata) #}
+
+{# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
+{% set replyTo = inReplyTo or in_reply_to %}
+{% set likedUrl = likeOf or like_of %}
+{% set repostedUrl = repostOf or repost_of %}
+{% set bookmarkedUrl = bookmarkOf or bookmark_of %}
+
+{% if replyTo or likedUrl or repostedUrl or bookmarkedUrl %}
+<aside class="reply-context mb-6">
+  {% if replyTo %}
+  <div class="u-in-reply-to h-cite">
+    <p class="text-sm text-surface-500 dark:text-surface-400 mb-2 flex items-center gap-2">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
+      </svg>
+      <span>In reply to:</span>
+    </p>
+    {% unfurl replyTo %}
+    <a class="u-url text-xs text-surface-400 dark:text-surface-500 hover:underline break-all" href="{{ replyTo }}">
+      {{ replyTo }}
+    </a>
+  </div>
+  {% endif %}
+
+  {% if likedUrl %}
+  <div class="u-like-of h-cite">
+    <p class="text-sm text-surface-500 dark:text-surface-400 mb-2 flex items-center gap-2">
+      <svg class="w-4 h-4 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+      </svg>
+      <span>Liked:</span>
+    </p>
+    {% unfurl likedUrl %}
+    <a class="u-url text-xs text-surface-400 dark:text-surface-500 hover:underline break-all" href="{{ likedUrl }}">
+      {{ likedUrl }}
+    </a>
+  </div>
+  {% endif %}
+
+  {% if repostedUrl %}
+  <div class="u-repost-of h-cite">
+    <p class="text-sm text-surface-500 dark:text-surface-400 mb-2 flex items-center gap-2">
+      <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+      </svg>
+      <span>Reposted:</span>
+    </p>
+    {% unfurl repostedUrl %}
+    <a class="u-url text-xs text-surface-400 dark:text-surface-500 hover:underline break-all" href="{{ repostedUrl }}">
+      {{ repostedUrl }}
+    </a>
+  </div>
+  {% endif %}
+
+  {% if bookmarkedUrl %}
+  <div class="u-bookmark-of h-cite">
+    <p class="text-sm text-surface-500 dark:text-surface-400 mb-2 flex items-center gap-2">
+      <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"/>
+      </svg>
+      <span>Bookmarked:</span>
+    </p>
+    {% unfurl bookmarkedUrl %}
+    <a class="u-url text-xs text-surface-400 dark:text-surface-500 hover:underline break-all" href="{{ bookmarkedUrl }}">
+      {{ bookmarkedUrl }}
+    </a>
+  </div>
+  {% endif %}
+</aside>
+{% endif %}
diff --git a/_includes/components/sections/custom-html.njk b/_includes/components/sections/custom-html.njk
new file mode 100644
index 0000000..5045160
--- /dev/null
+++ b/_includes/components/sections/custom-html.njk
@@ -0,0 +1,18 @@
+{#
+  Custom HTML Section - freeform HTML/markdown content block
+  Rendered by homepage-builder when custom-html section is configured
+#}
+
+{% set sectionConfig = section.config or {} %}
+
+<section class="mb-8 sm:mb-12">
+  {% if sectionConfig.title %}
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">
+    {{ sectionConfig.title }}
+  </h2>
+  {% endif %}
+
+  <div class="prose dark:prose-invert max-w-none">
+    {{ sectionConfig.content | safe }}
+  </div>
+</section>
diff --git a/_includes/components/sections/cv-education-personal.njk b/_includes/components/sections/cv-education-personal.njk
new file mode 100644
index 0000000..fd937a7
--- /dev/null
+++ b/_includes/components/sections/cv-education-personal.njk
@@ -0,0 +1,2 @@
+{% set filterType = "personal" %}
+{% include "components/sections/cv-education.njk" %}
diff --git a/_includes/components/sections/cv-education-work.njk b/_includes/components/sections/cv-education-work.njk
new file mode 100644
index 0000000..6d2e3ea
--- /dev/null
+++ b/_includes/components/sections/cv-education-work.njk
@@ -0,0 +1,2 @@
+{% set filterType = "work" %}
+{% include "components/sections/cv-education.njk" %}
diff --git a/_includes/components/sections/cv-education.njk b/_includes/components/sections/cv-education.njk
new file mode 100644
index 0000000..3ff1ecf
--- /dev/null
+++ b/_includes/components/sections/cv-education.njk
@@ -0,0 +1,88 @@
+{#
+  CV Education Section - collapsible education cards (accordion)
+  Data fetched from /cv/data.json via homepage plugin
+  Each card gets a distinct color via cycling palette
+#}
+
+{% set hasEducation = cv and cv.education and cv.education.length %}
+
+{% if hasEducation %}
+<section class="mb-8 sm:mb-12" id="education" x-data="{ expanded: {} }">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">
+    {{ section.config.title or "Education" }}
+  </h2>
+
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
+    {% for item in cv.education %}
+    {% if not filterType or item.educationType == filterType or not item.educationType %}
+    {% set ci = loop.index0 % 8 %}
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 transition-colors overflow-hidden border-l-[3px]
+      {% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500
+      {% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500
+      {% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500
+      {% elif ci == 3 %}border-l-rose-400 dark:border-l-rose-500
+      {% elif ci == 4 %}border-l-purple-400 dark:border-l-purple-500
+      {% elif ci == 5 %}border-l-orange-400 dark:border-l-orange-500
+      {% elif ci == 6 %}border-l-teal-400 dark:border-l-teal-500
+      {% elif ci == 7 %}border-l-indigo-400 dark:border-l-indigo-500
+      {% endif %}">
+      {# Summary row — always visible, clickable #}
+      <button
+        class="w-full p-4 flex items-center justify-between gap-2 cursor-pointer text-left hover:bg-surface-50 dark:hover:bg-surface-700/50 transition-colors"
+        @click="expanded[{{ loop.index0 }}] = !expanded[{{ loop.index0 }}]"
+        :aria-expanded="expanded[{{ loop.index0 }}] ? 'true' : 'false'"
+      >
+        <div class="min-w-0 flex-1">
+          <h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">{{ item.degree }}</h3>
+          <p class="text-sm text-surface-600 dark:text-surface-400 truncate">
+            {{ item.institution }}{% if item.location %} &middot; {{ item.location }}{% endif %}
+          </p>
+        </div>
+        <div class="flex items-center gap-2 shrink-0">
+          {% if item.startDate %}
+          <span class="text-xs text-surface-500 hidden sm:inline">
+            {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
+          </span>
+          {% elif item.year %}
+          <span class="text-xs text-surface-500 hidden sm:inline">{{ item.year }}</span>
+          {% endif %}
+          <svg
+            class="w-4 h-4 text-surface-400 transition-transform duration-200"
+            :class="expanded[{{ loop.index0 }}] && 'rotate-180'"
+            fill="none" stroke="currentColor" viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+      </button>
+
+      {# Detail section — collapsible #}
+      <div
+        x-show="expanded[{{ loop.index0 }}]"
+        x-transition:enter="transition ease-out duration-200"
+        x-transition:enter-start="opacity-0 -translate-y-1"
+        x-transition:enter-end="opacity-100 translate-y-0"
+        x-transition:leave="transition ease-in duration-150"
+        x-transition:leave-start="opacity-100 translate-y-0"
+        x-transition:leave-end="opacity-0 -translate-y-1"
+        x-cloak
+        class="px-4 pb-4"
+      >
+        {% if item.startDate %}
+        <p class="text-xs text-surface-500 mb-1 sm:hidden">
+          {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
+        </p>
+        {% elif item.year %}
+        <p class="text-xs text-surface-500 mb-1 sm:hidden">{{ item.year }}</p>
+        {% endif %}
+
+        {% if item.description %}
+        <p class="text-sm text-surface-600 dark:text-surface-400">{{ item.description }}</p>
+        {% endif %}
+      </div>
+    </div>
+    {% endif %}
+    {% endfor %}
+  </div>
+</section>
+{% endif %}
diff --git a/_includes/components/sections/cv-experience-personal.njk b/_includes/components/sections/cv-experience-personal.njk
new file mode 100644
index 0000000..7d4c858
--- /dev/null
+++ b/_includes/components/sections/cv-experience-personal.njk
@@ -0,0 +1,2 @@
+{% set filterType = "personal" %}
+{% include "components/sections/cv-experience.njk" %}
diff --git a/_includes/components/sections/cv-experience-work.njk b/_includes/components/sections/cv-experience-work.njk
new file mode 100644
index 0000000..57b91b3
--- /dev/null
+++ b/_includes/components/sections/cv-experience-work.njk
@@ -0,0 +1,2 @@
+{% set filterType = "work" %}
+{% include "components/sections/cv-experience.njk" %}
diff --git a/_includes/components/sections/cv-experience.njk b/_includes/components/sections/cv-experience.njk
new file mode 100644
index 0000000..b9ad71d
--- /dev/null
+++ b/_includes/components/sections/cv-experience.njk
@@ -0,0 +1,48 @@
+{#
+  CV Experience Section - work experience timeline
+  Data fetched from /cv/data.json via homepage plugin
+#}
+
+{% set sectionConfig = section.config or {} %}
+{% set maxItems = sectionConfig.maxItems or 10 %}
+{% set showHighlights = sectionConfig.showHighlights if sectionConfig.showHighlights is defined else true %}
+
+{% if cv and cv.experience and cv.experience.length %}
+<section class="mb-8 sm:mb-12" id="experience">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">
+    {{ sectionConfig.title or "Experience" }}
+  </h2>
+
+  <div class="space-y-4">
+    {% for item in cv.experience | head(maxItems) %}
+    {% if not filterType or item.experienceType == filterType or not item.experienceType %}
+    <div class="relative pl-6 border-l-2 border-accent-300 dark:border-accent-700">
+      <div class="absolute -left-[7px] top-1 w-3 h-3 rounded-full bg-accent-500"></div>
+      <h3 class="font-semibold text-surface-900 dark:text-surface-100">{{ item.title }}</h3>
+      <p class="text-sm text-surface-600 dark:text-surface-400">
+        {{ item.company }}{% if item.location %} &middot; {{ item.location }}{% endif %}
+        {% if item.type %} &middot; <span class="capitalize">{{ item.type }}</span>{% endif %}
+      </p>
+      {% if item.startDate %}
+      <p class="text-xs text-surface-500 mt-0.5">
+        {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
+      </p>
+      {% endif %}
+      {% if item.description %}
+      <p class="text-sm text-surface-700 dark:text-surface-300 mt-2">{{ item.description }}</p>
+      {% endif %}
+      {% if showHighlights and item.highlights and item.highlights.length %}
+      <div class="flex flex-wrap gap-1.5 mt-2">
+        {% for h in item.highlights %}
+        <span class="px-2.5 py-1 bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-full text-xs text-surface-700 dark:text-surface-300">
+          {{ h }}
+        </span>
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+    {% endif %}
+    {% endfor %}
+  </div>
+</section>
+{% endif %}
diff --git a/_includes/components/sections/cv-interests-personal.njk b/_includes/components/sections/cv-interests-personal.njk
new file mode 100644
index 0000000..0d053a3
--- /dev/null
+++ b/_includes/components/sections/cv-interests-personal.njk
@@ -0,0 +1,2 @@
+{% set filterType = "personal" %}
+{% include "components/sections/cv-interests.njk" %}
diff --git a/_includes/components/sections/cv-interests-work.njk b/_includes/components/sections/cv-interests-work.njk
new file mode 100644
index 0000000..7cbe270
--- /dev/null
+++ b/_includes/components/sections/cv-interests-work.njk
@@ -0,0 +1,2 @@
+{% set filterType = "work" %}
+{% include "components/sections/cv-interests.njk" %}
diff --git a/_includes/components/sections/cv-interests.njk b/_includes/components/sections/cv-interests.njk
new file mode 100644
index 0000000..997f791
--- /dev/null
+++ b/_includes/components/sections/cv-interests.njk
@@ -0,0 +1,50 @@
+{#
+  CV Interests Section - interests grouped by category
+  Data fetched from /cv/data.json via homepage plugin
+  Each family gets a distinct color via cycling palette
+#}
+
+{% if cv and cv.interests and (cv.interests | dictsort | length) %}
+<section class="mb-8 sm:mb-12" id="interests">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">
+    {{ section.config.title or "Interests" }}
+  </h2>
+
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+    {% for category, items in cv.interests %}
+    {% if not filterType or (cv.interestTypes and cv.interestTypes[category] == filterType) or not cv.interestTypes or not cv.interestTypes[category] %}
+    {# Cycle through 8 distinct colors per family using loop.index0 #}
+    {% set ci = loop.index0 % 8 %}
+    <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+      <h3 class="font-semibold text-sm uppercase tracking-wide text-surface-600 dark:text-surface-400 mb-2">
+        {{ category }}
+      </h3>
+      <div class="flex flex-wrap gap-1.5">
+        {% for interest in items %}
+        {% if ci == 0 %}
+        <span class="text-xs px-2 py-1 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 rounded-full">
+        {% elif ci == 1 %}
+        <span class="text-xs px-2 py-1 bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 rounded-full">
+        {% elif ci == 2 %}
+        <span class="text-xs px-2 py-1 bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 rounded-full">
+        {% elif ci == 3 %}
+        <span class="text-xs px-2 py-1 bg-rose-50 dark:bg-rose-900/30 text-rose-700 dark:text-rose-300 rounded-full">
+        {% elif ci == 4 %}
+        <span class="text-xs px-2 py-1 bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded-full">
+        {% elif ci == 5 %}
+        <span class="text-xs px-2 py-1 bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded-full">
+        {% elif ci == 6 %}
+        <span class="text-xs px-2 py-1 bg-teal-50 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300 rounded-full">
+        {% elif ci == 7 %}
+        <span class="text-xs px-2 py-1 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 rounded-full">
+        {% endif %}
+          {{ interest }}
+        </span>
+        {% endfor %}
+      </div>
+    </div>
+    {% endif %}
+    {% endfor %}
+  </div>
+</section>
+{% endif %}
diff --git a/_includes/components/sections/cv-languages.njk b/_includes/components/sections/cv-languages.njk
new file mode 100644
index 0000000..438905f
--- /dev/null
+++ b/_includes/components/sections/cv-languages.njk
@@ -0,0 +1,21 @@
+{#
+  CV Languages Section
+  Data fetched from /cv/data.json via homepage plugin
+#}
+
+{% if cv and cv.languages and cv.languages.length %}
+<section class="mb-8 sm:mb-12" id="languages">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">
+    {{ section.config.title or "Languages" }}
+  </h2>
+
+  <div class="flex flex-wrap gap-3">
+    {% for lang in cv.languages %}
+    <div class="flex items-center gap-2 px-3 py-1.5 bg-surface-50 dark:bg-surface-800 rounded-full border border-surface-200 dark:border-surface-700">
+      <span class="font-medium text-sm text-surface-900 dark:text-surface-100">{{ lang.name }}</span>
+      <span class="text-xs text-surface-500 capitalize">{{ lang.level }}</span>
+    </div>
+    {% endfor %}
+  </div>
+</section>
+{% endif %}
diff --git a/_includes/components/sections/cv-projects-personal.njk b/_includes/components/sections/cv-projects-personal.njk
new file mode 100644
index 0000000..e3e6ab0
--- /dev/null
+++ b/_includes/components/sections/cv-projects-personal.njk
@@ -0,0 +1,124 @@
+{#
+  CV Personal Projects Section - collapsible project cards (accordion)
+  Filters projects by projectType == "personal" (or unset)
+  Data fetched from /cv/data.json via homepage plugin
+#}
+
+{% set sectionConfig = section.config or {} %}
+{% set maxItems = sectionConfig.maxItems or 10 %}
+{% set showTechnologies = sectionConfig.showTechnologies if sectionConfig.showTechnologies is defined else true %}
+
+{% set personalProjects = [] %}
+{% if cv and cv.projects %}
+  {% for item in cv.projects %}
+    {% if item.projectType == "personal" or not item.projectType %}
+      {% set personalProjects = (personalProjects.push(item), personalProjects) %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
+{% if personalProjects.length %}
+<section class="mb-8 sm:mb-12" id="personal-projects" x-data="{ expanded: {} }">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">
+    {{ sectionConfig.title or "Personal Projects" }}
+  </h2>
+
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
+    {% for item in personalProjects | head(maxItems) %}
+    {% set ci = loop.index0 % 8 %}
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 transition-colors overflow-hidden border-l-[3px]
+      {% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500
+      {% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500
+      {% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500
+      {% elif ci == 3 %}border-l-rose-400 dark:border-l-rose-500
+      {% elif ci == 4 %}border-l-purple-400 dark:border-l-purple-500
+      {% elif ci == 5 %}border-l-orange-400 dark:border-l-orange-500
+      {% elif ci == 6 %}border-l-teal-400 dark:border-l-teal-500
+      {% elif ci == 7 %}border-l-indigo-400 dark:border-l-indigo-500
+      {% endif %}">
+      {# Summary row — always visible, clickable #}
+      <button
+        class="w-full p-4 flex items-center justify-between gap-2 cursor-pointer text-left hover:bg-surface-50 dark:hover:bg-surface-700/50 transition-colors"
+        @click="expanded[{{ loop.index0 }}] = !expanded[{{ loop.index0 }}]"
+        :aria-expanded="expanded[{{ loop.index0 }}] ? 'true' : 'false'"
+      >
+        <div class="flex items-center gap-2 min-w-0 flex-1">
+          <h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">
+            {% if item.url %}
+            <a href="{{ item.url }}" class="hover:underline" @click.stop>{{ item.name }}</a>
+            {% else %}
+            {{ item.name }}
+            {% endif %}
+          </h3>
+          {% if item.status %}
+          <span class="shrink-0 text-xs px-2 py-0.5 rounded-full capitalize
+            {% if item.status == 'active' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300
+            {% elif item.status == 'maintained' %}bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300
+            {% elif item.status == 'archived' %}bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-400
+            {% else %}bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-400{% endif %}">
+            {{ item.status }}
+          </span>
+          {% endif %}
+        </div>
+        <div class="flex items-center gap-2 shrink-0">
+          {% if item.startDate %}
+          <span class="text-xs text-surface-500 hidden sm:inline">
+            {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
+          </span>
+          {% endif %}
+          <svg
+            class="w-4 h-4 text-surface-400 transition-transform duration-200"
+            :class="expanded[{{ loop.index0 }}] && 'rotate-180'"
+            fill="none" stroke="currentColor" viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+      </button>
+
+      {# Detail section — collapsible #}
+      <div
+        x-show="expanded[{{ loop.index0 }}]"
+        x-transition:enter="transition ease-out duration-200"
+        x-transition:enter-start="opacity-0 -translate-y-1"
+        x-transition:enter-end="opacity-100 translate-y-0"
+        x-transition:leave="transition ease-in duration-150"
+        x-transition:leave-start="opacity-100 translate-y-0"
+        x-transition:leave-end="opacity-0 -translate-y-1"
+        x-cloak
+        class="px-4 pb-4"
+      >
+        {% if item.startDate %}
+        <p class="text-xs text-surface-500 mb-1 sm:hidden">
+          {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
+        </p>
+        {% endif %}
+
+        {% if item.description %}
+        <p class="text-sm text-surface-600 dark:text-surface-400 mb-2">{{ item.description }}</p>
+        {% endif %}
+
+        {% if showTechnologies and item.technologies and item.technologies.length %}
+        <div class="flex flex-wrap gap-1">
+          {% for tech in item.technologies %}
+          <span class="text-xs px-2 py-0.5 rounded
+            {% if ci == 0 %}bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300
+            {% elif ci == 1 %}bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300
+            {% elif ci == 2 %}bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300
+            {% elif ci == 3 %}bg-rose-50 dark:bg-rose-900/30 text-rose-700 dark:text-rose-300
+            {% elif ci == 4 %}bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300
+            {% elif ci == 5 %}bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300
+            {% elif ci == 6 %}bg-teal-50 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300
+            {% elif ci == 7 %}bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300
+            {% endif %}">
+            {{ tech }}
+          </span>
+          {% endfor %}
+        </div>
+        {% endif %}
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+</section>
+{% endif %}
diff --git a/_includes/components/sections/cv-projects-work.njk b/_includes/components/sections/cv-projects-work.njk
new file mode 100644
index 0000000..47d7014
--- /dev/null
+++ b/_includes/components/sections/cv-projects-work.njk
@@ -0,0 +1,124 @@
+{#
+  CV Work Projects Section - collapsible project cards (accordion)
+  Filters projects by projectType == "work"
+  Data fetched from /cv/data.json via homepage plugin
+#}
+
+{% set sectionConfig = section.config or {} %}
+{% set maxItems = sectionConfig.maxItems or 10 %}
+{% set showTechnologies = sectionConfig.showTechnologies if sectionConfig.showTechnologies is defined else true %}
+
+{% set workProjects = [] %}
+{% if cv and cv.projects %}
+  {% for item in cv.projects %}
+    {% if item.projectType == "work" %}
+      {% set workProjects = (workProjects.push(item), workProjects) %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
+{% if workProjects.length %}
+<section class="mb-8 sm:mb-12" id="work-projects" x-data="{ expanded: {} }">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">
+    {{ sectionConfig.title or "Work Projects" }}
+  </h2>
+
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
+    {% for item in workProjects | head(maxItems) %}
+    {% set ci = loop.index0 % 8 %}
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 transition-colors overflow-hidden border-l-[3px]
+      {% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500
+      {% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500
+      {% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500
+      {% elif ci == 3 %}border-l-rose-400 dark:border-l-rose-500
+      {% elif ci == 4 %}border-l-purple-400 dark:border-l-purple-500
+      {% elif ci == 5 %}border-l-orange-400 dark:border-l-orange-500
+      {% elif ci == 6 %}border-l-teal-400 dark:border-l-teal-500
+      {% elif ci == 7 %}border-l-indigo-400 dark:border-l-indigo-500
+      {% endif %}">
+      {# Summary row — always visible, clickable #}
+      <button
+        class="w-full p-4 flex items-center justify-between gap-2 cursor-pointer text-left hover:bg-surface-50 dark:hover:bg-surface-700/50 transition-colors"
+        @click="expanded[{{ loop.index0 }}] = !expanded[{{ loop.index0 }}]"
+        :aria-expanded="expanded[{{ loop.index0 }}] ? 'true' : 'false'"
+      >
+        <div class="flex items-center gap-2 min-w-0 flex-1">
+          <h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">
+            {% if item.url %}
+            <a href="{{ item.url }}" class="hover:underline" @click.stop>{{ item.name }}</a>
+            {% else %}
+            {{ item.name }}
+            {% endif %}
+          </h3>
+          {% if item.status %}
+          <span class="shrink-0 text-xs px-2 py-0.5 rounded-full capitalize
+            {% if item.status == 'active' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300
+            {% elif item.status == 'maintained' %}bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300
+            {% elif item.status == 'archived' %}bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-400
+            {% else %}bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-400{% endif %}">
+            {{ item.status }}
+          </span>
+          {% endif %}
+        </div>
+        <div class="flex items-center gap-2 shrink-0">
+          {% if item.startDate %}
+          <span class="text-xs text-surface-500 hidden sm:inline">
+            {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
+          </span>
+          {% endif %}
+          <svg
+            class="w-4 h-4 text-surface-400 transition-transform duration-200"
+            :class="expanded[{{ loop.index0 }}] && 'rotate-180'"
+            fill="none" stroke="currentColor" viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+      </button>
+
+      {# Detail section — collapsible #}
+      <div
+        x-show="expanded[{{ loop.index0 }}]"
+        x-transition:enter="transition ease-out duration-200"
+        x-transition:enter-start="opacity-0 -translate-y-1"
+        x-transition:enter-end="opacity-100 translate-y-0"
+        x-transition:leave="transition ease-in duration-150"
+        x-transition:leave-start="opacity-100 translate-y-0"
+        x-transition:leave-end="opacity-0 -translate-y-1"
+        x-cloak
+        class="px-4 pb-4"
+      >
+        {% if item.startDate %}
+        <p class="text-xs text-surface-500 mb-1 sm:hidden">
+          {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
+        </p>
+        {% endif %}
+
+        {% if item.description %}
+        <p class="text-sm text-surface-600 dark:text-surface-400 mb-2">{{ item.description }}</p>
+        {% endif %}
+
+        {% if showTechnologies and item.technologies and item.technologies.length %}
+        <div class="flex flex-wrap gap-1">
+          {% for tech in item.technologies %}
+          <span class="text-xs px-2 py-0.5 rounded
+            {% if ci == 0 %}bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300
+            {% elif ci == 1 %}bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300
+            {% elif ci == 2 %}bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300
+            {% elif ci == 3 %}bg-rose-50 dark:bg-rose-900/30 text-rose-700 dark:text-rose-300
+            {% elif ci == 4 %}bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300
+            {% elif ci == 5 %}bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300
+            {% elif ci == 6 %}bg-teal-50 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300
+            {% elif ci == 7 %}bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300
+            {% endif %}">
+            {{ tech }}
+          </span>
+          {% endfor %}
+        </div>
+        {% endif %}
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+</section>
+{% endif %}
diff --git a/_includes/components/sections/cv-projects.njk b/_includes/components/sections/cv-projects.njk
new file mode 100644
index 0000000..99cc152
--- /dev/null
+++ b/_includes/components/sections/cv-projects.njk
@@ -0,0 +1,114 @@
+{#
+  CV Projects Section - collapsible project cards (accordion)
+  Data fetched from /cv/data.json via homepage plugin
+#}
+
+{% set sectionConfig = section.config or {} %}
+{% set maxItems = sectionConfig.maxItems or 10 %}
+{% set showTechnologies = sectionConfig.showTechnologies if sectionConfig.showTechnologies is defined else true %}
+
+{% if cv and cv.projects and cv.projects.length %}
+<section class="mb-8 sm:mb-12" id="projects" x-data="{ expanded: {} }">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">
+    {{ sectionConfig.title or "Projects" }}
+  </h2>
+
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
+    {% for item in cv.projects | head(maxItems) %}
+    {% set ci = loop.index0 % 8 %}
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 transition-colors overflow-hidden border-l-[3px]
+      {% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500
+      {% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500
+      {% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500
+      {% elif ci == 3 %}border-l-rose-400 dark:border-l-rose-500
+      {% elif ci == 4 %}border-l-purple-400 dark:border-l-purple-500
+      {% elif ci == 5 %}border-l-orange-400 dark:border-l-orange-500
+      {% elif ci == 6 %}border-l-teal-400 dark:border-l-teal-500
+      {% elif ci == 7 %}border-l-indigo-400 dark:border-l-indigo-500
+      {% endif %}">
+      {# Summary row — always visible, clickable #}
+      <button
+        class="w-full p-4 flex items-center justify-between gap-2 cursor-pointer text-left hover:bg-surface-50 dark:hover:bg-surface-700/50 transition-colors"
+        @click="expanded[{{ loop.index0 }}] = !expanded[{{ loop.index0 }}]"
+        :aria-expanded="expanded[{{ loop.index0 }}] ? 'true' : 'false'"
+      >
+        <div class="flex items-center gap-2 min-w-0 flex-1">
+          <h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">
+            {% if item.url %}
+            <a href="{{ item.url }}" class="hover:underline" @click.stop>{{ item.name }}</a>
+            {% else %}
+            {{ item.name }}
+            {% endif %}
+          </h3>
+          {% if item.status %}
+          <span class="shrink-0 text-xs px-2 py-0.5 rounded-full capitalize
+            {% if item.status == 'active' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300
+            {% elif item.status == 'maintained' %}bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300
+            {% elif item.status == 'archived' %}bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-400
+            {% else %}bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-400{% endif %}">
+            {{ item.status }}
+          </span>
+          {% endif %}
+        </div>
+        <div class="flex items-center gap-2 shrink-0">
+          {% if item.startDate %}
+          <span class="text-xs text-surface-500 hidden sm:inline">
+            {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
+          </span>
+          {% endif %}
+          <svg
+            class="w-4 h-4 text-surface-400 transition-transform duration-200"
+            :class="expanded[{{ loop.index0 }}] && 'rotate-180'"
+            fill="none" stroke="currentColor" viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+      </button>
+
+      {# Detail section — collapsible #}
+      <div
+        x-show="expanded[{{ loop.index0 }}]"
+        x-transition:enter="transition ease-out duration-200"
+        x-transition:enter-start="opacity-0 -translate-y-1"
+        x-transition:enter-end="opacity-100 translate-y-0"
+        x-transition:leave="transition ease-in duration-150"
+        x-transition:leave-start="opacity-100 translate-y-0"
+        x-transition:leave-end="opacity-0 -translate-y-1"
+        x-cloak
+        class="px-4 pb-4"
+      >
+        {% if item.startDate %}
+        <p class="text-xs text-surface-500 mb-1 sm:hidden">
+          {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
+        </p>
+        {% endif %}
+
+        {% if item.description %}
+        <p class="text-sm text-surface-600 dark:text-surface-400 mb-2">{{ item.description }}</p>
+        {% endif %}
+
+        {% if showTechnologies and item.technologies and item.technologies.length %}
+        <div class="flex flex-wrap gap-1">
+          {% for tech in item.technologies %}
+          <span class="text-xs px-2 py-0.5 rounded
+            {% if ci == 0 %}bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300
+            {% elif ci == 1 %}bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300
+            {% elif ci == 2 %}bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300
+            {% elif ci == 3 %}bg-rose-50 dark:bg-rose-900/30 text-rose-700 dark:text-rose-300
+            {% elif ci == 4 %}bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300
+            {% elif ci == 5 %}bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300
+            {% elif ci == 6 %}bg-teal-50 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300
+            {% elif ci == 7 %}bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300
+            {% endif %}">
+            {{ tech }}
+          </span>
+          {% endfor %}
+        </div>
+        {% endif %}
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+</section>
+{% endif %}
diff --git a/_includes/components/sections/cv-skills-personal.njk b/_includes/components/sections/cv-skills-personal.njk
new file mode 100644
index 0000000..baa52be
--- /dev/null
+++ b/_includes/components/sections/cv-skills-personal.njk
@@ -0,0 +1,2 @@
+{% set filterType = "personal" %}
+{% include "components/sections/cv-skills.njk" %}
diff --git a/_includes/components/sections/cv-skills-work.njk b/_includes/components/sections/cv-skills-work.njk
new file mode 100644
index 0000000..cc1332a
--- /dev/null
+++ b/_includes/components/sections/cv-skills-work.njk
@@ -0,0 +1,2 @@
+{% set filterType = "work" %}
+{% include "components/sections/cv-skills.njk" %}
diff --git a/_includes/components/sections/cv-skills.njk b/_includes/components/sections/cv-skills.njk
new file mode 100644
index 0000000..6b55cde
--- /dev/null
+++ b/_includes/components/sections/cv-skills.njk
@@ -0,0 +1,50 @@
+{#
+  CV Skills Section - skills grouped by category
+  Data fetched from /cv/data.json via homepage plugin
+  Each family gets a distinct color via cycling palette
+#}
+
+{% if cv and cv.skills and (cv.skills | dictsort | length) %}
+<section class="mb-8 sm:mb-12" id="skills">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">
+    {{ section.config.title or "Skills" }}
+  </h2>
+
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+    {% for category, items in cv.skills %}
+    {% if not filterType or (cv.skillTypes and cv.skillTypes[category] == filterType) or not cv.skillTypes or not cv.skillTypes[category] %}
+    {# Cycle through 8 distinct colors per family using loop.index0 #}
+    {% set ci = loop.index0 % 8 %}
+    <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+      <h3 class="font-semibold text-sm uppercase tracking-wide text-surface-600 dark:text-surface-400 mb-2">
+        {{ category }}
+      </h3>
+      <div class="flex flex-wrap gap-1.5">
+        {% for skill in items %}
+        {% if ci == 0 %}
+        <span class="text-xs px-2 py-1 bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 rounded-full">
+        {% elif ci == 1 %}
+        <span class="text-xs px-2 py-1 bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 rounded-full">
+        {% elif ci == 2 %}
+        <span class="text-xs px-2 py-1 bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 rounded-full">
+        {% elif ci == 3 %}
+        <span class="text-xs px-2 py-1 bg-rose-50 dark:bg-rose-900/30 text-rose-700 dark:text-rose-300 rounded-full">
+        {% elif ci == 4 %}
+        <span class="text-xs px-2 py-1 bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded-full">
+        {% elif ci == 5 %}
+        <span class="text-xs px-2 py-1 bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded-full">
+        {% elif ci == 6 %}
+        <span class="text-xs px-2 py-1 bg-teal-50 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300 rounded-full">
+        {% elif ci == 7 %}
+        <span class="text-xs px-2 py-1 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 rounded-full">
+        {% endif %}
+          {{ skill }}
+        </span>
+        {% endfor %}
+      </div>
+    </div>
+    {% endif %}
+    {% endfor %}
+  </div>
+</section>
+{% endif %}
diff --git a/_includes/components/sections/featured-posts.njk b/_includes/components/sections/featured-posts.njk
new file mode 100644
index 0000000..730fdbe
--- /dev/null
+++ b/_includes/components/sections/featured-posts.njk
@@ -0,0 +1,259 @@
+{#
+  Featured Posts Section - displays curated posts with `featured: true` frontmatter
+  Rendered by homepage-builder when featured-posts section is configured
+  Supports type-aware rendering for articles, notes, likes, bookmarks, reposts, replies, photos
+#}
+
+{% set sectionConfig = section.config or {} %}
+{% set maxItems = sectionConfig.maxItems or 6 %}
+{% set showSummary = sectionConfig.showSummary if sectionConfig.showSummary is defined else true %}
+
+{% if collections.featuredPosts and collections.featuredPosts.length %}
+<section class="mb-8 sm:mb-12">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
+    <svg class="w-5 h-5 text-amber-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+    </svg>
+    {{ sectionConfig.title or "Featured" }}
+  </h2>
+
+  <div class="space-y-4">
+    {% for post in collections.featuredPosts | head(maxItems) %}
+      {# Detect post type from frontmatter properties #}
+      {% set likedUrl = post.data.likeOf or post.data.like_of %}
+      {% set bookmarkedUrl = post.data.bookmarkOf or post.data.bookmark_of %}
+      {% set repostedUrl = post.data.repostOf or post.data.repost_of %}
+      {% set replyToUrl = post.data.inReplyTo or post.data.in_reply_to %}
+      {% set hasPhotos = post.data.photo and post.data.photo.length %}
+
+      {# Determine border color by post type #}
+      {% set borderClass = "" %}
+      {% if likedUrl %}
+        {% set borderClass = "border-l-[3px] border-l-red-400 dark:border-l-red-500" %}
+      {% elif bookmarkedUrl %}
+        {% set borderClass = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
+      {% elif repostedUrl %}
+        {% set borderClass = "border-l-[3px] border-l-green-400 dark:border-l-green-500" %}
+      {% elif replyToUrl %}
+        {% set borderClass = "border-l-[3px] border-l-sky-400 dark:border-l-sky-500" %}
+      {% elif hasPhotos %}
+        {% set borderClass = "border-l-[3px] border-l-purple-400 dark:border-l-purple-500" %}
+      {% else %}
+        {% set borderClass = "border-l-[3px] border-l-surface-300 dark:border-l-surface-600" %}
+      {% endif %}
+
+    <article class="h-entry p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-500 transition-colors {{ borderClass }}">
+
+      {% if likedUrl %}
+      {# ── Like card ── #}
+      <div class="flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-3 text-xs text-surface-500">
+            <span class="font-medium text-red-600 dark:text-red-400">Liked</span>
+            <time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time>
+          </div>
+          {{ likedUrl | unfurlCard | safe }}
+          <a class="u-like-of text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ likedUrl }}">
+            {{ likedUrl }}
+          </a>
+          {% if post.templateContent %}
+          <div class="e-content prose dark:prose-invert prose-sm mt-2 max-w-none line-clamp-3">
+            {{ post.templateContent | safe }}
+          </div>
+          {% endif %}
+          <a class="u-url text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+
+      {% elif bookmarkedUrl %}
+      {# ── Bookmark card ── #}
+      <div class="flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-3 text-xs text-surface-500">
+            <span class="font-medium text-amber-600 dark:text-amber-400">Bookmarked</span>
+            <time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time>
+          </div>
+          {% if post.data.title %}
+          <h3 class="p-name font-semibold mt-1">
+            <a class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400 hover:underline" href="{{ post.url }}">{{ post.data.title }}</a>
+          </h3>
+          {% endif %}
+          {{ bookmarkedUrl | unfurlCard | safe }}
+          <a class="u-bookmark-of text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ bookmarkedUrl }}">
+            {{ bookmarkedUrl }}
+          </a>
+          {% if post.templateContent %}
+          <div class="e-content prose dark:prose-invert prose-sm mt-2 max-w-none line-clamp-3">
+            {{ post.templateContent | safe }}
+          </div>
+          {% endif %}
+          <a class="u-url text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+
+      {% elif repostedUrl %}
+      {# ── Repost card ── #}
+      <div class="flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-3 text-xs text-surface-500">
+            <span class="font-medium text-green-600 dark:text-green-400">Reposted</span>
+            <time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time>
+          </div>
+          {{ repostedUrl | unfurlCard | safe }}
+          <a class="u-repost-of text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ repostedUrl }}">
+            {{ repostedUrl }}
+          </a>
+          {% if post.templateContent %}
+          <div class="e-content prose dark:prose-invert prose-sm mt-2 max-w-none line-clamp-3">
+            {{ post.templateContent | safe }}
+          </div>
+          {% endif %}
+          <a class="u-url text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+
+      {% elif replyToUrl %}
+      {# ── Reply card ── #}
+      <div class="flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-3 text-xs text-surface-500">
+            <span class="font-medium text-sky-600 dark:text-sky-400">In reply to</span>
+            <time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time>
+          </div>
+          {{ replyToUrl | unfurlCard | safe }}
+          <a class="u-in-reply-to text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ replyToUrl }}">
+            {{ replyToUrl }}
+          </a>
+          {% if post.templateContent %}
+          <div class="e-content prose dark:prose-invert prose-sm mt-2 max-w-none line-clamp-3">
+            {{ post.templateContent | safe }}
+          </div>
+          {% endif %}
+          <a class="u-url text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+
+      {% elif hasPhotos %}
+      {# ── Photo card ── #}
+      <div class="flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-3 text-xs text-surface-500">
+            <span class="font-medium text-purple-600 dark:text-purple-400">Photo</span>
+            <time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time>
+          </div>
+          <div class="photo-gallery mt-2">
+            {% for img in post.data.photo | head(2) %}
+              {% set photoUrl = img.url %}
+              {% if photoUrl and photoUrl[0] != '/' and 'http' not in photoUrl %}
+                {% set photoUrl = '/' + photoUrl %}
+              {% endif %}
+              <a href="{{ post.url }}" class="photo-link">
+                <img src="{{ photoUrl }}" alt="{{ img.alt | default('Photo') }}" class="u-photo rounded max-h-48 object-cover" loading="lazy" eleventy:ignore>
+              </a>
+            {% endfor %}
+          </div>
+          {% if post.templateContent %}
+          <div class="e-content prose dark:prose-invert prose-sm mt-2 max-w-none line-clamp-2">
+            {{ post.templateContent | safe }}
+          </div>
+          {% endif %}
+          <a class="u-url text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+
+      {% elif post.data.title %}
+      {# ── Article/Page card ── #}
+      <h3 class="p-name font-semibold mb-1">
+        <a href="{{ post.url }}" class="u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400 hover:underline">
+          {{ post.data.title }}
+        </a>
+      </h3>
+      {% if showSummary and post.templateContent %}
+      <p class="text-sm text-surface-600 dark:text-surface-400 mb-2 line-clamp-2">
+        {{ post.templateContent | striptags | truncate(250) }}
+      </p>
+      {% endif %}
+      <div class="flex items-center gap-3 text-xs text-surface-500">
+        <time class="dt-published" datetime="{{ post.date | isoDate }}">
+          {{ post.date | dateDisplay }}
+        </time>
+        {% if post.data.postType %}
+        <span class="px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded">
+          {{ post.data.postType }}
+        </span>
+        {% endif %}
+      </div>
+
+      {% else %}
+      {# ── Note card ── #}
+      <div class="flex items-center gap-3 text-xs text-surface-500 mb-2">
+        <a class="u-url" href="{{ post.url }}">
+          <time class="dt-published font-medium text-surface-500 dark:text-surface-400" datetime="{{ post.date | isoDate }}">
+            {{ post.date | dateDisplay }}
+          </time>
+        </a>
+        {% if post.data.postType %}
+        <span class="px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded">
+          {{ post.data.postType }}
+        </span>
+        {% endif %}
+      </div>
+      {% if post.templateContent %}
+      <div class="e-content prose dark:prose-invert prose-sm max-w-none line-clamp-3">
+        {{ post.templateContent | safe }}
+      </div>
+      {% endif %}
+      <a href="{{ post.url }}" class="text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block">
+        Permalink
+      </a>
+      {% endif %}
+
+    </article>
+    {% endfor %}
+  </div>
+
+  {% if collections.featuredPosts.length > maxItems %}
+  <div class="mt-4 text-center">
+    <a href="/featured/" class="inline-flex items-center gap-1 text-sm text-accent-600 dark:text-accent-400 hover:underline font-medium">
+      View all {{ collections.featuredPosts.length }} featured posts &rarr;
+    </a>
+  </div>
+  {% endif %}
+</section>
+{% endif %}
diff --git a/_includes/components/sections/hero.njk b/_includes/components/sections/hero.njk
new file mode 100644
index 0000000..0366965
--- /dev/null
+++ b/_includes/components/sections/hero.njk
@@ -0,0 +1,66 @@
+{#
+  Hero Section - author intro with avatar, name, title, bio
+  Rendered by homepage-builder when hero is enabled
+#}
+
+{% set heroConfig = homepageConfig.hero or {} %}
+{% set id = homepageConfig.identity if (homepageConfig and homepageConfig.identity) else {} %}
+{% set authorName = id.name or site.author.name %}
+{% set authorAvatar = id.avatar or site.author.avatar %}
+{% set authorTitle = id.title or site.author.title %}
+{% set authorBio = id.bio or site.author.bio %}
+{% set siteDescription = id.description or site.description %}
+{% set socialLinks = id.social if (id.social and id.social.length) else site.social %}
+
+<section class="mb-8 sm:mb-12">
+  <div class="flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
+    {# Avatar #}
+    {% if heroConfig.showAvatar != false %}
+    <img
+      src="{{ authorAvatar }}"
+      alt="{{ authorName }}"
+      class="w-24 h-24 sm:w-32 sm:h-32 rounded-full object-cover shadow-lg flex-shrink-0"
+      loading="eager"
+    >
+    {% endif %}
+
+    {# Introduction #}
+    <div class="flex-1 min-w-0">
+      <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
+        {{ authorName }}
+      </h1>
+      <p class="text-lg sm:text-xl text-accent-600 dark:text-accent-400 mb-3 sm:mb-4">
+        {{ authorTitle }}
+      </p>
+      {% if authorBio %}
+      <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4">
+        {{ authorBio }}
+      </p>
+      {% endif %}
+      {% if siteDescription %}
+      <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4 sm:mb-6">
+        {{ siteDescription }}
+        <a href="/about/" class="text-accent-600 dark:text-accent-400 hover:underline font-medium">Read more &rarr;</a>
+      </p>
+      {% endif %}
+
+      {# Social Links #}
+      {% from "components/social-icon.njk" import socialIcon, socialIconColorClass %}
+      {% if heroConfig.showSocial != false and socialLinks %}
+      <div class="flex flex-wrap gap-3">
+        {% for link in socialLinks %}
+        <a
+          href="{{ link.url }}"
+          rel="{{ link.rel }} noopener"
+          class="inline-flex items-center gap-2 px-3 py-2 text-sm text-surface-700 dark:text-surface-300 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors"
+          target="_blank"
+        >
+          <span class="{{ socialIconColorClass(link.icon) }}">{{ socialIcon(link.icon, "w-5 h-5") }}</span>
+          <span class="text-sm font-medium">{{ link.name }}</span>
+        </a>
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+  </div>
+</section>
diff --git a/_includes/components/sections/posting-activity.njk b/_includes/components/sections/posting-activity.njk
new file mode 100644
index 0000000..976dba5
--- /dev/null
+++ b/_includes/components/sections/posting-activity.njk
@@ -0,0 +1,24 @@
+{# Posting Activity Section — configurable post-graph contribution grid #}
+{% set sectionConfig = section.config or {} %}
+{% set graphTitle = sectionConfig.title or "Posting Activity" %}
+
+{% if collections.posts and collections.posts.length %}
+<section class="mb-8 sm:mb-12">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">
+    {{ graphTitle }}
+  </h2>
+  {% set graphOptions = {} %}
+  {% if sectionConfig.years and sectionConfig.years.length %}
+    {% set graphOptions = { only: sectionConfig.years } %}
+  {% elif sectionConfig.limit %}
+    {% set graphOptions = { limit: sectionConfig.limit } %}
+  {% endif %}
+  {% postGraph collections.posts, graphOptions %}
+  <a href="/graph/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-4 inline-flex items-center gap-1">
+    View full history
+    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+    </svg>
+  </a>
+</section>
+{% endif %}
diff --git a/_includes/components/sections/recent-posts.njk b/_includes/components/sections/recent-posts.njk
new file mode 100644
index 0000000..6c89b14
--- /dev/null
+++ b/_includes/components/sections/recent-posts.njk
@@ -0,0 +1,257 @@
+{#
+  Recent Posts Section - displays latest posts from any collection
+  Rendered by homepage-builder when recent-posts section is configured
+  Supports type-aware rendering for likes, bookmarks, reposts, replies, photos
+#}
+
+{% set sectionConfig = section.config or {} %}
+{% set maxItems = sectionConfig.maxItems or 5 %}
+{% set showSummary = sectionConfig.showSummary if sectionConfig.showSummary is defined else true %}
+
+{% if collections.posts and collections.posts.length %}
+<section class="mb-8 sm:mb-12">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">
+    {{ sectionConfig.title or "Recent Posts" }}
+  </h2>
+
+  <div class="space-y-4">
+    {% for post in collections.posts | head(maxItems) %}
+      {# Detect post type from frontmatter properties #}
+      {% set likedUrl = post.data.likeOf or post.data.like_of %}
+      {% set bookmarkedUrl = post.data.bookmarkOf or post.data.bookmark_of %}
+      {% set repostedUrl = post.data.repostOf or post.data.repost_of %}
+      {% set replyToUrl = post.data.inReplyTo or post.data.in_reply_to %}
+      {% set hasPhotos = post.data.photo and post.data.photo.length %}
+
+      {# Determine border color by post type #}
+      {% set borderClass = "" %}
+      {% if likedUrl %}
+        {% set borderClass = "border-l-[3px] border-l-red-400 dark:border-l-red-500" %}
+      {% elif bookmarkedUrl %}
+        {% set borderClass = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
+      {% elif repostedUrl %}
+        {% set borderClass = "border-l-[3px] border-l-green-400 dark:border-l-green-500" %}
+      {% elif replyToUrl %}
+        {% set borderClass = "border-l-[3px] border-l-sky-400 dark:border-l-sky-500" %}
+      {% elif hasPhotos %}
+        {% set borderClass = "border-l-[3px] border-l-purple-400 dark:border-l-purple-500" %}
+      {% else %}
+        {% set borderClass = "border-l-[3px] border-l-surface-300 dark:border-l-surface-600" %}
+      {% endif %}
+
+    <article class="h-entry p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors {{ borderClass }}">
+
+      {% if likedUrl %}
+      {# ── Like card ── #}
+      <div class="flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-3 text-xs text-surface-500">
+            <span class="font-medium text-red-600 dark:text-red-400">Liked</span>
+            <time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time>
+          </div>
+          {{ likedUrl | unfurlCard | safe }}
+          <a class="u-like-of text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ likedUrl }}">
+            {{ likedUrl }}
+          </a>
+          {% if post.templateContent %}
+          <div class="e-content prose dark:prose-invert prose-sm mt-2 max-w-none line-clamp-3">
+            {{ post.templateContent | safe }}
+          </div>
+          {% endif %}
+          <a class="u-url text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+
+      {% elif bookmarkedUrl %}
+      {# ── Bookmark card ── #}
+      <div class="flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-3 text-xs text-surface-500">
+            <span class="font-medium text-amber-600 dark:text-amber-400">Bookmarked</span>
+            <time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time>
+          </div>
+          {% if post.data.title %}
+          <h3 class="p-name font-semibold text-surface-900 dark:text-surface-100 mt-1">
+            <a class="hover:text-accent-600 dark:hover:text-accent-400" href="{{ post.url }}">{{ post.data.title }}</a>
+          </h3>
+          {% endif %}
+          {{ bookmarkedUrl | unfurlCard | safe }}
+          <a class="u-bookmark-of text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ bookmarkedUrl }}">
+            {{ bookmarkedUrl }}
+          </a>
+          {% if post.templateContent %}
+          <div class="e-content prose dark:prose-invert prose-sm mt-2 max-w-none line-clamp-3">
+            {{ post.templateContent | safe }}
+          </div>
+          {% endif %}
+          <a class="u-url text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+
+      {% elif repostedUrl %}
+      {# ── Repost card ── #}
+      <div class="flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-3 text-xs text-surface-500">
+            <span class="font-medium text-green-600 dark:text-green-400">Reposted</span>
+            <time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time>
+          </div>
+          {{ repostedUrl | unfurlCard | safe }}
+          <a class="u-repost-of text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ repostedUrl }}">
+            {{ repostedUrl }}
+          </a>
+          {% if post.templateContent %}
+          <div class="e-content prose dark:prose-invert prose-sm mt-2 max-w-none line-clamp-3">
+            {{ post.templateContent | safe }}
+          </div>
+          {% endif %}
+          <a class="u-url text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+
+      {% elif replyToUrl %}
+      {# ── Reply card ── #}
+      <div class="flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-3 text-xs text-surface-500">
+            <span class="font-medium text-sky-600 dark:text-sky-400">In reply to</span>
+            <time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time>
+          </div>
+          {{ replyToUrl | unfurlCard | safe }}
+          <a class="u-in-reply-to text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ replyToUrl }}">
+            {{ replyToUrl }}
+          </a>
+          {% if post.templateContent %}
+          <div class="e-content prose dark:prose-invert prose-sm mt-2 max-w-none line-clamp-3">
+            {{ post.templateContent | safe }}
+          </div>
+          {% endif %}
+          <a class="u-url text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+
+      {% elif hasPhotos %}
+      {# ── Photo card ── #}
+      <div class="flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-3 text-xs text-surface-500">
+            <span class="font-medium text-purple-600 dark:text-purple-400">Photo</span>
+            <time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time>
+          </div>
+          <div class="photo-gallery mt-2">
+            {% for img in post.data.photo | head(2) %}
+              {% set photoUrl = img.url %}
+              {% if photoUrl and photoUrl[0] != '/' and 'http' not in photoUrl %}
+                {% set photoUrl = '/' + photoUrl %}
+              {% endif %}
+              <a href="{{ post.url }}" class="photo-link">
+                <img src="{{ photoUrl }}" alt="{{ img.alt | default('Photo') }}" class="u-photo rounded max-h-48 object-cover" loading="lazy" eleventy:ignore>
+              </a>
+            {% endfor %}
+          </div>
+          {% if post.templateContent %}
+          <div class="e-content prose dark:prose-invert prose-sm mt-2 max-w-none line-clamp-2">
+            {{ post.templateContent | safe }}
+          </div>
+          {% endif %}
+          <a class="u-url text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+
+      {% elif post.data.title %}
+      {# ── Article card ── #}
+      <h3 class="p-name font-semibold text-surface-900 dark:text-surface-100 mb-1">
+        <a href="{{ post.url }}" class="u-url hover:text-accent-600 dark:hover:text-accent-400">
+          {{ post.data.title }}
+        </a>
+      </h3>
+      {% if showSummary and post.templateContent %}
+      <p class="text-sm text-surface-600 dark:text-surface-400 mb-2 line-clamp-2">
+        {{ post.templateContent | striptags | truncate(250) }}
+      </p>
+      {% endif %}
+      <div class="flex items-center gap-3 text-xs text-surface-500">
+        <time class="dt-published" datetime="{{ post.date | isoDate }}">
+          {{ post.date | dateDisplay }}
+        </time>
+        {% if post.data.postType %}
+        <span class="px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded">
+          {{ post.data.postType }}
+        </span>
+        {% endif %}
+      </div>
+
+      {% else %}
+      {# ── Note card ── #}
+      <div class="flex items-center gap-3 text-xs text-surface-500 mb-2">
+        <a class="u-url" href="{{ post.url }}">
+          <time class="dt-published font-medium text-surface-500 dark:text-surface-400" datetime="{{ post.date | isoDate }}">
+            {{ post.date | dateDisplay }}
+          </time>
+        </a>
+        {% if post.data.postType %}
+        <span class="px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded">
+          {{ post.data.postType }}
+        </span>
+        {% endif %}
+      </div>
+      {% if post.templateContent %}
+      <div class="e-content prose dark:prose-invert prose-sm max-w-none line-clamp-3">
+        {{ post.templateContent | safe }}
+      </div>
+      {% endif %}
+      <a href="{{ post.url }}" class="text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block">
+        Permalink
+      </a>
+      {% endif %}
+
+    </article>
+    {% endfor %}
+  </div>
+
+  {% if sectionConfig.showViewAll != false %}
+  <a href="{{ sectionConfig.viewAllUrl or '/blog/' }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-4 inline-flex items-center gap-1">
+    {{ sectionConfig.viewAllText or "View all posts" }}
+    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+    </svg>
+  </a>
+  {% endif %}
+</section>
+{% endif %}
diff --git a/_includes/components/sidebar.njk b/_includes/components/sidebar.njk
new file mode 100644
index 0000000..a6378eb
--- /dev/null
+++ b/_includes/components/sidebar.njk
@@ -0,0 +1,280 @@
+{# Sidebar — for blog listing pages (/blog/, /notes/, /articles/...) #}
+{# Data-driven when homepageConfig.blogListingSidebar is configured, otherwise falls back to default widgets #}
+{# Each widget is wrapped in a collapsible container with localStorage persistence #}
+{% from "components/icon.njk" import icon %}
+
+{% if homepageConfig and homepageConfig.blogListingSidebar and homepageConfig.blogListingSidebar.length %}
+  {# === Data-driven mode: render configured widgets === #}
+  {% for widget in homepageConfig.blogListingSidebar %}
+
+    {# Resolve widget title #}
+    {% if widget.type == "search" %}{% set widgetTitle = "Search" %}
+    {% elif widget.type == "social-activity" %}{% set widgetTitle = "Social Activity" %}
+    {% elif widget.type == "github-repos" %}{% set widgetTitle = "GitHub" %}
+    {% elif widget.type == "funkwhale" %}{% set widgetTitle = "Listening" %}
+    {% elif widget.type == "recent-posts" %}{% set widgetTitle = "Recent Posts" %}
+    {% elif widget.type == "blogroll" %}{% set widgetTitle = "Blogroll" %}
+    {% elif widget.type == "feedland" %}{% set widgetTitle = "FeedLand" %}
+    {% elif widget.type == "categories" %}{% set widgetTitle = "Categories" %}
+    {% elif widget.type == "webmentions" %}{% set widgetTitle = "Webmentions" %}
+    {% elif widget.type == "recent-comments" %}{% set widgetTitle = "Recent Comments" %}
+    {% elif widget.type == "fediverse-follow" %}{% set widgetTitle = "Fediverse" %}
+    {% elif widget.type == "author-card" %}{% set widgetTitle = "Author" %}
+    {% elif widget.type == "author-card-compact" %}{% set widgetTitle = "Author" %}
+    {% elif widget.type == "subscribe" %}{% set widgetTitle = "Subscribe" %}
+    {% elif widget.type == "custom-html" %}{% set widgetTitle = (widget.config.title if widget.config and widget.config.title) or "Custom" %}
+    {% else %}{% set widgetTitle = widget.type %}
+    {% endif %}
+
+    {# Resolve widget icon and accent border #}
+    {% if widget.type == "social-activity" %}
+      {% set widgetIcon = "globe" %}{% set widgetIconClass = "w-5 h-5 text-[#0085ff]" %}{% set widgetBorder = "border-l-[3px] border-l-[#0085ff]" %}
+    {% elif widget.type == "github-repos" %}
+      {% set widgetIcon = "github" %}{% set widgetIconClass = "w-5 h-5 text-surface-800 dark:text-surface-200" %}{% set widgetBorder = "border-l-[3px] border-l-surface-400 dark:border-l-surface-500" %}
+    {% elif widget.type == "funkwhale" %}
+      {% set widgetIcon = "headphones" %}{% set widgetIconClass = "w-5 h-5 text-purple-500" %}{% set widgetBorder = "border-l-[3px] border-l-purple-400 dark:border-l-purple-500" %}
+    {% elif widget.type == "blogroll" %}
+      {% set widgetIcon = "book-open" %}{% set widgetIconClass = "w-5 h-5 text-amber-500" %}{% set widgetBorder = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
+    {% elif widget.type == "feedland" %}
+      {% set widgetIcon = "rss" %}{% set widgetIconClass = "w-5 h-5 text-amber-500" %}{% set widgetBorder = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
+    {% elif widget.type == "subscribe" %}
+      {% set widgetIcon = "rss" %}{% set widgetIconClass = "w-5 h-5 text-orange-500" %}{% set widgetBorder = "border-l-[3px] border-l-orange-400 dark:border-l-orange-500" %}
+    {% elif widget.type == "fediverse-follow" %}
+      {% set widgetIcon = "user-plus" %}{% set widgetIconClass = "w-5 h-5 text-[#a730b8]" %}{% set widgetBorder = "border-l-[3px] border-l-[#a730b8]" %}
+    {% elif widget.type == "author-card" or widget.type == "author-card-compact" %}
+      {% set widgetIcon = "user" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "recent-posts" %}
+      {% set widgetIcon = "list" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "categories" %}
+      {% set widgetIcon = "tag" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "recent-comments" %}
+      {% set widgetIcon = "chat" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "search" %}
+      {% set widgetIcon = "search" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% elif widget.type == "webmentions" %}
+      {% set widgetIcon = "share" %}{% set widgetIconClass = "w-5 h-5 text-surface-500" %}{% set widgetBorder = "" %}
+    {% else %}
+      {% set widgetIcon = "" %}{% set widgetIconClass = "" %}{% set widgetBorder = "" %}
+    {% endif %}
+
+    {% set widgetKey = "listing-widget-" + widget.type + "-" + loop.index0 %}
+    {% set defaultOpen = "true" if loop.index0 < 3 else "false" %}
+
+    {# Collapsible wrapper — Alpine.js handles toggle, localStorage persists state #}
+    <div
+      class="widget-collapsible mb-4"
+      x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : {{ defaultOpen }} }"
+    >
+      <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden {{ widgetBorder }}">
+        <button
+          class="widget-header w-full p-4"
+          @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)"
+          :aria-expanded="open ? 'true' : 'false'"
+        >
+          <h3 class="widget-title font-bold text-lg flex items-center gap-2">
+            {% if widgetIcon %}{{ icon(widgetIcon, widgetIconClass) }}{% endif %}
+            {{ widgetTitle }}
+          </h3>
+          <svg
+            class="widget-chevron"
+            :class="open && 'rotate-180'"
+            fill="none" stroke="currentColor" viewBox="0 0 24 24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </button>
+
+        <div
+          x-show="open"
+          x-transition:enter="transition ease-out duration-150"
+          x-transition:enter-start="opacity-0"
+          x-transition:enter-end="opacity-100"
+          x-transition:leave="transition ease-in duration-100"
+          x-transition:leave-start="opacity-100"
+          x-transition:leave-end="opacity-0"
+          x-cloak
+        >
+          {# Widget content — inner .widget provides padding, inner title hidden by CSS #}
+          {% if widget.type == "author-card" %}
+            {% include "components/widgets/author-card.njk" %}
+          {% elif widget.type == "author-card-compact" %}
+            {% include "components/widgets/author-card-compact.njk" %}
+          {% elif widget.type == "social-activity" %}
+            {% include "components/widgets/social-activity.njk" %}
+          {% elif widget.type == "github-repos" %}
+            {% include "components/widgets/github-repos.njk" %}
+          {% elif widget.type == "funkwhale" %}
+            {% include "components/widgets/funkwhale.njk" %}
+          {% elif widget.type == "recent-posts" %}
+            {% include "components/widgets/recent-posts.njk" %}
+          {% elif widget.type == "blogroll" %}
+            {% if blogrollStatus and blogrollStatus.source == "indiekit" %}
+            {% include "components/widgets/blogroll.njk" %}
+            {% endif %}
+          {% elif widget.type == "feedland" %}
+            {% include "components/widgets/feedland.njk" %}
+          {% elif widget.type == "categories" %}
+            {% include "components/widgets/categories.njk" %}
+          {% elif widget.type == "subscribe" %}
+            {% include "components/widgets/subscribe.njk" %}
+          {% elif widget.type == "recent-comments" %}
+            {% include "components/widgets/recent-comments.njk" %}
+          {% elif widget.type == "search" %}
+            {% include "components/widgets/search.njk" %}
+          {% elif widget.type == "webmentions" %}
+            {% include "components/widgets/webmentions.njk" %}
+          {% elif widget.type == "fediverse-follow" %}
+            {% include "components/widgets/fediverse-follow.njk" %}
+          {% elif widget.type == "custom-html" %}
+            {% set wConfig = widget.config or {} %}
+            <is-land on:visible>
+            <div class="widget">
+              {% if wConfig.content %}
+              <div class="prose dark:prose-invert prose-sm max-w-none">
+                {{ wConfig.content | safe }}
+              </div>
+              {% endif %}
+            </div>
+            </is-land>
+          {% else %}
+            <!-- Unknown widget type: {{ widget.type }} -->
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
+  {% endfor %}
+{% else %}
+  {# === Fallback: current hardcoded sidebar (backward compatibility) === #}
+  {# Each widget wrapped in collapsible container #}
+
+  {# Author Card (h-card) — always shown #}
+  {% set widgetKey = "listing-fb-author-card" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("user", "w-5 h-5 text-surface-500") }} Author</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/author-card.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Social Activity — Bluesky/Mastodon feeds #}
+  {% set widgetKey = "listing-fb-social-activity" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden border-l-[3px] border-l-[#0085ff]">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("globe", "w-5 h-5 text-[#0085ff]") }} Social Activity</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/social-activity.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# GitHub Repos #}
+  {% set widgetKey = "listing-fb-github-repos" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : true }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden border-l-[3px] border-l-surface-400 dark:border-l-surface-500">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("github", "w-5 h-5 text-surface-800 dark:text-surface-200") }} GitHub</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/github-repos.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Funkwhale — Now Playing / Listening Stats #}
+  {% set widgetKey = "listing-fb-funkwhale" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden border-l-[3px] border-l-purple-400 dark:border-l-purple-500">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("headphones", "w-5 h-5 text-purple-500") }} Listening</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/funkwhale.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Recent Posts #}
+  {% set widgetKey = "listing-fb-recent-posts" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("list", "w-5 h-5 text-surface-500") }} Recent Posts</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/recent-posts.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Blogroll — only when backend is available #}
+  {% if blogrollStatus and blogrollStatus.source == "indiekit" %}
+  {% set widgetKey = "listing-fb-blogroll" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden border-l-[3px] border-l-amber-400 dark:border-l-amber-500">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("book-open", "w-5 h-5 text-amber-500") }} Blogroll</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/blogroll.njk" %}
+      </div>
+    </div>
+  </div>
+  {% endif %}
+
+  {# FeedLand — only when backend is available #}
+  {% if blogrollStatus and blogrollStatus.source == "indiekit" %}
+  {% set widgetKey = "listing-fb-feedland" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden border-l-[3px] border-l-amber-400 dark:border-l-amber-500">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("rss", "w-5 h-5 text-amber-500") }} FeedLand</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/feedland.njk" %}
+      </div>
+    </div>
+  </div>
+  {% endif %}
+
+  {# Recent Comments #}
+  {% set widgetKey = "listing-fb-recent-comments" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("chat", "w-5 h-5 text-surface-500") }} Recent Comments</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/recent-comments.njk" %}
+      </div>
+    </div>
+  </div>
+
+  {# Categories/Tags #}
+  {% set widgetKey = "listing-fb-categories" %}
+  <div class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : false }">
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
+      <button class="widget-header w-full p-4" @click="open = !open; localStorage.setItem('{{ widgetKey }}', open)" :aria-expanded="open ? 'true' : 'false'">
+        <h3 class="widget-title font-bold text-lg flex items-center gap-2">{{ icon("tag", "w-5 h-5 text-surface-500") }} Categories</h3>
+        <svg class="widget-chevron" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+      </button>
+      <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
+        {% include "components/widgets/categories.njk" %}
+      </div>
+    </div>
+  </div>
+{% endif %}
diff --git a/_includes/components/social-icon.njk b/_includes/components/social-icon.njk
new file mode 100644
index 0000000..54638b2
--- /dev/null
+++ b/_includes/components/social-icon.njk
@@ -0,0 +1,131 @@
+{#
+  Social Icon Macro
+  Usage: {% from "components/social-icon.njk" import socialIcon, socialIconColorClass %}
+         {{ socialIcon("github", "w-5 h-5") }}
+         <span class="{{ socialIconColorClass('github') }}">{{ socialIcon("github", "w-5 h-5") }}</span>
+
+  SVG paths sourced from Simple Icons (simpleicons.org) - CC0 1.0 Universal
+  All icons render at 24x24 viewBox with fill="currentColor"
+  Brand colors from official brand guidelines
+#}
+
+{# Returns Tailwind color classes for an icon's brand color (light + dark) #}
+{% macro socialIconColorClass(name) %}
+{%- if name == "activitypub" -%}text-[#f1027e]
+{%- elif name == "github" -%}text-[#181717] dark:text-[#e6edf3]
+{%- elif name == "gitlab" -%}text-[#FC6D26]
+{%- elif name == "forgejo" -%}text-[#609926]
+{%- elif name == "codeberg" -%}text-[#2185D0]
+{%- elif name == "mastodon" -%}text-[#6364FF]
+{%- elif name == "bluesky" -%}text-[#0085FF]
+{%- elif name == "pixelfed" -%}text-[#6C42C9]
+{%- elif name == "linkedin" -%}text-[#0A66C2]
+{%- elif name == "twitter" -%}text-[#000000] dark:text-[#e7e9ea]
+{%- elif name == "threads" -%}text-[#000000] dark:text-[#f5f5f5]
+{%- elif name == "youtube" -%}text-[#FF0000]
+{%- elif name == "twitch" -%}text-[#9146FF]
+{%- elif name == "spotify" -%}text-[#1DB954]
+{%- elif name == "bandcamp" -%}text-[#629aa9]
+{%- elif name == "soundcloud" -%}text-[#FF5500]
+{%- elif name == "rss" -%}text-[#F26522]
+{%- elif name == "discord" -%}text-[#5865F2]
+{%- elif name == "signal" -%}text-[#3A76F0]
+{%- elif name == "telegram" -%}text-[#26A5E4]
+{%- elif name == "matrix" -%}text-[#000000] dark:text-[#e6e6e6]
+{%- elif name == "reddit" -%}text-[#FF4500]
+{%- elif name == "hackernews" -%}text-[#FF6600]
+{%- elif name == "funkwhale" -%}text-[#0D47A1]
+{%- elif name == "lastfm" -%}text-[#D51007]
+{%- elif name == "peertube" -%}text-[#F1680D]
+{%- elif name == "bookwyrm" -%}text-[#002200] dark:text-[#78b578]
+{%- elif name == "indieweb" -%}text-[#FF5C00]
+{%- elif name == "email" -%}text-surface-600 dark:text-surface-400
+{%- elif name == "website" -%}text-surface-600 dark:text-surface-400
+{%- elif name == "keybase" -%}text-[#33A0FF]
+{%- elif name == "orcid" -%}text-[#A6CE39]
+{%- elif name == "flickr" -%}text-[#0063DC]
+{%- elif name == "xmpp" -%}text-[#002B5C] dark:text-[#5badff]
+{%- elif name == "sourcehut" -%}text-[#000000] dark:text-[#e0e0e0]
+{%- elif name == "facebook" -%}text-[#0866FF]
+{%- elif name == "instagram" -%}text-[#E4405F]
+{%- else -%}text-surface-600 dark:text-surface-400
+{%- endif -%}
+{% endmacro %}
+
+{% macro socialIcon(name, cssClass) %}
+{%- if name == "github" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+{%- elif name == "gitlab" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="m23.6 9.593-.033-.086L20.3.98a.851.851 0 0 0-.336-.382.859.859 0 0 0-.996.06.858.858 0 0 0-.285.398l-2.212 6.777H7.53L5.317 1.056a.857.857 0 0 0-.285-.398.86.86 0 0 0-.997-.06.854.854 0 0 0-.335.382L.433 9.502l-.032.09a6.062 6.062 0 0 0 2.012 7.003l.01.008.028.02 4.984 3.73 2.466 1.866 1.502 1.135a1.012 1.012 0 0 0 1.22 0l1.503-1.135 2.465-1.866 5.012-3.75.013-.01a6.065 6.065 0 0 0 2.005-6.998z"></path></svg>
+{%- elif name == "forgejo" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.1205 0-2.093-.6354-2.5764-1.5652H12.58c-1.7857 0-3.2323 1.4466-3.2323 3.2324v2.3813a6.1532 6.1532 0 0 1 3.2323-.9143h1.6209c.4834-.9298 1.456-1.5652 2.5764-1.5652 1.6018 0 2.9004 1.2986 2.9004 2.9004 0 1.6019-1.2986 2.9005-2.9004 2.9005-1.1205 0-2.093-.6354-2.5764-1.5653H12.58a3.2331 3.2331 0 0 0-3.2323 3.2324v.4648a2.9004 2.9004 0 1 1-1.7704 0v-7.499a3.222 3.222 0 0 0-.4747-1.6674A2.8932 2.8932 0 0 1 4.3223 2.9005C4.3223 1.2986 5.621 0 7.2228 0c1.6019 0 2.9004 1.2986 2.9004 2.9005 0 1.1303-.6474 2.1101-1.5908 2.588a3.232 3.232 0 0 0 1.0156.2771V5.801h2.0323c.4834-.9298 1.456-1.5652 2.5764-1.5652h1.6209C16.2597.6354 17.2323 0 18.3528 0zM7.2228 1.1302a1.7703 1.7703 0 1 0 0 3.5406 1.7703 1.7703 0 0 0 0-3.5406zm9.5545 0a1.7703 1.7703 0 1 0 0 3.5406 1.7703 1.7703 0 0 0 0-3.5406zm0 6.2389a1.7703 1.7703 0 1 0 0 3.5406 1.7703 1.7703 0 0 0 0-3.5406zM8.1079 19.329a1.7703 1.7703 0 1 0-1.7703 1.7703A1.7703 1.7703 0 0 0 8.108 19.329z"></path></svg>
+{%- elif name == "codeberg" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.187 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z"></path></svg>
+{%- elif name == "sourcehut" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm0 2.4c5.304 0 9.6 4.296 9.6 9.6s-4.296 9.6-9.6 9.6S2.4 17.304 2.4 12 6.696 2.4 12 2.4zm0 1.872A7.728 7.728 0 0 0 4.272 12 7.728 7.728 0 0 0 12 19.728 7.728 7.728 0 0 0 19.728 12 7.728 7.728 0 0 0 12 4.272z"></path></svg>
+{%- elif name == "linkedin" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg>
+{%- elif name == "bluesky" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"></path></svg>
+{%- elif name == "mastodon" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12v6.406z"></path></svg>
+{%- elif name == "activitypub" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.09 4.43L24 10.73v2.51L13.09 19.58v-2.51L21.83 12 13.09 6.98v-2.55zM13.09 9.49L17.44 12l-4.35 2.51V9.49z"/><path d="M10.91 4.43L0 10.73v2.51l8.74-5.03v10.09l2.18 1.28V4.43zM6.56 12L2.18 14.51l4.35 2.51V12z"/></svg>
+{%- elif name == "pixelfed" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 14.842c-.46 2.838-3.074 4.742-5.912 4.282a5.15 5.15 0 0 1-1.297-.416v1.55a.615.615 0 0 1-.615.615H7.363a.615.615 0 0 1-.615-.615V8.435a.615.615 0 0 1 .615-.615h2.707a.615.615 0 0 1 .615.615v.34a5.15 5.15 0 0 1 1.297-.416c2.838-.46 5.452 1.444 5.912 4.282a5.152 5.152 0 0 1 0 2.201zm-4.037-.474a2.36 2.36 0 1 0-.742-4.662 2.36 2.36 0 0 0 .742 4.662z"></path></svg>
+{%- elif name == "twitter" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"></path></svg>
+{%- elif name == "facebook" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 1.09.044 1.613.115V7.98c-.164-.018-.46-.027-.824-.027-1.171 0-1.623.443-1.623 1.596v2.495h2.332l-.4 3.667h-1.932v7.98z"></path></svg>
+{%- elif name == "instagram" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.668 1.0745-1.3364 1.3803-2.1272.2954-.7642.4957-1.6362.552-2.9141.0564-1.2776.0689-1.6882.0626-4.9473-.0062-3.2586-.02-3.6672-.0826-4.9473-.0607-1.2767-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1208 16.9244.0645 15.6471.0083 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.56-.2177-.96-.4774-1.3802-.8952-.4178-.4178-.6774-.8186-.8953-1.378-.1625-.4234-.3567-1.0587-.408-2.2282-.0553-1.2654-.0678-1.6455-.0694-4.851-.0015-3.2053.0104-3.5854.0626-4.852.051-1.17.2453-1.8053.408-2.2287.218-.5606.4774-.9599.8952-1.3802.4178-.4178.8186-.6774 1.378-.8952.4235-.1625 1.0588-.3567 2.2282-.408 1.2654-.0554 1.6456-.068 4.8513-.0694 3.2053-.0016 3.5854.0104 4.8519.0626 1.1696.051 1.8053.2452 2.2282.408.5609.218.96.4774 1.3807.8952.4178.4179.6774.8186.8952 1.3782.163.4234.357 1.0587.408 2.2282.0554 1.2654.0679 1.6456.0695 4.852.0015 3.2053-.0104 3.5854-.0626 4.852-.0512 1.17-.2454 1.8053-.4081 2.2288-.2177.5605-.4773.96-.8952 1.3802-.4178.4178-.8185.6774-1.3781.8952-.4235.1625-1.0588.3566-2.2283.408-1.2654.0553-1.6455.068-4.8512.0694-3.2057.0015-3.5858-.0104-4.852-.0627"></path></svg>
+{%- elif name == "threads" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.59 12c.025 3.083.718 5.496 2.057 7.164 1.432 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.96-.065-1.187.408-2.264 1.332-3.03.793-.657 1.858-1.054 3.166-1.18.938-.09 1.864-.035 2.773.162-.034-.75-.173-1.355-.414-1.814-.34-.645-.93-1.007-1.753-1.075-.683-.057-1.324.073-1.758.357a1.75 1.75 0 0 0-.612.594l-1.826-1.03c.397-.66 1.002-1.195 1.752-1.547.95-.446 2.09-.636 3.168-.527 1.422.149 2.534.72 3.305 1.699.637.81.988 1.86 1.053 3.13.365.194.706.414 1.02.66 1.183.93 2.04 2.2 2.48 3.686.627 2.128.445 4.582-1.265 6.278-1.845 1.83-4.175 2.59-7.33 2.61z"></path></svg>
+{%- elif name == "youtube" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path></svg>
+{%- elif name == "twitch" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z"></path></svg>
+{%- elif name == "flickr" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M0 12c0-3.314 2.686-6 6-6s6 2.686 6 6-2.686 6-6 6-6-2.686-6-6zm12 0c0-3.314 2.686-6 6-6s6 2.686 6 6-2.686 6-6 6-6-2.686-6-6z"></path></svg>
+{%- elif name == "spotify" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"></path></svg>
+{%- elif name == "bandcamp" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M0 18.75l7.437-13.5H24l-7.438 13.5z"></path></svg>
+{%- elif name == "soundcloud" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M1.175 12.225c-.051 0-.094.046-.101.1l-.233 2.154.233 2.105c.007.058.05.098.101.098.05 0 .09-.04.099-.098l.255-2.105-.27-2.154c-.009-.06-.05-.1-.1-.1m-.899.828c-.06 0-.091.037-.104.094L0 14.479l.172 1.308c.013.06.045.094.104.094.057 0 .09-.037.104-.093l.2-1.31-.2-1.327c-.015-.06-.047-.096-.104-.096m1.79-1.29c-.065 0-.109.048-.116.109l-.222 2.6.222 2.507c.007.065.051.107.116.107s.109-.042.116-.107l.253-2.507-.253-2.6c-.007-.065-.051-.109-.116-.109m.9-.435c-.073 0-.121.05-.129.119l-.21 3.034.21 2.768c.008.073.056.12.13.12.072 0 .12-.047.128-.12l.237-2.768-.237-3.034c-.008-.073-.056-.12-.128-.12m.903-.19c-.082 0-.133.056-.14.134l-.2 3.225.2 2.882c.008.081.06.136.14.136.077 0 .131-.055.139-.136l.228-2.882-.228-3.225c-.008-.082-.062-.134-.14-.134m.895-.155c-.09 0-.145.063-.15.15l-.193 3.38.193 2.962c.006.09.06.152.15.152.09 0 .147-.063.152-.152l.217-2.962-.217-3.38c-.005-.09-.062-.15-.152-.15m.905-.13c-.098 0-.155.068-.16.163l-.183 3.51.183 3.015c.005.098.062.163.16.163.096 0 .156-.065.16-.163l.207-3.015-.207-3.51c-.004-.098-.064-.163-.16-.163m.902-.104c-.105 0-.167.073-.171.176l-.172 3.614.172 3.049c.004.105.066.176.17.176.107 0 .169-.071.175-.176l.194-3.049-.194-3.614c-.006-.105-.068-.176-.175-.176m.912-.062c-.112 0-.176.08-.181.19l-.163 3.677.163 3.065c.005.112.07.189.18.189.112 0 .177-.077.184-.189l.183-3.065-.183-3.677c-.007-.112-.072-.19-.184-.19m.907-.042c-.12 0-.186.087-.191.203l-.153 3.719.153 3.073c.005.12.071.203.19.203.12 0 .189-.083.194-.203l.175-3.073-.174-3.719c-.006-.12-.074-.203-.194-.203m5.068 1.145c-.598 0-1.157.164-1.638.449-.263-2.96-2.782-5.27-5.834-5.27-.59 0-1.163.097-1.697.269-.211.068-.267.137-.267.27v10.379c0 .14.098.252.232.268h9.204c1.645 0 2.977-1.328 2.977-2.97.002-1.643-1.33-2.97-2.977-2.97"></path></svg>
+{%- elif name == "rss" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"></path></svg>
+{%- elif name == "matrix" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.488.32.45.214.773.553.96 1.016.293-.382.673-.717 1.14-1.006.468-.288.986-.432 1.548-.432.425 0 .819.07 1.182.21.365.14.675.363.93.662.256.3.456.67.6 1.11.144.445.216.98.216 1.61v6.33h-2.07v-5.45c0-.392-.015-.745-.048-1.054a2.078 2.078 0 0 0-.225-.76 1.096 1.096 0 0 0-.486-.46c-.212-.1-.49-.155-.836-.155-.346 0-.628.07-.848.21-.22.143-.39.328-.513.555a2.252 2.252 0 0 0-.268.735 5.013 5.013 0 0 0-.072.85v5.53h-2.07v-5.27c0-.384-.008-.742-.027-1.073a2.354 2.354 0 0 0-.182-.787c-.105-.238-.268-.418-.486-.548-.22-.128-.508-.195-.868-.195-.138 0-.318.04-.54.12a1.663 1.663 0 0 0-.58.375 2.04 2.04 0 0 0-.46.66c-.12.27-.18.607-.18 1.013v5.705h-2.07V7.81zm16.045 15.64V.55H22.05V0H24v24h-2.28v-.55z"></path></svg>
+{%- elif name == "discord" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path></svg>
+{%- elif name == "signal" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.373 0 0 5.373 0 12c0 2.917 1.04 5.59 2.77 7.67l-.93 3.41 3.52-.93A11.95 11.95 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm5.95 16.77c-.247.694-1.424 1.282-1.985 1.342-.506.054-1.14.076-1.84-.115a16.86 16.86 0 0 1-1.666-.615c-2.932-1.265-4.847-4.222-4.994-4.418-.147-.196-1.2-1.596-1.2-3.044 0-1.449.759-2.161 1.028-2.457.269-.296.586-.37.782-.37s.391.004.562.01c.18.008.423-.069.661.504.247.593.838 2.05.912 2.198.073.148.122.32.024.517-.098.196-.147.32-.294.492-.147.172-.31.385-.443.516-.147.148-.3.308-.13.604.173.296.767 1.266 1.648 2.05 1.131.408 1.987.752 2.273.836.286.084.453.05.619-.03.167-.08.712-.412.812-.812s.2-.742.133-.812c-.068-.07-.25-.137-.524-.275s-1.622-.8-1.874-.892c-.252-.09-.436-.136-.619.137-.184.272-.712.892-.872 1.074-.16.182-.321.204-.595.068-.274-.136-1.157-.426-2.204-1.36-.814-.726-1.364-1.623-1.524-1.896-.16-.272-.017-.42.12-.555.123-.121.274-.316.412-.474.137-.159.183-.272.274-.454.091-.181.046-.34-.023-.476-.068-.136-.619-1.492-.849-2.042-.224-.537-.45-.464-.619-.473-.16-.007-.343-.01-.526-.01z"></path></svg>
+{%- elif name == "telegram" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.479.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"></path></svg>
+{%- elif name == "xmpp" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.753 3.094c.006 1.258.106 3.48.906 5.988.467 1.462 1.237 2.944 2.059 4.281C5.591 15.05 4.237 16.972 3.481 18.9c-.8 2.039-1.058 3.726-1.097 5.006.5-.12.985-.274 1.46-.447.05-1.08.326-2.486.964-4.06.544-1.342 1.45-2.79 2.434-4.152.452.594.916 1.166 1.39 1.674 1.397 1.503 2.862 2.58 4.368 3.32 1.506-.74 2.971-1.817 4.368-3.32.474-.508.938-1.08 1.39-1.674.984 1.362 1.89 2.81 2.434 4.152.638 1.574.914 2.98.964 4.06.475.173.96.326 1.46.448-.039-1.28-.298-2.968-1.097-5.007-.756-1.928-2.11-3.85-3.237-5.537.822-1.337 1.592-2.82 2.059-4.28.8-2.509.9-4.731.906-5.989a17.2 17.2 0 0 0-1.494.518c-.017 1.254-.203 3.09-.84 5.088-.395 1.24-1.07 2.539-1.79 3.759a26 26 0 0 0-1.39-1.75C14.39 9.494 13.095 8.2 12 7.47c-1.095.73-2.39 2.024-3.52 3.542-.468.626-.934 1.282-1.39 1.75-.72-1.22-1.395-2.52-1.79-3.759-.637-1.999-.823-3.834-.84-5.088A17.2 17.2 0 0 0 2.966 3.4c.265-.1.527-.207.787-.306z"></path></svg>
+{%- elif name == "reddit" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm5.99 13.915c-.03.412-.18.804-.44 1.122A4.612 4.612 0 0 1 12 18.2a4.612 4.612 0 0 1-5.55-3.163c-.26-.318-.41-.71-.44-1.122a1.834 1.834 0 0 1 1.39-1.863 1.834 1.834 0 0 1 1.803.406 6.07 6.07 0 0 1 2.797-.69 6.07 6.07 0 0 1 2.797.69 1.834 1.834 0 0 1 3.193 1.457zm-8.617 1.29a1.318 1.318 0 1 0 0-2.636 1.318 1.318 0 0 0 0 2.636zm4.053 1.546a3.39 3.39 0 0 1-2.426.773 3.39 3.39 0 0 1-2.426-.773.4.4 0 1 1 .506-.62 2.59 2.59 0 0 0 1.92.592 2.59 2.59 0 0 0 1.92-.592.4.4 0 0 1 .506.62zm.564-1.546a1.318 1.318 0 1 0 0-2.636 1.318 1.318 0 0 0 0 2.636zM16.9 7.833a1.364 1.364 0 1 1 0-2.728 1.364 1.364 0 0 1 0 2.728zm-2.247-.94L12.7 5.2a.658.658 0 0 0-.767-.11l-2.459 1.23a.658.658 0 0 0 .585 1.178l2.092-1.046 1.564 1.377a.658.658 0 0 0 .938-.936Z"></path></svg>
+{%- elif name == "hackernews" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M0 24V0h24v24H0zM6.951 5.896l4.112 7.708v5.064h1.583v-4.972l4.148-7.799h-1.749l-2.457 4.875c-.372.745-.688 1.434-.688 1.434s-.297-.708-.651-1.434L8.831 5.896z"></path></svg>
+{%- elif name == "keybase" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.446 21.371c0 .528-.428.957-.957.957s-.957-.43-.957-.957.428-.957.957-.957.957.43.957.957zm5.922-.957a.958.958 0 0 0-.957.957c0 .528.429.957.957.957s.957-.43.957-.957a.958.958 0 0 0-.957-.957zm-5.922-4.471c-.528 0-.957.43-.957.957s.428.957.957.957.957-.43.957-.957-.428-.957-.957-.957zm5.922 0a.958.958 0 0 0-.957.957c0 .528.429.957.957.957s.957-.43.957-.957a.958.958 0 0 0-.957-.957zm4.79-10.835a3.467 3.467 0 0 0-.64-.047c-1.222 0-2.283.62-2.896 1.583a.958.958 0 0 1-1.643-.683V3.093A3.093 3.093 0 0 0 12.907 0h-.041C10.824.014 9 1.87 9 3.912v2.049a.957.957 0 0 1-1.643.682C6.744 5.58 5.683 4.96 4.461 4.96c-.223 0-.44.018-.649.047A3.463 3.463 0 0 0 .966 8.44c0 .116.005.232.016.347a.958.958 0 0 0 1.907-.194 1.55 1.55 0 0 1-.007-.153c0-.856.7-1.547 1.556-1.547.261 0 .507.064.722.178.428.226.722.67.722 1.178v.57a.96.96 0 0 0 .957.958h.046c.527 0 .955-.428.955-.956v-.572c0-.508.294-.952.722-1.178a1.551 1.551 0 0 1 2.278 1.37v1.381a.958.958 0 0 0 1.915 0V9.44a1.551 1.551 0 0 1 2.278-1.37c.428.226.722.67.722 1.178v.572a.957.957 0 0 0 1.915-.001v-.57c0-.508.295-.952.722-1.178.216-.114.462-.178.722-.178.857 0 1.556.691 1.556 1.547 0 .052-.003.103-.007.153a.958.958 0 0 0 1.907.194c.01-.115.016-.231.016-.347a3.463 3.463 0 0 0-2.846-3.433z"></path></svg>
+{%- elif name == "orcid" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zM7.369 4.378c.525 0 .947.431.947.947s-.422.947-.947.947a.95.95 0 0 1-.947-.947c0-.525.422-.947.947-.947zm-.722 3.038h1.444v10.041H6.647V7.416zm3.562 0h3.9c3.712 0 5.344 2.653 5.344 5.025 0 2.578-2.016 5.025-5.325 5.025h-3.919V7.416zm1.444 1.303v7.444h2.297c3.272 0 4.05-2.381 4.05-3.722 0-2.016-1.397-3.722-3.975-3.722h-2.372z"></path></svg>
+{%- elif name == "indieweb" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.766 7.051v3.718h3.372v1.885h-3.372v4.278l3.781-4.278h2.537l-4.908 5.376L19.084 24h-2.59l-3.728-4.337V24H10.77v-4.337L7.042 24H4.452l4.908-5.97-4.908-5.376h2.537l3.781 4.278V9.654H7.398V7.77h3.372V3.42L7.042 7.77H4.452L12.766 0l8.314 7.77h-2.59z"></path></svg>
+{%- elif name == "website" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"></path></svg>
+{%- elif name == "email" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></svg>
+{%- elif name == "funkwhale" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm4.243 16.243a6 6 0 1 1 0-8.486 1 1 0 0 1-1.414 1.414 4 4 0 1 0 0 5.658 1 1 0 0 1 1.414 1.414z"></path></svg>
+{%- elif name == "lastfm" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.584 17.21l-.88-2.392s-1.43 1.594-3.573 1.594c-1.897 0-3.244-1.649-3.244-4.288 0-3.382 1.704-4.591 3.381-4.591 2.42 0 3.189 1.567 3.849 3.574l.88 2.749c.88 2.666 2.529 4.81 7.284 4.81 3.409 0 5.718-1.044 5.718-3.793 0-2.227-1.265-3.381-3.63-3.931l-1.758-.385c-1.21-.275-1.567-.77-1.567-1.594 0-.935.742-1.484 1.952-1.484 1.32 0 2.034.495 2.144 1.677l2.749-.33c-.22-2.474-1.924-3.492-4.729-3.492-2.474 0-4.893.935-4.893 3.932 0 1.87.907 3.051 3.189 3.601l1.87.44c1.402.33 1.869.825 1.869 1.648 0 1.044-.99 1.484-2.86 1.484-2.776 0-3.932-1.457-4.59-3.464l-.907-2.75c-1.155-3.573-2.997-4.893-6.653-4.893C2.144 5.333 0 7.89 0 12.233c0 4.18 2.144 6.434 5.993 6.434 3.106 0 4.591-1.457 4.591-1.457z"></path></svg>
+{%- elif name == "peertube" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0L1.104 6v12L12 24l10.896-6V6zm0 2.416L20.584 7.5v9L12 21.584 3.416 16.5v-9z"></path><path d="M12 6.832L7.208 9.5v5L12 17.168l4.792-2.668v-5z"></path></svg>
+{%- elif name == "bookwyrm" -%}
+<svg class="{{ cssClass }}" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.01 2.4C8.574 2.4 5.41 3.837 3.86 5.614c.052.052.098.113.138.182L6.76 10.99c.33.57.121 1.298-.45 1.628s-1.298.121-1.628-.45L1.92 6.974c-.019-.032-.033-.065-.048-.098C.714 8.63 0 10.598 0 12.36c0 1.254.332 2.3.977 3.14.62.808 1.52 1.406 2.606 1.808a.478.478 0 0 1 .295.606.478.478 0 0 1-.606.295C1.94 17.7.87 16.976.134 16.018c-.03.167-.044.337-.044.51 0 .774.239 1.473.687 2.031.46.573 1.131 1.002 1.95 1.258a.478.478 0 0 1 .318.597.478.478 0 0 1-.597.318c-.555-.174-1.038-.422-1.445-.733C2.237 21.836 4.937 23 8.27 23c2.662 0 4.836-.659 6.314-1.884l-.135-.04c-.48-.136-.868-.418-1.126-.81a2.008 2.008 0 0 1-.2-1.5l1.162-4.127a2.007 2.007 0 0 1 .966-1.19 2.008 2.008 0 0 1 1.53-.18l.72.203 1.16-4.118a2.008 2.008 0 0 1 .967-1.19 2.008 2.008 0 0 1 1.529-.18l.254.072c-.38-1.318-1.036-2.48-1.94-3.373C16.797 3.012 14.53 2.4 12.01 2.4z"></path></svg>
+{%- endif -%}
+{% endmacro %}
diff --git a/_includes/components/webmentions.njk b/_includes/components/webmentions.njk
new file mode 100644
index 0000000..971984b
--- /dev/null
+++ b/_includes/components/webmentions.njk
@@ -0,0 +1,206 @@
+{# Webmentions Component #}
+{# Displays likes, reposts, and replies for a post #}
+{# Also checks legacy URLs from micro.blog and old blog for historical webmentions #}
+{# Client-side JS supplements build-time data with real-time fetches #}
+
+{% set mentions = webmentions | webmentionsForUrl(page.url, urlAliases, conversationMentions) %}
+{% set absoluteUrl = site.url + page.url %}
+{% set buildTimestamp = "" | timestamp %}
+
+{# Data container for client-side JS to fetch new webmentions #}
+<div data-webmentions
+     data-target="{{ absoluteUrl }}"
+     data-domain="{{ site.webmentions.domain }}"
+     data-buildtime="{{ buildTimestamp }}"
+     class="hidden"></div>
+
+{% if mentions.length %}
+<section class="webmentions mt-8 pt-8 border-t border-surface-200 dark:border-surface-700" id="webmentions">
+  <h2 class="text-xl font-bold text-surface-900 dark:text-surface-100 mb-6">
+    Webmentions ({{ mentions.length }})
+  </h2>
+
+  {# Likes #}
+  {% set likes = mentions | webmentionsByType('likes') %}
+  {% if likes.length %}
+  <div class="webmention-likes mb-6">
+    <h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3">
+      {{ likes.length }} Like{% if likes.length != 1 %}s{% endif %}
+    </h3>
+    <is-land on:visible>
+    <div class="facepile">
+      {% for like in likes %}
+      <a href="{{ like.author.url }}"
+         class="facepile-avatar"
+         title="{{ like.author.name }}"
+         target="_blank"
+         rel="noopener">
+        <img
+          src="{{ like.author.photo or '/images/default-avatar.svg' }}"
+          alt="{{ like.author.name }}"
+          class="w-8 h-8 rounded-full ring-2 ring-white dark:ring-surface-900"
+          loading="lazy"
+        >
+      </a>
+      {% endfor %}
+    </div>
+    </is-land>
+  </div>
+  {% endif %}
+
+  {# Reposts #}
+  {% set reposts = mentions | webmentionsByType('reposts') %}
+  {% if reposts.length %}
+  <div class="webmention-reposts mb-6">
+    <h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3">
+      {{ reposts.length }} Repost{% if reposts.length != 1 %}s{% endif %}
+    </h3>
+    <is-land on:visible>
+    <div class="facepile">
+      {% for repost in reposts %}
+      <a href="{{ repost.author.url }}"
+         class="facepile-avatar"
+         title="{{ repost.author.name }}"
+         target="_blank"
+         rel="noopener">
+        <img
+          src="{{ repost.author.photo or '/images/default-avatar.svg' }}"
+          alt="{{ repost.author.name }}"
+          class="w-8 h-8 rounded-full ring-2 ring-white dark:ring-surface-900"
+          loading="lazy"
+        >
+      </a>
+      {% endfor %}
+    </div>
+    </is-land>
+  </div>
+  {% endif %}
+
+  {# Bookmarks #}
+  {% set bookmarks = mentions | webmentionsByType('bookmarks') %}
+  {% if bookmarks.length %}
+  <div class="webmention-bookmarks mb-6">
+    <h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3">
+      {{ bookmarks.length }} Bookmark{% if bookmarks.length != 1 %}s{% endif %}
+    </h3>
+    <is-land on:visible>
+    <div class="facepile">
+      {% for bookmark in bookmarks %}
+      <a href="{{ bookmark.author.url }}"
+         class="facepile-avatar"
+         title="{{ bookmark.author.name }}"
+         target="_blank"
+         rel="noopener">
+        <img
+          src="{{ bookmark.author.photo or '/images/default-avatar.svg' }}"
+          alt="{{ bookmark.author.name }}"
+          class="w-8 h-8 rounded-full ring-2 ring-white dark:ring-surface-900"
+          loading="lazy"
+        >
+      </a>
+      {% endfor %}
+    </div>
+    </is-land>
+  </div>
+  {% endif %}
+
+  {# Replies #}
+  {% set replies = mentions | webmentionsByType('replies') %}
+  {% if replies.length %}
+  <div class="webmention-replies">
+    <h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-4">
+      {{ replies.length }} Repl{% if replies.length != 1 %}ies{% else %}y{% endif %}
+    </h3>
+    <ul class="space-y-4">
+      {% for reply in replies %}
+      <li class="p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
+        <div class="flex gap-3">
+          <a href="{{ reply.author.url }}" target="_blank" rel="noopener">
+            <img
+              src="{{ reply.author.photo or '/images/default-avatar.svg' }}"
+              alt="{{ reply.author.name }}"
+              class="w-10 h-10 rounded-full"
+              loading="lazy"
+            >
+          </a>
+          <div class="flex-1 min-w-0">
+            <div class="flex items-baseline gap-2 mb-1">
+              <a href="{{ reply.author.url }}"
+                 class="font-semibold text-surface-900 dark:text-surface-100 hover:underline"
+                 target="_blank"
+                 rel="noopener">
+                {{ reply.author.name }}
+              </a>
+              <a href="{{ reply.url }}"
+                 class="text-xs text-surface-500 hover:underline"
+                 target="_blank"
+                 rel="noopener">
+                <time datetime="{{ reply.published }}">
+                  {{ reply.published | date("MMM d, yyyy") }}
+                </time>
+              </a>
+            </div>
+            <div class="text-surface-700 dark:text-surface-300 prose dark:prose-invert prose-sm max-w-none">
+              {{ reply.content.html | safe if reply.content.html else reply.content.text }}
+            </div>
+          </div>
+        </div>
+      </li>
+      {% endfor %}
+    </ul>
+  </div>
+  {% endif %}
+
+  {# Other mentions #}
+  {% set otherMentions = mentions | webmentionsByType('mentions') %}
+  {% if otherMentions.length %}
+  <div class="webmention-mentions mt-6">
+    <h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3">
+      {{ otherMentions.length }} Mention{% if otherMentions.length != 1 %}s{% endif %}
+    </h3>
+    <ul class="space-y-2 text-sm">
+      {% for mention in otherMentions %}
+      <li>
+        <a href="{{ mention.url }}"
+           class="text-accent-600 dark:text-accent-400 hover:underline"
+           target="_blank"
+           rel="noopener">
+          {{ mention.author.name }} mentioned this on <time datetime="{{ mention.published }}">{{ mention.published | date("MMM d, yyyy") }}</time>
+        </a>
+      </li>
+      {% endfor %}
+    </ul>
+  </div>
+  {% endif %}
+</section>
+{% endif %}
+
+{# Webmention send form — collapsed by default #}
+<details class="mt-8">
+  <summary class="text-sm font-semibold text-surface-600 dark:text-surface-400 cursor-pointer hover:text-surface-700 dark:hover:text-surface-300 list-none [&::-webkit-details-marker]:hidden flex items-center gap-1.5">
+    <svg class="w-3.5 h-3.5 transition-transform [[open]>&]:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+    </svg>
+    Send a Webmention
+  </summary>
+  <div class="mt-3 p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
+    <p class="text-xs text-surface-600 dark:text-surface-400 mb-3">
+      Have you written a response to this post? Send a webmention by entering your post URL below.
+    </p>
+    <form action="https://webmention.io/{{ site.webmentions.domain }}/webmention" method="post" class="flex gap-2">
+      <input type="hidden" name="target" value="{{ site.url }}{{ page.url }}">
+      <input
+        type="url"
+        name="source"
+        placeholder="https://your-site.com/response"
+        required
+        class="flex-1 px-3 py-2 text-sm bg-surface-50 dark:bg-surface-700 border border-surface-300 dark:border-surface-600 rounded focus:outline-none focus:ring-2 focus:ring-accent-500"
+      >
+      <button
+        type="submit"
+        class="px-4 py-2 text-sm font-medium text-white bg-accent-600 hover:bg-accent-700 rounded transition-colors">
+        Send
+      </button>
+    </form>
+  </div>
+</details>
diff --git a/_includes/components/widgets/author-card-compact.njk b/_includes/components/widgets/author-card-compact.njk
new file mode 100644
index 0000000..b139b66
--- /dev/null
+++ b/_includes/components/widgets/author-card-compact.njk
@@ -0,0 +1,30 @@
+{# Author Compact Card - h-card microformat (compact version for blog sidebars) #}
+<is-land on:visible>
+<div class="widget">
+  <div class="h-card p-author flex items-center gap-3">
+    {# Hidden u-photo for reliable microformat parsing #}
+    <data class="u-photo hidden" value="{{ site.author.avatar }}"></data>
+    <a href="{{ site.author.url }}" class="u-url u-uid" rel="me" itemprop="url">
+      <img
+        src="{{ site.author.avatar }}"
+        alt="{{ site.author.name }}"
+        class="w-12 h-12 rounded-full object-cover"
+        loading="lazy"
+      >
+    </a>
+    <div>
+      <a href="{{ site.author.url }}" class="u-url p-name font-medium text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">
+        {{ site.author.name }}
+      </a>
+      <p class="p-job-title text-xs text-surface-500">{{ site.author.title }}</p>
+      {% if site.author.locality %}
+      <p class="p-locality text-xs text-surface-500">{{ site.author.locality }}{% if site.author.country %}, <span class="p-country-name">{{ site.author.country }}</span>{% endif %}</p>
+      {% endif %}
+    </div>
+  </div>
+  {# Hidden but present for microformat completeness #}
+  <p class="p-note hidden">{{ site.author.bio }}</p>
+  {% if site.author.email %}<data class="u-email hidden" value="{{ site.author.email }}"></data>{% endif %}
+  {% if site.author.org %}<data class="p-org hidden" value="{{ site.author.org }}"></data>{% endif %}
+</div>
+</is-land>
diff --git a/_includes/components/widgets/author-card.njk b/_includes/components/widgets/author-card.njk
new file mode 100644
index 0000000..f205d58
--- /dev/null
+++ b/_includes/components/widgets/author-card.njk
@@ -0,0 +1,6 @@
+{# Author Card Widget - includes the canonical h-card component #}
+<is-land on:visible>
+<div class="widget">
+  {% include "components/h-card.njk" %}
+</div>
+</is-land>
diff --git a/_includes/components/widgets/blogroll.njk b/_includes/components/widgets/blogroll.njk
new file mode 100644
index 0000000..572cff0
--- /dev/null
+++ b/_includes/components/widgets/blogroll.njk
@@ -0,0 +1,110 @@
+{# Blogroll Widget - Dynamic loading from API with source tabs #}
+<is-land on:visible>
+<div class="widget" x-data="blogrollWidget()" x-init="init()">
+  <h3 class="widget-title flex items-center gap-2">
+    <svg class="w-5 h-5 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
+    </svg>
+    <a href="/blogroll/" class="hover:text-accent-600 dark:hover:text-accent-400">Blogroll</a>
+  </h3>
+
+  {# Source tabs - only shown when multiple sources exist #}
+  <div x-show="tabs.length > 1" class="flex gap-1 mt-3 mb-2 border-b border-surface-200 dark:border-surface-700">
+    <template x-for="tab in tabs" :key="tab.key">
+      <button
+        @click="activeTab = tab.key"
+        :class="activeTab === tab.key
+          ? 'border-b-2 border-accent-600 text-accent-600 dark:text-accent-400 dark:border-accent-400'
+          : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+        class="px-2 py-1 text-xs font-medium transition-colors -mb-px"
+        x-text="tab.label + ' (' + tab.count + ')'"
+      ></button>
+    </template>
+  </div>
+
+  <ul x-show="filteredBlogs.length > 0" class="space-y-2" :class="tabs.length > 1 ? '' : 'mt-3'">
+    <template x-for="blog in filteredBlogs.slice(0, 8)" :key="blog.id">
+      <li>
+        <a
+          :href="blog.siteUrl || blog.feedUrl"
+          class="flex items-center gap-2 text-sm text-surface-700 dark:text-surface-300 hover:text-accent-600 dark:hover:text-accent-400 transition-colors"
+          target="_blank"
+          rel="noopener"
+        >
+          <span class="w-5 h-5 rounded bg-gradient-to-br from-accent-400 to-accent-600 flex items-center justify-center flex-shrink-0">
+            <span class="text-white text-xs font-bold" x-text="blog.title?.charAt(0)?.toUpperCase()"></span>
+          </span>
+          <span class="truncate" x-text="blog.title"></span>
+        </a>
+      </li>
+    </template>
+  </ul>
+
+  <div x-show="filteredBlogs.length === 0 && !loading" class="text-sm text-surface-500 py-2">
+    No blogs loaded yet.
+  </div>
+
+  <a x-show="allBlogs.length > 0" href="/blogroll/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-flex items-center gap-1">
+    View all <span x-text="allBlogs.length"></span> blogs
+    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
+  </a>
+</div>
+
+<script>
+function blogrollWidget() {
+  return {
+    allBlogs: [],
+    activeTab: 'all',
+    tabs: [],
+    loading: true,
+
+    get filteredBlogs() {
+      if (this.activeTab === 'all') return this.allBlogs;
+      return this.allBlogs.filter(b => (b.source || 'other') === this.activeTab);
+    },
+
+    async init() {
+      try {
+        const res = await fetch('/blogrollapi/api/blogs?sort=recent&limit=200').then(r => r.json());
+        this.allBlogs = res.items || [];
+        this.buildTabs();
+      } catch (err) {
+        console.error('Blogroll widget error:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    buildTabs() {
+      const counts = {};
+      for (const blog of this.allBlogs) {
+        const src = blog.source || 'other';
+        counts[src] = (counts[src] || 0) + 1;
+      }
+
+      const labels = {
+        microsub: 'Microsub',
+        feedland: 'FeedLand',
+        other: 'Other',
+      };
+
+      const sources = Object.keys(counts);
+      if (sources.length <= 1) {
+        this.tabs = [];
+        this.activeTab = 'all';
+        return;
+      }
+
+      this.tabs = sources.map(key => ({
+        key,
+        label: labels[key] || key,
+        count: counts[key],
+      }));
+
+      // Default to the first tab
+      this.activeTab = this.tabs[0].key;
+    }
+  };
+}
+</script>
+</is-land>
diff --git a/_includes/components/widgets/categories.njk b/_includes/components/widgets/categories.njk
new file mode 100644
index 0000000..b071191
--- /dev/null
+++ b/_includes/components/widgets/categories.njk
@@ -0,0 +1,15 @@
+{# Categories/Tags Widget #}
+{% if categories and categories.length %}
+<is-land on:visible>
+<div class="widget">
+  <h3 class="widget-title">Categories</h3>
+  <div class="flex flex-wrap gap-2">
+    {% for category in categories %}
+    <a href="/categories/{{ category | slugify }}/" class="p-category">
+      {{ category }}
+    </a>
+    {% endfor %}
+  </div>
+</div>
+</is-land>
+{% endif %}
diff --git a/_includes/components/widgets/fediverse-follow.njk b/_includes/components/widgets/fediverse-follow.njk
new file mode 100644
index 0000000..10d081f
--- /dev/null
+++ b/_includes/components/widgets/fediverse-follow.njk
@@ -0,0 +1,38 @@
+{# Fediverse Follow Me Widget — uses the fediverseInteract Alpine.js component #}
+{# Requires fediverse-interact.js loaded in base.njk (already present) #}
+{# Determines actor URI from site social links: prefers self-hosted AP, falls back to Mastodon #}
+
+{% set actorUrl = "" %}
+{% for link in site.social %}
+  {% if link.icon == "activitypub" and not actorUrl %}
+    {% set actorUrl = link.url %}
+  {% endif %}
+{% endfor %}
+{% if not actorUrl %}
+  {% for link in site.social %}
+    {% if link.icon == "mastodon" and not actorUrl %}
+      {% set actorUrl = link.url %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
+{% if actorUrl %}
+<is-land on:visible>
+<div class="widget" x-data="fediverseInteract('{{ actorUrl }}', 'interact')">
+  <h3 class="widget-title">Follow Me</h3>
+  <p class="text-sm text-surface-500 dark:text-surface-400 mb-3">Follow me from your fediverse instance.</p>
+  <a href="{{ actorUrl }}"
+     @click="handleClick($event)"
+     class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#a730b8]/10 text-[#a730b8] hover:bg-[#a730b8]/20 transition-colors text-sm font-medium cursor-pointer"
+     title="Follow from your fediverse instance (Shift+click to change)">
+    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/>
+    </svg>
+    <span>Follow on the Fediverse</span>
+  </a>
+  {% set modalTitle = "Follow on the Fediverse" %}
+  {% set modalDescription = "Choose your instance to follow this account." %}
+  {% include "components/fediverse-modal.njk" %}
+</div>
+</is-land>
+{% endif %}
diff --git a/_includes/components/widgets/feedland.njk b/_includes/components/widgets/feedland.njk
new file mode 100644
index 0000000..5a4b1c3
--- /dev/null
+++ b/_includes/components/widgets/feedland.njk
@@ -0,0 +1,383 @@
+{# FeedLand Widget - Matches Dave Winer's blogroll.js visual rendering #}
+{# Uses Alpine.js + blogroll API instead of jQuery + external blogroll.js #}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Rancho&family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
+
+<style>
+.fl-wrap {
+  border: 1px solid gainsboro;
+  padding: 5px 10px;
+  font-family: Ubuntu, sans-serif;
+  font-size: 15px;
+  box-sizing: border-box;
+}
+.fl-wrap:focus {
+  border-color: rgba(82, 168, 236, 0.8);
+  outline: 0;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  background-color: white;
+}
+.fl-title {
+  font-family: "Rancho", cursive;
+  font-size: 36px;
+  font-weight: bold;
+  letter-spacing: -1px;
+  text-align: center;
+  margin: 5px 0;
+  line-height: 1.1;
+}
+.fl-title a {
+  color: inherit;
+  text-decoration: none;
+}
+.fl-title a:hover {
+  text-decoration: underline;
+}
+.fl-sort {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  line-height: 14px;
+  padding: 3px 0;
+}
+.fl-sort span {
+  cursor: pointer;
+}
+.fl-sort .selected {
+  font-weight: bold;
+}
+.fl-row {
+  display: flex;
+  align-items: baseline;
+  padding: 4px 0;
+  line-height: normal;
+  cursor: pointer;
+}
+.fl-row:hover {
+  background-color: whitesmoke;
+}
+.fl-row.fl-selected {
+  background-color: #e8f0fe;
+}
+.fl-caret {
+  width: 14px;
+  flex-shrink: 0;
+  padding-right: 4px;
+}
+.fl-caret-dark { opacity: .9; }
+.fl-caret-light { opacity: .2; }
+.fl-name {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fl-name a {
+  color: inherit;
+  text-decoration: none;
+}
+.fl-name a:hover {
+  text-decoration: underline;
+}
+.fl-when {
+  flex-shrink: 0;
+  font-size: 12px;
+  padding-left: 6px;
+  white-space: nowrap;
+  opacity: 0.7;
+}
+/* Expanded items */
+.fl-items {
+  padding: 2px 0 4px 18px;
+}
+.fl-items ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.fl-items li {
+  padding: 2px 0;
+  font-size: 13px;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fl-items li a {
+  color: #1a73e8;
+  text-decoration: none;
+}
+.fl-items li a:hover {
+  text-decoration: underline;
+}
+.fl-items .fl-item-when {
+  font-size: 11px;
+  opacity: 0.6;
+  margin-left: 4px;
+}
+.fl-items .fl-loading {
+  font-size: 12px;
+  opacity: 0.5;
+  padding: 4px 0;
+}
+.fl-footer {
+  text-align: center;
+  font-size: 13px;
+  border-top: 1px solid gainsboro;
+  margin-top: 13px;
+  padding-top: 4px;
+  opacity: 0.5;
+}
+.fl-footer a {
+  color: inherit;
+  text-decoration: none;
+}
+.fl-footer a:hover {
+  text-decoration: underline;
+}
+/* 3-dot menu */
+.fl-header {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+}
+.fl-header .fl-title {
+  flex: 1;
+}
+.fl-menu-btn {
+  background: none;
+  border: none;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 4px 2px;
+  opacity: 0.5;
+  color: inherit;
+}
+.fl-menu-btn:hover {
+  opacity: 1;
+}
+.fl-menu {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  background: white;
+  border: 1px solid gainsboro;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  z-index: 10;
+  min-width: 180px;
+  padding: 4px 0;
+  font-size: 13px;
+}
+.fl-menu a {
+  display: block;
+  padding: 5px 12px;
+  color: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.fl-menu a:hover {
+  background-color: whitesmoke;
+}
+.fl-menu hr {
+  margin: 4px 0;
+  border: none;
+  border-top: 1px solid gainsboro;
+}
+.dark .fl-menu {
+  background: #2a2a2a;
+  border-color: #444;
+}
+.dark .fl-menu a:hover {
+  background-color: #333;
+}
+.dark .fl-menu hr {
+  border-top-color: #444;
+}
+@media screen and (max-width: 576px) {
+  .fl-title { display: none; }
+  .fl-name { font-size: 14px; }
+}
+/* Dark mode */
+.dark .fl-wrap {
+  border-color: #444;
+  color: #e0e0e0;
+}
+.dark .fl-wrap:focus {
+  background-color: #1a1a1a;
+}
+.dark .fl-row:hover {
+  background-color: #2a2a2a;
+}
+.dark .fl-row.fl-selected {
+  background-color: #1e3a5f;
+}
+.dark .fl-items li a {
+  color: #8ab4f8;
+}
+.dark .fl-footer {
+  border-top-color: #444;
+}
+</style>
+
+<is-land on:visible>
+<div class="widget" x-data="feedlandWidget()" x-init="init()">
+  <div class="fl-wrap" tabindex="0">
+    {# Title + menu #}
+    <div class="fl-header">
+      <div class="fl-title">
+        <a :href="riverUrl" target="_blank" rel="noopener" x-text="title"></a>
+      </div>
+      <button class="fl-menu-btn" @click="menuOpen = !menuOpen" aria-label="Menu">&#x22EE;</button>
+      <div class="fl-menu" x-show="menuOpen" @click.away="menuOpen = false" x-cloak>
+        <a href="/blogroll/">Blogroll page</a>
+        <a href="/blogrollapi/api/opml" target="_blank" rel="noopener">View as OPML</a>
+        <hr>
+        <a :href="riverUrl" target="_blank" rel="noopener">View in FeedLand</a>
+      </div>
+    </div>
+
+    {# Sort links #}
+    <div class="fl-sort">
+      <span :class="sortBy === 'title' ? 'selected' : ''" @click="sortBy = 'title'">Title</span>
+      <span :class="sortBy === 'when' ? 'selected' : ''" @click="sortBy = 'when'">When</span>
+    </div>
+
+    {# Feed list — pure divs, no table #}
+    <template x-for="blog in sortedBlogs" :key="blog.id">
+      <div>
+        <div class="fl-row"
+             :class="selectedId === blog.id ? 'fl-selected' : ''"
+             @click="handleRowClick(blog)">
+          <span class="fl-caret"
+                :class="expandedId === blog.id ? 'fl-caret-dark' : (selectedId === blog.id ? 'fl-caret-dark' : 'fl-caret-light')"
+                x-text="expandedId === blog.id ? '\u25BC' : '\u25B6'"
+                @click.stop="toggleExpand(blog)"></span>
+          <span class="fl-name">
+            <a :href="blog.siteUrl || blog.feedUrl" target="_blank" rel="noopener"
+               x-text="blog.title" @click.stop></a>
+          </span>
+          <span class="fl-when" x-text="relativeTime(blog.lastItemAt || blog.lastFetchAt)"></span>
+        </div>
+        {# Expanded items #}
+        <div class="fl-items" x-show="expandedId === blog.id" x-collapse>
+          <template x-if="blog._loadingItems">
+            <div class="fl-loading">Loading…</div>
+          </template>
+          <template x-if="!blog._loadingItems && blog._items && blog._items.length > 0">
+            <ul>
+              <template x-for="item in blog._items" :key="item.id">
+                <li>
+                  <a :href="item.url" target="_blank" rel="noopener"
+                     x-text="truncate(item.title || item.summary || item.url, 80)"></a>
+                  <span class="fl-item-when" x-text="relativeTime(item.published)"></span>
+                </li>
+              </template>
+            </ul>
+          </template>
+          <template x-if="!blog._loadingItems && (!blog._items || blog._items.length === 0)">
+            <div class="fl-loading">No recent items</div>
+          </template>
+        </div>
+      </div>
+    </template>
+
+    {# Footer #}
+    <div class="fl-footer">
+      <a :href="riverUrl" target="_blank" rel="noopener">Powered by FeedLand</a>
+    </div>
+  </div>
+</div>
+
+<script>
+function feedlandWidget() {
+  return {
+    blogs: [],
+    sortBy: 'when',
+    title: 'FeedLand',
+    riverUrl: 'https://feedland.com',
+    loading: true,
+    selectedId: null,
+    expandedId: null,
+    menuOpen: false,
+
+    get sortedBlogs() {
+      const sorted = [...this.blogs];
+      if (this.sortBy === 'title') {
+        sorted.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
+      } else {
+        sorted.sort((a, b) => {
+          const da = new Date(a.lastItemAt || a.lastFetchAt || 0);
+          const db = new Date(b.lastItemAt || b.lastFetchAt || 0);
+          return db - da;
+        });
+      }
+      return sorted;
+    },
+
+    handleRowClick(blog) {
+      if (this.selectedId !== blog.id) {
+        this.selectedId = blog.id;
+      } else {
+        this.toggleExpand(blog);
+      }
+    },
+
+    async toggleExpand(blog) {
+      this.selectedId = blog.id;
+      if (this.expandedId === blog.id) {
+        this.expandedId = null;
+        return;
+      }
+      this.expandedId = blog.id;
+      if (!blog._items) {
+        blog._loadingItems = true;
+        try {
+          const res = await fetch('/blogrollapi/api/blogs/' + blog.id);
+          const data = await res.json();
+          blog._items = (data.items || []).slice(0, 5);
+        } catch (err) {
+          console.error('FeedLand: failed to load items for', blog.title, err);
+          blog._items = [];
+        } finally {
+          blog._loadingItems = false;
+        }
+      }
+    },
+
+    truncate(str, max) {
+      if (!str) return '';
+      return str.length > max ? str.slice(0, max) + '…' : str;
+    },
+
+    relativeTime(iso) {
+      if (!iso) return '';
+      const diff = Date.now() - new Date(iso).getTime();
+      const mins = Math.floor(diff / 60000);
+      if (mins < 60) return mins + 'm';
+      const hrs = Math.floor(mins / 60);
+      if (hrs < 24) return hrs + 'h';
+      const days = Math.floor(hrs / 24);
+      return days + 'd';
+    },
+
+    async init() {
+      try {
+        const res = await fetch('/blogrollapi/api/blogs?source=feedland&sort=recent&limit=100');
+        const data = await res.json();
+        this.blogs = (data.items || []).map(b => ({
+          ...b,
+          _items: null,
+          _loadingItems: false,
+        }));
+      } catch (err) {
+        console.error('FeedLand widget error:', err);
+      } finally {
+        this.loading = false;
+      }
+    }
+  };
+}
+</script>
+</is-land>
diff --git a/_includes/components/widgets/funkwhale.njk b/_includes/components/widgets/funkwhale.njk
new file mode 100644
index 0000000..0f9bbac
--- /dev/null
+++ b/_includes/components/widgets/funkwhale.njk
@@ -0,0 +1,115 @@
+{# Listening Widget — combined Funkwhale + Last.fm recent tracks #}
+{% set hasListening = (funkwhaleActivity and (funkwhaleActivity.nowPlaying or funkwhaleActivity.listenings.length)) or (lastfmActivity and (lastfmActivity.nowPlaying or lastfmActivity.scrobbles.length)) %}
+{% if hasListening %}
+<is-land on:visible>
+<div class="widget">
+  <h3 class="widget-title flex items-center gap-2">
+    <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
+    </svg>
+    Listening
+  </h3>
+
+  {# Now Playing — show if either source is actively playing #}
+  {% set fwNow = funkwhaleActivity.nowPlaying if funkwhaleActivity and funkwhaleActivity.nowPlaying and funkwhaleActivity.nowPlaying.status == 'now-playing' else null %}
+  {% set lfmNow = lastfmActivity.nowPlaying if lastfmActivity and lastfmActivity.nowPlaying and lastfmActivity.nowPlaying.status == 'now-playing' else null %}
+
+  {% if fwNow or lfmNow %}
+  {% set np = fwNow or lfmNow %}
+  {% set npSource = "Funkwhale" if fwNow else "Last.fm" %}
+  {% set npColor = "purple" if fwNow else "red" %}
+  <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-3 mb-3">
+    <div class="flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400 mb-2">
+      <span class="flex gap-0.5 items-end h-2.5">
+        <span class="w-0.5 bg-green-500 animate-pulse" style="height: 30%;"></span>
+        <span class="w-0.5 bg-green-500 animate-pulse" style="height: 70%; animation-delay: 0.2s;"></span>
+        <span class="w-0.5 bg-green-500 animate-pulse" style="height: 50%; animation-delay: 0.4s;"></span>
+      </span>
+      Now Playing
+      <span class="text-{{ npColor }}-600 dark:text-{{ npColor }}-400 ml-1">({{ npSource }})</span>
+    </div>
+    <div class="flex items-center gap-3">
+      {% if np.coverUrl %}
+      <img src="{{ np.coverUrl }}" alt="" class="w-10 h-10 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+      {% endif %}
+      <div class="min-w-0 flex-1">
+        <p class="font-medium text-sm text-surface-900 dark:text-surface-100 truncate">
+          {% if np.trackUrl %}
+          <a href="{{ np.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">{{ np.track }}</a>
+          {% else %}
+          {{ np.track }}
+          {% endif %}
+        </p>
+        <p class="text-xs text-surface-600 dark:text-surface-400 truncate">{{ np.artist }}</p>
+      </div>
+    </div>
+  </div>
+  {% endif %}
+
+  {# Recent tracks — 2 from each source #}
+  <ul class="space-y-2">
+    {% if funkwhaleActivity and funkwhaleActivity.listenings.length %}
+    {% for listening in funkwhaleActivity.listenings | head(2) %}
+    <li class="flex items-center gap-2">
+      {% if listening.coverUrl %}
+      <img src="{{ listening.coverUrl }}" alt="" class="w-8 h-8 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+      {% else %}
+      <div class="w-8 h-8 rounded bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0">
+        <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13"/>
+        </svg>
+      </div>
+      {% endif %}
+      <div class="min-w-0 flex-1">
+        <p class="text-sm text-surface-900 dark:text-surface-100 truncate">
+          {% if listening.trackUrl %}
+          <a href="{{ listening.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">{{ listening.track }}</a>
+          {% else %}
+          {{ listening.track }}
+          {% endif %}
+        </p>
+        <p class="text-xs text-surface-500 truncate">{{ listening.artist }}
+          <span class="text-purple-500 ml-1">Funkwhale</span>
+        </p>
+      </div>
+    </li>
+    {% endfor %}
+    {% endif %}
+
+    {% if lastfmActivity and lastfmActivity.scrobbles.length %}
+    {% for scrobble in lastfmActivity.scrobbles | head(2) %}
+    <li class="flex items-center gap-2">
+      {% if scrobble.coverUrl %}
+      <img src="{{ scrobble.coverUrl }}" alt="" class="w-8 h-8 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+      {% else %}
+      <div class="w-8 h-8 rounded bg-red-100 dark:bg-red-900/30 flex items-center justify-center flex-shrink-0">
+        <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13"/>
+        </svg>
+      </div>
+      {% endif %}
+      <div class="min-w-0 flex-1">
+        <p class="text-sm text-surface-900 dark:text-surface-100 truncate">
+          {% if scrobble.trackUrl %}
+          <a href="{{ scrobble.trackUrl }}" class="hover:text-red-600 dark:hover:text-red-400" target="_blank" rel="noopener">{{ scrobble.track }}</a>
+          {% else %}
+          {{ scrobble.track }}
+          {% endif %}
+          {% if scrobble.loved %}<span class="text-red-500 ml-0.5">&#9829;</span>{% endif %}
+        </p>
+        <p class="text-xs text-surface-500 truncate">{{ scrobble.artist }}
+          <span class="text-red-500 ml-1">Last.fm</span>
+        </p>
+      </div>
+    </li>
+    {% endfor %}
+    {% endif %}
+  </ul>
+
+  <a href="/listening/" class="text-sm text-purple-600 dark:text-purple-400 hover:underline flex items-center gap-1 mt-3">
+    View full listening history
+    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
+  </a>
+</div>
+</is-land>
+{% endif %}
diff --git a/_includes/components/widgets/github-repos.njk b/_includes/components/widgets/github-repos.njk
new file mode 100644
index 0000000..ee27453
--- /dev/null
+++ b/_includes/components/widgets/github-repos.njk
@@ -0,0 +1,213 @@
+{# GitHub Activity Widget - Tabbed Commits/Repos/Featured/PRs with live API data #}
+<is-land on:visible>
+<div class="widget" x-data="githubWidget('{{ site.feeds.github }}')" x-init="init()">
+  <h3 class="widget-title flex items-center gap-2">
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
+    </svg>
+    GitHub
+  </h3>
+
+  {# Tab buttons — order: Commits, Repos, Featured, PRs #}
+  <div class="flex gap-1 mb-4 border-b border-surface-200 dark:border-surface-700">
+    <button
+      @click="activeTab = 'commits'"
+      :class="activeTab === 'commits' ? 'border-b-2 border-accent-500 text-accent-600 dark:text-accent-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+      class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
+    >
+      Commits
+    </button>
+    <button
+      @click="activeTab = 'repos'"
+      :class="activeTab === 'repos' ? 'border-b-2 border-accent-500 text-accent-600 dark:text-accent-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+      class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
+    >
+      Repos
+    </button>
+    <button
+      @click="activeTab = 'featured'"
+      :class="activeTab === 'featured' ? 'border-b-2 border-accent-500 text-accent-600 dark:text-accent-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+      class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
+    >
+      Featured
+    </button>
+    <button
+      @click="activeTab = 'prs'"
+      :class="activeTab === 'prs' ? 'border-b-2 border-accent-500 text-accent-600 dark:text-accent-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+      class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
+    >
+      PRs
+    </button>
+  </div>
+
+  {# Tab content — fixed height container to prevent layout shift #}
+  <div class="h-[420px] overflow-y-auto">
+
+    {# Loading state #}
+    <div x-show="loading" class="text-sm text-surface-500 py-4 text-center">
+      Loading...
+    </div>
+
+    {# Commits Tab #}
+    <div x-show="activeTab === 'commits' && !loading" x-cloak>
+      <ul x-show="commits.length > 0" class="space-y-3">
+        <template x-for="commit in commits.slice(0, 5)" :key="commit.sha">
+          <li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
+            <a :href="commit.url" target="_blank" rel="noopener" class="block group">
+              <p class="text-sm text-surface-700 dark:text-surface-300 group-hover:text-surface-900 dark:group-hover:text-surface-100 transition-colors line-clamp-2" x-text="commit.message"></p>
+              <div class="flex items-center gap-2 mt-1.5 text-xs text-surface-500">
+                <code class="text-xs font-mono bg-surface-100 dark:bg-surface-800 px-1 py-0.5 rounded" x-text="commit.sha"></code>
+                <span class="truncate" x-text="commit.repo?.split('/')[1] || commit.repo"></span>
+                <span x-text="formatDate(commit.date)"></span>
+              </div>
+            </a>
+          </li>
+        </template>
+      </ul>
+      <div x-show="commits.length === 0" class="text-sm text-surface-500 py-2">No recent commits.</div>
+    </div>
+
+    {# Repos Tab #}
+    <div x-show="activeTab === 'repos' && !loading" x-cloak>
+      <ul x-show="repos.length > 0" class="space-y-3">
+        <template x-for="repo in repos.slice(0, 5)" :key="repo.name">
+          <li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
+            <a :href="repo.html_url" target="_blank" rel="noopener" class="block group">
+              <div class="flex items-center gap-2">
+                <span class="font-medium text-sm text-surface-700 dark:text-surface-300 group-hover:underline truncate" x-text="repo.name"></span>
+                <span x-show="repo.language" class="text-xs px-1.5 py-0.5 rounded bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400 flex-shrink-0" x-text="repo.language"></span>
+              </div>
+              <p x-show="repo.description" class="text-xs text-surface-600 dark:text-surface-400 mt-1 line-clamp-2" x-text="repo.description"></p>
+              <div class="flex items-center gap-3 mt-1.5 text-xs text-surface-500">
+                <span x-show="repo.stargazers_count > 0" class="flex items-center gap-1">
+                  <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
+                  <span x-text="repo.stargazers_count"></span>
+                </span>
+                <span x-text="formatDate(repo.updated_at)"></span>
+              </div>
+            </a>
+          </li>
+        </template>
+      </ul>
+      <div x-show="repos.length === 0" class="text-sm text-surface-500 py-2">No repositories found.</div>
+    </div>
+
+    {# Featured Tab #}
+    <div x-show="activeTab === 'featured' && !loading" x-cloak>
+      <ul x-show="featured.length > 0" class="space-y-3">
+        <template x-for="repo in featured.slice(0, 5)" :key="repo.fullName || repo.name">
+          <li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
+            <a :href="repo.url" target="_blank" rel="noopener" class="block group">
+              <div class="flex items-center gap-2">
+                <span class="font-medium text-sm text-surface-700 dark:text-surface-300 group-hover:underline truncate" x-text="repo.name"></span>
+                <span x-show="repo.language" class="text-xs px-1.5 py-0.5 rounded bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400 flex-shrink-0" x-text="repo.language"></span>
+              </div>
+              <p x-show="repo.description" class="text-xs text-surface-600 dark:text-surface-400 mt-1 line-clamp-2" x-text="repo.description"></p>
+              <div class="flex items-center gap-3 mt-1.5 text-xs text-surface-500">
+                <span x-show="repo.stars > 0" class="flex items-center gap-1">
+                  <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
+                  <span x-text="repo.stars"></span>
+                </span>
+                <span x-show="repo.forks > 0" class="flex items-center gap-1">
+                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"/></svg>
+                  <span x-text="repo.forks"></span>
+                </span>
+              </div>
+            </a>
+          </li>
+        </template>
+      </ul>
+      <div x-show="featured.length === 0" class="text-sm text-surface-500 py-2">No featured projects.</div>
+    </div>
+
+    {# PRs Tab #}
+    <div x-show="activeTab === 'prs' && !loading" x-cloak>
+      <ul x-show="contributions.length > 0" class="space-y-3">
+        <template x-for="item in contributions.slice(0, 5)" :key="item.url">
+          <li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
+            <a :href="item.url" target="_blank" rel="noopener" class="block group">
+              <div class="flex items-center gap-2">
+                <span
+                  class="flex-shrink-0 w-4 h-4 rounded-full flex items-center justify-center"
+                  :class="item.type === 'pr' ? 'bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400' : 'bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-400'"
+                >
+                  <svg x-show="item.type === 'pr'" class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+                  <svg x-show="item.type === 'issue'" class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-width="2"/><line x1="12" y1="8" x2="12" y2="12" stroke-width="2"/><line x1="12" y1="16" x2="12.01" y2="16" stroke-width="2"/></svg>
+                </span>
+                <span class="text-sm text-surface-700 dark:text-surface-300 group-hover:text-surface-900 dark:group-hover:text-surface-100 transition-colors truncate" x-text="item.title"></span>
+              </div>
+              <div class="flex items-center gap-2 mt-1.5 text-xs text-surface-500 pl-6">
+                <span x-text="item.repo?.split('/')[1] || item.repo"></span>
+                <span x-show="item.number" x-text="'#' + item.number"></span>
+                <span x-text="formatDate(item.date)"></span>
+              </div>
+            </a>
+          </li>
+        </template>
+      </ul>
+      <div x-show="contributions.length === 0" class="text-sm text-surface-500 py-2">No recent PRs or issues.</div>
+    </div>
+
+  </div>
+
+  {# Footer link #}
+  {% if site.feeds.github %}
+  <a href="https://github.com/{{ site.feeds.github }}" target="_blank" rel="noopener" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-flex items-center gap-1">
+    View on GitHub
+    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
+  </a>
+  {% endif %}
+</div>
+
+<script>
+function githubWidget(username) {
+  return {
+    activeTab: 'commits',
+    loading: true,
+    commits: [],
+    repos: [],
+    featured: [],
+    contributions: [],
+
+    async init() {
+      try {
+        const fetches = [
+          fetch('/githubapi/api/commits').then(r => r.ok ? r.json() : null).catch(() => null),
+          fetch('/githubapi/api/featured').then(r => r.ok ? r.json() : null).catch(() => null),
+          fetch('/githubapi/api/contributions').then(r => r.ok ? r.json() : null).catch(() => null),
+        ];
+        if (username) {
+          fetches.push(
+            fetch('https://api.github.com/users/' + username + '/repos?sort=updated&per_page=10&type=owner', {
+              headers: { 'Accept': 'application/vnd.github.v3+json' }
+            }).then(r => r.ok ? r.json() : null).catch(() => null)
+          );
+        }
+        const [commitsRes, featuredRes, contribRes, reposRes] = await Promise.all(fetches);
+        this.commits = commitsRes?.commits || [];
+        this.featured = featuredRes?.featured || [];
+        this.contributions = contribRes?.contributions || [];
+        this.repos = (reposRes || []).filter(r => !r.fork && !r.private);
+      } catch (err) {
+        console.error('GitHub widget error:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    formatDate(dateStr) {
+      if (!dateStr) return '';
+      const d = new Date(dateStr);
+      const now = new Date();
+      const diffMs = now - d;
+      const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+      const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+      if (diffHours < 1) return 'just now';
+      if (diffHours < 24) return diffHours + 'h ago';
+      if (diffDays < 7) return diffDays + 'd ago';
+      return d.toLocaleDateString('en', { month: 'short', day: 'numeric' });
+    }
+  };
+}
+</script>
+</is-land>
diff --git a/_includes/components/widgets/post-categories.njk b/_includes/components/widgets/post-categories.njk
new file mode 100644
index 0000000..0d015d5
--- /dev/null
+++ b/_includes/components/widgets/post-categories.njk
@@ -0,0 +1,21 @@
+{# Categories for This Post #}
+{% if category %}
+<is-land on:visible>
+<div class="widget">
+  <h3 class="widget-title">Categories</h3>
+  <div class="flex flex-wrap gap-2">
+    {% if category is string %}
+    <a href="/categories/{{ category | slugify }}/" class="p-category text-xs px-2 py-1 bg-accent-100 dark:bg-accent-900 text-accent-700 dark:text-accent-300 rounded-full hover:bg-accent-200 dark:hover:bg-accent-800 transition-colors">
+      {{ category }}
+    </a>
+    {% else %}
+    {% for cat in category %}
+    <a href="/categories/{{ cat | slugify }}/" class="p-category text-xs px-2 py-1 bg-accent-100 dark:bg-accent-900 text-accent-700 dark:text-accent-300 rounded-full hover:bg-accent-200 dark:hover:bg-accent-800 transition-colors">
+      {{ cat }}
+    </a>
+    {% endfor %}
+    {% endif %}
+  </div>
+</div>
+</is-land>
+{% endif %}
diff --git a/_includes/components/widgets/post-navigation.njk b/_includes/components/widgets/post-navigation.njk
new file mode 100644
index 0000000..f0b0155
--- /dev/null
+++ b/_includes/components/widgets/post-navigation.njk
@@ -0,0 +1,66 @@
+{# Post Navigation Widget - Previous/Next #}
+{# Uses previousInCollection/nextInCollection filters to find adjacent posts #}
+{% set _prevPost = collections.posts | previousInCollection(page) %}
+{% set _nextPost = collections.posts | nextInCollection(page) %}
+
+{% if _prevPost or _nextPost %}
+<is-land on:visible>
+<div class="widget">
+  <h3 class="widget-title">More Posts</h3>
+  <div class="space-y-3">
+    {% if _prevPost %}
+    <div class="border-b border-surface-200 dark:border-surface-700 pb-3">
+      <span class="text-xs text-surface-500 uppercase tracking-wide block mb-1">Previous</span>
+      {% set _likedUrl = _prevPost.data.likeOf or _prevPost.data.like_of %}
+      {% set _bookmarkedUrl = _prevPost.data.bookmarkOf or _prevPost.data.bookmark_of %}
+      {% set _repostedUrl = _prevPost.data.repostOf or _prevPost.data.repost_of %}
+      {% set _replyToUrl = _prevPost.data.inReplyTo or _prevPost.data.in_reply_to %}
+      <a href="{{ _prevPost.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-2 flex items-center gap-1.5">
+        {% if _likedUrl %}
+        <svg class="w-3.5 h-3.5 text-red-500 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
+        Liked {{ _likedUrl | replace("https://", "") | truncate(35) }}
+        {% elif _bookmarkedUrl %}
+        <svg class="w-3.5 h-3.5 text-amber-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/></svg>
+        {{ _prevPost.data.title or ("Bookmarked " + (_bookmarkedUrl | replace("https://", "") | truncate(30))) }}
+        {% elif _repostedUrl %}
+        <svg class="w-3.5 h-3.5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+        Reposted {{ _repostedUrl | replace("https://", "") | truncate(35) }}
+        {% elif _replyToUrl %}
+        <svg class="w-3.5 h-3.5 text-sky-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
+        Reply to {{ _replyToUrl | replace("https://", "") | truncate(35) }}
+        {% else %}
+        {{ _prevPost.data.title or _prevPost.data.name or (_prevPost.templateContent | striptags | truncate(50)) or "Note" }}
+        {% endif %}
+      </a>
+    </div>
+    {% endif %}
+    {% if _nextPost %}
+    <div>
+      <span class="text-xs text-surface-500 uppercase tracking-wide block mb-1">Next</span>
+      {% set _likedUrl = _nextPost.data.likeOf or _nextPost.data.like_of %}
+      {% set _bookmarkedUrl = _nextPost.data.bookmarkOf or _nextPost.data.bookmark_of %}
+      {% set _repostedUrl = _nextPost.data.repostOf or _nextPost.data.repost_of %}
+      {% set _replyToUrl = _nextPost.data.inReplyTo or _nextPost.data.in_reply_to %}
+      <a href="{{ _nextPost.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-2 flex items-center gap-1.5">
+        {% if _likedUrl %}
+        <svg class="w-3.5 h-3.5 text-red-500 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
+        Liked {{ _likedUrl | replace("https://", "") | truncate(35) }}
+        {% elif _bookmarkedUrl %}
+        <svg class="w-3.5 h-3.5 text-amber-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/></svg>
+        {{ _nextPost.data.title or ("Bookmarked " + (_bookmarkedUrl | replace("https://", "") | truncate(30))) }}
+        {% elif _repostedUrl %}
+        <svg class="w-3.5 h-3.5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+        Reposted {{ _repostedUrl | replace("https://", "") | truncate(35) }}
+        {% elif _replyToUrl %}
+        <svg class="w-3.5 h-3.5 text-sky-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
+        Reply to {{ _replyToUrl | replace("https://", "") | truncate(35) }}
+        {% else %}
+        {{ _nextPost.data.title or _nextPost.data.name or (_nextPost.templateContent | striptags | truncate(50)) or "Note" }}
+        {% endif %}
+      </a>
+    </div>
+    {% endif %}
+  </div>
+</div>
+</is-land>
+{% endif %}
diff --git a/_includes/components/widgets/recent-comments.njk b/_includes/components/widgets/recent-comments.njk
new file mode 100644
index 0000000..9e0b78a
--- /dev/null
+++ b/_includes/components/widgets/recent-comments.njk
@@ -0,0 +1,27 @@
+{# Recent Comments Widget — sidebar #}
+{% if recentComments and recentComments.length %}
+<is-land on:visible>
+<div class="widget">
+  <h3 class="widget-title">Recent Comments</h3>
+  <ul class="space-y-3">
+    {% for comment in recentComments %}
+    <li class="text-sm">
+      <div class="flex items-start gap-2">
+        {% if comment.author and comment.author.photo %}
+        <img src="{{ comment.author.photo }}" alt="{{ comment.author.name }}"
+             class="w-6 h-6 rounded-full flex-shrink-0 mt-0.5" loading="lazy">
+        {% endif %}
+        <div>
+          <span class="font-medium">{{ comment.author.name or "Anonymous" }}</span>
+          <p class="text-surface-600 dark:text-surface-400 line-clamp-2">{{ comment.content.text | truncate(80) }}</p>
+          {% if comment["comment-target"] %}
+          <a href="{{ comment['comment-target'] }}" class="text-xs text-accent-600 dark:text-accent-400 hover:underline">View post</a>
+          {% endif %}
+        </div>
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+</div>
+</is-land>
+{% endif %}
diff --git a/_includes/components/widgets/recent-posts-blog.njk b/_includes/components/widgets/recent-posts-blog.njk
new file mode 100644
index 0000000..af6e224
--- /dev/null
+++ b/_includes/components/widgets/recent-posts-blog.njk
@@ -0,0 +1,85 @@
+{# Recent Posts Widget — type-aware, for blog/post sidebars #}
+{# Uses collections.posts directly (all post types, not just recentPosts collection) #}
+{% if collections.posts %}
+<is-land on:visible>
+<div class="widget">
+  <h3 class="widget-title">Recent Posts</h3>
+  <ul class="space-y-3">
+    {% for post in collections.posts | head(5) %}
+    {% if post.url != page.url %}
+    <li>
+      {% set _likedUrl = post.data.likeOf or post.data.like_of %}
+      {% set _bookmarkedUrl = post.data.bookmarkOf or post.data.bookmark_of %}
+      {% set _repostedUrl = post.data.repostOf or post.data.repost_of %}
+      {% set _replyToUrl = post.data.inReplyTo or post.data.in_reply_to %}
+
+      {% if _likedUrl %}
+      <div class="flex items-start gap-2">
+        <svg class="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
+        <div class="min-w-0">
+          <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-1">
+            Liked {{ _likedUrl | replace("https://", "") | truncate(40) }}
+          </a>
+          <time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}">
+            {{ (post.data.published or post.date) | dateDisplay }}
+          </time>
+        </div>
+      </div>
+
+      {% elif _bookmarkedUrl %}
+      <div class="flex items-start gap-2">
+        <svg class="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/></svg>
+        <div class="min-w-0">
+          <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-1">
+            {{ post.data.title or ("Bookmarked " + (_bookmarkedUrl | replace("https://", "") | truncate(35))) }}
+          </a>
+          <time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}">
+            {{ (post.data.published or post.date) | dateDisplay }}
+          </time>
+        </div>
+      </div>
+
+      {% elif _repostedUrl %}
+      <div class="flex items-start gap-2">
+        <svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+        <div class="min-w-0">
+          <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-1">
+            Reposted {{ _repostedUrl | replace("https://", "") | truncate(40) }}
+          </a>
+          <time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}">
+            {{ (post.data.published or post.date) | dateDisplay }}
+          </time>
+        </div>
+      </div>
+
+      {% elif _replyToUrl %}
+      <div class="flex items-start gap-2">
+        <svg class="w-4 h-4 text-sky-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
+        <div class="min-w-0">
+          <a href="{{ post.url }}" class="text-sm text-sky-600 dark:text-sky-400 hover:underline line-clamp-1">
+            Reply to {{ _replyToUrl | replace("https://", "") | truncate(40) }}
+          </a>
+          <time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}">
+            {{ (post.data.published or post.date) | dateDisplay }}
+          </time>
+        </div>
+      </div>
+
+      {% else %}
+      <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-2">
+        {{ post.data.title or post.data.name or (post.templateContent | striptags | truncate(50)) or "Note" }}
+      </a>
+      <time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}">
+        {{ (post.data.published or post.date) | dateDisplay }}
+      </time>
+      {% endif %}
+    </li>
+    {% endif %}
+    {% endfor %}
+  </ul>
+  <a href="/blog/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block">
+    View all posts
+  </a>
+</div>
+</is-land>
+{% endif %}
diff --git a/_includes/components/widgets/recent-posts.njk b/_includes/components/widgets/recent-posts.njk
new file mode 100644
index 0000000..7fef78d
--- /dev/null
+++ b/_includes/components/widgets/recent-posts.njk
@@ -0,0 +1,93 @@
+{# Recent Posts Widget (sidebar) - compact type-aware list #}
+{% set recentPosts = recentPosts or collections.recentPosts %}
+{% if recentPosts and recentPosts.length %}
+<is-land on:visible>
+<div class="widget">
+  <h3 class="widget-title">Recent Posts</h3>
+  <ul class="space-y-3">
+    {% for post in recentPosts | head(5) %}
+    <li>
+      {# Detect post type #}
+      {% set likedUrl = post.data.likeOf or post.data.like_of %}
+      {% set bookmarkedUrl = post.data.bookmarkOf or post.data.bookmark_of %}
+      {% set repostedUrl = post.data.repostOf or post.data.repost_of %}
+      {% set replyToUrl = post.data.inReplyTo or post.data.in_reply_to %}
+
+      {% if likedUrl %}
+      <div class="flex items-start gap-2">
+        <svg class="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+        </svg>
+        <div class="min-w-0">
+          <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline break-all line-clamp-1">
+            Liked {{ likedUrl | replace("https://", "") | truncate(40) }}
+          </a>
+          <time class="text-xs text-surface-500 block" datetime="{{ post.data.published }}">
+            {{ (post.data.published or post.date) | dateDisplay }}
+          </time>
+        </div>
+      </div>
+
+      {% elif bookmarkedUrl %}
+      <div class="flex items-start gap-2">
+        <svg class="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
+        </svg>
+        <div class="min-w-0">
+          <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-1">
+            {{ post.data.title or ("Bookmarked " + (bookmarkedUrl | replace("https://", "") | truncate(35))) }}
+          </a>
+          <time class="text-xs text-surface-500 block" datetime="{{ post.data.published }}">
+            {{ (post.data.published or post.date) | dateDisplay }}
+          </time>
+        </div>
+      </div>
+
+      {% elif repostedUrl %}
+      <div class="flex items-start gap-2">
+        <svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+        </svg>
+        <div class="min-w-0">
+          <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline break-all line-clamp-1">
+            Reposted {{ repostedUrl | replace("https://", "") | truncate(40) }}
+          </a>
+          <time class="text-xs text-surface-500 block" datetime="{{ post.data.published }}">
+            {{ (post.data.published or post.date) | dateDisplay }}
+          </time>
+        </div>
+      </div>
+
+      {% elif replyToUrl %}
+      <div class="flex items-start gap-2">
+        <svg class="w-4 h-4 text-sky-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
+        </svg>
+        <div class="min-w-0">
+          <a href="{{ post.url }}" class="text-sm text-sky-600 dark:text-sky-400 hover:underline break-all line-clamp-1">
+            Reply to {{ replyToUrl | replace("https://", "") | truncate(40) }}
+          </a>
+          <time class="text-xs text-surface-500 block" datetime="{{ post.data.published }}">
+            {{ (post.data.published or post.date) | dateDisplay }}
+          </time>
+        </div>
+      </div>
+
+      {% else %}
+      {# Article / Note / other #}
+      <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-1">
+        {{ post.data.title or post.data.name or (post.templateContent | striptags | truncate(50)) or "Note" }}
+      </a>
+      <time class="text-xs text-surface-500 block" datetime="{{ post.data.published }}">
+        {{ (post.data.published or post.date) | dateDisplay }}
+      </time>
+      {% endif %}
+    </li>
+    {% endfor %}
+  </ul>
+  <a href="/blog/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 block">
+    View all posts
+  </a>
+</div>
+</is-land>
+{% endif %}
diff --git a/_includes/components/widgets/search.njk b/_includes/components/widgets/search.njk
new file mode 100644
index 0000000..c547241
--- /dev/null
+++ b/_includes/components/widgets/search.njk
@@ -0,0 +1,10 @@
+{# Search Widget — redirects to /search/?q=query #}
+<form action="/search/" method="get" class="flex gap-2">
+  <input type="text" name="q" placeholder="Search..."
+    class="flex-1 min-w-0 px-3 py-2 text-sm rounded-lg border border-surface-300 dark:border-surface-600 bg-white dark:bg-surface-800 text-surface-900 dark:text-surface-100 placeholder-surface-400 dark:placeholder-surface-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
+  <button type="submit" class="px-3 py-2 text-sm font-medium rounded-lg bg-primary-600 text-white hover:bg-primary-700 transition-colors" aria-label="Search">
+    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+    </svg>
+  </button>
+</form>
diff --git a/_includes/components/widgets/share.njk b/_includes/components/widgets/share.njk
new file mode 100644
index 0000000..0c8d9b1
--- /dev/null
+++ b/_includes/components/widgets/share.njk
@@ -0,0 +1,31 @@
+{# Share Widget #}
+{% set shareText = title + " " + site.url + page.url %}
+<is-land on:visible>
+<div class="widget">
+  <h3 class="widget-title">Share</h3>
+  <div class="flex gap-2">
+    <a href="https://bsky.app/intent/compose?text={{ shareText | urlencode }}"
+       target="_blank"
+       rel="noopener"
+       class="flex-1 inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-[#0085ff]/10 text-[#0085ff] hover:bg-[#0085ff]/20 transition-colors text-sm font-medium"
+       title="Share on Bluesky">
+      <svg class="w-4 h-4" viewBox="0 0 568 501" fill="currentColor" aria-hidden="true">
+        <path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"/>
+      </svg>
+    </a>
+    <span x-data="fediverseInteract('{{ shareText }}', 'share')" class="flex-1 inline-flex">
+      <a href="https://share.joinmastodon.org/#text={{ shareText | urlencode }}"
+         @click="handleClick($event)"
+         class="w-full inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-[#6364ff]/10 text-[#6364ff] hover:bg-[#6364ff]/20 transition-colors text-sm font-medium cursor-pointer"
+         title="Share on Mastodon / Fediverse (Shift+click to change instance)">
+        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
+        </svg>
+      </a>
+      {% set modalTitle = "Share on Mastodon / Fediverse" %}
+      {% set modalDescription = "Choose your instance to share this post." %}
+      {% include "components/fediverse-modal.njk" %}
+    </span>
+  </div>
+</div>
+</is-land>
diff --git a/_includes/components/widgets/social-activity.njk b/_includes/components/widgets/social-activity.njk
new file mode 100644
index 0000000..21910a5
--- /dev/null
+++ b/_includes/components/widgets/social-activity.njk
@@ -0,0 +1,96 @@
+{# Social Feed Widget - Tabbed Bluesky/Mastodon #}
+{% if (blueskyFeed and blueskyFeed.length) or (mastodonFeed and mastodonFeed.length) %}
+<is-land on:visible>
+<div class="widget" x-data="{ activeTab: 'bluesky' }">
+  <h3 class="widget-title">Social Activity</h3>
+
+  {# Tab buttons #}
+  <div class="flex gap-1 mb-4 border-b border-surface-200 dark:border-surface-700">
+    {% if blueskyFeed and blueskyFeed.length %}
+    <button
+      @click="activeTab = 'bluesky'"
+      :class="activeTab === 'bluesky' ? 'border-b-2 border-[#0085ff] text-[#0085ff]' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+      class="flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors -mb-px"
+    >
+      <svg class="w-4 h-4 text-[#0085ff]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"></path>
+      </svg>
+      Bluesky
+    </button>
+    {% endif %}
+    {% if mastodonFeed and mastodonFeed.length %}
+    <button
+      @click="activeTab = 'mastodon'"
+      :class="activeTab === 'mastodon' ? 'border-b-2 border-[#a730b8] text-[#a730b8]' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+      class="flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors -mb-px"
+    >
+      <svg class="w-4 h-4 text-[#6364ff]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12v6.406z"></path>
+      </svg>
+      Mastodon
+    </button>
+    {% endif %}
+  </div>
+
+  {# Bluesky Tab Content #}
+  {% if blueskyFeed and blueskyFeed.length %}
+  <div x-show="activeTab === 'bluesky'" x-cloak>
+    <ul class="space-y-3">
+      {% for post in blueskyFeed | head(5) %}
+      <li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
+        <a href="{{ post.url }}" target="_blank" rel="noopener" class="block group">
+          <p class="text-sm text-surface-700 dark:text-surface-300 group-hover:text-[#0085ff] transition-colors">
+            {{ post.text | truncate(140) }}
+          </p>
+          <div class="flex items-center gap-3 mt-2 text-xs text-surface-500">
+            <time datetime="{{ post.createdAt }}">{{ post.createdAt | date("MMM d, yyyy") }}</time>
+            {% if post.likeCount > 0 %}
+            <span class="flex items-center gap-1">
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
+              {{ post.likeCount }}
+            </span>
+            {% endif %}
+          </div>
+        </a>
+      </li>
+      {% endfor %}
+    </ul>
+    <a href="https://bsky.app/profile/{{ site.feeds.bluesky }}" target="_blank" rel="noopener" class="text-sm text-[#0085ff] hover:underline mt-3 inline-flex items-center gap-1">
+      View on Bluesky
+      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
+    </a>
+  </div>
+  {% endif %}
+
+  {# Mastodon Tab Content #}
+  {% if mastodonFeed and mastodonFeed.length %}
+  <div x-show="activeTab === 'mastodon'" x-cloak>
+    <ul class="space-y-3">
+      {% for post in mastodonFeed | head(5) %}
+      <li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
+        <a href="{{ post.url }}" target="_blank" rel="noopener" class="block group">
+          <p class="text-sm text-surface-700 dark:text-surface-300 group-hover:text-[#a730b8] transition-colors">
+            {{ post.text | truncate(140) }}
+          </p>
+          <div class="flex items-center gap-3 mt-2 text-xs text-surface-500">
+            <time datetime="{{ post.createdAt }}">{{ post.createdAt | date("MMM d, yyyy") }}</time>
+            {% if post.favouritesCount > 0 %}
+            <span class="flex items-center gap-1">
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
+              {{ post.favouritesCount }}
+            </span>
+            {% endif %}
+          </div>
+        </a>
+      </li>
+      {% endfor %}
+    </ul>
+    <a href="https://{{ site.feeds.mastodon.instance }}/@{{ site.feeds.mastodon.username }}" target="_blank" rel="noopener" class="text-sm text-[#a730b8] hover:underline mt-3 inline-flex items-center gap-1">
+      View on Mastodon
+      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
+    </a>
+  </div>
+  {% endif %}
+</div>
+</is-land>
+{% endif %}
diff --git a/_includes/components/widgets/subscribe.njk b/_includes/components/widgets/subscribe.njk
new file mode 100644
index 0000000..61f4005
--- /dev/null
+++ b/_includes/components/widgets/subscribe.njk
@@ -0,0 +1,20 @@
+{# Subscribe Widget #}
+<is-land on:visible>
+<div class="widget">
+  <h3 class="widget-title">Subscribe</h3>
+  <div class="space-y-2">
+    <a href="/feed.xml" class="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors">
+      <svg class="w-4 h-4 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1Z"/>
+      </svg>
+      RSS Feed
+    </a>
+    <a href="/feed.json" class="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors">
+      <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m3 12h2v2H8v-2m4-8h2v10h-2V7m4 4h2v6h-2v-6Z"/>
+      </svg>
+      JSON Feed
+    </a>
+  </div>
+</div>
+</is-land>
diff --git a/_includes/components/widgets/toc.njk b/_includes/components/widgets/toc.njk
new file mode 100644
index 0000000..19a86d3
--- /dev/null
+++ b/_includes/components/widgets/toc.njk
@@ -0,0 +1,19 @@
+{# Table of Contents Widget (for articles with headings) #}
+{% if toc and toc.length %}
+<is-land on:visible>
+<div class="widget">
+  <h3 class="widget-title">Contents</h3>
+  <nav class="toc">
+    <ul class="space-y-1 text-sm">
+      {% for item in toc %}
+      <li class="{% if item.level > 2 %}ml-{{ (item.level - 2) * 3 }}{% endif %}">
+        <a href="#{{ item.slug }}" class="text-surface-600 dark:text-surface-400 hover:text-accent-600 dark:hover:text-accent-400 transition-colors">
+          {{ item.text }}
+        </a>
+      </li>
+      {% endfor %}
+    </ul>
+  </nav>
+</div>
+</is-land>
+{% endif %}
diff --git a/_includes/components/widgets/webmentions.njk b/_includes/components/widgets/webmentions.njk
new file mode 100644
index 0000000..ae51b4d
--- /dev/null
+++ b/_includes/components/widgets/webmentions.njk
@@ -0,0 +1,168 @@
+{# Recent Webmentions Widget - site-wide inbound/outbound activity #}
+{# Uses client-side fetch from /webmentions/api/mentions (same as /interactions page) #}
+{# Outbound tab uses Eleventy collections (likes, replies, bookmarks, reposts) #}
+<is-land on:visible>
+<div class="widget" x-data="webmentionsWidget()" x-init="init()">
+  <h3 class="widget-title flex items-center gap-2">
+    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
+    </svg>
+    Webmentions
+  </h3>
+
+  {# Tab buttons #}
+  <div class="flex border-b border-surface-200 dark:border-surface-700 mb-3">
+    <button
+      @click="tab = 'inbound'"
+      :class="tab === 'inbound' ? 'border-accent-500 text-accent-600 dark:text-accent-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+      class="px-2 py-1.5 text-xs font-medium border-b-2 -mb-px transition-colors">
+      Received
+      <span x-show="mentions.length" x-text="mentions.length" class="ml-0.5 text-xs opacity-75"></span>
+    </button>
+    <button
+      @click="tab = 'outbound'"
+      :class="tab === 'outbound' ? 'border-accent-500 text-accent-600 dark:text-accent-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+      class="px-2 py-1.5 text-xs font-medium border-b-2 -mb-px transition-colors">
+      Sent
+    </button>
+  </div>
+
+  {# === Inbound tab (client-side fetched) === #}
+  <div x-show="tab === 'inbound'" x-transition>
+    {# Loading #}
+    <div x-show="loading" class="text-center py-3">
+      <div class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-accent-500"></div>
+    </div>
+
+    {# Mentions list #}
+    <div x-show="!loading && mentions.length" class="space-y-2">
+      <template x-for="wm in mentions.slice(0, 8)" :key="wm['wm-id']">
+        <div class="flex items-start gap-2 text-xs">
+          <img
+            :src="wm.author?.photo || '/images/default-avatar.svg'"
+            :alt="wm.author?.name || 'Anonymous'"
+            class="w-5 h-5 rounded-full flex-shrink-0 mt-0.5"
+            loading="lazy"
+            onerror="this.src='/images/default-avatar.svg'"
+          >
+          <div class="min-w-0">
+            <span class="font-medium text-surface-900 dark:text-surface-100" x-text="wm.author?.name || 'Anonymous'"></span>
+            <span x-show="wm['wm-property'] === 'like-of'" class="text-red-500"> liked</span>
+            <span x-show="wm['wm-property'] === 'repost-of'" class="text-green-500"> reposted</span>
+            <span x-show="wm['wm-property'] === 'in-reply-to'" class="text-sky-500"> replied to</span>
+            <span x-show="wm['wm-property'] === 'mention-of'" class="text-amber-500"> mentioned</span>
+            <span x-show="wm['wm-property'] === 'bookmark-of'" class="text-purple-500"> bookmarked</span>
+            <a :href="wm['wm-target']" class="text-surface-500 hover:underline block truncate" x-text="formatPath(wm['wm-target'])"></a>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    {# Empty #}
+    <p x-show="!loading && !mentions.length && !error" class="text-xs text-surface-500 py-2">No webmentions received yet.</p>
+
+    {# Error #}
+    <p x-show="error" class="text-xs text-red-500 py-2" x-text="error"></p>
+
+    {# Link to full interactions page #}
+    <div x-show="mentions.length > 0" class="mt-2 pt-2 border-t border-surface-200 dark:border-surface-700">
+      <a href="/interactions/" class="text-xs text-accent-600 dark:text-accent-400 hover:underline">
+        View all &rarr;
+      </a>
+    </div>
+  </div>
+
+  {# === Outbound tab (from Eleventy collections) === #}
+  <div x-show="tab === 'outbound'" x-transition>
+    <div class="space-y-2">
+      {% set _recentOutbound = [] %}
+      {% for item in collections.likes | head(3) %}
+      <div class="flex items-start gap-2 text-xs">
+        <svg class="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
+        <div class="min-w-0">
+          <a href="{{ item.url }}" class="text-surface-900 dark:text-surface-100 hover:underline block truncate">
+            {% set _likedUrl = item.data.likeOf or item.data.like_of %}
+            Liked {{ _likedUrl | replace("https://", "") | truncate(30) }}
+          </a>
+        </div>
+      </div>
+      {% endfor %}
+      {% for item in collections.replies | head(2) %}
+      <div class="flex items-start gap-2 text-xs">
+        <svg class="w-4 h-4 text-sky-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
+        <div class="min-w-0">
+          <a href="{{ item.url }}" class="text-surface-900 dark:text-surface-100 hover:underline block truncate">
+            {% set _replyToUrl = item.data.inReplyTo or item.data.in_reply_to %}
+            Reply to {{ _replyToUrl | replace("https://", "") | truncate(30) }}
+          </a>
+        </div>
+      </div>
+      {% endfor %}
+      {% for item in collections.reposts | head(2) %}
+      <div class="flex items-start gap-2 text-xs">
+        <svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+        <div class="min-w-0">
+          <a href="{{ item.url }}" class="text-surface-900 dark:text-surface-100 hover:underline block truncate">
+            {% set _repostedUrl = item.data.repostOf or item.data.repost_of %}
+            Reposted {{ _repostedUrl | replace("https://", "") | truncate(30) }}
+          </a>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+    <div class="mt-2 pt-2 border-t border-surface-200 dark:border-surface-700">
+      <a href="/interactions/" class="text-xs text-accent-600 dark:text-accent-400 hover:underline">
+        View all &rarr;
+      </a>
+    </div>
+  </div>
+</div>
+
+<script>
+function webmentionsWidget() {
+  return {
+    tab: 'inbound',
+    loading: false,
+    error: null,
+    mentions: [],
+    async init() {
+      this.loading = true;
+      try {
+        const [wmRes, convRes] = await Promise.all([
+          fetch('/webmentions/api/mentions?per-page=50&page=0').catch(() => null),
+          fetch('/conversations/api/mentions?per-page=50&page=0').catch(() => null),
+        ]);
+        const wmData = wmRes?.ok ? await wmRes.json() : { children: [] };
+        const convData = convRes?.ok ? await convRes.json() : { children: [] };
+
+        // Merge: conversations items first (richer metadata), then webmentions
+        const seen = new Set();
+        const merged = [];
+        for (const item of (convData.children || [])) {
+          const key = item['wm-id'] || item.url;
+          if (key && !seen.has(key)) { seen.add(key); merged.push(item); }
+        }
+        for (const item of (wmData.children || [])) {
+          const key = item['wm-id'];
+          if (!key || seen.has(key)) continue;
+          if (item.url && seen.has(item.url)) continue;
+          seen.add(key);
+          merged.push(item);
+        }
+
+        this.mentions = merged.sort((a, b) => {
+          return new Date(b.published || b['wm-received'] || 0) - new Date(a.published || a['wm-received'] || 0);
+        });
+      } catch (e) {
+        this.error = 'Could not load';
+      } finally {
+        this.loading = false;
+      }
+    },
+    formatPath(url) {
+      try { return new URL(url).pathname; } catch { return url; }
+    }
+  };
+}
+</script>
+</is-land>
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
new file mode 100644
index 0000000..cf5c196
--- /dev/null
+++ b/_includes/layouts/base.njk
@@ -0,0 +1,549 @@
+<!DOCTYPE html>
+<html lang="{{ site.locale | default('en') }}">
+<head>
+  {# OG image resolution handled by og-fix transform in eleventy.config.js
+     to bypass Eleventy 3.x parallel rendering race condition (#3183).
+     Template outputs __OG_IMAGE_PLACEHOLDER__ and __TWITTER_CARD_PLACEHOLDER__
+     which the transform replaces using the correct slug derived from outputPath. #}
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="generator" content="Eleventy">
+  <title>{% if title %}{{ title }} - {% endif %}{{ site.name }}</title>
+
+  {# OpenGraph meta tags #}
+  {% set ogTitle = title | default(site.name) %}
+  {% set ogDesc = description | default(content | ogDescription(200)) | default(site.description) %}
+  {# Normalize photo - could be array for multi-photo posts #}
+  {% set ogPhoto = photo %}
+  {% if ogPhoto %}
+    {% if ogPhoto[0] and (ogPhoto[0] | length) > 10 %}
+      {% set ogPhoto = ogPhoto[0] %}
+    {% endif %}
+  {% endif %}
+  <meta property="og:title" content="{{ ogTitle }}">
+  <meta property="og:site_name" content="{{ site.name }}">
+  <meta property="og:url" content="{{ site.url }}{{ page.url }}">
+  <meta property="og:type" content="{% if page.url == '/' %}website{% else %}article{% endif %}">
+  <meta property="og:description" content="{{ ogDesc }}">
+  <meta name="description" content="{{ ogDesc }}">
+  {% if ogPhoto and ogPhoto != "" and (ogPhoto | length) > 10 %}
+  <meta property="og:image" content="{% if 'http' in ogPhoto %}{{ ogPhoto }}{% else %}{{ site.url }}{% if ogPhoto[0] != '/' %}/{% endif %}{{ ogPhoto }}{% endif %}">
+  {% elif image and image != "" and (image | length) > 10 %}
+  <meta property="og:image" content="{% if 'http' in image %}{{ image }}{% else %}{{ site.url }}{% if image[0] != '/' %}/{% endif %}{{ image }}{% endif %}">
+  {% else %}
+  <meta property="og:image" content="__OG_IMAGE_PLACEHOLDER__">
+  {% endif %}
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:locale" content="{{ site.locale | default('en_US') }}">
+
+  {# Twitter Card meta tags #}
+  {% set hasExplicitImage = (ogPhoto and ogPhoto != "" and (ogPhoto | length) > 10) or (image and image != "" and (image | length) > 10) %}
+  <meta name="twitter:card" content="{% if hasExplicitImage %}summary_large_image{% else %}__TWITTER_CARD_PLACEHOLDER__{% endif %}">
+  <meta name="twitter:title" content="{{ ogTitle }}">
+  <meta name="twitter:description" content="{{ ogDesc }}">
+  {% if ogPhoto and ogPhoto != "" and (ogPhoto | length) > 10 %}
+  <meta name="twitter:image" content="{% if 'http' in ogPhoto %}{{ ogPhoto }}{% else %}{{ site.url }}{% if ogPhoto[0] != '/' %}/{% endif %}{{ ogPhoto }}{% endif %}">
+  {% elif image and image != "" and (image | length) > 10 %}
+  <meta name="twitter:image" content="{% if 'http' in image %}{{ image }}{% else %}{{ site.url }}{% if image[0] != '/' %}/{% endif %}{{ image }}{% endif %}">
+  {% else %}
+  <meta name="twitter:image" content="__OG_IMAGE_PLACEHOLDER__">
+  {% endif %}
+
+  {# Favicon #}
+  <link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+
+  {# Critical CSS — inlined for fast first paint #}
+  <style>{{ "css/critical.css" | inlineFile | safe }}</style>
+  {# Defer full stylesheet — loads after first paint #}
+  <link rel="stylesheet" href="/css/style.css?v={{ '/css/style.css' | hash }}" media="print" onload="this.media='all'">
+  <noscript><link rel="stylesheet" href="/css/style.css?v={{ '/css/style.css' | hash }}"></noscript>
+  <link rel="stylesheet" href="/css/prism-theme.css?v={{ '/css/prism-theme.css' | hash }}" media="print" onload="this.media='all'">
+  <noscript><link rel="stylesheet" href="/css/prism-theme.css?v={{ '/css/prism-theme.css' | hash }}"></noscript>
+  <link rel="stylesheet" href="/pagefind/pagefind-ui.css" media="print" onload="this.media='all'">
+  <noscript><link rel="stylesheet" href="/pagefind/pagefind-ui.css"></noscript>
+  <script>
+    var _pfQueue = [];
+    function initPagefind(sel, opts) { _pfQueue.push([sel, opts]); }
+  </script>
+  <link rel="stylesheet" href="/css/lite-yt-embed.css?v={{ '/css/lite-yt-embed.css' | hash }}">
+  <script src="/js/vendor/lite-yt-embed.js?v={{ '/js/vendor/lite-yt-embed.js' | hash }}" defer></script>
+  {# Alpine.js components — MUST load before Alpine core (Alpine.data() registration via alpine:init) #}
+  <script src="/js/comments.js?v={{ '/js/comments.js' | hash }}" defer></script>
+  <script src="/js/fediverse-interact.js?v={{ '/js/fediverse-interact.js' | hash }}" defer></script>
+  <script src="/js/lightbox.js?v={{ '/js/lightbox.js' | hash }}" defer></script>
+  <script defer src="/js/vendor/alpine-collapse.min.js?v={{ '/js/vendor/alpine-collapse.min.js' | hash }}"></script>
+  <script defer src="/js/vendor/alpine.min.js?v={{ '/js/vendor/alpine.min.js' | hash }}"></script>
+  <style>[x-cloak] { display: none !important; }</style>
+  {# Graceful no-JS fallback: show content that Alpine would normally control #}
+  <noscript>
+    <style>
+      /* Override x-cloak so hidden content is visible without Alpine */
+      [x-cloak] { display: block !important; }
+      /* Show all tab panels stacked (Alpine x-show tabs) */
+      [x-show] { display: block !important; }
+      /* Hide JS-only interactive controls */
+      .fab-container, .fab-button, .fab-backdrop, .fab-menu { display: none !important; }
+      /* Hide tab button rows - content shows stacked instead */
+      [x-data] > .flex.border-b { display: none !important; }
+      /* Hide loading spinners and JS-only buttons */
+      [x-show*="loading"], button[\\@click*="fetch"], button[\\@click*="loadMore"] { display: none !important; }
+    </style>
+  </noscript>
+  <link rel="canonical" href="{{ site.url }}{{ page.url }}">
+  <link rel="alternate" type="application/rss+xml" href="/feed.xml" title="RSS Feed">
+  <link rel="alternate" type="application/json" href="/feed.json" title="JSON Feed">
+  <link rel="alternate" type="application/rss+xml" href="/digest/feed.xml" title="Weekly Digest — RSS Feed">
+  {% if site.markdownAgents.enabled and page.url and page.url.startsWith('/articles/') and page.url != '/articles/' %}
+  <link rel="alternate" type="text/markdown" href="{{ page.url | stripTrailingSlash }}.md" title="Markdown version">
+  {% endif %}
+  {% if category and page.url and page.url.startsWith('/categories/') and page.url != '/categories/' %}
+  <link rel="alternate" type="application/rss+xml" href="/categories/{{ category | slugify }}/feed.xml" title="{{ category }} — RSS Feed">
+  <link rel="alternate" type="application/json" href="/categories/{{ category | slugify }}/feed.json" title="{{ category }} — JSON Feed">
+  {% endif %}
+  <link rel="authorization_endpoint" href="{{ site.url }}/auth">
+  <link rel="token_endpoint" href="{{ site.url }}/auth/token">
+  <link rel="micropub" href="{{ site.url }}/micropub">
+  <link rel="microsub" href="{{ site.url }}/microsub">
+  <link rel="self" href="{{ site.url }}{{ page.url }}">
+  <link rel="hub" href="https://websubhub.com/hub">
+  <link rel="webmention" href="https://webmention.io/{{ site.webmentions.domain }}/webmention">
+  <link rel="pingback" href="https://webmention.io/{{ site.webmentions.domain }}/xmlrpc">
+
+  {# Fediverse creator meta tag for Mastodon verification #}
+  {% if site.fediverseCreator %}
+  <meta name="fediverse:creator" content="{{ site.fediverseCreator }}">
+  {% endif %}
+
+  {# IndieAuth rel="me" links for identity verification #}
+  {# Note: Bluesky links use "me atproto" for verification #}
+  {% for social in site.social %}
+  <link rel="{{ social.rel }}" href="{{ social.url }}">
+  {% endfor %}
+</head>
+<body{% if pagefindIgnore %} data-pagefind-ignore="all"{% endif %}>
+  <script>
+    // Apply theme immediately to prevent flash
+    (function() {
+      const theme = localStorage.getItem('theme');
+      if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark');
+      }
+    })();
+  </script>
+  <header class="site-header">
+    <div class="container header-container">
+      <a href="/" class="site-title">{{ site.name }}</a>
+
+      {# Mobile menu button #}
+      <button id="menu-toggle" type="button" class="menu-toggle" aria-label="Toggle menu" aria-expanded="false">
+        <svg class="menu-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <line x1="3" y1="6" x2="21" y2="6"/>
+          <line x1="3" y1="12" x2="21" y2="12"/>
+          <line x1="3" y1="18" x2="21" y2="18"/>
+        </svg>
+        <svg class="close-icon hidden" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <line x1="18" y1="6" x2="6" y2="18"/>
+          <line x1="6" y1="6" x2="18" y2="18"/>
+        </svg>
+      </button>
+
+      {# Desktop nav + Theme toggle (visible on desktop) #}
+      <div class="header-actions">
+        <nav class="site-nav" id="site-nav">
+          <a href="/">Home</a>
+          <a href="/about/">About</a>
+          <a href="/cv/">CV</a>
+          {# Slash pages dropdown - all root pages in one menu #}
+          <div class="nav-dropdown" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
+            <a href="/slashes/" class="nav-dropdown-trigger">
+              /
+              <svg class="w-3 h-3 ml-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+              </svg>
+            </a>
+            <div class="nav-dropdown-menu" x-show="open" x-transition x-cloak>
+              <a href="/slashes/">All Pages</a>
+              <a href="/cv/">/cv</a>
+              {% for item in collections.pages %}
+              <a href="{{ item.url }}">/{{ item.fileSlug }}</a>
+              {% endfor %}
+              {# Plugin pages — only show when their data source is configured #}
+              {% set hasPluginPages = (funkwhaleActivity and funkwhaleActivity.source == "indiekit") or
+                    (githubActivity and githubActivity.source != "error") or
+                    (lastfmActivity and lastfmActivity.source == "indiekit") or
+                    (newsActivity and newsActivity.source == "indiekit") or
+                    (youtubeChannel and youtubeChannel.source == "indiekit") or
+                    (blogrollStatus and blogrollStatus.source == "indiekit") or
+                    (podrollStatus and podrollStatus.source == "indiekit") %}
+              {% if hasPluginPages %}
+              <div class="nav-dropdown-divider"></div>
+              {% if blogrollStatus and blogrollStatus.source == "indiekit" %}<a href="/blogroll/">/blogroll</a>{% endif %}
+              {% if funkwhaleActivity and funkwhaleActivity.source == "indiekit" %}<a href="/funkwhale/">/funkwhale</a>{% endif %}
+              {% if githubActivity and githubActivity.source != "error" %}<a href="/github/">/github</a>{% endif %}
+              {% if lastfmActivity and lastfmActivity.source == "indiekit" %}<a href="/listening/">/listening</a>{% endif %}
+              {% if newsActivity and newsActivity.source == "indiekit" %}<a href="/news/">/news</a>{% endif %}
+              {% if podrollStatus and podrollStatus.source == "indiekit" %}<a href="/podroll/">/podroll</a>{% endif %}
+              {% if youtubeChannel and youtubeChannel.source == "indiekit" %}<a href="/youtube/">/youtube</a>{% endif %}
+              {% endif %}
+            </div>
+          </div>
+          {# Blog dropdown #}
+          <div class="nav-dropdown" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
+            <a href="/blog/" class="nav-dropdown-trigger">
+              Blog
+              <svg class="w-3 h-3 ml-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+              </svg>
+            </a>
+            <div class="nav-dropdown-menu" x-show="open" x-transition x-cloak>
+              <a href="/blog/">All Posts</a>
+              {% for pt in enabledPostTypes %}
+              <a href="{{ pt.path }}">{{ pt.label }}</a>
+              {% endfor %}
+            </div>
+          </div>
+          <a href="/interactions/">Interactions</a>
+          <a href="/digest/">Digest</a>
+          <a href="/dashboard"
+             x-data="{ show: false }"
+             x-show="show"
+             x-cloak
+             x-transition
+             @indiekit:auth.window="show = $event.detail.loggedIn"
+             class="admin-nav-link">
+            <svg class="w-4 h-4 inline -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>
+            </svg>
+            Dashboard
+          </a>
+        </nav>
+        <a href="/search/" aria-label="Search" title="Search" class="p-2 rounded-lg text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
+          </svg>
+        </a>
+        <button id="theme-toggle" type="button" class="theme-toggle" aria-label="Toggle dark mode" title="Toggle dark mode">
+          <svg class="sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="5"/>
+            <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+          </svg>
+          <svg class="moon-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    {# Mobile nav dropdown #}
+    <nav class="mobile-nav hidden" id="mobile-nav" x-data="{ blogOpen: false, slashOpen: false }">
+      <a href="/">Home</a>
+      <a href="/about/">About</a>
+      <a href="/cv/">CV</a>
+      {# Slash pages section - all root pages in one menu #}
+      <div class="mobile-nav-section">
+        <button type="button" class="mobile-nav-toggle" @click="slashOpen = !slashOpen">
+          /
+          <svg class="w-4 h-4 transition-transform" :class="{ 'rotate-180': slashOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </button>
+        <div class="mobile-nav-submenu" x-show="slashOpen" x-collapse>
+          <a href="/slashes/">All Pages</a>
+          <a href="/cv/">/cv</a>
+          {% for item in collections.pages %}
+          <a href="{{ item.url }}">/{{ item.fileSlug }}</a>
+          {% endfor %}
+          {# Plugin pages — only show when configured #}
+          {% if hasPluginPages %}
+          <div class="mobile-nav-divider"></div>
+          {% if blogrollStatus and blogrollStatus.source == "indiekit" %}<a href="/blogroll/">/blogroll</a>{% endif %}
+          {% if funkwhaleActivity and funkwhaleActivity.source == "indiekit" %}<a href="/funkwhale/">/funkwhale</a>{% endif %}
+          {% if githubActivity and githubActivity.source != "error" %}<a href="/github/">/github</a>{% endif %}
+          {% if lastfmActivity and lastfmActivity.source == "indiekit" %}<a href="/listening/">/listening</a>{% endif %}
+          {% if newsActivity and newsActivity.source == "indiekit" %}<a href="/news/">/news</a>{% endif %}
+          {% if podrollStatus and podrollStatus.source == "indiekit" %}<a href="/podroll/">/podroll</a>{% endif %}
+          {% if youtubeChannel and youtubeChannel.source == "indiekit" %}<a href="/youtube/">/youtube</a>{% endif %}
+          {% endif %}
+        </div>
+      </div>
+      {# Blog section #}
+      <div class="mobile-nav-section">
+        <button type="button" class="mobile-nav-toggle" @click="blogOpen = !blogOpen">
+          Blog
+          <svg class="w-4 h-4 transition-transform" :class="{ 'rotate-180': blogOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </button>
+        <div class="mobile-nav-submenu" x-show="blogOpen" x-collapse>
+          <a href="/blog/">All Posts</a>
+          {% for pt in enabledPostTypes %}
+          <a href="{{ pt.path }}">{{ pt.label }}</a>
+          {% endfor %}
+        </div>
+      </div>
+      <a href="/interactions/">Interactions</a>
+      <a href="/digest/">Digest</a>
+      <a href="/search/">Search</a>
+      <a href="/dashboard"
+         x-data="{ show: false }"
+         x-show="show"
+         x-cloak
+         @indiekit:auth.window="show = $event.detail.loggedIn">
+        Dashboard
+      </a>
+      {# Mobile theme toggle #}
+      <button type="button" class="mobile-theme-toggle" aria-label="Toggle dark mode">
+        <span class="theme-label">Theme</span>
+        <span class="theme-icons">
+          <svg class="sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="5"/>
+            <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+          </svg>
+          <svg class="moon-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+          </svg>
+        </span>
+      </button>
+    </nav>
+  </header>
+
+  <main class="container py-8" data-pagefind-body>
+    {% if withSidebar and page.url == "/" and homepageConfig and homepageConfig.sections %}
+    {# Homepage: builder controls its own layout and sidebar #}
+    {{ content | safe }}
+    {% elif withSidebar %}
+    <div class="layout-with-sidebar">
+      <div class="main-content">
+        {{ content | safe }}
+      </div>
+      <aside class="sidebar" data-pagefind-ignore>
+        {% include "components/sidebar.njk" %}
+      </aside>
+    </div>
+    {% elif withBlogSidebar %}
+    <div class="layout-with-sidebar">
+      <div class="main-content">
+        {{ content | safe }}
+      </div>
+      <aside class="sidebar blog-sidebar" data-pagefind-ignore>
+        {% include "components/blog-sidebar.njk" %}
+      </aside>
+    </div>
+    {% else %}
+    {{ content | safe }}
+    {% endif %}
+  </main>
+
+  <footer class="border-t border-surface-200 dark:border-surface-700 mt-12 pt-8 pb-6">
+    <div class="container">
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
+        {# Navigate #}
+        <div>
+          <h4 class="text-sm font-semibold uppercase tracking-wider text-surface-500 dark:text-surface-400 mb-3">Navigate</h4>
+          <ul class="space-y-2">
+            <li><a href="/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Home</a></li>
+            <li><a href="/about/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">About</a></li>
+            <li><a href="/cv/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">CV</a></li>
+            <li><a href="/changelog/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Changelog</a></li>
+            <li><a href="/search/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Search</a></li>
+          </ul>
+        </div>
+        {# Content #}
+        <div>
+          <h4 class="text-sm font-semibold uppercase tracking-wider text-surface-500 dark:text-surface-400 mb-3">Content</h4>
+          <ul class="space-y-2">
+            <li><a href="/blog/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Blog</a></li>
+            {% for pt in enabledPostTypes %}
+            <li><a href="{{ pt.path }}" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">{{ pt.label }}</a></li>
+            {% endfor %}
+            <li><a href="/interactions/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Interactions</a></li>
+            <li><a href="/digest/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Digest</a></li>
+          </ul>
+        </div>
+        {# Connect #}
+        <div>
+          <h4 class="text-sm font-semibold uppercase tracking-wider text-surface-500 dark:text-surface-400 mb-3">Connect</h4>
+          <ul class="space-y-2">
+            {% for social in site.social %}
+            <li><a href="{{ social.url }}" rel="{{ social.rel }}" target="_blank" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">{{ social.name }}</a></li>
+            {% endfor %}
+          </ul>
+        </div>
+        {# Meta #}
+        <div>
+          <h4 class="text-sm font-semibold uppercase tracking-wider text-surface-500 dark:text-surface-400 mb-3">Meta</h4>
+          <ul class="space-y-2">
+            <li><a href="/feed.xml" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">RSS Feed</a></li>
+            <li><a href="/feed.json" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">JSON Feed</a></li>
+            <li><a href="/changelog/" class="text-sm text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Changelog</a></li>
+          </ul>
+        </div>
+      </div>
+      <p class="text-center text-sm text-surface-500 dark:text-surface-400">Powered by <a href="https://getindiekit.com" class="hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Indiekit</a> + <a href="https://11ty.dev" class="hover:text-surface-900 dark:hover:text-surface-100 hover:underline">Eleventy</a></p>
+    </div>
+  </footer>
+  <script>
+    // Mobile menu toggle
+    const menuToggle = document.getElementById('menu-toggle');
+    const mobileNav = document.getElementById('mobile-nav');
+    const menuIcon = menuToggle?.querySelector('.menu-icon');
+    const closeIcon = menuToggle?.querySelector('.close-icon');
+
+    if (menuToggle && mobileNav) {
+      menuToggle.addEventListener('click', () => {
+        const isOpen = !mobileNav.classList.contains('hidden');
+        mobileNav.classList.toggle('hidden');
+        menuIcon?.classList.toggle('hidden');
+        closeIcon?.classList.toggle('hidden');
+        menuToggle.setAttribute('aria-expanded', !isOpen);
+      });
+
+      // Close menu when clicking a link
+      mobileNav.querySelectorAll('a').forEach(link => {
+        link.addEventListener('click', () => {
+          mobileNav.classList.add('hidden');
+          menuIcon?.classList.remove('hidden');
+          closeIcon?.classList.add('hidden');
+          menuToggle.setAttribute('aria-expanded', 'false');
+        });
+      });
+    }
+
+    // Theme toggle functionality (desktop and mobile)
+    function toggleTheme() {
+      const isDark = document.documentElement.classList.toggle('dark');
+      localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    }
+
+    const themeToggle = document.getElementById('theme-toggle');
+    if (themeToggle) {
+      themeToggle.addEventListener('click', toggleTheme);
+    }
+
+    const mobileThemeToggle = document.querySelector('.mobile-theme-toggle');
+    if (mobileThemeToggle) {
+      mobileThemeToggle.addEventListener('click', toggleTheme);
+    }
+
+    // Link prefetching on mouseover/touchstart for faster navigation
+    function prefetch(e) {
+      if (e.target.tagName !== 'A') return;
+      if (e.target.origin !== location.origin) return;
+      const removeFragment = (url) => url.split('#')[0];
+      if (removeFragment(location.href) === removeFragment(e.target.href)) return;
+      const link = document.createElement('link');
+      link.rel = 'prefetch';
+      link.href = e.target.href;
+      document.head.appendChild(link);
+    }
+    document.documentElement.addEventListener('mouseover', prefetch, { capture: true, passive: true });
+    document.documentElement.addEventListener('touchstart', prefetch, { capture: true, passive: true });
+  </script>
+  {# Island architecture - lazy hydration for widgets #}
+  <script type="module" src="/js/is-land.js"></script>
+  {# Relative date display - progressively enhances <time> elements #}
+  <script src="/js/time-difference.js?v={{ '/js/time-difference.js' | hash }}" defer></script>
+  {# Responsive tables - auto-enhances <table> on narrow screens #}
+  <script type="module" src="/js/table-saw.js"></script>
+  {# Client-side filtering for archive pages #}
+  <script type="module" src="/js/filter-container.js"></script>
+  {# Client-side webmention fetcher - supplements build-time cache with real-time data #}
+  <script src="/js/webmentions.js?v={{ '/js/webmentions.js' | hash }}" defer></script>
+  {# Admin auth detection - shows dashboard link + FAB when logged in #}
+  <script src="/js/admin.js?v={{ '/js/admin.js' | hash }}" defer></script>
+  {# Save for Later buttons — active when logged in #}
+  <script src="/js/save-later.js?v={{ '/js/save-later.js' | hash }}" defer></script>
+  {# Share Post buttons — opens share form popup when logged in #}
+  <script src="/js/share-post.js?v={{ '/js/share-post.js' | hash }}" defer></script>
+
+  {# Floating Action Button - visible only when logged in #}
+  <div x-data="{ show: false, open: false }"
+       x-show="show"
+       x-cloak
+       @indiekit:auth.window="show = $event.detail.loggedIn"
+       @keydown.escape.window="open = false"
+       class="fab-container">
+    {# Backdrop #}
+    <div x-show="open"
+         x-transition:enter="transition ease-out duration-200"
+         x-transition:enter-start="opacity-0"
+         x-transition:enter-end="opacity-100"
+         x-transition:leave="transition ease-in duration-150"
+         x-transition:leave-start="opacity-100"
+         x-transition:leave-end="opacity-0"
+         @click="open = false"
+         class="fab-backdrop"></div>
+    {# Menu items #}
+    <div x-show="open"
+         x-transition:enter="transition ease-out duration-200"
+         x-transition:enter-start="opacity-0 translate-y-4"
+         x-transition:enter-end="opacity-100 translate-y-0"
+         x-transition:leave="transition ease-in duration-150"
+         x-transition:leave-start="opacity-100 translate-y-0"
+         x-transition:leave-end="opacity-0 translate-y-4"
+         class="fab-menu">
+      {% if mpUrl %}
+      <a href="/posts/edit?url={{ mpUrl | urlencode }}" @click="open = false" class="fab-menu-item" rel="nofollow">
+        <svg class="w-5 h-5 text-accent-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+        </svg>
+        <span>Edit this post</span>
+      </a>
+      <div class="fab-menu-divider"></div>
+      {% endif %}
+      <a href="/posts/create?type=page" @click="open = false" class="fab-menu-item" rel="nofollow">
+        <svg class="w-5 h-5 text-surface-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
+        </svg>
+        <span>Page</span>
+      </a>
+      <a href="/posts/create?type=bookmark" @click="open = false" class="fab-menu-item" rel="nofollow">
+        <svg class="w-5 h-5 text-surface-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
+        </svg>
+        <span>Bookmark</span>
+      </a>
+      <a href="/posts/create?type=photo" @click="open = false" class="fab-menu-item" rel="nofollow">
+        <svg class="w-5 h-5 text-surface-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
+        </svg>
+        <span>Photo</span>
+      </a>
+      <a href="/posts/create?type=article" @click="open = false" class="fab-menu-item" rel="nofollow">
+        <svg class="w-5 h-5 text-surface-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/>
+        </svg>
+        <span>Article</span>
+      </a>
+      <a href="/posts/create?type=note" @click="open = false" class="fab-menu-item" rel="nofollow">
+        <svg class="w-5 h-5 text-surface-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
+        </svg>
+        <span>Note</span>
+      </a>
+    </div>
+    {# FAB button #}
+    <button @click="open = !open"
+            class="fab-button"
+            :aria-expanded="open"
+            aria-label="Create new post">
+      <svg class="w-7 h-7 transition-transform duration-200" :class="{ 'rotate-45': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round">
+        <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+      </svg>
+    </button>
+  </div>
+  {# Pagefind — load at end of body so all DOM elements exist, then process queue #}
+  <script src="/pagefind/pagefind-ui.js"></script>
+  <script>
+    (function() {
+      if (typeof PagefindUI === "undefined") { console.warn("[pagefind] PagefindUI not loaded"); return; }
+      for (var i = 0; i < _pfQueue.length; i++) {
+        new PagefindUI(Object.assign({ element: _pfQueue[i][0], showSubResults: false, showImages: false }, _pfQueue[i][1] || {}));
+      }
+    })();
+  </script>
+</body>
+</html>
diff --git a/_includes/layouts/fullwidth.njk b/_includes/layouts/fullwidth.njk
new file mode 100644
index 0000000..7a84d59
--- /dev/null
+++ b/_includes/layouts/fullwidth.njk
@@ -0,0 +1,25 @@
+---
+layout: layouts/base.njk
+---
+{# Full-width layout for rich HTML pages (interactive guides, architecture diagrams, etc.)
+   Inherits site header + footer from base.njk but renders content at full container width
+   with no sidebar, no post metadata, and no prose constraints. #}
+
+<article>
+  {% if title %}
+  <header class="mb-6 sm:mb-8">
+    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">
+      {{ title }}
+    </h1>
+    {% if description %}
+    <p class="text-lg text-surface-600 dark:text-surface-400">
+      {{ description }}
+    </p>
+    {% endif %}
+  </header>
+  {% endif %}
+
+  <div class="fullwidth-content">
+    {{ content | safe }}
+  </div>
+</article>
diff --git a/_includes/layouts/home.njk b/_includes/layouts/home.njk
new file mode 100644
index 0000000..0f26556
--- /dev/null
+++ b/_includes/layouts/home.njk
@@ -0,0 +1,157 @@
+---
+layout: layouts/base.njk
+withSidebar: true
+---
+
+{# Homepage content — two-tier fallback: #}
+{# 1. Plugin config (homepageConfig) — homepage builder controls everything #}
+{# 2. Default — show recent posts with default hero #}
+
+{# Default hero — only shown for Tier 2 (plugin controls its own hero) #}
+{% if not (homepageConfig and homepageConfig.sections) %}
+<section class="mb-8 sm:mb-12">
+  <div class="flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
+    {# Avatar #}
+    <img
+      src="{{ site.author.avatar }}"
+      alt="{{ site.author.name }}"
+      class="w-24 h-24 sm:w-32 sm:h-32 rounded-full object-cover shadow-lg flex-shrink-0"
+      loading="eager"
+    >
+
+    {# Introduction #}
+    <div class="flex-1 min-w-0">
+      <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
+        {{ site.author.name }}
+      </h1>
+      <p class="text-lg sm:text-xl text-accent-600 dark:text-accent-400 mb-3 sm:mb-4">
+        {{ site.author.title }}
+      </p>
+      {% if site.author.bio %}
+      <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4">
+        {{ site.author.bio }}
+      </p>
+      {% endif %}
+      {% if site.description %}
+      <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4 sm:mb-6">
+        {{ site.description }}
+        <a href="/about/" class="text-accent-600 dark:text-accent-400 hover:underline font-medium">Read more &rarr;</a>
+      </p>
+      {% endif %}
+
+      {# Social Links #}
+      <div class="flex flex-wrap gap-3">
+        {% for link in site.social %}
+        <a
+          href="{{ link.url }}"
+          rel="{{ link.rel }} noopener"
+          class="inline-flex items-center gap-2 px-3 py-2 text-sm bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors"
+          target="_blank"
+        >
+          {% if link.icon == "github" %}
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+          {% elif link.icon == "linkedin" %}
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg>
+          {% elif link.icon == "bluesky" %}
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"></path></svg>
+          {% elif link.icon == "mastodon" %}
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12v6.406z"></path></svg>
+          {% endif %}
+          <span class="text-sm font-medium">{{ link.name }}</span>
+        </a>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</section>
+{% endif %}
+
+{# --- Tier 1: Plugin-driven layout --- #}
+{% if homepageConfig and homepageConfig.sections %}
+  {% include "components/homepage-builder.njk" %}
+
+{# --- Tier 2: Default — recent posts and explore links --- #}
+{% else %}
+
+{# Recent Posts #}
+{% if collections.posts and collections.posts.length %}
+<section class="mb-8 sm:mb-12">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Recent Posts</h2>
+  <div class="space-y-4">
+    {% for post in collections.posts | head(10) %}
+    <article class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
+      <h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
+        <a href="{{ post.url }}" class="hover:text-accent-600 dark:hover:text-accent-400">
+          {{ post.data.title or post.data.name or "Untitled" }}
+        </a>
+      </h3>
+      {% if post.data.summary %}
+      <p class="text-sm text-surface-600 dark:text-surface-400 mb-2 line-clamp-2">{{ post.data.summary }}</p>
+      {% endif %}
+      <div class="flex items-center gap-3 text-xs text-surface-500">
+        <time datetime="{{ post.data.published or post.date }}">
+          {{ (post.data.published or post.date) | date("MMM d, yyyy") }}
+        </time>
+        {% if post.data.postType %}
+        <span class="px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded">{{ post.data.postType }}</span>
+        {% endif %}
+      </div>
+    </article>
+    {% endfor %}
+  </div>
+  <a href="/blog/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-4 inline-flex items-center gap-1">
+    View all posts
+    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
+  </a>
+</section>
+{% endif %}
+
+{# Explore — quick links to key sections #}
+<section class="mb-8 sm:mb-12">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Explore</h2>
+  <div class="grid gap-3 sm:grid-cols-3">
+    <a href="/blog/" class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors text-center">
+      <div class="text-2xl mb-2">
+        <svg class="w-8 h-8 mx-auto text-accent-600 dark:text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
+        </svg>
+      </div>
+      <span class="font-semibold text-surface-900 dark:text-surface-100">Blog</span>
+      <p class="text-sm text-surface-600 dark:text-surface-400 mt-1">Articles, notes, and photos</p>
+    </a>
+    <a href="/cv/" class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors text-center">
+      <div class="text-2xl mb-2">
+        <svg class="w-8 h-8 mx-auto text-accent-600 dark:text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
+        </svg>
+      </div>
+      <span class="font-semibold text-surface-900 dark:text-surface-100">CV</span>
+      <p class="text-sm text-surface-600 dark:text-surface-400 mt-1">Experience and projects</p>
+    </a>
+    <a href="/about/" class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors text-center">
+      <div class="text-2xl mb-2">
+        <svg class="w-8 h-8 mx-auto text-accent-600 dark:text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
+        </svg>
+      </div>
+      <span class="font-semibold text-surface-900 dark:text-surface-100">About</span>
+      <p class="text-sm text-surface-600 dark:text-surface-400 mt-1">Who I am and what I do</p>
+    </a>
+  </div>
+</section>
+
+{# Posting Activity — contribution graph (Tier 2 default only) #}
+{% if collections.posts and collections.posts.length %}
+<section class="mb-8 sm:mb-12">
+  <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Posting Activity</h2>
+  {% postGraph collections.posts %}
+  <a href="/graph/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-4 inline-flex items-center gap-1">
+    View full history
+    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+    </svg>
+  </a>
+</section>
+{% endif %}
+
+{% endif %} {# end two-tier fallback #}
diff --git a/_includes/layouts/page.njk b/_includes/layouts/page.njk
new file mode 100644
index 0000000..cadc492
--- /dev/null
+++ b/_includes/layouts/page.njk
@@ -0,0 +1,136 @@
+---
+layout: layouts/base.njk
+withSidebar: true
+---
+{# Layout for slash pages (/about, /now, /uses, etc.) #}
+{# These are root-level pages created via Indiekit's page post type #}
+
+<article class="h-entry">
+  <header class="mb-6 sm:mb-8">
+    <h1 class="p-name text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">
+      {{ title }}
+    </h1>
+    {% if summary %}
+    <p class="p-summary text-lg text-surface-600 dark:text-surface-400">
+      {{ summary }}
+    </p>
+    {% endif %}
+    {% if updated %}
+    <p class="text-sm text-surface-500 dark:text-surface-400 mt-2">
+      Last updated: <time class="dt-updated" datetime="{{ updated | isoDate }}">{{ updated | dateDisplay }}</time>
+    </p>
+    {% endif %}
+  </header>
+
+  <div class="e-content prose dark:prose-invert prose-lg max-w-none">
+    {{ content | safe }}
+  </div>
+
+  {# AI post-graph — shown only on the /ai/ page #}
+  {% if page.url == "/ai/" and collections.posts %}
+  {% set stats = collections.posts | aiStats %}
+  {% set aiPostsList = collections.posts | aiPosts %}
+  <section class="mt-8 sm:mt-12 p-6 rounded-xl bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700">
+    <h2 class="text-xl font-bold text-surface-900 dark:text-surface-100 mb-4">AI Usage Across Posts</h2>
+    <div class="grid gap-4 sm:grid-cols-4 mb-6">
+      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+        <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.total }}</div>
+        <div class="text-xs text-surface-500 dark:text-surface-400">Total posts</div>
+      </div>
+      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+        <div class="text-2xl font-bold text-amber-600 dark:text-amber-400">{{ stats.aiCount }}</div>
+        <div class="text-xs text-surface-500 dark:text-surface-400">AI-involved</div>
+      </div>
+      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+        <div class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{{ stats.total - stats.aiCount }}</div>
+        <div class="text-xs text-surface-500 dark:text-surface-400">Human-only</div>
+      </div>
+      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+        <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.percentage }}%</div>
+        <div class="text-xs text-surface-500 dark:text-surface-400">AI ratio</div>
+      </div>
+    </div>
+
+    {# Breakdown by level #}
+    <div class="flex flex-wrap gap-3 text-sm mb-6">
+      <span class="px-3 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-600 dark:text-surface-300">
+        Level 0 (None): {{ stats.byLevel[0] }}
+      </span>
+      <span class="px-3 py-1 rounded-full bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300">
+        Level 1 (Editorial): {{ stats.byLevel[1] }}
+      </span>
+      <span class="px-3 py-1 rounded-full bg-amber-100 dark:bg-amber-900/40 text-amber-800 dark:text-amber-200">
+        Level 2 (Co-drafted): {{ stats.byLevel[2] }}
+      </span>
+      <span class="px-3 py-1 rounded-full bg-amber-200 dark:bg-amber-900/60 text-amber-900 dark:text-amber-100">
+        Level 3 (AI-generated): {{ stats.byLevel[3] }}
+      </span>
+    </div>
+
+    {# Post graph showing AI posts (highlighted) on the full year grid #}
+    <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-3">AI-Involved Posts Over Time</h3>
+    <p class="text-sm text-surface-500 dark:text-surface-400 mb-4">Highlighted days had posts with AI involvement (level 1+). Empty boxes represent days with no AI-involved posts.</p>
+    {% postGraph aiPostsList, { prefix: "ai", highlightColorLight: "#d97706", highlightColorDark: "#fbbf24" } %}
+  </section>
+  {% endif %}
+
+  {# AI usage disclosure #}
+  {% set aiTextLevel = aiTextLevel or ai_text_level %}
+  {% set aiCodeLevel = aiCodeLevel or ai_code_level %}
+  {% set aiTools = aiTools or ai_tools %}
+  {% set aiDescription = aiDescription or ai_description %}
+  {% if aiTextLevel or aiCodeLevel or aiTools %}
+  <aside class="mt-6 p-4 rounded-lg bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700">
+    <div class="flex items-center gap-2 mb-2">
+      <svg class="w-4 h-4 text-surface-500 dark:text-surface-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2 2 0 01-2 2H7a2 2 0 01-2-2v-2.5"/>
+      </svg>
+      <strong class="text-sm font-semibold text-surface-700 dark:text-surface-300">AI Usage</strong>
+    </div>
+    <div class="flex flex-wrap gap-3 text-xs text-surface-600 dark:text-surface-400">
+      {% if aiTextLevel %}
+      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-100 dark:bg-surface-700">
+        Text: {% if aiTextLevel === "0" %}None{% elif aiTextLevel === "1" %}Editorial{% elif aiTextLevel === "2" %}Co-drafted{% elif aiTextLevel === "3" %}AI-generated{% endif %}
+      </span>
+      {% endif %}
+      {% if aiCodeLevel %}
+      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-100 dark:bg-surface-700">
+        Code: {% if aiCodeLevel === "0" %}Human{% elif aiCodeLevel === "1" %}AI-assisted{% elif aiCodeLevel === "2" %}AI-generated{% endif %}
+      </span>
+      {% endif %}
+      {% if aiTools %}
+      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-100 dark:bg-surface-700">
+        Tools: {{ aiTools }}
+      </span>
+      {% endif %}
+    </div>
+    {% if aiDescription %}
+    <p class="mt-2 text-xs text-surface-500 dark:text-surface-400">{{ aiDescription }}</p>
+    {% endif %}
+    <p class="mt-2 text-xs"><a href="/ai/" class="text-accent-600 dark:text-accent-400 hover:underline">Learn more about AI usage on this site &rarr;</a></p>
+  </aside>
+  {% endif %}
+
+  {# Categories/tags if present #}
+  {% if category %}
+  <footer class="mt-8 pt-6 border-t border-surface-200 dark:border-surface-700">
+    <div class="flex flex-wrap gap-2">
+      {% if category is string %}
+      <a href="/categories/{{ category | slugify }}/" class="p-category text-sm px-3 py-1 bg-surface-100 dark:bg-surface-800 rounded-full hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors">
+        {{ category }}
+      </a>
+      {% else %}
+      {% for cat in category %}
+      <a href="/categories/{{ cat | slugify }}/" class="p-category text-sm px-3 py-1 bg-surface-100 dark:bg-surface-800 rounded-full hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors">
+        {{ cat }}
+      </a>
+      {% endfor %}
+      {% endif %}
+    </div>
+  </footer>
+  {% endif %}
+
+  {# Hidden metadata for microformats #}
+  <a class="u-url hidden" href="{{ page.url }}"></a>
+  <data class="p-author h-card hidden" value="{{ site.author.name }}"></data>
+</article>
diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
new file mode 100644
index 0000000..8e61378
--- /dev/null
+++ b/_includes/layouts/post.njk
@@ -0,0 +1,264 @@
+---
+layout: layouts/base.njk
+withBlogSidebar: true
+---
+<article class="h-entry post" x-data="lightbox" @keydown.window="onKeydown($event)">
+  {# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
+  {% set bookmarkedUrl = bookmarkOf or bookmark_of %}
+  {% set likedUrl = likeOf or like_of %}
+  {% set replyTo = inReplyTo or in_reply_to %}
+  {% set repostedUrl = repostOf or repost_of %}
+
+  {% if title %}
+  <h1 class="p-name text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-3 sm:mb-4">{{ title }}</h1>
+  {% else %}
+  <div class="flex items-center gap-2 mb-1">
+    <span class="text-sm font-medium text-surface-500 dark:text-surface-400">
+      {% if replyTo %}&#8617; Reply{% elif likedUrl %}&#9829; Like{% elif repostedUrl %}&#9851; Repost{% elif bookmarkedUrl %}&#128278; Bookmark{% else %}&#9998; Note{% endif %}
+    </span>
+  </div>
+  {% endif %}
+
+  <div class="post-meta mb-4 sm:mb-6">
+    <time-difference><time class="dt-published" datetime="{{ date.toISOString() }}">
+      {{ date | dateDisplay }}
+    </time></time-difference>
+    {% if category %}
+    <span class="post-categories">
+      {# Handle both string and array categories #}
+      {% if category is string %}
+      <a href="/categories/{{ category | slugify }}/" class="p-category">{{ category }}</a>
+      {% else %}
+      {% for cat in category %}
+      <a href="/categories/{{ cat | slugify }}/" class="p-category">{{ cat }}</a>
+      {% endfor %}
+      {% endif %}
+    </span>
+    {% endif %}
+  </div>
+
+  {# Bridgy syndication content - controls what gets posted to social networks #}
+  {# For interaction types (bookmarks, likes, replies, reposts), include the target URL #}
+  {% set bridgySummary = description or summary or (content | ogDescription(280)) %}
+  {% set interactionUrl = bookmarkedUrl or likedUrl or replyTo or repostedUrl %}
+
+  {% if bridgySummary or interactionUrl %}
+  <p class="p-summary e-bridgy-mastodon-content e-bridgy-bluesky-content hidden">{% if bookmarkedUrl %}🔖 {{ bookmarkedUrl }}{% if bridgySummary %} - {{ bridgySummary }}{% endif %}{% elif likedUrl %}❤️ {{ likedUrl }}{% if bridgySummary %} - {{ bridgySummary }}{% endif %}{% elif replyTo %}↩️ {{ replyTo }}{% if bridgySummary %} - {{ bridgySummary }}{% endif %}{% elif repostedUrl %}🔁 {{ repostedUrl }}{% if bridgySummary %} - {{ bridgySummary }}{% endif %}{% else %}{{ bridgySummary }}{% endif %}</p>
+  {% endif %}
+
+  {# Render photo(s) from frontmatter for photo posts - use eleventy:ignore to skip image transform #}
+  {% if photo %}
+  <div class="photo-gallery mb-6">
+    {% for img in photo %}
+      {% set photoUrl = img.url %}
+      {% if photoUrl and photoUrl[0] != '/' and 'http' not in photoUrl %}
+        {% set photoUrl = '/' + photoUrl %}
+      {% endif %}
+      <img src="{{ photoUrl }}" alt="{{ img.alt | default('Photo') }}" class="u-photo rounded-lg max-w-full" loading="lazy" eleventy:ignore>
+    {% endfor %}
+  </div>
+  {% endif %}
+
+  {% set isInteraction = replyTo or likedUrl or repostedUrl or bookmarkedUrl %}
+  {% set hasContent = content and content | striptags | trim %}
+  <div class="e-content prose prose-surface dark:prose-invert max-w-none{% if isInteraction and hasContent %} border-l-[3px] border-l-accent-500 dark:border-l-accent-400 pl-4{% endif %}">
+    {{ content | safe }}
+  </div>
+
+  {# Rich reply context with h-cite microformat #}
+  {% include "components/reply-context.njk" %}
+
+  {# AI usage disclosure — always shown, collapsed by default, placed after reply context #}
+  {% set aiTextLevel = aiTextLevel or ai_text_level or "0" %}
+  {% set aiCodeLevel = aiCodeLevel or ai_code_level %}
+  {% set aiTools = aiTools or ai_tools %}
+  {% set aiDescription = aiDescription or ai_description %}
+  <details class="mt-4 text-xs text-surface-500 dark:text-surface-400">
+    <summary class="cursor-pointer hover:text-surface-600 dark:hover:text-surface-300 list-none flex items-center gap-1.5 [&::-webkit-details-marker]:hidden">
+      <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2 2 0 01-2 2H7a2 2 0 01-2-2v-2.5"/>
+      </svg>
+      <span>AI:
+        Text {% if aiTextLevel === "0" %}None{% elif aiTextLevel === "1" %}Editorial{% elif aiTextLevel === "2" %}Co-drafted{% elif aiTextLevel === "3" %}AI-generated{% endif %}{% if aiCodeLevel %} · Code {% if aiCodeLevel === "0" %}Human{% elif aiCodeLevel === "1" %}AI-assisted{% elif aiCodeLevel === "2" %}AI-generated{% endif %}{% endif %}{% if aiTools %} · {{ aiTools }}{% endif %}
+      </span>
+    </summary>
+    {% if aiDescription %}
+    <p class="mt-1 pl-5">{{ aiDescription }}</p>
+    {% endif %}
+    <p class="mt-1 pl-5"><a href="/ai/" class="hover:text-accent-600 dark:hover:text-accent-400 underline">Learn more about AI usage on this site</a></p>
+  </details>
+
+  {# Pending syndication targets (for services like IndieNews that require u-syndication before webmention) #}
+  {% if mpSyndicateTo %}
+  <div class="hidden">
+    {% for url in mpSyndicateTo %}
+      {% if "news.indieweb.org" in url %}
+      <a href="{{ url }}" class="u-syndication" rel="syndication">IndieNews</a>
+      {% endif %}
+    {% endfor %}
+  </div>
+  {% endif %}
+
+  {# Syndication Footer - shows where this post was also published #}
+  {# Separate self-hosted AP URLs from external syndication targets #}
+  {% set externalSyndication = [] %}
+  {% set selfHostedApUrl = "" %}
+  {% if syndication %}
+    {% for url in syndication %}
+      {% if url.indexOf(site.url) == 0 %}
+        {% set selfHostedApUrl = url %}
+      {% else %}
+        {% set externalSyndication = (externalSyndication.push(url), externalSyndication) %}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
+  {% if externalSyndication.length or selfHostedApUrl %}
+  <footer class="post-footer mt-8 pt-6 border-t border-surface-200 dark:border-surface-700">
+    <div class="flex flex-wrap items-center gap-4">
+      <span class="text-sm text-surface-500 dark:text-surface-400">Also on:</span>
+      <div class="flex flex-wrap gap-3">
+        {# Fediverse remote interaction button (self-hosted ActivityPub) #}
+        {% if selfHostedApUrl %}
+        <span x-data="fediverseInteract('{{ selfHostedApUrl }}', 'interact')" class="inline-flex">
+          <a class="u-syndication inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#a730b8]/10 text-[#a730b8] hover:bg-[#a730b8]/20 transition-colors text-sm font-medium cursor-pointer"
+             href="{{ selfHostedApUrl }}"
+             rel="syndication"
+             title="Interact from your fediverse instance (Shift+click to change)"
+             @click="handleClick($event)">
+            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <circle cx="18" cy="5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="19" r="2.5"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
+            </svg>
+            <span>Fediverse</span>
+          </a>
+          {% set modalTitle = "Fediverse Interaction" %}
+          {% set modalDescription = "Choose your instance to like, boost, or reply." %}
+          {% include "components/fediverse-modal.njk" %}
+        </span>
+        {% endif %}
+
+        {# External syndication buttons #}
+        {% for url in externalSyndication %}
+          {% if "bsky.app" in url or "bluesky" in url %}
+          <a class="u-syndication inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#0085ff]/10 text-[#0085ff] hover:bg-[#0085ff]/20 transition-colors text-sm font-medium" href="{{ url }}" target="_blank" rel="noopener syndication" title="View on Bluesky">
+            <svg class="w-4 h-4" viewBox="0 0 568 501" fill="currentColor" aria-hidden="true">
+              <path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"/>
+            </svg>
+            <span>Bluesky</span>
+          </a>
+          {% elif site.feeds.mastodon.instance and site.feeds.mastodon.instance in url %}
+          <a class="u-syndication inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#6364ff]/10 text-[#6364ff] hover:bg-[#6364ff]/20 transition-colors text-sm font-medium" href="{{ url }}" target="_blank" rel="noopener syndication" title="View on Mastodon">
+            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
+            </svg>
+            <span>Mastodon</span>
+          </a>
+          {% elif "linkedin.com" in url %}
+          <a class="u-syndication inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#0a66c2]/10 text-[#0a66c2] hover:bg-[#0a66c2]/20 transition-colors text-sm font-medium" href="{{ url }}" target="_blank" rel="noopener syndication" title="View on LinkedIn">
+            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+            </svg>
+            <span>LinkedIn</span>
+          </a>
+          {% elif "news.indieweb.org" in url %}
+          <a class="u-syndication inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#ff5c00]/10 text-[#ff5c00] hover:bg-[#ff5c00]/20 transition-colors text-sm font-medium" href="{{ url }}" target="_blank" rel="noopener syndication" title="View on IndieNews">
+            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/><line x1="10" y1="6" x2="18" y2="6"/><line x1="10" y1="10" x2="18" y2="10"/><line x1="10" y1="14" x2="14" y2="14"/>
+            </svg>
+            <span>IndieNews</span>
+          </a>
+          {% else %}
+          <a class="u-syndication inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors text-sm font-medium" href="{{ url }}" target="_blank" rel="noopener syndication">
+            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
+              <polyline points="15 3 21 3 21 9"/>
+              <line x1="10" y1="14" x2="21" y2="3"/>
+            </svg>
+            <span>{{ url | replace("https://", "") | truncate(20) }}</span>
+          </a>
+          {% endif %}
+        {% endfor %}
+      </div>
+    </div>
+  </footer>
+  {% endif %}
+
+  <a class="u-url" href="{{ page.url }}" hidden>Permalink</a>
+
+  {# Author h-card for IndieWeb authorship #}
+  <span class="p-author h-card hidden">
+    <a class="p-name u-url" href="{{ site.author.url }}">{{ site.author.name }}</a>
+    <img class="u-photo" src="{{ site.author.avatar }}" alt="{{ site.author.name }}" hidden>
+  </span>
+
+  {# JSON-LD Structured Data for SEO #}
+  {# Handle photo as potentially an array #}
+  {% set postImage = photo %}
+  {% if postImage %}
+    {# If photo is an array, use first element (check if first element looks like a URL) #}
+    {% if postImage[0] and (postImage[0] | length) > 10 %}
+      {% set postImage = postImage[0] %}
+    {% endif %}
+  {% endif %}
+  {% if not postImage or postImage == "" %}
+    {% set postImage = image or (content | extractFirstImage) %}
+  {% endif %}
+  {% set postDesc = description | default(content | ogDescription(160)) %}
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    "headline": {{ (title or "Untitled") | dump | safe }},
+    "url": "{{ site.url }}{{ page.url }}",
+    "mainEntityOfPage": {
+      "@type": "WebPage",
+      "@id": "{{ site.url }}{{ page.url }}"
+    },
+    "datePublished": "{{ date.toISOString() }}",
+    "dateModified": "{{ date.toISOString() }}",
+    "author": {
+      "@type": "Person",
+      "name": "{{ site.author.name }}",
+      "url": "{{ site.author.url }}"
+    },
+    "publisher": {
+      "@type": "Organization",
+      "name": "{{ site.name }}",
+      "url": "{{ site.url }}",
+      "logo": {
+        "@type": "ImageObject",
+        "url": "{{ site.url }}/images/og-default.png"
+      }
+    },
+    "description": {{ postDesc | dump | safe }}{% if postImage and postImage != "" and (postImage | length) > 10 %},
+    "image": ["{% if postImage.startsWith('http') %}{{ postImage }}{% elif '/' in postImage and postImage[0] == '/' %}{{ site.url }}{{ postImage }}{% else %}{{ site.url }}/{{ postImage }}{% endif %}"]{% endif %}{% if aiTextLevel or aiCodeLevel or aiTools %},
+    "usageInfo": "{{ site.url }}/ai"{% set _aiParts = [] %}{% if aiTextLevel %}{% set _textLabel %}{% if aiTextLevel === "0" %}None{% elif aiTextLevel === "1" %}Editorial assistance{% elif aiTextLevel === "2" %}Co-drafting{% elif aiTextLevel === "3" %}AI-generated{% endif %}{% endset %}{% set _aiParts = (_aiParts.push("Text: " + _textLabel), _aiParts) %}{% endif %}{% if aiCodeLevel %}{% set _codeLabel %}{% if aiCodeLevel === "0" %}Human-written{% elif aiCodeLevel === "1" %}AI-assisted{% elif aiCodeLevel === "2" %}AI-generated{% endif %}{% endset %}{% set _aiParts = (_aiParts.push("Code: " + _codeLabel), _aiParts) %}{% endif %}{% if aiTools %}{% set _aiParts = (_aiParts.push("Tools: " + aiTools), _aiParts) %}{% endif %},
+    "creativeWorkStatus": "{{ _aiParts | join(', ') }}"{% endif %}
+  }
+  </script>
+
+  {# Lightbox overlay for article images #}
+  <template x-teleport="body">
+    <div x-show="open" x-transition.opacity.duration.200ms
+         class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/90 backdrop-blur-sm"
+         @click.self="close()">
+      <button @click="close()" class="absolute top-4 right-4 text-white/70 hover:text-white text-3xl leading-none p-2 z-10" aria-label="Close">&times;</button>
+      <template x-if="images.length > 1">
+        <button @click="prev()" class="absolute left-4 top-1/2 -translate-y-1/2 text-white/70 hover:text-white text-4xl leading-none p-2 z-10" aria-label="Previous">&lsaquo;</button>
+      </template>
+      <template x-if="images.length > 1">
+        <button @click="next()" class="absolute right-4 top-1/2 -translate-y-1/2 text-white/70 hover:text-white text-4xl leading-none p-2 z-10" aria-label="Next">&rsaquo;</button>
+      </template>
+      <img :src="src" :alt="alt" class="max-h-[90vh] max-w-[90vw] object-contain" @click.stop>
+      <div x-show="alt" x-text="alt" class="absolute bottom-4 left-1/2 -translate-x-1/2 text-white/80 text-sm max-w-2xl text-center px-4 py-2 bg-black/50 rounded-lg"></div>
+    </div>
+  </template>
+</article>
+
+{# Comments section #}
+{% include "components/comments.njk" %}
+
+{# Webmentions display - likes, reposts, replies #}
+{% include "components/webmentions.njk" %}
+
+{# Post Navigation - Previous/Next #}
+{% include "components/post-navigation.njk" %}
diff --git a/about.njk b/about.njk
new file mode 100644
index 0000000..5cd5a40
--- /dev/null
+++ b/about.njk
@@ -0,0 +1,69 @@
+---
+layout: layouts/base.njk
+title: About
+permalink: false
+eleventyExcludeFromCollections: true
+---
+<article class="h-card">
+  <header class="mb-6 sm:mb-8 flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
+    <img
+      src="{{ site.author.avatar }}"
+      alt="{{ site.author.name }}"
+      class="u-photo w-32 h-32 sm:w-40 sm:h-40 rounded-full object-cover shadow-lg flex-shrink-0"
+      loading="eager"
+    >
+    <div class="min-w-0">
+      <h1 class="p-name text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">
+        {{ site.author.name }}
+      </h1>
+      {% if site.author.title %}
+      <p class="p-job-title text-xl text-accent-600 dark:text-accent-400 mb-2">
+        {{ site.author.title }}
+      </p>
+      {% endif %}
+      {% if site.author.location %}
+      <p class="p-locality text-surface-600 dark:text-surface-400 mb-4">
+        {{ site.author.location }}
+      </p>
+      {% endif %}
+      <a href="{{ site.author.url }}" class="u-url u-uid hidden" rel="me">{{ site.author.url }}</a>
+    </div>
+  </header>
+
+  <div class="prose dark:prose-invert prose-lg max-w-none">
+    <p class="p-note text-lg">{{ site.author.bio }}</p>
+
+    <h2>About This Site</h2>
+    <p>
+      This site is powered by <a href="https://getindiekit.com">Indiekit</a>, an IndieWeb
+      server that supports Micropub, Webmentions, and other IndieWeb standards. It runs on
+      <a href="https://cloudron.io">Cloudron</a> for easy self-hosting.
+    </p>
+
+    <h2>IndieWeb</h2>
+    <p>
+      I'm part of the <a href="https://indieweb.org">IndieWeb</a> movement - owning my content
+      and identity online. You can interact with my posts through Webmentions - reply, like,
+      or repost from your own website and it will show up here.
+    </p>
+
+    {% if site.social.length > 0 %}
+    <h2>Connect</h2>
+    <p>Find me on:</p>
+    <ul>
+      {% for link in site.social %}
+      <li>
+        <a href="{{ link.url }}" rel="me" target="_blank">{{ link.name }}</a>
+      </li>
+      {% endfor %}
+    </ul>
+    {% endif %}
+
+    {% if site.author.email %}
+    <p>
+      Or send me an email at
+      <a href="mailto:{{ site.author.email }}" class="u-email">{{ site.author.email }}</a>
+    </p>
+    {% endif %}
+  </div>
+</article>
diff --git a/articles.njk b/articles.njk
new file mode 100644
index 0000000..5b6f2bb
--- /dev/null
+++ b/articles.njk
@@ -0,0 +1,100 @@
+---
+layout: layouts/base.njk
+title: Articles
+withSidebar: true
+pagination:
+  data: collections.articles
+  size: 20
+  alias: paginatedArticles
+  generatePageOnEmptyData: true
+permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
+---
+<div class="h-feed">
+  <div class="flex flex-wrap items-center gap-4 mb-2">
+    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Articles</h1>
+    {% set sparklineSvg = collections.articles | postingFrequency %}
+    {% if sparklineSvg %}
+    <span class="text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
+    {% endif %}
+  </div>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
+    Long-form posts and essays.
+    <span class="text-sm">({{ collections.articles.length }} total)</span>
+  </p>
+
+  {% if paginatedArticles.length > 0 %}
+  <ul class="post-list">
+    {% for post in paginatedArticles %}
+    <li class="h-entry post-card border-l-[3px] border-l-surface-300 dark:border-l-surface-600">
+      <div class="post-header">
+        <h2 class="text-xl font-semibold mb-1 flex-1">
+          <a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400" href="{{ post.url }}">
+            {{ post.data.title or "Untitled" }}
+          </a>
+        </h2>
+      </div>
+      <div class="post-meta mt-2">
+        <time class="dt-published" datetime="{{ post.date | isoDate }}">
+          {{ post.date | dateDisplay }}
+        </time>
+        {% if post.data.category %}
+        <span class="post-categories">
+          {% if post.data.category is string %}
+          <span class="p-category">{{ post.data.category }}</span>
+          {% else %}
+          {% for cat in post.data.category %}
+          <span class="p-category">{{ cat }}</span>
+          {% endfor %}
+          {% endif %}
+        </span>
+        {% endif %}
+      </div>
+      <p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
+        {{ post.templateContent | striptags | truncate(250) }}
+      </p>
+      <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block">
+        Read more &rarr;
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
+
+  {# Pagination controls #}
+  {% if pagination.pages.length > 1 %}
+  <nav class="pagination" aria-label="Articles pagination">
+    <div class="pagination-info">
+      Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
+    </div>
+    <div class="pagination-links">
+      {% if pagination.href.previous %}
+      <a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </span>
+      {% endif %}
+
+      {% if pagination.href.next %}
+      <a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </span>
+      {% endif %}
+    </div>
+  </nav>
+  {% endif %}
+
+  {% else %}
+  {% set postType = "article" %}
+  {% include "components/empty-collection.njk" %}
+  {% endif %}
+</div>
diff --git a/blog.njk b/blog.njk
new file mode 100644
index 0000000..c68087d
--- /dev/null
+++ b/blog.njk
@@ -0,0 +1,389 @@
+---
+layout: layouts/base.njk
+title: Blog
+withSidebar: true
+pagination:
+  data: collections.posts
+  size: 20
+  alias: paginatedPosts
+permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
+---
+<div class="h-feed">
+  <div class="flex flex-wrap items-center gap-4 mb-2">
+    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Blog</h1>
+    {% set sparklineSvg = collections.posts | postingFrequency %}
+    {% if sparklineSvg %}
+    <span class="text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
+    {% endif %}
+  </div>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
+    All posts including articles and notes.
+    <span class="text-sm">({{ collections.posts.length }} total)</span>
+  </p>
+
+  {% if paginatedPosts.length > 0 %}
+  <filter-container oninit leave-url-alone>
+    <div class="flex flex-wrap gap-3 mb-6">
+      <select data-filter-key="type" class="px-3 py-1.5 text-sm bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-lg">
+        <option value="">All Types</option>
+        <option value="article">Articles</option>
+        <option value="note">Notes</option>
+        <option value="photo">Photos</option>
+        <option value="bookmark">Bookmarks</option>
+        <option value="like">Likes</option>
+        <option value="reply">Replies</option>
+        <option value="repost">Reposts</option>
+      </select>
+      <span data-filter-results class="text-sm text-surface-500 dark:text-surface-400 self-center"></span>
+    </div>
+  <ul class="post-list">
+    {% for post in paginatedPosts %}
+    {# Detect post type from frontmatter properties #}
+    {% set likedUrl = post.data.likeOf or post.data.like_of %}
+    {% set bookmarkedUrl = post.data.bookmarkOf or post.data.bookmark_of %}
+    {% set repostedUrl = post.data.repostOf or post.data.repost_of %}
+    {% set replyToUrl = post.data.inReplyTo or post.data.in_reply_to %}
+    {% set hasPhotos = post.data.photo and post.data.photo.length %}
+    {% set _postType %}{% if likedUrl %}like{% elif bookmarkedUrl %}bookmark{% elif repostedUrl %}repost{% elif replyToUrl %}reply{% elif hasPhotos %}photo{% elif post.data.title %}article{% else %}note{% endif %}{% endset %}
+    {% set borderClass = "" %}
+    {% if likedUrl %}
+      {% set borderClass = "border-l-[3px] border-l-red-400 dark:border-l-red-500" %}
+    {% elif bookmarkedUrl %}
+      {% set borderClass = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
+    {% elif repostedUrl %}
+      {% set borderClass = "border-l-[3px] border-l-green-400 dark:border-l-green-500" %}
+    {% elif replyToUrl %}
+      {% set borderClass = "border-l-[3px] border-l-sky-400 dark:border-l-sky-500" %}
+    {% elif hasPhotos %}
+      {% set borderClass = "border-l-[3px] border-l-purple-400 dark:border-l-purple-500" %}
+    {% else %}
+      {% set borderClass = "border-l-[3px] border-l-surface-300 dark:border-l-surface-600" %}
+    {% endif %}
+    <li class="h-entry post-card {{ borderClass }}" data-filter-type="{{ _postType | trim }}">
+
+      {% if likedUrl %}
+      {# ── Like card ── #}
+      <div class="post-header flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="post-meta">
+            <span class="font-medium text-red-600 dark:text-red-400">Liked</span>
+            <time-difference><time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time></time-difference>
+            {% if post.data.category %}
+            <span class="post-categories">
+              {% if post.data.category is string %}
+              <span class="p-category">{{ post.data.category }}</span>
+              {% else %}
+              {% for cat in post.data.category %}
+              <span class="p-category">{{ cat }}</span>
+              {% endfor %}
+              {% endif %}
+            </span>
+            {% endif %}
+          </div>
+          {% unfurl likedUrl %}
+          <a class="u-like-of text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ likedUrl }}">
+            {{ likedUrl }}
+          </a>
+          {% if post.templateContent %}
+          <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
+            {{ post.templateContent | safe }}
+          </div>
+          {% endif %}
+          <a class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+
+      {% elif bookmarkedUrl %}
+      {# ── Bookmark card ── #}
+      <div class="post-header flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="post-meta">
+            <span class="font-medium text-amber-600 dark:text-amber-400">Bookmarked</span>
+            <time-difference><time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time></time-difference>
+            {% if post.data.category %}
+            <span class="post-categories">
+              {% if post.data.category is string %}
+              <span class="p-category">{{ post.data.category }}</span>
+              {% else %}
+              {% for cat in post.data.category %}
+              <span class="p-category">{{ cat }}</span>
+              {% endfor %}
+              {% endif %}
+            </span>
+            {% endif %}
+          </div>
+          {% if post.data.title %}
+          <h2 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mt-2">
+            <a class="hover:text-accent-600 dark:hover:text-accent-400" href="{{ post.url }}">{{ post.data.title }}</a>
+          </h2>
+          {% endif %}
+          {% unfurl bookmarkedUrl %}
+          <a class="u-bookmark-of text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ bookmarkedUrl }}">
+            {{ bookmarkedUrl }}
+          </a>
+          {% if post.templateContent %}
+          <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
+            {{ post.templateContent | safe }}
+          </div>
+          {% endif %}
+          <a class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+
+      {% elif repostedUrl %}
+      {# ── Repost card ── #}
+      <div class="post-header flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="post-meta">
+            <span class="font-medium text-green-600 dark:text-green-400">Reposted</span>
+            <time-difference><time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time></time-difference>
+            {% if post.data.category %}
+            <span class="post-categories">
+              {% if post.data.category is string %}
+              <span class="p-category">{{ post.data.category }}</span>
+              {% else %}
+              {% for cat in post.data.category %}
+              <span class="p-category">{{ cat }}</span>
+              {% endfor %}
+              {% endif %}
+            </span>
+            {% endif %}
+          </div>
+          {% unfurl repostedUrl %}
+          <a class="u-repost-of text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ repostedUrl }}">
+            {{ repostedUrl }}
+          </a>
+          {% if post.templateContent %}
+          <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
+            {{ post.templateContent | safe }}
+          </div>
+          {% endif %}
+          <a class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+
+      {% elif replyToUrl %}
+      {# ── Reply card ── #}
+      <div class="post-header flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="post-meta">
+            <span class="font-medium text-sky-600 dark:text-sky-400">In reply to</span>
+            <time-difference><time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time></time-difference>
+            {% if post.data.category %}
+            <span class="post-categories">
+              {% if post.data.category is string %}
+              <span class="p-category">{{ post.data.category }}</span>
+              {% else %}
+              {% for cat in post.data.category %}
+              <span class="p-category">{{ cat }}</span>
+              {% endfor %}
+              {% endif %}
+            </span>
+            {% endif %}
+          </div>
+          {% unfurl replyToUrl %}
+          <a class="u-in-reply-to text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ replyToUrl }}">
+            {{ replyToUrl }}
+          </a>
+          <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
+            {{ post.templateContent | safe }}
+          </div>
+          <a class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+
+      {% elif hasPhotos %}
+      {# ── Photo card ── #}
+      <div class="post-header flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="post-meta">
+            <span class="font-medium text-purple-600 dark:text-purple-400">Photo</span>
+            <time-difference><time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time></time-difference>
+            {% if post.data.category %}
+            <span class="post-categories">
+              {% if post.data.category is string %}
+              <span class="p-category">{{ post.data.category }}</span>
+              {% else %}
+              {% for cat in post.data.category %}
+              <span class="p-category">{{ cat }}</span>
+              {% endfor %}
+              {% endif %}
+            </span>
+            {% endif %}
+          </div>
+          <div class="photo-gallery mt-3">
+            {% for img in post.data.photo %}
+              {% set photoUrl = img.url %}
+              {% if photoUrl and photoUrl[0] != '/' and 'http' not in photoUrl %}
+                {% set photoUrl = '/' + photoUrl %}
+              {% endif %}
+              <a href="{{ post.url }}" class="photo-link">
+                <img src="{{ photoUrl }}" alt="{{ img.alt | default('Photo') }}" class="u-photo" loading="lazy" eleventy:ignore>
+              </a>
+            {% endfor %}
+          </div>
+          {% if post.templateContent %}
+          <div class="e-content photo-caption prose dark:prose-invert prose-sm mt-3 max-w-none">
+            {{ post.templateContent | safe }}
+          </div>
+          {% endif %}
+          <a class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+
+      {% elif post.data.title %}
+      {# ── Article card (unchanged) ── #}
+      <div class="post-header">
+        <h2 class="text-xl font-semibold mb-1">
+          <a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400" href="{{ post.url }}">
+            {{ post.data.title }}
+          </a>
+        </h2>
+        <div class="post-meta">
+          <time class="dt-published" datetime="{{ post.date | isoDate }}">
+            {{ post.date | dateDisplay }}
+          </time>
+          {% if post.data.category %}
+          <span class="post-categories">
+            {% if post.data.category is string %}
+            <span class="p-category">{{ post.data.category }}</span>
+            {% else %}
+            {% for cat in post.data.category %}
+            <span class="p-category">{{ cat }}</span>
+            {% endfor %}
+            {% endif %}
+          </span>
+          {% endif %}
+        </div>
+      </div>
+      <p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
+        {{ post.templateContent | striptags | truncate(250) }}
+      </p>
+      <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block">
+        Read more &rarr;
+      </a>
+
+      {% else %}
+      {# ── Note card (unchanged) ── #}
+      <div class="post-header">
+        <a class="u-url" href="{{ post.url }}">
+          <time-difference><time class="dt-published text-sm text-surface-500 dark:text-surface-400 font-medium" datetime="{{ post.date | isoDate }}">
+            {{ post.date | dateDisplay }}
+          </time></time-difference>
+        </a>
+        {% if post.data.category %}
+        <span class="post-categories ml-2">
+          {% if post.data.category is string %}
+          <span class="p-category">{{ post.data.category }}</span>
+          {% else %}
+          {% for cat in post.data.category %}
+          <span class="p-category">{{ cat }}</span>
+          {% endfor %}
+          {% endif %}
+        </span>
+        {% endif %}
+      </div>
+      <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
+        {{ post.templateContent | safe }}
+      </div>
+      <div class="post-footer mt-3">
+        <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline">
+          Permalink
+        </a>
+      </div>
+      {% endif %}
+
+      {# AI usage badge — only show when AI was actually used (level > 0) #}
+      {% set postAiText = post.data.aiTextLevel or post.data.ai_text_level %}
+      {% set postAiCode = post.data.aiCodeLevel or post.data.ai_code_level %}
+      {% if (postAiText and postAiText !== "0") or (postAiCode and postAiCode !== "0") %}
+      <span class="inline-flex items-center gap-1 mt-2 px-1.5 py-0.5 rounded text-[10px] font-medium bg-surface-100 dark:bg-surface-700 text-surface-500 dark:text-surface-400" title="AI usage: Text level {{ postAiText or '–' }}, Code level {{ postAiCode or '–' }}">
+        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2 2 0 01-2 2H7a2 2 0 01-2-2v-2.5"/></svg>
+        AI{% if postAiText %}: T{{ postAiText }}{% endif %}{% if postAiCode %}/C{{ postAiCode }}{% endif %}
+      </span>
+      {% endif %}
+    </li>
+    {% endfor %}
+  </ul>
+  </filter-container>
+
+  {# Pagination controls #}
+  {% if pagination.pages.length > 1 %}
+  <nav class="pagination" aria-label="Blog pagination">
+    <div class="pagination-info">
+      Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
+    </div>
+    <div class="pagination-links">
+      {% if pagination.href.previous %}
+      <a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </span>
+      {% endif %}
+
+      {% if pagination.href.next %}
+      <a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </span>
+      {% endif %}
+    </div>
+  </nav>
+  {% endif %}
+
+  {% else %}
+  <p class="text-surface-600 dark:text-surface-400">No posts yet. Create your first post using a Micropub client!</p>
+  <p class="mt-4 text-surface-600 dark:text-surface-400">Some popular Micropub clients:</p>
+  <ul class="list-disc list-inside mt-2 text-surface-700 dark:text-surface-300 space-y-1">
+    <li><a href="https://quill.p3k.io" class="text-accent-600 dark:text-accent-400 hover:underline">Quill</a> - Web-based</li>
+    <li><a href="https://indiepass.app" class="text-accent-600 dark:text-accent-400 hover:underline">IndiePass</a> - Mobile app</li>
+    <li><a href="https://micropublish.net" class="text-accent-600 dark:text-accent-400 hover:underline">Micropublish</a> - Web-based</li>
+  </ul>
+  {% endif %}
+</div>
diff --git a/blogroll.njk b/blogroll.njk
new file mode 100644
index 0000000..fb00140
--- /dev/null
+++ b/blogroll.njk
@@ -0,0 +1,425 @@
+---
+layout: layouts/base.njk
+title: Blogroll
+permalink: /blogroll/
+---
+<div class="blogroll-page" x-data="blogrollApp()" x-init="init()">
+  <header class="mb-6 sm:mb-8">
+    <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
+      <svg class="w-8 h-8 inline-block mr-2 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
+      </svg>
+      Blogroll
+    </h1>
+    <p class="text-surface-600 dark:text-surface-400">
+      Blogs I follow - <span x-text="blogs.length" class="font-medium"></span> feeds
+    </p>
+    <p class="text-xs text-surface-500 mt-2" x-show="status?.lastSync">
+      Last synced: <span x-text="formatDate(status?.lastSync, 'full')"></span>
+    </p>
+  </header>
+
+  {# Tab Navigation - All Blogs first, then one tab per category #}
+  <div class="mb-6 border-b border-surface-200 dark:border-surface-700">
+    <nav class="flex gap-1 overflow-x-auto -mb-px" aria-label="Tabs">
+      <button
+        @click="switchTab('blogs')"
+        :class="activeTab === 'blogs' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+        class="pb-3 px-3 border-b-2 font-medium text-sm transition-colors whitespace-nowrap flex-shrink-0"
+      >
+        All Blogs
+      </button>
+      <template x-for="cat in categories" :key="cat.name">
+        <button
+          @click="switchTab('category:' + cat.name)"
+          :class="activeTab === 'category:' + cat.name ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+          class="pb-3 px-3 border-b-2 font-medium text-sm transition-colors whitespace-nowrap flex-shrink-0"
+        >
+          <span x-text="cat.name"></span>
+          <span class="text-xs opacity-60 ml-1" x-text="`(${cat.count})`"></span>
+        </button>
+      </template>
+    </nav>
+  </div>
+
+  <div class="layout-with-sidebar">
+    {# Main Content #}
+    <div class="main-content">
+      {# Loading State #}
+      <div x-show="loading" class="text-center py-12">
+        <svg class="w-8 h-8 mx-auto text-orange-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <p class="text-surface-600 dark:text-surface-400">Loading...</p>
+      </div>
+
+      {# Error State #}
+      <div x-show="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
+        <p class="text-red-700 dark:text-red-400" x-text="error"></p>
+        <button @click="fetchData()" class="mt-2 text-sm text-red-600 hover:text-red-700 underline">Try again</button>
+      </div>
+
+      {# All Blogs Tab #}
+      <div x-show="activeTab === 'blogs' && !loading" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <template x-for="blog in blogs" :key="blog.id">
+          <a
+            :href="blog.siteUrl || blog.feedUrl"
+            class="block bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 hover:border-orange-400 dark:hover:border-orange-600 transition-colors group"
+            target="_blank"
+            rel="noopener"
+          >
+            <div class="flex items-center gap-3 mb-2">
+              <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center flex-shrink-0 overflow-hidden">
+                <img x-show="blog.photo" :src="blog.photo" class="w-10 h-10 object-cover" loading="lazy" />
+                <span x-show="!blog.photo" class="text-white text-sm font-bold" x-text="blog.title?.charAt(0)?.toUpperCase()"></span>
+              </div>
+              <div class="flex-1 min-w-0">
+                <h3 class="font-medium text-surface-900 dark:text-surface-100 truncate group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors" x-text="blog.title"></h3>
+                <p x-show="blog.category" class="text-xs text-surface-500 truncate" x-text="blog.category"></p>
+              </div>
+            </div>
+            <p x-show="blog.description" class="text-sm text-surface-600 dark:text-surface-400 line-clamp-2 mb-3" x-text="blog.description"></p>
+            <div class="flex items-center gap-3 text-xs text-surface-500">
+              <span x-text="`${blog.itemCount || 0} posts`"></span>
+              <span :class="blog.status === 'active' ? 'text-green-500' : 'text-red-500'">
+                <span x-show="blog.status === 'active'" class="flex items-center gap-1">
+                  <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+                  Active
+                </span>
+                <span x-show="blog.status === 'error'" class="flex items-center gap-1">
+                  <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+                  Error
+                </span>
+              </span>
+            </div>
+          </a>
+        </template>
+      </div>
+
+      {# Empty State for Blogs #}
+      <div x-show="!loading && blogs.length === 0 && activeTab === 'blogs' && !error" class="text-center py-12">
+        <svg class="w-16 h-16 mx-auto text-surface-300 dark:text-surface-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
+        </svg>
+        <p class="text-surface-600 dark:text-surface-400 text-lg">No blogs yet.</p>
+        <p class="text-surface-500 text-sm mt-2">Add blogs via the admin dashboard.</p>
+      </div>
+
+      {# Category Items Tab (one for each category) #}
+      <div x-show="activeTab.startsWith('category:') && !loading" class="space-y-4">
+        <template x-for="item in categoryItems" :key="item.id">
+          <article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-orange-400 dark:hover:border-orange-600 transition-colors">
+            <div class="flex items-start gap-4">
+              <div class="flex-1 min-w-0">
+                <div class="flex items-center gap-2 mb-1">
+                  <h2 class="font-semibold text-lg text-surface-900 dark:text-surface-100">
+                    <a :href="item.url" class="hover:text-orange-600 dark:hover:text-orange-400" target="_blank" rel="noopener" x-text="item.title"></a>
+                  </h2>
+                  <span
+                    x-show="item.isFuture"
+                    class="inline-flex items-center gap-1 px-2 py-0.5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 rounded-full text-xs font-medium flex-shrink-0"
+                  >
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    </svg>
+                    Upcoming
+                  </span>
+                </div>
+                <div class="flex flex-wrap items-center gap-2 text-sm text-surface-500 mb-3">
+                  <a
+                    :href="item.blog?.siteUrl || '#'"
+                    class="inline-flex items-center gap-1 px-2 py-0.5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 rounded-full hover:bg-orange-200 dark:hover:bg-orange-900/50 transition-colors"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
+                      <circle cx="6.18" cy="17.82" r="2.18"/>
+                      <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
+                    </svg>
+                    <span x-text="item.blog?.title || 'Unknown'"></span>
+                  </a>
+                  <time :datetime="item.published" x-text="formatDate(item.published)"></time>
+                </div>
+                <p x-show="item.summary" class="text-sm text-surface-600 dark:text-surface-400 line-clamp-3" x-text="item.summary"></p>
+              </div>
+              <img
+                x-show="item.photo && item.photo[0]"
+                :src="item.photo?.[0]"
+                class="w-24 h-24 rounded-lg object-cover flex-shrink-0 hidden sm:block"
+                loading="lazy"
+              />
+            </div>
+
+            {# Actions #}
+            <div class="flex flex-wrap items-center gap-3 mt-4 pt-4 border-t border-surface-200 dark:border-surface-700">
+              <a
+                :href="item.url"
+                class="inline-flex items-center gap-2 text-sm text-orange-600 hover:text-orange-700 dark:text-orange-400"
+                target="_blank"
+                rel="noopener"
+              >
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+                </svg>
+                Read Post
+              </a>
+              <a
+                x-show="item.blog?.siteUrl"
+                :href="item.blog?.siteUrl"
+                class="inline-flex items-center gap-2 text-sm text-surface-500 hover:text-surface-700 dark:hover:text-surface-300"
+                target="_blank"
+                rel="noopener"
+              >
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
+                </svg>
+                Visit Blog
+              </a>
+              <button
+                class="share-post-btn"
+                :data-share-url="item.url"
+                :data-share-title="item.title"
+                title="Create post"
+                aria-label="Create post"
+              >
+                <span class="share-post-icon">✏️</span>
+                <span class="share-post-label">Post</span>
+              </button>
+              <button
+                class="save-later-btn"
+                :data-save-url="item.url"
+                :data-save-title="item.title"
+                data-save-source="blogroll"
+                title="Save for later"
+                aria-label="Save for later"
+              >
+                <span class="save-later-icon">📑</span>
+                <span class="save-later-label">Save</span>
+              </button>
+            </div>
+          </article>
+        </template>
+
+        {# Load More #}
+        <div x-show="categoryHasMore" class="text-center mt-8">
+          <button
+            @click="loadMoreCategory()"
+            :disabled="loadingMore"
+            class="px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
+          >
+            <span x-show="!loadingMore">Load More</span>
+            <span x-show="loadingMore" class="flex items-center gap-2">
+              <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+              </svg>
+              Loading...
+            </span>
+          </button>
+        </div>
+
+        {# Empty State for Category Items #}
+        <div x-show="categoryItems.length === 0 && !error" class="text-center py-12">
+          <svg class="w-16 h-16 mx-auto text-surface-300 dark:text-surface-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
+          </svg>
+          <p class="text-surface-600 dark:text-surface-400 text-lg">No posts in this category yet.</p>
+          <p class="text-surface-500 text-sm mt-2">Posts will appear once blogs are synced.</p>
+        </div>
+      </div>
+    </div>
+
+    {# Sidebar #}
+    <aside class="sidebar">
+      {# OPML Download Widget #}
+      <div class="widget">
+        <h3 class="widget-title">Subscribe</h3>
+        <p class="text-sm text-surface-600 dark:text-surface-400 mb-4">
+          Import this blogroll into your feed reader.
+        </p>
+        <a
+          href="/blogrollapi/api/opml"
+          class="inline-flex items-center gap-2 px-4 py-2 bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 rounded-lg text-sm transition-colors"
+          download="blogroll.opml"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
+          </svg>
+          Download OPML
+        </a>
+      </div>
+
+      {# Stats Widget #}
+      <div class="widget" x-show="status">
+        <h3 class="widget-title">Stats</h3>
+        <div class="grid grid-cols-2 gap-3 text-center">
+          <div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg">
+            <span class="text-2xl font-bold text-orange-600 dark:text-orange-400 block" x-text="status?.blogs?.count || 0"></span>
+            <span class="text-xs text-surface-500 uppercase">Blogs</span>
+          </div>
+          <div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg">
+            <span class="text-2xl font-bold text-orange-600 dark:text-orange-400 block" x-text="status?.items?.count || 0"></span>
+            <span class="text-xs text-surface-500 uppercase">Posts</span>
+          </div>
+        </div>
+      </div>
+
+      {# Category Quick Links (for when on blogs tab) #}
+      <div class="widget" x-show="categories.length > 0">
+        <h3 class="widget-title flex items-center gap-2">
+          <svg class="w-5 h-5 text-orange-600" fill="currentColor" viewBox="0 0 24 24">
+            <circle cx="6.18" cy="17.82" r="2.18"/>
+            <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
+          </svg>
+          Categories
+        </h3>
+        <ul class="space-y-1 mt-4">
+          <template x-for="cat in categories" :key="cat.name">
+            <li>
+              <button
+                @click="switchTab('category:' + cat.name)"
+                :class="activeTab === 'category:' + cat.name ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400' : 'hover:bg-surface-100 dark:hover:bg-surface-700'"
+                class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors"
+              >
+                <span x-text="cat.name"></span>
+                <span class="text-surface-500" x-text="`(${cat.count})`"></span>
+              </button>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </aside>
+  </div>
+</div>
+
+<script>
+function blogrollApp() {
+  return {
+    blogs: [],
+    categories: [],
+    status: null,
+    loading: true,
+    loadingMore: false,
+    error: null,
+    activeTab: 'blogs',
+    // Category items (loaded per-tab)
+    categoryItems: [],
+    categoryOffset: 0,
+    categoryHasMore: false,
+    limit: 20,
+    // Cache category items to avoid re-fetching on tab switch
+    categoryCache: {},
+
+    async init() {
+      await this.fetchData();
+    },
+
+    async fetchData() {
+      this.loading = true;
+      this.error = null;
+
+      try {
+        const [blogsRes, catsRes, statusRes] = await Promise.all([
+          fetch('/blogrollapi/api/blogs?limit=200').then(r => r.json()),
+          fetch('/blogrollapi/api/categories').then(r => r.json()),
+          fetch('/blogrollapi/api/status').then(r => r.json())
+        ]);
+
+        this.blogs = blogsRes.items || [];
+        this.categories = catsRes.items || [];
+        this.status = statusRes;
+      } catch (err) {
+        this.error = 'Failed to load blogroll: ' + err.message;
+        console.error('Blogroll fetch error:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async switchTab(tab) {
+      this.activeTab = tab;
+
+      if (tab.startsWith('category:')) {
+        const categoryName = tab.replace('category:', '');
+        await this.fetchCategoryItems(categoryName);
+      }
+    },
+
+    async fetchCategoryItems(category) {
+      // Use cache if available
+      if (this.categoryCache[category]) {
+        this.categoryItems = this.categoryCache[category].items;
+        this.categoryHasMore = this.categoryCache[category].hasMore;
+        this.categoryOffset = this.categoryCache[category].offset;
+        return;
+      }
+
+      this.loading = true;
+      this.categoryOffset = 0;
+
+      try {
+        const catParam = encodeURIComponent(category);
+        const res = await fetch(`/blogrollapi/api/items?limit=${this.limit}&category=${catParam}`).then(r => r.json());
+
+        this.categoryItems = res.items || [];
+        this.categoryHasMore = res.hasMore || false;
+
+        // Cache the result
+        this.categoryCache[category] = {
+          items: this.categoryItems,
+          hasMore: this.categoryHasMore,
+          offset: 0
+        };
+      } catch (err) {
+        this.error = 'Failed to load posts: ' + err.message;
+        console.error('Category fetch error:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async loadMoreCategory() {
+      const categoryName = this.activeTab.replace('category:', '');
+      this.loadingMore = true;
+      const newOffset = this.categoryOffset + this.limit;
+
+      try {
+        const catParam = encodeURIComponent(categoryName);
+        const res = await fetch(`/blogrollapi/api/items?limit=${this.limit}&offset=${newOffset}&category=${catParam}`).then(r => r.json());
+
+        this.categoryItems = [...this.categoryItems, ...(res.items || [])];
+        this.categoryHasMore = res.hasMore || false;
+        this.categoryOffset = newOffset;
+
+        // Update cache
+        this.categoryCache[categoryName] = {
+          items: this.categoryItems,
+          hasMore: this.categoryHasMore,
+          offset: newOffset
+        };
+      } catch (err) {
+        console.error('Load more error:', err);
+      } finally {
+        this.loadingMore = false;
+      }
+    },
+
+    formatDate(dateStr, format = 'short') {
+      if (!dateStr) return '';
+      const date = new Date(dateStr);
+      if (isNaN(date.getTime())) return '';
+
+      if (format === 'full') {
+        return date.toLocaleString(undefined, {
+          year: 'numeric', month: 'short', day: 'numeric',
+          hour: '2-digit', minute: '2-digit'
+        });
+      }
+      return date.toLocaleDateString(undefined, {
+        month: 'short', day: 'numeric', year: 'numeric'
+      });
+    }
+  };
+}
+</script>
diff --git a/bookmarks.njk b/bookmarks.njk
new file mode 100644
index 0000000..0feb73e
--- /dev/null
+++ b/bookmarks.njk
@@ -0,0 +1,109 @@
+---
+layout: layouts/base.njk
+title: Bookmarks
+withSidebar: true
+pagination:
+  data: collections.bookmarks
+  size: 20
+  alias: paginatedBookmarks
+  generatePageOnEmptyData: true
+permalink: "bookmarks/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
+---
+<div class="h-feed">
+  <div class="flex flex-wrap items-center gap-4 mb-2">
+    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Bookmarks</h1>
+    {% set sparklineSvg = collections.bookmarks | postingFrequency %}
+    {% if sparklineSvg %}
+    <span class="text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
+    {% endif %}
+  </div>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
+    Links I've saved for later.
+    <span class="text-sm">({{ collections.bookmarks.length }} total)</span>
+  </p>
+
+  {% if paginatedBookmarks.length > 0 %}
+  <ul class="post-list">
+    {% for post in paginatedBookmarks %}
+    <li class="h-entry post-card border-l-[3px] border-l-amber-400 dark:border-l-amber-500">
+      <div class="post-header">
+        {% if post.data.title %}
+        <h2 class="text-xl font-semibold mb-1 flex-1">
+          <a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-amber-600 dark:hover:text-amber-400" href="{{ post.url }}">
+            {{ post.data.title }}
+          </a>
+        </h2>
+        {% endif %}
+      </div>
+      <div class="post-meta mt-2">
+        <time class="dt-published" datetime="{{ post.date | isoDate }}">
+          {{ post.date | dateDisplay }}
+        </time>
+        {% if post.data.category %}
+        <span class="post-categories">
+          {% if post.data.category is string %}
+          <span class="p-category">{{ post.data.category }}</span>
+          {% else %}
+          {% for cat in post.data.category %}
+          <span class="p-category">{{ cat }}</span>
+          {% endfor %}
+          {% endif %}
+        </span>
+        {% endif %}
+      </div>
+      {# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
+      {% set bookmarkedUrl = post.data.bookmarkOf or post.data.bookmark_of %}
+      {% if bookmarkedUrl %}
+      {% unfurl bookmarkedUrl %}
+      <a class="u-bookmark-of text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ bookmarkedUrl }}">
+        {{ bookmarkedUrl }}
+      </a>
+      {% endif %}
+      {% if post.templateContent %}
+      <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
+        {{ post.templateContent | safe }}
+      </div>
+      {% endif %}
+    </li>
+    {% endfor %}
+  </ul>
+
+  {# Pagination controls #}
+  {% if pagination.pages.length > 1 %}
+  <nav class="pagination" aria-label="Bookmarks pagination">
+    <div class="pagination-info">
+      Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
+    </div>
+    <div class="pagination-links">
+      {% if pagination.href.previous %}
+      <a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </span>
+      {% endif %}
+
+      {% if pagination.href.next %}
+      <a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </span>
+      {% endif %}
+    </div>
+  </nav>
+  {% endif %}
+
+  {% else %}
+  {% set postType = "bookmark" %}
+  {% include "components/empty-collection.njk" %}
+  {% endif %}
+</div>
diff --git a/categories-index.njk b/categories-index.njk
new file mode 100644
index 0000000..3c4d298
--- /dev/null
+++ b/categories-index.njk
@@ -0,0 +1,30 @@
+---
+layout: layouts/base.njk
+title: Categories
+withSidebar: true
+permalink: categories/
+eleventyImport:
+  collections:
+    - categories
+---
+<div>
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Categories</h1>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
+    Browse posts by category.
+    <span class="text-sm">({{ collections.categories.length }} categories)</span>
+  </p>
+
+  {% if collections.categories.length > 0 %}
+  <ul class="flex flex-wrap gap-3">
+    {% for cat in collections.categories %}
+    <li>
+      <a href="/categories/{{ cat | slugify }}/" class="inline-block px-4 py-2 bg-surface-100 dark:bg-surface-800 text-surface-900 dark:text-surface-100 rounded-lg hover:bg-accent-100 dark:hover:bg-accent-900 hover:text-accent-700 dark:hover:text-accent-300 transition-colors">
+        {{ cat }}
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
+  {% else %}
+  <p class="text-surface-600 dark:text-surface-400">No categories yet.</p>
+  {% endif %}
+</div>
diff --git a/categories.njk b/categories.njk
new file mode 100644
index 0000000..087aa52
--- /dev/null
+++ b/categories.njk
@@ -0,0 +1,83 @@
+---
+layout: layouts/base.njk
+withSidebar: true
+pagination:
+  data: collections.categories
+  size: 1
+  alias: category
+permalink: "categories/{{ category | slugify }}/"
+eleventyComputed:
+  title: "{{ category }}"
+---
+<div class="h-feed">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">{{ category }}</h1>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
+    Posts tagged with "{{ category }}".
+  </p>
+
+  {% set categoryPosts = [] %}
+  {% for post in collections.posts %}
+    {% if post.data.category %}
+      {% if post.data.category is string %}
+        {% if post.data.category == category %}
+          {% set categoryPosts = (categoryPosts.push(post), categoryPosts) %}
+        {% endif %}
+      {% else %}
+        {% if category in post.data.category %}
+          {% set categoryPosts = (categoryPosts.push(post), categoryPosts) %}
+        {% endif %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+
+  {% if categoryPosts.length > 0 %}
+  <p class="text-sm text-surface-500 dark:text-surface-400 mb-4">{{ categoryPosts.length }} post{% if categoryPosts.length != 1 %}s{% endif %}</p>
+  <ul class="post-list">
+    {% for post in categoryPosts %}
+    {% set postType = post.inputPath | replace("./content/", "") %}
+    {% set postType = postType.split("/")[0] %}
+    {% set borderClass = "" %}
+    {% if postType == "likes" %}
+      {% set borderClass = "border-l-[3px] border-l-red-400 dark:border-l-red-500" %}
+    {% elif postType == "bookmarks" %}
+      {% set borderClass = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
+    {% elif postType == "reposts" %}
+      {% set borderClass = "border-l-[3px] border-l-green-400 dark:border-l-green-500" %}
+    {% elif postType == "replies" %}
+      {% set borderClass = "border-l-[3px] border-l-accent-400 dark:border-l-accent-500" %}
+    {% elif postType == "photos" %}
+      {% set borderClass = "border-l-[3px] border-l-purple-400 dark:border-l-purple-500" %}
+    {% else %}
+      {% set borderClass = "border-l-[3px] border-l-surface-300 dark:border-l-surface-600" %}
+    {% endif %}
+    <li class="h-entry post-card {{ borderClass }}">
+      <div class="post-header">
+        <h2 class="text-xl font-semibold mb-1 flex-1">
+          <a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400" href="{{ post.url }}">
+            {{ post.data.title or post.templateContent | striptags | truncate(60) or "Untitled" }}
+          </a>
+        </h2>
+      </div>
+      <div class="post-meta mt-2">
+        <time class="dt-published" datetime="{{ post.date | isoDate }}">
+          {{ post.date | dateDisplay }}
+        </time>
+        <span class="post-type">{{ postType }}</span>
+      </div>
+      <p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
+        {{ post.templateContent | striptags | truncate(250) }}
+      </p>
+      <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block">
+        View &rarr;
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
+  {% else %}
+  <p class="text-surface-600 dark:text-surface-400">No posts found with this category.</p>
+  {% endif %}
+
+  <div class="mt-8">
+    <a href="/categories/" class="text-accent-600 dark:text-accent-400 hover:underline">&larr; All categories</a>
+  </div>
+</div>
diff --git a/category-feed-json.njk b/category-feed-json.njk
new file mode 100644
index 0000000..d7612f0
--- /dev/null
+++ b/category-feed-json.njk
@@ -0,0 +1,69 @@
+---
+eleventyExcludeFromCollections: true
+eleventyImport:
+  collections:
+    - categoryFeeds
+pagination:
+  data: collections.categoryFeeds
+  size: 1
+  alias: categoryFeed
+permalink: "categories/{{ categoryFeed.slug }}/feed.json"
+---
+{
+  "version": "https://jsonfeed.org/version/1.1",
+  "title": "{{ site.name }} — {{ categoryFeed.name }}",
+  "home_page_url": "{{ site.url }}/categories/{{ categoryFeed.slug }}/",
+  "feed_url": "{{ site.url }}/categories/{{ categoryFeed.slug }}/feed.json",
+  "hubs": [
+    {
+      "type": "WebSub",
+      "url": "https://websubhub.com/hub"
+    }
+  ],
+  "description": "Posts tagged with \"{{ categoryFeed.name }}\" on {{ site.name }}",
+  "language": "{{ site.locale | default('en') }}",
+  "authors": [
+    {
+      "name": "{{ site.author.name | default(site.name) }}",
+      "url": "{{ site.url }}/"
+    }
+  ],
+  "_textcasting": {
+    "version": "1.0",
+    "about": "https://textcasting.org/"
+    {%- set hasSupport = site.support and (site.support.url or site.support.stripe or site.support.lightning or site.support.paymentPointer) %}
+    {%- if hasSupport %},
+    "support": {{ site.support | textcastingSupport | jsonEncode | safe }}
+    {%- endif %}
+  },
+  "items": [
+    {%- for post in categoryFeed.posts %}
+    {%- set absolutePostUrl = site.url + post.url %}
+    {%- set postImage = post.data.photo %}
+    {%- if postImage %}
+      {%- if postImage[0] and (postImage[0] | length) > 10 %}
+        {%- set postImage = postImage[0] %}
+      {%- endif %}
+    {%- endif %}
+    {%- if not postImage or postImage == "" %}
+      {%- set postImage = post.data.image or (post.content | extractFirstImage) %}
+    {%- endif %}
+    {
+      "id": "{{ absolutePostUrl }}",
+      "url": "{{ absolutePostUrl }}",
+      "title": {% if post.data.title %}{{ post.data.title | jsonEncode | safe }}{% else %}null{% endif %},
+      "content_html": {{ post.content | htmlToAbsoluteUrls(absolutePostUrl) | jsonEncode | safe }},
+      "content_text": {{ post.content | striptags | jsonEncode | safe }},
+      "date_published": "{{ post.date | dateToRfc3339 }}",
+      "date_modified": "{{ (post.data.updated or post.date) | dateToRfc3339 }}"
+      {%- if postImage and postImage != "" and (postImage | length) > 10 %},
+      "image": "{{ postImage | url | absoluteUrl(site.url) }}"
+      {%- endif %}
+      {%- set attachments = post.data | feedAttachments %}
+      {%- if attachments.length > 0 %},
+      "attachments": {{ attachments | jsonEncode | safe }}
+      {%- endif %}
+    }{% if not loop.last %},{% endif %}
+    {%- endfor %}
+  ]
+}
diff --git a/category-feed.njk b/category-feed.njk
new file mode 100644
index 0000000..0ada9b6
--- /dev/null
+++ b/category-feed.njk
@@ -0,0 +1,47 @@
+---
+eleventyExcludeFromCollections: true
+eleventyImport:
+  collections:
+    - categoryFeeds
+pagination:
+  data: collections.categoryFeeds
+  size: 1
+  alias: categoryFeed
+permalink: "categories/{{ categoryFeed.slug }}/feed.xml"
+---
+<?xml version="1.0" encoding="utf-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/">
+  <channel>
+    <title>{{ site.name }} — {{ categoryFeed.name }}</title>
+    <link>{{ site.url }}/categories/{{ categoryFeed.slug }}/</link>
+    <description>Posts tagged with "{{ categoryFeed.name }}" on {{ site.name }}</description>
+    <language>{{ site.locale | default('en') }}</language>
+    <atom:link href="{{ site.url }}/categories/{{ categoryFeed.slug }}/feed.xml" rel="self" type="application/rss+xml"/>
+    <atom:link href="https://websubhub.com/hub" rel="hub"/>
+    <lastBuildDate>{{ categoryFeed.posts | getNewestCollectionItemDate | dateToRfc822 }}</lastBuildDate>
+    {%- for post in categoryFeed.posts %}
+    {%- set absolutePostUrl = site.url + post.url %}
+    {%- set postImage = post.data.photo %}
+    {%- if postImage %}
+      {%- if postImage[0] and (postImage[0] | length) > 10 %}
+        {%- set postImage = postImage[0] %}
+      {%- endif %}
+    {%- endif %}
+    {%- if not postImage or postImage == "" %}
+      {%- set postImage = post.data.image or (post.content | extractFirstImage) %}
+    {%- endif %}
+    <item>
+      <title>{{ post.data.title | default(post.content | striptags | truncate(80)) | escape }}</title>
+      <link>{{ absolutePostUrl }}</link>
+      <guid isPermaLink="true">{{ absolutePostUrl }}</guid>
+      <pubDate>{{ post.date | dateToRfc822 }}</pubDate>
+      <description>{{ post.content | htmlToAbsoluteUrls(absolutePostUrl) | escape }}</description>
+      {%- if postImage and postImage != "" and (postImage | length) > 10 %}
+      {%- set imageUrl = postImage | url | absoluteUrl(site.url) %}
+      <enclosure url="{{ imageUrl }}" type="image/jpeg" length="0"/>
+      <media:content url="{{ imageUrl }}" medium="image"/>
+      {%- endif %}
+    </item>
+    {%- endfor %}
+  </channel>
+</rss>
diff --git a/changelog.njk b/changelog.njk
new file mode 100644
index 0000000..68c0a72
--- /dev/null
+++ b/changelog.njk
@@ -0,0 +1,208 @@
+---
+layout: layouts/base.njk
+title: Changelog
+permalink: /changelog/
+eleventyExcludeFromCollections: true
+pagefindIgnore: true
+withSidebar: false
+---
+<div class="page-header mb-6 sm:mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Changelog</h1>
+  <p class="text-surface-600 dark:text-surface-400">Development activity across all Indiekit repositories.</p>
+</div>
+
+<div x-data="changelogApp()" x-init="init()">
+
+  {# Tab navigation #}
+  <div class="flex gap-1 mb-6 border-b border-surface-200 dark:border-surface-700 overflow-x-auto">
+    <template x-for="tab in tabs" :key="tab.key">
+      <button
+        @click="activeTab = tab.key"
+        :class="activeTab === tab.key ? 'border-b-2 border-accent-500 text-accent-600 dark:text-accent-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+        class="flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors -mb-px whitespace-nowrap flex-shrink-0"
+      >
+        <span x-text="tab.label"></span>
+        <span
+          x-show="getCount(tab.key) > 0"
+          x-text="getCount(tab.key)"
+          class="text-xs px-1.5 py-0.5 rounded-full bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400"
+        ></span>
+      </button>
+    </template>
+  </div>
+
+  {# Loading state #}
+  <div x-show="loading" class="flex items-center justify-center py-12">
+    <svg class="animate-spin h-6 w-6 text-accent-500" viewBox="0 0 24 24" fill="none">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+    </svg>
+    <span class="ml-3 text-surface-500">Loading changelog...</span>
+  </div>
+
+  {# Commit list #}
+  <div x-show="!loading" x-cloak>
+    <template x-if="filteredCommits().length === 0">
+      <p class="text-surface-500 py-8 text-center">No recent activity in this category.</p>
+    </template>
+
+    <ul class="space-y-4">
+      <template x-for="commit in filteredCommits()" :key="commit.fullSha">
+        <li class="border border-surface-200 dark:border-surface-700 rounded-lg p-4">
+          <div class="flex items-start gap-3">
+            <a :href="commit.url" target="_blank" rel="noopener"
+               class="font-mono text-xs bg-surface-100 dark:bg-surface-800 px-1.5 py-0.5 rounded text-accent-600 dark:text-accent-400 hover:underline flex-shrink-0 mt-0.5"
+               x-text="commit.sha"></a>
+            <div class="min-w-0 flex-1">
+              <p class="text-sm font-medium text-surface-900 dark:text-surface-100 break-words" x-text="commit.title"></p>
+              <div class="flex flex-wrap items-center gap-2 mt-2">
+                <span
+                  class="text-xs px-2 py-0.5 rounded-full font-medium"
+                  :class="categoryColors[commit.category]"
+                  x-text="categoryLabels[commit.category] || commit.category"
+                ></span>
+                <a :href="commit.repoUrl" target="_blank" rel="noopener"
+                   class="text-xs px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400 hover:text-accent-600 dark:hover:text-accent-400"
+                   x-text="commit.repoName"></a>
+                <span class="text-xs text-surface-500" x-text="formatDate(commit.date)"></span>
+                <span class="text-xs text-surface-400" x-text="'by ' + commit.author"></span>
+              </div>
+              <template x-if="commit.body">
+                <details class="mt-2">
+                  <summary class="text-xs text-surface-500 cursor-pointer hover:text-surface-700 dark:hover:text-surface-300">Show details</summary>
+                  <pre class="mt-1 text-xs text-surface-600 dark:text-surface-400 whitespace-pre-wrap break-words bg-surface-50 dark:bg-surface-800 rounded p-2" x-text="commit.body"></pre>
+                </details>
+              </template>
+            </div>
+          </div>
+        </li>
+      </template>
+    </ul>
+
+    {# Load more button #}
+    <div x-show="canLoadMore" class="mt-8 text-center">
+      <button
+        @click="loadMore()"
+        :disabled="loadingMore"
+        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border border-surface-300 dark:border-surface-600 text-surface-700 dark:text-surface-300 hover:bg-surface-50 dark:hover:bg-surface-800 transition-colors disabled:opacity-50"
+      >
+        <svg x-show="loadingMore" class="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+        </svg>
+        <span x-text="loadingMore ? 'Loading...' : 'Load older commits'"></span>
+      </button>
+    </div>
+
+    {# Summary #}
+    <div x-show="commits.length > 0" class="mt-6 text-center text-xs text-surface-400">
+      <span x-text="commits.length + ' commits'"></span>
+      <span x-show="currentDays !== 'all'"> from the last <span x-text="currentDays"></span> days</span>
+      <span x-show="currentDays === 'all'"> (all time)</span>
+    </div>
+  </div>
+</div>
+
+<script>
+function changelogApp() {
+  return {
+    activeTab: 'all',
+    loading: true,
+    loadingMore: false,
+    commits: [],
+    categories: {},
+    currentDays: 30,
+    daysProgression: [30, 90, 180, 'all'],
+
+    tabs: [
+      { key: 'all', label: 'All' },
+      { key: 'core', label: 'Core' },
+      { key: 'deployment', label: 'Deployment' },
+      { key: 'theme', label: 'Theme' },
+      { key: 'endpoints', label: 'Endpoints' },
+      { key: 'syndicators', label: 'Syndicators' },
+      { key: 'post-types', label: 'Post Types' },
+      { key: 'presets', label: 'Presets' },
+    ],
+
+    categoryLabels: {
+      core: 'Core',
+      deployment: 'Deployment',
+      theme: 'Theme',
+      endpoints: 'Endpoint',
+      syndicators: 'Syndicator',
+      'post-types': 'Post Type',
+      presets: 'Preset',
+      other: 'Other',
+    },
+
+    categoryColors: {
+      core: 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300',
+      deployment: 'bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300',
+      theme: 'bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300',
+      endpoints: 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300',
+      syndicators: 'bg-teal-100 dark:bg-teal-900 text-teal-700 dark:text-teal-300',
+      'post-types': 'bg-pink-100 dark:bg-pink-900 text-pink-700 dark:text-pink-300',
+      presets: 'bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300',
+      other: 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300',
+    },
+
+    get canLoadMore() {
+      const idx = this.daysProgression.indexOf(this.currentDays);
+      return idx >= 0 && idx < this.daysProgression.length - 1;
+    },
+
+    async init() {
+      await this.fetchChangelog(30);
+    },
+
+    async fetchChangelog(days) {
+      try {
+        const response = await fetch('/githubapi/api/changelog?days=' + days);
+        if (!response.ok) throw new Error('Failed to fetch');
+        const data = await response.json();
+        this.commits = data.commits || [];
+        this.categories = data.categories || {};
+        this.currentDays = data.days;
+      } catch (err) {
+        console.error('Changelog error:', err);
+      } finally {
+        this.loading = false;
+        this.loadingMore = false;
+      }
+    },
+
+    async loadMore() {
+      const idx = this.daysProgression.indexOf(this.currentDays);
+      if (idx < 0 || idx >= this.daysProgression.length - 1) return;
+      const nextDays = this.daysProgression[idx + 1];
+      this.loadingMore = true;
+      await this.fetchChangelog(nextDays);
+    },
+
+    filteredCommits() {
+      if (this.activeTab === 'all') return this.commits;
+      return this.commits.filter(c => c.category === this.activeTab);
+    },
+
+    getCount(tabKey) {
+      if (tabKey === 'all') return this.commits.length;
+      return this.commits.filter(c => c.category === tabKey).length;
+    },
+
+    formatDate(dateStr) {
+      if (!dateStr) return '';
+      const d = new Date(dateStr);
+      const now = new Date();
+      const diffMs = now - d;
+      const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+      const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+      if (diffHours < 1) return 'just now';
+      if (diffHours < 24) return diffHours + 'h ago';
+      if (diffDays < 7) return diffDays + 'd ago';
+      if (diffDays < 30) return Math.floor(diffDays / 7) + 'w ago';
+      return d.toLocaleDateString('en', { month: 'short', day: 'numeric', year: d.getFullYear() !== now.getFullYear() ? 'numeric' : undefined });
+    }
+  };
+}
+</script>
diff --git a/chardonsbleus.njk b/chardonsbleus.njk
new file mode 100644
index 0000000..3368bc0
--- /dev/null
+++ b/chardonsbleus.njk
@@ -0,0 +1,28 @@
+---
+layout: layouts/base.njk
+title: ChardonsBleus
+permalink: /chardonsbleus/
+eleventyExcludeFromCollections: true
+---
+<article>
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-6">ChardonsBleus</h1>
+  <div class="w-full">
+    <link rel="stylesheet" href="https://embedbsky.com/embedbsky.com-master-min.css" />
+    <div id="embedbsky-com-timeline-embed"></div>
+    <script>
+      let containerWidth = 0, containerHeight = 800;
+      const getHtml = async (url) => {
+        const resp = await fetch(url);
+        return 200 !== resp.status ? '<p><strong>No feed data could be located</strong></p>' : resp.text();
+      };
+      document.addEventListener('DOMContentLoaded', async () => {
+        const timestamp = (new Date).toISOString();
+        const el = document.getElementById('embedbsky-com-timeline-embed');
+        el.style.width = "100%";
+        el.style.height = containerHeight + "px";
+        const html = await getHtml("https://embedbsky.com/feeds/b623eb5af0b6fb7966040b19bf734f8e11eee859965836a60fe5536a1f01990a.html?v=" + timestamp);
+        el.innerHTML = html;
+      });
+    </script>
+  </div>
+</article>
diff --git a/css/critical.css b/css/critical.css
new file mode 100644
index 0000000..d662e18
--- /dev/null
+++ b/css/critical.css
@@ -0,0 +1,57 @@
+/* Critical CSS — inlined in <head> for first paint */
+/* Covers: layout shell, header, dark mode toggle, font display, basic typography */
+
+*,*::before,*::after{box-sizing:border-box}
+body{margin:0;font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
+
+/* Dark mode base — warm stone palette */
+body{background-color:#faf8f5;color:#1c1b19}
+.dark body{background-color:#0f0e0d;color:#faf8f5}
+
+/* Container */
+.container{max-width:64rem;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
+
+/* Header — sticky, visible immediately */
+.site-header{background-color:#faf8f5;border-bottom:1px solid #e8e5df;padding-top:1rem;padding-bottom:1rem;position:sticky;top:0;z-index:50}
+.dark .site-header{background-color:#1c1b19;border-bottom-color:#3f3b35}
+.header-container{display:flex;align-items:center;justify-content:space-between}
+.site-title{font-size:1.25rem;font-weight:700;color:#1c1b19;text-decoration:none}
+.dark .site-title{color:#faf8f5}
+
+/* Header actions — hidden on mobile */
+.header-actions{display:none}
+@media(min-width:768px){.header-actions{display:flex;align-items:center;gap:1rem}}
+
+/* Mobile menu toggle */
+.menu-toggle{display:block;padding:0.5rem;border-radius:0.5rem;background:none;border:none;color:#5c5750;cursor:pointer}
+@media(min-width:768px){.menu-toggle{display:none}}
+.dark .menu-toggle{color:#a09a90}
+
+/* Hidden utility */
+.hidden{display:none!important}
+[x-cloak]{display:none!important}
+
+/* Dark mode theme toggle icons */
+.theme-toggle .sun-icon{display:none}
+.theme-toggle .moon-icon{display:block}
+.dark .theme-toggle .sun-icon{display:block}
+.dark .theme-toggle .moon-icon{display:none}
+
+/* Main content padding */
+main.container{padding-top:1.5rem;padding-bottom:1.5rem}
+@media(min-width:768px){main.container{padding-top:2rem;padding-bottom:2rem}}
+
+/* Layout with sidebar */
+.layout-with-sidebar{display:grid;grid-template-columns:1fr;gap:1.5rem}
+@media(min-width:1024px){.layout-with-sidebar{grid-template-columns:2fr 1fr;gap:2rem}}
+.main-content{min-width:0;overflow-x:hidden}
+
+/* Basic typography — prevent FOUT */
+h1,h2,h3,h4{margin:0;line-height:1.25}
+a{color:#b45309}
+.dark a{color:#fbbf24}
+
+/* Prevent flash of unstyled content for nav */
+.site-nav{display:flex;align-items:center;gap:1rem}
+.site-nav>a,.site-nav .nav-dropdown-trigger{color:#5c5750;text-decoration:none;padding-top:0.5rem;padding-bottom:0.5rem}
+.dark .site-nav>a,.dark .site-nav .nav-dropdown-trigger{color:#a09a90}
diff --git a/css/lite-yt-embed.css b/css/lite-yt-embed.css
new file mode 100644
index 0000000..c96a472
--- /dev/null
+++ b/css/lite-yt-embed.css
@@ -0,0 +1,95 @@
+lite-youtube {
+    background-color: #000;
+    position: relative;
+    display: block;
+    contain: content;
+    background-position: center center;
+    background-size: cover;
+    cursor: pointer;
+    max-width: 720px;
+}
+
+/* gradient */
+lite-youtube::before {
+    content: attr(data-title);
+    display: block;
+    position: absolute;
+    top: 0;
+    /* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */
+    background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%);
+    height: 99px;
+    width: 100%;
+    font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
+    color: hsl(0deg 0% 93.33%);
+    text-shadow: 0 0 2px rgba(0,0,0,.5);
+    font-size: 18px;
+    padding: 25px 20px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+}
+
+lite-youtube:hover::before {
+    color: white;
+}
+
+/* responsive iframe with a 16:9 aspect ratio
+    thanks https://css-tricks.com/responsive-iframes/
+*/
+lite-youtube::after {
+    content: "";
+    display: block;
+    padding-bottom: calc(100% / (16 / 9));
+}
+lite-youtube > iframe {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: 0;
+}
+
+/* play button */
+lite-youtube > .lty-playbtn {
+    display: block;
+    /* Make the button element cover the whole area for a large hover/click target… */
+    width: 100%;
+    height: 100%;
+    /* …but visually it's still the same size */
+    background: no-repeat center/68px 48px;
+    /* YT's actual play button svg */
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
+    position: absolute;
+    cursor: pointer;
+    z-index: 1;
+    filter: grayscale(100%);
+    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
+    border: 0;
+}
+
+lite-youtube:hover > .lty-playbtn,
+lite-youtube .lty-playbtn:focus {
+    filter: none;
+}
+
+/* Post-click styles */
+lite-youtube.lyt-activated {
+    cursor: unset;
+}
+lite-youtube.lyt-activated::before,
+lite-youtube.lyt-activated > .lty-playbtn {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.lyt-visually-hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
diff --git a/css/prism-theme.css b/css/prism-theme.css
new file mode 100644
index 0000000..90bf299
--- /dev/null
+++ b/css/prism-theme.css
@@ -0,0 +1,201 @@
+/* Syntax Highlighting — PrismJS theme for indiekit-eleventy-theme
+   Light mode: clean, high-contrast colors
+   Dark mode: scoped under .dark (Tailwind darkMode: "class") */
+
+/* ── Base code block styling ── */
+code[class*="language-"],
+pre[class*="language-"] {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.875em;
+  line-height: 1.7;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  tab-size: 2;
+  hyphens: none;
+}
+
+pre[class*="language-"] {
+  padding: 1.25em;
+  margin: 1.5em 0;
+  overflow: auto;
+  border-radius: 0.5rem;
+}
+
+:not(pre) > code[class*="language-"] {
+  padding: 0.2em 0.4em;
+  border-radius: 0.25rem;
+  white-space: normal;
+}
+
+/* ── Light Mode ── */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #24292e;
+}
+
+pre[class*="language-"] {
+  background: #f4f2ee;
+  border: 1px solid #e1e4e8;
+}
+
+:not(pre) > code[class*="language-"] {
+  background: #f4f2ee;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #6a737d;
+}
+
+.token.punctuation {
+  color: #24292e;
+}
+
+.token.namespace {
+  opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #005cc5;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #032f62;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #d73a49;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #d73a49;
+}
+
+.token.function,
+.token.class-name {
+  color: #6f42c1;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e36209;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+/* Line highlighting */
+.highlight-line-active {
+  background-color: #fffbdd;
+  display: inline-block;
+  width: calc(100% + 2.5em);
+  margin-left: -1.25em;
+  padding-left: 1.25em;
+}
+
+/* ── Dark Mode ── */
+.dark code[class*="language-"],
+.dark pre[class*="language-"] {
+  color: #e1e4e8;
+}
+
+.dark pre[class*="language-"] {
+  background: #161b22;
+  border-color: #30363d;
+}
+
+.dark :not(pre) > code[class*="language-"] {
+  background: #161b22;
+}
+
+.dark .token.comment,
+.dark .token.prolog,
+.dark .token.doctype,
+.dark .token.cdata {
+  color: #8b949e;
+}
+
+.dark .token.punctuation {
+  color: #e1e4e8;
+}
+
+.dark .token.property,
+.dark .token.tag,
+.dark .token.boolean,
+.dark .token.number,
+.dark .token.constant,
+.dark .token.symbol,
+.dark .token.deleted {
+  color: #79c0ff;
+}
+
+.dark .token.selector,
+.dark .token.attr-name,
+.dark .token.string,
+.dark .token.char,
+.dark .token.builtin,
+.dark .token.inserted {
+  color: #a5d6ff;
+}
+
+.dark .token.operator,
+.dark .token.entity,
+.dark .token.url,
+.dark .language-css .token.string,
+.dark .style .token.string {
+  color: #ff7b72;
+}
+
+.dark .token.atrule,
+.dark .token.attr-value,
+.dark .token.keyword {
+  color: #ff7b72;
+}
+
+.dark .token.function,
+.dark .token.class-name {
+  color: #d2a8ff;
+}
+
+.dark .token.regex,
+.dark .token.important,
+.dark .token.variable {
+  color: #ffa657;
+}
+
+.dark .highlight-line-active {
+  background-color: rgba(56, 139, 253, 0.15);
+}
diff --git a/css/tailwind.css b/css/tailwind.css
new file mode 100644
index 0000000..fe7d4b4
--- /dev/null
+++ b/css/tailwind.css
@@ -0,0 +1,986 @@
+/* Inter font — latin + latin-ext subsets, weights 400/500/600/700 */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(/fonts/inter-latin-ext-400-normal.woff2) format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(/fonts/inter-latin-400-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(/fonts/inter-latin-ext-500-normal.woff2) format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(/fonts/inter-latin-500-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(/fonts/inter-latin-ext-600-normal.woff2) format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url(/fonts/inter-latin-600-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(/fonts/inter-latin-ext-700-normal.woff2) format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(/fonts/inter-latin-700-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Accessibility utilities */
+@layer utilities {
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .skip-link {
+    @apply absolute -top-full left-0 z-50 bg-accent-600 text-white px-4 py-2;
+  }
+
+  .skip-link:focus {
+    @apply top-0;
+  }
+}
+
+/* Reduce motion for accessibility */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Body background — warm stone canvas */
+@layer base {
+  body {
+    @apply bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-surface-100;
+  }
+
+  /* P1: Date typography — all <time> elements get monospace for technical texture */
+  time {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+
+  /* P2: Focus-visible states — keyboard-only focus rings for accessibility (WCAG 2.4.7) */
+  button:focus-visible,
+  [role="button"]:focus-visible,
+  summary:focus-visible {
+    @apply outline-none ring-2 ring-amber-500/70 ring-offset-2 ring-offset-surface-50 rounded-sm;
+  }
+
+  .dark button:focus-visible,
+  .dark [role="button"]:focus-visible,
+  .dark summary:focus-visible {
+    @apply ring-offset-surface-900;
+  }
+
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible {
+    @apply outline-none ring-2 ring-amber-500/70 border-transparent;
+  }
+
+  a:focus-visible {
+    @apply outline-none ring-2 ring-amber-500/70 ring-offset-1 ring-offset-surface-50 rounded-sm;
+  }
+
+  .dark a:focus-visible {
+    @apply ring-offset-surface-900;
+  }
+}
+
+/* Layout styles */
+@layer components {
+  /* Site header */
+  .site-header {
+    @apply bg-surface-50 dark:bg-surface-900 border-b border-surface-200 dark:border-surface-700 py-4 sticky top-0 z-50;
+  }
+
+  .header-container {
+    @apply flex items-center justify-between;
+  }
+
+  .site-title {
+    @apply text-xl font-bold text-surface-900 dark:text-white no-underline hover:text-surface-600 dark:hover:text-surface-300 transition-colors;
+  }
+
+  /* Header actions (nav + theme toggle) */
+  .header-actions {
+    @apply hidden md:flex items-center gap-4;
+  }
+
+  .site-nav {
+    @apply flex items-center gap-4;
+  }
+
+  .site-nav > a,
+  .site-nav .nav-dropdown-trigger {
+    @apply text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 no-underline transition-colors py-2;
+  }
+
+  /* Navigation dropdown */
+  .nav-dropdown {
+    @apply relative;
+  }
+
+  .nav-dropdown-trigger {
+    @apply flex items-center gap-1 cursor-pointer bg-transparent border-none text-base;
+  }
+
+  .nav-dropdown-menu {
+    @apply absolute top-full left-0 mt-1 py-2 bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-lg shadow-lg min-w-[160px] z-50 overflow-y-auto;
+    max-height: calc(100vh - 5rem);
+    max-height: calc(100dvh - 5rem);
+  }
+
+  .nav-dropdown-menu a {
+    @apply block px-4 py-2 text-sm text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700 hover:text-surface-900 dark:hover:text-surface-100 no-underline;
+  }
+
+  .nav-dropdown-divider {
+    @apply my-2 border-t border-surface-200 dark:border-surface-700;
+  }
+
+  /* Mobile menu toggle button */
+  .menu-toggle {
+    @apply md:hidden p-2 rounded-lg text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors;
+  }
+
+  /* Mobile navigation dropdown */
+  .mobile-nav {
+    @apply md:hidden border-t border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-surface-900 overflow-y-auto;
+    max-height: calc(100vh - 4rem);
+    max-height: calc(100dvh - 4rem);
+  }
+
+  .mobile-nav a {
+    @apply block px-4 py-3 text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 hover:text-surface-900 dark:hover:text-surface-100 no-underline transition-colors border-b border-surface-100 dark:border-surface-800 last:border-b-0;
+  }
+
+  /* Mobile nav collapsible sections */
+  .mobile-nav-section {
+    @apply border-b border-surface-100 dark:border-surface-800;
+  }
+
+  .mobile-nav-toggle {
+    @apply flex items-center justify-between w-full px-4 py-3 text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 hover:text-surface-900 dark:hover:text-surface-100 transition-colors bg-transparent border-none text-base text-left cursor-pointer;
+  }
+
+  .mobile-nav-submenu {
+    @apply bg-surface-50 dark:bg-surface-800;
+  }
+
+  .mobile-nav-submenu a {
+    @apply pl-8 py-2 text-sm border-b-0;
+  }
+
+  .mobile-nav-divider {
+    @apply my-2 mx-4 border-t border-surface-200 dark:border-surface-700;
+  }
+
+  /* Theme toggle button */
+  .theme-toggle {
+    @apply p-2 rounded-lg text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors;
+  }
+
+  .theme-toggle .sun-icon {
+    @apply hidden;
+  }
+
+  .theme-toggle .moon-icon {
+    @apply block;
+  }
+
+  .dark .theme-toggle .sun-icon {
+    @apply block;
+  }
+
+  .dark .theme-toggle .moon-icon {
+    @apply hidden;
+  }
+
+  /* Mobile theme toggle */
+  .mobile-theme-toggle {
+    @apply flex items-center justify-between w-full px-4 py-3 text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-800 hover:text-surface-900 dark:hover:text-surface-100 transition-colors bg-transparent border-none text-base text-left cursor-pointer border-t border-surface-200 dark:border-surface-700;
+  }
+
+  .mobile-theme-toggle .theme-label {
+    @apply font-normal;
+  }
+
+  .mobile-theme-toggle .theme-icons {
+    @apply flex items-center;
+  }
+
+  .mobile-theme-toggle .sun-icon {
+    @apply hidden;
+  }
+
+  .mobile-theme-toggle .moon-icon {
+    @apply block;
+  }
+
+  .dark .mobile-theme-toggle .sun-icon {
+    @apply block;
+  }
+
+  .dark .mobile-theme-toggle .moon-icon {
+    @apply hidden;
+  }
+
+  /* Container */
+  .container {
+    @apply max-w-5xl mx-auto px-4;
+  }
+
+  /* Site footer */
+  .site-footer {
+    @apply mt-12 py-8 border-t border-surface-200 dark:border-surface-700 text-center text-sm text-surface-500;
+  }
+
+  .site-footer a {
+    @apply text-accent-600 dark:text-accent-400 hover:underline;
+  }
+
+  /* Layout with sidebar - mobile-first with responsive grid */
+  .layout-with-sidebar {
+    @apply grid grid-cols-1 gap-6 md:gap-8 lg:grid-cols-3;
+  }
+
+  .main-content {
+    @apply lg:col-span-2 min-w-0 overflow-x-hidden; /* min-w-0 + overflow-x-hidden prevents layout breaking */
+  }
+
+  .sidebar {
+    @apply space-y-6 lg:sticky lg:top-24 lg:self-start overflow-hidden;
+  }
+
+  /* Main content area - adjust padding for mobile */
+  main.container {
+    @apply py-6 md:py-8;
+  }
+}
+
+/* Custom component styles */
+@layer components {
+  /* Post list */
+  .post-list {
+    @apply list-none p-0 m-0 space-y-6;
+  }
+
+  .post-list li {
+    @apply pb-6 border-b border-b-surface-200 dark:border-b-surface-700 last:border-0;
+  }
+
+  /* Post meta */
+  .post-meta {
+    @apply text-sm text-surface-600 dark:text-surface-400 flex flex-wrap gap-2 items-center;
+  }
+
+  /* Category tags (post metadata pills) */
+  .p-category {
+    @apply inline-block px-2 py-0.5 text-xs bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 rounded border border-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-500 transition-colors;
+  }
+
+  /* Inline hashtags in post content — styled as subtle links, not pills */
+  .e-content a.hashtag,
+  .prose a.hashtag {
+    @apply text-accent-600 dark:text-accent-400 no-underline hover:underline font-medium;
+    /* Override prose default link styling (no border-bottom, no color shift) */
+    text-decoration: none;
+  }
+
+  /* Webmention facepile - overlapping avatar display */
+  .facepile {
+    @apply flex flex-wrap items-center;
+  }
+
+  .facepile-avatar {
+    @apply inline-block -ml-2 first:ml-0 transition-transform hover:z-10 hover:scale-110;
+  }
+
+  .facepile-avatar img {
+    @apply w-8 h-8 rounded-full;
+  }
+
+  /* GitHub components */
+  .repo-card {
+    @apply p-4 border border-surface-200 dark:border-surface-700 rounded-lg;
+  }
+
+  .repo-meta {
+    @apply flex gap-4 text-sm text-surface-600 dark:text-surface-400 mt-2;
+  }
+
+  /* Timeline for CV */
+  .timeline {
+    @apply relative pl-6 border-l-2 border-accent-500;
+  }
+
+  .timeline-item {
+    @apply relative pb-6 last:pb-0;
+  }
+
+  .timeline-item::before {
+    content: '';
+    @apply absolute -left-[calc(1.5rem+5px)] top-1.5 w-3 h-3 bg-accent-500 rounded-full;
+  }
+
+  /* Skills badges */
+  .skill-badge {
+    @apply inline-block px-3 py-1 text-sm bg-surface-100 dark:bg-surface-800 rounded-full;
+  }
+
+  /* Ensure is-land custom elements don't break block layout flow */
+  is-land {
+    @apply block;
+  }
+
+  /* Widget cards */
+  .widget {
+    @apply p-4 mb-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden;
+  }
+
+  .widget-title {
+    @apply font-bold text-lg mb-4;
+  }
+
+  /* Collapsible widget wrapper */
+  .widget-header {
+    @apply flex items-center justify-between cursor-pointer;
+  }
+
+  .widget-header .widget-title {
+    @apply mb-0;
+  }
+
+  .widget-chevron {
+    @apply w-4 h-4 text-surface-400 transition-transform duration-200 shrink-0;
+  }
+
+  /* Hide inner widget titles when the collapsible wrapper provides one */
+  .widget-collapsible .widget .widget-title {
+    @apply hidden;
+  }
+
+  /* Hide FeedLand's custom title in collapsible wrapper */
+  .widget-collapsible .widget .fl-title {
+    @apply hidden;
+  }
+
+  /* Neutralize inner widget card styling when inside collapsible wrapper */
+  .widget-collapsible .widget {
+    @apply border-0 shadow-none rounded-none mb-0 bg-transparent;
+  }
+
+  /* Post cards */
+  .post-card {
+    @apply p-5 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden;
+  }
+
+  .post-header {
+    @apply flex flex-wrap items-center gap-2;
+  }
+
+  .post-footer {
+    @apply pt-3 border-t border-surface-100 dark:border-surface-700;
+  }
+
+  /* Photo gallery on listing pages */
+  .photo-list li {
+    @apply pb-8;
+  }
+
+  .photo-gallery {
+    @apply my-4 grid gap-2;
+  }
+
+  .photo-gallery img {
+    @apply w-full max-h-[500px] object-cover rounded-lg;
+  }
+
+  .photo-link {
+    @apply block;
+  }
+
+  .photo-caption {
+    @apply mt-3 text-surface-600 dark:text-surface-400;
+  }
+
+  /* Multi-photo grid */
+  .photo-gallery:has(img:nth-child(2)) {
+    @apply grid-cols-2;
+  }
+
+  .photo-gallery:has(img:nth-child(3)) {
+    @apply grid-cols-2;
+  }
+
+  .photo-gallery:has(img:nth-child(4)) {
+    @apply grid-cols-2;
+  }
+
+  /* Pagination */
+  .pagination {
+    @apply mt-12 pt-8 border-t border-surface-200 dark:border-surface-700 flex flex-col sm:flex-row items-center justify-between gap-4;
+  }
+
+  .pagination-info {
+    @apply text-sm text-surface-600 dark:text-surface-400;
+  }
+
+  .pagination-links {
+    @apply flex items-center gap-2;
+  }
+
+  .pagination-link {
+    @apply inline-flex items-center gap-1 px-4 py-2 text-sm font-medium bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors;
+  }
+
+  .pagination-link.disabled {
+    @apply opacity-50 cursor-not-allowed hover:bg-surface-100 dark:hover:bg-surface-800;
+  }
+}
+
+/* Focus states */
+@layer base {
+  a:focus-visible,
+  button:focus-visible,
+  input:focus-visible,
+  textarea:focus-visible,
+  select:focus-visible {
+    @apply outline-2 outline-offset-2 outline-accent-500;
+  }
+}
+
+/* Active states — subtle press feedback on buttons */
+@layer base {
+  button:active:not(:disabled),
+  .pagination-link:active:not(.disabled) {
+    transform: scale(0.97);
+  }
+}
+
+/* Video embeds */
+@layer components {
+  .video-embed {
+    @apply relative w-full aspect-video my-4;
+  }
+
+  .video-embed iframe {
+    @apply absolute inset-0 w-full h-full rounded-lg;
+  }
+}
+
+/* Admin UI - FAB and dashboard link */
+@layer components {
+  .fab-container {
+    @apply fixed bottom-6 right-6 z-50 flex flex-col items-end;
+  }
+
+  .fab-backdrop {
+    @apply fixed inset-0 bg-black/20 dark:bg-black/40 z-40;
+  }
+
+  .fab-button {
+    @apply relative z-50 w-14 h-14 rounded-full bg-accent-600 hover:bg-accent-700 dark:bg-accent-500 dark:hover:bg-accent-600 text-white shadow-lg hover:shadow-xl transition-all duration-200 flex items-center justify-center;
+  }
+
+  .fab-button:focus-visible {
+    @apply outline-2 outline-offset-2 outline-accent-500;
+  }
+
+  .fab-menu {
+    @apply relative z-50 mb-3 flex flex-col gap-2 items-end;
+  }
+
+  .fab-menu-item {
+    @apply flex items-center gap-3 px-4 py-3 rounded-xl bg-surface-50 dark:bg-surface-800 shadow-md hover:shadow-lg border border-surface-200 dark:border-surface-700 text-surface-700 dark:text-surface-200 hover:text-accent-600 dark:hover:text-accent-400 no-underline transition-all duration-150 text-sm font-medium;
+  }
+
+  .fab-menu-divider {
+    @apply border-t border-surface-200 dark:border-surface-700 my-1 w-full;
+  }
+
+  .admin-nav-link {
+    @apply text-accent-600 dark:text-accent-400 hover:text-accent-700 dark:hover:text-accent-300 no-underline transition-colors py-2 inline-flex items-center gap-1;
+  }
+}
+
+/* Performance: content-visibility for off-screen rendering optimization */
+@layer utilities {
+  .content-auto {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 500px;
+  }
+}
+
+/* Dates — monospace for technical texture (system.md: every <time> gets font-mono) */
+@layer base {
+  time {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+}
+
+/* Apply content-visibility to images and post items for performance */
+@layer base {
+  /* Responsive typography */
+  html {
+    @apply text-base md:text-lg;
+  }
+
+  /* Prevent horizontal overflow */
+  body {
+    @apply overflow-x-hidden;
+  }
+
+  /* Images - prevent overflow and add content-visibility */
+  img {
+    @apply max-w-full h-auto;
+    content-visibility: auto;
+  }
+
+  /* Pre/code blocks - prevent overflow on mobile */
+  pre {
+    @apply overflow-x-auto max-w-full;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  code {
+    @apply break-words;
+  }
+
+  pre code {
+    word-break: normal;
+    overflow-wrap: normal;
+  }
+
+  /* Links in content - break long URLs */
+  .e-content a,
+  .prose a {
+    @apply break-words;
+    word-break: break-word;
+  }
+
+  /* Content containers - clip horizontal overflow but allow pre blocks to scroll */
+  .e-content,
+  .prose {
+    overflow-x: clip;
+    max-width: 100%;
+  }
+
+  article {
+    scroll-margin-top: 80px; /* Prevent header overlap when scrolling to anchors */
+  }
+
+  /* Heading anchors — generated by markdown-it-anchor */
+  .prose h2[id],
+  .prose h3[id],
+  .prose h4[id] {
+    scroll-margin-top: 80px;
+  }
+  .prose :is(h2, h3, h4) > a.header-anchor {
+    color: inherit;
+    text-decoration: none;
+  }
+  .prose :is(h2, h3, h4) > a.header-anchor:hover {
+    text-decoration: underline;
+    text-decoration-color: var(--tw-prose-links, currentColor);
+    text-underline-offset: 4px;
+  }
+  .prose :is(h2, h3, h4) > a.header-anchor::after {
+    content: " #";
+    opacity: 0;
+    font-weight: normal;
+    transition: opacity 0.15s;
+  }
+  .prose :is(h2, h3, h4):hover > a.header-anchor::after {
+    opacity: 0.4;
+  }
+
+  .post-list li {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 200px;
+  }
+
+  /* Tables - responsive handling */
+  table {
+    @apply w-full;
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Ensure truncate works properly in flex containers */
+  .truncate {
+    @apply overflow-hidden text-ellipsis whitespace-nowrap;
+  }
+
+  /* Video embeds - maintain aspect ratio */
+  lite-youtube,
+  iframe[src*="youtube"],
+  iframe[src*="vimeo"] {
+    @apply max-w-full;
+  }
+}
+
+/* Pagefind UI theme overrides — outside @layer for higher specificity over Pagefind's :root defaults */
+#search .pagefind-ui {
+  --pagefind-ui-scale: 1;
+  --pagefind-ui-primary: #b45309;
+  --pagefind-ui-text: #1c1b19;
+  --pagefind-ui-background: #faf8f5;
+  --pagefind-ui-border: #e8e5df;
+  --pagefind-ui-tag: #f4f2ee;
+  --pagefind-ui-border-width: 1px;
+  --pagefind-ui-border-radius: 8px;
+  --pagefind-ui-image-border-radius: 8px;
+  --pagefind-ui-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.dark #search .pagefind-ui {
+  --pagefind-ui-primary: #fbbf24;
+  --pagefind-ui-text: #faf8f5;
+  --pagefind-ui-background: #0f0e0d;
+  --pagefind-ui-border: #3f3b35;
+  --pagefind-ui-tag: #2a2722;
+}
+
+/* Search input */
+#search .pagefind-ui__search-input {
+  background-color: #faf8f5;
+  color: #1c1b19;
+  border-color: #e8e5df;
+  font-weight: 400;
+}
+
+.dark #search .pagefind-ui__search-input {
+  background-color: #1c1b19;
+  color: #faf8f5;
+  border-color: #3f3b35;
+}
+
+#search .pagefind-ui__search-input:focus {
+  outline: 2px solid #d97706;
+  outline-offset: 2px;
+  border-color: #d97706;
+}
+
+.dark #search .pagefind-ui__search-input:focus {
+  outline-color: #fbbf24;
+  border-color: #fbbf24;
+}
+
+/* Search clear button */
+#search .pagefind-ui__search-clear {
+  color: #5c5750;
+  background-color: #faf8f5;
+}
+
+.dark #search .pagefind-ui__search-clear {
+  color: #a09a90;
+  background-color: #1c1b19;
+}
+
+#search .pagefind-ui__search-clear:hover {
+  color: #1c1b19;
+}
+
+.dark #search .pagefind-ui__search-clear:hover {
+  color: #faf8f5;
+}
+
+/* Result links */
+#search .pagefind-ui__result-link {
+  color: #b45309;
+}
+
+#search .pagefind-ui__result-link:hover {
+  text-decoration: underline;
+}
+
+.dark #search .pagefind-ui__result-link {
+  color: #fbbf24;
+}
+
+/* Result excerpts */
+#search .pagefind-ui__result-excerpt {
+  color: #5c5750;
+}
+
+.dark #search .pagefind-ui__result-excerpt {
+  color: #a09a90;
+}
+
+/* Highlighted search terms in results */
+#search .pagefind-ui__result-excerpt mark,
+#search mark {
+  background-color: #fef3c7;
+  color: #92400e;
+  padding: 0.1em 0.2em;
+  border-radius: 2px;
+}
+
+.dark #search .pagefind-ui__result-excerpt mark,
+.dark #search mark {
+  background-color: #78350f;
+  color: #fde68a;
+}
+
+/* Message (result count) */
+#search .pagefind-ui__message {
+  color: #5c5750;
+}
+
+.dark #search .pagefind-ui__message {
+  color: #a09a90;
+}
+
+/* "Load more" button */
+#search .pagefind-ui__button {
+  color: #b45309;
+  background-color: #faf8f5;
+  border-color: #e8e5df;
+  cursor: pointer;
+}
+
+#search .pagefind-ui__button:hover {
+  background-color: #fffbeb;
+  border-color: #b45309;
+}
+
+.dark #search .pagefind-ui__button {
+  color: #fbbf24;
+  background-color: #0f0e0d;
+  border-color: #3f3b35;
+}
+
+.dark #search .pagefind-ui__button:hover {
+  background-color: #1c1b19;
+  border-color: #fbbf24;
+}
+
+/* Filter panel labels */
+#search .pagefind-ui__filter-name,
+#search .pagefind-ui__filter-label {
+  color: #18181b;
+}
+
+.dark #search .pagefind-ui__filter-name,
+.dark #search .pagefind-ui__filter-label {
+  color: #f4f4f5;
+}
+
+/* Result tags */
+#search .pagefind-ui__result-tag {
+  background-color: #f4f4f5;
+  color: #52525b;
+}
+
+.dark #search .pagefind-ui__result-tag {
+  background-color: #27272a;
+  color: #a1a1aa;
+}
+
+/* Sub-result nested links */
+#search .pagefind-ui__result-nested .pagefind-ui__result-link {
+  color: #2563eb;
+  font-weight: 400;
+}
+
+.dark #search .pagefind-ui__result-nested .pagefind-ui__result-link {
+  color: #60a5fa;
+}
+
+/* Mobile-specific improvements */
+@layer utilities {
+  /* Ensure proper touch scrolling on overflow containers */
+  .overflow-x-auto {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Hide scrollbar but allow scrolling */
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Sparkline — inline SVG posting frequency chart */
+.sparkline {
+  width: 120px;
+  height: 28px;
+  display: block;
+}
+
+@media (min-width: 640px) {
+  .sparkline {
+    width: 180px;
+    height: 32px;
+  }
+}
+
+/* Save for Later buttons — hidden until auth confirmed */
+.save-later-btn {
+  display: none;
+}
+
+body[data-indiekit-auth="true"] .save-later-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 2px 8px;
+  font-size: 0.75rem;
+  color: #6b7280;
+  transition: all 0.2s ease;
+}
+
+body[data-indiekit-auth="true"] .save-later-btn:hover {
+  border-color: #d1d5db;
+  color: #4a9eff;
+}
+
+.save-later--saved {
+  color: #4a9eff !important;
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* Share Post buttons — hidden until auth confirmed */
+.share-post-btn {
+  display: none;
+}
+
+body[data-indiekit-auth="true"] .share-post-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  padding: 2px 8px;
+  font-size: 0.75rem;
+  color: #6b7280;
+  transition: all 0.2s ease;
+}
+
+body[data-indiekit-auth="true"] .share-post-btn:hover {
+  border-color: #d1d5db;
+  color: #10b981;
+}
+
+/* Post type dropdown */
+.post-type-dropdown {
+  display: none;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 4px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* shadow-sm */
+  z-index: 50;
+  min-width: 120px;
+  overflow: hidden;
+}
+
+.post-type-dropdown.open {
+  display: block;
+}
+
+.post-type-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  font-size: 13px;
+  color: #374151;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.post-type-dropdown-item:hover {
+  background: #f3f4f6;
+  color: #10b981;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .post-type-dropdown {
+    background: #1f2937;
+    border-color: #374151;
+  }
+  .post-type-dropdown-item {
+    color: #d1d5db;
+  }
+  .post-type-dropdown-item:hover {
+    background: #374151;
+    color: #34d399;
+  }
+}
diff --git a/cv.njk b/cv.njk
new file mode 100644
index 0000000..afb1116
--- /dev/null
+++ b/cv.njk
@@ -0,0 +1,146 @@
+---
+layout: layouts/base.njk
+withSidebar: false
+title: CV
+permalink: /cv/
+pagefindIgnore: true
+---
+
+{# CV page — uses configurable layout when cvPageConfig exists, falls back to hardcoded layout #}
+
+{% set hasCvData = (cv.experience and cv.experience.length) or
+      (cv.projects and cv.projects.length) or
+      (cv.skills and ((cv.skills or {}) | dictsort | length)) or
+      (cv.interests and ((cv.interests or {}) | dictsort | length)) %}
+
+{% if hasCvData %}
+
+  {# Configurable layout — use cvPageConfig if available #}
+  {% if cvPageConfig and cvPageConfig.sections %}
+    {% include "components/cv-builder.njk" %}
+
+  {# Fallback — hardcoded layout for backward compatibility #}
+  {% else %}
+
+    {# CV identity — check cvPageConfig.identity first, fall back to site.author #}
+    {% set cvId = cvPageConfig.identity if (cvPageConfig and cvPageConfig.identity) else {} %}
+    {% set authorName = cvId.name or site.author.name %}
+    {% set authorAvatar = cvId.avatar or site.author.avatar %}
+    {% set authorTitle = cvId.title or site.author.title %}
+    {% set authorBio = cvId.bio or site.author.bio %}
+    {% set socialLinks = cvId.social if (cvId.social and cvId.social.length) else site.social %}
+    {% set cvLocality = cvId.locality or site.author.locality %}
+    {% set cvCountry = cvId.country or site.author.country %}
+    {% set cvOrg = cvId.org or site.author.org %}
+    {% set cvUrl = cvId.url or '' %}
+    {% set cvEmail = cvId.email or site.author.email %}
+    {% set cvKeyUrl = cvId.keyUrl or site.author.keyUrl %}
+
+    {# Hero / intro #}
+    <section class="mb-8 sm:mb-12">
+      <div class="flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
+        <img
+          src="{{ authorAvatar }}"
+          alt="{{ authorName }}"
+          class="w-24 h-24 sm:w-32 sm:h-32 rounded-full object-cover shadow-lg flex-shrink-0"
+          loading="eager"
+          eleventy:ignore
+        >
+        <div class="flex-1 min-w-0">
+          <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
+            {{ authorName }}
+          </h1>
+          {% if authorTitle %}
+          <p class="text-lg sm:text-xl text-accent-600 dark:text-accent-400 mb-3 sm:mb-4">
+            {{ authorTitle }}
+          </p>
+          {% endif %}
+          {% if authorBio %}
+          <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4">
+            {{ authorBio }}
+          </p>
+          {% endif %}
+          {% from "components/social-icon.njk" import socialIcon %}
+          {% if socialLinks %}
+          <div class="flex flex-wrap gap-3">
+            {% for link in socialLinks %}
+            <a
+              href="{{ link.url }}"
+              rel="{{ link.rel }} noopener"
+              class="inline-flex items-center gap-2 px-3 py-2 text-sm bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors"
+              target="_blank"
+            >
+              {{ socialIcon(link.icon, "w-5 h-5") }}
+              <span class="text-sm font-medium">{{ link.name }}</span>
+            </a>
+            {% endfor %}
+          </div>
+          {% endif %}
+          {# Contact details #}
+          {% if cvLocality or cvCountry or cvOrg or cvUrl or cvEmail or cvKeyUrl %}
+          <div class="flex flex-wrap gap-x-4 gap-y-1 mt-4 text-sm text-surface-500 dark:text-surface-400">
+            {% if cvLocality or cvCountry %}
+            <span>{% if cvLocality %}{{ cvLocality }}{% endif %}{% if cvLocality and cvCountry %}, {% endif %}{% if cvCountry %}{{ cvCountry }}{% endif %}</span>
+            {% endif %}
+            {% if cvOrg %}
+            <span>{{ cvOrg }}</span>
+            {% endif %}
+            {% if cvUrl %}
+            <span><a href="{{ cvUrl }}" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">{{ cvUrl | replace("https://", "") | replace("http://", "") }}</a></span>
+            {% endif %}
+            {% if cvEmail %}
+            <span><a href="mailto:{{ cvEmail }}" class="text-accent-600 dark:text-accent-400 hover:underline">{{ cvEmail }}</a></span>
+            {% endif %}
+            {% if cvKeyUrl %}
+            <span><a href="{{ cvKeyUrl }}" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">PGP Key</a></span>
+            {% endif %}
+          </div>
+          {% endif %}
+        </div>
+      </div>
+    </section>
+
+    {# Experience — work-only variant #}
+    {% set section = { type: "cv-experience-work", config: {} } %}
+    {% include "components/sections/cv-experience-work.njk" ignore missing %}
+
+    {# Skills — work-only variant #}
+    {% set section = { type: "cv-skills-work", config: {} } %}
+    {% include "components/sections/cv-skills-work.njk" ignore missing %}
+
+    {# Work Projects (only work-related projects on the CV page) #}
+    {% set section = { type: "cv-projects-work", config: {} } %}
+    {% include "components/sections/cv-projects-work.njk" ignore missing %}
+
+    {# Education — work-only variant #}
+    {% set section = { type: "cv-education-work", config: {} } %}
+    {% include "components/sections/cv-education-work.njk" ignore missing %}
+
+    {# Languages — standalone section #}
+    {% set section = { type: "cv-languages", config: {} } %}
+    {% include "components/sections/cv-languages.njk" ignore missing %}
+
+    {# Interests — work-only variant #}
+    {% set section = { type: "cv-interests-work", config: {} } %}
+    {% include "components/sections/cv-interests-work.njk" ignore missing %}
+
+    {# Last Updated #}
+    {% if cv.lastUpdated %}
+    <p class="text-sm text-surface-500 text-center mt-8">
+      Last updated: <time datetime="{{ cv.lastUpdated }}">{{ cv.lastUpdated | date("PPP") }}</time>
+    </p>
+    {% endif %}
+
+  {% endif %}
+
+{% else %}
+
+<div class="text-center py-12">
+  <h1 class="text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4">CV</h1>
+  <p class="text-surface-600 dark:text-surface-400">
+    No CV data available yet. Add your experience, projects, and skills via the
+    <a href="/dashboard" class="text-accent-600 dark:text-accent-400 hover:underline">admin dashboard</a>.
+  </p>
+</div>
+
+{% endif %}
diff --git a/digest-feed.njk b/digest-feed.njk
new file mode 100644
index 0000000..6505876
--- /dev/null
+++ b/digest-feed.njk
@@ -0,0 +1,31 @@
+---
+eleventyExcludeFromCollections: true
+eleventyImport:
+  collections:
+    - weeklyDigests
+permalink: /digest/feed.xml
+---
+<?xml version="1.0" encoding="utf-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ site.name }} — Weekly Digest</title>
+    <link>{{ site.url }}/digest/</link>
+    <description>Weekly summary of all posts on {{ site.name }}. One update per week.</description>
+    <language>{{ site.locale | default('en') }}</language>
+    <atom:link href="{{ site.url }}/digest/feed.xml" rel="self" type="application/rss+xml"/>
+    <atom:link href="https://websubhub.com/hub" rel="hub"/>
+    {%- set latestDigests = collections.weeklyDigests | head(20) %}
+    {%- if latestDigests.length %}
+    <lastBuildDate>{{ latestDigests[0].endDate | dateToRfc822 }}</lastBuildDate>
+    {%- endif %}
+    {%- for digest in latestDigests %}
+    <item>
+      <title>{{ digest.label }} ({{ digest.startDate | dateDisplay }} – {{ digest.endDate | dateDisplay }})</title>
+      <link>{{ site.url }}/digest/{{ digest.slug }}/</link>
+      <guid isPermaLink="true">{{ site.url }}/digest/{{ digest.slug }}/</guid>
+      <pubDate>{{ digest.endDate | dateToRfc822 }}</pubDate>
+      <description>{{ digest | digestToHtml(site.url) | escape }}</description>
+    </item>
+    {%- endfor %}
+  </channel>
+</rss>
diff --git a/digest-index.njk b/digest-index.njk
new file mode 100644
index 0000000..959788e
--- /dev/null
+++ b/digest-index.njk
@@ -0,0 +1,83 @@
+---
+layout: layouts/base.njk
+title: Weekly Digest
+withSidebar: true
+eleventyExcludeFromCollections: true
+eleventyImport:
+  collections:
+    - weeklyDigests
+pagination:
+  data: collections.weeklyDigests
+  size: 20
+  alias: paginatedDigests
+permalink: "digest/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
+---
+<div>
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Weekly Digest</h1>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
+    A weekly summary of all posts. Subscribe via <a href="/digest/feed.xml" class="text-orange-600 dark:text-orange-400 hover:underline">RSS</a> for one update per week.
+  </p>
+
+  {% if paginatedDigests.length > 0 %}
+  <ul class="space-y-4">
+    {% for d in paginatedDigests %}
+    <li class="p-4 bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-lg hover:border-accent-300 dark:hover:border-accent-600 transition-colors">
+      <a href="/digest/{{ d.slug }}/" class="block">
+        <h2 class="font-semibold text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">
+          {{ d.label }}
+        </h2>
+        <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+          <time datetime="{{ d.startDate | isoDate }}">{{ d.startDate | dateDisplay }}</time> &ndash; <time datetime="{{ d.endDate | isoDate }}">{{ d.endDate | dateDisplay }}</time>
+          &middot; {{ d.posts.length }} post{% if d.posts.length != 1 %}s{% endif %}
+        </p>
+        {% set typeLabels = [] %}
+        {% for key, posts in d.byType %}
+          {% set typeLabels = (typeLabels.push(key + " (" + posts.length + ")"), typeLabels) %}
+        {% endfor %}
+        {% if typeLabels.length %}
+        <p class="text-xs text-surface-400 dark:text-surface-500 mt-1">
+          {{ typeLabels | join(", ") }}
+        </p>
+        {% endif %}
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
+
+  {% if pagination.pages.length > 1 %}
+  <nav class="pagination mt-8" aria-label="Digest pagination">
+    <div class="pagination-info">
+      Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
+    </div>
+    <div class="pagination-links">
+      {% if pagination.href.previous %}
+      <a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </span>
+      {% endif %}
+
+      {% if pagination.href.next %}
+      <a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </span>
+      {% endif %}
+    </div>
+  </nav>
+  {% endif %}
+
+  {% else %}
+  <p class="text-surface-600 dark:text-surface-400">No digests yet. Posts will be grouped into weekly digests automatically.</p>
+  {% endif %}
+</div>
diff --git a/digest.njk b/digest.njk
new file mode 100644
index 0000000..aa40bf8
--- /dev/null
+++ b/digest.njk
@@ -0,0 +1,168 @@
+---
+layout: layouts/base.njk
+withSidebar: true
+eleventyExcludeFromCollections: true
+eleventyImport:
+  collections:
+    - weeklyDigests
+pagination:
+  data: collections.weeklyDigests
+  size: 1
+  alias: digest
+eleventyComputed:
+  title: "{{ digest.label }}"
+permalink: "digest/{{ digest.slug }}/"
+---
+<article class="h-feed">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">
+    {{ digest.label }}
+  </h1>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
+    <time datetime="{{ digest.startDate | isoDate }}">{{ digest.startDate | dateDisplay }}</time> &ndash; <time datetime="{{ digest.endDate | isoDate }}">{{ digest.endDate | dateDisplay }}</time>
+    <span class="text-sm">({{ digest.posts.length }} post{% if digest.posts.length != 1 %}s{% endif %})</span>
+  </p>
+
+  {# Type display order #}
+  {% set typeOrder = [
+    { key: "articles", label: "Articles" },
+    { key: "notes", label: "Notes" },
+    { key: "photos", label: "Photos" },
+    { key: "bookmarks", label: "Bookmarks" },
+    { key: "likes", label: "Likes" },
+    { key: "reposts", label: "Reposts" }
+  ] %}
+
+  {% for typeInfo in typeOrder %}
+    {% set typePosts = digest.byType[typeInfo.key] %}
+    {% if typePosts and typePosts.length %}
+    <section class="mb-8">
+      <h2 class="text-lg sm:text-xl font-semibold text-surface-800 dark:text-surface-200 mb-4 border-b border-surface-200 dark:border-surface-700 pb-2">
+        {{ typeInfo.label }}
+        <span class="text-sm font-normal text-surface-500 dark:text-surface-400">({{ typePosts.length }})</span>
+      </h2>
+      <ul class="space-y-4">
+        {% for post in typePosts %}
+        <li class="h-entry">
+          {% if typeInfo.key == "likes" %}
+            {% set targetUrl = post.data.likeOf or post.data.like_of %}
+            <div class="flex items-start gap-2">
+              <span class="text-red-500 flex-shrink-0">&#x2764;</span>
+              <div>
+                <a href="{{ targetUrl }}" class="text-accent-600 dark:text-accent-400 hover:underline break-all">{{ targetUrl }}</a>
+                <div class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+                  <time class="dt-published" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+                  &middot; <a href="{{ post.url }}" class="hover:underline">Permalink</a>
+                </div>
+              </div>
+            </div>
+
+          {% elif typeInfo.key == "bookmarks" %}
+            {% set targetUrl = post.data.bookmarkOf or post.data.bookmark_of %}
+            <div class="flex items-start gap-2">
+              <span class="text-amber-500 flex-shrink-0">&#x1F516;</span>
+              <div>
+                {% if post.data.title %}
+                  <a href="{{ post.url }}" class="font-medium text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">{{ post.data.title }}</a>
+                {% else %}
+                  <a href="{{ targetUrl }}" class="text-accent-600 dark:text-accent-400 hover:underline break-all">{{ targetUrl }}</a>
+                {% endif %}
+                <div class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+                  <time class="dt-published" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+                  &middot; <a href="{{ post.url }}" class="hover:underline">Permalink</a>
+                </div>
+              </div>
+            </div>
+
+          {% elif typeInfo.key == "reposts" %}
+            {% set targetUrl = post.data.repostOf or post.data.repost_of %}
+            <div class="flex items-start gap-2">
+              <span class="text-green-500 flex-shrink-0">&#x1F501;</span>
+              <div>
+                <a href="{{ targetUrl }}" class="text-accent-600 dark:text-accent-400 hover:underline break-all">{{ targetUrl }}</a>
+                <div class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+                  <time class="dt-published" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+                  &middot; <a href="{{ post.url }}" class="hover:underline">Permalink</a>
+                </div>
+              </div>
+            </div>
+
+          {% elif typeInfo.key == "photos" %}
+            <div>
+              {% if post.data.photo and post.data.photo[0] %}
+                {% set photoUrl = post.data.photo[0].url or post.data.photo[0] %}
+                {% if photoUrl and photoUrl[0] != '/' and 'http' not in photoUrl %}
+                  {% set photoUrl = '/' + photoUrl %}
+                {% endif %}
+                <a href="{{ post.url }}" class="block mb-2">
+                  <img src="{{ photoUrl }}" alt="{{ post.data.photo[0].alt | default('Photo') }}" class="rounded max-h-48 object-cover" loading="lazy" eleventy:ignore>
+                </a>
+              {% endif %}
+              {% if post.data.title %}
+                <a href="{{ post.url }}" class="font-medium text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">{{ post.data.title }}</a>
+              {% elif post.templateContent %}
+                <p class="text-surface-700 dark:text-surface-300 text-sm">{{ post.templateContent | striptags | truncate(120) }}</p>
+              {% endif %}
+              <div class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+                <time class="dt-published" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+                &middot; <a href="{{ post.url }}" class="hover:underline">Permalink</a>
+              </div>
+            </div>
+
+          {% elif typeInfo.key == "articles" %}
+            <div>
+              <a href="{{ post.url }}" class="font-medium text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">
+                {{ post.data.title | default("Untitled") }}
+              </a>
+              {% if post.templateContent %}
+              <p class="text-surface-700 dark:text-surface-300 text-sm mt-1">{{ post.templateContent | striptags | truncate(200) }}</p>
+              {% endif %}
+              <div class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+                <time class="dt-published" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+                &middot; <a href="{{ post.url }}" class="hover:underline">Permalink</a>
+              </div>
+            </div>
+
+          {% else %}
+            <div>
+              <p class="text-surface-700 dark:text-surface-300">{{ post.templateContent | striptags | truncate(200) }}</p>
+              <div class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+                <time class="dt-published" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+                &middot; <a href="{{ post.url }}" class="hover:underline">Permalink</a>
+              </div>
+            </div>
+          {% endif %}
+        </li>
+        {% endfor %}
+      </ul>
+    </section>
+    {% endif %}
+  {% endfor %}
+
+  {# Previous/Next digest navigation #}
+  {% set allDigests = collections.weeklyDigests %}
+  {% set currentIndex = -1 %}
+  {% for d in allDigests %}
+    {% if d.slug == digest.slug %}
+      {% set currentIndex = loop.index0 %}
+    {% endif %}
+  {% endfor %}
+
+  <nav class="flex justify-between items-center mt-8 pt-6 border-t border-surface-200 dark:border-surface-700" aria-label="Digest navigation">
+    {% if currentIndex > 0 %}
+      {% set newer = allDigests[currentIndex - 1] %}
+      <a href="/digest/{{ newer.slug }}/" class="text-accent-600 dark:text-accent-400 hover:underline">
+        &larr; {{ newer.label }}
+      </a>
+    {% else %}
+      <span></span>
+    {% endif %}
+    {% if currentIndex < allDigests.length - 1 %}
+      {% set older = allDigests[currentIndex + 1] %}
+      <a href="/digest/{{ older.slug }}/" class="text-accent-600 dark:text-accent-400 hover:underline">
+        {{ older.label }} &rarr;
+      </a>
+    {% else %}
+      <span></span>
+    {% endif %}
+  </nav>
+</article>
diff --git a/eleventy.config.js b/eleventy.config.js
index 2ec9da9..64954c6 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -1,10 +1,1299 @@
+import pluginWebmentions from "@chrisburnell/eleventy-cache-webmentions";
+import pluginRss from "@11ty/eleventy-plugin-rss";
+import embedEverything from "eleventy-plugin-embed-everything";
+import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
+import sitemap from "@quasibit/eleventy-plugin-sitemap";
+import markdownIt from "markdown-it";
+import markdownItAnchor from "markdown-it-anchor";
+import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
+import { minify } from "html-minifier-terser";
+import registerUnfurlShortcode, { getCachedCard, prefetchUrl } from "./lib/unfurl-shortcode.js";
+import matter from "gray-matter";
+import { createHash, createHmac } from "crypto";
+import { createRequire } from "module";
+import { execFileSync } from "child_process";
+import { readFileSync, readdirSync, existsSync, mkdirSync, writeFileSync, copyFileSync } from "fs";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const esmRequire = createRequire(import.meta.url);
+const postGraph = esmRequire("@rknightuk/eleventy-plugin-post-graph");
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const siteUrl = process.env.SITE_URL || "https://example.com";
+
 export default function (eleventyConfig) {
-  eleventyConfig.addPassthroughCopy("src/assets");
+  // Don't use .gitignore for determining what to process
+  // (content/ is in .gitignore because it's a symlink, but we need to process it)
+  eleventyConfig.setUseGitIgnore(false);
+
+  // Ignore output directory (prevents re-processing generated files via symlink)
+  eleventyConfig.ignores.add("_site");
+  eleventyConfig.ignores.add("_site/**");
+  eleventyConfig.ignores.add("/app/data/site");
+  eleventyConfig.ignores.add("/app/data/site/**");
+  eleventyConfig.ignores.add("node_modules");
+  eleventyConfig.ignores.add("node_modules/**");
+  eleventyConfig.ignores.add("CLAUDE.md");
+  eleventyConfig.ignores.add("README.md");
+
+  // Ignore Pagefind output directory
+  eleventyConfig.ignores.add("pagefind");
+  eleventyConfig.ignores.add("pagefind/**");
+  // Ignore interactive assets (served via passthrough copy, not processed as templates)
+  eleventyConfig.ignores.add("interactive");
+  eleventyConfig.ignores.add("interactive/**");
+
+  // Configure watch targets to exclude output directory
+  eleventyConfig.watchIgnores.add("_site");
+  eleventyConfig.watchIgnores.add("_site/**");
+  eleventyConfig.watchIgnores.add("/app/data/site");
+  eleventyConfig.watchIgnores.add("/app/data/site/**");
+  eleventyConfig.watchIgnores.add("pagefind");
+  eleventyConfig.watchIgnores.add("pagefind/**");
+  eleventyConfig.watchIgnores.add(".cache/og");
+  eleventyConfig.watchIgnores.add(".cache/og/**");
+  eleventyConfig.watchIgnores.add(".cache/unfurl");
+  eleventyConfig.watchIgnores.add(".cache/unfurl/**");
+
+  // Watcher tuning: handle rapid successive file changes
+  // When a post is created via Micropub, the file is written twice in quick
+  // succession: first the initial content, then ~2s later a Micropub update
+  // adds syndication URLs. awaitWriteFinish delays the watcher event until
+  // the file is stable (no writes for 2s), so both changes are captured in
+  // one build. The throttle adds a 3s build-level debounce on top.
+  eleventyConfig.setChokidarConfig({
+    awaitWriteFinish: {
+      stabilityThreshold: 2000,
+      pollInterval: 100,
+    },
+  });
+  eleventyConfig.setWatchThrottleWaitTime(3000);
+
+  // Configure markdown-it with linkify enabled (auto-convert URLs to links)
+  const md = markdownIt({
+    html: true,
+    linkify: true,  // Auto-convert URLs to clickable links
+    typographer: true,
+  });
+  md.use(markdownItAnchor, {
+    permalink: markdownItAnchor.permalink.headerLink(),
+    slugify: (s) => s.toLowerCase().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "-").replace(/^-+|-+$/g, ""),
+    level: [2, 3, 4],
+  });
+
+  // Hashtag plugin: converts #tag to category links on-site
+  // Syndication targets (Bluesky, Mastodon) handle raw #tag natively via facet detection
+  md.inline.ruler.push("hashtag", (state, silent) => {
+    const pos = state.pos;
+    if (state.src.charCodeAt(pos) !== 0x23 /* # */) return false;
+
+    // Must be at start of string or preceded by whitespace/punctuation (not part of a URL fragment or hex color)
+    if (pos > 0) {
+      const prevChar = state.src.charAt(pos - 1);
+      if (!/[\s()\[\]{},;:!?"'«»""'']/.test(prevChar)) return false;
+    }
+
+    // Match hashtag: # followed by letter/underscore, then word chars (letters, digits, underscores)
+    const tail = state.src.slice(pos + 1);
+    const match = tail.match(/^([a-zA-Z_]\w*)/);
+    if (!match) return false;
+
+    const tag = match[1];
+
+    // Skip pure hex color codes (3, 4, 6, or 8 hex digits with nothing else)
+    if (/^[0-9a-fA-F]{3,8}$/.test(tag)) return false;
+
+    if (!silent) {
+      const slug = tag.toLowerCase().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "-").replace(/^-+|-+$/g, "");
+      const tokenOpen = state.push("link_open", "a", 1);
+      tokenOpen.attrSet("href", `/categories/${slug}/`);
+      tokenOpen.attrSet("class", "p-category hashtag");
+
+      const tokenText = state.push("text", "", 0);
+      tokenText.content = `#${tag}`;
+
+      state.push("link_close", "a", -1);
+    }
+
+    state.pos = pos + 1 + tag.length;
+    return true;
+  });
+
+  eleventyConfig.setLibrary("md", md);
+
+  // Syntax highlighting for fenced code blocks (```lang)
+  eleventyConfig.addPlugin(syntaxHighlight);
+
+  // RSS plugin for feed filters (dateToRfc822, absoluteUrl, etc.)
+  // Custom feed templates in feed.njk and feed-json.njk use these filters
+  eleventyConfig.addPlugin(pluginRss);
+
+  // Post graph — GitHub-style contribution grid for posting frequency
+  eleventyConfig.addPlugin(postGraph, {
+    sort: "desc",
+    limit: 2,
+    dayBoxTitle: true,
+    selectorLight: ":root",
+    selectorDark: ".dark",
+    boxColorLight: "#e7e5e4",      // surface-200 (warm stone)
+    highlightColorLight: "#d97706", // amber-600 (accent)
+    textColorLight: "#1c1917",      // surface-900
+    boxColorDark: "#292524",        // surface-800
+    highlightColorDark: "#fbbf24",  // amber-400
+    textColorDark: "#fafaf9",       // surface-50
+  });
+
+  // JSON encode filter for JSON feed
+  eleventyConfig.addFilter("jsonEncode", (value) => {
+    return JSON.stringify(value);
+  });
+
+  // Guess MIME type from URL extension
+  function guessMimeType(url, category) {
+    const lower = (typeof url === "string" ? url : "").toLowerCase();
+    if (category === "photo") {
+      if (lower.includes(".png")) return "image/png";
+      if (lower.includes(".gif")) return "image/gif";
+      if (lower.includes(".webp")) return "image/webp";
+      if (lower.includes(".svg")) return "image/svg+xml";
+      return "image/jpeg";
+    }
+    if (category === "audio") {
+      if (lower.includes(".ogg") || lower.includes(".opus")) return "audio/ogg";
+      if (lower.includes(".flac")) return "audio/flac";
+      if (lower.includes(".wav")) return "audio/wav";
+      return "audio/mpeg";
+    }
+    if (category === "video") {
+      if (lower.includes(".webm")) return "video/webm";
+      if (lower.includes(".mov")) return "video/quicktime";
+      return "video/mp4";
+    }
+    return "application/octet-stream";
+  }
+
+  // Extract URL string from value that may be a string or {url, alt} object
+  function resolveMediaUrl(value) {
+    if (typeof value === "string") return value;
+    if (value && typeof value === "object" && value.url) return value.url;
+    return null;
+  }
+
+  // Feed attachments filter — builds JSON Feed attachments array from post data
+  eleventyConfig.addFilter("feedAttachments", (postData) => {
+    const attachments = [];
+    const processMedia = (items, category) => {
+      const list = Array.isArray(items) ? items : [items];
+      for (const item of list) {
+        const rawUrl = resolveMediaUrl(item);
+        if (!rawUrl) continue;
+        const url = rawUrl.startsWith("http") ? rawUrl : `${siteUrl}${rawUrl}`;
+        attachments.push({ url, mime_type: guessMimeType(rawUrl, category) });
+      }
+    };
+    if (postData.photo) processMedia(postData.photo, "photo");
+    if (postData.audio) processMedia(postData.audio, "audio");
+    if (postData.video) processMedia(postData.video, "video");
+    return attachments;
+  });
+
+  // Textcasting support filter — builds clean support object excluding null values
+  eleventyConfig.addFilter("textcastingSupport", (support) => {
+    if (!support) return {};
+    const obj = {};
+    if (support.url) obj.url = support.url;
+    if (support.stripe) obj.stripe = support.stripe;
+    if (support.lightning) obj.lightning = support.lightning;
+    if (support.paymentPointer) obj.payment_pointer = support.paymentPointer;
+    return obj;
+  });
+
+  // Protocol type filter — classifies a URL by its origin protocol/network
+  eleventyConfig.addFilter("protocolType", (url) => {
+    if (!url || typeof url !== "string") return "web";
+    const lower = url.toLowerCase();
+    if (lower.includes("bsky.app") || lower.includes("bluesky")) return "atmosphere";
+    // Match Fediverse instances by known domain patterns (avoid overly broad "social")
+    if (lower.includes("mastodon.") || lower.includes("mstdn.") || lower.includes("fosstodon.") ||
+        lower.includes("pleroma.") || lower.includes("misskey.") || lower.includes("pixelfed.") ||
+        lower.includes("fediverse")) return "fediverse";
+    return "web";
+  });
+
+  // Email obfuscation filter - converts email to HTML entities
+  // Blocks ~95% of spam harvesters while remaining valid for microformat parsers
+  // Usage: {{ email | obfuscateEmail }} or {{ email | obfuscateEmail("href") }}
+  eleventyConfig.addFilter("obfuscateEmail", (email, mode = "display") => {
+    if (!email) return "";
+    // Convert each character to HTML decimal entity
+    const encoded = [...email].map(char => `&#${char.charCodeAt(0)};`).join("");
+    if (mode === "href") {
+      // For mailto: links, also encode the "mailto:" prefix
+      const mailto = [...("mailto:")].map(char => `&#${char.charCodeAt(0)};`).join("");
+      return mailto + encoded;
+    }
+    return encoded;
+  });
+
+  // Alias dateToRfc822 (plugin provides dateToRfc2822)
+  eleventyConfig.addFilter("dateToRfc822", (date) => {
+    return pluginRss.dateToRfc2822(date);
+  });
+
+  // Embed Everything - auto-embed YouTube, Vimeo, Bluesky, Mastodon, etc.
+  eleventyConfig.addPlugin(embedEverything, {
+    use: ["youtube", "vimeo", "twitter", "mastodon", "bluesky", "spotify", "soundcloud"],
+    youtube: {
+      options: {
+        lite: false,
+        recommendSelfOnly: true,
+      },
+    },
+    mastodon: {
+      options: {
+        server: "indieweb.social",
+      },
+    },
+  });
+
+  // Unfurl shortcode — renders any URL as a rich card (OpenGraph/Twitter Card metadata)
+  // Usage in templates: {% unfurl "https://example.com/article" %}
+  registerUnfurlShortcode(eleventyConfig);
+
+  // Synchronous unfurl filter — reads from pre-populated disk cache.
+  // Safe for deeply nested includes where async shortcodes fail silently.
+  // Usage: {{ url | unfurlCard | safe }}
+  eleventyConfig.addFilter("unfurlCard", getCachedCard);
+
+  // Custom transform to convert YouTube links to embeds
+  eleventyConfig.addTransform("youtube-link-to-embed", function (content, outputPath) {
+    if (!outputPath || !outputPath.endsWith(".html")) {
+      return content;
+    }
+    // Match <a> tags where href contains youtube.com/watch or youtu.be
+    // Link text can be: URL, www.youtube..., youtube..., or youtube-related text
+    const youtubePattern = /<a[^>]+href="https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]+)[^"]*"[^>]*>(?:https?:\/\/)?(?:www\.)?[^<]*(?:youtube|youtu\.be)[^<]*<\/a>/gi;
+
+    content = content.replace(youtubePattern, (match, videoId) => {
+      // Use standard YouTube iframe with exact oEmbed parameters
+      return `</p><div class="video-embed"><iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen title="YouTube video"></iframe></div><p>`;
+    });
+
+    // Clean up empty <p></p> tags created by the replacement
+    content = content.replace(/<p>\s*<\/p>/g, '');
+
+    return content;
+  });
+
+  // Image optimization - transforms <img> tags automatically
+  // PROCESS_REMOTE_IMAGES: set to "true" to let Sharp download and re-encode remote images.
+  // Default "false" — skips remote URLs (adds eleventy:ignore) to avoid OOM from Sharp's
+  // native memory usage when processing hundreds of external images (bookmarks, webmentions).
+  const processRemoteImages = process.env.PROCESS_REMOTE_IMAGES === "true";
+  if (!processRemoteImages) {
+    eleventyConfig.htmlTransformer.addPosthtmlPlugin("html", () => {
+      return (tree) => {
+        tree.match({ tag: "img" }, (node) => {
+          if (node.attrs?.src && /^https?:\/\//.test(node.attrs.src)) {
+            node.attrs["eleventy:ignore"] = "";
+          }
+          return node;
+        });
+        return tree;
+      };
+    }, { priority: 1 }); // priority > 0 runs before image plugin (priority -1)
+  }
+
+  eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+    extensions: "html",
+    formats: ["webp", "jpeg"],
+    widths: ["auto"],
+    failOnError: false,
+    cacheOptions: {
+      duration: process.env.ELEVENTY_RUN_MODE === "build" ? "1d" : "30d",
+    },
+    concurrency: 4,
+    defaultAttributes: {
+      loading: "lazy",
+      decoding: "async",
+      sizes: "auto",
+      alt: "",
+    },
+  });
+
+  // Sitemap generation
+  eleventyConfig.addPlugin(sitemap, {
+    sitemap: {
+      hostname: siteUrl,
+    },
+  });
+
+  // Wrap <table> elements in <table-saw> for responsive tables
+  eleventyConfig.addTransform("table-saw-wrap", function (content, outputPath) {
+    if (outputPath && outputPath.endsWith(".html")) {
+      return content.replace(/<table(\s|>)/g, "<table-saw><table$1").replace(/<\/table>/g, "</table></table-saw>");
+    }
+    return content;
+  });
+
+  // Fix OG image meta tags post-rendering — bypasses Eleventy 3.x race condition (#3183).
+  // page.url is unreliable during parallel rendering, but outputPath IS correct
+  // since files are written to the correct location. Derives the OG slug from
+  // outputPath and replaces placeholders emitted by base.njk.
+  eleventyConfig.addTransform("og-fix", function (content, outputPath) {
+    if (!outputPath || !outputPath.endsWith(".html")) return content;
+
+    // Derive correct page URL and OG slug from outputPath (immune to race condition)
+    // Content pages match: .../type/yyyy/MM/dd/slug/index.html
+    const dateMatch = outputPath.match(
+      /\/([\w-]+)\/(\d{4})\/(\d{2})\/(\d{2})\/([\w-]+)\/index\.html$/
+    );
+
+    if (dateMatch) {
+      const [, type, year, month, day, slug] = dateMatch;
+      const pageUrlPath = `/${type}/${year}/${month}/${day}/${slug}/`;
+      const correctFullUrl = `${siteUrl}${pageUrlPath}`;
+      const ogSlug = `${year}-${month}-${day}-${slug}`;
+      const hasOg = existsSync(resolve(__dirname, ".cache", "og", `${ogSlug}.png`));
+      const ogImageUrl = hasOg
+        ? `${siteUrl}/og/${ogSlug}.png`
+        : `${siteUrl}/images/og-default.png`;
+      const twitterCard = hasOg ? "summary_large_image" : "summary";
+
+      // Fix og:url and canonical (also affected by race condition)
+      content = content.replace(
+        /(<meta property="og:url" content=")[^"]*(")/,
+        `$1${correctFullUrl}$2`
+      );
+      content = content.replace(
+        /(<link rel="canonical" href=")[^"]*(")/,
+        `$1${correctFullUrl}$2`
+      );
+
+      // Replace OG image and twitter card placeholders
+      content = content.replace(/__OG_IMAGE_PLACEHOLDER__/g, ogImageUrl);
+      content = content.replace(/__TWITTER_CARD_PLACEHOLDER__/g, twitterCard);
+    } else {
+      // Non-date pages (homepage, about, etc.): use defaults
+      content = content.replace(
+        /__OG_IMAGE_PLACEHOLDER__/g,
+        `${siteUrl}/images/og-default.png`
+      );
+      content = content.replace(/__TWITTER_CARD_PLACEHOLDER__/g, "summary");
+    }
+
+    return content;
+  });
+
+  // HTML minification — only during initial build, skip during watch rebuilds
+  eleventyConfig.addTransform("htmlmin", async function (content, outputPath) {
+    if (outputPath && outputPath.endsWith(".html") && process.env.ELEVENTY_RUN_MODE === "build") {
+      try {
+        return await minify(content, {
+          collapseWhitespace: true,
+          removeComments: true,
+          html5: true,
+          decodeEntities: true,
+          minifyCSS: false,
+          minifyJS: false,
+        });
+      } catch {
+        console.warn(`[htmlmin] Parse error in ${outputPath}, skipping minification`);
+        return content;
+      }
+    }
+    return content;
+  });
+
+  // Copy static assets to output
+  eleventyConfig.addPassthroughCopy("css");
+  eleventyConfig.addPassthroughCopy("images");
+  eleventyConfig.addPassthroughCopy("js");
+  eleventyConfig.addPassthroughCopy("favicon.ico");
+  eleventyConfig.addPassthroughCopy("interactive");
+  eleventyConfig.addPassthroughCopy({ ".cache/og": "og" });
+
+  // Copy vendor web components from node_modules
+  eleventyConfig.addPassthroughCopy({
+    "node_modules/@zachleat/table-saw/table-saw.js": "js/table-saw.js",
+    "node_modules/@11ty/is-land/is-land.js": "js/is-land.js",
+    "node_modules/@zachleat/filter-container/filter-container.js": "js/filter-container.js",
+  });
+
+  // Copy Inter font files (latin + latin-ext subsets, woff2 only for modern browsers)
+  eleventyConfig.addPassthroughCopy({
+    "node_modules/@fontsource/inter/files/inter-latin-*-normal.woff2": "fonts",
+    "node_modules/@fontsource/inter/files/inter-latin-ext-*-normal.woff2": "fonts",
+  });
+
+  // Watch for content changes
+  eleventyConfig.addWatchTarget("./content/");
+  eleventyConfig.addWatchTarget("./css/");
+
+  // Webmentions plugin configuration
+  const wmDomain = siteUrl.replace("https://", "").replace("http://", "");
+  eleventyConfig.addPlugin(pluginWebmentions, {
+    domain: siteUrl,
+    feed: `http://127.0.0.1:8080/webmentions/api/mentions?per-page=10000`,
+    key: "children",
+  });
+
+  // Date formatting filter
+  eleventyConfig.addFilter("dateDisplay", (dateObj) => {
+    if (!dateObj) return "";
+    const date = new Date(dateObj);
+    return date.toLocaleDateString("en-GB", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  });
+
+  // ISO date filter
+  eleventyConfig.addFilter("isoDate", (dateObj) => {
+    if (!dateObj) return "";
+    return new Date(dateObj).toISOString();
+  });
+
+  // Digest-to-HTML filter for RSS feed descriptions
+  eleventyConfig.addFilter("digestToHtml", (digest, siteUrl) => {
+    const typeLabels = {
+      articles: "Articles",
+      notes: "Notes",
+      photos: "Photos",
+      bookmarks: "Bookmarks",
+      likes: "Likes",
+      reposts: "Reposts",
+    };
+    const typeOrder = ["articles", "notes", "photos", "bookmarks", "likes", "reposts"];
+    let html = "";
+
+    for (const type of typeOrder) {
+      const posts = digest.byType[type];
+      if (!posts || !posts.length) continue;
+
+      html += `<h3>${typeLabels[type]}</h3><ul>`;
+      for (const post of posts) {
+        const postUrl = siteUrl + post.url;
+        let label;
+        if (type === "likes") {
+          const target = post.data.likeOf || post.data.like_of;
+          label = `Liked: ${target}`;
+        } else if (type === "bookmarks") {
+          const target = post.data.bookmarkOf || post.data.bookmark_of;
+          label = post.data.title || `Bookmarked: ${target}`;
+        } else if (type === "reposts") {
+          const target = post.data.repostOf || post.data.repost_of;
+          label = `Reposted: ${target}`;
+        } else if (post.data.title) {
+          label = post.data.title;
+        } else {
+          const content = post.templateContent || "";
+          label = content.replace(/<[^>]*>/g, "").slice(0, 120).trim() || "Untitled";
+        }
+        html += `<li><a href="${postUrl}">${label}</a></li>`;
+      }
+      html += `</ul>`;
+    }
+
+    return html;
+  });
+
+  // Truncate filter
+  eleventyConfig.addFilter("truncate", (str, len = 200) => {
+    if (!str) return "";
+    if (str.length <= len) return str;
+    return str.slice(0, len).trim() + "...";
+  });
+
+  // Clean excerpt for OpenGraph - strips HTML, decodes entities, removes extra whitespace
+  eleventyConfig.addFilter("ogDescription", (content, len = 200) => {
+    if (!content) return "";
+    // Strip HTML tags
+    let text = content.replace(/<[^>]+>/g, ' ');
+    // Decode common HTML entities
+    text = text.replace(/&amp;/g, '&')
+               .replace(/&lt;/g, '<')
+               .replace(/&gt;/g, '>')
+               .replace(/&quot;/g, '"')
+               .replace(/&#39;/g, "'")
+               .replace(/&nbsp;/g, ' ');
+    // Remove extra whitespace
+    text = text.replace(/\s+/g, ' ').trim();
+    // Truncate
+    if (text.length > len) {
+      text = text.slice(0, len).trim() + "...";
+    }
+    return text;
+  });
+
+  // Extract first image from content for OpenGraph fallback
+  eleventyConfig.addFilter("extractFirstImage", (content) => {
+    if (!content) return null;
+    // Match all <img> tags, skip hidden ones and data URIs
+    const imgRegex = /<img[^>]*?\ssrc=["']([^"']+)["'][^>]*>/gi;
+    let match;
+    while ((match = imgRegex.exec(content)) !== null) {
+      const fullTag = match[0];
+      const src = match[1];
+      if (src.startsWith("data:")) continue;
+      if (/\bhidden\b/.test(fullTag)) continue;
+      return src;
+    }
+    return null;
+  });
+
+  // Head filter for arrays
+  eleventyConfig.addFilter("head", (array, n) => {
+    if (!Array.isArray(array) || n < 1) return array;
+    return array.slice(0, n);
+  });
+
+  // Slugify filter
+  eleventyConfig.addFilter("slugify", (str) => {
+    if (!str) return "";
+    return str
+      .toLowerCase()
+      .replace(/[^\w\s-]/g, "")
+      .replace(/[\s_-]+/g, "-")
+      .replace(/^-+|-+$/g, "");
+  });
+
+  eleventyConfig.addFilter("stripTrailingSlash", (url) => {
+    if (!url || typeof url !== "string") return url || "";
+    return url.endsWith("/") ? url.slice(0, -1) : url;
+  });
+
+  // Hash filter for cache busting - generates MD5 hash of file content
+  eleventyConfig.addFilter("hash", (filePath) => {
+    try {
+      const fullPath = resolve(__dirname, filePath.startsWith("/") ? `.${filePath}` : filePath);
+      const content = readFileSync(fullPath);
+      return createHash("md5").update(content).digest("hex").slice(0, 8);
+    } catch {
+      // Return timestamp as fallback if file not found
+      return Date.now().toString(36);
+    }
+  });
+
+  // Derive OG slug from page.url (reliable) instead of page.fileSlug
+  // (which suffers from Nunjucks race conditions in Eleventy 3.x parallel rendering).
+  // OG images are named with the full date prefix to match URL segments exactly.
+  eleventyConfig.addFilter("ogSlug", (url) => {
+    if (!url) return "";
+    const segments = url.split("/").filter(Boolean);
+    // Date-based URL: /type/yyyy/MM/dd/slug/ → 5 segments → "yyyy-MM-dd-slug"
+    if (segments.length === 5) {
+      const [, year, month, day, slug] = segments;
+      return `${year}-${month}-${day}-${slug}`;
+    }
+    // Fallback: last segment (for pages, legacy URLs)
+    return segments[segments.length - 1] || "";
+  });
+
+  // Check if a generated OG image exists for this slug
+  eleventyConfig.addFilter("hasOgImage", (slug) => {
+    if (!slug) return false;
+    const ogPath = resolve(__dirname, ".cache", "og", `${slug}.png`);
+    return existsSync(ogPath);
+  });
+
+  // Inline file contents (for critical CSS inlining)
+  eleventyConfig.addFilter("inlineFile", (filePath) => {
+    try {
+      const fullPath = resolve(__dirname, filePath.startsWith("/") ? `.${filePath}` : filePath);
+      return readFileSync(fullPath, "utf-8");
+    } catch {
+      return "";
+    }
+  });
+
+  // Extract raw Markdown body from a source file (strips front matter)
+  eleventyConfig.addFilter("rawMarkdownBody", (inputPath) => {
+    try {
+      const src = readFileSync(inputPath, "utf-8");
+      const { content } = matter(src);
+      return content.trim();
+    } catch {
+      return "";
+    }
+  });
+
+  // Current timestamp filter (for client-side JS buildtime)
+  eleventyConfig.addFilter("timestamp", () => Date.now());
+
+  // Date filter (for sidebar dates)
+  eleventyConfig.addFilter("date", (dateObj, format) => {
+    if (!dateObj) return "";
+    const date = new Date(dateObj);
+    const options = {};
+
+    if (format.includes("MMM")) options.month = "short";
+    if (format.includes("d")) options.day = "numeric";
+    if (format.includes("yyyy")) options.year = "numeric";
+
+    return date.toLocaleDateString("en-US", options);
+  });
+
+  // Webmention filters - with legacy URL support
+  // This filter checks both current URL and any legacy URLs from redirects
+  // Merges webmentions + conversations with deduplication (conversations first)
+  eleventyConfig.addFilter("webmentionsForUrl", function (webmentions, url, urlAliases, conversationMentions = []) {
+    if (!url) return [];
+
+    // Merge conversations + webmentions with deduplication
+    const seen = new Set();
+    const merged = [];
+
+    // Add conversations first (richer metadata)
+    for (const item of conversationMentions) {
+      const key = item['wm-id'] || item.url;
+      if (key && !seen.has(key)) {
+        seen.add(key);
+        merged.push(item);
+      }
+    }
+
+    // Add webmentions (skip duplicates)
+    if (webmentions) {
+      for (const item of webmentions) {
+        const key = item['wm-id'];
+        if (!key || seen.has(key)) continue;
+        if (item.url && seen.has(item.url)) continue;
+        seen.add(key);
+        merged.push(item);
+      }
+    }
+
+    // Build list of all URLs to check (current + legacy)
+    const urlsToCheck = new Set();
+
+    // Add current URL variations
+    const absoluteUrl = url.startsWith("http") ? url : `${siteUrl}${url}`;
+    urlsToCheck.add(absoluteUrl);
+    urlsToCheck.add(absoluteUrl.replace(/\/$/, ""));
+    urlsToCheck.add(absoluteUrl.endsWith("/") ? absoluteUrl : `${absoluteUrl}/`);
+
+    // Add legacy URLs from aliases (if provided)
+    if (urlAliases?.aliases) {
+      const normalizedUrl = url.replace(/\/$/, "");
+      const oldUrls = urlAliases.aliases[normalizedUrl] || [];
+      for (const oldUrl of oldUrls) {
+        urlsToCheck.add(`${siteUrl}${oldUrl}`);
+        urlsToCheck.add(`${siteUrl}${oldUrl}/`);
+        urlsToCheck.add(`${siteUrl}${oldUrl}`.replace(/\/$/, ""));
+      }
+    }
+
+    // Compute legacy /content/ URL from current URL for old webmention.io targets
+    // Pattern: /type/yyyy/MM/dd/slug/ → /content/type/yyyy-MM-dd-slug/
+    const pathSegments = url.replace(/\/$/, "").split("/").filter(Boolean);
+    if (pathSegments.length === 5) {
+      const [type, year, month, day, slug] = pathSegments;
+      const contentUrl = `/content/${type}/${year}-${month}-${day}-${slug}/`;
+      urlsToCheck.add(`${siteUrl}${contentUrl}`);
+      urlsToCheck.add(`${siteUrl}${contentUrl}`.replace(/\/$/, ""));
+    }
+
+    // Filter merged data matching any of our URLs
+    const matched = merged.filter((wm) => urlsToCheck.has(wm["wm-target"]));
+
+    // Deduplicate cross-source: same author + same interaction type = same mention
+    // (webmention.io and conversations API may both report the same like/reply)
+    const deduped = [];
+    const authorActions = new Set();
+    for (const wm of matched) {
+      const authorUrl = wm.author?.url || wm.url || "";
+      const action = wm["wm-property"] || "mention";
+      const key = `${authorUrl}::${action}`;
+      if (authorActions.has(key)) continue;
+      authorActions.add(key);
+      deduped.push(wm);
+    }
+    return deduped;
+  });
+
+  eleventyConfig.addFilter("webmentionsByType", function (mentions, type) {
+    if (!mentions) return [];
+    const typeMap = {
+      likes: "like-of",
+      reposts: "repost-of",
+      bookmarks: "bookmark-of",
+      replies: "in-reply-to",
+      mentions: "mention-of",
+    };
+    const wmProperty = typeMap[type] || type;
+    return mentions.filter((m) => m["wm-property"] === wmProperty);
+  });
+
+  // Post navigation — find previous/next post in a collection
+  // (Nunjucks {% set %} inside {% for %} doesn't propagate, so we need filters)
+  eleventyConfig.addFilter("previousInCollection", function (collection, page) {
+    if (!collection || !page) return null;
+    const index = collection.findIndex((p) => p.url === page.url);
+    return index > 0 ? collection[index - 1] : null;
+  });
+
+  eleventyConfig.addFilter("nextInCollection", function (collection, page) {
+    if (!collection || !page) return null;
+    const index = collection.findIndex((p) => p.url === page.url);
+    return index >= 0 && index < collection.length - 1
+      ? collection[index + 1]
+      : null;
+  });
+
+  // Posting frequency — compute posts-per-month for last 12 months (for sparkline).
+  // Returns an inline SVG that uses currentColor for stroke and a semi-transparent
+  // gradient fill. Wrap in a colored span to set the domain color via Tailwind.
+  eleventyConfig.addFilter("postingFrequency", (posts) => {
+    if (!Array.isArray(posts) || posts.length === 0) return "";
+    const now = new Date();
+    const counts = new Array(12).fill(0);
+    for (const post of posts) {
+      const postDate = new Date(post.date || post.data?.date);
+      if (isNaN(postDate.getTime())) continue;
+      const monthsAgo = (now.getFullYear() - postDate.getFullYear()) * 12 + (now.getMonth() - postDate.getMonth());
+      if (monthsAgo >= 0 && monthsAgo < 12) {
+        counts[11 - monthsAgo]++;
+      }
+    }
+
+    // Extrapolate the current (partial) month to avoid false downward trend.
+    // e.g. 51 posts in 5 days of a 31-day month projects to ~316.
+    const dayOfMonth = now.getDate();
+    const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
+    if (dayOfMonth < daysInMonth && counts[11] > 0) {
+      counts[11] = Math.round(counts[11] / dayOfMonth * daysInMonth);
+    }
+
+    const max = Math.max(...counts, 1);
+    const w = 200;
+    const h = 32;
+    const pad = 2;
+    const step = w / (counts.length - 1);
+    const points = counts.map((v, i) => {
+      const x = i * step;
+      const y = h - pad - ((v / max) * (h - pad * 2));
+      return `${x.toFixed(1)},${y.toFixed(1)}`;
+    }).join(" ");
+    // Closed polygon for gradient fill (line path + bottom corners)
+    const fillPoints = `${points} ${w},${h} 0,${h}`;
+    return [
+      `<svg viewBox="0 0 ${w} ${h}" class="sparkline" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Posting frequency over the last 12 months">`,
+      `<defs><linearGradient id="spk-fill" x1="0" y1="0" x2="0" y2="1">`,
+      `<stop offset="0%" stop-color="currentColor" stop-opacity="0.25"/>`,
+      `<stop offset="100%" stop-color="currentColor" stop-opacity="0.02"/>`,
+      `</linearGradient></defs>`,
+      `<polygon fill="url(#spk-fill)" points="${fillPoints}"/>`,
+      `<polyline fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" points="${points}"/>`,
+      `</svg>`,
+    ].join("");
+  });
+
+  // Filter AI-involved posts (ai-text-level > "0" or aiTextLevel > "0")
+  eleventyConfig.addFilter("aiPosts", (posts) => {
+    if (!Array.isArray(posts)) return [];
+    return posts.filter((post) => {
+      const level = post.data?.aiTextLevel || post.data?.["ai-text-level"] || "0";
+      return level !== "0" && level !== 0;
+    });
+  });
+
+  // AI stats — returns { total, aiCount, percentage, byLevel }
+  eleventyConfig.addFilter("aiStats", (posts) => {
+    if (!Array.isArray(posts)) return { total: 0, aiCount: 0, percentage: 0, byLevel: {} };
+    const total = posts.length;
+    const byLevel = { 0: 0, 1: 0, 2: 0, 3: 0 };
+    for (const post of posts) {
+      const level = parseInt(post.data?.aiTextLevel || post.data?.["ai-text-level"] || "0", 10);
+      byLevel[level] = (byLevel[level] || 0) + 1;
+    }
+    const aiCount = total - byLevel[0];
+    return {
+      total,
+      aiCount,
+      percentage: total > 0 ? ((aiCount / total) * 100).toFixed(1) : "0",
+      byLevel,
+    };
+  });
+
+  // Helper: exclude drafts from collections
+  const isPublished = (item) => !item.data.draft;
+
+  // Collections for different post types
+  // Note: content path is content/ due to symlink structure
+  // "posts" shows ALL content types combined
+  eleventyConfig.addCollection("posts", function (collectionApi) {
+    return collectionApi
+      .getFilteredByGlob("content/**/*.md")
+      .filter(isPublished)
+      .sort((a, b) => b.date - a.date);
+  });
+
+  eleventyConfig.addCollection("notes", function (collectionApi) {
+    return collectionApi
+      .getFilteredByGlob("content/notes/**/*.md")
+      .filter(isPublished)
+      .sort((a, b) => b.date - a.date);
+  });
+
+  eleventyConfig.addCollection("articles", function (collectionApi) {
+    return collectionApi
+      .getFilteredByGlob("content/articles/**/*.md")
+      .filter(isPublished)
+      .sort((a, b) => b.date - a.date);
+  });
+
+  eleventyConfig.addCollection("bookmarks", function (collectionApi) {
+    return collectionApi
+      .getFilteredByGlob("content/bookmarks/**/*.md")
+      .filter(isPublished)
+      .sort((a, b) => b.date - a.date);
+  });
+
+  eleventyConfig.addCollection("photos", function (collectionApi) {
+    return collectionApi
+      .getFilteredByGlob("content/photos/**/*.md")
+      .filter(isPublished)
+      .sort((a, b) => b.date - a.date);
+  });
+
+  eleventyConfig.addCollection("likes", function (collectionApi) {
+    return collectionApi
+      .getFilteredByGlob("content/likes/**/*.md")
+      .filter(isPublished)
+      .sort((a, b) => b.date - a.date);
+  });
+
+  // Replies collection - posts with inReplyTo/in_reply_to property
+  // Supports both camelCase (Indiekit Eleventy preset) and underscore (legacy) names
+  eleventyConfig.addCollection("replies", function (collectionApi) {
+    return collectionApi
+      .getAll()
+      .filter((item) => isPublished(item) && (item.data.inReplyTo || item.data.in_reply_to))
+      .sort((a, b) => b.date - a.date);
+  });
+
+  // Reposts collection - posts with repostOf/repost_of property
+  // Supports both camelCase (Indiekit Eleventy preset) and underscore (legacy) names
+  eleventyConfig.addCollection("reposts", function (collectionApi) {
+    return collectionApi
+      .getAll()
+      .filter((item) => isPublished(item) && (item.data.repostOf || item.data.repost_of))
+      .sort((a, b) => b.date - a.date);
+  });
+
+  // Pages collection - root-level slash pages (about, now, uses, etc.)
+  // Includes both content/*.md (legacy) and content/pages/*.md (new post-type-page)
+  // Created via Indiekit's page post type
+  eleventyConfig.addCollection("pages", function (collectionApi) {
+    const rootPages = collectionApi.getFilteredByGlob("content/*.md");
+    const pagesDir = collectionApi.getFilteredByGlob("content/pages/*.md");
+    return [...rootPages, ...pagesDir]
+      .filter(page => isPublished(page) && !page.inputPath.includes('content.json') && !page.inputPath.includes('pages.json'))
+      .sort((a, b) => (a.data.title || a.data.name || "").localeCompare(b.data.title || b.data.name || ""));
+  });
+
+  // All content combined for homepage feed
+  eleventyConfig.addCollection("feed", function (collectionApi) {
+    return collectionApi
+      .getFilteredByGlob("content/**/*.md")
+      .filter(isPublished)
+      .sort((a, b) => b.date - a.date)
+      .slice(0, 20);
+  });
+
+  // Categories collection - deduplicated by slug to avoid duplicate permalinks
+  eleventyConfig.addCollection("categories", function (collectionApi) {
+    const categoryMap = new Map(); // slug -> original name (first seen)
+    const slugify = (str) => str.toLowerCase().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "-").replace(/^-+|-+$/g, "");
+
+    collectionApi.getAll().filter(isPublished).forEach((item) => {
+      if (item.data.category) {
+        const cats = Array.isArray(item.data.category) ? item.data.category : [item.data.category];
+        cats.forEach((cat) => {
+          if (cat && typeof cat === 'string' && cat.trim()) {
+            const slug = slugify(cat.trim());
+            if (slug && !categoryMap.has(slug)) {
+              categoryMap.set(slug, cat.trim());
+            }
+          }
+        });
+      }
+    });
+    return [...categoryMap.values()].sort();
+  });
+
+  // Category feeds — pre-grouped posts for per-category RSS/JSON feeds
+  eleventyConfig.addCollection("categoryFeeds", function (collectionApi) {
+    const slugify = (str) => str.toLowerCase().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "-").replace(/^-+|-+$/g, "");
+    const grouped = new Map(); // slug -> { name, slug, posts[] }
+
+    collectionApi
+      .getFilteredByGlob("content/**/*.md")
+      .filter(isPublished)
+      .sort((a, b) => b.date - a.date)
+      .forEach((item) => {
+        if (!item.data.category) return;
+        const cats = Array.isArray(item.data.category) ? item.data.category : [item.data.category];
+        for (const cat of cats) {
+          if (!cat || typeof cat !== "string" || !cat.trim()) continue;
+          const slug = slugify(cat.trim());
+          if (!slug) continue;
+          if (!grouped.has(slug)) {
+            grouped.set(slug, { name: cat.trim(), slug, posts: [] });
+          }
+          const entry = grouped.get(slug);
+          if (entry.posts.length < 50) {
+            entry.posts.push(item);
+          }
+        }
+      });
+
+    return [...grouped.values()].sort((a, b) => a.name.localeCompare(b.name));
+  });
+
+  // Recent posts for sidebar
+  eleventyConfig.addCollection("recentPosts", function (collectionApi) {
+    return collectionApi
+      .getFilteredByGlob("content/**/*.md")
+      .filter(isPublished)
+      .sort((a, b) => b.date - a.date)
+      .slice(0, 5);
+  });
+
+  // Featured posts — curated selection via `pinned: true` frontmatter
+  // Property named "pinned" to avoid conflict with "featured" (hero image) in MF2/Micropub
+  eleventyConfig.addCollection("featuredPosts", function (collectionApi) {
+    return collectionApi
+      .getFilteredByGlob("content/**/*.md")
+      .filter(isPublished)
+      .filter((item) => item.data.pinned === true || item.data.pinned === "true")
+      .sort((a, b) => b.date - a.date);
+  });
+
+  // Weekly digests — posts grouped by ISO week for digest pages and RSS feed
+  eleventyConfig.addCollection("weeklyDigests", function (collectionApi) {
+    const allPosts = collectionApi
+      .getFilteredByGlob("content/**/*.md")
+      .filter(isPublished)
+      .filter((item) => {
+        // Exclude replies
+        return !(item.data.inReplyTo || item.data.in_reply_to);
+      })
+      .sort((a, b) => b.date - a.date);
+
+    // ISO week helpers
+    const getISOWeek = (date) => {
+      const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+      d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
+      const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+      return Math.ceil(((d - yearStart) / 86400000 + 1) / 7);
+    };
+    const getISOYear = (date) => {
+      const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+      d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
+      return d.getUTCFullYear();
+    };
+
+    // Group by ISO week
+    const weekMap = new Map();
+
+    for (const post of allPosts) {
+      const d = new Date(post.date);
+      const week = getISOWeek(d);
+      const year = getISOYear(d);
+      const key = `${year}-W${String(week).padStart(2, "0")}`;
+
+      if (!weekMap.has(key)) {
+        // Calculate Monday (start) and Sunday (end) of ISO week
+        const jan4 = new Date(Date.UTC(year, 0, 4));
+        const dayOfWeek = jan4.getUTCDay() || 7;
+        const monday = new Date(jan4);
+        monday.setUTCDate(jan4.getUTCDate() - dayOfWeek + 1 + (week - 1) * 7);
+        const sunday = new Date(monday);
+        sunday.setUTCDate(monday.getUTCDate() + 6);
+
+        weekMap.set(key, {
+          year,
+          week,
+          slug: `${year}/W${String(week).padStart(2, "0")}`,
+          label: `Week ${week}, ${year}`,
+          startDate: monday.toISOString().slice(0, 10),
+          endDate: sunday.toISOString().slice(0, 10),
+          posts: [],
+        });
+      }
+
+      weekMap.get(key).posts.push(post);
+    }
+
+    // Post type detection (matches blog.njk logic)
+    const typeDetect = (post) => {
+      if (post.data.likeOf || post.data.like_of) return "likes";
+      if (post.data.bookmarkOf || post.data.bookmark_of) return "bookmarks";
+      if (post.data.repostOf || post.data.repost_of) return "reposts";
+      if (post.data.photo && post.data.photo.length) return "photos";
+      if (post.data.title) return "articles";
+      return "notes";
+    };
+
+    // Build byType for each week and convert to array
+    const digests = [...weekMap.values()].map((entry) => {
+      const byType = {};
+      for (const post of entry.posts) {
+        const type = typeDetect(post);
+        if (!byType[type]) byType[type] = [];
+        byType[type].push(post);
+      }
+      return { ...entry, byType };
+    });
+
+    // Sort newest-week-first
+    digests.sort((a, b) => {
+      if (a.year !== b.year) return b.year - a.year;
+      return b.week - a.week;
+    });
+
+    return digests;
+  });
+
+  // Generate OpenGraph images for posts without photos
+  // Runs on every build (including watcher rebuilds) — manifest caching makes it fast
+  // for incremental: only new posts without an OG image get generated (~200ms each)
+  eleventyConfig.on("eleventy.before", () => {
+    const contentDir = resolve(__dirname, "content");
+    const cacheDir = resolve(__dirname, ".cache");
+    const siteName = process.env.SITE_NAME || "My IndieWeb Blog";
+    try {
+      execFileSync(process.execPath, [
+        "--max-old-space-size=768",
+        resolve(__dirname, "lib", "og-cli.js"),
+        contentDir,
+        cacheDir,
+        siteName,
+      ], {
+        stdio: "inherit",
+        env: { ...process.env, NODE_OPTIONS: "" },
+      });
+
+      // Sync new OG images to output directory.
+      // During incremental builds, .cache/og is in watchIgnores so Eleventy's
+      // passthrough copy won't pick up newly generated images. Copy them manually.
+      const ogCacheDir = resolve(cacheDir, "og");
+      const ogOutputDir = resolve(__dirname, "_site", "og");
+      if (existsSync(ogCacheDir) && existsSync(resolve(__dirname, "_site"))) {
+        mkdirSync(ogOutputDir, { recursive: true });
+        let synced = 0;
+        for (const file of readdirSync(ogCacheDir)) {
+          if (file.endsWith(".png") && !existsSync(resolve(ogOutputDir, file))) {
+            copyFileSync(resolve(ogCacheDir, file), resolve(ogOutputDir, file));
+            synced++;
+          }
+        }
+        if (synced > 0) {
+          console.log(`[og] Synced ${synced} new image(s) to output`);
+        }
+      }
+    } catch (err) {
+      console.error("[og] Image generation failed:", err.message);
+    }
+  });
+
+  // Pre-fetch unfurl metadata for all interaction URLs in content files.
+  // Populates the disk cache BEFORE templates render, so the synchronous
+  // unfurlCard filter (used in nested includes like recent-posts) has data.
+  eleventyConfig.on("eleventy.before", async () => {
+    const contentDir = resolve(__dirname, "content");
+    if (!existsSync(contentDir)) return;
+
+    const urls = new Set();
+    const interactionProps = [
+      "likeOf", "like_of", "bookmarkOf", "bookmark_of",
+      "repostOf", "repost_of", "inReplyTo", "in_reply_to",
+    ];
+
+    const walk = (dir) => {
+      for (const entry of readdirSync(dir, { withFileTypes: true })) {
+        const full = resolve(dir, entry.name);
+        if (entry.isDirectory()) { walk(full); continue; }
+        if (!entry.name.endsWith(".md")) continue;
+        try {
+          const { data } = matter(readFileSync(full, "utf-8"));
+          for (const prop of interactionProps) {
+            if (data[prop]) urls.add(data[prop]);
+          }
+        } catch { /* skip unparseable files */ }
+      }
+    };
+    walk(contentDir);
+
+    if (urls.size === 0) return;
+    console.log(`[unfurl] Pre-fetching ${urls.size} interaction URLs...`);
+    await Promise.all([...urls].map((url) => prefetchUrl(url)));
+    console.log(`[unfurl] Pre-fetch complete.`);
+  });
+
+  // Post-build hook: pagefind indexing + WebSub notification
+  // Pagefind runs once on the first build (initial or watcher's first full build), then never again.
+  // WebSub runs on every non-incremental build.
+  // Note: --incremental CLI flag sets incremental=true even for the watcher's first full build,
+  // so we cannot use the incremental flag to guard pagefind. Use a one-shot flag instead.
+  let pagefindDone = false;
+  eleventyConfig.on("eleventy.after", async ({ dir, directories, runMode, incremental }) => {
+    // Markdown for Agents — generate index.md alongside index.html for articles
+    const mdEnabled = (process.env.MARKDOWN_AGENTS_ENABLED || "true").toLowerCase() === "true";
+    if (mdEnabled && !incremental) {
+      const outputDir = directories?.output || dir.output;
+      const contentDir = resolve(__dirname, "content/articles");
+      const aiTrain = process.env.MARKDOWN_AGENTS_AI_TRAIN || "yes";
+      const search = process.env.MARKDOWN_AGENTS_SEARCH || "yes";
+      const aiInput = process.env.MARKDOWN_AGENTS_AI_INPUT || "yes";
+      const authorName = process.env.AUTHOR_NAME || "Blog Author";
+      let mdCount = 0;
+      try {
+        const files = readdirSync(contentDir).filter(f => f.endsWith(".md"));
+        for (const file of files) {
+          const src = readFileSync(resolve(contentDir, file), "utf-8");
+          const { data: fm, content: body } = matter(src);
+          if (!fm || fm.draft) continue;
+          // Derive the output path from the article's permalink or url
+          const articleUrl = fm.permalink || fm.url;
+          if (!articleUrl || !articleUrl.startsWith("/articles/")) continue;
+          const mdDir = resolve(outputDir, articleUrl.replace(/^\//, "").replace(/\/$/, ""));
+          const mdPath = resolve(mdDir, "index.md");
+          const trimmedBody = body.trim();
+          const tokens = Math.ceil(trimmedBody.length / 4);
+          const title = (fm.title || "").replace(/"/g, '\\"');
+          const date = fm.date ? new Date(fm.date).toISOString() : fm.published || "";
+          let frontLines = [
+            "---",
+            `title: "${title}"`,
+            `date: ${date}`,
+            `author: ${authorName}`,
+            `url: ${siteUrl}${articleUrl}`,
+          ];
+          if (fm.category && Array.isArray(fm.category) && fm.category.length > 0) {
+            frontLines.push("categories:");
+            for (const cat of fm.category) {
+              frontLines.push(`  - ${cat}`);
+            }
+          }
+          if (fm.description) {
+            frontLines.push(`description: "${fm.description.replace(/"/g, '\\"')}"`);
+          }
+          frontLines.push(`tokens: ${tokens}`);
+          frontLines.push(`content_signal: ai-train=${aiTrain}, search=${search}, ai-input=${aiInput}`);
+          frontLines.push("---");
+          mkdirSync(mdDir, { recursive: true });
+          writeFileSync(mdPath, frontLines.join("\n") + "\n\n# " + (fm.title || "") + "\n\n" + trimmedBody + "\n");
+          mdCount++;
+        }
+        console.log(`[markdown-agents] Generated ${mdCount} article .md files`);
+      } catch (err) {
+        console.error("[markdown-agents] Error generating .md files:", err.message);
+      }
+    }
+
+    // Pagefind indexing — run exactly once per process lifetime
+    if (!pagefindDone) {
+      pagefindDone = true;
+      const outputDir = directories?.output || dir.output;
+      try {
+        console.log(`[pagefind] Indexing ${outputDir} (${runMode})...`);
+        execFileSync("npx", ["pagefind", "--site", outputDir, "--output-subdir", "pagefind", "--glob", "**/*.html"], {
+          stdio: "inherit",
+          timeout: 120000,
+        });
+        console.log("[pagefind] Indexing complete");
+      } catch (err) {
+        console.error("[pagefind] Indexing failed:", err.message);
+      }
+
+    }
+
+    // Syndication webhook — trigger after incremental rebuilds (new posts are now live)
+    // Cuts syndication latency from ~2 min (poller) to ~5 sec (immediate trigger)
+    if (incremental) {
+      const syndicateUrl = process.env.SYNDICATE_WEBHOOK_URL;
+      if (syndicateUrl) {
+        try {
+          const secretFile = process.env.SYNDICATE_SECRET_FILE || "/app/data/config/.secret";
+          const secret = readFileSync(secretFile, "utf-8").trim();
+
+          // Build a minimal HS256 JWT using built-in crypto (no jsonwebtoken dependency)
+          const header = Buffer.from(JSON.stringify({ alg: "HS256", typ: "JWT" })).toString("base64url");
+          const now = Math.floor(Date.now() / 1000);
+          const payload = Buffer.from(JSON.stringify({
+            me: siteUrl,
+            scope: "update",
+            iat: now,
+            exp: now + 300, // 5 minutes
+          })).toString("base64url");
+          const signature = createHmac("sha256", secret)
+            .update(`${header}.${payload}`)
+            .digest("base64url");
+          const token = `${header}.${payload}.${signature}`;
+
+          const res = await fetch(`${syndicateUrl}?token=${token}`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            signal: AbortSignal.timeout(30000),
+          });
+          console.log(`[syndicate-hook] Triggered syndication: ${res.status}`);
+        } catch (err) {
+          console.error(`[syndicate-hook] Failed:`, err.message);
+        }
+      }
+    }
+
+    // WebSub hub notification — skip on incremental rebuilds
+    if (incremental) return;
+    const hubUrl = "https://websubhub.com/hub";
+    const feedUrls = [
+      `${siteUrl}/`,
+      `${siteUrl}/feed.xml`,
+      `${siteUrl}/feed.json`,
+    ];
+
+    // Discover category feed URLs from build output
+    const outputDir = directories?.output || dir.output;
+    const categoriesDir = resolve(outputDir, "categories");
+    try {
+      for (const entry of readdirSync(categoriesDir, { withFileTypes: true })) {
+        if (entry.isDirectory() && existsSync(resolve(categoriesDir, entry.name, "feed.xml"))) {
+          feedUrls.push(`${siteUrl}/categories/${entry.name}/feed.xml`);
+          feedUrls.push(`${siteUrl}/categories/${entry.name}/feed.json`);
+        }
+      }
+    } catch {
+      // categoriesDir may not exist on first build — ignore
+    }
+
+    console.log(`[websub] Notifying hub for ${feedUrls.length} URLs...`);
+    for (const feedUrl of feedUrls) {
+      try {
+        const res = await fetch(hubUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/x-www-form-urlencoded" },
+          body: `hub.mode=publish&hub.url=${encodeURIComponent(feedUrl)}`,
+        });
+        console.log(`[websub] Notified hub for ${feedUrl}: ${res.status}`);
+      } catch (err) {
+        console.error(`[websub] Hub notification failed for ${feedUrl}:`, err.message);
+      }
+    }
+  });
 
   return {
     dir: {
-      input: "src",
+      input: ".",
       output: "_site",
+      includes: "_includes",
+      data: "_data",
     },
+    markdownTemplateEngine: false,  // Disable to avoid Nunjucks interpreting {{ in content
+    htmlTemplateEngine: "njk",
   };
-}
\ No newline at end of file
+}
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..9274a8c
Binary files /dev/null and b/favicon.ico differ
diff --git a/featured.njk b/featured.njk
new file mode 100644
index 0000000..5e66927
--- /dev/null
+++ b/featured.njk
@@ -0,0 +1,186 @@
+---
+layout: layouts/base.njk
+title: Featured
+withSidebar: true
+pagination:
+  data: collections.featuredPosts
+  size: 20
+  alias: paginatedFeatured
+  generatePageOnEmptyData: true
+permalink: "featured/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
+---
+<div class="h-feed">
+  <div class="flex flex-wrap items-center gap-4 mb-2">
+    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 flex items-center gap-2">
+      <svg class="w-6 h-6 text-amber-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+      </svg>
+      Featured
+    </h1>
+  </div>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
+    Curated posts pinned as featured.
+    <span class="text-sm">({{ collections.featuredPosts.length }} total)</span>
+  </p>
+
+  {% if paginatedFeatured.length > 0 %}
+  <ul class="post-list">
+    {% for post in paginatedFeatured %}
+      {# Detect post type from frontmatter properties #}
+      {% set likedUrl = post.data.likeOf or post.data.like_of %}
+      {% set bookmarkedUrl = post.data.bookmarkOf or post.data.bookmark_of %}
+      {% set repostedUrl = post.data.repostOf or post.data.repost_of %}
+      {% set replyToUrl = post.data.inReplyTo or post.data.in_reply_to %}
+      {% set hasPhotos = post.data.photo and post.data.photo.length %}
+
+      {# Determine border color by post type #}
+      {% if likedUrl %}
+        {% set borderClass = "border-l-red-400 dark:border-l-red-500" %}
+      {% elif bookmarkedUrl %}
+        {% set borderClass = "border-l-amber-400 dark:border-l-amber-500" %}
+      {% elif repostedUrl %}
+        {% set borderClass = "border-l-green-400 dark:border-l-green-500" %}
+      {% elif replyToUrl %}
+        {% set borderClass = "border-l-sky-400 dark:border-l-sky-500" %}
+      {% elif hasPhotos %}
+        {% set borderClass = "border-l-purple-400 dark:border-l-purple-500" %}
+      {% else %}
+        {% set borderClass = "border-l-surface-300 dark:border-l-surface-600" %}
+      {% endif %}
+
+    <li class="h-entry post-card border-l-[3px] {{ borderClass }}">
+
+      {% if likedUrl %}
+      {# ── Like ── #}
+      <div class="post-header">
+        <span class="text-xs font-medium text-red-600 dark:text-red-400">Liked</span>
+        <a class="u-url ml-2" href="{{ post.url }}">
+          <time class="dt-published text-sm text-surface-500 dark:text-surface-400" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+        </a>
+      </div>
+      <a class="u-like-of text-sm text-surface-600 dark:text-surface-400 hover:underline break-all mt-2 inline-block" href="{{ likedUrl }}">{{ likedUrl }}</a>
+      {% if post.templateContent %}
+      <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">{{ post.templateContent | safe }}</div>
+      {% endif %}
+
+      {% elif bookmarkedUrl %}
+      {# ── Bookmark ── #}
+      <div class="post-header">
+        <span class="text-xs font-medium text-amber-600 dark:text-amber-400">Bookmarked</span>
+        <time class="dt-published text-sm text-surface-500 dark:text-surface-400 ml-2" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+      </div>
+      {% if post.data.title %}
+      <h2 class="p-name text-lg font-semibold mt-2">
+        <a class="u-url text-surface-900 dark:text-surface-100 hover:underline" href="{{ post.url }}">{{ post.data.title }}</a>
+      </h2>
+      {% endif %}
+      <a class="u-bookmark-of text-sm text-surface-600 dark:text-surface-400 hover:underline break-all mt-1 inline-block" href="{{ bookmarkedUrl }}">{{ bookmarkedUrl }}</a>
+      {% if post.templateContent %}
+      <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">{{ post.templateContent | safe }}</div>
+      {% endif %}
+
+      {% elif repostedUrl %}
+      {# ── Repost ── #}
+      <div class="post-header">
+        <span class="text-xs font-medium text-green-600 dark:text-green-400">Reposted</span>
+        <a class="u-url ml-2" href="{{ post.url }}">
+          <time class="dt-published text-sm text-surface-500 dark:text-surface-400" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+        </a>
+      </div>
+      <a class="u-repost-of text-sm text-surface-600 dark:text-surface-400 hover:underline break-all mt-2 inline-block" href="{{ repostedUrl }}">{{ repostedUrl }}</a>
+      {% if post.templateContent %}
+      <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">{{ post.templateContent | safe }}</div>
+      {% endif %}
+
+      {% elif replyToUrl %}
+      {# ── Reply ── #}
+      <div class="post-header">
+        <span class="text-xs font-medium text-sky-600 dark:text-sky-400">In reply to</span>
+        <a class="u-url ml-2" href="{{ post.url }}">
+          <time class="dt-published text-sm text-surface-500 dark:text-surface-400" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+        </a>
+      </div>
+      <a class="u-in-reply-to text-sm text-surface-600 dark:text-surface-400 hover:underline break-all mt-2 inline-block" href="{{ replyToUrl }}">{{ replyToUrl }}</a>
+      {% if post.templateContent %}
+      <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">{{ post.templateContent | safe }}</div>
+      {% endif %}
+
+      {% elif post.data.title %}
+      {# ── Article/Page ── #}
+      <div class="post-header">
+        <h2 class="text-xl font-semibold mb-1 flex-1">
+          <a class="p-name u-url text-surface-900 dark:text-surface-100 hover:underline" href="{{ post.url }}">{{ post.data.title }}</a>
+        </h2>
+      </div>
+      <div class="post-meta mt-2">
+        <time class="dt-published" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+        {% if post.data.postType %}
+        <span class="px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded text-xs ml-2">{{ post.data.postType }}</span>
+        {% endif %}
+      </div>
+      {% if post.templateContent %}
+      <p class="p-summary text-surface-700 dark:text-surface-300 mt-3">{{ post.templateContent | striptags | truncate(250) }}</p>
+      {% endif %}
+      <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block">Read more &rarr;</a>
+
+      {% else %}
+      {# ── Note ── #}
+      <div class="post-header">
+        <a class="u-url" href="{{ post.url }}">
+          <time class="dt-published text-sm text-surface-500 dark:text-surface-400 font-medium" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
+        </a>
+        {% if post.data.postType %}
+        <span class="px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded text-xs ml-2">{{ post.data.postType }}</span>
+        {% endif %}
+      </div>
+      {% if post.templateContent %}
+      <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">{{ post.templateContent | safe }}</div>
+      {% endif %}
+      <div class="post-footer mt-3">
+        <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline">Permalink</a>
+      </div>
+      {% endif %}
+
+    </li>
+    {% endfor %}
+  </ul>
+
+  {# Pagination controls #}
+  {% if pagination.pages.length > 1 %}
+  <nav class="pagination" aria-label="Featured posts pagination">
+    <div class="pagination-info">
+      Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
+    </div>
+    <div class="pagination-links">
+      {% if pagination.href.previous %}
+      <a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </span>
+      {% endif %}
+
+      {% if pagination.href.next %}
+      <a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </span>
+      {% endif %}
+    </div>
+  </nav>
+  {% endif %}
+
+  {% else %}
+  {% set postType = "featured" %}
+  {% include "components/empty-collection.njk" %}
+  {% endif %}
+</div>
diff --git a/feed-json.njk b/feed-json.njk
new file mode 100644
index 0000000..aa9a6e3
--- /dev/null
+++ b/feed-json.njk
@@ -0,0 +1,66 @@
+---
+permalink: /feed.json
+eleventyExcludeFromCollections: true
+eleventyImport:
+  collections:
+    - feed
+---
+{
+  "version": "https://jsonfeed.org/version/1.1",
+  "title": "{{ site.name }}",
+  "home_page_url": "{{ site.url }}/",
+  "feed_url": "{{ site.url }}/feed.json",
+  "hubs": [
+    {
+      "type": "WebSub",
+      "url": "https://websubhub.com/hub"
+    }
+  ],
+  "description": "{{ site.description }}",
+  "language": "{{ site.locale | default('en') }}",
+  "authors": [
+    {
+      "name": "{{ site.author.name | default(site.name) }}",
+      "url": "{{ site.url }}/"
+    }
+  ],
+  "_textcasting": {
+    "version": "1.0",
+    "about": "https://textcasting.org/"
+    {%- set hasSupport = site.support and (site.support.url or site.support.stripe or site.support.lightning or site.support.paymentPointer) %}
+    {%- if hasSupport %},
+    "support": {{ site.support | textcastingSupport | jsonEncode | safe }}
+    {%- endif %}
+  },
+  "items": [
+    {%- for post in collections.feed %}
+    {%- set absolutePostUrl = site.url + post.url %}
+    {%- set postImage = post.data.photo %}
+    {%- if postImage %}
+      {# If photo is an array, use first element (check if first element looks like a URL) #}
+      {%- if postImage[0] and (postImage[0] | length) > 10 %}
+        {%- set postImage = postImage[0] %}
+      {%- endif %}
+    {%- endif %}
+    {%- if not postImage or postImage == "" %}
+      {%- set postImage = post.data.image or (post.content | extractFirstImage) %}
+    {%- endif %}
+    {
+      "id": "{{ absolutePostUrl }}",
+      "url": "{{ absolutePostUrl }}",
+      "title": {% if post.data.title %}{{ post.data.title | jsonEncode | safe }}{% else %}null{% endif %},
+      "content_html": {{ post.content | htmlToAbsoluteUrls(absolutePostUrl) | jsonEncode | safe }},
+      "content_text": {{ post.content | striptags | jsonEncode | safe }},
+      "date_published": "{{ post.date | dateToRfc3339 }}",
+      "date_modified": "{{ (post.data.updated or post.date) | dateToRfc3339 }}"
+      {%- if postImage and postImage != "" and (postImage | length) > 10 %},
+      "image": "{{ postImage | url | absoluteUrl(site.url) }}"
+      {%- endif %}
+      {%- set attachments = post.data | feedAttachments %}
+      {%- if attachments.length > 0 %},
+      "attachments": {{ attachments | jsonEncode | safe }}
+      {%- endif %}
+    }{% if not loop.last %},{% endif %}
+    {%- endfor %}
+  ]
+}
diff --git a/feed.njk b/feed.njk
new file mode 100644
index 0000000..0fdfab4
--- /dev/null
+++ b/feed.njk
@@ -0,0 +1,44 @@
+---
+permalink: /feed.xml
+eleventyExcludeFromCollections: true
+eleventyImport:
+  collections:
+    - feed
+---
+<?xml version="1.0" encoding="utf-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/">
+  <channel>
+    <title>{{ site.name }}</title>
+    <link>{{ site.url }}/</link>
+    <description>{{ site.description }}</description>
+    <language>{{ site.locale | default('en') }}</language>
+    <atom:link href="{{ site.url }}/feed.xml" rel="self" type="application/rss+xml"/>
+    <atom:link href="https://websubhub.com/hub" rel="hub"/>
+    <lastBuildDate>{{ collections.feed | getNewestCollectionItemDate | dateToRfc822 }}</lastBuildDate>
+    {%- for post in collections.feed %}
+    {%- set absolutePostUrl = site.url + post.url %}
+    {%- set postImage = post.data.photo %}
+    {%- if postImage %}
+      {# If photo is an array, use first element (check if first element looks like a URL) #}
+      {%- if postImage[0] and (postImage[0] | length) > 10 %}
+        {%- set postImage = postImage[0] %}
+      {%- endif %}
+    {%- endif %}
+    {%- if not postImage or postImage == "" %}
+      {%- set postImage = post.data.image or (post.content | extractFirstImage) %}
+    {%- endif %}
+    <item>
+      <title>{{ post.data.title | default(post.content | striptags | truncate(80)) | escape }}</title>
+      <link>{{ absolutePostUrl }}</link>
+      <guid isPermaLink="true">{{ absolutePostUrl }}</guid>
+      <pubDate>{{ post.date | dateToRfc822 }}</pubDate>
+      <description>{{ post.content | htmlToAbsoluteUrls(absolutePostUrl) | escape }}</description>
+      {%- if postImage and postImage != "" and (postImage | length) > 10 %}
+      {%- set imageUrl = postImage | url | absoluteUrl(site.url) %}
+      <enclosure url="{{ imageUrl }}" type="image/jpeg" length="0"/>
+      <media:content url="{{ imageUrl }}" medium="image"/>
+      {%- endif %}
+    </item>
+    {%- endfor %}
+  </channel>
+</rss>
diff --git a/funkwhale.njk b/funkwhale.njk
new file mode 100644
index 0000000..8694d8f
--- /dev/null
+++ b/funkwhale.njk
@@ -0,0 +1,269 @@
+---
+layout: layouts/base.njk
+title: Funkwhale Listening Activity
+permalink: /funkwhale/
+withSidebar: true
+---
+<div class="funkwhale-page" x-data="{ activeTab: 'all' }">
+  <header class="mb-6 sm:mb-8">
+    <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">Listening Activity</h1>
+    <p class="text-surface-600 dark:text-surface-400">
+      What I've been listening to on
+      <a href="{{ funkwhaleActivity.instanceUrl }}" class="text-purple-600 dark:text-purple-400 hover:underline" target="_blank" rel="noopener">
+        Funkwhale
+      </a>
+    </p>
+  </header>
+
+  {# Now Playing / Recently Played Hero #}
+  {% if funkwhaleActivity.nowPlaying and funkwhaleActivity.nowPlaying.status %}
+  <section class="mb-12">
+    <div class="relative p-4 sm:p-6 rounded-xl sm:rounded-2xl overflow-hidden {% if funkwhaleActivity.nowPlaying.status == 'now-playing' %}bg-gradient-to-br from-green-500/10 to-green-600/5 border-2 border-green-500/30{% else %}bg-gradient-to-br from-purple-500/10 to-purple-600/5 border border-purple-500/20{% endif %}">
+      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5">
+        {% if funkwhaleActivity.nowPlaying.coverUrl %}
+        <img
+          src="{{ funkwhaleActivity.nowPlaying.coverUrl }}"
+          alt=""
+          class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg shadow-lg object-cover flex-shrink-0"
+          loading="lazy"
+          eleventy:ignore
+        >
+        {% else %}
+        <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
+          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
+          </svg>
+        </div>
+        {% endif %}
+
+        <div class="flex-1 min-w-0 w-full sm:w-auto">
+          <div class="flex items-center gap-2 mb-2">
+            {% if funkwhaleActivity.nowPlaying.status == 'now-playing' %}
+            <span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium bg-green-500/20 text-green-700 dark:text-green-400 rounded-full">
+              <span class="flex gap-0.5 items-end h-3">
+                <span class="w-0.5 bg-green-500 animate-pulse" style="height: 30%; animation-delay: 0s;"></span>
+                <span class="w-0.5 bg-green-500 animate-pulse" style="height: 70%; animation-delay: 0.2s;"></span>
+                <span class="w-0.5 bg-green-500 animate-pulse" style="height: 50%; animation-delay: 0.4s;"></span>
+              </span>
+              Now Playing
+            </span>
+            {% else %}
+            <span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium bg-purple-500/20 text-purple-700 dark:text-purple-400 rounded-full">
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+              Recently Played
+            </span>
+            {% endif %}
+          </div>
+
+          <h2 class="text-lg sm:text-xl font-bold text-surface-900 dark:text-surface-100 truncate">
+            {% if funkwhaleActivity.nowPlaying.trackUrl %}
+            <a href="{{ funkwhaleActivity.nowPlaying.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">
+              {{ funkwhaleActivity.nowPlaying.track }}
+            </a>
+            {% else %}
+            {{ funkwhaleActivity.nowPlaying.track }}
+            {% endif %}
+          </h2>
+          <p class="text-surface-600 dark:text-surface-400">{{ funkwhaleActivity.nowPlaying.artist }}</p>
+          {% if funkwhaleActivity.nowPlaying.album %}
+          <p class="text-sm text-surface-500 mt-1">{{ funkwhaleActivity.nowPlaying.album }}</p>
+          {% endif %}
+          <p class="text-xs text-surface-500 mt-2">{{ funkwhaleActivity.nowPlaying.relativeTime }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  {% endif %}
+
+  {# Stats Section with Tabs #}
+  {% if funkwhaleActivity.stats %}
+  <section class="mb-12">
+    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
+      <svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+      </svg>
+      Listening Statistics
+    </h2>
+
+    {# Tab buttons #}
+    <div class="flex gap-1 mb-6 border-b border-surface-200 dark:border-surface-700 overflow-x-auto">
+      <button
+        @click="activeTab = 'all'"
+        :class="activeTab === 'all' ? 'border-b-2 border-purple-500 text-purple-600 dark:text-purple-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+        class="px-4 py-2 text-sm font-medium transition-colors -mb-px whitespace-nowrap"
+      >
+        All Time
+      </button>
+      <button
+        @click="activeTab = 'month'"
+        :class="activeTab === 'month' ? 'border-b-2 border-purple-500 text-purple-600 dark:text-purple-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+        class="px-4 py-2 text-sm font-medium transition-colors -mb-px whitespace-nowrap"
+      >
+        This Month
+      </button>
+      <button
+        @click="activeTab = 'week'"
+        :class="activeTab === 'week' ? 'border-b-2 border-purple-500 text-purple-600 dark:text-purple-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+        class="px-4 py-2 text-sm font-medium transition-colors -mb-px whitespace-nowrap"
+      >
+        This Week
+      </button>
+      <button
+        @click="activeTab = 'trends'"
+        :class="activeTab === 'trends' ? 'border-b-2 border-purple-500 text-purple-600 dark:text-purple-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+        class="px-4 py-2 text-sm font-medium transition-colors -mb-px whitespace-nowrap"
+      >
+        Trends
+      </button>
+    </div>
+
+    {# All Time Tab #}
+    <div x-show="activeTab === 'all'" x-cloak>
+      {% set summary = funkwhaleActivity.stats.summary.all %}
+      {% set topArtists = funkwhaleActivity.stats.topArtists.all %}
+      {% set topAlbums = funkwhaleActivity.stats.topAlbums.all %}
+      {% include "components/funkwhale-stats-content.njk" %}
+    </div>
+
+    {# This Month Tab #}
+    <div x-show="activeTab === 'month'" x-cloak>
+      {% set summary = funkwhaleActivity.stats.summary.month %}
+      {% set topArtists = funkwhaleActivity.stats.topArtists.month %}
+      {% set topAlbums = funkwhaleActivity.stats.topAlbums.month %}
+      {% include "components/funkwhale-stats-content.njk" %}
+    </div>
+
+    {# This Week Tab #}
+    <div x-show="activeTab === 'week'" x-cloak>
+      {% set summary = funkwhaleActivity.stats.summary.week %}
+      {% set topArtists = funkwhaleActivity.stats.topArtists.week %}
+      {% set topAlbums = funkwhaleActivity.stats.topAlbums.week %}
+      {% include "components/funkwhale-stats-content.njk" %}
+    </div>
+
+    {# Trends Tab #}
+    <div x-show="activeTab === 'trends'" x-cloak>
+      {% if funkwhaleActivity.stats.trends and funkwhaleActivity.stats.trends.length %}
+      <div class="bg-surface-50 dark:bg-surface-800 rounded-xl p-6 border border-surface-200 dark:border-surface-700">
+        <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-4">Daily Listening (Last 30 Days)</h3>
+        <div class="flex items-end gap-1 h-32">
+          {% set maxCount = 1 %}
+          {% for day in funkwhaleActivity.stats.trends %}
+            {% if day.count > maxCount %}
+              {% set maxCount = day.count %}
+            {% endif %}
+          {% endfor %}
+          {% for day in funkwhaleActivity.stats.trends %}
+          <div
+            class="flex-1 bg-purple-500 hover:bg-purple-600 rounded-t transition-colors cursor-pointer"
+            style="height: {{ (day.count / maxCount * 100) if maxCount > 0 else 0 }}%; min-height: 2px;"
+            title="{{ day.date }}: {{ day.count }} plays"
+          ></div>
+          {% endfor %}
+        </div>
+        <div class="flex justify-between text-xs text-surface-500 mt-2">
+          <span>{{ funkwhaleActivity.stats.trends[0].date }}</span>
+          <span>{{ funkwhaleActivity.stats.trends[funkwhaleActivity.stats.trends.length - 1].date }}</span>
+        </div>
+      </div>
+      {% else %}
+      <p class="text-surface-600 dark:text-surface-400">No trend data available yet.</p>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  {# Recent Listenings #}
+  <section class="mb-12">
+    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
+      <svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+      </svg>
+      Recent Listens
+    </h2>
+
+    {% if funkwhaleActivity.listenings.length %}
+    <div class="space-y-3">
+      {% for listening in funkwhaleActivity.listenings | head(15) %}
+      <div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors">
+        {% if listening.coverUrl %}
+        <img src="{{ listening.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+        {% else %}
+        <div class="w-12 h-12 rounded bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
+          <svg class="w-6 h-6 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2z"/>
+          </svg>
+        </div>
+        {% endif %}
+
+        <div class="flex-1 min-w-0">
+          <h3 class="font-medium text-surface-900 dark:text-surface-100 truncate">
+            {% if listening.trackUrl %}
+            <a href="{{ listening.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">
+              {{ listening.track }}
+            </a>
+            {% else %}
+            {{ listening.track }}
+            {% endif %}
+          </h3>
+          <p class="text-sm text-surface-600 dark:text-surface-400 truncate">{{ listening.artist }}</p>
+        </div>
+
+        <div class="text-right flex-shrink-0">
+          <span class="text-xs text-surface-500">{{ listening.relativeTime }}</span>
+          {% if listening.duration %}
+          <span class="text-xs text-surface-400 block">{{ listening.duration }}</span>
+          {% endif %}
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+    {% else %}
+    <p class="text-surface-600 dark:text-surface-400">No recent listening history available.</p>
+    {% endif %}
+  </section>
+
+  {# Favorites #}
+  {% if funkwhaleActivity.favorites.length %}
+  <section class="mb-12">
+    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
+      <svg class="w-6 h-6 text-red-500" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+      </svg>
+      Favorite Tracks
+    </h2>
+
+    <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
+      {% for favorite in funkwhaleActivity.favorites | head(10) %}
+      <div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+        {% if favorite.coverUrl %}
+        <img src="{{ favorite.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+        {% else %}
+        <div class="w-14 h-14 rounded bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
+          <svg class="w-6 h-6 text-surface-400" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+          </svg>
+        </div>
+        {% endif %}
+
+        <div class="flex-1 min-w-0">
+          <h3 class="font-medium text-surface-900 dark:text-surface-100 truncate">
+            {% if favorite.trackUrl %}
+            <a href="{{ favorite.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">
+              {{ favorite.track }}
+            </a>
+            {% else %}
+            {{ favorite.track }}
+            {% endif %}
+          </h3>
+          <p class="text-sm text-surface-600 dark:text-surface-400 truncate">{{ favorite.artist }}</p>
+          {% if favorite.album %}
+          <p class="text-xs text-surface-500 truncate">{{ favorite.album }}</p>
+          {% endif %}
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+</div>
diff --git a/github.njk b/github.njk
new file mode 100644
index 0000000..48cdd64
--- /dev/null
+++ b/github.njk
@@ -0,0 +1,270 @@
+---
+layout: layouts/base.njk
+title: GitHub Activity
+permalink: /github/
+withSidebar: true
+---
+<div class="github-page">
+  <header class="mb-6 sm:mb-8">
+    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">GitHub Activity</h1>
+    <p class="text-surface-600 dark:text-surface-400">
+      My open source contributions and starred repositories.
+      <a href="https://github.com/{{ site.feeds.github }}" class="text-emerald-600 dark:text-emerald-400 hover:underline" target="_blank" rel="noopener">
+        Follow me on GitHub
+      </a>
+    </p>
+  </header>
+
+  {# Featured Projects Section #}
+  {% if githubActivity.featured.length %}
+  <section class="mb-12">
+    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
+      <svg class="w-6 h-6 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
+      </svg>
+      Featured Projects
+    </h2>
+
+    <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
+      {% for repo in githubActivity.featured %}
+      <article class="p-5 bg-surface-50 dark:bg-surface-800 rounded-xl border-2 border-surface-200 dark:border-surface-700 shadow-sm">
+        <div class="flex items-start justify-between mb-3">
+          <h3 class="font-bold text-lg text-surface-900 dark:text-surface-100">
+            <a href="{{ repo.url }}" class="hover:text-emerald-600 dark:hover:text-emerald-400" target="_blank" rel="noopener">
+              {{ repo.fullName }}
+            </a>
+          </h3>
+          {% if repo.isPrivate %}
+          <span class="text-xs px-2 py-0.5 bg-surface-200 dark:bg-surface-700 text-surface-600 dark:text-surface-400 rounded">Private</span>
+          {% endif %}
+        </div>
+
+        {% if repo.description %}
+        <p class="text-sm text-surface-600 dark:text-surface-400 mb-4">{{ repo.description }}</p>
+        {% endif %}
+
+        <div class="flex flex-wrap items-center gap-3 text-sm text-surface-500 mb-4">
+          {% if repo.language %}
+          <span class="flex items-center gap-1">
+            <span class="w-3 h-3 rounded-full bg-surface-500"></span>
+            {{ repo.language }}
+          </span>
+          {% endif %}
+          <span class="flex items-center gap-1">
+            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
+            </svg>
+            {{ repo.stars }}
+          </span>
+          {% if repo.forks > 0 %}
+          <span class="flex items-center gap-1">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
+            </svg>
+            {{ repo.forks }}
+          </span>
+          {% endif %}
+        </div>
+
+        {% if repo.commits and repo.commits.length %}
+        <details class="border-t border-surface-200 dark:border-surface-700 pt-3 mt-3 overflow-hidden">
+          <summary class="cursor-pointer text-sm font-medium text-surface-600 dark:text-surface-400 hover:underline">
+            Recent commits ({{ repo.commits.length }})
+          </summary>
+          <ul class="mt-3 space-y-2 overflow-hidden">
+            {% for commit in repo.commits %}
+            <li class="flex items-start gap-2 text-sm min-w-0">
+              <code class="flex-shrink-0 text-xs font-mono bg-surface-100 dark:bg-surface-700 px-1.5 py-0.5 rounded">
+                <a href="{{ commit.url }}" class="text-emerald-600 dark:text-emerald-400 hover:underline font-mono text-xs" target="_blank" rel="noopener">{{ commit.sha }}</a>
+              </code>
+              <span class="text-surface-700 dark:text-surface-300 truncate min-w-0 flex-1">{{ commit.message }}</span>
+            </li>
+            {% endfor %}
+          </ul>
+        </details>
+        {% endif %}
+      </article>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {# Recent Commits Section #}
+  <section class="mb-12">
+    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
+      <svg class="w-6 h-6 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+      </svg>
+      Recent Commits
+    </h2>
+
+    {% if githubActivity.commits.length %}
+    <div class="space-y-3">
+      {% for commit in githubActivity.commits %}
+      <div class="flex items-start gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+        <code class="text-xs font-mono bg-surface-100 dark:bg-surface-700 px-2 py-1 rounded">
+          {{ commit.sha }}
+        </code>
+        <div class="flex-1 min-w-0">
+          <a href="{{ commit.url }}" class="text-surface-900 dark:text-surface-100 hover:text-emerald-600 dark:hover:text-emerald-400" target="_blank" rel="noopener">
+            {{ commit.message }}
+          </a>
+          <p class="text-xs text-surface-500 mt-1">
+            <a href="{{ commit.repoUrl }}" class="hover:underline" target="_blank" rel="noopener">{{ commit.repo }}</a>
+            · <time datetime="{{ commit.date }}">{{ commit.date | date("MMM d, yyyy") }}</time>
+          </p>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+    {% else %}
+    <p class="text-surface-600 dark:text-surface-400">No recent commits found.</p>
+    {% endif %}
+  </section>
+
+  {# Contributions Section (PRs & Issues) #}
+  {% if githubActivity.contributions.length %}
+  <section class="mb-12">
+    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
+      <svg class="w-6 h-6 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
+      </svg>
+      Pull Requests & Issues
+    </h2>
+
+    <div class="space-y-3">
+      {% for item in githubActivity.contributions %}
+      <div class="flex items-start gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+        {% if item.type == "pr" %}
+        <span class="flex-shrink-0 px-2 py-1 text-xs font-medium bg-emerald-100 dark:bg-emerald-900 text-emerald-800 dark:text-emerald-200 rounded">PR</span>
+        {% else %}
+        <span class="flex-shrink-0 px-2 py-1 text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded">Issue</span>
+        {% endif %}
+        <div class="flex-1 min-w-0">
+          <a href="{{ item.url }}" class="text-surface-900 dark:text-surface-100 hover:text-emerald-600 dark:hover:text-emerald-400" target="_blank" rel="noopener">
+            {{ item.title }}
+          </a>
+          <p class="text-xs text-surface-500 mt-1">
+            <a href="{{ item.repoUrl }}" class="hover:underline" target="_blank" rel="noopener">{{ item.repo }}</a>
+            #{{ item.number }}
+            · <time datetime="{{ item.date }}">{{ item.date | date("MMM d, yyyy") }}</time>
+          </p>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {# My Repositories Section #}
+  <section class="mb-12">
+    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
+      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+        <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/>
+      </svg>
+      My Repositories
+    </h2>
+
+    {% if githubRepos.length %}
+    <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
+      {% for repo in githubRepos | head(6) %}
+      <article class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+        <h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
+          <a href="{{ repo.html_url }}" class="hover:text-emerald-600 dark:hover:text-emerald-400" target="_blank" rel="noopener">
+            {{ repo.name }}
+          </a>
+        </h3>
+
+        {% if repo.description %}
+        <p class="text-sm text-surface-600 dark:text-surface-400 mb-3">{{ repo.description | truncate(100) }}</p>
+        {% endif %}
+
+        <div class="flex flex-wrap items-center gap-3 text-sm text-surface-500">
+          {% if repo.language %}
+          <span class="flex items-center gap-1">
+            <span class="w-3 h-3 rounded-full bg-surface-500"></span>
+            {{ repo.language }}
+          </span>
+          {% endif %}
+          <span class="flex items-center gap-1">
+            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
+            </svg>
+            {{ repo.stargazers_count }}
+          </span>
+          <span class="flex items-center gap-1">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
+            </svg>
+            {{ repo.forks_count }}
+          </span>
+        </div>
+      </article>
+      {% endfor %}
+    </div>
+
+    <a href="https://github.com/{{ site.feeds.github }}?tab=repositories" class="inline-block mt-4 text-emerald-600 dark:text-emerald-400 hover:underline">
+      View all repositories &rarr;
+    </a>
+    {% else %}
+    <p class="text-surface-600 dark:text-surface-400">No repositories found.</p>
+    {% endif %}
+  </section>
+
+  {# Starred Repos Section #}
+  <section>
+    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
+      <svg class="w-6 h-6 text-emerald-500" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
+      </svg>
+      Starred Repositories
+    </h2>
+
+    {% if githubActivity.stars.length %}
+    <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
+      {% for repo in githubActivity.stars | head(10) %}
+      <article class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-600 transition-colors">
+        <h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
+          <a href="{{ repo.url }}" class="hover:text-emerald-600 dark:hover:text-emerald-400" target="_blank" rel="noopener">
+            {{ repo.name }}
+          </a>
+        </h3>
+
+        {% if repo.description %}
+        <p class="text-sm text-surface-600 dark:text-surface-400 mb-3">{{ repo.description }}</p>
+        {% endif %}
+
+        <div class="flex flex-wrap gap-2 mb-3">
+          {% for topic in repo.topics %}
+          <span class="text-xs px-2 py-0.5 bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300 rounded">
+            {{ topic }}
+          </span>
+          {% endfor %}
+        </div>
+
+        <div class="flex flex-wrap items-center gap-3 text-sm text-surface-500">
+          {% if repo.language %}
+          <span class="flex items-center gap-1">
+            <span class="w-3 h-3 rounded-full bg-surface-500"></span>
+            {{ repo.language }}
+          </span>
+          {% endif %}
+          <span class="flex items-center gap-1">
+            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
+            </svg>
+            {{ repo.stars }}
+          </span>
+        </div>
+      </article>
+      {% endfor %}
+    </div>
+
+    <a href="/github/starred/" class="inline-block mt-4 text-emerald-600 dark:text-emerald-400 hover:underline">
+      View all {{ githubStarred.totalCount | default(githubActivity.stars | length) }} starred repos &rarr;
+    </a>
+    {% else %}
+    <p class="text-surface-600 dark:text-surface-400">No starred repositories found.</p>
+    {% endif %}
+  </section>
+</div>
diff --git a/graph.njk b/graph.njk
new file mode 100644
index 0000000..e6ef5e6
--- /dev/null
+++ b/graph.njk
@@ -0,0 +1,18 @@
+---
+layout: layouts/base.njk
+title: Posting Activity
+permalink: /graph/
+withSidebar: true
+---
+
+<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-6">Posting Activity</h1>
+
+<p class="text-surface-600 dark:text-surface-400 mb-8">
+  A contribution-style graph showing posting frequency across all years.
+</p>
+
+{% if collections.posts and collections.posts.length %}
+  {% postGraph collections.posts, { limit: 0 } %}
+{% else %}
+  <p class="text-surface-500 dark:text-surface-400">No posts found.</p>
+{% endif %}
diff --git a/images/default-avatar.svg b/images/default-avatar.svg
new file mode 100644
index 0000000..3b15f50
--- /dev/null
+++ b/images/default-avatar.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <circle cx="50" cy="50" r="50" fill="#e4e4e7"/>
+  <circle cx="50" cy="40" r="18" fill="#a1a1aa"/>
+  <ellipse cx="50" cy="85" rx="30" ry="25" fill="#a1a1aa"/>
+</svg>
diff --git a/images/favicon.svg b/images/favicon.svg
new file mode 100644
index 0000000..c15703d
--- /dev/null
+++ b/images/favicon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <rect width="100" height="100" fill="#3b82f6"/>
+  <text x="50" y="70" font-family="Arial, sans-serif" font-size="60" font-weight="bold" text-anchor="middle" fill="white">i</text>
+</svg>
diff --git a/images/og-default.png b/images/og-default.png
new file mode 100644
index 0000000..bfaee94
Binary files /dev/null and b/images/og-default.png differ
diff --git a/images/rick.jpg b/images/rick.jpg
new file mode 100644
index 0000000..f976d6d
Binary files /dev/null and b/images/rick.jpg differ
diff --git a/index.njk b/index.njk
new file mode 100644
index 0000000..9d2a090
--- /dev/null
+++ b/index.njk
@@ -0,0 +1,8 @@
+---
+layout: layouts/home.njk
+title: Home
+eleventyImport:
+  collections:
+    - posts
+    - feed
+---
diff --git a/interactions.njk b/interactions.njk
new file mode 100644
index 0000000..206a600
--- /dev/null
+++ b/interactions.njk
@@ -0,0 +1,533 @@
+---
+layout: layouts/base.njk
+title: Interactions
+permalink: /interactions/
+---
+<div class="page-header mb-6 sm:mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Interactions</h1>
+  <p class="text-surface-600 dark:text-surface-400">Activity across the IndieWeb - both my engagement and responses to my content.</p>
+</div>
+
+<noscript>
+  <div class="p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg mb-6">
+    <p class="text-amber-800 dark:text-amber-200 text-sm">The inbound webmentions tab requires JavaScript to load data from the API. Enable JavaScript for the full interactive experience. Outbound interactions are shown below.</p>
+  </div>
+</noscript>
+
+{# Tab navigation for Outbound/Inbound #}
+<div x-data="interactionsApp()" x-init="init()">
+  {# Tab buttons #}
+  <div class="flex border-b border-surface-200 dark:border-surface-700 mb-6">
+    <button
+      @click="activeTab = 'outbound'"
+      :class="activeTab === 'outbound' ? 'border-rose-500 text-rose-600 dark:text-rose-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+      class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors">
+      My Activity
+      <span class="ml-1 text-xs text-surface-400">(outbound)</span>
+    </button>
+    <button
+      @click="activeTab = 'inbound'"
+      :class="activeTab === 'inbound' ? 'border-rose-500 text-rose-600 dark:text-rose-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+      class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors">
+      Received
+      <span class="ml-1 text-xs text-surface-400">(inbound)</span>
+      <span x-show="totalInbound > 0" x-text="totalInbound" class="ml-1 px-1.5 py-0.5 text-xs bg-rose-100 dark:bg-rose-900 text-rose-700 dark:text-rose-300 rounded-full"></span>
+    </button>
+  </div>
+
+  {# ===== OUTBOUND TAB - My Activity ===== #}
+  <div x-show="activeTab === 'outbound'" x-transition>
+    <p class="text-surface-600 dark:text-surface-400 text-sm mb-6">Content I've interacted with across the web.</p>
+
+    <div class="grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3">
+      {# Likes #}
+      <a href="/likes/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group">
+        <div class="flex items-center gap-4 mb-4">
+          <div class="p-3 bg-rose-100 dark:bg-rose-900/30 rounded-full">
+            <svg class="w-6 h-6 text-rose-500" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+            </svg>
+          </div>
+          <div>
+            <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-rose-600 dark:group-hover:text-rose-400">Likes</h2>
+            <p class="text-sm text-surface-500">{{ collections.likes.length }} item{% if collections.likes.length != 1 %}s{% endif %}</p>
+          </div>
+        </div>
+        <p class="text-surface-600 dark:text-surface-400 text-sm">Content I've appreciated across the web.</p>
+      </a>
+
+      {# Replies #}
+      <a href="/replies/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group">
+        <div class="flex items-center gap-4 mb-4">
+          <div class="p-3 bg-rose-100 dark:bg-rose-900/30 rounded-full">
+            <svg class="w-6 h-6 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
+            </svg>
+          </div>
+          <div>
+            <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-rose-600 dark:group-hover:text-rose-400">Replies</h2>
+            <p class="text-sm text-surface-500">{{ collections.replies.length }} item{% if collections.replies.length != 1 %}s{% endif %}</p>
+          </div>
+        </div>
+        <p class="text-surface-600 dark:text-surface-400 text-sm">My responses to posts across the web.</p>
+      </a>
+
+      {# Bookmarks #}
+      <a href="/bookmarks/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group">
+        <div class="flex items-center gap-4 mb-4">
+          <div class="p-3 bg-yellow-100 dark:bg-yellow-900/30 rounded-full">
+            <svg class="w-6 h-6 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"/>
+            </svg>
+          </div>
+          <div>
+            <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-amber-600 dark:group-hover:text-amber-400">Bookmarks</h2>
+            <p class="text-sm text-surface-500">{{ collections.bookmarks.length }} item{% if collections.bookmarks.length != 1 %}s{% endif %}</p>
+          </div>
+        </div>
+        <p class="text-surface-600 dark:text-surface-400 text-sm">Links I've saved for later.</p>
+      </a>
+
+      {# Reposts #}
+      <a href="/reposts/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group">
+        <div class="flex items-center gap-4 mb-4">
+          <div class="p-3 bg-rose-100 dark:bg-rose-900/30 rounded-full">
+            <svg class="w-6 h-6 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+            </svg>
+          </div>
+          <div>
+            <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-rose-600 dark:group-hover:text-rose-400">Reposts</h2>
+            <p class="text-sm text-surface-500">{{ collections.reposts.length }} item{% if collections.reposts.length != 1 %}s{% endif %}</p>
+          </div>
+        </div>
+        <p class="text-surface-600 dark:text-surface-400 text-sm">Content I've shared from others.</p>
+      </a>
+
+      {# Photos #}
+      <a href="/photos/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group">
+        <div class="flex items-center gap-4 mb-4">
+          <div class="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-full">
+            <svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+            </svg>
+          </div>
+          <div>
+            <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-purple-600 dark:group-hover:text-purple-400">Photos</h2>
+            <p class="text-sm text-surface-500">{{ collections.photos.length }} item{% if collections.photos.length != 1 %}s{% endif %}</p>
+          </div>
+        </div>
+        <p class="text-surface-600 dark:text-surface-400 text-sm">Photo posts and images.</p>
+      </a>
+    </div>
+
+    <div class="mt-12 p-6 bg-surface-100 dark:bg-surface-800/50 rounded-lg">
+      <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">About IndieWeb Interactions</h2>
+      <p class="text-surface-600 dark:text-surface-400 text-sm mb-4">
+        These pages show different types of IndieWeb interactions I've made. Each type uses specific microformat properties
+        to indicate the relationship to the original content.
+      </p>
+      <ul class="text-sm text-surface-600 dark:text-surface-400 space-y-1">
+        <li><strong>Likes</strong> use <code class="bg-surface-200 dark:bg-surface-700 px-1 rounded">u-like-of</code></li>
+        <li><strong>Replies</strong> use <code class="bg-surface-200 dark:bg-surface-700 px-1 rounded">u-in-reply-to</code></li>
+        <li><strong>Bookmarks</strong> use <code class="bg-surface-200 dark:bg-surface-700 px-1 rounded">u-bookmark-of</code></li>
+        <li><strong>Reposts</strong> use <code class="bg-surface-200 dark:bg-surface-700 px-1 rounded">u-repost-of</code></li>
+      </ul>
+    </div>
+  </div>
+
+  {# ===== INBOUND TAB - Received Webmentions ===== #}
+  <div x-show="activeTab === 'inbound'" x-transition>
+    <div class="flex items-center justify-between mb-6">
+      <p class="text-surface-600 dark:text-surface-400 text-sm">Webmentions and interactions others have made with my content.</p>
+      <button
+        @click="fetchWebmentions()"
+        :disabled="loading"
+        class="inline-flex items-center gap-2 px-3 py-1.5 text-sm bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 rounded-lg transition-colors disabled:opacity-50">
+        <svg class="w-4 h-4" :class="loading ? 'animate-spin' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+        </svg>
+        <span x-text="loading ? 'Loading...' : 'Refresh'"></span>
+      </button>
+    </div>
+
+    {# Loading state #}
+    <div x-show="loading && !webmentions.length" class="text-center py-12">
+      <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-rose-500"></div>
+      <p class="mt-4 text-surface-500">Loading webmentions...</p>
+    </div>
+
+    {# Setup required state — shown when webmentions proxy is not configured #}
+    <div x-show="notConfigured" class="p-6 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg mb-6">
+      <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-200 mb-3">Webmentions Not Configured</h3>
+      <p class="text-amber-700 dark:text-amber-300 text-sm mb-4">
+        To receive inbound webmentions, you need to set up the webmentions proxy plugin
+        (<code class="bg-amber-100 dark:bg-amber-900/40 px-1 rounded">@rmdes/indiekit-endpoint-webmentions-proxy</code>).
+      </p>
+      <ol class="text-sm text-amber-700 dark:text-amber-300 space-y-2 list-decimal list-inside">
+        <li>Register your domain at <a href="https://webmention.io" target="_blank" rel="noopener" class="underline font-medium">webmention.io</a> and get your API token</li>
+        <li>Set the <code class="bg-amber-100 dark:bg-amber-900/40 px-1 rounded">WEBMENTION_IO_TOKEN</code> environment variable</li>
+        <li>Ensure the webmentions proxy plugin is installed and configured in your Indiekit config</li>
+        <li>Restart Indiekit to apply the changes</li>
+      </ol>
+    </div>
+
+    {# Error state — only shown for real errors, not missing config #}
+    <div x-show="error && !notConfigured" class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-300 mb-6">
+      <p x-text="error"></p>
+    </div>
+
+    {# Filter by type #}
+    <div x-show="!notConfigured && (!loading || webmentions.length)" class="flex flex-wrap gap-2 mb-6">
+      <button
+        @click="filterType = 'all'"
+        :class="filterType === 'all' ? 'bg-rose-500 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300'"
+        class="px-3 py-1.5 text-sm rounded-full transition-colors">
+        All <span x-text="'(' + totalInbound + ')'" class="text-xs opacity-75"></span>
+      </button>
+      <button
+        @click="filterType = 'like-of'"
+        :class="filterType === 'like-of' ? 'bg-red-500 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300'"
+        class="px-3 py-1.5 text-sm rounded-full transition-colors">
+        ❤️ Likes <span x-text="'(' + likes.length + ')'" class="text-xs opacity-75"></span>
+      </button>
+      <button
+        @click="filterType = 'repost-of'"
+        :class="filterType === 'repost-of' ? 'bg-green-500 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300'"
+        class="px-3 py-1.5 text-sm rounded-full transition-colors">
+        🔄 Reposts <span x-text="'(' + reposts.length + ')'" class="text-xs opacity-75"></span>
+      </button>
+      <button
+        @click="filterType = 'in-reply-to'"
+        :class="filterType === 'in-reply-to' ? 'bg-sky-500 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300'"
+        class="px-3 py-1.5 text-sm rounded-full transition-colors">
+        💬 Replies <span x-text="'(' + replies.length + ')'" class="text-xs opacity-75"></span>
+      </button>
+      <button
+        @click="filterType = 'mention-of'"
+        :class="filterType === 'mention-of' ? 'bg-yellow-500 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300'"
+        class="px-3 py-1.5 text-sm rounded-full transition-colors">
+        📣 Mentions <span x-text="'(' + mentions.length + ')'" class="text-xs opacity-75"></span>
+      </button>
+    </div>
+
+    {# Webmentions list #}
+    <div x-show="!notConfigured && (!loading || webmentions.length)" class="space-y-4">
+      <template x-for="wm in paginatedWebmentions" :key="wm['wm-id']">
+        <div class="p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
+          <div class="flex gap-3">
+            {# Author avatar #}
+            <a :href="wm.author?.url || '#'" target="_blank" rel="noopener" class="flex-shrink-0">
+              <img
+                :src="wm.author?.photo || '/images/default-avatar.svg'"
+                :alt="wm.author?.name || 'Anonymous'"
+                class="w-10 h-10 rounded-full"
+                loading="lazy"
+                onerror="this.src='/images/default-avatar.svg'"
+              >
+            </a>
+
+            <div class="flex-1 min-w-0">
+              {# Header with author, type badge, and date #}
+              <div class="flex flex-wrap items-center gap-2 mb-1">
+                <a :href="wm.author?.url || '#'" target="_blank" rel="noopener" class="font-semibold text-surface-900 dark:text-surface-100 hover:underline" x-text="wm.author?.name || 'Anonymous'"></a>
+
+                {# Type badge #}
+                <span x-show="wm['wm-property'] === 'like-of'" class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 rounded-full">
+                  ❤️ liked
+                </span>
+                <span x-show="wm['wm-property'] === 'repost-of'" class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-full">
+                  🔄 reposted
+                </span>
+                <span x-show="wm['wm-property'] === 'in-reply-to'" class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-sky-100 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 rounded-full">
+                  💬 replied
+                </span>
+                <span x-show="wm['wm-property'] === 'mention-of'" class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 rounded-full">
+                  📣 mentioned
+                </span>
+                <span x-show="wm['wm-property'] === 'bookmark-of'" class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded-full">
+                  🔖 bookmarked
+                </span>
+
+                {# Platform badge (from conversations API) #}
+                <span x-show="wm.platform === 'mastodon'" class="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 rounded-full" title="Mastodon">
+                  <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>
+                </span>
+                <span x-show="wm.platform === 'bluesky'" class="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-sky-100 dark:bg-sky-900/30 text-sky-600 dark:text-sky-400 rounded-full" title="Bluesky">
+                  <svg class="w-3 h-3" viewBox="0 0 568 501" fill="currentColor"><path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"/></svg>
+                </span>
+                <span x-show="wm.platform === 'activitypub'" class="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-full" title="Fediverse (ActivityPub)">
+                  <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="19" r="2.5"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
+                </span>
+
+                <a :href="wm.url || '#'" target="_blank" rel="noopener" class="text-xs text-surface-500 hover:underline">
+                  <time :datetime="wm.published || wm['wm-received']" x-text="formatDate(wm.published || wm['wm-received'])"></time>
+                </a>
+              </div>
+
+              {# Content (for replies) #}
+              <div x-show="wm.content?.text" class="text-surface-700 dark:text-surface-300 text-sm mt-2" x-text="truncateText(wm.content?.text, 280)"></div>
+
+              {# Target URL - which of my posts this is about #}
+              <div class="mt-2 text-xs text-surface-500">
+                <span>on </span>
+                <a :href="wm['wm-target']" class="text-rose-600 dark:text-rose-400 hover:underline" x-text="formatTargetUrl(wm['wm-target'])"></a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      {# Empty state #}
+      <div x-show="!loading && filteredWebmentions.length === 0" class="text-center py-12 text-surface-500">
+        <p>No webmentions found for this filter.</p>
+      </div>
+
+      {# Pagination / Load more #}
+      <div x-show="hasMore" class="text-center pt-4">
+        <button
+          @click="loadMore()"
+          :disabled="loadingMore"
+          class="px-4 py-2 bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 rounded-lg text-sm transition-colors disabled:opacity-50">
+          <span x-text="loadingMore ? 'Loading...' : 'Load More'"></span>
+        </button>
+      </div>
+    </div>
+
+    {# Info box #}
+    <div class="mt-12 p-6 bg-surface-100 dark:bg-surface-800/50 rounded-lg">
+      <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">About Webmentions</h2>
+      <p class="text-surface-600 dark:text-surface-400 text-sm mb-4">
+        Webmentions are a W3C standard for cross-site communication. When someone likes, reposts, or replies to my content
+        from their own site (or via Bluesky/Mastodon bridges), I receive a webmention notification.
+      </p>
+      <ul class="text-sm text-surface-600 dark:text-surface-400 space-y-1">
+        <li><strong>Likes</strong> - Someone appreciated this post</li>
+        <li><strong>Reposts</strong> - Someone shared this post</li>
+        <li><strong>Replies</strong> - Someone responded to this post</li>
+        <li><strong>Mentions</strong> - Someone linked to this post</li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<script>
+function interactionsApp() {
+  return {
+    activeTab: 'inbound',
+    loading: false,
+    loadingMore: false,
+    error: null,
+    notConfigured: false,
+    webmentions: [],
+    filterType: 'all',
+    page: 0,
+    perPage: 50,
+    hasMore: true,
+    refreshInterval: null,
+
+    get likes() {
+      return this.webmentions.filter(wm => wm['wm-property'] === 'like-of');
+    },
+
+    get reposts() {
+      return this.webmentions.filter(wm => wm['wm-property'] === 'repost-of');
+    },
+
+    get replies() {
+      return this.webmentions.filter(wm => wm['wm-property'] === 'in-reply-to');
+    },
+
+    get mentions() {
+      return this.webmentions.filter(wm => wm['wm-property'] === 'mention-of');
+    },
+
+    get totalInbound() {
+      return this.webmentions.length;
+    },
+
+    get filteredWebmentions() {
+      if (this.filterType === 'all') return this.webmentions;
+      return this.webmentions.filter(wm => wm['wm-property'] === this.filterType);
+    },
+
+    get paginatedWebmentions() {
+      // Client-side pagination of filtered results
+      return this.filteredWebmentions;
+    },
+
+    async init() {
+      await this.fetchWebmentions();
+      // Auto-refresh every 5 minutes (skip if not configured)
+      if (!this.notConfigured) {
+        this.refreshInterval = setInterval(() => this.fetchWebmentions(true), 5 * 60 * 1000);
+      }
+    },
+
+    async fetchWebmentions(silent = false) {
+      if (!silent) {
+        this.loading = true;
+        this.page = 0;
+        this.webmentions = [];
+        this.hasMore = true;
+      }
+      this.error = null;
+
+      try {
+        // Fetch from both webmention-io and conversations APIs in parallel
+        const wmUrl = `/webmentions/api/mentions?per-page=${this.perPage}&page=${this.page}`;
+        const convUrl = `/conversations/api/mentions?per-page=${this.perPage}&page=${this.page}`;
+
+        const [wmResult, convResult] = await Promise.allSettled([
+          fetch(wmUrl).then(r => {
+            if (r.status === 404) return { children: [], notConfigured: true };
+            if (!r.ok) throw new Error(`HTTP ${r.status}`);
+            return r.json();
+          }),
+          fetch(convUrl).then(r => {
+            if (!r.ok) return { children: [] };
+            return r.json();
+          }).catch(() => ({ children: [] })),
+        ]);
+
+        const wmData = wmResult.status === 'fulfilled' ? wmResult.value : { children: [] };
+        const convData = convResult.status === 'fulfilled' ? convResult.value : { children: [] };
+
+        // Check if webmention-io is configured
+        if (wmData.notConfigured && (!convData.children || !convData.children.length)) {
+          this.notConfigured = true;
+          return;
+        }
+        this.notConfigured = false;
+
+        // Merge and deduplicate - conversations items (with platform field) take priority
+        const merged = this.mergeAndDeduplicate(
+          wmData.children || [],
+          convData.children || []
+        );
+
+        // Sort by date, newest first
+        merged.sort((a, b) => {
+          const dateA = new Date(a.published || a['wm-received'] || 0);
+          const dateB = new Date(b.published || b['wm-received'] || 0);
+          return dateB - dateA;
+        });
+
+        this.webmentions = merged;
+        this.hasMore = (wmData.children || []).length === this.perPage;
+      } catch (err) {
+        this.error = `Failed to load webmentions: ${err.message}`;
+        console.error('[Interactions]', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    detectPlatform(item) {
+      const source = item['wm-source'] || '';
+      const authorUrl = item.author?.url || '';
+      // Bridgy source URLs: brid.gy/{action}/{platform}/...
+      if (source.includes('brid.gy/') && source.includes('/mastodon/')) return 'mastodon';
+      if (source.includes('brid.gy/') && source.includes('/bluesky/')) return 'bluesky';
+      // Author URL heuristics
+      if (authorUrl.includes('bsky.app')) return 'bluesky';
+      if (authorUrl.includes('mstdn') || authorUrl.includes('mastodon') || authorUrl.includes('social.')) return 'mastodon';
+      return null;
+    },
+
+    mergeAndDeduplicate(wmItems, convItems) {
+      // Build a Set of source URLs from conversations for dedup
+      const convUrls = new Set(convItems.map(c => c.url).filter(Boolean));
+      const seen = new Set();
+      const result = [];
+
+      // Add all conversations items first (they have richer metadata)
+      for (const item of convItems) {
+        const key = item['wm-id'] || item.url;
+        if (key && !seen.has(key)) {
+          seen.add(key);
+          result.push(item);
+        }
+      }
+
+      // Add webmention-io items that aren't duplicated by conversations
+      for (const item of wmItems) {
+        const wmKey = item['wm-id'];
+        if (seen.has(wmKey)) continue;
+
+        // Also check if this webmention's source URL matches a conversations item
+        // (same interaction from Bridgy webmention AND direct poll)
+        if (item.url && convUrls.has(item.url)) continue;
+
+        // Infer platform from Bridgy source URL or author URL
+        if (!item.platform) {
+          const detected = this.detectPlatform(item);
+          if (detected) item.platform = detected;
+        }
+
+        seen.add(wmKey);
+        result.push(item);
+      }
+
+      return result;
+    },
+
+    async loadMore() {
+      this.loadingMore = true;
+      this.page++;
+
+      try {
+        const wmUrl = `/webmentions/api/mentions?per-page=${this.perPage}&page=${this.page}`;
+        const convUrl = `/conversations/api/mentions?per-page=${this.perPage}&page=${this.page}`;
+
+        const [wmResult, convResult] = await Promise.allSettled([
+          fetch(wmUrl).then(r => r.ok ? r.json() : { children: [] }),
+          fetch(convUrl).then(r => r.ok ? r.json() : { children: [] }).catch(() => ({ children: [] })),
+        ]);
+
+        const wmData = wmResult.status === 'fulfilled' ? wmResult.value : { children: [] };
+        const convData = convResult.status === 'fulfilled' ? convResult.value : { children: [] };
+
+        const merged = this.mergeAndDeduplicate(
+          wmData.children || [],
+          convData.children || []
+        );
+
+        this.webmentions = [...this.webmentions, ...merged];
+        this.hasMore = (wmData.children || []).length === this.perPage;
+      } catch (err) {
+        this.error = `Failed to load more: ${err.message}`;
+      } finally {
+        this.loadingMore = false;
+      }
+    },
+
+    formatDate(dateStr) {
+      if (!dateStr) return '';
+      const date = new Date(dateStr);
+      return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+    },
+
+    truncateText(text, maxLen = 280) {
+      if (!text) return '';
+      if (text.length <= maxLen) return text;
+      return text.slice(0, maxLen).trim() + '...';
+    },
+
+    formatTargetUrl(url) {
+      if (!url) return '';
+      try {
+        const u = new URL(url);
+        // Return just the pathname, trimmed
+        let path = u.pathname;
+        if (path.length > 50) {
+          path = path.slice(0, 47) + '...';
+        }
+        return path || '/';
+      } catch {
+        return url;
+      }
+    }
+  };
+}
+</script>
diff --git a/interactive/architecture.html b/interactive/architecture.html
new file mode 100644
index 0000000..7062ece
--- /dev/null
+++ b/interactive/architecture.html
@@ -0,0 +1,1162 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Indiekit Architecture Guide</title>
+<style>
+  :root {
+    --bg: #0d1117;
+    --bg-card: #161b22;
+    --bg-inner: #1c2128;
+    --border: #30363d;
+    --border-light: #21262d;
+    --text: #e6edf3;
+    --text-dim: #8b949e;
+    --text-muted: #484f58;
+    --blue: #58a6ff;
+    --green: #3fb950;
+    --orange: #f0883e;
+    --red: #f85149;
+    --purple: #d2a8ff;
+    --pink: #db61a2;
+    --yellow: #d29922;
+    --cyan: #79c0ff;
+    --teal: #7ee787;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+    min-height: 100vh;
+  }
+
+  /* Navigation */
+  nav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: var(--bg-card);
+    border-bottom: 1px solid var(--border);
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+    gap: 0;
+  }
+  .nav-brand {
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--text);
+    padding: 12px 16px 12px 0;
+    border-right: 1px solid var(--border);
+    margin-right: 4px;
+    white-space: nowrap;
+  }
+  .nav-tab {
+    padding: 12px 16px;
+    font-size: 13px;
+    color: var(--text-dim);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all .15s;
+    white-space: nowrap;
+  }
+  .nav-tab:hover { color: var(--text); }
+  .nav-tab.active {
+    color: var(--text);
+    border-bottom-color: var(--orange);
+    font-weight: 500;
+  }
+
+  /* Page container */
+  .page {
+    display: none;
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 40px 24px 80px;
+  }
+  .page.active { display: block; }
+
+  /* Typography */
+  .page-title {
+    font-size: 28px;
+    font-weight: 700;
+    margin-bottom: 8px;
+    color: var(--text);
+  }
+  .page-subtitle {
+    font-size: 15px;
+    color: var(--text-dim);
+    margin-bottom: 40px;
+    line-height: 1.5;
+    max-width: 720px;
+  }
+  .section-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 48px 0 16px;
+    color: var(--text);
+  }
+  .section-title:first-of-type { margin-top: 0; }
+  .section-desc {
+    font-size: 14px;
+    color: var(--text-dim);
+    margin-bottom: 24px;
+    line-height: 1.5;
+    max-width: 720px;
+  }
+
+  /* Diagram boxes */
+  .diagram {
+    position: relative;
+    padding: 20px 0;
+  }
+
+  .box {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 16px 20px;
+    border-left: 3px solid var(--border);
+  }
+  .box .box-label {
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: .6px;
+    color: var(--text-muted);
+    margin-bottom: 6px;
+  }
+  .box .box-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 4px;
+  }
+  .box .box-desc {
+    font-size: 13px;
+    color: var(--text-dim);
+    line-height: 1.4;
+  }
+  .box .box-detail {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-top: 6px;
+    font-family: "SFMono-Regular", Consolas, monospace;
+  }
+
+  /* Border colors by category */
+  .box.core { border-left-color: var(--blue); }
+  .box.endpoint { border-left-color: var(--green); }
+  .box.social { border-left-color: var(--red); }
+  .box.aggregator { border-left-color: var(--orange); }
+  .box.syndicator { border-left-color: var(--pink); }
+  .box.deploy { border-left-color: var(--text-dim); }
+  .box.theme { border-left-color: var(--teal); }
+  .box.storage { border-left-color: var(--yellow); }
+  .box.site { border-left-color: var(--purple); }
+  .box.posttype { border-left-color: var(--cyan); }
+
+  /* Flow layout: vertical pipeline */
+  .flow-vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0;
+  }
+  .flow-vertical .box {
+    width: 100%;
+    max-width: 560px;
+  }
+  .flow-arrow {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 6px 0;
+    color: var(--text-muted);
+    font-size: 12px;
+    gap: 2px;
+  }
+  .flow-arrow .arrow-line {
+    width: 2px;
+    height: 16px;
+    background: var(--border);
+  }
+  .flow-arrow .arrow-label {
+    font-size: 11px;
+    color: var(--text-muted);
+    font-family: "SFMono-Regular", Consolas, monospace;
+    padding: 2px 8px;
+  }
+  .flow-arrow .arrow-head {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 6px solid var(--border);
+  }
+
+  /* Flow split: horizontal branches from center */
+  .flow-split {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin: 0;
+    width: 100%;
+  }
+  .flow-split .branch {
+    flex: 1;
+    max-width: 340px;
+  }
+  .flow-split .branch .box { width: 100%; }
+
+  /* Grid layout for plugin lists */
+  .plugin-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 12px;
+    margin-bottom: 32px;
+  }
+
+  /* Compact plugin card */
+  .plugin-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 12px 16px;
+    border-left: 3px solid var(--border);
+  }
+  .plugin-card .pc-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 3px;
+  }
+  .plugin-card .pc-pkg {
+    font-size: 11px;
+    color: var(--text-muted);
+    font-family: "SFMono-Regular", Consolas, monospace;
+    margin-bottom: 4px;
+  }
+  .plugin-card .pc-desc {
+    font-size: 12px;
+    color: var(--text-dim);
+    line-height: 1.4;
+  }
+  .plugin-card .pc-badge {
+    display: inline-block;
+    font-size: 10px;
+    padding: 1px 6px;
+    border-radius: 3px;
+    margin-top: 6px;
+    border: 1px solid;
+  }
+  .badge-fork { color: var(--orange); border-color: var(--orange); }
+  .badge-custom { color: var(--green); border-color: var(--green); }
+  .badge-sync { color: var(--cyan); border-color: var(--cyan); }
+
+  .plugin-card.endpoint { border-left-color: var(--green); }
+  .plugin-card.social { border-left-color: var(--red); }
+  .plugin-card.aggregator { border-left-color: var(--orange); }
+  .plugin-card.syndicator { border-left-color: var(--pink); }
+  .plugin-card.site { border-left-color: var(--purple); }
+  .plugin-card.posttype { border-left-color: var(--cyan); }
+
+  /* Container diagram for deployment */
+  .container-diagram {
+    background: var(--bg-inner);
+    border: 2px solid var(--border);
+    border-radius: 12px;
+    padding: 24px;
+    position: relative;
+  }
+  .container-diagram .cd-label {
+    position: absolute;
+    top: -11px;
+    left: 20px;
+    background: var(--bg-inner);
+    padding: 0 8px;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-dim);
+    text-transform: uppercase;
+    letter-spacing: .5px;
+  }
+  .container-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  /* Process table */
+  .process-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+    margin-top: 12px;
+  }
+  .process-table th {
+    text-align: left;
+    padding: 8px 12px;
+    background: var(--bg-inner);
+    color: var(--text-dim);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: .5px;
+    border-bottom: 1px solid var(--border);
+  }
+  .process-table td {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--border-light);
+    color: var(--text);
+  }
+  .process-table td:nth-child(2) {
+    color: var(--text-dim);
+  }
+  .process-table td:nth-child(3) {
+    font-family: "SFMono-Regular", Consolas, monospace;
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+
+  /* Convention list */
+  .convention-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .convention-item {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 14px 18px;
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+  }
+  .convention-item .ci-key {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--blue);
+    min-width: 100px;
+    flex-shrink: 0;
+  }
+  .convention-item .ci-val {
+    font-size: 13px;
+    color: var(--text-dim);
+    line-height: 1.4;
+  }
+  .convention-item code {
+    font-family: "SFMono-Regular", Consolas, monospace;
+    font-size: 12px;
+    background: var(--bg-inner);
+    padding: 1px 5px;
+    border-radius: 3px;
+    color: var(--text);
+  }
+
+  /* Horizontal flow for syndication */
+  .flow-horizontal {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    overflow-x: auto;
+    padding: 8px 0;
+  }
+  .flow-horizontal .box {
+    min-width: 200px;
+    flex-shrink: 0;
+  }
+  .h-arrow {
+    display: flex;
+    align-items: center;
+    padding: 0 4px;
+    flex-shrink: 0;
+  }
+  .h-arrow .ha-line {
+    width: 24px;
+    height: 2px;
+    background: var(--border);
+  }
+  .h-arrow .ha-head {
+    width: 0;
+    height: 0;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 6px solid var(--border);
+  }
+  .h-arrow .ha-label {
+    font-size: 10px;
+    color: var(--text-muted);
+    position: absolute;
+    margin-top: -18px;
+    white-space: nowrap;
+    font-family: "SFMono-Regular", Consolas, monospace;
+  }
+
+  /* Targets list inside box */
+  .target-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 8px;
+  }
+  .target-tag {
+    font-size: 11px;
+    padding: 3px 8px;
+    border-radius: 4px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    color: var(--text-dim);
+  }
+
+  /* Data sources grid */
+  .data-sources {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+  .data-source {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 14px 16px;
+  }
+  .data-source .ds-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 6px;
+  }
+  .data-source .ds-list {
+    font-size: 11px;
+    color: var(--text-muted);
+    font-family: "SFMono-Regular", Consolas, monospace;
+    line-height: 1.6;
+  }
+
+  /* File tree */
+  .file-tree {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 16px 20px;
+    font-family: "SFMono-Regular", Consolas, monospace;
+    font-size: 12px;
+    line-height: 1.8;
+    color: var(--text-dim);
+  }
+  .file-tree .ft-dir { color: var(--blue); }
+  .file-tree .ft-file { color: var(--text-dim); }
+  .file-tree .ft-comment { color: var(--text-muted); }
+  .file-tree .ft-symlink { color: var(--green); }
+
+  /* MongoDB collections list */
+  .mongo-collections {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 8px;
+  }
+  .mongo-coll {
+    font-size: 11px;
+    font-family: "SFMono-Regular", Consolas, monospace;
+    padding: 3px 8px;
+    border-radius: 4px;
+    background: var(--bg);
+    border: 1px solid var(--border-light);
+    color: var(--text-muted);
+  }
+
+  /* Summary stat boxes */
+  .stats-row {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+    margin-bottom: 40px;
+  }
+  .stat-box {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 20px;
+    text-align: center;
+  }
+  .stat-box .stat-num {
+    font-size: 32px;
+    font-weight: 700;
+    color: var(--text);
+  }
+  .stat-box .stat-label {
+    font-size: 12px;
+    color: var(--text-dim);
+    margin-top: 4px;
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .stats-row { grid-template-columns: repeat(2, 1fr); }
+    .plugin-grid { grid-template-columns: 1fr; }
+    .data-sources { grid-template-columns: 1fr; }
+    .flow-split { flex-direction: column; align-items: center; }
+    .flow-horizontal { flex-direction: column; }
+    .h-arrow { transform: rotate(90deg); }
+    nav { overflow-x: auto; }
+  }
+
+  /* Category heading with dot */
+  .cat-heading {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 32px 0 16px;
+  }
+  .cat-heading .cat-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 3px;
+    flex-shrink: 0;
+  }
+  .cat-heading h3 {
+    font-size: 16px;
+    font-weight: 600;
+  }
+  .cat-heading .cat-count {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-left: auto;
+  }
+</style>
+</head>
+<body>
+
+<nav id="nav">
+  <span class="nav-brand">Indiekit</span>
+</nav>
+
+<div id="pages"></div>
+
+<script>
+// ── PAGE DATA ─────────────────────────────────────────────
+// Each page is defined as structured data, rendered with safe DOM methods.
+
+var pages = [
+  {
+    id: 'overview',
+    tab: 'Overview',
+    title: 'Indiekit System Architecture',
+    subtitle: 'A 30+ plugin personal web platform built on Node.js, Express, and MongoDB. It publishes content, federates with the fediverse, syndicates to social networks, aggregates external activity, and deploys as a static site via Eleventy.',
+    render: renderOverview,
+  },
+  {
+    id: 'content',
+    tab: 'Content Pipeline',
+    title: 'Content Pipeline',
+    subtitle: 'How a post goes from creation to a published static page. The Micropub protocol receives content, a preset formats it, a store writes it, Eleventy builds it, and nginx serves it.',
+    render: renderContentPipeline,
+  },
+  {
+    id: 'plugins',
+    tab: 'Plugins',
+    title: 'Plugin Ecosystem',
+    subtitle: 'All 30+ @rmdes/* plugins organized by function. Each plugin follows the Indiekit plugin API: ESM modules with standardized class exports, no build step required.',
+    render: renderPlugins,
+  },
+  {
+    id: 'federation',
+    tab: 'Federation & Syndication',
+    title: 'Federation & Syndication',
+    subtitle: 'How content reaches other platforms. ActivityPub for the fediverse, syndicators for Bluesky/Mastodon/LinkedIn, webmentions for the IndieWeb.',
+    render: renderFederation,
+  },
+  {
+    id: 'aggregation',
+    tab: 'Aggregation',
+    title: 'Content Aggregation',
+    subtitle: 'How external activity flows into the site. Background processes poll external services, store data in MongoDB, and the Eleventy theme fetches it via plugin APIs at build time.',
+    render: renderAggregation,
+  },
+  {
+    id: 'deployment',
+    tab: 'Deployment',
+    title: 'Deployment Architecture',
+    subtitle: 'How the entire system runs inside a single Cloudron container at rmendes.net. Three processes (nginx, Indiekit, Eleventy) coordinated with atomic release swaps.',
+    render: renderDeployment,
+  },
+];
+
+// ── DOM HELPERS ───────────────────────────────────────────
+
+function el(tag, attrs, children) {
+  var e = document.createElement(tag);
+  if (attrs) {
+    for (var k in attrs) {
+      if (k === 'className') e.className = attrs[k];
+      else if (k === 'textContent') e.textContent = attrs[k];
+      else e.setAttribute(k, attrs[k]);
+    }
+  }
+  if (children) {
+    if (!Array.isArray(children)) children = [children];
+    for (var i = 0; i < children.length; i++) {
+      if (!children[i]) continue;
+      if (typeof children[i] === 'string') e.appendChild(document.createTextNode(children[i]));
+      else e.appendChild(children[i]);
+    }
+  }
+  return e;
+}
+
+function box(cls, label, title, desc, detail) {
+  var items = [];
+  if (label) items.push(el('div', { className: 'box-label', textContent: label }));
+  if (title) items.push(el('div', { className: 'box-title', textContent: title }));
+  if (desc) items.push(el('div', { className: 'box-desc', textContent: desc }));
+  if (detail) items.push(el('div', { className: 'box-detail', textContent: detail }));
+  return el('div', { className: 'box ' + cls }, items);
+}
+
+function arrow(label) {
+  var items = [el('div', { className: 'arrow-line' })];
+  if (label) items.push(el('div', { className: 'arrow-label', textContent: label }));
+  items.push(el('div', { className: 'arrow-line' }));
+  items.push(el('div', { className: 'arrow-head' }));
+  return el('div', { className: 'flow-arrow' }, items);
+}
+
+function hArrow() {
+  return el('div', { className: 'h-arrow' }, [
+    el('div', { className: 'ha-line' }),
+    el('div', { className: 'ha-head' }),
+  ]);
+}
+
+function pluginCard(cls, name, pkg, desc, badges) {
+  var items = [];
+  items.push(el('div', { className: 'pc-name', textContent: name }));
+  if (pkg) items.push(el('div', { className: 'pc-pkg', textContent: pkg }));
+  items.push(el('div', { className: 'pc-desc', textContent: desc }));
+  if (badges) {
+    for (var i = 0; i < badges.length; i++) {
+      items.push(el('span', { className: 'pc-badge badge-' + badges[i][0], textContent: badges[i][1] }));
+    }
+  }
+  return el('div', { className: 'plugin-card ' + cls }, items);
+}
+
+function sectionTitle(text) { return el('h2', { className: 'section-title', textContent: text }); }
+function sectionDesc(text) { return el('p', { className: 'section-desc', textContent: text }); }
+
+// ── PAGE: OVERVIEW ────────────────────────────────────────
+
+function renderOverview(page) {
+  // Stats
+  var stats = el('div', { className: 'stats-row' }, [
+    statBox('30+', 'Plugins'),
+    statBox('4', 'Syndicators'),
+    statBox('6', 'Aggregators'),
+    statBox('11', 'Background Jobs'),
+  ]);
+  page.appendChild(stats);
+
+  page.appendChild(sectionTitle('What Indiekit Does'));
+  page.appendChild(sectionDesc('Indiekit is a Node.js server that turns your content into a personal website. You write posts through the Micropub protocol, and Indiekit handles everything else: formatting, publishing, syndicating to social networks, and federating with the fediverse.'));
+
+  // The five plugin types
+  page.appendChild(sectionTitle('Five Plugin Types'));
+  page.appendChild(sectionDesc('Every piece of functionality is a plugin. The core server provides five extension points:'));
+
+  var apiGrid = el('div', { className: 'plugin-grid' }, [
+    box('core', 'addEndpoint()', 'Endpoints', 'HTTP routes that handle requests. Content creation, admin UI, social readers, content aggregation, and site management.', '18 endpoint plugins'),
+    box('syndicator', 'addSyndicator()', 'Syndicators', 'Cross-post content to external platforms. Each syndicator knows how to format and deliver posts to its target.', '4 syndicator plugins'),
+    box('posttype', 'addPostType()', 'Post Types', 'Define content types with their own properties, permalink patterns, and template associations.', '1 custom post type'),
+    box('posttype', 'addPreset()', 'Presets', 'Static site generator integration. Converts internal JF2 data to the format your SSG expects (e.g., YAML frontmatter for Eleventy).', '1 preset plugin'),
+    box('storage', 'addStore()', 'Stores', 'Storage backend for content files. Default: write .md files to the filesystem. Could also be GitHub, GitLab, etc.', '@indiekit/store-file-system'),
+  ]);
+  page.appendChild(apiGrid);
+
+  // High-level data flow
+  page.appendChild(sectionTitle('High-Level Data Flow'));
+  page.appendChild(sectionDesc('The system has two main directions: outbound (publishing and syndicating your content) and inbound (aggregating external activity and receiving mentions).'));
+
+  var outbound = el('div', { className: 'flow-vertical' }, [
+    box('core', 'OUTBOUND', 'You write a post', 'Using a Micropub client (Quill, Indigenous) or the admin UI at /posts.'),
+    arrow('Micropub API'),
+    box('endpoint', null, 'Indiekit processes it', 'Auth check, content formatting via preset, file storage, MongoDB metadata.'),
+    arrow('file watcher'),
+    box('deploy', null, 'Eleventy builds the site', 'Static HTML generated, atomic release swap, Pagefind indexing.'),
+    arrow('syndication trigger'),
+    box('syndicator', null, 'Syndicators distribute it', 'Bluesky, Mastodon, LinkedIn, IndieNews. Plus ActivityPub to the fediverse.'),
+  ]);
+  page.appendChild(outbound);
+
+  page.appendChild(el('div', { style: 'height: 32px' }));
+
+  var inbound = el('div', { className: 'flow-vertical' }, [
+    box('aggregator', 'INBOUND', 'External services have activity', 'GitHub commits, Last.fm scrobbles, Funkwhale plays, YouTube videos, RSS feeds, podcasts.'),
+    arrow('background sync'),
+    box('storage', null, 'Stored in MongoDB', 'Each aggregator plugin runs on a schedule, fetches new data, and stores it in its own collections.'),
+    arrow('Eleventy _data/*.js'),
+    box('theme', null, 'Theme fetches via plugin APIs', 'At build time, data files call plugin API endpoints to get the latest aggregated content.'),
+  ]);
+  page.appendChild(inbound);
+}
+
+function statBox(num, label) {
+  return el('div', { className: 'stat-box' }, [
+    el('div', { className: 'stat-num', textContent: num }),
+    el('div', { className: 'stat-label', textContent: label }),
+  ]);
+}
+
+// ── PAGE: CONTENT PIPELINE ────────────────────────────────
+
+function renderContentPipeline(page) {
+  page.appendChild(sectionTitle('The Publishing Pipeline'));
+  page.appendChild(sectionDesc('Every post follows the same path, from Micropub request to served static page. Here is each step:'));
+
+  var pipeline = el('div', { className: 'flow-vertical' }, [
+    box('core', 'STEP 1', 'Micropub Client', 'User writes content in Quill, Indigenous, or the admin UI at /posts. Sends POST /micropub with JF2 content.', 'POST /micropub { type: "entry", content: "Hello world" }'),
+    arrow('HTTP POST'),
+    box('endpoint', 'STEP 2', 'endpoint-auth', 'Validates IndieAuth bearer token. Checks scopes (create, update, delete). JWT-based for background processes.', '/auth/token verification'),
+    arrow('authenticated request'),
+    box('endpoint', 'STEP 3', 'endpoint-micropub', 'Processes the Micropub request. Determines post type, applies template, preserves mp-syndicate-to targets. Fork adds type-based post discovery.', 'create / update / delete operations'),
+    arrow('JF2 content'),
+    box('posttype', 'STEP 4', 'preset-eleventy', 'Converts JF2 to YAML frontmatter + Markdown body. Generates permalink for the post type (/articles/2024/slug, /notes/abc123). Fork ensures ALL post types get permalinks.', 'JF2 \u2192 YAML+MD'),
+    arrow('formatted .md file'),
+    box('storage', 'STEP 5', 'store-file-system + MongoDB', 'Writes the .md file to /app/data/content/{type}/. Stores post metadata in MongoDB posts collection for admin queries.'),
+    arrow('file watcher detects change'),
+    box('deploy', 'STEP 6', 'Eleventy', 'File watcher triggers a build. Eleventy processes all content with the theme templates. Full build, then atomic release swap: new build directory symlinked, zero-downtime.', 'build \u2192 /app/data/releases/TIMESTAMP/ \u2192 symlink /app/data/site'),
+    arrow('static HTML ready'),
+    box('deploy', 'STEP 7', 'nginx', 'Serves the static site on :3000. Static files from /app/data/site (symlink), media from /app/data/content/media/. Proxies /admin and plugin routes to Indiekit :8080.', 'rmendes.net \u2192 nginx :3000'),
+  ]);
+  page.appendChild(pipeline);
+
+  page.appendChild(sectionTitle('After Publishing'));
+  page.appendChild(sectionDesc('Once the post is created, two things happen in the background:'));
+
+  var afterSplit = el('div', { className: 'flow-split' }, [
+    el('div', { className: 'branch' }, [
+      box('syndicator', 'EVERY 2 MIN', 'Syndication Poller', 'endpoint-syndicate checks for posts with pending mp-syndicate-to targets. Triggers each syndicator with 2s delay between them.'),
+      el('div', { style: 'height: 12px' }),
+      box('syndicator', null, 'Syndicators fire', 'Bluesky (AT Protocol), Mastodon (API), LinkedIn (REST), IndieNews (webmention). Each formats and delivers the post natively.'),
+    ]),
+    el('div', { className: 'branch' }, [
+      box('endpoint', 'EVERY 5 MIN', 'Webmention Sender', 'Scans post content for URLs. Sends webmentions to any linked page that advertises a webmention endpoint.'),
+      el('div', { style: 'height: 12px' }),
+      box('social', null, 'ActivityPub', 'If enabled, converts JF2 to ActivityStreams and delivers to follower inboxes via Fedify 2.0.'),
+    ]),
+  ]);
+  page.appendChild(afterSplit);
+}
+
+// ── PAGE: PLUGINS ─────────────────────────────────────────
+
+function renderPlugins(page) {
+  var categories = [
+    {
+      name: 'Core IndieWeb Endpoints', dot: 'var(--green)', count: 6,
+      desc: 'The essential IndieWeb building blocks: authentication, content creation, post management, syndication triggers, and webmentions.',
+      plugins: [
+        ['endpoint', 'endpoint-auth', '@rmdes/indiekit-endpoint-auth', 'IndieAuth with JWT, PKCE, OAuth. Guards all admin routes.', [['fork', 'fork']]],
+        ['endpoint', 'endpoint-micropub', '@rmdes/indiekit-endpoint-micropub', 'Content creation via Micropub. Create/update/delete posts.', [['fork', 'fork']]],
+        ['endpoint', 'endpoint-posts', '@rmdes/indiekit-endpoint-posts', 'Admin post management UI at /posts.', [['fork', 'fork']]],
+        ['endpoint', 'endpoint-syndicate', '@rmdes/indiekit-endpoint-syndicate', 'Syndication trigger. Polls every 2 min, batch mode with 2s delay.', [['fork', 'fork']]],
+        ['endpoint', 'webmention.io proxy', '@rmdes/indiekit-endpoint-webmentions-proxy', 'Proxies webmention.io API with server-side auth. Polls every 15 min.', [['custom', 'custom']]],
+        ['endpoint', 'webmention-sender', '@rmdes/indiekit-endpoint-webmention-sender', 'Sends outbound webmentions to linked URLs. Runs every 5 min.', [['custom', 'custom']]],
+      ]
+    },
+    {
+      name: 'Social & Federation', dot: 'var(--red)', count: 3,
+      desc: 'Connect to the broader social web: full fediverse federation, social feed reading, and blog aggregation.',
+      plugins: [
+        ['social', 'ActivityPub', '@rmdes/indiekit-endpoint-activitypub', 'Full fediverse federation via Fedify 2.0. Outbound posts, inbound interactions, timeline reader, composer. 13 MongoDB collections.', [['custom', 'custom']]],
+        ['social', 'Microsub', '@rmdes/indiekit-endpoint-microsub', 'Social reader + feed aggregator. Channels, subscriptions, adaptive polling (1min to 17hr tiers). Compose via Micropub.', [['custom', 'custom']]],
+        ['social', 'Blogroll', '@rmdes/indiekit-endpoint-blogroll', 'Blog aggregation from OPML, Microsub, and FeedLand. Admin UI for managing blogs. Syncs hourly.', [['custom', 'custom']]],
+      ]
+    },
+    {
+      name: 'Content Aggregation', dot: 'var(--orange)', count: 6,
+      desc: 'Pull in activity from external platforms. Each runs on a background schedule, stores data in MongoDB, and exposes an API for the theme.',
+      plugins: [
+        ['aggregator', 'RSS', '@rmdes/indiekit-endpoint-rss', 'RSS/Atom/JSON feed aggregator. Fetches every 15 min.', [['custom', 'custom'], ['sync', 'every 15m']]],
+        ['aggregator', 'Podroll', '@rmdes/indiekit-endpoint-podroll', 'Podcast aggregation from FreshRSS. OPML sidebar.', [['custom', 'custom'], ['sync', 'every 15m']]],
+        ['aggregator', 'GitHub', '@rmdes/indiekit-endpoint-github', 'GitHub activity: commits, stars, contributions, featured repos.', [['custom', 'custom']]],
+        ['aggregator', 'Funkwhale', '@rmdes/indiekit-endpoint-funkwhale', 'Funkwhale listening activity: history, favorites, statistics.', [['custom', 'custom'], ['sync', 'every 5m']]],
+        ['aggregator', 'Last.fm', '@rmdes/indiekit-endpoint-lastfm', 'Last.fm scrobbles: listening history, loved tracks, statistics.', [['custom', 'custom'], ['sync', 'every 5m']]],
+        ['aggregator', 'YouTube', '@rmdes/indiekit-endpoint-youtube', 'YouTube channel display: latest videos, live streaming status.', [['custom', 'custom']]],
+      ]
+    },
+    {
+      name: 'Site Management', dot: 'var(--purple)', count: 3,
+      desc: 'Tools for managing the site itself: homepage layout, CV, and OAuth token handling.',
+      plugins: [
+        ['site', 'Homepage Builder', '@rmdes/indiekit-endpoint-homepage', 'Drag-drop homepage sections. Discovers content from CV, GitHub, Funkwhale, Last.fm, Blogroll, Podroll, YouTube, Microsub.', [['custom', 'custom']]],
+        ['site', 'CV', '@rmdes/indiekit-endpoint-cv', 'CV/resume management with 5 sections. Data in MongoDB cvData collection.', [['custom', 'custom']]],
+        ['site', 'LinkedIn OAuth', '@rmdes/indiekit-endpoint-linkedin', 'LinkedIn OAuth token management. Provides access tokens to the LinkedIn syndicator.', [['custom', 'custom']]],
+      ]
+    },
+    {
+      name: 'Syndicators', dot: 'var(--pink)', count: 4,
+      desc: 'Cross-post content to external platforms. Triggered by endpoint-syndicate after a Micropub post.',
+      plugins: [
+        ['syndicator', 'Bluesky', '@rmdes/indiekit-syndicator-bluesky', 'AT Protocol syndication. Native likes/reposts, OG card embeds.', [['custom', 'custom']]],
+        ['syndicator', 'Mastodon', '@rmdes/indiekit-syndicator-mastodon', 'Mastodon API syndication. Native favorites/reblogs.', [['custom', 'custom']]],
+        ['syndicator', 'LinkedIn', '@rmdes/indiekit-syndicator-linkedin', 'LinkedIn REST API. Posts articles and notes. Requires token from endpoint-linkedin.', [['custom', 'custom']]],
+        ['syndicator', 'IndieNews', '@rmdes/indiekit-syndicator-indienews', 'Webmention-based syndication to news.indieweb.org. No API key needed.', [['custom', 'custom']]],
+      ]
+    },
+    {
+      name: 'Post Types & Presets', dot: 'var(--cyan)', count: 2,
+      desc: 'Content type definitions and static site generator integrations.',
+      plugins: [
+        ['posttype', 'post-type-page', '@rmdes/indiekit-post-type-page', 'Page post type. Creates root-level slash pages: /about, /now, /uses.', [['custom', 'custom']]],
+        ['posttype', 'preset-eleventy', '@rmdes/indiekit-preset-eleventy', 'Eleventy-compatible JF2-to-YAML frontmatter + permalink generation for ALL post types.', [['fork', 'fork']]],
+      ]
+    },
+  ];
+
+  for (var c = 0; c < categories.length; c++) {
+    var cat = categories[c];
+    var heading = el('div', { className: 'cat-heading' }, [
+      el('div', { className: 'cat-dot', style: 'background:' + cat.dot }),
+      el('h3', { textContent: cat.name }),
+      el('span', { className: 'cat-count', textContent: cat.count + ' plugins' }),
+    ]);
+    page.appendChild(heading);
+    page.appendChild(sectionDesc(cat.desc));
+
+    var grid = el('div', { className: 'plugin-grid' });
+    for (var p = 0; p < cat.plugins.length; p++) {
+      var pl = cat.plugins[p];
+      grid.appendChild(pluginCard(pl[0], pl[1], pl[2], pl[3], pl[4]));
+    }
+    page.appendChild(grid);
+  }
+}
+
+// ── PAGE: FEDERATION & SYNDICATION ────────────────────────
+
+function renderFederation(page) {
+  page.appendChild(sectionTitle('Three Ways Out'));
+  page.appendChild(sectionDesc('When you publish a post, it can reach three different networks: the fediverse (ActivityPub), social platforms (syndicators), and the IndieWeb (webmentions).'));
+
+  // Syndication flow
+  page.appendChild(sectionTitle('Syndication: Cross-Posting to Platforms'));
+
+  var syndFlow = el('div', { className: 'flow-vertical' }, [
+    box('endpoint', 'TRIGGER', 'endpoint-syndicate', 'Polls every 2 minutes. Finds posts with pending mp-syndicate-to targets. Processes them in batch mode with 2-second delay between each syndicator.'),
+    arrow('for each target'),
+    el('div', { className: 'flow-split' }, [
+      el('div', { className: 'branch' }, [
+        pluginCard('syndicator', 'Bluesky', null, 'AT Protocol. Creates posts with native rich text facets, OG card embeds. Supports external likes and reposts.'),
+      ]),
+      el('div', { className: 'branch' }, [
+        pluginCard('syndicator', 'Mastodon', null, 'Mastodon API. Creates toots with native favorites and reblogs. Supports external interactions.'),
+      ]),
+    ]),
+    el('div', { style: 'height: 8px' }),
+    el('div', { className: 'flow-split' }, [
+      el('div', { className: 'branch' }, [
+        pluginCard('syndicator', 'LinkedIn', null, 'REST API. Posts articles and notes. Requires OAuth token from endpoint-linkedin.'),
+      ]),
+      el('div', { className: 'branch' }, [
+        pluginCard('syndicator', 'IndieNews', null, 'Webmention-based. Submits to news.indieweb.org. No API key needed \u2014 uses standard webmention protocol.'),
+      ]),
+    ]),
+  ]);
+  page.appendChild(syndFlow);
+
+  // ActivityPub
+  page.appendChild(sectionTitle('ActivityPub: Fediverse Federation'));
+  page.appendChild(sectionDesc('Full bidirectional federation using Fedify 2.0. Your site becomes a fediverse actor that can be followed from Mastodon, Pleroma, Misskey, etc.'));
+
+  var apFlow = el('div', { className: 'flow-split' }, [
+    el('div', { className: 'branch' }, [
+      box('social', 'OUTBOUND', 'Publishing to the Fediverse', 'Post created \u2192 JF2 converted to ActivityStreams \u2192 ctx.sendActivity() delivers to all follower inboxes.'),
+      el('div', { style: 'height: 12px' }),
+      box('social', 'READER', 'Timeline & Compose', 'Follow accounts \u2192 their posts arrive in ap_timeline \u2192 reader UI with compose, like, boost, follow.'),
+    ]),
+    el('div', { className: 'branch' }, [
+      box('social', 'INBOUND', 'Receiving from the Fediverse', 'Remote servers POST to inbox \u2192 Fedify routes to handlers \u2192 Follow, Like, Announce, Create, Delete \u2192 MongoDB.'),
+      el('div', { style: 'height: 12px' }),
+      box('social', 'BRIDGE', 'Express \u2194 Fedify', 'Custom bridge (not @fedify/express due to mount path issue). Reconstructs req.originalUrl and POST bodies.'),
+    ]),
+  ]);
+  page.appendChild(apFlow);
+
+  page.appendChild(el('div', { style: 'height: 16px' }));
+  page.appendChild(sectionDesc('ActivityPub endpoints:'));
+
+  var apEndpoints = el('div', { className: 'plugin-grid' }, [
+    box('social', 'PUBLIC', 'Discovery & Federation', '/.well-known/webfinger (actor discovery)\n/.well-known/nodeinfo (server info)\n/activitypub/users/* (actor, inbox, outbox)\n/activitypub/inbox (shared inbox)\nContent negotiation at / (AS2 JSON)'),
+    box('social', 'ADMIN', 'Management UI', '/activitypub/ (dashboard)\n/activitypub/admin/reader (timeline, compose)\n/activitypub/admin/profile (actor editor)\n/activitypub/admin/followers, following\n/activitypub/admin/migrate (Mastodon import)\n/activitypub/admin/reader/moderation'),
+  ]);
+  page.appendChild(apEndpoints);
+
+  // Webmentions
+  page.appendChild(sectionTitle('Webmentions: IndieWeb Interactions'));
+
+  var wmFlow = el('div', { className: 'flow-split' }, [
+    el('div', { className: 'branch' }, [
+      box('endpoint', 'OUTBOUND', 'webmention-sender', 'Every 5 minutes, scans recent posts for URLs. Discovers webmention endpoints on linked pages and sends notifications.'),
+    ]),
+    el('div', { className: 'branch' }, [
+      box('endpoint', 'INBOUND', 'webmention.io proxy', 'Polls webmention.io every 15 min. Stores received mentions in MongoDB. Admin UI for moderation and blocklist.'),
+    ]),
+  ]);
+  page.appendChild(wmFlow);
+}
+
+// ── PAGE: AGGREGATION ─────────────────────────────────────
+
+function renderAggregation(page) {
+  page.appendChild(sectionTitle('External Data Sources'));
+  page.appendChild(sectionDesc('Six aggregator plugins pull activity from external platforms. Each runs on its own background schedule.'));
+
+  var procTable = el('table', { className: 'process-table' }, [
+    el('thead', null, [
+      el('tr', null, [
+        el('th', { textContent: 'Plugin' }),
+        el('th', { textContent: 'Source' }),
+        el('th', { textContent: 'Interval' }),
+        el('th', { textContent: 'MongoDB Collections' }),
+      ]),
+    ]),
+  ]);
+  var tbody = el('tbody');
+  var rows = [
+    ['endpoint-rss', 'RSS / Atom / JSON feeds', '15 min', 'rssFeeds, rssItems'],
+    ['endpoint-podroll', 'Podcasts via FreshRSS', '15 min', 'podrollEpisodes, podrollSources'],
+    ['endpoint-github', 'GitHub API', 'on demand', 'cached in memory'],
+    ['endpoint-funkwhale', 'Funkwhale API', '5 min', 'listenings'],
+    ['endpoint-lastfm', 'Last.fm API', '5 min', 'scrobbles'],
+    ['endpoint-youtube', 'YouTube Data API', 'on demand', 'cached in memory'],
+    ['endpoint-blogroll', 'OPML / Microsub / FeedLand', '1 hour', 'blogrollBlogs, blogrollItems, blogrollSources'],
+    ['endpoint-microsub', 'RSS/Atom feeds', 'adaptive 1m\u201317h', 'microsub_channels, microsub_feeds, microsub_items'],
+    ['webmention.io proxy', 'webmention.io API', '15 min', 'webmentions, webmentionBlocklist'],
+  ];
+  for (var r = 0; r < rows.length; r++) {
+    var tr = el('tr');
+    for (var c = 0; c < rows[r].length; c++) {
+      tr.appendChild(el('td', { textContent: rows[r][c] }));
+    }
+    tbody.appendChild(tr);
+  }
+  procTable.appendChild(tbody);
+  page.appendChild(procTable);
+
+  // Data flow to theme
+  page.appendChild(sectionTitle('How Aggregated Data Reaches the Site'));
+  page.appendChild(sectionDesc('The Eleventy theme has _data/*.js files that fetch from plugin API endpoints at build time. This is how external activity appears on the frontend.'));
+
+  var sources = el('div', { className: 'data-sources' }, [
+    dataSource('Plugin APIs', '/blogrollapi/*\n/funkwhale/api/*\n/lastfm/api/*\n/podrollapi/*\n/github/api/*\n/cv/data.json\n/homepage/api/*'),
+    dataSource('External APIs', 'YouTube Data API\nGitHub REST API\nBluesky AT Proto\nMastodon API'),
+    dataSource('Static Config', 'site.js (env vars)\nenabledPostTypes.js\nhomepageConfig.js\ncv.js'),
+  ]);
+  page.appendChild(sources);
+
+  page.appendChild(arrow('fetched at build time'));
+
+  var templates = box('theme', 'TEMPLATES', 'Eleventy Theme', 'Nunjucks templates render the data into pages. Layouts: base, home, post, page. Sections: hero, recent-posts, social-activity, cv-*, custom-html. Widgets for each aggregated source.');
+  templates.style.maxWidth = '560px';
+  templates.style.margin = '0 auto';
+  page.appendChild(templates);
+
+  // Homepage builder
+  page.appendChild(sectionTitle('The Homepage Builder'));
+  page.appendChild(sectionDesc('endpoint-homepage provides a drag-and-drop UI for arranging homepage sections. It discovers available sections from other plugins:'));
+
+  var hpGrid = el('div', { className: 'plugin-grid' }, [
+    box('site', null, 'CV', '5 sections: experience, education, skills, projects, certifications'),
+    box('aggregator', null, 'GitHub', 'Featured repos, contribution graph'),
+    box('aggregator', null, 'Funkwhale', 'Recent listening activity'),
+    box('aggregator', null, 'Last.fm', 'Top tracks, recent scrobbles'),
+    box('social', null, 'Blogroll', 'Featured blogs'),
+    box('aggregator', null, 'Podroll', 'Recent podcast episodes'),
+    box('aggregator', null, 'YouTube', 'Latest videos'),
+    box('social', null, 'Microsub', 'Social reader feed'),
+  ]);
+  page.appendChild(hpGrid);
+
+  page.appendChild(sectionDesc('Changes to homepage.json trigger an Eleventy rebuild, so the homepage updates immediately.'));
+}
+
+function dataSource(title, list) {
+  return el('div', { className: 'data-source' }, [
+    el('div', { className: 'ds-title', textContent: title }),
+    el('div', { className: 'ds-list', textContent: list }),
+  ]);
+}
+
+// ── PAGE: DEPLOYMENT ──────────────────────────────────────
+
+function renderDeployment(page) {
+  page.appendChild(sectionTitle('Cloudron Container'));
+  page.appendChild(sectionDesc('Everything runs in a single Cloudron container. Three long-running processes, shared filesystem, Cloudron-managed MongoDB.'));
+
+  // Container diagram
+  var container = el('div', { className: 'container-diagram' }, [
+    el('div', { className: 'cd-label', textContent: 'Cloudron Container \u2014 rmendes.net' }),
+    el('div', { className: 'container-stack' }, [
+      box('deploy', 'ENTRY POINT', 'nginx :3000', 'Serves static files from /app/data/site (symlink to current release). Media from /app/data/content/media/. Proxies /admin, /micropub, /auth, and all plugin routes to :8080. Legacy /content/ redirects to clean URLs. Security headers: CSP, X-Frame-Options, etc.'),
+      box('core', 'APPLICATION', 'Indiekit :8080', '30+ @rmdes/* plugins loaded via indiekit.config.js. @rmdes/preset-eleventy for content formatting. @indiekit/store-file-system for content storage. ActivityPub federation (Fedify 2.0). All 11 background sync processes.'),
+      box('deploy', 'SITE BUILDER', 'Eleventy (file watcher)', 'Watches /app/data/content/ for changes. Full build \u2192 atomic release swap (zero-downtime). Incremental rebuilds for file changes. Pagefind search indexing, WebSub notification. Theme from indiekit-eleventy-theme (git submodule).'),
+    ]),
+  ]);
+  page.appendChild(container);
+
+  // Filesystem
+  page.appendChild(sectionTitle('Filesystem Layout'));
+
+  var tree = el('div', { className: 'file-tree' });
+  var lines = [
+    ['/app/data/', 'ft-dir', 'writable, backed up by Cloudron'],
+    ['\u251C\u2500\u2500 config/', 'ft-dir', 'indiekit.config.js, env.sh, .secret'],
+    ['\u251C\u2500\u2500 content/', 'ft-dir', 'user posts organized by type'],
+    ['\u2502   \u251C\u2500\u2500 articles/', 'ft-dir', ''],
+    ['\u2502   \u251C\u2500\u2500 notes/', 'ft-dir', ''],
+    ['\u2502   \u251C\u2500\u2500 photos/', 'ft-dir', ''],
+    ['\u2502   \u251C\u2500\u2500 likes/', 'ft-dir', ''],
+    ['\u2502   \u251C\u2500\u2500 pages/', 'ft-dir', ''],
+    ['\u2502   \u2514\u2500\u2500 media/', 'ft-dir', 'uploaded images'],
+    ['\u251C\u2500\u2500 releases/', 'ft-dir', 'timestamped Eleventy builds'],
+    ['\u251C\u2500\u2500 site \u2192', 'ft-symlink', 'symlink to current release (atomic swap)'],
+    ['\u2514\u2500\u2500 cache/', 'ft-dir', 'Eleventy build cache'],
+  ];
+  for (var l = 0; l < lines.length; l++) {
+    var line = el('div');
+    var path = el('span', { className: lines[l][1], textContent: lines[l][0] });
+    line.appendChild(path);
+    if (lines[l][2]) {
+      line.appendChild(document.createTextNode('  '));
+      line.appendChild(el('span', { className: 'ft-comment', textContent: '# ' + lines[l][2] }));
+    }
+    tree.appendChild(line);
+  }
+  page.appendChild(tree);
+
+  // MongoDB
+  page.appendChild(sectionTitle('MongoDB Collections'));
+  page.appendChild(sectionDesc('Cloudron manages MongoDB. The database stores all state \u2014 post metadata, aggregated content, ActivityPub data, configuration.'));
+
+  var collections = [
+    'posts', 'blogrollBlogs', 'blogrollItems', 'blogrollSources',
+    'microsub_channels', 'microsub_feeds', 'microsub_items',
+    'webmentions', 'webmentionBlocklist', 'rssFeeds', 'rssItems',
+    'listenings', 'scrobbles', 'cvData', 'homepageConfig',
+    'linkedin_tokens', 'podrollEpisodes', 'podrollSources',
+    'ap_followers', 'ap_following', 'ap_activities', 'ap_keys',
+    'ap_kv', 'ap_profile', 'ap_featured', 'ap_featured_tags',
+    'ap_timeline', 'ap_notifications', 'ap_muted', 'ap_blocked',
+    'ap_interactions',
+  ];
+  var collContainer = el('div', { className: 'mongo-collections' });
+  for (var mc = 0; mc < collections.length; mc++) {
+    collContainer.appendChild(el('span', { className: 'mongo-coll', textContent: collections[mc] }));
+  }
+  page.appendChild(collContainer);
+
+  // Background processes
+  page.appendChild(sectionTitle('Background Processes'));
+  page.appendChild(sectionDesc('11 scheduled jobs run inside the Indiekit process:'));
+
+  var bgTable = el('table', { className: 'process-table' }, [
+    el('thead', null, [
+      el('tr', null, [
+        el('th', { textContent: 'Process' }),
+        el('th', { textContent: 'What It Does' }),
+        el('th', { textContent: 'Interval' }),
+      ]),
+    ]),
+  ]);
+  var bgBody = el('tbody');
+  var bgRows = [
+    ['Syndication poller', 'POST /syndicate for pending posts', '2 min'],
+    ['Webmention sender', 'Send outbound webmentions', '5 min'],
+    ['Blogroll sync', 'Fetch OPML/feeds', '1 hour'],
+    ['Microsub scheduler', 'Poll subscribed feeds', 'adaptive 1m\u201317h'],
+    ['RSS sync', 'Fetch RSS/Atom feeds', '15 min'],
+    ['Podroll sync', 'Fetch FreshRSS podcasts', '15 min'],
+    ['Funkwhale sync', 'Fetch listening history', '5 min'],
+    ['Last.fm sync', 'Fetch scrobbles', '5 min'],
+    ['ActivityPub queue', 'Process Fedify delivery queue', 'continuous'],
+    ['Timeline cleanup', 'Prune AP timeline', '24 hours'],
+    ['Webmention.io sync', 'Poll webmention.io', '15 min'],
+  ];
+  for (var br = 0; br < bgRows.length; br++) {
+    var btr = el('tr');
+    for (var bc = 0; bc < bgRows[br].length; bc++) {
+      btr.appendChild(el('td', { textContent: bgRows[br][bc] }));
+    }
+    bgBody.appendChild(btr);
+  }
+  bgTable.appendChild(bgBody);
+  page.appendChild(bgTable);
+
+  // Conventions
+  page.appendChild(sectionTitle('Key Conventions'));
+
+  var conventions = el('div', { className: 'convention-list' });
+  var convItems = [
+    ['Dates', 'Always ISO 8601 strings via new Date().toISOString(). Never store Date objects \u2014 the Nunjucks | date filter crashes on them.'],
+    ['Modules', 'ESM everywhere. All plugins use "type": "module" in package.json.'],
+    ['Templates', 'Always guard date filters with {% if value %} to protect against null/undefined.'],
+    ['Auth', 'IndieAuth for admin routes, JWT for background processes, HTTP Signatures for ActivityPub.'],
+    ['Storage', 'MongoDB for state and metadata. Filesystem for content (.md files). Two sources of truth by design.'],
+    ['Publishing', 'Bump version \u2192 commit \u2192 npm publish (manual, OTP required) \u2192 update Dockerfile \u2192 cloudron build.'],
+  ];
+  for (var cv = 0; cv < convItems.length; cv++) {
+    conventions.appendChild(el('div', { className: 'convention-item' }, [
+      el('div', { className: 'ci-key', textContent: convItems[cv][0] }),
+      el('div', { className: 'ci-val', textContent: convItems[cv][1] }),
+    ]));
+  }
+  page.appendChild(conventions);
+}
+
+// ── NAVIGATION & INIT ─────────────────────────────────────
+
+var navEl = document.getElementById('nav');
+var pagesEl = document.getElementById('pages');
+
+function switchPage(id) {
+  var tabs = navEl.querySelectorAll('.nav-tab');
+  for (var t = 0; t < tabs.length; t++) {
+    tabs[t].classList.toggle('active', tabs[t].getAttribute('data-page') === id);
+  }
+  var pageEls = pagesEl.querySelectorAll('.page');
+  for (var p = 0; p < pageEls.length; p++) {
+    pageEls[p].classList.toggle('active', pageEls[p].id === 'page-' + id);
+  }
+  window.scrollTo(0, 0);
+}
+
+// Build navigation and pages
+for (var i = 0; i < pages.length; i++) {
+  (function(pg, idx) {
+    var tab = el('div', {
+      className: 'nav-tab' + (idx === 0 ? ' active' : ''),
+      textContent: pg.tab,
+      'data-page': pg.id,
+    });
+    tab.addEventListener('click', function() { switchPage(pg.id); });
+    navEl.appendChild(tab);
+
+    var pageEl = el('div', {
+      className: 'page' + (idx === 0 ? ' active' : ''),
+      id: 'page-' + pg.id,
+    }, [
+      el('h1', { className: 'page-title', textContent: pg.title }),
+      el('p', { className: 'page-subtitle', textContent: pg.subtitle }),
+    ]);
+    pg.render(pageEl);
+    pagesEl.appendChild(pageEl);
+  })(pages[i], i);
+}
+</script>
+</body>
+</html>
diff --git a/js/admin.js b/js/admin.js
new file mode 100644
index 0000000..66b11ec
--- /dev/null
+++ b/js/admin.js
@@ -0,0 +1,67 @@
+/**
+ * Admin UI auth detection
+ * Checks if the user is logged in to Indiekit by probing /session/login.
+ * Dispatches a custom event for Alpine.js components to react to.
+ */
+
+(function () {
+  const cacheKey = 'indiekit-auth-status';
+  const cacheTTL = 5 * 60 * 1000; // 5 minutes
+
+  function getCachedStatus() {
+    try {
+      const cached = sessionStorage.getItem(cacheKey);
+      if (!cached) return null;
+      const parsed = JSON.parse(cached);
+      if (Date.now() - parsed.ts > cacheTTL) {
+        sessionStorage.removeItem(cacheKey);
+        return null;
+      }
+      return parsed.loggedIn;
+    } catch {
+      return null;
+    }
+  }
+
+  function setCachedStatus(loggedIn) {
+    try {
+      sessionStorage.setItem(cacheKey, JSON.stringify({ ts: Date.now(), loggedIn: loggedIn }));
+    } catch {
+      // sessionStorage full or unavailable
+    }
+  }
+
+  function dispatch(loggedIn) {
+    window.dispatchEvent(new CustomEvent('indiekit:auth', { detail: { loggedIn: loggedIn } }));
+    if (loggedIn) {
+      document.body.setAttribute('data-indiekit-auth', 'true');
+    } else {
+      document.body.removeAttribute('data-indiekit-auth');
+    }
+  }
+
+  function checkAuth() {
+    return fetch('/session/login', { credentials: 'same-origin', redirect: 'manual', cache: 'no-store' })
+      .then(function (response) {
+        // opaqueredirect means 302 → user is logged in
+        return response.type === 'opaqueredirect';
+      })
+      .catch(function () {
+        return false;
+      });
+  }
+
+  // Cache-then-verify: show from cache instantly, correct in background
+  var cached = getCachedStatus();
+  if (cached !== null) {
+    dispatch(cached);
+  }
+
+  checkAuth().then(function (loggedIn) {
+    setCachedStatus(loggedIn);
+    // Only re-dispatch if different from cache or no cache existed
+    if (cached === null || cached !== loggedIn) {
+      dispatch(loggedIn);
+    }
+  });
+})();
diff --git a/js/comments.js b/js/comments.js
new file mode 100644
index 0000000..11219e4
--- /dev/null
+++ b/js/comments.js
@@ -0,0 +1,151 @@
+/**
+ * Client-side comments component (Alpine.js)
+ * Handles IndieAuth flow, comment submission, and display
+ *
+ * Registered via Alpine.data() so the component is available
+ * regardless of script loading order.
+ */
+
+document.addEventListener("alpine:init", () => {
+  Alpine.data("commentsSection", (targetUrl) => ({
+    targetUrl,
+    user: null,
+    meUrl: "",
+    commentText: "",
+    comments: [],
+    loading: true,
+    authLoading: false,
+    submitting: false,
+    statusMessage: "",
+    statusType: "info",
+    maxLength: 2000,
+    showForm: false,
+
+    async init() {
+      await this.checkSession();
+      await this.loadComments();
+      this.handleAuthReturn();
+    },
+
+    async checkSession() {
+      try {
+        const res = await fetch("/comments/api/session", {
+          credentials: "include",
+        });
+        if (res.ok) {
+          const data = await res.json();
+          if (data.user) this.user = data.user;
+        }
+      } catch {
+        // No session
+      }
+    },
+
+    handleAuthReturn() {
+      const params = new URLSearchParams(window.location.search);
+      const authError = params.get("auth_error");
+      if (authError) {
+        this.showStatus(`Authentication failed: ${authError}`, "error");
+        window.history.replaceState(
+          {},
+          "",
+          window.location.pathname + "#comments",
+        );
+      }
+    },
+
+    async loadComments() {
+      this.loading = true;
+      try {
+        const url = `/comments/api/comments?target=${encodeURIComponent(this.targetUrl)}`;
+        const res = await fetch(url);
+        if (res.ok) {
+          const data = await res.json();
+          this.comments = data.children || [];
+        }
+      } catch (e) {
+        console.error("[Comments] Load error:", e);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async startAuth() {
+      this.authLoading = true;
+      try {
+        const res = await fetch("/comments/api/auth", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            me: this.meUrl,
+            returnUrl: window.location.pathname + "#comments",
+          }),
+          credentials: "include",
+        });
+
+        if (!res.ok) {
+          const data = await res.json();
+          this.showStatus(data.error || "Auth failed", "error");
+          return;
+        }
+
+        const data = await res.json();
+        if (data.authUrl) {
+          window.location.href = data.authUrl;
+        }
+      } catch {
+        this.showStatus("Failed to start authentication", "error");
+      } finally {
+        this.authLoading = false;
+      }
+    },
+
+    async submitComment() {
+      if (!this.commentText.trim()) return;
+      this.submitting = true;
+
+      try {
+        const res = await fetch("/comments/api/submit", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            content: this.commentText,
+            target: this.targetUrl,
+          }),
+          credentials: "include",
+        });
+
+        if (res.ok) {
+          const data = await res.json();
+          if (data.comment) {
+            this.comments.unshift(data.comment);
+          }
+          this.commentText = "";
+          this.showStatus("Comment posted!", "success");
+        } else {
+          const data = await res.json();
+          this.showStatus(data.error || "Failed to post", "error");
+        }
+      } catch {
+        this.showStatus("Error posting comment", "error");
+      } finally {
+        this.submitting = false;
+      }
+    },
+
+    signOut() {
+      document.cookie =
+        "comment_session=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+      this.user = null;
+      this.showStatus("Signed out", "info");
+    },
+
+    showStatus(message, type = "info") {
+      this.statusMessage = message;
+      this.statusType = type;
+      setTimeout(() => {
+        this.statusMessage = "";
+      }, 5000);
+    },
+  }));
+});
diff --git a/js/fediverse-interact.js b/js/fediverse-interact.js
new file mode 100644
index 0000000..82e3ef7
--- /dev/null
+++ b/js/fediverse-interact.js
@@ -0,0 +1,144 @@
+/**
+ * Fediverse interaction & sharing component (Alpine.js)
+ *
+ * Two modes:
+ *   - "interact" (default): redirect to authorize_interaction for like/boost/reply/follow
+ *   - "share": redirect to /share?text=... for composing a new post
+ *
+ * Stores multiple domains in localStorage with usage tracking.
+ * Registered via Alpine.data() so the component is available
+ * regardless of script loading order.
+ */
+
+const STORAGE_KEY = "fediverse_domains_v1";
+const OLD_STORAGE_KEY = "fediverse_instance";
+
+function loadDomains() {
+  try {
+    const json = localStorage.getItem(STORAGE_KEY);
+    if (json) return JSON.parse(json);
+  } catch { /* corrupted data */ }
+
+  // Migrate from old single-domain key
+  const old = localStorage.getItem(OLD_STORAGE_KEY);
+  if (old) {
+    const domains = [{ domain: old, used: 1, lastUsed: new Date().toISOString() }];
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(domains));
+    localStorage.removeItem(OLD_STORAGE_KEY);
+    return domains;
+  }
+
+  return [];
+}
+
+function saveDomains(domains) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(domains));
+}
+
+function addDomain(domain) {
+  const domains = loadDomains();
+  const existing = domains.find((d) => d.domain === domain);
+  if (existing) {
+    existing.used += 1;
+    existing.lastUsed = new Date().toISOString();
+  } else {
+    domains.push({ domain, used: 1, lastUsed: new Date().toISOString() });
+  }
+  saveDomains(domains);
+  return domains;
+}
+
+function removeDomain(domain) {
+  const domains = loadDomains().filter((d) => d.domain !== domain);
+  saveDomains(domains);
+  return domains;
+}
+
+function isValidDomain(str) {
+  try {
+    return new URL(`https://${str}`).hostname === str;
+  } catch {
+    return false;
+  }
+}
+
+document.addEventListener("alpine:init", () => {
+  Alpine.data("fediverseInteract", (targetUrl, mode) => ({
+    targetUrl,
+    mode: mode || "interact",
+    showModal: false,
+    instance: "",
+    savedDomains: [],
+    showInput: false,
+    error: "",
+
+    handleClick(event) {
+      event.preventDefault();
+      this.savedDomains = loadDomains().sort((a, b) => b.used - a.used);
+
+      if (this.savedDomains.length === 1 && !event.shiftKey) {
+        addDomain(this.savedDomains[0].domain);
+        this.redirectToInstance(this.savedDomains[0].domain);
+        return;
+      }
+
+      if (this.savedDomains.length === 0) {
+        this.showInput = true;
+      } else {
+        this.showInput = false;
+      }
+
+      this.instance = "";
+      this.error = "";
+      this.showModal = true;
+    },
+
+    showAddNew() {
+      this.showInput = true;
+      this.instance = "";
+      this.error = "";
+      this.$nextTick(() => {
+        const input = this.$refs.instanceInput;
+        if (input) input.focus();
+      });
+    },
+
+    confirm() {
+      let domain = this.instance.trim();
+      if (!domain) return;
+      // Strip protocol and trailing slashes
+      domain = domain.replace(/^https?:\/\//, "").replace(/\/+$/, "");
+
+      if (!isValidDomain(domain)) {
+        this.error = "Please enter a valid domain (e.g. mastodon.social)";
+        return;
+      }
+
+      this.error = "";
+      this.savedDomains = addDomain(domain);
+      this.showModal = false;
+      this.redirectToInstance(domain);
+    },
+
+    useSaved(domain) {
+      this.savedDomains = addDomain(domain);
+      this.showModal = false;
+      this.redirectToInstance(domain);
+    },
+
+    deleteSaved(domain) {
+      this.savedDomains = removeDomain(domain);
+      if (this.savedDomains.length === 0) {
+        this.showInput = true;
+      }
+    },
+
+    redirectToInstance(domain) {
+      if (this.mode === "share") {
+        window.location.href = `https://${domain}/share?text=${encodeURIComponent(this.targetUrl)}`;
+      } else {
+        window.location.href = `https://${domain}/authorize_interaction?uri=${encodeURIComponent(this.targetUrl)}`;
+      }
+    },
+  }));
+});
diff --git a/js/lightbox.js b/js/lightbox.js
new file mode 100644
index 0000000..07e440b
--- /dev/null
+++ b/js/lightbox.js
@@ -0,0 +1,80 @@
+/**
+ * Alpine.js lightbox component for article images.
+ * Registers via alpine:init so it's available before Alpine starts.
+ * Click any image inside .e-content to view fullscreen.
+ * Navigate with arrow keys, close with Escape or click outside.
+ */
+document.addEventListener("alpine:init", () => {
+  Alpine.data("lightbox", () => ({
+    open: false,
+    src: "",
+    alt: "",
+    images: [],
+    currentIndex: 0,
+
+    init() {
+      const container = this.$root;
+      const imgs = container.querySelectorAll(
+        ".e-content img:not(.u-photo), .photo-gallery img.u-photo"
+      );
+      this.images = Array.from(imgs);
+
+      this.images.forEach((img, i) => {
+        img.style.cursor = "zoom-in";
+        img.addEventListener("click", (e) => {
+          e.preventDefault();
+          this.show(i);
+        });
+      });
+    },
+
+    show(index) {
+      this.currentIndex = index;
+      const img = this.images[index];
+      // Use the largest source available
+      const picture = img.closest("picture");
+      if (picture) {
+        const source = picture.querySelector("source");
+        if (source) {
+          // Extract the URL from srcset (strip width descriptor)
+          const srcset = source.getAttribute("srcset") || "";
+          this.src = srcset.split(/\s+/)[0] || img.src;
+        } else {
+          this.src = img.src;
+        }
+      } else {
+        this.src = img.src;
+      }
+      this.alt = img.alt || "";
+      this.open = true;
+      document.body.style.overflow = "hidden";
+    },
+
+    close() {
+      this.open = false;
+      this.src = "";
+      document.body.style.overflow = "";
+    },
+
+    next() {
+      if (this.images.length > 1) {
+        this.show((this.currentIndex + 1) % this.images.length);
+      }
+    },
+
+    prev() {
+      if (this.images.length > 1) {
+        this.show(
+          (this.currentIndex - 1 + this.images.length) % this.images.length
+        );
+      }
+    },
+
+    onKeydown(e) {
+      if (!this.open) return;
+      if (e.key === "Escape") this.close();
+      if (e.key === "ArrowRight") this.next();
+      if (e.key === "ArrowLeft") this.prev();
+    },
+  }));
+});
diff --git a/js/save-later.js b/js/save-later.js
new file mode 100644
index 0000000..eff4f33
--- /dev/null
+++ b/js/save-later.js
@@ -0,0 +1,51 @@
+/**
+ * Save for Later — shared frontend module
+ * Handles save button clicks on blogroll, podroll, listening, and news pages.
+ * Only active when user is logged in (body[data-indiekit-auth="true"]).
+ */
+(function () {
+  function isLoggedIn() {
+    return document.body.getAttribute('data-indiekit-auth') === 'true';
+  }
+
+  async function saveForLater(button) {
+    var url = button.dataset.saveUrl;
+    var title = button.dataset.saveTitle || url;
+    var source = button.dataset.saveSource || 'manual';
+    if (!url) return;
+
+    button.disabled = true;
+
+    try {
+      var response = await fetch('/readlater/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url: url, title: title, source: source }),
+        credentials: 'same-origin'
+      });
+
+      if (response.ok) {
+        button.classList.add('save-later--saved');
+        button.title = 'Saved';
+        button.setAttribute('aria-label', 'Saved');
+        var label = button.querySelector('.save-later-label');
+        if (label) label.textContent = 'Saved';
+        var icon = button.querySelector('.save-later-icon');
+        if (icon) icon.textContent = '🔖';
+      } else {
+        button.disabled = false;
+      }
+    } catch (e) {
+      button.disabled = false;
+    }
+  }
+
+  document.addEventListener('click', function (e) {
+    if (!isLoggedIn()) return;
+    var button = e.target.closest('.save-later-btn');
+    if (button) {
+      e.preventDefault();
+      saveForLater(button);
+    }
+  });
+})();
diff --git a/js/share-post.js b/js/share-post.js
new file mode 100644
index 0000000..9165613
--- /dev/null
+++ b/js/share-post.js
@@ -0,0 +1,86 @@
+/**
+ * Share Post — frontend module
+ * Opens the Indiekit post creation form in a popup window.
+ * Provides a dropdown menu with post type choices.
+ * Only active when user is logged in (body[data-indiekit-auth="true"]).
+ */
+(function () {
+  var POST_TYPES = [
+    { value: 'note', label: 'Note' },
+    { value: 'bookmark', label: 'Bookmark' },
+    { value: 'reply', label: 'Reply' },
+    { value: 'like', label: 'Like' },
+    { value: 'repost', label: 'Repost' },
+    { value: 'article', label: 'Article' }
+  ];
+
+  function isLoggedIn() {
+    return document.body.getAttribute('data-indiekit-auth') === 'true';
+  }
+
+  function openPostPopup(type, url, title) {
+    var createUrl = '/posts/create'
+      + '?type=' + encodeURIComponent(type)
+      + '&url=' + encodeURIComponent(url)
+      + '&name=' + encodeURIComponent(title);
+
+    window.open(
+      createUrl,
+      'PostCreator',
+      'resizable,scrollbars,status=0,toolbar=0,menubar=0,titlebar=0,width=620,height=780,location=0'
+    );
+  }
+
+  function createDropdown(button) {
+    if (button.querySelector('.post-type-dropdown')) return;
+
+    var url = button.dataset.shareUrl;
+    var title = button.dataset.shareTitle || '';
+
+    var dropdown = document.createElement('div');
+    dropdown.className = 'post-type-dropdown';
+
+    POST_TYPES.forEach(function (pt) {
+      var item = document.createElement('button');
+      item.type = 'button';
+      item.className = 'post-type-dropdown-item';
+      item.textContent = pt.label;
+      item.addEventListener('click', function (e) {
+        e.stopPropagation();
+        openPostPopup(pt.value, url, title);
+        closeAllDropdowns();
+      });
+      dropdown.appendChild(item);
+    });
+
+    button.style.position = 'relative';
+    button.appendChild(dropdown);
+  }
+
+  function closeAllDropdowns() {
+    document.querySelectorAll('.post-type-dropdown.open').forEach(function (d) {
+      d.classList.remove('open');
+    });
+  }
+
+  document.addEventListener('click', function (e) {
+    if (!isLoggedIn()) return;
+
+    var button = e.target.closest('.share-post-btn');
+    if (button) {
+      e.preventDefault();
+      e.stopPropagation();
+      createDropdown(button);
+      var dropdown = button.querySelector('.post-type-dropdown');
+      var wasOpen = dropdown.classList.contains('open');
+      closeAllDropdowns();
+      if (!wasOpen) {
+        dropdown.classList.add('open');
+      }
+      return;
+    }
+
+    // Click outside closes dropdowns
+    closeAllDropdowns();
+  });
+})();
diff --git a/js/time-difference.js b/js/time-difference.js
new file mode 100644
index 0000000..792de54
--- /dev/null
+++ b/js/time-difference.js
@@ -0,0 +1,91 @@
+/**
+ * <time-difference> Web Component
+ * Progressively enhances <time> elements with relative date display.
+ * Falls back to static date text when JS is unavailable.
+ *
+ * Usage: <time-difference><time datetime="2026-02-15T...">February 15, 2026</time></time-difference>
+ *
+ * Inspired by zachleat.com's time-difference component.
+ */
+class TimeDifference extends HTMLElement {
+  static register(tagName = "time-difference") {
+    if ("customElements" in window) {
+      customElements.define(tagName, TimeDifference);
+    }
+  }
+
+  connectedCallback() {
+    this.update();
+    // Auto-update every 60 seconds
+    this._interval = setInterval(() => this.update(), 60000);
+  }
+
+  disconnectedCallback() {
+    clearInterval(this._interval);
+  }
+
+  update() {
+    const time = this.querySelector("time[datetime]");
+    if (!time) return;
+
+    const datetime = time.getAttribute("datetime");
+    if (!datetime) return;
+
+    const date = new Date(datetime);
+    if (isNaN(date.getTime())) return;
+
+    const now = new Date();
+    const diffMs = now - date;
+
+    // Don't show relative time for future dates
+    if (diffMs < 0) return;
+
+    const diffSec = Math.floor(diffMs / 1000);
+    const diffMin = Math.floor(diffSec / 60);
+    const diffHour = Math.floor(diffMin / 60);
+    const diffDay = Math.floor(diffHour / 24);
+    const diffWeek = Math.floor(diffDay / 7);
+    const diffMonth = Math.floor(diffDay / 30.44);
+    const diffYear = Math.floor(diffDay / 365.25);
+
+    let value, unit;
+
+    if (diffSec < 60) {
+      value = -diffSec;
+      unit = "second";
+    } else if (diffMin < 60) {
+      value = -diffMin;
+      unit = "minute";
+    } else if (diffHour < 24) {
+      value = -diffHour;
+      unit = "hour";
+    } else if (diffDay < 7) {
+      value = -diffDay;
+      unit = "day";
+    } else if (diffWeek < 4) {
+      value = -diffWeek;
+      unit = "week";
+    } else if (diffMonth < 12) {
+      value = -diffMonth;
+      unit = "month";
+    } else {
+      value = -diffYear;
+      unit = "year";
+    }
+
+    try {
+      const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+      const relative = rtf.format(value, unit);
+
+      // Store original text as title for hover tooltip
+      if (!time.hasAttribute("title")) {
+        time.setAttribute("title", time.textContent.trim());
+      }
+      time.textContent = relative;
+    } catch {
+      // Intl.RelativeTimeFormat not supported, keep static text
+    }
+  }
+}
+
+TimeDifference.register();
diff --git a/js/vendor/alpine-collapse.min.js b/js/vendor/alpine-collapse.min.js
new file mode 100644
index 0000000..a865343
--- /dev/null
+++ b/js/vendor/alpine-collapse.min.js
@@ -0,0 +1 @@
+(()=>{function g(n){n.directive("collapse",e),e.inline=(t,{modifiers:i})=>{i.includes("min")&&(t._x_doShow=()=>{},t._x_doHide=()=>{})};function e(t,{modifiers:i}){let r=l(i,"duration",250)/1e3,h=l(i,"min",0),u=!i.includes("min");t._x_isShown||(t.style.height=`${h}px`),!t._x_isShown&&u&&(t.hidden=!0),t._x_isShown||(t.style.overflow="hidden");let c=(d,s)=>{let o=n.setStyles(d,s);return s.height?()=>{}:o},f={transitionProperty:"height",transitionDuration:`${r}s`,transitionTimingFunction:"cubic-bezier(0.4, 0.0, 0.2, 1)"};t._x_transition={in(d=()=>{},s=()=>{}){u&&(t.hidden=!1),u&&(t.style.display=null);let o=t.getBoundingClientRect().height;t.style.height="auto";let a=t.getBoundingClientRect().height;o===a&&(o=h),n.transition(t,n.setStyles,{during:f,start:{height:o+"px"},end:{height:a+"px"}},()=>t._x_isShown=!0,()=>{Math.abs(t.getBoundingClientRect().height-a)<1&&(t.style.overflow=null)})},out(d=()=>{},s=()=>{}){let o=t.getBoundingClientRect().height;n.transition(t,c,{during:f,start:{height:o+"px"},end:{height:h+"px"}},()=>t.style.overflow="hidden",()=>{t._x_isShown=!1,t.style.height==`${h}px`&&u&&(t.style.display="none",t.hidden=!0)})}}}}function l(n,e,t){if(n.indexOf(e)===-1)return t;let i=n[n.indexOf(e)+1];if(!i)return t;if(e==="duration"){let r=i.match(/([0-9]+)ms/);if(r)return r[1]}if(e==="min"){let r=i.match(/([0-9]+)px/);if(r)return r[1]}return i}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(g)});})();
diff --git a/js/vendor/alpine.min.js b/js/vendor/alpine.min.js
new file mode 100644
index 0000000..8e339a2
--- /dev/null
+++ b/js/vendor/alpine.min.js
@@ -0,0 +1,5 @@
+(()=>{var ie=!1,oe=!1,Y=[],se=-1,ae=!1;function We(t){Bn(t)}function Ge(){ae=!0}function Je(){ae=!1,Xe()}function Bn(t){Y.includes(t)||Y.push(t),Xe()}function Ye(t){let e=Y.indexOf(t);e!==-1&&e>se&&Y.splice(e,1)}function Xe(){if(!oe&&!ie){if(ae)return;ie=!0,queueMicrotask(zn)}}function zn(){ie=!1,oe=!0;for(let t=0;t<Y.length;t++)Y[t](),se=t;Y.length=0,se=-1,oe=!1}var M,D,z,le,ce=!0;function Ze(t){ce=!1,t(),ce=!0}function Qe(t){M=t.reactive,z=t.release,D=e=>t.effect(e,{scheduler:r=>{ce?We(r):r()}}),le=t.raw}function ue(t){D=t}function tr(t){let e=()=>{};return[n=>{let i=D(n);return t._x_effects||(t._x_effects=new Set,t._x_runEffects=()=>{t._x_effects.forEach(o=>o())}),t._x_effects.add(i),e=()=>{i!==void 0&&(t._x_effects.delete(i),z(i))},i},()=>{e()}]}function Ot(t,e){let r=!0,n,i=D(()=>{let o=t();if(JSON.stringify(o),!r&&(typeof o=="object"||o!==n)){let s=n;queueMicrotask(()=>{e(o,s)})}n=o,r=!1});return()=>z(i)}async function er(t){Ge();try{await t(),await Promise.resolve()}finally{Je()}}var rr=[],nr=[],ir=[];function or(t){ir.push(t)}function it(t,e){typeof e=="function"?(t._x_cleanups||(t._x_cleanups=[]),t._x_cleanups.push(e)):(e=t,nr.push(e))}function Tt(t){rr.push(t)}function Rt(t,e,r){t._x_attributeCleanups||(t._x_attributeCleanups={}),t._x_attributeCleanups[e]||(t._x_attributeCleanups[e]=[]),t._x_attributeCleanups[e].push(r)}function fe(t,e){t._x_attributeCleanups&&Object.entries(t._x_attributeCleanups).forEach(([r,n])=>{(e===void 0||e.includes(r))&&(n.forEach(i=>i()),delete t._x_attributeCleanups[r])})}function sr(t){for(t._x_effects?.forEach(Ye);t._x_cleanups?.length;)t._x_cleanups.pop()()}var de=new MutationObserver(_e),pe=!1;function mt(){de.observe(document,{subtree:!0,childList:!0,attributes:!0,attributeOldValue:!0}),pe=!0}function me(){Hn(),de.disconnect(),pe=!1}var pt=[];function Hn(){let t=de.takeRecords();pt.push(()=>t.length>0&&_e(t));let e=pt.length;queueMicrotask(()=>{if(pt.length===e)for(;pt.length>0;)pt.shift()()})}function h(t){if(!pe)return t();me();let e=t();return mt(),e}var he=!1,Ct=[];function ar(){he=!0}function cr(){he=!1,_e(Ct),Ct=[]}function _e(t){if(he){Ct=Ct.concat(t);return}let e=[],r=new Set,n=new Map,i=new Map;for(let o=0;o<t.length;o++)if(!t[o].target._x_ignoreMutationObserver&&(t[o].type==="childList"&&(t[o].removedNodes.forEach(s=>{s.nodeType===1&&s._x_marker&&r.add(s)}),t[o].addedNodes.forEach(s=>{if(s.nodeType===1){if(r.has(s)){r.delete(s);return}s._x_marker||e.push(s)}})),t[o].type==="attributes")){let s=t[o].target,a=t[o].attributeName,c=t[o].oldValue,l=()=>{n.has(s)||n.set(s,[]),n.get(s).push({name:a,value:s.getAttribute(a)})},u=()=>{i.has(s)||i.set(s,[]),i.get(s).push(a)};s.hasAttribute(a)&&c===null?l():s.hasAttribute(a)?(u(),l()):u()}i.forEach((o,s)=>{fe(s,o)}),n.forEach((o,s)=>{rr.forEach(a=>a(s,o))});for(let o of r)e.some(s=>s.contains(o))||nr.forEach(s=>s(o));for(let o of e)o.isConnected&&ir.forEach(s=>s(o));e=null,r=null,n=null,i=null}function Mt(t){return I(H(t))}function P(t,e,r){return t._x_dataStack=[e,...H(r||t)],()=>{t._x_dataStack=t._x_dataStack.filter(n=>n!==e)}}function H(t){return t._x_dataStack?t._x_dataStack:typeof ShadowRoot=="function"&&t instanceof ShadowRoot?H(t.host):t.parentNode?H(t.parentNode):[]}function I(t){return new Proxy({objects:t},Kn)}var Kn={ownKeys({objects:t}){return Array.from(new Set(t.flatMap(e=>Object.keys(e))))},has({objects:t},e){return e==Symbol.unscopables?!1:t.some(r=>Object.prototype.hasOwnProperty.call(r,e)||Reflect.has(r,e))},get({objects:t},e,r){return e=="toJSON"?Vn:Reflect.get(t.find(n=>Reflect.has(n,e))||{},e,r)},set({objects:t},e,r,n){let i=t.find(s=>Object.prototype.hasOwnProperty.call(s,e))||t[t.length-1],o=Object.getOwnPropertyDescriptor(i,e);return o?.set&&o?.get?o.set.call(n,r)||!0:Reflect.set(i,e,r)}};function Vn(){return Reflect.ownKeys(this).reduce((e,r)=>(e[r]=Reflect.get(this,r),e),{})}function ot(t){let e=n=>typeof n=="object"&&!Array.isArray(n)&&n!==null,r=(n,i="")=>{Object.entries(Object.getOwnPropertyDescriptors(n)).forEach(([o,{value:s,enumerable:a}])=>{if(a===!1||s===void 0||typeof s=="object"&&s!==null&&s.__v_skip)return;let c=i===""?o:`${i}.${o}`;typeof s=="object"&&s!==null&&s._x_interceptor?n[o]=s.initialize(t,c,o):e(s)&&s!==n&&!(s instanceof Element)&&r(s,c)})};return r(t)}function Nt(t,e=()=>{}){let r={initialValue:void 0,_x_interceptor:!0,initialize(n,i,o){return t(this.initialValue,()=>Un(n,i),s=>ge(n,i,s),i,o)}};return e(r),n=>{if(typeof n=="object"&&n!==null&&n._x_interceptor){let i=r.initialize.bind(r);r.initialize=(o,s,a)=>{let c=n.initialize(o,s,a);return r.initialValue=c,i(o,s,a)}}else r.initialValue=n;return r}}function Un(t,e){return e.split(".").reduce((r,n)=>r[n],t)}function ge(t,e,r){if(typeof e=="string"&&(e=e.split(".")),e.length===1)t[e[0]]=r;else{if(e.length===0)throw error;return t[e[0]]||(t[e[0]]={}),ge(t[e[0]],e.slice(1),r)}}var lr={};function y(t,e){lr[t]=e}function U(t,e){let r=qn(e);return Object.entries(lr).forEach(([n,i])=>{Object.defineProperty(t,`$${n}`,{get(){return i(e,r)},enumerable:!1})}),t}function qn(t){let[e,r]=xe(t),n={interceptor:Nt,...e};return it(t,r),n}function ur(t,e,r,...n){try{return r(...n)}catch(i){st(i,t,e)}}function st(...t){return fr(...t)}var fr=Wn;function dr(t){fr=t}function Wn(t,e,r=void 0){t=Object.assign(t??{message:"No error message given."},{el:e,expression:r}),console.warn(`Alpine Expression Error: ${t.message}
+
+${r?'Expression: "'+r+`"
+
+`:""}`,e),setTimeout(()=>{throw t},0)}var at=!0;function kt(t){let e=at;at=!1;let r=t();return at=e,r}function N(t,e,r={}){let n;return x(t,e)(i=>n=i,r),n}function x(...t){return pr(...t)}var pr=be;function mr(t){pr=t}var hr;function _r(t){hr=t}function be(t,e){let r={};U(r,t);let n=[r,...H(t)],i=typeof e=="function"?Gn(n,e):Yn(n,e,t);return ur.bind(null,t,e,i)}function Gn(t,e){return(r=()=>{},{scope:n={},params:i=[],context:o}={})=>{if(!at){ht(r,e,I([n,...t]),i);return}let s=e.apply(I([n,...t]),i);ht(r,s)}}var ye={};function Jn(t,e){if(ye[t])return ye[t];let r=Object.getPrototypeOf(async function(){}).constructor,n=/^[\n\s]*if.*\(.*\)/.test(t.trim())||/^(let|const)\s/.test(t.trim())?`(async()=>{ ${t} })()`:t,o=(()=>{try{let s=new r(["__self","scope"],`with (scope) { __self.result = ${n} }; __self.finished = true; return __self.result;`);return Object.defineProperty(s,"name",{value:`[Alpine] ${t}`}),s}catch(s){return st(s,e,t),Promise.resolve()}})();return ye[t]=o,o}function Yn(t,e,r){let n=Jn(e,r);return(i=()=>{},{scope:o={},params:s=[],context:a}={})=>{n.result=void 0,n.finished=!1;let c=I([o,...t]);if(typeof n=="function"){let l=n.call(a,n,c).catch(u=>st(u,r,e));n.finished?(ht(i,n.result,c,s,r),n.result=void 0):l.then(u=>{ht(i,u,c,s,r)}).catch(u=>st(u,r,e)).finally(()=>n.result=void 0)}}}function ht(t,e,r,n,i){if(at&&typeof e=="function"){let o=e.apply(r,n);o instanceof Promise?o.then(s=>ht(t,s,r,n)).catch(s=>st(s,i,e)):t(o)}else typeof e=="object"&&e instanceof Promise?e.then(o=>t(o)):t(e)}function gr(...t){return hr(...t)}function xr(t,e,r={}){let n={};U(n,t);let i=[n,...H(t)],o=I([r.scope??{},...i]),s=r.params??[];if(e.includes("await")){let a=Object.getPrototypeOf(async function(){}).constructor,c=/^[\n\s]*if.*\(.*\)/.test(e.trim())||/^(let|const)\s/.test(e.trim())?`(async()=>{ ${e} })()`:e;return new a(["scope"],`with (scope) { let __result = ${c}; return __result }`).call(r.context,o)}else{let a=/^[\n\s]*if.*\(.*\)/.test(e.trim())||/^(let|const)\s/.test(e.trim())?`(()=>{ ${e} })()`:e,l=new Function(["scope"],`with (scope) { let __result = ${a}; return __result }`).call(r.context,o);return typeof l=="function"&&at?l.apply(o,s):l}}var ve="x-";function T(t=""){return ve+t}function yr(t){ve=t}var Dt={};function d(t,e){return Dt[t]=e,{before(r){if(!Dt[r]){console.warn(String.raw`Cannot find directive \`${r}\`. \`${t}\` will use the default order of execution`);return}let n=X.indexOf(r);X.splice(n>=0?n:X.indexOf("DEFAULT"),0,t)}}}function br(t){return Object.keys(Dt).includes(t)}function gt(t,e,r){if(e=Array.from(e),t._x_virtualDirectives){let o=Object.entries(t._x_virtualDirectives).map(([a,c])=>({name:a,value:c})),s=Se(o);o=o.map(a=>s.find(c=>c.name===a.name)?{name:`x-bind:${a.name}`,value:`"${a.value}"`}:a),e=e.concat(o)}let n={};return e.map(vr((o,s)=>n[o]=s)).filter(Ar).map(Zn(n,r)).sort(Qn).map(o=>Xn(t,o))}function Se(t){return Array.from(t).map(vr()).filter(e=>!Ar(e))}var we=!1,_t=new Map,wr=Symbol();function Er(t){we=!0;let e=Symbol();wr=e,_t.set(e,[]);let r=()=>{for(;_t.get(e).length;)_t.get(e).shift()();_t.delete(e)},n=()=>{we=!1,r()};t(r),n()}function xe(t){let e=[],r=a=>e.push(a),[n,i]=tr(t);return e.push(i),[{Alpine:K,effect:n,cleanup:r,evaluateLater:x.bind(x,t),evaluate:N.bind(N,t)},()=>e.forEach(a=>a())]}function Xn(t,e){let r=()=>{},n=Dt[e.type]||r,[i,o]=xe(t);Rt(t,e.original,o);let s=()=>{t._x_ignore||t._x_ignoreSelf||(n.inline&&n.inline(t,e,i),n=n.bind(n,t,e,i),we?_t.get(wr).push(n):n())};return s.runCleanups=o,s}var Pt=(t,e)=>({name:r,value:n})=>(r.startsWith(t)&&(r=r.replace(t,e)),{name:r,value:n}),It=t=>t;function vr(t=()=>{}){return({name:e,value:r})=>{let{name:n,value:i}=Sr.reduce((o,s)=>s(o),{name:e,value:r});return n!==e&&t(n,e),{name:n,value:i}}}var Sr=[];function ct(t){Sr.push(t)}function Ar({name:t}){return Or().test(t)}var Or=()=>new RegExp(`^${ve}([^:^.]+)\\b`);function Zn(t,e){return({name:r,value:n})=>{r===n&&(n="");let i=r.match(Or()),o=r.match(/:([a-zA-Z0-9\-_:]+)/),s=r.match(/\.[^.\]]+(?=[^\]]*$)/g)||[],a=e||t[r]||r;return{type:i?i[1]:null,value:o?o[1]:null,modifiers:s.map(c=>c.replace(".","")),expression:n,original:a}}}var Ee="DEFAULT",X=["ignore","ref","data","id","anchor","bind","init","for","model","modelable","transition","show","if",Ee,"teleport"];function Qn(t,e){let r=X.indexOf(t.type)===-1?Ee:t.type,n=X.indexOf(e.type)===-1?Ee:e.type;return X.indexOf(r)-X.indexOf(n)}function Z(t,e,r={}){t.dispatchEvent(new CustomEvent(e,{detail:r,bubbles:!0,composed:!0,cancelable:!0}))}function $(t,e){if(typeof ShadowRoot=="function"&&t instanceof ShadowRoot){Array.from(t.children).forEach(i=>$(i,e));return}let r=!1;if(e(t,()=>r=!0),r)return;let n=t.firstElementChild;for(;n;)$(n,e,!1),n=n.nextElementSibling}function w(t,...e){console.warn(`Alpine Warning: ${t}`,...e)}var Cr=!1;function Tr(){Cr&&w("Alpine has already been initialized on this page. Calling Alpine.start() more than once can cause problems."),Cr=!0,document.body||w("Unable to initialize. Trying to load Alpine before `<body>` is available. Did you forget to add `defer` in Alpine's `<script>` tag?"),Z(document,"alpine:init"),Z(document,"alpine:initializing"),mt(),or(e=>S(e,$)),it(e=>j(e)),Tt((e,r)=>{gt(e,r).forEach(n=>n())});let t=e=>!Q(e.parentElement,!0);Array.from(document.querySelectorAll(Nr().join(","))).filter(t).forEach(e=>{S(e)}),Z(document,"alpine:initialized"),setTimeout(()=>{ei()})}var Ae=[],Rr=[];function Mr(){return Ae.map(t=>t())}function Nr(){return Ae.concat(Rr).map(t=>t())}function $t(t){Ae.push(t)}function Lt(t){Rr.push(t)}function Q(t,e=!1){return L(t,r=>{if((e?Nr():Mr()).some(i=>r.matches(i)))return!0})}function L(t,e){if(t){if(e(t))return t;if(t._x_teleportBack&&(t=t._x_teleportBack),t.parentNode instanceof ShadowRoot)return L(t.parentNode.host,e);if(t.parentElement)return L(t.parentElement,e)}}function kr(t){return Mr().some(e=>t.matches(e))}var Dr=[];function Pr(t){Dr.push(t)}var ti=1;function S(t,e=$,r=()=>{}){L(t,n=>n._x_ignore)||Er(()=>{e(t,(n,i)=>{n._x_marker||(r(n,i),Dr.forEach(o=>o(n,i)),gt(n,n.attributes).forEach(o=>o()),n._x_ignore||(n._x_marker=ti++),n._x_ignore&&i())})})}function j(t,e=$){e(t,r=>{sr(r),fe(r),delete r._x_marker})}function ei(){[["ui","dialog",["[x-dialog], [x-popover]"]],["anchor","anchor",["[x-anchor]"]],["sort","sort",["[x-sort]"]]].forEach(([e,r,n])=>{br(r)||n.some(i=>{if(document.querySelector(i))return w(`found "${i}", but missing ${e} plugin`),!0})})}var Oe=[],Ce=!1;function lt(t=()=>{}){return queueMicrotask(()=>{Ce||setTimeout(()=>{jt()})}),new Promise(e=>{Oe.push(()=>{t(),e()})})}function jt(){for(Ce=!1;Oe.length;)Oe.shift()()}function Ir(){Ce=!0}function xt(t,e){return Array.isArray(e)?$r(t,e.join(" ")):typeof e=="object"&&e!==null?ri(t,e):typeof e=="function"?xt(t,e()):$r(t,e)}function $r(t,e){let r=o=>o.split(" ").filter(Boolean),n=o=>o.split(" ").filter(s=>!t.classList.contains(s)).filter(Boolean),i=o=>(t.classList.add(...o),()=>{t.classList.remove(...o)});return e=e===!0?e="":e||"",i(n(e))}function ri(t,e){let r=a=>a.split(" ").filter(Boolean),n=Object.entries(e).flatMap(([a,c])=>c?r(a):!1).filter(Boolean),i=Object.entries(e).flatMap(([a,c])=>c?!1:r(a)).filter(Boolean),o=[],s=[];return i.forEach(a=>{t.classList.contains(a)&&(t.classList.remove(a),s.push(a))}),n.forEach(a=>{t.classList.contains(a)||(t.classList.add(a),o.push(a))}),()=>{s.forEach(a=>t.classList.add(a)),o.forEach(a=>t.classList.remove(a))}}function tt(t,e){return typeof e=="object"&&e!==null?ni(t,e):ii(t,e)}function ni(t,e){let r={};return Object.entries(e).forEach(([n,i])=>{r[n]=t.style[n],n.startsWith("--")||(n=oi(n)),t.style.setProperty(n,i)}),setTimeout(()=>{t.style.length===0&&t.removeAttribute("style")}),()=>{tt(t,r)}}function ii(t,e){let r=t.getAttribute("style",e);return t.setAttribute("style",e),()=>{t.setAttribute("style",r||"")}}function oi(t){return t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function yt(t,e=()=>{}){let r=!1;return function(){r?e.apply(this,arguments):(r=!0,t.apply(this,arguments))}}d("transition",(t,{value:e,modifiers:r,expression:n},{evaluate:i})=>{typeof n=="function"&&(n=i(n)),n!==!1&&(!n||typeof n=="boolean"?ai(t,r,e):si(t,n,e))});function si(t,e,r){Lr(t,xt,""),{enter:i=>{t._x_transition.enter.during=i},"enter-start":i=>{t._x_transition.enter.start=i},"enter-end":i=>{t._x_transition.enter.end=i},leave:i=>{t._x_transition.leave.during=i},"leave-start":i=>{t._x_transition.leave.start=i},"leave-end":i=>{t._x_transition.leave.end=i}}[r](e)}function ai(t,e,r){Lr(t,tt);let n=!e.includes("in")&&!e.includes("out")&&!r,i=n||e.includes("in")||["enter"].includes(r),o=n||e.includes("out")||["leave"].includes(r);e.includes("in")&&!n&&(e=e.filter((m,b)=>b<e.indexOf("out"))),e.includes("out")&&!n&&(e=e.filter((m,b)=>b>e.indexOf("out")));let s=!e.includes("opacity")&&!e.includes("scale"),a=s||e.includes("opacity"),c=s||e.includes("scale"),l=a?0:1,u=c?bt(e,"scale",95)/100:1,p=bt(e,"delay",0)/1e3,v=bt(e,"origin","center"),O="opacity, transform",R=bt(e,"duration",150)/1e3,_=bt(e,"duration",75)/1e3,f="cubic-bezier(0.4, 0.0, 0.2, 1)";i&&(t._x_transition.enter.during={transformOrigin:v,transitionDelay:`${p}s`,transitionProperty:O,transitionDuration:`${R}s`,transitionTimingFunction:f},t._x_transition.enter.start={opacity:l,transform:`scale(${u})`},t._x_transition.enter.end={opacity:1,transform:"scale(1)"}),o&&(t._x_transition.leave.during={transformOrigin:v,transitionDelay:`${p}s`,transitionProperty:O,transitionDuration:`${_}s`,transitionTimingFunction:f},t._x_transition.leave.start={opacity:1,transform:"scale(1)"},t._x_transition.leave.end={opacity:l,transform:`scale(${u})`})}function Lr(t,e,r={}){t._x_transition||(t._x_transition={enter:{during:r,start:r,end:r},leave:{during:r,start:r,end:r},in(n=()=>{},i=()=>{}){Ft(t,e,{during:this.enter.during,start:this.enter.start,end:this.enter.end},n,i)},out(n=()=>{},i=()=>{}){Ft(t,e,{during:this.leave.during,start:this.leave.start,end:this.leave.end},n,i)}})}window.Element.prototype._x_toggleAndCascadeWithTransitions=function(t,e,r,n){let i=document.visibilityState==="visible"?requestAnimationFrame:setTimeout,o=()=>i(r);if(e){t._x_transition&&(t._x_transition.enter||t._x_transition.leave)?t._x_transition.enter&&(Object.entries(t._x_transition.enter.during).length||Object.entries(t._x_transition.enter.start).length||Object.entries(t._x_transition.enter.end).length)?t._x_transition.in(r):o():t._x_transition?t._x_transition.in(r):o();return}t._x_hidePromise=t._x_transition?new Promise((s,a)=>{t._x_transition.out(()=>{},()=>s(n)),t._x_transitioning&&t._x_transitioning.beforeCancel(()=>a({isFromCancelledTransition:!0}))}):Promise.resolve(n),queueMicrotask(()=>{let s=jr(t);s?(s._x_hideChildren||(s._x_hideChildren=[]),s._x_hideChildren.push(t)):i(()=>{let a=c=>{let l=Promise.all([c._x_hidePromise,...(c._x_hideChildren||[]).map(a)]).then(([u])=>u?.());return delete c._x_hidePromise,delete c._x_hideChildren,l};a(t).catch(c=>{if(!c.isFromCancelledTransition)throw c})})})};function jr(t){let e=t.parentNode;if(e)return e._x_hidePromise?e:jr(e)}function Ft(t,e,{during:r,start:n,end:i}={},o=()=>{},s=()=>{}){if(t._x_transitioning&&t._x_transitioning.cancel(),Object.keys(r).length===0&&Object.keys(n).length===0&&Object.keys(i).length===0){o(),s();return}let a,c,l;ci(t,{start(){a=e(t,n)},during(){c=e(t,r)},before:o,end(){a(),l=e(t,i)},after:s,cleanup(){c(),l()}})}function ci(t,e){let r,n,i,o=yt(()=>{h(()=>{r=!0,n||e.before(),i||(e.end(),jt()),e.after(),t.isConnected&&e.cleanup(),delete t._x_transitioning})});t._x_transitioning={beforeCancels:[],beforeCancel(s){this.beforeCancels.push(s)},cancel:yt(function(){for(;this.beforeCancels.length;)this.beforeCancels.shift()();o()}),finish:o},h(()=>{e.start(),e.during()}),Ir(),requestAnimationFrame(()=>{if(r)return;let s=Number(getComputedStyle(t).transitionDuration.replace(/,.*/,"").replace("s",""))*1e3,a=Number(getComputedStyle(t).transitionDelay.replace(/,.*/,"").replace("s",""))*1e3;s===0&&(s=Number(getComputedStyle(t).animationDuration.replace("s",""))*1e3),h(()=>{e.before()}),n=!0,requestAnimationFrame(()=>{r||(h(()=>{e.end()}),jt(),setTimeout(t._x_transitioning.finish,s+a),i=!0)})})}function bt(t,e,r){if(t.indexOf(e)===-1)return r;let n=t[t.indexOf(e)+1];if(!n||e==="scale"&&isNaN(n))return r;if(e==="duration"||e==="delay"){let i=n.match(/([0-9]+)ms/);if(i)return i[1]}return e==="origin"&&["top","right","left","center","bottom"].includes(t[t.indexOf(e)+2])?[n,t[t.indexOf(e)+2]].join(" "):n}var F=!1;function A(t,e=()=>{}){return(...r)=>F?e(...r):t(...r)}function Fr(t){return(...e)=>F&&t(...e)}var Br=[];function q(t){Br.push(t)}function zr(t,e){Br.forEach(r=>r(t,e)),F=!0,Kr(()=>{S(e,(r,n)=>{n(r,()=>{})})}),F=!1}var Bt=!1;function Hr(t,e){e._x_dataStack||(e._x_dataStack=t._x_dataStack),F=!0,Bt=!0,Kr(()=>{li(e)}),F=!1,Bt=!1}function li(t){let e=!1;S(t,(n,i)=>{$(n,(o,s)=>{if(e&&kr(o))return s();e=!0,i(o,s)})})}function Kr(t){let e=D;ue((r,n)=>{let i=e(r);return z(i),()=>{}}),t(),ue(e)}function wt(t,e,r,n=[]){switch(t._x_bindings||(t._x_bindings=M({})),t._x_bindings[e]=r,e=n.includes("camel")?gi(e):e,e){case"value":ui(t,r);break;case"style":di(t,r);break;case"class":fi(t,r);break;case"selected":case"checked":pi(t,e,r);break;default:Ur(t,e,r);break}}function ui(t,e){if(Te(t))t.attributes.value===void 0&&(t.value=e),window.fromModel&&(typeof e=="boolean"?t.checked=Et(t.value)===e:t.checked=Vr(t.value,e));else if(zt(t))Number.isInteger(e)?t.value=e:!Array.isArray(e)&&typeof e!="boolean"&&![null,void 0].includes(e)?t.value=String(e):Array.isArray(e)?t.checked=e.some(r=>Vr(r,t.value)):t.checked=!!e;else if(t.tagName==="SELECT")_i(t,e);else{if(t.value===e)return;t.value=e===void 0?"":e}}function fi(t,e){t._x_undoAddedClasses&&t._x_undoAddedClasses(),t._x_undoAddedClasses=xt(t,e)}function di(t,e){t._x_undoAddedStyles&&t._x_undoAddedStyles(),t._x_undoAddedStyles=tt(t,e)}function pi(t,e,r){Ur(t,e,r),hi(t,e,r)}function Ur(t,e,r){[null,void 0,!1].includes(r)&&yi(e)?t.removeAttribute(e):(qr(e)&&(r=e),mi(t,e,r))}function mi(t,e,r){t.getAttribute(e)!=r&&t.setAttribute(e,r)}function hi(t,e,r){t[e]!==r&&(t[e]=r)}function _i(t,e){let r=[].concat(e).map(n=>n+"");Array.from(t.options).forEach(n=>{n.selected=r.includes(n.value)})}function gi(t){return t.toLowerCase().replace(/-(\w)/g,(e,r)=>r.toUpperCase())}function Vr(t,e){return t==e}function Et(t){return[1,"1","true","on","yes",!0].includes(t)?!0:[0,"0","false","off","no",!1].includes(t)?!1:t?Boolean(t):null}var xi=new Set(["allowfullscreen","async","autofocus","autoplay","checked","controls","default","defer","disabled","formnovalidate","inert","ismap","itemscope","loop","multiple","muted","nomodule","novalidate","open","playsinline","readonly","required","reversed","selected","shadowrootclonable","shadowrootdelegatesfocus","shadowrootserializable"]);function qr(t){return xi.has(t)}function yi(t){return!["aria-pressed","aria-checked","aria-expanded","aria-selected"].includes(t)}function Wr(t,e,r){return t._x_bindings&&t._x_bindings[e]!==void 0?t._x_bindings[e]:Jr(t,e,r)}function Gr(t,e,r,n=!0){if(t._x_bindings&&t._x_bindings[e]!==void 0)return t._x_bindings[e];if(t._x_inlineBindings&&t._x_inlineBindings[e]!==void 0){let i=t._x_inlineBindings[e];return i.extract=n,kt(()=>N(t,i.expression))}return Jr(t,e,r)}function Jr(t,e,r){let n=t.getAttribute(e);return n===null?typeof r=="function"?r():r:n===""?!0:qr(e)?!![e,"true"].includes(n):n}function zt(t){return t.type==="checkbox"||t.localName==="ui-checkbox"||t.localName==="ui-switch"}function Te(t){return t.type==="radio"||t.localName==="ui-radio"}function Ht(t,e){let r;return function(){let n=this,i=arguments,o=function(){r=null,t.apply(n,i)};clearTimeout(r),r=setTimeout(o,e)}}function Kt(t,e){let r;return function(){let n=this,i=arguments;r||(t.apply(n,i),r=!0,setTimeout(()=>r=!1,e))}}function Vt({get:t,set:e},{get:r,set:n}){let i=!0,o,s,a=D(()=>{let c=t(),l=r();if(i)n(Re(c)),i=!1;else{let u=JSON.stringify(c),p=JSON.stringify(l);u!==o?n(Re(c)):u!==p&&e(Re(l))}o=JSON.stringify(t()),s=JSON.stringify(r())});return()=>{z(a)}}function Re(t){return typeof t=="object"?JSON.parse(JSON.stringify(t)):t}function Yr(t){(Array.isArray(t)?t:[t]).forEach(r=>r(K))}var et={},Xr=!1;function Zr(t,e){if(Xr||(et=M(et),Xr=!0),e===void 0)return et[t];et[t]=e,ot(et[t]),typeof e=="object"&&e!==null&&e.hasOwnProperty("init")&&typeof e.init=="function"&&et[t].init()}function Qr(){return et}var tn={};function en(t,e){let r=typeof e!="function"?()=>e:e;return t instanceof Element?Me(t,r()):(tn[t]=r,()=>{})}function rn(t){return Object.entries(tn).forEach(([e,r])=>{Object.defineProperty(t,e,{get(){return(...n)=>r(...n)}})}),t}function Me(t,e,r){let n=[];for(;n.length;)n.pop()();let i=Object.entries(e).map(([s,a])=>({name:s,value:a})),o=Se(i);return i=i.map(s=>o.find(a=>a.name===s.name)?{name:`x-bind:${s.name}`,value:`"${s.value}"`}:s),gt(t,i,r).map(s=>{n.push(s.runCleanups),s()}),()=>{for(;n.length;)n.pop()()}}var nn={};function on(t,e){nn[t]=e}function sn(t,e){return Object.entries(nn).forEach(([r,n])=>{Object.defineProperty(t,r,{get(){return(...i)=>n.bind(e)(...i)},enumerable:!1})}),t}var bi={get reactive(){return M},get release(){return z},get effect(){return D},get raw(){return le},get transaction(){return er},version:"3.15.8",flushAndStopDeferringMutations:cr,dontAutoEvaluateFunctions:kt,disableEffectScheduling:Ze,startObservingMutations:mt,stopObservingMutations:me,setReactivityEngine:Qe,onAttributeRemoved:Rt,onAttributesAdded:Tt,closestDataStack:H,skipDuringClone:A,onlyDuringClone:Fr,addRootSelector:$t,addInitSelector:Lt,setErrorHandler:dr,interceptClone:q,addScopeToNode:P,deferMutations:ar,mapAttributes:ct,evaluateLater:x,interceptInit:Pr,initInterceptors:ot,injectMagics:U,setEvaluator:mr,setRawEvaluator:_r,mergeProxies:I,extractProp:Gr,findClosest:L,onElRemoved:it,closestRoot:Q,destroyTree:j,interceptor:Nt,transition:Ft,setStyles:tt,mutateDom:h,directive:d,entangle:Vt,throttle:Kt,debounce:Ht,evaluate:N,evaluateRaw:gr,initTree:S,nextTick:lt,prefixed:T,prefix:yr,plugin:Yr,magic:y,store:Zr,start:Tr,clone:Hr,cloneNode:zr,bound:Wr,$data:Mt,watch:Ot,walk:$,data:on,bind:en},K=bi;function Ne(t,e){let r=Object.create(null),n=t.split(",");for(let i=0;i<n.length;i++)r[n[i]]=!0;return e?i=>!!r[i.toLowerCase()]:i=>!!r[i]}var wi="itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly";var Gs=Ne(wi+",async,autofocus,autoplay,controls,default,defer,disabled,hidden,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected");var an=Object.freeze({}),Js=Object.freeze([]);var Ei=Object.prototype.hasOwnProperty,vt=(t,e)=>Ei.call(t,e),W=Array.isArray,ut=t=>cn(t)==="[object Map]";var vi=t=>typeof t=="string",Ut=t=>typeof t=="symbol",St=t=>t!==null&&typeof t=="object";var Si=Object.prototype.toString,cn=t=>Si.call(t),ke=t=>cn(t).slice(8,-1);var qt=t=>vi(t)&&t!=="NaN"&&t[0]!=="-"&&""+parseInt(t,10)===t;var Wt=t=>{let e=Object.create(null);return r=>e[r]||(e[r]=t(r))},Ai=/-(\w)/g,Ys=Wt(t=>t.replace(Ai,(e,r)=>r?r.toUpperCase():"")),Oi=/\B([A-Z])/g,Xs=Wt(t=>t.replace(Oi,"-$1").toLowerCase()),De=Wt(t=>t.charAt(0).toUpperCase()+t.slice(1)),Zs=Wt(t=>t?`on${De(t)}`:""),Pe=(t,e)=>t!==e&&(t===t||e===e);var Ie=new WeakMap,At=[],B,rt=Symbol("iterate"),$e=Symbol("Map key iterate");function Ci(t){return t&&t._isEffect===!0}function mn(t,e=an){Ci(t)&&(t=t.raw);let r=Ri(t,e);return e.lazy||r(),r}function hn(t){t.active&&(_n(t),t.options.onStop&&t.options.onStop(),t.active=!1)}var Ti=0;function Ri(t,e){let r=function(){if(!r.active)return t();if(!At.includes(r)){_n(r);try{return Ni(),At.push(r),B=r,t()}finally{At.pop(),gn(),B=At[At.length-1]}}};return r.id=Ti++,r.allowRecurse=!!e.allowRecurse,r._isEffect=!0,r.active=!0,r.raw=t,r.deps=[],r.options=e,r}function _n(t){let{deps:e}=t;if(e.length){for(let r=0;r<e.length;r++)e[r].delete(t);e.length=0}}var ft=!0,je=[];function Mi(){je.push(ft),ft=!1}function Ni(){je.push(ft),ft=!0}function gn(){let t=je.pop();ft=t===void 0?!0:t}function k(t,e,r){if(!ft||B===void 0)return;let n=Ie.get(t);n||Ie.set(t,n=new Map);let i=n.get(r);i||n.set(r,i=new Set),i.has(B)||(i.add(B),B.deps.push(i),B.options.onTrack&&B.options.onTrack({effect:B,target:t,type:e,key:r}))}function J(t,e,r,n,i,o){let s=Ie.get(t);if(!s)return;let a=new Set,c=u=>{u&&u.forEach(p=>{(p!==B||p.allowRecurse)&&a.add(p)})};if(e==="clear")s.forEach(c);else if(r==="length"&&W(t))s.forEach((u,p)=>{(p==="length"||p>=n)&&c(u)});else switch(r!==void 0&&c(s.get(r)),e){case"add":W(t)?qt(r)&&c(s.get("length")):(c(s.get(rt)),ut(t)&&c(s.get($e)));break;case"delete":W(t)||(c(s.get(rt)),ut(t)&&c(s.get($e)));break;case"set":ut(t)&&c(s.get(rt));break}let l=u=>{u.options.onTrigger&&u.options.onTrigger({effect:u,target:t,key:r,type:e,newValue:n,oldValue:i,oldTarget:o}),u.options.scheduler?u.options.scheduler(u):u()};a.forEach(l)}var ki=Ne("__proto__,__v_isRef,__isVue"),xn=new Set(Object.getOwnPropertyNames(Symbol).map(t=>Symbol[t]).filter(Ut)),Di=yn();var Pi=yn(!0);var ln=Ii();function Ii(){let t={};return["includes","indexOf","lastIndexOf"].forEach(e=>{t[e]=function(...r){let n=g(this);for(let o=0,s=this.length;o<s;o++)k(n,"get",o+"");let i=n[e](...r);return i===-1||i===!1?n[e](...r.map(g)):i}}),["push","pop","shift","unshift","splice"].forEach(e=>{t[e]=function(...r){Mi();let n=g(this)[e].apply(this,r);return gn(),n}}),t}function yn(t=!1,e=!1){return function(n,i,o){if(i==="__v_isReactive")return!t;if(i==="__v_isReadonly")return t;if(i==="__v_raw"&&o===(t?e?Xi:vn:e?Yi:En).get(n))return n;let s=W(n);if(!t&&s&&vt(ln,i))return Reflect.get(ln,i,o);let a=Reflect.get(n,i,o);return(Ut(i)?xn.has(i):ki(i))||(t||k(n,"get",i),e)?a:Le(a)?!s||!qt(i)?a.value:a:St(a)?t?Sn(a):te(a):a}}var $i=Li();function Li(t=!1){return function(r,n,i,o){let s=r[n];if(!t&&(i=g(i),s=g(s),!W(r)&&Le(s)&&!Le(i)))return s.value=i,!0;let a=W(r)&&qt(n)?Number(n)<r.length:vt(r,n),c=Reflect.set(r,n,i,o);return r===g(o)&&(a?Pe(i,s)&&J(r,"set",n,i,s):J(r,"add",n,i)),c}}function ji(t,e){let r=vt(t,e),n=t[e],i=Reflect.deleteProperty(t,e);return i&&r&&J(t,"delete",e,void 0,n),i}function Fi(t,e){let r=Reflect.has(t,e);return(!Ut(e)||!xn.has(e))&&k(t,"has",e),r}function Bi(t){return k(t,"iterate",W(t)?"length":rt),Reflect.ownKeys(t)}var zi={get:Di,set:$i,deleteProperty:ji,has:Fi,ownKeys:Bi},Hi={get:Pi,set(t,e){return console.warn(`Set operation on key "${String(e)}" failed: target is readonly.`,t),!0},deleteProperty(t,e){return console.warn(`Delete operation on key "${String(e)}" failed: target is readonly.`,t),!0}};var Fe=t=>St(t)?te(t):t,Be=t=>St(t)?Sn(t):t,ze=t=>t,Qt=t=>Reflect.getPrototypeOf(t);function Gt(t,e,r=!1,n=!1){t=t.__v_raw;let i=g(t),o=g(e);e!==o&&!r&&k(i,"get",e),!r&&k(i,"get",o);let{has:s}=Qt(i),a=n?ze:r?Be:Fe;if(s.call(i,e))return a(t.get(e));if(s.call(i,o))return a(t.get(o));t!==i&&t.get(e)}function Jt(t,e=!1){let r=this.__v_raw,n=g(r),i=g(t);return t!==i&&!e&&k(n,"has",t),!e&&k(n,"has",i),t===i?r.has(t):r.has(t)||r.has(i)}function Yt(t,e=!1){return t=t.__v_raw,!e&&k(g(t),"iterate",rt),Reflect.get(t,"size",t)}function un(t){t=g(t);let e=g(this);return Qt(e).has.call(e,t)||(e.add(t),J(e,"add",t,t)),this}function fn(t,e){e=g(e);let r=g(this),{has:n,get:i}=Qt(r),o=n.call(r,t);o?wn(r,n,t):(t=g(t),o=n.call(r,t));let s=i.call(r,t);return r.set(t,e),o?Pe(e,s)&&J(r,"set",t,e,s):J(r,"add",t,e),this}function dn(t){let e=g(this),{has:r,get:n}=Qt(e),i=r.call(e,t);i?wn(e,r,t):(t=g(t),i=r.call(e,t));let o=n?n.call(e,t):void 0,s=e.delete(t);return i&&J(e,"delete",t,void 0,o),s}function pn(){let t=g(this),e=t.size!==0,r=ut(t)?new Map(t):new Set(t),n=t.clear();return e&&J(t,"clear",void 0,void 0,r),n}function Xt(t,e){return function(n,i){let o=this,s=o.__v_raw,a=g(s),c=e?ze:t?Be:Fe;return!t&&k(a,"iterate",rt),s.forEach((l,u)=>n.call(i,c(l),c(u),o))}}function Zt(t,e,r){return function(...n){let i=this.__v_raw,o=g(i),s=ut(o),a=t==="entries"||t===Symbol.iterator&&s,c=t==="keys"&&s,l=i[t](...n),u=r?ze:e?Be:Fe;return!e&&k(o,"iterate",c?$e:rt),{next(){let{value:p,done:v}=l.next();return v?{value:p,done:v}:{value:a?[u(p[0]),u(p[1])]:u(p),done:v}},[Symbol.iterator](){return this}}}}function G(t){return function(...e){{let r=e[0]?`on key "${e[0]}" `:"";console.warn(`${De(t)} operation ${r}failed: target is readonly.`,g(this))}return t==="delete"?!1:this}}function Ki(){let t={get(o){return Gt(this,o)},get size(){return Yt(this)},has:Jt,add:un,set:fn,delete:dn,clear:pn,forEach:Xt(!1,!1)},e={get(o){return Gt(this,o,!1,!0)},get size(){return Yt(this)},has:Jt,add:un,set:fn,delete:dn,clear:pn,forEach:Xt(!1,!0)},r={get(o){return Gt(this,o,!0)},get size(){return Yt(this,!0)},has(o){return Jt.call(this,o,!0)},add:G("add"),set:G("set"),delete:G("delete"),clear:G("clear"),forEach:Xt(!0,!1)},n={get(o){return Gt(this,o,!0,!0)},get size(){return Yt(this,!0)},has(o){return Jt.call(this,o,!0)},add:G("add"),set:G("set"),delete:G("delete"),clear:G("clear"),forEach:Xt(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(o=>{t[o]=Zt(o,!1,!1),r[o]=Zt(o,!0,!1),e[o]=Zt(o,!1,!0),n[o]=Zt(o,!0,!0)}),[t,r,e,n]}var[Vi,Ui,qi,Wi]=Ki();function bn(t,e){let r=e?t?Wi:qi:t?Ui:Vi;return(n,i,o)=>i==="__v_isReactive"?!t:i==="__v_isReadonly"?t:i==="__v_raw"?n:Reflect.get(vt(r,i)&&i in n?r:n,i,o)}var Gi={get:bn(!1,!1)};var Ji={get:bn(!0,!1)};function wn(t,e,r){let n=g(r);if(n!==r&&e.call(t,n)){let i=ke(t);console.warn(`Reactive ${i} contains both the raw and reactive versions of the same object${i==="Map"?" as keys":""}, which can lead to inconsistencies. Avoid differentiating between the raw and reactive versions of an object and only use the reactive version if possible.`)}}var En=new WeakMap,Yi=new WeakMap,vn=new WeakMap,Xi=new WeakMap;function Zi(t){switch(t){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function Qi(t){return t.__v_skip||!Object.isExtensible(t)?0:Zi(ke(t))}function te(t){return t&&t.__v_isReadonly?t:An(t,!1,zi,Gi,En)}function Sn(t){return An(t,!0,Hi,Ji,vn)}function An(t,e,r,n,i){if(!St(t))return console.warn(`value cannot be made reactive: ${String(t)}`),t;if(t.__v_raw&&!(e&&t.__v_isReactive))return t;let o=i.get(t);if(o)return o;let s=Qi(t);if(s===0)return t;let a=new Proxy(t,s===2?n:r);return i.set(t,a),a}function g(t){return t&&g(t.__v_raw)||t}function Le(t){return Boolean(t&&t.__v_isRef===!0)}y("nextTick",()=>lt);y("dispatch",t=>Z.bind(Z,t));y("watch",(t,{evaluateLater:e,cleanup:r})=>(n,i)=>{let o=e(n),a=Ot(()=>{let c;return o(l=>c=l),c},i);r(a)});y("store",Qr);y("data",t=>Mt(t));y("root",t=>Q(t));y("refs",t=>(t._x_refs_proxy||(t._x_refs_proxy=I(to(t))),t._x_refs_proxy));function to(t){let e=[];return L(t,r=>{r._x_refs&&e.push(r._x_refs)}),e}var He={};function Ke(t){return He[t]||(He[t]=0),++He[t]}function On(t,e){return L(t,r=>{if(r._x_ids&&r._x_ids[e])return!0})}function Cn(t,e){t._x_ids||(t._x_ids={}),t._x_ids[e]||(t._x_ids[e]=Ke(e))}y("id",(t,{cleanup:e})=>(r,n=null)=>{let i=`${r}${n?`-${n}`:""}`;return eo(t,i,e,()=>{let o=On(t,r),s=o?o._x_ids[r]:Ke(r);return n?`${r}-${s}-${n}`:`${r}-${s}`})});q((t,e)=>{t._x_id&&(e._x_id=t._x_id)});function eo(t,e,r,n){if(t._x_id||(t._x_id={}),t._x_id[e])return t._x_id[e];let i=n();return t._x_id[e]=i,r(()=>{delete t._x_id[e]}),i}y("el",t=>t);Tn("Focus","focus","focus");Tn("Persist","persist","persist");function Tn(t,e,r){y(e,n=>w(`You can't use [$${e}] without first installing the "${t}" plugin here: https://alpinejs.dev/plugins/${r}`,n))}d("modelable",(t,{expression:e},{effect:r,evaluateLater:n,cleanup:i})=>{let o=n(e),s=()=>{let u;return o(p=>u=p),u},a=n(`${e} = __placeholder`),c=u=>a(()=>{},{scope:{__placeholder:u}}),l=s();c(l),queueMicrotask(()=>{if(!t._x_model)return;t._x_removeModelListeners.default();let u=t._x_model.get,p=t._x_model.set,v=Vt({get(){return u()},set(O){p(O)}},{get(){return s()},set(O){c(O)}});i(v)})});d("teleport",(t,{modifiers:e,expression:r},{cleanup:n})=>{t.tagName.toLowerCase()!=="template"&&w("x-teleport can only be used on a <template> tag",t);let i=Rn(r),o=t.content.cloneNode(!0).firstElementChild;t._x_teleport=o,o._x_teleportBack=t,t.setAttribute("data-teleport-template",!0),o.setAttribute("data-teleport-target",!0),t._x_forwardEvents&&t._x_forwardEvents.forEach(a=>{o.addEventListener(a,c=>{c.stopPropagation(),t.dispatchEvent(new c.constructor(c.type,c))})}),P(o,{},t);let s=(a,c,l)=>{l.includes("prepend")?c.parentNode.insertBefore(a,c):l.includes("append")?c.parentNode.insertBefore(a,c.nextSibling):c.appendChild(a)};h(()=>{s(o,i,e),A(()=>{S(o)})()}),t._x_teleportPutBack=()=>{let a=Rn(r);h(()=>{s(t._x_teleport,a,e)})},n(()=>h(()=>{o.remove(),j(o)}))});var ro=document.createElement("div");function Rn(t){let e=A(()=>document.querySelector(t),()=>ro)();return e||w(`Cannot find x-teleport element for selector: "${t}"`),e}var Mn=()=>{};Mn.inline=(t,{modifiers:e},{cleanup:r})=>{e.includes("self")?t._x_ignoreSelf=!0:t._x_ignore=!0,r(()=>{e.includes("self")?delete t._x_ignoreSelf:delete t._x_ignore})};d("ignore",Mn);d("effect",A((t,{expression:e},{effect:r})=>{r(x(t,e))}));function V(t,e,r,n){let i=t,o=c=>n(c),s={},a=(c,l)=>u=>l(c,u);if(r.includes("dot")&&(e=no(e)),r.includes("camel")&&(e=io(e)),r.includes("passive")&&(s.passive=!0),r.includes("capture")&&(s.capture=!0),r.includes("window")&&(i=window),r.includes("document")&&(i=document),r.includes("debounce")){let c=r[r.indexOf("debounce")+1]||"invalid-wait",l=ee(c.split("ms")[0])?Number(c.split("ms")[0]):250;o=Ht(o,l)}if(r.includes("throttle")){let c=r[r.indexOf("throttle")+1]||"invalid-wait",l=ee(c.split("ms")[0])?Number(c.split("ms")[0]):250;o=Kt(o,l)}return r.includes("prevent")&&(o=a(o,(c,l)=>{l.preventDefault(),c(l)})),r.includes("stop")&&(o=a(o,(c,l)=>{l.stopPropagation(),c(l)})),r.includes("once")&&(o=a(o,(c,l)=>{c(l),i.removeEventListener(e,o,s)})),(r.includes("away")||r.includes("outside"))&&(i=document,o=a(o,(c,l)=>{t.contains(l.target)||l.target.isConnected!==!1&&(t.offsetWidth<1&&t.offsetHeight<1||t._x_isShown!==!1&&c(l))})),r.includes("self")&&(o=a(o,(c,l)=>{l.target===t&&c(l)})),e==="submit"&&(o=a(o,(c,l)=>{l.target._x_pendingModelUpdates&&l.target._x_pendingModelUpdates.forEach(u=>u()),c(l)})),(so(e)||kn(e))&&(o=a(o,(c,l)=>{ao(l,r)||c(l)})),i.addEventListener(e,o,s),()=>{i.removeEventListener(e,o,s)}}function no(t){return t.replace(/-/g,".")}function io(t){return t.toLowerCase().replace(/-(\w)/g,(e,r)=>r.toUpperCase())}function ee(t){return!Array.isArray(t)&&!isNaN(t)}function oo(t){return[" ","_"].includes(t)?t:t.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[_\s]/,"-").toLowerCase()}function so(t){return["keydown","keyup"].includes(t)}function kn(t){return["contextmenu","click","mouse"].some(e=>t.includes(e))}function ao(t,e){let r=e.filter(o=>!["window","document","prevent","stop","once","capture","self","away","outside","passive","preserve-scroll","blur","change","lazy"].includes(o));if(r.includes("debounce")){let o=r.indexOf("debounce");r.splice(o,ee((r[o+1]||"invalid-wait").split("ms")[0])?2:1)}if(r.includes("throttle")){let o=r.indexOf("throttle");r.splice(o,ee((r[o+1]||"invalid-wait").split("ms")[0])?2:1)}if(r.length===0||r.length===1&&Nn(t.key).includes(r[0]))return!1;let i=["ctrl","shift","alt","meta","cmd","super"].filter(o=>r.includes(o));return r=r.filter(o=>!i.includes(o)),!(i.length>0&&i.filter(s=>((s==="cmd"||s==="super")&&(s="meta"),t[`${s}Key`])).length===i.length&&(kn(t.type)||Nn(t.key).includes(r[0])))}function Nn(t){if(!t)return[];t=oo(t);let e={ctrl:"control",slash:"/",space:" ",spacebar:" ",cmd:"meta",esc:"escape",up:"arrow-up",down:"arrow-down",left:"arrow-left",right:"arrow-right",period:".",comma:",",equal:"=",minus:"-",underscore:"_"};return e[t]=t,Object.keys(e).map(r=>{if(e[r]===t)return r}).filter(r=>r)}d("model",(t,{modifiers:e,expression:r},{effect:n,cleanup:i})=>{let o=t;e.includes("parent")&&(o=t.parentNode);let s=x(o,r),a;typeof r=="string"?a=x(o,`${r} = __placeholder`):typeof r=="function"&&typeof r()=="string"?a=x(o,`${r()} = __placeholder`):a=()=>{};let c=()=>{let _;return s(f=>_=f),Dn(_)?_.get():_},l=_=>{let f;s(m=>f=m),Dn(f)?f.set(_):a(()=>{},{scope:{__placeholder:_}})};typeof r=="string"&&t.type==="radio"&&h(()=>{t.hasAttribute("name")||t.setAttribute("name",r)});let u=e.includes("change")||e.includes("lazy"),p=e.includes("blur"),v=e.includes("enter"),O=u||p||v,R;if(F)R=()=>{};else if(O){let _=[],f=m=>l(re(t,e,m,c()));if(u&&_.push(V(t,"change",e,f)),p&&(_.push(V(t,"blur",e,f)),t.form)){let m=()=>f({target:t});t.form._x_pendingModelUpdates||(t.form._x_pendingModelUpdates=[]),t.form._x_pendingModelUpdates.push(m),i(()=>t.form._x_pendingModelUpdates.splice(t.form._x_pendingModelUpdates.indexOf(m),1))}v&&_.push(V(t,"keydown",e,m=>{m.key==="Enter"&&f(m)})),R=()=>_.forEach(m=>m())}else{let _=t.tagName.toLowerCase()==="select"||["checkbox","radio"].includes(t.type)?"change":"input";R=V(t,_,e,f=>{l(re(t,e,f,c()))})}if(e.includes("fill")&&([void 0,null,""].includes(c())||zt(t)&&Array.isArray(c())||t.tagName.toLowerCase()==="select"&&t.multiple)&&l(re(t,e,{target:t},c())),t._x_removeModelListeners||(t._x_removeModelListeners={}),t._x_removeModelListeners.default=R,i(()=>t._x_removeModelListeners.default()),t.form){let _=V(t.form,"reset",[],f=>{lt(()=>t._x_model&&t._x_model.set(re(t,e,{target:t},c())))});i(()=>_())}t._x_model={get(){return c()},set(_){l(_)}},t._x_forceModelUpdate=_=>{_===void 0&&typeof r=="string"&&r.match(/\./)&&(_=""),window.fromModel=!0,h(()=>wt(t,"value",_)),delete window.fromModel},n(()=>{let _=c();e.includes("unintrusive")&&document.activeElement.isSameNode(t)||t._x_forceModelUpdate(_)})});function re(t,e,r,n){return h(()=>{if(r instanceof CustomEvent&&r.detail!==void 0)return r.detail!==null&&r.detail!==void 0?r.detail:r.target.value;if(zt(t))if(Array.isArray(n)){let i=null;return e.includes("number")?i=Ve(r.target.value):e.includes("boolean")?i=Et(r.target.value):i=r.target.value,r.target.checked?n.includes(i)?n:n.concat([i]):n.filter(o=>!co(o,i))}else return r.target.checked;else{if(t.tagName.toLowerCase()==="select"&&t.multiple)return e.includes("number")?Array.from(r.target.selectedOptions).map(i=>{let o=i.value||i.text;return Ve(o)}):e.includes("boolean")?Array.from(r.target.selectedOptions).map(i=>{let o=i.value||i.text;return Et(o)}):Array.from(r.target.selectedOptions).map(i=>i.value||i.text);{let i;return Te(t)?r.target.checked?i=r.target.value:i=n:i=r.target.value,e.includes("number")?Ve(i):e.includes("boolean")?Et(i):e.includes("trim")?i.trim():i}}})}function Ve(t){let e=t?parseFloat(t):null;return lo(e)?e:t}function co(t,e){return t==e}function lo(t){return!Array.isArray(t)&&!isNaN(t)}function Dn(t){return t!==null&&typeof t=="object"&&typeof t.get=="function"&&typeof t.set=="function"}d("cloak",t=>queueMicrotask(()=>h(()=>t.removeAttribute(T("cloak")))));Lt(()=>`[${T("init")}]`);d("init",A((t,{expression:e},{evaluate:r})=>typeof e=="string"?!!e.trim()&&r(e,{},!1):r(e,{},!1)));d("text",(t,{expression:e},{effect:r,evaluateLater:n})=>{let i=n(e);r(()=>{i(o=>{h(()=>{t.textContent=o})})})});d("html",(t,{expression:e},{effect:r,evaluateLater:n})=>{let i=n(e);r(()=>{i(o=>{h(()=>{t.innerHTML=o,t._x_ignoreSelf=!0,S(t),delete t._x_ignoreSelf})})})});ct(Pt(":",It(T("bind:"))));var Pn=(t,{value:e,modifiers:r,expression:n,original:i},{effect:o,cleanup:s})=>{if(!e){let c={};rn(c),x(t,n)(u=>{Me(t,u,i)},{scope:c});return}if(e==="key")return uo(t,n);if(t._x_inlineBindings&&t._x_inlineBindings[e]&&t._x_inlineBindings[e].extract)return;let a=x(t,n);o(()=>a(c=>{c===void 0&&typeof n=="string"&&n.match(/\./)&&(c=""),h(()=>wt(t,e,c,r))})),s(()=>{t._x_undoAddedClasses&&t._x_undoAddedClasses(),t._x_undoAddedStyles&&t._x_undoAddedStyles()})};Pn.inline=(t,{value:e,modifiers:r,expression:n})=>{e&&(t._x_inlineBindings||(t._x_inlineBindings={}),t._x_inlineBindings[e]={expression:n,extract:!1})};d("bind",Pn);function uo(t,e){t._x_keyExpression=e}$t(()=>`[${T("data")}]`);d("data",(t,{expression:e},{cleanup:r})=>{if(fo(t))return;e=e===""?"{}":e;let n={};U(n,t);let i={};sn(i,n);let o=N(t,e,{scope:i});(o===void 0||o===!0)&&(o={}),U(o,t);let s=M(o);ot(s);let a=P(t,s);s.init&&N(t,s.init),r(()=>{s.destroy&&N(t,s.destroy),a()})});q((t,e)=>{t._x_dataStack&&(e._x_dataStack=t._x_dataStack,e.setAttribute("data-has-alpine-state",!0))});function fo(t){return F?Bt?!0:t.hasAttribute("data-has-alpine-state"):!1}d("show",(t,{modifiers:e,expression:r},{effect:n})=>{let i=x(t,r);t._x_doHide||(t._x_doHide=()=>{h(()=>{t.style.setProperty("display","none",e.includes("important")?"important":void 0)})}),t._x_doShow||(t._x_doShow=()=>{h(()=>{t.style.length===1&&t.style.display==="none"?t.removeAttribute("style"):t.style.removeProperty("display")})});let o=()=>{t._x_doHide(),t._x_isShown=!1},s=()=>{t._x_doShow(),t._x_isShown=!0},a=()=>setTimeout(s),c=yt(p=>p?s():o(),p=>{typeof t._x_toggleAndCascadeWithTransitions=="function"?t._x_toggleAndCascadeWithTransitions(t,p,s,o):p?a():o()}),l,u=!0;n(()=>i(p=>{!u&&p===l||(e.includes("immediate")&&(p?a():o()),c(p),l=p,u=!1)}))});d("for",(t,{expression:e},{effect:r,cleanup:n})=>{let i=mo(e),o=x(t,i.items),s=x(t,t._x_keyExpression||"index");t._x_prevKeys=[],t._x_lookup={},r(()=>po(t,i,o,s)),n(()=>{Object.values(t._x_lookup).forEach(a=>h(()=>{j(a),a.remove()})),delete t._x_prevKeys,delete t._x_lookup})});function po(t,e,r,n){let i=s=>typeof s=="object"&&!Array.isArray(s),o=t;r(s=>{ho(s)&&s>=0&&(s=Array.from(Array(s).keys(),f=>f+1)),s===void 0&&(s=[]);let a=t._x_lookup,c=t._x_prevKeys,l=[],u=[];if(i(s))s=Object.entries(s).map(([f,m])=>{let b=In(e,m,f,s);n(E=>{u.includes(E)&&w("Duplicate key on x-for",t),u.push(E)},{scope:{index:f,...b}}),l.push(b)});else for(let f=0;f<s.length;f++){let m=In(e,s[f],f,s);n(b=>{u.includes(b)&&w("Duplicate key on x-for",t),u.push(b)},{scope:{index:f,...m}}),l.push(m)}let p=[],v=[],O=[],R=[];for(let f=0;f<c.length;f++){let m=c[f];u.indexOf(m)===-1&&O.push(m)}c=c.filter(f=>!O.includes(f));let _="template";for(let f=0;f<u.length;f++){let m=u[f],b=c.indexOf(m);if(b===-1)c.splice(f,0,m),p.push([_,f]);else if(b!==f){let E=c.splice(f,1)[0],C=c.splice(b-1,1)[0];c.splice(f,0,C),c.splice(b,0,E),v.push([E,C])}else R.push(m);_=m}for(let f=0;f<O.length;f++){let m=O[f];m in a&&(h(()=>{j(a[m]),a[m].remove()}),delete a[m])}for(let f=0;f<v.length;f++){let[m,b]=v[f],E=a[m],C=a[b],nt=document.createElement("div");h(()=>{C||w('x-for ":key" is undefined or invalid',o,b,a),C.after(nt),E.after(C),C._x_currentIfEl&&C.after(C._x_currentIfEl),nt.before(E),E._x_currentIfEl&&E.after(E._x_currentIfEl),nt.remove()}),C._x_refreshXForScope(l[u.indexOf(b)])}for(let f=0;f<p.length;f++){let[m,b]=p[f],E=m==="template"?o:a[m];E._x_currentIfEl&&(E=E._x_currentIfEl);let C=l[b],nt=u[b],dt=document.importNode(o.content,!0).firstElementChild,qe=M(C);P(dt,qe,o),dt._x_refreshXForScope=Ln=>{Object.entries(Ln).forEach(([jn,Fn])=>{qe[jn]=Fn})},h(()=>{E.after(dt),A(()=>S(dt))()}),typeof nt=="object"&&w("x-for key cannot be an object, it must be a string or an integer",o),a[nt]=dt}for(let f=0;f<R.length;f++)a[R[f]]._x_refreshXForScope(l[u.indexOf(R[f])]);o._x_prevKeys=u})}function mo(t){let e=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,r=/^\s*\(|\)\s*$/g,n=/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/,i=t.match(n);if(!i)return;let o={};o.items=i[2].trim();let s=i[1].replace(r,"").trim(),a=s.match(e);return a?(o.item=s.replace(e,"").trim(),o.index=a[1].trim(),a[2]&&(o.collection=a[2].trim())):o.item=s,o}function In(t,e,r,n){let i={};return/^\[.*\]$/.test(t.item)&&Array.isArray(e)?t.item.replace("[","").replace("]","").split(",").map(s=>s.trim()).forEach((s,a)=>{i[s]=e[a]}):/^\{.*\}$/.test(t.item)&&!Array.isArray(e)&&typeof e=="object"?t.item.replace("{","").replace("}","").split(",").map(s=>s.trim()).forEach(s=>{i[s]=e[s]}):i[t.item]=e,t.index&&(i[t.index]=r),t.collection&&(i[t.collection]=n),i}function ho(t){return!Array.isArray(t)&&!isNaN(t)}function $n(){}$n.inline=(t,{expression:e},{cleanup:r})=>{let n=Q(t);n._x_refs||(n._x_refs={}),n._x_refs[e]=t,r(()=>delete n._x_refs[e])};d("ref",$n);d("if",(t,{expression:e},{effect:r,cleanup:n})=>{t.tagName.toLowerCase()!=="template"&&w("x-if can only be used on a <template> tag",t);let i=x(t,e),o=()=>{if(t._x_currentIfEl)return t._x_currentIfEl;let a=t.content.cloneNode(!0).firstElementChild;return P(a,{},t),h(()=>{t.after(a),A(()=>S(a))()}),t._x_currentIfEl=a,t._x_undoIf=()=>{h(()=>{j(a),a.remove()}),delete t._x_currentIfEl},a},s=()=>{t._x_undoIf&&(t._x_undoIf(),delete t._x_undoIf)};r(()=>i(a=>{a?o():s()})),n(()=>t._x_undoIf&&t._x_undoIf())});d("id",(t,{expression:e},{evaluate:r})=>{r(e).forEach(i=>Cn(t,i))});q((t,e)=>{t._x_ids&&(e._x_ids=t._x_ids)});ct(Pt("@",It(T("on:"))));d("on",A((t,{value:e,modifiers:r,expression:n},{cleanup:i})=>{let o=n?x(t,n):()=>{};t.tagName.toLowerCase()==="template"&&(t._x_forwardEvents||(t._x_forwardEvents=[]),t._x_forwardEvents.includes(e)||t._x_forwardEvents.push(e));let s=V(t,e,r,a=>{o(()=>{},{scope:{$event:a},params:[a]})});i(()=>s())}));ne("Collapse","collapse","collapse");ne("Intersect","intersect","intersect");ne("Focus","trap","focus");ne("Mask","mask","mask");function ne(t,e,r){d(e,n=>w(`You can't use [x-${e}] without first installing the "${t}" plugin here: https://alpinejs.dev/plugins/${r}`,n))}K.setEvaluator(be);K.setRawEvaluator(xr);K.setReactivityEngine({reactive:te,effect:mn,release:hn,raw:g});var Ue=K;window.Alpine=Ue;queueMicrotask(()=>{Ue.start()});})();
diff --git a/js/vendor/lite-yt-embed.js b/js/vendor/lite-yt-embed.js
new file mode 100644
index 0000000..49db80e
--- /dev/null
+++ b/js/vendor/lite-yt-embed.js
@@ -0,0 +1,225 @@
+/**
+ * A lightweight youtube embed. Still should feel the same to the user, just MUCH faster to initialize and paint.
+ *
+ * Thx to these as the inspiration
+ *   https://storage.googleapis.com/amp-vs-non-amp/youtube-lazy.html
+ *   https://autoplay-youtube-player.glitch.me/
+ *
+ * Once built it, I also found these:
+ *   https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube (👍👍)
+ *   https://github.com/Daugilas/lazyYT
+ *   https://github.com/vb/lazyframe
+ */
+class LiteYTEmbed extends HTMLElement {
+    connectedCallback() {
+        this.videoId = this.getAttribute('videoid');
+
+        let playBtnEl = this.querySelector('.lty-playbtn');
+        // A label for the button takes priority over a [playlabel] attribute on the custom-element
+        this.playLabel = (playBtnEl && playBtnEl.textContent.trim()) || this.getAttribute('playlabel') || 'Play';
+
+        this.dataset.title = this.getAttribute('title') || "";
+
+        /**
+         * Lo, the youtube poster image!  (aka the thumbnail, image placeholder, etc)
+         *
+         * See https://github.com/paulirish/lite-youtube-embed/blob/master/youtube-thumbnail-urls.md
+         */
+        if (!this.style.backgroundImage) {
+          this.style.backgroundImage = `url("https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg")`;
+          this.upgradePosterImage();
+        }
+
+        // Set up play button, and its visually hidden label
+        if (!playBtnEl) {
+            playBtnEl = document.createElement('button');
+            playBtnEl.type = 'button';
+            playBtnEl.classList.add('lty-playbtn');
+            this.append(playBtnEl);
+        }
+        if (!playBtnEl.textContent) {
+            const playBtnLabelEl = document.createElement('span');
+            playBtnLabelEl.className = 'lyt-visually-hidden';
+            playBtnLabelEl.textContent = this.playLabel;
+            playBtnEl.append(playBtnLabelEl);
+        }
+
+        this.addNoscriptIframe();
+
+        playBtnEl.removeAttribute('href');
+
+        // On hover (or tap), warm up the TCP connections we're (likely) about to use.
+        this.addEventListener('pointerover', LiteYTEmbed.warmConnections, {once: true});
+
+        // Once the user clicks, add the real iframe and drop our play button
+        // TODO: In the future we could be like amp-youtube and silently swap in the iframe during idle time
+        //   We'd want to only do this for in-viewport or near-viewport ones: https://github.com/ampproject/amphtml/pull/5003
+        this.addEventListener('click', this.activate);
+
+        // Chrome & Edge desktop have no problem with the basic YouTube Embed with ?autoplay=1
+        // However Safari desktop and most/all mobile browsers do not successfully track the user gesture of clicking through the creation/loading of the iframe,
+        // so they don't autoplay automatically. Instead we must load an additional 2 sequential JS files (1KB + 165KB) (un-br) for the YT Player API
+        // TODO: Try loading the the YT API in parallel with our iframe and then attaching/playing it. #82
+        this.needsYTApi = this.hasAttribute("js-api") || navigator.vendor.includes('Apple') || navigator.userAgent.includes('Mobi');
+    }
+
+    /**
+     * Add a <link rel={preload | preconnect} ...> to the head
+     */
+    static addPrefetch(kind, url, as) {
+        const linkEl = document.createElement('link');
+        linkEl.rel = kind;
+        linkEl.href = url;
+        if (as) {
+            linkEl.as = as;
+        }
+        document.head.append(linkEl);
+    }
+
+    /**
+     * Begin pre-connecting to warm up the iframe load
+     * Since the embed's network requests load within its iframe,
+     *   preload/prefetch'ing them outside the iframe will only cause double-downloads.
+     * So, the best we can do is warm up a few connections to origins that are in the critical path.
+     *
+     * Maybe `<link rel=preload as=document>` would work, but it's unsupported: http://crbug.com/593267
+     * But TBH, I don't think it'll happen soon with Site Isolation and split caches adding serious complexity.
+     */
+    static warmConnections() {
+        if (LiteYTEmbed.preconnected) return;
+
+        // The iframe document and most of its subresources come right off youtube.com
+        LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube-nocookie.com');
+        // The botguard script is fetched off from google.com
+        LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com');
+
+        // Not certain if these ad related domains are in the critical path. Could verify with domain-specific throttling.
+        LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net');
+        LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net');
+
+        LiteYTEmbed.preconnected = true;
+    }
+
+    fetchYTPlayerApi() {
+        if (window.YT || (window.YT && window.YT.Player)) return;
+
+        this.ytApiPromise = new Promise((res, rej) => {
+            var el = document.createElement('script');
+            el.src = 'https://www.youtube.com/iframe_api';
+            el.async = true;
+            el.onload = _ => {
+                YT.ready(res);
+            };
+            el.onerror = rej;
+            this.append(el);
+        });
+    }
+
+    /** Return the YT Player API instance. (Public L-YT-E API) */
+    async getYTPlayer() {
+        if(!this.playerPromise) {
+            await this.activate();
+        }
+
+        return this.playerPromise;
+    }
+
+    async addYTPlayerIframe() {
+        this.fetchYTPlayerApi();
+        await this.ytApiPromise;
+
+        const videoPlaceholderEl = document.createElement('div')
+        this.append(videoPlaceholderEl);
+
+        const paramsObj = Object.fromEntries(this.getParams().entries());
+
+        this.playerPromise = new Promise(resolve => {
+            let player = new YT.Player(videoPlaceholderEl, {
+                width: '100%',
+                videoId: this.videoId,
+                playerVars: paramsObj,
+                events: {
+                    'onReady': event => {
+                        event.target.playVideo();
+                        resolve(player);
+                    }
+                }
+            });
+        });
+    }
+
+    // Add the iframe within <noscript> for indexability discoverability. See https://github.com/paulirish/lite-youtube-embed/issues/105
+    addNoscriptIframe() {
+        const iframeEl = this.createBasicIframe();
+        const noscriptEl = document.createElement('noscript');
+        // Appending into noscript isn't equivalant for mysterious reasons: https://html.spec.whatwg.org/multipage/scripting.html#the-noscript-element
+        noscriptEl.innerHTML = iframeEl.outerHTML;
+        this.append(noscriptEl);
+    }
+
+    getParams() {
+        const params = new URLSearchParams(this.getAttribute('params') || []);
+        params.append('autoplay', '1');
+        params.append('playsinline', '1');
+        return params;
+    }
+
+    async activate(){
+        if (this.classList.contains('lyt-activated')) return;
+        this.classList.add('lyt-activated');
+
+        if (this.needsYTApi) {
+            return this.addYTPlayerIframe(this.getParams());
+        }
+
+        const iframeEl = this.createBasicIframe();
+        this.append(iframeEl);
+
+        // Set focus for a11y
+        iframeEl.focus();
+    }
+
+    createBasicIframe(){
+        const iframeEl = document.createElement('iframe');
+        iframeEl.width = 560;
+        iframeEl.height = 315;
+        // No encoding necessary as [title] is safe. https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#:~:text=Safe%20HTML%20Attributes%20include
+        iframeEl.title = this.playLabel;
+        iframeEl.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
+        iframeEl.allowFullscreen = true;
+        // AFAIK, the encoding here isn't necessary for XSS, but we'll do it only because this is a URL
+        // https://stackoverflow.com/q/64959723/89484
+        iframeEl.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(this.videoId)}?${this.getParams().toString()}`;
+        return iframeEl;
+    }
+
+    /**
+     * In the spirit of the `lowsrc` attribute and progressive JPEGs, we'll upgrade the reliable
+     * poster image to a higher resolution one, if it's available.
+     * Interestingly this sddefault webp is often smaller in filesize, but we will still attempt it second
+     * because getting _an_ image in front of the user if our first priority.
+     *
+     * See https://github.com/paulirish/lite-youtube-embed/blob/master/youtube-thumbnail-urls.md for more details
+     */
+    upgradePosterImage() {
+         // Defer to reduce network contention.
+        setTimeout(() => {
+            const webpUrl = `https://i.ytimg.com/vi_webp/${this.videoId}/sddefault.webp`;
+            const img = new Image();
+            img.fetchPriority = 'low'; // low priority to reduce network contention
+            img.referrerpolicy = 'origin'; // Not 100% sure it's needed, but https://github.com/ampproject/amphtml/pull/3940
+            img.src = webpUrl;
+            img.onload = e => {
+                // A pretty ugly hack since onerror won't fire on YouTube image 404. This is (probably) due to
+                // Youtube's style of returning data even with a 404 status. That data is a 120x90 placeholder image.
+                // … per "annoying yt 404 behavior" in the .md
+                const noAvailablePoster = e.target.naturalHeight == 90 && e.target.naturalWidth == 120;
+                if (noAvailablePoster) return;
+
+                this.style.backgroundImage = `url("${webpUrl}")`;
+            }
+        }, 100);
+    }
+}
+// Register custom element
+customElements.define('lite-youtube', LiteYTEmbed);
diff --git a/js/webmentions.js b/js/webmentions.js
new file mode 100644
index 0000000..7c6454c
--- /dev/null
+++ b/js/webmentions.js
@@ -0,0 +1,467 @@
+/**
+ * Client-side webmention fetcher
+ * Supplements build-time cached webmentions with real-time data from proxy API
+ */
+
+(function () {
+  const container = document.querySelector('[data-webmentions]');
+  if (!container) return;
+
+  const target = container.dataset.target;
+  const domain = container.dataset.domain;
+  const buildTime = parseInt(container.dataset.buildtime, 10) || 0;
+
+  if (!target || !domain) return;
+
+  // Use server-side proxy to keep webmention.io token secure
+  // Fetch both with and without trailing slash since webmention.io
+  // stores targets inconsistently (Bridgy sends different formats)
+  const targetWithSlash = target.endsWith('/') ? target : target + '/';
+  const targetWithoutSlash = target.endsWith('/') ? target.slice(0, -1) : target;
+  const apiUrl1 = `/webmentions/api/mentions?target=${encodeURIComponent(targetWithSlash)}&per-page=100`;
+  const apiUrl2 = `/webmentions/api/mentions?target=${encodeURIComponent(targetWithoutSlash)}&per-page=100`;
+
+  // Check if build-time webmentions section exists
+  const hasBuildTimeSection = document.getElementById('webmentions') !== null;
+
+  // Cache API responses in sessionStorage (5 min TTL) so webmentions
+  // persist across page refreshes without re-fetching every time
+  const cacheKey = `wm-data-${target}`;
+  const cacheTTL = 5 * 60 * 1000; // 5 minutes
+
+  function getCachedData() {
+    try {
+      const cached = sessionStorage.getItem(cacheKey);
+      if (!cached) return null;
+      const parsed = JSON.parse(cached);
+      if (Date.now() - parsed.ts > cacheTTL) {
+        sessionStorage.removeItem(cacheKey);
+        return null;
+      }
+      return parsed.children;
+    } catch {
+      return null;
+    }
+  }
+
+  function setCachedData(children) {
+    try {
+      sessionStorage.setItem(cacheKey, JSON.stringify({ ts: Date.now(), children: children }));
+    } catch {
+      // sessionStorage full or unavailable - no problem
+    }
+  }
+
+  function processWebmentions(allChildren) {
+    if (!allChildren || !allChildren.length) return;
+
+    let mentionsToShow;
+    if (hasBuildTimeSection) {
+      // Build-time section exists - only show NEW webmentions to avoid duplicates.
+      // Both webmention.io and conversations items are included at build time,
+      // so filter all by timestamp (only show items received after the build).
+      mentionsToShow = allChildren.filter((wm) => {
+        const wmTime = new Date(wm['wm-received']).getTime();
+        return wmTime > buildTime;
+      });
+    } else {
+      // No build-time section - show ALL webmentions from API
+      mentionsToShow = allChildren;
+    }
+
+    if (!mentionsToShow.length) return;
+
+    // Group by type
+    const likes = mentionsToShow.filter((m) => m['wm-property'] === 'like-of');
+    const reposts = mentionsToShow.filter((m) => m['wm-property'] === 'repost-of');
+    const replies = mentionsToShow.filter((m) => m['wm-property'] === 'in-reply-to');
+    const mentions = mentionsToShow.filter((m) => m['wm-property'] === 'mention-of');
+
+    // Append new likes
+    if (likes.length) {
+      appendAvatars('.webmention-likes .facepile, .webmention-likes .avatar-row', likes, 'likes');
+      updateCount('.webmention-likes h3', likes.length, 'Like');
+    }
+
+    // Append new reposts
+    if (reposts.length) {
+      appendAvatars('.webmention-reposts .facepile, .webmention-reposts .avatar-row', reposts, 'reposts');
+      updateCount('.webmention-reposts h3', reposts.length, 'Repost');
+    }
+
+    // Append new replies
+    if (replies.length) {
+      appendReplies('.webmention-replies ul', replies);
+      updateCount('.webmention-replies h3', replies.length, 'Repl', 'ies', 'y');
+    }
+
+    // Append new mentions
+    if (mentions.length) {
+      appendMentions('.webmention-mentions ul', mentions);
+      updateCount('.webmention-mentions h3', mentions.length, 'Mention');
+    }
+
+    // Update total count in main header
+    updateTotalCount(mentionsToShow.length);
+  }
+
+  // Try cached data first (renders instantly on refresh)
+  const cached = getCachedData();
+  if (cached) {
+    processWebmentions(cached);
+  }
+
+  // Conversations API URLs (dual-fetch for enriched data)
+  const convApiUrl1 = `/conversations/api/mentions?target=${encodeURIComponent(targetWithSlash)}&per-page=100`;
+  const convApiUrl2 = `/conversations/api/mentions?target=${encodeURIComponent(targetWithoutSlash)}&per-page=100`;
+
+  // Always fetch fresh data from both APIs (updates cache for next refresh)
+  Promise.all([
+    fetch(apiUrl1).then((res) => res.json()).catch(() => ({ children: [] })),
+    fetch(apiUrl2).then((res) => res.json()).catch(() => ({ children: [] })),
+    fetch(convApiUrl1).then((res) => res.ok ? res.json() : { children: [] }).catch(() => ({ children: [] })),
+    fetch(convApiUrl2).then((res) => res.ok ? res.json() : { children: [] }).catch(() => ({ children: [] })),
+  ])
+    .then(([wmData1, wmData2, convData1, convData2]) => {
+      // Collect all items from both APIs
+      const wmItems = [...(wmData1.children || []), ...(wmData2.children || [])];
+      const convItems = [...(convData1.children || []), ...(convData2.children || [])];
+
+      // Build dedup sets from conversations items (richer metadata, take priority)
+      const convUrls = new Set(convItems.map(c => c.url).filter(Boolean));
+      const seen = new Set();
+      const allChildren = [];
+
+      // Add conversations items first (they have platform provenance)
+      for (const wm of convItems) {
+        const key = wm['wm-id'] || wm.url;
+        if (key && !seen.has(key)) {
+          seen.add(key);
+          allChildren.push(wm);
+        }
+      }
+
+      // Build set of author+action keys from conversations for cross-source dedup
+      const authorActions = new Set();
+      for (const wm of convItems) {
+        const authorUrl = (wm.author && wm.author.url) || wm.url || '';
+        const action = wm['wm-property'] || 'mention';
+        if (authorUrl) authorActions.add(authorUrl + '::' + action);
+      }
+
+      // Add webmention-io items, skipping duplicates
+      for (const wm of wmItems) {
+        const key = wm['wm-id'];
+        if (seen.has(key)) continue;
+        // Also skip if same source URL exists in conversations
+        if (wm.url && convUrls.has(wm.url)) continue;
+        // Skip if same author + same action type already from conversations
+        const authorUrl = (wm.author && wm.author.url) || wm.url || '';
+        const action = wm['wm-property'] || 'mention';
+        if (authorUrl && authorActions.has(authorUrl + '::' + action)) continue;
+        seen.add(key);
+        allChildren.push(wm);
+      }
+
+      // Cache the merged results
+      setCachedData(allChildren);
+
+      // Only render if we didn't already render from cache
+      if (!cached) {
+        processWebmentions(allChildren);
+      }
+    })
+    .catch((err) => {
+      console.debug('[Webmentions] Error fetching:', err.message);
+    });
+
+  function appendAvatars(selector, items, type) {
+    let row = document.querySelector(selector);
+
+    // Create section if it doesn't exist
+    if (!row) {
+      const section = createAvatarSection(type);
+      let webmentionsSection = document.getElementById('webmentions');
+      if (!webmentionsSection) {
+        createWebmentionsSection();
+        webmentionsSection = document.getElementById('webmentions');
+      }
+      if (webmentionsSection) {
+        webmentionsSection.appendChild(section);
+        row = section.querySelector('.facepile');
+      }
+    }
+
+    if (!row) return;
+
+    items.forEach((item) => {
+      const author = item.author || {};
+
+      const link = document.createElement('a');
+      link.href = author.url || '#';
+      link.className = 'facepile-avatar';
+      link.title = author.name || 'Anonymous';
+      link.target = '_blank';
+      link.rel = 'noopener';
+      link.dataset.new = 'true';
+
+      const img = document.createElement('img');
+      img.src = author.photo || '/images/default-avatar.svg';
+      img.alt = author.name || 'Anonymous';
+      img.className = 'w-8 h-8 rounded-full ring-2 ring-white dark:ring-surface-900';
+      img.loading = 'lazy';
+
+      link.appendChild(img);
+      row.appendChild(link);
+    });
+  }
+
+  function appendReplies(selector, items) {
+    let list = document.querySelector(selector);
+
+    // Create section if it doesn't exist
+    if (!list) {
+      const section = createReplySection();
+      let webmentionsSection = document.getElementById('webmentions');
+      if (!webmentionsSection) {
+        createWebmentionsSection();
+        webmentionsSection = document.getElementById('webmentions');
+      }
+      if (webmentionsSection) {
+        webmentionsSection.appendChild(section);
+        list = section.querySelector('ul');
+      }
+    }
+
+    if (!list) return;
+
+    items.forEach((item) => {
+      const author = item.author || {};
+      const content = item.content || {};
+      const published = item.published || item['wm-received'];
+
+      const li = document.createElement('li');
+      li.className = 'p-4 bg-surface-100 dark:bg-surface-800 rounded-lg ring-2 ring-accent-500';
+      li.dataset.new = 'true';
+
+      // Build reply card using DOM methods
+      const wrapper = document.createElement('div');
+      wrapper.className = 'flex gap-3';
+
+      // Avatar link
+      const avatarLink = document.createElement('a');
+      avatarLink.href = author.url || '#';
+      avatarLink.target = '_blank';
+      avatarLink.rel = 'noopener';
+
+      const avatarImg = document.createElement('img');
+      avatarImg.src = author.photo || '/images/default-avatar.svg';
+      avatarImg.alt = author.name || 'Anonymous';
+      avatarImg.className = 'w-10 h-10 rounded-full';
+      avatarImg.loading = 'lazy';
+      avatarLink.appendChild(avatarImg);
+
+      // Content area
+      const contentDiv = document.createElement('div');
+      contentDiv.className = 'flex-1 min-w-0';
+
+      // Header row
+      const headerDiv = document.createElement('div');
+      headerDiv.className = 'flex items-baseline gap-2 mb-1';
+
+      const authorLink = document.createElement('a');
+      authorLink.href = author.url || '#';
+      authorLink.className = 'font-semibold text-surface-900 dark:text-surface-100 hover:underline';
+      authorLink.target = '_blank';
+      authorLink.rel = 'noopener';
+      authorLink.textContent = author.name || 'Anonymous';
+
+      const dateLink = document.createElement('a');
+      dateLink.href = item.url || '#';
+      dateLink.className = 'text-xs text-surface-500 hover:underline';
+      dateLink.target = '_blank';
+      dateLink.rel = 'noopener';
+
+      const timeEl = document.createElement('time');
+      timeEl.dateTime = published;
+      timeEl.textContent = formatDate(published);
+      dateLink.appendChild(timeEl);
+
+      const newBadge = document.createElement('span');
+      newBadge.className = 'text-xs text-accent-600 dark:text-accent-400 font-medium';
+      newBadge.textContent = 'NEW';
+
+      headerDiv.appendChild(authorLink);
+      headerDiv.appendChild(dateLink);
+      headerDiv.appendChild(newBadge);
+
+      // Reply content - use textContent for safety
+      const replyDiv = document.createElement('div');
+      replyDiv.className = 'text-surface-700 dark:text-surface-300 prose dark:prose-invert prose-sm max-w-none';
+      replyDiv.textContent = content.text || '';
+
+      contentDiv.appendChild(headerDiv);
+      contentDiv.appendChild(replyDiv);
+
+      wrapper.appendChild(avatarLink);
+      wrapper.appendChild(contentDiv);
+      li.appendChild(wrapper);
+
+      // Prepend to show newest first
+      list.insertBefore(li, list.firstChild);
+    });
+  }
+
+  function appendMentions(selector, items) {
+    let list = document.querySelector(selector);
+
+    if (!list) {
+      const section = createMentionSection();
+      let webmentionsSection = document.getElementById('webmentions');
+      if (!webmentionsSection) {
+        createWebmentionsSection();
+        webmentionsSection = document.getElementById('webmentions');
+      }
+      if (webmentionsSection) {
+        webmentionsSection.appendChild(section);
+        list = section.querySelector('ul');
+      }
+    }
+
+    if (!list) return;
+
+    items.forEach((item) => {
+      const author = item.author || {};
+      const published = item.published || item['wm-received'];
+
+      const li = document.createElement('li');
+      li.dataset.new = 'true';
+
+      const link = document.createElement('a');
+      link.href = item.url || '#';
+      link.className = 'text-accent-600 dark:text-accent-400 hover:underline';
+      link.target = '_blank';
+      link.rel = 'noopener';
+      link.textContent = `${author.name || 'Someone'} mentioned this on ${formatDate(published)}`;
+
+      const badge = document.createElement('span');
+      badge.className = 'text-xs text-accent-600 dark:text-accent-400 font-medium ml-1';
+      badge.textContent = 'NEW';
+
+      li.appendChild(link);
+      li.appendChild(badge);
+
+      list.insertBefore(li, list.firstChild);
+    });
+  }
+
+  function updateCount(selector, additionalCount, noun, pluralSuffix, singularSuffix) {
+    const header = document.querySelector(selector);
+    if (!header) return;
+
+    const text = header.textContent;
+    const match = text.match(/(\d+)/);
+    if (match) {
+      const currentCount = parseInt(match[1], 10);
+      const newCount = currentCount + additionalCount;
+      if (noun) {
+        // Rebuild the header text with correct pluralization
+        var suffix = pluralSuffix || 's';
+        var singSuffix = singularSuffix || '';
+        header.textContent = newCount + ' ' + noun + (newCount !== 1 ? suffix : singSuffix);
+      } else {
+        header.textContent = text.replace(/\d+/, newCount);
+      }
+    }
+  }
+
+  function updateTotalCount(additionalCount) {
+    const header = document.querySelector('#webmentions h2');
+    if (!header) return;
+
+    const text = header.textContent;
+    const match = text.match(/\((\d+)\)/);
+    if (match) {
+      const currentCount = parseInt(match[1], 10);
+      const newCount = currentCount + additionalCount;
+      header.textContent = text.replace(/\(\d+\)/, `(${newCount})`);
+    }
+  }
+
+  function createAvatarSection(type) {
+    const section = document.createElement('div');
+    section.className = `webmention-${type} mb-6`;
+
+    const header = document.createElement('h3');
+    header.className = 'text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3';
+    header.textContent = `0 ${type === 'likes' ? 'Likes' : 'Reposts'}`;
+
+    const row = document.createElement('div');
+    row.className = 'facepile';
+
+    section.appendChild(header);
+    section.appendChild(row);
+
+    return section;
+  }
+
+  function createReplySection() {
+    const section = document.createElement('div');
+    section.className = 'webmention-replies';
+
+    const header = document.createElement('h3');
+    header.className = 'text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-4';
+    header.textContent = '0 Replies';
+
+    const list = document.createElement('ul');
+    list.className = 'space-y-4';
+
+    section.appendChild(header);
+    section.appendChild(list);
+
+    return section;
+  }
+
+  function createMentionSection() {
+    const section = document.createElement('div');
+    section.className = 'webmention-mentions mt-6';
+
+    const header = document.createElement('h3');
+    header.className = 'text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3';
+    header.textContent = '0 Mentions';
+
+    const list = document.createElement('ul');
+    list.className = 'space-y-2 text-sm';
+
+    section.appendChild(header);
+    section.appendChild(list);
+
+    return section;
+  }
+
+  function createWebmentionsSection() {
+    const webmentionForm = document.querySelector('.webmention-form');
+    if (!webmentionForm) return;
+
+    const section = document.createElement('section');
+    section.className = 'webmentions mt-8 pt-8 border-t border-surface-200 dark:border-surface-700';
+    section.id = 'webmentions';
+
+    const header = document.createElement('h2');
+    header.className = 'text-xl font-bold text-surface-900 dark:text-surface-100 mb-6';
+    header.textContent = 'Webmentions (0)';
+
+    section.appendChild(header);
+    webmentionForm.parentNode.insertBefore(section, webmentionForm);
+  }
+
+  function formatDate(dateStr) {
+    if (!dateStr) return '';
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  }
+})();
diff --git a/lib/og-cli.js b/lib/og-cli.js
new file mode 100644
index 0000000..421b5b0
--- /dev/null
+++ b/lib/og-cli.js
@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+
+/**
+ * CLI entry point for OG image generation.
+ * Runs as a separate process to isolate memory from Eleventy.
+ *
+ * Usage: node lib/og-cli.js <contentDir> <cacheDir> <siteName>
+ */
+
+import { generateOgImages } from "./og.js";
+
+const [contentDir, cacheDir, siteName] = process.argv.slice(2);
+
+if (!contentDir || !cacheDir || !siteName) {
+  console.error("[og] Usage: node og-cli.js <contentDir> <cacheDir> <siteName>");
+  process.exit(1);
+}
+
+await generateOgImages(contentDir, cacheDir, siteName);
diff --git a/lib/og.js b/lib/og.js
new file mode 100644
index 0000000..b13df90
--- /dev/null
+++ b/lib/og.js
@@ -0,0 +1,344 @@
+/**
+ * OpenGraph image generation for posts without photos.
+ * Uses Satori (layout → SVG) + @resvg/resvg-js (SVG → PNG).
+ * Generated images are cached in .cache/og/ and passthrough-copied to output.
+ */
+
+import satori from "satori";
+import { Resvg } from "@resvg/resvg-js";
+import {
+  readFileSync,
+  writeFileSync,
+  mkdirSync,
+  existsSync,
+  readdirSync,
+} from "node:fs";
+import { resolve, join, basename, dirname } from "node:path";
+import { createHash } from "node:crypto";
+import { fileURLToPath } from "node:url";
+import matter from "gray-matter";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const WIDTH = 1200;
+const HEIGHT = 630;
+
+const COLORS = {
+  bg: "#09090b",
+  title: "#f4f4f5",
+  date: "#a1a1aa",
+  siteName: "#71717a",
+  accent: "#3b82f6",
+  badge: "#2563eb",
+  badgeText: "#ffffff",
+};
+
+const POST_TYPE_MAP = {
+  articles: "Article",
+  notes: "Note",
+  bookmarks: "Bookmark",
+  photos: "Photo",
+  likes: "Like",
+  replies: "Reply",
+  reposts: "Repost",
+  pages: "Page",
+  videos: "Video",
+  audio: "Audio",
+  jams: "Jam",
+  rsvps: "RSVP",
+  events: "Event",
+};
+
+function loadFonts() {
+  const fontsDir = resolve(
+    __dirname,
+    "..",
+    "node_modules",
+    "@fontsource",
+    "inter",
+    "files",
+  );
+  return [
+    {
+      name: "Inter",
+      data: readFileSync(join(fontsDir, "inter-latin-400-normal.woff")),
+      weight: 400,
+      style: "normal",
+    },
+    {
+      name: "Inter",
+      data: readFileSync(join(fontsDir, "inter-latin-700-normal.woff")),
+      weight: 700,
+      style: "normal",
+    },
+  ];
+}
+
+function computeHash(title, date, postType, siteName) {
+  return createHash("md5")
+    .update(`${title}|${date}|${postType}|${siteName}`)
+    .digest("hex")
+    .slice(0, 12);
+}
+
+function detectPostType(filePath) {
+  const parts = filePath.split("/");
+  const contentIdx = parts.indexOf("content");
+  if (contentIdx >= 0 && contentIdx + 1 < parts.length) {
+    const typeDir = parts[contentIdx + 1];
+    if (POST_TYPE_MAP[typeDir]) return POST_TYPE_MAP[typeDir];
+  }
+  return "Post";
+}
+
+function formatDate(dateStr) {
+  if (!dateStr) return "";
+  try {
+    const d = new Date(dateStr);
+    if (Number.isNaN(d.getTime())) return "";
+    return d.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  } catch {
+    return "";
+  }
+}
+
+/**
+ * Use the full filename (with date prefix) as the OG image slug.
+ * This matches the URL path segment directly, avoiding Eleventy's page.fileSlug
+ * race condition in Nunjucks parallel rendering.
+ */
+function toOgSlug(filename) {
+  return filename;
+}
+
+function truncateTitle(title, max = 120) {
+  if (!title || title.length <= max) return title || "Untitled";
+  return title.slice(0, max).trim() + "\u2026";
+}
+
+function extractBodyText(raw) {
+  const body = raw
+    .replace(/^---[\s\S]*?---\s*/, "")
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+    .replace(/[#*_~`>]/g, "")
+    .replace(/!\[[^\]]*\]\([^)]+\)/g, "")
+    .replace(/\n+/g, " ")
+    .trim();
+  if (!body) return "Untitled";
+  return body.length > 120 ? body.slice(0, 120).trim() + "\u2026" : body;
+}
+
+function buildCard(title, dateStr, postType, siteName) {
+  return {
+    type: "div",
+    props: {
+      style: {
+        display: "flex",
+        width: `${WIDTH}px`,
+        height: `${HEIGHT}px`,
+        backgroundColor: COLORS.bg,
+      },
+      children: [
+        {
+          type: "div",
+          props: {
+            style: {
+              width: "6px",
+              height: "100%",
+              backgroundColor: COLORS.accent,
+              flexShrink: 0,
+            },
+          },
+        },
+        {
+          type: "div",
+          props: {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
+              padding: "60px",
+              flex: 1,
+              overflow: "hidden",
+            },
+            children: [
+              {
+                type: "div",
+                props: {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "24px",
+                  },
+                  children: [
+                    {
+                      type: "div",
+                      props: {
+                        style: { display: "flex" },
+                        children: [
+                          {
+                            type: "span",
+                            props: {
+                              style: {
+                                backgroundColor: COLORS.badge,
+                                color: COLORS.badgeText,
+                                fontSize: "16px",
+                                fontWeight: 700,
+                                fontFamily: "Inter",
+                                padding: "6px 16px",
+                                borderRadius: "999px",
+                                textTransform: "uppercase",
+                                letterSpacing: "0.05em",
+                              },
+                              children: postType,
+                            },
+                          },
+                        ],
+                      },
+                    },
+                    {
+                      type: "div",
+                      props: {
+                        style: {
+                          color: COLORS.title,
+                          fontSize: "48px",
+                          fontWeight: 700,
+                          fontFamily: "Inter",
+                          lineHeight: 1.2,
+                          overflow: "hidden",
+                        },
+                        children: truncateTitle(title),
+                      },
+                    },
+                    dateStr
+                      ? {
+                          type: "div",
+                          props: {
+                            style: {
+                              color: COLORS.date,
+                              fontSize: "24px",
+                              fontWeight: 400,
+                              fontFamily: "Inter",
+                            },
+                            children: formatDate(dateStr),
+                          },
+                        }
+                      : null,
+                  ].filter(Boolean),
+                },
+              },
+              {
+                type: "div",
+                props: {
+                  style: {
+                    color: COLORS.siteName,
+                    fontSize: "20px",
+                    fontWeight: 400,
+                    fontFamily: "Inter",
+                  },
+                  children: siteName,
+                },
+              },
+            ],
+          },
+        },
+      ],
+    },
+  };
+}
+
+function scanContentFiles(contentDir) {
+  const files = [];
+  function walk(dir) {
+    let entries;
+    try {
+      entries = readdirSync(dir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      if (entry.name === ".indiekit") continue;
+      const fullPath = join(dir, entry.name);
+      if (entry.isDirectory()) {
+        walk(fullPath);
+      } else if (entry.isFile() && entry.name.endsWith(".md")) {
+        files.push(fullPath);
+      }
+    }
+  }
+  walk(contentDir);
+  return files;
+}
+
+/**
+ * Generate OG images for all content posts without photos.
+ * @param {string} contentDir - Path to content/ directory
+ * @param {string} cacheDir - Path to .cache/ directory
+ * @param {string} siteName - Site name for the card
+ */
+export async function generateOgImages(contentDir, cacheDir, siteName) {
+  const ogDir = join(cacheDir, "og");
+  mkdirSync(ogDir, { recursive: true });
+
+  const manifestPath = join(ogDir, "manifest.json");
+  let manifest = {};
+  try {
+    manifest = JSON.parse(readFileSync(manifestPath, "utf8"));
+  } catch {
+    // First run
+  }
+
+  const fonts = loadFonts();
+  const mdFiles = scanContentFiles(contentDir);
+
+  let generated = 0;
+  let skipped = 0;
+  const newManifest = {};
+  const SAVE_INTERVAL = 10;
+
+  for (const filePath of mdFiles) {
+    const raw = readFileSync(filePath, "utf8");
+    const { data: fm } = matter(raw);
+
+    if (fm.photo || fm.image) {
+      skipped++;
+      continue;
+    }
+
+    const slug = toOgSlug(basename(filePath, ".md"));
+    const title = fm.title || fm.name || extractBodyText(raw);
+    const date = fm.published || fm.date || "";
+    const postType = detectPostType(filePath);
+    const hash = computeHash(title, date, postType, siteName);
+
+    if (manifest[slug]?.hash === hash && existsSync(join(ogDir, `${slug}.png`))) {
+      newManifest[slug] = manifest[slug];
+      skipped++;
+      continue;
+    }
+
+    const card = buildCard(title, date, postType, siteName);
+    const svg = await satori(card, { width: WIDTH, height: HEIGHT, fonts });
+    const resvg = new Resvg(svg, {
+      fitTo: { mode: "width", value: WIDTH },
+    });
+    const pngBuffer = resvg.render().asPng();
+
+    writeFileSync(join(ogDir, `${slug}.png`), pngBuffer);
+    newManifest[slug] = { title: slug, hash };
+    generated++;
+
+    // Save manifest periodically to preserve progress
+    if (generated % SAVE_INTERVAL === 0) {
+      writeFileSync(manifestPath, JSON.stringify(newManifest, null, 2));
+    }
+  }
+
+  writeFileSync(manifestPath, JSON.stringify(newManifest, null, 2));
+  console.log(
+    `[og] Generated ${generated} images, skipped ${skipped} (cached or have photos)`,
+  );
+}
diff --git a/lib/unfurl-shortcode.js b/lib/unfurl-shortcode.js
new file mode 100644
index 0000000..e4de48f
--- /dev/null
+++ b/lib/unfurl-shortcode.js
@@ -0,0 +1,174 @@
+import { unfurl } from "unfurl.js";
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from "fs";
+import { resolve } from "path";
+import { createHash } from "crypto";
+
+const CACHE_DIR = resolve(import.meta.dirname, "..", ".cache", "unfurl");
+const CACHE_DURATION_MS = 7 * 24 * 60 * 60 * 1000; // 1 week
+const FAILURE_CACHE_MS = 24 * 60 * 60 * 1000; // 1 day for failed fetches
+const USER_AGENT = "Mozilla/5.0 (compatible; Indiekit/1.0; +https://getindiekit.com)";
+
+// Concurrency limiter — prevents overwhelming outbound network
+let activeRequests = 0;
+const MAX_CONCURRENT = 5;
+const queue = [];
+
+function runNext() {
+  if (queue.length === 0 || activeRequests >= MAX_CONCURRENT) return;
+  activeRequests++;
+  const { resolve: res, fn } = queue.shift();
+  fn().then(res).finally(() => {
+    activeRequests--;
+    runNext();
+  });
+}
+
+function throttled(fn) {
+  return new Promise((res) => {
+    queue.push({ resolve: res, fn });
+    runNext();
+  });
+}
+
+function getCachePath(url) {
+  const hash = createHash("md5").update(url).digest("hex");
+  return resolve(CACHE_DIR, `${hash}.json`);
+}
+
+export function readCache(url) {
+  const path = getCachePath(url);
+  if (!existsSync(path)) return undefined; // undefined = not cached
+  try {
+    const data = JSON.parse(readFileSync(path, "utf-8"));
+    const age = Date.now() - data.cachedAt;
+    const ttl = data.failed ? FAILURE_CACHE_MS : CACHE_DURATION_MS;
+    if (age < ttl) {
+      return data; // return full cache entry (includes .failed flag)
+    }
+  } catch {
+    // Corrupt cache file, ignore
+  }
+  return undefined;
+}
+
+function writeCache(url, metadata, failed = false) {
+  mkdirSync(CACHE_DIR, { recursive: true });
+  const path = getCachePath(url);
+  writeFileSync(path, JSON.stringify({ cachedAt: Date.now(), metadata, failed }));
+}
+
+export function extractDomain(url) {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return url;
+  }
+}
+
+export function escapeHtml(str) {
+  if (!str) return "";
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+export function renderFallbackLink(url) {
+  const domain = escapeHtml(extractDomain(url));
+  return `<a href="${escapeHtml(url)}" rel="noopener" target="_blank">${domain}</a>`;
+}
+
+export function renderCard(url, metadata) {
+  const og = metadata.open_graph || {};
+  const tc = metadata.twitter_card || {};
+
+  const title = og.title || tc.title || metadata.title || extractDomain(url);
+  const description = og.description || tc.description || metadata.description || "";
+  const image = og.images?.[0]?.url || tc.images?.[0]?.url || null;
+  const favicon = metadata.favicon || null;
+  const domain = extractDomain(url);
+
+  const maxDesc = 160;
+  const desc = description.length > maxDesc
+    ? description.slice(0, maxDesc).trim() + "\u2026"
+    : description;
+
+  const imgHtml = image
+    ? `<div class="unfurl-card-image shrink-0">
+        <img src="${escapeHtml(image)}" alt="" loading="lazy" decoding="async"
+             class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-r-lg" />
+      </div>`
+    : "";
+
+  const faviconHtml = favicon
+    ? `<img src="${escapeHtml(favicon)}" alt="" class="inline-block w-4 h-4 mr-1 align-text-bottom" loading="lazy" />`
+    : "";
+
+  return `<div class="unfurl-card not-prose my-4 rounded-lg border border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-surface-800 overflow-hidden hover:border-accent-300 dark:hover:border-accent-600 transition-colors">
+  <a href="${escapeHtml(url)}" rel="noopener" target="_blank" class="flex no-underline text-inherit hover:text-inherit">
+    <div class="flex-1 p-3 sm:p-4 min-w-0">
+      <p class="font-semibold text-sm sm:text-base text-surface-900 dark:text-surface-100 truncate m-0">${escapeHtml(title)}</p>
+      ${desc ? `<p class="text-xs sm:text-sm text-surface-500 dark:text-surface-400 mt-1 m-0 line-clamp-2">${escapeHtml(desc)}</p>` : ""}
+      <p class="text-xs text-surface-400 dark:text-surface-500 mt-2 m-0">${faviconHtml}${escapeHtml(domain)}</p>
+    </div>
+    ${imgHtml}
+  </a>
+</div>`;
+}
+
+/**
+ * Fetch unfurl metadata for a URL and populate the disk cache.
+ * Returns the rendered HTML card (or fallback link on failure).
+ */
+export async function prefetchUrl(url) {
+  if (!url) return "";
+
+  // Already cached — skip network fetch
+  const cached = readCache(url);
+  if (cached !== undefined) {
+    return cached.failed ? renderFallbackLink(url) : renderCard(url, cached.metadata);
+  }
+
+  const metadata = await throttled(async () => {
+    try {
+      return await unfurl(url, {
+        timeout: 20000,
+        headers: { "User-Agent": USER_AGENT },
+      });
+    } catch (err) {
+      console.warn(`[unfurl] Failed to fetch ${url}: ${err.message}`);
+      return null;
+    }
+  });
+
+  if (!metadata) {
+    writeCache(url, null, true);
+    return renderFallbackLink(url);
+  }
+
+  writeCache(url, metadata, false);
+  return renderCard(url, metadata);
+}
+
+/**
+ * Synchronous cache-only lookup. Returns the rendered card HTML if cached,
+ * a fallback link if cached as failed, or empty string if not cached.
+ * Safe to use in deeply nested Nunjucks includes where async isn't supported.
+ */
+export function getCachedCard(url) {
+  if (!url) return "";
+  const cached = readCache(url);
+  if (cached === undefined) return renderFallbackLink(url);
+  if (cached.failed) return renderFallbackLink(url);
+  return renderCard(url, cached.metadata);
+}
+
+/**
+ * Register the {% unfurl "URL" %} shortcode on an Eleventy config.
+ */
+export default function registerUnfurlShortcode(eleventyConfig) {
+  eleventyConfig.addAsyncShortcode("unfurl", async function (url) {
+    return prefetchUrl(url);
+  });
+}
diff --git a/likes.njk b/likes.njk
new file mode 100644
index 0000000..5416086
--- /dev/null
+++ b/likes.njk
@@ -0,0 +1,110 @@
+---
+layout: layouts/base.njk
+title: Likes
+withSidebar: true
+pagination:
+  data: collections.likes
+  size: 20
+  alias: paginatedLikes
+  generatePageOnEmptyData: true
+permalink: "likes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
+---
+<div class="h-feed">
+  <div class="flex flex-wrap items-center gap-4 mb-2">
+    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Likes</h1>
+    {% set sparklineSvg = collections.likes | postingFrequency %}
+    {% if sparklineSvg %}
+    <span class="text-rose-600 dark:text-rose-400">{{ sparklineSvg | safe }}</span>
+    {% endif %}
+  </div>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
+    Content I've liked across the web.
+    <span class="text-sm">({{ collections.likes.length }} total)</span>
+  </p>
+
+  {% if paginatedLikes.length > 0 %}
+  <ul class="post-list">
+    {% for post in paginatedLikes %}
+    <li class="h-entry post-card border-l-[3px] border-l-rose-400 dark:border-l-rose-500">
+      <div class="post-header flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-rose-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="post-meta">
+            <time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time>
+            {% if post.data.category %}
+            <span class="post-categories">
+              {% if post.data.category is string %}
+              <span class="p-category">{{ post.data.category }}</span>
+              {% else %}
+              {% for cat in post.data.category %}
+              <span class="p-category">{{ cat }}</span>
+              {% endfor %}
+              {% endif %}
+            </span>
+            {% endif %}
+          </div>
+          {# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
+          {% set likedUrl = post.data.likeOf or post.data.like_of %}
+          {% if likedUrl %}
+          {% unfurl likedUrl %}
+          <a class="u-like-of text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ likedUrl }}">
+            {{ likedUrl }}
+          </a>
+          {% endif %}
+          {% if post.templateContent %}
+          <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
+            {{ post.templateContent | safe }}
+          </div>
+          {% endif %}
+          <a class="u-url text-sm text-rose-600 dark:text-rose-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+
+  {# Pagination controls #}
+  {% if pagination.pages.length > 1 %}
+  <nav class="pagination" aria-label="Likes pagination">
+    <div class="pagination-info">
+      Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
+    </div>
+    <div class="pagination-links">
+      {% if pagination.href.previous %}
+      <a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </span>
+      {% endif %}
+
+      {% if pagination.href.next %}
+      <a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </span>
+      {% endif %}
+    </div>
+  </nav>
+  {% endif %}
+
+  {% else %}
+  {% set postType = "like" %}
+  {% include "components/empty-collection.njk" %}
+  {% endif %}
+</div>
diff --git a/listening.njk b/listening.njk
new file mode 100644
index 0000000..bfc3ea0
--- /dev/null
+++ b/listening.njk
@@ -0,0 +1,508 @@
+---
+layout: layouts/base.njk
+title: Listening Activity
+permalink: /listening/
+withSidebar: true
+---
+<div class="listening-page" x-data="{ activeTab: 'all', activeSource: 'all' }">
+  <header class="mb-6 sm:mb-8">
+    <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">Listening Activity</h1>
+    <p class="text-surface-600 dark:text-surface-400">
+      What I've been listening to on
+      {% if funkwhaleActivity.instanceUrl %}
+      <a href="{{ funkwhaleActivity.instanceUrl }}" class="text-purple-600 dark:text-purple-400 hover:underline" target="_blank" rel="noopener">Funkwhale</a>
+      {% endif %}
+      {% if funkwhaleActivity.instanceUrl and lastfmActivity.profileUrl %} and {% endif %}
+      {% if lastfmActivity.profileUrl %}
+      <a href="{{ lastfmActivity.profileUrl }}" class="text-purple-600 dark:text-purple-400 hover:underline" target="_blank" rel="noopener">Last.fm</a>
+      {% endif %}
+    </p>
+  </header>
+
+  {# Source Filter Tabs #}
+  <div class="flex gap-2 mb-8 flex-wrap">
+    <button
+      @click="activeSource = 'all'"
+      :class="activeSource === 'all' ? 'bg-purple-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
+      class="px-4 py-2 rounded-full text-sm font-medium transition-colors"
+    >
+      All Sources
+    </button>
+    {% if funkwhaleActivity.source == 'indiekit' %}
+    <button
+      @click="activeSource = 'funkwhale'"
+      :class="activeSource === 'funkwhale' ? 'bg-purple-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
+      class="px-4 py-2 rounded-full text-sm font-medium transition-colors flex items-center gap-2"
+    >
+      <span class="w-2 h-2 rounded-full bg-purple-500"></span>
+      Funkwhale
+    </button>
+    {% endif %}
+    {% if lastfmActivity.source == 'indiekit' %}
+    <button
+      @click="activeSource = 'lastfm'"
+      :class="activeSource === 'lastfm' ? 'bg-red-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
+      class="px-4 py-2 rounded-full text-sm font-medium transition-colors flex items-center gap-2"
+    >
+      <span class="w-2 h-2 rounded-full bg-red-500"></span>
+      Last.fm
+    </button>
+    {% endif %}
+  </div>
+
+  {# Now Playing Section - Combined #}
+  {% set fwNowPlaying = funkwhaleActivity.nowPlaying if funkwhaleActivity.nowPlaying and funkwhaleActivity.nowPlaying.status else null %}
+  {% set lfmNowPlaying = lastfmActivity.nowPlaying if lastfmActivity.nowPlaying and lastfmActivity.nowPlaying.status else null %}
+
+  {% if fwNowPlaying or lfmNowPlaying %}
+  <section class="mb-12">
+    {# Funkwhale Now Playing #}
+    {% if fwNowPlaying %}
+    <div x-show="activeSource === 'all' || activeSource === 'funkwhale'" class="mb-4">
+      <div class="relative p-4 sm:p-6 rounded-xl sm:rounded-2xl overflow-hidden {% if fwNowPlaying.status == 'now-playing' %}bg-gradient-to-br from-green-500/10 to-green-600/5 border-2 border-green-500/30{% else %}bg-gradient-to-br from-purple-500/10 to-purple-600/5 border border-purple-500/20{% endif %}">
+        <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5">
+          {% if fwNowPlaying.coverUrl %}
+          <img src="{{ fwNowPlaying.coverUrl }}" alt="" class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg shadow-lg object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+          {% else %}
+          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
+            <svg class="w-8 h-8 sm:w-10 sm:h-10 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
+            </svg>
+          </div>
+          {% endif %}
+
+          <div class="flex-1 min-w-0 w-full sm:w-auto">
+            <div class="flex items-center gap-2 mb-2">
+              <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-purple-500/20 text-purple-700 dark:text-purple-400 rounded-full">Funkwhale</span>
+              {% if fwNowPlaying.status == 'now-playing' %}
+              <span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium bg-purple-500/20 text-purple-700 dark:text-purple-400 rounded-full">
+                <span class="flex gap-0.5 items-end h-3">
+                  <span class="w-0.5 bg-purple-500 animate-pulse" style="height: 30%; animation-delay: 0s;"></span>
+                  <span class="w-0.5 bg-purple-500 animate-pulse" style="height: 70%; animation-delay: 0.2s;"></span>
+                  <span class="w-0.5 bg-purple-500 animate-pulse" style="height: 50%; animation-delay: 0.4s;"></span>
+                </span>
+                Now Playing
+              </span>
+              {% else %}
+              <span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium bg-purple-500/20 text-purple-700 dark:text-purple-400 rounded-full">
+                Recently Played
+              </span>
+              {% endif %}
+            </div>
+
+            <h2 class="text-lg sm:text-xl font-bold text-surface-900 dark:text-surface-100 truncate">
+              {% if fwNowPlaying.trackUrl %}
+              <a href="{{ fwNowPlaying.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">{{ fwNowPlaying.track }}</a>
+              {% else %}
+              {{ fwNowPlaying.track }}
+              {% endif %}
+            </h2>
+            <p class="text-surface-600 dark:text-surface-400">{{ fwNowPlaying.artist }}</p>
+            {% if fwNowPlaying.album %}
+            <p class="text-sm text-surface-500 mt-1">{{ fwNowPlaying.album }}</p>
+            {% endif %}
+            <p class="text-xs text-surface-500 mt-2">{{ fwNowPlaying.relativeTime }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    {% endif %}
+
+    {# Last.fm Now Playing #}
+    {% if lfmNowPlaying %}
+    <div x-show="activeSource === 'all' || activeSource === 'lastfm'" class="mb-4">
+      <div class="relative p-4 sm:p-6 rounded-xl sm:rounded-2xl overflow-hidden {% if lfmNowPlaying.status == 'now-playing' %}bg-gradient-to-br from-green-500/10 to-green-600/5 border-2 border-green-500/30{% else %}bg-gradient-to-br from-red-500/10 to-red-600/5 border border-red-500/20{% endif %}">
+        <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5">
+          {% if lfmNowPlaying.coverUrl %}
+          <img src="{{ lfmNowPlaying.coverUrl }}" alt="" class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg shadow-lg object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+          {% else %}
+          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
+            <svg class="w-8 h-8 sm:w-10 sm:h-10 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
+            </svg>
+          </div>
+          {% endif %}
+
+          <div class="flex-1 min-w-0 w-full sm:w-auto">
+            <div class="flex items-center gap-2 mb-2">
+              <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-purple-500/20 text-purple-700 dark:text-purple-400 rounded-full">Last.fm</span>
+              {% if lfmNowPlaying.status == 'now-playing' %}
+              <span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium bg-purple-500/20 text-purple-700 dark:text-purple-400 rounded-full">
+                <span class="flex gap-0.5 items-end h-3">
+                  <span class="w-0.5 bg-purple-500 animate-pulse" style="height: 30%; animation-delay: 0s;"></span>
+                  <span class="w-0.5 bg-purple-500 animate-pulse" style="height: 70%; animation-delay: 0.2s;"></span>
+                  <span class="w-0.5 bg-purple-500 animate-pulse" style="height: 50%; animation-delay: 0.4s;"></span>
+                </span>
+                Now Playing
+              </span>
+              {% else %}
+              <span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium bg-purple-500/20 text-purple-700 dark:text-purple-400 rounded-full">
+                Recently Played
+              </span>
+              {% endif %}
+              {% if lfmNowPlaying.loved %}
+              <span class="text-purple-500" title="Loved">&#9829;</span>
+              {% endif %}
+            </div>
+
+            <h2 class="text-lg sm:text-xl font-bold text-surface-900 dark:text-surface-100 truncate">
+              {% if lfmNowPlaying.trackUrl %}
+              <a href="{{ lfmNowPlaying.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">{{ lfmNowPlaying.track }}</a>
+              {% else %}
+              {{ lfmNowPlaying.track }}
+              {% endif %}
+            </h2>
+            <p class="text-surface-600 dark:text-surface-400">{{ lfmNowPlaying.artist }}</p>
+            {% if lfmNowPlaying.album %}
+            <p class="text-sm text-surface-500 mt-1">{{ lfmNowPlaying.album }}</p>
+            {% endif %}
+            <p class="text-xs text-surface-500 mt-2">{{ lfmNowPlaying.relativeTime }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    {% endif %}
+  </section>
+  {% endif %}
+
+  {# Combined Stats Section #}
+  {% if funkwhaleActivity.stats or lastfmActivity.stats %}
+  <section class="mb-12">
+    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
+      <svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+      </svg>
+      Listening Statistics
+    </h2>
+
+    {# Stats Cards Grid - Side by Side #}
+    <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
+      {# Funkwhale Stats #}
+      {% if funkwhaleActivity.stats %}
+      <div x-show="activeSource === 'all' || activeSource === 'funkwhale'" class="bg-surface-50 dark:bg-surface-800 rounded-xl p-6 border border-purple-200 dark:border-purple-800">
+        <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-400 mb-4 flex items-center gap-2">
+          <span class="w-3 h-3 rounded-full bg-purple-500"></span>
+          Funkwhale
+        </h3>
+        <div class="grid grid-cols-3 gap-4 text-center">
+          <div>
+            <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ funkwhaleActivity.stats.summary.all.totalPlays | default(0) }}</div>
+            <div class="text-xs text-surface-500 uppercase">Plays</div>
+          </div>
+          <div>
+            <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ funkwhaleActivity.stats.summary.all.uniqueArtists | default(0) }}</div>
+            <div class="text-xs text-surface-500 uppercase">Artists</div>
+          </div>
+          <div>
+            <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ funkwhaleActivity.stats.summary.all.uniqueTracks | default(0) }}</div>
+            <div class="text-xs text-surface-500 uppercase">Tracks</div>
+          </div>
+        </div>
+        {# Top Artists #}
+        {% if funkwhaleActivity.stats.topArtists.all.length %}
+        <div class="mt-4 pt-4 border-t border-surface-200 dark:border-surface-700">
+          <h4 class="text-sm font-medium text-surface-700 dark:text-surface-300 mb-2">Top Artists</h4>
+          <div class="space-y-1">
+            {% for artist in funkwhaleActivity.stats.topArtists.all | head(5) %}
+            <div class="flex justify-between text-sm">
+              <span class="text-surface-600 dark:text-surface-400 truncate">{{ artist.name }}</span>
+              <span class="text-surface-500 ml-2">{{ artist.playCount }}</span>
+            </div>
+            {% endfor %}
+          </div>
+        </div>
+        {% endif %}
+      </div>
+      {% endif %}
+
+      {# Last.fm Stats #}
+      {% if lastfmActivity.stats %}
+      <div x-show="activeSource === 'all' || activeSource === 'lastfm'" class="bg-surface-50 dark:bg-surface-800 rounded-xl p-6 border border-purple-200 dark:border-purple-800">
+        <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-400 mb-4 flex items-center gap-2">
+          <span class="w-3 h-3 rounded-full bg-purple-500"></span>
+          Last.fm
+        </h3>
+        <div class="grid grid-cols-3 gap-4 text-center">
+          <div>
+            <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ lastfmActivity.stats.summary.all.totalPlays | default(0) }}</div>
+            <div class="text-xs text-surface-500 uppercase">Scrobbles</div>
+          </div>
+          <div>
+            <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ lastfmActivity.stats.summary.all.uniqueArtists | default(0) }}</div>
+            <div class="text-xs text-surface-500 uppercase">Artists</div>
+          </div>
+          <div>
+            <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ lastfmActivity.stats.summary.all.lovedCount | default(0) }}</div>
+            <div class="text-xs text-surface-500 uppercase">Loved</div>
+          </div>
+        </div>
+        {# Top Artists from Last.fm #}
+        {% if lastfmActivity.stats.topArtists.all.length %}
+        <div class="mt-4 pt-4 border-t border-surface-200 dark:border-surface-700">
+          <h4 class="text-sm font-medium text-surface-700 dark:text-surface-300 mb-2">Top Artists</h4>
+          <div class="space-y-1">
+            {% for artist in lastfmActivity.stats.topArtists.all | head(5) %}
+            <div class="flex justify-between text-sm">
+              <span class="text-surface-600 dark:text-surface-400 truncate">{{ artist.name }}</span>
+              <span class="text-surface-500 ml-2">{{ artist.playCount }}</span>
+            </div>
+            {% endfor %}
+          </div>
+        </div>
+        {% endif %}
+      </div>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  {# Recent Listens - Combined Timeline #}
+  <section class="mb-12">
+    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
+      <svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+      </svg>
+      Recent Listens
+    </h2>
+
+    <div class="space-y-3">
+      {# Funkwhale Listenings #}
+      {% if funkwhaleActivity.listenings.length %}
+      <div x-show="activeSource === 'all' || activeSource === 'funkwhale'">
+        {% for listening in funkwhaleActivity.listenings | head(10) %}
+        <div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors mb-2">
+          {% if listening.coverUrl %}
+          <img src="{{ listening.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+          {% else %}
+          <div class="w-12 h-12 rounded bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
+            <svg class="w-6 h-6 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2z"/>
+            </svg>
+          </div>
+          {% endif %}
+
+          <div class="flex-1 min-w-0">
+            <h3 class="font-medium text-surface-900 dark:text-surface-100 truncate">
+              {% if listening.trackUrl %}
+              <a href="{{ listening.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">{{ listening.track }}</a>
+              {% else %}
+              {{ listening.track }}
+              {% endif %}
+            </h3>
+            <p class="text-sm text-surface-600 dark:text-surface-400 truncate">{{ listening.artist }}</p>
+          </div>
+
+          <div class="text-right flex-shrink-0">
+            <span class="inline-block px-2 py-0.5 text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 rounded-full mb-1">Funkwhale</span>
+            <span class="text-xs text-surface-500 block">{{ listening.relativeTime }}</span>
+            <button
+              class="share-post-btn mt-1"
+              data-share-url="{{ listening.trackUrl }}"
+              data-share-title="{{ listening.track }} — {{ listening.artist }}"
+              title="Create post"
+              aria-label="Create post"
+            >
+              <span class="share-post-icon">✏️</span>
+            </button>
+            <button
+              class="save-later-btn mt-1"
+              data-save-url="{{ listening.trackUrl }}"
+              data-save-title="{{ listening.track }} — {{ listening.artist }}"
+              data-save-source="listening"
+              title="Save for later"
+              aria-label="Save for later"
+            >
+              <span class="save-later-icon">📑</span>
+            </button>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+      {% endif %}
+
+      {# Last.fm Scrobbles #}
+      {% if lastfmActivity.scrobbles.length %}
+      <div x-show="activeSource === 'all' || activeSource === 'lastfm'">
+        {% for scrobble in lastfmActivity.scrobbles | head(10) %}
+        <div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors mb-2">
+          {% if scrobble.coverUrl %}
+          <img src="{{ scrobble.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+          {% else %}
+          <div class="w-12 h-12 rounded bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
+            <svg class="w-6 h-6 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2z"/>
+            </svg>
+          </div>
+          {% endif %}
+
+          <div class="flex-1 min-w-0">
+            <h3 class="font-medium text-surface-900 dark:text-surface-100 truncate">
+              {% if scrobble.trackUrl %}
+              <a href="{{ scrobble.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">{{ scrobble.track }}</a>
+              {% else %}
+              {{ scrobble.track }}
+              {% endif %}
+              {% if scrobble.loved %}
+              <span class="text-purple-500 ml-1" title="Loved">&#9829;</span>
+              {% endif %}
+            </h3>
+            <p class="text-sm text-surface-600 dark:text-surface-400 truncate">{{ scrobble.artist }}</p>
+          </div>
+
+          <div class="text-right flex-shrink-0">
+            <span class="inline-block px-2 py-0.5 text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 rounded-full mb-1">Last.fm</span>
+            <span class="text-xs text-surface-500 block">{{ scrobble.relativeTime }}</span>
+            <button
+              class="share-post-btn mt-1"
+              data-share-url="{{ scrobble.trackUrl }}"
+              data-share-title="{{ scrobble.track }} — {{ scrobble.artist }}"
+              title="Create post"
+              aria-label="Create post"
+            >
+              <span class="share-post-icon">✏️</span>
+            </button>
+            <button
+              class="save-later-btn mt-1"
+              data-save-url="{{ scrobble.trackUrl }}"
+              data-save-title="{{ scrobble.track }} — {{ scrobble.artist }}"
+              data-save-source="listening"
+              title="Save for later"
+              aria-label="Save for later"
+            >
+              <span class="save-later-icon">📑</span>
+            </button>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+      {% endif %}
+
+      {% if not funkwhaleActivity.listenings.length and not lastfmActivity.scrobbles.length %}
+      <p class="text-surface-600 dark:text-surface-400">No recent listening history available.</p>
+      {% endif %}
+    </div>
+  </section>
+
+  {# Loved Tracks from Last.fm #}
+  {% if lastfmActivity.loved.length %}
+  <section class="mb-12" x-show="activeSource === 'all' || activeSource === 'lastfm'">
+    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
+      <svg class="w-6 h-6 text-purple-500" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+      </svg>
+      Loved Tracks
+      <span class="text-sm font-normal text-surface-500">(Last.fm)</span>
+    </h2>
+
+    <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
+      {% for track in lastfmActivity.loved | head(10) %}
+      <div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+        {% if track.coverUrl %}
+        <img src="{{ track.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+        {% else %}
+        <div class="w-14 h-14 rounded bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
+          <svg class="w-6 h-6 text-purple-400" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+          </svg>
+        </div>
+        {% endif %}
+
+        <div class="flex-1 min-w-0">
+          <h3 class="font-medium text-surface-900 dark:text-surface-100 truncate">
+            {% if track.trackUrl %}
+            <a href="{{ track.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">{{ track.track }}</a>
+            {% else %}
+            {{ track.track }}
+            {% endif %}
+          </h3>
+          <p class="text-sm text-surface-600 dark:text-surface-400 truncate">{{ track.artist }}</p>
+        </div>
+
+        <span class="text-purple-500 flex-shrink-0">&#9829;</span>
+        <button
+          class="share-post-btn flex-shrink-0"
+          data-share-url="{{ track.trackUrl }}"
+          data-share-title="{{ track.track }} — {{ track.artist }}"
+          title="Create post"
+          aria-label="Create post"
+        >
+          <span class="share-post-icon">✏️</span>
+        </button>
+        <button
+          class="save-later-btn flex-shrink-0"
+          data-save-url="{{ track.trackUrl }}"
+          data-save-title="{{ track.track }} — {{ track.artist }}"
+          data-save-source="listening"
+          title="Save for later"
+          aria-label="Save for later"
+        >
+          <span class="save-later-icon">📑</span>
+        </button>
+      </div>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+
+  {# Funkwhale Favorites #}
+  {% if funkwhaleActivity.favorites.length %}
+  <section class="mb-12" x-show="activeSource === 'all' || activeSource === 'funkwhale'">
+    <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
+      <svg class="w-6 h-6 text-purple-500" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+      </svg>
+      Favorite Tracks
+      <span class="text-sm font-normal text-surface-500">(Funkwhale)</span>
+    </h2>
+
+    <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
+      {% for favorite in funkwhaleActivity.favorites | head(10) %}
+      <div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+        {% if favorite.coverUrl %}
+        <img src="{{ favorite.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+        {% else %}
+        <div class="w-14 h-14 rounded bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
+          <svg class="w-6 h-6 text-purple-400" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+          </svg>
+        </div>
+        {% endif %}
+
+        <div class="flex-1 min-w-0">
+          <h3 class="font-medium text-surface-900 dark:text-surface-100 truncate">
+            {% if favorite.trackUrl %}
+            <a href="{{ favorite.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">{{ favorite.track }}</a>
+            {% else %}
+            {{ favorite.track }}
+            {% endif %}
+          </h3>
+          <p class="text-sm text-surface-600 dark:text-surface-400 truncate">{{ favorite.artist }}</p>
+          {% if favorite.album %}
+          <p class="text-xs text-surface-500 truncate">{{ favorite.album }}</p>
+          {% endif %}
+        </div>
+        <button
+          class="share-post-btn flex-shrink-0"
+          data-share-url="{{ favorite.trackUrl }}"
+          data-share-title="{{ favorite.track }} — {{ favorite.artist }}"
+          title="Create post"
+          aria-label="Create post"
+        >
+          <span class="share-post-icon">✏️</span>
+        </button>
+        <button
+          class="save-later-btn flex-shrink-0"
+          data-save-url="{{ favorite.trackUrl }}"
+          data-save-title="{{ favorite.track }} — {{ favorite.artist }}"
+          data-save-source="listening"
+          title="Save for later"
+          aria-label="Save for later"
+        >
+          <span class="save-later-icon">📑</span>
+        </button>
+      </div>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+</div>
diff --git a/news.njk b/news.njk
new file mode 100644
index 0000000..f2a8fcd
--- /dev/null
+++ b/news.njk
@@ -0,0 +1,461 @@
+---
+layout: layouts/base.njk
+title: News Feed
+permalink: /news/
+withSidebar: true
+---
+<div class="news-page" x-data="newsApp()" x-init="init()">
+  <header class="mb-6 sm:mb-8">
+    <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">News Feed</h1>
+    <p class="text-surface-600 dark:text-surface-400">
+      Aggregated content from my favorite feeds
+    </p>
+    <p class="text-xs text-surface-500 mt-2" x-show="lastUpdated">
+      Last updated: <span x-text="formatDate(lastUpdated, 'full')"></span>
+      <button @click="refresh()" class="ml-2 text-accent-600 hover:text-accent-700 dark:text-accent-400" :disabled="loading">
+        <svg class="w-3 h-3 inline" :class="{ 'animate-spin': loading }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+        </svg>
+      </button>
+    </p>
+  </header>
+
+  {# Loading State #}
+  <div x-show="loading && items.length === 0" class="text-center py-12">
+    <svg class="w-8 h-8 mx-auto text-accent-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+    <p class="text-surface-600 dark:text-surface-400">Loading news...</p>
+  </div>
+
+  {# Error State #}
+  <div x-show="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
+    <p class="text-red-700 dark:text-red-400" x-text="error"></p>
+    <button @click="refresh()" class="mt-2 text-sm text-red-600 hover:text-red-700 underline">Try again</button>
+  </div>
+
+  {# Main Content - shown when we have items #}
+  <template x-if="items.length > 0">
+    <div>
+      {# View Mode and Filter Controls #}
+      <div class="flex flex-wrap gap-4 mb-6 sm:mb-8 items-center justify-between">
+        {# View Mode Buttons #}
+        <div class="flex gap-2">
+          <button
+            @click="viewMode = 'list'"
+            :class="viewMode === 'list' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
+            class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
+            title="List view"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+            </svg>
+            <span class="hidden sm:inline">List</span>
+          </button>
+          <button
+            @click="viewMode = 'card'"
+            :class="viewMode === 'card' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
+            class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
+            title="Card view"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/>
+            </svg>
+            <span class="hidden sm:inline">Cards</span>
+          </button>
+          <button
+            @click="viewMode = 'full'"
+            :class="viewMode === 'full' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
+            class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
+            title="Expanded view"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
+            </svg>
+            <span class="hidden sm:inline">Expanded</span>
+          </button>
+        </div>
+
+        {# Feed Filter Dropdown #}
+        <div class="relative" x-show="feeds.length > 1">
+          <select
+            x-model="filterFeed"
+            class="appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-8 text-sm text-surface-700 dark:text-surface-300 focus:outline-none focus:ring-2 focus:ring-accent-500"
+          >
+            <option value="all">All Sources (<span x-text="feeds.length"></span>)</option>
+            <template x-for="feed in feeds" :key="feed.id">
+              <option :value="feed.id" x-text="feed.title"></option>
+            </template>
+          </select>
+          <svg class="absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-surface-500 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+      </div>
+
+      {# Stats Bar #}
+      <div class="flex flex-wrap gap-4 mb-6 p-4 bg-surface-50 dark:bg-surface-800/50 rounded-lg text-sm">
+        <div class="flex items-center gap-2">
+          <span class="text-surface-500">Feeds:</span>
+          <span class="font-medium text-surface-900 dark:text-surface-100" x-text="status?.stats?.feedsCount || feeds.length"></span>
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="text-surface-500">Items:</span>
+          <span class="font-medium text-surface-900 dark:text-surface-100" x-text="status?.stats?.itemsCount || items.length"></span>
+        </div>
+        <div x-show="status?.status === 'syncing'" class="flex items-center gap-2 text-orange-600 dark:text-orange-400">
+          <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          Syncing...
+        </div>
+        <div x-show="loading && items.length > 0" class="flex items-center gap-2 text-accent-600 dark:text-accent-400 ml-auto">
+          <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          Refreshing...
+        </div>
+      </div>
+
+      {# Items List #}
+      <div class="news-items">
+        {# List View #}
+        <div x-show="viewMode === 'list'" class="space-y-3">
+          <template x-for="item in filteredItems" :key="item.id">
+            <article class="flex items-start gap-4 p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
+              <img
+                x-show="item.imageUrl"
+                :src="item.imageUrl"
+                alt=""
+                class="w-16 h-16 sm:w-20 sm:h-20 rounded-lg object-cover flex-shrink-0"
+                loading="lazy"
+              >
+              <div class="flex-1 min-w-0">
+                <h2 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
+                  <a
+                    :href="item.link"
+                    class="hover:text-accent-600 dark:hover:text-accent-400"
+                    target="_blank"
+                    rel="noopener"
+                    x-text="item.title"
+                  ></a>
+                </h2>
+                <p x-show="item.description" class="text-sm text-surface-600 dark:text-surface-400 line-clamp-2 mb-2" x-text="item.description"></p>
+                <div class="flex flex-wrap items-center gap-2 text-xs text-surface-500">
+                  <a
+                    :href="item.sourceUrl || getFeedUrl(item.feedId) || item.link"
+                    class="inline-flex items-center gap-1 px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded-full hover:bg-surface-200 dark:hover:bg-surface-600 transition-colors"
+                    target="_blank"
+                    rel="noopener"
+                    :title="item.sourceTitle || item.feedTitle"
+                    x-text="truncate(item.sourceTitle || item.feedTitle, 25)"
+                  ></a>
+                  <span x-show="item.author" x-text="'by ' + item.author"></span>
+                  <time :datetime="item.pubDate" x-text="formatDate(item.pubDate)"></time>
+                  <span class="hidden sm:inline" x-show="item.categories?.length">
+                    <template x-for="cat in item.categories.slice(0, 3)" :key="cat">
+                      <span class="text-accent-600 dark:text-accent-400" x-text="'#' + cat"></span>
+                    </template>
+                  </span>
+                  <button
+                    class="share-post-btn"
+                    :data-share-url="item.link"
+                    :data-share-title="item.title"
+                        title="Create post"
+                    aria-label="Create post"
+                  >
+                    <span class="share-post-icon">✏️</span>
+                    <span class="share-post-label">Post</span>
+                  </button>
+                  <button
+                    class="save-later-btn"
+                    :data-save-url="item.link"
+                    :data-save-title="item.title"
+                    data-save-source="news"
+                    title="Save for later"
+                    aria-label="Save for later"
+                  >
+                    <span class="save-later-icon">📑</span>
+                    <span class="save-later-label">Save</span>
+                  </button>
+                </div>
+              </div>
+            </article>
+          </template>
+        </div>
+
+        {# Card View #}
+        <div x-show="viewMode === 'card'" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <template x-for="item in filteredItems" :key="item.id">
+            <article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden hover:border-surface-400 dark:hover:border-surface-500 transition-colors">
+              <div x-show="item.imageUrl" class="aspect-video bg-surface-100 dark:bg-surface-700">
+                <img
+                  :src="item.imageUrl"
+                  alt=""
+                  class="w-full h-full object-cover"
+                  loading="lazy"
+                >
+              </div>
+              <div class="p-4">
+                <h2 class="font-semibold text-surface-900 dark:text-surface-100 mb-2 line-clamp-2">
+                  <a
+                    :href="item.link"
+                    class="hover:text-accent-600 dark:hover:text-accent-400"
+                    target="_blank"
+                    rel="noopener"
+                    x-text="item.title"
+                  ></a>
+                </h2>
+                <p x-show="item.description" class="text-sm text-surface-600 dark:text-surface-400 line-clamp-3 mb-3" x-text="item.description"></p>
+                <div class="flex items-center justify-between text-xs text-surface-500">
+                  <span class="truncate max-w-[60%]" x-text="truncate(item.sourceTitle || item.feedTitle, 20)"></span>
+                  <time :datetime="item.pubDate" x-text="formatDate(item.pubDate)"></time>
+                </div>
+                <button
+                  class="share-post-btn mt-2"
+                  :data-share-url="item.link"
+                  :data-share-title="item.title"
+                    title="Create post"
+                  aria-label="Create post"
+                >
+                  <span class="share-post-icon">✏️</span>
+                  <span class="share-post-label">Post</span>
+                </button>
+                <button
+                  class="save-later-btn mt-2"
+                  :data-save-url="item.link"
+                  :data-save-title="item.title"
+                  data-save-source="news"
+                  title="Save for later"
+                  aria-label="Save for later"
+                >
+                  <span class="save-later-icon">📑</span>
+                  <span class="save-later-label">Save</span>
+                </button>
+              </div>
+            </article>
+          </template>
+        </div>
+
+        {# Full/Expanded View #}
+        <div x-show="viewMode === 'full'" class="space-y-6">
+          <template x-for="item in filteredItems" :key="item.id">
+            <article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 overflow-hidden">
+              <div x-show="item.imageUrl" class="aspect-[3/1] bg-surface-100 dark:bg-surface-700">
+                <img
+                  :src="item.imageUrl"
+                  alt=""
+                  class="w-full h-full object-cover"
+                  loading="lazy"
+                >
+              </div>
+              <div class="p-6">
+                {# Meta bar #}
+                <div class="flex flex-wrap items-center gap-3 mb-4 text-sm">
+                  <a
+                    :href="item.sourceUrl || getFeedUrl(item.feedId) || item.link"
+                    class="inline-flex items-center gap-2 px-3 py-1 bg-surface-100 dark:bg-surface-700 rounded-full hover:bg-surface-200 dark:hover:bg-surface-600 transition-colors"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <span class="font-medium text-surface-700 dark:text-surface-300" x-text="item.sourceTitle || item.feedTitle"></span>
+                  </a>
+                  <span x-show="item.author" class="text-surface-600 dark:text-surface-400" x-text="'by ' + item.author"></span>
+                  <time :datetime="item.pubDate" class="text-surface-500" x-text="formatDate(item.pubDate, 'long')"></time>
+                </div>
+
+                <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4">
+                  <a
+                    :href="item.link"
+                    class="hover:text-accent-600 dark:hover:text-accent-400"
+                    target="_blank"
+                    rel="noopener"
+                    x-text="item.title"
+                  ></a>
+                </h2>
+
+                <p x-show="item.description" class="text-surface-600 dark:text-surface-400 mb-4 leading-relaxed" x-text="item.description"></p>
+
+                <div class="flex flex-wrap items-center gap-3">
+                  <a
+                    :href="item.link"
+                    class="inline-flex items-center gap-2 px-4 py-2 bg-accent-600 hover:bg-accent-700 text-white rounded-lg text-sm font-medium transition-colors"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    Read More
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+                    </svg>
+                  </a>
+                  <button
+                    class="share-post-btn"
+                    :data-share-url="item.link"
+                    :data-share-title="item.title"
+                        title="Create post"
+                    aria-label="Create post"
+                  >
+                    <span class="share-post-icon">✏️</span>
+                    <span class="share-post-label">Post</span>
+                  </button>
+                  <button
+                    class="save-later-btn"
+                    :data-save-url="item.link"
+                    :data-save-title="item.title"
+                    data-save-source="news"
+                    title="Save for later"
+                    aria-label="Save for later"
+                  >
+                    <span class="save-later-icon">📑</span>
+                    <span class="save-later-label">Save for Later</span>
+                  </button>
+                  <div x-show="item.categories?.length" class="flex flex-wrap gap-2">
+                    <template x-for="cat in item.categories" :key="cat">
+                      <span class="px-2 py-1 text-xs bg-accent-100 dark:bg-accent-900/30 text-accent-700 dark:text-accent-400 rounded-full" x-text="cat"></span>
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </template>
+        </div>
+      </div>
+
+      {# Pagination #}
+      <div x-show="pagination && pagination.totalPages > 1" class="flex justify-center gap-2 mt-8">
+        <button
+          @click="loadPage(pagination.page - 1)"
+          :disabled="!pagination.hasPrev || loading"
+          class="px-4 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700"
+        >
+          Previous
+        </button>
+        <span class="px-4 py-2 text-sm text-surface-600 dark:text-surface-400">
+          Page <span x-text="pagination.page"></span> of <span x-text="pagination.totalPages"></span>
+        </span>
+        <button
+          @click="loadPage(pagination.page + 1)"
+          :disabled="!pagination.hasNext || loading"
+          class="px-4 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700"
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  </template>
+
+  {# Empty State #}
+  <div x-show="!loading && items.length === 0 && !error" class="text-center py-12">
+    <svg class="w-16 h-16 mx-auto text-surface-300 dark:text-surface-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
+    </svg>
+    <p class="text-surface-600 dark:text-surface-400 text-lg">No news items yet.</p>
+    <p class="text-surface-500 text-sm mt-2">Add some RSS feeds to get started.</p>
+  </div>
+</div>
+
+<script>
+function newsApp() {
+  return {
+    items: [],
+    feeds: [],
+    status: null,
+    pagination: null,
+    loading: true,
+    error: null,
+    viewMode: 'list',
+    filterFeed: 'all',
+    lastUpdated: null,
+    refreshInterval: null,
+
+    async init() {
+      await this.fetchData();
+      // Auto-refresh every 5 minutes
+      this.refreshInterval = setInterval(() => this.fetchData(true), 5 * 60 * 1000);
+    },
+
+    async fetchData(silent = false) {
+      if (!silent) this.loading = true;
+      this.error = null;
+
+      try {
+        const [itemsRes, feedsRes, statusRes] = await Promise.all([
+          fetch('/rssapi/api/items?limit=50').then(r => r.json()),
+          fetch('/rssapi/api/feeds').then(r => r.json()),
+          fetch('/rssapi/api/status').then(r => r.json())
+        ]);
+
+        this.items = itemsRes.items || [];
+        this.pagination = itemsRes.pagination || null;
+        this.feeds = feedsRes.feeds || [];
+        this.status = statusRes;
+        this.lastUpdated = statusRes?.lastSync || new Date().toISOString();
+      } catch (err) {
+        this.error = 'Failed to load news: ' + err.message;
+        console.error('News fetch error:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async loadPage(page) {
+      if (page < 1 || page > this.pagination?.totalPages) return;
+      this.loading = true;
+
+      try {
+        const res = await fetch(`/rssapi/api/items?limit=50&page=${page}`).then(r => r.json());
+        this.items = res.items || [];
+        this.pagination = res.pagination || null;
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      } catch (err) {
+        this.error = 'Failed to load page: ' + err.message;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async refresh() {
+      await this.fetchData();
+    },
+
+    get filteredItems() {
+      if (this.filterFeed === 'all') return this.items;
+      return this.items.filter(item => item.feedId === this.filterFeed);
+    },
+
+    getFeedUrl(feedId) {
+      const feed = this.feeds.find(f => f.id === feedId);
+      return feed?.siteUrl || null;
+    },
+
+    formatDate(dateStr, format = 'short') {
+      if (!dateStr) return '';
+      const date = new Date(dateStr);
+      if (isNaN(date.getTime())) return '';
+
+      if (format === 'full') {
+        return date.toLocaleString(undefined, {
+          year: 'numeric', month: 'short', day: 'numeric',
+          hour: '2-digit', minute: '2-digit'
+        });
+      }
+      if (format === 'long') {
+        return date.toLocaleDateString(undefined, {
+          year: 'numeric', month: 'long', day: 'numeric'
+        });
+      }
+      return date.toLocaleDateString(undefined, {
+        month: 'short', day: 'numeric'
+      });
+    },
+
+    truncate(str, len) {
+      if (!str) return '';
+      return str.length > len ? str.slice(0, len) + '...' : str;
+    }
+  };
+}
+</script>
diff --git a/notes.njk b/notes.njk
new file mode 100644
index 0000000..646d757
--- /dev/null
+++ b/notes.njk
@@ -0,0 +1,97 @@
+---
+layout: layouts/base.njk
+title: Notes
+withSidebar: true
+pagination:
+  data: collections.notes
+  size: 20
+  alias: paginatedNotes
+  generatePageOnEmptyData: true
+permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
+---
+<div class="h-feed">
+  <div class="flex flex-wrap items-center gap-4 mb-2">
+    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Notes</h1>
+    {% set sparklineSvg = collections.notes | postingFrequency %}
+    {% if sparklineSvg %}
+    <span class="text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
+    {% endif %}
+  </div>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
+    Short thoughts, updates, and quick posts.
+    <span class="text-sm">({{ collections.notes.length }} total)</span>
+  </p>
+
+  {% if paginatedNotes.length > 0 %}
+  <ul class="post-list">
+    {% for post in paginatedNotes %}
+    <li class="h-entry post-card border-l-[3px] border-l-surface-300 dark:border-l-surface-600">
+      <div class="post-header">
+        <a class="u-url" href="{{ post.url }}">
+          <time class="dt-published text-sm text-surface-500 dark:text-surface-400 font-medium" datetime="{{ post.date | isoDate }}">
+            {{ post.date | dateDisplay }}
+          </time>
+        </a>
+        {% if post.data.category %}
+        <span class="post-categories ml-2">
+          {% if post.data.category is string %}
+          <span class="p-category">{{ post.data.category }}</span>
+          {% else %}
+          {% for cat in post.data.category %}
+          <span class="p-category">{{ cat }}</span>
+          {% endfor %}
+          {% endif %}
+        </span>
+        {% endif %}
+      </div>
+      <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
+        {{ post.templateContent | safe }}
+      </div>
+      <div class="post-footer mt-3">
+        <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline">
+          Permalink
+        </a>
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+
+  {# Pagination controls #}
+  {% if pagination.pages.length > 1 %}
+  <nav class="pagination" aria-label="Notes pagination">
+    <div class="pagination-info">
+      Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
+    </div>
+    <div class="pagination-links">
+      {% if pagination.href.previous %}
+      <a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </span>
+      {% endif %}
+
+      {% if pagination.href.next %}
+      <a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </span>
+      {% endif %}
+    </div>
+  </nav>
+  {% endif %}
+
+  {% else %}
+  {% set postType = "note" %}
+  {% include "components/empty-collection.njk" %}
+  {% endif %}
+</div>
diff --git a/package-lock.json b/package-lock.json
index 5a56b40..f1c1f87 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,21 +1,52 @@
 {
-  "name": "blog",
+  "name": "indiekit-eleventy-theme",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "blog",
+      "name": "indiekit-eleventy-theme",
       "version": "1.0.0",
+      "dependencies": {
+        "@11ty/eleventy": "^3.0.0",
+        "@11ty/eleventy-fetch": "^4.0.1",
+        "@11ty/eleventy-img": "^6.0.0",
+        "@11ty/eleventy-plugin-rss": "^2.0.2",
+        "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
+        "@11ty/is-land": "^5.0.1",
+        "@alpinejs/collapse": "^3.15.8",
+        "@atproto/api": "^0.12.0",
+        "@chrisburnell/eleventy-cache-webmentions": "^2.2.7",
+        "@fontsource/inter": "^5.2.8",
+        "@quasibit/eleventy-plugin-sitemap": "^2.2.0",
+        "@resvg/resvg-js": "^2.6.2",
+        "@rknightuk/eleventy-plugin-post-graph": "^1.0.8",
+        "@zachleat/filter-container": "^4.0.0",
+        "@zachleat/table-saw": "^1.0.7",
+        "alpinejs": "^3.15.8",
+        "eleventy-plugin-embed-everything": "^1.21.0",
+        "gray-matter": "^4.0.3",
+        "html-minifier-terser": "^7.0.0",
+        "lite-youtube-embed": "^0.3.2",
+        "markdown-it": "^14.0.0",
+        "markdown-it-anchor": "^9.2.0",
+        "pagefind": "^1.3.0",
+        "rss-parser": "^3.13.0",
+        "satori": "^0.19.2",
+        "unfurl.js": "^6.4.0"
+      },
       "devDependencies": {
-        "@11ty/eleventy": "^3.0.0"
+        "@tailwindcss/typography": "^0.5.0",
+        "autoprefixer": "^10.4.0",
+        "postcss": "^8.4.0",
+        "postcss-cli": "^11.0.0",
+        "tailwindcss": "^3.4.0"
       }
     },
     "node_modules/@11ty/dependency-tree": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@11ty/dependency-tree/-/dependency-tree-4.0.2.tgz",
       "integrity": "sha512-RTF6VTZHatYf7fSZBUN3RKwiUeJh5dhWV61gDPrHhQF2/gzruAkYz8yXuvGLx3w3ZBKreGrR+MfYpSVkdbdbLA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@11ty/eleventy-utils": "^2.0.1"
@@ -25,7 +56,6 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@11ty/dependency-tree-esm/-/dependency-tree-esm-2.0.4.tgz",
       "integrity": "sha512-MYKC0Ac77ILr1HnRJalzKDlb9Z8To3kXQCltx299pUXXUFtJ1RIONtULlknknqW8cLe19DLVgmxVCtjEFm7h0A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@11ty/eleventy-utils": "^2.0.7",
@@ -38,7 +68,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.1.2.tgz",
       "integrity": "sha512-IcsDlbXnBf8cHzbM1YBv3JcTyLB35EK88QexmVyFdVJVgUU6bh9g687rpxryJirHzo06PuwnYaEEdVZQfIgRGg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@11ty/dependency-tree": "^4.0.0",
@@ -90,7 +119,6 @@
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-2.0.8.tgz",
       "integrity": "sha512-15oC5M1DQlCaOMUq4limKRYmWiGecDaGwryr7fTE/oM9Ix8siqMvWi+I8VjsfrGr+iViDvWcH/TVI6D12d93mA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@11ty/eleventy-utils": "^2.0.1",
@@ -117,11 +145,72 @@
         "url": "https://opencollective.com/11ty"
       }
     },
+    "node_modules/@11ty/eleventy-fetch": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-fetch/-/eleventy-fetch-4.0.1.tgz",
+      "integrity": "sha512-yIiLM5ziBmg86i4TlXpBdcIygJHvh/GgPJyAiFOckO9H4y9cQDM8eIcJCUQ4Mum0NEVui/OjhEut2R08xw0vlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "flat-cache": "^3.0.4",
+        "node-fetch": "^2.6.7",
+        "p-queue": "^6.6.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/eleventy-img": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-img/-/eleventy-img-6.0.4.tgz",
+      "integrity": "sha512-jSy9BmubVs0mN76dcXWfSYDgRU+1+/rq/SxUR3MgIvTUAJRDop5pFW+Z1f56CDcOlEHaiPqHgnfOlqRmJvXl7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-fetch": "^5.1.0",
+        "@11ty/eleventy-utils": "^2.0.7",
+        "brotli-size": "^4.0.0",
+        "debug": "^4.4.0",
+        "entities": "^6.0.0",
+        "image-size": "^1.2.1",
+        "p-queue": "^6.6.2",
+        "sharp": "^0.33.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/eleventy-img/node_modules/@11ty/eleventy-fetch": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-fetch/-/eleventy-fetch-5.1.1.tgz",
+      "integrity": "sha512-/xFJLCrqKlcnRKIfO9Qjd1QOs4IpvypljXET955+EgdRPFA+h8Or6bDnZBbcwr6KS7yeUuzp5k1DhXgbentSTA==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^2.0.7",
+        "@rgrove/parse-xml": "^4.2.0",
+        "debug": "^4.4.3",
+        "flatted": "^3.3.3",
+        "p-queue": "6.6.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
     "node_modules/@11ty/eleventy-plugin-bundle": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-bundle/-/eleventy-plugin-bundle-3.0.7.tgz",
       "integrity": "sha512-QK1tRFBhQdZASnYU8GMzpTdsMMFLVAkuU0gVVILqNyp09xJJZb81kAS3AFrNrwBCsgLxTdWHJ8N64+OTTsoKkA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@11ty/eleventy-utils": "^2.0.2",
@@ -136,11 +225,39 @@
         "url": "https://opencollective.com/11ty"
       }
     },
+    "node_modules/@11ty/eleventy-plugin-rss": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-rss/-/eleventy-plugin-rss-2.0.4.tgz",
+      "integrity": "sha512-LF60sGVlxGTryQe3hTifuzrwF8R7XbrNsM2xfcDcNMSliLN4kmB+7zvoLRySRx0AQDjqhPTAeeeT0ra6/9zHUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^2.0.0",
+        "@11ty/posthtml-urls": "^1.0.1",
+        "debug": "^4.4.0",
+        "posthtml": "^0.16.6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.2.tgz",
+      "integrity": "sha512-T6xVVRDJuHlrFMHbUiZkHjj5o1IlLzZW+1IL9eUsyXFU7rY2ztcYhZew/64vmceFFpQwzuSfxQOXxTJYmKkQ+A==",
+      "license": "MIT",
+      "dependencies": {
+        "prismjs": "^1.30.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
     "node_modules/@11ty/eleventy-utils": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-2.0.7.tgz",
       "integrity": "sha512-6QE+duqSQ0GY9rENXYb4iPR4AYGdrFpqnmi59tFp9VrleOl0QSh8VlBr2yd6dlhkdtj7904poZW5PvGr9cMiJQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -150,11 +267,20 @@
         "url": "https://opencollective.com/11ty"
       }
     },
+    "node_modules/@11ty/is-land": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@11ty/is-land/-/is-land-5.0.1.tgz",
+      "integrity": "sha512-Rh/sLhE4vrc2JaSjeY385v2UxnDY9BhnQtitETb3SKyr0A48Q5Vn06q2AvDBHObtk9+dcFWsoZX4jhT+O9g+xQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
     "node_modules/@11ty/lodash-custom": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/@11ty/lodash-custom/-/lodash-custom-4.17.21.tgz",
       "integrity": "sha512-Mqt6im1xpb1Ykn3nbcCovWXK3ggywRJa+IXIdoz4wIIK+cvozADH63lexcuPpGS/gJ6/m2JxyyXDyupkMr5DHw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=14"
@@ -168,7 +294,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@11ty/posthtml-urls/-/posthtml-urls-1.0.2.tgz",
       "integrity": "sha512-0vaV3Wt0surZ+oS1VdKKe0axeeupuM+l7W/Z866WFQwF+dGg2Tc/nmhk/5l74/Y55P8KyImnLN9CdygNw2huHg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "evaluate-value": "^2.0.0",
@@ -184,7 +309,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/@11ty/recursive-copy/-/recursive-copy-4.0.3.tgz",
       "integrity": "sha512-SX48BTLEGX8T/OsKWORsHAAeiDsbFl79Oa/0Wg/mv/d27b7trCVZs7fMHvpSgDvZz/fZqx5rDk8+nx5oyT7xBw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "errno": "^1.0.0",
@@ -196,11 +320,1351 @@
         "node": ">=18"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@alpinejs/collapse": {
+      "version": "3.15.8",
+      "resolved": "https://registry.npmjs.org/@alpinejs/collapse/-/collapse-3.15.8.tgz",
+      "integrity": "sha512-zZhD8DHdHuzGFe8+cHNH99K//oFutzKwcy6vagydb3KFlTzmqxTnHZo5sSV81lAazhV7qKsYCKtNV14tR9QkJw==",
+      "license": "MIT"
+    },
+    "node_modules/@atproto/api": {
+      "version": "0.12.29",
+      "resolved": "https://registry.npmjs.org/@atproto/api/-/api-0.12.29.tgz",
+      "integrity": "sha512-PyzPLjGWR0qNOMrmj3Nt3N5NuuANSgOk/33Bu3j+rFjjPrHvk9CI6iQPU6zuDaDCoyOTRJRafw8X/aMQw+ilgw==",
+      "license": "MIT",
+      "dependencies": {
+        "@atproto/common-web": "^0.3.0",
+        "@atproto/lexicon": "^0.4.0",
+        "@atproto/syntax": "^0.3.0",
+        "@atproto/xrpc": "^0.5.0",
+        "await-lock": "^2.2.2",
+        "multiformats": "^9.9.0",
+        "tlds": "^1.234.0"
+      }
+    },
+    "node_modules/@atproto/common-web": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@atproto/common-web/-/common-web-0.3.2.tgz",
+      "integrity": "sha512-Vx0JtL1/CssJbFAb0UOdvTrkbUautsDfHNOXNTcX2vyPIxH9xOameSqLLunM1hZnOQbJwyjmQCt6TV+bhnanDg==",
+      "license": "MIT",
+      "dependencies": {
+        "graphemer": "^1.4.0",
+        "multiformats": "^9.9.0",
+        "uint8arrays": "3.0.0",
+        "zod": "^3.23.8"
+      }
+    },
+    "node_modules/@atproto/lex-data": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/@atproto/lex-data/-/lex-data-0.0.8.tgz",
+      "integrity": "sha512-1Y5tz7BkS7380QuLNXaE8GW8Xba+mRWugt8BKM4BUFYjjUZdmirU8lr72iM4XlEBrzRu8Cfvj+MbsbYaZv+IgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@atproto/syntax": "0.4.2",
+        "multiformats": "^9.9.0",
+        "tslib": "^2.8.1",
+        "uint8arrays": "3.0.0",
+        "unicode-segmenter": "^0.14.0"
+      }
+    },
+    "node_modules/@atproto/lex-data/node_modules/@atproto/syntax": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@atproto/syntax/-/syntax-0.4.2.tgz",
+      "integrity": "sha512-X9XSRPinBy/0VQ677j8VXlBsYSsUXaiqxWVpGGxJYsAhugdQRb0jqaVKJFtm6RskeNkV6y9xclSUi9UYG/COrA==",
+      "license": "MIT"
+    },
+    "node_modules/@atproto/lex-json": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/@atproto/lex-json/-/lex-json-0.0.8.tgz",
+      "integrity": "sha512-w1Qmkae1QhmNz+i1Zm3xr3jp0UPPRENmdlpU0qIrdxWDo9W4Mzkeyc3eSoa+Zs+zN8xkRSQw7RLZte/B7Ipdwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@atproto/lex-data": "0.0.8",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@atproto/lexicon": {
+      "version": "0.4.14",
+      "resolved": "https://registry.npmjs.org/@atproto/lexicon/-/lexicon-0.4.14.tgz",
+      "integrity": "sha512-jiKpmH1QER3Gvc7JVY5brwrfo+etFoe57tKPQX/SmPwjvUsFnJAow5xLIryuBaJgFAhnTZViXKs41t//pahGHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@atproto/common-web": "^0.4.2",
+        "@atproto/syntax": "^0.4.0",
+        "iso-datestring-validator": "^2.2.2",
+        "multiformats": "^9.9.0",
+        "zod": "^3.23.8"
+      }
+    },
+    "node_modules/@atproto/lexicon/node_modules/@atproto/common-web": {
+      "version": "0.4.12",
+      "resolved": "https://registry.npmjs.org/@atproto/common-web/-/common-web-0.4.12.tgz",
+      "integrity": "sha512-3aCJemqM/fkHQrVPbTCHCdiVstKFI+2LkFLvUhO6XZP0EqUZa/rg/CIZBKTFUWu9I5iYiaEiXL9VwcDRpEevSw==",
+      "license": "MIT",
+      "dependencies": {
+        "@atproto/lex-data": "0.0.8",
+        "@atproto/lex-json": "0.0.8",
+        "zod": "^3.23.8"
+      }
+    },
+    "node_modules/@atproto/lexicon/node_modules/@atproto/syntax": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@atproto/syntax/-/syntax-0.4.2.tgz",
+      "integrity": "sha512-X9XSRPinBy/0VQ677j8VXlBsYSsUXaiqxWVpGGxJYsAhugdQRb0jqaVKJFtm6RskeNkV6y9xclSUi9UYG/COrA==",
+      "license": "MIT"
+    },
+    "node_modules/@atproto/syntax": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@atproto/syntax/-/syntax-0.3.4.tgz",
+      "integrity": "sha512-8CNmi5DipOLaVeSMPggMe7FCksVag0aO6XZy9WflbduTKM4dFZVCs4686UeMLfGRXX+X966XgwECHoLYrovMMg==",
+      "license": "MIT"
+    },
+    "node_modules/@atproto/xrpc": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@atproto/xrpc/-/xrpc-0.5.0.tgz",
+      "integrity": "sha512-swu+wyOLvYW4l3n+VAuJbHcPcES+tin2Lsrp8Bw5aIXIICiuFn1YMFlwK9JwVUzTH21Py1s1nHEjr4CJeElJog==",
+      "license": "MIT",
+      "dependencies": {
+        "@atproto/lexicon": "^0.4.0",
+        "zod": "^3.21.4"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
+      "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@chrisburnell/eleventy-cache-webmentions": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@chrisburnell/eleventy-cache-webmentions/-/eleventy-cache-webmentions-2.2.7.tgz",
+      "integrity": "sha512-9Z4fD5MdTBvOprzcNcRGOyyaVo0ETyoQEiotNgV/eFFJiSidV3VRcab69yybJCkrq7L+aqWRrCdrx7ilL8YKTg==",
+      "funding": [
+        {
+          "type": "buymeacoffee",
+          "url": "https://buymeacoffee.com/chrisburnell"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/chrisburnell"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-fetch": "^5.1.1",
+        "sanitize-html": "^2.17.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@chrisburnell/eleventy-cache-webmentions/node_modules/@11ty/eleventy-fetch": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-fetch/-/eleventy-fetch-5.1.1.tgz",
+      "integrity": "sha512-/xFJLCrqKlcnRKIfO9Qjd1QOs4IpvypljXET955+EgdRPFA+h8Or6bDnZBbcwr6KS7yeUuzp5k1DhXgbentSTA==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^2.0.7",
+        "@rgrove/parse-xml": "^4.2.0",
+        "debug": "^4.4.3",
+        "flatted": "^3.3.3",
+        "p-queue": "6.6.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
+      "integrity": "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@fontsource/inter": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.8.tgz",
+      "integrity": "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@iarna/toml": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
+      "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==",
+      "license": "ISC"
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
+      "integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
+      "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
+      "integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
+      "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
+      "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
+      "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
+      "integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
+      "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
+      "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
+      "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
+      "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.0.5"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
+      "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
+      "integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
+      "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
+      "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
+      "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
+      "integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.2.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
+      "integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
+      "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pagefind/darwin-arm64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.4.0.tgz",
+      "integrity": "sha512-2vMqkbv3lbx1Awea90gTaBsvpzgRs7MuSgKDxW0m9oV1GPZCZbZBJg/qL83GIUEN2BFlY46dtUZi54pwH+/pTQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@pagefind/darwin-x64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/darwin-x64/-/darwin-x64-1.4.0.tgz",
+      "integrity": "sha512-e7JPIS6L9/cJfow+/IAqknsGqEPjJnVXGjpGm25bnq+NPdoD3c/7fAwr1OXkG4Ocjx6ZGSCijXEV4ryMcH2E3A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@pagefind/freebsd-x64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/freebsd-x64/-/freebsd-x64-1.4.0.tgz",
+      "integrity": "sha512-WcJVypXSZ+9HpiqZjFXMUobfFfZZ6NzIYtkhQ9eOhZrQpeY5uQFqNWLCk7w9RkMUwBv1HAMDW3YJQl/8OqsV0Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@pagefind/linux-arm64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/linux-arm64/-/linux-arm64-1.4.0.tgz",
+      "integrity": "sha512-PIt8dkqt4W06KGmQjONw7EZbhDF+uXI7i0XtRLN1vjCUxM9vGPdtJc2mUyVPevjomrGz5M86M8bqTr6cgDp1Uw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@pagefind/linux-x64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/linux-x64/-/linux-x64-1.4.0.tgz",
+      "integrity": "sha512-z4oddcWwQ0UHrTHR8psLnVlz6USGJ/eOlDPTDYZ4cI8TK8PgwRUPQZp9D2iJPNIPcS6Qx/E4TebjuGJOyK8Mmg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@pagefind/windows-x64": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@pagefind/windows-x64/-/windows-x64-1.4.0.tgz",
+      "integrity": "sha512-NkT+YAdgS2FPCn8mIA9bQhiBs+xmniMGq1LFPDhcFn0+2yIUEiIG06t7bsZlhdjknEQRTSdT7YitP6fC5qwP0g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@quasibit/eleventy-plugin-sitemap": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@quasibit/eleventy-plugin-sitemap/-/eleventy-plugin-sitemap-2.2.0.tgz",
+      "integrity": "sha512-7YoU4jjipLjifBhZwttLWbAAkImmBfeMQ0+1ST6mJO45z2mFLHZcgnfHwGF2joNk74wiYNsNOB1ennouzQFZIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "array-flat-polyfill": "^1.0.1",
+        "sitemap": "^6.3.2"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/@resvg/resvg-js": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js/-/resvg-js-2.6.2.tgz",
+      "integrity": "sha512-xBaJish5OeGmniDj9cW5PRa/PtmuVU3ziqrbr5xJj901ZDN4TosrVaNZpEiLZAxdfnhAe7uQ7QFWfjPe9d9K2Q==",
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@resvg/resvg-js-android-arm-eabi": "2.6.2",
+        "@resvg/resvg-js-android-arm64": "2.6.2",
+        "@resvg/resvg-js-darwin-arm64": "2.6.2",
+        "@resvg/resvg-js-darwin-x64": "2.6.2",
+        "@resvg/resvg-js-linux-arm-gnueabihf": "2.6.2",
+        "@resvg/resvg-js-linux-arm64-gnu": "2.6.2",
+        "@resvg/resvg-js-linux-arm64-musl": "2.6.2",
+        "@resvg/resvg-js-linux-x64-gnu": "2.6.2",
+        "@resvg/resvg-js-linux-x64-musl": "2.6.2",
+        "@resvg/resvg-js-win32-arm64-msvc": "2.6.2",
+        "@resvg/resvg-js-win32-ia32-msvc": "2.6.2",
+        "@resvg/resvg-js-win32-x64-msvc": "2.6.2"
+      }
+    },
+    "node_modules/@resvg/resvg-js-android-arm-eabi": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-android-arm-eabi/-/resvg-js-android-arm-eabi-2.6.2.tgz",
+      "integrity": "sha512-FrJibrAk6v29eabIPgcTUMPXiEz8ssrAk7TXxsiZzww9UTQ1Z5KAbFJs+Z0Ez+VZTYgnE5IQJqBcoSiMebtPHA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@resvg/resvg-js-android-arm64": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-android-arm64/-/resvg-js-android-arm64-2.6.2.tgz",
+      "integrity": "sha512-VcOKezEhm2VqzXpcIJoITuvUS/fcjIw5NA/w3tjzWyzmvoCdd+QXIqy3FBGulWdClvp4g+IfUemigrkLThSjAQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@resvg/resvg-js-darwin-arm64": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-darwin-arm64/-/resvg-js-darwin-arm64-2.6.2.tgz",
+      "integrity": "sha512-nmok2LnAd6nLUKI16aEB9ydMC6Lidiiq2m1nEBDR1LaaP7FGs4AJ90qDraxX+CWlVuRlvNjyYJTNv8qFjtL9+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@resvg/resvg-js-darwin-x64": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-darwin-x64/-/resvg-js-darwin-x64-2.6.2.tgz",
+      "integrity": "sha512-GInyZLjgWDfsVT6+SHxQVRwNzV0AuA1uqGsOAW+0th56J7Nh6bHHKXHBWzUrihxMetcFDmQMAX1tZ1fZDYSRsw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@resvg/resvg-js-linux-arm-gnueabihf": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm-gnueabihf/-/resvg-js-linux-arm-gnueabihf-2.6.2.tgz",
+      "integrity": "sha512-YIV3u/R9zJbpqTTNwTZM5/ocWetDKGsro0SWp70eGEM9eV2MerWyBRZnQIgzU3YBnSBQ1RcxRZvY/UxwESfZIw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@resvg/resvg-js-linux-arm64-gnu": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm64-gnu/-/resvg-js-linux-arm64-gnu-2.6.2.tgz",
+      "integrity": "sha512-zc2BlJSim7YR4FZDQ8OUoJg5holYzdiYMeobb9pJuGDidGL9KZUv7SbiD4E8oZogtYY42UZEap7dqkkYuA91pg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@resvg/resvg-js-linux-arm64-musl": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm64-musl/-/resvg-js-linux-arm64-musl-2.6.2.tgz",
+      "integrity": "sha512-3h3dLPWNgSsD4lQBJPb4f+kvdOSJHa5PjTYVsWHxLUzH4IFTJUAnmuWpw4KqyQ3NA5QCyhw4TWgxk3jRkQxEKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@resvg/resvg-js-linux-x64-gnu": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-x64-gnu/-/resvg-js-linux-x64-gnu-2.6.2.tgz",
+      "integrity": "sha512-IVUe+ckIerA7xMZ50duAZzwf1U7khQe2E0QpUxu5MBJNao5RqC0zwV/Zm965vw6D3gGFUl7j4m+oJjubBVoftw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@resvg/resvg-js-linux-x64-musl": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-x64-musl/-/resvg-js-linux-x64-musl-2.6.2.tgz",
+      "integrity": "sha512-UOf83vqTzoYQO9SZ0fPl2ZIFtNIz/Rr/y+7X8XRX1ZnBYsQ/tTb+cj9TE+KHOdmlTFBxhYzVkP2lRByCzqi4jQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@resvg/resvg-js-win32-arm64-msvc": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-arm64-msvc/-/resvg-js-win32-arm64-msvc-2.6.2.tgz",
+      "integrity": "sha512-7C/RSgCa+7vqZ7qAbItfiaAWhyRSoD4l4BQAbVDqRRsRgY+S+hgS3in0Rxr7IorKUpGE69X48q6/nOAuTJQxeQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@resvg/resvg-js-win32-ia32-msvc": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-ia32-msvc/-/resvg-js-win32-ia32-msvc-2.6.2.tgz",
+      "integrity": "sha512-har4aPAlvjnLcil40AC77YDIk6loMawuJwFINEM7n0pZviwMkMvjb2W5ZirsNOZY4aDbo5tLx0wNMREp5Brk+w==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@resvg/resvg-js-win32-x64-msvc": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-x64-msvc/-/resvg-js-win32-x64-msvc-2.6.2.tgz",
+      "integrity": "sha512-ZXtYhtUr5SSaBrUDq7DiyjOFJqBVL/dOBN7N/qmi/pO0IgiWW/f/ue3nbvu9joWE5aAKDoIzy/CxsY0suwGosQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@rgrove/parse-xml": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@rgrove/parse-xml/-/parse-xml-4.2.0.tgz",
+      "integrity": "sha512-UuBOt7BOsKVOkFXRe4Ypd/lADuNIfqJXv8GvHqtXaTYXPPKkj2nS2zPllVsrtRjcomDhIJVBnZwfmlI222WH8g==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@rknightuk/eleventy-plugin-post-graph/-/eleventy-plugin-post-graph-1.0.8.tgz",
+      "integrity": "sha512-GRllThUf7HKigjjnxsqj4G23UGq3sIShNN+wfbqQMSOuNtIQbS2l2eHI6hn2UErvK/W9n3RKc0eYmMpDMyO98w==",
+      "license": "ISC",
+      "dependencies": {
+        "@11ty/eleventy": "^2.0.1",
+        "moment": "^2.29.4"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/@11ty/dependency-tree": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@11ty/dependency-tree/-/dependency-tree-2.0.1.tgz",
+      "integrity": "sha512-5R+DsT9LJ9tXiSQ4y+KLFppCkQyXhzAm1AIuBWE/sbU0hSXY5pkhoqQYEcPJQFg/nglL+wD55iv2j+7O96UAvg==",
+      "license": "MIT"
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/@11ty/eleventy": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-2.0.1.tgz",
+      "integrity": "sha512-t8XVUbCJByhVEa1RzO0zS2QzbL3wPY8ot1yUw9noqiSHxJWUwv6jiwm1/MZDPTYtkZH2ZHvdQIRQ5/SjG9XmLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/dependency-tree": "^2.0.1",
+        "@11ty/eleventy-dev-server": "^1.0.4",
+        "@11ty/eleventy-utils": "^1.0.1",
+        "@11ty/lodash-custom": "^4.17.21",
+        "@iarna/toml": "^2.2.5",
+        "@sindresorhus/slugify": "^1.1.2",
+        "bcp-47-normalize": "^1.1.1",
+        "chokidar": "^3.5.3",
+        "cross-spawn": "^7.0.3",
+        "debug": "^4.3.4",
+        "dependency-graph": "^0.11.0",
+        "ejs": "^3.1.9",
+        "fast-glob": "^3.2.12",
+        "graceful-fs": "^4.2.11",
+        "gray-matter": "^4.0.3",
+        "hamljs": "^0.6.2",
+        "handlebars": "^4.7.7",
+        "is-glob": "^4.0.3",
+        "iso-639-1": "^2.1.15",
+        "kleur": "^4.1.5",
+        "liquidjs": "^10.7.0",
+        "luxon": "^3.3.0",
+        "markdown-it": "^13.0.1",
+        "micromatch": "^4.0.5",
+        "minimist": "^1.2.8",
+        "moo": "^0.5.2",
+        "multimatch": "^5.0.0",
+        "mustache": "^4.2.0",
+        "normalize-path": "^3.0.0",
+        "nunjucks": "^3.2.3",
+        "path-to-regexp": "^6.2.1",
+        "please-upgrade-node": "^3.2.0",
+        "posthtml": "^0.16.6",
+        "posthtml-urls": "^1.0.0",
+        "pug": "^3.0.2",
+        "recursive-copy": "^2.0.14",
+        "semver": "^7.3.8",
+        "slugify": "^1.6.6"
+      },
+      "bin": {
+        "eleventy": "cmd.js"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/@11ty/eleventy-dev-server": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-1.0.4.tgz",
+      "integrity": "sha512-qVBmV2G1KF/0o5B/3fITlrrDHy4bONUI2YuN3/WJ3BNw4NU1d/we8XhKrlgq13nNvHoBx5czYp3LZt8qRG53Fg==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^1.0.1",
+        "chokidar": "^3.5.3",
+        "debug": "^4.3.4",
+        "dev-ip": "^1.0.1",
+        "finalhandler": "^1.2.0",
+        "mime": "^3.0.0",
+        "minimist": "^1.2.8",
+        "morphdom": "^2.7.0",
+        "please-upgrade-node": "^3.2.0",
+        "ssri": "^8.0.1",
+        "ws": "^8.13.0"
+      },
+      "bin": {
+        "eleventy-dev-server": "cmd.js"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/@11ty/eleventy-utils": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.3.tgz",
+      "integrity": "sha512-nULO91om7vQw4Y/UBjM8i7nJ1xl+/nyK4rImZ41lFxiY2d+XUz7ChAj1CDYFjrLZeu0utAYJTZ45LlcHTkUG4g==",
+      "license": "MIT",
+      "dependencies": {
+        "normalize-path": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/@sindresorhus/slugify": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-1.1.2.tgz",
+      "integrity": "sha512-V9nR/W0Xd9TSGXpZ4iFUcFGhuOJtZX82Fzxj1YISlbSgKvIiNa7eLEZrT0vAraPOt++KHauIVNYgGRgjc13dXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/transliterate": "^0.1.1",
+        "escape-string-regexp": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/@sindresorhus/transliterate": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/transliterate/-/transliterate-0.1.2.tgz",
+      "integrity": "sha512-5/kmIOY9FF32nicXH+5yLNTX4NJ4atl7jRgqAJuIn/iyDFXBktOKDxCvyGE/EzmF4ngSUvjXxQUQlQiZ5lfw+w==",
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^2.0.0",
+        "lodash.deburr": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/@sindresorhus/transliterate/node_modules/escape-string-regexp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/bcp-47": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-1.0.8.tgz",
+      "integrity": "sha512-Y9y1QNBBtYtv7hcmoX0tR+tUNSFZGZ6OL6vKPObq8BbOhkCoyayF6ogfLTgAli/KuAEbsYHYUNq2AQuY6IuLag==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/bcp-47-match": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-1.0.3.tgz",
+      "integrity": "sha512-LggQ4YTdjWQSKELZF5JwchnBa1u0pIQSZf5lSdOHEdbVP55h0qICA/FUp3+W99q0xqxYa1ZQizTUH87gecII5w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/bcp-47-normalize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/bcp-47-normalize/-/bcp-47-normalize-1.1.1.tgz",
+      "integrity": "sha512-jWZ1Jdu3cs0EZdfCkS0UE9Gg01PtxnChjEBySeB+Zo6nkqtFfnvtoQQgP1qU1Oo4qgJgxhTI6Sf9y/pZIhPs0A==",
+      "license": "MIT",
+      "dependencies": {
+        "bcp-47": "^1.0.0",
+        "bcp-47-match": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/dependency-graph": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
+      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/iso-639-1": {
+      "version": "2.1.15",
+      "resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-2.1.15.tgz",
+      "integrity": "sha512-7c7mBznZu2ktfvyT582E2msM+Udc1EjOyhVRE/0ZsjD9LBtWSm23h3PtiRh2a35XoUsTQQjJXaJzuLjXsOdFDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/linkify-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/markdown-it": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.2.tgz",
+      "integrity": "sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "~3.0.1",
+        "linkify-it": "^4.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
+      "license": "MIT"
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/ssri": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
+      "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph/node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "license": "MIT"
+    },
+    "node_modules/@shuding/opentype.js": {
+      "version": "1.4.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@shuding/opentype.js/-/opentype.js-1.4.0-beta.0.tgz",
+      "integrity": "sha512-3NgmNyH3l/Hv6EvsWJbsvpcpUba6R8IREQ83nH83cyakCw7uM1arZKNfHwv1Wz6jgqrF/j4x5ELvR6PnK9nTcA==",
+      "license": "MIT",
+      "dependencies": {
+        "fflate": "^0.7.3",
+        "string.prototype.codepointat": "^0.2.1"
+      },
+      "bin": {
+        "ot": "bin/ot"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
     "node_modules/@sindresorhus/slugify": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-2.2.1.tgz",
       "integrity": "sha512-MkngSCRZ8JdSOCHRaYd+D01XhvU3Hjy6MGl06zhOk614hp9EOAp5gIkBeQg7wtmxpitU6eAL4kdiRMcJa2dlrw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@sindresorhus/transliterate": "^1.0.0",
@@ -217,7 +1681,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/transliterate/-/transliterate-1.6.0.tgz",
       "integrity": "sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "escape-string-regexp": "^5.0.0"
@@ -229,18 +1692,102 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+      "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/minimatch": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
+      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "14.18.63",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
+      "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/sax": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.7.tgz",
+      "integrity": "sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
+      "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.1.5"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
+      "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==",
+      "license": "MIT"
+    },
+    "node_modules/@zachleat/filter-container": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@zachleat/filter-container/-/filter-container-4.0.0.tgz",
+      "integrity": "sha512-4etUifhHciQTMtlDymb4cus03qYZrKiuK0gY0cOU4Jrt0LA3ZvPVTwO6esqUdvbpte5ypodmpx84wwbT3Fy5Jw==",
+      "license": "MIT"
+    },
+    "node_modules/@zachleat/table-saw": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@zachleat/table-saw/-/table-saw-1.0.7.tgz",
+      "integrity": "sha512-AxYShldkUoofdzqyH/pgbiXBgoRbFtoQYKbCjTK7diViqepM2SqZoMZm7ofc9UeGaDWgktAOmoJg3T+yN0SAxA==",
+      "license": "MIT"
+    },
     "node_modules/a-sync-waterfall": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
       "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/acorn": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
-      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
-      "dev": true,
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -250,10 +1797,9 @@
       }
     },
     "node_modules/acorn-walk": {
-      "version": "8.3.5",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.5.tgz",
-      "integrity": "sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==",
-      "dev": true,
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
+      "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
       "license": "MIT",
       "dependencies": {
         "acorn": "^8.11.0"
@@ -262,11 +1808,52 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/alpinejs": {
+      "version": "3.15.8",
+      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.15.8.tgz",
+      "integrity": "sha512-zxIfCRTBGvF1CCLIOMQOxAyBuqibxSEwS6Jm1a3HGA9rgrJVcjEWlwLcQTVGAWGS8YhAsTRLVrtQ5a5QT9bSSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "~3.1.1"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "normalize-path": "^3.0.0",
@@ -280,7 +1867,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -289,28 +1875,40 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "license": "MIT"
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
       "license": "Python-2.0"
     },
     "node_modules/array-differ": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
       "integrity": "sha512-LeZY+DZDRnvP7eMuQ6LHfCzUGxAAIViUBliK24P3hWXL6y4SortgR6Nim6xrkfSLlmH0+k+9NYNwVC2s53ZrYQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/array-flat-polyfill": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-flat-polyfill/-/array-flat-polyfill-1.0.1.tgz",
+      "integrity": "sha512-hfJmKupmQN0lwi0xG6FQ5U8Rd97RnIERplymOv/qpq8AoNKPPAnxJadjFA23FNWm88wykh9HmpLJUUwUtNU/iw==",
+      "license": "CC0-1.0",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
       "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "array-uniq": "^1.0.1"
@@ -323,7 +1921,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
       "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -333,7 +1930,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
       "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -343,21 +1939,104 @@
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
       "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/assert-never": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.4.0.tgz",
+      "integrity": "sha512-5oJg84os6NMQNl27T9LnZkvvqzvAnHu03ShCnoj6bsJwS7L8AO4lf+C/XjK/nvzEqQB744moC6V128RucQd1jA==",
+      "license": "MIT"
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.23",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.23.tgz",
+      "integrity": "sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001760",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/await-lock": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/await-lock/-/await-lock-2.2.2.tgz",
+      "integrity": "sha512-aDczADvlvTGajTDjcjpJMqRkOF6Qdz3YbPZm/PyW6tKPkx2hlYBzxMhEywM/tU72HrVZjgl5VCdRuMlA7pZ8Gw==",
+      "license": "MIT"
+    },
+    "node_modules/babel-walk": {
+      "version": "3.0.0-canary-5",
+      "resolved": "https://registry.npmjs.org/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
+      "integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.9.6"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+      "integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.17",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.17.tgz",
+      "integrity": "sha512-agD0MgJFUP/4nvjqzIB29zRPUuCF7Ge6mEv9s8dHrtYD7QWXRcx75rOADE/d5ah1NI+0vkDl0yorDd5U852IQQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
     "node_modules/bcp-47": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-2.1.0.tgz",
       "integrity": "sha512-9IIS3UPrvIa1Ej+lVDdDwO7zLehjqsaByECw0bu2RRGP73jALm6FYbzI5gWbgHLvNdkvfXB5YrSbocZdOS0c0w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-alphabetical": "^2.0.0",
@@ -373,7 +2052,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-2.0.3.tgz",
       "integrity": "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -384,7 +2062,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/bcp-47-normalize/-/bcp-47-normalize-2.3.0.tgz",
       "integrity": "sha512-8I/wfzqQvttUFz7HVJgIZ7+dj3vUaIyIxYXaTRP1YWoSDfzt6TUmxaKZeuXR62qBmYr+nvuWINFRl6pZ5DlN4Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "bcp-47": "^2.0.0",
@@ -399,7 +2076,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -412,7 +2088,6 @@
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
       "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -423,7 +2098,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -432,11 +2106,150 @@
         "node": ">=8"
       }
     },
+    "node_modules/brotli-size": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/brotli-size/-/brotli-size-4.0.0.tgz",
+      "integrity": "sha512-uA9fOtlTRC0iqKfzff1W34DXUA3GyVqbUaeo3Rw3d4gd1eavKVCETXrn3NzO74W+UVkG3UHu8WxUi+XvKI/huA==",
+      "license": "MIT",
+      "dependencies": {
+        "duplexer": "0.1.1"
+      },
+      "engines": {
+        "node": ">= 10.16.0"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "license": "MIT"
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "license": "MIT",
+      "dependencies": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001766",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz",
+      "integrity": "sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/character-parser": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
+      "integrity": "sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-regex": "^1.0.3"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "anymatch": "~3.1.2",
@@ -457,11 +2270,78 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/clean-css": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
+      "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
+      "license": "MIT",
+      "dependencies": {
+        "source-map": "~0.6.0"
+      },
+      "engines": {
+        "node": ">= 10.0"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/commander": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
       "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=14"
@@ -471,14 +2351,90 @@
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/constantinople": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz",
+      "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.6.0",
+        "@babel/types": "^7.6.1"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/css-background-parser": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/css-background-parser/-/css-background-parser-0.1.0.tgz",
+      "integrity": "sha512-2EZLisiZQ+7m4wwur/qiYJRniHX4K5Tc9w93MT3AS0WS1u5kaZ4FKXlOTBhOjc+CgEgPiGY+fX1yWD8UwpEqUA==",
+      "license": "MIT"
+    },
+    "node_modules/css-box-shadow": {
+      "version": "1.0.0-3",
+      "resolved": "https://registry.npmjs.org/css-box-shadow/-/css-box-shadow-1.0.0-3.tgz",
+      "integrity": "sha512-9jaqR6e7Ohds+aWwmhe6wILJ99xYQbfmK9QQB9CcMjDbTxPZjwEmUQpU91OG05Xgm8BahT5fW+svbsQGjS/zPg==",
+      "license": "MIT"
+    },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/css-gradient-parser": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/css-gradient-parser/-/css-gradient-parser-0.0.17.tgz",
+      "integrity": "sha512-w2Xy9UMMwlKtou0vlRnXvWglPAceXCTtcmVSo8ZBUvqCV5aXEFP/PC6d+I464810I9FT++UACwTD5511bmGPUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -492,11 +2448,19 @@
         }
       }
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
       "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -506,17 +2470,55 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-1.0.0.tgz",
       "integrity": "sha512-cW3gggJ28HZ/LExwxP2B++aiKxhJXMSIt9K48FOXQkm+vuG5gyatXnLsONRJdzO/7VfjDIiaOOa/bs4l464Lwg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dev-ip": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz",
+      "integrity": "sha512-LmVkry/oDShEgSZPNgqCIp2/TlqtExeGmymru3uCELnfyjY11IzpAproLYs+1X88fXO6DBoYP3ul2Xo2yz2j6A==",
+      "bin": {
+        "dev-ip": "lib/dev-ip.js"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/doctypes": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
+      "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==",
+      "license": "MIT"
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
       "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "domelementtype": "^2.0.1",
@@ -531,7 +2533,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
       "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "funding": {
         "url": "https://github.com/fb55/entities?sponsor=1"
@@ -541,7 +2542,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
       "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -554,7 +2554,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
       "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "domelementtype": "^2.2.0"
@@ -570,7 +2569,6 @@
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
       "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "dom-serializer": "^1.0.1",
@@ -581,18 +2579,312 @@
         "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "license": "MIT",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/duplexer": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
+      "integrity": "sha512-sxNZ+ljy+RA1maXoUReeqBBpBC6RLKmg5ewzV+x+mSETmWNoKdZN6vcQjpFROemza23hGFskJtFNoUWUaQ+R4Q=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/ejs": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.277",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.277.tgz",
+      "integrity": "sha512-wKXFZw4erWmmOz5N/grBoJ2XrNJGDFMu2+W5ACHza5rHtvsqrK4gb6rnLC7XxKB9WlJ+RmyQatuEXmtm86xbnw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/eleventy-plugin-embed-bluesky": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-bluesky/-/eleventy-plugin-embed-bluesky-1.0.1.tgz",
+      "integrity": "sha512-6+0A92TIiJ5MJaJhcMshX5a2R4pdAJjAYz7EvDOk7T2zyr59Tyq9bRm9lEx2IRdZ5fx6CiRNMgLb+KXkzlLd2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-fetch": "^5.1.0",
+        "string-replace-async": "^3.0.2"
+      }
+    },
+    "node_modules/eleventy-plugin-embed-bluesky/node_modules/@11ty/eleventy-fetch": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-fetch/-/eleventy-fetch-5.1.1.tgz",
+      "integrity": "sha512-/xFJLCrqKlcnRKIfO9Qjd1QOs4IpvypljXET955+EgdRPFA+h8Or6bDnZBbcwr6KS7yeUuzp5k1DhXgbentSTA==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^2.0.7",
+        "@rgrove/parse-xml": "^4.2.0",
+        "debug": "^4.4.3",
+        "flatted": "^3.3.3",
+        "p-queue": "6.6.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/eleventy-plugin-embed-everything": {
+      "version": "1.21.1",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-everything/-/eleventy-plugin-embed-everything-1.21.1.tgz",
+      "integrity": "sha512-Ucr27//kAkmpAKGvzSYbtlSCTVu+F7iJF5Smw+81PxAaofouiHhusJUQA6GJkJ1A7WgTDuwHWJjZ5mAXJWNtuA==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^4.3.1",
+        "eleventy-plugin-embed-bluesky": "^1.0.1",
+        "eleventy-plugin-embed-instagram": "^1.3.0",
+        "eleventy-plugin-embed-mastodon": "^1.0.2",
+        "eleventy-plugin-embed-openstreetmap": "^1.1.0",
+        "eleventy-plugin-embed-soundcloud": "^1.2.10",
+        "eleventy-plugin-embed-spotify": "^1.3.0",
+        "eleventy-plugin-embed-ted": "^1.0.1",
+        "eleventy-plugin-embed-tiktok": "^1.1.8",
+        "eleventy-plugin-embed-twitch": "^1.2.8",
+        "eleventy-plugin-embed-twitter": "^1.4.3",
+        "eleventy-plugin-vimeo-embed": "^1.4.0",
+        "eleventy-plugin-youtube-embed": "^1.13.1"
+      }
+    },
+    "node_modules/eleventy-plugin-embed-instagram": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-instagram/-/eleventy-plugin-embed-instagram-1.3.0.tgz",
+      "integrity": "sha512-uF63snWEViwLQzr85ZAbKRXlWcLdPwepxuy7gERQVPzTNYWiPU1ruyf8H40qmznWPo7kWHa9Nnb5p4tM2Ilcjg==",
+      "license": "MIT"
+    },
+    "node_modules/eleventy-plugin-embed-mastodon": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-mastodon/-/eleventy-plugin-embed-mastodon-1.0.2.tgz",
+      "integrity": "sha512-JPDUcec2UouQ+tP1087ENMzfo0j8t0JXIYGfTjt+7HxF3cVUmPk+ZZhqX367OJmK2XSbeM5ZfPDORJ4Lhep8uQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-fetch": "^5.1.0",
+        "deepmerge": "^4.3.1",
+        "regex": "^6.0.1",
+        "string-replace-async": "^3.0.2"
+      }
+    },
+    "node_modules/eleventy-plugin-embed-mastodon/node_modules/@11ty/eleventy-fetch": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-fetch/-/eleventy-fetch-5.1.1.tgz",
+      "integrity": "sha512-/xFJLCrqKlcnRKIfO9Qjd1QOs4IpvypljXET955+EgdRPFA+h8Or6bDnZBbcwr6KS7yeUuzp5k1DhXgbentSTA==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^2.0.7",
+        "@rgrove/parse-xml": "^4.2.0",
+        "debug": "^4.4.3",
+        "flatted": "^3.3.3",
+        "p-queue": "6.6.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/eleventy-plugin-embed-openstreetmap": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-openstreetmap/-/eleventy-plugin-embed-openstreetmap-1.1.0.tgz",
+      "integrity": "sha512-XKwEziI7feVZCkJXGSzgAlXR3ee9HeQ/WuTLS6KJKBQ+qGjOQHoi1seoTzsxeC/qt5V0pzgSD1xCgypQUlJ6Bw==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^4.3.1"
+      }
+    },
+    "node_modules/eleventy-plugin-embed-soundcloud": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-soundcloud/-/eleventy-plugin-embed-soundcloud-1.2.10.tgz",
+      "integrity": "sha512-4G8z4rmbPJDGi43kJG6K9pRWyVxWCo+CdFpWDUlkvUX5XyKfEzVNbO/8ML0ci4WU79U9FyjLtF1yKlGPEAO2lg==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-fetch": "^5.1.0"
+      }
+    },
+    "node_modules/eleventy-plugin-embed-soundcloud/node_modules/@11ty/eleventy-fetch": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-fetch/-/eleventy-fetch-5.1.1.tgz",
+      "integrity": "sha512-/xFJLCrqKlcnRKIfO9Qjd1QOs4IpvypljXET955+EgdRPFA+h8Or6bDnZBbcwr6KS7yeUuzp5k1DhXgbentSTA==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^2.0.7",
+        "@rgrove/parse-xml": "^4.2.0",
+        "debug": "^4.4.3",
+        "flatted": "^3.3.3",
+        "p-queue": "6.6.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/eleventy-plugin-embed-spotify": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-spotify/-/eleventy-plugin-embed-spotify-1.3.0.tgz",
+      "integrity": "sha512-waVUtW5PO9aKYQEjnvHG4P5bPyKj+SSUBuDtqfF2K+j7dGItmEDD4DP7CmBz6lkn/LlJGmJ7uT4Mr6L4jAP4bg==",
+      "license": "MIT"
+    },
+    "node_modules/eleventy-plugin-embed-ted": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-ted/-/eleventy-plugin-embed-ted-1.0.1.tgz",
+      "integrity": "sha512-F1CayKC05sGDAcdEgaZUP3Cs/71mwLT717sIUUiZWu+Gjd1Lp7m2gqL1R/uKnHN/CFxKYTpAA6ZNN/LCjg0ufw==",
+      "license": "MIT"
+    },
+    "node_modules/eleventy-plugin-embed-tiktok": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-tiktok/-/eleventy-plugin-embed-tiktok-1.1.8.tgz",
+      "integrity": "sha512-U0J7LV0lXmRbEt05E0NzbXiPw8V0Rr5eEQSyFwzAMrdrsxhoCSYFuE2L6+b7SXbV8ZzFjbPX07n1c4hgLfvfrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^4.3.1",
+        "regex": "^6.0.1"
+      }
+    },
+    "node_modules/eleventy-plugin-embed-twitch": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-twitch/-/eleventy-plugin-embed-twitch-1.2.8.tgz",
+      "integrity": "sha512-ScjROm5sOwcClyE0DvZQ+6qF67lV4Yycsvb8p189QyJz3/wFw+9SQhyToY1FINRmUURIFRfLgp7AUXb3xAHmfg==",
+      "license": "MIT"
+    },
+    "node_modules/eleventy-plugin-embed-twitter": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-embed-twitter/-/eleventy-plugin-embed-twitter-1.4.3.tgz",
+      "integrity": "sha512-gHpoz7OFfpw/8QuK+m1ENQuzOdLAdGiP4R0cfAdMBAJMjMpB0moW6L3CDfG6Ai7R/Y8KwnTwnmLEznLv5v68BA==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-fetch": "^5.1.0",
+        "deepmerge": "^4.3.1"
+      }
+    },
+    "node_modules/eleventy-plugin-embed-twitter/node_modules/@11ty/eleventy-fetch": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-fetch/-/eleventy-fetch-5.1.1.tgz",
+      "integrity": "sha512-/xFJLCrqKlcnRKIfO9Qjd1QOs4IpvypljXET955+EgdRPFA+h8Or6bDnZBbcwr6KS7yeUuzp5k1DhXgbentSTA==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^2.0.7",
+        "@rgrove/parse-xml": "^4.2.0",
+        "debug": "^4.4.3",
+        "flatted": "^3.3.3",
+        "p-queue": "6.6.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/eleventy-plugin-vimeo-embed": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-vimeo-embed/-/eleventy-plugin-vimeo-embed-1.4.0.tgz",
+      "integrity": "sha512-GaDCi3b4gFx+TSzTEPjHlcGPqDBc8tQwJIQqkFMfkFBEnwMpC8fYLh8x31DLJ9C7R7Qh1FGVrb+A6qgKt//IqA==",
+      "license": "MIT"
+    },
+    "node_modules/eleventy-plugin-youtube-embed": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/eleventy-plugin-youtube-embed/-/eleventy-plugin-youtube-embed-1.13.1.tgz",
+      "integrity": "sha512-JfmPyNan5x9FC08RjLQIeBexpo1u+g06FCnEuQMkRbORh4dy/6LILJGcsPkrAHP6fw7ZnD/bogfTTuW5lCyukA==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-fetch": "^5.1.0",
+        "deepmerge": "^4.3.1",
+        "lite-youtube-embed": "^0.3.4",
+        "string-replace-async": "^3.0.2"
+      }
+    },
+    "node_modules/eleventy-plugin-youtube-embed/node_modules/@11ty/eleventy-fetch": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-fetch/-/eleventy-fetch-5.1.1.tgz",
+      "integrity": "sha512-/xFJLCrqKlcnRKIfO9Qjd1QOs4IpvypljXET955+EgdRPFA+h8Or6bDnZBbcwr6KS7yeUuzp5k1DhXgbentSTA==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^2.0.7",
+        "@rgrove/parse-xml": "^4.2.0",
+        "debug": "^4.4.3",
+        "flatted": "^3.3.3",
+        "p-queue": "6.6.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/eleventy-plugin-youtube-embed/node_modules/lite-youtube-embed": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/lite-youtube-embed/-/lite-youtube-embed-0.3.4.tgz",
+      "integrity": "sha512-aXgxpwK7AIW58GEbRzA8EYaY4LWvF3FKak6B9OtSJmuNyLhX2ouD4cMTxz/yR5HFInhknaYd2jLWOTRTvT8oAw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/emoji-regex-xs": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/emoji-regex-xs/-/emoji-regex-xs-2.0.1.tgz",
+      "integrity": "sha512-1QFuh8l7LqUcKe24LsPUNzjrzJQ7pgRwp1QMcZ5MX6mFplk2zQ08NVCM84++1cveaUUYtcCYHmeFEuNg16sU4g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/encodeurl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
       "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -602,7 +2894,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
       "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -615,7 +2906,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/errno/-/errno-1.0.0.tgz",
       "integrity": "sha512-3zV5mFS1E8/1bPxt/B0xxzI1snsg3uSCIh6Zo1qKg6iMw93hzPANk9oBFzSFBFrwuVoQuE3rLoouAUfwOAj1wQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "prr": "~1.0.1"
@@ -624,18 +2914,56 @@
         "errno": "cli.js"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
       "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/escape-string-regexp": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
       "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -648,7 +2976,6 @@
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/esm-import-transformer/-/esm-import-transformer-3.0.5.tgz",
       "integrity": "sha512-1GKLvfuMnnpI75l8c6sHoz0L3Z872xL5akGuBudgqTDPv4Vy6f2Ec7jEMKTxlqWl/3kSvNbHELeimJtnqgYniw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "acorn": "^8.15.0"
@@ -658,7 +2985,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "bin": {
         "esparse": "bin/esparse.js",
@@ -672,7 +2998,6 @@
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
       "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -682,17 +3007,21 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/evaluate-value/-/evaluate-value-2.0.0.tgz",
       "integrity": "sha512-VonfiuDJc0z4sOO7W0Pd130VLsXN6vmBWZlrog1mCb/o7o/Nl5Lr25+Kj/nkCCAhG+zqeeGjxhkK9oHpkgTHhQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
     "node_modules/extend-shallow": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
       "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extendable": "^0.1.0"
@@ -701,11 +3030,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -719,11 +3072,46 @@
         }
       }
     },
+    "node_modules/fflate": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.7.4.tgz",
+      "integrity": "sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==",
+      "license": "MIT"
+    },
+    "node_modules/filelist": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.6.tgz",
+      "integrity": "sha512-5giy2PkLYY1cP39p17Ech+2xlpTRL9HLspOfEgm0L6CwBXBTgsK5ou0JtzYuepxkaQ/tvhCFIJ5uXo0OrM2DxA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.9.tgz",
+      "integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/filesize": {
       "version": "10.1.6",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.6.tgz",
       "integrity": "sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">= 10.4.0"
@@ -733,7 +3121,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -746,7 +3133,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz",
       "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "debug": "2.6.9",
@@ -765,7 +3151,6 @@
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "2.0.0"
@@ -775,24 +3160,76 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/flat-cache": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "license": "ISC"
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fresh": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
       "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "11.3.3",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.3.tgz",
+      "integrity": "sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "license": "ISC"
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -803,11 +3240,87 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -816,11 +3329,34 @@
         "node": ">= 6"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "license": "MIT"
+    },
     "node_modules/gray-matter": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
       "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "js-yaml": "^3.13.1",
@@ -836,7 +3372,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "sprintf-js": "~1.0.2"
@@ -846,7 +3381,6 @@
       "version": "3.14.2",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
       "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "argparse": "^1.0.7",
@@ -856,11 +3390,129 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/hamljs": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/hamljs/-/hamljs-0.6.2.tgz",
+      "integrity": "sha512-/chXRp4WpL47I+HX1vCCdSbEXAljEG2FBMmgO7Am0bYsqgnEjreeWzUdX1onXqwZtcfgxbCg5WtEYYvuZ5muBg=="
+    },
+    "node_modules/handlebars": {
+      "version": "4.7.8",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
+      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.2",
+        "source-map": "^0.6.1",
+        "wordwrap": "^1.0.0"
+      },
+      "bin": {
+        "handlebars": "bin/handlebars"
+      },
+      "engines": {
+        "node": ">=0.4.7"
+      },
+      "optionalDependencies": {
+        "uglify-js": "^3.1.4"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "license": "MIT",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/hex-rgb": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.3.0.tgz",
+      "integrity": "sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/html-minifier-terser": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-7.2.0.tgz",
+      "integrity": "sha512-tXgn3QfqPIpGl9o+K5tpcj3/MN4SfLtsx2GWwBC3SSd0tXQGyF3gsSqad8loJgKZGM3ZxbYDd5yhiBIdWpmvLA==",
+      "license": "MIT",
+      "dependencies": {
+        "camel-case": "^4.1.2",
+        "clean-css": "~5.3.2",
+        "commander": "^10.0.0",
+        "entities": "^4.4.0",
+        "param-case": "^3.0.4",
+        "relateurl": "^0.2.7",
+        "terser": "^5.15.1"
+      },
+      "bin": {
+        "html-minifier-terser": "cli.js"
+      },
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      }
+    },
+    "node_modules/html-minifier-terser/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
       "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
-      "dev": true,
       "funding": [
         "https://github.com/fb55/htmlparser2?sponsor=1",
         {
@@ -880,7 +3532,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
       "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -893,7 +3544,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/http-equiv-refresh/-/http-equiv-refresh-2.0.1.tgz",
       "integrity": "sha512-XJpDL/MLkV3dKwLzHwr2dY05dYNfBNlyPu4STQ8WvKCFdc6vC5tPXuq28of663+gHVg03C+16pHHs/+FmmDjcw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -903,7 +3553,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
       "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "depd": "~2.0.0",
@@ -920,18 +3569,54 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/image-size": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.2.1.tgz",
+      "integrity": "sha512-rH+46sQJ2dlwfjfhCyNx5thzrv+dtmBIhPHk0zgRUukHzZ/kRueTJXoYYsclBaKcSMBWuGbOFXtioLpzTb5euw==",
+      "license": "MIT",
+      "dependencies": {
+        "queue": "6.0.2"
+      },
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/is-alphabetical": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
       "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -942,7 +3627,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
       "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-alphabetical": "^2.0.0",
@@ -953,11 +3637,16 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
+      "integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==",
+      "license": "MIT"
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
@@ -966,22 +3655,57 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-decimal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
       "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-expression": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-4.0.0.tgz",
+      "integrity": "sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^7.1.1",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "node_modules/is-expression/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
       "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -991,17 +3715,25 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -1014,34 +3746,108 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-json/-/is-json-2.0.1.tgz",
       "integrity": "sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+      "license": "MIT"
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "license": "ISC"
+    },
     "node_modules/iso-639-1": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-3.1.5.tgz",
       "integrity": "sha512-gXkz5+KN7HrG0Q5UGqSMO2qB9AsbEeyLP54kF1YrMsIxmu+g4BdB7rflReZTSTZGpfj8wywu6pfPBCylPIzGQA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0"
       }
     },
+    "node_modules/iso-datestring-validator": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/iso-datestring-validator/-/iso-datestring-validator-2.2.2.tgz",
+      "integrity": "sha512-yLEMkBbLZTlVQqOnQ4FiMujR6T4DEcCb1xizmvXS+OxuhwcbtynoosRzdMA69zZCShCNAbi+gJ71FxZBBXx1SA==",
+      "license": "MIT"
+    },
+    "node_modules/jake": {
+      "version": "10.9.4",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz",
+      "integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "async": "^3.2.6",
+        "filelist": "^1.0.4",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-stringify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
+      "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==",
+      "license": "MIT"
+    },
     "node_modules/js-yaml": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
       "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
@@ -1050,21 +3856,57 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jstransformer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
+      "integrity": "sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==",
+      "license": "MIT",
+      "dependencies": {
+        "is-promise": "^2.0.0",
+        "promise": "^7.0.1"
+      }
+    },
     "node_modules/junk": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/junk/-/junk-3.1.0.tgz",
       "integrity": "sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
       "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -1074,17 +3916,45 @@
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
       "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/linebreak": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/linebreak/-/linebreak-1.1.0.tgz",
+      "integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "0.0.8",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/linkify-it": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
       "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "uc.micro": "^2.0.0"
@@ -1094,7 +3964,6 @@
       "version": "10.24.0",
       "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.24.0.tgz",
       "integrity": "sha512-TAUNAdgwaAXjjcUFuYVJm9kOVH7zc0mTKxsG9t9Lu4qdWjB2BEblyVIYpjWcmJLMGgiYqnGNJjpNMHx0gp/46A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "commander": "^10.0.0"
@@ -1115,24 +3984,42 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/list-to-array/-/list-to-array-1.1.0.tgz",
       "integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/lite-youtube-embed": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/lite-youtube-embed/-/lite-youtube-embed-0.3.2.tgz",
+      "integrity": "sha512-b1dgKyF4PHhinonmr3PB172Nj0qQgA/7DE9EmeIXHR1ksnFEC2olWjNJyJGdsN2cleKHRjjsmrziKlwXtPlmLQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/lodash.deburr": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz",
+      "integrity": "sha512-m/M1U1f3ddMCs6Hq2tAsYThTBDaAKFDX3dwDo97GEYzamXi9SqUpjWi/Rrj/gf3X2n8ktwgZrlP1z6E3v/IExQ==",
+      "license": "MIT"
+    },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/luxon": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.2.tgz",
       "integrity": "sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
       }
     },
     "node_modules/markdown-it": {
-      "version": "14.1.1",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
-      "integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
-      "dev": true,
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1",
@@ -1146,11 +4033,20 @@
         "markdown-it": "bin/markdown-it.mjs"
       }
     },
+    "node_modules/markdown-it-anchor": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-9.2.0.tgz",
+      "integrity": "sha512-sa2ErMQ6kKOA4l31gLGYliFQrMKkqSO0ZJgGhDHKijPf0pNFM9vghjAh3gn26pS4JDRs7Iwa9S36gxm3vgZTzg==",
+      "license": "Unlicense",
+      "peerDependencies": {
+        "@types/markdown-it": "*",
+        "markdown-it": "*"
+      }
+    },
     "node_modules/markdown-it/node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -1159,11 +4055,19 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/maximatch": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
       "integrity": "sha512-9ORVtDUFk4u/NFfo0vG/ND/z7UQCVZBL539YW0+U1I7H1BkZwizcPx5foFv7LCPcBnm2U6RjFnQOsIvN4/Vm2A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "array-differ": "^1.0.0",
@@ -1179,14 +4083,46 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
       "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/mime": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
       "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "mime": "cli.js"
@@ -1199,7 +4135,6 @@
       "version": "1.54.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
       "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -1209,7 +4144,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
       "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mime-db": "^1.54.0"
@@ -1223,10 +4157,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
-      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
-      "dev": true,
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -1239,40 +4172,190 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/minipass": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
-      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/moo": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.3.tgz",
-      "integrity": "sha512-m2fmM2dDm7GZQsY7KK2cme8agi+AAljILjQnof7p1ZMDe6dQ4bdnSMx0cPppudoeNv5hEFQirN6u+O4fDE0IWA==",
-      "dev": true,
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
+      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==",
       "license": "BSD-3-Clause"
     },
     "node_modules/morphdom": {
       "version": "2.7.8",
       "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.8.tgz",
       "integrity": "sha512-D/fR4xgGUyVRbdMGU6Nejea1RFzYxYtyurG4Fbv2Fi/daKlWKuXGLOdXtl+3eIwL110cI2hz1ZojGICjjFLgTg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/multiformats": {
+      "version": "9.9.0",
+      "resolved": "https://registry.npmjs.org/multiformats/-/multiformats-9.9.0.tgz",
+      "integrity": "sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg==",
+      "license": "(Apache-2.0 AND MIT)"
+    },
+    "node_modules/multimatch": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-5.0.0.tgz",
+      "integrity": "sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/minimatch": "^3.0.3",
+        "array-differ": "^3.0.0",
+        "array-union": "^2.1.0",
+        "arrify": "^2.0.1",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/multimatch/node_modules/array-differ": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
+      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/multimatch/node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/multimatch/node_modules/arrify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/mustache": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
+      "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
+      "license": "MIT",
+      "bin": {
+        "mustache": "bin/mustache"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "license": "MIT"
+    },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "license": "MIT",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
       "dev": true,
       "license": "MIT"
     },
@@ -1280,7 +4363,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/node-retrieve-globals/-/node-retrieve-globals-6.0.1.tgz",
       "integrity": "sha512-j0DeFuZ/Wg3VlklfbxUgZF/mdHMTEiEipBb3q0SpMMbHaV3AVfoUQF8UGxh1s/yjqO0TgRZd4Pi/x2yRqoQ4Eg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "acorn": "^8.14.1",
@@ -1292,7 +4374,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -1302,7 +4383,6 @@
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz",
       "integrity": "sha512-26XRV6BhkgK0VOxfbU5cQI+ICFUtMLixv1noZn1tGU38kQH5A5nmmbk/O45xdyBhD1esk47nKrY0mvQpZIhRjQ==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "a-sync-waterfall": "^1.0.0",
@@ -1328,6 +4408,24 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
       "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1338,7 +4436,6 @@
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
       "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ee-first": "1.1.1"
@@ -1347,30 +4444,161 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/p-queue": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-6.6.2.tgz",
+      "integrity": "sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^4.0.4",
+        "p-timeout": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-timeout": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
+      "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
+      "license": "MIT",
+      "dependencies": {
+        "p-finally": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pagefind": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/pagefind/-/pagefind-1.4.0.tgz",
+      "integrity": "sha512-z2kY1mQlL4J8q5EIsQkLzQjilovKzfNVhX8De6oyE6uHpfFtyBaqUpcl/XzJC/4fjD8vBDyh1zolimIcVrCn9g==",
+      "license": "MIT",
+      "bin": {
+        "pagefind": "lib/runner/bin.cjs"
+      },
+      "optionalDependencies": {
+        "@pagefind/darwin-arm64": "1.4.0",
+        "@pagefind/darwin-x64": "1.4.0",
+        "@pagefind/freebsd-x64": "1.4.0",
+        "@pagefind/linux-arm64": "1.4.0",
+        "@pagefind/linux-x64": "1.4.0",
+        "@pagefind/windows-x64": "1.4.0"
+      }
+    },
+    "node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
+    "node_modules/param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "license": "MIT",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/parse-css-color": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/parse-css-color/-/parse-css-color-0.2.1.tgz",
+      "integrity": "sha512-bwS/GGIFV3b6KS4uwpzCFj4w297Yl3uqnSgIPsoQkx7GMLROXfMnWvxfNkL0oh8HVhZA4hvJoEoEIqonfJ3BWg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.1.4",
+        "hex-rgb": "^4.1.0"
+      }
+    },
     "node_modules/parse-srcset": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
       "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
+    "node_modules/pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "license": "MIT",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
+    },
+    "node_modules/path-to-regexp": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
+      "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
     "node_modules/picomatch": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -1378,23 +4606,280 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/please-upgrade-node": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
       "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "semver-compare": "^1.0.0"
       }
     },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-cli": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-11.0.1.tgz",
+      "integrity": "sha512-0UnkNPSayHKRe/tc2YGW6XnSqqOA9eqpiRMgRlV1S6HdGi16vwJBx7lviARzbV1HpQHqLLRH3o8vTcB0cLc+5g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.3.0",
+        "dependency-graph": "^1.0.0",
+        "fs-extra": "^11.0.0",
+        "picocolors": "^1.0.0",
+        "postcss-load-config": "^5.0.0",
+        "postcss-reporter": "^7.0.0",
+        "pretty-hrtime": "^1.0.3",
+        "read-cache": "^1.0.0",
+        "slash": "^5.0.0",
+        "tinyglobby": "^0.2.12",
+        "yargs": "^17.0.0"
+      },
+      "bin": {
+        "postcss": "index.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-cli/node_modules/slash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-5.1.0.tgz",
+      "integrity": "sha512-G5AJ+IX0aD0dygOE0yFZQ/huFFMSNneyfp0e3/bT05a8OfPC5FUoZRPfGijUdGOJNMewJiwzcHJXFafFzeKFVA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1",
+        "yaml": "^2.4.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-reporter": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.1.0.tgz",
+      "integrity": "sha512-/eoEylGWyy6/DOiMP5lmFRdmDKThqgn7D6hP2dXKJI/0rJSO1ADFNngZfDzxL0YAxFvws+Rtpuji1YIHj4mySA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "picocolors": "^1.0.0",
+        "thenby": "^1.3.4"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT"
+    },
     "node_modules/posthtml": {
       "version": "0.16.7",
       "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.7.tgz",
       "integrity": "sha512-7Hc+IvlQ7hlaIfQFZnxlRl0jnpWq2qwibORBhQYIb0QbNtuicc5ZxvKkVT71HJ4Py1wSZ/3VR1r8LfkCtoCzhw==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "posthtml-parser": "^0.11.0",
         "posthtml-render": "^3.0.0"
@@ -1407,7 +4892,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/posthtml-match-helper/-/posthtml-match-helper-2.0.3.tgz",
       "integrity": "sha512-p9oJgTdMF2dyd7WE54QI1LvpBIkNkbSiiECKezNnDVYhGhD1AaOnAkw0Uh0y5TW+OHO8iBdSqnd8Wkpb6iUqmw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -1420,7 +4904,6 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.11.0.tgz",
       "integrity": "sha512-QecJtfLekJbWVo/dMAA+OSwY79wpRmbqS5TeXvXSX+f0c6pW4/SE6inzZ2qkU7oAMCPqIDkZDvd/bQsSFUnKyw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "htmlparser2": "^7.1.1"
@@ -1433,7 +4916,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/posthtml-render/-/posthtml-render-3.0.0.tgz",
       "integrity": "sha512-z+16RoxK3fUPgwaIgH9NGnK1HKY9XIDpydky5eQGgAFVXTCSezalv9U2jQuNV+Z9qV1fDWNzldcw4eK0SSbqKA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-json": "^2.0.1"
@@ -1442,38 +4924,264 @@
         "node": ">=12"
       }
     },
+    "node_modules/posthtml-urls": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/posthtml-urls/-/posthtml-urls-1.0.0.tgz",
+      "integrity": "sha512-CMJ0L009sGQVUuYM/g6WJdscsq6ooAwhUuF6CDlYPMLxKp2rmCYVebEU+wZGxnQstGJhZPMvXsRhtqekILd5/w==",
+      "license": "MIT",
+      "dependencies": {
+        "http-equiv-refresh": "^1.0.0",
+        "list-to-array": "^1.1.0",
+        "parse-srcset": "^1.0.2",
+        "promise-each": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/posthtml-urls/node_modules/http-equiv-refresh": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/http-equiv-refresh/-/http-equiv-refresh-1.0.0.tgz",
+      "integrity": "sha512-TScO04soylRN9i/QdOdgZyhydXg9z6XdaGzEyOgDKycePeDeTT4KvigjBcI+tgfTlieLWauGORMq5F1eIDa+1w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "license": "MIT",
+      "dependencies": {
+        "asap": "~2.0.3"
+      }
+    },
+    "node_modules/promise-each": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/promise-each/-/promise-each-2.2.0.tgz",
+      "integrity": "sha512-67roqt1k3QDA41DZ8xi0V+rF3GoaMiX7QilbXu0vXimut+9RcKBNZ/t60xCRgcsihmNUsEjh48xLfNqOrKblUg==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^0.1.0"
+      }
+    },
+    "node_modules/promise-each/node_modules/any-promise": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-0.1.0.tgz",
+      "integrity": "sha512-lqzY9o+BbeGHRCOyxQkt/Tgvz0IZhTmQiA+LxQW8wSNpcTbj8K+0cZiSEvbpNZZP9/11Gy7dnLO3GNWUXO4d1g==",
+      "license": "MIT"
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
       "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pug": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.3.tgz",
+      "integrity": "sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==",
+      "license": "MIT",
+      "dependencies": {
+        "pug-code-gen": "^3.0.3",
+        "pug-filters": "^4.0.0",
+        "pug-lexer": "^5.0.1",
+        "pug-linker": "^4.0.0",
+        "pug-load": "^3.0.0",
+        "pug-parser": "^6.0.0",
+        "pug-runtime": "^3.0.1",
+        "pug-strip-comments": "^2.0.0"
+      }
+    },
+    "node_modules/pug-attrs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-3.0.0.tgz",
+      "integrity": "sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==",
+      "license": "MIT",
+      "dependencies": {
+        "constantinople": "^4.0.1",
+        "js-stringify": "^1.0.2",
+        "pug-runtime": "^3.0.0"
+      }
+    },
+    "node_modules/pug-code-gen": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.3.tgz",
+      "integrity": "sha512-cYQg0JW0w32Ux+XTeZnBEeuWrAY7/HNE6TWnhiHGnnRYlCgyAUPoyh9KzCMa9WhcJlJ1AtQqpEYHc+vbCzA+Aw==",
+      "license": "MIT",
+      "dependencies": {
+        "constantinople": "^4.0.1",
+        "doctypes": "^1.1.0",
+        "js-stringify": "^1.0.2",
+        "pug-attrs": "^3.0.0",
+        "pug-error": "^2.1.0",
+        "pug-runtime": "^3.0.1",
+        "void-elements": "^3.1.0",
+        "with": "^7.0.0"
+      }
+    },
+    "node_modules/pug-error": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.1.0.tgz",
+      "integrity": "sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==",
+      "license": "MIT"
+    },
+    "node_modules/pug-filters": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-4.0.0.tgz",
+      "integrity": "sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==",
+      "license": "MIT",
+      "dependencies": {
+        "constantinople": "^4.0.1",
+        "jstransformer": "1.0.0",
+        "pug-error": "^2.0.0",
+        "pug-walk": "^2.0.0",
+        "resolve": "^1.15.1"
+      }
+    },
+    "node_modules/pug-lexer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-5.0.1.tgz",
+      "integrity": "sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==",
+      "license": "MIT",
+      "dependencies": {
+        "character-parser": "^2.2.0",
+        "is-expression": "^4.0.0",
+        "pug-error": "^2.0.0"
+      }
+    },
+    "node_modules/pug-linker": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-4.0.0.tgz",
+      "integrity": "sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==",
+      "license": "MIT",
+      "dependencies": {
+        "pug-error": "^2.0.0",
+        "pug-walk": "^2.0.0"
+      }
+    },
+    "node_modules/pug-load": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-3.0.0.tgz",
+      "integrity": "sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "pug-walk": "^2.0.0"
+      }
+    },
+    "node_modules/pug-parser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-6.0.0.tgz",
+      "integrity": "sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==",
+      "license": "MIT",
+      "dependencies": {
+        "pug-error": "^2.0.0",
+        "token-stream": "1.0.0"
+      }
+    },
+    "node_modules/pug-runtime": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-3.0.1.tgz",
+      "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==",
+      "license": "MIT"
+    },
+    "node_modules/pug-strip-comments": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz",
+      "integrity": "sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pug-error": "^2.0.0"
+      }
+    },
+    "node_modules/pug-walk": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-2.0.0.tgz",
+      "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==",
       "license": "MIT"
     },
     "node_modules/punycode.js": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
       "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "picomatch": "^2.2.1"
@@ -1486,7 +5194,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -1495,11 +5202,329 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/recursive-copy": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/recursive-copy/-/recursive-copy-2.0.14.tgz",
+      "integrity": "sha512-K8WNY8f8naTpfbA+RaXmkaQuD1IeW9EgNEfyGxSqqTQukpVtoOKros9jUqbpEsSw59YOmpd8nCBgtqJZy5nvog==",
+      "license": "ISC",
+      "dependencies": {
+        "errno": "^0.1.2",
+        "graceful-fs": "^4.1.4",
+        "junk": "^1.0.1",
+        "maximatch": "^0.1.0",
+        "mkdirp": "^0.5.1",
+        "pify": "^2.3.0",
+        "promise": "^7.0.1",
+        "rimraf": "^2.7.1",
+        "slash": "^1.0.0"
+      }
+    },
+    "node_modules/recursive-copy/node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "license": "MIT",
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
+    "node_modules/recursive-copy/node_modules/junk": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/junk/-/junk-1.0.3.tgz",
+      "integrity": "sha512-3KF80UaaSSxo8jVnRYtMKNGFOoVPBdkkVPsw+Ad0y4oxKXPduS6G6iHkrf69yJVff/VAaYXkV42rtZ7daJxU3w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/recursive-copy/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/recursive-copy/node_modules/slash": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
+      "integrity": "sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-6.1.0.tgz",
+      "integrity": "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==",
+      "license": "MIT",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-utilities": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz",
+      "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==",
+      "license": "MIT"
+    },
+    "node_modules/relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rss-parser": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/rss-parser/-/rss-parser-3.13.0.tgz",
+      "integrity": "sha512-7jWUBV5yGN3rqMMj7CZufl/291QAhvrrGpDNE4k/02ZchL0npisiYYqULF71jCEKoIiHvK/Q2e6IkDwPziT7+w==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^2.0.3",
+        "xml2js": "^0.5.0"
+      }
+    },
+    "node_modules/rss-parser/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "license": "BSD-2-Clause",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/sanitize-html": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.17.0.tgz",
+      "integrity": "sha512-dLAADUSS8rBwhaevT12yCezvioCA+bmUTPH/u57xKPT8d++voeYE6HeluA/bPbQ15TwDBG2ii+QZIEmYx8VdxA==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "htmlparser2": "^8.0.0",
+        "is-plain-object": "^5.0.0",
+        "parse-srcset": "^1.0.2",
+        "postcss": "^8.3.11"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
+    "node_modules/satori": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/satori/-/satori-0.19.2.tgz",
+      "integrity": "sha512-71plFHWcq6WJBM5sf/n0eHOmTBiKLUB/G8du7SmLTTLHKEKrV3TPHGKcEVIoyjnbhnjvu9HhLyF9MATB/zzL7g==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "@shuding/opentype.js": "1.4.0-beta.0",
+        "css-background-parser": "^0.1.0",
+        "css-box-shadow": "1.0.0-3",
+        "css-gradient-parser": "^0.0.17",
+        "css-to-react-native": "^3.0.0",
+        "emoji-regex-xs": "^2.0.1",
+        "escape-html": "^1.0.3",
+        "linebreak": "^1.1.0",
+        "parse-css-color": "^0.2.1",
+        "postcss-value-parser": "^4.2.0",
+        "yoga-layout": "^3.2.1"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/sax": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.4.tgz",
+      "integrity": "sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
     "node_modules/section-matter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
       "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "extend-shallow": "^2.0.1",
@@ -1510,10 +5535,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
-      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
-      "dev": true,
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -1526,14 +5550,12 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
       "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/send": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
       "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "debug": "^4.4.3",
@@ -1560,14 +5582,100 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
-      "dev": true,
       "license": "ISC"
     },
+    "node_modules/sharp": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz",
+      "integrity": "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.3",
+        "semver": "^7.6.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.33.5",
+        "@img/sharp-darwin-x64": "0.33.5",
+        "@img/sharp-libvips-darwin-arm64": "1.0.4",
+        "@img/sharp-libvips-darwin-x64": "1.0.4",
+        "@img/sharp-libvips-linux-arm": "1.0.5",
+        "@img/sharp-libvips-linux-arm64": "1.0.4",
+        "@img/sharp-libvips-linux-s390x": "1.0.4",
+        "@img/sharp-libvips-linux-x64": "1.0.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4",
+        "@img/sharp-linux-arm": "0.33.5",
+        "@img/sharp-linux-arm64": "0.33.5",
+        "@img/sharp-linux-s390x": "0.33.5",
+        "@img/sharp-linux-x64": "0.33.5",
+        "@img/sharp-linuxmusl-arm64": "0.33.5",
+        "@img/sharp-linuxmusl-x64": "0.33.5",
+        "@img/sharp-wasm32": "0.33.5",
+        "@img/sharp-win32-ia32": "0.33.5",
+        "@img/sharp-win32-x64": "0.33.5"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
+      "integrity": "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/sitemap": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-6.4.0.tgz",
+      "integrity": "sha512-DoPKNc2/apQZTUnfiOONWctwq7s6dZVspxAZe2VPMNtoqNq7HgXRvlRnbIpKjf+8+piQdWncwcy+YhhTGY5USQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^14.14.28",
+        "@types/sax": "^1.2.1",
+        "arg": "^5.0.0",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "sitemap": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=10.3.0",
+        "npm": ">=5.6.0"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -1577,24 +5685,49 @@
       "version": "1.6.6",
       "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
       "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.0.0"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
-      "dev": true,
       "license": "BSD-3-Clause"
     },
     "node_modules/ssri": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-11.0.0.tgz",
       "integrity": "sha512-aZpUoMN/Jj2MqA4vMCeiKGnc/8SuSyHbGSBdgFbZxP8OJGF/lFkIuElzPxsN0q8TQQ+prw3P4EDfB3TBHHgfXw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "minipass": "^7.0.3"
@@ -1607,27 +5740,237 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
       "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
+    "node_modules/string-replace-async": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/string-replace-async/-/string-replace-async-3.0.2.tgz",
+      "integrity": "sha512-s6hDtXJ7FKyRap/amefqrOMpkEQvxUDueyvJygQeHxCK5Za90dOMgdibCCrPdfdAYAkr8imrZ1PPXW7DOf0RzQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string.prototype.codepointat": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz",
+      "integrity": "sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==",
+      "license": "MIT"
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom-string": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
       "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.46.0.tgz",
+      "integrity": "sha512-jTwoImyr/QbOWFFso3YoU3ik0jBBDJ6JTOQiy/J2YxVJdZCc+5u7skhNwiOR3FQIygFqVUPHl7qbbxtjW2K3Qg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.15.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "license": "MIT"
+    },
+    "node_modules/thenby": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz",
+      "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
       "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -1640,11 +5983,19 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tlds": {
+      "version": "1.261.0",
+      "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.261.0.tgz",
+      "integrity": "sha512-QXqwfEl9ddlGBaRFXIvNKK6OhipSiLXuRuLJX5DErz0o0Q0rYxulWLdFryTkV5PkdZct5iMInwYEGe/eR++1AA==",
+      "license": "MIT",
+      "bin": {
+        "tlds": "bin.js"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -1657,41 +6008,331 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.6"
       }
     },
+    "node_modules/token-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-1.0.0.tgz",
+      "integrity": "sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==",
+      "license": "MIT"
+    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/uc.micro": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
       "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/uglify-js": {
+      "version": "3.19.3",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",
+      "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==",
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/uint8arrays": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/uint8arrays/-/uint8arrays-3.0.0.tgz",
+      "integrity": "sha512-HRCx0q6O9Bfbp+HHSfQQKD7wU70+lydKVt4EghkdOvlK/NlrF90z+eXV34mUd48rNvVJXwkrMSPpCATkct8fJA==",
+      "license": "MIT",
+      "dependencies": {
+        "multiformats": "^9.4.2"
+      }
+    },
+    "node_modules/unfurl.js": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/unfurl.js/-/unfurl.js-6.4.0.tgz",
+      "integrity": "sha512-DogJFWPkOWMcu2xPdpmbcsL+diOOJInD3/jXOv6saX1upnWmMK8ndAtDWUfJkuInqNI9yzADud4ID9T+9UeWCw==",
+      "license": "ISC",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "he": "^1.2.0",
+        "htmlparser2": "^8.0.1",
+        "iconv-lite": "^0.4.24",
+        "node-fetch": "^2.6.7"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/unfurl.js/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/unfurl.js/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/unfurl.js/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/unfurl.js/node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/unfurl.js/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/unfurl.js/node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
+    "node_modules/unicode-segmenter": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/unicode-segmenter/-/unicode-segmenter-0.14.5.tgz",
+      "integrity": "sha512-jHGmj2LUuqDcX3hqY12Ql+uhUTn8huuxNZGq7GvtF6bSybzH3aFgedYu/KTzQStEgt1Ra2F3HxadNXsNjb3m3g==",
+      "license": "MIT"
+    },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
       "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/urlpattern-polyfill": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.1.0.tgz",
       "integrity": "sha512-IGjKp/o0NL3Bso1PymYURCJxMPNAf/ILOpendP9f5B6e1rTJgdgiOvgfoT8VxCAdY+Wisb9uhGaJJf3yZ2V9nw==",
+      "license": "MIT"
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/with": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz",
+      "integrity": "sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.9.6",
+        "@babel/types": "^7.9.6",
+        "assert-never": "^1.2.1",
+        "babel-walk": "3.0.0-canary-5"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
     "node_modules/ws": {
       "version": "8.19.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
       "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
@@ -1708,6 +6349,104 @@
           "optional": true
         }
       }
+    },
+    "node_modules/xml2js": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.5.0.tgz",
+      "integrity": "sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==",
+      "license": "MIT",
+      "dependencies": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~11.0.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/xmlbuilder": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
+      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yoga-layout": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/yoga-layout/-/yoga-layout-3.2.1.tgz",
+      "integrity": "sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==",
+      "license": "MIT"
+    },
+    "node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index c1aeac9..67f95e5 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,46 @@
 {
-  "name": "blog",
+  "name": "indiekit-eleventy-theme",
   "version": "1.0.0",
+  "description": "Eleventy theme for Indiekit — IndieWeb-ready personal website",
+  "type": "module",
   "scripts": {
     "build": "eleventy",
-    "serve": "eleventy --serve"
+    "dev": "eleventy --serve --watch",
+    "build:css": "postcss css/tailwind.css -o css/style.css"
+  },
+  "dependencies": {
+    "@11ty/eleventy": "^3.0.0",
+    "@11ty/eleventy-fetch": "^4.0.1",
+    "@11ty/eleventy-img": "^6.0.0",
+    "@11ty/eleventy-plugin-rss": "^2.0.2",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
+    "@11ty/is-land": "^5.0.1",
+    "@alpinejs/collapse": "^3.15.8",
+    "@atproto/api": "^0.12.0",
+    "@chrisburnell/eleventy-cache-webmentions": "^2.2.7",
+    "@fontsource/inter": "^5.2.8",
+    "@quasibit/eleventy-plugin-sitemap": "^2.2.0",
+    "@resvg/resvg-js": "^2.6.2",
+    "@rknightuk/eleventy-plugin-post-graph": "^1.0.8",
+    "@zachleat/filter-container": "^4.0.0",
+    "@zachleat/table-saw": "^1.0.7",
+    "alpinejs": "^3.15.8",
+    "eleventy-plugin-embed-everything": "^1.21.0",
+    "gray-matter": "^4.0.3",
+    "html-minifier-terser": "^7.0.0",
+    "lite-youtube-embed": "^0.3.2",
+    "markdown-it": "^14.0.0",
+    "markdown-it-anchor": "^9.2.0",
+    "pagefind": "^1.3.0",
+    "rss-parser": "^3.13.0",
+    "satori": "^0.19.2",
+    "unfurl.js": "^6.4.0"
   },
   "devDependencies": {
-    "@11ty/eleventy": "^3.0.0"
+    "@tailwindcss/typography": "^0.5.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "postcss-cli": "^11.0.0",
+    "tailwindcss": "^3.4.0"
   }
-}
\ No newline at end of file
+}
diff --git a/photos.njk b/photos.njk
new file mode 100644
index 0000000..6779ec1
--- /dev/null
+++ b/photos.njk
@@ -0,0 +1,105 @@
+---
+layout: layouts/base.njk
+title: Photos
+withSidebar: true
+pagination:
+  data: collections.photos
+  size: 20
+  alias: paginatedPhotos
+  generatePageOnEmptyData: true
+permalink: "photos/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
+---
+<div class="h-feed">
+  <div class="flex flex-wrap items-center gap-4 mb-2">
+    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Photos</h1>
+    {% set sparklineSvg = collections.photos | postingFrequency %}
+    {% if sparklineSvg %}
+    <span class="text-purple-600 dark:text-purple-400">{{ sparklineSvg | safe }}</span>
+    {% endif %}
+  </div>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
+    Photo posts and images.
+    <span class="text-sm">({{ collections.photos.length }} total)</span>
+  </p>
+
+  {% if paginatedPhotos.length > 0 %}
+  <ul class="post-list photo-list">
+    {% for post in paginatedPhotos %}
+    <li class="h-entry post-card border-l-[3px] border-l-purple-400 dark:border-l-purple-500">
+      <div class="post-meta">
+        <time class="dt-published" datetime="{{ post.date | isoDate }}">
+          {{ post.date | dateDisplay }}
+        </time>
+        {% if post.data.category %}
+        <span class="post-categories">
+          {% if post.data.category is string %}
+          <span class="p-category">{{ post.data.category }}</span>
+          {% else %}
+          {% for cat in post.data.category %}
+          <span class="p-category">{{ cat }}</span>
+          {% endfor %}
+          {% endif %}
+        </span>
+        {% endif %}
+      </div>
+      {# Render photo(s) from frontmatter - use eleventy:ignore to skip image transform #}
+      {% if post.data.photo %}
+        <div class="photo-gallery mt-3">
+          {% for img in post.data.photo %}
+            {% set photoUrl = img.url %}
+            {% if photoUrl and photoUrl[0] != '/' and 'http' not in photoUrl %}
+              {% set photoUrl = '/' + photoUrl %}
+            {% endif %}
+            <a href="{{ post.url }}" class="photo-link">
+              <img src="{{ photoUrl }}" alt="{{ img.alt | default('Photo') }}" class="u-photo" loading="lazy" eleventy:ignore>
+            </a>
+          {% endfor %}
+        </div>
+      {% endif %}
+      {% if post.templateContent %}
+      <div class="e-content photo-caption prose dark:prose-invert prose-sm mt-3 max-w-none">{{ post.templateContent | safe }}</div>
+      {% endif %}
+      <a class="u-url text-sm text-purple-600 dark:text-purple-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
+    </li>
+    {% endfor %}
+  </ul>
+
+  {# Pagination controls #}
+  {% if pagination.pages.length > 1 %}
+  <nav class="pagination" aria-label="Photos pagination">
+    <div class="pagination-info">
+      Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
+    </div>
+    <div class="pagination-links">
+      {% if pagination.href.previous %}
+      <a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </span>
+      {% endif %}
+
+      {% if pagination.href.next %}
+      <a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </span>
+      {% endif %}
+    </div>
+  </nav>
+  {% endif %}
+
+  {% else %}
+  {% set postType = "photo" %}
+  {% include "components/empty-collection.njk" %}
+  {% endif %}
+</div>
diff --git a/podroll.njk b/podroll.njk
new file mode 100644
index 0000000..d1e8f54
--- /dev/null
+++ b/podroll.njk
@@ -0,0 +1,386 @@
+---
+layout: layouts/base.njk
+title: Podroll
+permalink: /podroll/
+---
+<div class="podroll-page" x-data="podrollApp()" x-init="init()">
+  <header class="mb-6 sm:mb-8">
+    <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
+      <svg class="w-8 h-8 inline-block mr-2 text-orange-600" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+        <circle cx="12" cy="12" r="3"/>
+        <path d="M12 6a6 6 0 0 0-6 6h2a4 4 0 0 1 4-4V6z"/>
+        <path d="M12 2v2a8 8 0 0 1 8 8h2c0-5.52-4.48-10-10-10z"/>
+      </svg>
+      Podroll
+    </h1>
+    <p class="text-surface-600 dark:text-surface-400">
+      My podcast subscriptions - recent episodes from <span x-text="sources.length" class="font-medium"></span> podcasts
+    </p>
+    <p class="text-xs text-surface-500 mt-2" x-show="status?.episodes?.lastSync">
+      Last synced: <span x-text="formatDate(status?.episodes?.lastSync, 'full')"></span>
+      <button @click="refresh()" class="ml-2 text-orange-600 hover:text-orange-700 dark:text-orange-400" :disabled="loading">
+        <svg class="w-3 h-3 inline" :class="{ 'animate-spin': loading }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+        </svg>
+      </button>
+    </p>
+  </header>
+
+  <div class="layout-with-sidebar">
+    {# Main Content - Episodes #}
+    <div class="main-content">
+      {# Loading State #}
+      <div x-show="loading && episodes.length === 0" class="text-center py-12">
+        <svg class="w-8 h-8 mx-auto text-orange-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <p class="text-surface-600 dark:text-surface-400">Loading episodes...</p>
+      </div>
+
+      {# Error State #}
+      <div x-show="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
+        <p class="text-red-700 dark:text-red-400" x-text="error"></p>
+        <button @click="refresh()" class="mt-2 text-sm text-red-600 hover:text-red-700 underline">Try again</button>
+      </div>
+
+      {# Filter by Podcast #}
+      <div x-show="episodes.length > 0" class="mb-6">
+        <div class="relative">
+          <select
+            x-model="filterPodcast"
+            class="w-full sm:w-auto appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-10 text-sm text-surface-700 dark:text-surface-300 focus:outline-none focus:ring-2 focus:ring-orange-500"
+          >
+            <option value="all">All Podcasts</option>
+            <template x-for="source in sortedSources" :key="source.title">
+              <option :value="source.title" x-text="source.title"></option>
+            </template>
+          </select>
+          <svg class="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-surface-500 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+      </div>
+
+      {# Episodes List #}
+      <div x-show="episodes.length > 0" class="space-y-4">
+        <template x-for="episode in filteredEpisodes" :key="episode.id">
+          <article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-orange-400 dark:hover:border-orange-600 transition-colors">
+            {# Episode Header #}
+            <div class="flex items-start gap-4 mb-4">
+              <div class="flex-1 min-w-0">
+                <h2 class="font-semibold text-lg text-surface-900 dark:text-surface-100 mb-1">
+                  <a :href="episode.url" class="hover:text-orange-600 dark:hover:text-orange-400" target="_blank" rel="noopener" x-text="episode.title"></a>
+                </h2>
+                <div class="flex flex-wrap items-center gap-2 text-sm text-surface-500">
+                  <a
+                    x-show="episode.podcast"
+                    :href="episode.podcast?.url || '#'"
+                    class="inline-flex items-center gap-1 px-2 py-0.5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 rounded-full hover:bg-orange-200 dark:hover:bg-orange-900/50 transition-colors"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
+                      <circle cx="12" cy="12" r="3"/>
+                      <path d="M12 6a6 6 0 0 0-6 6h2a4 4 0 0 1 4-4V6z"/>
+                    </svg>
+                    <span x-text="episode.podcast?.title || 'Unknown'"></span>
+                  </a>
+                  <time :datetime="episode.published" x-text="formatDate(episode.published)"></time>
+                  <span x-show="episode.enclosure" class="text-surface-400">
+                    <svg class="w-3 h-3 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15.536a5 5 0 001.414 1.414m2.828-9.9a9 9 0 012.828-2.828"/>
+                    </svg>
+                    <span x-text="formatDuration(episode.enclosure?.length)"></span>
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {# Audio Player #}
+            <div x-show="episode.enclosure?.url" class="mb-4">
+              <audio
+                controls
+                preload="none"
+                class="w-full h-10 rounded-lg"
+                :src="episode.enclosure?.url"
+              >
+                Your browser does not support the audio element.
+              </audio>
+            </div>
+
+            {# Episode Description (text only for safety) #}
+            <p
+              x-show="episode.content"
+              class="text-sm text-surface-600 dark:text-surface-400 line-clamp-3"
+              x-text="stripHtml(episode.content)"
+            ></p>
+
+            {# Actions #}
+            <div class="flex flex-wrap items-center gap-3 mt-4 pt-4 border-t border-surface-200 dark:border-surface-700">
+              <a
+                :href="episode.url"
+                class="inline-flex items-center gap-2 text-sm text-orange-600 hover:text-orange-700 dark:text-orange-400"
+                target="_blank"
+                rel="noopener"
+              >
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+                </svg>
+                View Episode
+              </a>
+              <a
+                x-show="episode.podcast?.feedUrl"
+                :href="episode.podcast?.feedUrl"
+                class="inline-flex items-center gap-2 text-sm text-surface-500 hover:text-surface-700 dark:hover:text-surface-300"
+                target="_blank"
+                rel="noopener"
+                title="Subscribe to feed"
+              >
+                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                  <circle cx="6.18" cy="17.82" r="2.18"/>
+                  <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
+                </svg>
+                RSS
+              </a>
+              <button
+                class="share-post-btn"
+                :data-share-url="episode.url"
+                :data-share-title="episode.title"
+                title="Create post"
+                aria-label="Create post"
+              >
+                <span class="share-post-icon">✏️</span>
+                <span class="share-post-label">Post</span>
+              </button>
+              <button
+                class="save-later-btn"
+                :data-save-url="episode.url"
+                :data-save-title="episode.title"
+                data-save-source="podroll"
+                title="Save for later"
+                aria-label="Save for later"
+              >
+                <span class="save-later-icon">📑</span>
+                <span class="save-later-label">Save</span>
+              </button>
+            </div>
+          </article>
+        </template>
+      </div>
+
+      {# Pagination #}
+      <div x-show="hasMore" class="text-center mt-8">
+        <button
+          @click="loadMore()"
+          :disabled="loadingMore"
+          class="px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
+        >
+          <span x-show="!loadingMore">Load More Episodes</span>
+          <span x-show="loadingMore" class="flex items-center gap-2">
+            <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            Loading...
+          </span>
+        </button>
+      </div>
+
+      {# Empty State #}
+      <div x-show="!loading && episodes.length === 0 && !error" class="text-center py-12">
+        <svg class="w-16 h-16 mx-auto text-surface-300 dark:text-surface-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
+        </svg>
+        <p class="text-surface-600 dark:text-surface-400 text-lg">No podcast episodes yet.</p>
+        <p class="text-surface-500 text-sm mt-2">Episodes will appear once the sync completes.</p>
+      </div>
+    </div>
+
+    {# Sidebar - Podcast Sources (OPML) #}
+    <aside class="sidebar">
+      <div class="widget">
+        <h3 class="widget-title flex items-center gap-2">
+          <svg class="w-5 h-5 text-orange-600" fill="currentColor" viewBox="0 0 24 24">
+            <circle cx="6.18" cy="17.82" r="2.18"/>
+            <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
+          </svg>
+          Subscriptions
+          <span class="text-sm font-normal text-surface-500" x-text="'(' + sources.length + ')'"></span>
+        </h3>
+
+        <div x-show="sources.length === 0 && !loading" class="text-sm text-surface-500 text-center py-4">
+          No subscriptions loaded yet.
+        </div>
+
+        <ul x-show="sources.length > 0" class="space-y-2">
+          <template x-for="source in sources" :key="source.xmlUrl">
+            <li class="group">
+              <a
+                :href="source.htmlUrl || source.xmlUrl"
+                class="flex items-center gap-3 p-2 -mx-2 rounded-lg hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors"
+                target="_blank"
+                rel="noopener"
+              >
+                <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center flex-shrink-0">
+                  <span class="text-white text-xs font-bold" x-text="source.title.charAt(0).toUpperCase()"></span>
+                </div>
+                <div class="flex-1 min-w-0">
+                  <p class="text-sm font-medium text-surface-900 dark:text-surface-100 truncate" x-text="source.title"></p>
+                  <p x-show="source.category" class="text-xs text-surface-500 truncate" x-text="source.category"></p>
+                </div>
+                <a
+                  :href="source.xmlUrl"
+                  class="opacity-0 group-hover:opacity-100 text-surface-400 hover:text-orange-600 transition-opacity"
+                  target="_blank"
+                  rel="noopener"
+                  title="RSS Feed"
+                  @click.stop
+                >
+                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                    <circle cx="6.18" cy="17.82" r="2.18"/>
+                    <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
+                  </svg>
+                </a>
+              </a>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </aside>
+  </div>
+</div>
+
+<script>
+function podrollApp() {
+  return {
+    episodes: [],
+    sources: [],
+    status: null,
+    loading: true,
+    loadingMore: false,
+    error: null,
+    filterPodcast: 'all',
+    offset: 0,
+    limit: 20,
+    hasMore: false,
+    refreshInterval: null,
+
+    async init() {
+      await this.fetchData();
+      // Re-fetch from API when podcast filter changes
+      this.$watch('filterPodcast', () => this.fetchEpisodes());
+      // Auto-refresh every 5 minutes
+      this.refreshInterval = setInterval(() => this.fetchData(true), 5 * 60 * 1000);
+    },
+
+    async fetchData(silent = false) {
+      if (!silent) this.loading = true;
+      this.error = null;
+
+      try {
+        const [episodesRes, sourcesRes, statusRes] = await Promise.all([
+          fetch(`/podrollapi/api/episodes?limit=${this.limit}`).then(r => r.json()),
+          fetch('/podrollapi/api/sources').then(r => r.json()),
+          fetch('/podrollapi/api/status').then(r => r.json())
+        ]);
+
+        this.episodes = episodesRes.items || [];
+        this.hasMore = episodesRes.hasMore || false;
+        this.offset = 0;
+        this.sources = sourcesRes.items || [];
+        this.status = statusRes;
+      } catch (err) {
+        this.error = 'Failed to load podcasts: ' + err.message;
+        console.error('Podroll fetch error:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async fetchEpisodes() {
+      this.loading = true;
+      this.error = null;
+      this.offset = 0;
+
+      try {
+        let url = `/podrollapi/api/episodes?limit=${this.limit}`;
+        if (this.filterPodcast !== 'all') {
+          url += `&source=${encodeURIComponent(this.filterPodcast)}`;
+        }
+        const res = await fetch(url).then(r => r.json());
+        this.episodes = res.items || [];
+        this.hasMore = res.hasMore || false;
+      } catch (err) {
+        this.error = 'Failed to load episodes: ' + err.message;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async loadMore() {
+      this.loadingMore = true;
+      const newOffset = this.offset + this.limit;
+
+      try {
+        let url = `/podrollapi/api/episodes?limit=${this.limit}&offset=${newOffset}`;
+        if (this.filterPodcast !== 'all') {
+          url += `&source=${encodeURIComponent(this.filterPodcast)}`;
+        }
+        const res = await fetch(url).then(r => r.json());
+        this.episodes = [...this.episodes, ...(res.items || [])];
+        this.hasMore = res.hasMore || false;
+        this.offset = newOffset;
+      } catch (err) {
+        console.error('Load more error:', err);
+      } finally {
+        this.loadingMore = false;
+      }
+    },
+
+    async refresh() {
+      this.filterPodcast = 'all';
+      await this.fetchData();
+    },
+
+    get filteredEpisodes() {
+      return this.episodes;
+    },
+
+    get sortedSources() {
+      return [...this.sources].sort((a, b) => a.title.localeCompare(b.title));
+    },
+
+    formatDate(dateStr, format = 'short') {
+      if (!dateStr) return '';
+      const date = new Date(dateStr);
+      if (isNaN(date.getTime())) return '';
+
+      if (format === 'full') {
+        return date.toLocaleString(undefined, {
+          year: 'numeric', month: 'short', day: 'numeric',
+          hour: '2-digit', minute: '2-digit'
+        });
+      }
+      return date.toLocaleDateString(undefined, {
+        month: 'short', day: 'numeric', year: 'numeric'
+      });
+    },
+
+    formatDuration(bytes) {
+      if (!bytes) return '';
+      const mb = bytes / (1024 * 1024);
+      return mb.toFixed(1) + ' MB';
+    },
+
+    stripHtml(html) {
+      if (!html) return '';
+      // Use textContent to safely extract text without executing HTML
+      const div = document.createElement('div');
+      div.textContent = html.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
+      return div.textContent.substring(0, 500);
+    }
+  };
+}
+</script>
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/readlater.njk b/readlater.njk
new file mode 100644
index 0000000..01de949
--- /dev/null
+++ b/readlater.njk
@@ -0,0 +1,250 @@
+---
+layout: layouts/base.njk
+title: Reading List
+permalink: /readlater/
+---
+<div class="readlater-page" x-data="readlaterApp()" x-init="init()">
+  <header class="mb-6 sm:mb-8">
+    <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
+      <svg class="w-8 h-8 inline-block mr-2 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
+      </svg>
+      Reading List
+    </h1>
+    <p class="text-surface-600 dark:text-surface-400">
+      Articles and links saved for later - <span x-text="items.length" class="font-medium"></span> items
+    </p>
+  </header>
+
+  <div class="layout-with-sidebar">
+    {# Main Content #}
+    <div class="main-content">
+      {# Loading State #}
+      <div x-show="loading" class="text-center py-12">
+        <svg class="w-8 h-8 mx-auto text-orange-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <p class="text-surface-600 dark:text-surface-400">Loading...</p>
+      </div>
+
+      {# Error State #}
+      <div x-show="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
+        <p class="text-red-700 dark:text-red-400" x-text="error"></p>
+        <button @click="fetchData()" class="mt-2 text-sm text-red-600 hover:text-red-700 underline">Try again</button>
+      </div>
+
+      {# Filter by Source #}
+      <div x-show="!loading && items.length > 0" class="mb-6">
+        <div class="flex flex-wrap items-center gap-3">
+          <div class="relative">
+            <select
+              x-model="selectedSource"
+              @change="fetchData()"
+              class="appearance-none bg-surface-50 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg pl-3 pr-8 py-2 text-sm focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
+            >
+              <option value="">All sources</option>
+              <template x-for="src in sources" :key="src">
+                <option :value="src" x-text="src"></option>
+              </template>
+            </select>
+            <svg class="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+            </svg>
+          </div>
+          <div class="relative flex-1 max-w-xs">
+            <input
+              type="search"
+              x-model.debounce.300ms="searchQuery"
+              @input="fetchData()"
+              placeholder="Search..."
+              class="w-full bg-surface-50 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg pl-9 pr-3 py-2 text-sm focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
+            />
+            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+            </svg>
+          </div>
+          <button
+            @click="toggleSort()"
+            class="inline-flex items-center gap-1 px-3 py-2 bg-surface-50 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg text-sm hover:bg-surface-50 dark:hover:bg-surface-700 transition-colors"
+            :title="sortDir === 'desc' ? 'Newest first' : 'Oldest first'"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"/>
+            </svg>
+            <span x-text="sortDir === 'desc' ? 'Newest' : 'Oldest'"></span>
+          </button>
+        </div>
+      </div>
+
+      {# Items List #}
+      <div x-show="!loading" class="space-y-4">
+        <template x-for="item in items" :key="item.id">
+          <article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-5 hover:border-orange-400 dark:hover:border-orange-600 transition-colors">
+            <div class="flex items-start gap-4">
+              <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center">
+                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
+                </svg>
+              </div>
+              <div class="flex-1 min-w-0">
+                <h2 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
+                  <a :href="item.url" class="hover:text-orange-600 dark:hover:text-orange-400 transition-colors" target="_blank" rel="noopener" x-text="item.title"></a>
+                </h2>
+                <div class="flex flex-wrap items-center gap-2 text-sm text-surface-500">
+                  <span
+                    class="inline-flex items-center px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded-full text-xs"
+                    x-text="item.source"
+                  ></span>
+                  <time :datetime="item.savedAt" x-text="formatDate(item.savedAt)"></time>
+                </div>
+                <p class="text-xs text-surface-400 mt-1 truncate" x-text="item.url"></p>
+              </div>
+            </div>
+
+            {# Actions #}
+            <div class="flex flex-wrap items-center gap-3 mt-3 pt-3 border-t border-surface-200 dark:border-surface-700">
+              <a
+                :href="item.url"
+                class="inline-flex items-center gap-2 text-sm text-orange-600 hover:text-orange-700 dark:text-orange-400"
+                target="_blank"
+                rel="noopener"
+              >
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+                </svg>
+                Read
+              </a>
+              <button
+                class="share-post-btn"
+                :data-share-url="item.url"
+                :data-share-title="item.title"
+                title="Create post"
+                aria-label="Create post"
+              >
+                <span class="share-post-icon">✏️</span>
+                <span class="share-post-label">Post</span>
+              </button>
+            </div>
+          </article>
+        </template>
+      </div>
+
+      {# Empty State #}
+      <div x-show="!loading && items.length === 0 && !error" class="text-center py-12">
+        <svg class="w-16 h-16 mx-auto text-surface-300 dark:text-surface-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
+        </svg>
+        <p class="text-surface-600 dark:text-surface-400 text-lg">No saved items yet.</p>
+        <p class="text-surface-500 text-sm mt-2">Save articles from around the web using the bookmark button.</p>
+      </div>
+    </div>
+
+    {# Sidebar #}
+    <aside class="sidebar">
+      {# Stats Widget #}
+      <div class="widget">
+        <h3 class="widget-title">Stats</h3>
+        <div class="grid grid-cols-2 gap-3 text-center">
+          <div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg">
+            <span class="text-2xl font-bold text-orange-600 dark:text-orange-400 block" x-text="items.length"></span>
+            <span class="text-xs text-surface-500 uppercase">Saved</span>
+          </div>
+          <div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg">
+            <span class="text-2xl font-bold text-orange-600 dark:text-orange-400 block" x-text="sources.length"></span>
+            <span class="text-xs text-surface-500 uppercase">Sources</span>
+          </div>
+        </div>
+      </div>
+
+      {# Sources Quick Filter #}
+      <div class="widget" x-show="sources.length > 0">
+        <h3 class="widget-title flex items-center gap-2">
+          <svg class="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
+          </svg>
+          Sources
+        </h3>
+        <ul class="space-y-1 mt-4">
+          <li>
+            <button
+              @click="selectedSource = ''; fetchData()"
+              :class="selectedSource === '' ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400' : 'hover:bg-surface-100 dark:hover:bg-surface-700'"
+              class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors"
+            >
+              All
+            </button>
+          </li>
+          <template x-for="src in sources" :key="src">
+            <li>
+              <button
+                @click="selectedSource = src; fetchData()"
+                :class="selectedSource === src ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400' : 'hover:bg-surface-100 dark:hover:bg-surface-700'"
+                class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors"
+                x-text="src"
+              ></button>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </aside>
+  </div>
+</div>
+
+<script>
+function readlaterApp() {
+  return {
+    items: [],
+    sources: [],
+    loading: true,
+    error: null,
+    selectedSource: '',
+    searchQuery: '',
+    sortDir: 'desc',
+
+    async init() {
+      await this.fetchData();
+    },
+
+    async fetchData() {
+      this.loading = true;
+      this.error = null;
+
+      try {
+        const params = new URLSearchParams();
+        if (this.selectedSource) params.set('source', this.selectedSource);
+        if (this.searchQuery) params.set('q', this.searchQuery);
+        if (this.sortDir) params.set('sort', this.sortDir);
+
+        const qs = params.toString();
+        const [itemsRes, sourcesRes] = await Promise.all([
+          fetch(`/readlater/api/items${qs ? '?' + qs : ''}`).then(r => r.json()),
+          fetch('/readlater/api/sources').then(r => r.json())
+        ]);
+
+        this.items = itemsRes.items || [];
+        this.sources = sourcesRes.items || [];
+      } catch (err) {
+        this.error = 'Failed to load reading list: ' + err.message;
+        console.error('ReadLater fetch error:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    toggleSort() {
+      this.sortDir = this.sortDir === 'desc' ? 'asc' : 'desc';
+      this.fetchData();
+    },
+
+    formatDate(dateStr) {
+      if (!dateStr) return '';
+      const date = new Date(dateStr);
+      if (isNaN(date.getTime())) return '';
+      return date.toLocaleDateString(undefined, {
+        month: 'short', day: 'numeric', year: 'numeric'
+      });
+    }
+  };
+}
+</script>
diff --git a/replies.njk b/replies.njk
new file mode 100644
index 0000000..48666de
--- /dev/null
+++ b/replies.njk
@@ -0,0 +1,139 @@
+---
+layout: layouts/base.njk
+title: Replies
+withSidebar: true
+pagination:
+  data: collections.replies
+  size: 20
+  alias: paginatedReplies
+  generatePageOnEmptyData: true
+permalink: "replies/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
+---
+<div class="h-feed">
+  <div class="flex flex-wrap items-center gap-4 mb-2">
+    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Replies</h1>
+    {% set sparklineSvg = collections.replies | postingFrequency %}
+    {% if sparklineSvg %}
+    <span class="text-rose-600 dark:text-rose-400">{{ sparklineSvg | safe }}</span>
+    {% endif %}
+  </div>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
+    My responses to posts across the web.
+    <span class="text-sm">({{ collections.replies.length }} total)</span>
+  </p>
+
+  {% if paginatedReplies.length > 0 %}
+  <ul class="post-list">
+    {% for post in paginatedReplies %}
+    <li class="h-entry post-card border-l-[3px] border-l-rose-400 dark:border-l-rose-500">
+      <div class="post-header flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          {% if post.data.title %}
+          <h2 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">
+            <a class="hover:text-rose-600 dark:hover:text-rose-400" href="{{ post.url }}">{{ post.data.title }}</a>
+          </h2>
+          {% endif %}
+          <div class="post-meta">
+            <time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time>
+            {% if post.data.category %}
+            <span class="post-categories">
+              {% if post.data.category is string %}
+              <span class="p-category">{{ post.data.category }}</span>
+              {% else %}
+              {% for cat in post.data.category %}
+              <span class="p-category">{{ cat }}</span>
+              {% endfor %}
+              {% endif %}
+            </span>
+            {% endif %}
+          </div>
+          {# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
+          {% set replyTo = post.data.inReplyTo or post.data.in_reply_to %}
+          {% if replyTo %}
+          {% set protocol = replyTo | protocolType %}
+          {% unfurl replyTo %}
+          <p class="mt-2 text-sm flex items-center gap-2 flex-wrap">
+            <span class="text-surface-500">In reply to:</span>
+            <a class="u-in-reply-to text-xs text-surface-400 dark:text-surface-500 hover:underline break-all" href="{{ replyTo }}">
+              {{ replyTo | replace("https://", "") | replace("http://", "") | truncate(60) }}
+            </a>
+            {% if protocol == "atmosphere" %}
+            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-[#0085ff]/10 text-[#0085ff] text-xs font-medium">
+              <svg class="w-3 h-3" viewBox="0 0 568 501" fill="currentColor" aria-hidden="true">
+                <path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"/>
+              </svg>
+              via ATmosphere
+            </span>
+            {% elif protocol == "fediverse" %}
+            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-[#6364ff]/10 text-[#6364ff] text-xs font-medium">
+              <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
+              </svg>
+              via Fediverse
+            </span>
+            {% else %}
+            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 text-xs font-medium">
+              <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+              </svg>
+              via Web
+            </span>
+            {% endif %}
+          </p>
+          {% endif %}
+          <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
+            {{ post.templateContent | safe }}
+          </div>
+          <a class="u-url text-sm text-rose-600 dark:text-rose-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+
+  {# Pagination controls #}
+  {% if pagination.pages.length > 1 %}
+  <nav class="pagination" aria-label="Replies pagination">
+    <div class="pagination-info">
+      Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
+    </div>
+    <div class="pagination-links">
+      {% if pagination.href.previous %}
+      <a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </span>
+      {% endif %}
+
+      {% if pagination.href.next %}
+      <a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </span>
+      {% endif %}
+    </div>
+  </nav>
+  {% endif %}
+
+  {% else %}
+  {% set postType = "reply" %}
+  {% include "components/empty-collection.njk" %}
+  {% endif %}
+</div>
diff --git a/reposts.njk b/reposts.njk
new file mode 100644
index 0000000..45bdf0b
--- /dev/null
+++ b/reposts.njk
@@ -0,0 +1,115 @@
+---
+layout: layouts/base.njk
+title: Reposts
+withSidebar: true
+pagination:
+  data: collections.reposts
+  size: 20
+  alias: paginatedReposts
+  generatePageOnEmptyData: true
+permalink: "reposts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
+---
+<div class="h-feed">
+  <div class="flex flex-wrap items-center gap-4 mb-2">
+    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Reposts</h1>
+    {% set sparklineSvg = collections.reposts | postingFrequency %}
+    {% if sparklineSvg %}
+    <span class="text-emerald-600 dark:text-emerald-400">{{ sparklineSvg | safe }}</span>
+    {% endif %}
+  </div>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
+    Content I've shared from others.
+    <span class="text-sm">({{ collections.reposts.length }} total)</span>
+  </p>
+
+  {% if paginatedReposts.length > 0 %}
+  <ul class="post-list">
+    {% for post in paginatedReposts %}
+    <li class="h-entry post-card border-l-[3px] border-l-rose-400 dark:border-l-rose-500">
+      <div class="post-header flex items-start gap-3">
+        <div class="flex-shrink-0 mt-1">
+          <svg class="w-5 h-5 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+          </svg>
+        </div>
+        <div class="flex-1 min-w-0">
+          {% if post.data.title %}
+          <h2 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">
+            <a class="hover:text-rose-600 dark:hover:text-rose-400" href="{{ post.url }}">{{ post.data.title }}</a>
+          </h2>
+          {% endif %}
+          <div class="post-meta">
+            <time class="dt-published" datetime="{{ post.date | isoDate }}">
+              {{ post.date | dateDisplay }}
+            </time>
+            {% if post.data.category %}
+            <span class="post-categories">
+              {% if post.data.category is string %}
+              <span class="p-category">{{ post.data.category }}</span>
+              {% else %}
+              {% for cat in post.data.category %}
+              <span class="p-category">{{ cat }}</span>
+              {% endfor %}
+              {% endif %}
+            </span>
+            {% endif %}
+          </div>
+          {# Support both camelCase (Indiekit Eleventy preset) and underscore (legacy) property names #}
+          {% set repostedUrl = post.data.repostOf or post.data.repost_of %}
+          {% if repostedUrl %}
+          {% unfurl repostedUrl %}
+          <a class="u-repost-of text-xs text-surface-400 dark:text-surface-500 hover:underline break-all mt-1 inline-block" href="{{ repostedUrl }}">
+            {{ repostedUrl }}
+          </a>
+          {% endif %}
+          {% if post.templateContent %}
+          <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
+            {{ post.templateContent | safe }}
+          </div>
+          {% endif %}
+          <a class="u-url text-sm text-rose-600 dark:text-rose-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
+        </div>
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+
+  {# Pagination controls #}
+  {% if pagination.pages.length > 1 %}
+  <nav class="pagination" aria-label="Reposts pagination">
+    <div class="pagination-info">
+      Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}
+    </div>
+    <div class="pagination-links">
+      {% if pagination.href.previous %}
+      <a href="{{ pagination.href.previous }}" class="pagination-link" aria-label="Previous page">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+        Previous
+      </span>
+      {% endif %}
+
+      {% if pagination.href.next %}
+      <a href="{{ pagination.href.next }}" class="pagination-link" aria-label="Next page">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </a>
+      {% else %}
+      <span class="pagination-link disabled">
+        Next
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+      </span>
+      {% endif %}
+    </div>
+  </nav>
+  {% endif %}
+
+  {% else %}
+  {% set postType = "repost" %}
+  {% include "components/empty-collection.njk" %}
+  {% endif %}
+</div>
diff --git a/search.njk b/search.njk
new file mode 100644
index 0000000..73d065c
--- /dev/null
+++ b/search.njk
@@ -0,0 +1,39 @@
+---
+layout: layouts/base.njk
+title: Search
+permalink: /search/
+eleventyExcludeFromCollections: true
+pagefindIgnore: true
+---
+<div class="page-header mb-6 sm:mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Search</h1>
+  <p class="text-surface-600 dark:text-surface-400">Search across all posts, articles, notes, and pages.</p>
+</div>
+
+<div id="search"></div>
+<noscript>
+  <div class="p-6 bg-surface-100 dark:bg-surface-800 rounded-lg mt-4">
+    <p class="text-surface-700 dark:text-surface-300">Search requires JavaScript to be enabled. Please enable JavaScript in your browser settings to use the search feature.</p>
+    <p class="text-surface-500 text-sm mt-2">Alternatively, you can browse content via the <a href="/blog/" class="text-accent-600 dark:text-accent-400 hover:underline">blog archive</a> or <a href="/categories/" class="text-accent-600 dark:text-accent-400 hover:underline">categories</a>.</p>
+  </div>
+</noscript>
+
+<script>
+  initPagefind("#search", { showSubResults: true });
+
+  // Support ?q= query parameter and auto-focus
+  window.addEventListener("DOMContentLoaded", () => {
+    const params = new URLSearchParams(window.location.search);
+    const query = params.get("q");
+    if (query) {
+      const input = document.querySelector("#search input[type='text']");
+      if (input) {
+        input.value = query;
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+      }
+    } else {
+      const input = document.querySelector("#search input[type='text']");
+      if (input) input.focus();
+    }
+  });
+</script>
diff --git a/slashes.njk b/slashes.njk
new file mode 100644
index 0000000..8c2a14c
--- /dev/null
+++ b/slashes.njk
@@ -0,0 +1,153 @@
+---
+layout: layouts/base.njk
+title: Slash Pages
+withSidebar: true
+permalink: /slashes/
+eleventyImport:
+  collections:
+    - pages
+---
+<div class="h-feed">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Slash Pages</h1>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
+    Root-level pages on this site. Inspired by <a href="https://slashpages.net" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">slashpages.net</a>.
+  </p>
+
+  {# Dynamic pages (created via Indiekit) #}
+  <div class="mb-8">
+    <h2 class="text-lg font-semibold text-surface-800 dark:text-surface-200 mb-4">Pages</h2>
+    {% if collections.pages.length > 0 %}
+    <ul class="post-list">
+      {% for page in collections.pages %}
+      <li class="h-entry post-card">
+        <div class="post-header">
+          <h3 class="text-xl font-semibold">
+            <a href="{{ page.url }}" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">
+              /{{ page.fileSlug }}
+            </a>
+          </h3>
+        </div>
+        {% if page.data.summary %}
+        <p class="p-summary text-surface-600 dark:text-surface-400 mt-2">{{ page.data.summary }}</p>
+        {% elif page.data.title %}
+        <p class="text-surface-600 dark:text-surface-400 mt-2">{{ page.data.title }}</p>
+        {% endif %}
+        {% if page.data.updated %}
+        <p class="text-sm text-surface-500 mt-2">
+          Updated: <time datetime="{{ page.data.updated | isoDate }}">{{ page.data.updated | dateDisplay }}</time>
+        </p>
+        {% endif %}
+      </li>
+      {% endfor %}
+    </ul>
+    {% else %}
+    <div class="p-4 bg-surface-100 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+      <p class="text-surface-600 dark:text-surface-400 text-sm mb-2">
+        No root pages yet. To create pages like <code>/now</code>, <code>/uses</code>, or <code>/colophon</code>, you need two plugins:
+      </p>
+      <ul class="text-sm text-surface-600 dark:text-surface-400 list-disc list-inside space-y-1">
+        <li><code>@rmdes/indiekit-post-type-page</code> — registers the "page" post type with Indiekit, using root-level URL paths (<code>/slug</code> instead of <code>/type/YYYY/MM/DD/slug</code>)</li>
+        <li><code>@rmdes/indiekit-endpoint-posts</code> — publishing UI that sends the <code>h=page</code> Micropub type so pages are created at root level</li>
+      </ul>
+      <p class="text-surface-500 dark:text-surface-500 text-xs mt-3">
+        Once both plugins are installed, "Page" appears as a post type in the Indiekit admin UI, and pages are published directly at <code>/slug</code>.
+      </p>
+    </div>
+    {% endif %}
+  </div>
+
+  {# Activity pages — only show when their plugin backend is available #}
+  {% set hasActivityPages = (funkwhaleActivity and funkwhaleActivity.source == "indiekit") or
+        (githubActivity and githubActivity.source != "error") or
+        (lastfmActivity and lastfmActivity.source == "indiekit") or
+        (newsActivity and newsActivity.source == "indiekit") or
+        (youtubeChannel and youtubeChannel.source == "indiekit") or
+        (blogrollStatus and blogrollStatus.source == "indiekit") or
+        (podrollStatus and podrollStatus.source == "indiekit") %}
+  {% if hasActivityPages %}
+  <div class="mb-8">
+    <h2 class="text-lg font-semibold text-surface-800 dark:text-surface-200 mb-4">Activity Feeds</h2>
+    <ul class="post-list">
+      {% if blogrollStatus and blogrollStatus.source == "indiekit" %}
+      <li class="post-card">
+        <div class="post-header">
+          <h3 class="text-xl font-semibold">
+            <a href="/blogroll/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/blogroll</a>
+          </h3>
+        </div>
+        <p class="text-surface-600 dark:text-surface-400 mt-2">Sites I follow</p>
+      </li>
+      {% endif %}
+      {% if funkwhaleActivity and funkwhaleActivity.source == "indiekit" %}
+      <li class="post-card">
+        <div class="post-header">
+          <h3 class="text-xl font-semibold">
+            <a href="/funkwhale/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/funkwhale</a>
+          </h3>
+        </div>
+        <p class="text-surface-600 dark:text-surface-400 mt-2">Funkwhale activity</p>
+      </li>
+      {% endif %}
+      {% if githubActivity and githubActivity.source != "error" %}
+      <li class="post-card">
+        <div class="post-header">
+          <h3 class="text-xl font-semibold">
+            <a href="/github/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/github</a>
+          </h3>
+        </div>
+        <p class="text-surface-600 dark:text-surface-400 mt-2">GitHub activity</p>
+      </li>
+      {% endif %}
+      {% if lastfmActivity and lastfmActivity.source == "indiekit" %}
+      <li class="post-card">
+        <div class="post-header">
+          <h3 class="text-xl font-semibold">
+            <a href="/listening/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/listening</a>
+          </h3>
+        </div>
+        <p class="text-surface-600 dark:text-surface-400 mt-2">Last.fm scrobbles</p>
+      </li>
+      {% endif %}
+      {% if newsActivity and newsActivity.source == "indiekit" %}
+      <li class="post-card">
+        <div class="post-header">
+          <h3 class="text-xl font-semibold">
+            <a href="/news/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/news</a>
+          </h3>
+        </div>
+        <p class="text-surface-600 dark:text-surface-400 mt-2">RSS feed aggregator</p>
+      </li>
+      {% endif %}
+      {% if podrollStatus and podrollStatus.source == "indiekit" %}
+      <li class="post-card">
+        <div class="post-header">
+          <h3 class="text-xl font-semibold">
+            <a href="/podroll/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/podroll</a>
+          </h3>
+        </div>
+        <p class="text-surface-600 dark:text-surface-400 mt-2">Podcasts I listen to</p>
+      </li>
+      {% endif %}
+      {% if youtubeChannel and youtubeChannel.source == "indiekit" %}
+      <li class="post-card">
+        <div class="post-header">
+          <h3 class="text-xl font-semibold">
+            <a href="/youtube/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/youtube</a>
+          </h3>
+        </div>
+        <p class="text-surface-600 dark:text-surface-400 mt-2">YouTube channel</p>
+      </li>
+      {% endif %}
+    </ul>
+  </div>
+  {% endif %}
+
+  {# Inspiration section #}
+  <div class="mt-8 p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
+    <h2 class="text-lg font-semibold text-surface-800 dark:text-surface-200 mb-2">Want more slash pages?</h2>
+    <p class="text-surface-600 dark:text-surface-400 text-sm">
+      Check out <a href="https://slashpages.net" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">slashpages.net</a>
+      for inspiration on pages like <code>/now</code>, <code>/uses</code>, <code>/colophon</code>, <code>/blogroll</code>, and more.
+    </p>
+  </div>
+</div>
diff --git a/starred.njk b/starred.njk
new file mode 100644
index 0000000..08eb83b
--- /dev/null
+++ b/starred.njk
@@ -0,0 +1,435 @@
+---
+layout: layouts/base.njk
+title: Starred Repositories
+permalink: /github/starred/
+eleventyExcludeFromCollections: true
+---
+
+<div class="starred-page" x-data="starredPage" x-cloak>
+  <header class="mb-6 sm:mb-8">
+    <div class="flex items-center gap-2 mb-4">
+      <a href="/github/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline">&larr; GitHub Activity</a>
+    </div>
+    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2 flex items-center gap-3">
+      <svg class="w-8 h-8 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
+      </svg>
+      Starred Repositories
+    </h1>
+    <p class="text-surface-600 dark:text-surface-400">
+      <template x-if="loading">
+        <span>Loading starred repos&hellip;</span>
+      </template>
+      <template x-if="!loading && totalCount > 0">
+        <span>
+          <span x-text="totalCount"></span> repos starred on GitHub.
+          <template x-if="lastSync">
+            <span>Last synced <span x-text="formatDate(lastSync)"></span>.</span>
+          </template>
+        </span>
+      </template>
+      <template x-if="!loading && totalCount === 0">
+        <span>No starred repositories found. The cache may still be syncing.</span>
+      </template>
+    </p>
+  </header>
+
+  {# Loading state #}
+  <template x-if="loading">
+    <div class="text-center py-12">
+      <div class="inline-block w-8 h-8 border-4 border-accent-200 border-t-accent-600 rounded-full animate-spin"></div>
+      <p class="mt-4 text-surface-500">Loading starred repositories&hellip;</p>
+    </div>
+  </template>
+
+  {# Error state #}
+  <template x-if="error">
+    <p class="text-surface-600 dark:text-surface-400" x-text="error"></p>
+  </template>
+
+  {# Main content — shown after loading #}
+  <template x-if="!loading && allStars.length > 0">
+    <div>
+
+      {# ===== TAB BAR ===== #}
+      <div class="mb-4 -mx-4 px-4 overflow-x-auto scrollbar-thin">
+        <div class="flex gap-1 min-w-max border-b border-surface-200 dark:border-surface-700">
+          {# All tab #}
+          <button
+            @click="activeTab = 'all'; resetView()"
+            :class="activeTab === 'all'
+              ? 'border-accent-600 text-accent-700 dark:text-accent-400'
+              : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'"
+            class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors"
+          >
+            All
+            <span class="ml-1 text-xs opacity-70" x-text="'(' + allStars.length + ')'"></span>
+          </button>
+
+          {# List tabs #}
+          <template x-for="list in listMeta" :key="list.slug">
+            <button
+              @click="activeTab = list.slug; resetView()"
+              :class="activeTab === list.slug
+                ? 'border-accent-600 text-accent-700 dark:text-accent-400'
+                : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'"
+              class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors"
+            >
+              <span x-text="list.name"></span>
+              <span class="ml-1 text-xs opacity-70" x-text="'(' + tabCountForList(list.slug) + ')'"></span>
+            </button>
+          </template>
+
+          {# Uncategorized tab #}
+          <button
+            @click="activeTab = 'uncategorized'; resetView()"
+            :class="activeTab === 'uncategorized'
+              ? 'border-accent-600 text-accent-700 dark:text-accent-400'
+              : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'"
+            class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors"
+          >
+            Uncategorized
+            <span class="ml-1 text-xs opacity-70" x-text="'(' + uncategorizedCount + ')'"></span>
+          </button>
+        </div>
+      </div>
+
+      {# ===== CONTROLS BAR ===== #}
+      <div class="mb-6 space-y-3">
+        {# Search + Sort row #}
+        <div class="flex flex-col sm:flex-row gap-3">
+          {# Search #}
+          <div class="relative flex-1">
+            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+            </svg>
+            <input
+              type="text"
+              x-model="searchQuery"
+              @input="resetView()"
+              placeholder="Search by name, description, topic, or language..."
+              class="w-full pl-10 pr-10 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 placeholder-surface-400 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent"
+            >
+            <template x-if="searchQuery">
+              <button @click="searchQuery = ''; resetView()" class="absolute right-3 top-1/2 -translate-y-1/2 text-surface-400 hover:text-surface-600">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                </svg>
+              </button>
+            </template>
+          </div>
+
+          {# Sort dropdown #}
+          <select
+            x-model="sortBy"
+            @change="resetView()"
+            class="px-3 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500"
+          >
+            <option value="stars">Sort: Stars</option>
+            <option value="starredAt">Sort: Recently Starred</option>
+            <option value="pushedAt">Sort: Recently Updated</option>
+            <option value="name">Sort: Name</option>
+          </select>
+        </div>
+
+        {# Filters row #}
+        <div class="flex flex-wrap items-center gap-2">
+          {# Language filter #}
+          <select
+            x-model="languageFilter"
+            @change="resetView()"
+            class="px-2 py-1.5 rounded border border-surface-300 dark:border-surface-600 bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-xs focus:outline-none focus:ring-2 focus:ring-accent-500"
+          >
+            <option value="">All Languages</option>
+            <template x-for="lang in availableLanguages" :key="lang">
+              <option :value="lang" x-text="lang"></option>
+            </template>
+          </select>
+
+          {# Star count filter #}
+          <div class="flex rounded border border-surface-300 dark:border-surface-600 overflow-hidden">
+            <template x-for="opt in starFilterOptions" :key="opt.value">
+              <button
+                @click="starCountMin = opt.value; resetView()"
+                :class="starCountMin === opt.value
+                  ? 'bg-accent-600 text-white'
+                  : 'bg-surface-50 dark:bg-surface-800 text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700'"
+                class="px-2.5 py-1 text-xs font-medium transition-colors"
+                x-text="opt.label"
+              ></button>
+            </template>
+          </div>
+
+          {# Archived toggle #}
+          <label class="flex items-center gap-1.5 text-xs text-surface-600 dark:text-surface-400 cursor-pointer">
+            <input type="checkbox" x-model="showArchived" @change="resetView()" class="rounded border-surface-300 text-accent-600 focus:ring-accent-500">
+            Show archived
+          </label>
+
+          {# Active filter summary #}
+          <template x-if="hasActiveFilters">
+            <button
+              @click="clearFilters()"
+              class="text-xs text-accent-600 dark:text-accent-400 hover:underline"
+            >Clear filters</button>
+          </template>
+        </div>
+      </div>
+
+      {# ===== RESULTS SUMMARY ===== #}
+      <div class="mb-4 text-sm text-surface-500">
+        <span x-text="resultSummary"></span>
+      </div>
+
+      {# ===== REPO GRID ===== #}
+      <div class="grid gap-3 sm:gap-4 md:grid-cols-2" id="starred-grid">
+        <template x-for="repo in visibleStars" :key="repo.fullName">
+          <article class="starred-card p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-500 transition-colors">
+            <div class="flex items-center gap-2 mb-1">
+              <template x-if="repo.ownerAvatar">
+                <img :src="repo.ownerAvatar" :alt="repo.ownerLogin" class="w-5 h-5 rounded-full" loading="lazy">
+              </template>
+              <h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">
+                <a :href="repo.url" class="hover:text-surface-600 dark:hover:text-surface-400" target="_blank" rel="noopener" x-text="repo.fullName"></a>
+              </h3>
+              <template x-if="repo.archived">
+                <span class="text-xs px-1.5 py-0.5 bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 rounded">Archived</span>
+              </template>
+            </div>
+
+            <template x-if="repo.description">
+              <p class="text-sm text-surface-600 dark:text-surface-400 mb-2 line-clamp-2" x-text="repo.description"></p>
+            </template>
+
+            <template x-if="repo.topics && repo.topics.length">
+              <div class="flex flex-wrap gap-1.5 mb-2">
+                <template x-for="topic in repo.topics.slice(0, 5)" :key="topic">
+                  <span class="text-xs px-2 py-0.5 bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300 rounded" x-text="topic"></span>
+                </template>
+                <template x-if="repo.topics.length > 5">
+                  <span class="text-xs px-2 py-0.5 bg-surface-100 dark:bg-surface-700 text-surface-500 rounded" x-text="'+' + (repo.topics.length - 5)"></span>
+                </template>
+              </div>
+            </template>
+
+            <div class="flex flex-wrap items-center gap-3 text-xs text-surface-500">
+              <template x-if="repo.language">
+                <span class="flex items-center gap-1">
+                  <span class="w-2.5 h-2.5 rounded-full" :style="'background:' + languageColor(repo.language)"></span>
+                  <span x-text="repo.language"></span>
+                </span>
+              </template>
+              <span class="flex items-center gap-1">
+                <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
+                <span x-text="formatNumber(repo.stars)"></span>
+              </span>
+              <template x-if="repo.forks > 0">
+                <span class="flex items-center gap-1">
+                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/></svg>
+                  <span x-text="formatNumber(repo.forks)"></span>
+                </span>
+              </template>
+              <template x-if="repo.license">
+                <span x-text="repo.license"></span>
+              </template>
+              <template x-if="repo.starredAt">
+                <span x-text="'Starred ' + formatDate(repo.starredAt)"></span>
+              </template>
+            </div>
+          </article>
+        </template>
+      </div>
+
+      {# ===== EMPTY FILTERED STATE ===== #}
+      <template x-if="sortedStars.length === 0">
+        <div class="text-center py-12">
+          <p class="text-surface-500">No repos match your current filters.</p>
+          <button @click="clearFilters()" class="mt-2 text-sm text-accent-600 dark:text-accent-400 hover:underline">Clear all filters</button>
+        </div>
+      </template>
+
+      {# ===== LOAD MORE ===== #}
+      <template x-if="visibleCount < sortedStars.length">
+        <div class="mt-6 text-center">
+          <button
+            @click="visibleCount = Math.min(visibleCount + 50, sortedStars.length)"
+            class="px-6 py-2.5 bg-accent-600 hover:bg-accent-700 text-white rounded-lg transition-colors"
+          >
+            Load More
+            <span class="text-accent-200" x-text="'(' + (sortedStars.length - visibleCount) + ' remaining)'"></span>
+          </button>
+        </div>
+      </template>
+
+    </div>
+  </template>
+</div>
+
+{# Alpine.js component #}
+<script>
+document.addEventListener("alpine:init", () => {
+  Alpine.data("starredPage", () => ({
+    // Data from API
+    allStars: [],
+    listMeta: [],
+    totalCount: 0,
+    lastSync: null,
+    loading: true,
+    error: null,
+
+    // Controls
+    activeTab: "all",
+    sortBy: "stars",
+    searchQuery: "",
+    languageFilter: "",
+    starCountMin: 0,
+    showArchived: false,
+    visibleCount: 50,
+
+    // Star filter options
+    starFilterOptions: [
+      { label: "Any", value: 0 },
+      { label: "100+", value: 100 },
+      { label: "1K+", value: 1000 },
+      { label: "10K+", value: 10000 },
+      { label: "100K+", value: 100000 },
+    ],
+
+    // --- Computed ---
+
+    get tabStars() {
+      if (this.activeTab === "all") return this.allStars;
+      if (this.activeTab === "uncategorized")
+        return this.allStars.filter(r => !r.lists || r.lists.length === 0);
+      return this.allStars.filter(r => r.lists && r.lists.includes(this.activeTab));
+    },
+
+    get filteredStars() {
+      let result = this.tabStars;
+      if (!this.showArchived) result = result.filter(r => !r.archived);
+      if (this.languageFilter) result = result.filter(r => r.language === this.languageFilter);
+      if (this.starCountMin) result = result.filter(r => (r.stars || 0) >= this.starCountMin);
+      if (this.searchQuery) {
+        const q = this.searchQuery.toLowerCase();
+        result = result.filter(r =>
+          (r.fullName && r.fullName.toLowerCase().includes(q)) ||
+          (r.description && r.description.toLowerCase().includes(q)) ||
+          (r.language && r.language.toLowerCase().includes(q)) ||
+          (r.topics && r.topics.some(t => t.toLowerCase().includes(q)))
+        );
+      }
+      return result;
+    },
+
+    get sortedStars() {
+      const sorted = [...this.filteredStars];
+      switch (this.sortBy) {
+        case "stars":
+          return sorted.sort((a, b) => (b.stars || 0) - (a.stars || 0));
+        case "starredAt":
+          return sorted.sort((a, b) => (b.starredAt || "").localeCompare(a.starredAt || ""));
+        case "pushedAt":
+          return sorted.sort((a, b) => (b.pushedAt || "").localeCompare(a.pushedAt || ""));
+        case "name":
+          return sorted.sort((a, b) => (a.fullName || "").localeCompare(b.fullName || ""));
+        default:
+          return sorted;
+      }
+    },
+
+    get visibleStars() {
+      return this.sortedStars.slice(0, this.visibleCount);
+    },
+
+    get availableLanguages() {
+      const langs = new Set(this.tabStars.map(r => r.language).filter(Boolean));
+      return [...langs].sort();
+    },
+
+    get uncategorizedCount() {
+      return this.allStars.filter(r => !r.lists || r.lists.length === 0).length;
+    },
+
+    get hasActiveFilters() {
+      return this.searchQuery || this.languageFilter || this.starCountMin > 0 || this.showArchived;
+    },
+
+    get resultSummary() {
+      const total = this.sortedStars.length;
+      const showing = Math.min(this.visibleCount, total);
+      const tabName = this.activeTab === "all" ? "all repos"
+        : this.activeTab === "uncategorized" ? "uncategorized"
+        : (this.listMeta.find(l => l.slug === this.activeTab)?.name || this.activeTab);
+      if (this.hasActiveFilters) {
+        return showing + " of " + total + " matching repos in " + tabName;
+      }
+      return "Showing " + showing + " of " + total + " repos in " + tabName;
+    },
+
+    // --- Methods ---
+
+    tabCountForList(slug) {
+      return this.allStars.filter(r => r.lists && r.lists.includes(slug)).length;
+    },
+
+    resetView() {
+      this.visibleCount = 50;
+    },
+
+    clearFilters() {
+      this.searchQuery = "";
+      this.languageFilter = "";
+      this.starCountMin = 0;
+      this.showArchived = false;
+      this.resetView();
+    },
+
+    formatDate(iso) {
+      if (!iso) return "";
+      try {
+        return new Date(iso).toLocaleDateString("en-US", {
+          year: "numeric", month: "short", day: "numeric"
+        });
+      } catch { return iso; }
+    },
+
+    formatNumber(n) {
+      if (n >= 1000) return (n / 1000).toFixed(n >= 10000 ? 0 : 1) + "k";
+      return String(n);
+    },
+
+    languageColor(lang) {
+      const colors = {
+        JavaScript: "#f1e05a", TypeScript: "#3178c6", Python: "#3572A5",
+        Rust: "#dea584", Go: "#00ADD8", Java: "#b07219", Ruby: "#701516",
+        "C++": "#f34b7d", C: "#555555", "C#": "#178600", PHP: "#4F5D95",
+        Swift: "#F05138", Kotlin: "#A97BFF", Dart: "#00B4AB",
+        Shell: "#89e051", HTML: "#e34c26", CSS: "#563d7c", Vue: "#41b883",
+        Svelte: "#ff3e00", Lua: "#000080", Zig: "#ec915c", Nix: "#7e7eff",
+        Elixir: "#6e4a7e", Haskell: "#5e5086", Scala: "#c22d40",
+        Jupyter: "#DA5B0B", R: "#198CE7", SCSS: "#c6538c",
+      };
+      return colors[lang] || "#8b8b8b";
+    },
+
+    // --- Init ---
+
+    async init() {
+      try {
+        const res = await fetch("/githubapi/api/starred/all");
+        if (!res.ok) throw new Error("API returned " + res.status);
+        const data = await res.json();
+        this.allStars = data.stars || [];
+        this.listMeta = (data.listMeta || []).sort((a, b) => a.name.localeCompare(b.name));
+        this.totalCount = data.totalCount || 0;
+        this.lastSync = data.lastSync || null;
+      } catch (err) {
+        this.error = "Could not load starred repositories. Try refreshing the page.";
+        console.error("[starred]", err);
+      } finally {
+        this.loading = false;
+      }
+    },
+  }));
+});
+</script>
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..3d3477f
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,97 @@
+import typography from "@tailwindcss/typography";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./**/*.njk",
+    "./**/*.md",
+    "./_includes/**/*.njk",
+    "./content/**/*.md",
+    "./lib/**/*.js",
+  ],
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        // Warm stone — surfaces, text, structure
+        surface: {
+          50: "#faf8f5",
+          100: "#f4f2ee",
+          200: "#e8e5df",
+          300: "#d5d0c8",
+          400: "#a09a90",
+          500: "#7a746a",
+          600: "#5c5750",
+          700: "#3f3b35",
+          800: "#2a2722",
+          900: "#1c1b19",
+          950: "#0f0e0d",
+        },
+        // Warm amber — default interactive, CTAs, focus rings
+        accent: {
+          50: "#fffbeb",
+          100: "#fef3c7",
+          200: "#fde68a",
+          300: "#fcd34d",
+          400: "#fbbf24",
+          500: "#f59e0b",
+          600: "#d97706",
+          700: "#b45309",
+          800: "#92400e",
+          900: "#78350f",
+          950: "#451a03",
+        },
+        // Legacy — kept for compatibility, not used in templates
+        primary: {
+          50: "#eff6ff",
+          100: "#dbeafe",
+          200: "#bfdbfe",
+          300: "#93c5fd",
+          400: "#60a5fa",
+          500: "#3b82f6",
+          600: "#2563eb",
+          700: "#1d4ed8",
+          800: "#1e40af",
+          900: "#1e3a8a",
+          950: "#172554",
+        },
+      },
+      fontFamily: {
+        sans: [
+          '"Inter"',
+          "system-ui",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Segoe UI",
+          "Roboto",
+          "sans-serif",
+        ],
+        mono: [
+          "ui-monospace",
+          "SF Mono",
+          "Monaco",
+          "Cascadia Code",
+          "monospace",
+        ],
+      },
+      maxWidth: {
+        content: "720px",
+        wide: "1200px",
+      },
+      typography: (theme) => ({
+        DEFAULT: {
+          css: {
+            "--tw-prose-links": theme("colors.accent.600"),
+            maxWidth: "none",
+          },
+        },
+        invert: {
+          css: {
+            "--tw-prose-links": theme("colors.accent.400"),
+          },
+        },
+      }),
+    },
+  },
+  plugins: [typography],
+};
diff --git a/webmention-debug.njk b/webmention-debug.njk
new file mode 100644
index 0000000..172a933
--- /dev/null
+++ b/webmention-debug.njk
@@ -0,0 +1,124 @@
+---
+layout: layouts/base.njk
+title: Webmention Debug
+permalink: /debug/webmentions/
+eleventyExcludeFromCollections: true
+pagefindIgnore: true
+---
+<div class="page-header mb-6 sm:mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Webmention Debug</h1>
+  <p class="text-surface-600 dark:text-surface-400">
+    Debug page for webmention recovery from legacy URLs.
+    This page is excluded from collections and won't appear in feeds.
+  </p>
+</div>
+
+<div class="space-y-8">
+  {# Summary #}
+  <section class="p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
+    <h2 class="text-xl font-bold mb-4">Summary</h2>
+    <dl class="grid grid-cols-2 gap-4 text-sm">
+      <div>
+        <dt class="font-semibold text-surface-600 dark:text-surface-400">Total URL Mappings</dt>
+        <dd class="text-2xl font-bold">{{ urlAliases.aliases | length }}</dd>
+      </div>
+      <div>
+        <dt class="font-semibold text-surface-600 dark:text-surface-400">Total Webmentions</dt>
+        <dd class="text-2xl font-bold">{{ webmentions | length }}</dd>
+      </div>
+    </dl>
+  </section>
+
+  {# Recent Posts with Webmentions #}
+  <section>
+    <h2 class="text-xl font-bold mb-4">Posts with Webmentions</h2>
+    <div class="overflow-x-auto">
+      <table class="w-full text-sm">
+        <thead class="bg-surface-100 dark:bg-surface-800">
+          <tr>
+            <th class="p-2 text-left">Current URL</th>
+            <th class="p-2 text-left">Legacy URLs</th>
+            <th class="p-2 text-right">Webmentions</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-surface-200 dark:divide-surface-700">
+          {% for post in collections.posts | head(50) %}
+            {% set allMentions = webmentions | webmentionsForUrl(post.url, urlAliases, conversationMentions) %}
+            {% set legacyUrls = urlAliases.getOldUrls(post.url) %}
+            {% if allMentions.length > 0 or legacyUrls.length > 0 %}
+            <tr class="hover:bg-surface-50 dark:hover:bg-surface-800/50">
+              <td class="p-2">
+                <a href="{{ post.url }}" class="text-accent-600 dark:text-accent-400 hover:underline">
+                  {{ post.url }}
+                </a>
+              </td>
+              <td class="p-2 text-xs text-surface-500 font-mono">
+                {% if legacyUrls.length %}
+                  {% for legacyUrl in legacyUrls %}
+                    <div>{{ legacyUrl }}</div>
+                  {% endfor %}
+                {% else %}
+                  <span class="text-surface-400">-</span>
+                {% endif %}
+              </td>
+              <td class="p-2 text-right">
+                {% if allMentions.length %}
+                  <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100">
+                    {{ allMentions.length }}
+                  </span>
+                {% else %}
+                  <span class="text-surface-400">0</span>
+                {% endif %}
+              </td>
+            </tr>
+            {% endif %}
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  {# URL Alias Sample #}
+  <section>
+    <h2 class="text-xl font-bold mb-4">URL Alias Sample (first 20)</h2>
+    <div class="overflow-x-auto">
+      <table class="w-full text-sm font-mono">
+        <thead class="bg-surface-100 dark:bg-surface-800">
+          <tr>
+            <th class="p-2 text-left">New URL</th>
+            <th class="p-2 text-left">Old URL(s)</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-surface-200 dark:divide-surface-700">
+          {% set aliasEntries = urlAliases.aliases | dictsort %}
+          {% for newUrl, oldUrls in aliasEntries | head(20) %}
+          <tr>
+            <td class="p-2 text-xs break-all">{{ newUrl }}</td>
+            <td class="p-2 text-xs break-all text-surface-500">
+              {% for oldUrl in oldUrls %}
+                <div>{{ oldUrl }}</div>
+              {% endfor %}
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  {# Raw Webmention Targets (for debugging) #}
+  <section>
+    <h2 class="text-xl font-bold mb-4">Recent Webmention Targets</h2>
+    <p class="text-sm text-surface-600 dark:text-surface-400 mb-4">
+      Shows which URLs webmentions were sent to (useful for verifying legacy URL matches).
+    </p>
+    <ul class="space-y-1 font-mono text-xs">
+      {% for wm in webmentions | head(30) %}
+      <li class="p-2 bg-surface-50 dark:bg-surface-800/50 rounded">
+        <span class="text-surface-500">{{ wm["wm-property"] }}:</span>
+        <span class="break-all">{{ wm["wm-target"] }}</span>
+      </li>
+      {% endfor %}
+    </ul>
+  </section>
+</div>
diff --git a/youtube.njk b/youtube.njk
new file mode 100644
index 0000000..28cfb2c
--- /dev/null
+++ b/youtube.njk
@@ -0,0 +1,262 @@
+---
+layout: layouts/base.njk
+title: YouTube Channels
+permalink: /youtube/
+withSidebar: true
+---
+<div class="youtube-page" x-data="{ activeChannel: 0 }">
+  <header class="mb-6 sm:mb-8">
+    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">YouTube Channels</h1>
+    <p class="text-surface-600 dark:text-surface-400">
+      Latest videos and live streams from my YouTube channels.
+    </p>
+  </header>
+
+  {# Multi-channel tabs #}
+  {% if youtubeChannel.isMultiChannel and youtubeChannel.channels.length > 1 %}
+  <div class="mb-6">
+    <div class="flex flex-wrap gap-2 border-b border-surface-200 dark:border-surface-700">
+      {% for channel in youtubeChannel.channels %}
+      <button
+        @click="activeChannel = {{ loop.index0 }}"
+        :class="activeChannel === {{ loop.index0 }} ? 'border-red-500 text-red-600 dark:text-red-400' : 'border-transparent text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100'"
+        class="px-4 py-2 font-medium border-b-2 -mb-px transition-colors"
+      >
+        {{ channel.configName or channel.title }}
+      </button>
+      {% endfor %}
+    </div>
+  </div>
+  {% endif %}
+
+  {# Channel sections #}
+  {% for channel in youtubeChannel.channels %}
+  <div x-show="activeChannel === {{ loop.index0 }}" {% if not loop.first %}x-cloak{% endif %}>
+    {# Channel Header #}
+    <section class="mb-8">
+      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5 p-4 sm:p-6 bg-gradient-to-br from-red-500/10 to-red-600/5 dark:from-red-900/20 dark:to-red-800/10 rounded-xl sm:rounded-2xl border border-red-500/20">
+        {% if channel.thumbnail %}
+        <img
+          src="{{ channel.thumbnail }}"
+          alt=""
+          class="w-16 h-16 sm:w-20 sm:h-20 rounded-full shadow-lg object-cover flex-shrink-0"
+          loading="lazy"
+        >
+        {% else %}
+        <div class="w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0">
+          <svg class="w-8 h-8 sm:w-10 sm:h-10 text-red-500" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+          </svg>
+        </div>
+        {% endif %}
+
+        <div class="flex-1 min-w-0 w-full sm:w-auto">
+          <h2 class="text-lg sm:text-xl font-bold text-surface-900 dark:text-surface-100 truncate">
+            <a href="{{ channel.url }}" class="hover:text-red-600 dark:hover:text-red-400" target="_blank" rel="noopener">
+              {{ channel.title }}
+            </a>
+          </h2>
+          {% if channel.customUrl %}
+          <p class="text-sm text-surface-500">{{ channel.customUrl }}</p>
+          {% endif %}
+          <div class="flex flex-wrap items-center gap-4 mt-2 text-sm text-surface-600 dark:text-surface-400">
+            <span class="flex items-center gap-1">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
+              </svg>
+              {{ channel.subscriberCountFormatted }} subscribers
+            </span>
+            <span class="flex items-center gap-1">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+              </svg>
+              {{ channel.videoCountFormatted }} videos
+            </span>
+            <span class="flex items-center gap-1">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+              </svg>
+              {{ channel.viewCountFormatted }} views
+            </span>
+          </div>
+        </div>
+
+        {# Live Status Badge for this channel #}
+        {% set channelLiveStatus = youtubeChannel.liveStatuses | selectattr("channelConfigName", "equalto", channel.configName) | first %}
+        <div class="flex-shrink-0">
+          {% if channelLiveStatus and channelLiveStatus.isLive %}
+          <span class="inline-flex items-center gap-2 px-3 py-1.5 bg-red-500 text-white text-sm font-semibold rounded-full animate-pulse">
+            <span class="w-2 h-2 bg-surface-50 rounded-full"></span>
+            LIVE
+          </span>
+          {% elif channelLiveStatus and channelLiveStatus.isUpcoming %}
+          <span class="inline-flex items-center gap-2 px-3 py-1.5 bg-blue-500 text-white text-sm font-semibold rounded-full">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+            Upcoming
+          </span>
+          {% else %}
+          <span class="inline-flex items-center gap-2 px-3 py-1.5 bg-surface-200 dark:bg-surface-700 text-surface-600 dark:text-surface-400 text-sm font-medium rounded-full">
+            Offline
+          </span>
+          {% endif %}
+        </div>
+      </div>
+    </section>
+
+    {# Live Stream Section for this channel #}
+    {% set channelLiveStatus = youtubeChannel.liveStatuses | selectattr("channelConfigName", "equalto", channel.configName) | first %}
+    {% if channelLiveStatus and channelLiveStatus.stream and (channelLiveStatus.isLive or channelLiveStatus.isUpcoming) %}
+    <section class="mb-12">
+      <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
+        {% if channelLiveStatus.isLive %}
+        <span class="flex items-center gap-2 text-red-500">
+          <span class="w-3 h-3 bg-red-500 rounded-full animate-pulse"></span>
+          Live Now
+        </span>
+        {% else %}
+        <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+        Upcoming Stream
+        {% endif %}
+      </h2>
+
+      <a href="{{ channelLiveStatus.stream.url }}" class="block group" target="_blank" rel="noopener">
+        <div class="relative rounded-xl overflow-hidden {% if channelLiveStatus.isLive %}ring-2 ring-red-500{% else %}ring-1 ring-blue-500/50{% endif %}">
+          {% if channelLiveStatus.stream.thumbnail %}
+          <img
+            src="{{ channelLiveStatus.stream.thumbnail }}"
+            alt=""
+            class="w-full aspect-video object-cover"
+          >
+          {% endif %}
+          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
+            <div class="p-6">
+              <h3 class="text-xl font-bold text-white group-hover:text-red-300 transition-colors">
+                {{ channelLiveStatus.stream.title }}
+              </h3>
+              <p class="text-white/80 mt-2 flex items-center gap-2">
+                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M8 5v14l11-7z"/>
+                </svg>
+                Watch Now
+              </p>
+            </div>
+          </div>
+          {% if channelLiveStatus.isLive %}
+          <div class="absolute top-4 left-4">
+            <span class="inline-flex items-center gap-1.5 px-2 py-1 bg-red-500 text-white text-xs font-bold rounded">
+              <span class="w-1.5 h-1.5 bg-surface-50 rounded-full animate-pulse"></span>
+              LIVE
+            </span>
+          </div>
+          {% endif %}
+        </div>
+      </a>
+    </section>
+    {% endif %}
+
+    {# Videos Grid for this channel #}
+    <section class="mb-12">
+      <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
+        <svg class="w-6 h-6 text-red-500" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+        </svg>
+        Latest Videos
+      </h2>
+
+      {% set channelName = channel.configName or channel.title %}
+      {% set channelVideos = youtubeChannel.videosByChannel[channelName] %}
+      {% if channelVideos and channelVideos.length %}
+      <div class="grid gap-4 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {% for video in channelVideos | head(9) %}
+        <article class="group bg-surface-50 dark:bg-surface-800 rounded-xl overflow-hidden border border-surface-200 dark:border-surface-700 hover:border-red-400 dark:hover:border-red-600 transition-colors">
+          <a href="{{ video.url }}" class="block" target="_blank" rel="noopener">
+            <div class="relative aspect-video">
+              {% if video.thumbnail %}
+              <img
+                src="{{ video.thumbnail }}"
+                alt=""
+                class="w-full h-full object-cover"
+                loading="lazy"
+              >
+              {% else %}
+              <div class="w-full h-full bg-surface-200 dark:bg-surface-700 flex items-center justify-center">
+                <svg class="w-12 h-12 text-surface-400" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M8 5v14l11-7z"/>
+                </svg>
+              </div>
+              {% endif %}
+
+              {# Duration badge #}
+              {% if video.durationFormatted and not video.isLive %}
+              <span class="absolute bottom-2 right-2 px-1.5 py-0.5 bg-black/80 text-white text-xs font-medium rounded">
+                {{ video.durationFormatted }}
+              </span>
+              {% elif video.isLive %}
+              <span class="absolute bottom-2 right-2 px-1.5 py-0.5 bg-red-500 text-white text-xs font-bold rounded flex items-center gap-1">
+                <span class="w-1.5 h-1.5 bg-surface-50 rounded-full animate-pulse"></span>
+                LIVE
+              </span>
+              {% endif %}
+
+              {# Play overlay on hover #}
+              <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
+                <div class="w-12 h-12 rounded-full bg-red-500/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                  <svg class="w-6 h-6 text-white ml-0.5" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M8 5v14l11-7z"/>
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </a>
+
+          <div class="p-4">
+            <h3 class="font-semibold text-surface-900 dark:text-surface-100 line-clamp-2 mb-2 group-hover:text-red-600 dark:group-hover:text-red-400">
+              <a href="{{ video.url }}" target="_blank" rel="noopener">
+                {{ video.title }}
+              </a>
+            </h3>
+            <div class="flex items-center gap-3 text-sm text-surface-500">
+              <span class="flex items-center gap-1">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+                </svg>
+                {{ video.viewCountFormatted }}
+              </span>
+              <span>{{ video.relativeTime }}</span>
+            </div>
+          </div>
+        </article>
+        {% endfor %}
+      </div>
+
+      <div class="mt-8 text-center">
+        <a
+          href="{{ channel.url }}"
+          class="inline-flex items-center gap-2 px-6 py-3 bg-red-500 hover:bg-red-600 text-white font-semibold rounded-lg transition-colors"
+          target="_blank"
+          rel="noopener"
+        >
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+          </svg>
+          View All on YouTube
+        </a>
+      </div>
+      {% else %}
+      <p class="text-surface-600 dark:text-surface-400">No videos available yet.</p>
+      {% endif %}
+    </section>
+  </div>
+  {% endfor %}
+
+  {# Fallback for no channels #}
+  {% if not youtubeChannel.channels.length %}
+  <p class="text-surface-600 dark:text-surface-400">No YouTube channels configured.</p>
+  {% endif %}
+</div>