starlight-theme-bejamas 0.0.0-canary.0d34eb2

package/src/overrides/PageTitle.astro

@@ -0,0 +1,139 @@
+---
+import { Button } from "virtual:starlight-theme-bejamas/components/button";
+
+import { ArrowRight, ArrowLeft, ArrowUpRight } from "@lucide/astro";
+
+const { dir, pagination, template, entry } = Astro.locals.starlightRoute;
+const { prev, next } = pagination;
+const isRtl = dir === "rtl";
+---
+
+<div
+  class:list={[
+    "sl-bejamas-docs-title",
+    entry.data.template === "splash" && "mt-10",
+  ]}
+>
+  <h1 id="_top" class="tracking-tight">
+    {Astro.locals.starlightRoute.entry.data.title}
+  </h1>
+
+  {
+    entry.data.template !== "splash" && (
+      <div class="sl-bejamas-docs-title-buttons">
+        {entry.data.figmaUrl && (
+          <Button
+            variant="outline"
+            size="sm"
+            as="a"
+            href={entry.data.figmaUrl}
+            target="_blank"
+          >
+            <svg
+              fill="none"
+              height="24"
+              viewBox="0 0 38 57"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+              class="text-lg"
+            >
+              <>
+                <path
+                  d="M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0Z"
+                  fill="#1ABCFE"
+                />
+                <path
+                  d="M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0Z"
+                  fill="#0ACF83"
+                />
+                <path d="M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19Z" fill="#FF7262" />
+                <path
+                  d="M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5Z"
+                  fill="#F24E1E"
+                />
+                <path
+                  d="M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5Z"
+                  fill="#A259FF"
+                />
+              </>
+            </svg>
+            Figma
+            <ArrowUpRight />
+          </Button>
+        )}
+        {prev && (
+          <Button
+            as="a"
+            href={isRtl ? next.href : prev.href}
+            variant="outline"
+            size="icon-sm"
+          >
+            <ArrowLeft class="size-4" />
+          </Button>
+        )}
+        {next && (
+          <Button
+            as="a"
+            href={isRtl ? prev.href : next.href}
+            variant="outline"
+            size="icon-sm"
+          >
+            <ArrowRight class="size-4" />
+          </Button>
+        )}
+      </div>
+    )
+  }
+
+  {
+    entry.data.description && (
+      <p class="sl-bejamas-description">{entry.data.description}</p>
+    )
+  }
+</div>
+
+<style>
+  @layer bejamas {
+    .sl-bejamas-docs-title {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      margin-top: 0.5rem;
+      align-items: center;
+    }
+    .sl-bejamas-docs-title-buttons {
+      gap: 0.5rem;
+      display: none;
+    }
+
+    @media (min-width: 50rem) {
+      .sl-bejamas-docs-title-buttons {
+        display: flex;
+      }
+    }
+  }
+
+  .sl-bejamas-description {
+    color: var(--muted-foreground);
+    text-wrap: balance;
+    margin-top: calc(var(--spacing) * 4);
+    margin-bottom: calc(var(--spacing) * 2);
+    width: 100%;
+  }
+
+  @layer starlight.core {
+    h1 {
+      font-size: 1.875rem;
+      line-height: 1.2;
+      font-weight: 500;
+      color: var(--sl-color-white);
+    }
+
+    @media (min-width: 50rem) {
+      h1 {
+        font-size: 2.25rem;
+        line-height: calc(2.5 / 2.25);
+      }
+    }
+  }
+</style>

package/src/overrides/Pagination.astro

@@ -0,0 +1,55 @@
+---
+import { Button } from "virtual:starlight-theme-bejamas/components/button";
+import { ArrowRight, ArrowLeft } from "@lucide/astro";
+
+const { dir, pagination } = Astro.locals.starlightRoute;
+const { prev, next } = pagination;
+const isRtl = dir === "rtl";
+---
+
+<div class="sl-flex sl-justify-between print:hidden z-10" dir={dir}>
+  {
+    prev && (
+      <Button as="a" href={prev.href} rel="prev" variant="outline">
+        {isRtl ? <ArrowRight class="size-4" /> : <ArrowLeft class="size-4" />}
+        {prev.label}
+      </Button>
+    )
+  }
+  {
+    next && (
+      <Button as="a" href={next.href} rel="next" variant="outline">
+        {isRtl ? <ArrowLeft class="size-4" /> : <ArrowRight class="size-4" />}
+        {next.label}
+      </Button>
+    )
+  }
+</div>
+
+<style>
+  @layer starlight.core {
+    .pagination-links {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
+      gap: 1rem;
+    }
+
+    [rel="next"] {
+      justify-content: end;
+      text-align: end;
+      flex-direction: row-reverse;
+    }
+
+    svg {
+      flex-shrink: 0;
+    }
+
+    .page-footer {
+      margin-top: calc(var(--spacing) * 6);
+    }
+
+    .sl-justify-between {
+      justify-content: space-between;
+    }
+  }
+</style>

package/src/overrides/Sidebar.astro

@@ -0,0 +1,43 @@
+---
+import MobileMenuFooter from "virtual:starlight/components/MobileMenuFooter";
+import SidebarPersister from "@astrojs/starlight/components/SidebarPersister.astro";
+import SidebarSublist from "@astrojs/starlight/components/SidebarSublist.astro";
+
+const { sidebar } = Astro.locals.starlightRoute;
+---
+
+<SidebarPersister>
+  <div class="fade"></div>
+  <SidebarSublist sublist={sidebar} />
+</SidebarPersister>
+
+<div class="md:sl-hidden">
+  <MobileMenuFooter />
+</div>
+
+<style>
+  @layer bejamas {
+    .fade {
+      --blur: 4px;
+      --stop: 50%;
+      --height: 72px;
+      position: fixed;
+      pointer-events: none;
+      width: 100%;
+      height: var(--height);
+      user-select: none;
+      -webkit-user-select: none;
+      left: 0;
+      -webkit-backdrop-filter: blur(var(--blur));
+      backdrop-filter: blur(var(--blur));
+
+      background: linear-gradient(to top, transparent, var(--background));
+      mask-image: linear-gradient(
+        to bottom,
+        var(--background) var(--stop),
+        transparent
+      );
+      top: 0;
+    }
+  }
+</style>

package/src/overrides/SiteTitle.astro

@@ -0,0 +1,59 @@
+---
+import { logos } from "virtual:starlight/user-images";
+import config from "virtual:starlight/user-config";
+const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
+---
+
+<a href={siteTitleHref} class="site-title sl-flex text-sm text-foreground">
+  {
+    config.logo && logos.dark && (
+      <>
+        <img
+          class:list={{
+            "light:sl-hidden print:hidden": !("src" in config.logo),
+          }}
+          alt={config.logo.alt}
+          src={logos.dark.src}
+          width={logos.dark.width}
+          height={logos.dark.height}
+        />
+        {/* Show light alternate if a user configure both light and dark logos. */}
+        {!("src" in config.logo) && (
+          <img
+            class="dark:sl-hidden print:block"
+            alt={config.logo.alt}
+            src={logos.light?.src}
+            width={logos.light?.width}
+            height={logos.light?.height}
+          />
+        )}
+      </>
+    )
+  }
+  <span class:list={{ "sr-only": config.logo?.replacesTitle }} translate="no">
+    {siteTitle}
+  </span>
+</a>
+
+<style>
+  @layer starlight.core {
+    .site-title {
+      align-items: center;
+      gap: var(--sl-nav-gap);
+      font-weight: 600;
+      text-decoration: none;
+      white-space: nowrap;
+      min-width: 0;
+    }
+    span {
+      overflow: hidden;
+    }
+    img {
+      height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
+      width: auto;
+      max-width: 100%;
+      object-fit: contain;
+      object-position: 0 50%;
+    }
+  }
+</style>

package/src/overrides/TableOfContents/TableOfContentsList.astro

@@ -0,0 +1,88 @@
+---
+import type { MarkdownHeading } from "astro";
+
+interface TocItem extends MarkdownHeading {
+  children: TocItem[];
+}
+
+interface Props {
+  toc: TocItem[];
+  depth?: number;
+  isMobile?: boolean;
+}
+
+const { toc, isMobile = false, depth = 0 } = Astro.props;
+---
+
+<ul class:list={{ isMobile }}>
+  {
+    toc.map((heading) => (
+      <li>
+        <a href={"#" + heading.slug}>
+          <span>{heading.text}</span>
+        </a>
+        {heading.children.length > 0 && (
+          <Astro.self
+            toc={heading.children}
+            depth={depth + 1}
+            isMobile={isMobile}
+          />
+        )}
+      </li>
+    ))
+  }
+</ul>
+
+<style define:vars={{ depth }}>
+  @layer starlight.core {
+    ul {
+      padding: 0;
+      list-style: none;
+    }
+    a {
+      --pad-inline: 0.5rem;
+      display: block;
+      border-radius: 0.25rem;
+      padding-block: 0.25rem;
+      padding-inline: calc(1rem * var(--depth) + var(--pad-inline))
+        var(--pad-inline);
+      line-height: 1.25;
+    }
+    a[aria-current="true"] {
+      color: var(--sl-color-text-accent);
+    }
+    .isMobile a {
+      --pad-inline: 1rem;
+      display: flex;
+      justify-content: space-between;
+      gap: var(--pad-inline);
+      border-top: 1px solid var(--sl-color-gray-6);
+      border-radius: 0;
+      padding-block: 0.5rem;
+      color: var(--sl-color-text);
+      font-size: var(--sl-text-sm);
+      text-decoration: none;
+      outline-offset: var(--sl-outline-offset-inside);
+    }
+    .isMobile:first-child > li:first-child > a {
+      border-top: 0;
+    }
+    .isMobile a[aria-current="true"],
+    .isMobile a[aria-current="true"]:hover,
+    .isMobile a[aria-current="true"]:focus {
+      color: var(--sl-color-white);
+      background-color: unset;
+    }
+    .isMobile a[aria-current="true"]::after {
+      content: "";
+      width: 1rem;
+      background-color: var(--sl-color-text-accent);
+      /* Check mark SVG icon */
+      -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg==");
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNCAxNCc+PHBhdGggZD0nTTEwLjkxNCA0LjIwNmEuNTgzLjU4MyAwIDAgMC0uODI4IDBMNS43NCA4LjU1NyAzLjkxNCA2LjcyNmEuNTk2LjU5NiAwIDAgMC0uODI4Ljg1N2wyLjI0IDIuMjRhLjU4My41ODMgMCAwIDAgLjgyOCAwbDQuNzYtNC43NmEuNTgzLjU4MyAwIDAgMCAwLS44NTdaJy8+PC9zdmc+Cg==");
+      -webkit-mask-repeat: no-repeat;
+      mask-repeat: no-repeat;
+      flex-shrink: 0;
+    }
+  }
+</style>

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,106 @@
+{/* 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 themeColors = (() => {
+      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 color = themeColors[theme];
+      const head = document.head;
+      if (!color || !head) return;
+
+      themeMetaMedias.forEach((media) => {
+        const meta = ensureThemeMeta(head, media);
+        meta.setAttribute("content", color);
+      });
+    }
+
+    const storedTheme =
+      typeof localStorage !== "undefined" &&
+      localStorage.getItem("starlight-theme");
+    const theme =
+      storedTheme ||
+      (window.matchMedia("(prefers-color-scheme: light)").matches
+        ? "light"
+        : "dark");
+    const effectiveTheme = theme === "light" ? "light" : "dark";
+    document.documentElement.dataset.theme = effectiveTheme;
+    document.documentElement.classList.toggle(
+      "dark",
+      effectiveTheme === "dark",
+    );
+    syncThemeColor(effectiveTheme);
+    return {
+      updatePickers(theme = storedTheme || "auto") {
+        document
+          .querySelectorAll("starlight-theme-select")
+          .forEach((picker) => {
+            const select = picker.querySelector("select");
+            if (select) select.value = theme;
+            /** @type {HTMLTemplateElement | null} */
+            const tmpl = document.querySelector(`#theme-icons`);
+            const newIcon = tmpl && tmpl.content.querySelector("." + theme);
+            if (newIcon) {
+              const oldIcon = picker.querySelector("svg.label-icon");
+              if (oldIcon) {
+                oldIcon.replaceChildren(...newIcon.cloneNode(true).childNodes);
+              }
+            }
+          });
+      },
+    };
+  })();
+</script>