add about page

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