starlight-cannoli-plugins 2.10.1 → 2.10.3

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

@@ -16,7 +16,6 @@ function appendToActionPanel(element) {
   return true;
 }
 function hideSingleLineGutters() {
-  console.log("Hiding Single Line Gutters");
   const codeElements = document.querySelectorAll(
     "div.expressive-code > figure > pre > code"
   );
@@ -51,142 +50,199 @@ function syncTocLabelsFromHeadings() {
   });
 }
 function tabbedH2Content() {
-  console.log("[tabbedH2Content] running");
   const LS_KEY = "starlight-dom-patches:tabbed-content";
-  const container = document.querySelector(
+  const contentContainer = document.querySelector(
     ".main-pane .sl-markdown-content"
   );
-  if (!container) {
-    console.log(
-      "[tabbedH2Content] no .main-pane .sl-markdown-content found \u2014 aborting"
-    );
-    return;
-  }
-  const children = Array.from(container.children);
-  if (children.length === 0) {
-    console.log("[tabbedH2Content] content container is empty \u2014 aborting");
-    return;
-  }
-  console.log(`[tabbedH2Content] container element:`, container);
-  console.log(
-    `[tabbedH2Content] found ${children.length} children:`,
-    children.map((c) => c.tagName).join(", ")
+  if (!contentContainer) return;
+  const starlightToc = document.querySelector("starlight-toc");
+  if (!starlightToc) return;
+  const contentChildren = Array.from(
+    contentContainer.children
   );
-  const preH2Nodes = [];
-  const h2Sections = [];
-  let currentSection = null;
-  const isH2Wrapper = (el) => el.tagName === "DIV" && el.classList.contains("sl-heading-wrapper") && el.classList.contains("level-h2");
-  for (const child of children) {
-    if (isH2Wrapper(child)) {
-      if (currentSection) h2Sections.push(currentSection);
-      const h2 = child.querySelector("h2");
-      currentSection = {
-        label: h2 ? headingInnerHTML(h2) : "",
-        nodes: [child]
-      };
-    } else if (currentSection === null) {
-      preH2Nodes.push(child);
-    } else {
-      currentSection.nodes.push(child);
+  if (contentChildren.length === 0) return;
+  function splitIntoSections() {
+    const isH2Wrapper = (element) => element.tagName === "DIV" && element.classList.contains("sl-heading-wrapper") && element.classList.contains("level-h2");
+    const preH2Nodes2 = [];
+    const h2Sections2 = [];
+    let currentSection = null;
+    for (const block of contentChildren) {
+      if (isH2Wrapper(block)) {
+        if (currentSection) h2Sections2.push(currentSection);
+        const h2Element = block.querySelector("h2");
+        currentSection = {
+          label: h2Element ? headingInnerHTML(h2Element) : "",
+          headingId: h2Element?.id,
+          nodes: [block]
+        };
+      } else if (currentSection === null) {
+        preH2Nodes2.push(block);
+      } else {
+        currentSection.nodes.push(block);
+      }
     }
+    if (currentSection) h2Sections2.push(currentSection);
+    return { preH2Nodes: preH2Nodes2, h2Sections: h2Sections2 };
   }
-  if (currentSection) h2Sections.push(currentSection);
-  const hasPreContent = preH2Nodes.length > 0;
-  const totalSections = (hasPreContent ? 1 : 0) + h2Sections.length;
-  console.log(
-    `[tabbedH2Content] preH2Nodes: ${preH2Nodes.length}, h2Sections: ${h2Sections.length}, totalSections: ${totalSections}`
-  );
-  if (totalSections <= 1) {
-    console.log(
-      "[tabbedH2Content] only one section \u2014 aborting (no tabs needed)"
-    );
-    return;
-  }
+  const { preH2Nodes, h2Sections } = splitIntoSections();
+  const hasPreH2Content = preH2Nodes.length > 0;
+  if ((hasPreH2Content ? 1 : 0) + h2Sections.length <= 1) return;
   const allSections = [];
-  if (hasPreContent) allSections.push({ label: "Main", nodes: preH2Nodes });
+  if (hasPreH2Content) allSections.push({ label: "Main", nodes: preH2Nodes });
   allSections.push(...h2Sections);
-  const wrapper = document.createElement("div");
-  wrapper.className = "tabbed-content";
-  const nav = document.createElement("div");
-  nav.className = "tabbed-content-nav not-content";
-  const tabButtons = [];
-  const panels = [];
-  allSections.forEach((section, i) => {
-    const btn = document.createElement("button");
-    btn.className = "tabbed-content-tab";
-    btn.innerHTML = section.label;
-    btn.dataset.tab = String(i);
-    tabButtons.push(btn);
-    nav.appendChild(btn);
-    const panel = document.createElement("div");
-    panel.className = "tabbed-content-panel";
-    panel.dataset.panel = String(i);
-    section.nodes.forEach((node) => panel.appendChild(node));
-    panels.push(panel);
-  });
-  wrapper.appendChild(nav);
-  panels.forEach((p) => wrapper.appendChild(p));
-  container.appendChild(wrapper);
-  let activeTab = 0;
-  function activateTab(index) {
-    activeTab = index;
-    tabButtons.forEach((btn, i) => {
-      btn.dataset.active = String(i === index);
+  function buildTabs() {
+    const tabbedWrapper2 = document.createElement("div");
+    tabbedWrapper2.className = "tabbed-content";
+    const tabNav2 = document.createElement("div");
+    tabNav2.className = "tabbed-content-nav not-content";
+    const tabButtons2 = [];
+    const tabPanels2 = [];
+    allSections.forEach((section, sectionIndex) => {
+      const tabButton = document.createElement("button");
+      tabButton.className = "tabbed-content-tab";
+      tabButton.innerHTML = section.label;
+      tabButton.dataset.tab = String(sectionIndex);
+      tabButtons2.push(tabButton);
+      tabNav2.appendChild(tabButton);
+      const tabPanel = document.createElement("div");
+      tabPanel.className = "tabbed-content-panel";
+      tabPanel.dataset.panel = String(sectionIndex);
+      section.nodes.forEach((node) => tabPanel.appendChild(node));
+      tabPanels2.push(tabPanel);
     });
-    panels.forEach((panel, i) => {
-      panel.hidden = i !== index;
+    tabbedWrapper2.appendChild(tabNav2);
+    tabPanels2.forEach((tabPanel) => tabbedWrapper2.appendChild(tabPanel));
+    return { tabbedWrapper: tabbedWrapper2, tabNav: tabNav2, tabButtons: tabButtons2, tabPanels: tabPanels2 };
+  }
+  function buildPagination() {
+    const paginationBar2 = document.createElement("div");
+    paginationBar2.className = "tabbed-content-pagination not-content";
+    const prevTabButton2 = document.createElement("button");
+    prevTabButton2.className = "tabbed-content-pagination-btn";
+    prevTabButton2.dataset.direction = "prev";
+    prevTabButton2.textContent = "\u2190 Previous Tab";
+    const nextTabButton2 = document.createElement("button");
+    nextTabButton2.className = "tabbed-content-pagination-btn";
+    nextTabButton2.dataset.direction = "next";
+    nextTabButton2.textContent = "Next Tab \u2192";
+    paginationBar2.appendChild(prevTabButton2);
+    paginationBar2.appendChild(nextTabButton2);
+    return { paginationBar: paginationBar2, prevTabButton: prevTabButton2, nextTabButton: nextTabButton2 };
+  }
+  function buildToggle() {
+    const viewToggleLabel = document.createElement("label");
+    viewToggleLabel.className = "toggle-checkbox-btn";
+    const viewToggleCheckbox2 = document.createElement("input");
+    viewToggleCheckbox2.type = "checkbox";
+    const viewToggleText = document.createElement("span");
+    viewToggleText.textContent = "Tabbed view";
+    viewToggleLabel.appendChild(viewToggleCheckbox2);
+    viewToggleLabel.appendChild(viewToggleText);
+    appendToActionPanel(viewToggleLabel);
+    return viewToggleCheckbox2;
+  }
+  const { tabbedWrapper, tabNav, tabButtons, tabPanels } = buildTabs();
+  const { paginationBar, prevTabButton, nextTabButton } = buildPagination();
+  contentContainer.appendChild(tabbedWrapper);
+  contentContainer.appendChild(paginationBar);
+  let activeTabIndex = 0;
+  function isTabNavVisible() {
+    const rect = tabNav.getBoundingClientRect();
+    return rect.top < window.innerHeight && rect.bottom > 0;
+  }
+  function activateTab(targetIndex, updateHash = true, scrollToNav = false) {
+    activeTabIndex = targetIndex;
+    tabButtons.forEach((tabButton, buttonIndex) => {
+      tabButton.dataset.active = String(buttonIndex === targetIndex);
+    });
+    tabPanels.forEach((tabPanel, panelIndex) => {
+      tabPanel.hidden = panelIndex !== targetIndex;
     });
+    prevTabButton.disabled = targetIndex === 0;
+    nextTabButton.disabled = targetIndex === allSections.length - 1;
+    const scrollBehavior = getComputedStyle(document.documentElement).scrollBehavior;
+    tabButtons[targetIndex].scrollIntoView({
+      behavior: scrollBehavior,
+      block: "nearest",
+      inline: "nearest"
+    });
+    if (scrollToNav) {
+      tabNav.scrollIntoView({ behavior: scrollBehavior, block: "nearest" });
+    }
+    if (updateHash) {
+      const targetHeadingId = allSections[targetIndex].headingId;
+      if (targetHeadingId) {
+        history.replaceState(null, "", `#${targetHeadingId}`);
+      } else {
+        history.replaceState(
+          null,
+          "",
+          window.location.pathname + window.location.search
+        );
+      }
+    }
+  }
+  function findPanelIndexForHash(urlHash) {
+    const targetHeadingId = urlHash.startsWith("#") ? urlHash.slice(1) : urlHash;
+    return tabPanels.findIndex(
+      (tabPanel) => tabPanel.querySelector(`#${CSS.escape(targetHeadingId)}`)
+    );
   }
   function setEnabled(enabled) {
-    wrapper.dataset.enabled = String(enabled);
-    nav.hidden = !enabled;
+    tabbedWrapper.dataset.enabled = String(enabled);
+    tabNav.hidden = !enabled;
+    paginationBar.hidden = !enabled;
     if (enabled) {
-      activateTab(activeTab);
+      const hashPanelIndex = window.location.hash ? findPanelIndexForHash(window.location.hash) : -1;
+      activateTab(hashPanelIndex >= 0 ? hashPanelIndex : activeTabIndex, false);
     } else {
-      panels.forEach((panel) => {
-        panel.hidden = false;
+      tabPanels.forEach((tabPanel) => {
+        tabPanel.hidden = false;
       });
     }
   }
-  tabButtons.forEach((btn, i) => {
-    btn.addEventListener("click", () => {
-      if (wrapper.dataset.enabled === "true") activateTab(i);
+  function navigateToHash(urlHash) {
+    if (!urlHash || tabbedWrapper.dataset.enabled !== "true") return;
+    const targetPanelIndex = findPanelIndexForHash(urlHash);
+    if (targetPanelIndex >= 0 && targetPanelIndex !== activeTabIndex)
+      activateTab(targetPanelIndex, false);
+  }
+  function wireInteractions(viewToggleCheckbox2) {
+    prevTabButton.addEventListener("click", () => {
+      if (activeTabIndex > 0) {
+        const scrollToNav = !isTabNavVisible();
+        activateTab(activeTabIndex - 1, true, scrollToNav);
+      }
     });
-  });
-  function navigateToHash(hash) {
-    if (!hash || wrapper.dataset.enabled !== "true") return;
-    const id = hash.startsWith("#") ? hash.slice(1) : hash;
-    panels.forEach((panel, i) => {
-      if (panel.querySelector(`#${CSS.escape(id)}`)) activateTab(i);
+    nextTabButton.addEventListener("click", () => {
+      if (activeTabIndex < allSections.length - 1) {
+        const scrollToNav = !isTabNavVisible();
+        activateTab(activeTabIndex + 1, true, scrollToNav);
+      }
+    });
+    tabButtons.forEach((tabButton, buttonIndex) => {
+      tabButton.addEventListener("click", () => {
+        if (tabbedWrapper.dataset.enabled === "true") activateTab(buttonIndex);
+      });
+    });
+    window.addEventListener(
+      "hashchange",
+      () => navigateToHash(window.location.hash)
+    );
+    viewToggleCheckbox2.addEventListener("change", () => {
+      setEnabled(viewToggleCheckbox2.checked);
+      localStorage.setItem(
+        LS_KEY,
+        viewToggleCheckbox2.checked ? "enabled" : "disabled"
+      );
     });
   }
-  window.addEventListener(
-    "hashchange",
-    () => navigateToHash(window.location.hash)
-  );
-  if (window.location.hash) navigateToHash(window.location.hash);
-  const toggleLabel = document.createElement("label");
-  toggleLabel.className = "toggle-checkbox-btn";
-  const checkbox = document.createElement("input");
-  checkbox.type = "checkbox";
-  const toggleText = document.createElement("span");
-  toggleText.textContent = "Tabbed view";
-  toggleLabel.appendChild(checkbox);
-  toggleLabel.appendChild(toggleText);
-  appendToActionPanel(toggleLabel);
-  console.log(
-    "[tabbedH2Content] toggle checkbox injected into .cannoli-actionable panel"
-  );
+  const viewToggleCheckbox = buildToggle();
   const initialEnabled = localStorage.getItem(LS_KEY) === "enabled";
-  console.log(
-    `[tabbedH2Content] localStorage value: ${localStorage.getItem(LS_KEY)}, initialEnabled: ${initialEnabled}`
-  );
-  checkbox.checked = initialEnabled;
+  viewToggleCheckbox.checked = initialEnabled;
   setEnabled(initialEnabled);
-  checkbox.addEventListener("change", () => {
-    setEnabled(checkbox.checked);
-    localStorage.setItem(LS_KEY, checkbox.checked ? "enabled" : "disabled");
-  });
+  if (window.location.hash) navigateToHash(window.location.hash);
+  wireInteractions(viewToggleCheckbox);
 }
 function toggleAllDetails() {
   const detailsElements = document.querySelectorAll(
@@ -220,7 +276,6 @@ function toggleAllDetails() {
   });
 }
 function limitDetailsElementHeight() {
-  console.log("Wrapping details element contents");
   const detailsElements = document.querySelectorAll(".main-pane details");
   detailsElements.forEach((details) => {
     if (details.children.length === 0) return;

package/dist/styles/_starlight.scss

@@ -171,6 +171,40 @@ div > div[class="page"] > svg {
   margin-bottom: 1rem;
 }
 
+.tabbed-content-pagination {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 2rem;
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+.tabbed-content-pagination-btn {
+  padding: 0.4rem 1rem;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 6px;
+  background-color: transparent;
+  color: var(--sl-color-text);
+  cursor: pointer;
+  font-size: 0.875em;
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+
+  &:hover:not(:disabled) {
+    background-color: var(--sl-color-gray-6);
+    border-color: var(--sl-color-gray-4);
+  }
+
+  &:disabled {
+    opacity: 0.35;
+    cursor: default;
+  }
+}
+
 .toggle-checkbox-btn {
   display: flex;
   align-items: center;

package/package.json

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