Create how to build a model page

README.md

@@ -97,7 +97,7 @@ The following custom tags are available:
 |**Code block**|\```<br>&emsp;code block<br>```|\<pre><br>&emsp;\<code>code block\</code><br>\</pre>|<pre><code>code block</code></pre>|
 |**[Admonition](https://squidfunk.github.io/mkdocs-material/reference/admonitions/#usage) (not collapsible)**|!!! warning<br>&emsp;this is a warning admonition|\<div class="admonition warning"><br>&emsp;this is a warning<br>&emsp;admonition<br>\<div>|![warning admonition](docs/assets/assets_for_readme/warning_admonition.png)|
 |**Collapsible [Admonition](https://squidfunk.github.io/mkdocs-material/reference/admonitions/#usage)**|??? warning title<br>&emsp;this is a collapsible warning admonition|\<details class="warning"><br>&emsp;\<summary><br>&emsp;&emsp;\<p><br>&emsp;&emsp;&emsp;this is a collapsible<br>&emsp;&emsp;&emsp;warning admonition<br>&emsp;&emsp;\</p><br>&emsp;\</summary><br>\</details>|![collapsible warning admonition](docs/assets/assets_for_readme/collapsible_warning_admonition.gif)|
-|**Tabs**|N/A|\<div class="tabLabels" label="your-tab-label"><br>&emsp;\<button id="id-tab1">Tab1\</button id="id-tab2"><br>&emsp;\<button>Tab2\</button><br>\</div><br>\<div contentfor="id-tab1"><br>&emsp;&emsp;Content for tab1<br>&emsp;\</div><br>&emsp;\<div contentfor="id-tab2"><br>&emsp;&emsp;Content for tab2<br>&emsp;\</div>|![tabs](docs/assets/assets_for_readme/tabs.gif)|
+|**Tabs**|N/A|**Labels:**<br>\<div class="tabLabels" label="your-tab-label"><br>&emsp;\<button id="id-tab1"><br>&emsp;&emsp;Tab1<br>&emsp;\</button><br>&emsp;\<button id="id-tab2"><br>&emsp;&emsp;Tab2<br>&emsp;\</button><br>\</div><br><br>**Contents:**<br>\<div tabcontentfor="id-tab1"><br>&emsp;&emsp;Content for tab1<br>\</div><br>\<div contentfor="id-tab2"><br>&emsp;&emsp;Content for tab2<br>\</div><br><br>A content for a specific tab `id` can be included or not independently from the other contents.|![tabs](docs/assets/assets_for_readme/tabs.gif)|
 
 
 # License

docs/js/miscellaneous.js

@@ -84,7 +84,7 @@ function tabFunctionality() {
     button.addEventListener('click', (e) => openTab(e.currentTarget));
   })
 
-  // Add click event for links to tab IDs on the same page
+  // Add click event for links to tab IDs
   document.querySelectorAll('[href^="#"]:not([class^="md"])').forEach(el => {
     let href = el.getAttribute('href');
     let tabEl = document.getElementById(href.slice(1,))

docs/models/configurations/access-om.md

@@ -29,9 +29,9 @@ Each configuration also has a biogeochemical (BGC) configuration that uses the [
 
 ### Model Components
 <div class="tabLabels" label="ACCESS-OM2-versions">
-    <button>ACCESS-OM2</button>
-    <button>ACCESS-OM2-025</button>
-    <button>ACCESS-OM2-01</button>
+    <button id="1deg">ACCESS-OM2</button>
+    <button id="025deg">ACCESS-OM2-025</button>
+    <button id='01deg'>ACCESS-OM2-01</button>
 </div>
 
 - **Ocean**: [MOM5](/models/model_components/ocean#mom5).<br>

docs/models/run-a-model/index.md

@@ -16,16 +16,24 @@ If you are unsure which ACCESS model is the right choice for your experiment, ta
         <div class="card-image-container">
             <img class="img-contain with-padding white-background" src="/assets/model-config-logos/globe_visualisation/access_esm_globe_visualisation.png" alt="ACCESS-ESM">
         </div>
-        <div class="card-text-container   bold">   
+        <div class="card-text-container bold">   
             Run ACCESS-ESM
         </div>
     </a>
     <a href="/models/run-a-model/run-access-om" class="vertical-card aspect-ratio1to1">
         <div class="card-image-container">
             <img class="img-contain with-padding white-background" src="/assets/model-config-logos/globe_visualisation/access_om_globe_visualisation.png" alt="ACCESS-OM">
         </div>
-        <div class="card-text-container   bold">   
+        <div class="card-text-container bold">   
             Run ACCESS-OM
         </div>
     </a>
+    <a href="/models/run-a-model/build_a_model" class="vertical-card aspect-ratio1to1">
+        <div class="card-image-container">
+            <img class="img-contain with-padding white-background" src="/assets/model-config-logos/globe_visualisation/access_om_globe_visualisation.png" alt="Build a model">
+        </div>
+        <div class="card-text-container bold">   
+            Build a model
+        </div>
+    </a>
 </div>

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

@@ -640,6 +640,10 @@ Each of [{{ model }} components][model components] contains additional configura
 These configuration options are specified in files located inside a subfolder of the _control_ directory, named according to the submodel's `name` specified in the `config.yaml` `submodels` section (e.g., configuration options for the _ocean_ component are in the `~/access-esm/preindustrial+concentrations/ocean` directory).<br>
 To modify these options please refer to the User Guide of the respective model component.
 
+### Create a custom {{ model }} build
+All the executables needed to run {{ model }} are pre-built into independent configurations using _Spack_.<br>
+To customise {{ model }}'s build (for example to run {{ model }} with changes in the source code of one of its component), refer to [Build {{ model }}](/models/run-a-model/build_a_model#{{model|lower}}).
+
 ### Controlling model output
 Selecting the variables to save from a simulation can be a balance between enabling future analysis and minimising storage requirements. The choice and frequency of variables saved by each model can be configured from within each submodel's _control_ directory. 
 

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

@@ -563,6 +563,10 @@ These options are typically useful to modify the physics used in the model, the
 These configuration options are specified in files located inside a subfolder of the _control_ directory, named according to the submodel's `name` specified in the `config.yaml` `submodels` section (e.g., configuration options for the _ocean_ component are in the `~/access-om2/1deg_jra55_ryf/ocean` directory).<br>
 To modify these options please refer to the User Guide of the respective model component.
 
+### Create a custom {{ model }} build
+All the executables needed to run {{ model }} are pre-built into independent configurations using _Spack_.<br>
+To customise {{ model }}'s build (for example to run {{ model }} with changes in the source code of one of its component), refer to [Build {{ model }}](/models/run-a-model/build_a_model#{{model|lower}}).
+
 ## Get Help
 
 If you have questions or need help regarding {{ model }}, consider creating a topic in the [COSIMA category of the ACCESS-Hive Forum](https://forum.access-hive.org.au/c/cosima/29).<br>

mkdocs.yml

@@ -126,6 +126,7 @@ nav:
     - Run ACCESS-CM: models/run-a-model/run-access-cm.md
     - Run ACCESS-ESM: models/run-a-model/run-access-esm.md
     - Run ACCESS-OM: models/run-a-model/run-access-om.md
+    - Build a Model: models/run-a-model/build_a_model.md
 
   - Data and Model Evaluation:
     - model_evaluation/index.md