discord.js/apps/guide/src/components/SidebarLayout.astro

---
import { Separator } from 'ariakit/separator';
import type { MarkdownLayoutProps } from 'astro';
import { ExternalLink } from './ExternalLink.jsx';
import { Navbar } from './Navbar.jsx';
import { Outline } from './Outline.jsx';
import { PageButton } from './PageButton.jsx';
import { SidebarItems } from './SidebarItems.jsx';
import { generateGithubURL } from '~/util/url.js';

const pages = await Astro.glob<{ category: string; title: string }>('../pages/**/*.mdx');

type Props = MarkdownLayoutProps<{}>;
const { headings, url, frontmatter } = Astro.props;

const groupedPages = pages.reduce<Record<string, typeof pages>>((acc, page) => {
	const { category } = page.frontmatter;
	acc[category] ??= [];

	acc[category]?.push(page);
	return acc;
}, {});

// @ts-expect-error props is not typed
const category = frontmatter.category as string;

const curCategoryPages = groupedPages[category];
const curCategoryIndex = curCategoryPages!.findIndex((page) => page.url === url);

const pagePrev = curCategoryPages![curCategoryIndex - 1];
const pageNext = curCategoryPages![curCategoryIndex + 1];
---

<script>
	window.addEventListener('load', () => {
		const headings = document.querySelectorAll(
			'div.level-h1 > h1, div.level-h2 > h2, div.level-h3 > h3, div.level-h4 > h4',
		);

		const headingsObserver = new IntersectionObserver(
			(entries) => {
				entries.forEach((entry) => {
					if (entry.isIntersecting) {
						const location = window.location.toString().split('#')[0];
						history.replaceState(null, '', location + '#' + entry.target.id);
					}
				});
			},
			{
				root: null,
				rootMargin: '-100px 0% -66%',
				threshold: 1.0,
			},
		);

		headings.forEach((heading) => headingsObserver.observe(heading));
	});
</script>

<Navbar client:load>
	<div class="flex flex-col gap-3 p-3 pb-32 lg:pb-12" slot="pages">
		<SidebarItems client:load pages={pages} />
	</div>
</Navbar>
<main class="pt-18 lg:pl-76 xl:pr-64">
	<article class="dark:bg-dark-600 bg-light-600">
		<div class="dark:bg-dark-800 relative z-10 min-h-[calc(100vh_-_70px)] bg-white p-6 pb-20 shadow">
			<div class="prose max-w-full">
				<slot />
			</div>

			<div
				class="h-[calc(100vh - 72px)] dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[72px] right-0 bottom-0 z-20 hidden w-64 border-l bg-white pr-2 xl:block"
			>
				<Outline client:load headings={headings} />
			</div>
			<Separator className="my-5 border-light-800 dark:border-dark-100" />
			<div class="flex flex-col space-y-5">
				<div class="flex place-content-end">
					<ExternalLink client:load href={generateGithubURL(url!)} title="Edit this page on github" />
				</div>
				<div class="flex w-full">
					{
						pagePrev && (
							<PageButton
								direction="prev"
								title={pagePrev.frontmatter.title}
								url={pagePrev.url === '' ? '/' : pagePrev.url!}
							/>
						)
					}
					<div class="ml-auto self-end justify-self-end">
						{
							pageNext && (
								<PageButton
									direction="next"
									title={pageNext.frontmatter.title}
									url={pageNext.url === '' ? '/' : pageNext.url!}
								/>
							)
						}
					</div>
				</div>
			</div>
		</div>

		<div class="h-76 md:h-52"></div>
		<footer
			class="dark:bg-dark-600 h-76 lg:pl-84 bg-light-600 xl:pr-84 fixed bottom-0 left-0 right-0 md:h-52 md:pl-4 md:pr-16"
		>
			<div class="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
				<div class="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
					<a
						class="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
						rel="noopener noreferrer"
						target="_blank"
						title="Vercel"
					>
						<img alt="Vercel" src="/powered-by-vercel.svg" />
					</a>
					<div class="flex flex-row gap-6 md:gap-12">
						<div class="flex flex-col gap-2">
							<div class="text-lg font-semibold">Community</div>
							<div class="flex flex-col gap-1">
								<a
									class="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
									href="https://discord.gg/djs"
									rel="noopener noreferrer"
									target="_blank"
								>
									Discord
								</a>
								<a
									class="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
									href="https://github.com/discordjs/discord.js/discussions"
									rel="noopener noreferrer"
									target="_blank"
								>
									GitHub discussions
								</a>
							</div>
						</div>
						<div class="flex flex-col gap-2">
							<div class="text-lg font-semibold">Project</div>
							<div class="flex flex-col gap-1">
								<a
									class="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
									href="https://github.com/discordjs/discord.js"
									rel="noopener noreferrer"
									target="_blank"
								>
									discord.js
								</a>
								<a
									class="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
									href="https://discordjs.guide"
									rel="noopener noreferrer"
									target="_blank"
								>
									discord.js guide
								</a>
								<a
									class="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
									href="https://discord-api-types.dev"
									rel="noopener noreferrer"
									target="_blank"
								>
									discord-api-types
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</footer>
	</article>
	<div>Test</div>
</main>