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.
Web only — React, from @krizaka/ui/docs-article-page. Beta: its API may still change in a minor version.
Why it is here. krizaka.com migrating its pages to the specialised template (TPL): the product documentation pages.
When to use
- Guides, references, concepts.
- Any page of a documentation with a list of pages.
When not to use
- For the documentation's entry.Use instead: Docs hub page
- For a component's generated page.Use instead: Component page
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { DocsArticlePage } from "@krizaka/ui/docs-article-page";Examples
Orazaka's CLI
An article with its pages, breadcrumb, facts, contents and pager.
Pages of the documentation
The CLI
Install, start and develop Orazaka from one command line.
Install
One command installs the engine, the console and the models you choose.
npx orazaka installStart
Then start it; the console opens on your machine.
FAQ
Questions as disclosures, each with a short answer, the contents beside them.
Pages of the documentation
Questions, answered
What people ask before they install.
Does anything leave my server?
No. Requests are answered by models on your machine; the only calls out are the ones you configure yourself.
Which models can I run?
Any model your hardware can hold. Orazaka lists the ones that fit before you download them.
How is it priced?
A plan with a monthly credit allowance. Credits are spent per job, and what is left is always shown.
Props
A documentation article: pages · breadcrumb, title, lead, facts, the reading column · contents; previous and next.
| Prop | Type | Default | Description |
|---|---|---|---|
sidebarrequired | ReactNode | — | The documentation's pages (a nav of links). |
sidebarLabelrequired | string | — | On a phone, the words that open the pages. |
titlerequired | ReactNode | — | The page's h1. |
breadcrumb | readonly { href: string; label: string; }[] | — | Where the page sits: { href, label } from the hub down. |
breadcrumbLabel | string | Breadcrumb | The breadcrumb's accessible name (Breadcrumb). |
facts | readonly Fact[] | — | Facts under the lead: updated on, reading time, the version it documents. |
lead | ReactNode | — | One or two sentences under it. |
linkAs | LinkComponent | — | The app's link component (Next's Link). |
pager | { previous?: { href: string; title: string; }; next?: { href: string; title: string; }; labels: { previous: string; next: string; }; } | undefined | — | The previous and next pages, and their labels. |
toc | { label: string; items: readonly { id: string; label: string; }[]; } | — | The contents (its h2s): { id, label }, and its label (On this page). |
Accessibility
- The breadcrumb is a named
navwith an ordered list; previous and next a namednav. - On a phone the pages fold into a disclosure; the contents become chips.
Best practices
- Keep the reading column under 46rem; headings
h2with ids for the contents. - Say when the page was updated and how long it takes to read.
- Words and content arrive as props; the motion is the platform's (
[data-reveal], still under reduced motion).
Related components
Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub