refactor guide pages to use content collections

also configuration->guide

src/components/navigation/sidebars/nav/RootNav.astro

@@ -9,24 +9,35 @@ const { currentRoute, currentModule, currentClass } = Astro.props;
 
 import { getTypeData } from "@config/io/generateTypeData";
 import { groupRoutes } from "@config/io/helpers";
+import type { TreeEntry } from "./Tree.astro";
 import Tree from "./Tree.astro";
 import Link from "./Link.astro";
 
 const routes = await getTypeData();
 const groupedRoutes = groupRoutes(routes);
 
-const configuration = {
+import { getCollection } from "astro:content";
-  title: "Configuration",
+const guidePages = await getCollection("guide");
-  link: "/docs/configuration",
+
-  current: currentRoute.startsWith("configuration"),
+function genGuideNav(base: string): TreeEntry[] | undefined {
-  entries: groupedRoutes.tutorials.configuration.map(
+  const pages = guidePages
-    ({ name, type }) => ({
+    .filter(page => page.id.match(`^${base}[^/]*$`) !== null)
-      title: name,
+    .map(page => ({
-      link: `/docs/configuration/${type}`,
+      title: page.data.title,
-      current: currentModule === type,
+      link: `/docs/guide/${page.id}`,
-    })
+      current: currentModule === page.id,
-  ),
+      entries: genGuideNav(page.id + "/"),
-};
+    }));
+
+  return pages.length == 0 ? undefined : pages;
+}
+
+const guide = {
+  title: "Guide",
+  link: "/docs/guide",
+  current: currentRoute.startsWith("guide"),
+  entries: genGuideNav(""),
+}
 
 const types = {
   title: "Quickshell Types",
@@ -47,7 +58,7 @@ const types = {
 };
 ---
 <nav class="navtree">
-  <Tree {...configuration}/>
+  <Tree {...guide}/>
   <Tree {...types}/>
   <Link
     title="QtQuick Types"

src/components/navigation/sidebars/nav/Tree.astro

@@ -3,7 +3,7 @@ import NavCollapsible from "./NavCollapsible.astro";
 import Self from "./Tree.astro";
 import Link from "./Link.astro";
 
-interface TreeEntry {
+export interface TreeEntry {
   title: string;
   link: string;
   current?: boolean;

src/components/navigation/sidebars/types.d.ts

@@ -5,7 +5,6 @@ export interface Item {
 }
 
 export interface GroupedRoutes {
-  tutorials: { [key: string]: Item[] };
   types: { [key: string]: Item[] };
 }
 

src/config/io/helpers.ts

@@ -38,29 +38,7 @@ export function buildHierarchy(headings: ConfigHeading[]) {
 
 export function groupRoutes(routes: RouteData[]): GroupedRoutes {
   const froutes = routes.filter(route => route.name !== "index");
-  const defaultValue = {
-    tutorials: {
-      configuration: [
-        { name: "Getting Started", type: "getting-started" },
-        { name: "Intro", type: "intro" },
-        { name: "Positioning", type: "positioning" },
-        { name: "QML Overview", type: "qml-overview" },
-      ],
-    },
-    types: {},
-  };
   return froutes.reduce<GroupedRoutes>((acc, route) => {
-    if (!acc.tutorials) {
-      acc.tutorials = {
-        configuration: [
-          { name: "Getting Started", type: "getting-started" },
-          { name: "Intro", type: "intro" },
-          { name: "Positioning", type: "positioning" },
-          { name: "QML Overview", type: "qml-overview" },
-        ],
-      };
-    }
-
     if (!acc.types) acc.types = {};
 
     if (!acc.types[route.type]) {
@@ -72,7 +50,7 @@ export function groupRoutes(routes: RouteData[]): GroupedRoutes {
       type: route.type,
     });
     return acc;
-  }, defaultValue);
+  }, { types: {} });
 }
 
 export function getQMLTypeLinkObject(unparsed: string) {

src/content.config.ts

@@ -0,0 +1,11 @@
+import { defineCollection, z } from "astro:content";
+import { glob } from "astro/loaders";
+
+const guide = defineCollection({
+	loader: glob({ pattern: "**/*", base: "src/guide" }),
+	schema: z.object({
+		title: z.string(),
+	}),
+});
+
+export const collections = { guide };

src/guide/getting-started.mdx

@@ -1,5 +1,4 @@
 ---
-layout: "@layouts/ConfigLayout.astro"
 title: "Getting Started"
 ---
 # {frontmatter.title}

src/guide/index.mdx

@@ -1,5 +1,4 @@
 ---
-layout: "@layouts/ConfigLayout.astro"
 title: "Configuration"
 description: "Configuring the shell"
 ---

src/guide/intro.mdx

@@ -1,5 +1,4 @@
 ---
-layout: "@layouts/ConfigLayout.astro"
 title: "Introduction"
 ---
 

src/guide/positioning.mdx

@@ -1,5 +1,4 @@
 ---
-layout: "@layouts/ConfigLayout.astro"
 title: "Positioning"
 ---
 import MD_Title from "@components/MD_Title.tsx"

src/guide/qml-overview.mdx

@@ -1,5 +1,4 @@
 ---
-layout: "@layouts/ConfigLayout.astro"
 title: "QML Overview"
 ---
 import MD_Title from "@components/MD_Title.tsx"

src/layouts/ConfigLayout.astro

@@ -1,39 +0,0 @@
----
-import DocsLayout from "@layouts/DocsLayout.astro";
-import TOCIntersectionObserver from "@src/components/hooks/TOCIntersectionObserver.astro";
-import TOC from "@components/navigation/sidebars/TOC.astro";
-
-export interface Headings {
-  slug: string;
-  text: string;
-  depth: number;
-}
-
-export interface Props {
-  content: {
-    title: string;
-  };
-  headings: Headings[];
-  frontmatter?: {
-    title: string;
-    description: string;
-  };
-}
-
-const { headings, frontmatter } = Astro.props;
----
-<DocsLayout
-  title={frontmatter!.title}
-  description={frontmatter!.description}
-  headings={headings}
->
-  <div class="docs">
-    <div class="docs-content">
-      <hr />
-      <slot />
-    </div>
-    <TOC mobile={false} headings={headings} data-pagefind-ignore/>
-  </div>
-</DocsLayout>
-
-<TOCIntersectionObserver/>

src/pages/docs/guide/[...id].astro

@@ -0,0 +1,30 @@
+---
+import DocsLayout from "@layouts/DocsLayout.astro";
+import TOC from "@components/navigation/sidebars/TOC.astro";
+import TOCIntersectionObserver from "@src/components/hooks/TOCIntersectionObserver.astro";
+
+import { getCollection, render } from "astro:content";
+
+export async function getStaticPaths() {
+  const guidePages = await getCollection("guide");
+
+  return guidePages.map(page => ({
+    params: { id: page.id == "index" ? "/" : page.id },
+    props: { page },
+  }));
+}
+
+const { page } = Astro.props;
+const { Content, headings } = await render(page);
+---
+<DocsLayout title={page.data.title} description="" headings={headings}>
+  <div class="docs">
+    <div class="docs-content">
+      <hr>
+      <Content/>
+    </div>
+    <TOC mobile={false} headings={headings} data-pagefind-ignore/>
+  </div>
+</DocsLayout>
+
+<TOCIntersectionObserver/>

src/pages/docs/index.astro

@@ -4,7 +4,7 @@ import DocsLayout from "@layouts/DocsLayout.astro";
 <DocsLayout title="Quickshell Docs" description="Quickshell Documentation">
   <h2>Docs</h2>
   <div class="root-nav">
-    <h3><a href="/docs/configuration">Configuration</a></h3>
+    <h3><a href="/docs/guide">Guide</a></h3>
     <h3><a href="/docs/types">Type Definitions</a></h3>
   </div>
 </DocsLayout>