rename and reorganize guide pages

also configuration->guide

default.nix

@@ -4,7 +4,7 @@
   nix-gitignore,
 
   yarn-berry,
-  nodejs_22,
+  nodejs,
   cacert,
   quickshell-types ? null,
 }: stdenv.mkDerivation (final: let
@@ -14,7 +14,7 @@
 
     src = final.src;
 
-    nativeBuildInputs = [ nodejs_22 yarn-berry cacert ];
+    nativeBuildInputs = [ nodejs yarn-berry cacert ];
 
     configurePhase = ''
       mkdir garbage-tooling
@@ -29,13 +29,6 @@
     '';
 
     buildPhase = ''
-      # build will fail once due to missing nodejs executable
-      # linking before running this won't work, it will just delete it
-      HOME=$(pwd)/garbage-tooling yarn install || true
-
-      mkdir -p node_modules/node/bin
-      ln -s ${nodejs_22}/bin/node node_modules/node/bin/node
-
       HOME=$(pwd)/garbage-tooling yarn install
     '';
 
@@ -43,7 +36,6 @@
       # none of the cache path configs in yarnrc actually do anything
       # so we just copy node_modules manually
 
-      rm node_modules/node/bin/node # remove dep on nix package for output hash
       mv node_modules $out
     '';
 
@@ -51,7 +43,7 @@
 
     outputHashMode = "recursive";
     outputHashAlgo = "sha256";
-    outputHash = "tZ4xuA7uNnMIEpSUmQ5TAWPdvRGFJWIgWyBa1QFFWWU=";
+    outputHash = "V1sjOLi6UOb3HQLiGTcGJInDU7H28fjzdmrxYXXI0ug=";
   };
 in {
   pname = "quickshell-web";

package.json

@@ -12,21 +12,20 @@
   "dependencies": {
     "@ark-ui/solid": "^3.5.0",
     "@astrojs/check": "^0.9.4",
-    "@astrojs/markdown-remark": "^5.3.0",
+    "@astrojs/markdown-remark": "^6.3.1",
-    "@astrojs/mdx": "^3.1.8",
+    "@astrojs/mdx": "^4.2.6",
-    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/sitemap": "^3.4.0",
-    "@astrojs/solid-js": "^4.4.2",
+    "@astrojs/solid-js": "^5.0.10",
     "@fontsource-variable/rubik": "^5.1.0",
     "@hbsnow/rehype-sectionize": "^1.0.7",
     "@pagefind/default-ui": "^1.1.1",
-    "@shikijs/rehype": "^1.22.0",
+    "@shikijs/rehype": "^3.4.2",
     "@types/node": "^20.14.11",
-    "astro": "^4.16.6",
+    "astro": "^5.7.13",
-    "astro-breadcrumbs": "^2.3.1",
+    "astro-breadcrumbs": "^3.3.1",
-    "astro-icon": "^1.1.1",
+    "astro-icon": "^1.1.5",
     "hast": "^1.0.0",
     "hast-util-from-html": "^2.0.3",
-    "node": "npm:22.7.0",
     "remark-github-blockquote-alert": "^1.2.1",
     "solid-devtools": "^0.30.1",
     "solid-js": "^1.8.18",

src/components/Footer.astro

@@ -12,7 +12,7 @@ const props = Astro.props;
   <section 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://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>

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

@@ -9,7 +9,7 @@ interface Props {
 }
 const { title, link, current } = Astro.props;
 ---
-<Accordion class=`nav-component nav-collapsible ${current ? "nav-current" : ""}` {...(current ? { open: "" } : {})}>
+<Accordion class=`nav-component nav-collapsible ${current ? "nav-current" : ""}` {...(current ? { open: "_" } : {})}>
   <div slot="header">
     <a class=`nav-link ${current ? "nav-current" : ""}` href={link}>{title}</a>
     <div class="nav-collapse-marker">

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

@@ -9,24 +9,36 @@ const { currentRoute, currentModule, currentClass } = Astro.props;
 
 import { getTypeData } from "@config/io/generateTypeData";
 import { groupRoutes } from "@config/io/helpers";
+import type { TreeEntry } from "./Tree.astro";
 import Tree from "./Tree.astro";
 import Link from "./Link.astro";
 
 const routes = await getTypeData();
 const groupedRoutes = groupRoutes(routes);
 
-const configuration = {
+import { getCollection } from "astro:content";
-  title: "Configuration",
+const guidePages = await getCollection("guide");
-  link: "/docs/configuration",
+
-  current: currentRoute.startsWith("configuration"),
+function genGuideNav(base: string): TreeEntry[] | undefined {
-  entries: groupedRoutes.tutorials.configuration.map(
+  const pages = guidePages
-    ({ name, type }) => ({
+    .filter(page => page.id.match(`^${base}[^/]*$`) !== null && page.id != "index")
-      title: name,
+    .sort((a, b) => a.data.index - b.data.index)
-      link: `/docs/configuration/${type}`,
+    .map(page => ({
-      current: currentModule === type,
+      title: page.data.title,
-    })
+      link: `/docs/guide/${page.id}`,
-  ),
+      current: currentModule === page.id,
-};
+      entries: genGuideNav(page.id + "/"),
+    }));
+
+  return pages.length == 0 ? undefined : pages;
+}
+
+const guide = {
+  title: "Usage Guide",
+  link: "/docs/guide",
+  current: currentRoute.startsWith("guide"),
+  entries: genGuideNav(""),
+}
 
 const types = {
   title: "Quickshell Types",
@@ -47,7 +59,7 @@ const types = {
 };
 ---
 <nav class="navtree">
-  <Tree {...configuration}/>
+  <Tree {...guide}/>
   <Tree {...types}/>
   <Link
     title="QtQuick Types"

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

@@ -3,7 +3,7 @@ import NavCollapsible from "./NavCollapsible.astro";
 import Self from "./Tree.astro";
 import Link from "./Link.astro";
 
-interface TreeEntry {
+export interface TreeEntry {
   title: string;
   link: string;
   current?: boolean;

src/components/navigation/sidebars/types.d.ts

@@ -5,7 +5,6 @@ export interface Item {
 }
 
 export interface GroupedRoutes {
-  tutorials: { [key: string]: Item[] };
   types: { [key: string]: Item[] };
 }
 

src/config/io/helpers.ts

@@ -38,29 +38,7 @@ export function buildHierarchy(headings: ConfigHeading[]) {
 
 export function groupRoutes(routes: RouteData[]): GroupedRoutes {
   const froutes = routes.filter(route => route.name !== "index");
-  const defaultValue = {
-    tutorials: {
-      configuration: [
-        { name: "Getting Started", type: "getting-started" },
-        { name: "Intro", type: "intro" },
-        { name: "Positioning", type: "positioning" },
-        { name: "QML Overview", type: "qml-overview" },
-      ],
-    },
-    types: {},
-  };
   return froutes.reduce<GroupedRoutes>((acc, route) => {
-    if (!acc.tutorials) {
-      acc.tutorials = {
-        configuration: [
-          { name: "Getting Started", type: "getting-started" },
-          { name: "Intro", type: "intro" },
-          { name: "Positioning", type: "positioning" },
-          { name: "QML Overview", type: "qml-overview" },
-        ],
-      };
-    }
-
     if (!acc.types) acc.types = {};
 
     if (!acc.types[route.type]) {
@@ -72,7 +50,7 @@ export function groupRoutes(routes: RouteData[]): GroupedRoutes {
       type: route.type,
     });
     return acc;
-  }, defaultValue);
+  }, { types: {} });
 }
 
 export function getQMLTypeLinkObject(unparsed: string) {

src/content.config.ts

@@ -0,0 +1,12 @@
+import { defineCollection, z } from "astro:content";
+import { glob } from "astro/loaders";
+
+const guide = defineCollection({
+	loader: glob({ pattern: "**/*", base: "src/guide" }),
+	schema: z.object({
+		title: z.string(),
+    index: z.number(),
+	}),
+});
+
+export const collections = { guide };

src/guide/index.mdx

@@ -0,0 +1,6 @@
+---
+title: "Usage Guide"
+description: "Configuring the shell"
+index: -1
+---
+# {frontmatter.title}

src/guide/install-setup.mdx

@@ -1,6 +1,6 @@
 ---
-layout: "@layouts/ConfigLayout.astro"
+title: "Installation & Setup"
-title: "Getting Started"
+index: 0
 ---
 # {frontmatter.title}
 > [!NOTE]

src/guide/introduction.mdx

@@ -1,6 +1,6 @@
 ---
-layout: "@layouts/ConfigLayout.astro"
 title: "Introduction"
+index: 2
 ---
 
 import Collapsible from "@components/Collapsible.astro";

src/guide/positioning.mdx

@@ -1,6 +1,6 @@
 ---
-layout: "@layouts/ConfigLayout.astro"
 title: "Positioning"
+index: 2
 ---
 import MD_Title from "@components/MD_Title.tsx"
 

src/guide/qml-language.mdx

@@ -1,6 +1,6 @@
 ---
-layout: "@layouts/ConfigLayout.astro"
+title: "QML Language"
-title: "QML Overview"
+index: 10
 ---
 import MD_Title from "@components/MD_Title.tsx"
 import Collapsible from "@components/Collapsible.astro";

src/layouts/ConfigLayout.astro

@@ -1,39 +0,0 @@
----
-import DocsLayout from "@layouts/DocsLayout.astro";
-import TOCIntersectionObserver from "@src/components/hooks/TOCIntersectionObserver.astro";
-import TOC from "@components/navigation/sidebars/TOC.astro";
-
-export interface Headings {
-  slug: string;
-  text: string;
-  depth: number;
-}
-
-export interface Props {
-  content: {
-    title: string;
-  };
-  headings: Headings[];
-  frontmatter?: {
-    title: string;
-    description: string;
-  };
-}
-
-const { headings, frontmatter } = Astro.props;
----
-<DocsLayout
-  title={frontmatter!.title}
-  description={frontmatter!.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/pages/docs/configuration/index.mdx

@@ -1,18 +0,0 @@
----
-layout: "@layouts/ConfigLayout.astro"
-title: "Configuration"
-description: "Configuring the shell"
----
-# {frontmatter.title}
-
-See [Getting Started](/docs/configuration/getting-started) for installation and editor configuration instructions.
-
-You should start with the [Introduction](/docs/configuration/intro) which will guide you
-through the basics of QML by creating a simple topbar with a clock.
-
-From there you can read the [QML Overview](/docs/configuration/qml-overview) to get an overview of
-the QML language, or jump right into the [Type Reference](/docs/types) to find
-types you can use in your shell.
-
-The [quickshell-examples](https://git.outfoxxed.me/quickshell/quickshell-examples) repo contains
-fully working example configurations you can read and modify.

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

@@ -0,0 +1,30 @@
+---
+import DocsLayout from "@layouts/DocsLayout.astro";
+import TOC from "@components/navigation/sidebars/TOC.astro";
+import TOCIntersectionObserver from "@src/components/hooks/TOCIntersectionObserver.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);
+---
+<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/>

src/pages/docs/index.astro

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

src/pages/index.astro

@@ -15,7 +15,7 @@ const title = "Quickshell";
     <Marquee/>
     <section class="main-page_links">
       <section class="main-page_links_set">
-        <a href="/docs/configuration/getting-started" class="main-page_link-card">
+        <a href="/docs/guide/install-setup" class="main-page_link-card">
           <h3>Get started</h3>
         </a>
         <a href="/docs/types" class="main-page_link-card">