spec-up-t 1.0.6 → 1.0.8

package/assets/js/modal.js

@@ -0,0 +1,52 @@
+/**
+ * Displays a modal with the given content.
+ *
+ * @param {string} content - The HTML content to display inside the modal.
+ */
+function showModal(content) {
+   // Create the modal overlay
+   const overlay = document.createElement('div');
+   overlay.className = 'modal-overlay';
+
+   // Create the modal container
+   const modal = document.createElement('div');
+   modal.className = 'modal';
+
+   // Create the close button
+   const closeButton = document.createElement('button');
+   closeButton.className = 'modal-close';
+   closeButton.innerHTML = '×';
+   closeButton.onclick = closeModal;
+
+   // Add the content to the modal
+   modal.innerHTML = content;
+   modal.appendChild(closeButton);
+
+   // Add the modal to the overlay
+   overlay.appendChild(modal);
+
+   // Add the overlay to the document body
+   document.body.appendChild(overlay);
+
+   // Function to close the modal
+   function closeModal() {
+      document.body.removeChild(overlay);
+   }
+
+   // Close modal when clicked outside the modal
+   overlay.onclick = function (event) {
+      if (event.target === overlay) {
+         closeModal();
+      }
+   };
+
+   // Close modal with escape key
+   document.addEventListener('keydown', function (event) {
+      if (event.key === 'Escape') {
+         closeModal();
+      }
+   }, { once: true });
+}
+
+// // Example usage:
+// showModal('<h2>This is a Modal</h2><p>You can put any content here.</p>');

package/assets/js/notyf.js

@@ -13,6 +13,15 @@ var notyf = new Notyf({
         {
             type: 'success',
             background: '#1D6DAE',
-        }
+            duration: 3000
+        },
+        {
+            type: 'error',
+            background: 'orange',
+            duration: 10000000,
+            dismissible: true
+        },
     ]
-});
+});
+
+// var notyf = new Notyf();

package/assets/js/show-commit-hashes.js

@@ -12,7 +12,8 @@
             "repo": "spec-up-xref-test-1",
             "site": "https://blockchainbird.github.io/spec-up-xref-test-1/",
             "commitHash": [
-            "f66951f1d378490289caab9c51141b44a0438365"
+            "f66951f1d378490289caab9c51141b44a0438365",
+            "content": "[[def: AAL]]:\n\n~ See: [[ref: authenticator assurance level]].\n\n~ This is an addition, for testing purposes.\n"
             ]
          },
          {…}
@@ -25,15 +26,89 @@
  */
 
 function fetchCommitHashes() {
-   /*****************/
-   /* CONFIGURATION */
+   // Load GitHub API token from local storage if it exists
+   const savedToken = localStorage.getItem('githubToken');
+   
+   // // Markdown parser
+   // const md = markdownit();
 
+   // A: Debounce function to delay execution, so the error message is not displayed too often, since we do not know of often and how many times the error will be triggered.
+   function debounce(func, wait) {
+      let timeout;
+      return function (...args) {
+         clearTimeout(timeout);
+         timeout = setTimeout(() => func.apply(this, args), wait);
+      };
+   }
 
-   /* END CONFIGURATION */
-   /*********************/
+   // B: Debounced “GitHub rate limit exceeded” error message
+   const debouncedError = debounce(() => {
+      notyf.error('GitHub rate limit exceeded. See <a target="_blank" rel="noopener" href="https://blockchainbird.github.io/spec-up-t-website/docs/github-token/">documentation</a> for more info.');
+   }, 3000); // Delay in milliseconds
+
+   // Fetch the content of a term-file from GitHub
+   function fetchGitHubContent(savedToken, match) {
+      // Create a headers object with the Authorization header if a GitHub API token is set
+      const headers = {};
+      if (savedToken && savedToken.length > 0) {
+         headers['Authorization'] = `token ${savedToken}`;
+      }
+
+      fetch('https://api.github.com/repos/' + match.owner + '/' + match.repo + '/contents/' + match.terms_dir + '/' + match.term.replace(/ /g, '-').toLowerCase() + '.md', { headers: headers })
+         .then(response => {
+            if (response.status === 403 && response.headers.get('X-RateLimit-Remaining') === '0') {
+               const resetTime = new Date(response.headers.get('X-RateLimit-Reset') * 1000);
+               console.error(`\n   SPEC-UP-T: Github API rate limit exceeded. Try again after ${resetTime}. See https://blockchainbird.github.io/spec-up-t-website/docs/github-token/ for more info.` + "\n");
+
+               // Call the debounced error function
+               debouncedError();
+               return true;
+            } else {
+               console.log(`\n   SPEC-UP-T: Github API rate limit: ${response.headers.get('X-RateLimit-Remaining')} requests remaining. See https://blockchainbird.github.io/spec-up-t-website/docs/github-token/ for more info.` + "\n");
+            }
+
+            return response.json();
+         })
+         .then(data => {
+            // Decode base64 encoded content
+            const decodedContent = atob(data.content);
+
+            // Diff the content of the current term-file with the content of stored version
+            // See https://www.npmjs.com/package/diff , examples
+            const diff = Diff.diffChars(match.content, decodedContent),
+               fragment = document.createDocumentFragment();
+
+            diff.forEach((part) => {
+               // green for additions, red for deletions
+               // grey for common parts
+               const color = part.added ? 'green' :
+                  part.removed ? 'red' : 'grey';
+
+               const backgroundColor = part.added ? '#ddd' :
+                  part.removed ? '#ddd' : 'white';
+               
+               span = document.createElement('span');
+               span.style.color = color;
+               span.style.backgroundColor = backgroundColor;
+
+               span.appendChild(document
+                  .createTextNode(part.value));
+               fragment.appendChild(span);
+               });
+            // Create a temporary container to hold the fragment
+            const tempContainer = document.createElement('div');
+            tempContainer.appendChild(fragment);
+            // Replace newlines with <br> tags
+            tempContainer.innerHTML = tempContainer.innerHTML.replace(/\n/g, '<br>');
+            showModal(tempContainer.innerHTML);
+         })
+         .catch(error => {
+            console.error('Error fetching content:', error);
+         });
+   }
 
    // get all elements with data-attribute “data-local-href”
-   const elements = document.querySelectorAll('[data-local-href]');
+   const elements = document.querySelectorAll('.term-reference[data-local-href]');
 
    // for each element, get the value of the data-attribute “data-local-href”
    elements.forEach((element) => {
@@ -45,46 +120,63 @@ function fetchCommitHashes() {
 
       // allXrefs is an object that is available in the global scope
       allXrefs.xrefs.forEach((match) => {
+
+         //TODO: remove toLowerCase() or not?
          if (match.externalSpec === splitHref[1] && match.term.toLowerCase() === splitHref[2].toLowerCase()) {
-            const commitHashShort = match.commitHash && match.commitHash[0] ? match.commitHash[0].substring(0, 7) : 'No hash';
+            
+            // If no commit hash is found, display a message and return
+            if (!match.commitHash) {
+               const noXrefFoundMessage = document.createElement('span');
+               noXrefFoundMessage.classList.add('no-xref-found-message','btn');
+               noXrefFoundMessage.innerHTML = 'No xref found.';
+               element.parentNode.insertBefore(noXrefFoundMessage, element.nextSibling);
+
+               return
+            };
+
+            // To be used in the future
+            const commitHashShort = match.commitHash && match.commitHash ? match.commitHash.substring(0, 7) : 'No hash';
 
-            // Diff of the latest commit hash of a term-file and the referenced commit hash
+            // Diff of the latest commit hash of a term file and the referenced commit hash
             const diff = document.createElement('a');
-            diff.href = 'https://github.com/' + match.owner + '/' + match.repo + '/compare/' + match.commitHash[0] + '../main';
+            diff.href = 'https://github.com/' + match.owner + '/' + match.repo + '/compare/' + match.commitHash + '../main';
             diff.target = '_blank';
             diff.rel = 'noopener noreferrer';
             diff.classList.add('diff', 'xref-info-links', 'btn');
-            // diff.style.cssText = 'display: inline-block; margin-left: 5px; margin-right: 5px; ';
-            diff.innerHTML = 'Difference';
+            diff.innerHTML = '<svg icon><use xlink:href="#svg-github"></use></svg> &lt; &gt;';
             diff.title = 'A Diff between the current commit hash of the definition and the commit hash referenced when the link was created.';
             element.parentNode.insertBefore(diff, element.nextSibling);
 
-
             // Latest version of a term-file
             const latestVersion = document.createElement('a');
             latestVersion.href = 'https://github.com/' + match.owner + '/' + match.repo + '/blob/main/' + match.terms_dir + '/' + match.term.replace(/ /g, '-').toLowerCase() + '.md';
             latestVersion.target = '_blank';
             latestVersion.rel = 'noopener noreferrer';
             latestVersion.classList.add('latest-version', 'xref-info-links', 'btn');
-            // latestVersion.style.cssText = 'display: inline-block; margin-left: 5px; margin-right: 5px; ';
-            latestVersion.innerHTML = 'Current';
-            latestVersion.title = "Go to the repo page of the definition's current version.";
+            latestVersion.innerHTML = '<svg icon><use xlink:href="#svg-github"></use></svg> NOW';
+            latestVersion.title = 'Go to the repo page of the definition‘s current version.';
             diff.parentNode.insertBefore(latestVersion, element.nextSibling);
 
-
-            // The structure of the URL to a specific version of a file in a GitHub repository is as follows:
-            // https://github.com/<username>/<repository>/blob/<commit-hash>/<file-path>
             // Exact commit hash at the time of referencing the file
             const exactCommitHash = document.createElement('a');
             exactCommitHash.href = 'https://github.com/' + match.owner + '/' + match.repo + '/blob/' + match.commitHash + '/' + match.terms_dir + '/' + match.term.replace(/ /g, '-').toLowerCase() + '.md';
             exactCommitHash.target = '_blank';
             exactCommitHash.rel = 'noopener noreferrer';
             exactCommitHash.classList.add('exact-commit-hash', 'xref-info-links', 'btn');
-            // exactCommitHash.style.cssText = 'display: inline-block; margin-left: 5px; margin-right: 5px; ';
-            // exactCommitHash.innerHTML = commitHashShort;
-            exactCommitHash.innerHTML = "Referenced";
-            exactCommitHash.title = "Go to the repo page of the definition's version referenced when the link was created.";
+            exactCommitHash.innerHTML = '<svg icon><use xlink:href="#svg-github"></use></svg> XREF';
+            exactCommitHash.title = 'Go to the repo page of the definition‘s version referenced when the link was created.';
             latestVersion.parentNode.insertBefore(exactCommitHash, element.nextSibling);
+
+            // Diff of the latest version and the referenced version in a modal
+            const showDiffModal = document.createElement('button');
+            showDiffModal.classList.add('show-diff-modal', 'xref-info-links', 'btn');
+            showDiffModal.innerHTML = '&lt; &gt;';
+            showDiffModal.title = 'Show diff between the latest version and the referenced version';
+            latestVersion.parentNode.insertBefore(showDiffModal, element.nextSibling);
+            showDiffModal.addEventListener('click', function (event) {
+               event.preventDefault();
+               fetchGitHubContent(savedToken, match);
+            });
          }
       });
    });

package/assets/js/token-input.js

@@ -0,0 +1,30 @@
+/**
+ * @author Kor Dwarshuis
+ * @contact kor@dwarshuis.com
+ * @created 2024-09-07
+ * @description This script adds a button next to the search bar that allows users to input their GitHub token.
+ */
+
+function tokenInput() {
+   let buttonTokenInput = document.createElement("button");
+   buttonTokenInput.classList.add("button-token-input");
+   buttonTokenInput.classList.add("btn");
+   buttonTokenInput.innerHTML = "🔑";
+   document.querySelector('#container-search-h7vc6omi2hr2880').after(buttonTokenInput);
+   buttonTokenInput.addEventListener('click', () => {
+      const token = prompt('Please enter your GitHub token:');
+
+      if (!token) {
+         alert('GitHub token is not set.');
+         return;
+      }
+
+      // Save token to local storage
+      localStorage.setItem('githubToken', token);
+      console.log("GitHub token is set.");
+   });
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+   tokenInput();
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spec-up-t",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Technical specification drafting tool that generates rich specification documents from markdown. Forked from https://github.com/decentralized-identity/spec-up by Daniel Buchner (https://github.com/csuwildcat)",
   "main": "./index",
   "repository": {
@@ -28,6 +28,7 @@
   "dependencies": {
     "@traptitech/markdown-it-katex": "3.3.0",
     "axios": "0.21.2",
+    "diff": "^7.0.0",
     "find-pkg-dir": "2.0.0",
     "fs-extra": "8.1.0",
     "gulp": "4.0.2",

package/spec/terms-definitions/term-1.md

@@ -6,6 +6,8 @@
 
 ~ Xref example: [[xref: test-1, Aal]]
 
+~ This Xref example does not work: [[xref: does-not-exist, Foo]]
+
 ~ Donec aliquam et ligula id congue. Sed eu urna et tellus placerat viverra. Quisque ut posuere magna, nec accumsan augue. Nullam mauris tortor, semper finibus elementum maximus, imperdiet in felis. Suspendisse quis imperdiet nibh, eget ultrices justo. Pellentesque vitae malesuada justo. Vestibulum quis scelerisque lectus, non rutrum odio. Aenean leo orci, semper non massa sed, facilisis ornare ipsum. Morbi at sem orci. Integer eros mi, faucibus sed lorem id, pharetra imperdiet nisl. Integer viverra enim vel luctus lobortis. Ut turpis tellus, consequat nec lectus et, dictum elementum nunc. Integer rhoncus venenatis molestie. Donec egestas condimentum ligula in porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
 
 ~ Extra text for testing purposes.

package/specs.json

@@ -19,9 +19,6 @@
                 "repo": "spec-up-t"
             },
             "external_specs": [
-                {
-                    "PE": "https://identity.foundation/presentation-exchange"
-                },
                 {
                     "test-1": "https://blockchainbird.github.io/spec-up-xref-test-1/"
                 },
@@ -30,11 +27,6 @@
                 }
             ],
             "external_specs_repos": [
-                {
-                    "external_spec": "PE",
-                    "url": "https://github.com/decentralized-identity/presentation-exchange",
-                    "terms_dir": "spec"
-                },
                 {
                     "external_spec": "test-1",
                     "url": "https://github.com/blockchainbird/spec-up-xref-test-1",

package/src/asset-map.json

@@ -11,6 +11,7 @@
       "assets/css/backToTop.css",
       "assets/css/notyf.css",
       "assets/css/collapse-definitions.css",
+      "assets/css/modal.css",
       "assets/css/index.css",
       "assets/css/bootstrap-parts.css"
     ],
@@ -28,6 +29,7 @@
       "assets/js/font-awesome.js",
       "assets/js/popper.js",
       "assets/js/tippy.js",
+      "assets/js/diff.min.js",
       "assets/js/edit-term-buttons.js",
       "assets/js/search.js",
       "assets/js/highlightMenuItems.js",
@@ -37,6 +39,8 @@
       "assets/js/copyAnchorToCliboard.js",
       "assets/js/notyf.js",
       "assets/js/collapse-definitions.js",
+      "assets/js/modal.js",
+      "assets/js/token-input.js",
       "assets/js/index.js"
     ]
   }