starlight-cannoli-plugins 2.8.3 → 2.9.1

package/README.md

@@ -398,7 +398,8 @@ An Astro integration that injects a client-side script to apply opt-in DOM patch
 
 - `hideSingleLineGutters` (optional, default: `false`): Hides the line number gutter on Expressive Code blocks that contain only a single line.
 - `syncTocLabelsFromHeadings` (optional, default: `false`): Copies the rendered HTML of each heading into its matching Starlight TOC anchor label, so the TOC properly reflects any custom markup (e.g. math) present in the heading.
-- `wrapDetailsContent` (optional, default: `false`): Wraps the content of every `<details>` element (excluding its `<summary>`) in a `<div class="details-wrapper">`, useful for applying consistent spacing or animation styles.
+- `limitDetailsElementHeight` (optional, default: `false`): Limits the height of expanded `<details>` elements and makes their content scrollable.
+- `offerToggleAllDetails` (optional, default: `false`): Injects an "Expand All Dropdowns" toggle checkbox into the right sidebar (before `nav[aria-labelledby="starlight__on-this-page"]`). Clicking it opens or closes every `<details>` element on the page at once. Only appears on pages that contain at least one visible `<details>` element.
 - `offerTabbedContent` (optional, default: `false`): Injects a "Tabbed view" toggle checkbox immediately after `#starlight__on-this-page` in the right sidebar. When enabled by the user, the page's markdown content is reorganised into tabs — one per `<h2>` heading, plus an optional "Main" tab for any content that appears before the first `<h2>`. The toggle state is persisted to `localStorage`; active tab selection is not persisted. Only activates when the page has at least two sections (i.e. two or more `<h2>` elements, or one `<h2>` with pre-heading content). Has no effect on pages that lack `#starlight__on-this-page` (e.g. pages with the TOC disabled). Clicking a TOC anchor while tabs are enabled automatically switches to the tab containing the target heading. The generated elements use the classes `tabbed-content`, `tabbed-content-nav`, `tabbed-content-tab`, and `tabbed-content-panel` for styling; toggle button uses the existing `.toggle-checkbox-btn` class.
 
 **Usage:**
@@ -414,7 +415,8 @@ export default defineConfig({
     starlightDomPatches({
       hideSingleLineGutters: true,
       syncTocLabelsFromHeadings: true,
-      wrapDetailsContent: true,
+      limitDetailsElementHeight: true,
+      offerToggleAllDetails: true,
       offerTabbedContent: true,
     }),
     starlight({ title: "My Docs" }),

package/dist/chunk-D3DPYGKF.js

@@ -0,0 +1,96 @@
+// src/plugins/starlight-dom-patches/index.ts
+import { fileURLToPath } from "url";
+var css = String.raw;
+var js = String.raw;
+var CONDITIONAL_CSS = {
+  limitDetailsElementHeight: {
+    enabled: css`
+      .main-pane details[open] {
+        max-width: 100%;
+      }
+
+      .main-pane details[open] > div.details-wrapper {
+        overflow: auto;
+        max-height: 67vh;
+        padding: 0 1em;
+      }
+
+      .main-pane details[open] p > img {
+        height: auto;
+        width: auto;
+      }
+    `,
+    disabled: css`
+      .main-pane details > *:not(summary) {
+        padding: 0 1rem;
+        margin: 1rem 0;
+      }
+    `
+  }
+};
+function starlightDomPatches(options = {}) {
+  const {
+    hideSingleLineGutters = false,
+    syncTocLabelsFromHeadings = false,
+    limitDetailsElementHeight: limitDetailsElementHeightOption = false,
+    offerTabbedContent = false,
+    offerToggleAllDetails = false,
+    wrapDetailsContent
+  } = options;
+  if (wrapDetailsContent !== void 0) {
+    console.warn(
+      "[starlight-dom-patches] `wrapDetailsContent` is deprecated \u2014 use `limitDetailsElementHeight` instead."
+    );
+  }
+  const limitDetailsElementHeight = wrapDetailsContent ?? limitDetailsElementHeightOption;
+  return {
+    name: "starlight-dom-patches",
+    hooks: {
+      "astro:config:setup": ({ injectScript }) => {
+        const currentFile = fileURLToPath(import.meta.url);
+        let pageScriptUrl;
+        if (currentFile.endsWith(".ts")) {
+          pageScriptUrl = new URL("./page-script.ts", import.meta.url);
+        } else if (currentFile.endsWith("starlight-dom-patches.js")) {
+          pageScriptUrl = new URL(
+            "./starlight-dom-patches/page-script.js",
+            import.meta.url
+          );
+        } else {
+          pageScriptUrl = new URL(
+            "./plugins/starlight-dom-patches/page-script.js",
+            import.meta.url
+          );
+        }
+        for (const [key, entry] of Object.entries(CONDITIONAL_CSS)) {
+          const cssString = options[key] ? entry.enabled : entry.disabled;
+          if (cssString) {
+            injectScript(
+              "page",
+              js`{ const s = document.createElement("style"); s.textContent = ${JSON.stringify(cssString)}; document.head.appendChild(s); }`
+            );
+          }
+        }
+        const scriptPath = JSON.stringify(fileURLToPath(pageScriptUrl));
+        const imports = [
+          hideSingleLineGutters ? "hideSingleLineGutters" : null,
+          syncTocLabelsFromHeadings ? "syncTocLabelsFromHeadings" : null,
+          limitDetailsElementHeight ? "limitDetailsElementHeight" : null,
+          offerTabbedContent ? "tabbedH2Content" : null,
+          offerToggleAllDetails ? "toggleAllDetails" : null
+        ].filter(Boolean);
+        if (imports.length === 0) return;
+        const calls = imports.map((fn) => `${fn}();`).join("\n");
+        injectScript(
+          "page",
+          `import { ${imports.join(", ")} } from ${scriptPath};
+${calls}`
+        );
+      }
+    }
+  };
+}
+
+export {
+  starlightDomPatches
+};

package/dist/index.js

@@ -24,7 +24,7 @@ import {
 } from "./chunk-NCXV367P.js";
 import {
   starlightDomPatches
-} from "./chunk-OXJMUUGP.js";
+} from "./chunk-D3DPYGKF.js";
 import "./chunk-4VNS5WPM.js";
 
 // src/plugins/starlight-index-sourced-sidebar/index.ts

package/dist/plugins/starlight-dom-patches/page-script.d.ts

@@ -1,6 +1,7 @@
 declare function hideSingleLineGutters(): void;
 declare function syncTocLabelsFromHeadings(): void;
 declare function tabbedH2Content(): void;
-declare function wrapDetailsContent(): void;
+declare function toggleAllDetails(): void;
+declare function limitDetailsElementHeight(): void;
 
-export { hideSingleLineGutters, syncTocLabelsFromHeadings, tabbedH2Content, wrapDetailsContent };
+export { hideSingleLineGutters, limitDetailsElementHeight, syncTocLabelsFromHeadings, tabbedH2Content, toggleAllDetails };

package/dist/plugins/starlight-dom-patches/page-script.js

@@ -1,6 +1,21 @@
 import "../../chunk-4VNS5WPM.js";
 
 // src/plugins/starlight-dom-patches/page-script.ts
+var TOC_NAV_SELECTOR = "nav[aria-labelledby='starlight__on-this-page']";
+function appendToActionPanel(element) {
+  const tocNav = document.querySelector(TOC_NAV_SELECTOR);
+  if (!tocNav) return false;
+  let panel = tocNav.parentElement?.querySelector(
+    ":scope > div.cannoli-actionable"
+  ) ?? null;
+  if (!panel) {
+    panel = document.createElement("div");
+    panel.className = "cannoli-actionable";
+    tocNav.parentNode.insertBefore(panel, tocNav);
+  }
+  panel.appendChild(element);
+  return true;
+}
 function hideSingleLineGutters() {
   console.log("Hiding Single Line Gutters");
   const codeElements = document.querySelectorAll(
@@ -48,15 +63,6 @@ function tabbedH2Content() {
     );
     return;
   }
-  const tocNav = document.querySelector(
-    "nav[aria-labelledby='starlight__on-this-page']"
-  );
-  if (!tocNav) {
-    console.log(
-      "[tabbedH2Content] nav[aria-labelledby='starlight__on-this-page'] not found \u2014 aborting"
-    );
-    return;
-  }
   const children = Array.from(container.children);
   if (children.length === 0) {
     console.log("[tabbedH2Content] content container is empty \u2014 aborting");
@@ -168,9 +174,9 @@ function tabbedH2Content() {
   toggleText.textContent = "Tabbed view";
   toggleLabel.appendChild(checkbox);
   toggleLabel.appendChild(toggleText);
-  tocNav.parentNode.insertBefore(toggleLabel, tocNav);
+  appendToActionPanel(toggleLabel);
   console.log(
-    "[tabbedH2Content] toggle checkbox injected after #starlight__on-this-page"
+    "[tabbedH2Content] toggle checkbox injected into .cannoli-actionable panel"
   );
   const initialEnabled = localStorage.getItem(LS_KEY) === "enabled";
   console.log(
@@ -183,7 +189,38 @@ function tabbedH2Content() {
     localStorage.setItem(LS_KEY, checkbox.checked ? "enabled" : "disabled");
   });
 }
-function wrapDetailsContent() {
+function toggleAllDetails() {
+  const detailsElements = document.querySelectorAll(
+    ".main-pane details:not(.visually-hidden)"
+  );
+  if (detailsElements.length === 0) return;
+  const label = document.createElement("label");
+  label.id = "toggle-all-details-btn";
+  label.htmlFor = "toggle-all-details-checkbox";
+  label.className = "toggle-checkbox-btn";
+  const checkbox = document.createElement("input");
+  checkbox.type = "checkbox";
+  checkbox.id = "toggle-all-details-checkbox";
+  checkbox.setAttribute("aria-label", "Toggle all details open/closed");
+  const span = document.createElement("span");
+  span.className = "toggle-label";
+  span.textContent = "Expand All Dropdowns";
+  label.appendChild(checkbox);
+  label.appendChild(span);
+  appendToActionPanel(label);
+  let allOpen = false;
+  checkbox.addEventListener("change", () => {
+    document.body.dataset.bulkToggleActive = "true";
+    detailsElements.forEach((details) => {
+      details.open = !allOpen;
+    });
+    allOpen = !allOpen;
+    setTimeout(() => {
+      delete document.body.dataset.bulkToggleActive;
+    }, 10);
+  });
+}
+function limitDetailsElementHeight() {
   console.log("Wrapping details element contents");
   const detailsElements = document.querySelectorAll(".main-pane details");
   detailsElements.forEach((details) => {
@@ -213,7 +250,8 @@ function wrapDetailsContent() {
 }
 export {
   hideSingleLineGutters,
+  limitDetailsElementHeight,
   syncTocLabelsFromHeadings,
   tabbedH2Content,
-  wrapDetailsContent
+  toggleAllDetails
 };

package/dist/plugins/starlight-dom-patches.d.ts

@@ -5,14 +5,25 @@ interface DomPatchesOptions {
     hideSingleLineGutters?: boolean;
     /** Copy rendered heading innerHTML into matching Starlight TOC anchor labels. @default false */
     syncTocLabelsFromHeadings?: boolean;
-    /** Wrap `<details>` content (excluding `<summary>`) in a `.details-wrapper` div. @default false */
-    wrapDetailsContent?: boolean;
+    /** Limit the height of expanded `<details>` elements and make their content scrollable. @default false */
+    limitDetailsElementHeight?: boolean;
     /**
      * Inject a toggle checkbox (after `#starlight__on-this-page`) that reorganises page content
      * into tabs driven by `<h2>` boundaries. Toggle state is persisted to localStorage.
      * @default false
      */
     offerTabbedContent?: boolean;
+    /**
+     * Inject a "Expand All Dropdowns" toggle checkbox that opens or closes every
+     * `<details>` element on the page at once. Only appears on pages that contain
+     * at least one visible `<details>` element.
+     * @default false
+     */
+    offerToggleAllDetails?: boolean;
+    /**
+     * @deprecated Use `limitDetailsElementHeight` instead.
+     */
+    wrapDetailsContent?: boolean;
 }
 /**
  * Astro integration that injects a client-side script to apply DOM patches

package/dist/plugins/starlight-dom-patches.js

@@ -1,6 +1,6 @@
 import {
   starlightDomPatches
-} from "../chunk-OXJMUUGP.js";
+} from "../chunk-D3DPYGKF.js";
 import "../chunk-4VNS5WPM.js";
 export {
   starlightDomPatches

package/dist/styles/_starlight.scss

@@ -76,21 +76,6 @@ starlight-toc ul > li {
   html[data-theme="light"] & {
     background: rgba(162, 171, 173, 0.08);
   }
-
-  &[open] {
-    max-width: 100%;
-
-    > div.details-wrapper {
-      overflow: auto;
-      max-height: 67vh;
-      padding: 0 1em;
-    }
-
-    p > img {
-      height: auto;
-      width: auto;
-    }
-  }
 }
 
 /********** MathJax/LaTeX Styling **********/
@@ -186,7 +171,7 @@ div > div[class="page"] > svg {
   }
 }
 
-starlight-toc .toggle-checkbox-btn:last-of-type {
+.cannoli-actionable {
   margin-bottom: 1rem;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "starlight-cannoli-plugins",
   "type": "module",
-  "version": "2.8.3",
+  "version": "2.9.1",
   "description": "Starlight plugins for automatic sidebar generation and link validation",
   "license": "ISC",
   "main": "./dist/index.js",

package/dist/chunk-OXJMUUGP.js

@@ -1,50 +0,0 @@
-// src/plugins/starlight-dom-patches/index.ts
-import { fileURLToPath } from "url";
-function starlightDomPatches(options = {}) {
-  const {
-    hideSingleLineGutters = false,
-    syncTocLabelsFromHeadings = false,
-    wrapDetailsContent = false,
-    offerTabbedContent = false
-  } = options;
-  return {
-    name: "starlight-dom-patches",
-    hooks: {
-      "astro:config:setup": ({ injectScript }) => {
-        const currentFile = fileURLToPath(import.meta.url);
-        let pageScriptUrl;
-        if (currentFile.endsWith(".ts")) {
-          pageScriptUrl = new URL("./page-script.ts", import.meta.url);
-        } else if (currentFile.endsWith("starlight-dom-patches.js")) {
-          pageScriptUrl = new URL(
-            "./starlight-dom-patches/page-script.js",
-            import.meta.url
-          );
-        } else {
-          pageScriptUrl = new URL(
-            "./plugins/starlight-dom-patches/page-script.js",
-            import.meta.url
-          );
-        }
-        const scriptPath = JSON.stringify(fileURLToPath(pageScriptUrl));
-        const imports = [
-          hideSingleLineGutters ? "hideSingleLineGutters" : null,
-          syncTocLabelsFromHeadings ? "syncTocLabelsFromHeadings" : null,
-          wrapDetailsContent ? "wrapDetailsContent" : null,
-          offerTabbedContent ? "tabbedH2Content" : null
-        ].filter(Boolean);
-        if (imports.length === 0) return;
-        const calls = imports.map((fn) => `${fn}();`).join("\n");
-        injectScript(
-          "page",
-          `import { ${imports.join(", ")} } from ${scriptPath};
-${calls}`
-        );
-      }
-    }
-  };
-}
-
-export {
-  starlightDomPatches
-};