spec-up-t 1.1.33 → 1.1.35

package/assets/css/adjust-font-size.css

@@ -1,7 +1,28 @@
 .adjust-font-size #decreaseBtn {
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xmlns:xlink="http://www.w3.org/1999/xlink"><text x="50%" y="50%" font-family="Times New Roman" font-size="50" fill="black" dominant-baseline="middle" text-anchor="middle">A</text></svg>') no-repeat center;
+    background-color: #a9dde0;
+    /* Set background color */
+    padding: 14px 14px;
 }
 
 .adjust-font-size #increaseBtn {
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xmlns:xlink="http://www.w3.org/1999/xlink"><text x="50%" y="50%" font-family="Times New Roman" font-size="80" fill="black" dominant-baseline="middle" text-anchor="middle">A</text></svg>') no-repeat center;
+    background-color: #a9dde0;
+    /* Set background color */
+    padding: 14px 14px;
 }
+
+/* This should ot be necessary but I can't get it right */
+.adjust-font-size #increaseBtn {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 4px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 4px;
+}
+
+.adjust-font-size #decreaseBtn {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 0;
+}

package/assets/css/create-alphabet-index.css

@@ -17,10 +17,10 @@
   color: #333;
   display: inline-block;
   font-size: 0.9rem;
-  height: 20px;
-  line-height: 20px;
+  height: 30px;
+  line-height: 30px;
   margin: 2px;
   text-align: center;
   text-decoration: none;
-  width: 20px;
+  width: 30px;
 }

package/assets/css/header-navbar.css

@@ -26,4 +26,8 @@
 
 [issue-count][animate]:not([issue-count=""]) {
     animation: display-show 1s;
+}
+
+#header button, #header button * {
+    background: #a9dde0;
 }

package/assets/css/index.css

@@ -120,4 +120,200 @@ dd td img {
   color: #6d00a2;
 }
 
-/* End Notices */
+/* End Notices */
+
+
+/* Custom styles for Bootstrap alerts */
+
+/* Override default alert colors */
+.alert-primary {
+  background-color: #f9fcff;
+  /* Light cyan */
+  border-color: #b2ebf2;
+  color: #00838f;
+}
+
+.alert-secondary {
+  background-color: #f5f5f5;
+  /* Light gray */
+  border-color: #e0e0e0;
+  color: #616161;
+}
+
+.alert-success {
+  background-color: #e8f5e9;
+  /* Light green */
+  border-color: #c8e6c9;
+  color: #388e3c;
+}
+
+.alert-danger {
+  background-color: #ffebee;
+  /* Light red */
+  border-color: #ef9a9a;
+  color: #d32f2f;
+}
+
+.alert-warning {
+  background-color: #fffde7;
+  /* Light yellow */
+  border-color: #fff9c4;
+  color: #f9a825;
+}
+
+.alert-info {
+  background-color: #e1f5fe;
+  /* Light blue */
+  border-color: #b3e5fc;
+  color: #0288d1;
+}
+
+.alert-light {
+  background-color: #f9f9f9;
+  border-color: #eeeeee;
+  color: #424242;
+}
+
+.alert-dark {
+  background-color: #e0e0e0;
+  border-color: #bdbdbd;
+  color: #212121;
+}
+
+/* Optional: Override link colors within alerts */
+.alert a {
+  color: inherit;
+  /* Inherit the alert's text color */
+  font-weight: bold;
+}
+
+.alert-primary a {
+  color: #006064;
+}
+
+.alert-success a {
+  color: #2e7d32;
+}
+
+.alert-danger a {
+  color: #b71c1c;
+}
+
+.alert-warning a {
+  color: #f57f17;
+}
+
+.alert-info a {
+  color: #01579b;
+}
+
+.alert-dark a {
+  color: #000000;
+}
+
+
+/* Dark theme styles for Bootstrap alerts */
+[data-bs-theme="dark"] .alert-primary {
+  background-color: #004d40;
+  /* Dark cyan */
+  border-color: #00695c;
+  color: #b2dfdb;
+}
+
+[data-bs-theme="dark"] .alert-secondary {
+  background-color: #424242;
+  /* Dark gray */
+  border-color: #616161;
+  color: #e0e0e0;
+}
+
+[data-bs-theme="dark"] .alert-success {
+  background-color: #1b5e20;
+  /* Dark green */
+  border-color: #2e7d32;
+  color: #a5d6a7;
+}
+
+[data-bs-theme="dark"] .alert-danger {
+  background-color: #b71c1c;
+  /* Dark red */
+  border-color: #c62828;
+  color: #ef9a9a;
+}
+
+[data-bs-theme="dark"] .alert-warning {
+  background-color: #f57f17;
+  /* Dark yellow */
+  border-color: #ffb300;
+  color: #ffe082;
+}
+
+[data-bs-theme="dark"] .alert-info {
+  background-color: #01579b;
+  /* Dark blue */
+  border-color: #0277bd;
+  color: #81d4fa;
+}
+
+[data-bs-theme="dark"] .alert-light {
+  background-color: #303030;
+  border-color: #424242;
+  color: #e0e0e0;
+}
+
+[data-bs-theme="dark"] .alert-dark {
+  background-color: #212121;
+  border-color: #424242;
+  color: #bdbdbd;
+}
+
+/* Optional: Override link colors within dark theme alerts */
+[data-bs-theme="dark"] .alert a {
+  color: inherit;
+  font-weight: bold;
+}
+
+[data-bs-theme="dark"] .alert-primary a {
+  color: #80cbc4;
+}
+
+[data-bs-theme="dark"] .alert-success a {
+  color: #81c784;
+}
+
+[data-bs-theme="dark"] .alert-danger a {
+  color: #ef5350;
+}
+
+[data-bs-theme="dark"] .alert-warning a {
+  color: #ffca28;
+}
+
+[data-bs-theme="dark"] .alert-info a {
+  color: #4fc3f7;
+}
+
+[data-bs-theme="dark"] .alert-dark a {
+  color: #9e9e9e;
+}
+/* End Custom styles for Bootstrap alerts */
+
+/* Custom menu button styles */
+#offcanvasSettings .btn-menu-item {
+  border-radius: unset;
+  width: 100%;
+  text-align: left;
+  border: 1px solid #dee2e6;
+  /* Subtle border */
+  background-color: var(--card-bg);
+  color: var(--card-text);
+  /* Subtle background color */
+  padding: 10px 15px;
+  margin-bottom: 5px;
+  transition: background-color 0.2s ease;
+}
+
+#offcanvasSettings .btn-menu-item:hover {
+  background-color: #e9ecef;
+  /* Slightly darker background on hover */
+}

package/assets/css/modal.css

@@ -1,5 +1,5 @@
 /* Basic styles for the modal */
-.modal-overlay {
+.spec-up-t-modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
@@ -12,7 +12,7 @@
     z-index: 1000;
 }
 
-.modal {
+.spec-up-t-modal {
     background-color: white;
     padding: 2rem 20px 20px;
     border-radius: 8px;
@@ -23,7 +23,7 @@
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
-.modal-close {
+.spec-up-t-modal-close {
     position: absolute;
     top: 0;
     right: 5px;

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

@@ -9,8 +9,8 @@ h2,h3,h4,h5,h6 {
   font-size: 0.875em;
   color: inherit;
   text-decoration: none;
-  opacity: 0.35;
-  order: -1;
+  /* opacity: 0.35; */
+  color: #73c2df;
   transition: opacity 0.3s ease;
 }
 
@@ -22,7 +22,6 @@ h2,h3,h4,h5,h6 {
 
 /* Terminology Section Utility Container */
 #terminology-section-utility-container {
-  background: var(--card-bg);
   display: flex;
   flex-wrap: wrap;
   justify-content: center;

package/assets/css/theme-vars.css

@@ -1,3 +1,12 @@
+/* 
+Example of how to use these variables in your CSS:
+
+#offcanvasSettings .btn-menu-item {
+    background-color: var(--card-bg);
+    color: var(--card-text);
+}
+*/
+
 /* Define theme variables */
 :root {
     --card-bg: #fff;

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

@@ -7,7 +7,7 @@
  */
 
 function addHrefToSnapshotLink() {
-   const snapshotLink = document.querySelector('.snapshots a');
+   const snapshotLink = document.querySelector('#snapshotLink');
 
    // Get the current URL of the page
    const currentUrl = window.location.href;

package/assets/js/collapse-definitions.js

@@ -18,7 +18,7 @@ function collapseDefinitions() {
     // Add button as last child of every <dl>
     dts.forEach(dt => {
         const button = document.createElement('button');
-        button.classList.add('collapse-all-defs-button', 'btn');
+        button.classList.add('collapse-all-defs-button', 'btn', 'p-0', 'fs-5', 'd-flex', 'align-items-center','justify-content-center');
         button.innerHTML = '▲';
         button.setAttribute('id', 'toggleButton');
         dt.appendChild(button);

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

@@ -48,7 +48,7 @@ function editTermButtons() {
       const fileName = url.split(":")[1];
 
       // 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/main/${cleanedSpecDir}/${specConfig.spec_terms_directory}/${fileName}.md" class="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/main/${cleanedSpecDir}/${specConfig.spec_terms_directory}/${fileName}.md" class="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/main/${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/main/${cleanedSpecDir}/${specConfig.spec_terms_directory}/${fileName}.md" class="p-1 history-term-button btn">📅</a></span>`;
    });
 }
 

package/assets/js/modal.js

@@ -6,15 +6,15 @@
 function showModal(content) {
    // Create the modal overlay
    const overlay = document.createElement('div');
-   overlay.className = 'modal-overlay';
+   overlay.className = 'spec-up-t-modal-overlay';
 
    // Create the modal container
    const modal = document.createElement('div');
-   modal.className = 'modal';
+   modal.className = 'spec-up-t-modal';
 
    // Create the close button
    const closeButton = document.createElement('button');
-   closeButton.className = 'modal-close';
+   closeButton.className = 'spec-up-t-modal-close';
    closeButton.innerHTML = '×';
    closeButton.onclick = closeModal;
 

package/assets/js/search.js

@@ -234,14 +234,24 @@ function inPageSearch() {
    function search(searchString) {
       // Start clean
       removeAllSpans();
-
       totalMatches = 0;
       activeMatchIndex = -1;
+
+      // Remove outer quotes if present
+      if (searchString.length >= 2) {
+         if (
+            (searchString[0] === '"' && searchString[searchString.length - 1] === '"') ||
+            (searchString[0] === "'" && searchString[searchString.length - 1] === "'")
+         ) {
+            searchString = searchString.substring(1, searchString.length - 1);
+         }
+      }
+
       // If the search string is empty, return
       if (searchString === '') {
          setTotalMatches();
-         return
-      };
+         return;
+      }
 
       let uniqueId = 0;
 
@@ -294,7 +304,6 @@ function inPageSearch() {
          }
 
          if (node.nodeType === 3 && !hasHiddenAncestor(node)) { // Node.TEXT_NODE
-            
             const fragments = markAndCountMatches(node);
             if (fragments.childNodes.length > 1) {
                // Replace the text node with the fragments if there were matches

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

@@ -85,7 +85,7 @@ function fetchCommitHashes() {
 
    // B: Debounced “GitHub API rate limit exceeded” error message
    const debouncedError = debounce(() => {
-      notyf.error('GitHub API rate limit exceeded. See <a target="_blank" rel="noopener" href="https://trustoverip.github.io/spec-up-t-website/docs/getting-started/github-token">documentation</a> for more info.');
+      notyf.error('GitHub API rate limit exceeded. See <a target="_blank" rel="noopener" href="https://blockchainbird.github.io/spec-up-t-website/docs/getting-started/github-token">documentation</a> for more info.');
    }, 3000); // Delay in milliseconds
 
    // Fetch the content of a term-file from GitHub
@@ -100,13 +100,13 @@ function fetchCommitHashes() {
          .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(`❌ Github API rate limit exceeded. Try again after ${resetTime}. See https://trustoverip.github.io/spec-up-t-website/docs/getting-started/github-token for more info.`);
+               console.error(`❌ Github API rate limit exceeded. Try again after ${resetTime}. See https://blockchainbird.github.io/spec-up-t-website/docs/getting-started/github-token for more info.`);
 
                // Call the debounced error function
                debouncedError();
                return true;
             } else {
-               console.log(`ℹ️ Github API rate limit: ${response.headers.get('X-RateLimit-Remaining')} requests remaining. See https://trustoverip.github.io/spec-up-t-website/docs/getting-started/github-token for more info.`);
+               console.log(`ℹ️ Github API rate limit: ${response.headers.get('X-RateLimit-Remaining')} requests remaining. See https://blockchainbird.github.io/spec-up-t-website/docs/getting-started/github-token for more info.`);
             }
 
             return response.json();
@@ -174,12 +174,12 @@ function fetchCommitHashes() {
 
          if (response.status === 403 && response.headers.get('X-RateLimit-Remaining') === '0') {
             const resetTime = new Date(response.headers.get('X-RateLimit-Reset') * 1000);
-            console.error(`❌ Github API rate limit exceeded. Try again after ${resetTime}. See https://trustoverip.github.io/spec-up-t-website/docs/getting-started/github-token for more info.`);
+            console.error(`❌ Github API rate limit exceeded. Try again after ${resetTime}. See https://blockchainbird.github.io/spec-up-t-website/docs/getting-started/github-token for more info.`);
 
             debouncedError();
             return true;
          } else {
-            console.log(`ℹ️ Github API rate limit: ${response.headers.get('X-RateLimit-Remaining')} requests remaining. See https://trustoverip.github.io/spec-up-t-website/docs/getting-started/github-token for more info.`);
+            console.log(`ℹ️ Github API rate limit: ${response.headers.get('X-RateLimit-Remaining')} requests remaining. See https://blockchainbird.github.io/spec-up-t-website/docs/getting-started/github-token for more info.`);
          }
 
          const data = await response.json();

package/assets/js/token-input.js

@@ -6,12 +6,7 @@
  */
 
 function tokenInput() {
-   let buttonTokenInput = document.createElement("button");
-   buttonTokenInput.classList.add("button-token-input");
-   buttonTokenInput.classList.add("btn", "btn-sm", "btn-outline-secondary","me-1");
-   buttonTokenInput.innerHTML = "🔑";
-   document.querySelector('#repo_issues').insertAdjacentElement('afterend', buttonTokenInput);
-   buttonTokenInput.addEventListener('click', () => {
+   document.querySelector('.button-token-input').addEventListener('click', () => {
       const token = prompt('Please enter your GitHub token:');
 
       if (!token) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spec-up-t",
-  "version": "1.1.33",
+  "version": "1.1.35",
   "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": {

package/readme.md

@@ -7,4 +7,4 @@
 <h2 style="display: block; margin: 0 auto; text-align: center;">Markdown » Spec-Up</h2>
 </div>
 
-There is a [special website that documents everything regarding Spec-Up-T](https://trustoverip.github.io/spec-up-t-website/).
+There is a [special website that documents everything regarding Spec-Up-T](https://blockchainbird.github.io/spec-up-t-website/).

package/src/asset-map.json

@@ -54,7 +54,6 @@
       "assets/js/modal.js",
       "assets/js/token-input.js",
       "assets/js/pdf-download.js",
-      "assets/js/help-buttons.js",
       "assets/js/collapse-definitions.js",
       "assets/js/collapse-meta-info.js",
       "assets/js/add-href-to-snapshot-link.js",

package/src/collect-external-references.js

@@ -26,7 +26,7 @@ function collectExternalReferences(options = {}) {
 
    There is no point in continuing without a PAT, so we stop here.
 
-   Find instructions on how to get a PAT at https://trustoverip.github.io/spec-up-t-website/docs/getting-started/github-token
+   Find instructions on how to get a PAT at https://blockchainbird.github.io/spec-up-t-website/docs/getting-started/github-token
 
  `;
 

package/src/collectExternalReferences/checkRateLimit.js

@@ -5,10 +5,10 @@ function checkRateLimit(response) {
 
     if (response.status === 403 && remaining === '0') {
         const resetTime = new Date(reset * 1000);
-        console.error(`❌ Github API rate limit exceeded. Try again after ${resetTime}. See https://trustoverip.github.io/spec-up-t-website/docs/getting-started/github-token for more info.`);
+        console.error(`❌ Github API rate limit exceeded. Try again after ${resetTime}. See https://blockchainbird.github.io/spec-up-t-website/docs/getting-started/github-token for more info.`);
         return true;
     } else if (remaining !== null) {
-        console.log(`ℹ️ Github API rate limit: ${remaining} requests remaining. See https://trustoverip.github.io/spec-up-t-website/docs/getting-started/github-token for more info.`);
+        console.log(`ℹ️ Github API rate limit: ${remaining} requests remaining. See https://blockchainbird.github.io/spec-up-t-website/docs/getting-started/github-token for more info.`);
     } else {
         console.warn(`ℹ️ Unable to determine rate limit status. Check your GitHub API token and network connection.`);
     }

package/src/install-from-boilerplate/boilerplate/README.md

@@ -1,5 +1,5 @@
 # Documentation
 
-Read more about Spec-Up-T in the [documentation](https://trustoverip.github.io/spec-up-t-website/).
+Read more about Spec-Up-T in the [documentation](https://blockchainbird.github.io/spec-up-t-website/).
 
 Written: 2025-02-27T15:38

package/src/install-from-boilerplate/boilerplate/spec/spec-head.md

@@ -2,6 +2,6 @@
 
 ## Intro
 
-This is a default Spec-Up-T installation. Find information on the [Spec-Up-T documentation website](https://trustoverip.github.io/spec-up-t-website/).
+This is a default Spec-Up-T installation. Find information on the [Spec-Up-T documentation website](https://blockchainbird.github.io/spec-up-t-website/).
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

package/src/install-from-boilerplate/help.txt

@@ -1,6 +1,6 @@
 ===
 
-For help go to: https://trustoverip.github.io/spec-up-t-website
+For help go to: https://blockchainbird.github.io/spec-up-t-website
 
 ===
 

package/src/install-from-boilerplate/menu.sh

@@ -67,7 +67,7 @@ function prompt_input() {
 
 function do_add_content() {
     clear
-    echo -e "\n\n\n   ********************\n\n\n   You can start adding your content to the markdown files in the "spec" directory.\n\n   You can do this by editing local files in an editor or by going to your repository on GitHub.\n\n   More info: https://trustoverip.github.io/spec-up-t-website/docs/various-roles/content-authors-guide/introduction\n\n\n   ********************"  
+    echo -e "\n\n\n   ********************\n\n\n   You can start adding your content to the markdown files in the "spec" directory.\n\n   You can do this by editing local files in an editor or by going to your repository on GitHub.\n\n   More info: https://blockchainbird.github.io/spec-up-t-website/docs/various-roles/content-authors-guide/introduction\n\n\n   ********************"  
 }
 
 function do_render() { clear; npm run render; }
@@ -80,14 +80,14 @@ function do_freeze() { clear; npm run freeze; }
 
 function do_help() {
     clear
-    echo -e "\n\n\n   You will be redirected to the documentation website\n\n   (https://trustoverip.github.io/spec-up-t-website/)."
+    echo -e "\n\n\n   You will be redirected to the documentation website\n\n   (https://blockchainbird.github.io/spec-up-t-website/)."
     sleep 2
     if [[ "$OSTYPE" == "darwin"* ]]; then
-        open "https://trustoverip.github.io/spec-up-t-website/"
+        open "https://blockchainbird.github.io/spec-up-t-website/"
     elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
-        xdg-open "https://trustoverip.github.io/spec-up-t-website/"
+        xdg-open "https://blockchainbird.github.io/spec-up-t-website/"
     elif [[ "$OSTYPE" == "cygwin" || "$OSTYPE" == "msys" || "$OSTYPE" == "win32" ]]; then
-        start "https://trustoverip.github.io/spec-up-t-website/"
+        start "https://blockchainbird.github.io/spec-up-t-website/"
     else
         echo "Unsupported OS."
     fi

package/templates/template.html

@@ -127,10 +127,13 @@
         <!-- Right-aligned elements -->
         <div class="d-flex align-items-center">
 
-            <!-- Issues side menu -->
-            <button id="repo_issues" issue-count animate class="btn btn-sm btn-outline-secondary ms-2" type="button"
-                data-bs-toggle="offcanvas" data-bs-target="#offcanvasIssues" aria-controls="offcanvasIssues">
-                Issues
+            <!-- Settings side menu -->
+            <button id="repo_settings" animate class="btn btn-sm btn-outline-secondary ms-2" type="button"
+                data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings" aria-controls="offcanvasSettings">
+                <svg class="bi" width="1em" height="1em" aria-hidden="true">
+                    <use href="#gear-wide-connected"></use>
+                </svg>
+                <span class="visually-hidden">Settings</span>
             </button>
 
             <!-- Dark / Light theme selector -->
@@ -175,12 +178,12 @@
             <!-- Font size -->
             <div class="adjust-font-size btn-group me-2" role="group">
                 <button title="Decrease font size" type="button"
-                    class="btn btn-sm btn-outline-secondary m-0 p-3 border-end-0" id="decreaseBtn"><span
+                    class="btn btn-outline-secondary m-0 border-end-0" id="decreaseBtn"><span
                         class="visually-hidden">Decrease font size</span>
                 </button>
                 <!-- <button type="button" class="btn btn-sm btn-outline-secondary m-0 px-2" id="resetBtn">0</button> -->
                 <button title="Increase font size" type="button"
-                    class="btn btn-sm btn-outline-secondary m-0 p-3 border-start-0" id="increaseBtn">
+                    class="btn btn-outline-secondary m-0 border-start-0" id="increaseBtn">
                     <span class="visually-hidden">Increase font size</span>
                 </button>
             </div>
@@ -199,8 +202,6 @@
                     </div>
                     <div id="toc" class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto">
                         ${toc}
-                        <!-- href added via JS -->
-                        <a class="btn btn-outline-secondary mt-5" href="#">Snapshots</a>
                         <a class="powered-by mx-auto p-2" href="https://github.com/trustoverip/spec-up-t"
                             target="_blank" rel="noopener">Powered By Spec-Up-T</a>
                     </div>
@@ -209,7 +210,7 @@
 
             <main class="col-md-8 ms-sm-auto col-lg-9 px-md-4 pt-5">
                 <article id="content" class="">
-                    <div id="terminology-section-utility-container"></div>
+                    <div id="terminology-section-utility-container" class="alert alert-primary p-3"></div>
                     ${render}
                 </article>
 
@@ -219,7 +220,7 @@
 
     <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasIssues" aria-labelledby="offcanvasIssuesLabel">
         <div class="offcanvas-header">
-            <h5 class="offcanvas-title" id="offcanvasIssuesLabel">Issues</h5>
+            <h5 class="offcanvas-title mt-0" id="offcanvasIssuesLabel">Issues</h5>
             <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
         </div>
         <div class="offcanvas-body">
@@ -228,6 +229,28 @@
             </div>
         </div>
     </div>
+
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasSettings" aria-labelledby="offcanvasSettingsLabel">
+        <div class="offcanvas-header">
+            <h5 class="offcanvas-title mt-0" id="offcanvasSettings">Settings</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body p-0">
+            <a target="_blank" rel="noopener" class="btn btn-menu-item m-0 mb-1 border-start-0 border-end-0"
+                href="https://blockchainbird.github.io/spec-up-t-website/docs/user-interface-overview/specification/#explanation-of-the-buttons-in-the-specification">Help</a>
+            <button class="button-token-input btn btn-menu-item m-0 mb-1 border-start-0 border-end-0" type="button" aria-label="Enter GitHub Token">
+                Enter GitHub Token
+            </button>
+            <button id="repo_issues" issue-count animate class="btn btn-menu-item m-0 mb-1 border-start-0 border-end-0" type="button"
+                data-bs-toggle="offcanvas" data-bs-target="#offcanvasIssues" aria-controls="offcanvasIssues">
+                Issues
+            </button>
+            <!-- href added via JS -->
+            <a id="snapshotLink" class="btn btn-menu-item m-0 mb-1 border-start-0 border-end-0" href="#">Snapshots</a>
+
+        </div>
+    </div>
+
     <div style="display: none;">
         ${externalReferences}
     </div>