@dogsbay/docs-layout 0.2.0-beta.95 → 0.2.0-beta.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/docs-layout",
-  "version": "0.2.0-beta.95",
+  "version": "0.2.0-beta.98",
   "description": "Standard documentation layout components for Dogsbay",
   "type": "module",
   "exports": {
@@ -30,8 +30,8 @@
     "./json-ld": "./src/json-ld.ts"
   },
   "dependencies": {
-    "@dogsbay/primitives": "0.2.0-beta.95",
-    "@dogsbay/ui": "0.2.0-beta.95"
+    "@dogsbay/primitives": "0.2.0-beta.98",
+    "@dogsbay/ui": "0.2.0-beta.98"
   },
   "devDependencies": {
     "happy-dom": "^20.10.6",

package/src/DocsLayout.astro

@@ -432,18 +432,6 @@ interface Props {
   readingMinutes?: number;
   /** Optional hero image URL, rendered above the prose. */
   heroImage?: string;
-  /**
-   * Series position, when the post belongs to one. Derived at emit time
-   * from publication order, so "Part 3 of 7" cannot disagree with reality
-   * the way a hand-typed line does.
-   */
-  series?: {
-    name: string;
-    part: number;
-    total: number;
-    /** URL of part 1, so a reader landing mid-series can start over. */
-    startHref?: string;
-  };
   /**
    * Table-of-contents placement. Default `"top"`.
    * - `"top"` — expandable "On this page" disclosure at the top of the
@@ -533,7 +521,6 @@ const {
   updatedDate,
   readingMinutes,
   heroImage,
-  series,
   linkIcons,
   class: className,
 } = Astro.props;
@@ -852,10 +839,39 @@ const siteIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
       ></script>
     )}
 
+    {/*
+      Theme bootstrap. Inline and BLOCKING on purpose — it must run
+      before first paint or the page flashes light before going dark.
+
+      An explicit choice wins in BOTH directions. Someone on a
+      dark-mode OS who deliberately picked light must stay light, so
+      "light" is checked rather than treated as "not dark". Only the
+      absence of a stored value falls through to the OS preference.
+
+      That fallback is the point of this block. Previously the only
+      condition was `=== "dark"`, so a visitor whose OS is in dark mode
+      got a light page until they found the toggle — and nothing else
+      in the CSS consulted prefers-color-scheme either. It also made
+      dark mode untestable by any tool that emulates the media query
+      (DevTools' Rendering panel, Playwright's colorScheme), because
+      the page did not read it.
+
+      localStorage access throws in some privacy modes; a throw here
+      would skip the class entirely, so it is guarded and degrades to
+      the OS preference.
+    */}
     <script is:inline>
-      if (localStorage.getItem("theme") === "dark") {
-        document.documentElement.classList.add("dark");
-      }
+      (function () {
+        var stored = null;
+        try {
+          stored = localStorage.getItem("theme");
+        } catch (e) {}
+        var dark =
+          stored === "dark" ||
+          (stored !== "light" &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches);
+        if (dark) document.documentElement.classList.add("dark");
+      })();
     </script>
     <slot name="head" />
   </head>
@@ -1168,34 +1184,6 @@ const siteIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                 </div>
               )}
 
-              {/*
-                Series banner. Sits above the byline because it is the
-                first thing a reader arriving from search needs: which
-                series is this, where am I in it, and where does it start.
-                A blog index is chronological, so someone can easily meet
-                part 7 first.
-              */}
-              {chrome === "blog" && series && (
-                <div
-                  class="not-prose mb-4 flex flex-wrap items-center gap-x-2 gap-y-1 rounded-md border border-border bg-muted/40 px-3 py-2 text-sm"
-                  data-post-series
-                  data-pagefind-ignore
-                >
-                  <span class="font-medium text-foreground">
-                    Part {series.part} of {series.total}
-                  </span>
-                  <span class="text-muted-foreground">in {series.name}</span>
-                  {series.startHref && series.part !== 1 && (
-                    <a
-                      href={series.startHref}
-                      class="ml-auto text-foreground underline underline-offset-2"
-                    >
-                      Start at part 1
-                    </a>
-                  )}
-                </div>
-              )}
-
               {autoLede && description && (
                 <p class="text-lg text-muted-foreground mb-6">
                   {description}
@@ -1265,10 +1253,12 @@ const siteIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                 next={next}
                 {/*
                   Blog adjacency is chronological, so "Previous/Next"
-                  would describe the wrong axis — prev is the NEWER post.
+                  describes the wrong axis. Left is older, right is newer —
+                  a timeline runs that way, and so does a series: the
+                  right-hand link is the next part.
                 */}
-                prevLabel={chrome === "blog" ? "Newer" : undefined}
-                nextLabel={chrome === "blog" ? "Older" : undefined}
+                prevLabel={chrome === "blog" ? "Older" : undefined}
+                nextLabel={chrome === "blog" ? "Newer" : undefined}
                 copyright={copyright}
                 llmsLink={llmFooterLink}
                 llmsLinkHref={llmsLinkHrefResolved}

package/src/TagList.astro

@@ -72,8 +72,13 @@ const chips = buildChips(tags, { indexPath, prefixes, labels });
  */
 const PALETTE: Record<TagPaletteName, string> = {
   blue: "border-blue-500/40 bg-blue-500/15 text-blue-700 dark:text-blue-300",
+  // amber-800, not -700, in light mode: amber-700 on amber-500/15 is
+  // 4.48:1 — under 4.5:1 by a hair, and failing regardless of the
+  // opacity bug below. -800 gives 6.32:1. Every other colour clears it
+  // at -700 (4.76–8.60:1). Dark mode is unaffected: text-*-300 on the
+  // same tint over a dark page is 9–12:1 across the palette.
   amber:
-    "border-amber-500/40 bg-amber-500/15 text-amber-700 dark:text-amber-300",
+    "border-amber-500/40 bg-amber-500/15 text-amber-800 dark:text-amber-300",
   emerald:
     "border-emerald-500/40 bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
   violet:
@@ -108,7 +113,17 @@ const DEFAULT_CLASS =
         >
           {chip.prefixLabel ? (
             <Fragment>
-              <span class="opacity-70">{chip.prefixLabel}:</span>
+              {/*
+                No opacity here. `opacity-70` on the prefix blended the
+                text 30% toward the chip background and put EVERY colour
+                in the palette below 4.5:1 — measured 2.75–3.95:1, worst
+                amber, best slate. It is 12px text, so 4.5:1 applies.
+
+                The prefix/leaf distinction is carried by font-weight
+                instead: the leaf below is font-semibold against the
+                anchor's font-medium. Weight costs no contrast.
+              */}
+              <span>{chip.prefixLabel}:</span>
               <span class="font-semibold">{chip.leafLabel}</span>
             </Fragment>
           ) : (