starlight-theme-bejamas 0.0.0-canary.0138fd3

package/src/overrides/TableOfContents/starlight-toc.ts

@@ -0,0 +1,125 @@
+const PAGE_TITLE_ID = "_top";
+
+export class StarlightTOC extends HTMLElement {
+  private _current = this.querySelector<HTMLAnchorElement>(
+    'a[aria-current="true"]',
+  );
+  private minH = parseInt(this.dataset.minH || "2", 10);
+  private maxH = parseInt(this.dataset.maxH || "3", 10);
+
+  protected set current(link: HTMLAnchorElement) {
+    if (link === this._current) return;
+    if (this._current) this._current.removeAttribute("aria-current");
+    link.setAttribute("aria-current", "true");
+    this._current = link;
+  }
+
+  private onIdle = (cb: IdleRequestCallback) =>
+    (window.requestIdleCallback || ((cb) => setTimeout(cb, 1)))(cb);
+
+  constructor() {
+    super();
+    this.onIdle(() => this.init());
+  }
+
+  private init = (): void => {
+    /** All the links in the table of contents. */
+    const links = [...this.querySelectorAll("a")];
+
+    /** Test if an element is a table-of-contents heading. */
+    const isHeading = (el: Element): el is HTMLHeadingElement => {
+      if (el instanceof HTMLHeadingElement) {
+        // Special case for page title h1
+        if (el.id === PAGE_TITLE_ID) return true;
+        // Check the heading level is within the user-configured limits for the ToC
+        const level = el.tagName[1];
+        if (level) {
+          const int = parseInt(level, 10);
+          if (int >= this.minH && int <= this.maxH) return true;
+        }
+      }
+      return false;
+    };
+
+    /** Walk up the DOM to find the nearest heading. */
+    const getElementHeading = (
+      el: Element | null,
+    ): HTMLHeadingElement | null => {
+      if (!el) return null;
+      const origin = el;
+      while (el) {
+        if (isHeading(el)) return el;
+        // Assign the previous sibling’s last, most deeply nested child to el.
+        el = el.previousElementSibling;
+        while (el?.lastElementChild) {
+          el = el.lastElementChild;
+        }
+        // Look for headings amongst siblings.
+        const h = getElementHeading(el);
+        if (h) return h;
+      }
+      // Walk back up the parent.
+      return getElementHeading(origin.parentElement);
+    };
+
+    /** Handle intersections and set the current link to the heading for the current intersection. */
+    const setCurrent: IntersectionObserverCallback = (entries) => {
+      for (const { isIntersecting, target } of entries) {
+        if (!isIntersecting) continue;
+        const heading = getElementHeading(target);
+        if (!heading) continue;
+        const link = links.find(
+          (link) => link.hash === "#" + encodeURIComponent(heading.id),
+        );
+        if (link) {
+          this.current = link;
+          break;
+        }
+      }
+    };
+
+    // Observe elements with an `id` (most likely headings) and their siblings.
+    // Also observe direct children of `.content` to include elements before
+    // the first heading.
+    const toObserve = document.querySelectorAll(
+      "main [id], main [id] ~ *, main .content > *",
+    );
+
+    let observer: IntersectionObserver | undefined;
+    const observe = () => {
+      if (observer) return;
+      observer = new IntersectionObserver(setCurrent, {
+        rootMargin: this.getRootMargin(),
+      });
+      toObserve.forEach((h) => observer!.observe(h));
+    };
+    observe();
+
+    let timeout: NodeJS.Timeout;
+    window.addEventListener("resize", () => {
+      // Disable intersection observer while window is resizing.
+      if (observer) {
+        observer.disconnect();
+        observer = undefined;
+      }
+      clearTimeout(timeout);
+      timeout = setTimeout(() => this.onIdle(observe), 200);
+    });
+  };
+
+  private getRootMargin(): `-${number}px 0% ${number}px` {
+    const navBarHeight =
+      document.querySelector("header")?.getBoundingClientRect().height || 0;
+    // `<summary>` only exists in mobile ToC, so will fall back to 0 in large viewport component.
+    const mobileTocHeight =
+      this.querySelector("summary")?.getBoundingClientRect().height || 0;
+    /** Start intersections at nav height + 2rem padding. */
+    const top = navBarHeight + mobileTocHeight + 32;
+    /** End intersections `53px` later. This is slightly more than the maximum `margin-top` in Markdown content. */
+    const bottom = top + 53;
+    const height = document.documentElement.clientHeight;
+    return `-${top}px 0% ${bottom - height}px`;
+  }
+}
+
+customElements.define("starlight-toc", StarlightTOC);

package/src/overrides/ThemeProvider.astro

@@ -0,0 +1,198 @@
+---
+import { buildThemeChoiceBootstrapInlineScript } from "../lib/theme-choice";
+
+const themeChoiceBootstrapScript = buildThemeChoiceBootstrapInlineScript();
+---
+
+<script is:inline set:html={themeChoiceBootstrapScript} />
+
+{/* This is intentionally inlined to avoid FOUC. */}
+<script is:inline>
+  window.StarlightThemeProvider = (() => {
+    const themeMetaMedias = [
+      "(prefers-color-scheme: light)",
+      "(prefers-color-scheme: dark)",
+    ];
+    const fallbackThemeColors = {
+      light: "#ffffff",
+      dark: "#0f171f",
+    };
+    const parseTheme = (theme) =>
+      theme === "auto" || theme === "dark" || theme === "light"
+        ? theme
+        : "auto";
+    const getPreferredColorScheme = () =>
+      window.matchMedia("(prefers-color-scheme: light)").matches
+        ? "light"
+        : "dark";
+
+    const readThemeColors = () => {
+      const html = document.documentElement;
+      const prevTheme = html.dataset.theme;
+      const prevDark = html.classList.contains("dark");
+
+      const readBackground = (theme) => {
+        html.dataset.theme = theme;
+        html.classList.toggle("dark", theme === "dark");
+        return (
+          getComputedStyle(html).getPropertyValue("--background").trim() ||
+          undefined
+        );
+      };
+
+      const light = readBackground("light") || fallbackThemeColors.light;
+      const dark = readBackground("dark") || fallbackThemeColors.dark;
+
+      if (prevTheme !== undefined && prevTheme !== "") {
+        html.dataset.theme = prevTheme;
+        html.classList.toggle("dark", prevDark);
+      } else {
+        html.removeAttribute("data-theme");
+        html.classList.toggle("dark", prevDark);
+      }
+
+      return { light, dark };
+    };
+
+    function ensureThemeMeta(head, media) {
+      const baseSelector = `meta[name="theme-color"][media="${media}"]`;
+      let meta = head.querySelector(`${baseSelector}[data-theme-managed]`);
+      if (meta instanceof HTMLMetaElement) return meta;
+
+      meta = head.querySelector(baseSelector);
+      if (meta instanceof HTMLMetaElement) {
+        meta.setAttribute("data-theme-managed", "");
+        return meta;
+      }
+
+      meta = document.createElement("meta");
+      meta.setAttribute("name", "theme-color");
+      meta.setAttribute("media", media);
+      meta.setAttribute("data-theme-managed", "");
+      head.appendChild(meta);
+      return meta;
+    }
+
+    function syncThemeColor(theme) {
+      const themeColors = readThemeColors();
+      const color = themeColors[theme];
+      const head = document.head;
+      if (!color || !head) return;
+
+      themeMetaMedias.forEach((media) => {
+        const meta = ensureThemeMeta(head, media);
+        meta.setAttribute("content", color);
+      });
+    }
+
+    const effectiveTheme =
+      document.documentElement.dataset.theme === "light" ||
+      document.documentElement.dataset.theme === "dark"
+        ? document.documentElement.dataset.theme
+        : getPreferredColorScheme();
+    syncThemeColor(effectiveTheme);
+    return {
+      refreshThemeColors(theme) {
+        const themeChoice = parseTheme(
+          theme ?? document.documentElement.dataset.themeChoice,
+        );
+        const effectiveTheme =
+          themeChoice === "auto" ? getPreferredColorScheme() : themeChoice;
+        syncThemeColor(effectiveTheme);
+      },
+      updatePickers(theme) {
+        const themeChoice = parseTheme(
+          theme ?? document.documentElement.dataset.themeChoice,
+        );
+        document
+          .querySelectorAll("starlight-theme-select")
+          .forEach((picker) => {
+            const nativeSelect = picker.querySelector("select");
+            if (nativeSelect instanceof HTMLSelectElement) {
+              nativeSelect.value = themeChoice;
+            }
+
+            const selectRoot = picker.querySelector("#starlight-theme-select");
+            if (selectRoot instanceof HTMLElement) {
+              selectRoot.dataset.defaultValue = themeChoice;
+              selectRoot.dataset.value = themeChoice;
+              selectRoot.dispatchEvent(
+                new CustomEvent("select:set", { detail: { value: themeChoice } }),
+              );
+            }
+          });
+      },
+    };
+  })();
+</script>
+
+<script>
+  import { syncSemanticIconsInRoot } from "@bejamas/semantic-icons/browser";
+  import { refreshCurrentThemeStylesheet } from "../lib/theme-stylesheet";
+
+  const PRESET_CHANGE_EVENT = "bejamas:preset-change";
+  const SETUP_KEY = "__bejamasCurrentThemeStylesheetSync";
+  let reloadFrame = 0;
+  let pendingIconLibrary = null;
+
+  function syncDocumentIconLibrary() {
+    const renderedIcon = document.querySelector("[data-icon-library]");
+    const iconLibrary =
+      renderedIcon instanceof SVGElement
+        ? renderedIcon.dataset.iconLibrary
+        : document.documentElement.dataset.iconLibrary;
+
+    if (iconLibrary) {
+      document.documentElement.dataset.iconLibrary = iconLibrary;
+      syncSemanticIconsInRoot(document, iconLibrary);
+    }
+  }
+
+  const scheduleCurrentThemeStylesheetRefresh = () => {
+    if (reloadFrame) {
+      return;
+    }
+
+    reloadFrame = requestAnimationFrame(() => {
+      reloadFrame = 0;
+      void refreshCurrentThemeStylesheet().then(() => {
+        if (pendingIconLibrary) {
+          document.documentElement.dataset.iconLibrary = pendingIconLibrary;
+          syncSemanticIconsInRoot(document, pendingIconLibrary);
+          pendingIconLibrary = null;
+        }
+        window.StarlightThemeProvider?.refreshThemeColors?.();
+      });
+    });
+  };
+
+  if (!(SETUP_KEY in window)) {
+    window[SETUP_KEY] = true;
+    syncDocumentIconLibrary();
+
+    window.addEventListener("theme-toggle-changed", (event) => {
+      const themeChoice =
+        event instanceof CustomEvent && typeof event.detail?.themeChoice === "string"
+          ? event.detail.themeChoice
+          : undefined;
+
+      window.StarlightThemeProvider?.refreshThemeColors?.(themeChoice);
+    });
+
+    window.addEventListener(PRESET_CHANGE_EVENT, (event) => {
+      const presetChange = event;
+
+      pendingIconLibrary =
+        presetChange instanceof CustomEvent &&
+        typeof presetChange.detail?.iconLibrary === "string"
+          ? presetChange.detail.iconLibrary
+          : null;
+
+      scheduleCurrentThemeStylesheetRefresh();
+    });
+    document.addEventListener("astro:after-swap", () => {
+      window.StarlightThemeProvider?.refreshThemeColors?.();
+      syncDocumentIconLibrary();
+    });
+  }
+</script>

package/src/overrides/ThemeSelect.astro

@@ -0,0 +1,110 @@
+---
+import {
+  Select,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+} from "virtual:starlight-theme-bejamas/components/select";
+
+import { SunIcon, MoonIcon, LaptopIcon } from "@lucide/astro";
+---
+
+<starlight-theme-select>
+  <div class="relative text-sm">
+    <div class="sl-bejamas-theme-select-icons">
+      <SunIcon class="theme-icon theme-icon-light size-4" />
+      <MoonIcon class="theme-icon theme-icon-dark size-4" />
+      <LaptopIcon class="theme-icon theme-icon-auto size-4" />
+    </div>
+    <Select defaultValue="auto" id="starlight-theme-select">
+      <SelectTrigger class="sl-bejamas-theme-select-control">
+        <SelectValue placeholder="Theme" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="light" class="flex items-center gap-2"
+          ><SunIcon class="size-4" /> Light</SelectItem
+        >
+        <SelectItem value="dark" class="flex items-center gap-2"
+          ><MoonIcon class="size-4" /> Dark</SelectItem
+        >
+        <SelectItem value="auto" class="flex items-center gap-2"
+          ><LaptopIcon class="size-4" /> Auto</SelectItem
+        >
+      </SelectContent>
+    </Select>
+  </div>
+</starlight-theme-select>
+
+<script>
+  import {
+    getThemeChoiceFromRoot,
+    parseStoredThemeChoice,
+    setThemeChoice,
+    syncThemeChoiceControls,
+  } from "../lib/theme-choice";
+
+  class StarlightThemeSelect extends HTMLElement {
+    private selectRoot: HTMLElement | null = null;
+
+    private onSelectChange = (event: Event) => {
+      const value = (event as CustomEvent<{ value?: unknown }>).detail?.value;
+      if (typeof value !== "string") return;
+
+      const nextTheme = parseStoredThemeChoice(value);
+      const currentTheme = getThemeChoiceFromRoot(document.documentElement);
+      if (nextTheme === currentTheme) return;
+
+      setThemeChoice(nextTheme);
+    };
+
+    connectedCallback() {
+      this.selectRoot = this.querySelector<HTMLElement>("#starlight-theme-select");
+      syncThemeChoiceControls(
+        getThemeChoiceFromRoot(document.documentElement),
+        this,
+      );
+      this.selectRoot?.addEventListener("select:change", this.onSelectChange);
+    }
+
+    disconnectedCallback() {
+      this.selectRoot?.removeEventListener("select:change", this.onSelectChange);
+      this.selectRoot = null;
+    }
+  }
+
+  if (!customElements.get("starlight-theme-select")) {
+    customElements.define("starlight-theme-select", StarlightThemeSelect);
+  }
+</script>
+
+<style>
+  .theme-icon {
+    display: none;
+  }
+
+  :global(html[data-theme-choice="light"]) .theme-icon-light {
+    display: block;
+  }
+
+  :global(html[data-theme-choice="dark"]) .theme-icon-dark {
+    display: block;
+  }
+
+  :global(html[data-theme-choice="auto"]) .theme-icon-auto {
+    display: block;
+  }
+
+  .sl-bejamas-theme-select-icons {
+    position: absolute;
+    z-index: 10;
+    left: calc(var(--spacing) * 3);
+    top: calc(var(--spacing) * 2.5);
+    pointer-events: none;
+  }
+
+  .sl-bejamas-theme-select-control {
+    padding-left: calc(var(--spacing) * 9);
+    width: calc(var(--spacing) * 28);
+  }
+</style>