version docs pages

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

@@ -0,0 +1,27 @@
+---
+import GuideLayout from "@layouts/GuideLayout.astro";
+import { getVersionsData } from "@config/io/generateTypeData";
+import { processMarkdown } from "@config/io/markdown";
+
+import { getCollection, render } from "astro:content";
+
+export async function getStaticPaths() {
+  const { versions } = await getVersionsData();
+  const guidePages = await getCollection("guide");
+
+  // versioned guides unhandled for now
+  return versions.flatMap(version => guidePages.map(page => ({
+    params: { version: version.name, id: page.id == "index" ? "/" : page.id },
+    props: { version, page },
+  })));
+}
+
+const { version, page } = Astro.props;
+const { headings } = await render(page);
+
+// we can't use 'Content' because there isn't a way to pass in a version
+const html = await processMarkdown(version.name, page.body!);
+---
+<GuideLayout title={page.data.title} description="" headings={headings}>
+  <Fragment set:html={html}/>
+</GuideLayout>

src/pages/docs/[version]/index.astro

@@ -0,0 +1,20 @@
+---
+import DocsLayout from "@layouts/DocsLayout.astro";
+import { getVersionsData } from "@config/io/generateTypeData";
+
+export async function getStaticPaths() {
+  return (await getVersionsData()).versions.map(version => ({
+    params: { version: version.name },
+    props: { version },
+  }));
+}
+
+const { version } = Astro.props;
+---
+<DocsLayout title="Quickshell Docs" description="Quickshell Documentation">
+  <h2>Docs</h2>
+  <div class="root-nav">
+    <h3><a href={`/docs/${version.name}/guide`}>Usage Guide</a></h3>
+    <h3><a href={`/docs/${version.name}/types`}>Type Definitions</a></h3>
+  </div>
+</DocsLayout>

src/pages/docs/[version]/types/[module]/[type].astro

@@ -1,7 +1,7 @@
 ---
 import { getQMLTypeLink } from "@config/io/helpers";
 import { processMarkdown } from "@config/io/markdown";
-import { getModulesData } from "@config/io/generateTypeData";
+import { getVersionsData } from "@config/io/generateTypeData";
 import DocsLayout from "@layouts/DocsLayout.astro";
 import TOC from "@components/navigation/sidebars/TOC.astro";
 import Properties from "@components/type/Properties.astro";
@@ -11,19 +11,22 @@ import Variants from "@components/type/Variants.astro";
 import Badge from "@components/Badge.astro";
 
 export async function getStaticPaths() {
-  const modules = await getModulesData();
-  return modules.flatMap(module => module.types.map(type => ({
-    params: { module: module.name, type: type.name },
-    props: { module, type }
-  })));
+  return (await getVersionsData()).versions.flatMap(version => {
+    return version.modules.flatMap(module => {
+      return module.types.map(type => ({
+        params: { version: version.name, module: module.name, type: type.name },
+        props: { version, module, type },
+      }));
+    });
+  });
 }
 
-const { module, type } = Astro.props;
+const { version, module, type } = Astro.props;
 
-const superLink = type.super ? getQMLTypeLink(type.super) : null;
+const superLink = type.super ? getQMLTypeLink(version.name, type.super) : null;
 
 const details = type.details
-  ? await processMarkdown(type.details)
+  ? await processMarkdown(version.name, type.details)
   : null;
 ---
 <DocsLayout title={`${module.name} - ${type.name}`} description={type.description ?? ""} type={type}>
@@ -57,17 +60,17 @@ const details = type.details
           {details ? <span class="parsedMD" set:html={details}/> : (<span class="toparse">{type.description}</span>)}
         </subheading>
         { Object.keys(type.properties ?? {}).length != 0 && (
-          <h2>Properties <a href="/docs/guide/qml-language#properties">[?]</a></h2>
+          <h2>Properties <a href={`/docs/${version.name}/guide/qml-language#properties`}>[?]</a></h2>
           <Properties props={type.properties!}/>
         )}
         { (type.functions?.length ?? 0) != 0 && (
-          <h2>Functions <a href="/docs/guide/qml-language#functions">[?]</a></h2>
+          <h2>Functions <a href={`/docs/${version.name}guide/qml-language#functions`}>[?]</a></h2>
           <Functions
             funcData={type.functions!}
           />
         )}
         { Object.keys(type.signals ?? {}).length != 0 && (
-          <h2>Signals <a href="/docs/guide/qml-language#signals">[?]</a></h2>
+          <h2>Signals <a href={`/docs/${version.name}guide/qml-language#signals`}>[?]</a></h2>
           <Signals
             signals={type.signals!}
           />

src/pages/docs/[version]/types/[module]/index.astro

@@ -1,19 +1,20 @@
 ---
 import DocsLayout from "@layouts/DocsLayout.astro";
-import { getModulesData } from "@config/io/generateTypeData";
+import { getVersionsData } from "@config/io/generateTypeData";
 import { processMarkdown } from "@src/config/io/markdown";
 
 export async function getStaticPaths() {
-  const modules = await getModulesData();
-  return modules.map(module => ({
-    params: { module: module.name },
-    props: { module },
-  }));
+  return (await getVersionsData()).versions.flatMap(version => {
+    return version.modules.map(module => ({
+      params: { version: version.name, module: module.name },
+      props: { version, module },
+    }));
+  });
 }
 
-const { module } = Astro.props;
+const { version, module } = Astro.props;
 const details = module.details
-  ? await processMarkdown(module.details)
+  ? await processMarkdown(version.name, module.details)
   : null;
 ---
 
@@ -30,7 +31,7 @@ const details = module.details
         {module.types.map(type => 
           (
           <div class="root-nav-entry">
-            <a class="root-nav-link" href={`/docs/types/${module.name}/${type.name}`}>
+            <a class="root-nav-link" href={`/docs/${version.name}/types/${module.name}/${type.name}`}>
               {type.name}
             </a>
             <span class="root-nav-desc">{type.description}</span>

src/pages/docs/[version]/types/index.astro

@@ -1,8 +1,15 @@
 ---
 import DocsLayout from "@layouts/DocsLayout.astro";
-import { getModulesData } from "@config/io/generateTypeData";
+import { getVersionsData } from "@config/io/generateTypeData";
 
-const modules = await getModulesData();
+export async function getStaticPaths() {
+  return (await getVersionsData()).versions.map(version => ({
+    params: { version: version.name },
+    props: { version },
+  }));
+}
+
+const { version } = Astro.props;
 ---
 <DocsLayout title="Quickshell Module Listing" description="Quickshell Type Documentation">
   <div class="docs-content">
@@ -11,9 +18,9 @@ const modules = await getModulesData();
     <section>
       <span>All modules included with Quickshell</span>
       <div class="root-nav" data-pagefind-ignore>
-        {modules.map(module => (
+        {version.modules.map(module => (
           <div class="root-nav-entry">
-            <a class="root-nav-link" href={`/docs/types/${module.name}`}>
+            <a class="root-nav-link" href={`/docs/${version.name}/types/${module.name}`}>
               {module.name}
             </a>
             <span class="root-nav-desc">{module.description}</span>

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

@@ -1,20 +0,0 @@
----
-import GuideLayout from "@layouts/GuideLayout.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);
----
-<GuideLayout title={page.data.title} description="" headings={headings}>
-  <Content/>
-</GuideLayout>

src/pages/docs/index.astro

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