Updated custom tags. Added function to automatically add simulation t…

…erminal info admonitions to pages with simulated terminals. Updated REAMDE

README.md

@@ -57,7 +57,7 @@ The following custom tags are available:
   The `<custom-not-supported/>` tag renders a preset "Not supported by ACCESS-NRI" admonition.
 
 - **References**<br>
-  The `<custom-references> ... </custom-references>` tag renders references to be used at the bottom of a page. Each reference inside `...` should be a link preceded by a hyphen (`-`) and will be treated as a separate bullet point. Spaces between different references will be disregarded for the rendering.<br>
+  The `<custom-references> ... </custom-references>` tag renders references to be used at the bottom of a page. Each new line (created by pressing ++Return++) inside `...` is rendered as a separate bullet point. A hyphen can included at the beginning of a new line (for clarity) but is stripped off at the time of rendering.<br>
   For example, to reference 2 links you can write:
   ```
   <custom-references>

docs/getting_started/first_steps.md

@@ -1,7 +1,5 @@
 # First Steps
 
-<custom-simulated-terminal-info/>
-
 The steps in this section are aimed at new users who would like to do any of the following tasks:
 
 - Run their own experiment

docs/js/custom-tags.js

@@ -3,55 +3,62 @@
 // Create an HTML tag to render the not-supported danger admonition
 class NotSupported extends HTMLElement {
     constructor() {
-    super();
-    this.outerHTML = `<details class="not-supported" open="open">
-<summary>NOT directly supported by ACCESS-NRI</summary>
-<p>
-The information below can be useful for the ACCESS community, 
-but is not directly supported by ACCESS-NRI, unless stated otherwise.
-</p>
-</details>
-`
+        super();
+    }
+
+    connectedCallback() {
+        this.innerHTML = `<details class="not-supported" open="open">
+        <summary>NOT directly supported by ACCESS-NRI</summary>
+        <p>
+        The information below can be useful for the ACCESS community, 
+        but is not directly supported by ACCESS-NRI, unless stated otherwise.
+        </p>
+        </details>
+        `
     }
 }
 
 // Create an HTML tag to render the simulated terminal info admonition
 class SimulatedTerminalInfo extends HTMLElement {
     constructor() {
-    super();
-    this.outerHTML = `<div class="admonition info">
-    In this documentation, the same code is sometimes shown in a highlighted code-block 
-    and also in a simulated terminal.<br>
-    The <b>code-blocks</b> show the commands to be run in a terminal. They can be easily copied
-    by clicking on the icon over the right side of the code block.<br>
-    The <b>simulated terminals</b> are examples of the output to expect when the commands are
-    run. Sometimes they might slightly differ from the real outputs.
-</div>
-`
+        super();  
+    }
+
+    connectedCallback() {
+        this.innerHTML = `<div class="admonition info">
+        In this documentation, the same code is sometimes shown in a highlighted code-block 
+        and also in a simulated terminal.<br>
+        The <b>code-blocks</b> show the commands to be run in a terminal. They can be easily copied
+        by clicking on the icon over the right side of the code block.<br>
+        The <b>simulated terminals</b> are examples of the output to expect when the commands are
+        run. Sometimes they might slightly differ from the real outputs.
+        </div>`
     }
 }
 
 // Create an HTML tag to render the references
 class References extends HTMLElement {
     constructor() {
-    super();
-    let inner = this.innerHTML.split("\n")
-    let ul = document.createElement("ul")
-    inner.forEach((item) => {
-        item = item.trim()
-        if (item != "") {
-            console.log(item)
-            let li = document.createElement("li")
-            item.startsWith('- ') ? li.innerHTML = item.slice(2) : li.innerHTML = item
-            ul.appendChild(li)
-        }
-    })
-    this.innerHTML = `<hr>
-    <h6>References</h6>
-    <div class="references">
-        ${ul.outerHTML}
-    </div>
-    `
+        super();
+    }
+
+    connectedCallback() {
+        let inner = this.innerHTML.split("\n")
+        let ul = document.createElement("ul")
+        inner.forEach((item) => {
+            item = item.trim()
+            if (item != "") {
+                let li = document.createElement("li")
+                item.startsWith('- ') ? li.innerHTML = item.slice(2) : li.innerHTML = item
+                ul.appendChild(li)
+            }
+        })
+        this.innerHTML = `<hr>
+        <h6>References</h6>
+        <div class="references">
+            ${ul.outerHTML}
+        </div>
+        `
     }
 }
 

docs/js/miscellaneous.js

@@ -153,23 +153,22 @@ function toggleTerminalAnimations() {
 
     let terminalAnimationsSwitch = document.createElement('img');
     terminalAnimationsSwitch.classList.add('terminalSwitch');
-    document.querySelectorAll('h1').forEach(h1 => {
-      let _switch = terminalAnimationsSwitch.cloneNode(true);
-      _switch.addEventListener('click', toggleState, false);
-      h1.parentElement.insertBefore(_switch, h1);
-    })
-    terminalAnimationsSwitch.remove();
+    terminalAnimationsSwitch.addEventListener('click', toggleState, false);
+    let h1 = document.querySelector('h1');
+    h1.parentElement.insertBefore(terminalAnimationsSwitch, h1);
     applyState();
   }
 }
 
 /*
-  Add style equals to number of children to all card containers, used for styling the card gaps in CSS
+  Add custom info box for terminal-animations at the top of the page (right after the page title)
 */
-function addCardContainerChildrenNumber() {
-  document.querySelectorAll(".card-container").forEach(container => {
-    container.setAttribute("style",`--num-children: ${container.childElementCount}`);
-  })
+function addTerminalAnimationsInfo() {
+  if (document.querySelector('terminal-window')) {
+    let h1 = document.querySelector('h1');
+    let infoBox = document.createElement('custom-simulated-terminal-info');
+    h1.parentElement.insertBefore(infoBox, h1.nextSibling);
+  }
 }
 
 /*
@@ -221,8 +220,8 @@ function main() {
   makeLinksExternal();
   fitText();
   toggleTerminalAnimations();
+  addTerminalAnimationsInfo();
   makeCitationLinks();
-  // addCardContainerChildrenNumber();
 }
 
 // Run all functions

docs/models/run-a-model/run-access-cm.md

@@ -8,8 +8,6 @@
     If you were an _accessdev_ user, make sure you are a member of [hr22](https://my.nci.org.au/mancini/project/hr22/join) and [ki32](https://my.nci.org.au/mancini/project/ki32/join) projects.<br>
     Then, refer to instructions on how to [Set up persistent session worflow for {{ model }}]({{ '#set-up-%s-persistent-session'%model.lower() }}), and how to [port suites from accessdev](#port-suites-from-accessdev).
 
-<custom-simulated-terminal-info/>
-
 ## Prerequisites
 ### General prerequisites
 

docs/models/run-a-model/run-access-esm.md

@@ -3,8 +3,6 @@
 
 # Run {{ model }}
 
-<custom-simulated-terminal-info/>
-
 ## Prerequisites
 
 ### General prerequisites

docs/models/run-a-model/run-access-om.md

@@ -6,12 +6,6 @@
 [model components]: https://access-hive.org.au/models/configurations/access-om/#model-components
 
 # Run {{ model }}
-!!! info
-    In this documentation, the same code is sometimes shown in a highlighted code-block and also in a simulated terminal.<br>
-    The code-blocks show the commands to be run in a terminal. They can be easily copied by clicking on the icon over the right side of the code block.<br>
-    The simulated terminals are examples of the output to expect when the commands are run. Sometimes they might slightly differ from the real outputs.
-
-<custom-simulated-terminal-info/>
 
 ## Prerequisites
 

mkdocs.yml

@@ -224,5 +224,5 @@ extra_css:
 extra_javascript:
   - https://unpkg.com/[email protected]/dist/tablesort.min.js     # For tablesort functionality 
   - https://cdn.jsdelivr.net/gh/atteggiani/[email protected]/animated-terminal.min.js # Terminal animations
-  - js/miscellaneous.js
   - js/custom-tags.js
+  - js/miscellaneous.js