Implement deep links for tabs and template cleanup

ram/portal/static/js/main.min.js

@@ -0,0 +1,6 @@
+/*!
+* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+* Copyright 2011-2023 The Bootstrap Authors
+* Licensed under the Creative Commons Attribution 3.0 Unported License.
+*/
+(()=>{"use strict";const e=()=>localStorage.getItem("theme"),t=()=>{const t=e();return t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},a=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};a(t());const r=(e,t=!1)=>{const a=document.querySelector("#bd-theme");if(!a)return;const r=document.querySelector(".theme-icon-active i"),o=document.querySelector(`[data-bs-theme-value="${e}"]`),s=o.querySelector(".theme-icon i").getAttribute("class");document.querySelectorAll("[data-bs-theme-value]").forEach(e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}),o.classList.add("active"),o.setAttribute("aria-pressed","true"),r.setAttribute("class",s),t&&a.focus()};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",()=>{const r=e();"light"!==r&&"dark"!==r&&a(t())}),window.addEventListener("DOMContentLoaded",()=>{r(t()),document.querySelectorAll("[data-bs-theme-value]").forEach(e=>{e.addEventListener("click",()=>{const t=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(t),a(t),r(t,!0)})})})})(),document.addEventListener("DOMContentLoaded",function(){const e=window.location.hash.substring(1);if(e){const t=document.querySelector(`[data-bs-target="#nav-${e}"]`);t&&bootstrap.Tab.getOrCreateInstance(t).show()}document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(e=>{e.addEventListener("shown.bs.tab",e=>{const t=e.target.getAttribute("data-bs-target").replace("nav-","");history.replaceState(null,null,t)})});const t=document.getElementById("tabSelector");t&&(t.addEventListener("change",function(){const e=this.value,t=document.querySelector(`[data-bs-target="#${e}"]`);if(t){bootstrap.Tab.getOrCreateInstance(t).show()}}),document.querySelectorAll('[data-bs-toggle="tab"]').forEach(e=>{e.addEventListener("shown.bs.tab",e=>{const a=e.target.getAttribute("data-bs-target");t.value=a.substring(1)})}))});

ram/portal/static/js/src/README.md

@@ -0,0 +1,7 @@
+# Compile main.min.js
+
+```bash
+$ npm install terser
+$ npx terser theme_selector.js tabs_selector.js -c -m -o ../main.min.js 
+```
+

ram/portal/static/js/src/tabs_selector.js

@@ -0,0 +1,39 @@
+document.addEventListener("DOMContentLoaded", function () {
+  // code to handle tab selection and URL hash synchronization
+  const hash = window.location.hash.substring(1) // remove the '#' prefix
+  if (hash) {
+    const trigger = document.querySelector(`[data-bs-target="#nav-${hash}"]`);
+    if (trigger) {
+      bootstrap.Tab.getOrCreateInstance(trigger).show();
+    }
+  }
+  //
+  // update the URL hash when a tab is shown
+  document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(btn => {
+    btn.addEventListener('shown.bs.tab', event => {
+      const newHash = event.target.getAttribute('data-bs-target').replace('nav-', '');
+      history.replaceState(null, null, newHash);
+    });
+  });
+
+  // allow tab selection via a dropdown on small screens
+  const selectElement = document.getElementById('tabSelector');
+  if (!selectElement) return;
+  selectElement.addEventListener('change', function () {
+    const targetSelector = this.value;
+    const triggerEl = document.querySelector(`[data-bs-target="#${targetSelector}"]`);
+    if (triggerEl) {
+      // Use Bootstrap 5.3's API — ensures transitions + ARIA updates
+      const tabInstance = bootstrap.Tab.getOrCreateInstance(triggerEl);
+      tabInstance.show();
+    }
+  });
+
+  // keep the dropdown in sync if the user clicks a tab button
+  document.querySelectorAll('[data-bs-toggle="tab"]').forEach(btn => {
+    btn.addEventListener('shown.bs.tab', event => {
+      const target = event.target.getAttribute('data-bs-target');
+      selectElement.value = target.substring(1); // remove the '#' character
+    });
+  });
+});

ram/portal/static/js/src/theme_selector.js

@@ -0,0 +1,76 @@
+/*!
+* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+* Copyright 2011-2023 The Bootstrap Authors
+* Licensed under the Creative Commons Attribution 3.0 Unported License.
+*/
+
+(() => {
+  'use strict'
+
+  const getStoredTheme = () => localStorage.getItem('theme')
+  const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = theme => {
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector('#bd-theme')
+
+    if (!themeSwitcher) {
+      return
+    }
+
+    const activeThemeIcon = document.querySelector('.theme-icon-active i')
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    const biOfActiveBtn = btnToActive.querySelector('.theme-icon i').getAttribute('class')
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+      element.setAttribute('aria-pressed', 'false')
+    })
+
+    btnToActive.classList.add('active')
+    btnToActive.setAttribute('aria-pressed', 'true')
+    activeThemeIcon.setAttribute('class', biOfActiveBtn)
+
+    if (focus) {
+      themeSwitcher.focus()
+    }
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          setStoredTheme(theme)
+          setTheme(theme)
+          showActiveTheme(theme, true)
+        })
+      })
+    })
+ })()