From 068e2062267e1b58818f60404f7a28d7bf239bf1 Mon Sep 17 00:00:00 2001
From: outfoxxed <outfoxxed@outfoxxed.me>
Date: Sun, 8 Jun 2025 01:53:24 -0700
Subject: [PATCH] add about page

---
 .../navigation/sidebars/nav/RootNav.astro     | 15 ++++++----
 src/layouts/GuideLayout.astro                 | 25 ++++++++++++++++
 src/layouts/GuideMdLayout.astro               | 17 +++++++++++
 src/pages/docs/about.mdx                      | 30 +++++++++++++++++++
 src/pages/docs/guide/[...id].astro            | 18 +++--------
 5 files changed, 86 insertions(+), 19 deletions(-)
 create mode 100644 src/layouts/GuideLayout.astro
 create mode 100644 src/layouts/GuideMdLayout.astro
 create mode 100644 src/pages/docs/about.mdx

diff --git a/src/components/navigation/sidebars/nav/RootNav.astro b/src/components/navigation/sidebars/nav/RootNav.astro
index 95330d8..6e9f22e 100644
--- a/src/components/navigation/sidebars/nav/RootNav.astro
+++ b/src/components/navigation/sidebars/nav/RootNav.astro
@@ -1,8 +1,8 @@
 ---
 export interface Props {
-  currentRoute: string;
-  currentModule: string;
-  currentClass: string;
+  currentRoute?: string;
+  currentModule?: string;
+  currentClass?: string;
 }
 
 const { currentRoute, currentModule, currentClass } = Astro.props;
@@ -36,14 +36,14 @@ function genGuideNav(base: string): TreeEntry[] | undefined {
 const guide = {
   title: "Usage Guide",
   link: "/docs/guide",
-  current: currentRoute.startsWith("guide"),
+  current: currentRoute?.startsWith("guide") ?? false,
   entries: genGuideNav(""),
 }
 
 const types = {
   title: "Quickshell Types",
   link: "/docs/types",
-  current: currentRoute.startsWith("types"),
+  current: currentRoute?.startsWith("types") ?? false,
   entries: Object.entries(groupedRoutes.types).map(
     ([module, items]) => ({
       title: module,
@@ -59,6 +59,11 @@ const types = {
 };
 ---
 <nav class="navtree">
+  <Link
+    title="About Quickshell"
+    link="/docs/about"
+    current={currentRoute === "about"}
+  />
   <Tree {...guide}/>
   <Tree {...types}/>
   <Link
diff --git a/src/layouts/GuideLayout.astro b/src/layouts/GuideLayout.astro
new file mode 100644
index 0000000..86f7c9f
--- /dev/null
+++ b/src/layouts/GuideLayout.astro
@@ -0,0 +1,25 @@
+---
+import DocsLayout from "@layouts/DocsLayout.astro";
+import TOC from "@components/navigation/sidebars/TOC.astro";
+import TOCIntersectionObserver from "@src/components/hooks/TOCIntersectionObserver.astro";
+import type { ConfigHeading } from "@src/components/navigation/sidebars/types";
+
+export interface Props {
+  headings: ConfigHeading[];
+  title: string;
+  description: string;
+}
+
+const { title, description, headings } = Astro.props;
+---
+<DocsLayout title={title} description={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/layouts/GuideMdLayout.astro b/src/layouts/GuideMdLayout.astro
new file mode 100644
index 0000000..c8cbaaf
--- /dev/null
+++ b/src/layouts/GuideMdLayout.astro
@@ -0,0 +1,17 @@
+---
+import GuideLayout from "@layouts/GuideLayout.astro";
+import type { ConfigHeading } from "@src/components/navigation/sidebars/types";
+
+export interface Props {
+  headings: ConfigHeading[];
+  frontmatter: {
+    title: string;
+    description?: string;
+  }
+}
+
+const { headings, frontmatter: { title, description } } = Astro.props;
+---
+<GuideLayout title={title} description={description ?? ""} headings={headings}>
+  <slot/>
+</GuideLayout>
diff --git a/src/pages/docs/about.mdx b/src/pages/docs/about.mdx
new file mode 100644
index 0000000..ba3e003
--- /dev/null
+++ b/src/pages/docs/about.mdx
@@ -0,0 +1,30 @@
+---
+layout: "@layouts/GuideMdLayout.astro"
+title: "About Quickshell"
+---
+# {frontmatter.title}
+Quickshell is a toolkit for building a desktop shell, which is to say components
+of your desktop like bars, widgets, lock screens, display managers, and the like.
+
+Quickshell is based on QtQuick and configured with QML, the QtQuick interface
+description language. It provides integrations for common shell functionality,
+as well as support for hot reloading and tools to work with processes,
+sockets, files, and more.
+
+Built-in integrations are currently provided for:
+- Wayland and X11 for windowing
+- Wayland for window management and screen recording
+- Workspace management in Hyprland, I3, and Sway
+- Pipewire for audio controls
+- Pam for authentication and building lockscreens
+- Greetd for building a display manager
+- UPower for monitoring battery statistics
+- Power Profiles Daemon
+- MPRIS compatible media players
+- StatusNotifierItem compatible system tray clients
+
+Quickshell is actively developed and will still receive breaking changes.
+A tagged release is planned soon, however there will be breakage before
+that point.
+
+See the [Usage Guide](/docs/guide) to learn how to set up and use Quickshell
\ No newline at end of file
diff --git a/src/pages/docs/guide/[...id].astro b/src/pages/docs/guide/[...id].astro
index 4640bf8..861f1d7 100644
--- a/src/pages/docs/guide/[...id].astro
+++ b/src/pages/docs/guide/[...id].astro
@@ -1,7 +1,5 @@
 ---
-import DocsLayout from "@layouts/DocsLayout.astro";
-import TOC from "@components/navigation/sidebars/TOC.astro";
-import TOCIntersectionObserver from "@src/components/hooks/TOCIntersectionObserver.astro";
+import GuideLayout from "@layouts/GuideLayout.astro";
 
 import { getCollection, render } from "astro:content";
 
@@ -17,14 +15,6 @@ export async function getStaticPaths() {
 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/>
+<GuideLayout title={page.data.title} description="" headings={headings}>
+  <Content/>
+</GuideLayout>