starlight-theme-bejamas 0.0.0-canary.0d34eb2

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# starlight-theme-bejamas
+
+## 0.1.2
+
+### Patch Changes
+
+- [#6](https://github.com/bejamas/ui/pull/6) [`fcca220`](https://github.com/bejamas/ui/commit/fcca220c0d4760edbaaefbfe2ce0af512bfadc26) Thanks [@thomkrupa](https://github.com/thomkrupa)! - convert component names to PascalCase for barrel import
+
+- [#6](https://github.com/bejamas/ui/pull/6) [`41d9e97`](https://github.com/bejamas/ui/commit/41d9e97f7cee67e95d9c9eeb112762d1487d4e4f) Thanks [@thomkrupa](https://github.com/thomkrupa)! - change imports of bejamas/ui components
+
+## 0.1.1
+
+### Patch Changes
+
+- fix search position on tablet screen size

package/package.json

@@ -0,0 +1,49 @@
+{
+	"name": "starlight-theme-bejamas",
+	"author": "Bejamas",
+	"version": "0.0.0-canary.0d34eb2",
+	"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",
+		"./overrides/MobileTableOfContents.astro": "./src/overrides/MobileTableOfContents.astro",
+		"./overrides/Footer.astro": "./src/overrides/Footer.astro",
+		"./overrides/ThemeSelect.astro": "./src/overrides/ThemeSelect.astro",
+		"./overrides/ThemeProvider.astro": "./src/overrides/ThemeProvider.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",
+		"@lucide/astro": "^0.545.0"
+	}
+}

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/env.d.ts

@@ -0,0 +1,16 @@
+/// <reference path="./virtual-modules.d.ts" />
+/// <reference path="./virtual-internal.d.ts" />
+
+import type { I18nT } from "@astrojs/starlight/utils/createTranslationSystem";
+import type { StarlightRouteData } from "@astrojs/starlight/utils/routing/types";
+
+declare global {
+  namespace App {
+    interface Locals {
+      t: I18nT;
+      starlightRoute: StarlightRouteData;
+    }
+  }
+}
+
+export {};

package/src/global.d.ts

@@ -0,0 +1,18 @@
+declare global {
+  interface Window {
+    StarlightThemeProvider?: {
+      updatePickers: (theme?: string) => void;
+    };
+  }
+
+  const StarlightThemeProvider: {
+    updatePickers: (theme?: string) => void;
+  };
+
+  namespace App {
+    interface Locals {
+      t: I18nT;
+      starlightRoute: StarlightRouteData;
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,159 @@
+import type {
+  StarlightPlugin,
+  StarlightUserConfig,
+} from "@astrojs/starlight/types";
+import type { AstroIntegration, AstroIntegrationLogger } from "astro";
+
+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: { message: string }) => issue.message)
+        .join("\n")}`,
+    );
+  }
+
+  const config = parsedConfig.data;
+
+  return {
+    name: "starlight-theme-bejamas-plugin",
+    hooks: {
+      "config:setup": function ({
+        config: starlightConfig,
+        logger,
+        updateConfig,
+        addIntegration,
+      }: {
+        config: StarlightUserConfig;
+        logger: AstroIntegrationLogger;
+        updateConfig: (config: StarlightUserConfig) => void;
+        addIntegration: (integration: AstroIntegration) => void;
+      }) {
+        const userExpressiveCodeConfig =
+          starlightConfig.expressiveCode === false ||
+          starlightConfig.expressiveCode === true
+            ? {}
+            : starlightConfig.expressiveCode;
+
+        // starlightConfig.plugins?.push(
+        //   pluginLineNumbers({
+        //     showLineNumbers: true,
+        //   }),
+        // );
+
+        const componentOverrides: typeof config.components = {};
+
+        type OverridableComponent =
+          | "Header"
+          | "PageFrame"
+          | "SiteTitle"
+          | "Pagination"
+          | "PageTitle"
+          | "Hero"
+          | "MobileTableOfContents"
+          | "Footer"
+          | "ThemeSelect"
+          | "ThemeProvider";
+
+        const overridableComponents: OverridableComponent[] = [
+          "Header",
+          "PageFrame",
+          "SiteTitle",
+          "Pagination",
+          "PageTitle",
+          "Hero",
+          "MobileTableOfContents",
+          "Footer",
+          "ThemeSelect",
+          "ThemeProvider",
+        ];
+
+        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",
+            ...(starlightConfig.customCss ?? []),
+            "starlight-theme-bejamas/styles/theme.css",
+          ],
+          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,
+                    },
+                  },
+                  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/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/vite.ts

@@ -0,0 +1,62 @@
+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];
+
+        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.\"); })()`;
+        }
+
+        // Check if target is a barrel import (no .astro extension) or old-style file import
+        const isBarrelImport = !target.endsWith(".astro");
+
+        if (isBarrelImport) {
+          // For barrel imports, the component is exported as a named export in PascalCase
+          // Convert componentName (e.g., 'button') to PascalCase (e.g., 'Button')
+          const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
+          return `export { ${pascalCaseName} as default, ${pascalCaseName} } from "${target}"; export * from "${target}";`;
+        }
+
+        // Old pattern: .astro file with default export
+        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/Footer.astro

@@ -0,0 +1,130 @@
+---
+import EditLink from "virtual:starlight/components/EditLink";
+import LastUpdated from "virtual:starlight/components/LastUpdated";
+import Pagination from "virtual:starlight/components/Pagination";
+import config from "virtual:starlight/user-config";
+---
+
+<footer class="sl-flex footer-wide">
+  <div class="meta sl-flex">
+    <EditLink />
+    <LastUpdated />
+  </div>
+  <Pagination />
+  <div class="fade"></div>
+</footer>
+
+{
+  config.credits && (
+    <a class="kudos sl-flex footer-wide" href="https://ui.bejamas.com">
+      Built at Bejamas
+    </a>
+  )
+}
+
+<style>
+  @layer starlight.core {
+    .footer-wide {
+      width: calc(
+        100% + calc(var(--sl-content-pad-x) * 2) + calc(var(--spacing) * 2)
+      );
+      margin-inline: calc(var(--spacing) * -1 - var(--sl-content-pad-x));
+      padding-inline: calc(var(--sl-content-pad-x) + var(--spacing));
+    }
+
+    footer {
+      flex-direction: column;
+      gap: 1.5rem;
+      position: sticky;
+      bottom: 0;
+      background: linear-gradient(to top, var(--background), transparent);
+      padding-block: calc(var(--spacing) * 3);
+      z-index: 10;
+    }
+
+    @media (min-width: 50rem) {
+      footer {
+        position: relative;
+        background: transparent;
+      }
+      .meta {
+        display: flex;
+      }
+      .kudos {
+        margin-bottom: calc(var(--spacing) * -10);
+      }
+    }
+
+    .meta {
+      gap: 0.75rem 3rem;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      margin-top: 3rem;
+      font-size: var(--sl-text-sm);
+      color: var(--sl-color-gray-3);
+      display: none;
+    }
+
+    .meta > :global(p:only-child) {
+      margin-inline-start: auto;
+    }
+
+    .kudos {
+      align-items: center;
+      gap: 0.5em;
+      margin-block: 0;
+      font-size: var(--sl-text-xs);
+      text-decoration: none;
+      color: var(--muted-foreground);
+      justify-content: center;
+      padding-top: calc(var(--spacing) * 12);
+      padding-bottom: calc(var(--spacing) * 10);
+      background-color: var(--background);
+      justify-content: center;
+    }
+    .kudos:hover {
+      color: var(--foreground);
+    }
+
+    @media (min-width: 50rem) {
+      .kudos {
+        background-color: transparent;
+      }
+    }
+
+    .fade {
+      --blur: 4px;
+      --stop: 50%;
+      --height: 72px;
+      position: absolute;
+      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 bottom, transparent, var(--background));
+      mask-image: linear-gradient(
+        to top,
+        var(--background) var(--stop),
+        transparent
+      );
+      bottom: 0;
+    }
+
+    @media (min-width: 50rem) {
+      .fade {
+        display: none;
+      }
+    }
+  }
+
+  @layer starlight.components {
+    .kudos :global(svg) {
+      color: var(--sl-color-orange);
+    }
+  }
+</style>

package/src/overrides/Header.astro

@@ -0,0 +1,153 @@
+---
+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="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;
+    }
+
+    .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;
+    }
+
+    @media (min-width: 50rem) {
+      .sl-bejamas-main-nav {
+        display: block;
+      }
+    }
+
+    .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(: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>