Files
zeekayandHanzo Dev 7d82a2c72a The docs are native: gui primitives, design tokens, and the real mark
@hanzo/docs 17 replaces the Tailwind/Base-UI stack. The home page now
says what Zoo is — mission, DSO and PoAI with their papers, ecosystem,
community — in gui primitives under a real nav, instead of a template's
demo cards. Static search gains its index; the logo is the three-circle
mark; linked headings paint at their own size.

Co-authored-by: Hanzo Dev <[email protected]>
2026-08-16 23:31:50 -07:00

2.1 KiB

Zoo Docs

docs.zoo.ngo — Zoo Labs Foundation documentation. Next.js App Router, static export to GitHub Pages.

The framework

@hanzo/docs 17. Layout and text are gui primitives from @hanzo/ui / @hanzo/gui, coloured by @hanzo/design's CSS variables. There is no Tailwind, no Radix, no Base UI, no shadcn, no postcss, no cn, no class strings. The contract is ~/work/hanzo/docs/packages/ui/README.md — read it before writing a component.

Style is props and tokens: <YStack bg="$color2" borderColor="$borderColor" rounded="$6" p="$4">. Never a hex, never a utility class.

The two stylesheets

  • app/global.css imports @hanzo/docs-ui/css/style.css (design tokens, the .fd-prose sheet, shiki colours) and adds only what belongs to this site.
  • app/gui.css is the gui atomic sheet, generated by hanzo-docs-css in predev/prebuild and imported once in app/layout.tsx. Generated, gitignored, never edited.

Content

content/docs/**.mdx → docs/ (generated by docs-mdx, gitignored) → lib/source.ts via docs.toSource(). Frontmatter icon: names resolve through components/icons.tsx, the one 'use client' boundary every icon in the app comes from — @hanzogui/* ship no client directives, so a server-evaluated module that imports gui directly builds its contexts against a React with no createContext.

Static: app/api/search/route.ts exports the index as a file the browser searches locally. There is no server. RootProvider is given search={{ options: { type: 'static' } }}.

Brand

Zoo only — the mark is public/zoo-logo.svg (three-circle RGB additive Venn). Never show Hanzo or Lux branding on this site. Palette is monochrome and comes from @hanzo/design; the site defines no colours of its own.

Webpack, not Turbopack

@hanzo/gui resolves against react-native module semantics: next.config.ts transpiles the gui packages, aliases react-native$ → react-native-web, puts .web.* first in resolve.extensions, and maps @react-native/assets-registry/registry to false. Build and dev both pass --webpack.