Pushing to prod PR#493 onward

internal/templates/course.qmd

@@ -0,0 +1,57 @@
+---
+title: "{{ course_title }}"
+subtitle: For {{< var vm.product >}}
+date: last-modified
+filters:
+  - tachyons
+format:
+  html:
+    css: ../assets/training.css
+filters:
+  - tachyons
+  - preview
+---
+
+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-50-ns}
+### Preview
+
+::: {.preview source="course-file.qmd"}
+:::
+
+:::
+
+::::
+
+---
+
+:::
+
+{{< include /training/_training-register.qmd >}}
+
+{{< include /training/_training-support.qmd >}}

internal/templates/fundamentals.qmd

@@ -0,0 +1,83 @@
+---
+title: "Topic<br>Fundamentals"
+subtitle: "docs.validmind.ai/training<br><br>_Click [{{< fa chevron-right >}}](#learning-objectives) to start_"
+search: false
+format:
+  revealjs:
+    controls: true
+    controls-tutorial: true
+    controls-back-arrows: visible
+    transition: slide
+    theme: [default, ../assets/custom.scss]
+    slide-number: true
+    chalkboard: false
+    preview-links: auto
+    view-distance: 2
+    logo: /validmind.png
+    footer: "ValidMind Academy | [Home {{< fa person-walking-dashed-line-arrow-right >}}](/training//training/training.qmd)"
+title-slide-attributes:
+  data-background-color: "#083E44"
+  data-background-image: "../assets/home-hero.svg"
+filters:
+  - tachyons
+---
+
+# Learning objectives
+
+_"Enter objectives here, one, two, and etc."_
+
+## In this course
+
+1. [Link to section]()
+2. [Link to section]()
+3. [Link to section]()
+4. [Link to section]()
+5. [Link to section]()
+
+First, let's make sure you can log in and show you around.
+
+{{< include /training/assets/_revealjs-navigation.qmd >}}
+
+## Can you log in?
+
+To try out this course, you need to have been [onboarded](/training/training.qmd#onboarding) onto ValidMind Academy.
+
+<br>Log in to check your access:
+
+::: {.tc}
+[Log in to ValidMind](https://app.prod.validmind.ai/){.button target="_blank"}
+:::
+
+<div style="text-align: center;">
+  Be sure to return to this page afterwards.
+</div>
+
+## 1
+
+...
+
+## . 
+
+...
+
+## 3
+
+...
+
+## 4 
+
+...
+
+## 5
+
+...
+
+# Topic summary slide
+
+...
+
+::: {.tc}
+[Learn more ...](/about/overview-model-risk-management.qmd){.button target="_blank"}
+:::
+
+Or, find your next learning resource on [ValidMind Academy](/training/training.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"
@@ -314,17 +314,19 @@ website:
         - text: "---"
         - support/troubleshooting.qmd
 
-    - title: "Training"
-      contents:
-        - 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
+# TRAINING SIDEBAR
+    # - title: "[<img src='/validmind.png' style='height:30px;'>](/index.qmd)"
+    #   contents:
+    #     - text: "Training"
+    #       file: training/training.qmd
+    #     - text: "---"
+    #     - text: "FUNDAMENTALS"
+    #     - text: "For Administrators"
+    #       file: training/administrator/administrator-fundamentals-register.qmd
+    #     - text: "For Developers"
+    #       file: training/developer/developer-fundamentals-register.qmd
+    #     - text: "For Validators"
+    #       file: training/validator/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)