64 lines
2.1 KiB
Plaintext
64 lines
2.1 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 type 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="bg-slate-700/30 shadow sticky top-0 backdrop-blur-sm transition z-10 flex"
|
|
>
|
|
<div class="container">
|
|
<MainNavigation />
|
|
</div>
|
|
</header>
|
|
<main class="container mt-8 flex items-start gap-4">
|
|
<nav class="w-48 sticky top-24 hidden md:block">
|
|
<h2 class="text-2xl">Guides</h2>
|
|
<ul class="mt-3 flex flex-col gap-2 items-start">
|
|
{
|
|
guides.map((guide) => (
|
|
<li>
|
|
<NavLink
|
|
class="link data-[active]:link-active"
|
|
href={`/guides/${guide.slug}`}
|
|
rel="prefetch"
|
|
>
|
|
{guide.data.title}
|
|
</NavLink>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</nav>
|
|
<section
|
|
class="prose prose-invert prose prose-invert prose-h1:font-light prose-h1:mb-4 prose-h1:text-3xl lg:prose-h1:text-4xl prose-h2:font-light prose-h3:font-light prose-p:my-3 prose-a:font-medium prose-a:text-emerald-400 hover:prose-a:no-underline prose-strong:font-medium prose-strong:text-emerald-400 prose-pre:font-monospace prose-pre:overflow-x-auto prose-code:before:hidden prose-code:after:hidden prose-code:text-slate-400 prose-li:mb-5 max-w-none pb-8 flex-1 min-w-0"
|
|
>
|
|
<Content />
|
|
</section>
|
|
</main>
|
|
<div class="py-2">
|
|
<AppFooter />
|
|
</div>
|
|
</div>
|
|
</Layout>
|