Added pencil icon and changed the rendering of terminal animations toggle.

Author: atteggiani

docs/css/access-nri.css

@@ -1127,29 +1127,35 @@ pre > button:is(:hover,:focus).md-clipboard {
   word-break: normal;
 }
 
+.terminal-switch-container {
+    position: relative;
+    float: right;
+    height: 1.2rem;
+    margin: 0.4rem 0.2rem;
+}
+
 img.terminal-switch {
+  height: 100%;
+}
+
+img.terminal-switch.inactive {
   position: absolute;
-  right: 0;
-  top: -0.5em;
-  height: 1.5rem;
-  margin: 0.5rem 0.2rem;
+  left: 0;
+  top: 0;
+  z-index: 1;
 }
 
 img.terminal-switch:hover {
   cursor: pointer;
 }
 
-.terminal-switch-container {
-    position: relative;
-}
-
 .terminal-switch-tooltip {
     position: absolute;
     display: inline-block;
     z-index: 1;
-    right: 2em;
-    top: 2em;
-    max-width: 30vw;
+    right: 1.6em;
+    top: 1.1em;
+    width: clamp(20vw,10rem,30vw);
     font-size: 0.7em;
     background-color: var(--tooltip-background);
     border: solid 1.5px var(--tooltip-border-color);

docs/js/miscellaneous.js

@@ -138,7 +138,7 @@ function tabFunctionality() {
 function makeLinksExternal() {
   const externalLinkClass = "external-link";
   const currentHost = location.hostname;
-  const excludedClasses = ['.vertical-card', '.horizontal-card', '.text-card'];
+  const excludedClasses = ['.vertical-card', '.horizontal-card', '.text-card', '.md-content__button'];
   document.querySelectorAll("a[href^='http']")
     .forEach(link => {
       const url = new URL(link.href);
@@ -235,7 +235,7 @@ function toggleTerminalAnimations() {
         terminalAnimationsSwitch.setAttribute('src',SWITCH_IMG);
         terminalAnimationsSwitch.classList.add('terminal-switch');
         const terminalAnimationsSwitchInactive = document.createElement('img');
-        terminalAnimationsSwitchInactive.classList.add('terminal-switch');
+        terminalAnimationsSwitchInactive.classList.add('terminal-switch', 'inactive');
         terminalAnimationsSwitchInactive.setAttribute('src',SWITCH_IMG_INACTIVE);
         // Create the Animation Switch tooltip
         const terminalAnimationsTooltip = document.createElement('div');
@@ -256,8 +256,14 @@ function toggleTerminalAnimations() {
         let state = getState();
         applyState(terminalAnimationsSwitchContainer, state);
         // Place the Animation switch within the document
-        const h1 = document.querySelector('h1');
-        h1.parentElement.insertBefore(terminalAnimationsSwitchContainer, h1);
+        // If pencil icon is present, place the switch next to it, otherwise at the beginning of the 'article' element
+        const pencilIcon = document.querySelector('.md-content__button[title="Edit this page"]');
+        if (pencilIcon) {
+            pencilIcon.parentElement.insertBefore(terminalAnimationsSwitchContainer, pencilIcon.nextSibling);
+        } else {
+            const articleElement = document.querySelector('article');
+            articleElement.insertBefore(terminalAnimationsSwitchContainer, articleElement.firstChild);
+        }
     }
 }
 

mkdocs.yml

@@ -8,6 +8,8 @@ site_url: !ENV READTHEDOCS_CANONICAL_URL
 repo_url: https://github.com/ACCESS-NRI/ACCESS-Hive-Docs
 repo_name: ACCESS-Hive-Docs
 
+edit_uri: edit/development/docs/
+
 theme:
   name: material
   custom_dir: overrides
@@ -39,6 +41,7 @@ theme:
     - navigation.tracking       # The URL in the address bar is automatically updated with active anchor
     - content.code.copy         # for displaying copy icon at top right in code snippets  
     - content.code.annotate
+    - content.action.edit
     - content.tabs.link
     - search.suggest
     - search.highlight
@@ -231,7 +234,7 @@ extra_css:
 
 extra_javascript:
   - https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js # For pymdownx.arithmatex extension
-  - https://cdn.jsdelivr.net/gh/atteggiani/animated-terminal@3.0/animated-terminal.min.js # Terminal animations
+  - https://cdn.jsdelivr.net/gh/atteggiani/animated-terminal@3.1/animated-terminal.min.js # Terminal animations
   - js/custom-tags.js
   - js/miscellaneous.js