Skip to content

docs(site): show every hero, frame and readme layout - #16

Merged
Shironex merged 9 commits into
mainfrom
docs/layouts-gallery
Sep 27, 2026
Merged

Shironex merged 9 commits into
mainfrom
docs/layouts-gallery

Conversation

@Shironex

Copy link
Copy Markdown
Contributor

0.3.0 added six hero layouts, three frame styles, three backgrounds and five README layouts. The docs described them in tables but showed none of them, and the root README had no images and still described the 0.2 outputs. This PR renders every option from the gallery fixture and shows it.

How the images are made

  • bun run docs:gallery now also runs 19 small variant configs in site/gallery/variants/ (the web or tty config with one block changed, root: '..'). They run showcase hero or showcase frame on the raw captures the existing steps wrote, so nothing is captured twice.
  • showcase readme --layout <name> runs once per layout with the web config, and its standard output is written to site/gallery/readme/<name>.html (committed, the pages import them).
  • site/gallery/readme.config.mjs only lists gallery images: showcase readme prints the table in the root README from it.
  • Deterministic: two runs in a row leave git status clean, and every existing output and manifest entry is byte for byte unchanged (the manifest diff is additions only).

What each page shows now

  • Gallery: new sections after "Hero banner": "Hero layouts" (all six, plus the stack on mesh, dots and noise), "Frame styles and backgrounds" (six web styles, three tty styles with a note that tty refuses browser, and five backgrounds), and "README layouts" (each snippet as a live preview styled like a GitHub README, next to the raw HTML). Every tile has the image, the option name, the default marked, and the config block cut from the file that made it.
  • Hero guide: a grid of the six layouts at "Layouts" and of the three backgrounds under "Composition", linking to the gallery for the configs.
  • Frames guide: grids of the web styles, the tty styles and the backgrounds at their sections.
  • README guide: tabs with a live preview of each layout at "Layouts".
  • Splash: the output cards describe 0.3.0, and a band of four hero layouts links to the gallery. "clips are for terminal apps only in 0.2.0" now says "so far".
  • Getting started, CLI reference: showcase readme mentions --layout.

README

  • A banner at the top, the "From one config it produces" bullets brought up to 0.3.0, and a short "Layouts" section: a table of three hero layouts and the browser frame, printed by showcase readme. Captions and alt text say the images are Nightjar, the gallery fixture app.
  • Image URLs are absolute (https://noctcore.github.io/showcase-kit/gallery/...) so they render on npm too. The images appear once this merge deploys the site, and on npm with the next release.
  • New site test: fails when a README image URL under the site has no file in site/public/, and when the README table drifts from what showcase readme printed.
  • Every README layout and the README itself went through gh api markdown (gfm, context noctcore/showcase-kit): every width, align, <sub>, <h3>, <details>, <summary> and <img> survives.

Budget

Committed gallery files: 1031.2 KB before, 1791.1 KB after, budget 4096.0 KB (unchanged). The variants are sized for a docs tile (maxWidth: 1200, quality: 80 for web frames).

No change to src/, test/, lockfiles or dependencies, and no changeset (docs only).

@Shironex Shironex added documentation Improvements or additions to documentation site The docs site under site/ and its build checks area: frame Framed README images (src/frame) area: hero The hero banner (src/hero.ts) area: readme showcase readme: the README image table (src/readme.ts) labels Sep 27, 2026
@Shironex
Shironex merged commit ce30812 into main Sep 27, 2026
10 of 11 checks passed
@Shironex Shironex self-assigned this Sep 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: frame Framed README images (src/frame) area: hero The hero banner (src/hero.ts) area: readme showcase readme: the README image table (src/readme.ts) documentation Improvements or additions to documentation site The docs site under site/ and its build checks

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant