From b066a4897697f778bb009ae0fd08c5248dc462a7 Mon Sep 17 00:00:00 2001
From: outfoxxed <outfoxxed@outfoxxed.me>
Date: Tue, 13 May 2025 20:56:31 -0700
Subject: [PATCH] refactor guide pages to use content collections

also configuration->guide
---
 .../navigation/sidebars/nav/RootNav.astro     | 37 +++++++++++-------
 .../navigation/sidebars/nav/Tree.astro        |  2 +-
 src/components/navigation/sidebars/types.d.ts |  1 -
 src/config/io/helpers.ts                      | 24 +-----------
 src/content.config.ts                         | 11 ++++++
 .../getting-started.mdx                       |  1 -
 .../docs/configuration => guide}/index.mdx    |  1 -
 .../docs/configuration => guide}/intro.mdx    |  1 -
 .../configuration => guide}/positioning.mdx   |  1 -
 .../configuration => guide}/qml-overview.mdx  |  1 -
 src/layouts/ConfigLayout.astro                | 39 -------------------
 src/pages/docs/guide/[...id].astro            | 30 ++++++++++++++
 src/pages/docs/index.astro                    |  2 +-
 13 files changed, 68 insertions(+), 83 deletions(-)
 create mode 100644 src/content.config.ts
 rename src/{pages/docs/configuration => guide}/getting-started.mdx (99%)
 rename src/{pages/docs/configuration => guide}/index.mdx (95%)
 rename src/{pages/docs/configuration => guide}/intro.mdx (99%)
 rename src/{pages/docs/configuration => guide}/positioning.mdx (99%)
 rename src/{pages/docs/configuration => guide}/qml-overview.mdx (99%)
 delete mode 100644 src/layouts/ConfigLayout.astro
 create mode 100644 src/pages/docs/guide/[...id].astro

diff --git a/src/components/navigation/sidebars/nav/RootNav.astro b/src/components/navigation/sidebars/nav/RootNav.astro
index f0d03a4..03bdc85 100644
--- a/src/components/navigation/sidebars/nav/RootNav.astro
+++ b/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 = {
-  title: "Configuration",
-  link: "/docs/configuration",
-  current: currentRoute.startsWith("configuration"),
-  entries: groupedRoutes.tutorials.configuration.map(
-    ({ name, type }) => ({
-      title: name,
-      link: `/docs/configuration/${type}`,
-      current: currentModule === type,
-    })
-  ),
-};
+import { getCollection } from "astro:content";
+const guidePages = await getCollection("guide");
+
+function genGuideNav(base: string): TreeEntry[] | undefined {
+  const pages = guidePages
+    .filter(page => page.id.match(`^${base}[^/]*$`) !== null)
+    .map(page => ({
+      title: page.data.title,
+      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"
diff --git a/src/components/navigation/sidebars/nav/Tree.astro b/src/components/navigation/sidebars/nav/Tree.astro
index 35c4135..46d361b 100644
--- a/src/components/navigation/sidebars/nav/Tree.astro
+++ b/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;
diff --git a/src/components/navigation/sidebars/types.d.ts b/src/components/navigation/sidebars/types.d.ts
index 8ad4b48..8e2cbb1 100644
--- a/src/components/navigation/sidebars/types.d.ts
+++ b/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[] };
 }
 
diff --git a/src/config/io/helpers.ts b/src/config/io/helpers.ts
index 12bc7cf..a77f629 100644
--- a/src/config/io/helpers.ts
+++ b/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) {
diff --git a/src/content.config.ts b/src/content.config.ts
new file mode 100644
index 0000000..903a7a0
--- /dev/null
+++ b/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 };
diff --git a/src/pages/docs/configuration/getting-started.mdx b/src/guide/getting-started.mdx
similarity index 99%
rename from src/pages/docs/configuration/getting-started.mdx
rename to src/guide/getting-started.mdx
index dd2cea5..72a025f 100644
--- a/src/pages/docs/configuration/getting-started.mdx
+++ b/src/guide/getting-started.mdx
@@ -1,5 +1,4 @@
 ---
-layout: "@layouts/ConfigLayout.astro"
 title: "Getting Started"
 ---
 # {frontmatter.title}
diff --git a/src/pages/docs/configuration/index.mdx b/src/guide/index.mdx
similarity index 95%
rename from src/pages/docs/configuration/index.mdx
rename to src/guide/index.mdx
index e5f2d00..9ca06fd 100644
--- a/src/pages/docs/configuration/index.mdx
+++ b/src/guide/index.mdx
@@ -1,5 +1,4 @@
 ---
-layout: "@layouts/ConfigLayout.astro"
 title: "Configuration"
 description: "Configuring the shell"
 ---
diff --git a/src/pages/docs/configuration/intro.mdx b/src/guide/intro.mdx
similarity index 99%
rename from src/pages/docs/configuration/intro.mdx
rename to src/guide/intro.mdx
index af7d740..e6a98fa 100644
--- a/src/pages/docs/configuration/intro.mdx
+++ b/src/guide/intro.mdx
@@ -1,5 +1,4 @@
 ---
-layout: "@layouts/ConfigLayout.astro"
 title: "Introduction"
 ---
 
diff --git a/src/pages/docs/configuration/positioning.mdx b/src/guide/positioning.mdx
similarity index 99%
rename from src/pages/docs/configuration/positioning.mdx
rename to src/guide/positioning.mdx
index fb54286..7d7f442 100644
--- a/src/pages/docs/configuration/positioning.mdx
+++ b/src/guide/positioning.mdx
@@ -1,5 +1,4 @@
 ---
-layout: "@layouts/ConfigLayout.astro"
 title: "Positioning"
 ---
 import MD_Title from "@components/MD_Title.tsx"
diff --git a/src/pages/docs/configuration/qml-overview.mdx b/src/guide/qml-overview.mdx
similarity index 99%
rename from src/pages/docs/configuration/qml-overview.mdx
rename to src/guide/qml-overview.mdx
index 960d3a1..3073747 100644
--- a/src/pages/docs/configuration/qml-overview.mdx
+++ b/src/guide/qml-overview.mdx
@@ -1,5 +1,4 @@
 ---
-layout: "@layouts/ConfigLayout.astro"
 title: "QML Overview"
 ---
 import MD_Title from "@components/MD_Title.tsx"
diff --git a/src/layouts/ConfigLayout.astro b/src/layouts/ConfigLayout.astro
deleted file mode 100644
index 143558f..0000000
--- a/src/layouts/ConfigLayout.astro
+++ /dev/null
@@ -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/>
diff --git a/src/pages/docs/guide/[...id].astro b/src/pages/docs/guide/[...id].astro
new file mode 100644
index 0000000..4640bf8
--- /dev/null
+++ b/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/>
diff --git a/src/pages/docs/index.astro b/src/pages/docs/index.astro
index 4c3c8bf..a06d54a 100644
--- a/src/pages/docs/index.astro
+++ b/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>