default.nix

@@ -4,7 +4,7 @@
   nix-gitignore,
 
   yarn-berry,
-  nodejs,
+  nodejs_22,
   cacert,
   quickshell-types ? null,
 }: stdenv.mkDerivation (final: let
@@ -14,7 +14,7 @@
 
     src = final.src;
 
-    nativeBuildInputs = [ nodejs yarn-berry cacert ];
+    nativeBuildInputs = [ nodejs_22 yarn-berry cacert ];
 
     configurePhase = ''
       mkdir garbage-tooling
@@ -29,6 +29,13 @@
     '';
 
     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
     '';
 
@@ -36,6 +43,7 @@
       # 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
     '';
 
@@ -43,7 +51,7 @@
 
     outputHashMode = "recursive";
     outputHashAlgo = "sha256";
-    outputHash = "V1sjOLi6UOb3HQLiGTcGJInDU7H28fjzdmrxYXXI0ug=";
+    outputHash = "tZ4xuA7uNnMIEpSUmQ5TAWPdvRGFJWIgWyBa1QFFWWU=";
   };
 in {
   pname = "quickshell-web";

package.json

@@ -12,20 +12,21 @@
   "dependencies": {
     "@ark-ui/solid": "^3.5.0",
     "@astrojs/check": "^0.9.4",
-    "@astrojs/markdown-remark": "^6.3.1",
-    "@astrojs/mdx": "^4.2.6",
-    "@astrojs/sitemap": "^3.4.0",
-    "@astrojs/solid-js": "^5.0.10",
+    "@astrojs/markdown-remark": "^5.3.0",
+    "@astrojs/mdx": "^3.1.8",
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/solid-js": "^4.4.2",
     "@fontsource-variable/rubik": "^5.1.0",
     "@hbsnow/rehype-sectionize": "^1.0.7",
     "@pagefind/default-ui": "^1.1.1",
-    "@shikijs/rehype": "^3.4.2",
+    "@shikijs/rehype": "^1.22.0",
     "@types/node": "^20.14.11",
-    "astro": "^5.7.13",
-    "astro-breadcrumbs": "^3.3.1",
-    "astro-icon": "^1.1.5",
+    "astro": "^4.16.6",
+    "astro-breadcrumbs": "^2.3.1",
+    "astro-icon": "^1.1.1",
     "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,36 +9,24 @@ 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);
 
-import { getCollection } from "astro:content";
-const guidePages = await getCollection("guide");
-
-function genGuideNav(base: string): TreeEntry[] | undefined {
-  const pages = guidePages
-    .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,
-      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 configuration = {
+  title: "Configuration",
+  link: "/docs/configuration",
+  current: currentRoute.startsWith("configuration"),
+  entries: groupedRoutes.tutorials.configuration.map(
+    ({ name, type }) => ({
+      title: name,
+      link: `/docs/configuration/${type}`,
+      current: currentModule === type,
+    })
+  ),
+};
 
 const types = {
   title: "Quickshell Types",
@@ -59,7 +47,7 @@ const types = {
 };
 ---
 <nav class="navtree">
-  <Tree {...guide}/>
+  <Tree {...configuration}/>
   <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";
 
-export interface TreeEntry {
+interface TreeEntry {
   title: string;
   link: string;
   current?: boolean;

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

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

src/config/io/helpers.ts

@@ -38,7 +38,29 @@ 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]) {
@@ -50,7 +72,7 @@ export function groupRoutes(routes: RouteData[]): GroupedRoutes {
       type: route.type,
     });
     return acc;
-  }, { types: {} });
+  }, defaultValue);
 }
 
 export function getQMLTypeLinkObject(unparsed: string) {

src/content.config.ts

@@ -1,12 +0,0 @@
-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

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

src/layouts/ConfigLayout.astro

@@ -0,0 +1,39 @@
+---
+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/getting-started.mdx

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

src/pages/docs/configuration/index.mdx

@@ -0,0 +1,18 @@
+---
+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/configuration/intro.mdx

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

src/pages/docs/configuration/positioning.mdx

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

src/pages/docs/configuration/qml-overview.mdx

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

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

@@ -1,30 +0,0 @@
----
-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/guide">Usage Guide</a></h3>
+    <h3><a href="/docs/configuration">Configuration</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/guide/install-setup" class="main-page_link-card">
+        <a href="/docs/configuration/getting-started" class="main-page_link-card">
           <h3>Get started</h3>
         </a>
         <a href="/docs/types" class="main-page_link-card">