Docs hub page
The entry of a documentation: the search in the middle of the hero, the collections each in its product's brand with their quick links, quick starts beside the most read pages, what is new, the owl's promise.
Web uniquement — React, depuis @krizaka/ui/docs-hub-page. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- The home of a documentation with several collections.
- A help centre's entry.
Quand ne pas l’utiliser
- For one article of the documentation.À la place : Docs article page
- For a plain list of entry points.À la place : Link card
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { DocsHubPage } from "@krizaka/ui/docs-hub-page";Exemples
krizaka.com/docs
The five collections, a quick start, the most read pages, what is new.
Documentation
Build with Krizaka
Every building block the products are made of, documented from its source.
Collections
Start in one line
npx orazaka installEvery page here is generated from the code it documents — when the code changes, the page does.
Props
A documentation hub: search first, the collections in their brand, quick starts, popular and new pages.
| Prop | Type | Défaut | Description |
|---|---|---|---|
collectionsrequis | readonly DocsCollection[] | — | The collections, each in its brand. |
collectionsTitlerequis | ReactNode | — | The collections' heading. |
titlerequis | ReactNode | — | The page's h1. |
eyebrow | ReactNode | — | A mono line above the title. |
lead | ReactNode | — | One sentence under it. |
linkAs | LinkComponent | — | The app's link component (Next's Link) for internal addresses. |
popular | { title: ReactNode; items: readonly DocsHubLink[]; } | — | The most read pages. |
promise | { label: ReactNode; text: ReactNode; } | — | The owl's promise at the foot: what this documentation guarantees. |
quickstarts | { title: ReactNode; children: ReactNode; } | — | The quick starts: a title and their samples (CodeBlocks, CodeTabs). |
search | ReactNode | — | The search, front and centre (a SearchField, a button that opens the command palette). |
searchHints | ReactNode | — | Under the search: what people look for (a few links or keys). |
whatsNew | { title: ReactNode; items: readonly DocsHubLink[]; } | — | What is new (releases from the registries, published pages). |
Accessibilité
- One
h1; each collection a list item with its main link and a named list of quick links. - The lists of pages are lists of links with their meta in words.
Bonnes pratiques
- The search first: most readers come to find one page.
- Each collection in its product's brand, with three or four quick links.
- What is new comes from the registries, never typed by hand.
- Words and content arrive as props; the motion is the platform's (
[data-reveal], still under reduced motion).
Composants liés
Générée depuis le code de @krizaka/ui 2.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub
Docs article page
A documentation article in the docs frame: the pages, the breadcrumb, the title with its facts, the reading column, the contents, previous and next.
Error page
When a page is not there: the code drawn huge, the bird that lost its way, one sentence, a search and the ways back — never a dead end.