blume 0.7.0 → 1.0.0

package/src/components/layout/Header.astro

@@ -1,6 +1,7 @@
 ---
 import { withBase } from "../islands/base-path.ts";
 import type { ComponentOverride } from "../../core/define-components.ts";
+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 { GITHUB_MARK } from "../github-mark.ts";
@@ -37,6 +38,8 @@ interface Props {
   hasDrawer?: boolean;
   searchStrings?: UIStrings["search"];
   switcherStrings?: UIStrings["languageSwitcher"];
+  /** Localized chrome labels (nav toggle, sections, GitHub, theme toggle). */
+  navStrings?: UIStrings["nav"];
   localeSwitch?: LocaleSwitchOption[];
   /** Active locale for per-language search filtering. */
   searchLocale?: string;
@@ -59,11 +62,17 @@ const {
   hasDrawer = true,
   searchStrings,
   switcherStrings,
+  navStrings,
   localeSwitch,
   searchLocale,
   layout = {},
 } = 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, ...navStrings };
+
 const LogoSlot = resolveSlot(layout.Logo, Logo);
 const SearchSlot = resolveSlot(layout.Search, Search);
 
@@ -109,7 +118,7 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
   {
     showNavToggle && (
       <button
-        aria-label="Toggle navigation"
+        aria-label={n.toggleNavigation}
         class={`${iconButton} lg:hidden`}
         data-blume-nav-toggle
         type="button"
@@ -130,7 +139,7 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
   }
   {
     navigation.tabs.length > 0 && (
-      <nav aria-label="Sections" class={tabsNavClass}>
+      <nav aria-label={n.sections} class={tabsNavClass}>
         {navigation.tabs.map((tab) => (
           <a
             aria-current={
@@ -172,7 +181,7 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
     {
       navigation.repoUrl && (
         <a
-          aria-label="GitHub repository"
+          aria-label={n.githubRepository}
           class={iconButton}
           href={navigation.repoUrl}
           rel="noreferrer"
@@ -191,7 +200,7 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
       )
     }
     <button
-      aria-label="Toggle color theme"
+      aria-label={n.toggleTheme}
       class={iconButton}
       data-blume-theme-toggle
       type="button"

package/src/components/layout/Logo.astro

@@ -43,11 +43,19 @@ const brandText = logo?.text ?? site.title;
     !logoSvg &&
       logoLight &&
       (logoLight === logoDark ? (
-        <img alt={logoAlt} class="h-5 w-auto" src={logoLight} />
+        <img alt={logoAlt} class="h-5 w-auto" src={withBase(logoLight)} />
       ) : (
         <>
-          <img alt={logoAlt} class="h-5 w-auto dark:hidden" src={logoLight} />
-          <img alt={logoAlt} class="hidden h-5 w-auto dark:block" src={logoDark} />
+          <img
+            alt={logoAlt}
+            class="h-5 w-auto dark:hidden"
+            src={withBase(logoLight)}
+          />
+          <img
+            alt={logoAlt}
+            class="hidden h-5 w-auto dark:block"
+            src={withBase(logoDark)}
+          />
         </>
       ))
   }

package/src/components/layout/NavTree.astro

@@ -1,4 +1,6 @@
 ---
+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";
@@ -22,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 {
@@ -30,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",
@@ -114,18 +124,19 @@ 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"
             >
-              <Icon name="arrow-left" size={16} />
+              <Icon class="rtl:-scale-x-100" name="arrow-left" size={16} />
             </button>
             {panel.route ? (
               <a
@@ -147,6 +158,7 @@ const initialId =
             idPrefix={panel.id}
             items={panel.children}
             root={false}
+            strings={n}
           />
         </div>
       ))}
@@ -173,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>
@@ -207,7 +219,7 @@ const initialId =
                 <span class="flex-1 truncate">{item.label}</span>
                 {item.badge && <span class={badgeClassFor(item.badge)}>{item.badge}</span>}
                 <Icon
-                  class="shrink-0 text-muted-foreground"
+                  class="shrink-0 text-muted-foreground rtl:-scale-x-100"
                   name="chevron-right"
                   size={14}
                 />
@@ -272,6 +284,7 @@ const initialId =
                     idPrefix={id}
                     items={item.children}
                     root={false}
+                    strings={n}
                   />
                 </div>
               </details>
@@ -324,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/PageLayout.astro

@@ -25,6 +25,12 @@ 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 {
+  OG_IMAGE_HEIGHT,
+  OG_IMAGE_TYPE,
+  OG_IMAGE_WIDTH,
+} from "../../og/dimensions.ts";
+import { normalizeXHandle } from "../../seo/x-handle.ts";
 import { withBase } from "../islands/base-path.ts";
 import "blume:theme";
 import Analytics from "./Analytics.astro";
@@ -64,6 +70,11 @@ interface Props {
   /** SEO overrides; a marketing page often sets its own canonical/og image. */
   ogImage?: string | null;
   canonical?: string | null;
+  /**
+   * X (Twitter) attribution (`data.config.x`): the site's account and an author
+   * handle, emitted as `twitter:site`/`twitter:creator`.
+   */
+  x?: { creator?: string; handle?: string };
   noindex?: boolean;
   /** Active locale + direction for `<html lang>`/`<html dir>`. */
   locale?: string;
@@ -97,6 +108,7 @@ const {
   ogEnabled,
   ogImage,
   canonical,
+  x,
   noindex,
   locale = "en",
   dir = "ltr",
@@ -110,6 +122,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;
@@ -125,20 +141,33 @@ 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}${basedRoute === "/" ? "" : basedRoute}` : null);
+  (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}${withBase(value)}` : value;
+  value.startsWith("/") && siteBase ? `${siteBase}${withBase(value)}` : value;
 const resolvedOgImage = ogImage
   ? absolutizeOgImage(ogImage)
-  : ogEnabled && siteUrl
-    ? `${siteUrl}${withBase(`/og/${ogSlug}.png`)}`
+  : ogEnabled && siteBase
+    ? `${siteBase}${withBase(`/og/${ogSlug}.png`)}`
     : null;
+// Only the generated card has a known size and format, so its dimensions are
+// declared for crawlers; a user-supplied `ogImage` could be any image.
+const ogGenerated = !ogImage && Boolean(resolvedOgImage);
+// A page with no image still gets a card on X — the compact `summary` variant
+// — rather than rendering as a bare link.
+const twitterCard = resolvedOgImage ? "summary_large_image" : "summary";
+// A custom page passes these in by hand, so normalize rather than trust the `@`.
+const xSite = normalizeXHandle(x?.handle);
+const xCreator = normalizeXHandle(x?.creator);
 
 const initialThemeScript = themeInitScript(themeMode);
 const bannerScript = banner?.dismissible
@@ -158,17 +187,35 @@ const bannerScript = banner?.dismissible
     {noindex && <meta content="noindex" name="robots" />}
     {description && <meta content={description} name="description" />}
     <meta content="website" property="og:type" />
+    <meta content={site.title} property="og:site_name" />
     <meta content={pageTitle} property="og:title" />
     {description && <meta content={description} property="og:description" />}
+    {resolvedCanonical && <meta content={resolvedCanonical} property="og:url" />}
     {
       resolvedOgImage && (
         <>
           <meta content={resolvedOgImage} property="og:image" />
+          {ogGenerated && (
+            <>
+              <meta content={OG_IMAGE_TYPE} property="og:image:type" />
+              <meta content={String(OG_IMAGE_WIDTH)} property="og:image:width" />
+              <meta
+                content={String(OG_IMAGE_HEIGHT)}
+                property="og:image:height"
+              />
+              <meta content={pageTitle} property="og:image:alt" />
+            </>
+          )}
           <meta content={resolvedOgImage} name="twitter:image" />
-          <meta content="summary_large_image" name="twitter:card" />
+          {ogGenerated && <meta content={pageTitle} name="twitter:image:alt" />}
         </>
       )
     }
+    <meta content={twitterCard} name="twitter:card" />
+    <meta content={pageTitle} name="twitter:title" />
+    {description && <meta content={description} name="twitter:description" />}
+    {xSite && <meta content={xSite} name="twitter:site" />}
+    {xCreator && <meta content={xCreator} name="twitter:creator" />}
     {bannerScript && <script is:inline set:html={bannerScript} />}
     <script is:inline set:html={initialThemeScript} />
     <Analytics analytics={analytics} />
@@ -178,12 +225,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}
@@ -205,10 +253,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>
@@ -230,7 +279,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"
@@ -252,6 +301,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,5 +1,6 @@
 ---
 import { withBase } from "../islands/base-path.ts";
+import { EN_UI } from "../../core/i18n-ui.ts";
 import type { UIStrings } from "../../core/i18n-ui.ts";
 import type { FlatPage } from "./nav-utils.ts";
 import Icon from "../Icon.astro";
@@ -9,17 +10,22 @@ interface Props {
   prev: FlatPage | null;
   /** Next page in reading order, or `null` at the end. */
   next: FlatPage | null;
-  /** Localized page-level strings (`previous`, `next`). */
+  /** Localized page-level strings (`previous`, `next`, the landmark label). */
   strings: UIStrings["page"];
 }
 
 const { prev, next, 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 s = { ...EN_UI.page, ...strings };
 ---
 
 {
   (prev || next) && (
     <nav
-      aria-label="Pagination"
+      aria-label={s.pagination}
       class="mx-auto mt-12 flex max-w-[42rem] justify-between gap-4 border-border border-t pt-6 max-md:flex-col"
     >
       {prev ? (
@@ -30,7 +36,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 max-md:hidden">
-              {strings.previous}
+              {s.previous}
             </span>
             <span class="block font-medium">{prev.label}</span>
           </span>
@@ -45,7 +51,7 @@ const { prev, next, strings } = Astro.props;
         >
           <span>
             <span class="block text-muted-foreground text-xs max-md:hidden">
-              {strings.next}
+              {s.next}
             </span>
             <span class="block font-medium">{next.label}</span>
           </span>

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,12 @@ interface Props {
   fontCssVars?: string[];
   searchEnabled: boolean;
   pageTitle: string;
+  /** Active locale code for `<html lang>` (defaults to `en`). */
+  locale?: string;
+  /** Text direction for `<html dir>` (defaults to `ltr`). */
+  dir?: "ltr" | "rtl";
+  /** Resolved UI dictionary; English baseline when omitted. */
+  ui?: UIStrings;
 }
 
 const {
@@ -65,8 +73,13 @@ const {
   fontCssVars,
   searchEnabled,
   pageTitle,
+  locale = "en",
+  dir = "ltr",
+  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);})();`;
@@ -78,7 +91,7 @@ const bannerScript = banner?.dismissible
 ---
 
 <!doctype html>
-<html lang="en">
+<html dir={dir} lang={locale}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -90,7 +103,11 @@ const bannerScript = banner?.dismissible
     <Analytics analytics={analytics} />
   </head>
   <body class="bg-background font-sans text-foreground antialiased">
-    <Banner banner={banner} />
+    <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} strings={strings.banner} />
     <Header
       hasDrawer={false}
       hasSidebar={false}
@@ -102,6 +119,7 @@ const bannerScript = banner?.dismissible
     />
     <div
       class="h-[calc(100dvh-4rem)] overflow-auto border-border border-t [&>[data-scalar-client]]:h-full"
+      id="blume-content"
     >
       <slot />
     </div>