96 lines
2.4 KiB
Plaintext
96 lines
2.4 KiB
Plaintext
---
|
|
import type { GetStaticPaths } from "astro"
|
|
import { getCollection, type CollectionEntry } from "astro:content"
|
|
import AppFooter from "~/components/app-footer.astro"
|
|
import Layout from "~/components/layout.astro"
|
|
import MainNavigation from "~/components/main-navigation.astro"
|
|
import NavLink from "~/components/nav-link.astro"
|
|
|
|
export interface Props {
|
|
guide: CollectionEntry<"guides">
|
|
}
|
|
|
|
export const getStaticPaths: GetStaticPaths = async () => {
|
|
const guides = await getCollection("guides")
|
|
return guides.map((guide) => ({
|
|
params: { slug: guide.slug },
|
|
props: { guide },
|
|
}))
|
|
}
|
|
|
|
const guides = await getCollection("guides")
|
|
const { Content } = await Astro.props.guide.render()
|
|
---
|
|
|
|
<Layout>
|
|
<div class="isolate">
|
|
<header
|
|
class="sticky top-0 z-10 flex bg-slate-700/30 shadow backdrop-blur-sm transition"
|
|
>
|
|
<div class="container">
|
|
<MainNavigation />
|
|
</div>
|
|
</header>
|
|
<main class="container mt-8 flex items-start gap-4">
|
|
<nav
|
|
class="sticky top-24 hidden h-[calc(100vh-theme(spacing.28))] w-48 flex-col gap-3 md:flex"
|
|
>
|
|
<h2 class="text-2xl">Guides</h2>
|
|
<ul class="flex flex-col items-start gap-2">
|
|
{
|
|
guides.map((guide) => (
|
|
<li>
|
|
<NavLink
|
|
class="link data-[active]:link-active"
|
|
href={`/guides/${guide.slug}`}
|
|
rel="prefetch"
|
|
>
|
|
{guide.data.title}
|
|
</NavLink>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
<AppFooter class="mt-auto" />
|
|
</nav>
|
|
<article class="-mt-8 min-w-0 max-w-none flex-1 pb-8">
|
|
<Content />
|
|
</article>
|
|
</main>
|
|
<AppFooter class="mx-auto mb-4 text-center md:hidden" />
|
|
</div>
|
|
</Layout>
|
|
|
|
<style>
|
|
article :global(:where(h1, h2, h3, h4, h5, h6)) {
|
|
@apply mb-3 mt-8 font-light;
|
|
}
|
|
article :global(h1) {
|
|
@apply text-3xl lg:text-4xl;
|
|
}
|
|
article :global(h2) {
|
|
@apply text-2xl;
|
|
}
|
|
article :global(h3) {
|
|
@apply text-xl;
|
|
}
|
|
article :global(p) {
|
|
@apply my-3;
|
|
}
|
|
article :global(a) {
|
|
@apply font-medium text-emerald-400 hover:no-underline;
|
|
}
|
|
article :global(strong) {
|
|
@apply font-medium text-emerald-400;
|
|
}
|
|
article :global(code) {
|
|
@apply rounded border border-slate-800 bg-slate-950 px-1 py-0.5 leading-none text-slate-300;
|
|
}
|
|
article :global(pre) {
|
|
@apply my-4 overflow-x-auto rounded-md border border-slate-800 !bg-slate-950 px-4 py-3 font-monospace;
|
|
}
|
|
article :global(pre code) {
|
|
@apply border-none bg-transparent p-0;
|
|
}
|
|
</style>
|