Skip to content

feat(site): link the React component demo from the docs site - #35

Merged
doidor merged 1 commit into
mainfrom
doidor/link-demo-from-docsite
Jun 24, 2026
Merged

doidor merged 1 commit into
mainfrom
doidor/link-demo-from-docsite

Conversation

@doidor

@doidor doidor commented Jun 24, 2026

Copy link
Copy Markdown
Owner

What & why

The react-demo "Pixie" showcase — Markbook's Storybook-style dogfood — was already built and copied into the docs-site deploy, so it's live in production at https://doidor.github.io/markbook/demos/react-demo/. But nothing on the docs site linked to it, so it was undiscoverable. This surfaces it from the front door and makes the production mount reproducible locally.

Changes

Link the demo from the docs site (examples/markbook-site/)

  • layouts/landing.html — "Demo" top-nav link + a "See the live demo →" hero CTA
  • pages/index.md — a spotlight callout in "What it is" + a "See the live Pixie demo →" link on the "Component stories" feature card
  • pages/guides/adding-stories.md — opening blockquote linking the live demo as the guide's payoff

All links are relative (./demos/react-demo/ from the landing page, ../demos/react-demo/ from guides/), matching Markbook's base: './' output.

Reproducible production build (CI === local)

  • scripts/mount-demo.mjs — cross-platform copy of react-demo/dist → site dist/demos/react-demo/
  • root example:site:build:demos script — builds the site, builds the demo, then mounts it (the copy must run last because markbook build empties its own dist via Vite emptyOutDir)
  • .github/workflows/deploy-docs.yml — three inline bash steps collapsed to one pnpm example:site:build:demos

Dogfooding note — footer + "What it is" lede now state the docs site is itself built with Markbook.

Verification

  • pnpm build + pnpm example:site:build:demos mount the demo; built index.html carries 4 ./demos/react-demo/ links, guides/adding-stories.html carries the 1 ../demos/react-demo/ link
  • Served over HTTP under the sub-path: demo index, a component page (components/Avatar.html), its relative ../assets/*.js React bundles, and pagefind/pagefind.js all return 200
  • pnpm lint (127 files) green; husky pre-commit ran the full suite (280 core + 22 cli tests) green
  • No packages/** source changed — examples + scripts + workflow + docs only

Co-authored-by: Copilot 223556219+Copilot@users.noreply.github.com

The react-demo "Pixie" showcase was already deployed under
demos/react-demo/ but nothing linked to it. Surface it from the docs
site and make the production mount reproducible:

- scripts/mount-demo.mjs + example:site:build:demos copy the built demo
  into the site dist (after the site build, which empties its own dist);
  deploy-docs.yml now calls the one script instead of inline bash.
- landing layout gains a Demo nav link and a "See the live demo" hero
  CTA; index.md and the adding-stories guide link the demo too.
- footer + "What it is" lede now state the docs site is itself built
  with Markbook.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@doidor
doidor merged commit 0b84d87 into main Jun 24, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant