added changelog and version dropdown

src/components/Footer.astro

@@ -10,23 +10,28 @@ interface Props {
 const props = Astro.props;
 ---
 <footer class=`${props.class ?? ""}`>
-  <section class="credits">
+  <div class="credits">
     <p class="hint">Brought to you by:</p>
     <a href="https://outfoxxed.me" target="_blank">outfoxxed - <span class="hint">Lead Developer</span></a>
     <a href="https://xanazf.github.io" target="_blank">xanazf - <span class="hint">Website Developer / Designer</span></a>
     <a href="https://github.com/quickshell-mirror/quickshell/graphs/contributors" target="_blank">
       and our contributors
     </a>
-  </section>
-  <section class="socials">
-    <a href="https://matrix.to/#/#quickshell:outfoxxed.me" target="_blank" aria-label="Join our matrix space">
-      <Fragment set:html={matrixLogo}/>
-    </a>
-    <a href="https://discord.gg/UtZeT3xNyT" target="_blank" aria-label="Join our discord">
-      <Fragment set:html={discordLogo}/>
-    </a>
-    <a href="https://git.outfoxxed.me/quickshell/quickshell" target="_blank" aria-label="Visit our git server">
-      <Fragment set:html={gitLogo}/>
-    </a>
-  </section>
+  </div>
+  <div class="socials-changelog">
+    <section class="socials">
+      <a href="https://matrix.to/#/#quickshell:outfoxxed.me" target="_blank" aria-label="Join our matrix space">
+        <Fragment set:html={matrixLogo}/>
+      </a>
+      <a href="https://discord.gg/UtZeT3xNyT" target="_blank" aria-label="Join our discord">
+        <Fragment set:html={discordLogo}/>
+      </a>
+      <a href="https://git.outfoxxed.me/quickshell/quickshell" target="_blank" aria-label="Visit our git server">
+        <Fragment set:html={gitLogo}/>
+      </a>
+    </section>
+    <section class="changelog">
+      <a href="/changelog">Changelog</a>
+    </section>
+  </div>
 </footer>

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

@@ -12,6 +12,7 @@ import { groupRoutes } from "@config/io/helpers";
 import type { TreeEntry } from "./Tree.astro";
 import Tree from "./Tree.astro";
 import Link from "./Link.astro";
+import VersionSelector from "./VersionSelector.astro"
 
 const routes = await getTypeData();
 const groupedRoutes = groupRoutes(routes);
@@ -21,7 +22,7 @@ const guidePages = await getCollection("guide");
 
 function genGuideNav(base: string): TreeEntry[] | undefined {
   const pages = guidePages
-    .filter(page => page.id.match(`^${base}[^/]*$`) !== null && page.id != "index")
+    .filter(page => page.id.match(`^${base}[^/]*$`) !== null && page.id !== "index")
     .sort((a, b) => a.data.index - b.data.index)
     .map(page => ({
       title: page.data.title,
@@ -30,7 +31,7 @@ function genGuideNav(base: string): TreeEntry[] | undefined {
       entries: genGuideNav(page.id + "/"),
     }));
 
-  return pages.length == 0 ? undefined : pages;
+  return pages.length === 0 ? undefined : pages;
 }
 
 const guide = {
@@ -58,20 +59,12 @@ const types = {
   ),
 };
 
-const masterBranch = import.meta.env.MASTER_BRANCH;
 ---
 <nav class="navtree">
-  {masterBranch && <Link
-    title="Docs Version: Master Branch (Switch)"
-    link=`https://quickshell.outfoxxed.me${Astro.url.pathname}`
-  />}
-  {!masterBranch && <Link
-    title="Docs Version: Release 0.1.0 (Switch)"
-    link=`https://quickshell-master.outfoxxed.me${Astro.url.pathname}`
-  />}
+  <VersionSelector title="Versions" link=`${Astro.currentLocale}` current/>
   <Link
     title="About Quickshell"
-    link="/docs/about"
+    link="/about"
     current={currentRoute === "about"}
   />
   <Tree {...guide}/>

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

@@ -0,0 +1,48 @@
+---
+import fs from 'node:fs';
+import path from 'node:path';
+
+import Link from './Link.astro';
+import Accordion from "@components/Accordion.astro"
+
+interface Props {
+  title: string;
+  link: string;
+  current?: boolean;
+}
+interface VersionData {
+  default: string;
+  versions: {
+    name: string;
+    types: string;
+  }[]
+}
+const versionFilePath = import.meta.env.VERSION_FILE_PATH;
+
+if (!versionFilePath){
+  throw new Error("no env var VERSION_FILE_PATH")
+}
+const absolutePath = path.resolve(process.cwd(), versionFilePath);
+const versionData:VersionData = JSON.parse(fs.readFileSync(absolutePath, 'utf-8'));
+
+const { title, link, current } = Astro.props;
+---
+<Accordion class=`nav-component version-collapsible ${current ? "nav-current" : ""}` {...(!current ? { open: "_" } : {})}>
+  <div slot="header">
+    <span class="nav-component nav-item nav-link">
+      versions
+    </span>
+  </div>
+  <div class="version-select-menu">
+    {versionData.versions.map((ver, _) => {
+      return (
+        <Link
+          link={`${Astro.url.pathname}`}
+          title=`${ver.name}`
+        >
+          {ver.name}
+        </Link>
+      )}
+    )}
+  </div>
+</Accordion>

src/content.config.ts

@@ -8,5 +8,12 @@ const guide = defineCollection({
     index: z.number(),
 	}),
 });
+const version = defineCollection({
+	loader: glob({ pattern: "**/*", base: "src/docs" }),
+	schema: z.object({
+		title: z.string(),
+    index: z.number(),
+	}),
+});
 
-export const collections = { guide };
+export const collections = { guide, version };

src/pages/changelog.md

@@ -0,0 +1,8 @@
+---
+layout: "@layouts/GuideMdLayout.astro"
+title: Changelog
+---
+
+## v0.2.0
+
+## v0.1.0

src/styles/docs/nav/version-select.css

@@ -0,0 +1,24 @@
+.version-collapsible {
+  position: relative;
+  overflow: hidden;
+  & summary div {
+    display: flex;
+    justify-content: center;
+  }
+  & .nav-link {
+    max-width: max-content;
+  }
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0.118rem;
+    border: 1px solid white;
+    border-radius: 0.618rem;
+    opacity: 0.15;
+  }
+}
+.version-select-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

src/styles/global.css

@@ -8,6 +8,7 @@
 
 @import "./docs/nav/nav.css";
 @import "./docs/toc/toc.css";
+@import "./docs/nav/version-select.css";
 @import "./docs/docs.css";
 @import "./docs/collapsible.css";
 
@@ -223,8 +224,12 @@ footer {
     align-items: flex-start;
     font-size: 2.5rem;
 
+  }
+  & .changelog {
+    display: flex;
     & a {
-      display: flex;
+      text-decoration: none;
+      margin-inline: auto;
     }
   }
 }