Merge branch 'main' into dev, fix guide Collapsible

src/components/Collapsible.astro

@@ -12,5 +12,5 @@ const { title } = Astro.props;
     <Fragment set:html={collapsibleMarker}/>
     {title}
   </div>
-  <slot>
+  <slot />
 </Accordion>

src/config/io/markdown.ts

@@ -35,90 +35,79 @@ const remarkParseAtTypes: RemarkPlugin<[]> =
           (rawNode as Md.Code).lang === "qml")
       ) {
         const node = rawNode as Md.Literal;
+      node.value = node.value.replace(
+        /@@(?<path>([A-Z]\w*\.)*([A-Z]\w*))?((?<member>[a-z]\w*)((?<function>\(\))|(?<signal>\(s\)))?)?(?=[$.,;:)\s]|$)/g,
+        (_full, ...args) => {
+          type Capture = {
+            path: string | undefined;
+            member: string | undefined;
+            function: string | undefined;
+            signal: string | undefined;
+          };
 
-        node.value = node.value.replace(
+          const groups = args.pop() as Capture;
-          /@@((?<module>([A-Z]\w*\.)*)(?<type>([A-Z]\w*))(\.(?!\s|$))?)?((?<member>[a-z]\w*)((?<function>\(\))|(?<signal>\(s\)))?)?(?=[$.,;:)\s]|$)/g,
+          const pathp = (groups.path ?? "").split('.').filter(Boolean);
-          (_full, ...args) => {
+          let type = (pathp.length >= 1 ? pathp.pop() : "");
-            type Capture = {
+          let module = pathp.join('_');
-              module: string | undefined;
-              type: string | undefined;
-              member: string | undefined;
-              function: string | undefined;
-              signal: string | undefined;
-            };
 
-            const groups = args.pop() as Capture;
+          if (module) {
+            const isQs = module.startsWith("Quickshell");
+            module = `99M${isQs ? "QS" : "QT_qml"}_${module}`;
+          } else module = ""; // WARNING: rehype parser can't currently handle intra-module links
 
-            if (groups.module) {
+          type = type ? `99N${type}` : "";
-              groups.module = groups.module.substring(
+          groups.member = groups.member
-                0,
+            ? `99V${groups.member}`
-                groups.module.length - 1
+            : "";
-              );
+          const typep = groups.member
-              const isQs = groups.module.startsWith("Quickshell");
+            ? `99T${groups.function ? "func" : groups.signal ? "signal" : "prop"}`
-              groups.module = `99M${isQs ? "QS" : "QT_qml"}_${groups.module.replace(".", "_")}`;
+            : "";
-            } else groups.module = ""; // WARNING: rehype parser can't currently handle intra-module links
+          return `TYPE${module}${type}${groups.member}${typep}99TYPE`;
+        }
+      );
+    }
+  });
+  return root;
+};
 
-            groups.type = groups.type ? `99N${groups.type}` : "";
+const rehypeRewriteTypelinks: RehypePlugin<[]> = () => (root: Html.Root): Html.Root => {
-            groups.member = groups.member
+  visit(
-              ? `99V${groups.member}`
+    root as Unist.Parent,
-              : "";
+    "text",
-            const type = groups.member
+    (node: Html.Text, index: number, parent: Html.Parent) => {
-              ? `99T${groups.function ? "func" : groups.signal ? "signal" : "prop"}`
+      let changed = false;
-              : "";
+
-            return `TYPE${groups.module}${groups.type}${groups.member}${type}99TYPE`;
+      node.value = node.value.replace(
-          }
+        /TYPE99(\w+.)99TYPE/g,
-        );
+        (_full: string, match: string) => {
+          changed = true;
+
+          const linkObject = getQMLTypeLinkObject(match);
+          const link = getQMLTypeLink(currentVersion, linkObject);
+          const icon =
+            linkObject.mtype && linkObject.mtype !== "func"
+              ? getIconForLink(linkObject.mtype, false)
+              : null;
+          const hasParens =
+            linkObject.mtype === "func" ||
+            linkObject.mtype === "signal";
+          const hasDot = linkObject.name && linkObject.mname;
+
+          return `<a class="type${linkObject.mtype}-link typedata-link" href=${link}>${icon ?? ""}${linkObject.name ?? ""}${hasDot ? "." : ""}${linkObject.mname ?? ""}${hasParens ? "()" : ""}</a>`;
+        }
+      );
+
+      if (changed) {
+        const fragment = fromHtml(node.value, {
+          fragment: true,
+        });
+        parent.children.splice(index, 1, ...fragment.children);
+        return SKIP;
       }
     });
     return root;
   };
 
-const rehypeRewriteTypelinks: RehypePlugin<[]> =
-  () =>
-  (root: Html.Root): Html.Root => {
-    visit(
-      root as Unist.Parent,
-      "text",
-      (node: Html.Text, index: number, parent: Html.Parent) => {
-        let changed = false;
-
-        node.value = node.value.replace(
-          /TYPE99(\w+.)99TYPE/g,
-          (_full: string, match: string) => {
-            changed = true;
-
-            const linkObject = getQMLTypeLinkObject(match);
-            const link = getQMLTypeLink(
-              currentVersion,
-              linkObject
-            );
-            const icon =
-              linkObject.mtype && linkObject.mtype !== "func"
-                ? getIconForLink(linkObject.mtype, false)
-                : null;
-            const hasParens =
-              linkObject.mtype === "func" ||
-              linkObject.mtype === "signal";
-            const hasDot = linkObject.name && linkObject.mname;
-
-            return `<a class="type${linkObject.mtype}-link typedata-link" href=${link}>${icon ?? ""}${linkObject.name ?? ""}${hasDot ? "." : ""}${linkObject.mname ?? ""}${hasParens ? "()" : ""}</a>`;
-          }
-        );
-
-        if (changed) {
-          const fragment = fromHtml(node.value, {
-            fragment: true,
-          });
-          parent.children.splice(index, 1, ...fragment.children);
-          return SKIP;
-        }
-
-        return CONTINUE;
-      }
-    );
-
-    return root;
-  };
 
 const rehypeRewriteVersionedDoclinks: RehypePlugin<[]> =
   () =>

src/content.config.ts

@@ -2,7 +2,7 @@ import { defineCollection, z } from "astro:content";
 import { glob } from "astro/loaders";
 
 const guide = defineCollection({
-  loader: glob({ pattern: "**/*.md", base: "src/guide" }),
+  loader: glob({ pattern: "**/*.{md,mdx}", base: "src/guide" }),
   schema: z.object({
     title: z.string(),
     index: z.number(),

src/guide/v0_1_0/introduction.md

@@ -75,11 +75,11 @@ To start with, let's make a clock. To get the time, we'll use the `date` command
 > [!note/Note]
 > Quickshell can do more than just run processes. Read until the end for more information.
 
-We can use a [Process](@docs/types/quickshell.io/process) object to run commands
+We can use a [Process](@docs/types/Quickshell.Io/Process) object to run commands
 and a @@Quickshell.Io.StdioCollector to read their output.
 
 We'll listen to the @@Quickshell.Io.StdioCollector.streamFinished(s) signal with
-a [signal handler](@docs/guide/qml-language/#signal-handlers)
+a [signal handler](@docs/guide/qml-language#signal-handlers)
 to update the text on the clock.
 
 > [!note/Note]

src/guide/v0_1_0/qml-language.md

@@ -172,7 +172,7 @@ Name {
 
 Every object can contain [properties](#properties), [functions](#functions),
 and [signals](#signals). You can find out what properties are available for a type
-by looking it up in the [Type Reference](@docs/types/).
+by looking it up in the [Type Reference](@docs/types).
 
 #### Properties
 

src/guide/v0_2_0/qml-language.mdx

@@ -2,6 +2,7 @@
 title: "QML Language"
 index: 10
 ---
+
 import Collapsible from "@components/Collapsible.astro";
 
 Quickshell is configured using the Qt Modeling Language, or QML.
@@ -187,7 +188,7 @@ Name {
 
 Every object can contain [properties](#properties), [functions](#functions),
 and [signals](#signals). You can find out what properties are available for a type
-by looking it up in the [Type Reference](@docs/types/).
+by looking it up in the [Type Reference](@docs/types).
 
 #### Properties
 

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

@@ -27,11 +27,11 @@ export async function getStaticPaths() {
 }
 
 const { version, page } = Astro.props;
-const { headings } = await render(page);
+const { headings, Content } = await render(page);
 
 // we can't use 'Content' because there isn't a way to pass in a version
 const html = await processMarkdown(version.name, page.body!);
 ---
 <GuideLayout title={page.data.title} description="" headings={headings}>
-  <Fragment set:html={html}/>
+  <Content/>
 </GuideLayout>

src/styles/css-config/code.css

@@ -3,8 +3,8 @@ pre.shiki {
 }
 
 :where(p, li):has(> code) code {
-  padding-inline: var(--2xl);
+  padding-inline: var(--sm);
-  border-radius: var(--2xl);
+  border-radius: var(--radius-xs);
   color: hsl(var(--blue) 100 69);
   background-color: hsla(var(--blue) 85 35 / 0.1);
 }

src/styles/docs/docs.css

@@ -9,7 +9,7 @@
   margin-inline: 0.618rem;
   margin-top: 3.5rem;
   display: flex;
-  justify-content: center;
+  justify-content: safe center;
   flex-direction: row;
   flex-grow: 1;
   transition: filter var(--theme-transition);