starlight-cannoli-plugins 2.14.2 → 2.16.0

package/README.md

@@ -361,6 +361,8 @@ An Astro integration that injects a client-side script to apply opt-in DOM patch
 - `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.
+- `decorateExternalLinks` (optional): Scans all links inside `.sl-markdown-content` and prepends a destination-specific icon to recognised link targets. Pass an object enabling each supported destination individually:
+  - `youtube` (default: `false`): prepends a YouTube play-button SVG (class `yt-icon`, `aria-hidden`, inherits `currentColor`) to links pointing to `youtube.com` or `youtu.be`.
 
 **Usage:**
 
@@ -378,6 +380,9 @@ export default defineConfig({
       limitDetailsElementHeight: true,
       offerToggleAllDetails: true,
       offerTabbedContent: true,
+      decorateExternalLinks: {
+        youtube: true,
+      },
     }),
     starlight({ title: "My Docs" }),
   ],

package/dist/{chunk-PPNIMJPX.js → chunk-SKQV57MG.js}

@@ -90,6 +90,7 @@ function starlightDomPatches(options = {}) {
     limitDetailsElementHeight: limitDetailsElementHeightOption = false,
     offerTabbedContent = false,
     offerToggleAllDetails = false,
+    decorateExternalLinks,
     wrapDetailsContent
   } = options;
   if (wrapDetailsContent !== void 0) {
@@ -132,10 +133,16 @@ function starlightDomPatches(options = {}) {
           syncTocLabelsFromHeadings ? "syncTocLabelsFromHeadings" : null,
           limitDetailsElementHeight ? "limitDetailsElementHeight" : null,
           offerTabbedContent ? "tabbedH2Content" : null,
-          offerToggleAllDetails ? "toggleAllDetails" : null
+          offerToggleAllDetails ? "toggleAllDetails" : null,
+          decorateExternalLinks ? "decorateExternalLinks" : null
         ].filter(Boolean);
         if (imports.length === 0) return;
-        const calls = imports.map((fn) => `${fn}();`).join("\n");
+        const calls = imports.map((fn) => {
+          if (fn === "decorateExternalLinks" && decorateExternalLinks) {
+            return `${fn}(${JSON.stringify(decorateExternalLinks)});`;
+          }
+          return `${fn}();`;
+        }).join("\n");
         injectScript(
           "page",
           `import { ${imports.join(", ")} } from ${scriptPath};

package/dist/index.js

@@ -26,7 +26,7 @@ import {
 } from "./chunk-C2VXRQOK.js";
 import {
   starlightDomPatches
-} from "./chunk-PPNIMJPX.js";
+} from "./chunk-SKQV57MG.js";
 import "./chunk-4VNS5WPM.js";
 
 // src/plugins/starlight-index-sourced-sidebar/index.ts

package/dist/plugins/astro-sync-docs-to-public/page-script.js

@@ -47,6 +47,13 @@ function createActionBar() {
         getRawMdUrl().then((url) => fetch(url)).then((resp) => resp.text()).then((text) => navigator.clipboard.writeText(text)).then(() => showBanner("Page source copied to clipboard!", "success")).catch(() => showBanner("Failed to copy page source.", "error")).finally(() => setLoading(false));
       }
     },
+    {
+      label: "Copy raw URL",
+      action: () => {
+        setLoading(true);
+        getRawMdUrl().then((url) => navigator.clipboard.writeText(url)).then(() => showBanner("Raw URL copied to clipboard!", "success")).catch(() => showBanner("Failed to copy raw URL.", "error")).finally(() => setLoading(false));
+      }
+    },
     {
       label: "View raw",
       action: () => {

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

@@ -2,6 +2,10 @@ declare function hideSingleLineGutters(): void;
 declare function syncTocLabelsFromHeadings(): void;
 declare function tabbedH2Content(): void;
 declare function toggleAllDetails(): void;
+type DecorateExternalLinksOptions = {
+    youtube?: boolean;
+};
+declare function decorateExternalLinks(options: DecorateExternalLinksOptions): void;
 declare function limitDetailsElementHeight(): void;
 
-export { hideSingleLineGutters, limitDetailsElementHeight, syncTocLabelsFromHeadings, tabbedH2Content, toggleAllDetails };
+export { decorateExternalLinks, hideSingleLineGutters, limitDetailsElementHeight, syncTocLabelsFromHeadings, tabbedH2Content, toggleAllDetails };

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

@@ -285,6 +285,53 @@ function toggleAllDetails() {
     }, 10);
   });
 }
+function decorateExternalLinks(options) {
+  const MATCHERS = [
+    {
+      key: "youtube",
+      domains: ["youtube.com", "youtu.be", "www.youtube.com"],
+      iconClass: "yt-icon",
+      viewBox: "0 0 24 24",
+      d: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
+    }
+  ];
+  const enabledMatchers = MATCHERS.filter((m) => options[m.key]);
+  function matchIcon(href) {
+    try {
+      const { hostname } = new URL(href);
+      return enabledMatchers.find((m) => m.domains.includes(hostname)) ?? null;
+    } catch {
+      return null;
+    }
+  }
+  document.querySelectorAll(".sl-markdown-content a[href]").forEach((anchor) => {
+    const href = anchor.getAttribute("href") ?? "";
+    const matcher = matchIcon(href);
+    if (!matcher) return;
+    if (anchor.querySelector(`span.not-content > .${matcher.iconClass}`))
+      return;
+    const wrapper = document.createElement("span");
+    wrapper.className = "not-content pe-1 align-middle";
+    const icon = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "svg"
+    );
+    icon.setAttribute("class", matcher.iconClass);
+    icon.setAttribute("viewBox", matcher.viewBox);
+    icon.setAttribute("aria-hidden", "true");
+    icon.setAttribute("width", "1em");
+    icon.setAttribute("height", "1em");
+    const path = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "path"
+    );
+    path.setAttribute("d", matcher.d);
+    path.setAttribute("fill", "currentColor");
+    icon.appendChild(path);
+    wrapper.appendChild(icon);
+    anchor.prepend(wrapper);
+  });
+}
 function limitDetailsElementHeight() {
   const detailsElements = document.querySelectorAll(".main-pane details");
   detailsElements.forEach((details) => {
@@ -313,6 +360,7 @@ function limitDetailsElementHeight() {
   });
 }
 export {
+  decorateExternalLinks,
   hideSingleLineGutters,
   limitDetailsElementHeight,
   syncTocLabelsFromHeadings,

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

@@ -20,6 +20,14 @@ interface DomPatchesOptions {
      * @default false
      */
     offerToggleAllDetails?: boolean;
+    /**
+     * Prepend icons to links based on their destination.
+     * Each key enables a specific icon; omitting a key or setting it to `false` disables it.
+     */
+    decorateExternalLinks?: {
+        /** Prepend a YouTube play-button icon to links pointing to youtube.com or youtu.be. */
+        youtube?: boolean;
+    };
     /**
      * @deprecated Use `limitDetailsElementHeight` instead.
      */

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

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

package/package.json

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