Skip to content

feat: the catalog becomes a documentation site, on Astro - #7

Merged
YaelAnaya merged 1 commit into
simplify-0.3.0from
feat/docs-site-astro
Sep 21, 2026
Merged

YaelAnaya merged 1 commit into
simplify-0.3.0from
feat/docs-site-astro

Conversation

@YaelAnaya

Copy link
Copy Markdown
Contributor

Stacked on #6. Review that one first; this PR's diff is only the docs site.

examples/catalog was 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.

Component pages 40
Section pages 4
Live demos with source panels 142
Generated API parts 234

It dogfoods the package

The left navigation is the package's own Sidebar, search is a CommandDialog over a build-time index, the API tables are its Table, and the callout, the buttons and the keyboard hints are its Badge, Button and Kbd. 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>/, and Preview.astro reads 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.ts reads src/components/*.tsx with 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.ts holds the shape against every declaration style the components actually use, and fails the day a component has no page.

Scripts

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 shadows a script of that name.

docs:dev stops 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 verify passes: format, lint, 126 tests in 16 files, the build, astro check with 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 .astro files.

`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
YaelAnaya force-pushed the feat/components-0.4.0 branch from f744f8c to a8ea966 Compare September 21, 2026 00:14
YaelAnaya added a commit that referenced this pull request Sep 21, 2026
El commit revertido fue un error mío: la red de seguridad del troceado se
commiteó en esta rama en lugar de en una aparte, y se empujó con ella. Su
contenido vive, ya separado por propósito, en las tres ramas que abren los
PR #6, #7 y #8. El árbol vuelve a ser exactamente el de ae7454b.
Base automatically changed from feat/components-0.4.0 to simplify-0.3.0 September 21, 2026 00:29
@YaelAnaya
YaelAnaya merged commit 016758b into simplify-0.3.0 Sep 21, 2026
1 check passed
@YaelAnaya
YaelAnaya deleted the feat/docs-site-astro branch September 21, 2026 00:30
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