Lazysite themes explorer

How the gallery works

The home page builds itself from a registry folder - here is the contract for adding a theme.

The theme explorer home page is generated, not hand-written. It scans a registry folder and loops over the results to render the cards, so a new theme appears the moment its card file is added - no edit to the gallery itself.

The pieces of a theme entry

Each theme in the gallery is four things:

  1. A demo page at /<slug> (for example /nova) - the full-screen page the card links to.
  2. A layout + theme installed under lazysite/layouts/ (for statement and experiment themes) or just a theme on the default layout (for basic themes).
  3. A thumbnail and a large preview image, captured from the demo page.
  4. A registry card - a tiny Markdown file the gallery scans.

The registry card

One file per theme, under a group folder. The filename is the slug, and the slug is both the demo URL (/<slug>) and the image name.

/gallery/1-basic/<slug>.md        - basic themes (on the default layout)
/gallery/2-statement/<slug>.md    - statement layouts
/gallery/3-experiment/<slug>.md   - experiments

The card's front matter:

---
title: NOVA                       # display name on the card
subtitle: Dark and kinetic - ...  # one-line tagline
search: false                     # keep registry files out of search
tags:                             # palette for the mini-preview swatch:
  - 7C5CFF                        #   accent   (hex WITHOUT the # - it is a YAML comment)
  - 19E3C4                        #   accent-2
  - 0A0A12                        #   background
---
Any body text (ignored by the gallery).

Why the palette lives in tags: the scan: loop currently exposes only title, subtitle, url and tags - not arbitrary front-matter keys. When scan is extended to pass custom keys, a card will instead declare accent:, kind: and demo: directly, and this page will be updated.

The images

Capture the demo page with a headless browser at 1280x800, then make two sizes:

/img/themes/<slug>.jpg      - thumbnail, ~760px wide (shown on the card)
/img/themes/<slug>-lg.jpg   - ~1200px wide (shown in the hover lightbox)

How the page renders it

The home page declares three scans and loops each into a grid:

tt_page_var:
  basic: scan:/gallery/1-basic/*.md sort=title
  statement: scan:/gallery/2-statement/*.md sort=title
  experiment: scan:/gallery/3-experiment/*.md sort=title

[% FOREACH t IN statement %]
  <a href="/[% t.url.split('/').last %]"> ...card with #[% t.tags.0 %] swatch... </a>
[% END %]

The group (Basic / Statement / Experiment) is the section it sits in, and the card's kind badge comes from that group.

To add a theme

  1. Build the layout + theme and publish the demo page at /<slug>.
  2. Screenshot it to /img/themes/<slug>.jpg and /img/themes/<slug>-lg.jpg.
  3. Drop a registry card at /gallery/<group>/<slug>.md.
  4. That's it - the card shows up, sorted into its section, with a live preview.

← Back to the gallery