@staticbolt/docs 0.0.1-beta.0

package/sources/parts/table-of-content/table-of-content.style.css

@@ -0,0 +1,189 @@
+:root {
+  /* The height when the TOC is collapsed */
+  --sb-toc-mobile-height: 0em;
+
+  @media (max-width: 72rem) {
+    --sb-toc-mobile-height: 2.6rem;
+  }
+}
+
+.toc {
+  &.desktop {
+    position: sticky;
+    inset-block-start: var(--sb-header-height);
+    min-inline-size: 10rem;
+    font-family: var(--sb-md-font);
+
+    @media (max-width: 72rem) {
+      display: none;
+    }
+  }
+
+  .toc-title {
+    margin: 0 0 0.75rem;
+    font-size: var(--sb-text-h5);
+    font-weight: 600;
+    line-height: var(--sb-line-height-headings);
+    color: var(--sb-color-gray-0);
+  }
+
+  .toc-list {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+
+    li .toc-link {
+      --base-indent: 0.75rem;
+
+      display: block;
+      padding: 4px 0 4px 0.75rem;
+      padding-inline: calc(var(--base-indent) + (0.75rem * var(--depth))) 0.5em;
+      margin-inline-start: -0.5px;
+      font-size: var(--sb-text-xs);
+      line-height: 1.4;
+      color: var(--sb-color-gray-3);
+      text-decoration: none;
+      border-inline-start: 1px solid transparent;
+      border-start-end-radius: 4px;
+      border-end-end-radius: 4px;
+      transition:
+        color 0.15s,
+        border-color 0.15s;
+
+      @media (pointer: fine) {
+        &:hover {
+          color: var(--sb-color-gray-1);
+          background-color: var(--sb-color-gray-6);
+          border-inline-start-color: var(--sb-color-accent);
+        }
+      }
+
+      &.active {
+        color: var(--sb-color-accent-high);
+        background-color: var(--sb-color-gray-6);
+        border-inline-start-color: var(--sb-color-accent);
+        border-start-end-radius: 4px;
+        border-end-end-radius: 4px;
+      }
+    }
+
+    /* Links are before the active link */
+    li:has(~ li .toc-link.active) > .toc-link {
+      color: var(--sb-color-gray-1);
+    }
+  }
+
+  .toc-nav-container {
+    max-block-size: calc(100svh - var(--sb-header-height));
+    padding: 1em;
+    padding-inline-start: 0;
+    overflow-y: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .toc-nav {
+    inline-size: fit-content;
+
+    .toc-list:first-of-type {
+      border-inline-start: 1px solid var(--sb-color-gray-5);
+    }
+  }
+
+  &.mobile {
+    position: sticky;
+    inset-block-start: var(--sb-header-height);
+    z-index: 99;
+    display: none;
+    align-items: flex-start;
+    inline-size: 100%;
+    block-size: var(--sb-toc-mobile-height);
+    overflow: visible;
+    background-color: rgb(from var(--sb-color-black) r g b / 80%);
+    border-block-end: 1px solid var(--sb-color-gray-5);
+    backdrop-filter: blur(7px);
+
+    @media (max-width: 72rem) {
+      display: flex;
+    }
+
+    .toc-nav-mobile {
+      flex: 1;
+      min-inline-size: 0;
+      max-block-size: calc(100svh - var(--sb-header-height));
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+
+    .toc-accordion {
+      --sv-toggle-dur: 200ms;
+      --sv-gray-6: transparent;
+      --sv-gray-5: transparent;
+
+      font-size: var(--sb-text-xs);
+
+      &::part(container) {
+        border: none;
+        border-radius: 0;
+      }
+
+      &::part(content) {
+        background-color: var(--sb-color-black);
+        border-block-end: solid 1px var(--sb-color-gray-5);
+      }
+
+      &::part(trigger) {
+        block-size: var(--sb-toc-mobile-height);
+        padding-block: 0.4em;
+      }
+
+      span[slot="summary"] {
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+      }
+
+      .toc-accordion-summary {
+        padding-block: 0.2em;
+        padding-inline-end: 1em;
+        margin-inline-end: 1em;
+        font-weight: 600;
+        border-inline-end: solid 1px var(--sb-color-gray-5);
+      }
+
+      .toc-current-title {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-weight: normal;
+        white-space: nowrap;
+      }
+
+      &:state(--open) .toc-accordion-summary .marker {
+        rotate: 0deg;
+      }
+    }
+
+    .toc-content {
+      padding-block: 0.5em 1em;
+    }
+
+    .toc-list {
+      li a {
+        padding-block: 0.5em;
+        border-inline-start: none;
+        border-radius: 4px;
+      }
+    }
+  }
+
+  @media print {
+    display: none !important;
+  }
+}

package/sources/scripts/global.d.ts

@@ -0,0 +1,27 @@
+import type { ImageFormat, import_as_string, CssLinear } from "@staticbolt/core/plugins";
+
+declare global {
+  /** True in production */
+  const _production: boolean;
+
+  /**
+   * - Replace `cssLinear.[easeName](...args)` with a CSS linear function string `linear(...values)`.
+   * - Useful for `element.animate(..., { easing: cssLinear.[easeName](...args) })`.
+   */
+  const cssLinear: CssLinear;
+
+  const import_as_string: import_as_string;
+
+  const _img: {
+    /** The image extension. In production, returns the converted format (e.g. `webp`). In development, returns `png` */
+    png: ImageFormat;
+
+    /** The image extension. In production, returns the converted format (e.g. `webp`). In development, returns `jpg` */
+    jpg: ImageFormat;
+
+    /** The image extension. In production, returns the converted format (e.g. `webp`). In development, returns `jpeg` */
+    jpeg: ImageFormat;
+  };
+}
+
+export {};

package/sources/scripts/mermaid.ts

@@ -0,0 +1,75 @@
+// @ts-expect-error - no types for mermaid esm dist file
+import _mermaid from "mermaid/dist/mermaid.esm.min.mjs";
+
+import type { Mermaid } from "mermaid";
+
+const mermaid = _mermaid as unknown as Mermaid;
+
+// Resolves CSS vars including light-dark() — element must be in DOM
+function resolveColor(cssVariable: string) {
+  // Step 1: DOM element resolves light-dark() + CSS variable references
+  const element = document.createElement("div");
+  element.style.cssText = `display:none; color: var(${cssVariable})`;
+  document.body.append(element);
+  const computed = getComputedStyle(element).color; // could be rgb(), color(srgb ...), oklch(), etc.
+  element.remove();
+
+  // Step 2: canvas normalizes any color format → integer RGB → hex
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 1;
+
+  const context = canvas.getContext("2d")!;
+  context.fillStyle = computed;
+  context.fillRect(0, 0, 1, 1);
+
+  const [r, g, b] = context.getImageData(0, 0, 1, 1).data;
+
+  return `#${[r, g, b].map(x => x.toString(16).padStart(2, "0")).join("")}`;
+}
+
+function buildMermaidTheme() {
+  const c = (v: string) => resolveColor(v);
+
+  return {
+    theme: "base" as const,
+    themeVariables: {
+      background: c("--sb-color-black"),
+      mainBkg: c("--sb-color-gray-7"),
+      secondaryColor: c("--sb-color-gray-6"),
+      tertiaryColor: c("--sb-color-gray-5"),
+      clusterBkg: c("--sb-color-gray-7"),
+      primaryBorderColor: c("--sb-color-accent"),
+      secondaryBorderColor: c("--sb-color-gray-4"),
+      tertiaryBorderColor: c("--sb-color-gray-5"),
+      primaryTextColor: c("--sb-color-gray-0"),
+      secondaryTextColor: c("--sb-color-gray-1"),
+      tertiaryTextColor: c("--sb-color-gray-2"),
+      titleColor: c("--sb-color-gray-1"),
+      edgeLabelBackground: c("--sb-color-gray-6"),
+      primaryColor: c("--sb-color-accent"),
+      lineColor: c("--sb-color-gray-3"),
+      fontFamily: "ui-sans-serif, system-ui, sans-serif",
+      fontSize: "14px",
+    },
+  };
+}
+
+// Save original source before first render
+for (const element of document.querySelectorAll<HTMLPreElement>(".mermaid")) {
+  element.dataset.src = element.textContent.trim();
+}
+
+async function renderDiagrams() {
+  // Restore original source — Mermaid replaces it with SVG after first run
+  for (const element of document.querySelectorAll<HTMLPreElement>(".mermaid")) {
+    element.textContent = element.dataset.src ?? "";
+    delete element.dataset.processed;
+  }
+
+  mermaid.initialize({ startOnLoad: false, ...buildMermaidTheme() });
+  await mermaid.run();
+}
+
+await renderDiagrams();
+
+document.addEventListener("color-scheme-changed", renderDiagrams);

package/sources/styles/docs.css

@@ -0,0 +1,9 @@
+@import url("@pagefind/component-ui/css");
+@import url("./global.css");
+@import url("./document.css");
+@import url("../parts/header/header.style.css");
+@import url("../parts/sidebar/sidebar.style.css");
+@import url("../parts/table-of-content/table-of-content.style.css");
+@import url("../parts/pagination-links/pagination-links.style.css");
+@import url("../parts/color-scheme-switch/color-scheme-switch.style.css");
+@import url("../parts/badge/badge.style.css");