Navigation, an in-page table of contents with the current section, content, and page actions.
Loading preview...
"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
"use client";
import { BookOpen, Boxes, Rocket, Settings2 } from "lucide-react";
import { useState } from "react";
import {
DocumentationPage,
DocumentationPageAction,
DocumentationPageActionLink,
DocumentationPageActions,
DocumentationPageBreadcrumb,
DocumentationPageContent,
DocumentationPageDescription,
DocumentationPageHeader,
DocumentationPageMain,
DocumentationPageNav,
DocumentationPagePager,
DocumentationPagePagerLink,
DocumentationPageSection,
DocumentationPageSectionTitle,
DocumentationPageTitle,
DocumentationPageToc,
DocumentationPageTocItem,
DocumentationPageTocList,
DocumentationPageTocTitle,
type DocumentationPageVariant,
} from "@/components/ui/uai-documentation-page";
import {
AppSidebarGroup,
AppSidebarGroupLabel,
AppSidebarHeader,
AppSidebarItem,
AppSidebarItemIcon,
AppSidebarItemLabel,
AppSidebarList,
AppSidebarMobileTrigger,
AppSidebarNav,
AppSidebarTitle,
} from "@/components/ui/uai-documentation-page-utils/src-components-ui-uai-app-sidebar";
import { BreadcrumbTrailItem } from "@/components/ui/uai-documentation-page-utils/src-components-ui-uai-breadcrumb-trail";
export function DocumentationPagePreview({
variant = "columns",
}: {
variant?: DocumentationPageVariant;
}) {
const [copied, setCopied] = useState(false);
return (
<DocumentationPage variant={variant} defaultActiveSection="install">
<DocumentationPageNav defaultValue="caching">
<AppSidebarHeader>
<AppSidebarTitle>Kiln docs</AppSidebarTitle>
<AppSidebarMobileTrigger />
</AppSidebarHeader>
<AppSidebarNav aria-label="Documentation">
<AppSidebarGroup>
<AppSidebarGroupLabel>Get started</AppSidebarGroupLabel>
<AppSidebarList>
<AppSidebarItem value="quickstart">
<AppSidebarItemIcon>
<Rocket size={16} />
</AppSidebarItemIcon>
<AppSidebarItemLabel>Quickstart</AppSidebarItemLabel>
</AppSidebarItem>
<AppSidebarItem value="concepts">
<AppSidebarItemIcon>
<BookOpen size={16} />
</AppSidebarItemIcon>
<AppSidebarItemLabel>Core concepts</AppSidebarItemLabel>
</AppSidebarItem>
</AppSidebarList>
</AppSidebarGroup>
<AppSidebarGroup>
<AppSidebarGroupLabel>Guides</AppSidebarGroupLabel>
<AppSidebarList>
<AppSidebarItem value="caching">
<AppSidebarItemIcon>
<Boxes size={16} />
</AppSidebarItemIcon>
<AppSidebarItemLabel>Build cache</AppSidebarItemLabel>
</AppSidebarItem>
<AppSidebarItem value="config">
<AppSidebarItemIcon>
<Settings2 size={16} />
</AppSidebarItemIcon>
<AppSidebarItemLabel>Configuration</AppSidebarItemLabel>
</AppSidebarItem>
</AppSidebarList>
</AppSidebarGroup>
</AppSidebarNav>
</DocumentationPageNav>
<DocumentationPageToc>
<DocumentationPageTocTitle>On this page</DocumentationPageTocTitle>
<DocumentationPageTocList>
<DocumentationPageTocItem section="install">Turn on the cache</DocumentationPageTocItem>
<DocumentationPageTocItem section="ci">Share it in CI</DocumentationPageTocItem>
<DocumentationPageTocItem section="ci-keys" level={3}>
Cache keys
</DocumentationPageTocItem>
<DocumentationPageTocItem section="clear">Clear the cache</DocumentationPageTocItem>
</DocumentationPageTocList>
</DocumentationPageToc>
<DocumentationPageMain>
<DocumentationPageHeader>
<DocumentationPageBreadcrumb>
<BreadcrumbTrailItem href="#docs">Docs</BreadcrumbTrailItem>
<BreadcrumbTrailItem href="#guides" parent>
Guides
</BreadcrumbTrailItem>
<BreadcrumbTrailItem current>Build cache</BreadcrumbTrailItem>
</DocumentationPageBreadcrumb>
<DocumentationPageTitle>Build cache</DocumentationPageTitle>
<DocumentationPageDescription>
Keep parsed templates and resized images between builds, so only changed pages do any
work.
</DocumentationPageDescription>
<DocumentationPageActions>
<DocumentationPageAction
onClick={() => {
void navigator.clipboard?.writeText("https://kiln.example/docs/build-cache");
setCopied(true);
}}
>
{copied ? "Link copied" : "Copy link"}
</DocumentationPageAction>
<DocumentationPageActionLink href="#edit">Edit this page</DocumentationPageActionLink>
</DocumentationPageActions>
</DocumentationPageHeader>
<DocumentationPageContent>
<DocumentationPageSection id="install">
<DocumentationPageSectionTitle>Turn on the cache</DocumentationPageSectionTitle>
<p>
The cache is on by default from Kiln 4.2. Older projects opt in with one line in{" "}
<code>kiln.config.ts</code>:
</p>
<pre>
<code>{'export default { cache: { dir: ".kiln/cache" } };'}</code>
</pre>
</DocumentationPageSection>
<DocumentationPageSection id="ci">
<DocumentationPageSectionTitle>Share it in CI</DocumentationPageSectionTitle>
<p>
Restore <code>.kiln/cache</code> before the build step and save it afterwards. A
restored cache brings a 2,400-page site from 41 seconds to about 9.
</p>
</DocumentationPageSection>
<DocumentationPageSection id="ci-keys">
<DocumentationPageSectionTitle>Cache keys</DocumentationPageSectionTitle>
<p>
Key the cache on your lockfile and Kiln version. Template and image entries are
already keyed by content, so stale entries are never used.
</p>
</DocumentationPageSection>
<DocumentationPageSection id="clear">
<DocumentationPageSectionTitle>Clear the cache</DocumentationPageSectionTitle>
<p>
Run <code>kiln cache clear</code> after upgrading plugins that change output without
changing their inputs.
</p>
</DocumentationPageSection>
</DocumentationPageContent>
<DocumentationPagePager>
<DocumentationPagePagerLink direction="previous" href="#concepts">
Core concepts
</DocumentationPagePagerLink>
<DocumentationPagePagerLink direction="next" href="#config">
Configuration
</DocumentationPagePagerLink>
</DocumentationPagePager>
</DocumentationPageMain>
</DocumentationPage>
);
}
function SourceSpecimen(){return <DocumentationPagePreview/>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider defaultTheme="dark" enableSystem={false}><div data-component-demo data-demo-theme="dark" data-theme="dark" className="dark" style={{background:"var(--background)",color:"var(--foreground)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}