spotube/website/src/layouts/DocLayout.astro

86 lines
2.2 KiB
Plaintext

---
import DocSideBar from "~/components/navigation/DocSideBar.astro";
import Breadcrumbs from "~/modules/docs/Breadcrumbs.astro";
import TableOfContents from "~/modules/docs/TableOfContents.astro";
interface PageHeadings {
depth: number;
slug: string;
text: string;
}
// interface Chip {
// label: string;
// href: string;
// icon?: string;
// preset?: string;
// }
interface Props {
frontmatter: {
// Required ---
title: string;
description: string;
};
headings: PageHeadings[];
}
const { frontmatter, headings } = Astro.props;
// GitHub Settings
// const branch = "website";
// URLs
// const urls = {
// githubDocsUrl: `https://github.com/KRTirtho/spotube/tree/${branch}/website/src/content`,
// githubSpotubeUrl: `https://github.com/KRTirtho/spotube`,
// };
---
<div
class="container mx-auto grid grid-cols-1 xl:grid-cols-[240px_minmax(0px,_1fr)_280px] px-4 xl:px-10"
>
<!-- Navigation -->
<aside
class="hidden xl:block self-start sticky top-[70px] h-[calc(100vh-70px)] py-4 xl:py-10 overflow-y-auto pr-10"
data-navigation
>
<DocSideBar />
</aside>
<!-- Main -->
<main
class="px-4 xl:px-10 py-10 space-y-8 [&_.scroll-header]:scroll-mt-[calc(70px+40px)]"
>
<!-- Header -->
<header class="scroll-header space-y-4" data-pagefind-body id="_top">
<!-- Breadcrumbs -->
<Breadcrumbs />
<h1 class="h1">{frontmatter.title ?? "(title)"}</h1>
<p class="text-lg opacity-60">
{frontmatter.description ?? "(description)"}
</p>
</header>
<!-- Content -->
<article class="space-y-8" data-pagefind-body>
<slot />
</article>
<!-- Footer -->
<!-- <Footer classList="py-4 px-4 xl:px-0" /> -->
</main>
<!-- Sidebar -->
<aside
class="hidden xl:block self-start sticky top-[70px] h-[calc(100vh-70px)] py-4 xl:py-10 space-y-8 overflow-y-auto"
>
<!-- Carbon Ads -->
<script
is:inline
async
type="text/javascript"
src="//cdn.carbonads.com/carbon.js?serve=CWYD627U&placement=carbonadsnet"
id="_carbonads_js"></script>
<!-- Table of Contents -->
<TableOfContents {headings} />
<!-- Promot -->
<!-- <div class="card aspect-video flex justify-center items-center preset-tonal">(promo)</div> -->
</aside>
</div>