spec-up-t 1.2.0 → 1.2.2

package/assets/css/terms-and-definitions.css

@@ -59,7 +59,6 @@ dl.terms-and-definitions-list > dt {
   border: 1px solid var(--card-border);
   padding: 0.5rem 1.25rem; /* Increased vertical padding for better readability */
   border-radius: 0.375rem 0.375rem 0 0;
-  box-shadow: 0 0.125rem 0.25rem var(--card-shadow);
   color: var(--card-text);
   position: relative; /* Position relative for stacking */
   line-height: 1.5; /* Improve line spacing */
@@ -83,32 +82,21 @@ dl.terms-and-definitions-list > dt:hover {
   transition: background-color 0.2s ease-in-out;
 }
 
-/* Add a subtle indicator to each term */
-dl.terms-and-definitions-list > dt::before {
-  content: "";
-  width: 4px;
-  height: 70%;
-  background-color: #73c2df;
-  position: absolute;
-  left: 0;
-  border-radius: 0 2px 2px 0;
-}
-
-/* Definition styling (dd) - using the original simpler styling */
+/* Definition styling (dd) */
 dl.terms-and-definitions-list > dd {
   margin: 0;
   background-color: var(--card-bg);
   border: 1px solid var(--card-border);
   border-top: none;
-  padding: 0.75rem 2rem;
+  padding: 0.5rem 2rem;
   color: var(--card-text);
   width: 100%;
   position: relative;
 }
 
-/* Style paragraphs inside dd - using original styling */
+/* Style paragraphs inside dd */
 dl.terms-and-definitions-list dd p {
-  margin: 0; /* Original margin for paragraphs */
+  margin: 0;
   color: var(--card-text);
   padding-left: 0.5rem;
 }
@@ -120,7 +108,7 @@ dl.terms-and-definitions-list > dd::before {
 
 /* Improve table styling in definitions */
 dl.terms-and-definitions-list dd table {
-  margin: 1em 0;
+  margin: 0.5em 0;
   width: 100%;
   border-collapse: collapse;
 }
@@ -135,6 +123,55 @@ dl.terms-and-definitions-list dd table th {
   background-color: #f5f5f5;
 }
 
+/*
+  Make the meta-info tables collapsible
+*/
+
+/* Wrapper for meta info content */
+dl>dd:has(table).meta-info-content-wrapper {
+  display: block;
+  font-size: 0.7em;
+  position: relative;
+  max-height: none;
+  height: auto;
+  overflow: visible;
+  transition: all 0.3s ease-out;
+}
+
+dl>dd:has(table).meta-info-content-wrapper td,
+dl>dd:has(table).meta-info-content-wrapper th {
+  padding: 0.3em;
+}
+
+/* Collapsed state for meta info content */
+dl>dd:has(table).collapsed.meta-info-content-wrapper {
+  max-height: 0;
+  height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  overflow: hidden;
+  transition: all 0.3s ease-out;
+  line-height: 0;
+}
+
+/* The inner content wrapper to ensure proper spacing */
+dl>dd:has(table).meta-info-content-wrapper>div {
+  display: block;
+  padding: inherit;
+}
+
+/* Meta info toggle button */
+.meta-info-toggle-button {
+  position: relative;
+  cursor: pointer;
+}
+
+/*
+  END Make the meta-info tables collapsible
+*/
+
 /* Borders and spacing between elements */
 dl.terms-and-definitions-list dt + dd {
   border-bottom: none;
@@ -146,7 +183,7 @@ dl.terms-and-definitions-list dd + dd {
 }
 
 dl.terms-and-definitions-list dd + dt {
-  margin-top: 0.5rem;
+  margin-top: 1rem;
 }
 
 /* Last definition in a group */
@@ -164,6 +201,10 @@ html.dense-info dl.terms-and-definitions-list > dt {
   font-size: inherit;
 }
 
+html.dense-info dl.terms-and-definitions-list dd+dt {
+  margin-top: 0.3rem;
+}
+
 html.dense-info dl.terms-and-definitions-list > dt::before {
   display: none; /* Remove the blue indicator bar */
 }
@@ -172,11 +213,6 @@ html.dense-info dl.terms-and-definitions-list > dt > span {
   margin-right: 0; /* Remove spacing for term text */
 }
 
-/* No need to change dd styling in dense-info mode since it's already using the original styling */
-html.dense-info dl.terms-and-definitions-list > dd {
-  padding: 0.75rem 1.25rem;
-}
-
 /* ====== TRANSCLUSIONS STYLING ====== */
 /* Base transclusion styles */
 .transcluded-xref-term {
@@ -203,28 +239,19 @@ dd.transcluded-xref-term {
 .transclusion-heading {
   font-size: 1.3em;
   font-weight: bold;
-  margin: 1em 0 0.5em;
+  margin: 0.2em 0 0.2em;
 }
 
 /* Embedded transclusions in definition lists */
 dl.terms-and-definitions-list > dd.transcluded-xref-term-embedded {
   position: relative;
   padding-left: 2.5rem;
-}
-
-dl.terms-and-definitions-list > dd.transcluded-xref-term-embedded::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 2rem;
-  border-right: 1px dashed #a9dde0;
+  padding-top: 0.3rem;
+  padding-bottom: 0.3rem;
 }
 
 /* Arrow styling for transclusions */
-dl.terms-and-definitions-list span.transcluded-xref-term::after,
-dl.terms-and-definitions-list > dd.transcluded-xref-term-embedded::after {
+dl.terms-and-definitions-list span.transcluded-xref-term::after {
   content: "";
   position: absolute;
   left: 0.5rem;
@@ -244,16 +271,6 @@ dl.terms-and-definitions-list span.transcluded-xref-term {
   display: inline-block;
 }
 
-dl.terms-and-definitions-list span.transcluded-xref-term::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 1.2rem;
-  border-right: 1px dashed #a9dde0;
-}
-
 dl.terms-and-definitions-list span.transcluded-xref-term::after {
   width: 0.8rem;
   height: 0.8rem;
@@ -275,4 +292,5 @@ dl.terms-and-definitions-list span.transcluded-xref-term::after {
   font-size: 0.8rem;
   font-variant: small-caps;
   text-transform: uppercase;
-}
+}
+

package/assets/js/collapse-meta-info.js

@@ -9,7 +9,11 @@
 function createToggleButton(element) {
     const toggleButton = document.createElement('button');
     toggleButton.classList.add('meta-info-toggle-button', 'btn');
-    toggleButton.textContent = 'ℹ️';
+    toggleButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16" style="shape-rendering: geometricPrecision;">' +
+        '<path fill-rule="evenodd" d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>' +
+        '<path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/>' + 
+        '<path d="M9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>' +
+    '</svg>';
     toggleButton.title = 'Meta info';
 
     // Add event listener to the button

package/assets/js/collapsibleMenu.js

@@ -0,0 +1,133 @@
+/**
+ * Implements Docusaurus-like collapsible navigation menu for the TOC with accessibility support
+ */
+function initCollapsibleMenu() {
+  // The TOC is within the #toc container element
+  const tocContainer = document.getElementById('toc');
+  if (!tocContainer) {
+    console.warn("TOC container not found");
+    return;
+  }
+
+  // Clear any existing toggle buttons to prevent duplicates when reinitializing
+  const existingButtons = tocContainer.querySelectorAll('.collapse-toggle');
+  existingButtons.forEach(button => button.remove());
+  
+  // Get all TOC list items with children
+  // The TOC structure is ul.toc within #toc container
+  const tocItems = tocContainer.querySelectorAll('ul li');
+  
+  tocItems.forEach((item, index) => {
+    const hasChildren = item.querySelector('ul');
+    
+    if (hasChildren) {
+      // Mark item as having children
+      item.classList.add('has-children');
+      
+      // Create toggle button
+      const toggleBtn = document.createElement('button');
+      toggleBtn.className = 'collapse-toggle';
+      toggleBtn.setAttribute('aria-label', 'Toggle section');
+      toggleBtn.setAttribute('type', 'button');
+      toggleBtn.id = `toc-toggle-${index}`;
+      
+      // Find the direct link child of the item to position the button next to it
+      const linkElement = item.querySelector(':scope > a');
+      
+      // Improve accessibility by marking the relationship between button and menu
+      if (linkElement) {
+        // Get the text of the link for the aria-label
+        const linkText = linkElement.textContent.trim();
+        toggleBtn.setAttribute('aria-label', `Toggle ${linkText} section`);
+        
+        // Add the toggle button next to the link
+        linkElement.parentNode.insertBefore(toggleBtn, linkElement.nextSibling);
+        
+        // Connect the link and the toggle button for better accessibility
+        hasChildren.setAttribute('role', 'group');
+        hasChildren.setAttribute('aria-labelledby', linkElement.id || `toc-item-${index}`);
+        
+        // If the link doesn't have an ID, add one for reference
+        if (!linkElement.id) {
+          linkElement.id = `toc-item-${index}`;
+        }
+      } else {
+        // Fallback - just append to the item
+        item.appendChild(toggleBtn);
+      }
+      
+      // Add aria attributes for accessibility
+      toggleBtn.setAttribute('aria-controls', `toc-children-${index}`);
+      hasChildren.id = `toc-children-${index}`;
+      
+      // Add click event to toggle button
+      toggleBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        const isCollapsed = item.classList.contains('collapsed');
+        
+        // Toggle collapsed state
+        if (isCollapsed) {
+          item.classList.remove('collapsed');
+          toggleBtn.classList.remove('collapsed');
+          toggleBtn.setAttribute('aria-expanded', 'true');
+        } else {
+          item.classList.add('collapsed');
+          toggleBtn.classList.add('collapsed');
+          toggleBtn.setAttribute('aria-expanded', 'false');
+        }
+      });
+      
+      // Add keyboard navigation
+      toggleBtn.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          toggleBtn.click();
+        }
+      });
+      
+      // Set initial states - expand the active section, collapse others
+      const hasActiveChild = item.querySelector('a.highlight-cfib41dyhcd99sm, a.active');
+      if (!hasActiveChild) {
+        item.classList.add('collapsed');
+        toggleBtn.classList.add('collapsed');
+        toggleBtn.setAttribute('aria-expanded', 'false');
+      } else {
+        toggleBtn.setAttribute('aria-expanded', 'true');
+      }
+    }
+  });
+  
+  console.log('Collapsible menu initialized with accessibility improvements');
+}
+
+// Log TOC structure to help debugging
+function logTOCStructure() {
+  const tocContainer = document.getElementById('toc');
+  if (tocContainer) {
+    console.log('TOC container found:', tocContainer);
+    console.log('TOC container children:', tocContainer.children);
+    const firstUL = tocContainer.querySelector('ul');
+    if (firstUL) {
+      console.log('First UL found:', firstUL);
+      console.log('UL class list:', firstUL.classList);
+      const listItems = firstUL.querySelectorAll('li');
+      console.log('List items count:', listItems.length);
+    } else {
+      console.warn('No UL found in TOC container');
+    }
+  } else {
+    console.warn('TOC container not found');
+  }
+}
+
+// Run after DOM is fully loaded
+document.addEventListener('DOMContentLoaded', () => {
+  initCollapsibleMenu();
+  // Log the TOC structure for debugging
+  logTOCStructure();
+});
+
+// Re-initialize when highlighting changes
+document.addEventListener('highlight-menu-item', initCollapsibleMenu);

package/assets/js/edit-term-buttons.js

@@ -35,8 +35,6 @@ function editTermButtons() {
       return path;
    }
 
-   // Example usage with the string from the file
-
    const cleanedSpecDir = cleanPath(specConfig.spec_directory);
    
    // Find all definition terms that have spans with the id of "term:...". These are the definitions we are looking for.
@@ -44,12 +42,29 @@ function editTermButtons() {
       const term = findDeepestSpan(item);
       const url = term.getAttribute('id');
 
-      // cut “url” on the “:” and keep the second part
+      // cut "url" on the ":" and keep the second part
       const fileName = url.split(":")[1];
       const branch = specConfig.source.branch || "main";
 
       // add edit and history buttons to term
-      term.innerHTML += `<span class="edit-term-buttons"><a title="Link to the term file in the Github repo in a new tab" target="_blank" rel="noopener" href="https://github.com/${specConfig.source.account}/${specConfig.source.repo}/blob/${branch}/${cleanedSpecDir}/${specConfig.spec_terms_directory}/${fileName}.md" class="p-1 edit-term-button btn">🖊️</a><a title="Link to a GitHub page that shows a history of the edits in a new tab" target="_blank" rel="noopener" href="https://github.com/${specConfig.source.account}/${specConfig.source.repo}/commits/${branch}/${cleanedSpecDir}/${specConfig.spec_terms_directory}/${fileName}.md" class="p-1 history-term-button btn">📅</a></span>`;
+      term.innerHTML += `<span class="edit-term-buttons">
+         <a title="Link to the term file in the Github repo in a new tab" target="_blank" rel="noopener" 
+            href="https://github.com/${specConfig.source.account}/${specConfig.source.repo}/blob/${branch}/${cleanedSpecDir}/${specConfig.spec_terms_directory}/${fileName}.md" 
+            class="p-1 edit-term-button btn">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16" style="shape-rendering: geometricPrecision;">
+               <path fill-rule="evenodd" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+            </svg>
+         </a>
+         <a title="Link to a GitHub page that shows a history of the edits in a new tab" target="_blank" rel="noopener" 
+            href="https://github.com/${specConfig.source.account}/${specConfig.source.repo}/commits/${branch}/${cleanedSpecDir}/${specConfig.spec_terms_directory}/${fileName}.md" 
+            class="p-1 history-term-button btn">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16" style="shape-rendering: geometricPrecision;">
+               <path fill-rule="evenodd" d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z"/>
+               <path fill-rule="evenodd" d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z"/>
+               <circle cx="8" cy="8" r="0.3"/>
+            </svg>
+         </a>
+      </span>`;
    });
 }
 

package/assets/js/fix-last-dd.js

@@ -0,0 +1,44 @@
+/**
+ * Identifies and marks the last <dd> elements in definition lists.
+ * 
+ * This function finds all definition lists with the class 'terms-and-definitions-list'
+ * and adds the 'last-dd' class to each <dd> element that is:
+ * 1. The last <dd> before the next <dt> element, or
+ * 2. The last <dd> in the definition list
+ * 
+ * The 'last-dd' class allows for special styling of the last definition
+ * in each term group, improving visual separation between terms.
+ * 
+ * @function fixLastDd
+ * @returns {void}
+ */
+function fixLastDd() {
+    // Find all definition lists
+    const dlElements = document.querySelectorAll('dl.terms-and-definitions-list');
+    
+    dlElements.forEach(dl => {
+        // Get all direct dd children of the current dl
+        const ddElements = dl.querySelectorAll(':scope > dd');
+        
+        // Process each dd element
+        ddElements.forEach((dd, index) => {
+            // Get the next sibling element
+            let nextSibling = dd.nextElementSibling;
+            
+            // If the next sibling is a dt or there is no next sibling (meaning this is the last element before </dl>)
+            if (!nextSibling || nextSibling.tagName === 'DT') {
+                // Add the "last-dd" class if it's not already present
+                if (!dd.classList.contains('last-dd')) {
+                    dd.classList.add('last-dd');
+                }
+            }
+        });
+    });
+}
+
+/**
+ * Initializes the function when the DOM content is fully loaded.
+ */
+document.addEventListener("DOMContentLoaded", function () {
+   fixLastDd();
+});

package/assets/js/highlightMenuItems.js

@@ -18,6 +18,11 @@ function highlightMenuItems() {
       if (menuItem) {
          menuItem.classList.add("highlight-cfib41dyhcd99sm");
          menuItem.scrollIntoView({ behavior: "smooth", block: "center" });
+         
+         // Dispatch custom event for the collapsible menu to handle
+         document.dispatchEvent(new CustomEvent('highlight-menu-item', {
+            detail: { menuItem, headingId: heading.id }
+         }));
       }
    }
 

package/assets/js/insert-trefs.js

@@ -126,12 +126,13 @@ function insertTrefs(allXTrefs) { // Pass allXTrefs as a parameter
 
             // Create and insert not found message
             const notFoundEl = document.createElement('dd');
-            notFoundEl.classList.add('transcluded-xref-term', 'transcluded-xref-term-embedded');
+            notFoundEl.classList.add('transcluded-xref-term', 'transcluded-xref-term-embedded', 'last-dd');
             notFoundEl.innerHTML = '<p>This term was not found in the external repository.</p>';
             parent.insertBefore(notFoundEl, metaInfoEl.nextSibling);
          }
       });
    }
+   
 
    if (allXTrefs && allXTrefs.xtrefs) {
       processTerms(allXTrefs);

package/assets/js/pdf-download.js

@@ -6,18 +6,31 @@
  */
 
 function pdfDownload() {
-   fetch('index.pdf', { method: 'HEAD' })
+   fetch('./index.pdf', { method: 'HEAD' })
       .then(response => {
          if (response.ok) {
             let buttonPdfDownload = document.createElement("a");
             buttonPdfDownload.classList.add("button-pdf-download");
-            buttonPdfDownload.classList.add("btn");
+            buttonPdfDownload.classList.add("btn", "d-block", "btn-sm", "btn-outline-secondary");
             buttonPdfDownload.target = "_blank";
             buttonPdfDownload.rel = "noopener noreferrer";
-            buttonPdfDownload.href = "index.pdf";
+            buttonPdfDownload.href = "./index.pdf";
             buttonPdfDownload.title = "Download this page as a PDF";
-            buttonPdfDownload.innerHTML = "PDF";
-            document.querySelector('#container-search-h7vc6omi2hr2880').appendChild(buttonPdfDownload);
+            
+            // Add PDF icon with transparent fill and text for better visual representation
+            buttonPdfDownload.innerHTML = `
+               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" class="me-1" viewBox="0 0 16 16">
+                  <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0H4zm0 1h5v4h4v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm7 4h-1V2l3 3h-2z"/>
+                  <path d="M6.5 10.5a.5.5 0 0 1-.5-.5V7.5a.5.5 0 0 1 .5-.5H8a.5.5 0 0 1 .5.5V10a.5.5 0 0 1-.5.5H6.5z"/>
+               </svg>
+            `;
+            
+            // Add additional styling directly to the button
+            buttonPdfDownload.style.display = "inline-flex";
+            buttonPdfDownload.style.alignItems = "center";
+            buttonPdfDownload.style.justifyContent = "center";
+            
+            document.querySelector('.service-menu').prepend(buttonPdfDownload);
          } else {
             console.log('PDF file does not exist. No PDF download button will be added.');
          }