initial commit

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;