quickshell-web/src/layouts/DocsLayout.astro
2025-07-22 01:46:48 -07:00

93 lines
2.7 KiB
Text

---
import { Breadcrumbs } from "astro-breadcrumbs";
import "astro-breadcrumbs/breadcrumbs.css";
import CreateCopyButtons from "@components/hooks/CreateCopyButtons.astro";
import PreTheme from "@config/PreTheme.astro";
import Header from "@components/Header.astro";
import Head from "@config/Head.astro";
import Nav from "@components/navigation/sidebars/nav/index.astro";
import type { ConfigHeading } from "@src/components/navigation/sidebars/types";
import Footer from "@src/components/Footer.astro";
import type { TypeData } from "@config/io/types";
interface Props {
title: string;
description: string;
headings?: ConfigHeading[];
type?: TypeData
}
const { title, description, headings, type } = Astro.props;
let url = Astro.url.pathname.split("/").filter(s => s !== "");
const breadcrumbs = [{
text: "custom",
href: "/",
}];
let linkPath = "";
if (url[0] === "docs") {
const { version } = Astro.params;
linkPath = `/docs/${version}`;
breadcrumbs.push({
text: `Docs (${version})`,
href: linkPath,
});
url = url.slice(2);
}
for (const segment of url) {
linkPath += `/${segment}`;
breadcrumbs.push({
text: segment[0].toUpperCase() + segment.slice(1),
href: linkPath,
});
}
---
<html lang="en" class="dark">
<head>
<Head description={description} title={title} />
<PreTheme />
<CreateCopyButtons />
</head>
<body class="docslayout">
<Header title={title} headings={headings} type={type}/>
<div class="docslayout-root">
<Nav mobile={false}/>
<div class="docslayout-inner" data-pagefind-body>
<Breadcrumbs crumbs={breadcrumbs} linkTextFormat="sentence" truncated={true} data-pagefind-ignore>
<svg
slot="index"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 256 256"
>
<title>Home</title>
<path
fill="currentColor"
d="m219.31 108.68l-80-80a16 16 0 0 0-22.62 0l-80 80A15.87 15.87 0 0 0 32 120v96a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-56h32v56a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-96a15.87 15.87 0 0 0-4.69-11.32M208 208h-48v-56a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v56H48v-88l80-80l80 80Z"
></path></svg
>
<svg
slot="separator"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 256 256"
><path
fill="currentColor"
d="m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32"
></path></svg
>
</Breadcrumbs>
<slot/>
</div>
<slot name="alongside-content"/>
</div>
<Footer/>
</body>
</html>