- Validate against allowlist in bio-card.html, warnf + fall back to stack on unknown values.
- Variant CSS scoped under .bio__links--{variant} to avoid v0.2-style specificity collisions.
- Inline variant visually-hides .link__title via clip-path; titles stay in DOM for screen readers.
- Grid collapses to 1-col under 480px.
- New /variants/ gallery page renders all three side by side.
- exampleSite switches to layout = "grid" so the live demo shows the new feature.
- .theme-toggle svg { display: block } was beating per-class hide rules
due to higher specificity. Scope the per-class rules under
.theme-toggle .theme-toggle__sun/moon so they win.
- Remove avatar from exampleSite so the initials fallback renders, which
inherits the active palette's accent color (sakura -> pink). The static
avatar.svg was hardcoded vermilion and looked off in non-bonsai
palettes.
- README: add new params (colorTheme, themeToggle button details, schema,
jobTitle/location/email, avatarInitials/Bg) to config table; new
'Color themes' section with live gallery link
- CHANGELOG: 0.2.0 entry under Added/Changed; placeholder for v0.3
- exampleSite/hugo.toml: colorTheme = sakura for distinctive screenshot
+ jobTitle to populate Person.jobTitle in JSON-LD
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
Headless renderers and many systems lack Japanese fonts to render the
kanji glyph used previously. T is universally available and reads as
a Tien-Nguyen demo monogram.
avatar.svg: vermilion circle with kanji 盆 (bon, from 盆栽) in
washi-paper text. exampleSite/hugo.toml updated to reference it.
images/screenshot.png and images/tn.png recaptured against the demo
now showing all 6 working brand+ui icons.
Minimalist Hugo theme for link-in-bio pages, inspired by Linktree
and Japanese bonsai aesthetics.
- Single-page bio with avatar, tagline, bio, and links
- Data-driven via [params] in hugo.toml — no content files needed
- Light/dark mode via prefers-color-scheme + optional toggle
- Inline SVG icon set (github, globe, mail, twitter, linkedin, etc)
- Zero JS by default; opt-in theme toggle script
- exampleSite for local development
tiennm99