add about page

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

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/>

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>

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

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>
+<GuideLayout title={page.data.title} description="" headings={headings}>
   <Content/>
-    </div>
-    <TOC mobile={false} headings={headings} data-pagefind-ignore/>
-  </div>
-</DocsLayout>
-
-<TOCIntersectionObserver/>
+</GuideLayout>