tiennm99 16326d059d feat: v0.2 polish & SEO
Bundle of four small additions for the v0.2 release. All strictly
additive — no breaking changes; v0.1 sites upgrade without edits.

Phase 1 — Color theme presets
- Refactor static/css/bonsai.css: palette vars now scoped per
  [data-bonsai-theme]; layout vars (radius/gap/pad/fonts) stay in :root
- Four palettes: bonsai (default, vermilion+washi), sakura (cherry
  blossom), sumi (monochrome ink), koi (orange+cream). Light + dark
  variants each, both prefers-color-scheme and manual data-theme override
- New params.colorTheme (default 'bonsai'); applied via baseof
- Themes gallery at exampleSite /themes/ shows all 4 side-by-side

Phase 2 — schema.org Person markup
- New layouts/partials/schema-person.html emits JSON-LD ProfilePage
  containing a Person (built from name/bio/avatar/links + optional
  jobTitle/location/email)
- mailto: and tel: links excluded from sameAs
- Suppress with params.schema = false
- Wired into head.html

Phase 3 — Theme toggle UI button
- New layouts/partials/theme-toggle-button.html (sun/moon SVGs)
- Rendered in footer when params.themeToggle = true
- aria-pressed reflects current state; updated theme-toggle.js to
  sync on click and on first paint
- Sun shown in dark mode, moon in light (button shows target state)
- exampleSite enables the toggle by default for demo

Phase 4 — Avatar initials fallback
- New layouts/partials/avatar.html: img if params.avatar set,
  inline SVG circle with initials otherwise
- Initials auto-derived from params.name (first letter of up to 2
  words, uppercased); override with params.avatarInitials
- Background overrideable with params.avatarBg; defaults to accent
- bio-card.html simplified to delegate to the partial
2026-05-03 11:11:39 +07:00
2026-05-03 11:11:39 +07:00
2026-05-03 11:11:39 +07:00
2026-05-03 11:11:39 +07:00
2026-05-01 10:04:59 +07:00
2026-05-01 10:04:59 +07:00

Bonsai

build license Hugo

A minimalist Hugo theme for link-in-bio pages, inspired by Linktree and the Japanese art of bonsaismall, curated, intentional.

Live demo · Icon gallery

盆栽 (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

  • Single-page bio — name, avatar, tagline, links. Nothing else.
  • Data-driven links — defined in [[params.links]]; no content files required.
  • 35 icons out of the box — 25 brand (GitHub, Mastodon, Bluesky, X, Threads, LinkedIn, Instagram…) + 10 utility (mail, globe, rss…). Vendored from Simple Icons and Lucide.
  • Light & dark mode — respects prefers-color-scheme; optional toggle.
  • Zero JavaScript by default — pure HTML + CSS; opt-in JS for theme toggle only.
  • Fast — < 4 KB CSS, < 4 KB HTML, no web fonts (system stack), no runtime fetches.
  • Accessible — semantic HTML, focus-visible outlines, prefers-reduced-motion.
  • Responsive — mobile-first, looks right at every viewport.

Quick Start

As a Git submodule (simplest)

git submodule add https://github.com/tiennm99/bonsai.git themes/bonsai

Add to hugo.toml:

theme = "bonsai"

As a Hugo Module

hugo mod init github.com/<you>/<your-site>
hugo mod get github.com/tiennm99/bonsai

Add to hugo.toml:

[module]
  [[module.imports]]
    path = "github.com/tiennm99/bonsai"

Configuration

Minimal hugo.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. Omit to skip.
favicon string (URL) /favicon.ico Favicon path.
themeToggle bool false Render the light/dark toggle button + load the toggle script.
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.

Available Icons

Brand / Social (25)
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
UI / Utility (10)
Name Source
mail Lucide
globe Lucide
link Lucide
rss Lucide
calendar Lucide
phone Lucide
mappin Lucide
filetext Lucide
extlink Lucide
share Lucide

Icons are vendored at build time — no CDN fetch at runtime. Live gallery: 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.

Development

git clone https://github.com/tiennm99/bonsai.git
cd bonsai/exampleSite
hugo server --themesDir ../.. --bind 0.0.0.0

Build for inspection:

cd exampleSite && hugo --themesDir ../.. --gc --minify

Contributing

PRs welcome. See CONTRIBUTING.md for dev setup, the icon-add workflow, and PR guidelines.

License

Apache-2.0 © tiennm99. See LICENSE and NOTICE for third-party attributions (Simple Icons CC0, Lucide ISC).

S
Description
Minimalist Hugo theme for link-in-bio pages — Linktree alternative with Japanese bonsai aesthetics.
Readme Apache-2.0
1 MiB
Languages
HTML 54.1%
CSS 32.2%
Shell 8.9%
JavaScript 4.8%