chore(starters): update modules to latest commits

2025-09-25 01:02:01 +00:00
parent c9ab2cdc10
commit 6d7d754af1
29 changed files with 789 additions and 291 deletions
--- a/content/_index.md
+++ b/content/_index.md
@@ -118,6 +118,6 @@ sections:
    design:
      card:
        # Card background color (CSS class)
-        css_class: 'bg-primary-700'
+        css_class: 'bg-primary-300'
        css_style: ''
 ---
--- a/content/blog/second-brain/index.md
+++ b/content/blog/second-brain/index.md
@@ -115,24 +115,21 @@ renders as

 Use [callouts](https://docs.hugoblox.com/reference/markdown/#callouts) (aka _asides_, _hints_, or _alerts_) to draw attention to notes, tips, and warnings.

-By wrapping a paragraph in `{{%/* callout note */%}} ... {{%/* /callout */%}}`, it will render as an aside.
+Use the `> [!NOTE]` syntax to create a callout.

 ```markdown
-{{%/* callout note */%}}
-A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
-{{%/* /callout */%}}
+> [!NOTE]
+> A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
 ```

 renders as

-{{% callout note %}}
-A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
-{{% /callout %}}
+> [!NOTE]
+> A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

 Or use the `warning` callout type so your readers don't miss critical details:

-{{% callout warning %}}
-A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
-{{% /callout %}}
+> [!WARNING]
+> A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

 ## Did you find this page helpful? Consider sharing it 🙌
--- a/content/courses/_index.md
+++ b/content/courses/_index.md
@@ -4,8 +4,9 @@ summary: My courses
 type: landing

 cascade:
-  - _target:
-      kind: page
+  - target:
+      path: '{/courses/*/**}'
+    type: docs
    params:
      show_breadcrumb: true

@@ -15,9 +16,13 @@ sections:
    content:
      title: Courses
      filters:
-        folders:
-          - courses
+        tag: Course
+        kinds:
+          - section
    design:
      view: article-grid
-      columns: 2
+      show_read_time: false
+      show_date: false
+      show_read_more: false
+      columns: 1
 ---
--- a/content/courses/hugo-blox/_index.md
+++ b/content/courses/hugo-blox/_index.md
@@ -0,0 +1,28 @@
+---
+linkTitle: Hugo Blox
+title: Learn Hugo Blox in 10 minutes!
+date: 2025-09-24
+type: docs
+
+tags:
+  - Hugo Blox
+  - Course
+
+content_meta:
+  content_type: 'Course'
+  difficulty: 'Beginner'
+  prerequisites: ['Markdown']
+  trending: false
+---
+
+👋 Welcome to your shiny new site. Ready to learn more?
+
+<!--more-->
+
+This course provides a brief introduction to creating and editing your site with Hugo Blox. For full documentation, refer to the [Hugo Blox Documentation](https://docs.hugoblox.com/).
+
+## Next
+
+{{< cards >}}
+  {{< card url="getting-started" title="Get Started" icon="document-text" subtitle="Setup your new site in just 5 minutes!" >}}
+{{< /cards >}}
--- a/content/courses/hugo-blox/featured.jpg
+++ b/content/courses/hugo-blox/featured.jpg
--- a/content/courses/hugo-blox/getting-started.md
+++ b/content/courses/hugo-blox/getting-started.md
@@ -0,0 +1,38 @@
+---
+title: Getting Started
+date: 2024-02-17
+weight: 1
+type: docs
+---
+
+## Quick Start from Template
+
+{{% steps %}}
+
+### Create a site
+
+[Click to choose your starting template](https://hugoblox.com/templates)
+
+### Configure your new site
+
+[Configure your site name, description, and menu.](https://docs.hugoblox.com/tutorial/blog/)
+
+### Add your content
+
+[Edit the homepage and add your documentation pages.](https://docs.hugoblox.com/tutorial/blog/)
+
+### Publish your site
+
+Your site will automatically publish ~1-5 minutes after you commit (save) changes to files in your GitHub repository.
+
+{{% /steps %}}
+
+## Next
+
+Let's customize your new site:
+
+{{< cards >}}
+  {{< card url="../guide/project-structure" title="Project Structure" icon="document-duplicate" >}}
+  {{< card url="../guide/configuration" title="Configuration" icon="adjustments-vertical" >}}
+  {{< card url="../guide/formatting" title="Create content" icon="document-duplicate" >}}
+{{< /cards >}}
--- a/content/courses/hugo-blox/guide/_index.md
+++ b/content/courses/hugo-blox/guide/_index.md
@@ -0,0 +1,12 @@
+---
+title: Guide
+weight: 2
+sidebar:
+  open: true
+---
+
+{{< cards >}}
+  {{< card url="formatting" title="Formatting" icon="document-duplicate" >}}
+  {{< card url="project-structure" title="Project Structure" icon="document-duplicate" >}}
+  {{< card url="configuration" title="Configuration" icon="adjustments-vertical" >}}
+{{< /cards >}}
--- a/content/courses/hugo-blox/guide/configuration.md
+++ b/content/courses/hugo-blox/guide/configuration.md
@@ -0,0 +1,54 @@
+---
+title: Configuration
+weight: 2
+---
+
+The configuration of your site can be found in `config/_default/`.
+
+<!--more-->
+
+## Full Documentation
+
+See https://docs.hugoblox.com/getting-started/customize/
+
+## Navigation
+
+### Menu
+
+See https://docs.hugoblox.com/getting-started/customize/#menu-items
+
+## Left Sidebar
+
+Links are automatically generated from the structure of your content directory. Simply add a folder to nest a page.
+
+### Extra Links
+
+Additional links can be added under the `sidebar` section of your `config/_default/menus.yaml`:
+
+```yaml
+menu:
+  sidebar:
+    - name: "Need help?"
+      params:
+        type: separator
+      weight: 1
+    - name: "A page"
+      pageRef: "/page-filename-here"
+      weight: 2
+    - name: "An external link ↗"
+      url: "https://hugoblox.com"
+      weight: 3
+```
+
+## Right Sidebar
+
+A table of contents is automatically generated from the headings your Markdown file.
+
+It can optionally be disabled by setting `toc: false` in the front matter of a page:
+
+```yaml
+---
+title: My Page
+toc: false
+---
+```
--- a/content/courses/hugo-blox/guide/formatting/_index.md
+++ b/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 >}}
--- a/content/courses/hugo-blox/guide/formatting/ambient-piano.mp3
+++ b/content/courses/hugo-blox/guide/formatting/ambient-piano.mp3
--- a/content/courses/hugo-blox/guide/formatting/button.md
+++ b/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
--- a/content/courses/hugo-blox/guide/formatting/callout.md
+++ b/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)
--- a/content/courses/hugo-blox/guide/formatting/cards.md
+++ b/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                                                                    |
--- a/content/courses/hugo-blox/guide/formatting/media.md
+++ b/content/courses/hugo-blox/guide/formatting/media.md
@@ -1,18 +1,7 @@
 ---
-title: Learn JavaScript
-summary: Easily learn JavaScript in 10 minutes!
+title: Embed Media
+summary: Easily embed audio and video media in Hugo sites
 date: 2023-10-24
-type: docs
-math: false
-tags:
-  - JavaScript
-image:
-  caption: 'Embed rich media such as videos and LaTeX math'
-content_meta:
-  content_type: 'Tutorial'
-  difficulty: 'Beginner'
-  prerequisites: ['HTML']
-  trending: true
 ---

 [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.
@@ -71,9 +60,8 @@ Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. You can enabl

 To render _inline_ or _block_ math, wrap your LaTeX math with `{{</* math */>}}$...${{</* /math */>}}` or `{{</* math */>}}$$...$${{</* /math */>}}`, respectively.

-{{% callout note %}}
-We wrap the LaTeX math in the Hugo Blox _math_ shortcode to prevent Hugo rendering our math as Markdown.
-{{% /callout %}}
+> [!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**:

--- a/content/courses/hugo-blox/guide/formatting/steps.md
+++ b/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 */%}}
+```
--- a/content/courses/hugo-blox/guide/formatting/toggle.md
+++ b/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 */>}}
+````
--- a/content/courses/hugo-blox/guide/project-structure.md
+++ b/content/courses/hugo-blox/guide/project-structure.md
@@ -0,0 +1,59 @@
+---
+title: Project Structure
+weight: 1
+---
+
+## Folder Structure
+
+There are **4 main folders for Hugo-based sites**:
+
+- `content/` for your Markdown-formatted content files (homepage, etc.)
+  - `_index.md` the homepage (**Hugo requires that the homepage and archive pages have an underscore prefix**)
+- `assets/`
+  - `media/` for your media files (images, videos)
+    - `icons/custom/` upload any custom SVG icons you want to use
+- `config/_default/` for your site configuration files
+  - `hugo.yaml` to configure Hugo (site title, URL, Hugo options, setup per-folder page features)
+  - `module.yaml` to install or uninstall Hugo themes and plugins
+  - `params.yaml` to configure Hugo Blox options (SEO, analytics, site features)
+  - `menus.yaml` to configure your menu links (if the menu is enabled in `params.yaml`)
+  - `languages.yaml` to configure your site's language or to set language-specific options in a multilingual site
+- `static/uploads/` for any files you want visitors to download, such as a PDF
+- `go.mod` sets the version of Hugo themes/plugins which your site uses
+
+
+## Hugo File Naming Convention
+
+Hugo gives us two options to name standard page files: as `TITLE/index.md` or `TITLE.md` where `TITLE` is your page name.
+
+The page name should be lowercase and using hyphens (`-`) instead of spaces.
+
+Both approaches result in the same output, so you can choose your preferred approach to naming and organizing files. A benefit to the folder-based approach is that all your page's files (such as images) are self-contained within the page's folder, so it's more portable if you wish to share the original Markdown page with someone.
+
+The homepage is a special case as **Hugo requires the homepage and listing pages to be named** `_index.md`.
+
+## Docs Navigation
+
+The docs navigation is automatically generated based on the content in the `docs/` folder and is sorted alphabetically.
+
+The order of pages can be changed by adding the `weight` parameter in the front matter of your Markdown files.
+
+In the example below, the `example.md` page will appear before the `test.md` page as it has a lower `weight`:
+
+Page `example.md`:
+
+```yaml
+---
+title: My Example
+weight: 1
+---
+```
+
+Page `test.md`:
+
+```yaml
+---
+title: My Test
+weight: 2
+---
+```
--- a/content/courses/hugo-blox/reference/_index.md
+++ b/content/courses/hugo-blox/reference/_index.md
@@ -0,0 +1,7 @@
+---
+linkTitle: Reference
+title: Reference
+---
+
+This section covers reference docs.
+
--- a/content/courses/hugo-blox/reference/customization.md
+++ b/content/courses/hugo-blox/reference/customization.md
@@ -0,0 +1,7 @@
+---
+title: Customizing Hugo
+linkTitle: Customization
+weight: 1
+---
+
+View the full docs at https://docs.hugoblox.com/getting-started/customize/
--- a/content/courses/hugo-blox/reference/i18n.md
+++ b/content/courses/hugo-blox/reference/i18n.md
@@ -0,0 +1,9 @@
+---
+title: Internationalization (i18n)
+---
+
+Hugo Blox enables you to easily edit the interface text as well as translating your site into multiple languages using Hugo's [multilingual](https://gohugo.io/content-management/multilingual/) feature.
+
+<!--more-->
+
+View the full docs at https://docs.hugoblox.com/reference/language/
--- a/content/courses/python/ambient-piano.mp3
+++ b/content/courses/python/ambient-piano.mp3
--- a/content/courses/python/featured.jpg
+++ b/content/courses/python/featured.jpg
--- a/content/courses/python/index.md
+++ b/content/courses/python/index.md
@@ -1,238 +0,0 @@
---
-title: Learn Python
-summary: Easily learn Python in 10 minutes!
-date: 2023-10-24
-type: docs
-math: false
-tags:
-  - Python
-image:
-  caption: 'Embed rich media such as videos and LaTeX math'
-content_meta:
-  content_type: 'Course'
-  difficulty: 'Intermediate'
-  prerequisites: ['SQL']
-  trending: false
---
-
-[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
-
-## Callouts & Alerts
-
-Hugo Blox Builder now supports GitHub and Obsidian-style Markdown alerts for better content portability! These replace the old `callout` shortcode.
-
-### Basic Callout Types
-
-**Note** - For general information:
-
-```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.
-
-**Tip** - For helpful advice:
-
-```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!
-
-**Important** - For critical information:
-
-```markdown  
-> [!IMPORTANT]
-> This is critical information that users must understand to proceed.
-```
-
-> [!IMPORTANT]
-> This is critical information that users must understand to proceed.
-
-**Warning** - For potential issues:
-
-```markdown
-> [!WARNING]
-> Be careful! This action might have unexpected consequences.
-```
-
-> [!WARNING]
-> Be careful! This action might have unexpected consequences.
-
-**Caution** - For dangerous actions:
-
-```markdown
-> [!CAUTION]  
-> Danger! This operation is irreversible and could cause data loss.
-```
-
-> [!CAUTION]
-> Danger! This operation is irreversible and could cause data loss.
-
-### 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 */>}}
-```
-
-{{% callout note %}}
-This still works but is deprecated. Use the Markdown syntax above!
-{{% /callout %}}
-
-### Benefits of the New Syntax
-
- **Portable**: Works with GitHub, Obsidian, and other Markdown processors
- **Standard**: Uses widely-adopted Markdown alert syntax
- **Clean**: No Hugo-specific shortcodes needed
- **Future-proof**: Supported by the latest Hugo versions (0.132.0+)
- **Multilingual**: Callout titles are automatically translated based on your site's language
-  - English: "Note", "Tip", "Important", "Warning", "Caution"
-  - Spanish: "Nota", "Consejo", "Importante", "Advertencia", "Precaución"
-  - French: "Note", "Conseil", "Important", "Attention", "Prudence"
-  - German: "Hinweis", "Tipp", "Wichtig", "Warnung", "Vorsicht"
-  - Chinese: "注意", "提示", "重要", "警告", "小心"
-
-## Did you find this page helpful? Consider sharing it 🙌
--- a/content/events/example/index.md
+++ b/content/events/example/index.md
@@ -60,9 +60,8 @@ projects:
  - example
 ---

-{{% callout note %}}
-Click on the **Slides** button above to view the built-in slides feature.
-{{% /callout %}}
+> [!NOTE]
+> Click on the **Slides** button above to view the built-in slides feature.

 Slides can be added in a few ways:

--- a/content/publications/conference-paper/index.md
+++ b/content/publications/conference-paper/index.md
@@ -81,12 +81,10 @@ projects:
 slides: ""
 ---

-{{% callout note %}}
-Click the _Cite_ button above to demo the feature to enable visitors to import publication metadata into their reference management software.
-{{% /callout %}}
+> [!NOTE]
+> Click the _Cite_ button above to demo the feature to enable visitors to import publication metadata into their reference management software.

-{{% callout note %}}
-Create your slides in Markdown - click the _Slides_ button to check out the example.
-{{% /callout %}}
+> [!NOTE]
+> Create your slides in Markdown - click the _Slides_ button to check out the example.

 Add the publication's **full text** or **supplementary notes** here. You can use rich formatting such as including [code, math, and images](https://docs.hugoblox.com/content/writing-markdown-latex/).
--- a/content/publications/journal-article/index.md
+++ b/content/publications/journal-article/index.md
@@ -73,12 +73,10 @@ projects: []
 slides: ""
 ---

-{{% callout note %}}
-Click the *Cite* button above to demo the feature to enable visitors to import publication metadata into their reference management software.
-{{% /callout %}}
+> [!NOTE]
+> Click the *Cite* button above to demo the feature to enable visitors to import publication metadata into their reference management software.

-{{% callout note %}}
-Create your slides in Markdown - click the *Slides* button to check out the example.
-{{% /callout %}}
+> [!NOTE]
+> Create your slides in Markdown - click the *Slides* button to check out the example.

 Add the publication's **full text** or **supplementary notes** here. You can use rich formatting such as including [code, math, and images](https://docs.hugoblox.com/content/writing-markdown-latex/).
--- a/content/publications/preprint/index.md
+++ b/content/publications/preprint/index.md
@@ -75,8 +75,7 @@ slides: ""

 This work is driven by the results in my [previous paper](/publications/conference-paper/) on LLMs.

-{{% callout note %}}
-Create your slides in Markdown - click the *Slides* button to check out the example.
-{{% /callout %}}
+> [!NOTE]
+> Create your slides in Markdown - click the *Slides* button to check out the example.

 Add the publication's **full text** or **supplementary notes** here. You can use rich formatting such as including [code, math, and images](https://docs.hugoblox.com/content/writing-markdown-latex/).