.env.development

@@ -1,2 +0,0 @@
-VERSION_FILE_PATH="./versions.json"
-BASE_URL="localhost:4321"

.gitignore

@@ -27,7 +27,4 @@ modules/
 modules_old/
 
 # env
-.env.production
+.env*
-
-# module archive
-*.tar.gz

.vim/coc-settings.json

@@ -1,4 +0,0 @@
-{
-  "workspace.workspaceFolderCheckCwd": false,
-  "tsserver.tsdk": ".yarn/sdks/typescript/lib"
-}

.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules

README.md

@@ -1,62 +1,18 @@
-Quickshell Docs
+# Quickshell Docs
-===============
 
-Documentation for [quickshell](https://git.outfoxxed.me/outfoxxed/quickshell) Hosted version at [quickshell.org](https://quickshell.outfoxxed.me)
+Documentation for [quickshell](https://git.outfoxxed.me/outfoxxed/quickshell)
+Hosted version at [quickshell.outfoxxed.me](https://quickshell.outfoxxed.me)
 
 Frontend rewritten by [Xanazf](https://github.com/Xanazf)
 
----
+## Notes for future updates
-
-Development
------------
-
-### Install language server attribution
-
-> [!INFO] Yarn
->
-> ```bash
-> yarn dlx @yarnpkg/sdks base
-> ```
-
-======
-
-> [!INFO] NPM
->
-> ```bash
-> npx @yarnpkg/sdks base
-> ```
-
----
-
-### Enable the language server to use yarn sdks
-
-> [!NOTE] Example for Neovim
->
-> ```lua
-> {
->  -- ...
->  typescript = {
->    -- ...
->    tsdk = "./.yarn/sdks/typescript/lib",
->    -- ...
->  },
->  -- or whatever language server you're using
->  vtsls = {
->    autoUseWorkspaceTsdk = true,
->  }
-> }
-> ```
-
-Notes for future updates
-------------------------
 
 ~- improve Head~
 
--	improve light theme
+- improve light theme
--	QtQML docs search
+- QtQML docs search
--	page metadata:
+- page metadata:
-	-	`min_version`
+  - lastUpdatedAt
-	-	`max_version`
+  - prevUpdate?
-	-	`edit_URL`
+  - editURL
--	typedocs clearer borders between layout parts
+- typedocs clearer borders between layout parts
--	better front page styling

astro.config.mjs

@@ -1,4 +1,4 @@
-import { defineConfig, envField } from "astro/config";
+import { defineConfig } from "astro/config";
 import solidJs from "@astrojs/solid-js";
 import mdx from "@astrojs/mdx";
 import icon from "astro-icon";
@@ -10,33 +10,14 @@ import { markdownConfig } from "./src/config/io/markdown.ts";
 // https://astro.build/config
 export default defineConfig({
   markdown: markdownConfig,
-  site: "https://quickshell.org",
+  site: "https://quickshell.outfoxxed.me",
-  base: "/",
   integrations: [
     solidJs({
-      devtools: false,
+      devtools: true,
     }),
     mdx(),
     pagefind(),
     icon(),
     sitemap(),
   ],
-  env: {
-    schema: {
-      VERSION_FILE_PATH: envField.string({
-        context: "server",
-        access: "secret",
-        default: "./versions.json",
-      }),
-      BASE_URL: envField.number({
-        context: "server",
-        access: "public",
-      }),
-      PRODUCTION: envField.string({
-        context: "server",
-        access: "secret",
-        optional: true,
-      }),
-    },
-  },
 });

biome.json

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "quickshell-docs",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.0.1",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -10,45 +10,33 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "0.9.6",
+    "@ark-ui/solid": "^3.5.0",
-    "@astrojs/markdown-remark": "6.3.10",
+    "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "4.3.13",
+    "@astrojs/markdown-remark": "^6.3.1",
-    "@astrojs/sitemap": "3.7.0",
+    "@astrojs/mdx": "^4.2.6",
-    "@astrojs/solid-js": "^5.1.3",
+    "@astrojs/sitemap": "^3.4.0",
-    "@fontsource-variable/rubik": "^5.2.8",
+    "@astrojs/solid-js": "^5.0.10",
+    "@fontsource-variable/rubik": "^5.1.0",
     "@hbsnow/rehype-sectionize": "^1.0.7",
-    "@pagefind/default-ui": "^1.4.0",
+    "@pagefind/default-ui": "^1.1.1",
-    "@shikijs/rehype": "^3.22.0",
+    "@shikijs/rehype": "^3.4.2",
-    "astro": "5.17.2",
+    "@types/node": "^20.14.11",
-    "astro-breadcrumbs": "^3.3.3",
+    "astro": "^5.7.13",
+    "astro-breadcrumbs": "^3.3.1",
     "astro-icon": "^1.1.5",
+    "hast": "^1.0.0",
     "hast-util-from-html": "^2.0.3",
-    "hastscript": "^9.0.1",
+    "remark-github-blockquote-alert": "^1.2.1",
-    "jsdom": "^28.1.0",
+    "solid-devtools": "^0.30.1",
-    "rehype": "^13.0.2",
+    "solid-js": "^1.8.18",
-    "remark-github-blockquote-alert": "^2.0.1",
+    "typescript": "^5.5.3",
-    "solid-js": "^1.9.11",
     "unified": "^11.0.5",
-    "unist-util-visit": "^5.1.0"
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@astrojs/ts-plugin": "1.10.6",
+    "@astrojs/ts-plugin": "^1.10.3",
-    "@babel/core": "^7.29.0",
+    "@biomejs/biome": "^1.8.3",
-    "@babel/plugin-syntax-typescript": "^7.28.6",
+    "pagefind": "^1.1.1"
-    "@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",
-    "baseline-browser-mapping": "^2.9.19",
-    "jsonc-parser": "^3.3.1",
-    "pagefind": "^1.4.0",
-    "shiki": "^3.22.0",
-    "tsx": "^4.21.0",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1"
   },
-  "packageManager": "yarn@4.12.0"
+  "packageManager": "yarn@4.5.0"
 }

pagefind.ts

@@ -12,11 +12,15 @@ export default function pagefind(): AstroIntegration {
         const cwd = dirname(fileURLToPath(import.meta.url));
         const relativeDir = relative(cwd, targetDir);
         return new Promise<void>(resolve => {
-          spawn("yarn", ["pagefind", "--site", relativeDir], {
+          spawn(
-            stdio: "inherit",
+            "yarn",
-            shell: true,
+            ["pagefind", "--site", relativeDir],
-            cwd,
+            {
-          }).on("close", () => resolve());
+              stdio: "inherit",
+              shell: true,
+              cwd,
+            }
+          ).on("close", () => resolve());
         });
       },
     },

src/components/Accordion.astro

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

src/components/Analytics.astro

@@ -1,5 +1,4 @@
 ---
 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,11 +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 />
+  <slot>
 </Accordion>

src/components/Footer.astro

@@ -2,7 +2,6 @@
 import matrixLogo from "@icons/matrix-logo.svg?raw";
 import discordLogo from "@icons/discord-logo.svg?raw";
 import gitLogo from "@icons/git-logo.svg?raw";
-import ThemeToggle from "./ThemeToggle.astro";
 
 interface Props {
   class?: string;
@@ -10,7 +9,6 @@ interface Props {
 
 const props = Astro.props;
 ---
-
 <footer class=`${props.class ?? ""}`>
   <div class="credits">
     <p class="hint">Brought to you by:</p>
@@ -20,7 +18,6 @@ const props = Astro.props;
       and our contributors
     </a>
   </div>
-  <ThemeToggle />
   <div class="socials-changelog">
     <section class="socials">
       <a href="https://matrix.to/#/#quickshell:outfoxxed.me" target="_blank" aria-label="Join our matrix space">

src/components/Header.astro

@@ -1,6 +1,6 @@
 ---
-import ThemeToggle from "./ThemeToggle.astro";
+import { ThemeSelect } from "@components/hooks/ThemeSwitch";
-import type { TypeData } from "@config/_types";
+import type { TypeData } from "@config/io/types";
 import Nav from "@components/navigation/sidebars/nav/index.astro";
 import TOC from "@components/navigation/sidebars/TOC.astro";
 import type { ConfigHeading } from "@components/navigation/sidebars/types";
@@ -14,15 +14,16 @@ 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"><a href="/">Quickshell</a></h3>
+    <h3 class="header-title">
+      <a href="/">Quickshell</a>
+    </h3>
   </div>
   <div class="header-item header-right">
-    <Search />
+    <Search/>
-    <ThemeToggle />
+    <ThemeSelect client:load />
-    <TOC title={title} headings={headings} type={type} mobile={true} />
+    <TOC title={title} headings={headings} type={type} mobile={true}/>
   </div>
 </div>

src/components/ThemeToggle.astro

@@ -1,50 +0,0 @@
----
-import { Icon } from "astro-icon/components";
----
-
-<label
-  class="theme-toggle icon-button standard"
-  title="Toggle theme"
-  for="theme-manual-toggle"
->
-  <Icon
-    name="moon"
-    class="light-icon"
-    style="width: 24px; height: 24px;"
-    aria-hidden="true"
-  />
-  <Icon
-    name="sun"
-    class="dark-icon"
-    style="width: 24px; height: 24px;"
-    aria-hidden="true"
-  />
-  <div class="state-layer"></div>
-</label>
-
-<style>
-  .theme-toggle {
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .light-icon {
-    display: block;
-  }
-  .dark-icon {
-    display: none;
-  }
-
-  :global(html:has(input#theme-manual-toggle:checked)) .light-icon {
-    display: none;
-  }
-
-  :global(html:has(input#theme-manual-toggle:checked)) .dark-icon {
-    display: block;
-  }
-
-  .theme-toggle:focus-within {
-    outline: 2px solid var(--accent-600);
-    border-radius: 50%;
-  }
-</style>

src/components/featurelist/FeatureList.astro

@@ -1,9 +1,7 @@
 ---
 import { processMarkdown } from "@config/io/markdown";
 
-const codeDesktop = await processMarkdown(
+const codeDesktop = await processMarkdown("N/A", `\`\`\`qml
-  "N/A",
-  `\`\`\`qml
 // a standard desktop window
 FloatingWindow {
   Timer {
@@ -21,12 +19,9 @@ FloatingWindow {
   // change the window's color when timer.invert changes
   color: timer.invert ? "purple" : "green"
 }
-\`\`\``
+\`\`\``);
-);
 
-const codeMobile = await processMarkdown(
+const codeMobile = await processMarkdown("N/A", `\`\`\`qml
-  "N/A",
-  `\`\`\`qml
 // a standard desktop window
 FloatingWindow {
   Timer {
@@ -52,22 +47,19 @@ FloatingWindow {
     ? "purple"
     : "green"
 }
-\`\`\``
+\`\`\``);
-);
 ---
-
 <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
+        Quickshell loads changes as soon as they're saved, letting you iterate as fast as you can type.
-        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>
@@ -75,69 +67,46 @@ 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
+        Quickshell is configured in QML, a simple language designed for creating flexible user interfaces.
-        flexible user interfaces. It also has LSP support.
+        It also has LSP support.
       </span>
     </section>
     <section class="feature-showcase" id="qml-showcase">
-      <div class="showcase-desktop"><Fragment set :html={codeDesktop} /></div>
+      <div class="showcase-desktop">
-      <div class="showcase-mobile"><Fragment set :html={codeMobile} /></div>
+        <Fragment set:html={codeDesktop}/>
+      </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
+        Quickshell comes with a large set of integrations, with new ones arriving all the time.
-        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>
+            <div><img class="feature-icon" src="/assets/logos/wayland.svg" alt="Wayland" /></div>
-              <img
-                class="feature-icon"
-                src="/assets/logos/wayland.svg"
-                alt="Wayland"
-              >
-            </div>
           </span>
           <span class="cloud-item hyprland">
-            <div>
+            <div><img class="feature-icon" src="/assets/logos/hyprland.svg" alt="Hyprland" /></div>
-              <img
-                class="feature-icon"
-                src="/assets/logos/hyprland.svg"
-                alt="Hyprland"
-              >
-            </div>
           </span>
           <span class="cloud-item pipewire">
-            <div>
+            <div><img class="feature-icon" src="/assets/logos/pipewire.svg" alt="Pipewire" /></div>
-              <img
-                class="feature-icon"
-                src="/assets/logos/pipewire.svg"
-                alt="Pipewire"
-              >
-            </div>
           </span>
           <span class="cloud-item x-org">
-            <div>
+            <div><img class="feature-icon" src="/assets/logos/xorg.svg" alt="X.Org" /></div>
-              <img
-                class="feature-icon"
-                src="/assets/logos/xorg.svg"
-                alt="X.Org"
-              >
-            </div>
           </span>
           <span class="cloud-item sway">
-            <div>
+            <div><img class="feature-icon" src="/assets/logos/sway.svg" alt="Sway" /></div>
-              <img class="feature-icon" src="/assets/logos/sway.svg" alt="Sway">
-            </div>
           </span>
         </div>
       </section>

src/components/hooks/CreateCopyButtons.astro

@@ -0,0 +1,53 @@
+---
+
+---
+
+<script>
+  setTimeout(() => {
+  // code copy
+  let blocks = document.querySelectorAll("pre");
+  if (blocks.length > 0) {
+    blocks.forEach((block) => {
+      let button = document.createElement("button");
+      button.className = "copy-button";
+      button.innerHTML = `<svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="M200 32h-36.26a47.92 47.92 0 0 0-71.48 0H56a16 16 0 0 0-16 16v168a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m-72 0a32 32 0 0 1 32 32H96a32 32 0 0 1 32-32m72 184H56V48h26.75A47.9 47.9 0 0 0 80 64v8a8 8 0 0 0 8 8h80a8 8 0 0 0 8-8v-8a47.9 47.9 0 0 0-2.75-16H200Z"
+      />
+    </svg>
+    `;
+      button.onclick = () => {
+        let snippet = block.innerText ?? "";
+        navigator.clipboard.writeText(snippet);
+        button.classList.toggle("copied");
+        setTimeout(() => button.classList.remove("copied"), 1000);
+      };
+      block.appendChild(button);
+    });
+  }
+  }, 3001)
+
+  // heading copy
+  let headings = document.getElementsByClassName("heading")
+  if (headings.length > 0) {
+    for (const heading of headings) {
+      let button = heading.querySelector("span")
+      if (button) {
+        button.onclick = () => {
+          let link = window.location.href.split("#")[0];
+          link += `#-${heading.textContent?.slice(10).trimEnd().replaceAll(" ", "-").toLowerCase()}`;
+          window.location.href = link
+          navigator.clipboard.writeText(link);
+          heading.classList.toggle("copied")
+          setTimeout(() => heading.classList.remove("copied"), 1000);
+        }
+      }
+    }
+  }
+</script>

src/components/hooks/TOCIntersectionObserver.astro

@@ -0,0 +1,29 @@
+---
+---
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        const heading = entry.target.querySelector('h1, h2, h3, h4, h5, h6')
+        if(heading) {
+          const id = heading.id
+          if (entry.intersectionRatio > 0) {
+            const desktopElement = document.querySelector(`.toc-wrapper li a[href="#${id}"]`);
+            const mobileElement = document.querySelector(`.toc-wrapper-mobile li a[href="#${id}"]`);
+            const element = mobileElement?.checkVisibility() ? mobileElement : desktopElement;
+            element?.parentElement?.classList.add('active')
+          } else {
+            const desktopElement = document.querySelector(`.toc-wrapper li a[href="#${id}"]`);
+            const mobileElement = document.querySelector(`.toc-wrapper-mobile li a[href="#${id}"]`);
+            const element = mobileElement?.checkVisibility() ? mobileElement : desktopElement;
+            element?.parentElement?.classList.remove('active')
+          }
+        }
+      });
+    });
+
+    document.querySelectorAll('section[data-heading-rank]').forEach((section) => {
+      observer.observe(section);
+    });
+});
+</script>

src/components/hooks/ThemeSwitch.tsx

@@ -0,0 +1,112 @@
+import {
+  createSignal,
+  createEffect,
+  onCleanup,
+  onMount,
+  type VoidComponent,
+} from "solid-js";
+
+import Sun from "@icons/sun.svg?raw";
+import Moon from "@icons/moon.svg?raw";
+
+export interface ThemeProps {
+  theme: "light" | "dark";
+  system: "light" | "dark";
+}
+
+export const getCurrentTheme = (): ThemeProps => {
+  if (
+    typeof localStorage !== "undefined" &&
+    (localStorage.theme === "dark" ||
+      (!("theme" in localStorage) &&
+        window.matchMedia("(prefers-color-scheme: dark)")
+          .matches))
+  ) {
+    return {
+      theme: "dark",
+      system: window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light",
+    };
+  }
+  return {
+    theme: "light",
+    system: window.matchMedia("(prefers-color-scheme: dark)")
+      .matches
+      ? "dark"
+      : "light",
+  };
+};
+
+const updateTheme = () => {
+  document.documentElement.classList.add("changing-theme");
+  if (
+    localStorage.theme === "dark" ||
+    (!("theme" in localStorage) &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches)
+  ) {
+    document.documentElement.classList.add("dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+  }
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove("changing-theme");
+    });
+  });
+};
+
+export const ThemeSelect: VoidComponent = () => {
+  const [currentTheme, setCurrentTheme] =
+    createSignal<ThemeProps>({
+      theme: "dark",
+      system: "dark",
+    });
+  const [mounted, setMounted] = createSignal(false);
+
+  const toggleTheme = () => {
+    if (!mounted()) return;
+    setCurrentTheme(getCurrentTheme());
+    if (currentTheme()!.theme !== currentTheme()!.system) {
+      localStorage.removeItem("theme");
+    } else {
+      localStorage.theme =
+        currentTheme()!.theme === "dark" ? "light" : "dark";
+    }
+    updateTheme();
+    setCurrentTheme(getCurrentTheme());
+  };
+
+  onMount(() => {
+    setMounted(true);
+    setCurrentTheme(getCurrentTheme());
+  });
+
+  createEffect(() => {
+    const mediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    );
+    mediaQuery.addEventListener("change", updateTheme);
+    window.addEventListener("storage", updateTheme);
+
+    onCleanup(() => {
+      mediaQuery.removeEventListener("change", updateTheme);
+      window.removeEventListener("storage", updateTheme);
+      setMounted(false);
+    });
+  });
+
+  return (
+    <div
+      onclick={toggleTheme}
+      class="theme-toggle"
+      innerHTML={
+        (mounted() && currentTheme().theme === "light") ||
+          currentTheme().system === "light"
+          ? Sun
+          : Moon
+      }
+    />
+  );
+};

src/components/marquee/Marquee.astro

@@ -1,18 +1,145 @@
 ---
 import { Icon } from "astro-icon/components";
-import MarqueeContent from "./MarqueeContent.astro";
----
 
+const videos = [
+  {
+    author: '<a href="https://github.com/soramanew">soramane</a>',
+    source: "https://github.com/caelestia-dots/shell",
+    path: "/assets/showcase/soramane.mp4",
+    installable: true,
+  },
+  {
+    author: '<a href="https://github.com/end-4">end_4</a>',
+    source: "https://github.com/end-4/dots-hyprland",
+    path: "/assets/showcase/end4.mp4",
+    installable: true,
+  },
+  {
+    author: '<a href="https://outfoxxed.me">outfoxxed</a>',
+    source: "https://git.outfoxxed.me/outfoxxed/nixnew/src/branch/master/modules/user/modules/quickshell",
+    path: "/assets/showcase/outfoxxed.mp4",
+  },
+  {
+    author: '<a href="https://github.com/pfaj/">pfaj</a> and <a href="https://github.com/bdebiase">bdebiase</a>',
+    path: "/assets/showcase/pfaj-bdeblase.mp4",
+  },
+  {
+    author: '<a href="https://github.com/flickowoa">flicko</a>',
+    source: "https://github.com/flickowoa/zephyr",
+    path: "/assets/showcase/flicko.mp4",
+  },
+  {
+    author: '<a href="https://vaxry.net">vaxry</a>',
+    path: "/assets/showcase/vaxry.mp4",
+  },
+];
+---
 <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 />
+  <div id="marquee-content" class="marquee-content" data-scroll="0" data-media-index="0">
+    {videos.map(({ author, source, installable, path }, index) => <div class="marquee-item">
+      <div>
+        <video
+          data-media-index={index}
+          data-media-author={author}
+          id="showcase-video"
+          class="marquee-item-spacing marquee-item-content"
+          muted
+          controls
+          playsinline
+          preload="metadata"
+        >
+          <source src={path} type="video/mp4"/>
+        </video>
+        <p>
+          Configuration by <Fragment set:html={author}/>
+          {source && !installable && <>(<a href={source}>source code</a>)</>}
+          {source && installable && <>(<a href={source}>install</a>)</>}
+        </p>
+      </div>
+    </div>)}
+  </div>
 </div>
 
-<script src="@config/styling/marquee.ts" />
+<script>
+  const videoCount = 6; // last array index
+  const marquee = document.getElementById("marquee-content")!;
+  marquee.style.setProperty("--scroll", "0")
+
+  window.addEventListener("load", autoplayInit, false);
+  const videos = document.getElementsByClassName("marquee-item-content") as HTMLCollectionOf<HTMLVideoElement>;
+  let currentVideoIndex = 0;
+  let currentVideo: HTMLVideoElement | null = null;
+
+  function autoplayInit() {
+    setActiveVideo(0);
+    currentVideo!.play();
+  }
+
+  function setActiveVideo(index: number) {
+    currentVideo?.pause();
+
+    currentVideoIndex = index;
+    currentVideo = videos[currentVideoIndex];
+    currentVideo.currentTime = 0;
+    marquee.style.setProperty("--scroll", `-${currentVideoIndex*100}%`)
+  }
+
+  function offsetCarousel(offset: number) {
+    let nextIndex = currentVideoIndex + offset;
+    if (nextIndex < 0) nextIndex += videoCount;
+    nextIndex = nextIndex % videoCount;
+    setActiveVideo(nextIndex);
+  }
+
+  const intersectionOptions = {
+    root: marquee,
+    rootMargin: "0px",
+    threshold: 0.0,
+  };
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      const video = entry.target as HTMLVideoElement;
+      if (!entry.isIntersecting) {
+        video.pause();
+      } else if (video === currentVideo) {
+        video.play();
+      }
+    });
+  }, intersectionOptions);
+
+  for (const video of videos) {
+    observer.observe(video);
+
+    video.addEventListener("ended", () => {
+      // The "ended" event might just mean its buffering.
+      if (video == currentVideo && video.duration !== 0 && video.currentTime === video.duration) {
+        offsetCarousel(1);
+      }
+    });
+  }
+
+  let wasPaused = false;
+  document.addEventListener("visibilitychange", () => {
+    if (currentVideo) {
+      if (document.hidden) {
+        wasPaused = currentVideo.paused;
+        currentVideo.pause();
+      } else if (!wasPaused) {
+        currentVideo.play();
+      }
+    }
+  });
+
+  // left-right buttons
+  document.getElementById("marquee-scroll-left")!.addEventListener("mousedown", () => offsetCarousel(-1));
+  document.getElementById("marquee-scroll-right")!.addEventListener("mousedown", () => offsetCarousel(1));
+</script>

src/components/marquee/MarqueeContent.astro

@@ -1,69 +0,0 @@
----
-const videos = [
-  {
-    author: '<a href="https://github.com/soramanew">soramane</a>',
-    source: "https://github.com/caelestia-dots/shell",
-    path: "/assets/showcase/soramane.mp4",
-    installable: true,
-  },
-  {
-    author: '<a href="https://github.com/end-4">end_4</a>',
-    source: "https://github.com/end-4/dots-hyprland",
-    path: "/assets/showcase/end4.mp4",
-    installable: true,
-  },
-  {
-    author: '<a href="https://outfoxxed.me">outfoxxed</a>',
-    source:
-      "https://git.outfoxxed.me/outfoxxed/nixnew/src/branch/master/modules/user/modules/quickshell",
-    path: "/assets/showcase/outfoxxed.mp4",
-  },
-  {
-    author:
-      '<a href="https://github.com/pfaj/">pfaj</a> and <a href="https://github.com/bdebiase">bdebiase</a>',
-    path: "/assets/showcase/pfaj-bdeblase.mp4",
-  },
-  {
-    author: '<a href="https://github.com/flickowoa">flicko</a>',
-    source: "https://github.com/flickowoa/zephyr",
-    path: "/assets/showcase/flicko.mp4",
-  },
-  {
-    author: '<a href="https://vaxry.net">vaxry</a>',
-    path: "/assets/showcase/vaxry.mp4",
-  },
-];
----
-
-<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`>
-        <div class="marquee-item-spacing marquee-item-content video-wrapper">
-          <video
-            data-media-index={index}
-            data-media-author={author}
-            id="showcase-video"
-            muted
-            controls
-            playsinline
-            preload="metadata"
-            style="opacity: 0; transition: opacity 0.5s"
-            onloadeddata="this.style.opacity='1'"
-          >
-            <source src={path} type="video/mp4"/>
-          </video>
-        </div>
-      <p>
-        Configuration by <Fragment set:html={author}/>
-        {source && !installable && <>(<a href={source}>source code</a>)</>}
-        {source && installable && <>(<a href={source}>install</a>)</>}
-      </p>
-      </div>
-      )})}
-</div>

src/components/navigation/Search.astro

@@ -1,8 +1,7 @@
 ---
 import "@pagefind/default-ui/css/ui.css";
-import magnifierIcon from "@icons/magnifier.svg?raw";
+import magnifierIcon from "@icons/magnifier.svg?raw"
 ---
-
 <site-search class="search-wrapper">
   <button
     data-open-modal
@@ -11,175 +10,141 @@ 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>Ctrl</kbd><kbd>K</kbd> </kbd>
+    <kbd class="search-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">Cancel</button>
+      <button data-close-modal class="search-cancel">
+        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;
+		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)) {
+		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 {
+import { getQMLTypeLinkObject, getQMLTypeLink, getIconForLink } from '@src/config/io/helpers';
-    getQMLTypeLinkObject,
+	class SiteSearch extends HTMLElement {
-    getQMLTypeLink,
+		constructor() {
-    getIconForLink,
+			super();
-  } from "@src/config/io/helpers";
+			const openBtn = this.querySelector<HTMLButtonElement>('button[data-open-modal]')!;
-  class SiteSearch extends HTMLElement {
+			const closeBtn = this.querySelector<HTMLButtonElement>('button[data-close-modal]')!;
-    constructor() {
+			const dialog = this.querySelector('dialog')!;
-      super();
+			const dialogFrame = this.querySelector('.dialog-frame')!;
-      const openBtn = this.querySelector<HTMLButtonElement>(
-        "button[data-open-modal]"
-      )!;
-      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. */
+			/** Close the modal if a user clicks on a link or outside of the modal. */
-      const onClick = (event: MouseEvent) => {
+			const onClick = (event: MouseEvent) => {
-        const isLink = "href" in (event.target || {});
+				const isLink = 'href' in (event.target || {});
-        if (
+				if (
-          isLink ||
+					isLink ||
-          (document.body.contains(event.target as Node) &&
+					(document.body.contains(event.target as Node) &&
-            !dialogFrame.contains(event.target as Node))
+						!dialogFrame.contains(event.target as Node))
-        ) {
+				) {
-          closeModal();
+					closeModal();
-        }
+				}
-      };
+			};
 
-      const openModal = (event?: MouseEvent) => {
+			const openModal = (event?: MouseEvent) => {
-        dialog.showModal();
+				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();
+				event?.stopPropagation();
-        window.addEventListener("click", onClick);
+				window.addEventListener('click', onClick);
-      };
+			};
 
-      const closeModal = () => dialog.close();
+			const closeModal = () => dialog.close();
 
-      openBtn.addEventListener("click", openModal);
+			openBtn.addEventListener('click', openModal);
-      openBtn.disabled = false;
+			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.
+			// 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();
+					dialog.open ? closeModal() : openModal();
-          e.preventDefault();
+					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
+            const icon = linkObject.mtype ? getIconForLink(linkObject.mtype, false) : null;
-              ? 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", () => {
+			const formatURL = (path: string) => path;
-        const onIdle = window.requestIdleCallback || (cb => setTimeout(cb, 1));
-        onIdle(async () => {
-          const { PagefindUI } = await import(
-            //Missing types for @pagefind/default-ui package.
-            //@ts-expect-error
-            "@pagefind/default-ui"
-          );
-          const versionMatch = window.location.pathname.match(/^\/docs\/([^/]+)/);
-          const activeVersion = versionMatch?.[1];
 
-          const search = new PagefindUI({
+			window.addEventListener('DOMContentLoaded', () => {
-            element: "#qs_search",
+				const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
-            // resetStyles: false,
+				onIdle(async () => {
-            sort: { version: "desc" },
+					// @ts-expect-error — Missing types for @pagefind/default-ui package.
-            baseUrl: import.meta.env.BASE_URL,
+					const { PagefindUI } = await import('@pagefind/default-ui');
-            bundlePath:
+					new PagefindUI({
-              import.meta.env.BASE_URL.replace(/\/$/, "") + "/pagefind/",
+						element: '#qs_search',
-            showImages: false,
+						baseUrl: import.meta.env.BASE_URL,
-            showSubResults: true,
+						bundlePath: import.meta.env.BASE_URL.replace(/\/$/, '') + '/pagefind/',
-            highlightParam: "highlight",
+						showImages: false,
-            openFilters: ["Tags"],
+						showSubResults: true,
-            processResult: function (result: {
+            processResult: (result: { url: string; excerpt:string; sub_results: Array<{ url: string, excerpt:string }> }) => {
-              url: string;
+							result.url = formatURL(result.url);
-              excerpt: string;
+              result.excerpt = processExcerpt(result.excerpt)
-              meta: {
+							result.sub_results = result.sub_results.map((sub_result) => {
-                source: string;
+								sub_result.url = formatURL(sub_result.url);
-                title: string;
+                sub_result.excerpt = processExcerpt(sub_result.excerpt)
-                version: string;
+								return sub_result;
-              };
+							});
-              extra_class: string;
+						},
-              sub_results: Array<{
+					});
-                url: string;
+				});
-                excerpt: string;
+			});
-              }>;
+		}
-            }) {
+	}
-              if (result.meta.source === "Qt Framework") {
+	customElements.define('site-search', SiteSearch);
-                result.extra_class = "qt-result-badge";
-              }
-              result.url = formatURL(result.url);
-              result.excerpt = processExcerpt(result.excerpt);
-              result.sub_results = result.sub_results.map(sub_result => {
-                sub_result.url = formatURL(sub_result.url);
-                sub_result.excerpt = processExcerpt(sub_result.excerpt);
-                return sub_result;
-              });
-            },
-          });
-
-          if (activeVersion) {
-            search.triggerFilters({ version: activeVersion });
-          }
-        });
-      });
-    }
-  }
-  customElements.define("site-search", SiteSearch);
 </script>

src/components/navigation/sidebars/TOC.astro

@@ -1,13 +1,7 @@
 ---
 import TableOfContents from "./toc";
 import type { ConfigHeading, TypeTOC } from "./types.d.ts";
-import type {
+import type { TypeData } from "@config/io/types";
-  TypeData,
-  QuickshellFunction,
-  // QuickshellSignal,
-  // QuickshellVariant,
-  // QuickshellProps,
-} from "@config/_types";
 
 export interface Props {
   title?: string;
@@ -18,16 +12,13 @@ export interface Props {
 
 const { title, headings, type, mobile } = Astro.props;
 
-const types: TypeTOC | null = type
+const types: TypeTOC | null = type ? {
-  ? {
+  properties: Object.keys(type.properties ?? {}),
-      properties: Object.keys(type.properties ?? {}),
+  functions: (type.functions ?? []).map(f => f.name),
-      functions: (type.functions ?? []).map((f: QuickshellFunction) => f.name),
+  signals: Object.keys(type.signals ?? {}),
-      signals: Object.keys(type.signals ?? {}),
+  variants: Object.keys(type.variants ?? {}),
-      variants: Object.keys(type.variants ?? {}),
+} : null;
-    }
-  : null;
 ---
-
 {((headings?.length ?? 0) != 0 || types) &&
   <div id="toc" aria-mobile={mobile} class=`toc-wrapper${mobile ? "-mobile":""}`>
     <TableOfContents
@@ -37,4 +28,5 @@ const types: TypeTOC | null = type
       mobile={mobile}
       client:idle
     />
-  </div>}
+  </div>
+}

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

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

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

@@ -13,25 +13,19 @@ import Link from "./Link.astro";
 
 const versions = await getVersionsData();
 const versionName = Astro.params.version;
-const modules = versions.versions.find(
+const modules = versions.versions.find(version => version.name === versionName)?.modules;
-  version => version.name === versionName
-)?.modules;
 
-const currentPath = Astro.url.pathname.split("/").filter(s => s !== "");
+const currentPath = Astro.url.pathname.split('/').filter(s => s !== "");
 
 const guidePages = await getGuideCollection(versionName ?? "");
 
 interface NavTree {
-  title: string;
+  title: string,
-  slug: string;
+  slug: string,
-  entries?: NavTree[];
+  entries?: NavTree[],
 }
 
-function mkTree(
+function mkTree(mount: string, pathIdx: number, { title, slug, entries }: NavTree): TreeEntry {
-  mount: string,
-  pathIdx: number,
-  { title, slug, entries }: NavTree
-): TreeEntry {
   const link = `${mount}/${slug}`;
 
   return {
@@ -44,9 +38,7 @@ function mkTree(
 
 function genGuideNav(base: string): NavTree[] | undefined {
   const pages = guidePages
-    .filter(
+    .filter(page => page.id.match(`^${base}[^/]*$`) !== null && page.id !== "index")
-      page => page.id.match(`^${base}[^/]*$`) !== null && page.id !== "index"
-    )
     .sort((a, b) => a.data.index - b.data.index)
     .map(page => ({
       title: page.data.title,
@@ -76,8 +68,8 @@ if (versionName) {
         entries: module.types.map(type => ({
           title: type.name,
           slug: type.name,
-        })),
+        }))
-      })),
+      }))
     }),
   };
 
@@ -92,7 +84,6 @@ if (versionName) {
   };
 }
 ---
-
 <nav class="navtree">
   <Link
     title="About"
@@ -104,9 +95,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
@@ -120,7 +111,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/SidebarWrapper.tsx

@@ -32,7 +32,6 @@ const NavComponent: Component<SidebarContent> = props => {
     if (
       isLink ||
       !isInBody ||
-      //@ts-expect-error
       (isInBody && !navRef.contains(event.target as Node))
     ) {
       setOpen(false);

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

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

src/components/navigation/sidebars/toc/Table.tsx

@@ -20,12 +20,10 @@ export const Table: Component<{
   if (configTOC) {
     return (
       <div class="toc-content">
-        {title && (
+        {title && <>
-          <>
+          <p>{title}</p>
-            <p>{title}</p>
+          <hr/>
-            <hr />
+        </>}
-          </>
-        )}
         <For each={configTOC}>
           {heading => (
             <Heading

src/components/navigation/sidebars/toc/i.tsx.bak

@@ -0,0 +1,52 @@
+import { createSignal, type Component } from "solid-js";
+
+import { Article } from "@icons";
+import { Table } from "./Table";
+import type {
+  TOCProps,
+  TypeTOC,
+  ConfigHeading,
+} from "../types";
+import { buildHierarchy } from "@config/io/helpers";
+
+const TableOfContents: Component<TOCProps> = props => {
+  const [open, setOpen] = createSignal<boolean>(false);
+  const [typeProps] = createSignal<TypeTOC | undefined>(
+    props.type
+  );
+  const [configProps] = createSignal<
+    ConfigHeading[] | undefined
+  >(props.config);
+
+  function toggle(e: MouseEvent) {
+    e.preventDefault();
+    setOpen(!open());
+  }
+
+  if (!props.mobile) {
+    return typeProps() ? (
+      <Table typeTOC={typeProps()} />
+    ) : (
+      <Table configTOC={buildHierarchy(configProps()!)} />
+    );
+  }
+
+  return (
+    <div class="menu-toggle">
+      <div onclick={e => toggle(e)}>
+        <Article />
+      </div>
+      <div class={`menu-items ${open() ? "shown" : ""}`}>
+        {typeProps() ? (
+          <Table typeTOC={typeProps()} />
+        ) : (
+          <Table
+            configTOC={buildHierarchy(configProps()!)}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TableOfContents;

src/components/navigation/sidebars/toc/index.tsx

@@ -6,7 +6,7 @@ import {
   type Component,
 } from "solid-js";
 
-import { Article, MenuToX } from "@icons";
+import { Article } from "@icons";
 import { Table } from "./Table";
 import type { TOCProps } from "../types";
 import { buildHierarchy } from "@config/io/helpers";
@@ -27,10 +27,7 @@ const TableOfContents: Component<TOCProps> = props => {
     return type ? (
       <Table typeTOC={type} />
     ) : (
-      <Table
+      <Table title={title} configTOC={buildHierarchy(config!)} />
-        title={title}
-        configTOC={buildHierarchy(config!)}
-      />
     );
   }
 
@@ -40,7 +37,6 @@ const TableOfContents: Component<TOCProps> = props => {
     if (
       isLink ||
       !isInBody ||
-      //@ts-expect-error
       (isInBody && !tocRef.contains(event.target as Node))
     ) {
       setOpen(false);
@@ -96,17 +92,13 @@ const TableOfContents: Component<TOCProps> = props => {
       id="toc-toggle"
     >
       <div onclick={e => toggle(e)}>
-        <Article class={`toc-icon ${!open() ? "active" : ""}`} />
+        <Article />
-        <MenuToX class={`toc-icon ${open() ? "active" : ""}`} />
       </div>
       <div class={`toc-mobile ${open() ? "shown" : ""}`}>
         {type ? (
           <Table typeTOC={type} />
         ) : (
-          <Table
+          <Table title={title} configTOC={buildHierarchy(config!)} />
-            title={title}
-            configTOC={buildHierarchy(config!)}
-          />
         )}
       </div>
     </div>

src/components/type/Functions.astro

@@ -1,5 +1,8 @@
 ---
-import type { QMLTypeLinkObject, QuickshellFunction } from "@config/_types";
+import type {
+  QMLTypeLinkObject,
+  QuickshellFunction,
+} from "@config/io/types";
 import { getQMLTypeLink } from "@config/io/helpers";
 import { Tag } from "@icons";
 import TypeDetails from "./TypeDetails.astro";
@@ -12,9 +15,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;
@@ -54,5 +57,6 @@ const { version } = Astro.params;
           <TypeDetails markdown={item.details} />
         </li>
       )
-    })}
+    })
+  }
 </ul>

src/components/type/Properties.astro

@@ -3,8 +3,7 @@ import { getQMLTypeLink } from "@config/io/helpers";
 import type {
   QMLTypeLinkObject,
   QuickshellProps,
-  QuickshellInstance,
+} from "@config/io/types";
-} from "@config/_types";
 import { Tag } from "@icons";
 import TypeTitle from "./TypeTitle.astro";
 
@@ -17,56 +16,56 @@ export interface Props {
 const { props } = Astro.props;
 const { version } = Astro.params;
 ---
-
 <ul class="typedata typeprops">
-  {Object.keys(props).map((name) => {
+  {
-    const propData:QuickshellInstance = props[name];
+    Object.entries(props).map(([name, propData]) => {
-    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;
+      const gadget = propData.type.gadget;
-    if (gadget) {
+      if (gadget) {
-      typeLink = "#"
+        typeLink = "#"
-      linkText = `[${Object.keys(gadget).toString()}]`
+        linkText = `[${Object.keys(gadget).toString()}]`
-    } else {
+      } else {
-      typeLink = getQMLTypeLink(version!, propData.type)
+        typeLink = getQMLTypeLink(version!, propData.type)
-      linkText = propData.type.name || propData.type.type
+        linkText = propData.type.name || propData.type.type
-    }
+      }
-    if (propData.type.of) {
+      if (propData.type.of) {
-      genericType = propData.type.of.name;
+        genericType = propData.type.of.name;
-      genericTypeLink = getQMLTypeLink(version!, propData.type.of)
+        genericTypeLink = getQMLTypeLink(version!, propData.type.of)
-    }
+      }
-    return (
+      return (
-      <li id={ name } class="typedata-root typeprop-root">
+        <li id={ name } class="typedata-root typeprop-root">
-        <TypeTitle
+          <TypeTitle
-          typekind="prop"
+            typekind="prop"
-          typename={ name }
+            typename={name}
-          typelink={typeLink}
+            typelink={typeLink}
-          typelink_text={linkText}
+            typelink_text={linkText}
-          typename_generic={genericType}
+            typename_generic={genericType}
-          typelink_generic={genericTypeLink}
+            typelink_generic={genericTypeLink}
-          badges={propData.flags}
+            badges={propData.flags}
-        />
+          />
-        {
+          {
-          gadget ? (
+            gadget ? (
-            <p class="typedata-params typefunc-params">
+              <p class="typedata-params typefunc-params">
-              {
+                {
-                Object.keys(gadget).map((key) => {
+                  Object.keys(gadget).map((key) => {
-                  const gadgetData = gadget[key]
+                    const gadgetData = gadget[key]
-                  return (
+                    return (
-                    <span class="typedata-param typefunc-param">
+                      <span class="typedata-param typefunc-param">
-                      <Tag client:idle/>
+                        <Tag client:idle/>
-                      {key}:<span><a href={getQMLTypeLink(version!, gadgetData as unknown as QMLTypeLinkObject)}>{gadgetData.name}</a></span>
+                        {key}:<span><a href={getQMLTypeLink(version!, gadgetData as unknown as QMLTypeLinkObject)}>{gadgetData.name}</a></span>
-                    </span>
+                      </span>
-                  )
+                    )
-                })
+                  })
-              }
+                }
-            </p>
+              </p>
-          ):null
+            ):null
-        }
+          }
-        <TypeDetails markdown={propData.details} />
+          <TypeDetails markdown={propData.details} />
-      </li>
+        </li>
-    )
+      )
-  })}
+    })
+  }
 </ul>

src/components/type/Signals.astro

@@ -1,6 +1,6 @@
 ---
 import { getQMLTypeLink } from "@config/io/helpers";
-import type { QuickshellSignal } from "@config/_types";
+import type { QuickshellSignal } from "@config/io/types";
 import { Tag } from "@icons";
 import TypeDetails from "./TypeDetails.astro";
 import TypeTitle from "./TypeTitle.astro";
@@ -12,51 +12,44 @@ export interface Props {
 const { signals } = Astro.props;
 const { version } = Astro.params;
 ---
-
 <ul class="typedata typesignals">
-  {(Object.entries(signals) as [
+  {
-    keyof QuickshellSignal,
+    Object.entries(signals).map(([name, signalData]) => {
-    QuickshellSignal[keyof QuickshellSignal],
+      const paramKeys = signalData.params.length > 0 ? signalData.params.map((param,index) => `${param.name}${index !== signalData.params.length -1 ? ", ":""}`) : []
-    ][]).map(([name, signalData]) => {
+      let genericType:string|undefined;
-    const paramKeys = signalData.params.length > 0
+      let genericTypeLink:string|undefined;
-      ? signalData.params.map((param,index) => `${param.name}${
+      return (
-        index !== signalData.params.length -1
+        <li id={ name } class="typedata-root typesignal-root">
-          ? ", "
+          <TypeTitle
-          :""
+            typekind="signal"
-      }`): []
+            typename={name}
-    let genericType:string|undefined;
+            typelink="/docs/configuration/qml-overview#-signals"
-    let genericTypeLink:string|undefined;
+            typelink_text=""
-    return (
+            typename_generic={genericType}
-      <li id={ name.toString() } class="typedata-root typesignal-root">
+            typelink_generic={genericTypeLink}
-        <TypeTitle
+            typedata_params={paramKeys}
-          typekind="signal"
+          />
-          typename={ name.toString() }
+          {
-          typelink="/docs/configuration/qml-overview#-signals"
+            signalData.params && signalData.params.length > 0 ? (
-          typelink_text=""
+              <p class="typedata-params typesignal-params">
-          typename_generic={genericType}
+                {
-          typelink_generic={genericTypeLink}
+                  signalData.params.map((param, _) => {
-          typedata_params={paramKeys}
+                    return (
-        />
+                    <span class="typedata-param typesignal-param">
-        {
+                      <Tag client:idle/>
-          signalData.params && signalData.params.length > 0 ? (
+                      {param.name}<span class="type-datatype">:&nbsp;<a
-            <p class="typedata-params typesignal-params">
+                        href={getQMLTypeLink(version!, param.type)}
-              {
+                      >{param.type.name}</a></span>
-                signalData.params.map((param, _) => {
+                    </span>
-                  return (
+                    )
-                  <span class="typedata-param typesignal-param">
+                  })
-                    <Tag client:idle/>
+                }
-                    {param.name}<span class="type-datatype">:&nbsp;<a
+              </p>
-                      href={getQMLTypeLink(version!, param.type)}
+            ) : null
-                    >{param.type.name}</a></span>
+          }
-                  </span>
+          <TypeDetails markdown={signalData.details} />
-                  )
+        </li>
-                })
+      )
-              }
+    })
-            </p>
+  }
-          ) : null
-        }
-        <TypeDetails markdown={signalData.details} />
-      </li>
-    )
-  })}
 </ul>

src/components/type/TypeDetails.astro

@@ -10,7 +10,6 @@ const { version } = Astro.params;
 
 const html = markdown ? 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,17 +31,14 @@ 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
+    <span>{ typename }{ (typekind === "func" || typekind === "signal") ?
-      >{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 &&
@@ -49,11 +46,12 @@ 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:string) => <Badge badgeText={badgeText}/>)
+      badges.map(badgeText => <Badge badgeText={badgeText}/>)
     ) : null}
   </section>
 </div>

src/components/type/Variants.astro

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

src/config/Head.astro

@@ -12,48 +12,30 @@ 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/PreTheme.astro

@@ -0,0 +1,23 @@
+---
+
+---
+
+<script is:inline>
+  function updateTheme() {
+    if (
+      localStorage.theme === "dark" ||
+      (!("theme" in localStorage) &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches)
+    ) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }
+
+  // Run on initial load
+  updateTheme();
+
+  // Run on view transitions
+  document.addEventListener("astro:after-swap", updateTheme);
+</script>

src/config/_types/codeblock.ts

@@ -1,9 +0,0 @@
-interface CopyButtonOptions {
-  duration?: number;
-  copyIcon?: string;
-  successIcon?: string;
-  display?: "hover" | "ready";
-  cssVariables?: string;
-}
-
-export type { CopyButtonOptions };

src/config/_types/helper.ts

@@ -1,9 +0,0 @@
-interface QMLTypeLinkObject {
-  type: string;
-  module?: string;
-  name?: string;
-  mtype?: string;
-  mname?: string;
-}
-
-export type { QMLTypeLinkObject };

src/config/_types/index.ts

@@ -1,33 +0,0 @@
-import type { QMLTypeLinkObject } from "./helper";
-import type {
-  ModuleData,
-  QuickshellBase,
-  QuickshellFunction,
-  QuickshellGadget,
-  QuickshellInstance,
-  QuickshellProps,
-  QuickshellSignal,
-  QuickshellVariant,
-  TypeData,
-  VersionData,
-  VersionsData,
-} from "./module";
-import type { SearchLists } from "./search";
-import type { CopyButtonOptions } from "./codeblock";
-
-export type {
-  QMLTypeLinkObject,
-  QuickshellBase,
-  QuickshellInstance,
-  QuickshellGadget,
-  QuickshellProps,
-  QuickshellFunction,
-  QuickshellSignal,
-  QuickshellVariant,
-  TypeData,
-  ModuleData,
-  VersionData,
-  VersionsData,
-  SearchLists,
-  CopyButtonOptions,
-};

src/config/_types/search.ts

@@ -1,7 +0,0 @@
-interface SearchLists {
-  slug: string;
-  link: string;
-  summary: string;
-}
-
-export type { SearchLists };

src/config/io/generateTypeData.ts

@@ -1,45 +1,36 @@
 import { promises as fs } from "node:fs";
 import path from "node:path";
 
-import type { VersionsData, ModuleData } from "@_types";
+import type { VersionsData, ModuleData } from "./types";
 
-async function readModulesData(
+async function readModulesData(basePath: string): Promise<ModuleData[]> {
-  basePath: string
-): Promise<ModuleData[]> {
   const moduleDirs = await fs.readdir(basePath);
 
-  const modules = await Promise.all(
+  const modules = await Promise.all(moduleDirs.map(async moduleDir => {
-    moduleDirs.map(async moduleDir => {
+    const modulePath = path.join(basePath, moduleDir);
-      const modulePath = path.join(basePath, moduleDir);
 
-      const indexPromise = async () => {
+    const indexPromise = async () => {
-        const indexPath = path.join(modulePath, "index.json");
+      const indexPath = path.join(modulePath, "index.json");
-        const indexContent = await fs.readFile(indexPath, "utf8");
+      const indexContent = await fs.readFile(indexPath, "utf8");
-        return JSON.parse(indexContent);
+      return JSON.parse(indexContent);
-      };
+    };
 
-      const typeNames = (await fs.readdir(modulePath)).filter(
+    const typeNames = (await fs.readdir(modulePath)).filter(name => name !== "index.json");
-        name => name !== "index.json"
+    const typePromises = typeNames.map(async fileName => {
-      );
+      const typePath = path.join(modulePath, fileName);
-      const typePromises = typeNames.map(async fileName => {
+      const fileContent = await fs.readFile(typePath, "utf8");
-        const typePath = path.join(modulePath, fileName);
+      return JSON.parse(fileContent);
-        const fileContent = await fs.readFile(typePath, "utf8");
+    });
-        return JSON.parse(fileContent);
-      });
 
-      const [index, ...types] = await Promise.all([
+    const [index, ...types] = await Promise.all([indexPromise(), ...typePromises]);
-        indexPromise(),
-        ...typePromises,
-      ]);
 
-      return {
+    return {
-        name: index.name,
+      name: index.name,
-        description: index.description,
+      description: index.description,
-        details: index.details,
+      details: index.details,
-        types,
+      types,
-      };
+    }
-    })
+  }));
-  );
 
   return modules;
 }
@@ -53,31 +44,19 @@ async function readVersionsData(): Promise<VersionsData> {
     );
   }
 
-  const resolvedPath = path.join(process.cwd(), versionsPath);
-  console.log(resolvedPath);
   const content = await fs.readFile(versionsPath, "utf8");
   const data = JSON.parse(content);
 
-  const versions = await Promise.all(
+  const versions = await Promise.all(data.versions.map(async (d: { name: string, changelog?: string, types: any }) => ({
-    data.versions.map(
+    name: d.name,
-      async (d: {
+    changelog: d.changelog ? await fs.readFile(d.changelog, "utf8") : undefined,
-        name: string;
+    modules: await readModulesData(d.types),
-        changelog?: string;
+  })));
-        types: any;
-      }) => ({
-        name: d.name,
-        changelog: d.changelog
-          ? await fs.readFile(d.changelog, "utf8")
-          : undefined,
-        modules: await readModulesData(d.types),
-      })
-    )
-  );
 
   return {
     versions,
     default: data.default,
-  };
+  }
 }
 
 let globalVersionsData: Promise<VersionsData>;
@@ -92,6 +71,5 @@ export function getVersionsData(): Promise<VersionsData> {
 
 export async function getModulesData(): Promise<ModuleData[]> {
   const versions = await getVersionsData();
-  return versions.versions.find(v => v.name === versions.default)!
+  return versions.versions.find(v => v.name === versions.default)!.modules;
-    .modules;
 }

src/config/io/guides.ts

@@ -1,22 +1,17 @@
-import {
+import { type CollectionEntry, getCollection } from "astro:content";
-  type CollectionEntry,
-  getCollection,
-} from "astro:content";
 import { getVersionsData } from "@config/io/generateTypeData";
 
 // load latest version of each page for version
-async function buildGuideCollection(
+async function buildGuideCollection(version: string): Promise<CollectionEntry<'guide'>[]> {
-  version: string
-): Promise<CollectionEntry<"guide">[]> {
   const { versions } = await getVersionsData();
   const guidePages = await getCollection("guide");
 
-  const pages: { [key: string]: CollectionEntry<"guide"> } = {};
+  const pages: { [key: string]: CollectionEntry<'guide'> } = {};
 
   for (const currentVersion of versions.toReversed()) {
     for (const page of guidePages) {
-      let [guideVersion, id] = page.id.split("/");
+      let [guideVersion, id] = page.id.split('/');
-      guideVersion = guideVersion.replaceAll("_", ".");
+      guideVersion = guideVersion.replaceAll('_', '.');
       id = id ?? "index";
       if (guideVersion !== currentVersion.name) continue;
 
@@ -29,18 +24,12 @@ async function buildGuideCollection(
   return Object.values(pages);
 }
 
-let guideCollections: {
+let guideCollections: { [key: string]: Promise<CollectionEntry<'guide'>[]> } = {};
-  [key: string]: Promise<CollectionEntry<"guide">[]>;
-} = {};
 
-async function getGuideCollection(
+export async function getGuideCollection(version: string): Promise<CollectionEntry<'guide'>[]> {
-  version: string
-): Promise<CollectionEntry<"guide">[]> {
   if (!(version in guideCollections)) {
     guideCollections[version] = buildGuideCollection(version);
   }
 
   return guideCollections[version];
 }
-
-export { getGuideCollection };

src/config/io/helpers.ts

@@ -10,7 +10,7 @@ import type {
   ConfigHeading,
   ConfigTOC,
 } from "@components/navigation/sidebars/types";
-import type { QMLTypeLinkObject } from "@_types";
+import type { QMLTypeLinkObject } from "./types";
 
 export function buildHierarchy(headings: ConfigHeading[]) {
   const toc: ConfigTOC[] = [];
@@ -30,7 +30,7 @@ export function buildHierarchy(headings: ConfigHeading[]) {
       let depth = heading.depth - 1;
       let parent = null;
 
-      while (!parent && depth !== 0) {
+      while (!parent && depth != 0) {
         parent = parentHeadings.get(depth);
         depth -= 1;
       }
@@ -96,10 +96,13 @@ export function getQMLTypeLinkObject(unparsed: string) {
   return hashMap[index]();
 }
 
-export function getQMLTypeLink(
+export function getQMLTypeLink(version: string, {
-  version: string,
+  type,
-  { type, module, name, mtype, mname }: QMLTypeLinkObject
+  module,
-) {
+  name,
+  mtype,
+  mname,
+}: QMLTypeLinkObject) {
   if (type === "unknown") {
     return "#unknown";
   }
@@ -113,9 +116,7 @@ export function getQMLTypeLink(
       return localLink;
     },
     qt: () => {
-      const isSpecific = mname
+      const isSpecific = mname ? `#${mname}-${mtype === "func" ? "method" : mtype}` : "";
-        ? `#${mname}-${mtype === "func" ? "method" : mtype}`
-        : "";
       const qtLink = `${qtStart}${module!.toLowerCase().replace(".", "-")}-${name!.toLowerCase()}.html${isSpecific}`;
       return qtLink;
     },

src/config/io/markdown.ts

@@ -14,127 +14,115 @@ import { remarkAlert } from "remark-github-blockquote-alert";
 import rehypeShiki from "@shikijs/rehype";
 import sectionize from "@hbsnow/rehype-sectionize";
 import type { ShikiTransformer } from "shiki";
-import { h } from "hastscript";
 
 import {
   getQMLTypeLinkObject,
   getQMLTypeLink,
   getIconForLink,
 } from "./helpers.ts";
-import type { CopyButtonOptions } from "@_types";
 
 let currentVersion = "NOVERSION";
 
-const remarkParseAtTypes: RemarkPlugin<[]> =
+const remarkParseAtTypes: RemarkPlugin<[]> = () => (root: Md.Root): Md.Root => {
-  () =>
+  visit(root as Unist.Parent, (rawNode: Unist.Node) => {
-  (root: Md.Root): Md.Root => {
+    if (
-    visit(root as Unist.Parent, (rawNode: Unist.Node) => {
+      rawNode.type === "text" ||
-      if (
+      (rawNode.type === "code" &&
-        rawNode.type === "text" ||
+        (rawNode as Md.Code).lang === "qml")
-        (rawNode.type === "code" &&
+    ) {
-          (rawNode as Md.Code).lang === "qml")
+      const node = rawNode as Md.Literal;
-      ) {
-        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;
-            };
 
-            const groups = args.pop() as Capture;
+      node.value = node.value.replace(
-            const pathp = (groups.path ?? "")
+        /@@(?<path>([A-Z]\w*\.)*([A-Z]\w*))?((?<member>[a-z]\w*)((?<function>\(\))|(?<signal>\(s\)))?)?(?=[$.,;:)\s]|$)/g,
-              .split(".")
+        (_full, ...args) => {
-              .filter(Boolean);
+          type Capture = {
-            let type = pathp.length >= 1 ? pathp.pop() : "";
+            path: string | undefined;
-            let module = pathp.join("_");
+            member: string | undefined;
+            function: string | undefined;
+            signal: string | undefined;
+          };
 
-            if (module) {
+          const groups = args.pop() as Capture;
-              const isQs = module.startsWith("Quickshell");
+          const pathp = (groups.path ?? "").split('.').filter(Boolean);
-              module = `99M${isQs ? "QS" : "QT_qml"}_${module}`;
+          let type = (pathp.length >= 1 ? pathp.pop() : "");
-            } else module = ""; // WARNING: rehype parser can't currently handle intra-module links
+          let module = pathp.join('_');
 
-            type = type ? `99N${type}` : "";
+          if (module) {
-            groups.member = groups.member
+            const isQs = module.startsWith("Quickshell");
-              ? `99V${groups.member}`
+            module = `99M${isQs ? "QS" : "QT_qml"}_${module}`;
-              : "";
+          } else module = ""; // WARNING: rehype parser can't currently handle intra-module links
-            const typep = groups.member
-              ? `99T${groups.function ? "func" : groups.signal ? "signal" : "prop"}`
-              : "";
-            return `TYPE${module}${type}${groups.member}${typep}99TYPE`;
-          }
-        );
-      }
-    });
-    return root;
-  };
 
-const rehypeRewriteTypelinks: RehypePlugin<[]> =
+          type = type ? `99N${type}` : "";
-  () =>
+          groups.member = groups.member
-  (root: Html.Root): Html.Root => {
+            ? `99V${groups.member}`
-    visit(
+            : "";
-      root as Unist.Parent,
+          const typep = groups.member
-      "text",
+            ? `99T${groups.function ? "func" : groups.signal ? "signal" : "prop"}`
-      (node: Html.Text, index: number, parent: Html.Parent) => {
+            : "";
-        let changed = false;
+          return `TYPE${module}${type}${groups.member}${typep}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;
+  });
-  };
+  return root;
+};
 
-const rehypeRewriteVersionedDoclinks: RehypePlugin<[]> =
+const rehypeRewriteTypelinks: RehypePlugin<[]> = () => (root: Html.Root): Html.Root => {
-  () =>
+  visit(
-  (root: Html.Root): Html.Root => {
+    root as Unist.Parent,
-    visit(
+    "text",
-      root as Unist.Parent,
+    (node: Html.Text, index: number, parent: Html.Parent) => {
-      "element",
+      let changed = false;
-      ({ tagName, properties }: Html.Element) => {
-        if (tagName !== "a") return CONTINUE;
-        if (
-          !((properties.href as string) ?? "").startsWith("@docs")
-        )
-          return CONTINUE;
-        properties.href = `/docs/${currentVersion}/${(properties.href as string).slice(6)}`;
-        return CONTINUE;
-      }
-    );
 
-    return root;
+      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<[]> = () => (root: Html.Root): Html.Root => {
+  visit(
+    root as Unist.Parent,
+    "element",
+    ({ tagName, properties }: Html.Element) => {
+      if (tagName !== "a") return CONTINUE;
+      if (!(properties.href as string ?? "").startsWith("@docs")) return CONTINUE;
+      properties.href = `/docs/${currentVersion}/${(properties.href as string).slice(6)}`;
+      return CONTINUE;
+    }
+  );
+
+  return root;
+};
 
 const shikiRewriteTypelinks: ShikiTransformer = {
   name: "rewrite-typelinks",
@@ -153,69 +141,7 @@ const shikiRewriteTypelinks: ShikiTransformer = {
   },
 };
 
-const shikiCopyButton: ShikiTransformer = {
+export const markdownConfig: AstroMarkdownOptions = {
-  name: "copy-button",
-  pre(node) {
-    const options: CopyButtonOptions = {
-      duration: 3000,
-    };
-    const button = h(
-      "button",
-      {
-        class: "copy-button",
-        role: "button",
-        "aria-label": "Copy to clipboard",
-        "alia-live": "polite",
-        "data-code": this.source,
-        onclick: `
-                navigator.clipboard.writeText(this.dataset.code);
-                this.classList.add('copied');
-                this.setAttribute('aria-pressed', 'true');
-                setTimeout(() => { this.classList.remove('copied'); this.setAttribute('aria-pressed', 'false');}, ${options.duration})
-                `,
-      },
-      [
-        h(
-          "svg",
-          {
-            class: "copy-icon",
-            role: "icon",
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "1em",
-            height: "1em",
-            viewBox: "0 0 256 256",
-          },
-          [
-            h("path", {
-              fill: "currentColor",
-              d: "M200 32h-36.26a47.92 47.92 0 0 0-71.48 0H56a16 16 0 0 0-16 16v168a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m-72 0a32 32 0 0 1 32 32H96a32 32 0 0 1 32-32m72 184H56V48h26.75A47.9 47.9 0 0 0 80 64v8a8 8 0 0 0 8 8h80a8 8 0 0 0 8-8v-8a47.9 47.9 0 0 0-2.75-16H200Z",
-            }),
-          ]
-        ),
-        h(
-          "svg",
-          {
-            class: "check-icon",
-            role: "icon",
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "1em",
-            height: "1em",
-            viewBox: "0 0 256 256",
-          },
-          [
-            h("path", {
-              fill: "currentColor",
-              d: "M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32Z",
-            }),
-          ]
-        ),
-      ]
-    );
-    node.children.splice(0, 0, button);
-  },
-};
-
-const markdownConfig: AstroMarkdownOptions = {
   syntaxHighlight: false,
   remarkPlugins: [
     remarkParseAtTypes,
@@ -242,7 +168,7 @@ const markdownConfig: AstroMarkdownOptions = {
         },
         defaultColor: false,
         wrap: true,
-        transformers: [shikiRewriteTypelinks, shikiCopyButton],
+        transformers: [shikiRewriteTypelinks],
       },
     ],
     // FIXME: incompatible types between unified/Plugin and Astro/RehypePlugin
@@ -259,23 +185,18 @@ let globalMarkdownProcessor: Promise<MarkdownProcessor>;
 
 async function getMarkdownProcessor(): Promise<MarkdownProcessor> {
   if (!globalMarkdownProcessor) {
-    globalMarkdownProcessor =
+    globalMarkdownProcessor = createMarkdownProcessor(markdownConfig);
-      createMarkdownProcessor(markdownConfig);
   }
 
   return globalMarkdownProcessor;
 }
 
-async function processMarkdown(
+export async function processMarkdown(
   version: string,
-  markdown: string
+  markdown: string,
 ): Promise<string> {
   currentVersion = version;
-  const r = (
+  const r = (await (await getMarkdownProcessor()).render(markdown)).code;
-    await (await getMarkdownProcessor()).render(markdown)
-  ).code;
   currentVersion = "NOVERSION";
   return r;
 }
-
-export { markdownConfig, processMarkdown };

src/config/io/search.ts

@@ -1,13 +0,0 @@
-function getSearchWeight(version: string) {
-  const versionArr = version.split(".");
-  versionArr[0] = versionArr[0].substring(1);
-  const searchWeightArr = versionArr.map(w => parseInt(w));
-  const weight = searchWeightArr.reduce((p, c, i, _) => {
-    const mult = i - 1 === 0 || i === 0 ? 10 : 1;
-    const acc = p * mult + c * mult;
-    return acc;
-  });
-  return weight;
-}
-
-export { getSearchWeight };

src/config/io/types.d.ts

@@ -1,3 +1,15 @@
+//#FIXME fuseConfig.ts
+// --
+
+// generateSearchLists.ts
+interface SearchLists {
+  slug: string;
+  link: string;
+  summary: string;
+}
+// --
+
+// generateTypeData.ts
 interface QuickshellBase {
   type: string;
   module: string;
@@ -41,7 +53,7 @@ interface QuickshellSignal {
   };
 }
 
-interface QuickshellVariant {
+export interface QuickshellVariant {
   [key: string]: {
     name?: string;
     details: string;
@@ -49,7 +61,7 @@ interface QuickshellVariant {
   };
 }
 
-interface TypeData {
+export interface TypeData {
   name: string;
   description: string;
   details: string;
@@ -60,27 +72,37 @@ interface TypeData {
   functions?: QuickshellFunction[];
   signals?: QuickshellSignal;
   variants?: QuickshellVariant;
-  // FIXME: QuickshellData[]
+  subtypes?: QuickshellData[];
-  subtypes?: any[];
 }
 
-interface ModuleData {
+export interface ModuleData {
   name: string;
   description: string;
   details: string;
   types: TypeData[];
 }
 
-interface VersionData {
+export interface VersionData {
   name: string;
   changelog?: string;
   modules: ModuleData[];
 }
 
-interface VersionsData {
+export interface VersionsData {
   default: string;
   versions: VersionData[];
 }
+// --
+
+// helpers.ts
+interface QMLTypeLinkObject {
+  type: string;
+  module?: string;
+  name?: string;
+  mtype?: string;
+  mname?: string;
+}
+// --
 
 export type {
   QuickshellBase,
@@ -94,4 +116,5 @@ export type {
   ModuleData,
   VersionData,
   VersionsData,
+  QMLTypeLinkObject,
 };

src/config/styling/animations_helper.ts

@@ -1,69 +0,0 @@
-export function initAnimations() {
-  const observerOptions = {
-    root: null,
-    rootMargin: "0px",
-    threshold: 0.1,
-  };
-
-  const observer = new IntersectionObserver(
-    (entries, observer) => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting) {
-          entry.target.classList.add("visible");
-          observer.unobserve(entry.target);
-        }
-      });
-    },
-    observerOptions
-  );
-
-  const animatedElements = document.querySelectorAll(
-    ".animate-fade-up, .stagger-parent"
-  );
-  animatedElements.forEach(el => observer.observe(el));
-}
-
-export function initTOCHighlighting() {
-  const observer = new IntersectionObserver(entries => {
-    entries.forEach(entry => {
-      const heading = entry.target.querySelector(
-        "h1, h2, h3, h4, h5, h6"
-      );
-      if (heading) {
-        const id = heading.id;
-        const desktopElement = document.querySelector(
-          `.toc-wrapper li a[href="#${id}"]`
-        );
-        const mobileElement = document.querySelector(
-          `.toc-wrapper-mobile li a[href="#${id}"]`
-        );
-
-        if (entry.isIntersecting) {
-          desktopElement?.parentElement?.classList.add("active");
-          mobileElement?.parentElement?.classList.add("active");
-        } else {
-          desktopElement?.parentElement?.classList.remove(
-            "active"
-          );
-          mobileElement?.parentElement?.classList.remove(
-            "active"
-          );
-        }
-      }
-    });
-  });
-
-  document
-    .querySelectorAll("section[data-heading-rank]")
-    .forEach(section => {
-      observer.observe(section);
-    });
-}
-
-// auto-init on DOMContentLoaded
-if (typeof document !== "undefined") {
-  document.addEventListener("DOMContentLoaded", () => {
-    initAnimations();
-    initTOCHighlighting();
-  });
-}

src/config/styling/marquee.ts

@@ -1,289 +0,0 @@
-document.addEventListener("DOMContentLoaded", () => {
-  const container = document.querySelector(
-    ".marquee"
-  ) as HTMLDivElement;
-  const scroller = document.querySelector(
-    ".marquee-content"
-  ) as HTMLDivElement;
-  const btnLeft = document.getElementById("marquee-scroll-left");
-  const btnRight = document.getElementById(
-    "marquee-scroll-right"
-  );
-
-  if (!container || !scroller) return;
-
-  const bufferSize = 2;
-  let items = Array.from(
-    scroller.querySelectorAll(".marquee-item")
-  ) as HTMLDivElement[];
-  const originalCount = items.length;
-  if (originalCount === 0) return;
-
-  let itemWidth = 0;
-  let sequenceWidth = 0;
-  let targetScrollX = 0;
-  let currentScrollX = 0;
-  let isAnimating = false;
-  let isDown = false;
-  let lastTouchX = 0;
-  let touchVelocity = 0;
-  let lastTouchTime = 0;
-  const smoothFactor = 0.1;
-  const snapThreshold = 0.1;
-
-  // setup clones
-  const setupClones = () => {
-    // remove existing clones
-    scroller.querySelectorAll(".clone").forEach(c => c.remove());
-
-    const originals = Array.from(
-      scroller.querySelectorAll(".marquee-item")
-    ) as HTMLDivElement[];
-
-    // add clones after
-    for (let i = 0; i < bufferSize; i++) {
-      originals.forEach(item => {
-        const clone = item.cloneNode(true) as HTMLDivElement;
-        clone.classList.add("clone");
-        scroller.appendChild(clone);
-      });
-    }
-
-    // add clones before
-    const beforeContainer = document.createDocumentFragment();
-    for (let i = 0; i < bufferSize; i++) {
-      originals.forEach(item => {
-        const clone = item.cloneNode(true) as HTMLDivElement;
-        clone.classList.add("clone");
-        beforeContainer.appendChild(clone);
-      });
-    }
-    scroller.insertBefore(beforeContainer, scroller.firstChild);
-
-    items = Array.from(
-      scroller.querySelectorAll(".marquee-item")
-    ) as HTMLDivElement[];
-  };
-
-  const updateDimensions = () => {
-    // capture item width
-    const oldItemWidth = itemWidth;
-    itemWidth = container.clientWidth;
-    if (itemWidth === 0) return;
-
-    sequenceWidth = originalCount * itemWidth;
-
-    // standardize width
-    scroller.style.width = `${items.length * itemWidth}px`;
-    items.forEach(item => {
-      item.style.width = `${itemWidth}px`;
-      item.style.flex = `0 0 ${itemWidth}px`;
-      item.style.maxWidth = `${itemWidth}px`;
-    });
-
-    if (oldItemWidth > 0) {
-      const scrollRatio = targetScrollX / oldItemWidth;
-      const relativeScroll = scrollRatio % originalCount;
-      targetScrollX =
-        (bufferSize * originalCount + relativeScroll) * itemWidth;
-    } else {
-      targetScrollX = bufferSize * sequenceWidth;
-    }
-
-    currentScrollX = targetScrollX;
-    scroller.style.transform = `translateX(-${currentScrollX}px)`;
-  };
-
-  const lerp = (start: number, end: number, factor: number) =>
-    start + (end - start) * factor;
-
-  const animate = () => {
-    if (!isDown && Math.abs(touchVelocity) < 0.1) {
-      // snap to nearest item if not interacting and close to one
-      const nearestItemScroll =
-        Math.round(targetScrollX / itemWidth) * itemWidth;
-      if (
-        Math.abs(targetScrollX - nearestItemScroll) <
-        itemWidth * 0.5
-      ) {
-        targetScrollX = lerp(
-          targetScrollX,
-          nearestItemScroll,
-          0.1
-        );
-      }
-    }
-
-    currentScrollX = lerp(
-      currentScrollX,
-      targetScrollX,
-      smoothFactor
-    );
-
-    // boundary reset
-    if (currentScrollX > (bufferSize + 1) * sequenceWidth) {
-      currentScrollX -= sequenceWidth;
-      targetScrollX -= sequenceWidth;
-    } else if (
-      currentScrollX <
-      (bufferSize - 1) * sequenceWidth
-    ) {
-      currentScrollX += sequenceWidth;
-      targetScrollX += sequenceWidth;
-    }
-
-    scroller.style.transform = `translateX(-${currentScrollX}px)`;
-
-    // fade in-out and scale items based on distance from center
-    items.forEach((item, index) => {
-      const itemCenter = index * itemWidth;
-      const distance = Math.abs(currentScrollX - itemCenter);
-      const progress = Math.min(distance / itemWidth, 1); // 0 at center, 1 at edge
-
-      const opacity = 1 - progress;
-      const scale = 1 - progress * 0.1; // scale down as it leaves
-      const yOffset = progress * 20; // slide down as it leaves
-
-      item.style.opacity = opacity.toString();
-      // NOTE: apply transform to the video container specifically
-      // to keep layout stable
-      const content = item.querySelector(
-        ".marquee-item-content"
-      ) as HTMLElement;
-      if (content) {
-        content.style.transform = `scale(${scale}) translateY(${yOffset}px)`;
-      }
-    });
-
-    const diff = Math.abs(targetScrollX - currentScrollX);
-    const interaction = isDown || Math.abs(touchVelocity) > 0.1;
-
-    if (diff > snapThreshold || interaction) {
-      requestAnimationFrame(animate);
-    } else {
-      isAnimating = false;
-      currentScrollX = targetScrollX;
-      scroller.style.transform = `translateX(-${currentScrollX}px)`;
-    }
-  };
-
-  const startAnimation = () => {
-    if (!isAnimating) {
-      isAnimating = true;
-      requestAnimationFrame(animate);
-    }
-  };
-
-  // video handling
-  const videos = scroller.querySelectorAll("video");
-
-  const playObserverOptions = {
-    root: container,
-    threshold: 0.5,
-  };
-
-  const playObserver = new IntersectionObserver(entries => {
-    entries.forEach(entry => {
-      const video = entry.target as HTMLVideoElement;
-      if (entry.isIntersecting) {
-        video.play().catch(() => {}); // Handle potential autoplay blocks
-      } else {
-        video.pause();
-      }
-    });
-  }, playObserverOptions);
-
-  const resetObserverOptions = {
-    root: container,
-    threshold: 0.01,
-  };
-
-  const resetObserver = new IntersectionObserver(entries => {
-    entries.forEach(entry => {
-      const video = entry.target as HTMLVideoElement;
-      if (!entry.isIntersecting) {
-        video.currentTime = 0;
-        video.pause();
-      }
-    });
-  }, resetObserverOptions);
-
-  const startObserving = () => {
-    const allVideos = scroller.querySelectorAll("video");
-    allVideos.forEach(v => {
-      playObserver.observe(v);
-      resetObserver.observe(v);
-      v.addEventListener("ended", () => {
-        targetScrollX += itemWidth;
-        startAnimation();
-      });
-    });
-  };
-
-  // events
-  btnLeft?.addEventListener("click", () => {
-    targetScrollX -= itemWidth;
-    startAnimation();
-  });
-
-  btnRight?.addEventListener("click", () => {
-    targetScrollX += itemWidth;
-    startAnimation();
-  });
-
-  // container.addEventListener(
-  //   "wheel",
-  //   e => {
-  //     e.preventDefault();
-  //     targetScrollX += e.deltaY;
-  //     startAnimation();
-  //   },
-  //   { passive: false }
-  // );
-
-  container.addEventListener("touchstart", e => {
-    isDown = true;
-    lastTouchX = e.touches[0].clientX;
-    lastTouchTime = Date.now();
-    touchVelocity = 0;
-  });
-
-  container.addEventListener("touchmove", e => {
-    if (!isDown) return;
-    const currentTouchX = e.touches[0].clientX;
-    const deltaX = lastTouchX - currentTouchX;
-    targetScrollX += deltaX * 1.5;
-
-    const now = Date.now();
-    const dt = now - lastTouchTime;
-    if (dt > 0) touchVelocity = deltaX / dt;
-
-    lastTouchX = currentTouchX;
-    lastTouchTime = now;
-    startAnimation();
-  });
-
-  container.addEventListener("touchend", () => {
-    isDown = false;
-    targetScrollX += touchVelocity * 100; // Momentum
-    touchVelocity = 0;
-    startAnimation();
-  });
-
-  window.addEventListener("resize", updateDimensions);
-
-  document.addEventListener("visibilitychange", () => {
-    if (document.hidden) {
-      videos.forEach(v => v.pause());
-    }
-  });
-
-  // init
-  setupClones();
-  startObserving();
-  setTimeout(() => {
-    updateDimensions();
-    container.classList.add("initialized");
-    startAnimation();
-  }, 50);
-});

src/config/styling/theme_persistence.ts

@@ -1,89 +0,0 @@
-interface ThemeProps {
-  theme: "light" | "dark";
-  system: "light" | "dark";
-}
-
-export const getCurrentTheme = (): ThemeProps => {
-  const isDarkSystem = window.matchMedia(
-    "(prefers-color-scheme: dark)"
-  ).matches;
-  const systemTheme = isDarkSystem ? "dark" : "light";
-
-  if (typeof localStorage !== "undefined") {
-    if (localStorage.theme === "dark") {
-      return { theme: "dark", system: systemTheme };
-    }
-    if (localStorage.theme === "light") {
-      return { theme: "light", system: systemTheme };
-    }
-  }
-
-  return { theme: systemTheme, system: systemTheme };
-};
-
-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");
-    if (toggle) toggle.checked = true;
-  } else {
-    document.documentElement.classList.remove("dark");
-    if (toggle) toggle.checked = false;
-  }
-
-  if (transition) {
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        document.documentElement.classList.remove(
-          "changing-theme"
-        );
-      });
-    });
-  }
-};
-
-export const initTheme = () => {
-  const toggle = document.getElementById(
-    "theme-manual-toggle"
-  ) as HTMLInputElement;
-
-  if (toggle) {
-    toggle.addEventListener("change", () => {
-      localStorage.theme = toggle.checked ? "dark" : "light";
-      updateTheme();
-    });
-  }
-
-  window
-    .matchMedia("(prefers-color-scheme: dark)")
-    .addEventListener("change", () => updateTheme());
-  window.addEventListener("storage", () => updateTheme());
-
-  // initial sync
-  updateTheme(false);
-};
-
-// auto-init on client
-if (typeof document !== "undefined") {
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", initTheme);
-  } else {
-    initTheme();
-  }
-}

src/content.config.ts

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

src/env.d.ts

@@ -1,46 +1,2 @@
-/// <reference types="astro/client" />
 /// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro-icon/empty-types" />
+/// <reference types="astro/client" />
-
-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 | undefined;
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}
-
-// 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/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.md

@@ -2,7 +2,6 @@
 title: "QML Language"
 index: 10
 ---
-import Collapsible from "@components/Collapsible.astro";
 
 Quickshell is configured using the Qt Modeling Language, or QML.
 This page explains what you need to know about QML to start using Quickshell.
@@ -187,7 +186,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/layouts/BaseLayout.astro

@@ -1,6 +1,7 @@
 ---
 //import Header from "@components/Header.astro";
 import Head from "@config/Head.astro";
+import PreTheme from "@config/PreTheme.astro";
 
 interface Props {
   title: string;
@@ -13,20 +14,10 @@ const { title, description } = Astro.props;
 <html lang="en" class="dark">
   <head>
     <Head description={description} title={title} />
+    <PreTheme />
   </head>
   <body class="baselayout">
-    <input
-      type="checkbox"
-      id="theme-manual-toggle"
-      class="theme-toggle-input"
-      style="display: none;"
-      aria-label="Toggle theme (light/dark)"
-    >
     <!--<Header />-->
     <slot />
-    <script>
-      import "@config/styling/animations_helper.ts";
-      import "@config/styling/theme_persistence.ts";
-    </script>
   </body>
 </html>

src/layouts/DocsLayout.astro

@@ -2,30 +2,29 @@
 import { Breadcrumbs } from "astro-breadcrumbs";
 import "astro-breadcrumbs/breadcrumbs.css";
 
+import CreateCopyButtons from "@components/hooks/CreateCopyButtons.astro";
+import PreTheme from "@config/PreTheme.astro";
 import Header from "@components/Header.astro";
 import Head from "@config/Head.astro";
 import Nav from "@components/navigation/sidebars/nav/index.astro";
 import type { ConfigHeading } from "@src/components/navigation/sidebars/types";
 import Footer from "@src/components/Footer.astro";
-import type { TypeData } from "@config/_types";
+import type { TypeData } from "@config/io/types";
 
 interface Props {
   title: string;
   description: string;
   headings?: ConfigHeading[];
-  type?: TypeData;
+  type?: TypeData
 }
 
 const { title, description, headings, type } = Astro.props;
-let url = Astro.url.pathname.split("/").filter((s: string) => s !== "");
+let url = Astro.url.pathname.split("/").filter(s => s !== "");
 
-const breadcrumbs = [
+const breadcrumbs = [{
-  {
+  text: "custom",
-    text: "Home",
+  href: "/",
-    href: "/",
+}];
-    slot: "index",
-  },
-];
 
 let linkPath = "";
 if (url[0] === "docs") {
@@ -34,7 +33,6 @@ if (url[0] === "docs") {
   breadcrumbs.push({
     text: `Docs (${version})`,
     href: linkPath,
-    slot: "",
   });
   url = url.slice(2);
 }
@@ -44,7 +42,6 @@ for (const segment of url) {
   breadcrumbs.push({
     text: segment[0].toUpperCase() + segment.slice(1),
     href: linkPath,
-    slot: "",
   });
 }
 ---
@@ -52,25 +49,15 @@ for (const segment of url) {
 <html lang="en" class="dark">
   <head>
     <Head description={description} title={title} />
+    <PreTheme />
+    <CreateCopyButtons />
   </head>
   <body class="docslayout">
-    <input
+    <Header title={title} headings={headings} type={type}/>
-      type="checkbox"
-      id="theme-manual-toggle"
-      class="theme-toggle-input"
-      aria-label="Toggle theme (light/dark)"
-      style="display: none;"
-    >
-    <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
+        <Breadcrumbs crumbs={breadcrumbs} linkTextFormat="sentence" truncated={true} data-pagefind-ignore>
-          crumbs={breadcrumbs}
-          linkTextFormat="sentence"
-          truncated={true}
-          data-pagefind-ignore
-        >
           <svg
             slot="index"
             xmlns="http://www.w3.org/2000/svg"
@@ -82,60 +69,25 @@ 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>
+            ></path></svg
-          </svg>
+          >
           <svg
             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>
+            ></path></svg
-          </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";
-    </script>
   </body>
 </html>
-<script>
+
-  // FIXME: need to make this work properly, or fold into the markdown processor
-  let headings = document.getElementsByClassName("heading");
-  if (headings.length > 0) {
-    //@ts-expect-error
-    for (const heading of headings) {
-      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;
-          navigator.clipboard.writeText(link);
-          heading.classList.toggle("copied");
-          setTimeout(() => heading.classList.remove("copied"), 1000);
-        };
-      }
-      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;
-          navigator.clipboard.writeText(link);
-          spanButton.classList.toggle("copied");
-          setTimeout(() => heading.classList.remove("copied"), 1000);
-        };
-      }
-    }
-  }
-</script>

src/layouts/GuideLayout.astro

@@ -1,6 +1,7 @@
 ---
 import DocsLayout from "@layouts/DocsLayout.astro";
 import TOC from "@components/navigation/sidebars/TOC.astro";
+import TOCIntersectionObserver from "@src/components/hooks/TOCIntersectionObserver.astro";
 import type { ConfigHeading } from "@src/components/navigation/sidebars/types";
 
 export interface Props {
@@ -11,20 +12,15 @@ 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
+  <TOC slot="alongside-content" mobile={false} title={title} headings={headings} data-pagefind-ignore/>
-    slot="alongside-content"
-    mobile={false}
-    title={title}
-    headings={headings}
-    data-pagefind-ignore
-  />
 </DocsLayout>
+
+<TOCIntersectionObserver/>

src/layouts/GuideMdLayout.astro

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

src/pages/changelog.astro

@@ -5,14 +5,10 @@ import { processMarkdown } from "@config/io/markdown";
 
 const { versions } = await getVersionsData();
 
-const versionsMd = await Promise.all(
+const versionsMd = await Promise.all(versions.filter(version => version.changelog).map(async version => ({
-  versions
+  version,
-    .filter(version => version.changelog)
+  changelog: await processMarkdown(version.name, version.changelog!)
-    .map(async version => ({
+})));
-      version,
-      changelog: await processMarkdown(version.name, version.changelog ?? ""),
-    }))
-);
 
 const headings = versionsMd.map(({ version }) => ({
   text: version.name,
@@ -20,7 +16,6 @@ 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

@@ -2,39 +2,31 @@
 import GuideLayout from "@layouts/GuideLayout.astro";
 import { getVersionsData } from "@config/io/generateTypeData";
 import { getGuideCollection } from "@config/io/guides";
+import { processMarkdown } from "@config/io/markdown";
 
 import { render } from "astro:content";
 
 export async function getStaticPaths() {
   const { versions } = await getVersionsData();
 
-  const pages = await Promise.all(
+  let pages = await Promise.all(versions.map(async version => {
-    versions.map(async version => {
+    const pages = await getGuideCollection(version.name);
-      const pages = await getGuideCollection(version.name);
 
-      return pages.map(page => ({
+    return pages.map(page => ({
-        params: {
+      params: { version: version.name, id: page.id === "index" ? "/" : page.id },
-          version: version.name,
+      props: { version, page },
-          id: page.id === "index" ? "/" : page.id,
+    }));
-        },
+  }));
-        props: { version, page },
-      }));
-    })
-  );
 
   return pages.flat();
 }
 
-const { page } = Astro.props;
+const { version, page } = Astro.props;
-const { headings, Content } = await render(page);
+const { headings } = await render(page);
 
-// xnzf: version is decided before these pages get processed
-//  V
 // we can't use 'Content' because there isn't a way to pass in a version
-
+const html = await processMarkdown(version.name, page.body!);
-// const html = await processMarkdown(version.name, page.body!);
 ---
-
 <GuideLayout title={page.data.title} description="" headings={headings}>
-  <Content />
+  <Fragment set:html={html}/>
 </GuideLayout>

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

@@ -11,7 +11,6 @@ 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

@@ -1,6 +1,5 @@
 ---
 import { getQMLTypeLink } from "@config/io/helpers";
-import { getSearchWeight } from "@config/io/search";
 import { processMarkdown } from "@config/io/markdown";
 import { getVersionsData } from "@config/io/generateTypeData";
 import DocsLayout from "@layouts/DocsLayout.astro";
@@ -10,25 +9,12 @@ 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 => {
     return version.modules.flatMap(module => {
       return module.types.map(type => ({
-        params: {
+        params: { version: version.name, module: module.name, type: type.name },
-          version: version.name,
-          module: module.name,
-          type: type.name,
-        },
         props: { version, module, type },
       }));
     });
@@ -43,27 +29,17 @@ const details = type.details
   ? await processMarkdown(version.name, type.details)
   : null;
 
-
 const description = type.description
   ? await processMarkdown(version.name, type.description)
   : null;
-
-const searchWeight =
-  version.name != "master" ? getSearchWeight(version.name) : 999.0;
-
 ---
-
+<DocsLayout title={`${module.name} - ${type.name}`} description={type.description ?? ""} type={type}>
-<DocsLayout
+  <div class="docs">
-  title={`${module.name} - ${type.name}`}
-  description={type.description ?? ""}
-  type={type}
->
-  <div class="docs" data-pagefind-weight=`${searchWeight}` data-pagefind-meta=`version:${version.name}` data-pagefind-filter=`version:${version.name}`>
     <div class="docs-content typedocs-content">
-      <hr>
+      <hr />
       <section class="typedocs-title">
-        <h2 class="typedocs-title-text" data-pagefind-weight=`${searchWeight}` data-pagefind-meta="title" >
+      <h2 class="typedocs-title-text" data-pagefind-weight="10">
-          {type.name}<span data-pagefind-ignore>:</span>
+        {type.name}:
           {type.super?.name ? (
             <a
               href={superLink!}
@@ -73,10 +49,11 @@ const searchWeight =
             </a>
           ):(
             <span class="type-datatype" data-pagefind-ignore>{type.name}</span>
-          )}
+          )
-        </h2>
+          }
-        {type.flags && (
+      </h2>
-        <div class="type-flags" data-pagefind-ignore>{type.flags.map((flag:string) => (
+      {type.flags && (
+        <div class="type-flags" data-pagefind-ignore>{type.flags.map(flag => (
           <Badge badgeText={flag}/>
         ))}</div>
       )}
@@ -86,23 +63,23 @@ const searchWeight =
         <subheading class="typedocs-subheading">
           {details ? <span class="parsedMD" set:html={details}/> : <span class="parsedMD" set:html={description}/>}
         </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>
+          <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>
+          <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!}
@@ -110,6 +87,7 @@ const searchWeight =
         )}
       </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

@@ -28,7 +28,7 @@ const types = await Promise.all(module.types.map(async type => ({
   description="Quickshell Type Documentation"
 >
   <div class="docs-content">
-    <hr>
+    <hr />
     <h2 class="typedocs-title">{module.name} Definitions</h2>
     <section>
       <span>{module.description}</span>

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

@@ -1,7 +1,6 @@
 ---
 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 => ({
@@ -12,18 +11,14 @@ 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: ModuleData) => (
+        {version.modules.map(module => (
           <div class="root-nav-entry">
             <a class="root-nav-link" href={`/docs/${version.name}/types/${module.name}`}>
               {module.name}

src/pages/index.astro

@@ -8,52 +8,42 @@ 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,
+          Quickshell is a toolkit for building status bars, widgets, lockscreens,
-          lockscreens, and other desktop components using QtQuick. It can be
+          and other desktop components using QtQuick. It can be used alongside your
-          used alongside your wayland compositor or window manager to build a
+          wayland compositor or window manager to build a complete desktop environment.
-          complete desktop environment.
           <br class="about-break">
           <br class="about-break">
           <a href="/about">More information</a>
         </p>
       </div>
       <div class="about-buttons">
-        <a
+        <a href={`/docs/${defaultVersion}/guide/install-setup`} class="main-page_link-card">
-          href={`/docs/${defaultVersion}/guide/install-setup`}
-          class="main-page_link-card"
-        >
           <h3>Install</h3>
         </a>
-        <a
+        <a href={`/docs/${defaultVersion}/types`} class="main-page_link-card main-page_bluecard">
-          href={`/docs/${defaultVersion}/types`}
-          class="main-page_link-card main-page_bluecard"
-        >
           <h3>Documentation</h3>
         </a>
       </div>
     </section>
-    <section class="featurelist-section"><FeatureList /></section>
+    <section class="featurelist-section">
+      <FeatureList/>
+    </section>
   </div>
-  <Footer class="frontpage-footer" />
+  <Footer class="frontpage-footer"/>
 </BaseLayout>

src/styles/components/accordion.css

@@ -1,7 +1,7 @@
 .accordion {
   & summary {
     list-style: none;
-    transition: background-color var(--theme-transition);
+    transition: background-color 0.15s ease-out;
   }
 
   & .accordion-container {
@@ -12,9 +12,7 @@
 
   & .accordion-container.animate {
     /* this somehow breaks if both min AND max aren't animated */
-    transition:
+    transition: min-height 0.3s ease, max-height 0.3s ease;
-      min-height 0.3s ease,
-      max-height 0.3s ease;
     min-height: var(--height);
     max-height: var(--height);
   }

src/styles/components/featurelist.css

@@ -12,22 +12,18 @@
 .featurelist-item {
   position: relative;
   display: flex;
-  gap: var(--xs);
+  gap: 0.618rem;
   flex-direction: column;
   align-items: center;
-  margin-block: var(--xs);
+  margin-block: 0.618rem;
-  border-radius: var(--radius-md);
+  border-radius: 9px;
   background-color: hsl(var(--blue) 60% 98%);
   padding: 0.618rem;
   border: 1px solid hsl(var(--blue) 9% 75%);
-  transition:
-    background-color var(--theme-transition),
-    border-color var(--theme-transition);
-
   &::before {
     content: "";
     position: absolute;
-    inset: var(--xs);
+    inset: 0.618rem;
     background-image: radial-gradient(
       hsl(var(--blue) 9% 75%) 1px,
       transparent 1px
@@ -37,8 +33,7 @@
   }
 }
 
-html.dark .featurelist-item,
+html.dark .featurelist-item {
-html:has(input#theme-manual-toggle:checked) .featurelist-item {
   background-color: hsl(var(--blue) 100% 81% / 0.05);
   border-color: hsl(0deg 0% 100% / 0.05);
 
@@ -51,22 +46,18 @@ html:has(input#theme-manual-toggle:checked) .featurelist-item {
 }
 
 .feature-text {
-  margin: var(--sm) 0;
+  margin: 1rem 0;
   text-align: center;
-  font-size: 1.2em;
+  font-size: 1.2rem;
-
   & .feature-title {
     margin-bottom: 0.517rem;
   }
-
   & .feature-subtitle {
     color: #303030;
-    transition: color var(--theme-transition);
   }
 }
 
-html.dark .feature-text,
+html.dark .feature-text {
-html:has(input#theme-manual-toggle:checked) .feature-text {
   & .feature-subtitle {
     color: #afafaf;
   }
@@ -81,8 +72,7 @@ html:has(input#theme-manual-toggle:checked) .feature-text {
   & video {
     width: 100%;
     aspect-ratio: 16 / 9;
-    border-radius: var(--radius-sm);
+    border-radius: 0.681rem;
-    box-shadow: var(--shadow-md);
   }
 
   & .shiki {
@@ -90,7 +80,6 @@ html:has(input#theme-manual-toggle:checked) .feature-text {
     width: 100%;
     height: 100%;
     /*font-size: 0.55rem;*/
-    box-shadow: var(--shadow-md);
   }
 
   & .showcase-desktop {
@@ -109,13 +98,8 @@ html:has(input#theme-manual-toggle:checked) .feature-text {
   }
 }
 
-html:not(.dark):not(:has(input#theme-manual-toggle:checked))
+html:not(.dark) .feature-showcase .shiki,
-  .feature-showcase
+html:not(.dark) .feature-showcase .shiki span {
-  .shiki,
-html:not(.dark):not(:has(input#theme-manual-toggle:checked))
-  .feature-showcase
-  .shiki
-  span {
   background-color: #ffffff;
 }
 
@@ -134,7 +118,6 @@ html:not(.dark):not(:has(input#theme-manual-toggle:checked))
     position: absolute;
     z-index: 2;
   }
-
   & .cloud-center img {
     width: 80px;
     height: 80px;
@@ -157,7 +140,6 @@ html:not(.dark):not(:has(input#theme-manual-toggle:checked))
     & > div {
       transform: rotate(0deg);
       animation: counter-spin 40s linear infinite;
-
       & .feature-icon {
         width: 80px;
         height: 80px;
@@ -167,34 +149,26 @@ html:not(.dark):not(:has(input#theme-manual-toggle:checked))
     &.wayland {
       transform: translate(-50%, 0) rotate(0deg);
     }
-
     &.hyprland {
       transform: translate(-50%, 0) rotate(72deg);
-
       & .feature-icon {
         transform: rotate(-72deg);
       }
     }
-
     &.pipewire {
       transform: translate(-50%, 0) rotate(144deg);
-
       & .feature-icon {
         transform: rotate(-144deg);
       }
     }
-
     &.x-org {
       transform: translate(-50%, 0) rotate(216deg);
-
       & .feature-icon {
         transform: rotate(-216deg);
       }
     }
-
     &.sway {
       transform: translate(-50%, 0) rotate(288deg);
-
       & .feature-icon {
         transform: rotate(-288deg);
       }
@@ -206,7 +180,6 @@ html:not(.dark):not(:has(input#theme-manual-toggle:checked))
   from {
     transform: rotate(0deg);
   }
-
   to {
     transform: rotate(360deg);
   }
@@ -216,7 +189,6 @@ html:not(.dark):not(:has(input#theme-manual-toggle:checked))
   from {
     transform: rotate(0deg);
   }
-
   to {
     transform: rotate(-360deg);
   }
@@ -241,42 +213,33 @@ html:not(.dark):not(:has(input#theme-manual-toggle:checked))
     width: auto;
     align-items: center;
   }
-
   .feature-text {
     margin: 0 2.218rem;
   }
-
   .featurelist-item {
     width: 100%;
     padding: 1.217rem;
     justify-content: space-between;
     flex-direction: row;
   }
-
   .featurelist-item.right {
     flex-direction: row-reverse;
   }
-
   .feature-showcase {
     height: 22rem;
   }
-
   .feature-text {
     text-align: left;
   }
-
   .feature-showcase {
     width: auto;
     aspect-ratio: 16 / 9;
-
     & video {
       scale: 1;
     }
-
     & .shiki {
       font-size: 0.93rem;
     }
-
     .feature-cloud {
       margin-bottom: 0;
     }

src/styles/components/marquee.css

@@ -2,10 +2,10 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: var(--xl);
+  gap: 2.217rem;
-  font-size: var(--lg);
+  font-size: 1.874rem;
   font-weight: 600;
-  margin-inline: var(--sm);
+  margin-inline: 0.618rem;
 }
 
 .marquee-button {
@@ -20,75 +20,36 @@
     left: 2px;
     right: 2px;
     height: 3px;
-    background-color: hsla(var(--accent-400) / 0.3);
+    background-color: hsl(var(--accent-400) / 0.3);
     z-index: -1;
   }
 }
-
 .marquee {
   position: relative;
   display: flex;
   width: 100%;
-  margin-block: var(--xl);
+  margin-block: 1.618rem;
-  justify-content: flex-start;
+  justify-content: center;
-  align-items: flex-start;
-  overflow: hidden;
-  opacity: 0;
-  transition: opacity 0.6s ease;
-  min-height: 200px; /* placeholder height */
-
-  &.initialized {
-    opacity: 1;
-  }
 }
 
 .marquee-content {
+  width: 100%;
   height: 100%;
+  overflow: hidden;
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  margin: 0;
-  padding: 0;
-  will-change: transform;
-  transform: translateX(0);
-  visibility: hidden;
-
-  .initialized & {
-    visibility: visible;
-  }
 }
 
 .marquee-item {
-  position: relative;
+  flex: 1 0 100%;
+  transition: transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  transform: translateX(var(--scroll));
   display: flex;
-  flex-direction: column;
+  justify-content: center;
-  align-items: center;
-  gap: var(--md);
   padding-inline: 0.5rem;
-  box-sizing: border-box;
-  will-change: opacity;
-  width: 100vw;
-  flex: 0 0 100vw;
 
-  & > * {
+  & > div {
-    z-index: 11;
-  }
-
-  & .video-wrapper {
-    position: relative;
-    width: 100%;
     max-width: 75rem;
-    aspect-ratio: 16 / 9;
+    width: 100%;
-
-    box-shadow: var(--shadow-md);
-    background-color: hsl(var(--bg-700));
-    overflow: hidden;
-
-    & video {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
   }
 }
 
@@ -97,38 +58,34 @@
 }
 
 .marquee-item-content {
-  border-radius: var(--radius-sm);
+  border-radius: 6px;
-  will-change: transform;
 }
 
 .marquee-scroll {
   position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
   width: 100%;
-  max-width: 80rem;
+  max-width: 85rem;
   height: 100%;
   display: flex;
   justify-content: space-between;
-  align-items: stretch;
+  align-items: center;
   transition:
-    background-color var(--theme-transition),
+    background-color 0.3s,
-    opacity var(--theme-transition);
+    opacity 0.3s;
-  z-index: 20;
+  z-index: 10;
   user-select: none;
+  align-items: stretch;
   pointer-events: none;
+  padding-inline: 1rem;
 }
 
 .marquee-scroll-arrow {
-  width: 8rem;
+  max-width: 8rem;
   font-size: 2rem;
   pointer-events: all;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
-  height: 100%;
 
   & > div {
     width: 2.5rem;
@@ -138,14 +95,10 @@
     justify-content: center;
     opacity: 0.5;
     transition: opacity 0.3s ease;
-    backdrop-filter: blur(var(--2xs));
-    border-radius: var(--radius-xs);
-    background-color: #55555580;
   }
 
   &:hover {
     cursor: pointer;
-
     & > div {
       opacity: 0.9;
     }
@@ -176,14 +129,17 @@
   }
 }
 
-@media (min-width: 83rem) {
-  .marquee-scroll {
-    min-width: 88rem;
-    max-width: 90rem;
-  }
-}
 @media not (min-width: 83rem) {
   .marquee-scroll-arrow {
     height: unset;
+    & > div {
+      background-color: #55555580;
+      border-radius: 0.2rem;
+    }
+  }
+
+  .marquee-scroll {
+    width: 92%;
+    align-items: center;
   }
 }

src/styles/css-config/animations.css

@@ -116,61 +116,3 @@
     --percent-nav-root_filled: 65%;
   }
 }
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes ping {
-  75%,
-  100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@keyframes pulse {
-  50% {
-    opacity: 0.5;
-  }
-}
-
-@keyframes bounce {
-  0% {
-    transform: none;
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
-
-  50% {
-    transform: translateY(-12%);
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-    color: hsla(var(--green) 100 69 / 0.75);
-  }
-
-  100% {
-    transform: none;
-    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-  }
-}
-
-@keyframes fade {
-  0% {
-    transform: scale(0.75);
-    opacity: 0.6;
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-:root {
-  --animate-spin: spin 1s linear infinite;
-  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  --animate-bounce: bounce 0.6s var(--ease-out) forwards;
-  --animate-fade: fade 0.3s cubic-bezier(0.4, 0, 0.6, 1);
-}

src/styles/css-config/base.css

@@ -1,18 +1,129 @@
 html {
-  font-family:
+  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;
 
   height: 100svh;
-  /* width: 100svw; causes horizontal overflow due to the scrollbar*/
-  width: 100%;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  color-scheme: light dark;
+  /* accent */
+  --green: 141deg;
+  --accent-400: var(--green) 90% 57%;
+  --accent-500: var(--green) 90% 47%;
+  --accent-600: var(--green) 88% 40%;
+  --accent-700: var(--green) 70% 40%;
+
+  /* secondary */
+  --blue: 224deg;
+  --secondary-400: var(--blue) 100% 68%;
+  --secondary-500: var(--blue) 100% 58%;
+  --secondary-600: var(--blue) 53% 41%;
+  --secondary-700: var(--blue) 43% 31%;
+  --secondary-800: var(--blue) 23% 21%;
+  --secondary-900: var(--blue) 44% 7%;
+
+  /* primary */
+  --white: 194deg;
+  --bg-400: var(--white) 10% 95%;
+  --bg-500: var(--white) 5% 90%;
+  --bg-600: var(--white) 5% 76%;
+  --bg-700: var(--white) 5% 56%;
+  --bg-800: var(--white) 5% 36%;
+  --bg-900: var(--white) 5% 16%;
+
+  /* docs */
+  --background: var(--bg-500);
+  --text: var(--white) 0% 0%;
+  --text-dark: var(--white) 0% 18%;
+  --text-darker: var(--white) 0% 30%;
+  --link: var(--green) 48% 40%;
+  --toc-link: var(--green) 74% 30%;
+  --toc-link-active: var(--green) 80% 38%;
+  --prop-color: 350deg 78% 70%;
+  --prop-link-color: 350deg 78% 60%;
+  --func-color: 50deg 68% 50%;
+  --func-link-color: 50deg 58% 55%;
+  --signal-color: 270deg 78% 70%;
+  --signal-link-color: 270deg 85% 60%;
+  --var-color: 190deg 78% 70%;
+  --var-link-color: 190deg 85% 60%;
+  --inner-param-color: 215deg 80% 27%;
+  --inner-param-border-color: 215deg 50% 50%;
+  --nav-hovered-bkg: var(--blue) 100% 87%;
+  --nav-hovered-weak-bkg: var(--blue) 100% 91%;
+  --nav-selected-bkg: var(--blue) 100% 90%;
+  --nav-selected-hovered-bkg: var(--blue) 100% 85%;
+  --nav-selected-text: var(--blue) 60% 60%;
+  --nav-indicator-bkg: var(--blue) 45% 80%;
+  --toc-hovered-bkg: 0deg 0% 0% / 0.1;
+  --overlay-bkg: var(--blue) 25% 93%;
+  --overlay-bkg-border: var(--blue) 10% 75%;
+  --footer-bkg: var(--blue) 8% 87%;
+  --footer-bkg-border: var(--blue) 32% 84%;
+}
+
+html.dark {
+  /* accent */
+  --green: 141deg;
+  --accent-400: var(--green) 100% 67%;
+  --accent-500: var(--green) 95% 55%;
+  --accent-600: var(--green) 90% 40%;
+  --accent-700: var(--green) 80% 30%;
+
+  /* secondary */
+  --white: 194deg;
+  --secondary-400: var(--white) 33% 100%;
+  --secondary-500: var(--white) 33% 96%;
+  --secondary-600: var(--white) 33% 76%;
+  --secondary-700: var(--white) 33% 56%;
+  --secondary-800: var(--white) 35% 36%;
+  --secondary-900: var(--white) 44% 7%;
+
+  /* primary */
+  --blue: 224deg;
+  --bg-400: var(--blue) 90% 65%;
+  --bg-500: var(--blue) 83% 45%;
+  --bg-700: var(--blue) 82% 25%;
+  --bg-800: var(--blue) 82% 15%;
+  --bg-900: var(--blue) 82% 3%;
+
+  /* docs */
+  --background: var(--bg-900);
+  --text: var(--white) 0% 100%;
+  --text-dark: var(--white) 0% 70%;
+  --text-darker: var(--white) 0% 40%;
+  --link: var(--green) 60% 44%;
+  --toc-link: var(--green) 74% 40%;
+  --toc-link-active: var(--green) 80% 60%;
+  --prop-color: 350deg 78% 70%;
+  --prop-link-color: 350deg 78% 60%;
+  --func-color: 50deg 78% 70%;
+  --func-link-color: 50deg 78% 60%;
+  --signal-color: 270deg 78% 70%;
+  --signal-link-color: 270deg 85% 60%;
+  --var-color: 190deg 78% 70%;
+  --var-link-color: 190deg 85% 60%;
+  --inner-param-color: 215deg 60% 70%;
+  --inner-param-border-color: 215deg 26% 46%;
+  --inner-param-color: 215deg 60% 70%;
+  --nav-hovered-bkg: var(--blue) 40% 10%;
+  --nav-hovered-weak-bkg: var(--blue) 35% 8%;
+  --nav-selected-bkg: var(--blue) 40% 13%;
+  --nav-selected-hovered-bkg: var(--blue) 40% 17%;
+  --nav-selected-text: var(--blue) 100% 70%;
+  --nav-indicator-bkg: var(--blue) 30% 30%;
+  --toc-hovered-bkg: 0deg 0% 100% / 0.07;
+  --overlay-bkg: var(--blue) 75% 5%;
+  --overlay-bkg-border: var(--blue) 45% 15%;
+  --footer-bkg: var(--blue) 66% 5%;
+  --footer-bkg-border: var(--blue) 75% 21%;
 }
 
 * {
@@ -20,7 +131,6 @@ html {
   position: relative;
   margin: 0;
   padding: 0;
-  /* transition: all 0.15s var(--ease-in-out); */
 }
 
 body {

src/styles/css-config/code.css

@@ -1,12 +1,12 @@
 pre.shiki {
-  margin-block: var(--lg);
+  margin-block: 1.618rem;
 }
 
 :where(p, li):has(> code) code {
-  padding-inline: var(--sm);
+  padding-inline: 0.272rem;
-  border-radius: var(--radius-xs);
+  border-radius: 0.272rem;
-  color: hsl(var(--blue) 100 69);
+  color: hsl(var(--blue) 100% 69%);
-  background-color: hsla(var(--blue) 85 35 / 0.1);
+  background-color: hsl(var(--blue) 85% 35% / 0.1);
 }
 
 .shiki,
@@ -16,9 +16,7 @@ pre.shiki {
 }
 
 html.dark .shiki,
-html.dark .shiki span,
+html.dark .shiki span {
-html:has(input#theme-manual-toggle:checked) .shiki,
-html:has(input#theme-manual-toggle:checked) .shiki span {
   color: var(--shiki-dark);
   background-color: var(--shiki-dark-bg);
 }
@@ -28,11 +26,8 @@ pre {
   border-radius: 0.618rem;
   overflow: hidden;
   text-wrap: wrap;
-  transition:
-    background-color var(--theme-transition),
-    color var(--theme-transition);
 
-  & .copy-button {
+  & > button {
     all: unset;
     width: 2rem;
     height: 2rem;
@@ -46,51 +41,17 @@ pre {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: hsla(var(--blue) 100 69 / 0.33);
+    color: hsl(var(--blue) 100% 69%);
-    background-color: hsla(var(--blue) 85 35 / 0.01);
+    background-color: hsl(var(--blue) 85% 35% / 0.1);
     cursor: pointer;
-    transition:
+    transition: color 0.25s;
-      background-color var(--theme-transition),
-      color var(--theme-transition);
-    z-index: 10;
-
-    & svg {
-      position: absolute;
-      transition:
-        transform 0.3s var(--ease-in-out),
-        opacity 0.3s var(--ease-in-out);
-    }
-
-    & .check-icon {
-      opacity: 0;
-      transform: scale(0.5);
-      color: hsl(var(--green) 100 69);
-    }
 
     &:hover {
-      color: hsla(var(--blue) 100 75 / 0.75);
+      color: hsl(var(--blue) 100% 75%);
-      background-color: hsla(var(--blue) 85 35 / 0.1);
     }
 
     &.copied {
-      & .copy-icon {
+      animation: pulseGreen 0.5s cubic-bezier(0, 1, 0.6, 1);
-        opacity: 0;
-        transform: scale(0.5);
-      }
-
-      & .check-icon {
-        opacity: 1;
-        transform: scale(1);
-      }
-    }
-  }
-
-  &.shiki {
-    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/colors.css

@@ -1,118 +1,3 @@
-html:not(.dark):not(:has(input#theme-manual-toggle:checked)) {
-  color-scheme: light dark;
-  /* accent */
-  --green: 141deg;
-  --accent-400: var(--green) 90% 57%;
-  --accent-500: var(--green) 90% 47%;
-  --accent-600: var(--green) 88% 40%;
-  --accent-700: var(--green) 70% 35%;
-
-  /* secondary */
-  --blue: 224deg;
-  --secondary-400: var(--blue) 100% 68%;
-  --secondary-500: var(--blue) 100% 58%;
-  --secondary-600: var(--blue) 53% 41%;
-  --secondary-700: var(--blue) 43% 31%;
-  --secondary-800: var(--blue) 23% 21%;
-  --secondary-900: var(--blue) 44% 7%;
-
-  /* primary */
-  --white: 194deg;
-  --bg-400: var(--white) 10% 98%;
-  --bg-500: var(--white) 10% 95%;
-  --bg-600: var(--white) 8% 88%;
-  --bg-700: var(--white) 8% 78%;
-  --bg-800: var(--white) 5% 56%;
-  --bg-900: var(--white) 5% 16%;
-
-  /* docs */
-  --background: var(--bg-400);
-  --text: var(--white) 0% 10%;
-  --text-dark: var(--white) 0% 25%;
-  --text-darker: var(--white) 0% 40%;
-  --link: var(--green) 60% 35%;
-  --toc-link: var(--white) 0% 40%;
-  --toc-link-active: var(--green) 60% 35%;
-  --prop-color: 350deg 78% 65%;
-  --prop-link-color: 350deg 78% 45%;
-  --func-color: 50deg 78% 45%;
-  --func-link-color: 50deg 85% 30%;
-  --signal-color: 270deg 60% 65%;
-  --signal-link-color: 270deg 75% 45%;
-  --var-color: 190deg 78% 65%;
-  --var-link-color: 190deg 85% 40%;
-  --inner-param-color: 215deg 80% 27%;
-  --inner-param-border-color: 215deg 50% 50%;
-  --nav-hovered-bkg: var(--blue) 100% 94%;
-  --nav-hovered-weak-bkg: var(--blue) 100% 96%;
-  --nav-selected-bkg: var(--blue) 100% 92%;
-  --nav-selected-hovered-bkg: var(--blue) 100% 88%;
-  --nav-selected-text: var(--blue) 70% 45%;
-  --nav-indicator-bkg: var(--blue) 45% 80%;
-  --toc-hovered-bkg: 0deg 0% 0% / 0.05;
-  --overlay-bkg: var(--white) 10% 98%;
-  --overlay-bkg-border: var(--white) 10% 85%;
-  --footer-bkg: var(--white) 10% 95%;
-  --footer-bkg-border: var(--white) 10% 88%;
-}
-
-html.dark,
-html:has(input#theme-manual-toggle:checked) {
-  /* accent */
-  --green: 141deg;
-  --accent-400: var(--green) 100% 67%;
-  --accent-500: var(--green) 95% 55%;
-  --accent-600: var(--green) 90% 40%;
-  --accent-700: var(--green) 80% 30%;
-
-  /* secondary */
-  --white: 194deg;
-  --secondary-400: var(--white) 33% 100%;
-  --secondary-500: var(--white) 33% 96%;
-  --secondary-600: var(--white) 33% 76%;
-  --secondary-700: var(--white) 33% 56%;
-  --secondary-800: var(--white) 35% 36%;
-  --secondary-900: var(--white) 44% 7%;
-
-  /* primary */
-  --blue: 224deg;
-  --bg-400: var(--blue) 90% 65%;
-  --bg-500: var(--blue) 83% 45%;
-  --bg-700: var(--blue) 82% 25%;
-  --bg-800: var(--blue) 82% 15%;
-  --bg-900: var(--blue) 82% 3%;
-
-  /* docs */
-  --background: var(--bg-900);
-  --text: var(--white) 0% 100%;
-  --text-dark: var(--white) 0% 70%;
-  --text-darker: var(--white) 0% 40%;
-  --link: var(--green) 60% 44%;
-  --toc-link: var(--green) 74% 40%;
-  --toc-link-active: var(--green) 80% 60%;
-  --prop-color: 350deg 78% 70%;
-  --prop-link-color: 350deg 78% 60%;
-  --func-color: 50deg 78% 70%;
-  --func-link-color: 50deg 78% 60%;
-  --signal-color: 270deg 78% 70%;
-  --signal-link-color: 270deg 85% 60%;
-  --var-color: 190deg 78% 70%;
-  --var-link-color: 190deg 85% 60%;
-  --inner-param-color: 215deg 60% 70%;
-  --inner-param-border-color: 215deg 26% 46%;
-  --nav-hovered-bkg: var(--blue) 40% 10%;
-  --nav-hovered-weak-bkg: var(--blue) 35% 8%;
-  --nav-selected-bkg: var(--blue) 40% 13%;
-  --nav-selected-hovered-bkg: var(--blue) 40% 17%;
-  --nav-selected-text: var(--blue) 100% 70%;
-  --nav-indicator-bkg: var(--blue) 30% 30%;
-  --toc-hovered-bkg: 0deg 0% 100% / 0.07;
-  --overlay-bkg: var(--blue) 75% 5%;
-  --overlay-bkg-border: var(--blue) 45% 15%;
-  --footer-bkg: var(--blue) 66% 5%;
-  --footer-bkg-border: var(--blue) 75% 21%;
-}
-
 .typeprop-link {
   color: hsl(var(--prop-link-color));
 

src/styles/css-config/entry.css

@@ -1,6 +0,0 @@
-@import "normalize.css";
-@import "vars.css";
-@import "animations.css";
-@import "base.css";
-@import "code.css";
-@import "colors.css";

src/styles/css-config/normalize.css

@@ -1,475 +0,0 @@
-/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS and IE text size adjust after device orientation change,
- *    without disabling user zoom.
- */
-html {
-  font-family: "Inter", sans-serif;
-  /* 1 */
-  -ms-text-size-adjust: 100%;
-  /* 2 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */
-}
-
-/**
- * Remove default margin.
- */
-body {
-  margin: 0;
-}
-
-/* HTML5 display definitions
-   ========================================================================== */
-/**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11
- * and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
-/* article, */
-/* aside, */
-details,
-/* figcaption, */
-  /* figure, */
-  /* footer, */
-  /* header, */
-  /* hgroup, */
-  /* main, */
-  /* menu, */
-  /* nav, */
-  /* section, */
-  summary {
-  display: block;
-}
-
-/**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-  /* 1 */
-  vertical-align: baseline;
-  /* 2 */
-}
-
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
- */
-[hidden],
-template {
-  display: none;
-}
-
-/* Links
-   ========================================================================== */
-/**
- * Remove the gray background color from active links in IE 10.
- */
-a {
-  background-color: transparent;
-}
-
-/**
- * Improve readability of focused elements when they are also in an
- * active/hover state.
- */
-a:active,
-a:hover {
-  outline: 0;
-}
-
-/* Text-level semantics
-   ========================================================================== */
-/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-
-/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
-b,
-strong {
-  font-weight: bold;
-}
-
-/**
- * Address styling not present in Safari and Chrome.
- */
-dfn {
-  font-style: italic;
-}
-
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari, and Chrome.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/**
- * Address styling not present in IE 8/9.
- */
-mark {
-  background: #ff0;
-  color: var(--hl-onbackground);
-}
-
-/**
- * Address inconsistent and variable font size in all browsers.
- */
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sup {
-  top: -0.5em;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-/* Embedded content
-   ========================================================================== */
-/**
- * Remove border when inside `a` element in IE 8/9/10.
- */
-img {
-  border: 0;
-}
-
-/**
- * Correct overflow not hidden in IE 9/10/11.
- */
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Grouping content
-   ========================================================================== */
-/**
- * Address margin not present in IE 8/9 and Safari.
- */
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * Address differences between Firefox and other browsers.
- */
-hr {
-  box-sizing: content-box;
-  height: 0;
-}
-
-/**
- * Contain overflow in all browsers.
- */
-pre {
-  overflow: auto;
-}
-
-/**
- * Address odd `em`-unit font size rendering in all browsers.
- */
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-/* Forms
-   ========================================================================== */
-/**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-/**
- * 1. Correct color not being inherited.
- *    Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
- */
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit;
-  /* 1 */
-  font: inherit;
-  /* 2 */
-  margin: 0;
-  /* 3 */
-}
-
-/**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
- */
-
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
- */
-button,
-select {
-  text-transform: none;
-}
-
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- *    `input` and others.
- * 4. CUSTOM FOR WEBFLOW: Removed the input[type="submit"] selector to reduce
- *    specificity and defer to the .w-button selector
- */
-button,
-html input[type="button"],
-input[type="reset"] {
-  -webkit-appearance: button;
-  /* 2 */
-  cursor: pointer;
-  /* 3 */
-}
-
-/**
- * Re-set default cursor for disabled elements.
- */
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-
-/**
- * Remove inner padding and border in Firefox 4+.
- */
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-input {
-  line-height: normal;
-}
-
-/**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box;
-  /* 1 */
-  padding: 0;
-  /* 2 */
-}
-
-/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. CUSTOM FOR WEBFLOW: changed from `textfield` to `none` to normalize iOS rounded input
- * 2. CUSTOM FOR WEBFLOW: box-sizing: content-box rule removed
- *    (similar to normalize.css >=4.0.0)
- */
-input[type="search"] {
-  -webkit-appearance: none;
-  /* 1 */
-}
-
-/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * Define consistent border, margin, and padding.
- */
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-/**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-legend {
-  border: 0;
-  /* 1 */
-  padding: 0;
-  /* 2 */
-}
-
-/**
- * Remove default vertical scrollbar in IE 8/9/10/11.
- */
-textarea {
-  overflow: auto;
-}
-
-/**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
- */
-optgroup {
-  font-weight: bold;
-}
-
-/* Tables
-   ========================================================================== */
-/**
- * Remove most spacing between table cells.
- */
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td,
-th {
-  padding: 0;
-}
-
-p {
-  margin: 0;
-}
-
-/* Remove default margins and padding on all basic HTML elements */
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  margin: 0;
-  padding: 0;
-}

src/styles/css-config/vars.css

@@ -1,82 +0,0 @@
-html {
-  --scaleFactor: 1.618;
-  --wholestep: 1.618;
-  --halfstep: 1.272;
-  --quarterstep: 1.128;
-  --eighthstep: 1.062;
-
-  --wholestep-dec: 0.618;
-  --halfstep-dec: 0.272;
-  --quarterstep-dec: 0.128;
-  --eighthstep-dec: 0.062;
-
-  --md: 1em;
-  --sm: calc(1em / var(--scaleFactor));
-  --xs: calc(var(--sm) / var(--scaleFactor));
-  --2xs: calc(var(--xs) / var(--scaleFactor));
-  --3xs: calc(var(--2xs) / var(--scaleFactor));
-  --lg: calc(1em * var(--scaleFactor));
-  --xl: calc(var(--lg) * var(--scaleFactor));
-  --2xl: calc(var(--xl) * var(--scaleFactor));
-  --3xl: calc(var(--2xl) * var(--scaleFactor));
-  --4xl: calc(var(--3xl) * var(--scaleFactor));
-
-  /* INFO: Unitless sizes;
-      required for adhoc calculations
-      (division and multiplication in calc() require unitless numbers)
-  */
-  /* NOTE:
-      in calc() with (x*y) or (x/y) the "y" must be a unitless number
-  */
-
-  --sm-unitless: calc(1 / var(--scaleFactor));
-  --xs-unitless: calc(var(--sm-unitless) / var(--scaleFactor));
-  --2xs-unitless: calc(var(--xs-unitless) / var(--scaleFactor));
-  --lg-unitless: calc(1 * var(--scaleFactor));
-  --xl-unitless: calc(var(--lg-unitless) * var(--scaleFactor));
-  --2xl-unitless: calc(var(--xl-unitless) * var(--scaleFactor));
-
-  --radius-xs: var(--xs);
-  --radius-sm: var(--sm);
-  --radius-md: var(--md);
-  --radius-lg: var(--lg);
-  --radius-xl: var(--xl);
-
-  --shadow-sm-units: 0 0 1px 0;
-  --shadow-md-units-1: 0 4px 6px;
-  --shadow-md-units-2: 0 2px 4px;
-  --shadow-md-units-3: 0 0 1px;
-  --shadow-lg-units-1: 0 11px 15px -3px;
-  --shadow-lg-units-2: 0 2px 6px;
-  --shadow-lg-units-3: 0 0 1px;
-  --shadow-xl-units-1: 0 20px 25px;
-  --shadow-xl-units-2: 0 5px 11px;
-  --shadow-xl-units-3: 0 5px 11px;
-  --shadow-2xl-units-1: 0 25px 50px;
-  --shadow-2xl-units-2: 0 9px 18px;
-  --shadow-2xl-units-3: 0 0 1px;
-
-  --shadow-sm: var(--shadow-sm-units) rgba(0, 0, 0, 0.11);
-  --shadow-md:
-    var(--shadow-md-units-1) rgba(0, 0, 0, 0.08),
-    var(--shadow-md-units-2) rgba(0, 0, 0, 0.11),
-    var(--shadow-md-units-3) rgba(0, 0, 0, 0.4);
-  --shadow-lg:
-    var(--shadow-lg-units-1) rgba(0, 0, 0, 0.11),
-    var(--shadow-lg-units-2) rgba(0, 0, 0, 0.07),
-    var(--shadow-lg-units-3) rgba(0, 0, 0, 0.4);
-  --shadow-xl:
-    var(--shadow-xl-units-1) rgba(0, 0, 0, 0.09),
-    var(--shadow-xl-units-2) rgba(0, 0, 0, 0.12),
-    var(--shadow-xl-units-3) rgba(0, 0, 0, 0.4);
-  --shadow-2xl:
-    var(--shadow-2xl-units-1) rgba(0, 0, 0, 0.23),
-    var(--shadow-2xl-units-2) rgba(0, 0, 0, 0.1),
-    var(--shadow-2xl-units-3) rgba(0, 0, 0, 0.4);
-
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-
-  --theme-transition: 0s var(--ease-in-out);
-}

src/styles/docs/collapsible.css

@@ -7,7 +7,7 @@
 [data-scope="collapsible"][data-part="content"] {
   padding: 0;
   margin: 0;
-  transition: all var(--theme-transition);
+  transition: all 300ms;
 }
 
 [data-scope="collapsible"][data-part="content"][data-state="open"] {

src/styles/docs/docs-types.css

@@ -68,9 +68,7 @@
     margin-bottom: 0.618rem;
     border-radius: 12px;
     padding: 0.8rem;
-    transition:
+    transition: border 0.3s;
-      background-color var(--theme-transition),
-      border-color var(--theme-transition);
   }
 
   & .typedata-details {
@@ -166,9 +164,6 @@
 .typeprops {
   & .typeprop-root {
     border: 1px solid hsl(var(--prop-color) / 0.6);
-    transition:
-      background-color var(--theme-transition),
-      border-color var(--theme-transition);
 
     &:hover {
       border: 1px solid hsl(var(--prop-color));
@@ -180,13 +175,11 @@
 
     & .typeprop-name {
       color: hsl(var(--prop-link-color));
-      transition: color var(--theme-transition);
     }
   }
 }
 
-html.dark .typeprops,
+html.dark .typeprops {
-html:has(input#theme-manual-toggle:checked) .typeprops {
   & .typeprop-root {
     border: 1px solid hsl(var(--prop-color) / 0.3);
 
@@ -200,9 +193,6 @@ html:has(input#theme-manual-toggle:checked) .typeprops {
 .typefuncs {
   & .typefunc-root {
     border: 1px solid hsl(var(--func-color) / 0.6);
-    transition:
-      background-color var(--theme-transition),
-      border-color var(--theme-transition);
 
     &:hover {
       border: 1px solid hsl(var(--func-color));
@@ -214,7 +204,6 @@ html:has(input#theme-manual-toggle:checked) .typeprops {
 
     & .typefunc-name {
       color: hsl(var(--func-link-color));
-      transition: color var(--theme-transition);
     }
 
     & .typefunc-params {
@@ -233,8 +222,7 @@ html:has(input#theme-manual-toggle:checked) .typeprops {
   }
 }
 
-html.dark .typefuncs,
+html.dark .typefuncs {
-html:has(input#theme-manual-toggle:checked) .typefuncs {
   & .typefunc-root {
     border: 1px solid hsl(var(--func-color) / 0.3);
 
@@ -248,9 +236,6 @@ html:has(input#theme-manual-toggle:checked) .typefuncs {
 .typesignals {
   & .typesignal-root {
     border: 1px solid hsl(var(--signal-color) / 0.6);
-    transition:
-      background-color var(--theme-transition),
-      border-color var(--theme-transition);
 
     &:hover {
       border: 1px solid hsl(var(--signal-color));
@@ -264,7 +249,6 @@ html:has(input#theme-manual-toggle:checked) .typefuncs {
       position: relative;
       width: max-content;
       color: hsl(var(--signal-link-color));
-      transition: color var(--theme-transition);
 
       & .typesignal-doclink {
         top: -12px;
@@ -290,8 +274,7 @@ html:has(input#theme-manual-toggle:checked) .typefuncs {
   }
 }
 
-html.dark .typesignals,
+html.dark .typesignals {
-html:has(input#theme-manual-toggle:checked) .typesignals {
   & .typesignal-root {
     border: 1px solid hsl(var(--signal-color) / 0.3);
 
@@ -305,9 +288,6 @@ html:has(input#theme-manual-toggle:checked) .typesignals {
 .typevariants {
   & .typevariant-root {
     border: 1px solid hsl(var(--var-color) / 0.6);
-    transition:
-      background-color var(--theme-transition),
-      border-color var(--theme-transition);
 
     &:hover {
       border: 1px solid hsl(var(--var-color));
@@ -321,7 +301,6 @@ html:has(input#theme-manual-toggle:checked) .typesignals {
       position: relative;
       width: max-content;
       color: hsl(var(--var-link-color));
-      transition: color var(--theme-transition);
 
       & .typevariant-doclink {
         position: absolute;
@@ -334,8 +313,7 @@ html:has(input#theme-manual-toggle:checked) .typesignals {
   }
 }
 
-html.dark .typevariants,
+html.dark .typevariants {
-html:has(input#theme-manual-toggle:checked) .typevariants {
   & .typevariant-root {
     border: 1px solid hsl(var(--var-color) / 0.3);
 

src/styles/docs/docs.css

@@ -2,7 +2,7 @@
 @import "./docs-types.css";
 
 .docslayout {
-  transition: background-color var(--theme-transition);
+  transition: background-color 0.3s;
 }
 
 .docslayout-root {
@@ -12,7 +12,7 @@
   justify-content: safe center;
   flex-direction: row;
   flex-grow: 1;
-  transition: filter var(--theme-transition);
+  transition: filter 0.3s;
 }
 
 .docslayout-inner {
@@ -31,9 +31,8 @@
   pointer-events: none;
 }
 
-html:not(.dark):not(:has(input#theme-manual-toggle:checked)) > .dim-content-toc,
+:not(html.dark) > .dim-content-toc,
-html:not(.dark):not(:has(input#theme-manual-toggle:checked))
+:not(html.dark) > .dim-content-nav {
-  > .dim-content-nav {
   background-color: #909090;
 }
 
@@ -67,7 +66,7 @@ html:not(.dark):not(:has(input#theme-manual-toggle:checked))
   --color-link-breadcrumbs: hsl(var(--link));
   margin-top: 0.5rem;
   margin-bottom: 0.318rem;
-  max-width: 100%;
+  max-width: 100svw;
 }
 
 .heading {

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

@@ -20,9 +20,7 @@
 .nav-item {
   display: block;
   border-radius: 6px;
-  transition:
+  transition: background-color 0.2s ease;
-    background-color var(--theme-transition),
-    color var(--theme-transition);
   padding: 0.4em;
   font-size: 1rem;
 
@@ -41,8 +39,11 @@
 }
 
 .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 {
@@ -54,9 +55,7 @@
     & > div {
       & > .nav-collapse-marker,
       a {
-        transition:
+        transition: background-color 0.2s ease;
-          background-color var(--theme-transition),
-          color var(--theme-transition);
       }
 
       & > .nav-collapse-marker {

src/styles/docs/nav/nav.css

@@ -7,16 +7,12 @@
 
 .nav-icon {
   opacity: 0;
-  transform: scale(0.5);
   position: absolute;
-  transition:
+  transition: opacity 0.6s;
-    opacity var(--theme-transition),
-    transform var(--theme-transition);
 }
 
 .nav-icon.active {
   opacity: 1;
-  transform: scale(1);
   position: relative;
 }
 
@@ -54,9 +50,7 @@
       display: none;
     }
 
-    transition:
+    transition: left 0.3s ease, padding 0.3s ease;
-      left 0.3s ease,
-      padding 0.3s ease;
 
     &.shown {
       display: flex;

src/styles/docs/nav/search.css

@@ -12,13 +12,12 @@
   --search-corners: calc(0.3125rem * var(--pagefind-ui-scale));
   --search-page-icon-size: calc(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
-    2
   );
   --search-tree-diagram-size: calc(2.5rem * var(--pagefind-ui-scale));
   --search-tree-diagram-inline-start: calc(
     (var(--search-result-pad-inline-start) - var(--search-tree-diagram-size)) /
-    2
+      2
   );
 }
 
@@ -40,10 +39,6 @@
   width: calc(100% - var(--search-cancel-space));
 }
 
-#qs_search .pagefind-ui__filter-panel {
-  min-width: max-content;
-}
-
 #qs_search input:focus {
   --pagefind-ui-border: hsl(var(--accent-500));
 }
@@ -62,11 +57,9 @@
 
 #qs_search .pagefind-ui__search-clear::before {
   content: "";
-  -webkit-mask:
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
     center / 50% no-repeat;
-  mask:
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
     center / 50% no-repeat;
   background-color: hsl(0deg 25% 45%);
   display: block;
@@ -74,14 +67,8 @@
   height: 100%;
 }
 
-#qs_search .pagefind-ui__results-area {
+#qs_search .pagefind-ui__results > * + * {
-  margin-bottom: calc(20px * var(--pagefind-ui-scale));
+  margin-top: var(--search-result-spacing);
-}
-
-#qs_search .pagefind-ui__results {
-  & > * + * {
-    margin-top: var(--search-result-spacing);
-  }
 }
 
 #qs_search .pagefind-ui__result {
@@ -89,20 +76,6 @@
   padding: 0;
 }
 
-#qs_search .pagefind-ui__result-tag {
-  display: flex;
-  gap: var(--sm);
-  & #text:nth-child(1),
-  #text:nth-child(2) {
-    display: none;
-  }
-  background-color: transparent;
-  color: hsl(var(--accent-600));
-  border-radius: var(--radius-md);
-  outline: 1px solid hsl(var(--accent-600));
-  width: fit-content;
-}
-
 #qs_search .pagefind-ui__result-nested {
   position: relative;
   padding: var(--search-result-nested-pad-block)
@@ -193,11 +166,9 @@
   inset-inline-start: var(--search-tree-diagram-inline-start);
   width: var(--search-tree-diagram-size);
   background: hsl(var(--blue) 10% 30%);
-  -webkit-mask:
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
     0% 0% / 100% no-repeat;
-  mask:
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
     0% 0% / 100% no-repeat;
 }
 
@@ -233,11 +204,9 @@
     inset-inline-start: var(--search-tree-diagram-inline-start);
     width: var(--search-tree-diagram-size);
     background: hsl(var(--blue) 10% 30%);
-    -webkit-mask:
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m'/%3E%3C/svg%3E")
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m'/%3E%3C/svg%3E")
       0% 0% / 100% no-repeat;
-    mask:
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m'/%3E%3C/svg%3E")
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m'/%3E%3C/svg%3E")
       0% 0% / 100% no-repeat;
   }
 }
@@ -250,8 +219,7 @@
 
 /* default styles */
 site-search {
-  --shadow-lg:
+  --shadow-lg: 0px 25px 7px hsl(0deg, 0%, 0%, 0.03),
-    0px 25px 7px hsl(0deg, 0%, 0%, 0.03),
     0px 16px 6px hsl(0deg, 0%, 0%, 0.1), 0px 9px 5px hsl(223deg, 13%, 10%, 0.33),
     0px 4px 4px hsl(0deg, 0%, 0%, 0.75), 0px 4px 2px hsl(0deg, 0%, 0%, 0.25);
   display: contents;
@@ -307,8 +275,7 @@ button > kbd {
   background-color: hsl(var(--blue) 15% 80%);
 }
 
-html.dark button > kbd,
+html.dark button > kbd {
-html:has(input#theme-manual-toggle:checked) button > kbd {
   background-color: hsl(var(--blue) 5% 20% / 0.5);
 }
 
@@ -401,8 +368,7 @@ button[data-close-modal] {
     }
   }
 
-  html.dark button[data-open-modal],
+  html.dark button[data-open-modal] {
-  html:has(input#theme-manual-toggle:checked) button[data-open-modal] {
     background-color: hsla(var(--blue) 15% 15% / 0.5);
     color: hsl(var(--blue) 40% 65%);
 

src/styles/docs/toc/toc.css

@@ -30,28 +30,6 @@
   font-size: 1.614rem;
   max-height: 500px;
 
-  & > div {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-  }
-
-  & .toc-icon {
-    opacity: 0;
-    transform: scale(0.5);
-    position: absolute;
-    transition:
-      opacity var(--theme-transition),
-      transform var(--theme-transition);
-
-    &.active {
-      opacity: 1;
-      transform: scale(1);
-      position: relative;
-    }
-  }
-
   & > svg {
     height: 100%;
     width: 24px;
@@ -83,9 +61,7 @@
       display: none;
     }
 
-    transition:
+    transition: width 0.3s ease, padding 0.3s ease;
-      width 0.3s ease,
-      padding 0.3s ease;
 
     &.shown {
       & .toc-content {
@@ -139,7 +115,7 @@
     margin-right: 1.272rem;
 
     & .toc_a {
-      transition: color var(--theme-transition);
+      transition: color 0.33s;
       color: hsl(var(--toc-link));
     }
 

src/styles/global.css

@@ -1,6 +1,9 @@
 @import "remark-github-blockquote-alert/alert.css";
+@import "./css-config/base.css";
+@import "./css-config/animations.css";
+@import "./css-config/code.css";
+@import "./css-config/colors.css";
 
-@import "./css-config/entry.css";
 @import "./main-page.css";
 
 @import "./docs/nav/nav.css";
@@ -12,69 +15,42 @@
 @import "./components/featurelist.css";
 @import "./components/marquee.css";
 
-.theme-toggle {
+.changing-theme * {
-  height: 24px;
+  transition: none !important;
-  font-size: 1.614rem;
-  color: hsla(var(--signal-color) / 0.7);
-
-  &:hover {
-    cursor: pointer;
-    color: hsla(var(--signal-color) / 1);
-  }
 }
 
 /* color styling */
 .header {
   background-color: hsl(var(--bg-400));
   box-shadow: 0 1px 1px 1px hsla(var(--white) 100 0 / 0.1);
-  transition:
-    background-color var(--theme-transition),
-    color var(--theme-transition),
-    box-shadow var(--theme-transition);
 }
 
 .baselayout,
 .docslayout {
   background-color: hsl(var(--background));
   color: hsl(var(--secondary-900));
-  transition:
-    background-color var(--theme-transition),
-    color var(--theme-transition);
 }
 
 a {
   color: hsl(var(--link));
   text-decoration: none;
-  transition: color var(--theme-transition);
 
   &:hover {
     text-decoration: underline;
     cursor: pointer;
   }
 }
-
 html.dark .baselayout,
-html.dark .docslayout,
+html.dark .docslayout {
-html:has(input#theme-manual-toggle:checked) .baselayout,
-html:has(input#theme-manual-toggle:checked) .docslayout {
   background-color: hsl(var(--bg-900));
   color: hsl(var(--secondary-400));
 }
 
-html.dark,
+html.dark {
-html:has(input#theme-manual-toggle:checked) {
   & .header {
     background-color: hsl(var(--secondary-900));
     color: hsl(var(--secondary-500));
   }
-
-  & .theme-toggle {
-    color: hsla(var(--func-color) / 0.7);
-
-    &:hover {
-      color: hsla(var(--func-color) / 1);
-    }
-  }
 }
 
 /* layout and positioning */
@@ -89,7 +65,6 @@ html:has(input#theme-manual-toggle:checked) {
     transparent
   );
 }
-
 .unset {
   all: unset;
 }
@@ -158,63 +133,47 @@ body.overflow-toc {
   display: block;
 }
 
+.theme-toggle {
+  height: 24px;
+  font-size: 1.614rem;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
 footer {
   position: relative;
-  margin-top: var(--2xl);
   width: 100%;
   font-size: 0.9rem;
   display: flex;
   justify-content: space-between;
   padding: 1rem 2rem;
+  overflow: hidden;
   flex-shrink: 0;
   background: hsl(var(--footer-bkg));
-  transition:
-    background-color var(--theme-transition),
-    color var(--theme-transition);
 
   &::before {
     content: "";
     position: absolute;
     top: 0;
-    left: 0;
+    left: -1rem;
-    right: calc(50% + 1.25rem);
     height: 1px;
+    width: calc(100% + 1rem);
     background: linear-gradient(
       90deg,
       transparent 0%,
-      hsl(var(--footer-bkg-border)) 100%
+      hsl(var(--footer-bkg-border)) 50%,
-    );
-  }
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: calc(50% + 1.25rem);
-    height: 1px;
-    background: linear-gradient(
-      90deg,
-      hsl(var(--footer-bkg-border)) 0%,
       transparent 100%
     );
   }
 
-  & .theme-toggle {
-    position: absolute;
-    top: -12px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: max-content;
-    height: max-content;
-  }
-
   & a {
     color: hsl(var(--text-dark));
-    transition: color var(--theme-transition);
+    transition: color 0.3s ease;
 
     & .hint {
-      transition: color var(--theme-transition);
+      transition: color 0.3s ease;
     }
 
     &:nth-child(2) .hint {
@@ -264,11 +223,10 @@ footer {
     gap: 0.373rem;
     align-items: flex-start;
     font-size: 2.5rem;
-  }
 
+  }
   & .changelog {
     display: flex;
-
     & a {
       text-decoration: none;
       margin-inline: auto;

src/styles/main-page.css

@@ -45,15 +45,16 @@ h1.gradient-text {
     hsl(var(--green) 80% 42%),
     hsl(var(--blue) 80% 49%)
   );
-  background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
-html.dark h1.gradient-text,
+html.dark h1.gradient-text {
-html:has(input#theme-manual-toggle:checked) h1.gradient-text {
+  background: linear-gradient(
-  background: linear-gradient(30deg, #42b96b, #4281b9);
+    30deg,
-  background-clip: text;
+    #42b96b,
+    #4281b9
+  );
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
@@ -75,8 +76,7 @@ html:has(input#theme-manual-toggle:checked) h1.gradient-text {
   }
 }
 
-html.dark .main-page_hero-text,
+html.dark .main-page_hero-text {
-html:has(input#theme-manual-toggle:checked) .main-page_hero-text {
   & h2 {
     color: hsl(var(--blue) 100% 83%);
   }
@@ -95,9 +95,7 @@ html:has(input#theme-manual-toggle:checked) .main-page_hero-text {
   font-size: 1.1rem;
 }
 
-.about-break {
+.about-break { display: none }
-  display: none;
-}
 
 .about-buttons {
   display: flex;
@@ -132,13 +130,12 @@ html:has(input#theme-manual-toggle:checked) .main-page_hero-text {
   align-items: center;
   width: 100%;
   height: 3.67rem;
-  border-radius: var(--radius-sm);
+  border-radius: 9px;
   overflow: hidden;
-  box-shadow: var(--shadow-md);
+  border: 1px solid hsl(var(--green) 10% 10%);
   transition:
-    background-color var(--theme-transition),
+    background-color 0.3s,
-    box-shadow var(--theme-transition),
+    border-color 0.3s;
-    border-color var(--theme-transition);
 
   background-color: hsl(var(--green) 38% 30%);
   color: hsl(194deg 0% 100%);
@@ -146,22 +143,17 @@ html:has(input#theme-manual-toggle:checked) .main-page_hero-text {
   &:hover {
     cursor: pointer;
     text-decoration: none;
+    border-color: hsl(var(--green) 20% 20%);
     background-color: hsl(var(--green) 48% 40%);
-    box-shadow:
-      var(--shadow-md-units-1) hsla(var(--green) 48 45 / 0.08),
-      var(--shadow-md-units-2) hsla(var(--green) 48 45 / 0.11),
-      var(--shadow-md-units-3) hsla(var(--green) 48 45 / 0.4);
   }
 
   &.main-page_bluecard {
+    border-color: hsl(var(--blue) 10% 10%);
     background-color: hsl(var(--blue) 38% 30%);
 
     &:hover {
+      border-color: hsl(var(--blue) 20% 20%);
       background-color: hsl(var(--blue) 48% 40%);
-      box-shadow:
-        var(--shadow-md-units-1) hsla(var(--blue) 48 45 / 0.08),
-        var(--shadow-md-units-2) hsla(var(--blue) 48 45 / 0.11),
-        var(--shadow-md-units-3) hsla(var(--blue) 48 45 / 0.4);
     }
   }
 
@@ -170,8 +162,7 @@ html:has(input#theme-manual-toggle:checked) .main-page_hero-text {
   }
 }
 
-html.dark .main-page_link-card,
+html.dark .main-page_link-card {
-html:has(input#theme-manual-toggle:checked) .main-page_link-card {
   background-color: hsl(var(--green) 38% 25%);
   color: hsl(194deg 0% 100%);
 
@@ -235,15 +226,7 @@ html:has(input#theme-manual-toggle:checked) .main-page_link-card {
     flex-direction: row;
   }
 
-  .about-txt {
+  .about-txt { max-width: 70% }
-    max-width: 70%;
+  .about-break { display: unset }
-  }
+  .about-buttons { flex-direction: column }
-
-  .about-break {
-    display: unset;
-  }
-
-  .about-buttons {
-    flex-direction: column;
-  }
 }

tsconfig.json

@@ -1,8 +1,6 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": ["src/**/*", "**/**.d.ts", "pagefind.ts"],
   "compilerOptions": {
-    "lib": ["es2023"],
     "plugins": [
       {
         "name": "@astrojs/ts-plugin"
@@ -11,25 +9,32 @@
     "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"],
+      "@/*": [
-      "@icons/*": ["./src/icons/*"],
+        "./src/*"
-      "@components/*": ["./src/components/*"],
+      ],
-      "@layouts/*": ["./src/layouts/*"],
+      "@config/*": [
-      "@styles/*": ["./src/styles/*"],
+        "./src/config/*"
-      "@_types": ["./src/config/_types/index.ts"],
+      ],
-      "@_types/*": ["./src/config/_types/*"]
+      "@icons": [
-    },
+        "./src/components/icons.tsx"
-    "types": ["astro/client"]
+      ],
+      "@icons/*": [
+        "./src/icons/*"
+      ],
+      "@components/*": [
+        "./src/components/*"
+      ],
+      "@layouts/*": [
+        "./src/layouts/*"
+      ],
+      "@styles/*": [
+        "./src/styles/*"
+      ]
+    }
   }
 }