Docs Page Template

1import * as React from 'react';
2 
3// @interlace/docs-page-template v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/docs-page-template
5// What changed since: https://ds.interlace.tools/c/docs-page-template#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — DocsPageTemplate
10 *
11 * Documentation page surface. Topbar at top, optional sidebar nav on the
12 * left (md+), main content in the centre with a `<Prose>` wrapper, and an
13 * optional TOC rail on the right (xl+).
14 *
15 * Used by `ds.interlace.tools` (the registry app's docs pages) and by
16 * `apps/docs` (the ESLint plugins docs). One template, two consumers.
17 *
18 * ## MIN_VIEWPORT — 320
19 */
20 
21import { cn } from '@/lib/utils';
22import { Container } from '@/components/ui/container';
23import { Prose } from '@/components/ui/prose';
24import { SectionBoundary } from '@/components/ui/section-boundary';
25import { Topbar } from '@/components/ui/patterns/topbar';
26import { Footer } from '@/components/ui/patterns/footer';
27import { Skeleton } from '@/components/ui/skeleton';
28import { Stack } from '@/components/ui/stack';
29 
30export const MIN_VIEWPORT = 320 as const;
31 
32interface DocsPageTemplateProps extends React.ComponentProps<'div'> {
33  topbar: React.ComponentProps<typeof Topbar>;
34  /** Left sidebar (typically a nav tree). Hidden below md. */
35  sidebar?: React.ReactNode;
36  /** Right rail (typically a TOC). Hidden below xl. */
37  toc?: React.ReactNode;
38  /** Page body — wrapped in <Prose>. */
39  body: React.ReactNode;
40  /** Optional footer at the bottom. */
41  footer?: React.ComponentProps<typeof Footer>;
42}
43 
44function DocsPageTemplate({
45  topbar,
46  sidebar,
47  toc,
48  body,
49  footer,
50  className,
51  ...props
52}: DocsPageTemplateProps) {
53  return (
54    <div
55      data-slot="docs-page-template"
56      data-min-viewport={String(MIN_VIEWPORT)}
57      className={cn(
58        'bg-background text-foreground flex min-h-screen flex-col',
59        className,
60      )}
61      {...props}
62    >
63      <Topbar {...topbar} />
64 
65      <div className="flex flex-1">
66        {sidebar ? (
67          <aside
68            className="border-border bg-card hidden w-64 shrink-0 border-r md:block"
69            aria-label="Section navigation"
70          >
71            <SectionBoundary name="docs-sidebar" skeletonVariant="card">
72              {sidebar}
73            </SectionBoundary>
74          </aside>
75        ) : null}
76 
77        <main className="flex-1 px-md py-xl">
78// … truncated