fix: theme switching causing constant color transitions, too much shadow on codeblocks in light theme

biome.jsonc

@@ -1,13 +1,16 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.3.14/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.4.1/schema.json",
+  "files": {
+    "includes": ["**", "!!**/dist", "!**/node_modules", "!**/.yarn"]
+  },
   "formatter": {
     "enabled": true,
     "formatWithErrors": true,
     "indentStyle": "space",
     "indentWidth": 2,
     "lineEnding": "lf",
-    "lineWidth": 66,
+    "lineWidth": 80,
-    "attributePosition": "multiline"
+    "attributePosition": "auto"
   },
   "plugins": [],
   "linter": {
@@ -25,6 +28,14 @@
       }
     }
   },
+  "html": {
+    "formatter": {
+      "enabled": true,
+      "indentScriptAndStyle": true,
+      "lineWidth": 80
+    },
+    "experimentalFullSupportEnabled": true
+  },
   "javascript": {
     "formatter": {
       "jsxQuoteStyle": "double",
@@ -51,6 +62,15 @@
       "cssModules": true
     }
   },
+  "json": {
+    "formatter": {
+      "enabled": true,
+      "lineWidth": 80,
+      "lineEnding": "lf",
+      "indentStyle": "space",
+      "indentWidth": 2
+    }
+  },
   "overrides": [
     {
       "includes": ["**/*.ts", "**/*.tsx"],
@@ -75,21 +95,6 @@
           }
         }
       }
-    },
-    {
-      "includes": ["*.astro"],
-      "linter": {
-        "rules": {
-          "correctness": {
-            "noUnusedImports": "off",
-            "noUnusedVariables": "off"
-          },
-          "style": {
-            "useConst": "off",
-            "useImportType": "off"
-          }
-        }
-      }
     }
   ]
 }

injectQtdocs.ts

@@ -0,0 +1,58 @@
+import fs from "fs";
+import path from "path";
+import { JSDOM } from "jsdom";
+
+const QT_DOCS_PATH = "./public/docs/qt";
+const QT_DOCS_WEIGHT = 0.5;
+
+async function processQtDocs(dir: string) {
+  const files = fs.readdirSync(dir);
+
+  for (const file of files) {
+    const fullPath = path.join(dir, file);
+    if (fs.lstatSync(fullPath).isDirectory()) {
+      await processQtDocs(fullPath);
+      continue;
+    }
+
+    if (file.endsWith(".html")) {
+      const html = fs.readFileSync(fullPath, "utf8");
+      const dom = new JSDOM(html);
+      const { document } = dom.window;
+
+      // remove common Qt doc noise selectors
+      const noiseSelectors = [
+        ".sidebar",
+        "nav",
+        ".header",
+        ".footer",
+        ".heading",
+        ".toc",
+        ".navigationbar",
+      ];
+
+      noiseSelectors.forEach(selector => {
+        document
+          .querySelectorAll(selector)
+          .forEach(el => el.remove());
+      });
+
+      // inject pagefind meta
+      const metaSource = document.createElement("meta");
+      metaSource.setAttribute("data-pagefind-meta", "source:Qt");
+      document.head.appendChild(metaSource);
+
+      // lower weight for qt docs
+      const metaWeight = document.createElement("meta");
+      metaWeight.setAttribute(
+        "data-pagefind-weight",
+        QT_DOCS_WEIGHT.toString()
+      );
+      document.head.appendChild(metaWeight);
+
+      fs.writeFileSync(fullPath, dom.serialize());
+    }
+  }
+}
+
+processQtDocs(QT_DOCS_PATH).catch(console.error);

package.json

@@ -24,6 +24,7 @@
     "astro-icon": "^1.1.5",
     "hast-util-from-html": "^2.0.3",
     "hastscript": "^9.0.1",
+    "jsdom": "^28.1.0",
     "rehype": "^13.0.2",
     "remark-github-blockquote-alert": "^2.0.1",
     "solid-js": "^1.9.11",
@@ -37,6 +38,7 @@
     "@biomejs/biome": "^2.3.15",
     "@types/babel__core": "^7.20.5",
     "@types/hast": "^3.0.4",
+    "@types/jsdom": "^27.0.0",
     "@types/mdast": "^4.0.4",
     "@types/node": "^25.2.3",
     "@types/unist": "^3.0.3",

src/components/Accordion.astro

@@ -1,14 +1,11 @@
 ---
 import "@styles/components/accordion.css";
 ---
-<details class=`accordion ${Astro.props.class ?? ""}` {...Astro.props}>
+
-  <summary>
+<details class={`accordion ${Astro.props.class ?? ""}`} {...Astro.props}>
-    <slot name="header"/>
+  <summary><slot name="header" /></summary>
-  </summary>
   <div class="accordion-container">
-    <div>
+    <div><slot /></div>
-      <slot/>
-    </div>
   </div>
 </details>
 <script>
@@ -16,7 +13,9 @@ import "@styles/components/accordion.css";
     document.querySelectorAll(".accordion").forEach(element => {
       const accordion = element as HTMLDetailsElement;
       const summary = accordion.querySelector("summary")!;
-      const body = accordion.querySelector(".accordion-container") as HTMLDivElement;
+      const body = accordion.querySelector(
+        ".accordion-container"
+      ) as HTMLDivElement;
 
       summary.addEventListener("click", event => {
         if ((event.target as Element).tagName === "A") return;

src/components/Analytics.astro

@@ -1,4 +1,5 @@
 ---
 const production = import.meta.env.PRODUCTION;
 ---
+
 {production && <script is:inline defer data-domain="quickshell.outfoxxed.me" src="https://z.outfoxxed.me/z.js"></script>}

src/components/Badge.astro

@@ -9,13 +9,13 @@ export interface Props {
 
 const { badgeText, withIcon = true, badgeIconName } = Astro.props;
 ---
+
 <span class="badge">
   {withIcon &&
     (
       badgeIconName ?
         <Icon name={badgeIconName}/>
       : <Icon name={"flag"}/>
-    )
+    )}
-  }
   <span class="badge-text">{badgeText}</span>
 </span>

src/components/Collapsible.astro

@@ -7,9 +7,10 @@ interface Props {
 }
 const { title } = Astro.props;
 ---
+
 <Accordion class="docs-collapsible">
   <div slot="header">
-    <Fragment set:html={collapsibleMarker}/>
+    <Fragment set :html={collapsibleMarker} />
     {title}
   </div>
   <slot />

src/components/Footer.astro

@@ -10,6 +10,7 @@ interface Props {
 
 const props = Astro.props;
 ---
+
 <footer class=`${props.class ?? ""}`>
   <div class="credits">
     <p class="hint">Brought to you by:</p>

src/components/Header.astro

@@ -14,16 +14,15 @@ interface Props {
 
 const { title, headings, type } = Astro.props;
 ---
+
 <div class="header">
   <div class="header-item header-left">
-    <Nav mobile={true}/>
+    <Nav mobile={true} />
-    <h3 class="header-title">
+    <h3 class="header-title"><a href="/">Quickshell</a></h3>
-      <a href="/">Quickshell</a>
-    </h3>
   </div>
   <div class="header-item header-right">
-    <Search/>
+    <Search />
     <ThemeToggle />
-    <TOC title={title} headings={headings} type={type} mobile={true}/>
+    <TOC title={title} headings={headings} type={type} mobile={true} />
   </div>
 </div>

src/components/featurelist/FeatureList.astro

@@ -55,17 +55,19 @@ FloatingWindow {
 \`\`\``
 );
 ---
+
 <ul class="featurelist">
   <li class="featurelist-item hot-reloading left">
     <section class="feature-text">
       <h3 class="feature-title">See your changes in real time</h3>
       <span class="feature-subtitle">
-        Quickshell loads changes as soon as they're saved, letting you iterate as fast as you can type.
+        Quickshell loads changes as soon as they're saved, letting you iterate
+        as fast as you can type.
       </span>
     </section>
     <section class="feature-showcase">
       <video preload="metadata" controls={false} autoplay loop>
-        <source src="/assets/simple-shell-livereload.mp4" type="video/mp4"/>
+        <source src="/assets/simple-shell-livereload.mp4" type="video/mp4">
       </video>
     </section>
   </li>
@@ -73,46 +75,69 @@ FloatingWindow {
     <section class="feature-text">
       <h3 class="feature-title">Easy to use language</h3>
       <span class="feature-subtitle">
-        Quickshell is configured in QML, a simple language designed for creating flexible user interfaces.
+        Quickshell is configured in QML, a simple language designed for creating
-        It also has LSP support.
+        flexible user interfaces. It also has LSP support.
       </span>
     </section>
     <section class="feature-showcase" id="qml-showcase">
-      <div class="showcase-desktop">
+      <div class="showcase-desktop"><Fragment set :html={codeDesktop} /></div>
-        <Fragment set:html={codeDesktop}/>
+      <div class="showcase-mobile"><Fragment set :html={codeMobile} /></div>
-      </div>
-      <div class="showcase-mobile">
-        <Fragment set:html={codeMobile}/>
-      </div>
     </section>
   </li>
   <li class="featurelist-item cloud-li left">
     <section class="feature-text">
       <h3 class="feature-title">Extensive integrations</h3>
       <span class="feature-subtitle">
-        Quickshell comes with a large set of integrations, with new ones arriving all the time.
+        Quickshell comes with a large set of integrations, with new ones
+        arriving all the time.
       </span>
     </section>
     <section class="feature-showcase cloud">
       <section class="feature-cloud">
         <div class="cloud-center">
-          <img src="/favicon.svg" alt="Quickshell" />
+          <img src="/favicon.svg" alt="Quickshell">
         </div>
         <div class="cloud-items-wrapper">
           <span class="cloud-item wayland">
-            <div><img class="feature-icon" src="/assets/logos/wayland.svg" alt="Wayland" /></div>
+            <div>
+              <img
+                class="feature-icon"
+                src="/assets/logos/wayland.svg"
+                alt="Wayland"
+              >
+            </div>
           </span>
           <span class="cloud-item hyprland">
-            <div><img class="feature-icon" src="/assets/logos/hyprland.svg" alt="Hyprland" /></div>
+            <div>
+              <img
+                class="feature-icon"
+                src="/assets/logos/hyprland.svg"
+                alt="Hyprland"
+              >
+            </div>
           </span>
           <span class="cloud-item pipewire">
-            <div><img class="feature-icon" src="/assets/logos/pipewire.svg" alt="Pipewire" /></div>
+            <div>
+              <img
+                class="feature-icon"
+                src="/assets/logos/pipewire.svg"
+                alt="Pipewire"
+              >
+            </div>
           </span>
           <span class="cloud-item x-org">
-            <div><img class="feature-icon" src="/assets/logos/xorg.svg" alt="X.Org" /></div>
+            <div>
+              <img
+                class="feature-icon"
+                src="/assets/logos/xorg.svg"
+                alt="X.Org"
+              >
+            </div>
           </span>
           <span class="cloud-item sway">
-            <div><img class="feature-icon" src="/assets/logos/sway.svg" alt="Sway" /></div>
+            <div>
+              <img class="feature-icon" src="/assets/logos/sway.svg" alt="Sway">
+            </div>
           </span>
         </div>
       </section>

src/components/marquee/Marquee.astro

@@ -2,16 +2,17 @@
 import { Icon } from "astro-icon/components";
 import MarqueeContent from "./MarqueeContent.astro";
 ---
+
 <div class="marquee">
   <div class="marquee-scroll">
     <div id="marquee-scroll-left" class="marquee-scroll-arrow">
-      <div><Icon name="caret-left"/></div>
+      <div><Icon name="caret-left" /></div>
     </div>
     <div id="marquee-scroll-right" class="marquee-scroll-arrow">
-      <div><Icon name="caret-right"/></div>
+      <div><Icon name="caret-right" /></div>
     </div>
   </div>
-  <MarqueeContent/>
+  <MarqueeContent />
 </div>
 
-<script src="@config/styling/marquee.ts"/>
+<script src="@config/styling/marquee.ts" />

src/components/marquee/MarqueeContent.astro

@@ -34,7 +34,13 @@ const videos = [
   },
 ];
 ---
-<div id="marquee-content" class="marquee-content" data-scroll="0" data-media-index="0">
+
+<div
+  id="marquee-content"
+  class="marquee-content"
+  data-scroll="0"
+  data-media-index="0"
+>
   {videos.map(({ author, source, installable, path }, index) => {
     return (
       <div class=`marquee-item`>

src/components/navigation/Search.astro

@@ -2,6 +2,7 @@
 import "@pagefind/default-ui/css/ui.css";
 import magnifierIcon from "@icons/magnifier.svg?raw";
 ---
+
 <site-search class="search-wrapper">
   <button
     data-open-modal
@@ -10,58 +11,60 @@ import magnifierIcon from "@icons/magnifier.svg?raw";
     aria-keyshortcuts="Control+K"
     class="search-button"
   >
-    <Fragment set:html={magnifierIcon}/>
+    <Fragment set :html={magnifierIcon} />
     <span class="search-label" aria-hidden="true">Search</span>
-    <kbd class="search-kbd">
+    <kbd class="search-kbd"> <kbd>Ctrl</kbd><kbd>K</kbd> </kbd>
-      <kbd>Ctrl</kbd><kbd>K</kbd>
-    </kbd>
   </button>
   <dialog aria-label="Search" class="search-dialog">
     <div class="dialog-frame">
-      <button data-close-modal class="search-cancel">
+      <button data-close-modal class="search-cancel">Cancel</button>
-        Cancel
-      </button>
       <div class="search-container">
-        <div id="qs_search"/>
+        <div id="qs_search" />
       </div>
     </div>
   </dialog>
 </site-search>
-{
+{/**
-  /**
    * NOTE: YOINKED FROM STARLIGHT
 	 *  This is intentionally inlined to avoid briefly showing an invalid shortcut.
 	 *  Purposely using the deprecated `navigator.platform` property to detect Apple devices, as the
 	 *  user agent is spoofed by some browsers when opening the devtools.
-	 */
+	 */}
-}
 <script is:inline>
   (() => {
-		const openBtn = document.querySelector('button[data-open-modal]');
+    const openBtn = document.querySelector("button[data-open-modal]");
-		const shortcut = openBtn?.querySelector('kbd');
+    const shortcut = openBtn?.querySelector("kbd");
     if (!openBtn || !(shortcut instanceof HTMLElement)) return;
-		const platformKey = shortcut.querySelector('kbd');
+    const platformKey = shortcut.querySelector("kbd");
     if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
-			platformKey.textContent = '⌘';
+      platformKey.textContent = "⌘";
-			openBtn.setAttribute('aria-keyshortcuts', 'Meta+K');
+      openBtn.setAttribute("aria-keyshortcuts", "Meta+K");
     }
-		shortcut.style.display = '';
+    shortcut.style.display = "";
   })();
 </script>
 
 <script>
-import { getQMLTypeLinkObject, getQMLTypeLink, getIconForLink } from '@src/config/io/helpers';
+  import {
+    getQMLTypeLinkObject,
+    getQMLTypeLink,
+    getIconForLink,
+  } from "@src/config/io/helpers";
   class SiteSearch extends HTMLElement {
     constructor() {
       super();
-			const openBtn = this.querySelector<HTMLButtonElement>('button[data-open-modal]')!;
+      const openBtn = this.querySelector<HTMLButtonElement>(
-			const closeBtn = this.querySelector<HTMLButtonElement>('button[data-close-modal]')!;
+        "button[data-open-modal]"
-			const dialog = this.querySelector('dialog')!;
+      )!;
-			const dialogFrame = this.querySelector('.dialog-frame')!;
+      const closeBtn = this.querySelector<HTMLButtonElement>(
+        "button[data-close-modal]"
+      )!;
+      const dialog = this.querySelector("dialog")!;
+      const dialogFrame = this.querySelector(".dialog-frame")!;
 
       /** Close the modal if a user clicks on a link or outside of the modal. */
       const onClick = (event: MouseEvent) => {
-				const isLink = 'href' in (event.target || {});
+        const isLink = "href" in (event.target || {});
         if (
           isLink ||
           (document.body.contains(event.target as Node) &&
@@ -73,71 +76,89 @@ import { getQMLTypeLinkObject, getQMLTypeLink, getIconForLink } from '@src/confi
 
       const openModal = (event?: MouseEvent) => {
         dialog.showModal();
-				document.body.toggleAttribute('data-search-modal-open', true);
+        document.body.toggleAttribute("data-search-modal-open", true);
-				this.querySelector('input')?.focus();
+        this.querySelector("input")?.focus();
         event?.stopPropagation();
-				window.addEventListener('click', onClick);
+        window.addEventListener("click", onClick);
       };
 
       const closeModal = () => dialog.close();
 
-			openBtn.addEventListener('click', openModal);
+      openBtn.addEventListener("click", openModal);
       openBtn.disabled = false;
-			closeBtn.addEventListener('click', closeModal);
+      closeBtn.addEventListener("click", closeModal);
 
-			dialog.addEventListener('close', () => {
+      dialog.addEventListener("close", () => {
-				document.body.toggleAttribute('data-search-modal-open', false);
+        document.body.toggleAttribute("data-search-modal-open", false);
-				window.removeEventListener('click', onClick);
+        window.removeEventListener("click", onClick);
       });
 
       // Listen for `ctrl + k` and `cmd + k` keyboard shortcuts.
-			window.addEventListener('keydown', (e) => {
+      window.addEventListener("keydown", e => {
-				if ((e.metaKey === true || e.ctrlKey === true) && e.key === 'k') {
+        if ((e.metaKey === true || e.ctrlKey === true) && e.key === "k") {
           dialog.open ? closeModal() : openModal();
           e.preventDefault();
         }
       });
 
-      const processExcerpt = (sub_resultExcerpt:string):string => {
+      const processExcerpt = (sub_resultExcerpt: string): string => {
         const linkRegex = /TYPE99(\w+.)99TYPE/g;
         let excerpt = sub_resultExcerpt;
         const match = [...excerpt.matchAll(linkRegex)];
-        if (match.length > 0){
+        if (match.length > 0) {
           for (const matching of match) {
             const linkObject = getQMLTypeLinkObject(matching[1]);
             const link = getQMLTypeLink("NOVERSION", linkObject);
-            const icon = linkObject.mtype ? getIconForLink(linkObject.mtype, false) : null;
+            const icon = linkObject.mtype
+              ? getIconForLink(linkObject.mtype, false)
+              : null;
 
             // for signal
-            const bracketString = getIconForLink("func", false)
+            const bracketString = getIconForLink("func", false);
 
             const newLink = `<span class="type${linkObject.mtype}-link typedata-link">${icon ? icon : ""}<a href=${link}>${linkObject.mname || linkObject.name}</a>${linkObject.mtype === "signal" ? bracketString : ""}</span>`;
-            excerpt = excerpt.replace(matching[0], newLink)
+            excerpt = excerpt.replace(matching[0], newLink);
           }
         }
-        return excerpt
+        return excerpt;
-      }
+      };
-
 
       const formatURL = (path: string) => path;
 
-			window.addEventListener('DOMContentLoaded', () => {
+      window.addEventListener("DOMContentLoaded", () => {
-				const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
+        const onIdle = window.requestIdleCallback || (cb => setTimeout(cb, 1));
         onIdle(async () => {
-					// @ts-expect-error — Missing types for @pagefind/default-ui package.
+          const { PagefindUI } = await import(
-					const { PagefindUI } = await import('@pagefind/default-ui');
+            //@ts-expect-error — Missing types for @pagefind/default-ui package.
+            "@pagefind/default-ui"
+          );
           new PagefindUI({
-						element: '#qs_search',
+            element: "#qs_search",
             baseUrl: import.meta.env.BASE_URL,
-						bundlePath: import.meta.env.BASE_URL.replace(/\/$/, '') + '/pagefind/',
+            bundlePath:
+              import.meta.env.BASE_URL.replace(/\/$/, "") + "/pagefind/",
             showImages: false,
             showSubResults: true,
-            processResult: (result: { url: string; excerpt:string; sub_results: Array<{ url: string, excerpt:string }> }) => {
+            processResult: (result: {
+              url: string;
+              excerpt: string;
+              meta: {
+                source: string;
+              };
+              extra_class: string;
+              sub_results: Array<{
+                url: string;
+                excerpt: string;
+              }>;
+            }) => {
+              if (result.meta.source === "Qt Framework") {
+                result.extra_class = "qt-result-badge";
+              }
               result.url = formatURL(result.url);
-              result.excerpt = processExcerpt(result.excerpt)
+              result.excerpt = processExcerpt(result.excerpt);
-							result.sub_results = result.sub_results.map((sub_result) => {
+              result.sub_results = result.sub_results.map(sub_result => {
                 sub_result.url = formatURL(sub_result.url);
-                sub_result.excerpt = processExcerpt(sub_result.excerpt)
+                sub_result.excerpt = processExcerpt(sub_result.excerpt);
                 return sub_result;
               });
             },
@@ -146,5 +167,5 @@ import { getQMLTypeLinkObject, getQMLTypeLink, getIconForLink } from '@src/confi
       });
     }
   }
-	customElements.define('site-search', SiteSearch);
+  customElements.define("site-search", SiteSearch);
 </script>

src/components/navigation/sidebars/TOC.astro

@@ -21,12 +21,13 @@ const { title, headings, type, mobile } = Astro.props;
 const types: TypeTOC | null = type
   ? {
       properties: Object.keys(type.properties ?? {}),
-      functions: (type.functions ?? []).map((f:QuickshellFunction) => f.name),
+      functions: (type.functions ?? []).map((f: QuickshellFunction) => f.name),
       signals: Object.keys(type.signals ?? {}),
       variants: Object.keys(type.variants ?? {}),
     }
   : null;
 ---
+
 {((headings?.length ?? 0) != 0 || types) &&
   <div id="toc" aria-mobile={mobile} class=`toc-wrapper${mobile ? "-mobile":""}`>
     <TableOfContents
@@ -36,5 +37,4 @@ const types: TypeTOC | null = type
       mobile={mobile}
       client:idle
     />
-  </div>
+  </div>}
-}

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

@@ -10,6 +10,7 @@ interface Props {
 
 const { title, link, current, showIcon } = Astro.props;
 ---
+
 <a class=`nav-component nav-item nav-link ${current ? "nav-current" : ""}` href={link}>
   { showIcon ? (
     <div>

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

@@ -9,6 +9,7 @@ interface Props {
 }
 const { title, link, current } = Astro.props;
 ---
+
 <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>
@@ -16,5 +17,5 @@ const { title, link, current } = Astro.props;
       <Fragment set:html={navMarker}/>
     </div>
   </div>
-  <slot>
+  <slot />
 </Accordion>

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

@@ -17,9 +17,7 @@ const modules = versions.versions.find(
   version => version.name === versionName
 )?.modules;
 
-const currentPath = Astro.url.pathname
+const currentPath = Astro.url.pathname.split("/").filter(s => s !== "");
-  .split("/")
-  .filter(s => s !== "");
 
 const guidePages = await getGuideCollection(versionName ?? "");
 
@@ -40,18 +38,14 @@ function mkTree(
     title,
     link,
     current: currentPath[pathIdx] === slug,
-    entries: entries?.map(entry =>
+    entries: entries?.map(entry => mkTree(link, pathIdx + 1, entry)),
-      mkTree(link, pathIdx + 1, entry)
-    ),
   };
 }
 
 function genGuideNav(base: string): NavTree[] | undefined {
   const pages = guidePages
     .filter(
-      page =>
+      page => page.id.match(`^${base}[^/]*$`) !== null && page.id !== "index"
-        page.id.match(`^${base}[^/]*$`) !== null &&
-        page.id !== "index"
     )
     .sort((a, b) => a.data.index - b.data.index)
     .map(page => ({
@@ -98,6 +92,7 @@ if (versionName) {
   };
 }
 ---
+
 <nav class="navtree">
   <Link
     title="About"
@@ -109,9 +104,9 @@ if (versionName) {
     link="/changelog"
     current={currentPath.length === 1 && currentPath[0] === "changelog"}
   />
-  { versionedEntries && <Tree {...versionsTree as TreeEntry}/>}
+  {versionedEntries && <Tree {...versionsTree as TreeEntry}/>}
-  <hr/>
+  <hr>
-  { versionedEntries && (
+  {versionedEntries && (
     <Tree {...versionedEntries.guide}/>
     <Tree {...versionedEntries.types}/>
     <Link
@@ -125,7 +120,7 @@ if (versionName) {
       showIcon={true}
     />
   )}
-  { !versionedEntries && versions.versions.map(version => (
+  {!versionedEntries && versions.versions.map(version => (
     <Link
       title={`Quickshell Documentation (${version.name})`}
       link={`/docs/${version.name}/guide`}

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

@@ -14,6 +14,7 @@ interface Props extends TreeEntry {}
 
 const { title, link, entries, current } = Astro.props;
 ---
+
 <NavCollapsible title={title} link={link} current={current ?? false}>
   {entries?.map(entry => entry.entries ? (
     <Self {...entry}/>

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

@@ -8,6 +8,7 @@ export interface Props {
 
 const { mobile } = Astro.props;
 ---
+
 <aside class=`nav-wrapper${mobile ? "-mobile" : ""} id="nav"`>
   { mobile ? (
     <SidebarWrapper client:load>

src/components/type/Functions.astro

@@ -1,8 +1,5 @@
 ---
-import type {
+import type { QMLTypeLinkObject, QuickshellFunction } from "@config/_types";
-  QMLTypeLinkObject,
-  QuickshellFunction,
-} from "@config/_types";
 import { getQMLTypeLink } from "@config/io/helpers";
 import { Tag } from "@icons";
 import TypeDetails from "./TypeDetails.astro";
@@ -15,9 +12,9 @@ export interface Props {
 const { funcData } = Astro.props;
 const { version } = Astro.params;
 ---
+
 <ul class="typedata typefuncs">
-  {
+  {funcData.map((item:QuickshellFunction) => {
-    funcData.map(item => {
       const functionParams = item.params.length > 0 ? item.params.map((funcparam,index) => `${funcparam.name}${index !== item.params.length -1 ? ", ":""}`) : undefined
       const retTypeLink = getQMLTypeLink(version!, item.ret as unknown as QMLTypeLinkObject)
       let genericType:string|undefined;
@@ -57,6 +54,5 @@ const { version } = Astro.params;
           <TypeDetails markdown={item.details} />
         </li>
       )
-    })
+    })}
-  }
 </ul>

src/components/type/Properties.astro

@@ -3,6 +3,7 @@ import { getQMLTypeLink } from "@config/io/helpers";
 import type {
   QMLTypeLinkObject,
   QuickshellProps,
+  QuickshellInstance,
 } from "@config/_types";
 import { Tag } from "@icons";
 import TypeTitle from "./TypeTitle.astro";
@@ -16,13 +17,14 @@ export interface Props {
 const { props } = Astro.props;
 const { version } = Astro.params;
 ---
+
 <ul class="typedata typeprops">
-  {
+  {Object.keys(props).map((name) => {
-    Object.entries(props).map(([name, propData]) => {
+    const propData:QuickshellInstance = props[name];
-      let typeLink:string;
+    let typeLink: string;
-      let linkText:string;
+    let linkText: string;
-      let genericType:string|undefined;
+    let genericType: string|undefined;
-      let genericTypeLink:string|undefined;
+    let genericTypeLink: string|undefined;
     const gadget = propData.type.gadget;
     if (gadget) {
       typeLink = "#"
@@ -39,7 +41,7 @@ const { version } = Astro.params;
       <li id={ name } class="typedata-root typeprop-root">
         <TypeTitle
           typekind="prop"
-            typename={name}
+          typename={ name }
           typelink={typeLink}
           typelink_text={linkText}
           typename_generic={genericType}
@@ -66,6 +68,5 @@ const { version } = Astro.params;
         <TypeDetails markdown={propData.details} />
       </li>
     )
-    })
+  })}
-  }
 </ul>

src/components/type/Signals.astro

@@ -12,17 +12,25 @@ export interface Props {
 const { signals } = Astro.props;
 const { version } = Astro.params;
 ---
+
 <ul class="typedata typesignals">
-  {
+  {(Object.entries(signals) as [
-    Object.entries(signals).map(([name, signalData]) => {
+    keyof QuickshellSignal,
-      const paramKeys = signalData.params.length > 0 ? signalData.params.map((param,index) => `${param.name}${index !== signalData.params.length -1 ? ", ":""}`) : []
+    QuickshellSignal[keyof QuickshellSignal],
+    ][]).map(([name, signalData]) => {
+    const paramKeys = signalData.params.length > 0
+      ? signalData.params.map((param,index) => `${param.name}${
+        index !== signalData.params.length -1
+          ? ", "
+          :""
+      }`): []
     let genericType:string|undefined;
     let genericTypeLink:string|undefined;
     return (
-        <li id={ name } class="typedata-root typesignal-root">
+      <li id={ name.toString() } class="typedata-root typesignal-root">
         <TypeTitle
           typekind="signal"
-            typename={name}
+          typename={ name.toString() }
           typelink="/docs/configuration/qml-overview#-signals"
           typelink_text=""
           typename_generic={genericType}
@@ -50,6 +58,5 @@ const { version } = Astro.params;
         <TypeDetails markdown={signalData.details} />
       </li>
     )
-    })
+  })}
-  }
 </ul>

src/components/type/TypeDetails.astro

@@ -8,10 +8,9 @@ export interface Props {
 const { markdown } = Astro.props;
 const { version } = Astro.params;
 
-const html = markdown
+const html = markdown ? await processMarkdown(version!, markdown) : null;
-  ? await processMarkdown(version!, markdown)
-  : null;
 ---
+
 <section class="typedata-details">
   {html ? <div class="typedata-detailsdata" set:html={html} /> : <em>No details provided</em>}
 </section>

src/components/type/TypeTitle.astro

@@ -31,14 +31,17 @@ const iconSelector: { [key: string]: string } = {
   variant: "fourdiamonds",
 };
 ---
+
 <div class={`typedata-title type${typekind}-title`}>
   <section class={`typedata-name type${typekind}-name`}>
     {typekind !== "func" && <Icon name={iconSelector[typekind]}/>}
-    <span>{ typename }{ (typekind === "func" || typekind === "signal") ?
+    <span
+      >{typename}
+      {(typekind === "func" || typekind === "signal") ?
       (<span>(</span><span class="typedata-param">{typedata_params}</span><span>)</span>)
       :""}
     </span>
-    { typekind !== "variant" &&
+    {typekind !== "variant" &&
     <span class=`type-datatype ${typekind === "signal" && "typesignal-doclink"}`>{typekind !== "signal" &&":"}&nbsp;
       <a href={typelink}>{ typelink_text }</a>
       {typename_generic &&
@@ -46,12 +49,11 @@ const iconSelector: { [key: string]: string } = {
           <span class="type-generic"><span class="type-datatype">&lt;</span><a href={typelink_generic}>{typename_generic}</a><span class="type-datatype">&gt;</span></span>
         )
       }
-    </span>
+    </span>}
-    }
   </section>
   <section class="type-badges">
     {badges && badges.length > 0 ? (
-      badges.map(badgeText => <Badge badgeText={badgeText}/>)
+      badges.map((badgeText:string) => <Badge badgeText={badgeText}/>)
     ) : null}
   </section>
 </div>

src/components/type/Variants.astro

@@ -9,17 +9,20 @@ export interface Props {
 
 const { variants } = Astro.props;
 ---
+
 <ul class="typedata typevariants">
-  {
+  {(Object.entries(variants) as [
-    Object.entries(variants).map(([name, variantData]) => {
+    keyof QuickshellVariant,
+    QuickshellVariant[keyof QuickshellVariant],
+  ][]).map(([name, variantData]) => {
       const paramKeys = variantData.params && variantData.params.length > 0
         ? variantData.params.map(param => param.name)
         : [];
       return (
-        <li id={ name } class="typedata-root typevariant-root">
+        <li id={ name.toString() } class="typedata-root typevariant-root">
           <TypeTitle 
             typekind="variant"
-            typename={name}
+            typename={ name.toString() }
             typelink=""
             typelink_text=""
           />
@@ -36,7 +39,5 @@ const { variants } = Astro.props;
           <TypeDetails markdown={variantData.details} />
         </li>
       )
-    })
+    })}
-  }
 </ul>
-

src/config/Head.astro

@@ -12,30 +12,48 @@ interface Props {
 const { title, description } = Astro.props;
 ---
 
-<meta charset="UTF-8" />
+<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="viewport" content="width=device-width, initial-scale=1">
-<meta name="generator" content={Astro.generator} />
+<meta name="generator" content={Astro.generator}>
-<link rel="canonical" href={Astro.url} />
+<link rel="canonical" href={Astro.url}>
-<link rel="sitemap" href="/sitemap-index.xml" />
+<link rel="sitemap" href="/sitemap-index.xml">
 
 <title>{title}</title>
-<meta name="description" content={description} />
+<meta name="description" content={description}>
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="icon" type="image/svg+xml" href="/favicon.svg">
+
+<script is:inline>
+  const theme = (() => {
+    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
+      return localStorage.getItem("theme");
+    }
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+    return "light";
+  })();
+
+  if (theme === "dark") {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+</script>
 
 <!-- Open Graph Meta Tags -->
-<meta name="og:type" content="website" />
+<meta name="og:type" content="website">
-<meta name="og:site_name" content="quickshell" />
+<meta name="og:site_name" content="quickshell">
-<meta name="og:url" content={Astro.url} />
+<meta name="og:url" content={Astro.url}>
-<meta name="og:title" content={title} />
+<meta name="og:title" content={title}>
-<meta name="og:description" content={description} />
+<meta name="og:description" content={description}>
 <!-- <meta name="og:image" content={image} /> -->
 
 <!-- Twitter Meta Tags -->
-<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:domain" content="quickshell.outfoxxed.me" />
+<meta name="twitter:domain" content="quickshell.outfoxxed.me">
-<meta name="twitter:url" content={Astro.url} />
+<meta name="twitter:url" content={Astro.url}>
-<meta name="twitter:title" content={title} />
+<meta name="twitter:title" content={title}>
-<meta name="twitter:description" content={description} />
+<meta name="twitter:description" content={description}>
 <!-- <meta name="twitter:image" content={image} /> -->
 
-<Analytics/>
+<Analytics />

src/config/io/markdown.ts

@@ -46,9 +46,11 @@ const remarkParseAtTypes: RemarkPlugin<[]> =
             };
 
             const groups = args.pop() as Capture;
-          const pathp = (groups.path ?? "").split('.').filter(Boolean);
+            const pathp = (groups.path ?? "")
-          let type = (pathp.length >= 1 ? pathp.pop() : "");
+              .split(".")
-          let module = pathp.join('_');
+              .filter(Boolean);
+            let type = pathp.length >= 1 ? pathp.pop() : "";
+            let module = pathp.join("_");
 
             if (module) {
               const isQs = module.startsWith("Quickshell");
@@ -68,9 +70,11 @@ 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",
@@ -83,7 +87,10 @@ const rehypeRewriteTypelinks: RehypePlugin<[]> = () => (root: Html.Root): Html.R
             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)
@@ -104,11 +111,11 @@ const rehypeRewriteTypelinks: RehypePlugin<[]> = () => (root: Html.Root): Html.R
           parent.children.splice(index, 1, ...fragment.children);
           return SKIP;
         }
-    });
+      }
+    );
     return root;
   };
 
-
 const rehypeRewriteVersionedDoclinks: RehypePlugin<[]> =
   () =>
   (root: Html.Root): Html.Root => {

src/config/styling/theme_persistence.ts

@@ -21,13 +21,23 @@ export const getCurrentTheme = (): ThemeProps => {
   return { theme: systemTheme, system: systemTheme };
 };
 
-export const updateTheme = () => {
+export const updateTheme = (transition = true) => {
   const theme = getCurrentTheme();
   const toggle = document.getElementById(
     "theme-manual-toggle"
   ) as HTMLInputElement;
 
+  if (transition) {
     document.documentElement.classList.add("changing-theme");
+    document.documentElement.style.setProperty(
+      "--theme-transition",
+      "0.3s var(--ease-in-out)"
+    );
+  } else {
+    document.documentElement.style.removeProperty(
+      "--theme-transition"
+    );
+  }
 
   if (theme.theme === "dark") {
     document.documentElement.classList.add("dark");
@@ -37,11 +47,15 @@ export const updateTheme = () => {
     if (toggle) toggle.checked = false;
   }
 
+  if (transition) {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-      document.documentElement.classList.remove("changing-theme");
+        document.documentElement.classList.remove(
+          "changing-theme"
+        );
       });
     });
+  }
 };
 
 export const initTheme = () => {
@@ -58,11 +72,11 @@ export const initTheme = () => {
 
   window
     .matchMedia("(prefers-color-scheme: dark)")
-    .addEventListener("change", updateTheme);
+    .addEventListener("change", () => updateTheme());
-  window.addEventListener("storage", updateTheme);
+  window.addEventListener("storage", () => updateTheme());
 
   // initial sync
-  updateTheme();
+  updateTheme(false);
 };
 
 // auto-init on client

src/env.d.ts

@@ -1,13 +1,46 @@
-/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro-icon/empty-types" />
+
+declare module "astro-icon/components" {
+  export const Icon: typeof import("astro-icon/components").Icon;
+}
+
 interface ImportMetaEnv {
   readonly VERSION_FILE_PATH: string;
   readonly BASE_URL: string;
-  readonly PRODUCTION?: string;
+  readonly PRODUCTION: string | undefined;
 }
 
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
 
-export type { ImportMeta };
+// fix astro-breadcrumbs
+declare module "astro-breadcrumbs" {
+  interface BreadcrumbsProps {
+    indexText?: string;
+    mainText?: string;
+    crumbs: {
+      text: string;
+      href: string;
+    }[];
+    linkTextFormat?: string;
+    truncated?: boolean;
+    case?:
+      | "lower"
+      | "upper"
+      | "capitalize"
+      | "title"
+      | "original";
+    // Add other props you use here
+  }
+  export const Breadcrumbs: (props: BreadcrumbsProps) => any;
+  export default Breadcrumbs;
+}
+
+// fix for "?raw" imports
+declare module "*?raw" {
+  const content: string;
+  export default content;
+}

src/layouts/BaseLayout.astro

@@ -21,7 +21,7 @@ const { title, description } = Astro.props;
       class="theme-toggle-input"
       style="display: none;"
       aria-label="Toggle theme (light/dark)"
-    />
+    >
     <!--<Header />-->
     <slot />
     <script>
@@ -30,4 +30,3 @@ const { title, description } = Astro.props;
     </script>
   </body>
 </html>
-

src/layouts/DocsLayout.astro

@@ -17,7 +17,7 @@ interface Props {
 }
 
 const { title, description, headings, type } = Astro.props;
-let url = Astro.url.pathname.split("/").filter(s => s !== "");
+let url = Astro.url.pathname.split("/").filter((s: string) => s !== "");
 
 const breadcrumbs = [
   {
@@ -57,13 +57,19 @@ for (const segment of url) {
       class="theme-toggle-input"
       aria-label="Toggle theme (light/dark)"
       style="display: none;"
-    />
+    >
-    <Header title={title} headings={headings} type={type}/>
+    <Header title={title} headings={headings} type={type} />
     <div class="docslayout-root">
-      <Nav mobile={false}/>
+      <Nav mobile={false} />
       <div class="docslayout-inner" data-pagefind-body>
-        <Breadcrumbs crumbs={breadcrumbs} linkTextFormat="sentence" truncated={true} data-pagefind-ignore>
+        <Breadcrumbs
+          crumbs={breadcrumbs}
+          linkTextFormat="sentence"
+          truncated={true}
+          data-pagefind-ignore
+        >
           <svg
+            <!-- @ts-expect-error -->
             slot="index"
             xmlns="http://www.w3.org/2000/svg"
             width="1em"
@@ -74,25 +80,27 @@ for (const segment of url) {
             <path
               fill="currentColor"
               d="m219.31 108.68l-80-80a16 16 0 0 0-22.62 0l-80 80A15.87 15.87 0 0 0 32 120v96a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-56h32v56a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-96a15.87 15.87 0 0 0-4.69-11.32M208 208h-48v-56a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v56H48v-88l80-80l80 80Z"
-            ></path></svg
+            ></path>
-          >
+          </svg>
           <svg
+            <!-- @ts-expect-error -->
             slot="separator"
             xmlns="http://www.w3.org/2000/svg"
             width="1em"
             height="1em"
             viewBox="0 0 256 256"
-            ><path
+          >
+            <path
               fill="currentColor"
               d="m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32"
-            ></path></svg
+            ></path>
-          >
+          </svg>
         </Breadcrumbs>
-        <slot/>
+        <slot />
       </div>
-      <slot name="alongside-content"/>
+      <slot name="alongside-content" />
     </div>
-    <Footer/>
+    <Footer />
     <script>
       import "@config/styling/animations_helper.ts";
       import "@config/styling/theme_persistence.ts";
@@ -101,32 +109,32 @@ for (const segment of url) {
 </html>
 <script>
   // FIXME: need to make this work properly, or fold into the markdown processor
-let headings = document.getElementsByClassName("heading")
+  let headings = document.getElementsByClassName("heading");
-if (headings.length > 0) {
+  if (headings.length > 0) {
     //@ts-expect-error
     for (const heading of headings) {
-    let button = heading.querySelector("h2")
+      let button = heading.querySelector("h2");
       if (button) {
         button.onclick = () => {
           let link = window.location.href.split("#")[0];
           link += `#${button.textContent?.trimEnd().replaceAll(" ", "-").toLowerCase()}`;
-        window.location.href = link
+          window.location.href = link;
           navigator.clipboard.writeText(link);
-        heading.classList.toggle("copied")
+          heading.classList.toggle("copied");
           setTimeout(() => heading.classList.remove("copied"), 1000);
+        };
       }
-    }
+      let spanButton = heading.querySelector("span");
-    let spanButton =  heading.querySelector("span")
       if (spanButton) {
         spanButton.onclick = () => {
           let link = window.location.href.split("#")[0];
           link += `#${spanButton.textContent?.trim().replaceAll(" ", "-").toLowerCase()}`;
-        window.location.href = link
+          window.location.href = link;
           navigator.clipboard.writeText(link);
-        spanButton.classList.toggle("copied")
+          spanButton.classList.toggle("copied");
           setTimeout(() => heading.classList.remove("copied"), 1000);
+        };
       }
     }
   }
-}
 </script>

src/layouts/GuideLayout.astro

@@ -11,13 +11,20 @@ export interface Props {
 
 const { title, description, headings } = Astro.props;
 ---
+
 <DocsLayout title={title} description={description} headings={headings}>
   <div class="docs">
     <div class="docs-content">
-      <hr/>
+      <hr>
       <h1>{title}</h1>
-      <slot/>
+      <slot />
     </div>
   </div>
-  <TOC slot="alongside-content" mobile={false} title={title} headings={headings} data-pagefind-ignore/>
+  <TOC
+    slot="alongside-content"
+    mobile={false}
+    title={title}
+    headings={headings}
+    data-pagefind-ignore
+  />
 </DocsLayout>

src/layouts/GuideMdLayout.astro

@@ -15,6 +15,7 @@ const {
   frontmatter: { title, description },
 } = Astro.props;
 ---
+
 <GuideLayout title={title} description={description ?? ""} headings={headings}>
-  <slot/>
+  <slot />
 </GuideLayout>

src/pages/changelog.astro

@@ -10,10 +10,7 @@ const versionsMd = await Promise.all(
     .filter(version => version.changelog)
     .map(async version => ({
       version,
-      changelog: await processMarkdown(
+      changelog: await processMarkdown(version.name, version.changelog ?? ""),
-        version.name,
-        version.changelog ?? ""
-      ),
     }))
 );
 
@@ -23,6 +20,7 @@ const headings = versionsMd.map(({ version }) => ({
   depth: 1,
 }));
 ---
+
 <GuideLayout title="Changelog" description="" headings={headings}>
   {versionsMd.map(({ version, changelog }) => (
     <div style="display: flex; justify-content: space-between">

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

@@ -34,6 +34,7 @@ const { headings, Content } = await render(page);
 
 // const html = await processMarkdown(version.name, page.body!);
 ---
+
 <GuideLayout title={page.data.title} description="" headings={headings}>
-  <Content/>
+  <Content />
 </GuideLayout>

src/pages/docs/[version]/index.astro

@@ -11,6 +11,7 @@ export async function getStaticPaths() {
 
 const { version } = Astro.props;
 ---
+
 <DocsLayout title="Quickshell Docs" description="Quickshell Documentation">
   <h2>Docs</h2>
   <div class="root-nav">

src/pages/docs/[version]/types/[module]/[type].astro

@@ -9,6 +9,15 @@ import Functions from "@components/type/Functions.astro";
 import Signals from "@components/type/Signals.astro";
 import Variants from "@components/type/Variants.astro";
 import Badge from "@components/Badge.astro";
+import type { ModuleData, TypeData } from "@_types";
+
+interface Props {
+  version: {
+    name: string;
+  };
+  module: ModuleData;
+  type: TypeData;
+}
 
 export async function getStaticPaths() {
   return (await getVersionsData()).versions.flatMap(version => {
@@ -27,18 +36,21 @@ export async function getStaticPaths() {
 
 const { version, module, type } = Astro.props;
 
-const superLink = type.super
+const superLink = type.super ? getQMLTypeLink(version.name, type.super) : null;
-  ? getQMLTypeLink(version.name, type.super)
-  : null;
 
 const details = type.details
   ? await processMarkdown(version.name, type.details)
   : null;
 ---
-<DocsLayout title={`${module.name} - ${type.name}`} description={type.description ?? ""} type={type}>
+
+<DocsLayout
+  title={`${module.name} - ${type.name}`}
+  description={type.description ?? ""}
+  type={type}
+>
   <div class="docs">
     <div class="docs-content typedocs-content">
-      <hr />
+      <hr>
       <section class="typedocs-title">
         <h2 class="typedocs-title-text" data-pagefind-weight="10">
           {type.name}:
@@ -51,11 +63,10 @@ const details = type.details
             </a>
           ):(
             <span class="type-datatype" data-pagefind-ignore>{type.name}</span>
-          )
+          )}
-          }
         </h2>
         {type.flags && (
-        <div class="type-flags" data-pagefind-ignore>{type.flags.map(flag => (
+        <div class="type-flags" data-pagefind-ignore>{type.flags.map((flag:string) => (
           <Badge badgeText={flag}/>
         ))}</div>
       )}
@@ -65,23 +76,23 @@ const details = type.details
         <subheading class="typedocs-subheading">
           {details ? <span class="parsedMD" set:html={details}/> : (<span class="toparse">{type.description}</span>)}
         </subheading>
-        { Object.keys(type.properties ?? {}).length != 0 && (
+        {Object.keys(type.properties ?? {}).length != 0 && (
           <h2>Properties <a href={`/docs/${version.name}/guide/qml-language#properties`}>[?]</a></h2>
           <Properties props={type.properties!}/>
         )}
-        { (type.functions?.length ?? 0) != 0 && (
+        {(type.functions?.length ?? 0) != 0 && (
         <h2>Functions <a href={`/docs/${version.name}/guide/qml-language#functions`}>[?]</a></h2>
           <Functions
             funcData={type.functions!}
           />
         )}
-        { Object.keys(type.signals ?? {}).length != 0 && (
+        {Object.keys(type.signals ?? {}).length != 0 && (
         <h2>Signals <a href={`/docs/${version.name}/guide/qml-language#signals`}>[?]</a></h2>
           <Signals
             signals={type.signals!}
           />
         )}
-        { Object.keys(type.variants ?? {}).length != 0 && (
+        {Object.keys(type.variants ?? {}).length != 0 && (
           <h2>Variants</h2>
           <Variants
             variants={type.variants!}
@@ -89,7 +100,6 @@ const details = type.details
         )}
       </section>
     </div>
-    <TOC mobile={false} type={type} data-pagefind-ignore/>
+    <TOC mobile={false} type={type} data-pagefind-ignore />
   </div>
 </DocsLayout>
-

src/pages/docs/[version]/types/[module]/index.astro

@@ -2,6 +2,7 @@
 import DocsLayout from "@layouts/DocsLayout.astro";
 import { getVersionsData } from "@config/io/generateTypeData";
 import { processMarkdown } from "@src/config/io/markdown";
+import type { TypeData } from "@_types";
 
 export async function getStaticPaths() {
   return (await getVersionsData()).versions.flatMap(version => {
@@ -23,12 +24,12 @@ const details = module.details
   description="Quickshell Type Documentation"
 >
   <div class="docs-content">
-    <hr />
+    <hr>
     <h2 class="typedocs-title">{module.name} Definitions</h2>
     <section>
       <span>{module.description}</span>
       <div class="root-nav" data-pagefind-ignore>
-        {module.types.map(type => 
+        {module.types.map((type: TypeData) =>
           (
           <div class="root-nav-entry">
             <a class="root-nav-link" href={`/docs/${version.name}/types/${module.name}/${type.name}`}>

src/pages/docs/[version]/types/index.astro

@@ -1,6 +1,7 @@
 ---
 import DocsLayout from "@layouts/DocsLayout.astro";
 import { getVersionsData } from "@config/io/generateTypeData";
+import type { ModuleData } from "@_types";
 
 export async function getStaticPaths() {
   return (await getVersionsData()).versions.map(version => ({
@@ -11,14 +12,18 @@ export async function getStaticPaths() {
 
 const { version } = Astro.props;
 ---
-<DocsLayout title="Quickshell Module Listing" description="Quickshell Type Documentation">
+
+<DocsLayout
+  title="Quickshell Module Listing"
+  description="Quickshell Type Documentation"
+>
   <div class="docs-content">
-    <hr/>
+    <hr>
     <h2>Module Listing</h2>
     <section>
       <span>All modules included with Quickshell</span>
       <div class="root-nav" data-pagefind-ignore>
-        {version.modules.map(module => (
+        {version.modules.map((module: ModuleData) => (
           <div class="root-nav-entry">
             <a class="root-nav-link" href={`/docs/${version.name}/types/${module.name}`}>
               {module.name}

src/pages/index.astro

@@ -8,42 +8,52 @@ const defaultVersion = (await getVersionsData()).default;
 
 const title = "Quickshell";
 ---
-<BaseLayout title={title} description="A fully user customizable desktop shell" image="/quickshell.png">
+
+<BaseLayout
+  title={title}
+  description="A fully user customizable desktop shell"
+  image="/quickshell.png"
+>
   <!--<a class="main-page-banner" href="/changelog">
     Quickshell 0.2.1 has been released! | 2025-10-11
   </a>-->
   <div class="main-page_hero" data-pagefind-ignore>
     <div class="titlebox">
-      <img src="/favicon.svg" alt="Quickshell"/>
+      <img src="/favicon.svg" alt="Quickshell">
       <h1 class="gradient-text">Quickshell</h1>
     </div>
     <section class="main-page_hero-text">
       <h2>building blocks for your desktop</h2>
     </section>
-    <Marquee/>
+    <Marquee />
     <section class="about">
       <div class="about-txt">
         <p>
-          Quickshell is a toolkit for building status bars, widgets, lockscreens,
+          Quickshell is a toolkit for building status bars, widgets,
-          and other desktop components using QtQuick. It can be used alongside your
+          lockscreens, and other desktop components using QtQuick. It can be
-          wayland compositor or window manager to build a complete desktop environment.
+          used alongside your wayland compositor or window manager to build a
+          complete desktop environment.
           <br class="about-break">
           <br class="about-break">
           <a href="/about">More information</a>
         </p>
       </div>
       <div class="about-buttons">
-        <a href={`/docs/${defaultVersion}/guide/install-setup`} class="main-page_link-card">
+        <a
+          href={`/docs/${defaultVersion}/guide/install-setup`}
+          class="main-page_link-card"
+        >
           <h3>Install</h3>
         </a>
-        <a href={`/docs/${defaultVersion}/types`} class="main-page_link-card main-page_bluecard">
+        <a
+          href={`/docs/${defaultVersion}/types`}
+          class="main-page_link-card main-page_bluecard"
+        >
           <h3>Documentation</h3>
         </a>
       </div>
     </section>
-    <section class="featurelist-section">
+    <section class="featurelist-section"><FeatureList /></section>
-      <FeatureList/>
-    </section>
   </div>
-  <Footer class="frontpage-footer"/>
+  <Footer class="frontpage-footer" />
 </BaseLayout>

src/styles/css-config/base.css

@@ -1,7 +1,6 @@
 html {
   font-family:
-    "Rubik Variable", Inter, system-ui, Avenir, Helvetica, Arial,
+    "Rubik Variable", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-    sans-serif;
   font-size: 14px;
   line-height: 1.272;
   font-weight: 400;

src/styles/css-config/code.css

@@ -86,9 +86,10 @@ pre {
   }
 
   &.shiki {
-    box-shadow: var(--shadow-xl);
+    box-shadow: var(--shadow-md);
 
     &:hover .copy-button {
+      transition: background-color var(--theme-transition);
       background-color: hsla(var(--blue) 85 35 / 0.07);
     }
   }

src/styles/css-config/vars.css

@@ -78,5 +78,5 @@ html {
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 
-  --theme-transition: 0.3s var(--ease-in-out);
+  --theme-transition: 0s var(--ease-in-out);
 }

src/styles/docs/docs.css

@@ -32,11 +32,9 @@
 }
 
 html:not(.dark):not(:has(input#theme-manual-toggle:checked)) > .dim-content-toc,
-
+html:not(.dark):not(:has(input#theme-manual-toggle:checked))
-html:not(.dark):not(:has(input#theme-manual-toggle:checked)) > .dim-content-nav {
+  > .dim-content-nav {
-
   background-color: #909090;
-
 }
 
 .docs-content {

src/styles/docs/nav/nav-tree.css

@@ -42,11 +42,7 @@
 
 .fade {
   mask-image: linear-gradient(to right, #000 80%, transparent);
-  -webkit-mask-image: linear-gradient(
+  -webkit-mask-image: linear-gradient(to right, #000 80%, transparent);
-    to right,
-    #000 80%,
-    transparent
-  );
 }
 
 .nav-collapsible {

src/styles/docs/nav/search.css

@@ -4,47 +4,20 @@
 }
 
 #qs_search {
-  --search-result-spacing: calc(
+  --search-result-spacing: calc(1.25rem * var(--pagefind-ui-scale));
-    1.25rem *
+  --search-result-pad-inline-start: calc(3.75rem * var(--pagefind-ui-scale));
-    var(--pagefind-ui-scale)
+  --search-result-pad-inline-end: calc(1.25rem * var(--pagefind-ui-scale));
-  );
+  --search-result-pad-block: calc(0.9375rem * var(--pagefind-ui-scale));
-  --search-result-pad-inline-start: calc(
+  --search-result-nested-pad-block: calc(0.625rem * var(--pagefind-ui-scale));
-    3.75rem *
-    var(--pagefind-ui-scale)
-  );
-  --search-result-pad-inline-end: calc(
-    1.25rem *
-    var(--pagefind-ui-scale)
-  );
-  --search-result-pad-block: calc(
-    0.9375rem *
-    var(--pagefind-ui-scale)
-  );
-  --search-result-nested-pad-block: calc(
-    0.625rem *
-    var(--pagefind-ui-scale)
-  );
   --search-corners: calc(0.3125rem * var(--pagefind-ui-scale));
-  --search-page-icon-size: calc(
+  --search-page-icon-size: calc(1.875rem * var(--pagefind-ui-scale));
-    1.875rem *
-    var(--pagefind-ui-scale)
-  );
   --search-page-icon-inline-start: calc(
-    (
+    (var(--search-result-pad-inline-start) - var(--search-page-icon-size)) /
-      var(--search-result-pad-inline-start) -
-      var(--search-page-icon-size)
-    ) /
     2
   );
-  --search-tree-diagram-size: calc(
+  --search-tree-diagram-size: calc(2.5rem * var(--pagefind-ui-scale));
-    2.5rem *
-    var(--pagefind-ui-scale)
-  );
   --search-tree-diagram-inline-start: calc(
-    (
+    (var(--search-result-pad-inline-start) - var(--search-tree-diagram-size)) /
-      var(--search-result-pad-inline-start) -
-      var(--search-tree-diagram-size)
-    ) /
     2
   );
 }
@@ -57,12 +30,7 @@
 
 #qs_search
   .pagefind-ui--reset
-  *:where(
+  *:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) {
-    :not(html, iframe, canvas, img, svg, video):not(
-        svg *,
-        symbol *
-      )
-  ) {
   outline: unset;
 }
 
@@ -119,18 +87,14 @@
 }
 
 #qs_search
-  .pagefind-ui__result-title:not(
+  .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)),
-    :where(.pagefind-ui__result-nested *)
-  ),
 #qs_search .pagefind-ui__result-nested {
   position: relative;
   background-color: hsl(0deg 0% 10%);
 }
 
 #qs_search
-  .pagefind-ui__result-title:not(
+  .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):hover,
-    :where(.pagefind-ui__result-nested *)
-  ):hover,
 #qs_search
   .pagefind-ui__result-title:not(
     :where(.pagefind-ui__result-nested *)
@@ -161,17 +125,12 @@
   border-radius: 0 0 var(--search-corners) var(--search-corners);
 }
 
-#qs_search
+#qs_search .pagefind-ui__result-inner > .pagefind-ui__result-title {
-  .pagefind-ui__result-inner
+  padding: var(--search-result-pad-block) var(--search-result-pad-inline-end);
-  > .pagefind-ui__result-title {
-  padding: var(--search-result-pad-block)
-    var(--search-result-pad-inline-end);
   padding-inline-start: var(--search-result-pad-inline-start);
 }
 
-#qs_search
+#qs_search .pagefind-ui__result-inner > .pagefind-ui__result-title::before {
-  .pagefind-ui__result-inner
-  > .pagefind-ui__result-title::before {
   content: "";
   position: absolute;
   inset-block: 0;
@@ -199,9 +158,7 @@
   text-decoration: none;
 }
 
-#qs_search
+#qs_search .pagefind-ui__result-nested .pagefind-ui__result-link::before {
-  .pagefind-ui__result-nested
-  .pagefind-ui__result-link::before {
   content: unset;
 }
 
@@ -236,9 +193,7 @@
   overflow-wrap: anywhere;
 }
 
-#qs_search
+#qs_search .pagefind-ui__result-inner > .pagefind-ui__result-excerpt {
-  .pagefind-ui__result-inner
-  > .pagefind-ui__result-excerpt {
   display: inline-block;
   position: relative;
   background: hsl(0deg 0% 10%);
@@ -273,18 +228,8 @@
 site-search {
   --shadow-lg:
     0px 25px 7px hsl(0deg, 0%, 0%, 0.03),
-    0px 16px 6px hsl(0deg, 0%, 0%, 0.1), 0px 9px 5px hsl(
+    0px 16px 6px hsl(0deg, 0%, 0%, 0.1), 0px 9px 5px hsl(223deg, 13%, 10%, 0.33),
-      223deg,
+    0px 4px 4px hsl(0deg, 0%, 0%, 0.75), 0px 4px 2px hsl(0deg, 0%, 0%, 0.25);
-      13%,
-      10%,
-      0.33
-    ),
-    0px 4px 4px hsl(0deg, 0%, 0%, 0.75), 0px 4px 2px hsl(
-      0deg,
-      0%,
-      0%,
-      0.25
-    );
   display: contents;
 }
 
@@ -433,8 +378,7 @@ button[data-close-modal] {
   }
 
   html.dark button[data-open-modal],
-  html:has(input#theme-manual-toggle:checked)
+  html:has(input#theme-manual-toggle:checked) button[data-open-modal] {
-    button[data-open-modal] {
     background-color: hsla(var(--blue) 15% 15% / 0.5);
     color: hsl(var(--blue) 40% 65%);
 

tsconfig.json

@@ -1,9 +1,8 @@
 {
   "extends": "astro/tsconfigs/strict",
+  "include": ["src/**/*", "**/**.d.ts", "pagefind.ts"],
   "compilerOptions": {
-    "lib": [
+    "lib": ["es2023"],
-      "es2023"
-    ],
     "plugins": [
       {
         "name": "@astrojs/ts-plugin"
@@ -12,38 +11,25 @@
     "jsx": "preserve",
     "jsxImportSource": "solid-js",
     "verbatimModuleSyntax": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@*": [
+      "@*": ["./*"],
-        "./*"
+      "@/*": ["./src/*"],
-      ],
+      "@config/*": ["./src/config/*"],
-      "@/*": [
+      "@icons": ["./src/components/icons.tsx"],
-        "./src/*"
+      "@icons/*": ["./src/icons/*"],
-      ],
+      "@components/*": ["./src/components/*"],
-      "@config/*": [
+      "@layouts/*": ["./src/layouts/*"],
-        "./src/config/*"
+      "@styles/*": ["./src/styles/*"],
-      ],
+      "@_types": ["./src/config/_types/index.ts"],
-      "@icons": [
+      "@_types/*": ["./src/config/_types/*"]
-        "./src/components/icons.tsx"
+    },
-      ],
+    "types": ["astro/client"]
-      "@icons/*": [
-        "./src/icons/*"
-      ],
-      "@components/*": [
-        "./src/components/*"
-      ],
-      "@layouts/*": [
-        "./src/layouts/*"
-      ],
-      "@styles/*": [
-        "./src/styles/*"
-      ],
-      "@_types": [
-        "./src/config/_types/index.ts"
-      ],
-      "@_types/*": [
-        "./src/config/_types/*"
-      ]
-    }
   }
 }

yarn.lock

@@ -5,6 +5,13 @@ __metadata:
   version: 8
   cacheKey: 10c0
 
+"@acemir/cssom@npm:^0.9.31":
+  version: 0.9.31
+  resolution: "@acemir/cssom@npm:0.9.31"
+  checksum: 10c0/cbfff98812642104ec3b37de1ad3a53f216ddc437e7b9276a23f46f2453844ea3c3f46c200bc4656a2f747fb26567560b3cc5183d549d119a758926551b5f566
+  languageName: node
+  linkType: hard
+
 "@antfu/install-pkg@npm:^1.0.0":
   version: 1.1.0
   resolution: "@antfu/install-pkg@npm:1.1.0"
@@ -22,6 +29,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@asamuzakjp/css-color@npm:^4.1.2":
+  version: 4.1.2
+  resolution: "@asamuzakjp/css-color@npm:4.1.2"
+  dependencies:
+    "@csstools/css-calc": "npm:^3.0.0"
+    "@csstools/css-color-parser": "npm:^4.0.1"
+    "@csstools/css-parser-algorithms": "npm:^4.0.0"
+    "@csstools/css-tokenizer": "npm:^4.0.0"
+    lru-cache: "npm:^11.2.5"
+  checksum: 10c0/e432fdef978b37654a2ca31169a149b9173e708f70c82612acb123a36dbc7dd99913c48cbf2edd6fe3652cc627d4bc94bf87571463da0b788f15b973d4ce5b0f
+  languageName: node
+  linkType: hard
+
+"@asamuzakjp/dom-selector@npm:^6.8.1":
+  version: 6.8.1
+  resolution: "@asamuzakjp/dom-selector@npm:6.8.1"
+  dependencies:
+    "@asamuzakjp/nwsapi": "npm:^2.3.9"
+    bidi-js: "npm:^1.0.3"
+    css-tree: "npm:^3.1.0"
+    is-potential-custom-element-name: "npm:^1.0.1"
+    lru-cache: "npm:^11.2.6"
+  checksum: 10c0/635de2c3b11971c07e2d491fd2833d2499bafbab05b616f5d38041031718879c404456644f60c45e9ba4ca2423e5bb48bf3c46179b0c58a0ea68eaae8c61e85f
+  languageName: node
+  linkType: hard
+
+"@asamuzakjp/nwsapi@npm:^2.3.9":
+  version: 2.3.9
+  resolution: "@asamuzakjp/nwsapi@npm:2.3.9"
+  checksum: 10c0/869b81382e775499c96c45c6dbe0d0766a6da04bcf0abb79f5333535c4e19946851acaa43398f896e2ecc5a1de9cf3db7cf8c4b1afac1ee3d15e21584546d74d
+  languageName: node
+  linkType: hard
+
 "@astrojs/check@npm:0.9.6":
   version: 0.9.6
   resolution: "@astrojs/check@npm:0.9.6"
@@ -673,6 +713,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bramus/specificity@npm:^2.4.2":
+  version: 2.4.2
+  resolution: "@bramus/specificity@npm:2.4.2"
+  dependencies:
+    css-tree: "npm:^3.0.0"
+  bin:
+    specificity: bin/cli.js
+  checksum: 10c0/c5f4e04e0bca0d2202598207a5eb0733c8109d12a68a329caa26373bec598d99db5bb785b8865fefa00fc01b08c6068138807ceb11a948fe15e904ed6cf4ba72
+  languageName: node
+  linkType: hard
+
 "@capsizecss/unpack@npm:^4.0.0":
   version: 4.0.0
   resolution: "@capsizecss/unpack@npm:4.0.0"
@@ -682,6 +733,59 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@csstools/color-helpers@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "@csstools/color-helpers@npm:6.0.1"
+  checksum: 10c0/866844267d5aa5a02fe9d54f6db6fc18f6306595edb03664cc8ef15c99d3e6f3b42eb1a413c98bafa5b2dc0d8e0193da9b3bcc9d6a04f5de74cbd44935e74b3c
+  languageName: node
+  linkType: hard
+
+"@csstools/css-calc@npm:^3.0.0":
+  version: 3.1.1
+  resolution: "@csstools/css-calc@npm:3.1.1"
+  peerDependencies:
+    "@csstools/css-parser-algorithms": ^4.0.0
+    "@csstools/css-tokenizer": ^4.0.0
+  checksum: 10c0/6efcc016d988edf66e54c7bad03e352d61752cbd1b56c7557fd013868aab23505052ded8f912cd4034e216943ea1e04c957d81012489e3eddc14a57b386510ef
+  languageName: node
+  linkType: hard
+
+"@csstools/css-color-parser@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "@csstools/css-color-parser@npm:4.0.1"
+  dependencies:
+    "@csstools/color-helpers": "npm:^6.0.1"
+    "@csstools/css-calc": "npm:^3.0.0"
+  peerDependencies:
+    "@csstools/css-parser-algorithms": ^4.0.0
+    "@csstools/css-tokenizer": ^4.0.0
+  checksum: 10c0/c46be5b9f5c0ef3cd25b47a71bd2a4d1c4856b123ecba4abe8eaa0688d3fc47f58fa67ea281d6b9efca4b9fdfa88fb045c51d0f9b8c612a56bd546d38260b138
+  languageName: node
+  linkType: hard
+
+"@csstools/css-parser-algorithms@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@csstools/css-parser-algorithms@npm:4.0.0"
+  peerDependencies:
+    "@csstools/css-tokenizer": ^4.0.0
+  checksum: 10c0/94558c2428d6ef0ddef542e86e0a8376aa1263a12a59770abb13ba50d7b83086822c75433f32aa2e7fef00555e1cc88292f9ca5bce79aed232bb3fed73b1528d
+  languageName: node
+  linkType: hard
+
+"@csstools/css-syntax-patches-for-csstree@npm:^1.0.26":
+  version: 1.0.27
+  resolution: "@csstools/css-syntax-patches-for-csstree@npm:1.0.27"
+  checksum: 10c0/ef3f2a639109758c0f3c04520465800ca4c830174bd6f7979795083877c82ace51ab8353857b06a818cb6c0de6d4dc88f84a86fc3b021be47f11a0f1c4b74e7e
+  languageName: node
+  linkType: hard
+
+"@csstools/css-tokenizer@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@csstools/css-tokenizer@npm:4.0.0"
+  checksum: 10c0/669cf3d0f9c8e1ffdf8c9955ad8beba0c8cfe03197fe29a4fcbd9ee6f7a18856cfa42c62670021a75183d9ab37f5d14a866e6a9df753a6c07f59e36797a9ea9f
+  languageName: node
+  linkType: hard
+
 "@emmetio/abbreviation@npm:^2.3.3":
   version: 2.3.3
   resolution: "@emmetio/abbreviation@npm:2.3.3"
@@ -1113,6 +1217,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@exodus/bytes@npm:^1.11.0, @exodus/bytes@npm:^1.6.0":
+  version: 1.14.1
+  resolution: "@exodus/bytes@npm:1.14.1"
+  peerDependencies:
+    "@noble/hashes": ^1.8.0 || ^2.0.0
+  peerDependenciesMeta:
+    "@noble/hashes":
+      optional: true
+  checksum: 10c0/486dad30992a8c81058b6b59341ee934c10a7e8016b440770de0f86d2e270950c5d37fc6724ea017295b8654c7564abf6a21cc49bed569d74721b545f571e416
+  languageName: node
+  linkType: hard
+
 "@fontsource-variable/rubik@npm:^5.2.8":
   version: 5.2.8
   resolution: "@fontsource-variable/rubik@npm:5.2.8"
@@ -1914,6 +2030,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/jsdom@npm:^27.0.0":
+  version: 27.0.0
+  resolution: "@types/jsdom@npm:27.0.0"
+  dependencies:
+    "@types/node": "npm:*"
+    "@types/tough-cookie": "npm:*"
+    parse5: "npm:^7.0.0"
+  checksum: 10c0/1ec7ff7177e1f7266e51279f07f3cd013e1713766b01eebceac783061675b31c672a47b0a508dcbaf040f7f22d90405858378c6c5358991989fbe8b95adde354
+  languageName: node
+  linkType: hard
+
 "@types/mdast@npm:^4.0.0, @types/mdast@npm:^4.0.4":
   version: 4.0.4
   resolution: "@types/mdast@npm:4.0.4"
@@ -1988,6 +2115,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/tough-cookie@npm:*":
+  version: 4.0.5
+  resolution: "@types/tough-cookie@npm:4.0.5"
+  checksum: 10c0/68c6921721a3dcb40451543db2174a145ef915bc8bcbe7ad4e59194a0238e776e782b896c7a59f4b93ac6acefca9161fccb31d1ce3b3445cb6faa467297fb473
+  languageName: node
+  linkType: hard
+
 "@types/unist@npm:*, @types/unist@npm:^3.0.0, @types/unist@npm:^3.0.3":
   version: 3.0.3
   resolution: "@types/unist@npm:3.0.3"
@@ -2435,6 +2569,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bidi-js@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "bidi-js@npm:1.0.3"
+  dependencies:
+    require-from-string: "npm:^2.0.2"
+  checksum: 10c0/fdddea4aa4120a34285486f2267526cd9298b6e8b773ad25e765d4f104b6d7437ab4ba542e6939e3ac834a7570bcf121ee2cf6d3ae7cd7082c4b5bedc8f271e1
+  languageName: node
+  linkType: hard
+
 "boolbase@npm:^1.0.0":
   version: 1.0.0
   resolution: "boolbase@npm:1.0.0"
@@ -2798,7 +2941,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-tree@npm:^3.0.1, css-tree@npm:^3.1.0":
+"css-tree@npm:^3.0.0, css-tree@npm:^3.0.1, css-tree@npm:^3.1.0":
   version: 3.1.0
   resolution: "css-tree@npm:3.1.0"
   dependencies:
@@ -2843,6 +2986,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cssstyle@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "cssstyle@npm:6.0.1"
+  dependencies:
+    "@asamuzakjp/css-color": "npm:^4.1.2"
+    "@csstools/css-syntax-patches-for-csstree": "npm:^1.0.26"
+    css-tree: "npm:^3.1.0"
+    lru-cache: "npm:^11.2.5"
+  checksum: 10c0/92a8581bad4ce9f77d22761f1aabe72829f4457ac709f4fe1a5b45b431ba165368cd7f849b00454ee31cf0a4c838be583107883f14b6d546802cf3c76a88ca41
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^3.1.0":
   version: 3.2.3
   resolution: "csstype@npm:3.2.3"
@@ -2850,6 +3005,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"data-urls@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "data-urls@npm:7.0.0"
+  dependencies:
+    whatwg-mimetype: "npm:^5.0.0"
+    whatwg-url: "npm:^16.0.0"
+  checksum: 10c0/08d88ef50d8966a070ffdaa703e1e4b29f01bb2da364dfbc1612b1c2a4caa8045802c9532d81347b21781100132addb36a585071c8323b12cce97973961dee9f
+  languageName: node
+  linkType: hard
+
 "debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.4, debug@npm:^4.4.0, debug@npm:^4.4.3":
   version: 4.4.3
   resolution: "debug@npm:4.4.3"
@@ -2862,6 +3027,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"decimal.js@npm:^10.6.0":
+  version: 10.6.0
+  resolution: "decimal.js@npm:10.6.0"
+  checksum: 10c0/07d69fbcc54167a340d2d97de95f546f9ff1f69d2b45a02fd7a5292412df3cd9eb7e23065e532a318f5474a2e1bccf8392fdf0443ef467f97f3bf8cb0477e5aa
+  languageName: node
+  linkType: hard
+
 "decode-named-character-reference@npm:^1.0.0":
   version: 1.2.0
   resolution: "decode-named-character-reference@npm:1.2.0"
@@ -4059,6 +4231,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-encoding-sniffer@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "html-encoding-sniffer@npm:6.0.0"
+  dependencies:
+    "@exodus/bytes": "npm:^1.6.0"
+  checksum: 10c0/66dc3f6f5539cc3beb814fcbfae7eacf4ec38cf824d6e1425b72039b51a40f4456bd8541ba66f4f4fe09cdf885ab5cd5bae6ec6339d6895a930b2fdb83c53025
+  languageName: node
+  linkType: hard
+
 "html-entities@npm:2.3.3":
   version: 2.3.3
   resolution: "html-entities@npm:2.3.3"
@@ -4106,7 +4287,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-proxy-agent@npm:^7.0.0":
+"http-proxy-agent@npm:^7.0.0, http-proxy-agent@npm:^7.0.2":
   version: 7.0.2
   resolution: "http-proxy-agent@npm:7.0.2"
   dependencies:
@@ -4116,7 +4297,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"https-proxy-agent@npm:^7.0.1":
+"https-proxy-agent@npm:^7.0.1, https-proxy-agent@npm:^7.0.6":
   version: 7.0.6
   resolution: "https-proxy-agent@npm:7.0.6"
   dependencies:
@@ -4242,6 +4423,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-potential-custom-element-name@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "is-potential-custom-element-name@npm:1.0.1"
+  checksum: 10c0/b73e2f22bc863b0939941d369486d308b43d7aef1f9439705e3582bfccaa4516406865e32c968a35f97a99396dac84e2624e67b0a16b0a15086a785e16ce7db9
+  languageName: node
+  linkType: hard
+
 "is-what@npm:^4.1.8":
   version: 4.1.16
   resolution: "is-what@npm:4.1.16"
@@ -4292,6 +4480,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsdom@npm:^28.1.0":
+  version: 28.1.0
+  resolution: "jsdom@npm:28.1.0"
+  dependencies:
+    "@acemir/cssom": "npm:^0.9.31"
+    "@asamuzakjp/dom-selector": "npm:^6.8.1"
+    "@bramus/specificity": "npm:^2.4.2"
+    "@exodus/bytes": "npm:^1.11.0"
+    cssstyle: "npm:^6.0.1"
+    data-urls: "npm:^7.0.0"
+    decimal.js: "npm:^10.6.0"
+    html-encoding-sniffer: "npm:^6.0.0"
+    http-proxy-agent: "npm:^7.0.2"
+    https-proxy-agent: "npm:^7.0.6"
+    is-potential-custom-element-name: "npm:^1.0.1"
+    parse5: "npm:^8.0.0"
+    saxes: "npm:^6.0.0"
+    symbol-tree: "npm:^3.2.4"
+    tough-cookie: "npm:^6.0.0"
+    undici: "npm:^7.21.0"
+    w3c-xmlserializer: "npm:^5.0.0"
+    webidl-conversions: "npm:^8.0.1"
+    whatwg-mimetype: "npm:^5.0.0"
+    whatwg-url: "npm:^16.0.0"
+    xml-name-validator: "npm:^5.0.0"
+  peerDependencies:
+    canvas: ^3.0.0
+  peerDependenciesMeta:
+    canvas:
+      optional: true
+  checksum: 10c0/341ecb4005be2dab3247dacc349a20285d7991b5cee3382301fcd69a4294b705b4147e7d9ae1ddfab466ba4b3aace97ded4f7b070de285262221cb2782965b25
+  languageName: node
+  linkType: hard
+
 "jsesc@npm:^3.0.2":
   version: 3.1.0
   resolution: "jsesc@npm:3.1.0"
@@ -4387,7 +4609,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^11.0.0, lru-cache@npm:^11.1.0, lru-cache@npm:^11.2.0, lru-cache@npm:^11.2.1":
+"lru-cache@npm:^11.0.0, lru-cache@npm:^11.1.0, lru-cache@npm:^11.2.0, lru-cache@npm:^11.2.1, lru-cache@npm:^11.2.5, lru-cache@npm:^11.2.6":
   version: 11.2.6
   resolution: "lru-cache@npm:11.2.6"
   checksum: 10c0/73bbffb298760e71b2bfe8ebc16a311c6a60ceddbba919cfedfd8635c2d125fbfb5a39b71818200e67973b11f8d59c5a9e31d6f90722e340e90393663a66e5cd
@@ -5609,6 +5831,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse5@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "parse5@npm:8.0.0"
+  dependencies:
+    entities: "npm:^6.0.0"
+  checksum: 10c0/8279892dcd77b2f2229707f60eb039e303adf0288812b2a8fd5acf506a4d432da833c6c5d07a6554bef722c2367a81ef4a1f7e9336564379a7dba3e798bf16b3
+  languageName: node
+  linkType: hard
+
 "path-browserify@npm:^1.0.1":
   version: 1.0.1
   resolution: "path-browserify@npm:1.0.1"
@@ -5782,6 +6013,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"punycode@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "punycode@npm:2.3.1"
+  checksum: 10c0/14f76a8206bc3464f794fb2e3d3cc665ae416c01893ad7a02b23766eb07159144ee612ad67af5e84fa4479ccfe67678c4feb126b0485651b302babf66f04f9e9
+  languageName: node
+  linkType: hard
+
 "quansync@npm:^0.2.11":
   version: 0.2.11
   resolution: "quansync@npm:0.2.11"
@@ -5808,6 +6046,7 @@ __metadata:
     "@shikijs/rehype": "npm:^3.22.0"
     "@types/babel__core": "npm:^7.20.5"
     "@types/hast": "npm:^3.0.4"
+    "@types/jsdom": "npm:^27.0.0"
     "@types/mdast": "npm:^4.0.4"
     "@types/node": "npm:^25.2.3"
     "@types/unist": "npm:^3.0.3"
@@ -5817,6 +6056,7 @@ __metadata:
     baseline-browser-mapping: "npm:^2.9.19"
     hast-util-from-html: "npm:^2.0.3"
     hastscript: "npm:^9.0.1"
+    jsdom: "npm:^28.1.0"
     jsonc-parser: "npm:^3.3.1"
     pagefind: "npm:^1.4.0"
     rehype: "npm:^13.0.2"
@@ -6281,6 +6521,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"saxes@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "saxes@npm:6.0.0"
+  dependencies:
+    xmlchars: "npm:^2.2.0"
+  checksum: 10c0/3847b839f060ef3476eb8623d099aa502ad658f5c40fd60c105ebce86d244389b0d76fcae30f4d0c728d7705ceb2f7e9b34bb54717b6a7dbedaf5dad2d9a4b74
+  languageName: node
+  linkType: hard
+
 "semver@npm:^6.3.1":
   version: 6.3.1
   resolution: "semver@npm:6.3.1"
@@ -6643,6 +6892,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"symbol-tree@npm:^3.2.4":
+  version: 3.2.4
+  resolution: "symbol-tree@npm:3.2.4"
+  checksum: 10c0/dfbe201ae09ac6053d163578778c53aa860a784147ecf95705de0cd23f42c851e1be7889241495e95c37cabb058edb1052f141387bef68f705afc8f9dd358509
+  languageName: node
+  linkType: hard
+
 "tar@npm:^6.2.1":
   version: 6.2.1
   resolution: "tar@npm:6.2.1"
@@ -6694,6 +6950,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tldts-core@npm:^7.0.23":
+  version: 7.0.23
+  resolution: "tldts-core@npm:7.0.23"
+  checksum: 10c0/b3d936a75b5f65614c356a58ef37563681c6224187dcce9f57aac76d92aae83b1a6fe6ab910f77472b35456bc145a8441cb3e572b4850be43cb4f3465e0610ec
+  languageName: node
+  linkType: hard
+
+"tldts@npm:^7.0.5":
+  version: 7.0.23
+  resolution: "tldts@npm:7.0.23"
+  dependencies:
+    tldts-core: "npm:^7.0.23"
+  bin:
+    tldts: bin/cli.js
+  checksum: 10c0/492874770afaade724a10f8a97cce511d74bed07735c7f1100b7957254d7a5bbbc18becaf5cd049f9d7b0feeb945a64af64d5a300dfb851a4ac57cf3a5998afc
+  languageName: node
+  linkType: hard
+
+"tough-cookie@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "tough-cookie@npm:6.0.0"
+  dependencies:
+    tldts: "npm:^7.0.5"
+  checksum: 10c0/7b17a461e9c2ac0d0bea13ab57b93b4346d0b8c00db174c963af1e46e4ea8d04148d2a55f2358fc857db0c0c65208a98e319d0c60693e32e0c559a9d9cf20cb5
+  languageName: node
+  linkType: hard
+
+"tr46@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "tr46@npm:6.0.0"
+  dependencies:
+    punycode: "npm:^2.3.1"
+  checksum: 10c0/83130df2f649228aa91c17754b66248030a3af34911d713b5ea417066fa338aa4bc8668d06bd98aa21a2210f43fc0a3db8b9099e7747fb5830e40e39a6a1058e
+  languageName: node
+  linkType: hard
+
 "trim-lines@npm:^3.0.0":
   version: 3.0.1
   resolution: "trim-lines@npm:3.0.1"
@@ -6823,6 +7115,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"undici@npm:^7.21.0":
+  version: 7.22.0
+  resolution: "undici@npm:7.22.0"
+  checksum: 10c0/09777c06f3f18f761f03e3a4c9c04fd9fcca8ad02ccea43602ee4adf73fcba082806f1afb637f6ea714ef6279c5323c25b16d435814c63db720f63bfc20d316b
+  languageName: node
+  linkType: hard
+
 "unified@npm:^10.0.0":
   version: 10.1.2
   resolution: "unified@npm:10.1.2"
@@ -7527,6 +7826,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"w3c-xmlserializer@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "w3c-xmlserializer@npm:5.0.0"
+  dependencies:
+    xml-name-validator: "npm:^5.0.0"
+  checksum: 10c0/8712774c1aeb62dec22928bf1cdfd11426c2c9383a1a63f2bcae18db87ca574165a0fbe96b312b73652149167ac6c7f4cf5409f2eb101d9c805efe0e4bae798b
+  languageName: node
+  linkType: hard
+
 "web-namespaces@npm:^2.0.0":
   version: 2.0.1
   resolution: "web-namespaces@npm:2.0.1"
@@ -7534,6 +7842,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webidl-conversions@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "webidl-conversions@npm:8.0.1"
+  checksum: 10c0/3f6f327ca5fa0c065ed8ed0ef3b72f33623376e68f958e9b7bd0df49fdb0b908139ac2338d19fb45bd0e05595bda96cb6d1622222a8b413daa38a17aacc4dd46
+  languageName: node
+  linkType: hard
+
 "whatwg-encoding@npm:^3.1.1":
   version: 3.1.1
   resolution: "whatwg-encoding@npm:3.1.1"
@@ -7550,6 +7865,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"whatwg-mimetype@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "whatwg-mimetype@npm:5.0.0"
+  checksum: 10c0/eead164fe73a00dd82f817af6fc0bd22e9c273e1d55bf4bc6bdf2da7ad8127fca82ef00ea6a37892f5f5641f8e34128e09508f92126086baba126b9e0d57feb4
+  languageName: node
+  linkType: hard
+
+"whatwg-url@npm:^16.0.0":
+  version: 16.0.0
+  resolution: "whatwg-url@npm:16.0.0"
+  dependencies:
+    "@exodus/bytes": "npm:^1.11.0"
+    tr46: "npm:^6.0.0"
+    webidl-conversions: "npm:^8.0.1"
+  checksum: 10c0/9b8cb392be244d0e9687ffe543f9ea63b7aa051a98547ea362a38d182d89bfbd96e13e7ed3f40df1f7566bb7c3581f6c081ddea950cf5382532716ce33000ff4
+  languageName: node
+  linkType: hard
+
 "which-pm-runs@npm:^1.1.0":
   version: 1.1.0
   resolution: "which-pm-runs@npm:1.1.0"
@@ -7606,6 +7939,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xml-name-validator@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "xml-name-validator@npm:5.0.0"
+  checksum: 10c0/3fcf44e7b73fb18be917fdd4ccffff3639373c7cb83f8fc35df6001fecba7942f1dbead29d91ebb8315e2f2ff786b508f0c9dc0215b6353f9983c6b7d62cb1f5
+  languageName: node
+  linkType: hard
+
+"xmlchars@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "xmlchars@npm:2.2.0"
+  checksum: 10c0/b64b535861a6f310c5d9bfa10834cf49127c71922c297da9d4d1b45eeaae40bf9b4363275876088fbe2667e5db028d2cd4f8ee72eed9bede840a67d57dab7593
+  languageName: node
+  linkType: hard
+
 "xxhash-wasm@npm:^1.1.0":
   version: 1.1.0
   resolution: "xxhash-wasm@npm:1.1.0"