starlight-theme-bejamas 0.0.0-canary.58c2686

package/package.json

@@ -0,0 +1,46 @@
+{
+	"name": "starlight-theme-bejamas",
+	"author": "Bejamas",
+	"version": "0.0.0-canary.58c2686",
+	"license": "MIT",
+	"description": "A Starlight theme using bejamas/ui",
+	"type": "module",
+	"exports": {
+		".": "./src/index.ts",
+		"./config": "./src/config.ts",
+		"./styles/theme.css": "./src/styles/theme.css",
+		"./overrides/Header.astro": "./src/overrides/Header.astro",
+		"./overrides/PageFrame.astro": "./src/overrides/PageFrame.astro",
+		"./overrides/SiteTitle.astro": "./src/overrides/SiteTitle.astro",
+		"./overrides/Pagination.astro": "./src/overrides/Pagination.astro",
+		"./overrides/PageTitle.astro": "./src/overrides/PageTitle.astro",
+		"./overrides/Hero.astro": "./src/overrides/Hero.astro"
+	},
+	"scripts": {},
+	"keywords": [
+		"starlight",
+		"theme",
+		"bejamas",
+		"bejamas/ui",
+		"astro",
+		"astro-component",
+		"withastro"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/bejamas/ui.git",
+		"directory": "packages/starlight-theme-bejamas"
+	},
+	"bugs": "https://github.com/bejamas/ui/issues",
+	"peerDependencies": {
+		"@astrojs/starlight": ">=0.33.0",
+		"astro": ">=5.5.0"
+	},
+	"dependencies": {
+		"@expressive-code/plugin-line-numbers": "^0.41.3",
+		"@fontsource-variable/inter": "^5.2.8",
+		"@fontsource/inter": "^5.2.8",
+		"add": "^2.0.6",
+		"bun": "^1.2.22"
+	}
+}

package/src/config.ts

@@ -0,0 +1,50 @@
+import type { AstroBuiltinAttributes } from "astro";
+import type { HTMLAttributes } from "astro/types";
+import { z } from "astro/zod";
+
+const linkHTMLAttributesSchema = z.record(
+  z.union([z.string(), z.number(), z.boolean(), z.undefined()])
+) as z.Schema<
+  Omit<HTMLAttributes<"a">, keyof AstroBuiltinAttributes | "children">
+>;
+
+// eslint-disable-next-line ts/explicit-function-return-type
+const LinkItemHTMLAttributesSchema = () => linkHTMLAttributesSchema.default({});
+
+const navLinkSchema = z.object({
+  /**
+   * An optional badge to display next to the topic label.
+   *
+   * This option accepts the same configuration as the Starlight badge sidebar item configuration.
+   * @see https://starlight.astro.build/guides/sidebar/#badges
+   */
+  badge: z.string().optional(),
+  /**
+   * The topic label visible at the top of the sidebar.
+   *
+   * The value can be a string, or for multilingual sites, an object with values for each different locale. When using
+   * the object form, the keys must be BCP-47 tags (e.g. en, fr, or zh-CN).
+   */
+  label: z.union([z.string(), z.record(z.string())]),
+  /**
+   * The link to the topic’s content which an be a relative link to local files or the full URL of an external page.
+   *
+   * For internal links, the link can either be a page included in the items array or a different page acting as the
+   * topic’s landing page.
+   */
+  href: z.string(),
+  /** HTML attributes to add to the link item. */
+  attrs: LinkItemHTMLAttributesSchema(),
+});
+
+export const StarlightThemeBejamasConfigSchema = z.object({
+  nav: z.array(navLinkSchema).optional(),
+  components: z.record(z.string()).optional(),
+});
+
+export type StarlightThemeBejamasUserConfig = z.input<
+  typeof StarlightThemeBejamasConfigSchema
+>;
+export type StarlightThemeBejamasConfig = z.output<
+  typeof StarlightThemeBejamasConfigSchema
+>;

package/src/index.ts

@@ -0,0 +1,150 @@
+import type { StarlightPlugin } from "@astrojs/starlight/types";
+
+import { createInlineSvgUrl } from "@astrojs/starlight/expressive-code";
+
+import {
+  StarlightThemeBejamasConfigSchema,
+  type StarlightThemeBejamasUserConfig,
+} from "./config";
+import { vitePluginStarlightThemeBejamas } from "./lib/vite";
+import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
+
+export default function starlightThemeBejamas(
+  userConfig: StarlightThemeBejamasUserConfig,
+): StarlightPlugin {
+  const parsedConfig = StarlightThemeBejamasConfigSchema.safeParse(userConfig);
+
+  if (!parsedConfig.success) {
+    throw new Error(
+      `The provided plugin configuration is invalid.\n${parsedConfig.error.issues.map((issue) => issue.message).join("\n")}`,
+    );
+  }
+
+  const config = parsedConfig.data;
+
+  return {
+    name: "starlight-theme-bejamas-plugin",
+    hooks: {
+      "config:setup": function ({
+        config: starlightConfig,
+        logger,
+        updateConfig,
+        addIntegration,
+      }) {
+        const userExpressiveCodeConfig =
+          starlightConfig.expressiveCode === false ||
+          starlightConfig.expressiveCode === true
+            ? {}
+            : starlightConfig.expressiveCode;
+
+        console.log({ plugins: starlightConfig.plugins });
+
+        starlightConfig.plugins?.push(
+          pluginLineNumbers({
+            showLineNumbers: true,
+          }),
+        );
+
+        const componentOverrides: typeof config.components = {};
+
+        type OverridableComponent =
+          | "Header"
+          | "PageFrame"
+          | "SiteTitle"
+          | "Pagination"
+          | "PageTitle"
+          | "Hero";
+
+        const overridableComponents: OverridableComponent[] = [
+          "Header",
+          "PageFrame",
+          "SiteTitle",
+          "Pagination",
+          "PageTitle",
+          "Hero",
+        ];
+
+        for (const component of overridableComponents) {
+          if (config.components?.[component]) {
+            logger.warn(
+              `It looks like you already have a \`${component}\` component override in your Starlight configuration.`,
+            );
+          } else {
+            componentOverrides[component] =
+              `starlight-theme-bejamas/overrides/${component}.astro`;
+          }
+        }
+
+        updateConfig({
+          components: {
+            ...componentOverrides,
+            ...config.components,
+          },
+          customCss: [
+            "@fontsource/inter/400.css",
+            "@fontsource/inter/500.css",
+            "@fontsource/inter/700.css",
+            // "@fontsource-variable/inter",
+            ...(starlightConfig.customCss ?? []),
+            // "starlight-theme-bejamas/styles/layers",
+            "starlight-theme-bejamas/styles/theme.css",
+            // "starlight-theme-bejamas/styles/base",
+          ],
+          expressiveCode:
+            starlightConfig.expressiveCode === false
+              ? false
+              : {
+                  themes: ["github-dark-default", "github-light-default"],
+                  ...userExpressiveCodeConfig,
+                  styleOverrides: {
+                    codeBackground: "var(--code-background)",
+                    borderWidth: "0px",
+                    borderRadius: "calc(var(--radius) + 4px)",
+                    gutterBorderWidth: "0px",
+                    ...userExpressiveCodeConfig?.styleOverrides,
+                    frames: {
+                      editorBackground: "var(--code-background)",
+                      terminalBackground: "var(--code-background)",
+                      copyIcon: createInlineSvgUrl(
+                        `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg>`,
+                      ),
+                      ...userExpressiveCodeConfig?.styleOverrides?.frames,
+                    },
+                    textMarkers: {
+                      markBackground: "var(--mark-background)",
+                      markBorderColor: "var(--border)",
+                      ...userExpressiveCodeConfig?.styleOverrides?.textMarkers,
+                    },
+                  },
+                  // plugins: [
+                  //   pluginLineNumbers({
+                  //     showLineNumbers: false,
+                  //   }),
+                  // ],
+                  defaultProps: {
+                    showLineNumbers: false,
+                    overridesByLang: {
+                      astro: {
+                        showLineNumbers: true,
+                      },
+                    },
+                  },
+                },
+        });
+
+        addIntegration({
+          name: "starlight-theme-bejamas-integration",
+          hooks: {
+            "astro:config:setup": ({ updateConfig }) => {
+              updateConfig({
+                vite: {
+                  plugins: [vitePluginStarlightThemeBejamas(config)],
+                },
+              });
+            },
+          },
+        });
+      },
+    },
+  };
+}

package/src/lib/vite.ts

@@ -0,0 +1,52 @@
+import type { ViteUserConfig } from "astro";
+import type { StarlightThemeBejamasConfig } from "../config";
+
+export function vitePluginStarlightThemeBejamas(
+  config: StarlightThemeBejamasConfig
+): VitePlugin {
+  const moduleId = "virtual:starlight-theme-bejamas/user-config";
+  const resolvedModuleId = `\0${moduleId}`;
+  const moduleContent = `export default ${JSON.stringify(config)}`;
+
+  const componentsPrefix = "virtual:starlight-theme-bejamas/components/";
+  const resolvedComponentsPrefix = `\0${componentsPrefix}`;
+
+  return {
+    name: "vite-plugin-starlight-theme-bejamas",
+    load(id) {
+      if (id === resolvedModuleId) {
+        return moduleContent;
+      }
+
+      if (id.startsWith(resolvedComponentsPrefix)) {
+        const componentId = id.slice(resolvedComponentsPrefix.length);
+        const componentName = componentId.replace(/\.astro$/, "");
+        const target = config.components?.[componentName];
+
+        console.log({ target });
+        if (!target) {
+          return `export default (()=>{ throw new Error(\"starlight-theme-bejamas: No component mapping found for '${componentName}'. Add it under 'components' in your starlightThemeBejamas config.\"); })()`;
+        }
+
+        return `export { default } from "${target}"; export * from "${target}";`;
+      }
+
+      return undefined;
+    },
+    resolveId(id) {
+      if (id === moduleId) {
+        return resolvedModuleId;
+      }
+
+      if (id.startsWith(componentsPrefix)) {
+        const componentId = id.slice(componentsPrefix.length);
+        const componentName = componentId.replace(/\.astro$/, "");
+        return `${resolvedComponentsPrefix}${componentName}`;
+      }
+
+      return undefined;
+    },
+  };
+}
+
+type VitePlugin = NonNullable<ViteUserConfig["plugins"]>[number];

package/src/overrides/Header.astro

@@ -0,0 +1,140 @@
+---
+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.astro";
+/**
+ * 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>
+          <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-justify-end print:hidden">
+    {shouldRenderSearch && <Search />}
+  </div>
+  <div class="sl-hidden md:sl-flex 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;
+    }
+  }
+  @layer bejamas {
+    .header {
+      display: flex;
+      gap: var(--sl-nav-gap);
+      justify-content: space-between;
+      align-items: center;
+      height: 100%;
+      position: relative;
+      z-index: 10;
+    }
+
+    .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: 50rem) {
+      :global(:root[data-has-sidebar]) {
+        --__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
+      }
+      :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.astro";
+
+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/PageFrame.astro

@@ -0,0 +1,126 @@
+---
+import MobileMenuToggle from "virtual:starlight/components/MobileMenuToggle";
+
+const { hasSidebar } = Astro.locals.starlightRoute;
+---
+
+<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"><slot /></div>
+</div>
+
+<style>
+  @layer bejamas {
+    .page {
+      flex-direction: column;
+      min-height: 100vh;
+    }
+
+    .fade {
+      --blur: 4px;
+      --stop: 50%;
+      --height: 120px;
+      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); */
+    }
+
+    :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(--sl-color-black);
+      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: 50rem) {
+      .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);
+    }
+
+    @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>

package/src/overrides/PageTitle.astro

@@ -0,0 +1,71 @@
+---
+import Button from "virtual:starlight-theme-bejamas/components/Button.astro";
+import { Icon } from "@astrojs/starlight/components";
+import { ArrowLeft, ArrowRight } 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="test">{Astro.locals.starlightRoute.entry.data.title}</h1>
+
+  {
+    entry.data.template !== "splash" && (
+      <div class="sl-bejamas-docs-title-buttons">
+        <Button as="a" size="sm" href="#content" variant="secondary">
+          Copy Markdown
+        </Button>
+        {prev && (
+          <Button
+            as="a"
+            href={isRtl ? next.href : prev.href}
+            variant="secondary"
+            size="icon-sm"
+          >
+            <ArrowLeft size="1.5rem" />
+          </Button>
+        )}
+        {next && (
+          <Button
+            as="a"
+            href={isRtl ? prev.href : next.href}
+            variant="secondary"
+            size="icon-sm"
+          >
+            <ArrowRight size="1.5rem" />
+          </Button>
+        )}
+      </div>
+    )
+  }
+</div>
+
+<style>
+  @layer bejamas {
+    .sl-bejamas-docs-title {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 0.5rem;
+    }
+    .sl-bejamas-docs-title-buttons {
+      display: flex;
+      gap: 0.5rem;
+    }
+  }
+
+  @layer starlight.core {
+    h1 {
+      font-size: var(--sl-text-h1);
+      line-height: var(--sl-line-height-headings);
+      font-weight: 500;
+      color: var(--sl-color-white);
+    }
+  }
+</style>

package/src/overrides/Pagination.astro

@@ -0,0 +1,47 @@
+---
+import { Icon } from "@astrojs/starlight/components";
+import Button from "virtual:starlight-theme-bejamas/components/Button.astro";
+
+const { dir, pagination } = Astro.locals.starlightRoute;
+const { prev, next } = pagination;
+const isRtl = dir === "rtl";
+---
+
+<div class="flex justify-between print:hidden" dir={dir}>
+  {
+    prev && (
+      <Button as="a" href={prev.href} rel="prev" variant="outline">
+        <Icon name={isRtl ? "right-arrow" : "left-arrow"} size="1.25rem" />
+        {prev.label}
+      </Button>
+    )
+  }
+  {
+    next && (
+      <Button as="a" href={next.href} rel="next" variant="outline">
+        <Icon name={isRtl ? "left-arrow" : "right-arrow"} size="1.25rem" />
+        {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;
+    }
+  }
+</style>

package/src/overrides/Sidebar.astro

@@ -0,0 +1,15 @@
+---
+import MobileMenuFooter from 'virtual:starlight/components/MobileMenuFooter';
+import SidebarPersister from './SidebarPersister.astro';
+import SidebarSublist from './SidebarSublist.astro';
+
+const { sidebar } = Astro.locals.starlightRoute;
+---
+
+<SidebarPersister>
+	<SidebarSublist sublist={sidebar} />
+</SidebarPersister>
+
+<div class="md:sl-hidden">
+	<MobileMenuFooter />
+</div>

package/src/overrides/SidebarSublist.astro

@@ -0,0 +1,150 @@
+---
+import { flattenSidebar } from '../utils/navigation';
+import type { SidebarEntry } from '../utils/routing/types';
+import Icon from '../user-components/Icon.astro';
+import Badge from '../user-components/Badge.astro';
+import SidebarRestorePoint from './SidebarRestorePoint.astro';
+
+interface Props {
+	sublist: SidebarEntry[];
+	nested?: boolean;
+}
+
+const { sublist, nested } = Astro.props;
+---
+
+<ul class:list={{ 'top-level': !nested }}>
+  asdas
+	{
+		sublist.map((entry) => (
+			<li>
+				{entry.type === 'link' ? (
+					<a
+						href={entry.href}
+						aria-current={entry.isCurrent && 'page'}
+						class:list={[{ large: !nested }, entry.attrs.class]}
+						{...entry.attrs}
+					>
+						<span>{entry.label}</span>
+						{entry.badge && (
+							<Badge
+								variant={entry.badge.variant}
+								class={entry.badge.class}
+								text={entry.badge.text}
+							/>
+						)}
+					</a>
+				) : (
+					<details
+						open={flattenSidebar(entry.entries).some((i) => i.isCurrent) || !entry.collapsed}
+					>
+						<SidebarRestorePoint />
+						<summary>
+							<div class="group-label">
+								<span class="large">{entry.label}</span>
+								{entry.badge && (
+									<Badge
+										variant={entry.badge.variant}
+										class={entry.badge.class}
+										text={entry.badge.text}
+									/>
+								)}
+							</div>
+							<Icon name="right-caret" class="caret" size="1.25rem" />
+						</summary>
+						<Astro.self sublist={entry.entries} nested />
+					</details>
+				)}
+			</li>
+		))
+	}
+</ul>
+
+<style>
+	@layer starlight.core {
+		ul {
+			--sl-sidebar-item-padding-inline: 0.5rem;
+			list-style: none;
+			padding: 0;
+		}
+
+		li {
+			overflow-wrap: anywhere;
+		}
+
+
+		.large {
+			font-size: var(--sl-text-lg);
+			font-weight: 600;
+			color: var(--sl-color-white);
+		}
+
+		.top-level > li + li {
+			margin-top: 0.75rem;
+		}
+
+		summary {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0.2em var(--sl-sidebar-item-padding-inline);
+			line-height: 1.4;
+			cursor: pointer;
+			user-select: none;
+		}
+		summary::marker,
+		summary::-webkit-details-marker {
+			display: none;
+		}
+
+		.caret {
+			transition: transform 0.2s ease-in-out;
+			flex-shrink: 0;
+		}
+		:global([dir='rtl']) .caret {
+			transform: rotateZ(180deg);
+		}
+		[open] > summary .caret {
+			transform: rotateZ(90deg);
+		}
+
+		a {
+			display: block;
+			border-radius: 0.25rem;
+			text-decoration: none;
+			color: var(--sl-color-gray-2);
+			padding: 0.3em var(--sl-sidebar-item-padding-inline);
+			line-height: 1.4;
+		}
+
+		a:hover,
+		a:focus {
+			color: var(--sl-color-white);
+		}
+
+		[aria-current='page'],
+		[aria-current='page']:hover,
+		[aria-current='page']:focus {
+			font-weight: 600;
+			color: var(--sl-color-text-invert);
+			background-color: var(--sl-color-text-accent);
+		}
+
+		a > *:not(:last-child),
+		.group-label > *:not(:last-child) {
+			margin-inline-end: 0.25em;
+		}
+
+		@media (min-width: 50rem) {
+			.top-level > li + li {
+				margin-top: 0.5rem;
+			}
+			.large {
+				font-size: var(--sl-text-base);
+			}
+			a {
+				font-size: var(--sl-text-sm);
+			}
+		}
+	}
+</style>

package/src/overrides/SiteTitle.astro

@@ -0,0 +1,57 @@
+---
+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/styles/theme.css

@@ -0,0 +1,292 @@
+@layer starlight, bejamas;
+
+@import "@fontsource-variable/inter/index.css";
+
+@layer bejamas {
+  :root {
+    --sl-font: "Inter Variable", sans-serif;
+    --sl-font-mono: "Geist Mono", monospace;
+
+    --radius: 0.5rem;
+
+    --sl-color-text-accent: var(--accent-foreground);
+
+    --sl-color-banner-text: var(--foreground);
+
+    --sl-color-bg-inline-code: var(--muted);
+
+    --sl-color-hairline-shade: var(--border);
+
+    --sl-color-bg-sidebar: var(--background);
+
+    --sl-color-gray-5: var(--input);
+    --sl-color-black: transparent;
+
+    --code-background: var(--muted);
+    --sl-color-text: var(--foreground);
+
+    --sl-text-h1: 2.25rem;
+    --sl-text-h2: var(--text-xl);
+    --sl-text-h3: var(--text-lg);
+
+    --sl-color-gray-2: var(--input);
+
+    --default-font-family: "Inter Variable", sans-serif;
+    --font-sans: "Inter Variable", sans-serif;
+
+    --sl-color-bg: var(--background);
+    --sl-color-fg: var(--foreground);
+    --sl-color-primary: var(--primary);
+    --sl-color-primary-fg: var(--primary-foreground);
+
+    --sl-color-hairline: var(--border);
+    --sl-color-bg-nav: var(--background);
+
+    --sl-color-text-accent: var(--primary);
+    --sl-color-accent: var(--primary);
+  }
+}
+
+@layer bejamas {
+  .sidebar-pane .sidebar-content,
+  .right-sidebar-panel {
+    --sl-sidebar-item-padding-inline: 1rem;
+    padding-top: 3rem;
+  }
+
+  .right-sidebar,
+  .sidebar .sidebar-pane {
+    border: 0;
+  }
+
+  .sidebar-content a {
+    background-color: var(--background);
+    padding: 0;
+  }
+
+  .group-label > span {
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .group-label + svg {
+    color: var(--muted-foreground);
+    font-size: 1rem;
+  }
+
+  .sidebar-content a > span {
+    color: var(--foreground);
+    padding-inline: 0.5rem;
+    padding-block: 0.375rem;
+    border-radius: 0.5rem;
+    /* transition-property: color, background-color;
+    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-duration: 0.05s; */
+    display: inline-block;
+  }
+
+  .sidebar-content a[aria-current="page"] > span {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    font-weight: 500;
+  }
+
+  .sidebar-content a:not([aria-current="page"]):hover > span {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+  }
+
+  .sidebar-content ul ul li {
+    margin-inline-start: 0;
+    border-inline-start: 0;
+    padding-inline-start: 0;
+    margin-bottom: 1px;
+  }
+
+  .right-sidebar-container {
+    max-width: 20rem;
+    margin-right: 0;
+    margin-left: auto;
+  }
+
+  .content-panel {
+    border-top: 0;
+  }
+
+  .content-panel:first-child {
+    padding-bottom: 0;
+    padding-top: 2.5rem;
+  }
+
+  .right-sidebar-panel h2 {
+    color: var(--color-muted-foreground);
+    font-size: 0.875rem;
+    font-weight: 500;
+    padding-inline: 0.5rem;
+  }
+
+  site-search button {
+    --tw-shadow: var(--shadow-sm);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    border-radius: calc(var(--radius) - 2px);
+  }
+
+  .expressive-code .frame {
+    box-shadow: none;
+  }
+
+  ul.top-level li details ul li:last-child {
+    margin-bottom: 1.25rem;
+  }
+
+  ul.top-level summary {
+    margin-bottom: 0.25rem;
+  }
+
+  starlight-tabs[data-sync-key="pkg"] .tablist-wrapper {
+    background-color: var(--code-background);
+    border-bottom: 1px solid var(--color-border);
+
+    padding-top: 0.5rem;
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+    font-family: var(--sl-font-mono);
+    font-size: 0.875rem;
+  }
+
+  starlight-tabs[data-sync-key="pkg"] .tablist-wrapper ul {
+    padding-bottom: 0.5rem;
+    padding-inline: 0.75rem;
+    border-bottom: 0;
+    gap: 0;
+  }
+
+  starlight-tabs[data-sync-key="pkg"] .tablist-wrapper a {
+    border-bottom: 0;
+    padding-block: 0.5rem;
+    padding-inline: 0.75rem;
+  }
+
+  starlight-tabs[data-sync-key="pkg"] .tablist-wrapper a[aria-selected="true"] {
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+    border-bottom: 0;
+    border-radius: 0.5rem;
+  }
+
+  starlight-tabs[data-sync-key="pkg"] .tablist-wrapper ~ div[role="tabpanel"] {
+    margin-top: 0;
+  }
+
+  starlight-tabs[data-sync-key="pkg"] figcaption.header {
+    display: none;
+  }
+
+  .tablist-wrapper > ul {
+    border: 0;
+    gap: 1.25rem;
+  }
+
+  .tablist-wrapper > ul a {
+    padding-inline: 0;
+  }
+
+  .sl-heading-wrapper.level-h2 {
+    margin-top: 4rem;
+  }
+
+  .sl-heading-wrapper.level-h3 {
+    margin-top: 3rem;
+  }
+
+  .sl-markdown-content a:not(:where(.not-content *)) {
+    text-decoration: underline;
+    text-underline-offset: 4px;
+  }
+
+  button[data-open-modal] {
+    border-color: var(--border);
+    color: var(--foreground);
+    box-shadow: var(--shadow-xs);
+    background-color: var(--background);
+    height: 2.375rem;
+  }
+
+  button[data-open-modal] kbd {
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+    border-radius: calc(var(--radius) - 4px);
+    gap: 0;
+  }
+
+  .tablist-wrapper ~ [role="tabpanel"] {
+    margin-top: 0.5rem;
+  }
+
+  .expressive-code .title {
+    background-color: var(--color-muted);
+    color: var(--color-muted-foreground);
+    border-color: var(--color-border);
+
+    font-family: var(--sl-font-mono);
+    width: 100%;
+    border-bottom: 1px solid var(--color-border);
+    font-size: 0.875rem;
+    padding-block: 0.75rem;
+  }
+
+  .sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
+    font-weight: 500;
+  }
+
+  .sl-bejamas-component-preview {
+    min-height: 450px;
+    padding: 1rem;
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--background);
+  }
+
+  .sl-markdown-content ul:not(:where(.not-content *)) {
+    list-style: disc;
+    padding-left: 1rem;
+  }
+
+  .sl-markdown-content ol:not(:where(.not-content *)) {
+    list-style: decimal;
+    padding-left: 1rem;
+  }
+
+  .tablist-wrapper {
+    overflow-x: inherit;
+  }
+
+  .tablist-wrapper a[role="tab"] {
+    border-bottom: 0;
+    padding: 0;
+    display: inline-block;
+  }
+
+  .sl-markdown-content :is(th, td):not(:where(.not-content *)) {
+    min-width: 10rem;
+    padding-inline: 1rem;
+    border-color: var(--border);
+  }
+
+  .sl-markdown-content
+    :is(tr):last-child
+    :is(th, td):not(:where(.not-content *)) {
+    border-bottom: 0;
+  }
+
+  .sl-markdown-content table:not(:where(.not-content *)) {
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) - 2px);
+  }
+}