Skip to content

feat(site): adopt the noctcore theme with the observatory preset - #8

Merged
Shironex merged 10 commits into
mainfrom
feat/site-observatory
Sep 27, 2026
Merged

Shironex merged 10 commits into
mainfrom
feat/site-observatory

Conversation

@Shironex

Copy link
Copy Markdown
Contributor

Summary

The docs site moves onto the noctcore theme's token system with the Observatory preset: an editorial star-atlas look for guides you read top to bottom beside framed screenshots. The ESLint plugins site gets the sibling Nocturne preset in its own PR. Both share one token contract, so either site can switch presets by changing one file.

  • Theme (site/src/styles/noctcore/): base.css maps the --nc-* tokens onto Starlight's variables once, components.css holds the shared pieces, and presets/observatory.css sets the tokens for dark and light and @imports its own fonts. site.css holds this site's own rules (the splash banner, the output cards, the reference tables, the gallery frames). The old theme.css is gone.
  • Fonts: Newsreader (self-hosted through @fontsource-variable/newsreader 5.3.0, published 2026-07-19) replaces Space Grotesk; JetBrains Mono stays for code. The preset imports them, so only the active preset's fonts ship.
  • Code blocks: Expressive Code uses the preset's code colours (ec.config.mjs).
  • Components: the noctcore / showcase-kit wordmark, with the version pill moved next to the header icons. The pill's accessible name contains its visible text. Reference tables stack into labelled rows at phone width, the changelog meta line and commit links are theme markup, and gallery figures take the preset's frame radius.
  • Contract test (site/scripts/theme.test.ts): every custom property base.css and components.css read must be set by the preset in dark and light, so a preset cannot ship half-defined.

No content, generator logic, library or workflow changes.

Test plan

  • bun install --frozen-lockfile --cwd site clean; the lockfile change is only the font swap
  • bun run --cwd site test (163 pass), bun run --cwd site typecheck
  • bun run docs:build: 0 stub pages, 745 internal links and 611 fragments checked, changelog and feed checks pass
  • Built CSS carries the Newsreader @font-face rules with hashed woff2 files, and no bare @import is left
  • The contract test goes red when a token is deleted from the preset (checked twice)
  • Contrast on the built pages (computed colours, WCAG formula): every text pair 4.5:1 or better; lowest 5.47:1 dark and 4.88:1 light, both on Expressive Code's marked lines
  • Screenshots of the splash, getting started, a guide, the config reference, the gallery and the changelog in dark and light at 1440 and 390 px: none scrolls sideways
  • After merge: the deployed site renders the same

Follow-ups (not in this PR)

  • Expressive Code marked lines use its neutral default highlight. A preset tint in expressive-code.mjs would lift them.
  • The splash page has no mobile menu, so at phone width its version pill shows only on the docs pages.
  • No axe run yet on the built site.

@Shironex Shironex added enhancement New feature or request site The docs site under site/ and its build checks labels Sep 27, 2026
@Shironex
Shironex merged commit df41605 into main Sep 27, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request 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