starlight-theme-bejamas 0.0.0-canary.0d34eb2

package/src/overrides/Hero.astro

@@ -0,0 +1,175 @@
+---
+import { Image } from "astro:assets";
+import { Button } from "virtual:starlight-theme-bejamas/components/button";
+
+const { data } = Astro.locals.starlightRoute.entry;
+const { title = data.title, tagline, image, actions = [] } = data.hero || {};
+
+const PAGE_TITLE_ID = "_top";
+
+const imageAttrs = {
+  loading: "eager" as const,
+  decoding: "async" as const,
+  width: 400,
+  height: 400,
+  alt: image?.alt || "",
+};
+
+let darkImage: ImageMetadata | undefined;
+let lightImage: ImageMetadata | undefined;
+let rawHtml: string | undefined;
+if (image) {
+  if ("file" in image) {
+    darkImage = image.file;
+  } else if ("dark" in image) {
+    darkImage = image.dark;
+    lightImage = image.light;
+  } else {
+    rawHtml = image.html;
+  }
+}
+
+const startlightVariantToBejamasVariant = {
+  primary: "default",
+  secondary: "secondary",
+  minimal: "outline",
+};
+---
+
+<div class="hero">
+  {
+    darkImage && (
+      <Image
+        src={darkImage}
+        {...imageAttrs}
+        class:list={{ "light:sl-hidden": Boolean(lightImage) }}
+      />
+    )
+  }
+  {
+    lightImage && (
+      <Image src={lightImage} {...imageAttrs} class="dark:sl-hidden" />
+    )
+  }
+  {rawHtml && <div class="hero-html sl-flex" set:html={rawHtml} />}
+  <div class="sl-flex stack">
+    <div class="sl-flex copy">
+      <h1 id={PAGE_TITLE_ID} data-page-title set:html={title} />
+      {tagline && <div class="tagline" set:html={tagline} />}
+    </div>
+    {
+      actions.length > 0 && (
+        <div class="sl-flex actions">
+          {actions.map(
+            ({
+              attrs: { class: className, ...attrs } = {},
+              icon,
+              link: href,
+              text,
+              variant,
+            }) => (
+              <Button
+                {href}
+                variant={startlightVariantToBejamasVariant[variant]}
+                as="a"
+                icon={icon?.name}
+                class:list={[className]}
+                {...attrs}
+              >
+                {text}
+                {icon?.html && <Fragment set:html={icon.html} />}
+              </Button>
+            ),
+          )}
+        </div>
+      )
+    }
+  </div>
+</div>
+
+<style>
+  @layer starlight.core {
+    .hero {
+      display: grid;
+      align-items: center;
+      gap: 1rem;
+      padding-bottom: 1rem;
+    }
+
+    .hero > img,
+    .hero > .hero-html {
+      object-fit: contain;
+      width: min(70%, 20rem);
+      height: auto;
+      margin-inline: auto;
+    }
+
+    .stack {
+      flex-direction: column;
+      gap: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);
+      text-align: center;
+    }
+
+    .copy {
+      flex-direction: column;
+      gap: 1rem;
+      align-items: center;
+    }
+
+    .copy > * {
+      max-width: 50ch;
+    }
+
+    h1 {
+      font-size: clamp(
+        var(--sl-text-3xl),
+        calc(0.25rem + 5vw),
+        var(--sl-text-6xl)
+      );
+      line-height: var(--sl-line-height-headings);
+      font-weight: 600;
+      color: var(--foreground);
+    }
+
+    .tagline {
+      font-size: clamp(
+        var(--sl-text-base),
+        calc(0.0625rem + 2vw),
+        var(--sl-text-xl)
+      );
+      color: var(--muted-foreground);
+    }
+
+    .actions {
+      gap: 1rem 0.75rem;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    @media (min-width: 50rem) {
+      .hero {
+        grid-template-columns: 7fr 4fr;
+        gap: 3%;
+        padding-block: clamp(2.5rem, calc(1rem + 10vmin), 10rem);
+      }
+
+      .hero > img,
+      .hero > .hero-html {
+        order: 2;
+        width: min(100%, 25rem);
+      }
+
+      .stack {
+        text-align: start;
+      }
+
+      .copy {
+        align-items: flex-start;
+      }
+
+      .actions {
+        justify-content: flex-start;
+      }
+    }
+  }
+</style>

package/src/overrides/MobileTableOfContents.astro

@@ -0,0 +1,275 @@
+---
+import TableOfContentsList from "./TableOfContents/TableOfContentsList.astro";
+
+const { toc } = Astro.locals.starlightRoute;
+---
+
+{
+  toc && (
+    <mobile-starlight-toc
+      data-min-h={toc.minHeadingLevel}
+      data-max-h={toc.maxHeadingLevel}
+    >
+      <nav aria-labelledby="starlight__on-this-page--mobile">
+        <div class="border-t starlight__separator" />
+        <details id="starlight__mobile-toc">
+          <summary id="starlight__on-this-page--mobile" class="sl-flex">
+            <span class="toggle sl-flex">
+              <span class="toggle-label sl-flex">
+                <span
+                  class="toc-progress"
+                  role="progressbar"
+                  aria-label="Current section progress"
+                  aria-valuemin="0"
+                  aria-valuemax="100"
+                  aria-valuenow="0"
+                >
+                  <span class="toc-progress__fill" aria-hidden="true" />
+                </span>
+                <span class="toggle-text">
+                  {Astro.locals.t("tableOfContents.onThisPage")}
+                </span>
+              </span>
+            </span>
+            <span class="display-current" />
+          </summary>
+          <div class="dropdown">
+            <TableOfContentsList toc={toc.items} isMobile />
+          </div>
+        </details>
+      </nav>
+    </mobile-starlight-toc>
+  )
+}
+
+<style>
+  @layer starlight.core {
+    nav {
+      position: fixed;
+      z-index: var(--sl-z-index-toc);
+      top: calc(var(--sl-nav-height) - 1px);
+      inset-inline: 0;
+      border-top: 1px solid var(--sl-color-gray-5);
+      background-color: var(--sl-color-bg-nav);
+    }
+    @media (min-width: 64rem) {
+      nav {
+        inset-inline-start: var(--sl-content-inline-start, 0);
+      }
+    }
+
+    summary {
+      gap: 0.5rem;
+      align-items: center;
+      height: var(--sl-mobile-toc-height);
+      border-bottom: 1px solid var(--sl-color-hairline-shade);
+      padding: 0.5rem calc(var(--sl-content-pad-x) + var(--spacing));
+      font-size: var(--sl-text-xs);
+      outline-offset: var(--sl-outline-offset-inside);
+    }
+    summary::marker,
+    summary::-webkit-details-marker {
+      display: none;
+    }
+
+    .starlight__separator {
+      margin-inline: calc(var(--spacing) * 6);
+    }
+    @media (min-width: 64rem) {
+      .starlight__separator {
+        margin-left: 0;
+      }
+    }
+
+    .toggle {
+      flex-shrink: 0;
+      gap: 1rem;
+      align-items: center;
+      justify-content: space-between;
+      border: 1px solid var(--sl-color-gray-5);
+      border-radius: 0.5rem;
+      padding-block: 0.5rem;
+      padding-inline-start: 0.75rem;
+      padding-inline-end: 0.5rem;
+      line-height: 1;
+      background-color: var(--sl-color-black);
+      user-select: none;
+      cursor: pointer;
+      font-weight: 500;
+    }
+    .toggle-label {
+      gap: calc(var(--spacing) * 2);
+      align-items: center;
+    }
+    .toc-progress {
+      --toc-progress-size: calc(var(--spacing) * 4);
+      --toc-progress-fill: var(--accent);
+      display: inline-flex;
+      width: var(--toc-progress-size);
+      height: var(--toc-progress-size);
+      border-radius: 999px;
+      border: 1px solid var(--toc-progress-fill);
+      align-items: center;
+      justify-content: center;
+      /* background: radial-gradient(
+        circle,
+        rgba(2, 123, 249, 0.25) 0,
+        rgba(2, 123, 249, 0.25) 60%,
+        transparent 60%
+      ); */
+      flex-shrink: 0;
+    }
+    .toc-progress__fill {
+      --toc-progress-angle: 0deg;
+      width: calc(var(--toc-progress-size) - calc(var(--spacing) * 1.5));
+      height: calc(var(--toc-progress-size) - calc(var(--spacing) * 1.5));
+      border-radius: inherit;
+      background: conic-gradient(
+        from -90deg,
+        var(--toc-progress-fill) var(--toc-progress-angle),
+        var(--background) var(--toc-progress-angle)
+      );
+      /* box-shadow: 0 0 2px rgba(2, 123, 249, 0.4); */
+      transition: background 200ms ease-out;
+    }
+    details[open] .toggle {
+      color: var(--sl-color-white);
+      border-color: var(--sl-color-accent);
+    }
+    details .toggle:hover {
+      color: var(--sl-color-white);
+      border-color: var(--sl-color-gray-2);
+    }
+
+    :global([dir="rtl"]) .caret {
+      transform: rotateZ(180deg);
+    }
+    details[open] .caret {
+      transform: rotateZ(90deg);
+    }
+
+    .display-current {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      color: var(--sl-color-white);
+    }
+
+    .dropdown {
+      --border-top: 1px;
+      margin-top: calc(-1 * var(--border-top));
+      border: var(--border-top) solid var(--sl-color-gray-6);
+      border-top-color: var(--sl-color-hairline-shade);
+      max-height: calc(
+        85vh - var(--sl-nav-height) - var(--sl-mobile-toc-height)
+      );
+      overflow-y: auto;
+      background-color: var(--sl-color-black);
+      box-shadow: var(--sl-shadow-md);
+      overscroll-behavior: contain;
+    }
+  }
+</style>
+
+<script>
+  import { StarlightTOC } from "./TableOfContents/starlight-toc";
+
+  class MobileStarlightTOC extends StarlightTOC {
+    private displayCurrent: HTMLSpanElement | null = null;
+    private indicator: HTMLSpanElement | null = null;
+    private indicatorFill: HTMLSpanElement | null = null;
+    private tocLinks: HTMLAnchorElement[] = [];
+
+    override set current(link: HTMLAnchorElement) {
+      super.current = link;
+      this.updateDisplay(link);
+      this.updateProgress(link);
+    }
+
+    constructor() {
+      super();
+      this.displayCurrent = this.querySelector(".display-current");
+      this.indicator = this.querySelector(".toc-progress");
+      this.indicatorFill = this.querySelector(".toc-progress__fill");
+
+      const links = this.getLinks();
+      const initial = links.find(
+        (a) => a.getAttribute("aria-current") === "true",
+      );
+      if (initial) {
+        this.updateDisplay(initial);
+        this.updateProgress(initial);
+      }
+
+      const details = this.querySelector("details");
+      if (!details) return;
+      const closeToC = () => {
+        details.open = false;
+      };
+      // Close the table of contents whenever a link is clicked.
+      links.forEach((a) => {
+        a.addEventListener("click", closeToC);
+      });
+      // Close the table of contents when a user clicks outside of it.
+      window.addEventListener("click", (e) => {
+        if (!details.contains(e.target as Node)) closeToC();
+      });
+      // Or when they press the escape key.
+      window.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && details.open) {
+          const hasFocus = details.contains(document.activeElement);
+          closeToC();
+          if (hasFocus) {
+            const summary = details.querySelector("summary");
+            if (summary) summary.focus();
+          }
+        }
+      });
+    }
+
+    private getLinks(): HTMLAnchorElement[] {
+      if (!this.tocLinks.length) {
+        this.tocLinks = Array.from(
+          this.querySelectorAll<HTMLAnchorElement>("details a"),
+        );
+      }
+      return this.tocLinks;
+    }
+
+    private updateDisplay(link: HTMLAnchorElement) {
+      if (!this.displayCurrent) {
+        this.displayCurrent = this.querySelector(
+          ".display-current",
+        ) as HTMLSpanElement | null;
+      }
+      if (!this.displayCurrent) return;
+      const text = (link.textContent || "").trim();
+      this.displayCurrent.textContent = text;
+    }
+
+    private updateProgress(link: HTMLAnchorElement) {
+      if (!this.indicator) {
+        this.indicator = this.querySelector(".toc-progress");
+      }
+      if (!this.indicatorFill) {
+        this.indicatorFill = this.querySelector(
+          ".toc-progress__fill",
+        ) as HTMLSpanElement | null;
+      }
+      const indicator = this.indicator;
+      const fill = this.indicatorFill;
+      const links = this.getLinks();
+      if (!indicator || !fill || !links.length) return;
+      const index = links.indexOf(link);
+      if (index === -1) return;
+      const progress = (index + 1) / links.length;
+      const percent = Math.round(progress * 100);
+      const angle = `${(progress * 360).toFixed(2)}deg`;
+      fill.style.setProperty("--toc-progress-angle", angle);
+      indicator.setAttribute("aria-valuenow", percent.toString());
+      indicator.setAttribute("aria-valuetext", `${percent}% of sections read`);
+    }
+  }
+
+  customElements.define("mobile-starlight-toc", MobileStarlightTOC);
+</script>

package/src/overrides/PageFrame.astro

@@ -0,0 +1,187 @@
+---
+import MobileMenuToggle from "virtual:starlight/components/MobileMenuToggle";
+
+const { hasSidebar } = Astro.locals.starlightRoute;
+const { template } = Astro.locals.starlightRoute.entry.data;
+---
+
+<div class="page sl-flex">
+  <header class="header">
+    <slot name="header" />
+    <div class="fade"></div>
+  </header>
+  {
+    hasSidebar && (
+      <nav
+        class="sidebar print:hidden"
+        aria-label={Astro.locals.t("sidebarNav.accessibleLabel")}
+      >
+        <MobileMenuToggle />
+        <div id="starlight__sidebar" class="sidebar-pane">
+          <div class="sidebar-content sl-flex">
+            <slot name="sidebar" />
+          </div>
+        </div>
+      </nav>
+    )
+  }
+
+  <div class="main-frame">
+    {
+      template === "splash" ? (
+        <slot />
+      ) : (
+        <div class="main-frame-inner">
+          <slot />
+        </div>
+      )
+    }
+  </div>
+</div>
+
+<style>
+  @layer bejamas {
+    .page {
+      flex-direction: column;
+    }
+
+    .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;
+    }
+
+    .header {
+      z-index: var(--sl-z-index-navbar);
+      position: fixed;
+      inset-inline-start: 0;
+      inset-block-start: 0;
+      width: 100%;
+      height: var(--sl-nav-height);
+      /* border-bottom: 1px solid var(--sl-color-hairline-shade); */
+      padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
+      padding-inline-end: var(--sl-nav-pad-x);
+      /* background-color: var(--sl-color-bg-nav); */
+    }
+
+    .header {
+      background-color: var(--background);
+    }
+
+    @media (min-width: 72rem) {
+      .header {
+        background-color: transparent;
+      }
+    }
+
+    :global([data-has-sidebar]) .header {
+      padding-inline-end: calc(
+        var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size)
+      );
+    }
+
+    .sidebar-pane {
+      visibility: var(--sl-sidebar-visibility, hidden);
+      position: fixed;
+      z-index: var(--sl-z-index-menu);
+      inset-block: var(--sl-nav-height) 0;
+      inset-inline-start: 0;
+      width: 100%;
+      background-color: var(--background);
+      overflow-y: auto;
+    }
+
+    :global([aria-expanded="true"]) ~ .sidebar-pane {
+      --sl-sidebar-visibility: visible;
+    }
+
+    .sidebar-content {
+      height: 100%;
+      min-height: max-content;
+      padding: 1rem var(--sl-sidebar-pad-x) 0;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    @media (min-width: 64rem) {
+      .sidebar-content::after {
+        content: "";
+        padding-bottom: 1px;
+      }
+    }
+
+    .main-frame {
+      padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
+      /* padding-inline-start: var(--sl-content-inline-start); */
+    }
+
+    .main-frame-inner {
+      position: relative;
+      background-color: var(--sl-main-frame-inner-background);
+      border: 1px solid var(--sl-main-frame-inner-border);
+      border-bottom: 0;
+      min-height: calc(100svh - var(--sl-nav-height));
+      border-radius: calc(var(--radius) + 12px) calc(var(--radius) + 12px) 0 0;
+      margin-inline: calc(var(--spacing) * 1);
+      margin-top: calc(var(--spacing) * 4);
+    }
+
+    @media (min-width: 64rem) {
+      .main-frame-inner {
+        margin-inline: 0;
+        margin-top: 0;
+      }
+    }
+
+    .main-frame-inner::before,
+    .main-frame-inner::after {
+      content: "";
+      position: absolute;
+      width: 1px;
+      height: calc(var(--spacing) * 18);
+      background: linear-gradient(
+        to bottom,
+        var(--sl-main-frame-inner-border) 0%,
+        var(--muted) 100%
+      );
+      bottom: 0;
+    }
+
+    .main-frame-inner::before {
+      left: -1px;
+    }
+
+    .main-frame-inner::after {
+      right: -1px;
+    }
+
+    @media (min-width: 50rem) {
+      :global([data-has-sidebar]) .header {
+        padding-inline-end: var(--sl-nav-pad-x);
+      }
+      .sidebar-pane {
+        --sl-sidebar-visibility: visible;
+        width: var(--sl-sidebar-width);
+        background-color: var(--sl-color-bg-sidebar);
+        border-inline-end: 1px solid var(--sl-color-hairline-shade);
+      }
+    }
+  }
+</style>