guide pages (why was that so easy wtf)

2023-03-12 15:58:47 -05:00
parent bece6c42fc
commit 6da6008d2c
21 changed files with 606 additions and 6 deletions
--- a/packages/website/src/components/guide-layout.astro
+++ b/packages/website/src/components/guide-layout.astro
@@ -0,0 +1,38 @@
+---
+import { getCollection } from "astro:content"
+import Layout from "./layout.astro"
+import MainNavigation from "./main-navigation.astro"
+
+const guides = await getCollection("guides")
+---
+
+<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>
+                <a class="link" href={`/guides/${guide.slug}`}>
+                  {guide.data.title}
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+      </nav>
+      <section class="prose prose-invert pb-8 flex-1 min-w-0">
+        <slot />
+      </section>
+    </main>
+  </div>
+</Layout>