reallysimpledocs 1.0.0-beta.0 → 1.0.0-beta.1

package/README.md

@@ -7,7 +7,7 @@ RSD keeps docs portable: content lives in `docs/`, navigation lives in `docs/doc
 ## Add to an Astro site
 
 ```bash
-npm install reallysimpledocs@beta basecoat-css@beta
+npm install reallysimpledocs@beta basecoat-css@beta tailwindcss
 ```
 
 Add the integration:
@@ -61,6 +61,40 @@ Welcome to the docs.
 
 RSD injects docs pages, Lunr search, per-page Markdown exports, `llms.txt`, and `llms-full.txt`.
 
+## Use Basecoat on the rest of the site
+
+RSD styles and scripts its generated docs pages. For custom Astro pages outside the docs route, use Basecoat directly in your own layout.
+
+Install stays the same:
+
+```bash
+npm install reallysimpledocs@beta basecoat-css@beta tailwindcss
+```
+
+Create a site stylesheet:
+
+```css
+/* src/styles/site.css */
+@import "tailwindcss";
+@import "basecoat-css/base";
+@import "basecoat-css/styles/vega";
+
+@source "../src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}";
+```
+
+Load that stylesheet and Basecoat's JavaScript in your custom layout:
+
+```astro
+---
+import "../styles/site.css";
+import "basecoat-css/all.min";
+---
+
+<slot />
+```
+
+Use the same Basecoat `style` in your RSD config and your site stylesheet if you want the docs and custom pages to match.
+
 ## Local development (this repo)
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reallysimpledocs",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "type": "module",
   "exports": {
     ".": "./src/index.js",
@@ -26,14 +26,15 @@
     "lucide-static": "^0.552.0",
     "lunr": "^2.3.9",
     "marked": "^16.4.1",
-    "shiki": "^4.1.0",
-    "tailwindcss": "4.1.17"
+    "shiki": "^4.1.0"
   },
   "peerDependencies": {
-    "basecoat-css": "^1.0.0-beta.1"
+    "basecoat-css": "^1.0.0-beta.1",
+    "tailwindcss": ">=4.1.17 <5"
   },
   "devDependencies": {
-    "basecoat-css": "^1.0.0-beta.1"
+    "basecoat-css": "^1.0.0-beta.1",
+    "tailwindcss": "4.1.17"
   },
   "overrides": {
     "esbuild": "^0.28.1",

package/src/runtime/components/DocsLayout.astro

@@ -222,7 +222,7 @@ const actionItems = [
         </div>
       </article>
       <aside class="hidden w-56 xl:block">
-        <div class="docs-toc sticky top-20 space-y-2 text-sm [&_a]:text-muted-foreground [&_a]:hover:text-primary [&_ol]:space-y-2 [&_ol_ol]:mt-2 [&_ol_ol]:pl-3">
+        <div class="docs-toc sticky top-20 space-y-2 text-sm [&_a]:text-muted-foreground [&_a]:hover:text-foreground [&_a[data-active='true']]:text-foreground [&_ol]:space-y-2 [&_ol_ol]:mt-2 [&_ol_ol]:pl-3" data-docs-toc>
           <h2 class="flex items-center gap-1 font-medium">
             On this page
           </h2>
@@ -230,7 +230,7 @@ const actionItems = [
             {
               headings.map((heading) => (
                 <li class={heading.depth === 3 ? "pl-3" : ""}>
-                  <a href={`#${heading.id}`}>{heading.text}</a>
+                  <a href={`#${heading.id}`} data-toc-link>{heading.text}</a>
                 </li>
               ))
             }
@@ -283,5 +283,60 @@ const actionItems = [
       document.body.removeChild(textarea);
       if (!ok) throw new Error("Copy failed");
     }
+
+    function initDocsToc() {
+      const toc = document.querySelector("[data-docs-toc]");
+      if (!toc) return;
+
+      const links = Array.from(toc.querySelectorAll("[data-toc-link]"));
+      const linkById = new Map();
+      for (const link of links) {
+        const id = decodeURIComponent(link.hash.slice(1));
+        if (id) linkById.set(id, link);
+      }
+
+      const headings = Array.from(linkById.keys())
+        .map((id) => document.getElementById(id))
+        .filter(Boolean);
+      if (!headings.length) return;
+
+      const setActive = (id) => {
+        for (const link of links) {
+          const active = decodeURIComponent(link.hash.slice(1)) === id;
+          link.dataset.active = active ? "true" : "false";
+          if (active) link.setAttribute("aria-current", "location");
+          else link.removeAttribute("aria-current");
+        }
+      };
+
+      const currentHeading = () => {
+        const offset = 160;
+        let current = headings[0];
+        for (const heading of headings) {
+          if (heading.getBoundingClientRect().top <= offset) current = heading;
+          else break;
+        }
+        return current;
+      };
+
+      const updateActive = () => setActive(currentHeading().id);
+      updateActive();
+
+      let queued = false;
+      const queueUpdate = () => {
+        if (queued) return;
+        queued = true;
+        window.requestAnimationFrame(() => {
+          queued = false;
+          updateActive();
+        });
+      };
+
+      window.addEventListener("scroll", queueUpdate, { passive: true });
+      window.addEventListener("resize", queueUpdate);
+      window.addEventListener("hashchange", () => window.setTimeout(updateActive, 0));
+    }
+
+    initDocsToc();
   </script>
 </BaseLayout>