spec-up-t 1.3.1 → 1.4.0

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

@@ -14,11 +14,7 @@ h6 {
 
 /* ====== TERMINOLOGY SECTION CONTAINER ====== */
 #terminology-section-utility-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
   margin: 1em auto;
-  padding: 0;
   width: 100%;
 }
 
@@ -69,14 +65,52 @@ dl.terms-and-definitions-list>dt {
   /* Improve line spacing */
   font-size: 1.05em;
   /* Slightly larger font for better hierarchy */
+  /* Use flexbox for proper layout of term text and button container */
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  /* Vertically center the content */
+  gap: 0.5rem;
+  /* Space between term text and buttons */
+  min-height: 2.5rem;
+  /* Ensure minimum height for buttons */
 }
 
-/* This adds spacing between the term text and the buttons */
+/* ====== ELLIPSIS TRUNCATION WITH HOVER EXPANSION ====== */
+/* Term text styling with ellipsis truncation and hover expansion */
 dl.terms-and-definitions-list>dt>span {
-  margin-right: 1.5em;
-  /* Add spacing to the right of the term text */
+  /* Flex item that grows to fill available space */
+  flex: 1 1 auto;
+  min-width: 0;
+  /* Allow flex item to shrink below content size */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: all 0.2s ease-in-out;
+}
+
+/* On hover or focus (including parent dt), expand to show full content */
+/* The term will expand naturally and wrap if needed, buttons will only wrap if necessary */
+dl.terms-and-definitions-list>dt>span:hover,
+dl.terms-and-definitions-list>dt>span:focus,
+dl.terms-and-definitions-list>dt:hover>span,
+dl.terms-and-definitions-list>dt:focus>span {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: initial;
+  word-wrap: break-word;
+  line-height: 1.4;
+  /* Don't force full width - let it expand naturally */
+  /* Buttons will only wrap if the expanded text actually needs more space */
+}
+
+/* Touch device support - also trigger on tap/touch */
+dl.terms-and-definitions-list>dt>span:active,
+dl.terms-and-definitions-list>dt:active>span {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: initial;
+  word-wrap: break-word;
+  line-height: 1.4;
 }
 
 
@@ -205,10 +239,11 @@ dl.terms-and-definitions-list dd.last-dd {
 /* Apply original, more condensed styling when the html element has class "dense-info" */
 html.dense-info dl.terms-and-definitions-list>dt {
   padding: 0.1rem 1.25rem;
-  display: block;
-  /* Revert from flexbox to block */
+  /* Keep flexbox for consistent layout, just reduce padding */
   line-height: inherit;
   font-size: inherit;
+  min-height: auto;
+  /* Remove minimum height in dense mode */
 }
 
 html.dense-info dl.terms-and-definitions-list dd+dt {
@@ -221,21 +256,41 @@ html.dense-info dl.terms-and-definitions-list>dt::before {
 }
 
 html.dense-info dl.terms-and-definitions-list>dt>span {
-  margin-right: 0;
-  /* Remove spacing for term text */
+  /* Keep flex properties for consistent behavior */
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 /* ====== TRANSCLUSIONS STYLING ====== */
 /* Base transclusion styles */
-.transcluded-xref-term {
+.term-external {
   position: relative;
 }
 
-dl.terms-and-definitions-list>dt.transcluded-xref-term,
-dl.terms-and-definitions-list>dd.transcluded-xref-term {
+dl.terms-and-definitions-list>dt.term-external,
+dl.terms-and-definitions-list>dd.term-external {
   background: #a9dde03b;
 }
 
+/* Local term styling */
+.term-local {
+  position: relative;
+}
+
+dl.terms-and-definitions-list>dt.term-local,
+dl.terms-and-definitions-list>dd.term-local {
+  background: #f0f8ff;
+}
+
+/* Local term original term and parenthetical styling */
+dl.terms-and-definitions-list .term-local-original-term {
+  font-style: italic;
+}
+
+dl.terms-and-definitions-list .term-local-parenthetical-terms {
+  font-weight: normal;
+}
+
 /* Fix for all buttons */
 .btn {
   font-variant: small-caps;
@@ -245,10 +300,6 @@ dl.terms-and-definitions-list>dd.transcluded-xref-term {
   /* Higher z-index for all buttons */
 }
 
-.collapse-all-defs-button {
-  float: right;
-}
-
 .transclusion-heading {
   font-size: 1.3em;
   font-weight: bold;
@@ -256,7 +307,7 @@ dl.terms-and-definitions-list>dd.transcluded-xref-term {
 }
 
 /* Embedded transclusions in definition lists */
-dl.terms-and-definitions-list>dd.transcluded-xref-term-embedded {
+dl.terms-and-definitions-list>dd.term-external-embedded {
   position: relative;
   padding-left: 2.5rem;
   padding-top: 0.3rem;
@@ -264,7 +315,7 @@ dl.terms-and-definitions-list>dd.transcluded-xref-term-embedded {
 }
 
 /* Arrow styling for transclusions */
-dl.terms-and-definitions-list span.transcluded-xref-term::after {
+dl.terms-and-definitions-list span.term-external::after {
   content: "";
   position: absolute;
   top: 50%;
@@ -279,7 +330,7 @@ dl.terms-and-definitions-list span.transcluded-xref-term::after {
 }
 
 /* Inline span styling for transclusions */
-dl.terms-and-definitions-list span.transcluded-xref-term {
+dl.terms-and-definitions-list span.term-external {
   padding-left: 1.5rem;
   display: inline-block;
 }

package/assets/js/add-href-to-snapshot-link.js

@@ -7,25 +7,32 @@
  */
 
 function addHrefToSnapshotLink() {
-   const snapshotLink = document.querySelector('#snapshotLink');
+   const snapshotLink = document.querySelector('#snapshot-link-in-content');
 
    // Get the current URL of the page
    const currentUrl = window.location.href;
 
+   // Remove query parameters and hash for URL processing
+   const urlWithoutParams = currentUrl.split('?')[0].split('#')[0];
+
    // Regex to match up to and including the 'versions/' directory (if it exists)
-   const versionsRegex = new RegExp('^(https?://[^/]+(?:/[^/]+)*)/versions/(?:[^/]+/)?');
-   const versionsMatch = versionsRegex.exec(currentUrl);
+   // Updated to handle file:// URLs and various protocols
+   const versionsRegex = new RegExp('^([^?#]+)/versions/(?:[^/?#]+/?)*');
+   const versionsMatch = versionsRegex.exec(urlWithoutParams);
 
-   // If we are already in the 'versions' directory or deeper, strip down to 'versions/'
-   // Otherwise, append '/versions/' to the current directory
    let snapshotLinkHref;
    if (versionsMatch) {
-      snapshotLinkHref = `${versionsMatch[1]}/versions/`;
+      // If we are already in the 'versions' directory or deeper, strip down to 'versions/'
+      snapshotLinkHref = `${versionsMatch[1]}/versions/index.html`;
    } else {
+      // Clean up the URL: remove index.html, remove trailing slashes, remove any existing /versions/ suffixes
+      let cleanUrl = urlWithoutParams
+         .replace(/\/index\.html$/, '')
+         .replace(/\/$/, '')
+         .replace(/\/versions+$/, ''); // Remove any trailing /versions (including multiple)
+
       // Append '/versions/' to the current directory
-      const urlWithoutAnchor = currentUrl.split('#')[0];
-      const urlWithoutIndex = urlWithoutAnchor.replace(/\/index\.html$/, '');
-      snapshotLinkHref = urlWithoutIndex.replace(/\/$/, '') + '/versions/';
+      snapshotLinkHref = cleanUrl + '/versions/index.html';
    }
 
    // Set the 'href' attribute of the snapshot link element to the constructed URL

package/assets/js/addAnchorsToTerms.js

@@ -3,7 +3,7 @@ function addAnchorsToTerms() {
     // For external references (tref), we need to use the main term ID, not alias ID
     function findMainTermSpan(element) {
         // First, check if this is a transcluded external reference
-        const transcludedSpan = element.querySelector('span.transcluded-xref-term[id^="term:"]');
+        const transcludedSpan = element.querySelector('span.term-external[id^="term:"]');
         if (transcludedSpan) {
             // For transcluded external references, always use the main term ID (outermost span)
             // This ensures that anchor links work correctly with external content insertion

package/assets/js/charts.js

@@ -0,0 +1,10 @@
+(function () {
+  'use strict';
+
+  /* Charts */
+
+  document.querySelectorAll('.chartjs').forEach(chart => {
+    new Chart(chart, JSON.parse(chart.textContent));
+  });
+
+})();

package/assets/js/collapse-definitions.js

@@ -1,12 +1,14 @@
 /**
  * @fileoverview Manages collapsible definition lists with visual state indicators.
  * @author Kor Dwarshuis
- * @version 1.0.0
+ * @version 1.0.1
+ * @updated 2025-10-02 - Refactored to use centralized button container utilities
  * @description This module provides functionality to toggle the visibility
  * of definition descriptions in a document with a smooth user experience.
  * It creates interactive buttons with three toggle states and prevents
  * UI jumping during transitions using fixed positioning and requestAnimationFrame.
  * @requires insert-trefs.js - For the initializeOnTrefsInserted helper function
+ * @requires definition-button-container-utils.js - For the addButtonToContainer utility function
  */
 
 /**
@@ -58,6 +60,12 @@ function collapseDefinitions() {
             "See more on",
             "See more at",
             "More:",
+            "Note:",
+            "Paraphrased by",
+            "Beware:",
+            "eSSIF-Lab: ",
+            "W3C VC:",
+            "NIST:",
             "Supporting definitions:"
         ];
         return definitionHidePrefixes.some(prefix => content.startsWith(prefix));
@@ -156,6 +164,7 @@ function collapseDefinitions() {
 
     /**
      * Creates and appends toggle buttons to all definition terms.
+     * Creates or reuses a button container and adds the collapse button to it.
      * Each button contains state indicators for the three visibility states,
      * and is initialized to show all definitions (state 2).
      * @function
@@ -178,7 +187,9 @@ function collapseDefinitions() {
             // Set initial active state
             button.querySelector('.state-indicator[data-state="2"]').classList.add('active');
 
-            dt.appendChild(button);
+            // Use the centralized utility to add the button to the container
+            // Prepend=false (default) ensures collapse button appears after meta-info button
+            addButtonToContainer(dt, button);
         });
     }
 

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

@@ -1,24 +1,23 @@
 /**
  * @file This file creates a collapsible meta info section for each term definition on the page. It is used to hide meta information about a term definition by default and show it when the user clicks the button.
  * @author Kor Dwarshuis
- * @version 0.0.2
+ * @version 0.0.3
  * @since 2025-02-16
+ * @updated 2025-10-02 - Refactored to use centralized button container utilities
+ * @requires definition-button-container-utils.js - For the addButtonToContainer utility function
  */
 
 /**
  * Creates a toggle button for collapsible meta information sections.
+ * Creates or reuses a button container and adds the meta-info button to it.
  * @function createToggleButton
  * @param {HTMLElement} element - The DD element that contains the meta information
  * @returns {void}
  */
 function createToggleButton(element) {
     const toggleButton = document.createElement('button');
-    toggleButton.classList.add('meta-info-toggle-button', 'btn');
-    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.classList.add('meta-info-toggle-button', 'btn', 'fs-1', 'd-flex', 'align-items-center','justify-content-center');
+    toggleButton.innerHTML = '<i class="bi bi-info-circle" style="margin-top: -0.5em;"></i>';
     toggleButton.title = 'Meta info';
 
     // Add event listener to the button
@@ -41,13 +40,16 @@ function createToggleButton(element) {
         }
     });
 
-    // Find the closest <dt> sibling and insert the button inside it
+    // Find the closest <dt> sibling
     let dtElement = element.previousElementSibling;
     while (dtElement && dtElement.tagName !== 'DT') {
         dtElement = dtElement.previousElementSibling;
     }
+    
     if (dtElement) {
-        dtElement.appendChild(toggleButton);
+        // Use the centralized utility to add the button to the container
+        // Prepend=true ensures meta-info button appears first
+        addButtonToContainer(dtElement, toggleButton, true);
     } else {
         // Fallback to inserting at the top right of the element if no <dt> is found
         element.insertBefore(toggleButton, element.firstChild);

package/assets/js/definition-button-container-utils.js

@@ -0,0 +1,82 @@
+/**
+ * @fileoverview Utility functions for managing the definition buttons container.
+ * @author Kor Dwarshuis
+ * @version 1.0.0
+ * @since 2025-10-02
+ * @description This module provides centralized utilities for creating and managing
+ * the container that holds control buttons in definition list terms (dt elements).
+ * This approach eliminates code duplication and provides a single source of truth
+ * for button container logic.
+ */
+
+/**
+ * Gets or creates a button container within a definition term (dt) element.
+ * If a container already exists, it returns that container to prevent duplicates.
+ * If no container exists, it creates one and appends it to the dt element.
+ * 
+ * This function serves as the single point of control for button container creation,
+ * ensuring consistency across all definition-related button functionality.
+ * 
+ * @function getOrCreateButtonContainer
+ * @param {HTMLElement} dtElement - The dt (definition term) element that should contain the button container
+ * @returns {HTMLElement} The button container div element (either existing or newly created)
+ * 
+ * @example
+ * // Get or create a container for a definition term
+ * const dt = document.querySelector('dt');
+ * const container = getOrCreateButtonContainer(dt);
+ * 
+ * // Add buttons to the container
+ * const myButton = document.createElement('button');
+ * container.appendChild(myButton);
+ */
+function getOrCreateButtonContainer(dtElement) {
+    // First, check if a container already exists to avoid duplicates
+    let buttonContainer = dtElement.querySelector('.definition-buttons-container');
+    
+    // If no container exists, create one
+    if (!buttonContainer) {
+        buttonContainer = document.createElement('div');
+        buttonContainer.classList.add('definition-buttons-container');
+        dtElement.appendChild(buttonContainer);
+    }
+    
+    return buttonContainer;
+}
+
+/**
+ * Adds a button to a definition term's button container.
+ * This is a convenience function that combines getting/creating the container
+ * and adding a button to it in a single operation.
+ * 
+ * @function addButtonToContainer
+ * @param {HTMLElement} dtElement - The dt (definition term) element
+ * @param {HTMLElement} button - The button element to add to the container
+ * @param {boolean} [prepend=false] - If true, adds the button at the beginning; if false, appends at the end
+ * @returns {HTMLElement} The button container element
+ * 
+ * @example
+ * // Add a button to the end of the container
+ * const dt = document.querySelector('dt');
+ * const myButton = document.createElement('button');
+ * addButtonToContainer(dt, myButton);
+ * 
+ * @example
+ * // Add a button to the beginning of the container
+ * const dt = document.querySelector('dt');
+ * const firstButton = document.createElement('button');
+ * addButtonToContainer(dt, firstButton, true);
+ */
+function addButtonToContainer(dtElement, button, prepend = false) {
+    const container = getOrCreateButtonContainer(dtElement);
+    
+    if (prepend) {
+        // Add button as the first child
+        container.insertBefore(button, container.firstChild);
+    } else {
+        // Add button as the last child
+        container.appendChild(button);
+    }
+    
+    return container;
+}

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

@@ -18,45 +18,41 @@ function editTermButtons() {
       return currentElement;
    }
 
-   // Remove "./" or "/" from the beginning of a string and "/" at the end of the string
-   function cleanPath(path) {
-      // Remove "./" or "/" from the beginning of the string
-      if (path.startsWith("./")) {
-         path = path.substring(2);
-      } else if (path.startsWith("/")) {
-         path = path.substring(1);
-      }
 
-      // Remove "/" at the end of the string if it exists
-      if (path.endsWith("/")) {
-         path = path.slice(0, -1);
-      }
 
-      return path;
+   // Simple path join utility for client-side JS (normalizes separators, handles leading/trailing /)
+   function pathJoin(...segments) {
+      // Filter out empty segments and join with '/'
+      return segments.filter(segment => segment).join('/').replace(/\/+/g, '/');
    }
 
-   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.
-   document.querySelectorAll('dt:has(> span[id^="term:"])').forEach(item => {
+
+
+
+
+   document.querySelectorAll('dt.term-local').forEach(item => {
       const term = findDeepestSpan(item);
       const url = term.getAttribute('id');
 
+      const localFileName = url.split(":")[1];
+      const pathLocalTerms = pathJoin(specConfig.spec_directory, specConfig.spec_terms_directory, localFileName + '.md');
+
       // 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" 
+            href="https://github.com/${specConfig.source.account}/${specConfig.source.repo}/blob/${branch}/${pathLocalTerms}" 
             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" 
+            href="https://github.com/${specConfig.source.account}/${specConfig.source.repo}/commits/${branch}/${pathLocalTerms}" 
             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"/>
@@ -66,6 +62,67 @@ function editTermButtons() {
          </a>
       </span>`;
    });
+
+   // document.querySelectorAll('dt.term-external').forEach(item => {
+   //    const term = findDeepestSpan(item);
+   //    console.log("🚀 ~ editTermButtons ~ term:", term)
+   //    const url = term.getAttribute('id');
+
+   //    // Find the term in data-original-term attribute somewhere in a child of dt.term-external
+   //    const originalTerm = term.dataset.originalTerm || url.split(":")[1];
+   //    console.log("🚀 ~ editTermButtons ~ originalTerm:", originalTerm)
+
+   //    // Lookup this term in the embedded allXTrefs object
+   //    const matchingXtrefs = (allXTrefs?.xtrefs || []).filter(xref => xref.term === originalTerm);
+   //    console.log("🚀 ~ editTermButtons ~ matchingXtrefs:", matchingXtrefs)
+
+   //    if (matchingXtrefs.length > 0) {
+   //       // Create edit and history buttons for each matching xtref
+   //       const buttonsHtml = matchingXtrefs.map(xtref => {
+   //          // Find sourceFiles with type "tref" - these are the files that define the term
+   //          const trefFiles = xtref.sourceFiles?.filter(sf => sf.type === 'tref') || [];
+   //          console.log("🚀 ~ editTermButtons ~ trefFiles:", trefFiles)
+
+   //          if (trefFiles.length === 0) return '';
+
+   //          // Find the corresponding repoUrl, terms_dir, branch from the xref
+   //          const repoUrl = xtref.repoUrl;
+   //          const termsDir = xtref.terms_dir;
+   //          const branch = xtref.branch || "main";
+
+   //          // Construct the edit pencil from that info
+   //          return trefFiles.map(sf => {
+   //             const filePath = pathJoin(termsDir, sf.file);
+   //             console.log("🚀 ~ editTermButtons ~ filePath:", filePath)
+   //             const editUrl = `${repoUrl}/blob/${branch}/${filePath}`;
+   //             const historyUrl = `${repoUrl}/commits/${branch}/${filePath}`;
+
+   //             return `
+   //                <a title="Link to the term file '${sf.file}' in the Github repo in a new tab" target="_blank" rel="noopener" 
+   //                   href="${editUrl}" 
+   //                   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 '${sf.file}' in a new tab" target="_blank" rel="noopener" 
+   //                   href="${historyUrl}" 
+   //                   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>
+   //             `;
+   //          }).join('');
+   //       }).join('');
+
+   //       if (buttonsHtml) {
+   //          term.innerHTML += `<span class="edit-term-buttons">${buttonsHtml}</span>`;
+   //       }
+   //    }
+   // });
 }
 
 document.addEventListener("DOMContentLoaded", function () {

package/assets/js/github-issues.js

@@ -0,0 +1,35 @@
+(function () {
+  'use strict';
+
+  /* GitHub Issues */
+
+  let source = specConfig.source;
+  if (source) {
+    if (source.host === 'github') {
+      fetch(`https://api.github.com/repos/${source.account + '/' + source.repo}/issues`)
+        .then(response => response.json())
+        .then(issues => {
+          let count = issues.length;
+          document.querySelectorAll('[issue-count]').forEach(node => {
+            node.setAttribute('issue-count', count)
+          });
+          repo_issue_list.innerHTML = issues.map(issue => {
+            return `<li class="repo-issue">
+              <detail-box>
+                <section>${md.render(issue.body || '')}</section>
+                <header class="repo-issue-title">
+                  <span class="repo-issue-number">${issue.number}</span>
+                  <span class="repo-issue-link">
+                    <a href="${issue.html_url}" target="_blank">${issue.title}</a>
+                  </span>
+                  <span detail-box-toggle></span>
+                </header>
+              </detail-box>
+            </li>`
+          }).join('');
+          Prism.highlightAllUnder(repo_issue_list);
+        })
+    }
+  }
+
+})();