Update RSD docs integration

astro.config.mjs

@@ -17,6 +17,13 @@ export default defineConfig({
       routeBase: '/',
       style: 'vega',
       css: false,
+      bodyAttrs: {
+        'hx-boost': 'true',
+        'hx-target': '#content',
+        'hx-select': '#content',
+        'hx-swap': 'outerHTML',
+        'hx-push-url': 'true',
+      },
       components: {
         Head: './docs/src/site/StyleHead.astro',
         SidebarHeader: './docs/src/site/SidebarHeader.astro',

docs/src/cli.mdx

@@ -4,11 +4,22 @@
 
 Use the CLI to copy Basecoat component assets into your project. It can install CSS, JavaScript, and the matching Nunjucks or Jinja macros for components that ship template helpers.
 
-<CodeGroup defaultTab="npm">
-  <Code title="npm" lang="bash">{`npx basecoat-cli add dialog`}</Code>
-  <Code title="pnpm" lang="bash">{`pnpm dlx basecoat-cli add dialog`}</Code>
-  <Code title="bun" lang="bash">{`bunx basecoat-cli add dialog`}</Code>
-  <Code title="yarn" lang="bash">{`yarn dlx basecoat-cli add dialog`}</Code>
+<CodeGroup>
+```bash title="npm"
+npx basecoat-cli add dialog
+```
+
+```bash title="pnpm"
+pnpm dlx basecoat-cli add dialog
+```
+
+```bash title="bun"
+bunx basecoat-cli add dialog
+```
+
+```bash title="yarn"
+yarn dlx basecoat-cli add dialog
+```
 </CodeGroup>
 
 The CLI asks which template engine you use and where it should copy JavaScript and macro files.
@@ -17,8 +28,9 @@ The CLI asks which template engine you use and where it should copy JavaScript a
 
 Nunjucks and Jinja macros are optional helpers for components with larger HTML structures. They generate the same semantic Basecoat markup shown in the component docs.
 
-<CodeGroup defaultTab="Nunjucks">
-  <Code title="Nunjucks" lang="jinja">{`{% from "select.njk" import select %}
+<CodeGroup>
+```jinja title="Nunjucks"
+{% from "select.njk" import select %}
 {{ select(
   name="fruit",
   items=[
@@ -26,8 +38,11 @@ Nunjucks and Jinja macros are optional helpers for components with larger HTML s
     { value: "banana", label: "Banana" },
     { value: "blueberry", label: "Blueberry" }
   ]
-) }}`}</Code>
-  <Code title="Jinja" lang="jinja">{`{% from "select.html.jinja" import select %}
+) }}
+```
+
+```jinja title="Jinja"
+{% from "select.html.jinja" import select %}
 {{ select(
   name="fruit",
   items=[
@@ -35,7 +50,8 @@ Nunjucks and Jinja macros are optional helpers for components with larger HTML s
     { "value": "banana", "label": "Banana" },
     { "value": "blueberry", "label": "Blueberry" }
   ]
-) }}`}</Code>
+) }}
+```
 </CodeGroup>
 
 ### Public Macros

docs/src/installation.mdx

@@ -81,11 +81,22 @@ Basecoat is authored for Tailwind CSS. Install Tailwind first if your project do
   </Step>
   <Step title="Install Basecoat">
 
-<CodeGroup defaultTab="npm">
-  <Code title="npm" lang="bash">{`npm install basecoat-css`}</Code>
-  <Code title="pnpm" lang="bash">{`pnpm add basecoat-css`}</Code>
-  <Code title="bun" lang="bash">{`bun add basecoat-css`}</Code>
-  <Code title="yarn" lang="bash">{`yarn add basecoat-css`}</Code>
+<CodeGroup>
+```bash title="npm"
+npm install basecoat-css
+```
+
+```bash title="pnpm"
+pnpm add basecoat-css
+```
+
+```bash title="bun"
+bun add basecoat-css
+```
+
+```bash title="yarn"
+yarn add basecoat-css
+```
 </CodeGroup>
 
 If you are not using a bundler, copy or serve the files you need from `node_modules/basecoat-css/dist`.

docs/src/site/StyleHead.astro

@@ -83,46 +83,29 @@ const styleUrls = {
 
 <script is:inline>
   (() => {
-    const pageKey = (href) => {
+    const key = (href) => {
       const url = new URL(href, window.location.origin);
       return `${url.pathname.replace(/\/$/, "")}${url.search}`;
     };
 
-    const updateSidebarState = () => {
-      const sidebar = document.getElementById("sidebar");
-      if (!sidebar) return;
-
-      const currentKey = pageKey(window.location.href);
-      sidebar.querySelectorAll("a[href]").forEach((link) => {
-        const isCurrent = pageKey(link.href) === currentKey;
+    const syncSidebar = () => {
+      for (const link of document.querySelectorAll("#sidebar a[href]")) {
+        const isCurrent = key(link.href) === key(window.location.href);
         if (isCurrent) {
           link.setAttribute("aria-current", "page");
           link.closest("details")?.setAttribute("open", "");
         } else {
           link.removeAttribute("aria-current");
         }
-      });
+      }
     };
 
-    document.addEventListener("DOMContentLoaded", () => {
-      const content = document.getElementById("content");
-      if (!content) return;
-
-      document.body.setAttribute("hx-boost", "true");
-      document.body.setAttribute("hx-target", "#content");
-      document.body.setAttribute("hx-select", "#content");
-      document.body.setAttribute("hx-swap", "outerHTML");
-      document.body.setAttribute("hx-push-url", "true");
-
-      window.htmx?.process(document.body);
-      updateSidebarState();
-    });
-
+    document.addEventListener("DOMContentLoaded", syncSidebar);
     document.addEventListener("htmx:afterSettle", () => {
       window.basecoat?.initAll?.();
-      updateSidebarState();
+      syncSidebar();
     });
-    window.addEventListener("popstate", updateSidebarState);
+    window.addEventListener("popstate", syncSidebar);
   })();
 </script>
 

package-lock.json

@@ -20,7 +20,7 @@
         "lucide-static": "^1.17.0",
         "nunjucks": "^3.2.4",
         "prettier": "^3.5.3",
-        "reallysimpledocs": "1.0.0-beta.5",
+        "reallysimpledocs": "^1.0.0",
         "tailwindcss": "^4.1.17",
         "terser": "^5.42.0",
         "wrangler": "^4.50.0"
@@ -7823,9 +7823,9 @@
       "license": "MIT"
     },
     "node_modules/reallysimpledocs": {
-      "version": "1.0.0-beta.5",
-      "resolved": "https://registry.npmjs.org/reallysimpledocs/-/reallysimpledocs-1.0.0-beta.5.tgz",
-      "integrity": "sha512-lAHFGlhZYLXZA8lzRHnD4hklsYf4old8mW7WVM8R1lRKvWZWfVBWMsbZGKlcbf7N8cfDJSOzHefBsez7BtEWvQ==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/reallysimpledocs/-/reallysimpledocs-1.0.0.tgz",
+      "integrity": "sha512-P4qdwlWKcZv+T4FLcjGwuNG+m4EF8K97DCBA7ZtvODEVJMe4t9d9C3cxXbxgCP9fDRflgwEIQi9ruM4ZJWFI8Q==",
       "dev": true,
       "dependencies": {
         "@astrojs/markdown-remark": "^7.2.0",
@@ -7835,11 +7835,14 @@
         "lucide-static": "^0.552.0",
         "lunr": "^2.3.9",
         "marked": "^16.4.1",
-        "shiki": "^4.1.0"
+        "rehype-parse": "^9.0.1",
+        "rehype-stringify": "^10.0.1",
+        "shiki": "^4.1.0",
+        "unified": "^11.0.5"
       },
       "peerDependencies": {
         "astro": "^6.4.6",
-        "basecoat-css": "^1.0.0-beta.5",
+        "basecoat-css": "^1.0.0-beta.6",
         "tailwindcss": ">=4.1.17 <5"
       }
     },

package.json

@@ -49,7 +49,7 @@
     "lucide-static": "^1.17.0",
     "nunjucks": "^3.2.4",
     "prettier": "^3.5.3",
-    "reallysimpledocs": "1.0.0-beta.5",
+    "reallysimpledocs": "^1.0.0",
     "tailwindcss": "^4.1.17",
     "terser": "^5.42.0",
     "wrangler": "^4.50.0"