feat: the catalog becomes a documentation site, on Astro - #7
Merged
Merged
Conversation
`examples/catalog` was one long page of specimens for manual inspection. It is now a documentation site: a page per component with a lede, the library its behaviour comes from, live demos, the usage a consumer copies, an anatomy tree and an API table, plus Introduction, Installation, Theming and States. Astro 7 with React islands and Tailwind v4. The site dogfoods the package: the left navigation is the package's own Sidebar, search is a Command palette over a build-time index, and the API tables are its Table. Demos live one story per file under `src/demos/<name>/`, and the file itself is the code the "View Code" panel shows, so a sample cannot drift from what it renders. API tables are read from the components' source by `scripts/extract-api.ts` with the TypeScript compiler API: cva variants with their defaults, declared props, inherited props a component gives a default to. The JSON is generated, never committed, and `tests/docs/api-extractor.test.ts` holds its shape and fails the day a component has no page. `pnpm catalog` and `pnpm catalog:check` become `pnpm docs:dev` and `pnpm docs:check`; the colon is not decoration, `pnpm docs` is a pnpm built-in and would shadow the script. `docs:dev` stops a running dev server and drops Vite's dependency cache before building, because a package rebuilt under a live server leaves the optimizer serving two incompatible bundles and every island fails to hydrate.
YaelAnaya
force-pushed
the
feat/components-0.4.0
branch
from
September 21, 2026 00:14
f744f8c to
a8ea966
Compare
YaelAnaya
force-pushed
the
feat/docs-site-astro
branch
from
September 21, 2026 00:14
35e85ab to
ec597e4
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stacked on #6. Review that one first; this PR's diff is only the docs site.
examples/catalogwas one long page of specimens for manual inspection. It becomes a documentation site: a page per component with a lede, the library its behaviour comes from, live demos, the usage a consumer copies, an anatomy tree and an API table. Plus Introduction, Installation, Theming and States.Astro 7 with React islands and Tailwind v4, in the same folder, still a workspace member importing the real package through the real exports map.
It dogfoods the package
The left navigation is the package's own
Sidebar, search is aCommandDialogover a build-time index, the API tables are itsTable, and the callout, the buttons and the keyboard hints are itsBadge,ButtonandKbd. Where a page needs no interaction the React component renders to static HTML with no client JS.Demos are the code sample
One story per file under
src/demos/<name>/, andPreview.astroreads that file's own source for the "View Code" panel. A sample cannot drift from what it renders, and forty pages could be authored in parallel without touching a shared file.API tables are generated
scripts/extract-api.tsreadssrc/components/*.tsxwith the TypeScript compiler API: cva variants with their defaults, declared props with their JSDoc, and inherited props a component gives a default to. The JSON lands in a gitignored folder.tests/docs/api-extractor.test.tsholds the shape against every declaration style the components actually use, and fails the day a component has no page.Scripts
pnpm catalogandpnpm catalog:checkbecomepnpm docs:devandpnpm docs:check. The colon is not decoration:pnpm docsis a pnpm built-in and shadows a script of that name.docs:devstops a running dev server and drops Vite's dependency cache before it builds. A package rebuilt under a live dev server can leave the optimizer serving two incompatible bundles, and then every island fails to hydrate while the server-rendered HTML still looks correct. Measured cost of always starting clean: none, cold and warm startup are both eight seconds.Verification
pnpm verifypasses: format, lint, 126 tests in 16 files, the build,astro checkwith zero errors, 46 pages built, and the packed-consumer test. Checked in the browser in both themes: the theme toggle, the search palette, the code panels, and the Dialog, Drawer, ContextMenu, Combobox and Sidebar demos.Not included, deliberately: a deploy workflow, a "Copy Page" button, full-text search, and ESLint for
.astrofiles.