blume 0.6.7 → 0.8.0

package/src/components/layout/NavTree.astro

@@ -1,6 +1,9 @@
 ---
+import { EN_UI } from "../../core/i18n-ui.ts";
+import type { UIStrings } from "../../core/i18n-ui.ts";
 import type { NavNode } from "../../core/types.ts";
 import Icon from "../Icon.astro";
+import { withBase } from "../islands/base-path.ts";
 import Self from "./NavTree.astro";
 
 interface PagePanel {
@@ -21,6 +24,8 @@ interface Props {
   idPrefix?: string;
   /** True only for the top-level call; renders the `<blume-nav>` panel stack. */
   root?: boolean;
+  /** Localized labels ("Back", the deprecated badge); English when omitted. */
+  strings?: UIStrings["nav"];
 }
 
 const {
@@ -29,12 +34,18 @@ const {
   depth = 0,
   idPrefix = "n",
   root = depth === 0,
+  strings,
 } = Astro.props;
 
+// Merge over the English defaults so a label missing from a translation (or
+// from a not-yet-regenerated snapshot) still renders instead of coming out
+// blank — the PageActions pattern.
+const n = { ...EN_UI.nav, ...strings };
+
 const badgeBase =
   "shrink-0 rounded-full px-1.5 py-0.5 font-medium text-[0.65rem] leading-none";
 const badgeClass = `${badgeBase} bg-muted text-muted-foreground`;
-// HTTP-method badges (from an OpenAPI reference's sidebar) are colour-coded;
+// HTTP-method badges (from an OpenAPI reference's sidebar) are color-coded;
 // every other badge keeps the neutral style.
 const METHOD_BADGE: Record<string, string> = {
   DELETE: "bg-red-500/15 text-red-700 dark:text-red-300",
@@ -113,13 +124,14 @@ const initialId =
           idPrefix={idPrefix}
           items={items}
           root={false}
+          strings={n}
         />
       </div>
       {panels.map((panel) => (
         <div data-nav-panel={panel.id} hidden={panel.id !== initialId}>
           <div class="mb-3 flex items-center gap-1.5">
             <button
-              aria-label="Back"
+              aria-label={n.back}
               class="-ml-1 flex shrink-0 items-center justify-center rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
               data-nav-back={panel.parentId}
               type="button"
@@ -130,7 +142,7 @@ const initialId =
               <a
                 aria-current={panel.route === currentRoute ? "page" : undefined}
                 class="flex-1 truncate font-semibold text-foreground text-sm hover:underline"
-                href={panel.route}
+                href={withBase(panel.route)}
               >
                 {panel.label}
               </a>
@@ -146,6 +158,7 @@ const initialId =
             idPrefix={panel.id}
             items={panel.children}
             root={false}
+            strings={n}
           />
         </div>
       ))}
@@ -159,7 +172,7 @@ const initialId =
               <a
                 aria-current={item.route === currentRoute ? "page" : undefined}
                 class="block rounded-[0.65rem] px-2.5 py-1.5 text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:font-medium aria-[current=page]:text-foreground"
-                href={item.route}
+                href={withBase(item.route)}
               >
                 <span class="flex items-center gap-2">
                   {item.icon && (
@@ -172,7 +185,7 @@ const initialId =
                   <span class="flex-1 truncate">{item.label}</span>
                   {item.badge && <span class={badgeClassFor(item.badge)}>{item.badge}</span>}
                   {item.deprecated && (
-                    <span class={deprecatedClass}>deprecated</span>
+                    <span class={deprecatedClass}>{n.deprecated}</span>
                   )}
                 </span>
               </a>
@@ -231,7 +244,7 @@ const initialId =
                         item.route === currentRoute ? "page" : undefined
                       }
                       class="-my-1 flex flex-1 items-center gap-1.5 rounded py-1 transition-colors aria-[current=page]:text-foreground aria-[current=page]:font-semibold"
-                      href={item.route}
+                      href={withBase(item.route)}
                     >
                       {item.icon && (
                         <Icon
@@ -271,6 +284,7 @@ const initialId =
                     idPrefix={id}
                     items={item.children}
                     root={false}
+                    strings={n}
                   />
                 </div>
               </details>
@@ -286,7 +300,7 @@ const initialId =
                 <a
                   aria-current={item.route === currentRoute ? "page" : undefined}
                   class="-ml-1 flex flex-1 items-center gap-1.5 rounded px-1 py-0.5 text-foreground transition-colors hover:bg-muted aria-[current=page]:bg-muted"
-                  href={item.route}
+                  href={withBase(item.route)}
                 >
                   {item.icon && (
                     <Icon
@@ -323,6 +337,7 @@ const initialId =
                 idPrefix={id}
                 items={item.children}
                 root={false}
+                strings={n}
               />
             </div>
           </li>

package/src/components/layout/PageActions.astro

@@ -68,6 +68,7 @@ const menuRowClass =
   class="mt-8 space-y-0.5 border-border border-t pt-4"
   data-blume-page-actions
   data-i18n-copied={a.copied}
+  data-i18n-generating={a.generating}
   data-mcp-name={mcpName ?? undefined}
   data-mcp-url={mcpUrl ?? undefined}
   data-md={mdPath}
@@ -98,7 +99,7 @@ const menuRowClass =
           class={`${rowClass} cursor-pointer list-none [&::-webkit-details-marker]:hidden`}
         >
           <Icon name="download" size={16} />
-          Export
+          {a.export}
           <Icon
             class="ms-auto transition-transform group-open:rotate-180"
             name="chevron-down"
@@ -112,14 +113,14 @@ const menuRowClass =
           {exportPdf && (
             <button class={menuRowClass} data-blume-export-pdf type="button">
               <Icon name="file" size={16} />
-              <span class="flex-1">Export to PDF</span>
+              <span class="flex-1">{a.exportPdf}</span>
             </button>
           )}
           {exportEpub && (
             <button class={menuRowClass} data-blume-export-epub type="button">
               <Icon name="book-open" size={16} />
               <span class="flex-1" data-blume-epub-label>
-                Export to EPUB
+                {a.exportEpub}
               </span>
             </button>
           )}
@@ -218,6 +219,8 @@ const menuRowClass =
 </div>
 
 <script>
+  import { prefixBase } from "../islands/base-path.ts";
+
   const CHAT_URLS: Record<string, (q: string) => string> = {
     chatgpt: (q) => `https://chatgpt.com/?hints=search&prompt=${q}`,
     claude: (q) => `https://claude.ai/new?q=${q}`,
@@ -317,8 +320,14 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
       }
     });
 
-    const md = root.getAttribute("data-md") ?? "";
+    // `data-md` is the base-less logical route; the raw-markdown endpoint is a
+    // generated page route, so it's served under the deployment base like any
+    // other page. Prefix at emit time (the Search-island pattern).
+    const mdRoute = root.getAttribute("data-md") ?? "";
+    const md = prefixBase(import.meta.env.BASE_URL, mdRoute);
     const copiedLabel = root.getAttribute("data-i18n-copied") || "Copied!";
+    const generatingLabel =
+      root.getAttribute("data-i18n-generating") || "Generating…";
     const absolute = new URL(md, location.origin).href;
     const query = encodeURIComponent(
       `Read ${absolute} so I can ask you questions about this page.`
@@ -414,6 +423,9 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
       ?.addEventListener("click", async () => {
         try {
           const response = await fetch(md);
+          if (!response.ok) {
+            throw new Error(`Fetching ${md} failed (${response.status})`);
+          }
           await navigator.clipboard.writeText(await response.text());
           if (label) {
             label.textContent = copiedLabel;
@@ -421,8 +433,9 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
               label.textContent = original;
             }, 1500);
           }
-        } catch {
-          // Clipboard or fetch unavailable; nothing to do.
+        } catch (error) {
+          // Clipboard or fetch unavailable; don't flash "Copied!" untruthfully.
+          console.error("[blume] Copy as Markdown failed", error);
         }
       });
 
@@ -432,6 +445,9 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
 
     const epubButton = root.querySelector("[data-blume-export-epub]");
     const epubLabel = root.querySelector("[data-blume-epub-label]");
+    // Captured once — inside the handler a click during a generation would
+    // capture and permanently restore "Generating…".
+    const epubReset = epubLabel?.textContent ?? "";
     epubButton?.addEventListener("click", async () => {
       const article = document.querySelector("#blume-content article");
       if (!article) {
@@ -439,9 +455,8 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
       }
       const heading = document.querySelector("#blume-content h1");
       const title = heading?.textContent?.trim() || document.title;
-      const reset = epubLabel?.textContent ?? "Export to EPUB";
       if (epubLabel) {
-        epubLabel.textContent = "Generating…";
+        epubLabel.textContent = generatingLabel;
       }
       try {
         // Browser bundle: avoids Node built-ins and returns a Blob. Lazy-loaded
@@ -461,7 +476,7 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
             ? result
             : new Blob([result], { type: "application/epub+zip" });
         const slug =
-          md
+          mdRoute
             .replace(/\.md$/u, "")
             .replace(/^\//u, "")
             .replace(/\//gu, "-") || "index";
@@ -479,7 +494,7 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
         console.error("[blume] EPUB export failed", error);
       } finally {
         if (epubLabel) {
-          epubLabel.textContent = reset;
+          epubLabel.textContent = epubReset;
         }
       }
     });

package/src/components/layout/PageFeedback.astro

@@ -9,7 +9,10 @@ interface Props {
 }
 
 const { strings } = Astro.props;
-const f = strings ?? EN_UI.feedback;
+// Merge over the English baseline per key (rather than `strings ?? …`) so a
+// partial — or empty `{}` — strings object still resolves every label to a
+// default, matching the pattern PageActions and Search use.
+const f = { ...EN_UI.feedback, ...strings };
 
 const buttonClass =
   "inline-flex items-center gap-2 rounded-full border border-border px-4 py-2 text-foreground text-sm transition-colors hover:border-foreground";

package/src/components/layout/PageLayout.astro

@@ -25,6 +25,7 @@ import type {
 import { EN_UI } from "../../core/i18n-ui.ts";
 import type { UIStrings } from "../../core/i18n-ui.ts";
 import type { LocaleSwitchOption, Navigation } from "../../core/types.ts";
+import { withBase } from "../islands/base-path.ts";
 import "blume:theme";
 import Analytics from "./Analytics.astro";
 import Banner from "./Banner.astro";
@@ -109,6 +110,10 @@ const clientDataJson = clientData
   : null;
 
 const strings = ui ?? EN_UI;
+// Merge over the English defaults so a label missing from a translation (or
+// from a not-yet-regenerated snapshot) still renders instead of coming out
+// blank — the PageActions pattern.
+const navStrings = { ...EN_UI.nav, ...strings.nav };
 // Filter search to the active language only when the site is multi-locale.
 const searchLocale =
   localeSwitch && localeSwitch.length > 1 ? locale : undefined;
@@ -121,18 +126,26 @@ const route = page?.route ?? "/";
 // (`/og/<slug>.png`, `index` for the home) is generated for static custom pages
 // when `og.enabled`. Explicit props still win.
 const ogSlug = route === "/" ? "index" : route.slice(1);
+// Absolute URLs carry the deployment base too (`site + base + route`), since the
+// page is served under it. `withBase` handles a root base as a no-op.
+const basedRoute = withBase(route);
+// The schema accepts a trailing-slash site URL (`https://docs.example.com/`);
+// strip it before joining with the root-relative route so canonical/og URLs
+// don't come out double-slashed — the catch-all strips it the same way.
+const siteBase = siteUrl ? siteUrl.replace(/\/$/u, "") : null;
 const resolvedCanonical =
-  canonical ?? (siteUrl ? `${siteUrl}${route === "/" ? "" : route}` : null);
+  canonical ??
+  (siteBase ? `${siteBase}${basedRoute === "/" ? "" : basedRoute}` : null);
 // An explicit `ogImage` wins. A root-relative path (e.g. an image dropped in
 // `public/`) is resolved against the site URL so crawlers get an absolute
 // `og:image`; an already-absolute URL passes through untouched. Otherwise fall
 // back to the generated OG card for this route.
 const absolutizeOgImage = (value: string): string =>
-  value.startsWith("/") && siteUrl ? `${siteUrl}${value}` : value;
+  value.startsWith("/") && siteBase ? `${siteBase}${withBase(value)}` : value;
 const resolvedOgImage = ogImage
   ? absolutizeOgImage(ogImage)
-  : ogEnabled && siteUrl
-    ? `${siteUrl}/og/${ogSlug}.png`
+  : ogEnabled && siteBase
+    ? `${siteBase}${withBase(`/og/${ogSlug}.png`)}`
     : null;
 
 const initialThemeScript = themeInitScript(themeMode);
@@ -173,12 +186,13 @@ const bannerScript = banner?.dismissible
       class="absolute start-[-999px] top-0 z-[100] bg-accent px-4 py-2 text-accent-foreground focus:start-0"
       href="#blume-content">{strings.page.skipToContent}</a
     >
-    <Banner banner={banner} />
+    <Banner banner={banner} strings={strings.banner} />
     <Header
       askEnabled={askEnabled}
       hasSidebar={false}
       localeSwitch={localeSwitch}
       logo={logo}
+      navStrings={navStrings}
       navigation={navigation}
       route={route}
       searchEnabled={searchEnabled}
@@ -200,10 +214,11 @@ const bannerScript = banner?.dismissible
       navigation.tabs.length > 0 && (
         <>
           <aside
-            aria-label="Navigation"
+            aria-label={navStrings.navigation}
             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:hidden"
+            data-blume-nav-drawer
           >
-            <nav aria-label="Sections">
+            <nav aria-label={navStrings.sections}>
               <ul class="m-0 list-none p-0">
                 {navigation.tabs.map((tab) => (
                   <li>
@@ -215,7 +230,7 @@ const bannerScript = banner?.dismissible
                           : undefined
                       }
                       class="block rounded-[0.65rem] px-2.5 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground"
-                      href={tab.path}
+                      href={withBase(tab.path)}
                     >
                       {tab.label}
                     </a>
@@ -225,7 +240,7 @@ const bannerScript = banner?.dismissible
             </nav>
           </aside>
           <button
-            aria-label="Close navigation"
+            aria-label={navStrings.closeNavigation}
             class="fixed inset-0 z-[30] hidden cursor-pointer border-0 bg-black/40 [:where([data-blume-nav-open])_&]:block lg:hidden"
             data-blume-nav-toggle
             type="button"
@@ -247,6 +262,33 @@ const bannerScript = banner?.dismissible
       // Dev-only: friendly hint after a React island hydration mismatch;
       // tree-shaken out of production builds.
       import "./hydration-hint.ts";
+
+      // The closed tabs drawer is only translated off-canvas, so its links
+      // would stay in the tab order. Mirror the header's `data-blume-nav-open`
+      // toggle into `inert`/`aria-hidden` below `lg` (64rem), matching the
+      // breakpoint where the drawer is display-hidden anyway.
+      const drawer = document.querySelector<HTMLElement>(
+        "[data-blume-nav-drawer]"
+      );
+      if (drawer) {
+        const desktop = window.matchMedia("(min-width: 64rem)");
+        const syncDrawer = () => {
+          const hidden =
+            !desktop.matches &&
+            !document.documentElement.hasAttribute("data-blume-nav-open");
+          drawer.inert = hidden;
+          if (hidden) {
+            drawer.setAttribute("aria-hidden", "true");
+          } else {
+            drawer.removeAttribute("aria-hidden");
+          }
+        };
+        syncDrawer();
+        desktop.addEventListener("change", syncDrawer);
+        new MutationObserver(syncDrawer).observe(document.documentElement, {
+          attributeFilter: ["data-blume-nav-open"],
+        });
+      }
     </script>
   </body>
 </html>

package/src/components/layout/Pagination.astro

@@ -1,4 +1,5 @@
 ---
+import { withBase } from "../islands/base-path.ts";
 import type { UIStrings } from "../../core/i18n-ui.ts";
 import type { FlatPage } from "./nav-utils.ts";
 import Icon from "../Icon.astro";
@@ -24,7 +25,7 @@ const { prev, next, strings } = Astro.props;
       {prev ? (
         <a
           class="flex max-w-[48%] flex-1 items-center gap-2 rounded-full border border-border px-4 py-3 text-foreground transition-colors hover:border-foreground max-md:max-w-full"
-          href={prev.route}
+          href={withBase(prev.route)}
         >
           <Icon class="rtl:-scale-x-100" name="arrow-left" size={16} />
           <span>
@@ -40,7 +41,7 @@ const { prev, next, strings } = Astro.props;
       {next && (
         <a
           class="ms-auto flex max-w-[48%] flex-1 items-center justify-end gap-2 rounded-full border border-border px-4 py-3 text-end text-foreground transition-colors hover:border-foreground max-md:max-w-full"
-          href={next.route}
+          href={withBase(next.route)}
         >
           <span>
             <span class="block text-muted-foreground text-xs max-md:hidden">

package/src/components/layout/ReferenceLayout.astro

@@ -1,5 +1,7 @@
 ---
 import "blume:theme";
+import { EN_UI } from "../../core/i18n-ui.ts";
+import type { UIStrings } from "../../core/i18n-ui.ts";
 import type { Navigation } from "../../core/types.ts";
 import Analytics from "./Analytics.astro";
 import Banner from "./Banner.astro";
@@ -50,6 +52,8 @@ interface Props {
   fontCssVars?: string[];
   searchEnabled: boolean;
   pageTitle: string;
+  /** Resolved UI dictionary; English baseline when omitted. */
+  ui?: UIStrings;
 }
 
 const {
@@ -65,8 +69,11 @@ const {
   fontCssVars,
   searchEnabled,
   pageTitle,
+  ui,
 } = Astro.props;
 
+const strings = ui ?? EN_UI;
+
 // Set the theme before paint so the navbar never flashes the wrong colors
 // (mirrors RootLayout's pre-paint script).
 const initialThemeScript = `(()=>{const m=${JSON.stringify(themeMode)};const s=localStorage.getItem("blume-theme");const sys=matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";document.documentElement.dataset.theme=s??(m==="system"?sys:m);})();`;
@@ -90,7 +97,7 @@ const bannerScript = banner?.dismissible
     <Analytics analytics={analytics} />
   </head>
   <body class="bg-background font-sans text-foreground antialiased">
-    <Banner banner={banner} />
+    <Banner banner={banner} strings={strings.banner} />
     <Header
       hasDrawer={false}
       hasSidebar={false}

package/src/components/layout/RootLayout.astro

@@ -10,6 +10,7 @@ import type {
 import "blume:theme";
 import type { ComponentOverride } from "../../core/define-components.ts";
 import { buildStructuredData } from "../../seo/jsonld.ts";
+import { withBase } from "../islands/base-path.ts";
 import Analytics from "./Analytics.astro";
 import Banner from "./Banner.astro";
 import Breadcrumbs from "./Breadcrumbs.astro";
@@ -205,6 +206,12 @@ const PageFooterSlot = resolveSlot(layout.PageFooter, Empty);
 const FeedbackSlot = resolveSlot(layout.Feedback, PageFeedback);
 
 const strings = ui ?? EN_UI;
+// Merge the groups this layout reads directly over the English defaults so a
+// key missing from a translation (or from a not-yet-regenerated snapshot)
+// still renders instead of coming out blank — the PageActions pattern.
+const navStrings = { ...EN_UI.nav, ...strings.nav };
+const actionStrings = { ...EN_UI.actions, ...strings.actions };
+const contentStrings = { ...EN_UI.content, ...strings.content };
 // Filter search to the active language only when the site is multi-locale.
 const searchLocale =
   localeSwitch && localeSwitch.length > 1 ? locale : undefined;
@@ -250,7 +257,8 @@ const formattedLastModified =
 
 // The hosted MCP server's absolute URL, used by the page-actions install menu.
 // Needs a configured site to be useful, so the menu is hidden without one.
-const mcpUrl = mcp && siteUrl ? new URL(mcp.route, siteUrl).href : null;
+const mcpUrl =
+  mcp && siteUrl ? new URL(withBase(mcp.route), siteUrl).href : null;
 
 // Scope the sidebar (and the breadcrumbs/pagination derived from it) to the
 // active tab's section, so a multi-section site drills each tab into its own
@@ -266,6 +274,7 @@ const structuredData =
   structuredDataEnabled === false || noindex
     ? null
     : buildStructuredData({
+      base: import.meta.env.BASE_URL,
       breadcrumbs: crumbs,
       description,
       locale,
@@ -318,7 +327,7 @@ const bannerScript = banner?.dismissible
     {
       feeds?.map((feed) => (
         <link
-          href={feed.href}
+          href={withBase(feed.href)}
           rel="alternate"
           title={feed.title}
           type="application/rss+xml"
@@ -342,12 +351,14 @@ const bannerScript = banner?.dismissible
     class="bg-background font-sans text-foreground antialiased"
     data-blume-code-wrap={codeWrap ? "" : undefined}
     data-blume-image-zoom={imageZoom ? "" : undefined}
+    data-i18n-copy-code={actionStrings.copyCode}
+    data-i18n-diagram-error={contentStrings.diagramError}
   >
     <a
       class="absolute start-[-999px] top-0 z-[100] bg-accent px-4 py-2 text-accent-foreground focus:start-0"
       href="#blume-content">{strings.page.skipToContent}</a
     >
-    <Banner banner={banner} />
+    <Banner banner={banner} strings={strings.banner} />
     <HeaderSlot
       askEnabled={askEnabled}
       layout={layout}
@@ -357,6 +368,7 @@ const bannerScript = banner?.dismissible
       route={page.route}
       searchEnabled={searchEnabled}
       searchLocale={searchLocale}
+      navStrings={navStrings}
       searchStrings={strings.search}
       site={site}
       switcherStrings={strings.languageSwitcher}
@@ -368,7 +380,8 @@ const bannerScript = banner?.dismissible
       data-blume-doc-grid
     >
       <aside
-        aria-label="Primary"
+        aria-label={navStrings.primary}
+        data-blume-nav-drawer
         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
@@ -382,7 +395,10 @@ const bannerScript = banner?.dismissible
           // all breakpoints, outside the tab-scoped sidebar so they never change
           // with the active tab. External hrefs open in a new tab.
           navigation.featured.length > 0 && (
-            <nav aria-label="Featured" class="mb-4 border-border border-b pb-4">
+            <nav
+              aria-label={navStrings.featured}
+              class="mb-4 border-border border-b pb-4"
+            >
               <ul class="m-0 list-none p-0">
                 {navigation.featured.map((link) => {
                   const external = /^https?:\/\//u.test(link.href);
@@ -390,7 +406,7 @@ const bannerScript = banner?.dismissible
                     <li>
                       <a
                         class="block rounded-[0.65rem] px-2.5 py-1.5 text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground"
-                        href={link.href}
+                        href={withBase(link.href)}
                         rel={external ? "noreferrer" : undefined}
                         target={external ? "_blank" : undefined}
                       >
@@ -428,7 +444,7 @@ const bannerScript = banner?.dismissible
           // from opening blank.
           navigation.tabs.length > 0 && (
             <nav
-              aria-label="Sections"
+              aria-label={navStrings.sections}
               class:list={[
                 "mb-4 border-border border-b pb-4",
                 sidebar.length > 0 && "md:hidden",
@@ -445,7 +461,7 @@ const bannerScript = banner?.dismissible
                           : undefined
                       }
                       class="block rounded-[0.65rem] px-2.5 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground"
-                      href={tab.path}
+                      href={withBase(tab.path)}
                     >
                       {tab.label}
                     </a>
@@ -460,14 +476,26 @@ const bannerScript = banner?.dismissible
             MobileNavSlot ? (
               <>
                 <div class="lg:hidden">
-                  <MobileNavSlot currentRoute={page.route} items={sidebar} />
+                  <MobileNavSlot
+                    currentRoute={page.route}
+                    items={sidebar}
+                    strings={navStrings}
+                  />
                 </div>
                 <div class="hidden lg:block">
-                  <SidebarSlot currentRoute={page.route} items={sidebar} />
+                  <SidebarSlot
+                    currentRoute={page.route}
+                    items={sidebar}
+                    strings={navStrings}
+                  />
                 </div>
               </>
             ) : (
-              <SidebarSlot currentRoute={page.route} items={sidebar} />
+              <SidebarSlot
+                currentRoute={page.route}
+                items={sidebar}
+                strings={navStrings}
+              />
             )
           }
         </nav>
@@ -539,7 +567,7 @@ const bannerScript = banner?.dismissible
       )
     }
     <button
-      aria-label="Close navigation"
+      aria-label={navStrings.closeNavigation}
       class="fixed inset-0 z-[30] hidden cursor-pointer border-0 bg-black/40 [:where([data-blume-nav-open])_&]:block lg:hidden"
       data-blume-nav-toggle
       type="button"
@@ -556,12 +584,45 @@ const bannerScript = banner?.dismissible
       // Tree-shaken out of production builds.
       import "./hydration-hint.ts";
 
+      // The closed mobile drawer is only translated off-canvas, so its links
+      // would stay in the tab order on every page. Mirror the header's
+      // `data-blume-nav-open` toggle into `inert`/`aria-hidden` — but only
+      // below `lg` (64rem), where the same element isn't the static sidebar.
+      const drawer = document.querySelector<HTMLElement>(
+        "[data-blume-nav-drawer]"
+      );
+      if (drawer) {
+        const desktop = window.matchMedia("(min-width: 64rem)");
+        const syncDrawer = () => {
+          const hidden =
+            !desktop.matches &&
+            !document.documentElement.hasAttribute("data-blume-nav-open");
+          drawer.inert = hidden;
+          if (hidden) {
+            drawer.setAttribute("aria-hidden", "true");
+          } else {
+            drawer.removeAttribute("aria-hidden");
+          }
+        };
+        syncDrawer();
+        desktop.addEventListener("change", syncDrawer);
+        new MutationObserver(syncDrawer).observe(document.documentElement, {
+          attributeFilter: ["data-blume-nav-open"],
+        });
+      }
+
       const svg = (name: string) =>
         `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${icons[name]}</svg>`;
 
       const buttonClass =
         "absolute right-3 inline-flex size-7 items-center justify-center rounded-full bg-transparent text-muted-foreground opacity-70 transition hover:bg-muted hover:text-foreground hover:opacity-100 focus-visible:opacity-100";
 
+      // Localized copy-button label, stamped on <body> by the layout markup
+      // (the Search.astro data-attribute channel) since this bundled script
+      // can't interpolate server values directly.
+      const copyCodeLabel =
+        document.body.getAttribute("data-i18n-copy-code") || "Copy code";
+
       const languageLabels: Record<string, string> = {
         astro: "Astro",
         bash: "Bash",
@@ -609,7 +670,7 @@ const bannerScript = banner?.dismissible
           : "top-2";
         button.className = `${buttonClass} ${topClass}`;
         button.setAttribute("data-blume-copy", "");
-        button.setAttribute("aria-label", "Copy code");
+        button.setAttribute("aria-label", copyCodeLabel);
         button.innerHTML = svg("copy");
         button.addEventListener("click", async () => {
           const code = pre.querySelector("code");