75 lines
2.5 KiB
Plaintext
75 lines
2.5 KiB
Plaintext
---
|
|
import BaseLayout from "@components/base/BaseLayout.astro";
|
|
import type { DocsEntry, MenuItem } from "@/types";
|
|
import DocBrowser from "@components/docs/Browser.astro";
|
|
import TableOfContents from "@components/common/TableOfContents.astro";
|
|
import { render } from "astro:content";
|
|
import EntryHeader from "@components/common/EntryHeader.astro";
|
|
|
|
interface Props {
|
|
entry: DocsEntry;
|
|
browserMenu: MenuItem[];
|
|
}
|
|
|
|
const { entry, browserMenu } = Astro.props;
|
|
const { Content, headings } = await render(entry);
|
|
const { title, description, hideNav, hideToc, image } = entry.data;
|
|
|
|
const globalHideNav = false; // set true to always hide the nav bar (left side menu)
|
|
const globalHideToc = false; // set true to always hide the table of contents (right side menu)
|
|
const tocDepth = 3; // maximum depth for the table of contents 1 = h1, etc
|
|
|
|
const actuallyHideNav = hideNav || globalHideNav;
|
|
const actuallyHideToc = hideToc || globalHideToc || headings.filter((heading) => heading.depth <= tocDepth).length === 0;
|
|
|
|
let articleClass = "";
|
|
let navClass = "";
|
|
let tocClass = "";
|
|
|
|
if (actuallyHideNav && actuallyHideToc) {
|
|
// Both nav and toc are hidden
|
|
navClass = "hidden";
|
|
articleClass = "w-full";
|
|
tocClass = "hidden";
|
|
} else if (!actuallyHideNav && actuallyHideToc) {
|
|
// Nav is visible, toc is hidden
|
|
navClass = "hidden md:flex md:w-1/4 lg:w-1/5";
|
|
articleClass = "w-full md:w-3/4 lg:w-4/5";
|
|
tocClass = "hidden";
|
|
} else if (actuallyHideNav && !actuallyHideToc) {
|
|
// Nav is hidden, toc is visible
|
|
navClass = "hidden";
|
|
articleClass = "w-full md:w-3/4 lg:w-4/5";
|
|
tocClass = "hidden md:flex md:w-1/4 lg:w-1/5";
|
|
} else {
|
|
// Both nav and toc are visble
|
|
navClass = "hidden md:flex md:w-1/4 lg:w-1/5";
|
|
articleClass = "w-full md:w-3/4 lg:w-3/5";
|
|
tocClass = "hidden lg:flex lg:w-1/5";
|
|
}
|
|
---
|
|
|
|
<BaseLayout title={title} image={image?.src} description={description}>
|
|
<section class="flex container p-4">
|
|
<div class=`max-h-static_sidemenu sticky top-[5rem] mr-4 ${navClass}`>
|
|
<DocBrowser
|
|
menu={browserMenu}
|
|
currentPage={entry.id.replace("/-index", "")}
|
|
/>
|
|
</div>
|
|
<div class=`w-full ${articleClass}`>
|
|
<article class="">
|
|
<section class="">
|
|
<EntryHeader entry={entry} showImage showPubDate />
|
|
</section>
|
|
<section class="content mb-4 glass px-4 rounded-lg">
|
|
<Content />
|
|
</section>
|
|
</article>
|
|
</div>
|
|
<div class=`max-h-static_sidemenu sticky top-[5rem] ml-4 ${tocClass}`>
|
|
<TableOfContents headings={headings} tocDepth={tocDepth} />
|
|
</div>
|
|
</section>
|
|
</BaseLayout>
|