starlight-theme-bejamas 0.0.0-canary.0138fd3

package/src/overrides/PageFrame.astro

@@ -0,0 +1,287 @@
+---
+import MobileMenuToggle from "virtual:starlight/components/MobileMenuToggle";
+
+const { hasSidebar } = Astro.locals.starlightRoute;
+const { template } = Astro.locals.starlightRoute.entry.data;
+
+// Splash templates disable Starlight's sidebar by default, but we still want
+// the mobile menu toggle there to expose docs/components navigation.
+const shouldRenderSidebarNav = hasSidebar || template === "splash";
+const isSplashTemplate = template === "splash";
+---
+
+<div
+  class:list={[
+    "page sl-flex",
+    shouldRenderSidebarNav && "page-has-sidebar-nav",
+    isSplashTemplate && "page-mobile-sidebar-only",
+  ]}
+>
+  <header class="header">
+    <slot name="header" />
+    <div class="fade"></div>
+  </header>
+  {
+    shouldRenderSidebarNav && (
+      <nav
+        class:list={["sidebar print:hidden", isSplashTemplate && "sidebar-splash"]}
+        aria-label={Astro.locals.t("sidebarNav.accessibleLabel")}
+      >
+        <MobileMenuToggle />
+        <script>
+          if (!customElements.get("sl-sidebar-pane")) {
+            class StarlightSidebarPane extends HTMLElement {
+              constructor() {
+                super();
+
+                const desktopMediaQuery = matchMedia("(min-width: 64rem)");
+                const updatePopover = () => {
+                  this.popover = desktopMediaQuery.matches ? null : "auto";
+                };
+                updatePopover();
+                desktopMediaQuery.addEventListener("change", updatePopover);
+
+                this.addEventListener("toggle", () => {
+                  const isOpen = this.matches(":popover-open");
+                  document
+                    .querySelectorAll<HTMLElement>(".main-frame, .sl-skip-link")
+                    .forEach((element) => element.toggleAttribute("inert", isOpen));
+
+                  if (isOpen && this.closest(".sidebar-splash")) {
+                    this.scrollTop = 0;
+                  }
+                });
+              }
+            }
+
+            customElements.define("sl-sidebar-pane", StarlightSidebarPane);
+          }
+        </script>
+        <sl-sidebar-pane popover="" id="starlight__sidebar" class="sidebar-pane">
+          <div class="sidebar-content sl-flex">
+            <slot name="sidebar" />
+          </div>
+        </sl-sidebar-pane>
+      </nav>
+    )
+  }
+
+  <div class:list={["main-frame", isSplashTemplate && "main-frame-splash"]}>
+    {
+      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(--sl-page-background)
+      );
+      mask-image: linear-gradient(
+        to bottom,
+        var(--sl-page-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: 64rem) {
+      .header {
+        background-color: transparent;
+      }
+    }
+
+    :global([data-has-sidebar]) .header,
+    .page-has-sidebar-nav .header {
+      padding-inline-end: calc(
+        var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size)
+      );
+    }
+
+    .sidebar-pane {
+      border: 0;
+      margin: 0;
+      color: inherit;
+      display: none;
+      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);
+      height: calc(100svh - var(--sl-nav-height));
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-width: none;
+      scroll-behavior: auto;
+      -webkit-overflow-scrolling: touch;
+      overscroll-behavior: contain;
+      overscroll-behavior-y: contain;
+      padding: 0;
+    }
+
+    .sidebar-pane:popover-open {
+      display: block;
+    }
+
+    .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-splash {
+      position: relative;
+      isolation: isolate;
+      --sl-splash-frame-top: calc(var(--spacing) * 8);
+      --sl-splash-frame-inline: 0;
+    }
+
+    .main-frame-splash > * {
+      position: relative;
+      z-index: 1;
+    }
+
+    .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;
+      }
+    }
+
+    @media (min-width: 48rem) {
+      .main-frame-splash::before {
+        content: "";
+        position: absolute;
+        inset-inline: var(--sl-splash-frame-inline);
+        inset-block-start: var(--sl-splash-frame-top);
+        inset-block-end: 0;
+        border: 1px solid var(--sl-main-frame-inner-border);
+        border-bottom: 0;
+        border-radius: calc(var(--radius) + 12px) calc(var(--radius) + 12px) 0 0;
+        background-color: var(--sl-main-frame-inner-background);
+        pointer-events: none;
+        z-index: 0;
+      }
+
+      /* Pages with their own local splash frame keep full control. */
+      :global(.main-frame-splash:has(.page-bg))::before {
+        content: none;
+      }
+    }
+
+    /* .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: 64rem) {
+      .page-mobile-sidebar-only {
+        --sl-sidebar-width: 0;
+        --sl-content-inline-start: 0;
+      }
+
+      :global([data-has-sidebar]) .header,
+      .page-has-sidebar-nav .header {
+        padding-inline-end: var(--sl-nav-pad-x);
+      }
+      .sidebar-pane {
+        display: block;
+        width: var(--sl-sidebar-width);
+        background-color: var(--sl-color-bg-sidebar);
+        border-inline-end: 1px solid var(--sl-color-hairline-shade);
+      }
+
+      /* Keep splash templates desktop layout unchanged; only mobile gets menu panel. */
+      .sidebar-splash .sidebar-pane {
+        display: none;
+      }
+    }
+  }
+</style>

package/src/overrides/PageTitle.astro

@@ -0,0 +1,142 @@
+---
+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",
+    entry.data.template === "splash" && "px-0 sm:px-6 md:px-8",
+  ]}
+>
+  <div class="flex items-center">
+    <h1 id="_top" class="tracking-tight">
+      {Astro.locals.starlightRoute.entry.data.title}
+    </h1>
+    {
+      entry.data.figmaUrl && (
+        <a
+          href={entry.data.figmaUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex items-center justify-center h-6 w-6"
+        >
+          <svg
+            fill="none"
+            height="20"
+            viewBox="0 0 38 57"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+            class="text-lg grayscale"
+          >
+            <>
+              <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>
+        </a>
+      )
+    }
+  </div>
+
+  {
+    entry.data.template !== "splash" && (
+      <div class="sl-bejamas-docs-title-buttons">
+        {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;
+      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%;
+    max-width: 52ch;
+  }
+
+  @layer starlight.core {
+    h1 {
+      font-size: 1.875rem;
+      line-height: 1.2;
+      font-weight: 500;
+      color: var(--foreground);
+    }
+
+    @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,57 @@
+---
+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="print:hidden z-10 pagination-links" 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: flex;
+      justify-content: flex-end;
+      gap: 1rem;
+      margin-top: calc(var(--spacing) * 5);
+    }
+
+    [rel="next"] {
+      justify-content: end;
+      text-align: end;
+      flex-direction: row-reverse;
+      margin-left: auto;
+    }
+
+    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,54 @@
+---
+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;
+const { template } = Astro.locals.starlightRoute.entry.data;
+const isSplashTemplate = template === "splash";
+---
+
+{
+  isSplashTemplate ? (
+    <>
+      <div class="fade"></div>
+      <SidebarSublist sublist={sidebar} />
+    </>
+  ) : (
+    <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(--foreground);
+      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>