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

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);
-  border-radius: var(--2xl);
+  padding-inline: var(--sm);
+  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);