140 lines
4.2 KiB
Text
140 lines
4.2 KiB
Text
---
|
|
import { Breadcrumbs } from "astro-breadcrumbs";
|
|
import "astro-breadcrumbs/breadcrumbs.css";
|
|
|
|
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/_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: string) => 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} />
|
|
</head>
|
|
<body class="docslayout">
|
|
<input
|
|
type="checkbox"
|
|
id="theme-manual-toggle"
|
|
class="theme-toggle-input"
|
|
aria-label="Toggle theme (light/dark)"
|
|
style="display: none;"
|
|
>
|
|
<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
|
|
<!-- @ts-expect-error -->
|
|
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
|
|
<!-- @ts-expect-error -->
|
|
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 />
|
|
<script>
|
|
import "@config/styling/animations_helper.ts";
|
|
import "@config/styling/theme_persistence.ts";
|
|
</script>
|
|
</body>
|
|
</html>
|
|
<script>
|
|
// FIXME: need to make this work properly, or fold into the markdown processor
|
|
let headings = document.getElementsByClassName("heading");
|
|
if (headings.length > 0) {
|
|
//@ts-expect-error
|
|
for (const heading of headings) {
|
|
let button = heading.querySelector("h2");
|
|
if (button) {
|
|
button.onclick = () => {
|
|
let link = window.location.href.split("#")[0];
|
|
link += `#${button.textContent?.trimEnd().replaceAll(" ", "-").toLowerCase()}`;
|
|
window.location.href = link;
|
|
navigator.clipboard.writeText(link);
|
|
heading.classList.toggle("copied");
|
|
setTimeout(() => heading.classList.remove("copied"), 1000);
|
|
};
|
|
}
|
|
let spanButton = heading.querySelector("span");
|
|
if (spanButton) {
|
|
spanButton.onclick = () => {
|
|
let link = window.location.href.split("#")[0];
|
|
link += `#${spanButton.textContent?.trim().replaceAll(" ", "-").toLowerCase()}`;
|
|
window.location.href = link;
|
|
navigator.clipboard.writeText(link);
|
|
spanButton.classList.toggle("copied");
|
|
setTimeout(() => heading.classList.remove("copied"), 1000);
|
|
};
|
|
}
|
|
}
|
|
}
|
|
</script>
|