Files
manycoretech--aholo-viewer/website/src/layouts/DocsLayout.astro
T
2026-07-13 13:18:05 +08:00

92 lines
2.7 KiB
Plaintext

---
import BaseLayout from './BaseLayout.astro';
import Breadcrumbs from '../components/site/Breadcrumbs.astro';
import Sidebar from '../components/site/Sidebar.astro';
import DocToc from '../components/docs/DocToc.astro';
import type { Locale } from '../i18n/locales.js';
import type { SidebarItem } from '../utils/navigation.js';
import '../styles/docs.css';
interface DocTocHeading {
depth: number;
slug: string;
text: string;
}
interface Props {
lang: Locale;
title: string;
description: string;
sectionLabel: string;
sectionHref: string;
sidebarItems: SidebarItem[];
sidebarSearch?: {
label: string;
empty: string;
};
tocHeadings?: readonly DocTocHeading[];
tocLabel?: string;
}
const { lang, title, description, sectionLabel, sectionHref, sidebarItems, sidebarSearch, tocHeadings, tocLabel } =
Astro.props;
const resolvedTocLabel = tocLabel ?? (lang === 'zh-CN' ? '本页目录' : 'On This Page');
const hasGeneratedToc = tocHeadings?.some(heading => heading.depth === 2 || heading.depth === 3) ?? false;
const codeCopyConfigJson = JSON.stringify(
lang === 'zh-CN'
? {
copyLabel: '复制',
copiedLabel: '已复制',
failedLabel: '复制失败',
}
: {
copyLabel: 'Copy',
copiedLabel: 'Copied',
failedLabel: 'Failed',
},
).replace(/</g, '\\u003c');
---
<BaseLayout lang={lang} title={title} description={description} pageClass="docs-page">
<Fragment slot="mobileNav">
<Sidebar items={sidebarItems} currentPath={Astro.url.pathname} search={sidebarSearch}>
{
hasGeneratedToc && (
<Fragment slot="activeContent">
<DocToc headings={tocHeadings ?? []} label={resolvedTocLabel} />
</Fragment>
)
}
</Sidebar>
</Fragment>
<main class:list={['docs-shell', hasGeneratedToc && 'has-toc']}>
<Sidebar items={sidebarItems} currentPath={Astro.url.pathname} search={sidebarSearch} />
<article class="docs-content">
<Breadcrumbs
items={[
{ label: sectionLabel, href: sectionHref },
{ label: title, href: Astro.url.pathname },
]}
/>
<header class="docs-heading">
<h1>{title}</h1>
<p>{description}</p>
</header>
<slot />
</article>
{hasGeneratedToc && <DocToc headings={tocHeadings ?? []} label={resolvedTocLabel} />}
</main>
<script is:inline type="application/json" data-docs-code-copy-config set:html={codeCopyConfigJson} />
</BaseLayout>
<script>
import { mountDocsCodeTools } from '../client/docs.js';
const configElement = document.querySelector<HTMLScriptElement>('[data-docs-code-copy-config]');
if (configElement?.textContent) {
mountDocsCodeTools(JSON.parse(configElement.textContent));
}
</script>