Merge main into staging

internal/templates/course.qmd

@@ -0,0 +1,52 @@
+title: "{{ course_title }}"
+subtitle: For {{< var vm.product >}}
+date: last-modified
+filters:
+  - tachyons
+---
+
+As a {{ role }} new to ValidMind, learn how to {{ course_overview }}.
+
+<!-- COURSE CARD -->
+::: {.br3 .pa4 .bw1 .bg-near-white}
+
+## In this course
+
+:::: {.flex .flex-wrap .justify-around}
+
+::: {.w-50-ns .pr3}
+### Learn how to
+
+- {{ learning_point_1 }}
+- {{ learning_point_2 }}
+- {{ learning_point_3 }}
+- {{ learning_point_4 }}
+- {{ learning_point_5 }}
+- {{ learning_point_6 }}
+
+#### Duration 
+
+{{ duration }} minutes
+
+[register](#register){.button-green .cta}
+:::
+
+::: {.w-40-ns}
+### Preview
+
+<div style="position: relative; display: inline-block; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); border-radius: 5px; border: 1px solid #222425; background: #DE257E;">
+  <iframe src="{{ preview_url }}" width="400" height="250" style="border:none; border-radius: 5px;"></iframe>
+  <a href="{{ preview_url }}" target="_blank" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;"></a>
+</div>
+
+:::
+
+::::
+
+---
+
+:::
+
+{{< include _training-register.qmd >}}
+
+{{< include _training-support.qmd >}}

site/_extensions/nrichers/preview/_extension.yaml

@@ -0,0 +1,7 @@
+title: Preview
+author: Nik Richers
+version: 1.0.0
+quarto-required: ">=1.5.0"
+contributes:
+  filters:
+    - preview.lua

site/_extensions/nrichers/preview/preview.css

@@ -0,0 +1,26 @@
+.preview {
+  position: relative;
+  display: inline-block;
+  width: 400px;
+  height: 225px;
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  background: #DE257E;
+  border: 1px solid #DE257E;
+}
+
+.preview iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 5px;
+}
+
+.preview a {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+}

site/_extensions/nrichers/preview/preview.lua

@@ -0,0 +1,43 @@
+-- preview.lua
+
+-- Track if CSS has already been added to prevent duplication
+local css_added = false
+
+-- Helper function to add a CSS file to the document header
+function add_css(doc)
+  if not css_added then
+    local css_file = "/_extensions/nrichers/preview/preview.css"
+    table.insert(doc.blocks, 1, pandoc.RawBlock("html", "<link rel=\"stylesheet\" href=\"" .. css_file .. "\">"))
+    css_added = true
+  end
+end
+
+-- Main function to apply preview
+function Div(el)
+  if el.classes:includes("preview") then
+    -- Get the `source` attribute, defaulting to "index.qmd" if missing
+    local source = el.attributes.source or "index.qmd"
+    source = source:gsub("%.qmd$", ".html")
+
+    -- Get the `target` attribute, defaulting to `source` if missing
+    local target = el.attributes.target or el.attributes.source or "index.qmd"
+    target = target:gsub("%.qmd$", ".html")
+
+    -- Generate the HTML content for the preview div
+    local iframeHtml = string.format(
+      '<div class="preview">\n' ..
+      '  <iframe src="%s" width="400" height="225"></iframe>\n' ..
+      '  <a href="%s" target="_blank"></a>\n' ..
+      '</div>', source, target
+    )
+
+    -- Return the raw HTML to be inserted
+    return pandoc.RawBlock("html", iframeHtml)
+  end
+end
+
+-- Ensure CSS is added once per document
+function Pandoc(doc)
+  add_css(doc)
+  return doc
+end

site/_quarto.yml

@@ -58,7 +58,7 @@ website:
           file: developer/samples-jupyter-notebooks.qmd
         - text: "{{< fa download >}} Download Code Samples · `notebooks.zip`"
           file: notebooks.zip
-        - text: "{{< fa hand-point-right >}} Try it on Jupyter Hub {{< fa hand-point-left >}}"
+        - text: "{{< fa hand-point-right >}} Try it on JupyterHub {{< fa hand-point-left >}}"
           file: https://jupyterhub.validmind.ai/
         - text: "---"
         - text: "{{< fa book >}} REFERENCE"
@@ -319,12 +319,13 @@ website:
         - text: "Training"
           file: training/training.qmd
         - text: "---"
-        - text: "For model developers"
-          file: training/training-for-model-developers.qmd
-        - text: "For model validators"
-          file: training/training-for-model-validators.qmd
-        - text: "For administrators"
-          file: training/training-for-administrators.qmd
+        - text: "FUNDAMENTALS"
+        - text: "For Administrators"
+          file: training/administrator-fundamentals-register.qmd
+        - text: "For Developers"
+          file: training/developer-fundamentals-register.qmd
+        - text: "For Validators"
+          file: training/validator-fundamentals-register.qmd
 #        - text: "For model risk governance"
 #          file: training/training-for-model-risk-governance.qmd
 

site/about/contributing/style-guide/conventions.qmd

@@ -3,6 +3,7 @@ title: "Conventions"
 date: last-modified
 filters:
   - tachyons
+  - preview
 ---
 
 A message can only make an impact when it is received, so presentation is (almost) everything.
@@ -63,7 +64,7 @@ In general, follow sentence-style capitalization[^3] to minimize the confusion o
 
 To make sure our docs site works well on mobile, we use Tachyons CSS[^4] with flexbox. Quarto's default support for CSS Grid is not responsive and should not be used.
 
-Enable Tachyons CSS in the front matter  with:
+Enable Tachyons CSS in the front matter with:
 
 ```yaml
 filters:
@@ -226,6 +227,54 @@ Footnotes will automatically appear in the correct location in the margin, regar
 | ![](margin-footnotes_correct.png){fig-alt="A screenshot showing a correct example of footnote links automatically placed in the margin" class="screenshot"} | ![](inline-links_incorrect.png){fig-alt="A screenshot showing an incorrect example of supplementary links in inline instructional text" class="screenshot"} |
 : **Margin footnotes** examples {.hover}
 
+### Page previews 
+
+We provide live previews of training modules on our course pages. These previews act like links but they provide a live preview of the training module linked to. To simplify embedding these previews, we created a preview extension for Quarto that is part of our repository.
+
+Enable course previews in the front matter:
+
+```yaml
+filters:
+  - preview
+```
+
+:::: {.flex .flex-wrap .justify-around}
+
+::: {.w-50-ns .pr3}
+**Correct:**
+
+```markdown
+::: {.preview source="administrator-fundamentals.qmd"}
+:::
+```
+
+**Output:**
+
+::: {.preview source="../../../training/administrator-fundamentals.qmd"}
+:::
+
+**Optional:** Specify a different `target` for the preview to preview a training course but link to the registration page, for example:
+
+```markdown
+::: {.preview source="administrator-fundamentals.qmd" target="administrator-fundamentals-register.qmd"}
+:::
+```
+
+:::
+
+::: {.w-50-ns .pl3}
+**Incorrect:**
+
+```html
+<div style="position: relative; display: inline-block; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); border-radius: 5px; border: 1px solid #222425; background: #DE257E;">
+  <iframe src="administrator-fundamentals.html" width="400" height="225" style="border:none; border-radius: 5px;"></iframe>
+  <a href="administrator-fundamentals.html" target="_blank" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;"></a>
+</div>
+```
+:::
+
+::::
+
 ### Emphasis
 Use emphatic styling sparingly, in order not to overwhelm the reader with visual distractions.
 
@@ -397,9 +446,31 @@ Refer also to [the glossary](/about/glossary/glossary.qmd) for extended informat
 
 ## Training materials
 
-The ValidMind Academy is delivered in Revealjs presentation format,[^20] with a slightly different set of conventions:
+The ValidMind Academy[^20] is delivered in Revealjs presentation format,[^21] with a slightly different set of conventions:
+
+- Registration landing pages make use of our custom `.preview` class to display the tile card for the course:
+
+  :::: {.flex .flex-wrap .justify-around}
+
+  ::: {.w-40-ns}
+
+    ```markdown
+  ::: {.preview source="/training/administrator-fundamentals.qmd"}
+  :::
+  ```
+
+  :::
 
-- It makes use of Tachyons CSS[^21] to provide demonstration overlays.
+  ::: {.w-50-ns}
+
+  ::: {.preview source="/training/administrator-fundamentals.qmd"}
+  :::
+  <br>
+  :::
+
+  ::::
+
+- Training slides make use of Tachyons CSS[^22] to provide demonstration overlays.
 
   Enable Tachyons CSS in the front matter with:
 
@@ -439,8 +510,7 @@ The ValidMind Academy is delivered in Revealjs presentation format,[^20] with a
 
   ::::
 
-
-- It uses inline links only instead of footnotes,[^22] as footnotes are not visible in presentation mode.
+- Training slides use inline links only instead of footnotes,[^23] as footnotes are not visible in presentation mode.
 
 ## What's next
 - [Voice and tone](voice-and-tone.qmd)
@@ -486,8 +556,10 @@ The ValidMind Academy is delivered in Revealjs presentation format,[^20] with a
 
 [^19]: [Code samples](/developer/samples-jupyter-notebooks.qmd)
 
-[^20]: **Quarto:** [Revealjs](https://quarto.org/docs/presentations/revealjs/)
+[^20]: [Welcome to ValidMind Training](/training/training.qmd)
+
+[^21]: **Quarto:** [Revealjs](https://quarto.org/docs/presentations/revealjs/)
 
-[^21]: **GitHub:** [Tachyons Extension For Quarto](https://github.com/nareal/tachyons)
+[^22]: **GitHub:** [Tachyons Extension For Quarto](https://github.com/nareal/tachyons)
 
-[^22]: [Inline links](#inline-links)
+[^23]: [Inline links](#inline-links)

site/guide/model-documentation/_add-content-block.qmd

@@ -1,6 +1,6 @@
 1. In the left sidebar, click **Model Inventory**.
 
-1. Select a model by clicking on it or find your model by applying a filter or searching for it.^[[Working with the model inventory](/guide/model-inventory/working-with-model-inventory.qmd#search-filter-and-sort-models)]
+1. Select a model or find your model by applying a filter or searching for it.^[[Working with the model inventory](/guide/model-inventory/working-with-model-inventory.qmd#search-filter-and-sort-models)]
 
 1. In the left sidebar that appears for your model, click **Documentation**, **Validation Report**, or **Ongoing Monitoring**.
 

site/guide/model-documentation/_review-model-documentation.qmd

@@ -3,7 +3,7 @@ To locate your document overview for a model:
 :::: {.content-visible unless-format="revealjs"}
 1. In the left sidebar, click **Model Inventory**.
 
-1. Select a model by clicking on it or find your model by applying a filter or searching for it.^[[Working with the model inventory](/guide/model-inventory/working-with-model-inventory.qmd#search-filter-and-sort-models)]
+1. Select a model or find your model by applying a filter or searching for it.^[[Working with the model inventory](/guide/model-inventory/working-with-model-inventory.qmd#search-filter-and-sort-models)]
 
 1. In the left sidebar that appears for your model, click **Documentation**. 
 
@@ -12,7 +12,7 @@ To locate your document overview for a model:
 :::: {.content-hidden unless-format="revealjs"}
 1. In the left sidebar, click **Model Inventory**.
 
-1. Select a model by clicking on it or [find your model by applying a filter or searching for it](/guide/model-inventory/working-with-model-inventory.qmd#search-filter-and-sort-models).
+1. Select a model or [find your model by applying a filter or searching for it](/guide/model-inventory/working-with-model-inventory.qmd#search-filter-and-sort-models).
 
 1. In the left sidebar that appears for your model, click **Documentation**. 
 

site/guide/model-documentation/assign-documentation-section-statuses.qmd

@@ -21,7 +21,7 @@ Assign a completion status to individual sections of your model documentation th
 
 1. In the left sidebar, click **Model Inventory**.
 
-2. Select a model by clicking on it or find your model by applying a filter or searching for it.[^3]
+2. Select a model or find your model by applying a filter or searching for it.[^3]
 
 3. In the left sidebar that appears for your model, click **Documentation**.
 

site/guide/model-documentation/export-documentation.qmd

@@ -26,7 +26,7 @@ ValidMind supports Word 365, Word 2019, Word 2016, and Word 2013.
 
 1. In the left sidebar, click **Model Inventory**.
 
-2. Select a model by clicking on it or find your model by applying a filter or searching for it.[^4]
+2. Select a model or find your model by applying a filter or searching for it.[^4]
 
 3. In the left sidebar that appears for your model, click **Documentation**.
 
@@ -44,7 +44,7 @@ ValidMind supports Word 365, Word 2019, Word 2016, and Word 2013.
 
 1. In the left sidebar, click **Model Inventory**.
 
-2. Select a model by clicking on it or find your model by applying a filter or searching for it.[^5]
+2. Select a model or find your model by applying a filter or searching for it.[^5]
 
 <!--- NR Mar 2024 this option does not yet exist --->
 3. In the left sidebar that appears for your model, click **Validation Report**.

site/guide/model-documentation/swap-documentation-templates.qmd

@@ -23,7 +23,7 @@ Swap between different versions of your model documentation or validation report
 
 1. In the left sidebar, click **Model Inventory**.
 
-2. Select a model by clicking on it or find your model by applying a filter or searching for it.[^2]
+2. Select a model or find your model by applying a filter or searching for it.[^2]
 
 3. In the left sidebar that appears for your model, click **Documentation**, **Validation Report**, or **Ongoing Monitoring**.
 
@@ -37,7 +37,7 @@ Swap between different versions of your model documentation or validation report
 
 1. In the left sidebar, click **Model Inventory**.
 
-2. Select a model by clicking on it or find your model by applying a filter or searching for it.[^6]
+2. Select a model or find your model by applying a filter or searching for it.[^6]
 
 3. In the left sidebar that appears for your model, click **Documentation**, **Validation Report**, or **Ongoing Monitoring**.
 

site/guide/model-documentation/view-documentation-guidelines.qmd

@@ -28,7 +28,7 @@ By default, the `Customer Admin` role has these permissions.
 
 1. In the left sidebar, click **Model Inventory**.
 
-2. Select a model by clicking on it or find your model by applying a filter or searching for it.[^5]
+2. Select a model or find your model by applying a filter or searching for it.[^5]
 
 3. In the left sidebar that appears for your model, click **Documentation**.
 

site/guide/model-documentation/work-with-content-blocks.qmd

@@ -102,7 +102,7 @@ When generating content drafts with AI, accepted versions and edits are retained
 
 1. In the left sidebar, click **Model Inventory**.
 
-2. Select a model by clicking on it or find your model by applying a filter or searching for it.[^10]
+2. Select a model or find your model by applying a filter or searching for it.[^10]
 
 3. In the left sidebar that appears for your model, click **Documentation**, **Validation Report**, or **Ongoing Monitoring**.