initial commit

src/components/Collapsible.tsx

@@ -0,0 +1,18 @@
+import { Collapsible } from "@ark-ui/solid";
+import type { Component, JSX } from "solid-js";
+import { CaretCircleRight } from "@icons";
+
+export const DocsCollapsible: Component<{
+  title: string;
+  children: JSX.Element;
+}> = props => {
+  return (
+    <Collapsible.Root>
+      <Collapsible.Trigger>
+        <CaretCircleRight />
+        {props.title}
+      </Collapsible.Trigger>
+      <Collapsible.Content>{props.children}</Collapsible.Content>
+    </Collapsible.Root>
+  );
+};

src/components/Header.astro

@@ -0,0 +1,66 @@
+---
+import { ThemeSelect } from "@components/hooks/ThemeSwitch";
+import { generateTypeData } from "@config/io/generateTypeData";
+import Nav from "@components/navigation/sidebars/Nav.astro";
+import TOC from "@components/navigation/sidebars/TOC.astro";
+import type { TypeTOC } from "./navigation/sidebars/types";
+import Search from "./navigation/Search.astro";
+
+const routes = await generateTypeData();
+
+const url = Astro.url.pathname.split("/");
+const currentClass = url[4];
+const currentData = routes.find(
+  item => item.name === currentClass
+);
+
+const data = currentData?.data;
+const tocFunctions =
+  data?.functions?.map(item => item.name) || null;
+
+const propsKeys = data?.properties
+  ? Object.keys(data.properties)
+  : null;
+const signalKeys = data?.signals
+  ? Object.keys(data.signals)
+  : null;
+const variantKeys = data?.variants
+  ? Object.keys(data.variants)
+  : null;
+
+let sidebarData: TypeTOC | undefined = {
+  properties: propsKeys,
+  functions: tocFunctions,
+  signals: signalKeys,
+  variants: variantKeys,
+};
+
+if (!data) {
+  sidebarData = undefined;
+}
+
+const { headings } = Astro.props;
+---
+<div class="header">
+  <div class="header-item header-left">
+    <h3 class="header-title">
+      <a href="/">Quickshell</a>
+    </h3>
+    {url.length > 2 ?
+      <Nav mobile={true}/>
+    : null}
+    <div class="spacer-mobile">|</div>
+    <h3 class="header-title mobile">
+      <a href="/">Quickshell</a>
+    </h3>
+  </div>
+  <div class="header-item header-right">
+    <Search/>
+    <div class="spacer-desktop">|</div>
+    <ThemeSelect client:load />
+    <div class="spacer-mobile">|</div>
+    {url.length > 2 ?
+      <TOC headings={headings} types={sidebarData} mobile={true}/>
+    : null}
+  </div>
+</div>

src/components/MD_Title.tsx

@@ -0,0 +1,30 @@
+import {
+  type ParentComponent,
+  onMount,
+  createSignal,
+  onCleanup,
+} from "solid-js";
+import { Hashtag } from "@icons";
+
+const MD_Title: ParentComponent<{ titleVar: number }> = props => {
+  const [_, setMounted] = createSignal<boolean>(false);
+
+  onMount(() => {
+    setMounted(true);
+    onCleanup(() => {
+      setMounted(false);
+    });
+  });
+
+  return (
+    <div class={`heading heading-${props.titleVar}`}>
+      <span class="heading-hashtag">
+        <Hashtag />
+      </span>
+      {props.children}
+      <hr />
+    </div>
+  );
+};
+
+export default MD_Title;

src/components/hooks/CreateCopyButtons.astro

@@ -0,0 +1,52 @@
+---
+
+---
+
+<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()}`;
+          navigator.clipboard.writeText(link);
+          heading.classList.toggle("copied")
+          setTimeout(() => heading.classList.remove("copied"), 1000);
+        }
+      }
+    }
+  }
+</script>

src/components/hooks/CreateQMLCodeButtons.astro

@@ -0,0 +1,107 @@
+---
+
+---
+<script>
+  const qtRegExp = /QT_(\w+)/g
+  const qsRegExp = /QS_(\w+)/g
+  setTimeout(() =>{
+  const blocks = document.querySelectorAll("pre")
+  if (blocks.length > 0) {
+    blocks.forEach((block) => {
+      const content = block.textContent
+      const elements = block.querySelectorAll("span")
+      const classElements:HTMLSpanElement[] = [];
+      if (elements.length === 0) {
+        console.log("NO SPAN ELEMENTS FOUND")
+      }
+
+      elements.forEach(element => {
+        const isClassColored = element.style.cssText === "color: rgb(255, 203, 107);"
+        const isSignal = element.innerText.trim().startsWith("on")
+        const qualifier = isClassColored && !isSignal
+
+        if (qualifier) {
+          const dotSibling = element.nextSibling
+          const isSplit = dotSibling?.textContent === "."
+
+          if (isSplit) {
+            let newInnerText = element.innerText + dotSibling.textContent + dotSibling.nextSibling?.textContent
+
+            if (dotSibling.nextSibling) {
+              dotSibling.nextSibling.textContent !== " {"
+                ? dotSibling.nextSibling.remove()
+                : null
+            }
+
+            dotSibling.remove()
+            element.innerText = newInnerText
+          }
+          classElements.push(element)
+        }
+      })
+
+      if (content) {
+        const qtMatch = [...content.matchAll(qtRegExp)]
+        const qsMatch = [...content.matchAll(qsRegExp)]
+
+        if (qtMatch.length > 0) {
+          for (const qtMatching of qtMatch) {
+            const newATag = document.createElement("a")
+            const qtBelongs = qtMatching[0].split("_")[1].replace("11", "-") || null
+            const qtClass = qtMatching[1].split("_")[1]
+            const link = `https://doc.qt.io/qt-6/qml-${qtBelongs ? `${qtBelongs}-${qtClass.toLowerCase()}` : "qtquick-" + qtClass.toLowerCase()}.html`
+            newATag.target = "_blank"
+            newATag.href = link
+            newATag.innerText = qtClass
+            const homeElement = classElements.find(item => {
+              const spacing = item.innerText.replace(qtMatching[0], "")
+              if (item.innerText.trim() === qtMatching[0].trim()){
+                newATag.innerText = spacing + qtClass
+                return true
+              }
+            })
+            if (homeElement) {
+              homeElement.innerText = ""
+              homeElement.appendChild(newATag)
+            }
+          }
+        }
+        if (qsMatch.length > 0) {
+          for (const qsMatching of qsMatch) {
+            const newATag = document.createElement("a")
+
+            const qsBelongs = qsMatching[0].split("_")[1].replace("00", ".") || null
+            const qsClass = qsMatching[1].split("_")[1]
+
+            const link = `/docs/types/${qsBelongs ? `${qsBelongs}/${qsClass}` : qsClass}`
+            newATag.target = "_blank"
+            newATag.href = link
+
+            const homeElement = classElements.find(item => {
+              const existingItem = item.innerText.trim()
+              const matchingItem = qsMatching[0].trim()
+              const spacing = item.innerText.replace(existingItem, "")
+
+              if (existingItem === matchingItem) {
+                newATag.innerText = spacing + qsClass
+                return true
+              }
+            })
+
+            if (homeElement) {
+              homeElement.innerText = ""
+
+              if (homeElement.nextSibling) {
+                homeElement.nextSibling.textContent !== " {"
+                  ? homeElement.nextSibling.textContent = ""
+                  : null
+              }
+              homeElement.appendChild(newATag)
+            }
+          }
+        }
+      }
+    });
+  }
+  },3000)
+</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('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,101 @@
+import {
+  createSignal,
+  createEffect,
+  onCleanup,
+  onMount,
+  type VoidComponent,
+} from "solid-js";
+import { Sun, Moon } from "@icons";
+
+interface ThemeProps {
+  theme: "light" | "dark";
+  system: "light" | "dark";
+}
+
+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">
+      {(mounted() && currentTheme().theme === "light") ||
+        currentTheme().system === "light" ? (
+        <Sun class="theme-sun" />
+      ) : (
+        <Moon class="theme-moon" />
+      )}
+    </div>
+  );
+};

src/components/hooks/TransformLinks.astro

@@ -0,0 +1,66 @@
+---
+---
+<script>
+  import { getQMLTypeLinkObject, getQMLTypeLink, getIconForLink } from "@config/io/helpers"
+
+  const detailsData = document.getElementsByTagName("p")
+  const innerItems = document.getElementsByClassName("typedata-details")
+  if (detailsData) {
+    for (const details of detailsData) {
+      const linkRegex = /TYPE99(\w+.)99TYPE/g
+      const mtypeExists = details.textContent?.match(linkRegex)
+
+      if (!mtypeExists || !details.textContent) {
+        continue;
+      }
+
+      const linkMatch = [...details.textContent.matchAll(linkRegex)]
+      let textWithLinks = details.textContent;
+      for (const matching of linkMatch) {
+        if (details.textContent.indexOf(matching[0]) === -1){
+          continue
+        }
+        const linkObject = getQMLTypeLinkObject(matching[1]);
+        const link = getQMLTypeLink(linkObject);
+        const icon = linkObject.mtype ? getIconForLink(linkObject.mtype, false) : null;
+
+        // for signal
+        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>`;
+        textWithLinks = textWithLinks.replace(matching[0], newLink)
+      }
+      details.innerHTML = textWithLinks
+    }
+  }
+  if (innerItems){
+    for (const innerItem of innerItems){
+      const linkRegex = /TYPE99(\w+.)99TYPE/g
+      const listItems = innerItem.getElementsByTagName("li")
+
+      for (const li of listItems){
+        const mtypeExists = li.textContent?.match(linkRegex)
+        if (!mtypeExists || !li.textContent){
+          continue
+        }
+        const linkMatch = [...li.textContent.matchAll(linkRegex)]
+        let textWithLinks = li.textContent;
+        for (const matching of linkMatch) {
+          if (li.textContent.indexOf(matching[0]) === -1){
+            continue
+          }
+          const linkObject = getQMLTypeLinkObject(matching[1]);
+          const link = getQMLTypeLink(linkObject);
+          const icon = linkObject.mtype ? getIconForLink(linkObject.mtype, false) : null;
+
+          // for signal
+          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>`;
+          textWithLinks = textWithLinks.replace(matching[0], newLink)
+        }
+        li.innerHTML = textWithLinks
+      }
+    }
+  }
+</script>

src/components/hooks/TransformMDCodeblocks.astro

@@ -0,0 +1,21 @@
+---
+---
+<script>
+  import { codeToHtml } from "shiki";
+  const injectedMd = document.getElementById("injectedMd");
+  if (injectedMd) {
+    const preElements = document.getElementsByTagName("pre");
+    for (const pre of preElements) {
+      if (pre.textContent){
+        const innerText = pre.innerText;
+        pre.outerHTML =
+          await codeToHtml(
+            innerText,
+            {
+              lang: "qml", "theme":"material-theme-ocean"
+            }
+          );
+      }
+    }
+  }
+</script>

src/components/icons.tsx

@@ -0,0 +1,477 @@
+import type { VoidComponent } from "solid-js";
+
+export const XToMenu: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      class={props.class}
+    >
+      <title>Close Menu</title>
+      <g
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-width="2"
+      >
+        <path d="M5 5L12 12L19 5">
+          <animate
+            fill="freeze"
+            attributeName="d"
+            dur="0.4s"
+            values="M5 5L12 12L19 5;M5 5L12 5L19 5"
+          />
+        </path>
+        <path d="M12 12H12">
+          <animate
+            fill="freeze"
+            attributeName="d"
+            dur="0.4s"
+            values="M12 12H12;M5 12H19"
+          />
+        </path>
+        <path d="M5 19L12 12L19 19">
+          <animate
+            fill="freeze"
+            attributeName="d"
+            dur="0.4s"
+            values="M5 19L12 12L19 19;M5 19L12 19L19 19"
+          />
+        </path>
+      </g>
+    </svg>
+  );
+};
+
+export const MenuToX: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      class={props.class}
+    >
+      <title>Open Menu</title>
+      <g
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-width="2"
+      >
+        <path d="M5 5L12 5L19 5">
+          <animate
+            fill="freeze"
+            attributeName="d"
+            dur="0.4s"
+            values="M5 5L12 5L19 5;M5 5L12 12L19 5"
+          />
+        </path>
+        <path d="M5 12H19">
+          <animate
+            fill="freeze"
+            attributeName="d"
+            dur="0.4s"
+            values="M5 12H19;M12 12H12"
+          />
+        </path>
+        <path d="M5 19L12 19L19 19">
+          <animate
+            fill="freeze"
+            attributeName="d"
+            dur="0.4s"
+            values="M5 19L12 19L19 19;M5 19L12 12L19 19"
+          />
+        </path>
+      </g>
+    </svg>
+  );
+};
+
+export const Sun: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Light</title>
+      <path
+        fill="currentColor"
+        d="M120 40V16a8 8 0 0 1 16 0v24a8 8 0 0 1-16 0m72 88a64 64 0 1 1-64-64a64.07 64.07 0 0 1 64 64m-16 0a48 48 0 1 0-48 48a48.05 48.05 0 0 0 48-48M58.34 69.66a8 8 0 0 0 11.32-11.32l-16-16a8 8 0 0 0-11.32 11.32Zm0 116.68l-16 16a8 8 0 0 0 11.32 11.32l16-16a8 8 0 0 0-11.32-11.32M192 72a8 8 0 0 0 5.66-2.34l16-16a8 8 0 0 0-11.32-11.32l-16 16A8 8 0 0 0 192 72m5.66 114.34a8 8 0 0 0-11.32 11.32l16 16a8 8 0 0 0 11.32-11.32ZM48 128a8 8 0 0 0-8-8H16a8 8 0 0 0 0 16h24a8 8 0 0 0 8-8m80 80a8 8 0 0 0-8 8v24a8 8 0 0 0 16 0v-24a8 8 0 0 0-8-8m112-88h-24a8 8 0 0 0 0 16h24a8 8 0 0 0 0-16"
+      />
+    </svg>
+  );
+};
+
+export const Moon: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Dark</title>
+      <path
+        fill="currentColor"
+        d="M233.54 142.23a8 8 0 0 0-8-2a88.08 88.08 0 0 1-109.8-109.8a8 8 0 0 0-10-10a104.84 104.84 0 0 0-52.91 37A104 104 0 0 0 136 224a103.1 103.1 0 0 0 62.52-20.88a104.84 104.84 0 0 0 37-52.91a8 8 0 0 0-1.98-7.98m-44.64 48.11A88 88 0 0 1 65.66 67.11a89 89 0 0 1 31.4-26A106 106 0 0 0 96 56a104.11 104.11 0 0 0 104 104a106 106 0 0 0 14.92-1.06a89 89 0 0 1-26.02 31.4"
+      />
+    </svg>
+  );
+};
+
+export const ShevronSmallDown: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      class={props.class}
+    >
+      <title>Open</title>
+      <g transform="rotate(-90 12 12)">
+        <path
+          stroke="currentColor"
+          stroke-dasharray="8"
+          stroke-dashoffset="8"
+          stroke-linecap="round"
+          stroke-width="2"
+          d="M9 12L14 7M9 12L14 17"
+          fill="currentColor"
+        >
+          <animate
+            fill="freeze"
+            attributeName="stroke-dashoffset"
+            dur="0.3s"
+            values="8;0"
+          />
+        </path>
+      </g>
+    </svg>
+  );
+};
+
+export const CaretCircleRight: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Open</title>
+      <path
+        fill="currentColor"
+        d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m29.66-93.66a8 8 0 0 1 0 11.32l-40 40a8 8 0 0 1-11.32-11.32L140.69 128l-34.35-34.34a8 8 0 0 1 11.32-11.32Z"
+      />
+    </svg>
+  );
+};
+
+export const Clipboard: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Copy code</title>
+      <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>
+  );
+};
+
+export const Hashtag: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Copy link</title>
+      <path
+        fill="currentColor"
+        d="M224 90h-51l8.89-48.93a6 6 0 1 0-11.8-2.14L160.81 90H109l8.89-48.93a6 6 0 0 0-11.8-2.14L96.81 90H48a6 6 0 0 0 0 12h46.63l-9.46 52H32a6 6 0 0 0 0 12h51l-8.9 48.93a6 6 0 0 0 4.83 7A5.6 5.6 0 0 0 80 222a6 6 0 0 0 5.89-4.93l9.3-51.07H147l-8.89 48.93a6 6 0 0 0 4.83 7a5.6 5.6 0 0 0 1.08.1a6 6 0 0 0 5.89-4.93l9.28-51.1H208a6 6 0 0 0 0-12h-46.63l9.46-52H224a6 6 0 0 0 0-12m-74.83 64h-51.8l9.46-52h51.8Z"
+      />
+    </svg>
+  );
+};
+
+export const Tag: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Go to</title>
+      <path
+        fill="currentColor"
+        d="M246.66 123.56L201 55.13A15.94 15.94 0 0 0 187.72 48H40a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h147.72a16 16 0 0 0 13.28-7.12l45.63-68.44a8 8 0 0 0 .03-8.88M187.72 192H40V64h147.72l42.66 64Z"
+      />
+    </svg>
+  );
+};
+
+export const Subtitles: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Go to</title>
+      <path
+        fill="currentColor"
+        d="M224 48H32a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16m0 144H32V64h192zM48 136a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16H56a8 8 0 0 1-8-8m160 0a8 8 0 0 1-8 8h-96a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8m-48 32a8 8 0 0 1-8 8H56a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8m48 0a8 8 0 0 1-8 8h-16a8 8 0 0 1 0-16h16a8 8 0 0 1 8 8"
+      />
+    </svg>
+  );
+};
+
+export const Ruler: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Go to</title>
+      <path
+        fill="currentColor"
+        d="m235.32 73.37l-52.69-52.68a16 16 0 0 0-22.63 0L20.68 160a16 16 0 0 0 0 22.63l52.69 52.68a16 16 0 0 0 22.63 0L235.32 96a16 16 0 0 0 0-22.63M84.68 224L32 171.31l32-32l26.34 26.35a8 8 0 0 0 11.32-11.32L75.31 128L96 107.31l26.34 26.35a8 8 0 0 0 11.32-11.32L107.31 96L128 75.31l26.34 26.35a8 8 0 0 0 11.32-11.32L139.31 64l32-32L224 84.69Z"
+      />
+    </svg>
+  );
+};
+
+export const RoundBrackets: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Go to</title>
+      <path
+        fill="currentColor"
+        d="M40 128c0 58.29 34.67 80.25 36.15 81.16a8 8 0 0 1-8.27 13.7C66.09 221.78 24 195.75 24 128s42.09-93.78 43.88-94.86a8 8 0 0 1 8.26 13.7C74.54 47.83 40 69.82 40 128m148.12-94.86a8 8 0 0 0-8.27 13.7C181.33 47.75 216 69.71 216 128s-34.67 80.25-36.12 81.14a8 8 0 0 0 8.24 13.72C189.91 221.78 232 195.75 232 128s-42.09-93.78-43.88-94.86"
+      />
+    </svg>
+  );
+};
+
+export const PowerCord: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Go to</title>
+      <path
+        fill="currentColor"
+        d="M149.66 138.34a8 8 0 0 0-11.32 0L120 156.69L99.31 136l18.35-18.34a8 8 0 0 0-11.32-11.32L88 124.69l-18.34-18.35a8 8 0 0 0-11.32 11.32l6.35 6.34l-23.32 23.31a32 32 0 0 0 0 45.26l5.38 5.37l-28.41 28.4a8 8 0 0 0 11.32 11.32l28.4-28.41l5.37 5.38a32 32 0 0 0 45.26 0L132 191.31l6.34 6.35a8 8 0 0 0 11.32-11.32L131.31 168l18.35-18.34a8 8 0 0 0 0-11.32m-52.29 65a16 16 0 0 1-22.62 0l-22.06-22.09a16 16 0 0 1 0-22.62L76 135.31L120.69 180Zm140.29-185a8 8 0 0 0-11.32 0l-28.4 28.41l-5.37-5.38a32.05 32.05 0 0 0-45.26 0L124 64.69l-6.34-6.35a8 8 0 0 0-11.32 11.32l80 80a8 8 0 0 0 11.32-11.32l-6.35-6.34l23.32-23.31a32 32 0 0 0 0-45.26l-5.38-5.37l28.41-28.4a8 8 0 0 0 0-11.32m-34.35 79L180 120.69L135.31 76l23.32-23.31a16 16 0 0 1 22.62 0l22.06 22a16 16 0 0 1 0 22.68Z"
+      />
+    </svg>
+  );
+};
+
+export const FourDiamonds: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Go to</title>
+      <path
+        fill="currentColor"
+        d="M122.34 109.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 0 11.32ZM128 35.31L156.69 64L128 92.69L99.31 64Zm5.66 111a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 0 11.32l40 40a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32ZM128 220.69L99.31 192L128 163.31L156.69 192Zm109.66-98.35l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 0 11.32l40 40a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32M192 156.69L163.31 128L192 99.31L220.69 128Zm-82.34-34.35l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 0 11.32l40 40a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32M64 156.69L35.31 128L64 99.31L92.69 128Z"
+      />
+    </svg>
+  );
+};
+
+export const Flag: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Flags</title>
+      <path
+        fill="currentColor"
+        d="M42.76 50A8 8 0 0 0 40 56v168a8 8 0 0 0 16 0v-44.23c26.79-21.16 49.87-9.75 76.45 3.41c16.4 8.11 34.06 16.85 53 16.85c13.93 0 28.54-4.75 43.82-18a8 8 0 0 0 2.76-6V56a8 8 0 0 0-13.27-6c-28 24.23-51.72 12.49-79.21-1.12C111.07 34.76 78.78 18.79 42.76 50M216 172.25c-26.79 21.16-49.87 9.74-76.45-3.41c-25-12.35-52.81-26.13-83.55-8.4V59.79c26.79-21.16 49.87-9.75 76.45 3.4c25 12.35 52.82 26.13 83.55 8.4Z"
+      />
+    </svg>
+  );
+};
+
+export const ReturnKey: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Return</title>
+      <path
+        fill="currentColor"
+        d="M184 104v32a8 8 0 0 1-8 8H99.31l10.35 10.34a8 8 0 0 1-11.32 11.32l-24-24a8 8 0 0 1 0-11.32l24-24a8 8 0 0 1 11.32 11.32L99.31 128H168v-24a8 8 0 0 1 16 0m48-48v144a16 16 0 0 1-16 16H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16m-16 144V56H40v144z"
+      />
+    </svg>
+  );
+};
+
+export const ArrowRightElbow: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Return</title>
+      <path
+        fill="currentColor"
+        d="m221.66 181.66l-48 48a8 8 0 0 1-11.32-11.32L196.69 184H72a8 8 0 0 1-8-8V32a8 8 0 0 1 16 0v136h116.69l-34.35-34.34a8 8 0 0 1 11.32-11.32l48 48a8 8 0 0 1 0 11.32"
+      />
+    </svg>
+  );
+};
+
+export const ArrowLeftSimple: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Return</title>
+      <path
+        fill="currentColor"
+        d="M224 128a8 8 0 0 1-8 8H59.31l58.35 58.34a8 8 0 0 1-11.32 11.32l-72-72a8 8 0 0 1 0-11.32l72-72a8 8 0 0 1 11.32 11.32L59.31 120H216a8 8 0 0 1 8 8"
+      />
+    </svg>
+  );
+};
+
+export const Article: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 256 256"
+      class={props.class}
+    >
+      <title>Types</title>
+      <path
+        fill="currentColor"
+        d="M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16m0 160H40V56h176zM184 96a8 8 0 0 1-8 8H80a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8m0 32a8 8 0 0 1-8 8H80a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8m0 32a8 8 0 0 1-8 8H80a8 8 0 0 1 0-16h96a8 8 0 0 1 8 8"
+      />
+    </svg>
+  );
+};
+
+export const LoadingSpinner: VoidComponent<{
+  class?: string;
+}> = props => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      class={props.class}
+    >
+      <title>Loading</title>
+      <path
+        fill="currentColor"
+        d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"
+      >
+        <animateTransform
+          attributeName="transform"
+          dur="1.8s"
+          repeatCount="indefinite"
+          type="rotate"
+          values="0 12 12;360 12 12"
+        />
+      </path>
+    </svg>
+  );
+};

src/components/navigation/Search.astro

@@ -0,0 +1,7 @@
+---
+import SearchComponent from "./search";
+---
+
+<div class="search-wrapper">
+  <SearchComponent client:only={"solid-js"}/>
+</div>

src/components/navigation/search/SearchModal.tsx

@@ -0,0 +1,53 @@
+import { For, type Component } from "solid-js";
+import type { SearchResult } from "./types";
+import {
+  getIconForLink,
+  getQMLTypeLink,
+  getQMLTypeLinkObject,
+} from "@src/config/io/helpers";
+
+const SearchModal: Component<{
+  results: SearchResult[];
+}> = props => {
+  const { results } = props;
+  const linkRegex = /TYPE99(\w+.)99TYPE/g;
+
+  return (
+    <div
+      id="search-modal"
+      class="search-output"
+    >
+      <For each={results}>
+        {result => {
+          let excerpt = result.excerpt;
+          const linkMatch = [...excerpt.matchAll(linkRegex)];
+          for (const match of linkMatch) {
+            const unparsed = match[1];
+            const linkObject = getQMLTypeLinkObject(unparsed);
+            const linkParsed = getQMLTypeLink(linkObject);
+            const icon = linkObject.mtype
+              ? getIconForLink(linkObject.mtype, false)
+              : "";
+            const bracketString = getIconForLink("func", false);
+            const newString = `<span class="type${linkObject.mtype}-link typedata-link">${icon}<a href=${linkParsed}>${linkObject.mname || linkObject.name}</a>${linkObject.mtype === "signal" ? bracketString : ""}</span>`;
+            excerpt = excerpt.replace(match[0], newString);
+          }
+          excerpt = `${excerpt}...`;
+          return (
+            <div class="search-output_item">
+              <h3 class="search-output_heading">
+                <a href={result.url}>{result.meta.title}</a>
+              </h3>
+              <section
+                class="search-output_excerpt"
+                innerHTML={excerpt}
+              />
+            </div>
+          );
+        }}
+      </For>
+    </div>
+  );
+};
+
+export default SearchModal;

src/components/navigation/search/index.tsx

@@ -0,0 +1,59 @@
+import {
+  createResource,
+  createSignal,
+  type Component,
+} from "solid-js";
+
+import type { SearchResult } from "./types";
+import SearchModal from "./SearchModal";
+
+const pagefind = await import("@dist/pagefind/pagefind.js");
+pagefind.init();
+
+async function PagefindSearch(query: string) {
+  const search = await pagefind.search(query);
+  const resultdata: SearchResult[] = [];
+  for (const result of search.results) {
+    const data = await result.data();
+    resultdata.push(data);
+  }
+  return resultdata;
+}
+
+const SearchComponent: Component = () => {
+  let modal!: HTMLElement;
+  const [query, setQuery] = createSignal("");
+  const [results, { refetch }] = createResource(
+    query,
+    PagefindSearch
+  );
+
+  function handleSearch(value: string) {
+    setQuery(value);
+    refetch();
+    console.log(results());
+  }
+
+  return (
+    <div class="search">
+      <input
+        id="search-input"
+        type="text"
+        role="searchbox"
+        incremental
+        value={query()}
+        placeholder="Search"
+        onChange={e => handleSearch(e.target.value)}
+      //onfocusout={() => setQuery("")}
+      />{" "}
+      {!results.loading && results() && results()!.length > 0 ? (
+        <SearchModal
+          results={results()!}
+          ref={modal}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export default SearchComponent;

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

@@ -0,0 +1,15 @@
+interface SearchResult {
+  url: string;
+  excerpt: string;
+  meta: {
+    title: string;
+    image?: string;
+  };
+  sub_results: {
+    title: string;
+    url: string;
+    excerpt: string;
+  }[];
+}
+
+export type { SearchResult }

src/components/navigation/sidebars/Nav.astro

@@ -0,0 +1,31 @@
+---
+import { generateTypeData } from "@config/io/generateTypeData";
+import { groupRoutes } from "@config/io/helpers";
+import NavComponent from "./nav";
+
+const routes = await generateTypeData();
+const groupedRoutes = groupRoutes(routes);
+
+const url = Astro.url.pathname.split("/");
+const currentRoute = url[2];
+const currentModule = url[3];
+const currentClass = url[4];
+
+const treeProps = {
+  items: groupedRoutes,
+  currentRoute: currentRoute,
+  currentModule: currentModule,
+  currentClass: currentClass,
+};
+
+const { mobile } = Astro.props;
+---
+
+<aside class=`nav-wrapper${mobile ? "-mobile" : ""}`>
+  <NavComponent
+    routes={groupedRoutes}
+    tree={treeProps}
+    mobile={mobile}
+    client:idle
+  />
+</aside>

src/components/navigation/sidebars/TOC.astro

@@ -0,0 +1,21 @@
+---
+import TableOfContents from "./toc";
+import type { ConfigHeading, TypeTOC } from "./types.d.ts";
+
+export interface Props {
+  headings?: ConfigHeading[];
+  types?: TypeTOC;
+  mobile: boolean;
+}
+
+const { headings, types, mobile } = Astro.props;
+---
+
+<div class=`toc-wrapper${mobile ? "-mobile":""}`>
+  <TableOfContents
+    config={headings}
+    type={types}
+    mobile={mobile}
+    client:idle
+  />
+</div>

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

@@ -0,0 +1,124 @@
+import { type Component, Index, For } from "solid-js";
+import { Accordion } from "@ark-ui/solid";
+
+import { ShevronSmallDown } from "@icons";
+import type { TreeProps } from "../types";
+
+export const Tree: Component<TreeProps> = props => {
+  const { currentRoute, currentModule, currentClass, items } =
+    props;
+
+  const typeKeys = items!.types && Object.keys(items!.types);
+
+  const tutorials =
+    items!.tutorials && items!.tutorials
+      ? items!.tutorials.configuration
+      : null;
+
+  return (
+    <nav class="navtree">
+      <Accordion.Root
+        defaultValue={
+          currentRoute === "types" ? ["Types"] : ["Configuration"]
+        }
+        collapsible
+        multiple
+      >
+        <Accordion.Item value={"Configuration"}>
+          <Accordion.ItemTrigger>
+            <Accordion.ItemIndicator>
+              <ShevronSmallDown class={"nav-shevron"} />
+            </Accordion.ItemIndicator>
+            <p>
+              <a href={"/docs/configuration"}>Configuration</a>
+            </p>
+          </Accordion.ItemTrigger>
+          <Accordion.ItemContent>
+            <For each={tutorials}>
+              {item => (
+                <div
+                  class={`arktree-item ${currentModule === item.type ? "__current-type-doc" : ""}`}
+                >
+                  <a href={`/docs/configuration/${item.type}`}>
+                    {item.name}
+                  </a>
+                </div>
+              )}
+            </For>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+        <Accordion.Item value={"Types"}>
+          <Accordion.ItemTrigger>
+            <Accordion.ItemIndicator>
+              <ShevronSmallDown class={"nav-shevron"} />
+            </Accordion.ItemIndicator>
+            <p>
+              <a href={"/docs/types"}>Type Definitions</a>
+            </p>
+          </Accordion.ItemTrigger>
+          <Accordion.ItemContent>
+            <Index each={typeKeys}>
+              {typeKey => {
+                return (
+                  <Accordion.Root
+                    defaultValue={
+                      currentModule === typeKey()
+                        ? [typeKey()]
+                        : [""]
+                    }
+                    multiple
+                    collapsible
+                  >
+                    <Accordion.Item
+                      value={typeKey()}
+                      id={typeKey()}
+                      class={
+                        typeKey() === currentModule
+                          ? "__current-type-doc"
+                          : ""
+                      }
+                    >
+                      <Accordion.ItemTrigger
+                        id={`${typeKey()}:button`}
+                      >
+                        <Accordion.ItemIndicator>
+                          <ShevronSmallDown
+                            class={"nav-shevron"}
+                          />
+                        </Accordion.ItemIndicator>
+                        <p>
+                          <a href={`/docs/types/${typeKey()}`}>
+                            {typeKey()}
+                          </a>
+                        </p>
+                      </Accordion.ItemTrigger>
+                      <Accordion.ItemContent>
+                        <For each={items!.types[typeKey()]}>
+                          {submodule => (
+                            <div
+                              class={
+                                currentClass === submodule.name
+                                  ? "__current-type-doc"
+                                  : ""
+                              }
+                            >
+                              <a
+                                href={`/docs/types/${submodule.type}/${submodule.name}`}
+                              >
+                                {submodule.name}
+                              </a>
+                            </div>
+                          )}
+                        </For>
+                      </Accordion.ItemContent>
+                    </Accordion.Item>
+                  </Accordion.Root>
+                );
+              }}
+            </Index>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+      </Accordion.Root>
+    </nav>
+  );
+};

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

@@ -0,0 +1,52 @@
+import { createSignal, type Component } from "solid-js";
+
+import { LoadingSpinner, MenuToX, XToMenu } from "@icons";
+import { Tree } from "./Tree";
+import type { NavProps } from "../types";
+
+const NavComponent: Component<NavProps> = props => {
+  const [open, setOpen] = createSignal<boolean>(false);
+  const { tree, mobile, routes } = props;
+
+  if (!tree) {
+    return <LoadingSpinner />;
+  }
+
+  function toggle(e: MouseEvent) {
+    e.preventDefault();
+    setOpen(!open());
+  }
+
+  if (!mobile) {
+    return (
+      <Tree
+        currentRoute={tree.currentRoute}
+        currentModule={tree.currentModule || null}
+        currentClass={tree.currentClass || null}
+        items={routes}
+      />
+    );
+  }
+
+  return (
+    <div class="nav-toggle">
+      <div onclick={e => toggle(e)}>
+        {open() ? (
+          <MenuToX class="nav-icon" />
+        ) : (
+          <XToMenu class="nav-icon" />
+        )}
+      </div>
+      <div class={`nav-items ${open() ? "shown" : ""}`}>
+        <Tree
+          currentRoute={tree.currentRoute}
+          currentModule={tree.currentModule}
+          currentClass={tree.currentClass}
+          items={routes}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default NavComponent;

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

@@ -0,0 +1,33 @@
+import { For, type Component } from "solid-js";
+
+import type { ConfigTOC } from "../types";
+
+export const Heading: Component<{
+  heading: ConfigTOC;
+  index: number;
+}> = props => {
+  const { heading, index } = props;
+
+  return (
+    <li class={`toc_heading toc_heading-${index}`}>
+      <a
+        class="toc_a"
+        href={`#${heading.slug}`}
+      >
+        {heading.text}
+      </a>
+      {heading.subheadings.length > 0 && (
+        <ul>
+          <For each={heading.subheadings}>
+            {subheading => (
+              <Heading
+                heading={subheading}
+                index={subheading.depth}
+              />
+            )}
+          </For>
+        </ul>
+      )}
+    </li>
+  );
+};

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

@@ -0,0 +1,111 @@
+import { type Component, For } from "solid-js";
+
+import type { TypeTOC, ConfigTOC } from "../types";
+import {
+  LoadingSpinner,
+  Tag,
+  RoundBrackets,
+  PowerCord,
+  FourDiamonds,
+} from "@icons";
+import { Heading } from "./Heading";
+
+export const Table: Component<{
+  typeTOC?: TypeTOC;
+  configTOC?: ConfigTOC[];
+}> = props => {
+  const { typeTOC, configTOC } = props;
+
+  if (configTOC) {
+    return (
+      <div class="toc-content">
+        <p>Contents</p>
+        <For each={configTOC}>
+          {heading => (
+            <Heading
+              heading={heading}
+              index={0}
+            />
+          )}
+        </For>
+      </div>
+    );
+  }
+
+  if (!typeTOC) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <nav class="toc-content">
+      {typeTOC.properties ? (
+        <ul class="types-list props-list">
+          <For each={typeTOC.properties}>
+            {prop => (
+              <li class="types-item props-item">
+                <Tag />
+                <a
+                  class="type-anchor"
+                  href={`#${prop}`}
+                >
+                  {prop}
+                </a>
+              </li>
+            )}
+          </For>
+        </ul>
+      ) : null}
+      {typeTOC.functions ? (
+        <ul class="types-list funcs-list">
+          <For each={typeTOC.functions}>
+            {func => (
+              <li class="types-item func-item">
+                <RoundBrackets />
+                <a
+                  class="type-anchor"
+                  href={`#${func}`}
+                >
+                  {func}
+                </a>
+              </li>
+            )}
+          </For>
+        </ul>
+      ) : null}
+      {typeTOC.signals ? (
+        <ul class="types-list signals-list">
+          <For each={typeTOC.signals}>
+            {signal => (
+              <li class="types-item signals-item">
+                <PowerCord />
+                <a
+                  class="type-anchor"
+                  href={`#${signal}`}
+                >
+                  {signal}
+                </a>
+              </li>
+            )}
+          </For>
+        </ul>
+      ) : null}
+      {typeTOC.variants ? (
+        <ul class="types-list vars-list">
+          <For each={typeTOC.variants}>
+            {variant => (
+              <li class="types-item vars-item">
+                <FourDiamonds />
+                <a
+                  class="type-anchor"
+                  href={`#${variant}`}
+                >
+                  {variant}
+                </a>
+              </li>
+            )}
+          </For>
+        </ul>
+      ) : null}
+    </nav>
+  );
+};

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

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

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

@@ -0,0 +1,63 @@
+// Left
+export interface Item {
+  name: string;
+  type: string;
+}
+
+export interface GroupedRoutes {
+  tutorials: { [key: string]: Item[] };
+  types: { [key: string]: Item[] };
+}
+
+export interface TreeProps {
+  items: GroupedRoutes;
+  currentRoute?: string;
+  currentModule: string | null;
+  currentClass: string | null;
+}
+
+export interface NavProps {
+  routes: GroupedRoutes;
+  tree: TreeProps;
+  mobile: boolean;
+}
+
+// Right
+export interface TOCProps {
+  config?: ConfigHeading[];
+  type?: TypeTableProps;
+  mobile: boolean;
+}
+
+// -- Config
+export interface ConfigHeading {
+  slug: string;
+  text: string;
+  depth: number;
+}
+
+export interface ConfigTOC {
+  slug: string;
+  text: string;
+  depth: number;
+  subheadings: ConfigTOC[];
+}
+
+export interface ConfigTableProps {
+  content: {
+    title: string;
+  };
+  headings: ConfigHeading[];
+  frontmatter?: {
+    title: string;
+    description: string;
+  };
+}
+
+// -- Types
+export interface TypeTOC {
+  properties: string[] | null;
+  functions: string[] | null;
+  signals: string[] | null;
+  variants: string[] | null;
+}

src/components/type/Functions.astro

@@ -0,0 +1,67 @@
+---
+import type {
+  QMLTypeLinkObject,
+  QuickshellFunction,
+} from "@config/io/types";
+import {
+  parseMarkdown,
+  getQMLTypeLink,
+} from "@config/io/helpers";
+import { Tag } from "@icons";
+
+export interface Props {
+  funcData: QuickshellFunction[];
+  title: string;
+}
+
+const { funcData, title } = Astro.props;
+---
+<ul class="typedata typefuncs">
+  {
+    funcData.map(item => {
+      const functionParams = item.params.length > 0 ? item.params : null
+      const retTypeLink = getQMLTypeLink(item.ret as unknown as QMLTypeLinkObject)
+      return (
+        <li id={item.name} class="typedata-root typefunc-root">
+          <p class="typedata-name typefunc-name">
+            {item.name}({functionParams
+              ? functionParams.map((itemType, index) => (
+                <span class="typedata-param">{itemType.name}{
+                  index !== functionParams.length - 1
+                    && ", "
+                  }</span>
+                )
+              ) : null})<span class="type-datatype">:&nbsp;<a
+                href={retTypeLink}
+                target="_blank"
+                >{item.ret.name || item.ret.type}</a></span>
+          </p>
+          {
+            item.params.length > 0 ? (
+              <p class="typedata-params typefunc-params">
+                {
+                  item.params.map(param => {
+                    const paramTypeLink = getQMLTypeLink(param.type);
+                    return (
+                      <span class="typedata-param typefunc-param">
+                        <Tag client:idle/>
+                        {param.name}<span class="type-datatype">:&nbsp;<a
+                          href={paramTypeLink}
+                          target="_blank"
+                        >{param.type.name}</a></span>
+                      </span>
+                    )
+                  })
+                }
+              </p>
+            )
+            :null
+          }
+          <section class="typedata-details">
+            <div class="typedata-detailsdata" set:html={parseMarkdown(item.details, title)}/>
+          </section>
+        </li>
+      )
+    })
+  }
+</ul>

src/components/type/Properties.astro

@@ -0,0 +1,83 @@
+---
+import {
+  parseMarkdown,
+  getQMLTypeLink,
+} from "@config/io/helpers";
+import type {
+  QMLTypeLinkObject,
+  QuickshellProps,
+} from "@config/io/types";
+import { Tag, Flag } from "@icons";
+
+export interface Props {
+  propsKeys: string[];
+  propsData: QuickshellProps;
+  title: string;
+}
+
+const { propsKeys, propsData, title } = Astro.props;
+---
+<ul class="typedata typeprops">
+  {
+    propsKeys.map(item => {
+      const propData = propsData[item]
+      let typeLink:string;
+      let linkText:string;
+      const gadget = propData.type.gadget;
+      if (gadget) {
+        typeLink = "#"
+        linkText = `[${Object.keys(gadget).toString()}]`
+      } else {
+        typeLink = getQMLTypeLink(propData.type as unknown as QMLTypeLinkObject)
+        linkText = propData.type.name || propData.type.type
+      }
+      return (
+        <li id={ item } class="typedata-root typeprop-root">
+          <p class="typedata-name typeprop-name">
+            <Tag client:idle/>
+            { item }<span class="type-datatype">:&nbsp;<a
+              href={typeLink}
+              target="_blank"
+              >{ linkText }</a></span>
+          </p>
+          {
+            propData.flags && propData.flags.length > 0 ? (
+              <p class="type-flags">
+                {
+                  propData.flags.map((flag) => {
+                    return (
+                      <span class="type-flag">
+                        <Flag client:idle/>
+                        {flag}
+                      </span>
+                    )
+                  })
+                }
+              </p>
+            ) : null
+          }
+          {
+            gadget ? (
+              <p class="typedata-params typefunc-params">
+                {
+                  Object.keys(gadget).map((key) => {
+                    const gadgetData = gadget[key]
+                    return (
+                      <span class="typedata-param typefunc-param">
+                        <Tag client:idle/>
+                        {key}:<span><a href=`${getQMLTypeLink(gadgetData as unknown as QMLTypeLinkObject)}`>{gadgetData.name}</a></span>
+                      </span>
+                    )
+                  })
+                }
+              </p>
+            ):null
+          }
+          <section class="typedata-details">
+            <div id="injectedMd" class="typedata-detailsdata" set:html={parseMarkdown(propData.details, title)} />
+          </section>
+        </li>
+      )
+    })
+  }
+</ul>

src/components/type/Signals.astro

@@ -0,0 +1,54 @@
+---
+import type { QuickshellSignal } from "@config/io/types";
+import { Tag, PowerCord } from "@icons";
+import { parseMarkdown } from "@config/io/helpers";
+
+export interface Props {
+  signalKeys: string[];
+  signalsData: QuickshellSignal;
+  title: string;
+}
+
+const { signalKeys, signalsData, title } = Astro.props;
+---
+<ul class="typedata typesignals">
+  {
+    signalKeys.map(item => {
+      const signalData = signalsData[item];
+      const paramKeys = signalData.params.length > 0 ? signalData.params.map((param,index) => `${param.name}${index !== signalData.params.length -1 ? ", ":""}`) : []
+      return (
+        <li id={ item } class="typedata-root typesignal-root">
+          <p class="typedata-name typesignal-name">
+            <PowerCord client:idle/>
+              { item }(<span class="typedata-param">{paramKeys}</span>)<span class="typesignal-doclink"><a
+              href="/docs/configuration/qml-overview#-signals"
+              target="_blank"
+            >?</a></span>
+          </p>
+          {
+            signalData.params && signalData.params.length > 0 ? (
+              <p class="typesignal-params">
+                {
+                  signalData.params.map((param, _) => {
+                    return (
+                    <span class="typesignal-param typedata-param">
+                      <Tag client:idle/>
+                      {param.name}<span class="type-datatype">:&nbsp;<a
+                        href=""
+                        target="_blank"
+                      >{param.type.name}</a></span>
+                    </span>
+                    )
+                  })
+                }
+              </p>
+            ) : null
+          }
+          <section class="typedata-details">
+            <div class="typedata-detailsdata" set:html={parseMarkdown(signalData.details, title)} />
+          </section>
+        </li>
+      )
+    })
+  }
+</ul>

src/components/type/Variants.astro

@@ -0,0 +1,45 @@
+---
+import type { QuickshellVariant } from "@config/io/types";
+import { FourDiamonds } from "../icons";
+import { parseMarkdown } from "@src/config/io/helpers";
+
+export interface Props {
+  variantKeys: string[];
+  variantsData: QuickshellVariant;
+  title: string;
+}
+
+const { variantKeys, variantsData, title } = Astro.props;
+---
+<ul class="typedata typevariants">
+  {
+    variantKeys.map(item => {
+      const variantData = variantsData[item];
+      const paramKeys = variantData.params && variantData.params.length > 0
+        ? variantData.params.map(param => param.name)
+        : [];
+      return (
+        <li id={ item } class="typedata-root typevariant-root">
+          <p class="typedata-name typevariant-name">
+            <FourDiamonds client:idle/>
+          { item }
+          </p>
+          {
+            paramKeys ? (
+              <div class="typedata-params typevariant-params">
+                {paramKeys.map(paramKey => (
+                  <span class="typedata-param typevariant-param">{paramKey}</span>
+                ))}
+              </div>
+            )
+            :null
+          }
+          <section class="typedata-details">
+            <div class="typedata-detailsdata" set:html={parseMarkdown(variantData.details, title)} />
+          </section>
+        </li>
+      )
+    })
+  }
+</ul>
+