starlight-theme-bejamas 0.1.0 → 0.1.2

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

@@ -1,7 +1,7 @@
 {
   "name": "starlight-theme-bejamas",
   "author": "Bejamas",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "license": "MIT",
   "description": "A Starlight theme using bejamas/ui",
   "type": "module",

package/src/lib/vite.ts

@@ -27,6 +27,17 @@ export function vitePluginStarlightThemeBejamas(
           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}";`;
       }
 

package/src/overrides/Footer.astro

@@ -5,37 +5,39 @@ import Pagination from "virtual:starlight/components/Pagination";
 import config from "virtual:starlight/user-config";
 ---
 
-<footer class="sl-flex">
+<footer class="sl-flex footer-wide">
   <div class="meta sl-flex">
     <EditLink />
     <LastUpdated />
   </div>
   <Pagination />
-
-  {
-    config.credits && (
-      <a class="kudos sl-flex" href="https://bejamas.com">
-        Built at Bejamas
-      </a>
-    )
-  }
-
   <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;
-      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));
       background: linear-gradient(to top, var(--background), transparent);
-      padding-inline: calc(var(--sl-content-pad-x) + var(--spacing));
       padding-block: calc(var(--spacing) * 3);
       z-index: 10;
     }
@@ -48,6 +50,9 @@ import config from "virtual:starlight/user-config";
       .meta {
         display: flex;
       }
+      .kudos {
+        margin-bottom: calc(var(--spacing) * -10);
+      }
     }
 
     .meta {
@@ -67,20 +72,31 @@ import config from "virtual:starlight/user-config";
     .kudos {
       align-items: center;
       gap: 0.5em;
-      margin: 1.5rem auto;
+      margin-block: 0;
       font-size: var(--sl-text-xs);
       text-decoration: none;
-      color: var(--sl-color-gray-3);
+      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(--sl-color-white);
+      color: var(--foreground);
+    }
+
+    @media (min-width: 50rem) {
+      .kudos {
+        background-color: transparent;
+      }
     }
 
     .fade {
       --blur: 4px;
       --stop: 50%;
       --height: 72px;
-      position: fixed;
+      position: absolute;
       pointer-events: none;
       width: 100%;
       height: var(--height);

package/src/overrides/Header.astro

@@ -9,7 +9,7 @@ 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";
+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.
  */
@@ -43,7 +43,7 @@ const shouldRenderNav = options.nav && options.nav.length > 0;
       )
     }
   </div>
-  <div class="sl-flex sl-justify-end print:hidden">
+  <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">
@@ -62,8 +62,11 @@ const shouldRenderNav = options.nav && options.nav.length > 0;
       align-items: center;
       gap: 1.25rem;
     }
-  }
-  @layer bejamas {
+
+    .sl-bejamas-header-search {
+      margin-left: auto;
+    }
+
     .header {
       display: flex;
       gap: var(--sl-nav-gap);

package/src/overrides/Hero.astro

@@ -1,6 +1,6 @@
 ---
 import { Image } from "astro:assets";
-import Button from "virtual:starlight-theme-bejamas/components/Button.astro";
+import { Button } from "virtual:starlight-theme-bejamas/components/button";
 
 const { data } = Astro.locals.starlightRoute.entry;
 const { title = data.title, tagline, image, actions = [] } = data.hero || {};

package/src/overrides/PageTitle.astro

@@ -1,5 +1,5 @@
 ---
-import Button from "virtual:starlight-theme-bejamas/components/Button.astro";
+import { Button } from "virtual:starlight-theme-bejamas/components/button";
 
 import { ArrowRight, ArrowLeft, ArrowUpRight } from "@lucide/astro";
 

package/src/overrides/Pagination.astro

@@ -1,6 +1,5 @@
 ---
-// import { Icon } from "@astrojs/starlight/components";
-import Button from "virtual:starlight-theme-bejamas/components/Button.astro";
+import { Button } from "virtual:starlight-theme-bejamas/components/button";
 import { ArrowRight, ArrowLeft } from "@lucide/astro";
 
 const { dir, pagination } = Astro.locals.starlightRoute;
@@ -27,14 +26,6 @@ const isRtl = dir === "rtl";
   }
 </div>
 
-<!-- <div class="text-center text-sm text-muted-foreground page-footer">
-  <p>
-    Built at <a href="https://bejamas.com" class="underline underline-offset-4"
-      >Bejamas</a
-    >.
-  </p>
-</div> -->
-
 <style>
   @layer starlight.core {
     .pagination-links {

package/src/overrides/ThemeSelect.astro

@@ -1,5 +1,10 @@
 ---
-import Select from "virtual:starlight-theme-bejamas/components/Select.astro";
+import {
+  Select,
+  SelectControl,
+  SelectIndicator,
+  SelectOption,
+} from "virtual:starlight-theme-bejamas/components/select";
 
 import { SunIcon, MoonIcon, LaptopIcon } from "@lucide/astro";
 ---
@@ -12,22 +17,21 @@ import { SunIcon, MoonIcon, LaptopIcon } from "@lucide/astro";
       <LaptopIcon class="theme-icon theme-icon-auto size-4" />
     </div>
     <Select showCheckmark={false}>
-      <Select part="indicator" />
-      <Select
-        part="control"
+      <SelectIndicator />
+      <SelectControl
         showCheckmark={false}
         class="sl-bejamas-theme-select-control"
       >
-        <Select part="option" value="light"
-          ><SunIcon class="size-4" /> Light</Select
+        <SelectOption value="light"
+          ><SunIcon class="size-4" /> Light</SelectOption
         >
-        <Select part="option" value="dark"
-          ><MoonIcon class="size-4" /> Dark</Select
+        <SelectOption value="dark"
+          ><MoonIcon class="size-4" /> Dark</SelectOption
         >
-        <Select part="option" value="auto"
-          ><LaptopIcon class="size-4" /> Auto</Select
+        <SelectOption value="auto"
+          ><LaptopIcon class="size-4" /> Auto</SelectOption
         >
-      </Select>
+      </SelectControl>
     </Select>
   </div>
 </starlight-theme-select>