From d4d8ef794b724c5eb2ab7a20b9203ef4e0da595b Mon Sep 17 00:00:00 2001 From: atteggiani Date: Thu, 2 May 2024 13:04:36 +1000 Subject: [PATCH] Updated custom tags. Added function to automatically add simulation terminal info admonitions to pages with simulated terminals. Updated REAMDE --- README.md | 2 +- docs/getting_started/first_steps.md | 2 - docs/js/custom-tags.js | 81 ++++++++++++----------- docs/js/miscellaneous.js | 23 +++---- docs/models/run-a-model/run-access-cm.md | 2 - docs/models/run-a-model/run-access-esm.md | 2 - docs/models/run-a-model/run-access-om.md | 6 -- mkdocs.yml | 2 +- 8 files changed, 57 insertions(+), 63 deletions(-) diff --git a/README.md b/README.md index 00ca8160e..c61968f8d 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ The following custom tags are available: The `` tag renders a preset "Not supported by ACCESS-NRI" admonition. - **References**
- The ` ... ` 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.
+ The ` ... ` 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.
For example, to reference 2 links you can write: ``` diff --git a/docs/getting_started/first_steps.md b/docs/getting_started/first_steps.md index 9905c9d9b..202b59434 100644 --- a/docs/getting_started/first_steps.md +++ b/docs/getting_started/first_steps.md @@ -1,7 +1,5 @@ # First Steps - - The steps in this section are aimed at new users who would like to do any of the following tasks: - Run their own experiment diff --git a/docs/js/custom-tags.js b/docs/js/custom-tags.js index e1ae519e7..8195d3912 100644 --- a/docs/js/custom-tags.js +++ b/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 = `
-NOT directly supported by ACCESS-NRI -

-The information below can be useful for the ACCESS community, -but is not directly supported by ACCESS-NRI, unless stated otherwise. -

-
-` + super(); + } + + connectedCallback() { + this.innerHTML = `
+ NOT directly supported by ACCESS-NRI +

+ The information below can be useful for the ACCESS community, + but is not directly supported by ACCESS-NRI, unless stated otherwise. +

+
+ ` } } // Create an HTML tag to render the simulated terminal info admonition class SimulatedTerminalInfo extends HTMLElement { constructor() { - super(); - this.outerHTML = `
- In this documentation, the same code is sometimes shown in a highlighted code-block - and also in a simulated terminal.
- 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.
- The simulated terminals are examples of the output to expect when the commands are - run. Sometimes they might slightly differ from the real outputs. -
-` + super(); + } + + connectedCallback() { + this.innerHTML = `
+ In this documentation, the same code is sometimes shown in a highlighted code-block + and also in a simulated terminal.
+ 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.
+ The simulated terminals are examples of the output to expect when the commands are + run. Sometimes they might slightly differ from the real outputs. +
` } } // 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 = `
-
References
-
- ${ul.outerHTML} -
- ` + 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 = `
+
References
+
+ ${ul.outerHTML} +
+ ` } } diff --git a/docs/js/miscellaneous.js b/docs/js/miscellaneous.js index 64fcfc1f8..4285a9fcb 100644 --- a/docs/js/miscellaneous.js +++ b/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 diff --git a/docs/models/run-a-model/run-access-cm.md b/docs/models/run-a-model/run-access-cm.md index 001cd5139..4182bd907 100644 --- a/docs/models/run-a-model/run-access-cm.md +++ b/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.
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). - - ## Prerequisites ### General prerequisites diff --git a/docs/models/run-a-model/run-access-esm.md b/docs/models/run-a-model/run-access-esm.md index 72d65ddd1..f92303044 100644 --- a/docs/models/run-a-model/run-access-esm.md +++ b/docs/models/run-a-model/run-access-esm.md @@ -3,8 +3,6 @@ # Run {{ model }} - - ## Prerequisites ### General prerequisites diff --git a/docs/models/run-a-model/run-access-om.md b/docs/models/run-a-model/run-access-om.md index 8ce61f93b..f6746b89c 100644 --- a/docs/models/run-a-model/run-access-om.md +++ b/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.
- 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.
- The simulated terminals are examples of the output to expect when the commands are run. Sometimes they might slightly differ from the real outputs. - - ## Prerequisites diff --git a/mkdocs.yml b/mkdocs.yml index a0f26f8dc..ae0b99b81 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -224,5 +224,5 @@ extra_css: extra_javascript: - https://unpkg.com/tablesort@5.3.0/dist/tablesort.min.js # For tablesort functionality - https://cdn.jsdelivr.net/gh/atteggiani/animated-terminal@2.1/animated-terminal.min.js # Terminal animations - - js/miscellaneous.js - js/custom-tags.js + - js/miscellaneous.js