chore(starters): update modules to latest commits

content/courses/hugo-blox/guide/formatting/_index.md

@@ -0,0 +1,13 @@
+---
+title: Formatting
+---
+
+Write rich, engaging content with Markdown and re-usable Hugo Blox components (shortcodes):
+
+{{< cards >}}
+  {{< card url="button" title="Button" icon="cursor-arrow-rays" >}}
+  {{< card url="callout" title="Callout" icon="warning" >}}
+  {{< card url="cards" title="Cards" icon="card" >}}
+  {{< card url="toggle" title="Spoiler" icon="chevron-right" >}}
+  {{< card url="steps" title="Steps" icon="one" >}}
+{{< /cards >}}

content/courses/hugo-blox/guide/formatting/button.md

@@ -0,0 +1,202 @@
+---
+title: Buttons
+linkTitle: Buttons
+---
+
+A modern, customizable button shortcode with gradient styling, icons, and smart link handling.
+
+<!--more-->
+
+## Basic Usage
+
+{{< button url="/contact" >}}Contact Us{{< /button >}}
+
+{{< button url="https://example.com" new_tab="true" style="secondary" >}}Visit External Site{{< /button >}}
+
+The above buttons are created with:
+
+```go-html-template
+{{</* button url="/contact" */>}}Contact Us{{</* /button */>}}
+
+{{</* button url="https://example.com" new_tab="true" style="secondary" */>}}Visit External Site{{</* /button */>}}
+```
+
+## Style Variants
+
+### Primary (Default)
+
+{{< button url="#" style="primary" >}}Primary Button{{< /button >}}
+
+```go-html-template
+{{</* button url="#" style="primary" */>}}Primary Button{{</* /button */>}}
+```
+
+### Secondary
+
+{{< button url="#" style="secondary" >}}Secondary Button{{< /button >}}
+
+```go-html-template
+{{</* button url="#" style="secondary" */>}}Secondary Button{{</* /button */>}}
+```
+
+### Outline
+
+{{< button url="#" style="outline" >}}Outline Button{{< /button >}}
+
+```go-html-template
+{{</* button url="#" style="outline" */>}}Outline Button{{</* /button */>}}
+```
+
+### Ghost
+
+{{< button url="#" style="ghost" >}}Ghost Button{{< /button >}}
+
+```go-html-template
+{{</* button url="#" style="ghost" */>}}Ghost Button{{</* /button */>}}
+```
+
+## Sizes
+
+### Small
+
+{{< button url="#" size="sm" >}}Small Button{{< /button >}}
+
+### Medium (Default)
+
+{{< button url="#" size="md" >}}Medium Button{{< /button >}}
+
+### Large
+
+{{< button url="#" size="lg" >}}Large Button{{< /button >}}
+
+### Extra Large
+
+{{< button url="#" size="xl" >}}Extra Large{{< /button >}}
+
+```go-html-template
+{{</* button url="#" size="sm" */>}}Small Button{{</* /button */>}}
+{{</* button url="#" size="md" */>}}Medium Button{{</* /button */>}}
+{{</* button url="#" size="lg" */>}}Large Button{{</* /button */>}}
+{{</* button url="#" size="xl" */>}}Extra Large{{</* /button */>}}
+```
+
+## Alignment
+
+### Left (Default)
+
+{{< button url="#" align="left" >}}Left Aligned{{< /button >}}
+
+### Center
+
+{{< button url="#" align="center" >}}Center Aligned{{< /button >}}
+
+### Right
+
+{{< button url="#" align="right" >}}Right Aligned{{< /button >}}
+
+```go-html-template
+{{</* button url="#" align="left" */>}}Left Aligned{{</* /button */>}}
+{{</* button url="#" align="center" */>}}Center Aligned{{</* /button */>}}
+{{</* button url="#" align="right" */>}}Right Aligned{{</* /button */>}}
+```
+
+## With Icons
+
+### Icon Before Text
+
+{{< button url="#" icon="arrow-down-tray" >}}Download{{< /button >}}
+
+### Icon After Text
+
+{{< button url="#" icon="arrow-right" icon_position="right" >}}Continue{{< /button >}}
+
+```go-html-template
+{{</* button url="#" icon="arrow-down-tray" */>}}Download{{</* /button */>}}
+{{</* button url="#" icon="arrow-right" icon_position="right" */>}}Continue{{</* /button */>}}
+```
+
+## Rounded Corners
+
+### Small Radius
+
+{{< button url="#" rounded="sm" >}}Small Radius{{< /button >}}
+
+### Medium Radius (Default)
+
+{{< button url="#" rounded="md" >}}Medium Radius{{< /button >}}
+
+### Large Radius
+
+{{< button url="#" rounded="lg" >}}Large Radius{{< /button >}}
+
+### Pill Shape
+
+{{< button url="#" rounded="full" >}}Pill Button{{< /button >}}
+
+```go-html-template
+{{</* button url="#" rounded="sm" */>}}Small Radius{{</* /button */>}}
+{{</* button url="#" rounded="md" */>}}Medium Radius{{</* /button */>}}
+{{</* button url="#" rounded="lg" */>}}Large Radius{{</* /button */>}}
+{{</* button url="#" rounded="full" */>}}Pill Button{{</* /button */>}}
+```
+
+## Advanced Examples
+
+### Call-to-Action Button
+
+{{< button url="/signup" style="primary" size="lg" align="center" icon="rocket-launch" >}}Get Started Today{{< /button >}}
+
+```go-html-template
+{{</* button url="/signup" style="primary" size="lg" align="center" icon="rocket-launch" */>}}Get Started Today{{</* /button */>}}
+```
+
+### External Link with New Tab
+
+{{< button url="https://github.com/hugo-blox/hugo-blox-builder" new_tab="true" style="outline" icon="arrow-top-right-on-square" icon_position="right" >}}View on GitHub{{< /button >}}
+
+```go-html-template
+{{</* button url="https://github.com/hugo-blox/hugo-blox-builder" new_tab="true" style="outline" icon="arrow-top-right-on-square" icon_position="right" */>}}View on GitHub{{</* /button */>}}
+```
+
+### Download Button
+
+{{< button url="/files/document.pdf" style="secondary" icon="document-arrow-down" rounded="full" >}}Download PDF{{< /button >}}
+
+```go-html-template
+{{</* button url="/files/document.pdf" style="secondary" icon="document-arrow-down" rounded="full" */>}}Download PDF{{</* /button */>}}
+```
+
+## Parameters
+
+| Parameter       | Type    | Default       | Description                                                 |
+| --------------- | ------- | ------------- | ----------------------------------------------------------- |
+| `url`           | string  | `#`           | **Required.** Button destination URL (internal or external) |
+| `text`          | string  | Inner content | Button text (overrides shortcode content)                   |
+| `new_tab`       | boolean | `false`       | Whether to open link in new tab                             |
+| `style`         | string  | `primary`     | Button style: `primary`, `secondary`, `outline`, `ghost`    |
+| `size`          | string  | `md`          | Button size: `sm`, `md`, `lg`, `xl`                         |
+| `align`         | string  | `left`        | Button alignment: `left`, `center`, `right`                 |
+| `icon`          | string  | -             | Icon name from [Hero Icons](https://heroicons.com/)         |
+| `icon_position` | string  | `left`        | Icon position: `left`, `right`                              |
+| `rounded`       | string  | `md`          | Border radius: `sm`, `md`, `lg`, `xl`, `full`               |
+| `disabled`      | boolean | `false`       | Whether button should be disabled                           |
+
+## Security Features
+
+The button shortcode automatically handles security for external links:
+
+- **External links** get `rel="noreferrer"` attribute
+- **External links opening in new tab** get `rel="noopener noreferrer"`
+- **Internal links opening in new tab** get `rel="noopener"`
+
+This ensures safe navigation while maintaining functionality.
+
+## Accessibility
+
+The button shortcode includes built-in accessibility features:
+
+- Proper `role="button"` attribute
+- `aria-label` support
+- Keyboard focus indicators
+- High contrast focus rings
+- Disabled state handling

content/courses/hugo-blox/guide/formatting/callout.md

@@ -0,0 +1,218 @@
+---
+title: Callouts
+linkTitle: Callouts
+---
+
+Hugo Blox supports GitHub and Obsidian-style Markdown callouts for maximum compatibility and content portability.
+
+Callouts are a useful feature to draw attention to important or related content such as notes, hints, or warnings in your articles.
+
+<!--more-->
+
+## Usage
+
+### Basic Callout Types
+
+Hugo Blox supports all 15+ callout types from [Obsidian's documentation](https://help.obsidian.md/callouts):
+
+**Information & Notes:**
+
+```markdown
+> [!NOTE]  
+> This is a note callout with important information that users should know.
+```
+
+> [!NOTE]
+> This is a note callout with important information that users should know.
+
+```markdown
+> [!INFO]
+> Alternative info callout - same styling as NOTE.
+```
+
+> [!INFO]
+> Alternative info callout - same styling as NOTE.
+
+```markdown
+> [!ABSTRACT]
+> Use for abstracts, summaries, or TL;DR sections.
+```
+
+> [!ABSTRACT]
+> Use for abstracts, summaries, or TL;DR sections.
+
+**Actions & Tasks:**
+
+```markdown
+> [!TODO]
+> This is something that needs to be done.
+```
+
+> [!TODO]
+> This is something that needs to be done.
+
+```markdown
+> [!TIP]
+> Here's a helpful tip to make your workflow more efficient!
+```
+
+> [!TIP]
+> Here's a helpful tip to make your workflow more efficient!
+
+```markdown
+> [!SUCCESS]
+> Great job! This operation completed successfully.
+```
+
+> [!SUCCESS]
+> Great job! This operation completed successfully.
+
+**Questions & Interactive:**
+
+```markdown
+> [!QUESTION]
+> What do you think about this approach? Let us know!
+```
+
+> [!QUESTION]
+> What do you think about this approach? Let us know!
+
+```markdown
+> [!EXAMPLE]
+> Here's a practical example of how to implement this feature.
+```
+
+> [!EXAMPLE]
+> Here's a practical example of how to implement this feature.
+
+```markdown
+> [!QUOTE]
+> "The best way to predict the future is to invent it." - Alan Kay
+```
+
+> [!QUOTE]
+> "The best way to predict the future is to invent it." - Alan Kay
+
+**Warnings & Errors:**
+
+```markdown
+> [!WARNING]
+> Be careful! This action might have unexpected consequences.
+```
+
+> [!WARNING]
+> Be careful! This action might have unexpected consequences.
+
+```markdown
+> [!CAUTION]
+> Danger! This operation is irreversible and could cause data loss.
+```
+
+> [!CAUTION]
+> Danger! This operation is irreversible and could cause data loss.
+
+```markdown
+> [!IMPORTANT]
+> This is critical information that users must understand to proceed.
+```
+
+> [!IMPORTANT]
+> This is critical information that users must understand to proceed.
+
+```markdown
+> [!DANGER]
+> This is extremely dangerous - proceed with extreme caution!
+```
+
+> [!DANGER]
+> This is extremely dangerous - proceed with extreme caution!
+
+```markdown
+> [!FAILURE]
+> This operation failed. Check your configuration and try again.
+```
+
+> [!FAILURE]
+> This operation failed. Check your configuration and try again.
+
+```markdown
+> [!BUG]
+> Known issue: This feature doesn't work properly in Safari < 14.
+```
+
+> [!BUG]
+> Known issue: This feature doesn't work properly in Safari < 14.
+
+### Custom Titles
+
+You can customize the title of any callout:
+
+```markdown
+> [!WARNING]+ Custom Warning Title
+> This warning has a custom title instead of just "Warning".
+```
+
+> [!WARNING]+ Custom Warning Title  
+> This warning has a custom title instead of just "Warning".
+
+### Legacy Syntax (Deprecated)
+
+The old shortcode syntax still works but shows a deprecation warning:
+
+```markdown
+{{</* callout note */>}}
+This still works but is deprecated. Use the Markdown syntax above!
+{{</* /callout */>}}
+```
+
+### CSS Customization
+
+Hugo Blox generates callouts with semantic CSS classes and data attributes, making customization easy. Each callout has:
+
+- Base class: `.callout`
+- Type-specific data attribute: `data-callout="note"`
+- Component classes: `.callout-icon`, `.callout-title`, `.callout-content`, `.callout-body`
+
+**Custom CSS Example** (add to your `assets/css/custom.css`):
+
+```css
+/* Customize NOTE callouts */
+.callout[data-callout="note"] {
+  border-left-width: 8px;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+}
+
+/* Make SUCCESS callouts pulse */
+.callout[data-callout="success"] {
+  animation: pulse 2s infinite;
+}
+
+/* Custom icon styling */
+.callout-icon svg {
+  transition: transform 0.2s;
+}
+
+.callout:hover .callout-icon svg {
+  transform: scale(1.1);
+}
+
+/* Dark mode overrides */
+@media (prefers-color-scheme: dark) {
+  .callout[data-callout="warning"] {
+    background-color: rgb(92 25 2);
+    border-color: rgb(245 158 11);
+  }
+}
+```
+
+This approach matches [Obsidian's CSS customization system](https://help.obsidian.md/callouts), ensuring your styles work across platforms.
+
+### Benefits of the New Syntax
+
+- **Portable**: Works with GitHub, Obsidian, and other Markdown editors
+- **Standard**: Uses widely-adopted Markdown callout syntax  
+- **Clean**: No Hugo-specific shortcodes needed
+- **Future-proof**: Supported by the latest Hugo versions (0.132.0+)
+- **Customizable**: Semantic CSS classes and data attributes for easy styling
+- **Complete**: All 15+ Obsidian callout types supported
+- **Multilingual**: Callout titles are automatically translated based on your site's language (and can be customized in the language packs)

content/courses/hugo-blox/guide/formatting/cards.md

@@ -0,0 +1,31 @@
+---
+title: Cards
+linkTitle: Cards
+---
+
+A Hugo extension to create cards. Cards can be shown as links or as plain text.
+
+## Usage
+
+{{< cards >}}
+  {{< card url="../" title="Learn Shortcodes" icon="academic-cap" >}}
+  {{< card url="" title="A card without an icon or link" >}}
+{{< /cards >}}
+
+is rendered by:
+
+```
+{{</* cards */>}}
+  {{</* card url="../callout" title="Callout" icon="academic-cap" */>}}
+  {{</* card url="" title="A card without an icon" */>}}
+{{</* /cards */>}}
+```
+
+## Options
+
+| Parameter  | Description                                                            |
+|------------|------------------------------------------------------------------------|
+| `icon`     | Name of the icon. Defaults to [Hero Icon Pack](https://heroicons.com/) |
+| `title`    | Title heading for the card.                                            |
+| `subtitle` | Subtitle heading (supports Markdown).                                  |
+| `url`      | URL                                                                    |

content/courses/hugo-blox/guide/formatting/media.md

@@ -0,0 +1,132 @@
+---
+title: Embed Media
+summary: Easily embed audio and video media in Hugo sites
+date: 2023-10-24
+---
+
+[Hugo Blox Builder](https://hugoblox.com) is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest.
+
+**Embed videos, podcasts, code, LaTeX math, and even test students!**
+
+On this page, you'll find some examples of the types of technical content that can be rendered with Hugo Blox.
+
+## Video
+
+Teach your course by sharing videos with your students. Choose from one of the following approaches:
+
+{{< youtube D2vj0WcvH5c >}}
+
+**Youtube**:
+
+    {{</* youtube w7Ft2ymGmfc */>}}
+
+**Bilibili**:
+
+    {{</* bilibili id="BV1WV4y1r7DF" */>}}
+
+**Video file**
+
+Videos may be added to a page by either placing them in your `assets/media/` media library or in your [page's folder](https://gohugo.io/content-management/page-bundles/), and then embedding them with the _video_ shortcode:
+
+    {{</* video src="my_video.mp4" controls="yes" */>}}
+
+## Podcast
+
+You can add a podcast or music to a page by placing the MP3 file in the page's folder or the media library folder and then embedding the audio on your page with the _audio_ shortcode:
+
+    {{</* audio src="ambient-piano.mp3" */>}}
+
+Try it out:
+
+{{< audio src="ambient-piano.mp3" >}}
+
+## Test students
+
+Provide a simple yet fun self-assessment by revealing the solutions to challenges with the `spoiler` shortcode:
+
+```markdown
+{{</* spoiler text="👉 Click to view the solution" */>}}
+You found me!
+{{</* /spoiler */>}}
+```
+
+renders as
+
+{{< spoiler text="👉 Click to view the solution" >}} You found me 🎉 {{< /spoiler >}}
+
+## Math
+
+Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the `math` option in your `config/_default/params.yaml` file.
+
+To render _inline_ or _block_ math, wrap your LaTeX math with `{{</* math */>}}$...${{</* /math */>}}` or `{{</* math */>}}$$...$${{</* /math */>}}`, respectively.
+
+> [!NOTE]
+> We wrap the LaTeX math in the Hugo Blox _math_ shortcode to prevent Hugo rendering our math as Markdown. This callout now uses the standard Markdown alert syntax!
+
+Example **math block**:
+
+```latex
+{{</* math */>}}
+$$
+\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}
+$$
+{{</* /math */>}}
+```
+
+renders as
+
+{{< math >}}
+$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$
+{{< /math >}}
+
+Example **inline math** `{{</* math */>}}$\nabla F(\mathbf{x}_{n})${{</* /math */>}}` renders as {{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}}.
+
+Example **multi-line math** using the math linebreak (`\\`):
+
+```latex
+{{</* math */>}}
+$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
+1-p_{0}^{*} & \text{if }k=0.\end{cases}$$
+{{</* /math */>}}
+```
+
+renders as
+
+{{< math >}}
+
+$$
+f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
+1-p_{0}^{*} & \text{if }k=0.\end{cases}
+$$
+
+{{< /math >}}
+
+## Code
+
+Hugo Blox Builder utilises Hugo's Markdown extension for highlighting code syntax. The code theme can be selected in the `config/_default/params.yaml` file.
+
+    ```python
+    import pandas as pd
+    data = pd.read_csv("data.csv")
+    data.head()
+    ```
+
+renders as
+
+```python
+import pandas as pd
+data = pd.read_csv("data.csv")
+data.head()
+```
+
+## Inline Images
+
+```go
+{{</* icon name="python" */>}} Python
+```
+
+renders as
+
+{{< icon name="python" >}} Python
+
+## Did you find this page helpful? Consider sharing it 🙌

content/courses/hugo-blox/guide/formatting/steps.md

@@ -0,0 +1,47 @@
+---
+title: Steps
+linkTitle: Steps
+---
+
+Display a series of steps, such as for a tutorial.
+
+## Example
+
+{{% steps %}}
+
+### Step 1
+
+The first step here...
+
+### Step 2
+
+The second step here...
+
+### Step 3
+
+The third step here...
+
+{{% /steps %}}
+
+
+## Usage
+
+Use the Markdown level-3 headings to represent step titles within the `steps` shortcode:
+
+```
+{{%/* steps */%}}
+
+### Step 1
+
+The first step here...
+
+### Step 2
+
+The second step here...
+
+### Step 3
+
+The third step here...
+
+{{%/* /steps */%}}
+```

content/courses/hugo-blox/guide/formatting/toggle.md

@@ -0,0 +1,27 @@
+---
+title: Spoilers
+---
+
+A Hugo shortcode to toggle collapsible content.
+
+<!--more-->
+
+## Example
+
+{{< spoiler text="Click to view the spoiler" >}}
+You found me!
+
+Markdown is **supported**.
+{{< /spoiler >}}
+
+## Usage
+
+````
+{{</* spoiler text="Click to view the spoiler" */>}}
+
+This is the content of the details.
+
+Markdown is **supported**.
+
+{{</* /spoiler */>}}
+````