layouts

HelpCenter

Full in-product knowledge base surface from @8maverik8/help: categories + search on the left, the selected article (with voice narration) on the right. Rendered in the product's own design tokens.

A drop-in Help Center engine. The platform ships the machinery; each product hosts its OWN content — Markdown in content/help/** compiled to static JSON + mp3 in the product's public dir. There is no end-user editor; articles are authored by agents. For per-page contextual help, pair it with <HelpTriggerButton> (in the topbar) + <HelpRail> (a docked, resizable panel rendered into AppShell's rightRail slot) — the dock shrinks the main content instead of overlaying it. This very site dogfoods it: the Help button in the top bar opens the dock. The example below is the full standalone surface, live on this site's own content.

Install

Import from the workspace package:

import { HelpProvider, HelpCenter, HelpRail, HelpTriggerButton } from "@8maverik8/help";

Examples

Live Help Center

The full surface, reading this site's own help content (dogfooding). The contextual dock is wired into the top bar — open it with the Help button.

Select an article

Browse categories and articles on the left.

// app/layout.tsx — mount once inside the authed app
import { HelpProvider, HelpRail, HelpTriggerButton } from "@8maverik8/help";
import { AppShell, UserMenu } from "@8maverik8/design";

<HelpProvider product="archi" locale="ru" enabled={isAuthed}>
  <AppShell
    topbarRight={<><HelpTriggerButton /><UserMenu …/></>}
    rightRail={<HelpRail />}   // docks beside content, shrinks main, resizable
  >
    {children}
  </AppShell>
</HelpProvider>

// app/help/[[...slug]]/page.tsx — the full standalone surface
import { HelpCenter } from "@8maverik8/help";
<HelpCenter slug={slug} onSelectArticle={(s) => router.push(`/help/${s}`)} />

Anatomy

HelpProviderMounted once near the app root: product, locale, basePath, labels (i18n), and the auth gate (enabled).
HelpCenterThe full /help surface. Controlled (slug + onSelectArticle → router) or uncontrolled.
HelpRailDocked, resizable contextual panel — rendered into AppShell's rightRail; shrinks the main content rather than overlaying it.
HelpTriggerButtonTopbar trigger (next to the avatar) that toggles the dock.
content/help/**.mdThe knowledge base: frontmatter (title, category, order, pageKeys, video, cover) + Markdown body.
buildHelpContent()Node build step (@8maverik8/help/build) → manifest + article JSON + ElevenLabs narration, cached by content hash.

Guidelines

Author articles as Markdown in the consumer repo's content/help and run the build step.Content + hosting live in each product — like the design system gives components, not pages.
Prefer the docked HelpRail over an overlay for contextual help — readers should see the article and the page at the same time.
Localize via the labels prop and keep article content per-product. Write for the ear — every article is narrated.
Hand-roll a help UI, a custom article renderer, or fetch help content from the platform.Each product owns its knowledge base; reuse the engine.