blume 0.6.2 → 0.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blume",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "Documentation that's fast, AI-ready, and zero-config.",
   "keywords": [
     "astro",

package/src/components/layout/Pagination.astro

@@ -28,7 +28,7 @@ const { prev, next, strings } = Astro.props;
         >
           <Icon class="rtl:-scale-x-100" name="arrow-left" size={16} />
           <span>
-            <span class="block text-muted-foreground text-xs">
+            <span class="block text-muted-foreground text-xs max-md:hidden">
               {strings.previous}
             </span>
             <span class="block font-medium">{prev.label}</span>
@@ -43,7 +43,7 @@ const { prev, next, strings } = Astro.props;
           href={next.route}
         >
           <span>
-            <span class="block text-muted-foreground text-xs">
+            <span class="block text-muted-foreground text-xs max-md:hidden">
               {strings.next}
             </span>
             <span class="block font-medium">{next.label}</span>

package/src/components/layout/RootLayout.astro

@@ -367,11 +367,15 @@ const bannerScript = banner?.dismissible
       class:list={["mx-auto grid grid-cols-1 items-start", gridClass]}
       data-blume-doc-grid
     >
-      {
-        showSidebar && (
       <aside
         aria-label="Primary"
-        class="fixed top-[var(--blume-drawer-top,4rem)] start-0 z-[35] h-[calc(100dvh-var(--blume-drawer-top,4rem))] w-64 max-w-[80vw] -translate-x-[105%] overflow-y-auto border-border border-e bg-background px-5 pt-4 pb-6 transition-transform rtl:translate-x-[105%] [:where([data-blume-nav-open])_&]:translate-x-0! lg:sticky lg:top-16 lg:z-auto lg:h-[calc(100dvh-4rem)] lg:w-auto lg:max-w-none lg:translate-x-0! lg:border-e-0 lg:bg-transparent lg:px-4"
+        class:list={[
+          "fixed top-[var(--blume-drawer-top,4rem)] start-0 z-[35] h-[calc(100dvh-var(--blume-drawer-top,4rem))] w-64 max-w-[80vw] -translate-x-[105%] overflow-y-auto border-border border-e bg-background px-5 pt-4 pb-6 transition-transform rtl:translate-x-[105%] [:where([data-blume-nav-open])_&]:translate-x-0! lg:sticky lg:top-16 lg:z-auto lg:h-[calc(100dvh-4rem)] lg:w-auto lg:max-w-none lg:translate-x-0! lg:border-e-0 lg:bg-transparent lg:px-4",
+          // A "bare" landing (the changelog index) has no sidebar column on
+          // desktop, but the header hamburger still needs a drawer to open on
+          // mobile — without it the toggle only locked page scroll.
+          !showSidebar && "lg:hidden",
+        ]}
       >
         {
           // Pinned links (blog, changelog, contact…) sit above every section on
@@ -419,9 +423,17 @@ const bannerScript = banner?.dismissible
           // The header's tab bar is hidden below `md`, so the drawer is the only
           // way to move between sections on mobile: list the tabs above the
           // page tree, separated by a divider. Hidden from `md` up, where the
-          // header tabs take over.
+          // header tabs take over — unless the page tree is empty (a tab-scoped
+          // standalone page like the changelog), where they keep the drawer
+          // from opening blank.
           navigation.tabs.length > 0 && (
-            <nav aria-label="Sections" class="mb-4 border-border border-b pb-4 md:hidden">
+            <nav
+              aria-label="Sections"
+              class:list={[
+                "mb-4 border-border border-b pb-4",
+                sidebar.length > 0 && "md:hidden",
+              ]}
+            >
               <ul class="m-0 list-none p-0">
                 {navigation.tabs.map((tab) => (
                   <li>
@@ -460,8 +472,6 @@ const bannerScript = banner?.dismissible
           }
         </nav>
       </aside>
-        )
-      }
       <main class="px-6 pt-6 pb-10 lg:px-8 xl:px-10" id="blume-content">
         <BreadcrumbsSlot crumbs={crumbs} wide={isApiOperation} />
         <TableOfContentsSlot

package/src/og/card.ts

@@ -80,27 +80,34 @@ export const truncate = (value: string, max: number): string => {
     : value;
 };
 
-// Brand mark sizing: target this height, but scale down so a wide wordmark logo
-// stays within the lockup.
+// Brand mark sizing: target this height, but scale down so an extremely wide
+// logo stays within the lockup. The cap leaves room for a wordmark to render
+// at full height — it stands alone as the brand (no text label beside it).
 const MARK_HEIGHT = 32;
-const MARK_MAX_WIDTH = 100;
+const MARK_MAX_WIDTH = 240;
 // Accept either quote style and a non-zero min-x/min-y; only width/height
 // matter for the aspect ratio. A miss falls back to a square mark.
 const VIEW_BOX =
   /viewBox=(?<q>["'])[\d.-]+[\s,]+[\d.-]+[\s,]+(?<w>[\d.]+)[\s,]+(?<h>[\d.]+)\k<q>/u;
 
+/** The SVG's viewBox aspect ratio (w/h), or null without a usable viewBox. */
+const logoAspect = (svg: string): number | null => {
+  const box = svg.match(VIEW_BOX);
+  const w = Number(box?.groups?.w);
+  const h = Number(box?.groups?.h);
+  return w && h ? w / h : null;
+};
+
 // Render the configured logo as the brand mark. A `currentColor` logo carries
 // no intrinsic color, so it is painted in the foreground to read on the light
 // card, then handed to Takumi as a data URI sized from the SVG's aspect ratio.
 const logoMark = (svg: string): Node => {
   const painted = svg.replaceAll("currentColor", FOREGROUND);
-  const box = painted.match(VIEW_BOX);
-  const w = Number(box?.groups?.w);
-  const h = Number(box?.groups?.h);
+  const aspect = logoAspect(painted);
   let height = MARK_HEIGHT;
-  let width = w && h ? (MARK_HEIGHT * w) / h : MARK_HEIGHT;
+  let width = aspect ? MARK_HEIGHT * aspect : MARK_HEIGHT;
   if (width > MARK_MAX_WIDTH) {
-    height = w && h ? (MARK_MAX_WIDTH * h) / w : MARK_HEIGHT;
+    height = aspect ? MARK_MAX_WIDTH / aspect : MARK_HEIGHT;
     width = MARK_MAX_WIDTH;
   }
   return image({
@@ -152,19 +159,13 @@ export const renderOgImage = (options: OgCardOptions): Promise<Buffer> => {
   const repo = options.repo?.trim();
   const site = options.site?.trim();
 
+  // Logo only — no brand-name label beside it. A wordmark logo already spells
+  // the name, and rendering the site title next to it duplicated the brand
+  // ("Ultracite  Ultracite"). Without a logo, the accent tile with the brand
+  // initial stands in.
   const header = container({
-    children: [
-      logo ? logoMark(logo) : initialMark(accent, initial),
-      brand
-        ? text(brand, {
-            color: FOREGROUND,
-            fontSize: 30,
-            fontWeight: 500,
-            letterSpacing: "-0.01em",
-          })
-        : container({}),
-    ],
-    style: { alignItems: "center", display: "flex", gap: 18 },
+    children: [logo ? logoMark(logo) : initialMark(accent, initial)],
+    style: { alignItems: "center", display: "flex" },
   });
 
   const body = container({