starlight-theme-bejamas 0.0.0-canary.0138fd3

package/src/overrides/Header.astro

@@ -0,0 +1,166 @@
+---
+import config from "virtual:starlight/user-config";
+
+import LanguageSelect from "virtual:starlight/components/LanguageSelect";
+import Search from "virtual:starlight/components/Search";
+import SiteTitle from "virtual:starlight/components/SiteTitle";
+import SocialIcons from "virtual:starlight/components/SocialIcons";
+import ThemeSelect from "virtual:starlight/components/ThemeSelect";
+
+import options from "virtual:starlight-theme-bejamas/user-config";
+
+import { Button } from "virtual:starlight-theme-bejamas/components/button";
+/**
+ * Render the `Search` component if Pagefind is enabled or the default search component has been overridden.
+ */
+const shouldRenderSearch =
+  config.pagefind ||
+  config.components.Search !== "@astrojs/starlight/components/Search.astro";
+
+/**
+ * Render the `nav` items if they are defined.
+ */
+
+const shouldRenderNav = options.nav && options.nav.length > 0;
+---
+
+<div class="header">
+  <div class="sl-bejamas-header-title">
+    <SiteTitle />
+    {
+      shouldRenderNav && (
+        <nav class="sl-bejamas-main-nav">
+          <ul class="gap-1 flex items-center">
+            {options.nav.map((item) => (
+              <li>
+                <Button as="a" variant="ghost" href={item.href}>
+                  {item.label}
+                </Button>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      )
+    }
+  </div>
+  <div class="sl-flex sl-bejamas-header-search sl-justify-end print:hidden">
+    {shouldRenderSearch && <Search />}
+  </div>
+  <div class="header-desktop-right print:hidden right-group">
+    <div class="sl-flex social-icons">
+      <SocialIcons />
+    </div>
+    <ThemeSelect />
+    <LanguageSelect />
+  </div>
+</div>
+
+<style>
+  @layer bejamas {
+    .sl-bejamas-header-title {
+      display: flex;
+      align-items: center;
+      gap: 1.25rem;
+    }
+
+    .sl-bejamas-header-search {
+      margin-left: auto;
+    }
+
+    .header {
+      display: flex;
+      gap: var(--sl-nav-gap);
+      justify-content: space-between;
+      align-items: center;
+      height: 100%;
+      position: relative;
+      z-index: 10;
+    }
+
+    .sl-bejamas-main-nav {
+      display: none;
+    }
+
+    .header-desktop-right {
+      display: none;
+    }
+
+    @media (min-width: 64rem) {
+      .sl-bejamas-main-nav {
+        display: block;
+      }
+
+      .header-desktop-right {
+        display: flex;
+      }
+    }
+
+    .sl-justify-end {
+      justify-content: flex-end;
+    }
+
+    .title-wrapper {
+      /* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
+      overflow: clip;
+      /* Avoid clipping focus ring around link inside title wrapper. */
+      padding: 0.25rem;
+      margin: -0.25rem;
+      min-width: 0;
+    }
+
+    .right-group,
+    .social-icons {
+      gap: 1rem;
+      align-items: center;
+    }
+    .social-icons::after {
+      content: "";
+      height: 2rem;
+      border-inline-end: 1px solid var(--sl-color-gray-5);
+    }
+
+    @media (min-width: 64rem) {
+      :global(:root[data-has-sidebar]) {
+        --__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
+      }
+      :global(.page-mobile-sidebar-only) .header {
+        --__sidebar-pad: 0rem;
+        display: flex;
+        grid-template-columns: none;
+      }
+      :global(:root:not([data-has-toc])) {
+        --__toc-width: 0rem;
+      }
+      .header {
+        --__sidebar-width: max(
+          0rem,
+          var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x)
+        );
+        --__main-column-fr: calc(
+          (
+              100% + var(--__sidebar-pad, 0rem) -
+                var(--__toc-width, var(--sl-sidebar-width)) -
+                (2 * var(--__toc-width, var(--sl-nav-pad-x))) -
+                var(--sl-content-inline-start, 0rem) - var(--sl-content-width)
+            ) /
+            2
+        );
+        display: grid;
+        grid-template-columns:
+        /* 1 (site title): runs up until the main content column’s left edge or the width of the title, whichever is the largest  */
+          minmax(
+            calc(
+              var(--__sidebar-width) +
+                max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))
+            ),
+            auto
+          )
+          /* 2 (search box): all free space that is available. */
+          1fr
+          /* 3 (right items): use the space that these need. */
+          auto;
+        align-content: center;
+      }
+    }
+  }
+</style>

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: calc(var(--radius) - 2px);
+      padding-block: 0.5rem;
+      padding-inline-start: 0.75rem;
+      padding-inline-end: 0.5rem;
+      line-height: 1;
+      background-color: var(--background);
+      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(--foreground);
+      border-color: var(--sl-color-accent);
+    }
+    details .toggle:hover {
+      color: var(--foreground);
+      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(--foreground);
+    }
+
+    .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(--popover);
+      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>