Skip to content

Commit f3c4e18

Browse files
EricMChavezclaudeAustin1serb
authored
docs: replace examples/demo with Fumadocs site for preview deploys (#40)
* chore(docs): scaffold Fumadocs app in docs/ Stage existing docs/*.md to docs-legacy/ (git-tracked rename) and scaffold a Next.js 15 + Fumadocs 15.8.5 + Tailwind v4 app into docs/. Adds docs to pnpm-workspace.yaml. Legacy files will be migrated into apps/docs/content/docs/*.mdx in a follow-up commit. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: migrate legacy markdown to Fumadocs MDX Migrate 7 public docs from docs-legacy/*.md to docs/content/docs/*.mdx with frontmatter, updated internal links (/docs/*), and no manual TOCs (Fumadocs auto-generates). Split installation into getting-started/ {next,vite}.mdx. Replace Fumadocs starter index.mdx with a real docs home, delete starter test.mdx. Add meta.json for sidebar ordering with section separators (Getting Started, Core Concepts, Advanced). Delete legacy demo.md (duplicative) and rules.md (empty). docs-legacy still holds CONTRIBUTING.md, internal.md, size.md, assets/ pending Phase 5. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: add landing page with inline Zero-UI demo Wire @react-zero-ui/core into the docs workspace: PostCSS plugin ahead of Tailwind, bodyAttributes spread on <body> in root layout, tsconfig path alias @zero-ui/attributes, .zero-ui/ gitignored. Replace default Fumadocs home page with a full landing: hero + install snippet + CTAs, useState-vs-useUI side-by-side, inline theme/accent demo (dog-foods Zero-UI itself — zero re-renders on click), why-it's-fast cards, and GitHub/npm/FAQ links. Update nav branding to "React Zero-UI" with Docs + GitHub links. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: add real-world demo for hybrid useUI + useState pattern New /demo/real-world page puts a React-only pane and a Zero-UI hybrid pane side-by-side, both fetching the same mock data with a 650 ms simulated delay. React pane uses useState for loading; Zero-UI pane flips data-demo-search-status on <body> via useUI so the skeleton appears via CSS, not reconciliation. Render counters in each pane make the difference visible during the loading transition. Cross-link from the landing page hero ("See it in action"), a Callout at the top of usage-examples, and a new FAQ entry on when to mix useUI with useState. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: add perf comparison demo ported from examples/demo Scoped Phase 5: port the flagship tabbed Zero-UI vs React state comparison (examples/demo (test)/page.tsx) to /demo/perf on the docs site. State keys namespaced with perf-* prefix to avoid collision with other demos. Icon sprite dep replaced with lucide-react's Atom icon. Landing page Demo section now links to both /demo/perf and /demo/real-world. examples/demo left intact — deeper perf subpages (react/ssr/zero-ui) and the sprite demo are out of scope for this cut. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * chore: dissolve docs-legacy/ Phase 2 migrated 7 public docs into docs/content/docs/*.mdx with Fumadocs. Those legacy sources can now go. Remaining maintainer-facing files relocated out of docs-legacy: - CONTRIBUTING.md → repo root (with Monorepo Structure updated to mention docs/ and examples/demo/, and a Bundle Size section merged in from the old size.md) - internal.md → packages/core/ARCHITECTURE.md (colocated with the variant extractor / PostCSS pipeline it describes) - assets/ → docs/public/assets/ (usable by the docs site going forward) docs-legacy/ is now empty and removed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: add metadataBase, robots.txt, and sitemap.xml Clears the "metadataBase property is not set" build warning by defining it in the root layout. Site URL resolves from NEXT_PUBLIC_SITE_URL, falls back to VERCEL_URL (auto-set on preview deploys), and ultimately defaults to https://zero-ui.dev. robots.ts points crawlers at the sitemap; sitemap.ts emits entries for the static routes (/, /demo/perf, /demo/real-world) plus every docs page pulled from Fumadocs source.getPages(). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: syntax-highlight landing + real-world code blocks Swap hand-styled <pre><code> blocks for Fumadocs' <DynamicCodeBlock lang="tsx" />. Same blocks that already render correctly inside MDX now get the same Shiki-based highlighting on the landing mental-model cards and the real-world demo's "code that matters" section. Cost: ~37 kB of Shiki runtime on first load for pages that use it. Acceptable for marketing/demo pages; we're not using it on docs pages where Fumadocs already highlights at build time. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * docs: fix CssVar identifier (actual export is lowercase cssVar) packages/core/src/index.ts exports \`cssVar\` (a unique Symbol used as a typeof marker for the flag parameter of useUI/useScopedUI). The legacy markdown docs called it \`CssVar\` throughout — a doc bug that got migrated verbatim into the new MDX pages. Correct all 14 references across api-reference, usage-examples, and faq. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * chore: move Fumadocs app from docs/ into examples/demo/ Replaces the old Next.js demo app at examples/demo with the Fumadocs docs site previously living at docs/. Reuses the existing Vercel project pointed at examples/demo so each PR will get a preview deploy of the docs site for free, instead of needing a separate Vercel project. The valuable parts of the old demo (perf comparison, real-world hybrid example) were already ported into the docs app in afedd8a / 16dd037, so the deletion is safe. Also drops the now-unused 'docs' entry from pnpm-workspace.yaml; the existing 'examples/*' glob covers the new location. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * chore(docs): silence Next monorepo build warnings Two small fixes for the Next 15 + pnpm-monorepo build: 1. Set outputFileTracingRoot to the repo root in next.config.mjs. Without it, Next's file tracer can't follow pnpm's nested .pnpm/... layout and warns about external packages it can't resolve. 2. Add shiki@3.23.0 as a direct dep of the docs package. shiki is on Next's serverExternalPackages default list and Fumadocs uses it for syntax highlighting; promoting it from a transitive to a direct dep gives Next a path it can resolve from the project dir. Both warnings now silent on next build. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(docs): consolidate home demo with Zero-UI vs React state comparison The home page previously had two side-by-side demo sections doing the same job: a single Zero-UI widget ("Try it right here") and a separate /demo/perf page with a Zero-UI vs React state comparison. The comparison is the more compelling demo, so promote it to the home page and drop the standalone /demo/perf route. While there, add a brand-tinted "renders: N" badge to both panes of the comparison and the existing hybrid-pattern demo, so the no-rerender claim is visible without needing React DevTools. The badge uses suppressHydrationWarning because the count differs intentionally between the server's single render and the client's first render (double-invoked under reactStrictMode in dev). - Move app/(home)/demo/perf/_*.tsx to app/(home)/_components/ and rename to PascalCase to match LandingDemo's prior convention. - Delete LandingDemo and the /demo/perf page. - Replace LandingDemo with Comparison on the home page; rewrite the section copy to describe the new side-by-side; drop the now-stale /demo/perf link card from the demo grid. - Use violet directly (not fd-primary tokens) for the perf badges since the perf demo has its own local light/dark theme that's independent of the global Fumadocs theme. - Drop /demo/perf from sitemap.ts. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * docs: stub WIP pages outside intro and getting started Limit Austin's review surface for the initial PR to the introduction and getting-started guides. The other pages keep their original frontmatter (so the sidebar nav, descriptions, and OG metadata stay intact) but render a Fumadocs <Callout> pointing readers back to the intro / getting started and the GitHub repo until the prose is written and reviewed. Stubbed: api-reference, experimental, faq, migration-guide, usage-examples. The meta.json layout (Core Concepts / Advanced sections) is untouched so the docs structure stays visible. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(docs): commit .zero-ui artifacts so Vercel cold builds succeed The Fumadocs scaffold's .gitignore (now examples/demo/.gitignore) ignores .zero-ui/, which is fine for local dev because the artifacts get regenerated by the Zero-UI PostCSS plugin during the next CSS pass. But on a clean Vercel checkout there's nothing for webpack to resolve when app/layout.tsx imports @zero-ui/attributes — the import is resolved before the PostCSS plugin gets a chance to run, and the build dies with "Module not found: Can't resolve '@zero-ui/attributes'". The previous "react-zero" examples/demo solved this by committing .zero-ui/attributes.{js,d.ts}. Restoring that pattern: drop .zero-ui from .gitignore and check in the current generated files. The PostCSS plugin overwrites them in place on each build, so they only show as modified when the variant set actually changes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(docs): use fileURLToPath instead of import.meta.dirname in next.config import.meta.dirname requires Node 20.11+. The Vercel project for this repo predates the new examples/demo and may be pinned to an older Node version, in which case loading next.config.mjs crashes with a TypeError on import.meta.dirname before the build even starts. Switching to path.dirname(fileURLToPath(import.meta.url)) computes the same value and works on Node 14+. No behavior change otherwise. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * update real world demo * fix hydration + remove em dash * add render count badge * add render tracker * fix render tracker * add canonical * sync darkmode * update home page demo * add metadata --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Austin1serb <serbaustin@gmail.com>
1 parent 9dfc958 commit f3c4e18

101 files changed

Lines changed: 5028 additions & 6242 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

docs/CONTRIBUTING.md renamed to CONTRIBUTING.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,12 @@ Stay **pre-rendered, declarative, and brutally fast.**
2525
packages/
2626
├── core -> @react-zero-ui/core (library logic + postcss)
2727
└── cli -> create-zero-ui (npx installer)
28+
docs/ -> Next.js + Fumadocs docs site (apps/docs replacement)
29+
examples/demo/ -> Live performance + sprite showcase app
2830
```
2931

32+
For the variant extractor / PostCSS pipeline internals (AST parsing, literal resolution, token scanning), see [packages/core/ARCHITECTURE.md](packages/core/ARCHITECTURE.md).
33+
3034
---
3135

3236
## Local Setup
@@ -85,6 +89,26 @@ pnpm test # Runs all of the above
8589

8690
---
8791

92+
## Bundle Size
93+
94+
This repo measures bundle size from the built `@react-zero-ui/core` entry.
95+
96+
```bash
97+
pnpm build
98+
pnpm size # prints the gzipped byte count
99+
pnpm size:badge # refreshes the README badge JSON
100+
```
101+
102+
The `size` script runs:
103+
104+
```bash
105+
npx esbuild ./packages/core/dist/index.js --bundle --minify --format=esm --external:react --define:process.env.NODE_ENV='"production"' | gzip -c | wc -c
106+
```
107+
108+
`size:badge` writes [`.github/badges/core-size.json`](.github/badges/core-size.json), which the README badge reads through a Shields endpoint. Run it after a build when you want to refresh the number.
109+
110+
---
111+
88112
## Code of Conduct
89113

90114
Keep it respectful and accessible. Push ideas hard, not people.

0 commit comments

Comments
 (0)