feat: build at the domain root on hosts other than GitHub Pages

baseURL is now "/"; the Pages workflow still injects the /iammiti99/ Pages URL. README documents Cloudflare Pages, Netlify and Vercel settings.
fix(theme): keep the baseURL subpath in og:image and twitter:image
2026-10-14 02:16:16 +00:00 · 2026-10-03 12:37:32 +07:00 · 2026-10-03 12:37:31 +07:00 · 2026-10-03 12:34:56 +07:00 · 2026-10-03 12:30:08 +07:00 · 2026-07-25 14:13:07 +07:00
141 changed files with 8348 additions and 10 deletions
@@ -20,7 +20,6 @@ jobs:
    steps:
      - uses: actions/checkout@v4
        with:
-          submodules: recursive
          fetch-depth: 0

      - id: pages
@@ -1,3 +0,0 @@
-[submodule "themes/bonsai"]
-	path = themes/bonsai
-	url = https://github.com/tiennm99/bonsai.git
@@ -10,4 +10,4 @@ You may obtain a copy of the License at
 ---

 This site is built with the bonsai Hugo theme
-(https://github.com/tiennm99/bonsai, Apache-2.0).
+(vendored in themes/bonsai/, Apache-2.0).
@@ -1,7 +1,7 @@
 # iammiti99

 Personal link-in-bio page — built with [Hugo](https://gohugo.io) and the
-[bonsai](https://github.com/tiennm99/bonsai) theme. Self-hosted Linktree
+[bonsai](themes/bonsai) theme. Self-hosted Linktree
 alternative for my own use.

 ## How it works
@@ -14,7 +14,6 @@ Actions builds with Hugo + bonsai → output deploys to GitHub Pages.
 Requires Hugo Extended ≥ 0.128.

 ```bash
-git submodule update --init --recursive
 hugo server          # http://localhost:1313
 hugo --gc --minify   # build to ./public
 ```
@@ -29,13 +28,33 @@ General → Workflow permissions** is set to "Read and write").
 (Optional) Custom domain: drop a `static/CNAME` file containing your apex
 domain — Hugo will copy it through to the deployed site.

+### Base URL
+
+`hugo.yml` sets `baseURL: /`, so a plain `hugo` build serves from the domain
+root. The GitHub Pages workflow overrides it with the Pages URL
+(`https://<owner>.github.io/iammiti99/`), so only that host gets the
+`/iammiti99/` subpath.
+
+### Other hosts (Cloudflare Pages, Netlify, Vercel)
+
+| Setting | Value |
+|---|---|
+| Build command | `hugo --gc --minify` |
+| Output directory | `public` |
+| Env `HUGO_VERSION` | `0.154.0` (Hugo Extended) |
+| Env `HUGO_BASEURL` (optional) | the site's full URL, e.g. `https://iammiti99.pages.dev/` |
+
+Without `HUGO_BASEURL` the site is served from the host's root URL, but
+`og:image` and the canonical link stay relative. Set it so social link previews
+get absolute URLs.
+
 ## Project layout

 ```
 hugo.yml                 # site content — edit params here
 content/_index.md        # placeholder so Hugo renders the index
 static/images/           # avatar etc.
-themes/bonsai/           # bonsai theme (git submodule)
+themes/bonsai/           # bonsai theme (in-repo, full history)
 .github/workflows/deploy.yml
 public/                  # build output (gitignored)
 ```
@@ -1,4 +1,4 @@
-baseURL: https://tiennm99.github.io/iammiti99/
+baseURL: /
 languageCode: en
 title: Tien — links
 theme: bonsai
@@ -0,0 +1,40 @@
+name: build
+
+on:
+  pull_request:
+    branches: [main]
+  push:
+    branches: [main]
+
+permissions:
+  contents: read
+
+concurrency:
+  group: build-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+        with:
+          submodules: recursive
+          fetch-depth: 0
+
+      - name: Setup Hugo Extended
+        uses: peaceiris/actions-hugo@v3
+        with:
+          hugo-version: '0.154.0'
+          extended: true
+
+      - name: Build exampleSite
+        working-directory: exampleSite
+        run: hugo --gc --minify --themesDir ../.. --printPathWarnings
+
+      - name: Upload built site
+        uses: actions/upload-artifact@v7
+        with:
+          name: exampleSite-public
+          path: exampleSite/public
+          retention-days: 7
@@ -0,0 +1,57 @@
+name: deploy
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+        with:
+          submodules: recursive
+          fetch-depth: 0
+
+      - id: pages
+        uses: actions/configure-pages@v6
+
+      - name: Setup Hugo Extended
+        uses: peaceiris/actions-hugo@v3
+        with:
+          hugo-version: '0.154.0'
+          extended: true
+
+      - name: Build with production baseURL
+        working-directory: exampleSite
+        run: |
+          hugo \
+            --gc \
+            --minify \
+            --themesDir ../.. \
+            --baseURL "${{ steps.pages.outputs.base_url }}/"
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v5
+        with:
+          path: exampleSite/public
+
+  deploy:
+    needs: build
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v5
@@ -0,0 +1,48 @@
+name: lighthouse-ci
+
+on:
+  pull_request:
+    branches: [main]
+  push:
+    branches: [main]
+
+permissions:
+  contents: read
+
+concurrency:
+  group: lighthouse-ci-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  lighthouse:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+        with:
+          submodules: recursive
+          fetch-depth: 0
+
+      - name: Setup Hugo Extended
+        uses: peaceiris/actions-hugo@v3
+        with:
+          hugo-version: '0.154.0'
+          extended: true
+
+      - name: Build exampleSite
+        working-directory: exampleSite
+        run: hugo --gc --minify --themesDir ../..
+
+      - name: Run Lighthouse CI
+        uses: treosh/lighthouse-ci-action@v12
+        with:
+          configPath: ./.lighthouserc.json
+          uploadArtifacts: true
+          temporaryPublicStorage: false
+
+      - name: Upload Lighthouse report
+        if: always()
+        uses: actions/upload-artifact@v7
+        with:
+          name: lighthouse-report
+          path: ./lhci-reports
+          retention-days: 7
@@ -0,0 +1,19 @@
+# Hugo build output
+public/
+resources/
+.hugo_build.lock
+
+# Hugo modules
+node_modules/
+
+# OS / editor
+.DS_Store
+Thumbs.db
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# Local env
+.env
+.env.local
@@ -0,0 +1,28 @@
+{
+  "ci": {
+    "collect": {
+      "staticDistDir": "exampleSite/public",
+      "numberOfRuns": 3
+    },
+    "assert": {
+      "preset": "lighthouse:recommended",
+      "assertions": {
+        "categories:performance": ["error", { "minScore": 0.9 }],
+        "categories:accessibility": ["error", { "minScore": 0.9 }],
+        "categories:best-practices": ["error", { "minScore": 0.9 }],
+        "categories:seo": ["error", { "minScore": 0.9 }],
+        "uses-responsive-images": "off",
+        "csp-xss": "off",
+        "uses-text-compression": "off",
+        "uses-long-cache-ttl": "off",
+        "network-dependency-tree-insight": "off",
+        "render-blocking-resources": "off",
+        "render-blocking-insight": "off"
+      }
+    },
+    "upload": {
+      "target": "filesystem",
+      "outputDir": "./lhci-reports"
+    }
+  }
+}
@@ -0,0 +1,129 @@
+# Changelog
+
+All notable changes to this project are documented here. Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versioning follows [SemVer](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.5.0] — 2026-05-15
+
+Linktree-parity + Lighthouse release. Closes #7 (auto-OG, infra-only) and #9 (multi-section bio). All additions are strictly opt-in or transparent; v0.4 sites upgrade with no config edits.
+
+### Added
+- **Multi-section bio** (#9) — opt-in `[[params.sections]]` with `title`, `description`, per-section `layout` override, and `[[sections.links]]`. Flat `[[params.links]]` still works (sections win + Hugo `warnf` on collision). Schema-person `sameAs` and RSS feed flatten across sections.
+- **Per-link enhancements** — five new optional fields: `image` (thumbnail), `featured` (accent-bordered emphasis), `startDate`/`endDate` (build-time visibility window), `rel` (appended to safe `noopener noreferrer` baseline), `note` (small caption under title).
+- **Share button** — `params.share = true` renders a `<button class="bio__share">` using `navigator.share` with `navigator.clipboard.writeText` fallback + ARIA-live toast. ~700 B JS loaded `defer` only when opted in.
+- **QR code block** — `params.qr = true` renders a `<details>` collapsible with a build-time-generated QR PNG of `Permalink` via Hugo's built-in `images.QR` (Hugo ≥ 0.140).
+- **vCard download** — `params.vcard = true` serves `/vcard.vcf` and renders a "Save contact" link. Requires registering the `VCard` output format in `hugo.toml` (see exampleSite).
+- **Opt-in GA4 click analytics** — `[params.analytics]` block with `measurementId`, `trackClicks`, `utmSource`, `utmMedium`, `utmCampaign`. Auto-emits `data-analytics-event="link:<slug>"` per link and injects UTM query strings into external link hrefs at build time. **GA4 cookies require GDPR/PECR/CPRA consent** — see `docs/deployment-guide.md`.
+- **Hugo image pipeline** — avatar now emits `<picture>` with AVIF + WebP + JPEG variants at 1x + 2x densities when `params.avatar` resolves as a local resource. External-URL and SVG-initials branches unchanged.
+- **Fingerprinted + SRI-protected assets** — `bonsai.css`, `gallery.css`, `theme-toggle.js`, `share.js` now ship via `resources.Get | resources.Minify | resources.Fingerprint "sha384"` with `integrity=` + `crossorigin="anonymous"` attributes. Enables 1-year `Cache-Control: immutable` headers.
+- **Auto-OG image (infra-only)** (#7) — `params.ogAuto = true` with `ogAutoBase` + `ogAutoFont` triggers a build-time `images.Filter`/`images.Text` overlay of `name` + `tagline` on a user-supplied base PNG. Theme ships template logic only — no vendored font or base PNG (30 KB binary-budget gate per validation session 1).
+- **WebSite JSON-LD** — opt-in `params.schemaWebSite = true` emits a second `<script type="application/ld+json">` of `@type: WebSite` alongside existing Person schema.
+- **Web manifest** — opt-in `params.manifest = true` registers a `Manifest` Hugo output format and emits `<link rel="manifest">`. Derives `name`/`theme_color`/`background_color`/icons from existing params.
+- **Skip-link** — first child of `<body>` for keyboard navigation. Hidden off-screen until focused.
+- **`<meta>` hardening** — `<link rel="canonical">`, `<meta property="og:url">`, `<meta name="robots">` (default `index,follow`), opt-in `<meta name="theme-color">`. Optional avatar `<link rel="preload">` for local-path avatars.
+- **Avatar `<img>` attributes** — `width="112" height="112" fetchpriority="high" decoding="async"` for CLS prevention + LCP prioritization.
+- **Tap-target enforcement** — `.bio__links--inline .link` now ≥ 48×48 px with ≥ 8 px gap per Lighthouse SEO / WCAG 2.5.5.
+- **Hreflang alternates** — emitted automatically when site has > 1 language configured.
+- **Deploy templates** — `exampleSite/static/_headers` (Netlify / Cloudflare Pages) + `exampleSite/vercel.json` with CSP, security headers, and 1-year `Cache-Control: immutable` on hashed assets.
+- **`docs/deployment-guide.md`** — 4-host coverage (Netlify, Cloudflare Pages, Vercel, GitHub Pages + Cloudflare Worker overlay) with rationale per security header and GA4 consent guidance.
+- **`docs/system-architecture.md`** + **`docs/code-standards.md`** — formal contributor docs.
+- **`.github/workflows/lighthouse-ci.yml` + `.lighthouserc.json`** — Lighthouse CI gating. Thresholds **≥ 0.90 across all 4 categories** — tightened from the user's "≥ 80" brief during validation session 1.
+- **7 new i18n keys** — `skip_to_content`, `share_label`, `share_copied`, `share_failed`, `show_qr`, `qr_alt`, `save_contact`. Both `en` and `vi` bundles updated.
+
+### Changed
+- **Min Hugo version: `0.140.0`** (was `0.128.0`). Required for `images.QR` and modern AVIF processing.
+- **CSS + JS file location**: `static/css/*.css` → `assets/css/*.css`, `static/js/*.js` → `assets/js/*.js`. Required for the new resource pipeline. End-users see no change — Hugo serves fingerprinted output at `/css/*.{hash}.css`.
+- **Sections/links collision** — when both `params.sections` and `params.links` are set, sections render and a `warnf` nudges the user.
+- **OG image cascade** — order is now: `ogImage=false` → suppress · `ogImageUrl` → explicit · `ogAuto` + assets → auto-generated · `avatar` → fallback.
+
+### Removed
+- None. All changes additive or backward-compatible.
+
+### Deferred
+- None. v0.4's deferred items (#7 auto-OG, #9 multi-section) both shipped.
+
+## [0.4.0] — 2026-05-10
+
+A11y, polish, and ergonomics release. All additions are strictly opt-in or transparent; v0.3 sites upgrade with no config edits. Closes #8, #10, #11; defers #7 + #9 to v0.5.
+
+### Added
+- **Favicon polish** — opt-in `params.faviconSvg` and `params.appleTouchIcon` for SVG and iOS home-screen icons. Default behavior unchanged when unset.
+- **Demo-only gallery CSS** — `/themes/` and `/variants/` pages load a separate `static/css/gallery.css`; `static/css/bonsai.css` no longer ships gallery selectors to user sites. Saves ~1.9 KB raw / ~200 B gzipped on every real site. New `head_extra` block in `baseof.html` enables per-page stylesheet additions.
+- **10 new icons** — set grows from 35 to 45. Brand additions: `bandcamp`, `soundcloud`, `spotify`, `figma`, `dribbble`, `stackoverflow`, `matrix`. Utility additions: `bookopen`, `download`, `heart`. Vendored from Simple Icons v13 (CC0) and Lucide v0.460 (ISC) at the same versions; soft ceiling for v0-line is ~50.
+- **Optional RSS feed** — opt-in `params.rss = true` renders an RSS 2.0 feed of `[[params.links]]` at `/index.xml` and emits `<link rel="alternate">` in `<head>`. Requires removing `RSS` from `disableKinds`. `pubDate` = build time. Off by default; existing sites unaffected.
+
+### Changed
+- **A11y** — sakura accent darkened `#d4456a → #c93f63` (4.04 → 4.49 vs bg) and koi accent darkened `#c8521e → #bd4c1c` (4.17 → 4.63 vs bg) to reach WCAG AA on the gallery accent chip. Brand intent preserved (cherry blossom pink / koi orange). README hex table synced.
+- **A11y** — `/themes/` and `/variants/` gallery wrappers are `<section aria-labelledby>` keyed to the page `<h1>`. Variant cards demoted from `<section>` to `<article>` to avoid double-region nesting.
+- **Polish** — `.link:hover` adds a subtle accent tint via `color-mix(in oklab, …)` alongside the existing border + 1px lift. Strengthens hover affordance without breaking the restrained look.
+- **Polish** — theme toggle hidden via `<noscript>` when JavaScript is disabled (button is JS-only; previously rendered but did nothing).
+- **i18n** — theme-toggle `aria-label` and `title` now use `with`/`else` fallback so a missing translation key in a custom language never leaks the raw key into the DOM.
+
+### Removed
+- Non-standard `data-theme="auto"` attribute from `<html>`. The CSS only ever queried `light` / `dark` via `:not([data-theme="..."])`; `auto` was a no-op. Inline FOUC script (v0.3) sets the attribute on first paint when the user has chosen, so behavior is unchanged.
+
+### Deferred to v0.5
+- Auto-generated OG images (#7).
+- Multi-section bio (#9).
+
+## [0.3.0] — 2026-05-03
+
+Layout, social-preview, and i18n release. All additions are strictly opt-in; v0.2 sites upgrade with no config edits.
+
+### Added
+- **Layout variants** — `params.layout` accepts `stack` (default), `grid` (responsive 2-col), or `inline` (icon-only horizontal row). Pure CSS, zero JS. Unknown values warn at build time and fall back to `stack`. Live gallery at `/variants/`.
+- **OG image controls** — `params.ogImageUrl` for an explicit 1200×630 social-preview image (auto-upgrades `twitter:card` to `summary_large_image`); `params.ogImage = false` to suppress all `og:image` / `twitter:image` tags. Avatar still serves as the fallback when neither is set.
+- **i18n string externalization** — every theme-rendered string (`nav` aria-label, theme-toggle labels, default footer template) sourced from `i18n/{lang}.toml`. Bundles for `en` (default) and `vi` ship with the theme. Adding a language is a single-file change.
+
+### Changed
+- `layouts/partials/bio-card.html` validates `params.layout` against the allowlist and emits `bio__links bio__links--{layout}` so variant rules scope under a parent class (avoids the v0.2-style specificity collision).
+- `layouts/partials/head.html` resolves OG image via the new `ogImage`/`ogImageUrl` ladder; emits `twitter:image` whenever `og:image` is present.
+- `layouts/partials/footer.html` uses `i18n "footer_default"` when no `params.footerText` override is set.
+- `exampleSite/hugo.toml` switches the demo to `layout = "grid"` to make the new feature visible on the live site.
+
+### Deferred
+- Auto-generated OG images (text overlay on per-palette base PNGs). Required vendoring a TTF + 4 base PNGs (~150 KB binary) into a theme that prides itself on `< 4 KB CSS`. Moved to v0.4 once a smaller path is found.
+
+## [0.2.0] — 2026-05-03
+
+Polish & SEO release. All additions are strictly opt-in; v0.1 sites upgrade with no config edits.
+
+### Added
+- **Color theme presets** — four named palettes (`bonsai` default, `sakura`, `sumi`, `koi`); select via new `params.colorTheme`. Each has light + dark variants. Gallery at `/themes/`.
+- **schema.org Person markup** — JSON-LD `ProfilePage > Person` injected in `<head>`. Built from existing params + optional `params.jobTitle`, `params.location`, `params.email`. Suppressible via `params.schema = false`. `mailto:` and `tel:` links excluded from `sameAs`.
+- **Theme toggle UI button** — sun/moon button rendered in footer when `params.themeToggle = true`. Sun shown in dark mode, moon in light (button shows target). `aria-pressed` reflects state. Existing localStorage persistence preserved.
+- **Avatar initials fallback** — when `params.avatar` is unset, theme renders an inline SVG circle with auto-derived initials (first letter of up to 2 words from `params.name`). Override with `params.avatarInitials`. Background overrideable via `params.avatarBg`.
+
+### Changed
+- `static/css/bonsai.css` restructured — color vars now scoped per `[data-bonsai-theme]`; layout vars (radius/gap/pad/fonts) stay in `:root`.
+- `layouts/_default/baseof.html` emits `data-bonsai-theme` attribute on `<html>`.
+- `layouts/partials/bio-card.html` delegates avatar rendering to new `partials/avatar.html`.
+- `static/js/theme-toggle.js` syncs `aria-pressed` on first paint and on click.
+- `exampleSite/hugo.toml` switches demo to `colorTheme = "sakura"` to showcase a non-default palette.
+
+## [0.1.0] — 2026-05-01
+
+First production-ready release. Live demo at <https://tiennm99.github.io/bonsai/>.
+
+### Added
+- 35 icons out of the box: 25 brand (Simple Icons CC0) + 10 utility (Lucide ISC), vendored at build time
+- `data/icons.yaml` manifest mapping public icon names → vendored SVG paths
+- Data-driven `partials/icon.html` (13 lines) replacing the hand-curated `if/else if` chain
+- `scripts/sync-icons.sh` — idempotent vendoring script, version-pinned to `simple-icons@13` + `lucide-static@0.460`
+- Icon gallery page at `/icons/` (rendered from `exampleSite/content/icons/`)
+- GitHub Actions `build` workflow — `hugo --gc --minify` on every PR and `main` push
+- GitHub Actions `deploy` workflow — auto-deploys `exampleSite/` to GitHub Pages on `main`
+- Dependabot config for weekly action updates
+- `CONTRIBUTING.md` covering dev setup, icon-add workflow, PR guidelines
+- `NOTICE` file crediting third-party icon sources
+
+### Changed
+- README rewritten with badges, live-demo link, configuration table, all-parameters reference
+- `exampleSite/hugo.toml` adds Mastodon and Bluesky example links
+- `theme.toml` `demosite` field points at the live GitHub Pages URL
+
+## [0.0.1] — 2026-05-01
+
+### Added
+- Initial scaffold: theme structure, baseof/index/partial layouts, washi-paper light + sumi-ink dark CSS, 8 hand-curated inline SVG icons (github, globe, mail, twitter, linkedin, youtube, instagram, rss), exampleSite, Apache-2.0 LICENSE
@@ -0,0 +1,55 @@
+# Contributing to Bonsai
+
+Thanks for your interest. Bonsai is intentionally small — every change should make it simpler, faster, or more useful, never bigger for its own sake.
+
+## Local development
+
+```bash
+git clone https://github.com/tiennm99/bonsai.git
+cd bonsai/exampleSite
+hugo server --themesDir ../.. --bind 0.0.0.0
+```
+
+Open `http://localhost:1313/`. Edits to `layouts/`, `static/`, `data/`, and `assets/` hot-reload.
+
+Hugo Extended ≥ 0.128 required. CI pins 0.154.0.
+
+## Adding an icon
+
+The icon system is data-driven — adding one means three small edits.
+
+1. **Vendor the SVG.** Edit `scripts/sync-icons.sh`:
+   - For brand/social icons → add the slug to the `BRAND_SLUGS` list (sourced from [Simple Icons](https://simpleicons.org)).
+   - For UI/utility icons → add the slug to the `UI_SLUGS` list (sourced from [Lucide](https://lucide.dev)).
+2. **Run the script** to fetch and normalise:
+   ```bash
+   ./scripts/sync-icons.sh
+   ```
+3. **Register the public name** in `data/icons.yaml`:
+   ```yaml
+   newicon: { family: brand, slug: newicon }
+   ```
+4. Rebuild and verify the icon renders in the gallery: `cd exampleSite && hugo server --themesDir ../..` → `http://localhost:1313/icons/`
+5. Add the new name to the appropriate table in `README.md`.
+
+## Pull requests
+
+- Branch from `main`. Keep PRs focused — one concern per PR.
+- Conventional commit prefixes: `feat:`, `fix:`, `docs:`, `chore:`, `ci:`, `refactor:`.
+- For visual changes, attach a before/after screenshot (the live demo URL helps reviewers).
+- CI must be green (`build` workflow runs `hugo --gc --minify` against `exampleSite`).
+
+## Style
+
+- HTML & CSS: 2-space indent. Keep `partials/` files under 30 lines where possible.
+- Hugo templates: prefer `{{- ... -}}` to suppress whitespace; use `partials` for reuse.
+- CSS: BEM-ish naming (`.bio__name`, `.link__icon`); CSS custom properties for theming.
+- No build steps for end users — vendored assets only. If you reach for `npm install`, reconsider.
+
+## Reporting issues
+
+Include: Hugo version (`hugo version`), theme version/commit, minimal reproduction (a snippet of `hugo.toml` is usually enough), expected vs actual.
+
+## Philosophy
+
+YAGNI · KISS · DRY. If a feature would be useful for *some* sites, it doesn't belong here unless it's useful for *most* link-in-bio sites. The strength of Bonsai is what it leaves out.
@@ -0,0 +1,202 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
@@ -0,0 +1,22 @@
+Bonsai Hugo Theme — Third-Party Notices
+========================================
+
+This theme vendors SVG icons from two open-source projects:
+
+1. Simple Icons (brand icons)
+   Source:  https://simpleicons.org / https://github.com/simple-icons/simple-icons
+   Version: 13.0.0
+   License: CC0 1.0 Universal (Public Domain Dedication)
+             https://creativecommons.org/publicdomain/zero/1.0/
+   Files:   assets/icons/brand/*.svg
+
+2. Lucide (UI icons)
+   Source:  https://lucide.dev / https://github.com/lucide-icons/lucide
+   Version: 0.460.0 (lucide-static)
+   License: ISC License
+             Copyright (c) 2020, Lucide Contributors
+             Permission to use, copy, modify, and/or distribute this software
+             for any purpose with or without fee is hereby granted, provided
+             that the above copyright notice and this permission notice appear
+             in all copies.
+   Files:   assets/icons/ui/*.svg
@@ -0,0 +1,349 @@
+# Bonsai
+
+[![build](https://github.com/tiennm99/bonsai/actions/workflows/build.yml/badge.svg)](https://github.com/tiennm99/bonsai/actions/workflows/build.yml)
+[![license](https://img.shields.io/github/license/tiennm99/bonsai)](LICENSE)
+[![Hugo](https://img.shields.io/badge/hugo-%E2%89%A50.140-ff4088?logo=hugo)](https://gohugo.io)
+
+A minimalist Hugo theme for link-in-bio pages, inspired by [Linktree](https://linktr.ee) and the Japanese art of [bonsai](https://en.wikipedia.org/wiki/Bonsai) — *small, curated, intentional*.
+
+**→ [Live demo](https://tiennm99.github.io/bonsai/)** · **[Icon gallery](https://tiennm99.github.io/bonsai/icons/)** · **[Layout variants](https://tiennm99.github.io/bonsai/variants/)** · **[Color themes](https://tiennm99.github.io/bonsai/themes/)**
+
+> 盆栽 (bonsai): "tray planting" — the art of growing miniature trees through patient, deliberate cultivation. Every branch placed with care.
+
+Bonsai treats your bio page the same way: a quiet, well-pruned page that surfaces only what matters — your name, who you are, and where people can find you.
+
+## Features
+
+**Core**
+- **Single-page bio** — name, avatar, tagline, links. Nothing else.
+- **Data-driven links** — `[[params.links]]` flat list, OR `[[params.sections]]` for grouped sections with headings (v0.5).
+- **45 icons out of the box** — 32 brand (GitHub, Mastodon, Bluesky, Spotify, Figma, Matrix…) + 13 utility (mail, globe, rss, heart, download…). Vendored from [Simple Icons](https://simpleicons.org) and [Lucide](https://lucide.dev).
+- **Light & dark mode** — respects `prefers-color-scheme`; optional toggle.
+- **Zero JavaScript by default** — pure HTML + CSS; opt-in JS only for theme toggle / share button / GA4.
+- **Fast** — ~2.4 KB gzipped CSS, no web fonts (system stack), no runtime fetches.
+- **Accessible** — semantic HTML, skip-link, 48×48 tap targets, `focus-visible` outlines, `prefers-reduced-motion`, WCAG-AA palettes.
+- **Responsive** — mobile-first, looks right at every viewport.
+
+**Linktree-parity opt-ins (v0.5)**
+- **Per-link enhancements** — `image` thumbnails, `featured` flag, `startDate`/`endDate` scheduled visibility, custom `rel`, `note` caption.
+- **Share button** — `navigator.share` with clipboard fallback + ARIA-live toast (`params.share`).
+- **QR code** — build-time PNG of the page Permalink via `images.QR` (`params.qr`).
+- **vCard download** — generated `.vcf` at `/vcard.vcf` for one-click contact import (`params.vcard`).
+- **GA4 click analytics** — `[params.analytics]` block; auto-emits `data-analytics-event` + UTM injection. *GA4 sets cookies — consent is your responsibility.*
+
+**Lighthouse hardening (v0.5)**
+- **`<picture>` avatar** — AVIF + WebP + JPEG at 1x/2x via Hugo's image processor.
+- **Fingerprinted CSS/JS** with SRI `integrity=` — enables 1-year `Cache-Control: immutable`.
+- **Canonical + `og:url` + theme-color + robots meta** emitted by default.
+- **Hreflang alternates** automatic for multi-language sites.
+- **Web manifest + WebSite JSON-LD** — opt-in via `params.manifest` / `params.schemaWebSite`.
+- **Deploy templates** for Netlify / Cloudflare Pages / Vercel / GitHub Pages — see [`docs/deployment-guide.md`](./docs/deployment-guide.md).
+- **Lighthouse CI** workflow gating PRs at ≥ 0.90 across Performance, A11y, Best-Practices, SEO.
+
+## Quick Start
+
+### As a Git submodule (simplest)
+
+```bash
+git submodule add https://github.com/tiennm99/bonsai.git themes/bonsai
+```
+
+Add to `hugo.toml`:
+
+```toml
+theme = "bonsai"
+```
+
+### As a Hugo Module
+
+```bash
+hugo mod init github.com/<you>/<your-site>
+hugo mod get github.com/tiennm99/bonsai
+```
+
+Add to `hugo.toml`:
+
+```toml
+[module]
+  [[module.imports]]
+    path = "github.com/tiennm99/bonsai"
+```
+
+## Configuration
+
+Minimal `hugo.toml`:
+
+```toml
+baseURL = "https://example.com/"
+title   = "Your Name"
+theme   = "bonsai"
+
+# Single-page bio — disable everything Hugo doesn't need.
+disableKinds = ["taxonomy", "term", "RSS", "sitemap", "404"]
+
+[params]
+  name    = "Your Name"
+  tagline = "Tending my little corner of the internet"
+  bio     = "Short bio. One sentence is plenty."
+  avatar  = "/images/avatar.jpg"
+
+  [[params.links]]
+    title = "GitHub"
+    url   = "https://github.com/yourname"
+    icon  = "github"
+
+  [[params.links]]
+    title = "Email"
+    url   = "mailto:you@example.com"
+    icon  = "mail"
+```
+
+### All parameters
+
+| Param | Type | Default | Description |
+|-------|------|---------|-------------|
+| `name` | string | site `title` | Display name shown as `<h1>`. |
+| `tagline` | string | — | One-liner under the name. |
+| `bio` | string (markdown) | — | Short bio paragraph. Markdown supported. |
+| `avatar` | string (URL) | — | Avatar image path. If unset, theme renders an SVG circle with auto-derived initials. |
+| `avatarInitials` | string | first letters of `name` | Override the initials when no `avatar` is set. |
+| `avatarBg` | string (CSS color) | `var(--bonsai-accent)` | Background color of the initials circle. |
+| `favicon` | string (URL) | `/favicon.ico` | Favicon path (`.ico` fallback). |
+| `faviconSvg` | string (URL) | — | Optional SVG favicon. Modern browsers prefer this when set. |
+| `appleTouchIcon` | string (URL) | — | 180×180 PNG for iOS home-screen / Safari pinned tabs. |
+| `colorTheme` | string | `bonsai` | Palette: `bonsai`, `sakura`, `sumi`, or `koi`. See [Color themes](#color-themes). |
+| `layout` | string | `stack` | Link arrangement: `stack`, `grid`, or `inline`. See [Layout variants](#layout-variants). |
+| `themeToggle` | bool | `false` | Render a sun/moon button in the footer + load the toggle script. |
+| `rss` | bool | `false` | Render an RSS 2.0 feed of `[[params.links]]` at `/index.xml` and emit `<link rel="alternate">` in `<head>`. Requires removing `RSS` from `disableKinds`. |
+| `share` | bool | `false` | Render a page share button using `navigator.share` with clipboard fallback. Loads `share.js` (~700 B) only when enabled. |
+| `qr` | bool | `false` | Render a collapsible `<details>` block with a build-time QR code (PNG) of the page Permalink. Requires Hugo ≥ 0.140 (`images.QR`). |
+| `vcard` | bool | `false` | Serve a vCard at `/vcard.vcf` and render a "Save contact" link. **Requires registering the `VCard` output format in `hugo.toml`** — see [output-format setup](#output-format-setup) below. |
+| `manifest` | bool | `false` | Emit a `<link rel="manifest">` and serve `/manifest.webmanifest`. **Requires registering the `Manifest` output format in `hugo.toml`** — see [output-format setup](#output-format-setup). |
+| `schemaWebSite` | bool | `false` | Emit a second JSON-LD block (`@type: WebSite`) alongside the always-on `Person` schema. Helps rich-snippet eligibility. |
+| `shortName` | string | first 12 chars of `name` | PWA `short_name` in `manifest.webmanifest`. Set when your name exceeds 12 chars. |
+| `themeBackground` | string (CSS color) | `#f4efe6` | PWA splash `background_color` in `manifest.webmanifest`. |
+| `ogAuto` | bool | `false` | Generate a 1200×630 OG image at build time by overlaying `name` + `tagline` text on a user-supplied base PNG. Requires `ogAutoBase` + `ogAutoFont`. Infra-only in v0.5: theme does not vendor base PNG / TTF font. |
+| `ogAutoBase` | string (assets path) | — | Path under `assets/` to a 1200×630 base PNG used by `ogAuto`. Example: `og/my-base.png` resolves to `assets/og/my-base.png`. |
+| `ogAutoFont` | string (assets path) | — | Path under `assets/` to a TTF font used by `ogAuto` text overlay. Subset to Latin-only is recommended (≤ 15 KB). |
+| `analytics` | object | — | Opt-in Google Analytics 4 — see [Analytics](#analytics) below. |
+| `ogImage` | bool | `true` | Set `false` to suppress all `og:image` / `twitter:image` tags. |
+| `ogImageUrl` | string (URL) | — | Explicit OG preview image (1200×630 recommended). Overrides the avatar fallback and upgrades Twitter card to `summary_large_image`. |
+| `ogAuto` | bool | `false` | Generate a 1200×630 OG image at build time by overlaying `name` + `tagline` text on a user-supplied base PNG. Requires `ogAutoBase` + `ogAutoFont`. Infra-only in v0.5: theme does not vendor base PNG / TTF font (binary-budget gate). |
+| `ogAutoBase` | string (assets path) | — | Path under `assets/` to a 1200×630 base PNG used by `ogAuto`. Example: `og/my-base.png` resolves to `assets/og/my-base.png`. |
+| `ogAutoFont` | string (assets path) | — | Path under `assets/` to a TTF font used by `ogAuto` text overlay. Subset to Latin-only is recommended (≤ 15 KB). |
+| `themeColor` | string (CSS color) | — | Optional `<meta name="theme-color">`. Tints mobile browser chrome (iOS Safari, Android Chrome). Set to your palette's accent for cohesive look. |
+| `robots` | string | `index,follow` | Value of `<meta name="robots">`. Set `noindex,nofollow` to hide the site from search engines. |
+| `preloadAvatar` | bool | `true` | Preload `params.avatar` as the LCP image via `<link rel="preload">`. Skipped automatically when avatar is an external URL or unset. |
+| `schema` | bool | `true` | Emit schema.org `Person` JSON-LD in `<head>`. Set `false` if you provide your own. |
+| `jobTitle` | string | — | Optional `Person.jobTitle` field for JSON-LD. |
+| `location` | string | — | Optional `Person.address` field for JSON-LD. |
+| `email` | string | — | Optional `Person.email` field for JSON-LD. |
+| `footer` | bool | `true` | Show the footer. |
+| `footerText` | string (HTML) | `© {year} {name}` | Override footer text. HTML allowed. |
+| `links` | array | — | Bio links. See below. |
+
+**Each `[[params.links]]` entry:**
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `title` | string | yes | Link label. |
+| `url` | string | yes | Link target. `mailto:` and `tel:` are rendered without `target=_blank`. |
+| `icon` | string | no | Icon name from the available set (see below). Unknown names render a generic external-link glyph. |
+
+## Color themes
+
+Four built-in palettes, each with light + dark variants. Set `colorTheme` in `[params]`:
+
+| Name | Vibe | Accent |
+|------|------|--------|
+| `bonsai` *(default)* | washi paper + vermilion seal | `#8b3a2b` |
+| `sakura` | cherry blossom pink | `#c93f63` |
+| `sumi` | monochrome ink | `#1a1a1a` |
+| `koi` | orange + cream | `#bd4c1c` |
+
+Live preview: **[tiennm99.github.io/bonsai/themes/](https://tiennm99.github.io/bonsai/themes/)**.
+
+## Layout variants
+
+Three arrangements for `[[params.links]]`. Pick one via `layout` in `[params]`:
+
+| Value | Look | Best for |
+|-------|------|----------|
+| `stack` *(default)* | Full-width vertical buttons | ≤ 6 link bios; the classic Linktree shape. |
+| `grid` | Two-column responsive grid (collapses to one column under 480 px) | 6–12 links; balances density and tap-target size. |
+| `inline` | Icon-only horizontal row | Lots of accounts, short page; titles stay in DOM for screen readers. |
+
+Live preview: **[tiennm99.github.io/bonsai/variants/](https://tiennm99.github.io/bonsai/variants/)**.
+
+## RSS feed (opt-in)
+
+Off by default. To enable a feed of your `[[params.links]]` at `/index.xml`:
+
+```toml
+# remove "RSS" from disableKinds — Hugo emits it by default but the theme suggests disabling it
+disableKinds = ["taxonomy", "term", "sitemap", "404"]
+
+[params]
+  rss = true
+```
+
+The theme renders one `<item>` per link. `pubDate` is the build time (links lack intrinsic dates), so the feed updates whenever the site rebuilds — fine for a curated bio, less ideal for high-frequency feeds.
+
+## Output-format setup
+
+`params.vcard` and `params.manifest` rely on custom Hugo output formats. Without the registration below, the theme emits the `<link rel="manifest">` / "Save contact" anchor but Hugo doesn't generate the file itself.
+
+Add to `hugo.toml`:
+
+```toml
+[mediaTypes."text/vcard"]
+  suffixes = ["vcf"]
+
+[mediaTypes."application/manifest+json"]
+  suffixes = ["webmanifest"]
+
+[outputs]
+  home = ["HTML", "RSS", "Manifest"]   # add "VCard" if params.vcard = true
+
+[outputFormats.VCard]
+  mediaType      = "text/vcard"
+  baseName       = "vcard"
+  isPlainText    = true
+  notAlternative = true
+
+[outputFormats.Manifest]
+  mediaType      = "application/manifest+json"
+  baseName       = "manifest"
+  isPlainText    = true
+  notAlternative = true
+```
+
+Only include the blocks you need. See `exampleSite/hugo.toml` for a working reference.
+
+## Analytics
+
+Off by default. To enable Google Analytics 4 click tracking and UTM injection on external links:
+
+```toml
+[params.analytics]
+  measurementId = "G-XXXXXXXXXX"   # required to enable
+  trackClicks   = true             # default; emits data-analytics-event="link:<slug>" + click listener
+  utmSource     = "bio"            # if set, appended to external link hrefs at build time
+  utmMedium     = "bio"
+  # utmCampaign = "summer-launch"
+```
+
+> ⚠️ **GA4 sets cookies.** Sites serving EU / UK / California visitors require explicit user consent before loading `gtag.js`. Bonsai does not ship a consent banner — pair with a consent management platform (Klaro!, Cookiebot, OneTrust) or skip GA4 entirely. See [`docs/deployment-guide.md`](./docs/deployment-guide.md#analytics--consent).
+
+## i18n
+
+Theme-rendered strings (nav landmark, theme-toggle labels, default footer) live in `i18n/{lang}.toml`. Bundles for `en` and `vi` ship with the theme.
+
+To use another language, set Hugo's `defaultContentLanguage` and add a matching `i18n/{lang}.toml`:
+
+```toml
+defaultContentLanguage = "fr"
+```
+
+```toml
+# i18n/fr.toml
+[nav_links_label]
+other = "Liens"
+[theme_toggle_label]
+other = "Basculer le thème clair / sombre"
+[theme_toggle_title]
+other = "Basculer le thème"
+[footer_default]
+other = "© {{ .year }} {{ .name }}"
+```
+
+Missing keys fall back to `en`. User content (`name`, `tagline`, `bio`, link `title`s, `footerText`) is never auto-translated — it stays user-owned.
+
+## Available Icons
+
+<details>
+<summary>Brand / Social (32)</summary>
+
+| Name | Source |
+|------|--------|
+| `github` | Simple Icons |
+| `gitlab` | Simple Icons |
+| `mastodon` | Simple Icons |
+| `bsky` | Simple Icons |
+| `x` | Simple Icons |
+| `threads` | Simple Icons |
+| `linkedin` | Simple Icons |
+| `instagram` | Simple Icons |
+| `facebook` | Simple Icons |
+| `tiktok` | Simple Icons |
+| `youtube` | Simple Icons |
+| `twitch` | Simple Icons |
+| `discord` | Simple Icons |
+| `telegram` | Simple Icons |
+| `signal` | Simple Icons |
+| `whatsapp` | Simple Icons |
+| `reddit` | Simple Icons |
+| `medium` | Simple Icons |
+| `devto` | Simple Icons |
+| `substack` | Simple Icons |
+| `hashnode` | Simple Icons |
+| `kofi` | Simple Icons |
+| `patreon` | Simple Icons |
+| `buymeacoffee` | Simple Icons |
+| `paypal` | Simple Icons |
+| `bandcamp` | Simple Icons |
+| `soundcloud` | Simple Icons |
+| `spotify` | Simple Icons |
+| `figma` | Simple Icons |
+| `dribbble` | Simple Icons |
+| `stackoverflow` | Simple Icons |
+| `matrix` | Simple Icons |
+
+</details>
+
+<details>
+<summary>UI / Utility (13)</summary>
+
+| Name | Source |
+|------|--------|
+| `mail` | Lucide |
+| `globe` | Lucide |
+| `link` | Lucide |
+| `rss` | Lucide |
+| `calendar` | Lucide |
+| `phone` | Lucide |
+| `mappin` | Lucide |
+| `filetext` | Lucide |
+| `extlink` | Lucide |
+| `share` | Lucide |
+| `bookopen` | Lucide |
+| `download` | Lucide |
+| `heart` | Lucide |
+
+</details>
+
+Icons are vendored at build time — no CDN fetch at runtime. Live gallery: **[tiennm99.github.io/bonsai/icons/](https://tiennm99.github.io/bonsai/icons/)**.
+
+To refresh or add icons, edit `scripts/sync-icons.sh` and `data/icons.yaml`, then re-run the script. See [CONTRIBUTING.md](CONTRIBUTING.md).
+
+## Development
+
+```bash
+git clone https://github.com/tiennm99/bonsai.git
+cd bonsai/exampleSite
+hugo server --themesDir ../.. --bind 0.0.0.0
+```
+
+Build for inspection:
+
+```bash
+cd exampleSite && hugo --themesDir ../.. --gc --minify
+```
+
+## Contributing
+
+PRs welcome. See [CONTRIBUTING.md](CONTRIBUTING.md) for dev setup, the icon-add workflow, and PR guidelines.
+
+## License
+
+Apache-2.0 © [tiennm99](https://github.com/tiennm99). See [LICENSE](LICENSE) and [NOTICE](NOTICE) for third-party attributions (Simple Icons CC0, Lucide ISC).
@@ -0,0 +1,5 @@
+++
+title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+date = {{ .Date }}
+draft = true
+++
@@ -0,0 +1,508 @@
+/* Bonsai — minimalist link-in-bio Hugo theme
+ * Aesthetic: Japanese zen — generous whitespace, calm palette, restrained type.
+ * Palettes: bonsai (default), sakura, sumi, koi. Selected via [data-bonsai-theme]. */
+
+:root {
+  --bonsai-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .04);
+  --bonsai-radius: 14px;
+  --bonsai-gap: clamp(.75rem, 1.6vw, 1rem);
+  --bonsai-pad: clamp(1.25rem, 4vw, 2rem);
+  --bonsai-max: 32rem;
+
+  --bonsai-font: ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", "Segoe UI", Roboto, sans-serif;
+  --bonsai-font-display: ui-serif, Georgia, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Times New Roman", serif;
+}
+
+/* ============================================================
+   Palettes
+   Each palette defines six color vars in light + dark variants.
+   Toggle order:
+     1. base block sets light values
+     2. @media (prefers-color-scheme:dark) overrides to dark
+     3. [data-theme="dark"] forces dark (manual toggle)
+     4. [data-theme="light"] forces light (manual toggle)
+   ============================================================ */
+
+/* --- Bonsai (default: washi + vermilion) --- */
+:root,
+[data-bonsai-theme="bonsai"] {
+  --bonsai-bg: #f4efe6;
+  --bonsai-surface: #ffffff;
+  --bonsai-text: #2b2b2b;
+  --bonsai-muted: #6b6b6b;
+  --bonsai-accent: #8b3a2b;
+  --bonsai-border: #d9d0bf;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not([data-bonsai-theme]),
+  [data-bonsai-theme="bonsai"]:not([data-theme="light"]) {
+    --bonsai-bg: #1a1817;
+    --bonsai-surface: #232020;
+    --bonsai-text: #ece6d9;
+    --bonsai-muted: #a09a8d;
+    --bonsai-accent: #d6856e;
+    --bonsai-border: #3a3633;
+    --bonsai-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
+  }
+}
+[data-theme="dark"]:not([data-bonsai-theme]),
+[data-bonsai-theme="bonsai"][data-theme="dark"] {
+  --bonsai-bg: #1a1817;
+  --bonsai-surface: #232020;
+  --bonsai-text: #ece6d9;
+  --bonsai-muted: #a09a8d;
+  --bonsai-accent: #d6856e;
+  --bonsai-border: #3a3633;
+  --bonsai-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
+}
+
+/* --- Sakura (cherry blossom) --- */
+[data-bonsai-theme="sakura"] {
+  --bonsai-bg: #fff5f5;
+  --bonsai-surface: #ffffff;
+  --bonsai-text: #3a2228;
+  --bonsai-muted: #876773;
+  --bonsai-accent: #c93f63; /* darkened from #d4456a — was 4.04:1 vs bg, now 4.49:1 (WCAG AA) */
+  --bonsai-border: #f0d4dc;
+}
+@media (prefers-color-scheme: dark) {
+  [data-bonsai-theme="sakura"]:not([data-theme="light"]) {
+    --bonsai-bg: #1f1418;
+    --bonsai-surface: #2a1d22;
+    --bonsai-text: #f7e3e9;
+    --bonsai-muted: #b89aa3;
+    --bonsai-accent: #ec7596;
+    --bonsai-border: #3d2932;
+    --bonsai-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
+  }
+}
+[data-bonsai-theme="sakura"][data-theme="dark"] {
+  --bonsai-bg: #1f1418;
+  --bonsai-surface: #2a1d22;
+  --bonsai-text: #f7e3e9;
+  --bonsai-muted: #b89aa3;
+  --bonsai-accent: #ec7596;
+  --bonsai-border: #3d2932;
+  --bonsai-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
+}
+
+/* --- Sumi (monochrome ink) --- */
+[data-bonsai-theme="sumi"] {
+  --bonsai-bg: #fafafa;
+  --bonsai-surface: #ffffff;
+  --bonsai-text: #111111;
+  --bonsai-muted: #666666;
+  --bonsai-accent: #1a1a1a;
+  --bonsai-border: #e0e0e0;
+}
+@media (prefers-color-scheme: dark) {
+  [data-bonsai-theme="sumi"]:not([data-theme="light"]) {
+    --bonsai-bg: #0d0d0d;
+    --bonsai-surface: #1a1a1a;
+    --bonsai-text: #f5f5f5;
+    --bonsai-muted: #a0a0a0;
+    --bonsai-accent: #dddddd;
+    --bonsai-border: #2a2a2a;
+    --bonsai-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
+  }
+}
+[data-bonsai-theme="sumi"][data-theme="dark"] {
+  --bonsai-bg: #0d0d0d;
+  --bonsai-surface: #1a1a1a;
+  --bonsai-text: #f5f5f5;
+  --bonsai-muted: #a0a0a0;
+  --bonsai-accent: #dddddd;
+  --bonsai-border: #2a2a2a;
+  --bonsai-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
+}
+
+/* --- Koi (orange + cream) --- */
+[data-bonsai-theme="koi"] {
+  --bonsai-bg: #fef6e4;
+  --bonsai-surface: #ffffff;
+  --bonsai-text: #3a2620;
+  --bonsai-muted: #7a5e48; /* darkened from #8a6f5c — was 4.33:1 vs bg, now 5.54:1 (WCAG AA) */
+  --bonsai-accent: #bd4c1c; /* darkened from #c8521e — was 4.17:1 vs bg, now 4.63:1 (WCAG AA) */
+  --bonsai-border: #f2dfb8;
+}
+@media (prefers-color-scheme: dark) {
+  [data-bonsai-theme="koi"]:not([data-theme="light"]) {
+    --bonsai-bg: #1c1410;
+    --bonsai-surface: #2a1f18;
+    --bonsai-text: #f7e2c4;
+    --bonsai-muted: #c9a988;
+    --bonsai-accent: #ff8b5c;
+    --bonsai-border: #3d2c20;
+    --bonsai-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
+  }
+}
+[data-bonsai-theme="koi"][data-theme="dark"] {
+  --bonsai-bg: #1c1410;
+  --bonsai-surface: #2a1f18;
+  --bonsai-text: #f7e2c4;
+  --bonsai-muted: #c9a988;
+  --bonsai-accent: #ff8b5c;
+  --bonsai-border: #3d2c20;
+  --bonsai-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
+}
+
+/* ============================================================
+   Layout & components
+   ============================================================ */
+
+* { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  min-height: 100dvh;
+  background: var(--bonsai-bg);
+  color: var(--bonsai-text);
+  font-family: var(--bonsai-font);
+  font-size: 16px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  display: flex;
+  flex-direction: column;
+}
+
+.bonsai {
+  flex: 1;
+  width: 100%;
+  max-width: var(--bonsai-max);
+  margin: 0 auto;
+  padding: clamp(2rem, 6vh, 4rem) var(--bonsai-pad);
+}
+
+.bio { text-align: center; }
+
+.bio__avatar {
+  width: 112px;
+  height: 112px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 1px solid var(--bonsai-border);
+  box-shadow: var(--bonsai-shadow);
+  margin-bottom: 1.25rem;
+}
+
+.bio__avatar--initials {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.bio__name {
+  font-family: var(--bonsai-font-display);
+  font-weight: 600;
+  font-size: clamp(1.5rem, 3.5vw, 1.875rem);
+  margin: 0 0 .25rem;
+  letter-spacing: -.01em;
+}
+
+.bio__tagline {
+  color: var(--bonsai-muted);
+  margin: 0 0 1rem;
+  font-size: .95rem;
+}
+
+.bio__text {
+  margin: 0 auto 1.75rem;
+  max-width: 28rem;
+  color: var(--bonsai-text);
+  font-size: .98rem;
+}
+
+.bio__links {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bonsai-gap);
+  margin-top: 1.5rem;
+}
+
+/* === layout variants ===
+ * All variant rules scope under .bio__links--{name} to avoid CSS specificity
+ * collisions with the default .link rules (see v0.2 journal for the lesson).
+ */
+.bio__links--grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+@media (max-width: 480px) {
+  .bio__links--grid { grid-template-columns: 1fr; }
+}
+
+.bio__links--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.bio__links--inline .link {
+  padding: .75rem;
+  gap: 0;
+}
+/* Visually hide the title in inline mode but keep it for screen readers. */
+.bio__links--inline .link__title {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.link {
+  position: relative; /* contain absolute-positioned visually-hidden title in inline mode */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: .625rem;
+  padding: .9rem 1.25rem;
+  background: var(--bonsai-surface);
+  color: var(--bonsai-text);
+  border: 1px solid var(--bonsai-border);
+  border-radius: var(--bonsai-radius);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: .95rem;
+  box-shadow: var(--bonsai-shadow);
+  transition: transform .15s ease, border-color .15s ease, background .15s ease;
+}
+
+.link:hover {
+  transform: translateY(-1px);
+  border-color: var(--bonsai-accent);
+  background: color-mix(in oklab, var(--bonsai-surface) 94%, var(--bonsai-accent));
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--bonsai-accent);
+  outline-offset: 2px;
+}
+
+.link:active { transform: translateY(0); }
+
+.link__icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--bonsai-accent);
+}
+
+.link__icon svg {
+  width: 20px;
+  height: 20px;
+  display: block;
+  fill: currentColor;
+}
+
+/* Lucide UI icons use stroke, not fill */
+.link__icon svg[stroke="currentColor"],
+.link__icon svg.lucide {
+  fill: none;
+}
+
+.link__title { line-height: 1; }
+
+.bonsai-footer {
+  text-align: center;
+  padding: 1.5rem var(--bonsai-pad) 2rem;
+  color: var(--bonsai-muted);
+  font-size: .8rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: .75rem;
+}
+
+.bonsai-footer p { margin: 0; }
+
+/* Theme toggle button — 44×44 hit target meets Apple HIG / WCAG 2.5.5 AAA. */
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  background: var(--bonsai-surface);
+  color: var(--bonsai-accent);
+  border: 1px solid var(--bonsai-border);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform .15s ease, border-color .15s ease;
+}
+
+.theme-toggle:hover {
+  transform: translateY(-1px);
+  border-color: var(--bonsai-accent);
+}
+
+.theme-toggle:focus-visible {
+  outline: 2px solid var(--bonsai-accent);
+  outline-offset: 2px;
+}
+
+.theme-toggle:active { transform: translateY(0); }
+
+/* Show moon in light, sun in dark.
+   The button shows the icon for the mode you'll switch TO.
+   Per-class rules avoid the specificity battle vs `.theme-toggle svg`. */
+.theme-toggle .theme-toggle__sun { display: none; }
+.theme-toggle .theme-toggle__moon { display: block; }
+
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme="light"]) .theme-toggle .theme-toggle__sun { display: block; }
+  html:not([data-theme="light"]) .theme-toggle .theme-toggle__moon { display: none; }
+}
+
+[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: block; }
+[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }
+[data-theme="light"] .theme-toggle .theme-toggle__sun { display: none; }
+[data-theme="light"] .theme-toggle .theme-toggle__moon { display: block; }
+
+/* Per-link enhancements (Phase 3 / v0.5) */
+.link__thumb {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  flex-shrink: 0;
+  object-fit: cover;
+}
+.link--featured {
+  padding: 1.1rem 1.4rem;
+  border-color: var(--bonsai-accent);
+  border-width: 1.5px;
+}
+.link__note {
+  display: block;
+  font-size: .75rem;
+  color: var(--bonsai-muted);
+  margin-top: .15rem;
+  line-height: 1.3;
+}
+
+/* Page-level actions: share button + QR + vCard download */
+.bio__share, .bio__vcard {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .5rem;
+  margin: 1.5rem auto 0;
+  padding: .65rem 1.1rem;
+  background: var(--bonsai-surface);
+  color: var(--bonsai-text);
+  border: 1px solid var(--bonsai-border);
+  border-radius: var(--bonsai-radius);
+  font: inherit;
+  font-size: .85rem;
+  cursor: pointer;
+  text-decoration: none;
+  transition: transform .15s ease, border-color .15s ease;
+}
+.bio__share { display: flex; }
+.bio__vcard { display: flex; }
+.bio__share:hover, .bio__vcard:hover {
+  transform: translateY(-1px);
+  border-color: var(--bonsai-accent);
+}
+.bio__share:focus-visible, .bio__vcard:focus-visible {
+  outline: 2px solid var(--bonsai-accent);
+  outline-offset: 2px;
+}
+.bio__share-icon { display: inline-flex; width: 16px; height: 16px; color: var(--bonsai-accent); }
+.bio__share-icon svg { width: 16px; height: 16px; }
+.bio__share-toast {
+  position: fixed;
+  left: 50%;
+  bottom: 1.25rem;
+  transform: translateX(-50%);
+  padding: .5rem 1rem;
+  background: var(--bonsai-text);
+  color: var(--bonsai-bg);
+  border-radius: var(--bonsai-radius);
+  font-size: .85rem;
+  box-shadow: var(--bonsai-shadow);
+  z-index: 200;
+}
+.bio__qr {
+  margin-top: 1.5rem;
+  text-align: center;
+}
+.bio__qr > summary {
+  cursor: pointer;
+  color: var(--bonsai-muted);
+  font-size: .85rem;
+  list-style: none;
+}
+.bio__qr > summary::-webkit-details-marker { display: none; }
+.bio__qr-img {
+  display: block;
+  margin: .75rem auto 0;
+  max-width: 200px;
+  height: auto;
+  border-radius: var(--bonsai-radius);
+  background: #fff;
+  padding: .5rem;
+}
+
+/* Multi-section bio: grouped link blocks with optional headings + descriptions. */
+.bio__section { margin-top: 1.75rem; }
+.bio__section:first-of-type { margin-top: 1.5rem; }
+.bio__section-title {
+  font-family: var(--bonsai-font-display);
+  font-size: 1.05rem;
+  font-weight: 600;
+  margin: 0 0 .35rem;
+  color: var(--bonsai-text);
+}
+.bio__section-desc {
+  font-size: .9rem;
+  color: var(--bonsai-muted);
+  margin: 0 0 .75rem;
+}
+.bio__section .bio__links { margin-top: .5rem; }
+
+/* Inline-layout tap-target enforcement (Phase 6 a11y): WCAG 2.5.5 / Lighthouse 48×48 */
+.bio__links--inline .link {
+  min-width: 48px;
+  min-height: 48px;
+  padding: .75rem;
+  justify-content: center;
+}
+.bio__links--inline { gap: clamp(.5rem, 1.5vw, 1rem); }
+
+/* Skip-link: keyboard-only affordance. Off-screen until focused. */
+.skip-link {
+  position: absolute;
+  top: -3rem;
+  left: .5rem;
+  padding: .5rem 1rem;
+  background: var(--bonsai-accent);
+  color: var(--bonsai-bg);
+  border-radius: var(--bonsai-radius);
+  text-decoration: none;
+  z-index: 100;
+  transition: top .15s ease;
+}
+.skip-link:focus {
+  top: .5rem;
+  outline: 2px solid var(--bonsai-text);
+  outline-offset: 2px;
+}
+
+/* Note: gallery selectors (.themes-gallery, .variants-gallery) live in gallery.css
+   and load only on /themes/ and /variants/ demo pages via the head_extra block. */
+
+@media (prefers-reduced-motion: reduce) {
+  .link, .link:hover, .link:active,
+  .theme-toggle, .theme-toggle:hover, .theme-toggle:active,
+  .skip-link,
+  .bio__share, .bio__share:hover, .bio__vcard, .bio__vcard:hover {
+    transition: none;
+    transform: none;
+  }
+}
@@ -0,0 +1,97 @@
+/* Bonsai gallery styles — loaded only on /themes/ and /variants/ demo pages.
+ * Kept out of bonsai.css so end-user sites don't ship demo-only selectors. */
+
+/* ============================================================
+   Themes gallery (exampleSite/themes/) — 4 mini bio cards
+   ============================================================ */
+
+.themes-gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1.5rem;
+  max-width: 60rem;
+  margin: 2rem auto;
+}
+
+.themes-gallery__card {
+  background: var(--bonsai-bg);
+  border: 1px solid var(--bonsai-border);
+  border-radius: var(--bonsai-radius);
+  padding: 1.5rem;
+  text-align: center;
+}
+
+.themes-gallery__name {
+  font-family: var(--bonsai-font-display);
+  font-size: 1.1rem;
+  margin: 0 0 .25rem;
+  color: var(--bonsai-text);
+}
+
+.themes-gallery__hex {
+  color: var(--bonsai-muted);
+  font-family: ui-monospace, monospace;
+  font-size: .75rem;
+  margin: 0 0 1rem;
+}
+
+.themes-gallery__chip {
+  display: inline-block;
+  padding: .4rem .75rem;
+  background: var(--bonsai-surface);
+  color: var(--bonsai-text);
+  border: 1px solid var(--bonsai-border);
+  border-radius: var(--bonsai-radius);
+  font-size: .85rem;
+}
+
+.themes-gallery__chip--accent {
+  background: var(--bonsai-accent);
+  /* Explicit #fff: each palette's `--bonsai-bg` varies enough vs accent that
+     axe-core occasionally fails to resolve the var ladder and reports
+     contrastRatio=null. Using a literal eliminates that ambiguity and lands
+     at ≥ 4.5:1 against every shipped accent (sakura 4.80:1, koi 4.81:1,
+     bonsai 5.91:1, sumi 17.2:1). */
+  color: #fff;
+  border-color: var(--bonsai-accent);
+}
+
+/* ============================================================
+   Variants gallery (exampleSite/variants/) — 3 sample bio cards
+   ============================================================ */
+
+.variants-gallery {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+  max-width: 36rem;
+  margin: 2rem auto;
+}
+
+.variants-gallery__card {
+  background: var(--bonsai-surface);
+  border: 1px solid var(--bonsai-border);
+  border-radius: var(--bonsai-radius);
+  padding: 1.5rem;
+}
+
+.variants-gallery__name {
+  font-family: var(--bonsai-font-display);
+  font-size: 1.1rem;
+  margin: 0 0 .25rem;
+  color: var(--bonsai-text);
+}
+
+.variants-gallery__desc {
+  color: var(--bonsai-muted);
+  font-size: .85rem;
+  margin: 0 0 .5rem;
+}
+
+.variants-gallery__code {
+  display: inline-block;
+  margin-bottom: 1rem;
+  font-family: ui-monospace, monospace;
+  font-size: .75rem;
+  color: var(--bonsai-muted);
+}
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Bandcamp</title><path d="M0 18.75l7.437-13.5H24l-7.438 13.5H0z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Bluesky</title><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"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Buy Me A Coffee</title><path d="M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 013.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 01-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 01-4.743.295 37.059 37.059 0 01-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0011.343.376.483.483 0 01.535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 01.39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.159 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 01-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a5.884 5.884 0 01-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38 0 0 1.243.065 1.658.065.447 0 1.786-.065 1.786-.065.783 0 1.434-.6 1.499-1.38l.94-9.95a3.996 3.996 0 00-1.322-.238c-.826 0-1.491.284-2.26.613z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>dev.to</title><path d="M7.42 10.05c-.18-.16-.46-.23-.84-.23H6l.02 2.44.04 2.45.56-.02c.41 0 .63-.07.83-.26.24-.24.26-.36.26-2.2 0-1.91-.02-1.96-.29-2.18zM0 4.94v14.12h24V4.94H0zM8.56 15.3c-.44.58-1.06.77-2.53.77H4.71V8.53h1.4c1.67 0 2.16.18 2.6.9.27.43.29.6.32 2.57.05 2.23-.02 2.73-.47 3.3zm5.09-5.47h-2.47v1.77h1.52v1.28l-.72.04-.75.03v1.77l1.22.03 1.2.04v1.28h-1.6c-1.53 0-1.6-.01-1.87-.3l-.3-.28v-3.16c0-3.02.01-3.18.25-3.48.23-.31.25-.31 1.88-.31h1.64v1.3zm4.68 5.45c-.17.43-.64.79-1 .79-.18 0-.45-.15-.67-.39-.32-.32-.45-.63-.82-2.08l-.9-3.39-.45-1.67h.76c.4 0 .75.02.75.05 0 .06 1.16 4.54 1.26 4.83.04.15.32-.7.73-2.3l.66-2.52.74-.04c.4-.02.73 0 .73.04 0 .14-1.67 6.38-1.8 6.68z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><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"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4 1.73 1.358 3.92 2.166 6.29 2.166 1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702-1.81-1.61-4.19-2.586-6.795-2.586-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><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 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Figma</title><path d="M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitLab</title><path d="m23.6004 9.5927-.0337-.0862L20.3.9814a.851.851 0 0 0-.3362-.405.8748.8748 0 0 0-.9997.0539.8748.8748 0 0 0-.29.4399l-2.2055 6.748H7.5375l-2.2057-6.748a.8573.8573 0 0 0-.29-.4412.8748.8748 0 0 0-.9997-.0537.8585.8585 0 0 0-.3362.4049L.4332 9.5015l-.0325.0862a6.0657 6.0657 0 0 0 2.0119 7.0105l.0113.0087.03.0213 4.976 3.7264 2.462 1.8633 1.4995 1.1321a1.0085 1.0085 0 0 0 1.2197 0l1.4995-1.1321 2.4619-1.8633 5.006-3.7489.0125-.01a6.0682 6.0682 0 0 0 2.0094-7.003z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Hashnode</title><path d="M22.351 8.019l-6.37-6.37a5.63 5.63 0 0 0-7.962 0l-6.37 6.37a5.63 5.63 0 0 0 0 7.962l6.37 6.37a5.63 5.63 0 0 0 7.962 0l6.37-6.37a5.63 5.63 0 0 0 0-7.962zM12 15.953a3.953 3.953 0 1 1 0-7.906 3.953 3.953 0 0 1 0 7.906z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><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-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.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.1197 16.9244.0645 15.6471.0093 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-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Ko-fi</title><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><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>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mastodon</title><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.67 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>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><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.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Medium</title><path d="M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Patreon</title><path d="M22.957 7.21c-.004-3.064-2.391-5.576-5.191-6.482-3.478-1.125-8.064-.962-11.384.604C2.357 3.231 1.093 7.391 1.046 11.54c-.039 3.411.302 12.396 5.369 12.46 3.765.047 4.326-4.804 6.068-7.141 1.24-1.662 2.836-2.132 4.801-2.618 3.376-.836 5.678-3.501 5.673-7.031Z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PayPal</title><path d="M7.016 19.198h-4.2a.562.562 0 0 1-.555-.65L5.093.584A.692.692 0 0 1 5.776 0h7.222c3.417 0 5.904 2.488 5.846 5.5-.006.25-.027.5-.066.747A6.794 6.794 0 0 1 12.071 12H8.743a.69.69 0 0 0-.682.583l-.325 2.056-.013.083-.692 4.39-.015.087zM19.79 6.142c-.01.087-.01.175-.023.261a7.76 7.76 0 0 1-7.695 6.598H9.007l-.283 1.795-.013.083-.692 4.39-.134.843-.014.088H6.86l-.497 3.15a.562.562 0 0 0 .555.65h3.612c.34 0 .63-.249.683-.585l.952-6.031a.692.692 0 0 1 .683-.584h2.126a6.793 6.793 0 0 0 6.707-5.752c.306-1.95-.466-3.744-1.89-4.906z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Reddit</title><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 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Signal</title><path d="m9.12.35.27 1.09a10.845 10.845 0 0 0-3.015 1.248l-.578-.964A11.955 11.955 0 0 1 9.12.35zm5.76 0-.27 1.09a10.845 10.845 0 0 1 3.015 1.248l.581-.964A11.955 11.955 0 0 0 14.88.35zM1.725 5.797A11.955 11.955 0 0 0 .351 9.119l1.09.27A10.845 10.845 0 0 1 2.69 6.374zm-.6 6.202a10.856 10.856 0 0 1 .122-1.63l-1.112-.168a12.043 12.043 0 0 0 0 3.596l1.112-.169A10.856 10.856 0 0 1 1.125 12zm17.078 10.275-.578-.964a10.845 10.845 0 0 1-3.011 1.247l.27 1.091a11.955 11.955 0 0 0 3.319-1.374zM22.875 12a10.856 10.856 0 0 1-.122 1.63l1.112.168a12.043 12.043 0 0 0 0-3.596l-1.112.169a10.856 10.856 0 0 1 .122 1.63zm.774 2.88-1.09-.27a10.845 10.845 0 0 1-1.248 3.015l.964.581a11.955 11.955 0 0 0 1.374-3.326zm-10.02 7.875a10.952 10.952 0 0 1-3.258 0l-.17 1.112a12.043 12.043 0 0 0 3.597 0zm7.125-4.303a10.914 10.914 0 0 1-2.304 2.302l.668.906a12.019 12.019 0 0 0 2.542-2.535zM18.45 3.245a10.914 10.914 0 0 1 2.304 2.304l.906-.675a12.019 12.019 0 0 0-2.535-2.535zM3.246 5.549A10.914 10.914 0 0 1 5.55 3.245l-.675-.906A12.019 12.019 0 0 0 2.34 4.874zm19.029.248-.964.577a10.845 10.845 0 0 1 1.247 3.011l1.091-.27a11.955 11.955 0 0 0-1.374-3.318zM10.371 1.246a10.952 10.952 0 0 1 3.258 0L13.8.134a12.043 12.043 0 0 0-3.597 0zM3.823 21.957 1.5 22.5l.542-2.323-1.095-.257-.542 2.323a1.125 1.125 0 0 0 1.352 1.352l2.321-.532zm-2.642-3.041 1.095.255.375-1.61a10.828 10.828 0 0 1-1.21-2.952l-1.09.27a11.91 11.91 0 0 0 1.106 2.852zm5.25 2.437-1.61.375.255 1.095 1.185-.275a11.91 11.91 0 0 0 2.851 1.106l.27-1.091a10.828 10.828 0 0 1-2.943-1.217zM12 2.25a9.75 9.75 0 0 0-8.25 14.938l-.938 4 4-.938A9.75 9.75 0 1 0 12 2.25z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>SoundCloud</title><path d="M23.999 14.165c-.052 1.796-1.612 3.169-3.4 3.169h-8.18a.68.68 0 0 1-.675-.683V7.862a.747.747 0 0 1 .452-.724s.75-.513 2.333-.513a5.364 5.364 0 0 1 2.763.755 5.433 5.433 0 0 1 2.57 3.54c.282-.08.574-.121.868-.12.884 0 1.73.358 2.347.992s.948 1.49.922 2.373ZM10.721 8.421c.247 2.98.427 5.697 0 8.672a.264.264 0 0 1-.53 0c-.395-2.946-.22-5.718 0-8.672a.264.264 0 0 1 .53 0ZM9.072 9.448c.285 2.659.37 4.986-.006 7.655a.277.277 0 0 1-.55 0c-.331-2.63-.256-5.02 0-7.655a.277.277 0 0 1 .556 0Zm-1.663-.257c.27 2.726.39 5.171 0 7.904a.266.266 0 0 1-.532 0c-.38-2.69-.257-5.21 0-7.904a.266.266 0 0 1 .532 0Zm-1.647.77a26.108 26.108 0 0 1-.008 7.147.272.272 0 0 1-.542 0 27.955 27.955 0 0 1 0-7.147.275.275 0 0 1 .55 0Zm-1.67 1.769c.421 1.865.228 3.5-.029 5.388a.257.257 0 0 1-.514 0c-.21-1.858-.398-3.549 0-5.389a.272.272 0 0 1 .543 0Zm-1.655-.273c.388 1.897.26 3.508-.01 5.412-.026.28-.514.283-.54 0-.244-1.878-.347-3.54-.01-5.412a.283.283 0 0 1 .56 0Zm-1.668.911c.4 1.268.257 2.292-.026 3.572a.257.257 0 0 1-.514 0c-.241-1.262-.354-2.312-.023-3.572a.283.283 0 0 1 .563 0Z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Spotify</title><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"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Stack Overflow</title><path d="M15.725 0l-1.72 1.277 6.39 8.588 1.716-1.277L15.725 0zm-3.94 3.418l-1.369 1.644 8.225 6.85 1.369-1.644-8.225-6.85zm-3.15 4.465l-.905 1.94 9.702 4.517.904-1.94-9.701-4.517zm-1.85 4.86l-.44 2.093 10.473 2.201.44-2.092-10.473-2.203zM1.89 15.47V24h19.19v-8.53h-2.133v6.397H4.021v-6.396H1.89zm4.265 2.133v2.13h10.66v-2.13H6.154Z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Substack</title><path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Telegram</title><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-.48.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"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Threads</title><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.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 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.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>TikTok</title><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitch</title><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"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>WhatsApp</title><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>X</title><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"/></svg>
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>YouTube</title><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>
@@ -0,0 +1,15 @@
+<svg
+ 
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 7v14" />
+  <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
+</svg>
@@ -0,0 +1,17 @@
+<svg
+ 
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M8 2v4" />
+  <path d="M16 2v4" />
+  <rect width="18" height="18" x="3" y="4" rx="2" />
+  <path d="M3 10h18" />
+</svg>
@@ -0,0 +1,16 @@
+<svg
+ 
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+  <polyline points="7 10 12 15 17 10" />
+  <line x1="12" x2="12" y1="15" y2="3" />
+</svg>
@@ -0,0 +1,16 @@
+<svg
+ 
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M15 3h6v6" />
+  <path d="M10 14 21 3" />
+  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+</svg>
@@ -0,0 +1,18 @@
+<svg
+ 
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+  <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+  <path d="M10 9H8" />
+  <path d="M16 13H8" />
+  <path d="M16 17H8" />
+</svg>
@@ -0,0 +1,16 @@
+<svg
+ 
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="10" />
+  <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+  <path d="M2 12h20" />
+</svg>
@@ -0,0 +1,14 @@
+<svg
+ 
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
+</svg>
@@ -0,0 +1,15 @@
+<svg
+ 
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+</svg>
@@ -0,0 +1,15 @@
+<svg
+ 
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect width="20" height="16" x="2" y="4" rx="2" />
+  <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+</svg>
@@ -0,0 +1,15 @@
+<svg
+ 
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" />
+  <circle cx="12" cy="10" r="3" />
+</svg>
@@ -0,0 +1,14 @@
+<svg
+ 
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
+</svg>
@@ -0,0 +1,16 @@
+<svg
+ 
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M4 11a9 9 0 0 1 9 9" />
+  <path d="M4 4a16 16 0 0 1 16 16" />
+  <circle cx="5" cy="19" r="1" />
+</svg>
@@ -0,0 +1,18 @@
+<svg
+ 
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <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" x2="15.42" y1="13.51" y2="17.49" />
+  <line x1="15.41" x2="8.59" y1="6.51" y2="10.49" />
+</svg>
@@ -0,0 +1,39 @@
+// Bonsai page-share button.
+// Tries navigator.share first; falls back to clipboard.writeText with a toast.
+// Loaded only when params.share = true.
+(function () {
+  var btn = document.querySelector('[data-bonsai-share]');
+  if (!btn) return;
+  var toast = document.querySelector('.bio__share-toast');
+  var toastTimer;
+
+  function showToast(msg) {
+    if (!toast) return;
+    toast.textContent = msg;
+    toast.hidden = false;
+    clearTimeout(toastTimer);
+    toastTimer = setTimeout(function () { toast.hidden = true; }, 2000);
+  }
+
+  btn.addEventListener('click', async function () {
+    var url = btn.getAttribute('data-share-url');
+    var title = btn.getAttribute('data-share-title');
+    var copiedMsg = btn.getAttribute('data-toast-copied') || 'Link copied';
+    var failedMsg = btn.getAttribute('data-toast-failed') || 'Could not share';
+    try {
+      if (navigator.share) {
+        await navigator.share({ title: title, url: url });
+        return;
+      }
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(url);
+        showToast(copiedMsg);
+        return;
+      }
+      window.prompt('Copy link:', url);
+    } catch (e) {
+      if (e && e.name === 'AbortError') return;
+      showToast(failedMsg);
+    }
+  });
+})();
@@ -0,0 +1,30 @@
+// Loaded only when params.themeToggle = true.
+// Persists user preference and overrides system color-scheme.
+// Note: a sibling inline script in <head> applies the saved value pre-paint to avoid FOUC.
+// We re-read here as a safety net (and the inline script may have failed under strict CSP).
+(function () {
+  const KEY = 'bonsai-theme';
+  const root = document.documentElement;
+  if (root.dataset.theme !== 'light' && root.dataset.theme !== 'dark') {
+    const saved = localStorage.getItem(KEY);
+    if (saved === 'light' || saved === 'dark') root.dataset.theme = saved;
+  }
+
+  const btn = document.querySelector('[data-bonsai-theme-toggle]');
+  if (!btn) return;
+
+  function syncPressed() {
+    const isDark = root.dataset.theme === 'dark'
+      || (root.dataset.theme === 'auto' && matchMedia('(prefers-color-scheme: dark)').matches);
+    btn.setAttribute('aria-pressed', String(isDark));
+  }
+
+  syncPressed();
+
+  btn.addEventListener('click', () => {
+    const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
+    root.dataset.theme = next;
+    localStorage.setItem(KEY, next);
+    syncPressed();
+  });
+})();
@@ -0,0 +1,54 @@
+# Icon manifest — maps public icon name → {family, slug}
+# family: brand  → assets/icons/brand/<slug>.svg (Simple Icons v13, CC0 1.0)
+# family: ui     → assets/icons/ui/<slug>.svg    (Lucide Static v0.460, ISC)
+#
+# To add an icon: run scripts/sync-icons.sh then add an entry here.
+
+# --- Brand / Social ---
+github:       { family: brand, slug: github }
+gitlab:       { family: brand, slug: gitlab }
+mastodon:     { family: brand, slug: mastodon }
+bsky:         { family: brand, slug: bluesky }
+x:            { family: brand, slug: x }
+threads:      { family: brand, slug: threads }
+linkedin:     { family: brand, slug: linkedin }
+instagram:    { family: brand, slug: instagram }
+facebook:     { family: brand, slug: facebook }
+tiktok:       { family: brand, slug: tiktok }
+youtube:      { family: brand, slug: youtube }
+twitch:       { family: brand, slug: twitch }
+discord:      { family: brand, slug: discord }
+telegram:     { family: brand, slug: telegram }
+signal:       { family: brand, slug: signal }
+whatsapp:     { family: brand, slug: whatsapp }
+reddit:       { family: brand, slug: reddit }
+medium:       { family: brand, slug: medium }
+devto:        { family: brand, slug: devdotto }
+substack:     { family: brand, slug: substack }
+hashnode:     { family: brand, slug: hashnode }
+kofi:         { family: brand, slug: kofi }
+patreon:      { family: brand, slug: patreon }
+buymeacoffee: { family: brand, slug: buymeacoffee }
+paypal:       { family: brand, slug: paypal }
+bandcamp:     { family: brand, slug: bandcamp }
+soundcloud:   { family: brand, slug: soundcloud }
+spotify:      { family: brand, slug: spotify }
+figma:        { family: brand, slug: figma }
+dribbble:     { family: brand, slug: dribbble }
+stackoverflow: { family: brand, slug: stackoverflow }
+matrix:       { family: brand, slug: matrix }
+
+# --- UI / Utility ---
+mail:         { family: ui, slug: mail }
+globe:        { family: ui, slug: globe }
+link:         { family: ui, slug: link }
+rss:          { family: ui, slug: rss }
+calendar:     { family: ui, slug: calendar }
+phone:        { family: ui, slug: phone }
+mappin:       { family: ui, slug: map-pin }
+filetext:     { family: ui, slug: file-text }
+extlink:      { family: ui, slug: external-link }
+share:        { family: ui, slug: share-2 }
+bookopen:     { family: ui, slug: book-open }
+download:     { family: ui, slug: download }
+heart:        { family: ui, slug: heart }
@@ -0,0 +1,66 @@
+# Code standards
+
+How code in this theme is written and why. The goal is predictability — both for humans reading the diff and for LLM-driven tooling navigating the repo.
+
+## File naming
+
+- **Kebab-case** for all filenames: `link-button.html`, `theme-toggle.js`, `schema-website.html`.
+- Long descriptive names beat short cryptic ones — `analytics-loader.html` is better than `al.html`.
+- Hugo partials living under `layouts/partials/` use the `.html` extension even when they emit JSON-LD or `<script>` blocks — Hugo doesn't care about extension, but consistency helps grep.
+
+## Partial composition
+
+Each partial reads its input via exactly one of:
+
+1. **`site.Params` directly** — for page-wide singletons (`head.html`, `bio-card.html`, `schema-person.html`).
+2. **A `dict` argument** — for reusable rendering blocks (`link-group.html`, `link-button.html`).
+
+Never both. If a partial needs context, pass it explicitly.
+
+## CSS conventions
+
+- **BEM-ish naming**: `.block`, `.block__elem`, `.block--modifier`. Examples: `.bio`, `.bio__avatar`, `.bio__avatar--initials`, `.link`, `.link__icon`, `.link--featured`.
+- **CSS custom properties** for every user-tunable value: colors per palette, layout sizes, fonts. Live in `:root` (layout) or `[data-bonsai-theme="…"]` blocks (color).
+- **No `!important`** except the `noscript` rule hiding `.theme-toggle` when JS is disabled.
+- **No deeply nested selectors** — keep specificity at ≤ (0,2,0). The single attribute selector `svg[stroke="currentColor"]` is the only exception.
+- **No web fonts** — system font stacks only (`ui-sans-serif`, `system-ui`, `ui-serif`, `Georgia`).
+- **Honor `prefers-reduced-motion`** — every transition lives behind a media query that disables it.
+
+## Template patterns
+
+- **Variable-first**: read params/inputs into named locals at the top of the partial. Branches use the locals.
+- **`with` over nil-checks** where idiomatic: `{{ with $tagline }}…{{ end }}` is preferred over `{{ if $tagline }}…{{ end }}`.
+- **`else if`, not `else with`** — `else with` had stricter parser rules in some Hugo versions; `else if` is universal.
+- **`safeHTML` / `safeJS` / `safeCSS`** only when the value comes from a vetted source (an i18n bundle string or a Hugo `jsonify` payload). Never for user-controlled content rendered raw.
+- **Warn loudly** for misconfigurations — `warnf` produces a build-time warning without failing the build.
+
+## i18n keys
+
+- Snake_case: `nav_links_label`, `skip_to_content`, `share_copied`.
+- Every user-facing string the theme renders goes through `{{ i18n "key" }}`. Add a fallback default with `| default "…"` so missing keys don't leak raw identifiers into the DOM.
+- Both `en.toml` and `vi.toml` must be updated together for any new key.
+
+## Asset handling
+
+- **All processable assets live under `assets/`** (`assets/css/`, `assets/js/`, `assets/icons/`, optional `assets/avatars/`, `assets/og/`, `assets/fonts/`).
+- **`static/`** is for files Hugo should copy through verbatim — `_headers`, `vercel.json`, demo media that won't be processed.
+- **Fingerprint + minify + SRI** every CSS and JS file shipped to production: `resources.Get | resources.Minify | resources.Fingerprint "sha384"` → emit with `integrity=` + `crossorigin="anonymous"`.
+
+## Opt-in posture
+
+Every new feature is **off by default**. A v0.4 site upgraded to v0.5 must build with byte-identical output unless the user explicitly opts in. This rule has zero exceptions.
+
+When unsure: ship with a `param.foo = false` default and document the opt-in in README.
+
+## Build invariants
+
+- `hugo --gc --minify --themesDir ../..` from `exampleSite/` must produce a clean build with no `ERROR` lines.
+- Lighthouse CI must pass thresholds ≥ 0.90 across Performance, Accessibility, Best-Practices, SEO.
+- No new `console.error` / `console.warn` from theme JS at runtime.
+- CSS production size budget: ≤ 5.5 KB gzipped (stretch ≤ 5 KB).
+
+## Commit messages
+
+Conventional commits: `feat:`, `fix:`, `docs:`, `refactor:`, `chore:`, `test:`, `style:`. Scope is optional but helpful: `feat(theme): add multi-section bio`.
+
+No AI references in commit messages. Keep them describing the *change*, not the *process*.
@@ -0,0 +1,95 @@
+# Deployment guide
+
+Bonsai is a Hugo theme — the built `public/` directory is plain static files. You can host it anywhere. This guide covers four common targets and the security/cache headers that move Lighthouse Best-Practices and Performance scores into the ≥90 range.
+
+## What Bonsai ships
+
+Two example header files live under `exampleSite/`:
+
+- [`exampleSite/static/_headers`](../exampleSite/static/_headers) — Netlify / Cloudflare Pages format. Copy to your site root.
+- [`exampleSite/vercel.json`](../exampleSite/vercel.json) — Vercel format. Copy to your repo root.
+
+Both apply identical policies; pick the one matching your host.
+
+## Why these headers
+
+| Header | Lighthouse audit | What it does |
+|--------|-----------------|--------------|
+| `X-Content-Type-Options: nosniff` | Best-Practices | Stops browsers MIME-sniffing responses. |
+| `X-Frame-Options: SAMEORIGIN` | Best-Practices | Prevents clickjacking via iframe embedding. |
+| `Referrer-Policy: strict-origin-when-cross-origin` | Best-Practices | Limits referer leakage on cross-origin requests. |
+| `Permissions-Policy: camera=(), microphone=(), geolocation=()` | Best-Practices | Disables unused powerful APIs. |
+| `Content-Security-Policy: …` | Best-Practices + XSS resilience | Restricts script/style/image sources. |
+| `Cache-Control: public, max-age=31536000, immutable` (on `/css/*`, `/js/*`, `/icons/*`, `/images/*`) | Performance (repeat visits) | 1-year cache on fingerprinted assets. |
+| `Cache-Control: public, max-age=3600, must-revalidate` (on `/`, `/index.html`) | Performance | 1-hour cache on HTML; lets you push content updates fast. |
+
+## CSP and Bonsai's defaults
+
+The shipped CSP is permissive enough to support every opt-in Bonsai feature:
+
+- `script-src 'self' 'unsafe-inline' https://www.googletagmanager.com` — `'unsafe-inline'` is required by the theme-toggle FOUC script and the GA4 init snippet. `googletagmanager.com` lets the GA4 loader fetch `gtag.js`.
+- `style-src 'self' 'unsafe-inline'` — required by inline `style=` attrs on the SVG initials avatar.
+- `img-src 'self' data: https:` — covers QR-code data URLs and external image avatars.
+- `connect-src 'self' https://www.google-analytics.com` — allows GA4 to POST events.
+
+If you don't use the theme toggle and don't use GA4, you can tighten CSP to `script-src 'self'` and `connect-src 'self'`. Strict-CSP with nonces is out of scope for v0.5.
+
+## Hosts
+
+### Netlify
+
+1. Copy `exampleSite/static/_headers` into your site's `static/` directory. Hugo will copy it to `public/_headers`, which Netlify reads on deploy.
+2. Build command: `hugo --gc --minify`.
+3. Publish directory: `public`.
+4. Brotli + gzip applied automatically.
+
+### Cloudflare Pages
+
+Same `_headers` format as Netlify. Build settings same. Brotli applied automatically.
+
+### Vercel
+
+1. Copy `exampleSite/vercel.json` to your repo root.
+2. Vercel auto-detects Hugo from `theme.toml` / `config.toml`. Build command: `hugo --gc --minify`. Output: `public`.
+3. Brotli applied automatically.
+
+### GitHub Pages
+
+GitHub Pages does **not** support custom response headers. Two options:
+
+- **Front with Cloudflare:** Point your domain to Cloudflare DNS, then origin to `username.github.io`. Apply security headers via a Cloudflare Worker — example below.
+- **Switch to Cloudflare Pages or Netlify:** Free tier, custom domain, full header control. Easiest path.
+
+Minimal Cloudflare Worker overlay:
+
+```js
+export default {
+  async fetch(request, env) {
+    const response = await fetch(request);
+    const headers = new Headers(response.headers);
+    headers.set('X-Content-Type-Options', 'nosniff');
+    headers.set('X-Frame-Options', 'SAMEORIGIN');
+    headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
+    headers.set('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');
+    headers.set('Content-Security-Policy',
+      "default-src 'self'; img-src 'self' data: https:; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; frame-ancestors 'self'");
+    return new Response(response.body, { status: response.status, headers });
+  }
+};
+```
+
+## Analytics & consent
+
+Bonsai's optional GA4 integration sets cookies. In jurisdictions with strict privacy law you must obtain user consent **before** loading `gtag.js`:
+
+- **GDPR (EU):** Explicit consent required for non-essential cookies.
+- **UK PECR:** Same.
+- **California CPRA:** Disclosure + opt-out required.
+
+Bonsai does **not** ship a consent banner. Pair with a consent management platform (Klaro!, Cookiebot, OneTrust) or skip GA4 entirely.
+
+If you don't enable `[params.analytics]`, zero analytics scripts ship — no consent banner needed.
+
+## HTTPS
+
+All recommended hosts (Netlify, Vercel, Cloudflare Pages, GitHub Pages) enforce HTTPS by default. Ensure your `baseURL` in `hugo.toml` starts with `https://`.
@@ -0,0 +1,59 @@
+# Bonsai v0.1: Icon Library Split Forced Mid-Course Correction
+
+**Date**: 2026-05-03 14:30  
+**Severity**: Medium  
+**Component**: Icon system, asset paths, demo deployment  
+**Status**: Resolved  
+
+## What Happened
+
+Shipped Bonsai v0.1.0 to Hugo themes catalog in one day: icon system overhaul (Lucide + Simple Icons vendoring), CI/CD pipeline, GitHub Pages demo, docs, submission assets, and PR #708 to gohugoio. All 6 phases executed end-to-end with 11 commits. Live at https://tiennm99.github.io/bonsai/; catalog PR awaiting review.
+
+## The Brutal Truth
+
+Shipping a theme on spec in 15 hours felt clean until we deployed. The first three surprises weren't fatal but exposed how little we knew about Hugo's URL handling under GitHub Pages subpaths and how Chromium renders fonts in CI. Each one cost a fix commit. The Japanese avatar glyph as tofu in a headless browser was funny; the SVGs rendering at 0×0 was not.
+
+## Technical Details
+
+1. **Icon library split enforcement**: Lucide intentionally omits brand/social icons (design principle). Simple Icons provides them but ships SVGs with only `viewBox`, no intrinsic dimensions. First screenshot: brand icons invisible. Fix: `.link__icon svg { width:20px; height:20px }` in `assets/css/style.css`.
+
+2. **Hugo URL function behavior under subpaths**: `relURL` and `absURL` pass through leading-slash inputs unchanged, which bypasses the baseURL subpath. Asset paths broke on `tiennm99.github.io/bonsai/static/*`. Fix: strip leading slash before `relURL`: `strings.TrimPrefix "/" $path | relURL` in `partials/icon.html` and layout.
+
+3. **Chromium headless rendering**: No Japanese fonts in Docker env → 盆 monogram rendered as tofu boxes. Switched to Latin "T" in avatar. Future: any glyph-specific UX needs SVG paths or pre-rendered images.
+
+4. **Playwright Docker deps**: Headless Chromium needs system libs absent from base image: `libnss3 libnspr4 libatk1.0-0t64 libatspi2.0-0t64 libxcomposite1 libxdamage1 libcups2t64`. Documented in `scripts/capture-screenshots.sh`.
+
+## What We Tried
+
+- Initial icon partial used inline SVGs only (8 icons) — ran out of coverage, switched to two-source vendoring.
+- Attempted to use Lucide as single source — failed (no brand icons by design).
+- First deploy: brand icons invisible in screenshots — diagnostic: SVGs had viewBox only, zero dimensions in flex layout.
+- Japanese avatar: rendered in local dev, broke in CI — switching glyph is safer than shipping fonts.
+
+## Root Cause Analysis
+
+**Icon library research was shallow.** The plan correctly identified the split strategy, but we didn't validate that Simple Icons SVGs lack intrinsic dimensions until deploy. A quick inspection of one SVG from each library before implementation would have caught this.
+
+**URL function assumptions didn't account for subpath deploys.** Standard Hugo docs assume domain root. GitHub Pages subpaths require different handling. Should've tested asset paths locally with `baseURL: /bonsai/` before CI.
+
+**No validation that Chromium env matched design expectations.** The avatar glyph choice was visual-first; zero verification that it would render in the CI environment.
+
+## Lessons Learned
+
+1. **Inspect library assets, don't trust API docs.** Download one SVG from each icon library, check for width/height attributes, test in a flex container.
+
+2. **Test baseURL subpaths locally.** Hugo's GitHub Pages subpath handling is a gotcha. Always `hugo server --baseURL http://localhost:1313/bonsai/` before deploy.
+
+3. **Headless rendering != local rendering.** Fonts, system libs, and environment assumptions bite hard. Build and screenshot in CI early, not on final push.
+
+4. **Document dependency chains in scripts.** The Playwright setup needed specific system packages. Future: add precheck or include install hints in README.
+
+## Next Steps
+
+- Monitor PR #708 review feedback from Hugo catalog maintainers.
+- If layout changes are requested, we have the icon system and CI infrastructure in place to iterate.
+- For v1.0: consider layout variants (cards/grid) — the data-driven icon partial scales well.
+- Keep screenshot capture script maintenance low: Playwright + Chromium is reliable once deps are documented.
+
+**Owner**: @tiennm99  
+**Timeline**: v0.2 planning after catalog acceptance feedback
@@ -0,0 +1,51 @@
+# Bonsai v0.2: Same-Day Polish Release Caught CSS Specificity and Hugo's JSON Escape Trap
+
+**Date**: 2026-05-03 20:15  
+**Severity**: Medium  
+**Component**: Theme toggle UI, schema.org markup, CSS cascade, SVG assets  
+**Status**: Resolved  
+
+## What Happened
+
+Shipped v0.2.0 same day as v0.1.0 (7 hours apart): 4 color theme presets (sakura/sumi/koi via CSS custom properties), schema.org Person JSON-LD, theme-toggle button with sun/moon icons, avatar initials fallback SVG. All 5 phases completed in ~6h. Tagged release; live demo + themes gallery live. No breaking changes — all features opt-in via params.
+
+## The Brutal Truth
+
+Adding features that fast after a critical v0.1 release felt reckless but the modularity kept us honest. We caught two ugly bugs only because the screenshot review was rigorous. A CSS specificity silent failure sneaked into production; a Hugo templating anti-pattern almost shipped JSON garbage into `<script>` tags. Both were low-level enough to silently break on edge cases. The discipline of small additive commits meant rollback was one revert, not six.
+
+## Technical Details
+
+1. **Hugo `jsonify` double-encodes inside `<script>` context** — Hugo's auto-escape pipeline treats `<script>` block content as JavaScript string literal. Output `{{ $payload | jsonify }}` becomes `"{\"@context\":...}"` (stringified JSON string) instead of raw JSON. Fix: pipe through `safeJS` to mark output as safe for JS context: `{{ $payload | jsonify | safeJS }}`. Manifests as broken schema.org payloads when parsed by search crawlers.
+
+2. **CSS specificity silent battle on `.theme-toggle`** — `.theme-toggle svg { display: block }` (specificity 0,1,1) silently beat `.theme-toggle__sun { display: none }` (specificity 0,1,0). Both icons rendered at once, toggling did nothing visible. Caught only because screenshot diff showed two moons stacked. Fix: scope all per-icon rules under parent: `.theme-toggle .theme-toggle__sun { display: none }` to match the broader selector's context. Lesson: CSS specificity debugs invisibly.
+
+3. **Hardcoded color in `exampleSite/static/images/avatar.svg`** — vermilion `fill="#8b3a2b"` locked the avatar to one palette; theme toggle recolored the site but avatar stayed red. Removed avatar from exampleSite entirely to showcase the new initials fallback feature. Felt like a loss until we realized the demo got *better* — validates that initials auto-inherit palette accent and live-update on theme toggle.
+
+4. **Small + additive release cadence builds confidence in rollback** — v0.1 was large. v0.2 added 4 features in 5 commits. When specificity bug surfaced at final review, the fix was a 2-line CSS change in a single commit. If all v0.2 work were one megacommit, rollback would've nuked 6 hours of work. Discipline in commit granularity pays off.
+
+## Root Cause Analysis
+
+- **Hugo template quirks aren't obvious from docs.** `jsonify` works fine in template interpolation but breaks in `<script>`. Needed to test the actual rendered HTML, not just the template logic.
+- **CSS cascade assumed matching specificity.** Both selectors hit the toggle element; only one was checked. No linting caught this because both selectors are valid — the bug is order + specificity interaction.
+- **Static assets assumed single-theme context.** SVG fill attributes don't inherit from CSS custom properties by default. Should've validated asset reuse under theme toggle during phase 4 review.
+- **Commit discipline was the real safety net.** Each phase was one clean commit. Enabled fast iteration without fear of losing work.
+
+## Lessons Learned
+
+1. **Test rendered HTML, not template output.** For JSON-LD and `<script>` blocks, inspect the final HTML in DevTools. Auto-escape traps are invisible in template files.
+
+2. **CSS specificity bugs hide best in visual tests.** Automated CSS linting misses specificity collisions. Screenshot diffs catch them immediately.
+
+3. **Static SVG assets don't theme well.** If an SVG must recolor under theme toggle, either: remove the fill attribute and inherit from CSS, or generate it dynamically. Hardcoded fills are a gotcha.
+
+4. **Same-day releases are only safe if phases are modular.** v0.1→v0.2 worked because phases had minimal coupling. Try this with a monolithic feature and you're fighting merge conflicts and rollback chaos.
+
+## Next Steps
+
+- Monitor schema.org validation via Google Search Console (confirm JSON-LD is parsed correctly after safeJS fix).
+- Consider CSS specificity audit for all `.theme-toggle__*` variants before v0.3 (preventive).
+- For future static assets: add a validation step in screenshot capture that checks for hardcoded colors that don't inherit.
+- v0.3 candidates: layout variants (cards/grid), OG image generation, i18n setup. Keep the same cadence: small, additive, low blast radius.
+
+**Owner**: @tiennm99  
+**Timeline**: Next release pending catalog PR #708 feedback
@@ -0,0 +1,61 @@
+# Bonsai v0.3: Layout Variants and i18n Shipped Same Day, OG Auto-Generation Cut for Theme Weight
+
+**Date**: 2026-05-03 12:10
+**Severity**: Low
+**Component**: Layout system, i18n bundle, OG meta tags, demo site
+**Status**: Resolved
+
+## What Happened
+
+Shipped v0.3 features ~2 hours after v0.2 wrapped: `params.layout` for stack/grid/inline link arrangements, `i18n/{en,vi}.toml` bundles for theme strings, and `params.ogImageUrl` + `ogImage` controls for social previews. **Cut OG image auto-generation mid-implementation** — vendoring a TTF font + 4 base PNGs (~150 KB) conflicted directly with the theme's `< 4 KB CSS` minimalist principle. Reduced Phase 2 scope to URL override + smart `twitter:card` upgrade; deferred auto-gen to v0.4. All 5 phase files written, 4 of 5 phases done; tag/push pending user authorization.
+
+## The Brutal Truth
+
+The hardest thing about v0.3 wasn't writing code — it was killing a feature mid-implementation when its weight didn't match the theme's identity. Plan said "ship OG auto-generation," code said "vendor a 120 KB font," principle said "stay under 4 KB CSS." Three votes, principle won. Better to ship four solid features than five with one obese addition.
+
+The same-day cadence held because v0.2's modularity work paid dividends: layout variants slot in as one CSS section + one template line, i18n is one Hugo function call replacing literal strings, OG params are six lines of template logic. Zero refactors, zero broken tests, zero rollbacks.
+
+Caught one real bug in testing: my first i18n smoke test set `languageCode = "vi-VN"` and watched English render. Spent a minute confused before remembering Hugo uses `defaultContentLanguage` (not `languageCode`) to select i18n bundles. That's now documented in the README so the next person doesn't waste the same minute.
+
+## Technical Details
+
+1. **CSS specificity discipline carried from v0.2** — Layout variant rules scope under `.bio__links--{variant} .link { ... }`, never naked `.link { ... }`. The v0.2 theme-toggle bug (where `.theme-toggle svg` silently beat `.theme-toggle__sun` at specificity 0,1,1 vs 0,1,0) is fresh enough that the discipline came automatically. No specificity collisions in v0.3.
+
+2. **Inline layout uses screen-reader-friendly visual hiding** — `.bio__links--inline .link__title` clips the title to a 1×1 px region with `clip: rect(0,0,0,0)` instead of `display: none`. Titles stay in the DOM and accessible to screen readers; visually only the icon shows. Standard pattern, but worth being deliberate about — `display: none` would have hidden them from AT, breaking the link's purpose for non-sighted users.
+
+3. **Hugo `languageCode` ≠ i18n bundle selector** — `languageCode = "vi-VN"` sets the HTML `lang` attribute and metadata, but Hugo picks `i18n/*.toml` bundles based on `defaultContentLanguage`. For a single-language site, both must be set. Documented this in the README's new i18n section because it's the kind of gotcha that costs people 20 minutes the first time.
+
+4. **OG image auto-generation killed for theme-weight reasons** — Original plan: vendor a TTF (~50–120 KB Latin+Vietnamese subset of Inter) and 4 base PNGs (~5–20 KB each), use Hugo's `images.Text` filter to overlay name + tagline at build time. Total binary weight: ~100–200 KB. Theme today: ~12 KB CSS + ~13 KB icon SVGs. Ratio: auto-gen would have nearly doubled the theme's binary footprint to support an opt-in feature. Decision: ship the URL override (6 lines of template logic, zero new bytes), defer auto-gen to v0.4 once a smaller path is found. **The feature didn't change; the implementation timeline did.**
+
+5. **README's `< 4 KB CSS` claim was already stale** — Inherited from v0.1. v0.2's themes-gallery + v0.3's variants-gallery pushed raw CSS to 11.8 KB. Gzipped is still 2.9 KB. Updated the claim to `< 3 KB gzipped CSS`, which is the meaningful number for transfer cost. Lesson: marketing-style claims rot fast; quote sizes that match reality.
+
+## Root Cause Analysis
+
+- **Plan optimism vs implementation reality** — On paper, "use Hugo's `images.Text` filter" sounds like a one-partial change. In practice, it's a font-vendoring decision with license review, glyph-coverage analysis, and a binary asset commitment. The plan should have flagged "binary asset weight" as a Phase 2 risk dimension, not just "Hugo template quirks."
+
+- **Hugo locale resolution is under-documented for single-language sites** — Most Hugo i18n examples assume multilingual setups with `[languages]` blocks. Single-language with non-English bundle is a less-traveled path; the `defaultContentLanguage` requirement is easy to miss.
+
+- **CSS bundle drift went uncaught for a release cycle** — v0.2 grew the bundle past the README claim and nobody (me) noticed until v0.3 added more. A doctests-style "verify README claims" hook would catch this; not worth building yet, but worth knowing exists as a category of stale-doc bug.
+
+## Lessons Learned
+
+1. **Kill features mid-implementation when weight contradicts identity.** A theme that brags about being small can't ship a feature that doubles its binary footprint, even if the feature is desirable. Defer is a perfectly fine answer; ship-anyway-with-bloat is not.
+
+2. **CSS specificity discipline becomes muscle memory after one incident.** The v0.2 theme-toggle bug was acutely painful enough that v0.3's variant CSS auto-scoped under parent classes without conscious effort. Real bugs teach better than style guides.
+
+3. **Document the gotchas you trip over in real time.** The `defaultContentLanguage` confusion took 60 seconds to resolve and would take 20 minutes for a fresh user. Three lines in the README's i18n section makes it a non-issue forever.
+
+4. **Quote real numbers, not aspirational ones.** `< 4 KB CSS` was true once. `< 3 KB gzipped CSS` is true now. The second one will stay true longer because it's tied to a transfer-cost reality, not a frozen-at-launch ideal.
+
+5. **Same-day cadence works when phases are independent.** Phases 1, 2, 3 touched disjoint files (`bio-card.html`+CSS, `head.html`, `i18n/`+two partials). They could have shipped in any order. That's not architectural luck — it's a result of v0.2's component carve-up making each phase a leaf change instead of a refactor.
+
+## Next Steps
+
+- Regenerate `images/screenshot.png` + `images/tn.png` from a real browser (no headless tooling available in the dev environment); needed for Hugo themes-site refresh.
+- Commit + tag `v0.3.0` after screenshots land.
+- Verify OG previews on Twitter / Facebook / LinkedIn debuggers post-deploy.
+- v0.4 candidates: revisit OG auto-generation with a smaller path (system-font CSS-rendered SVG behind a rasterizer? Single-palette generic base? User-supplied font path?), RSS opt-in, multi-section bio, more icons.
+- Consider extracting the gallery CSS (`.themes-gallery__*`, `.variants-gallery__*`) to a separate `gallery.css` loaded only on demo pages — saves ~2 KB on every user's site for CSS that only the demo needs.
+
+**Owner**: @tiennm99
+**Timeline**: Tag pending screenshot regen
@@ -0,0 +1,63 @@
+# Bonsai v0.4 a11y + polish pass: 17 audit findings shipped, OG auto-gen still deferred
+
+**Date**: 2026-05-10 02:30
+**Severity**: Low
+**Component**: CSS palettes, Hugo templates, README/CHANGELOG
+**Status**: Resolved (PR #15 merged)
+
+## What Happened
+
+Did a full UI/UX audit of the theme (4 palettes × 2 modes × 3 layouts) via static analysis + rendered HTML — no headless browser available on host (Chromium ARM64 mismatch, bundled Puppeteer wouldn't launch). Audit produced 17 findings; first pass shipped 10 high-confidence fixes inline, then planned + shipped the 7 remaining (P1 accent contrast, P2 hover affordance, P4 favicon polish, P5 gallery landmarks, P6 i18n fallback, P7 `data-theme="auto"` removal, plus Q4 `<noscript>` toggle hide). P3 (auto-rasterized OG images) stayed deferred to v0.4 proper for the same reason it was deferred in v0.3 — binary-weight conflict with the theme's small footprint.
+
+PR #15: 17 files, +499 / −33, merged green.
+
+## The Brutal Truth
+
+The audit was strong because no browser ran. With no screenshot crutch, every finding had to be backed by computed WCAG ratios, CSS reasoning, and curl-of-rendered-HTML — not "looks off" intuition. The findings table came out sharper than my usual pass. Tradeoff: nobody eyeballed the new sakura/koi accents; the PR ships with the screenshot checkbox unchecked and a note recommending manual review post-merge. That's the honest version.
+
+The fastest part of the work was Phase 1's brand color shift. `#d4456a → #c93f63` (sakura) and `#c8521e → #bd4c1c` (koi) are 4–6% lightness drops — small enough that "cherry blossom" and "koi orange" still read right per the README labels, big enough to clear AA at 4.49 and 4.63 vs bg. The user's call ("darken brand accents" over "chip-only bold") was the right one: the chip is supposed to *look like* a real link button, not a styled exception. Bolding it would have hidden the contrast problem instead of fixing it.
+
+The slowest part was a self-inflicted wound on Hugo's `i18n` function. Phase 3's plan said "use the two-arg form `i18n KEY FALLBACK`" — that's wrong. Hugo's second arg is template *context*, not a fallback string. Caught it during implementation by re-reading Hugo docs before pushing the wrong pattern. Switched to `{{ with i18n }}{{ . }}{{ else }}…{{ end }}` which actually works. Lesson re-learned: when planning, verify framework signatures from docs, not memory.
+
+## Technical Details
+
+1. **Self-approval blocked, single-author repo workaround** — `gh pr review 15 --approve` errors with "Can not approve your own pull request." Fell back to `gh pr merge --merge --delete-branch` directly. Repo's pattern is merge commits (PRs #12, #13) so used `--merge` not `--squash`. Branch + PR flow still useful for the structured changelog and CI gate even when self-merging.
+
+2. **CSS gzip budget breached, README updated to match reality** — `static/css/bonsai.css` minified+gzipped is now **3,113 B**. README v0.3 said `< 3 KB gzipped CSS`. The 10 prior fixes (FOUC inline script, `:active` rules, `prefers-reduced-motion` extensions, `position: relative` on `.link`, theme-toggle 36 → 44 px) ate 200 B; this PR's `color-mix` hover bg added 34 B. Updated the README claim to `~ 3 KB` instead of clamping the budget. Honest beats aspirational.
+
+3. **`color-mix(in oklab, ...)` for hover affordance, not `rgba` overlay** — Hover rule was `transform: translateY(-1px); border-color: var(--bonsai-accent);`. Added `background: color-mix(in oklab, var(--bonsai-surface) 94%, var(--bonsai-accent));`. `oklab` keeps perceptual lightness consistent across all 4 palettes — koi (warm) and sumi (neutral) both get the right *amount* of accent without one looking pink and the other muddy. `rgba` on top of `--bonsai-surface` would have shifted hue per-palette unpredictably.
+
+4. **`<section aria-labelledby>` over wrapping in landmarks** — Gallery pages had `<article>` (intro) followed by a loose `<div class="…-gallery">`. Cards were orphaned siblings of the intro article rather than children. Wrapped each gallery in `<section aria-labelledby="…-heading">` keyed to the page `<h1>`. For variants page, demoted per-card `<section>` → `<article>` to avoid double-region nesting that screen readers announce as redundant. CSS uses class selectors (`.variants-gallery__card`) not element selectors so the swap was safe.
+
+5. **`<noscript>` style guard for JS-only theme toggle** — Theme toggle button only does work when the deferred JS runs. Without JS it renders but does nothing — broken affordance. Added `<noscript><style>.theme-toggle{display:none!important}</style></noscript>` to `<head>`, but only inside the existing `{{- if site.Params.themeToggle }}` block. Zero cost when the feature is off; full progressive-enhancement guard when it's on.
+
+6. **`data-theme="auto"` was a no-op, removed without behavior change** — The CSS only ever queried `[data-theme="light"]`, `[data-theme="dark"]`, or `:not([data-theme="..."])`. The `auto` value matched the third bucket — same as having no attribute at all. Removed from `baseof.html`. The inline FOUC script (v0.3) sets `data-theme` from `localStorage` when the user has chosen, so the attribute appears on first paint when meaningful and is absent otherwise. Cleaner state machine.
+
+## Root Cause Analysis
+
+- **Audit quality went up because tooling went down.** No headless Chrome forced reasoning instead of pattern-matching against screenshots. Every contrast finding was a computed ratio; every layout claim was math against the actual `clamp()` rules. This is reproducible on any host — no "needs Chrome" friction. The cost was no visual proof artifact; recommended a manual eyeball in the PR description.
+
+- **Hugo `i18n` second-arg semantics tripped me at planning time.** I planned the wrong pattern (`i18n KEY FALLBACK` — second arg is context, not fallback) and would have shipped it if not for re-reading docs at implementation time. Plans should encode actual function signatures, not vibes.
+
+- **CSS budget creep is invisible until it crosses a documented number.** README's `< 3 KB gzipped` was load-bearing — it was a *claim*, not just a goal. Ten small fixes pushed it over. No automation caught it. Either the README claim becomes a build-time assertion, or it stays prose and gets updated when reality moves. Picked prose-update for now.
+
+## Lessons Learned
+
+1. **No browser, sharper audit.** Static analysis + computed ratios beats vibes-based screenshot review for accessibility work. Keep the discipline even when Chrome is available.
+
+2. **Verify framework signatures from docs at plan time, not from memory.** The `i18n` two-arg confusion would have shipped wrong if I hadn't re-checked. Plans are cheaper to fix than reverts.
+
+3. **Update aspirational claims when reality moves.** `< 3 KB gzipped` was true at v0.1, false at v0.4. Updating the README to `~ 3 KB` is healthier than rolling back honest fixes to clear an aging budget.
+
+4. **Identity-touching changes need user consent, not heuristics.** Asking three focused `AskUserQuestion` calls (P1 accent darken vs chip-bold; P3 OG defer; P4 favicon expand) cost 30 seconds and locked scope cleanly. The wrong call would have either over-reached (auto-rasterize OG image, +150 KB binary) or under-shipped (chip-only bold styling that hides the contrast problem).
+
+5. **Self-merging is fine when the PR carries its own review surface.** Couldn't approve own PR via `gh pr review` (GitHub blocks it), so the PR description had to do the review's work: structured test plan, computed numbers, files-changed table, the unchecked "visual screenshots" item flagged honestly. Future readers see what was verified and what wasn't. Good enough for a single-author theme; would add a co-reviewer for anything multi-author.
+
+## Next Steps
+
+- Manual visual eyeball of all 4 palettes × 2 modes × 3 layouts on a real browser. Recommended before tagging `v0.4.0`.
+- v0.4 candidates still open: auto-rasterized OG images (now the only remaining v0.4 item from the original roadmap), RSS opt-in, multi-section bio, more icons, gallery CSS extraction (`gallery.css` loaded only on demo pages, drop ~2 KB from user sites).
+- Consider a build-time CSS-budget assertion (Hugo's `resources.PostProcess` + a shell test, or a CI step that gzips and grep-fails). Worth it once the budget becomes a hard contract.
+- Consider adding a `params.darkAccent` override (raised in audit Q3) — sakura/koi already brighten the accent in dark mode; users can't customize without overriding all 6 CSS vars.
+
+**Owner**: @tiennm99
@@ -0,0 +1,140 @@
+# System architecture
+
+Bonsai is a [Hugo](https://gohugo.io) theme — a directory of templates, partials, CSS, JS, and data files that Hugo reads when building a user's site. There is no runtime: every page, JSON-LD block, OG meta tag, QR PNG, AVIF/WebP image variant, vCard, RSS feed, and Lighthouse-relevant output is produced at `hugo build` time.
+
+## Directory layout
+
+```
+bonsai/
+├── theme.toml                  # Hugo theme metadata (name, min_version, license)
+├── data/icons.yaml             # Public icon name → {family, slug} manifest
+├── i18n/                       # Localized UI strings (en, vi shipped; extensible)
+├── assets/                     # Hugo resource root (image/CSS/JS pipeline reads from here)
+│   ├── css/                    # Stylesheets (fingerprinted at build time)
+│   ├── js/                     # Optional scripts (theme-toggle, share)
+│   └── icons/                  # Vendored SVG icons (Simple Icons + Lucide)
+├── layouts/
+│   ├── _default/baseof.html    # HTML5 skeleton
+│   ├── index.html              # Home page entry (calls bio-card partial)
+│   ├── index.rss.xml           # RSS 2.0 feed of links/sections
+│   ├── _default/vcard.vcf      # vCard output template (opt-in)
+│   ├── _default/manifest.webmanifest  # PWA manifest (opt-in)
+│   └── partials/
+│       ├── head.html           # All <head> content
+│       ├── bio-card.html       # Main bio card with sections/links branching
+│       ├── link-button.html    # Individual link (with thumbnail / featured / scheduled / rel / note)
+│       ├── link-group.html     # Renders one <nav> of links (used by flat + sectioned modes)
+│       ├── icon.html           # Inline SVG icon lookup (data/icons.yaml → assets/icons/)
+│       ├── avatar.html         # Avatar: <picture> for local, <img> for URL, SVG initials fallback
+│       ├── share-button.html   # Opt-in Web Share button
+│       ├── qr-block.html       # Opt-in QR code block (images.QR)
+│       ├── analytics-loader.html  # Opt-in GA4 loader + click listener
+│       ├── schema-person.html  # JSON-LD ProfilePage > Person
+│       ├── schema-website.html # Opt-in JSON-LD WebSite
+│       ├── theme-toggle-button.html
+│       └── footer.html
+│   ├── themes/single.html      # Demo: color-palette gallery
+│   ├── variants/single.html    # Demo: layout-variant gallery
+│   └── icons/single.html       # Demo: icon gallery
+└── exampleSite/                # Self-contained demo + reference config
+    ├── hugo.toml               # Showcases every opt-in param
+    ├── static/_headers         # Netlify / Cloudflare Pages header file
+    ├── vercel.json             # Vercel header config
+    └── content/                # Demo content
+```
+
+## Build-time pipelines
+
+### 1. CSS / JS pipeline
+
+```
+assets/css/bonsai.css
+   └─ resources.Get
+        └─ resources.Minify        (strip whitespace, comments)
+             └─ resources.Fingerprint "sha384"
+                  └─ /css/bonsai.min.<sha>.css  +  integrity="sha384-..."
+```
+
+Same shape for `gallery.css`, `theme-toggle.js`, `share.js`. The fingerprinted output lets hosts apply `Cache-Control: public, max-age=31536000, immutable` to `/css/*` and `/js/*` safely — any content change produces a new filename hash.
+
+### 2. Image pipeline
+
+When `params.avatar` resolves as a local asset:
+
+```
+assets/avatars/me.jpg
+   ├─ .Process "resize 112x112 jpg q85"   → JPEG 1x
+   ├─ .Process "resize 224x224 jpg q85"   → JPEG 2x
+   ├─ .Process "resize 112x112 webp q75"  → WebP 1x
+   ├─ .Process "resize 224x224 webp q75"  → WebP 2x
+   ├─ .Process "resize 112x112 avif q60"  → AVIF 1x
+   └─ .Process "resize 224x224 avif q60"  → AVIF 2x
+         ↓
+       <picture>
+         <source type="image/avif" srcset="… 1x, … 2x">
+         <source type="image/webp" srcset="… 1x, … 2x">
+         <img src=jpeg-1x srcset=…>
+       </picture>
+```
+
+External-URL avatars (`https://…`) skip the pipeline and emit a plain `<img>` with Phase-1 attributes (width/height/fetchpriority/decoding).
+
+### 3. QR pipeline
+
+```
+images.QR <Permalink> {level: medium, scale: 4}
+   └─ Build-time PNG at /qr_<hash>.png
+         ↓
+       <img class="bio__qr-img" src="…" width="…" height="…" alt="…">
+```
+
+### 4. Auto-OG (infra-only in v0.5)
+
+```
+$base := resources.Get params.ogAutoBase   (1200×630 PNG)
+$font := resources.Get params.ogAutoFont   (TTF, latin subset recommended)
+$base | images.Filter (images.Text $name {size:72, x:80, y:220, font:$font})
+      | images.Filter (images.Text $tagline {size:36, x:80, y:340, font:$font})
+   └─ Generated 1200×630 → og:image + twitter:card=summary_large_image
+```
+
+Theme ships no base PNG or font — user supplies via `params.ogAutoBase`/`ogAutoFont` (paths relative to `assets/`).
+
+### 5. JSON-LD strategy
+
+Always: `ProfilePage > Person` (suppressible via `params.schema = false`).
+Opt-in: `WebSite` (via `params.schemaWebSite = true`) — emitted as a second `<script type="application/ld+json">` block. Google supports multiple JSON-LD blocks per page.
+
+### 6. i18n flow
+
+Every user-facing string the theme renders is sourced from `i18n/<lang>.toml`. Hugo's `i18n` function falls back from the active language to `en` on missing keys. User content (`name`, `tagline`, `bio`, link `title`s, `footerText`) is never auto-translated.
+
+## Lighthouse-relevant signals (what the theme emits)
+
+| Category | Signal | Source |
+|----------|--------|--------|
+| Performance | Avatar dims + `fetchpriority="high"` + `decoding="async"` | `partials/avatar.html` |
+| Performance | Avatar preload (when local) | `partials/head.html` |
+| Performance | Modern image formats (AVIF/WebP/JPEG `<picture>`) | `partials/avatar.html` |
+| Performance | Fingerprinted CSS / JS with SRI | `partials/head.html` |
+| Performance | Zero web fonts, system stack | `assets/css/bonsai.css` |
+| A11y | Skip-link, `<nav aria-label>`, semantic landmarks | `baseof.html`, `bio-card.html` |
+| A11y | Tap targets ≥ 48×48 on inline layout | `assets/css/bonsai.css` |
+| A11y | `prefers-reduced-motion` honored | `assets/css/bonsai.css` |
+| A11y | WCAG-AA accent colors | palette CSS |
+| Best-Practices | Security headers (CSP, X-Frame, Referrer-Policy, Permissions-Policy) | `exampleSite/static/_headers` + `vercel.json` |
+| Best-Practices | `rel="noopener noreferrer"` on external links | `link-button.html` |
+| Best-Practices | SRI `integrity=` on assets | `partials/head.html` |
+| SEO | `<link rel="canonical">` | `partials/head.html` |
+| SEO | `<meta property="og:url">`, `og:type`, `og:title`, `og:description`, `og:image` | `partials/head.html` |
+| SEO | Hreflang alternates (multi-lang sites) | `partials/head.html` |
+| SEO | JSON-LD Person (always) + optional WebSite | `schema-person.html`, `schema-website.html` |
+| SEO | `<meta name="robots">` configurable | `partials/head.html` |
+| SEO | Tap-target sizing | `assets/css/bonsai.css` |
+
+## Backward-compatibility contract
+
+- Every new param added in v0.5 defaults to off OR has a safe default that preserves v0.4 behavior.
+- `[[params.links]]` continues to work unchanged when `[[params.sections]]` is absent.
+- Avatar URL paths from `static/` still work via the fallback branch in `partials/avatar.html`.
+- The CSS/JS file move from `static/` to `assets/` is invisible to user sites — the fingerprinted output is served at `/css/*` and `/js/*`.
@@ -0,0 +1,5 @@
+---
+title: "Home"
+---
+
+This file exists so Hugo renders the index page. All bio content comes from `[params]` in `hugo.toml`.
@@ -0,0 +1,6 @@
+---
+title: "Icon Gallery"
+description: "All available icons in the Bonsai theme."
+layout: "single"
+type: "icons"
+---
@@ -0,0 +1,4 @@
+---
+title: "Color themes"
+type: themes
+---
@@ -0,0 +1,4 @@
+---
+title: "Layout variants"
+type: variants
+---
@@ -0,0 +1,110 @@
+baseURL = "https://example.com/"
+languageCode = "en-us"
+title = "Tien Nguyen"
+theme = "bonsai"
+
+# Bonsai is a single-page bio theme — taxonomies/sitemaps off; RSS on for the
+# v0.4 demo (set params.rss = true and remove "RSS" from disableKinds).
+disableKinds = ["taxonomy", "term", "sitemap", "404"]
+
+# Register VCard + Manifest output formats so layouts/_default/vcard.vcf and
+# layouts/_default/manifest.webmanifest get rendered when their params are on.
+[mediaTypes."text/vcard"]
+  suffixes = ["vcf"]
+
+[mediaTypes."application/manifest+json"]
+  suffixes = ["webmanifest"]
+
+[outputs]
+  home = ["HTML", "RSS", "Manifest"]
+
+[outputFormats.VCard]
+  mediaType      = "text/vcard"
+  baseName       = "vcard"
+  isPlainText    = true
+  notAlternative = true
+
+[outputFormats.Manifest]
+  mediaType      = "application/manifest+json"
+  baseName       = "manifest"
+  isPlainText    = true
+  notAlternative = true
+
+[params]
+  name = "Tien Nguyen"
+  tagline = "Software engineer · tending small things with care"
+  bio = "Building tools, writing code, growing a quiet corner of the internet."
+  # avatar omitted intentionally so the demo showcases the initials fallback
+  # (the SVG circle uses the active palette's accent color)
+  colorTheme = "sakura"      # try "bonsai" (default), "sakura", "sumi", "koi"
+  layout = "grid"            # try "stack" (default), "grid", "inline"
+  themeToggle = true
+  rss = true                 # opt-in RSS feed of [[params.links]]
+  jobTitle = "Software Engineer"
+  footerText = "© 2026 · made with bonsai"
+  # ogImageUrl = "/og.png"   # optional 1200×630 image for social previews
+
+  # Phase 1 (v0.5) opt-ins:
+  themeColor    = "#c93f63"  # matches the sakura palette accent; tints mobile browser chrome
+  favicon       = "/favicon.ico"  # opt-in in v0.5 — set to avoid console 404 on /favicon.ico request
+  # robots      = "index,follow"  # default; set "noindex,nofollow" to hide from search engines
+  # preloadAvatar = true     # default true; preloads params.avatar as LCP image (local paths only)
+
+  # Phase 6 (v0.5) opt-ins:
+  schemaWebSite = true       # emit secondary WebSite JSON-LD for richer search results
+  manifest      = true       # serve /manifest.webmanifest + emit <link rel="manifest">
+  # themeBackground = "#fff5f5"  # PWA splash background; defaults to a sensible neutral
+
+  # Phase 3 (v0.5) page-level opt-ins:
+  share         = true       # render share button (Web Share API + clipboard fallback)
+  qr            = true       # render collapsible QR code of this page Permalink
+  # vcard       = true       # serve /vcard.vcf and render a "Save contact" link
+
+  # Phase 4 (v0.5) opt-in click analytics — Google Analytics 4.
+  # GA4 sets cookies — GDPR/PECR/CPRA consent is the site operator's responsibility.
+  # See docs/deployment-guide.md for the consent caveat.
+  # [params.analytics]
+  #   measurementId = "G-XXXXXXXXXX"
+  #   trackClicks   = true   # auto-emit data-analytics-event="link:<slug>" per link
+  #   utmSource     = "bio"
+  #   utmMedium     = "bio"
+  #   # utmCampaign = "summer-launch"
+
+# Register VCard output format on home page (only needed when vcard = true)
+# [outputs]
+#   home = ["HTML", "RSS", "VCard"]
+# [outputFormats.VCard]
+#   mediaType    = "text/vcard"
+#   baseName     = "vcard"
+#   isPlainText  = true
+#   notAlternative = true
+
+  [[params.links]]
+    title = "GitHub"
+    url = "https://github.com/tiennm99"
+    icon = "github"
+
+  [[params.links]]
+    title = "Personal site"
+    url = "https://example.com"
+    icon = "globe"
+
+  [[params.links]]
+    title = "LinkedIn"
+    url = "https://linkedin.com/in/tiennm99"
+    icon = "linkedin"
+
+  [[params.links]]
+    title = "Email me"
+    url = "mailto:tiennm99@outlook.com"
+    icon = "mail"
+
+  [[params.links]]
+    title = "Mastodon"
+    url = "https://mastodon.social/@tiennm99"
+    icon = "mastodon"
+
+  [[params.links]]
+    title = "Bluesky"
+    url = "https://bsky.app/profile/tiennm99.bsky.social"
+    icon = "bsky"
@@ -0,0 +1,24 @@
+/*
+  X-Content-Type-Options: nosniff
+  X-Frame-Options: SAMEORIGIN
+  Referrer-Policy: strict-origin-when-cross-origin
+  Permissions-Policy: camera=(), microphone=(), geolocation=()
+  Content-Security-Policy: default-src 'self'; img-src 'self' data: https:; script-src 'self' 'unsafe-inline' https://www.googletagmanager.com; style-src 'self' 'unsafe-inline'; connect-src 'self' https://www.google-analytics.com https://*.analytics.google.com https://*.google-analytics.com https://*.googletagmanager.com; font-src 'self'; frame-ancestors 'self'
+
+/css/*
+  Cache-Control: public, max-age=31536000, immutable
+
+/js/*
+  Cache-Control: public, max-age=31536000, immutable
+
+/icons/*
+  Cache-Control: public, max-age=31536000, immutable
+
+/images/*
+  Cache-Control: public, max-age=31536000, immutable
+
+/index.html
+  Cache-Control: public, max-age=3600, must-revalidate
+
+/
+  Cache-Control: public, max-age=3600, must-revalidate
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
+  <circle cx="100" cy="100" r="100" fill="#8b3a2b"/>
+  <text x="100" y="138" font-family="Georgia, serif" font-size="110" font-weight="600" fill="#f4efe6" text-anchor="middle">T</text>
+</svg>
@@ -0,0 +1,33 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "cleanUrls": true,
+  "trailingSlash": false,
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        { "key": "X-Content-Type-Options", "value": "nosniff" },
+        { "key": "X-Frame-Options", "value": "SAMEORIGIN" },
+        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
+        { "key": "Permissions-Policy", "value": "camera=(), microphone=(), geolocation=()" },
+        { "key": "Content-Security-Policy", "value": "default-src 'self'; img-src 'self' data: https:; script-src 'self' 'unsafe-inline' https://www.googletagmanager.com; style-src 'self' 'unsafe-inline'; connect-src 'self' https://www.google-analytics.com https://*.analytics.google.com https://*.google-analytics.com https://*.googletagmanager.com; font-src 'self'; frame-ancestors 'self'" }
+      ]
+    },
+    {
+      "source": "/css/(.*)",
+      "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }]
+    },
+    {
+      "source": "/js/(.*)",
+      "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }]
+    },
+    {
+      "source": "/icons/(.*)",
+      "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }]
+    },
+    {
+      "source": "/images/(.*)",
+      "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }]
+    }
+  ]
+}
@@ -0,0 +1,35 @@
+# Bonsai theme — English strings.
+# Override per language by adding e.g. i18n/vi.toml; missing keys fall back to en.
+
+[nav_links_label]
+other = "Links"
+
+[theme_toggle_label]
+other = "Toggle light and dark theme"
+
+[theme_toggle_title]
+other = "Toggle theme"
+
+[footer_default]
+other = "© {{ .year }} {{ .name }}"
+
+[skip_to_content]
+other = "Skip to content"
+
+[share_label]
+other = "Share this page"
+
+[share_copied]
+other = "Link copied"
+
+[share_failed]
+other = "Could not share"
+
+[show_qr]
+other = "Show QR code"
+
+[qr_alt]
+other = "QR code linking to this page"
+
+[save_contact]
+other = "Save contact"
@@ -0,0 +1,34 @@
+# Bonsai theme — Vietnamese strings.
+
+[nav_links_label]
+other = "Liên kết"
+
+[theme_toggle_label]
+other = "Chuyển giao diện sáng / tối"
+
+[theme_toggle_title]
+other = "Đổi giao diện"
+
+[footer_default]
+other = "© {{ .year }} {{ .name }}"
+
+[skip_to_content]
+other = "Bỏ qua tới nội dung"
+
+[share_label]
+other = "Chia sẻ trang này"
+
+[share_copied]
+other = "Đã sao chép liên kết"
+
+[share_failed]
+other = "Không thể chia sẻ"
+
+[show_qr]
+other = "Hiện mã QR"
+
+[qr_alt]
+other = "Mã QR liên kết tới trang này"
+
+[save_contact]
+other = "Lưu danh thiếp"
@@ -0,0 +1,5 @@
+# Theme images
+
+Place `screenshot.png` (1500×1000) and `tn.png` (900×600) here for submission to the Hugo themes site.
+
+See: https://github.com/gohugoio/hugoThemesSiteBuilder#requirements
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="{{ site.LanguageCode | default `en` }}" data-bonsai-theme="{{ site.Params.colorTheme | default `bonsai` }}">
+  <head>
+    {{- partial "head.html" . -}}
+    {{- block "head_extra" . }}{{- end }}
+  </head>
+  <body>
+    <a class="skip-link" href="#main">{{ i18n "skip_to_content" | default "Skip to content" }}</a>
+    <main class="bonsai" id="main">
+      {{- block "main" . }}{{- end }}
+    </main>
+    {{- partial "footer.html" . -}}
+  </body>
+</html>
@@ -0,0 +1,31 @@
+{{- $name := site.Params.name | default site.Title -}}
+{{- $shortName := site.Params.shortName | default (substr $name 0 12) -}}
+{{- $themeColor := site.Params.themeColor | default "#8b3a2b" -}}
+{{- $bgColor := site.Params.themeBackground | default "#f4efe6" -}}
+{{- /* start_url and scope use relURL so subpath deployments (e.g. GitHub Pages
+       project sites at /repo/) install correctly. */ -}}
+{{- $root := "/" | relURL -}}
+{{- $hasIcons := or site.Params.appleTouchIcon site.Params.faviconSvg -}}
+{
+  "name": "{{ $name }}",
+  "short_name": "{{ $shortName }}",
+  "start_url": "{{ $root }}",
+  "scope": "{{ $root }}",
+  "display": "minimal-ui",
+  "background_color": "{{ $bgColor }}",
+  "theme_color": "{{ $themeColor }}"
+  {{- if $hasIcons -}}
+  ,
+  "icons": [
+    {{- $first := true -}}
+    {{- with site.Params.appleTouchIcon -}}
+      {{- if $first }}{{ $first = false }}{{ else }},{{ end }}
+      { "src": "{{ . | relURL }}", "sizes": "180x180", "type": "image/png" }
+    {{- end -}}
+    {{- with site.Params.faviconSvg -}}
+      {{- if $first }}{{ $first = false }}{{ else }},{{ end }}
+      { "src": "{{ . | relURL }}", "sizes": "any", "type": "image/svg+xml" }
+    {{- end -}}
+  ]
+  {{- end }}
+}
@@ -0,0 +1,22 @@
+{{- $name := site.Params.name | default site.Title -}}
+{{- /* Flatten links + sections for URL lines. */ -}}
+{{- $allLinks := slice -}}
+{{- if site.Params.sections -}}
+  {{- range site.Params.sections -}}{{- range .links -}}{{- $allLinks = $allLinks | append . -}}{{- end -}}{{- end -}}
+{{- else -}}{{- $allLinks = site.Params.links -}}{{- end -}}
+BEGIN:VCARD
+VERSION:3.0
+FN:{{ $name }}
+{{ with site.Params.jobTitle }}TITLE:{{ . }}
+{{ end -}}
+{{ with site.Params.email }}EMAIL:{{ . }}
+{{ end -}}
+{{ with site.Params.location }}ADR:;;{{ . }};;;;
+{{ end -}}
+URL:{{ site.BaseURL }}
+{{ range $allLinks -}}
+{{- if and .url (not (or (strings.HasPrefix .url "mailto:") (strings.HasPrefix .url "tel:"))) -}}
+URL;TYPE={{ .title | upper }}:{{ .url }}
+{{ end -}}
+{{- end -}}
+END:VCARD
@@ -0,0 +1,14 @@
+{{ define "main" }}
+<section class="icon-gallery">
+  <h1>{{ .Title }}</h1>
+  <p>{{ .Description | default "All available icons in the Bonsai theme." }}</p>
+  <div style="display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1.5rem;">
+    {{- range $name, $entry := site.Data.icons }}
+    <div style="display:flex;flex-direction:column;align-items:center;gap:0.4rem;width:80px;">
+      <span style="width:20px;height:20px;">{{ partial "icon.html" $name }}</span>
+      <span style="font-size:0.75rem;text-align:center;word-break:break-all;">{{ $name }}</span>
+    </div>
+    {{- end }}
+  </div>
+</section>
+{{ end }}
@@ -0,0 +1,3 @@
+{{ define "main" }}
+  {{- partial "bio-card.html" . -}}
+{{ end }}
@@ -0,0 +1,41 @@
+{{- /* RSS 2.0 feed of [[params.links]].
+       Only emitted when site.Params.rss is true AND user has removed `RSS`
+       from disableKinds in their hugo.toml. */ -}}
+{{- if site.Params.rss -}}
+{{- $name := site.Params.name | default site.Title -}}
+{{- $tagline := site.Params.tagline | default "" -}}
+{{- $bio := site.Params.bio | default $tagline -}}
+{{- $now := now -}}
+{{ printf "<?xml version=\"1.0\" encoding=\"UTF-8\"?>" | safeHTML }}
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ $name | transform.XMLEscape }}{{ with $tagline }} — {{ . | transform.XMLEscape }}{{ end }}</title>
+    <link>{{ site.BaseURL | absLangURL }}</link>
+    <description>{{ $bio | transform.XMLEscape }}</description>
+    <generator>Hugo + Bonsai</generator>
+    <language>{{ site.Language.LanguageCode | default site.LanguageCode }}</language>
+    <lastBuildDate>{{ $now.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>
+    <atom:link href="{{ "index.xml" | absURL }}" rel="self" type="application/rss+xml" />
+    {{- /* Flatten params.links + params.sections.*.links into a single list. */ -}}
+    {{- $allLinks := slice -}}
+    {{- if site.Params.sections -}}
+      {{- range site.Params.sections -}}
+        {{- range .links -}}{{- $allLinks = $allLinks | append . -}}{{- end -}}
+      {{- end -}}
+    {{- else -}}
+      {{- $allLinks = site.Params.links -}}
+    {{- end -}}
+    {{- range $allLinks }}
+    <item>
+      <title>{{ .title | transform.XMLEscape }}</title>
+      <link>{{ .url }}</link>
+      <guid isPermaLink="false">bonsai-link-{{ .url }}</guid>
+      <pubDate>{{ $now.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
+      {{- with .description }}
+      <description>{{ . | transform.XMLEscape }}</description>
+      {{- end }}
+    </item>
+    {{- end }}
+  </channel>
+</rss>
+{{- end -}}
@@ -0,0 +1,18 @@
+{{- /* Google Analytics 4 loader.
+       Emits nothing when params.analytics.measurementId is unset/empty.
+       Pairs with data-analytics-event attrs added by partials/link-button.html.
+       GA4 sets cookies — site operator is responsible for GDPR/PECR/CPRA consent. */ -}}
+{{- $a := site.Params.analytics -}}
+{{- if and $a $a.measurementId -}}
+{{- $id := $a.measurementId -}}
+{{- $trackClicks := ne ($a.trackClicks | default true) false -}}
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ $id }}"></script>
+<script>
+window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}
+gtag('js',new Date());
+gtag('config','{{ $id }}');
+{{- if $trackClicks }}
+document.addEventListener('click',function(e){var a=e.target.closest('[data-analytics-event]');if(a)gtag('event','outbound_click',{event_label:a.getAttribute('data-analytics-event'),link_url:a.href});});
+{{- end }}
+</script>
+{{- end -}}
@@ -0,0 +1,64 @@
+{{- /* Render bio avatar.
+       - If params.avatar resolves as a local asset (assets/ or static/ path),
+         emit <picture> with AVIF + WebP + JPEG fallback at 1x/2x densities.
+       - If params.avatar is an absolute URL, emit plain <img> (no processing).
+       - If unset, emit inline SVG circle with initials in accent color.
+       Initials override: params.avatarInitials. Background: params.avatarBg. */ -}}
+{{- $name := site.Params.name | default site.Title -}}
+{{- $avatar := site.Params.avatar -}}
+
+{{- if $avatar -}}
+  {{- $isHTTP := strings.HasPrefix $avatar "http" -}}
+  {{- $local := false -}}
+  {{- $res := "" -}}
+  {{- if not $isHTTP -}}
+    {{- $clean := strings.TrimPrefix "/" $avatar -}}
+    {{- with resources.Get $clean -}}
+      {{- $res = . -}}
+      {{- $local = true -}}
+    {{- end -}}
+  {{- end -}}
+  {{- if $local -}}
+    {{- /* Hugo image pipeline: AVIF + WebP + JPEG, 1x + 2x for retina. */ -}}
+    {{- $jpg1 := $res.Process "resize 112x112 jpg q85" -}}
+    {{- $jpg2 := $res.Process "resize 224x224 jpg q85" -}}
+    {{- $webp1 := $res.Process "resize 112x112 webp q75" -}}
+    {{- $webp2 := $res.Process "resize 224x224 webp q75" -}}
+    {{- $avif1 := $res.Process "resize 112x112 avif q60" -}}
+    {{- $avif2 := $res.Process "resize 224x224 avif q60" -}}
+    <picture>
+      <source type="image/avif" srcset="{{ $avif1.RelPermalink }} 1x, {{ $avif2.RelPermalink }} 2x" />
+      <source type="image/webp" srcset="{{ $webp1.RelPermalink }} 1x, {{ $webp2.RelPermalink }} 2x" />
+      <img class="bio__avatar" src="{{ $jpg1.RelPermalink }}"
+           srcset="{{ $jpg1.RelPermalink }} 1x, {{ $jpg2.RelPermalink }} 2x"
+           width="112" height="112" alt="{{ $name }}"
+           loading="eager" fetchpriority="high" decoding="async" />
+    </picture>
+  {{- else -}}
+    <img class="bio__avatar" src="{{ $avatar | strings.TrimPrefix "/" | relURL }}" alt="{{ $name }}"
+         width="112" height="112" loading="eager" fetchpriority="high" decoding="async" />
+  {{- end -}}
+{{- else -}}
+  {{- $initials := site.Params.avatarInitials -}}
+  {{- if not $initials -}}
+    {{- $words := split (strings.TrimSpace $name) " " -}}
+    {{- $first := "" -}}
+    {{- $second := "" -}}
+    {{- with index $words 0 -}}{{- $first = substr . 0 1 -}}{{- end -}}
+    {{- if gt (len $words) 1 -}}{{- $second = substr (index $words 1) 0 1 -}}{{- end -}}
+    {{- $initials = upper (printf "%s%s" $first $second) -}}
+    {{- if not $initials -}}{{- $initials = "?" -}}{{- end -}}
+  {{- end -}}
+  {{- $bg := site.Params.avatarBg | default "var(--bonsai-accent)" -}}
+  {{- $svgStyle := printf "color:var(--bonsai-bg);background:transparent" | safeCSS -}}
+  {{- $circleStyle := printf "fill:%s" $bg | safeCSS -}}
+  <svg class="bio__avatar bio__avatar--initials" viewBox="0 0 112 112" width="112" height="112"
+       role="img" aria-label="{{ $name }}"
+       style="{{ $svgStyle }}">
+    <circle cx="56" cy="56" r="56" style="{{ $circleStyle }}"/>
+    <text x="56" y="74" text-anchor="middle"
+          font-family="ui-serif, Georgia, serif"
+          font-size="56" font-weight="600"
+          fill="currentColor">{{ $initials }}</text>
+  </svg>
+{{- end -}}
@@ -0,0 +1,58 @@
+{{- $name := site.Params.name | default site.Title -}}
+{{- $tagline := site.Params.tagline -}}
+{{- $bio := site.Params.bio -}}
+{{- $links := site.Params.links -}}
+{{- $sections := site.Params.sections -}}
+{{- $layout := site.Params.layout | default "stack" -}}
+{{- $defaultLabel := i18n "nav_links_label" | default "Links" -}}
+{{- if and $sections $links -}}
+  {{- warnf "bonsai: both params.sections and params.links set; sections win, flat links ignored" -}}
+{{- end -}}
+
+<article class="bio">
+  {{ partial "avatar.html" . }}
+
+  <h1 class="bio__name">{{ $name }}</h1>
+
+  {{- with $tagline }}
+  <p class="bio__tagline">{{ . }}</p>
+  {{- end }}
+
+  {{- with $bio }}
+  <p class="bio__text">{{ . | markdownify }}</p>
+  {{- end }}
+
+  {{- if $sections -}}
+    {{- range $i, $section := $sections -}}
+      {{- $secLinks := $section.links -}}
+      {{- if $secLinks -}}
+        {{- $secLayout := $section.layout | default $layout -}}
+        {{- $secTitle := $section.title -}}
+        {{- $slug := "" -}}
+        {{- with $secTitle }}{{ $slug = . | urlize }}{{ end -}}
+        {{- if not $slug }}{{ $slug = printf "section-%d" (add $i 1) }}{{ end -}}
+        <section class="bio__section"{{ with $secTitle }} aria-labelledby="section-{{ $slug }}"{{ else }} aria-label="{{ $defaultLabel }} {{ add $i 1 }}"{{ end }}>
+          {{- with $secTitle }}
+          <h2 id="section-{{ $slug }}" class="bio__section-title">{{ . }}</h2>
+          {{- end }}
+          {{- with $section.description }}
+          <p class="bio__section-desc">{{ . | markdownify }}</p>
+          {{- end }}
+          {{ partial "link-group.html" (dict "links" $secLinks "layout" $secLayout "label" (or $secTitle $defaultLabel)) }}
+        </section>
+      {{- end -}}
+    {{- end -}}
+  {{- else if $links -}}
+    {{ partial "link-group.html" (dict "links" $links "layout" $layout "label" $defaultLabel) }}
+  {{- end -}}
+
+  {{- if site.Params.share }}
+  {{ partial "share-button.html" . }}
+  {{- end }}
+
+  {{- if site.Params.vcard }}
+  <a class="bio__vcard" href="{{ `vcard.vcf` | relURL }}" download>{{ i18n "save_contact" | default "Save contact" }}</a>
+  {{- end }}
+
+  {{ partial "qr-block.html" . }}
+</article>
@@ -0,0 +1,13 @@
+{{- if site.Params.footer | default true -}}
+<footer class="bonsai-footer">
+  {{- with site.Params.footerText -}}
+    <p>{{ . | safeHTML }}</p>
+  {{- else -}}
+    {{- $ctx := dict "year" now.Year "name" (site.Params.name | default site.Title) -}}
+    <p>{{ i18n "footer_default" $ctx | default (printf "© %d %s" now.Year (site.Params.name | default site.Title)) | safeHTML }}</p>
+  {{- end -}}
+  {{- if site.Params.themeToggle -}}
+    {{ partial "theme-toggle-button.html" . }}
+  {{- end -}}
+</footer>
+{{- end -}}
@@ -0,0 +1,112 @@
+{{- $name := site.Params.name | default site.Title -}}
+{{- $tagline := site.Params.tagline | default "" -}}
+{{- $description := site.Params.bio | default $tagline | default site.Params.description -}}
+{{- $avatar := site.Params.avatar -}}
+{{- /* OG image resolution cascade:
+       1. params.ogImage = false → emit nothing.
+       2. params.ogImageUrl set → use it (1200×630 → summary_large_image).
+       3. params.ogAuto = true AND ogAutoBase + ogAutoFont supplied → auto-generate
+          via Hugo's images.Filter + images.Text overlay at build time.
+          (Bonsai v0.5 ships infra-only; user supplies the base PNG + TTF font.)
+       4. else fall back to params.avatar (square → summary card).            */ -}}
+{{- $ogImageEnabled := site.Params.ogImage | default true -}}
+{{- $ogImageUrl := "" -}}
+{{- $twitterCard := "summary" -}}
+{{- if $ogImageEnabled -}}
+  {{- if site.Params.ogImageUrl -}}
+    {{- $ogImageUrl = site.Params.ogImageUrl | strings.TrimPrefix "/" | absURL -}}
+    {{- $twitterCard = "summary_large_image" -}}
+  {{- else if and site.Params.ogAuto site.Params.ogAutoBase site.Params.ogAutoFont -}}
+    {{- $base := resources.Get site.Params.ogAutoBase -}}
+    {{- $font := resources.Get site.Params.ogAutoFont -}}
+    {{- if and $base $font -}}
+      {{- $titleOpts := dict "size" 72 "color" "#2b2b2b" "x" 80 "y" 220 "font" $font -}}
+      {{- $generated := $base | images.Filter (images.Text $name $titleOpts) -}}
+      {{- with $tagline -}}
+        {{- $taglineOpts := dict "size" 36 "color" "#6b6b6b" "x" 80 "y" 340 "font" $font -}}
+        {{- $generated = $generated | images.Filter (images.Text . $taglineOpts) -}}
+      {{- end -}}
+      {{- $ogImageUrl = $generated.Permalink -}}
+      {{- $twitterCard = "summary_large_image" -}}
+    {{- else if $avatar -}}
+      {{- warnf "bonsai: params.ogAuto enabled but ogAutoBase/ogAutoFont resources not found; falling back to avatar" -}}
+      {{- $ogImageUrl = $avatar | strings.TrimPrefix "/" | absURL -}}
+    {{- end -}}
+  {{- else if $avatar -}}
+    {{- $ogImageUrl = $avatar | strings.TrimPrefix "/" | absURL -}}
+  {{- end -}}
+{{- end -}}
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
+<meta name="color-scheme" content="light dark" />
+<title>{{ $name }}{{ with $tagline }} — {{ . }}{{ end }}</title>
+{{- with $description }}
+<meta name="description" content="{{ . }}" />
+{{- end }}
+<link rel="canonical" href="{{ .Permalink }}" />
+<meta name="robots" content="{{ site.Params.robots | default `index,follow` }}" />
+{{- with site.Params.themeColor }}
+<meta name="theme-color" content="{{ . }}" />
+{{- end }}
+{{- /* hreflang alternates for multi-language sites only. */ -}}
+{{- if gt (len site.Languages) 1 }}
+{{- range site.Languages }}
+<link rel="alternate" hreflang="{{ .Lang }}" href="{{ site.BaseURL }}{{ if not .Lang }}{{ else }}{{ .Lang }}/{{ end }}" />
+{{- end }}
+<link rel="alternate" hreflang="x-default" href="{{ site.BaseURL }}" />
+{{- end }}
+{{- if site.Params.manifest }}
+<link rel="manifest" href="{{ `manifest.webmanifest` | relURL }}" />
+{{- end }}
+
+<meta property="og:type" content="profile" />
+<meta property="og:url" content="{{ .Permalink }}" />
+<meta property="og:title" content="{{ $name }}" />
+{{- with $description }}
+<meta property="og:description" content="{{ . }}" />
+{{- end }}
+{{- with $ogImageUrl }}
+<meta property="og:image" content="{{ . }}" />
+<meta name="twitter:image" content="{{ . }}" />
+{{- end }}
+<meta name="twitter:card" content="{{ $twitterCard }}" />
+
+{{ partial "schema-person.html" . }}
+{{ partial "schema-website.html" . }}
+
+{{- with site.Params.faviconSvg }}
+<link rel="icon" type="image/svg+xml" href="{{ . | strings.TrimPrefix "/" | relURL }}" />
+{{- end }}
+{{- with site.Params.favicon }}
+<link rel="icon" href="{{ . | strings.TrimPrefix "/" | relURL }}" />
+{{- end }}
+{{- with site.Params.appleTouchIcon }}
+<link rel="apple-touch-icon" href="{{ . | strings.TrimPrefix "/" | relURL }}" />
+{{- end }}
+{{- /* Avatar preload: only for `static/`-served paths. When avatar resolves as an
+       `assets/` resource the <picture> pipeline emits its own srcset/fetchpriority
+       and a fixed-path preload would be wasted (different filename + format). */ -}}
+{{- if and site.Params.avatar (ne (site.Params.preloadAvatar | default true) false) (not (strings.HasPrefix site.Params.avatar "http")) (not (resources.Get (strings.TrimPrefix "/" site.Params.avatar))) }}
+<link rel="preload" as="image" href="{{ site.Params.avatar | strings.TrimPrefix "/" | relURL }}" fetchpriority="high" />
+{{- end }}
+{{- /* Fingerprinted + minified CSS via Hugo's resource pipeline.
+       integrity= attribute lets browsers / CSP `style-src 'self' 'sha384-...'`
+       validate the file. */ -}}
+{{- $css := resources.Get "css/bonsai.css" | resources.Minify | resources.Fingerprint "sha384" }}
+<link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous" />
+{{- if site.Params.rss }}
+<link rel="alternate" type="application/rss+xml" title="{{ site.Params.name | default site.Title }}" href="{{ `index.xml` | absURL }}" />
+{{- end }}
+{{- if site.Params.themeToggle }}
+{{- /* Inline blocking script (no FOUC): apply saved theme before first paint.
+       Tiny (~140B) — meets the <3KB CSS / minimal-JS budget. */ -}}
+<script>(function(){try{var t=localStorage.getItem('bonsai-theme');if(t==='light'||t==='dark')document.documentElement.dataset.theme=t;}catch(e){}})();</script>
+<noscript><style>.theme-toggle{display:none!important}</style></noscript>
+{{- $themeJs := resources.Get "js/theme-toggle.js" | resources.Minify | resources.Fingerprint "sha384" }}
+<script defer src="{{ $themeJs.RelPermalink }}" integrity="{{ $themeJs.Data.Integrity }}" crossorigin="anonymous"></script>
+{{- end }}
+{{- if site.Params.share }}
+{{- $shareJs := resources.Get "js/share.js" | resources.Minify | resources.Fingerprint "sha384" }}
+<script defer src="{{ $shareJs.RelPermalink }}" integrity="{{ $shareJs.Data.Integrity }}" crossorigin="anonymous"></script>
+{{- end }}
+{{ partial "analytics-loader.html" . }}
@@ -0,0 +1,13 @@
+{{- $name := . -}}
+{{- $entry := index site.Data.icons $name -}}
+{{- if $entry -}}
+  {{- $path := printf "icons/%s/%s.svg" $entry.family $entry.slug -}}
+  {{- with resources.Get $path -}}
+    {{- .Content | safeHTML -}}
+  {{- else -}}
+    {{- /* asset missing — fall through to fallback below */ -}}
+  {{- end -}}
+{{- else -}}
+  {{- /* Unknown icon name: render generic external-link icon */ -}}
+  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M10 14a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5M14 10a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5"/></svg>
+{{- end -}}
				`@@ -0,0 +1 @@`
				`<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Bandcamp</title><path d="M0 18.75l7.437-13.5H24l-7.438 13.5H0z"/></svg>`
				`@@ -0,0 +1 @@`
				<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Bluesky</title><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"/></svg>