evan/portfolio-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(starters): update modules to latest commits

Browse Source
This commit is contained in:
Splitter
2025-09-25 01:02:01 +00:00
parent c9ab2cdc10
commit 6d7d754af1
29 changed files with 789 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
content/courses/hugo-blox/guide/_index.md Normal file
View File

@@ -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 >}}

54
content/courses/hugo-blox/guide/configuration.md Normal file
View File

@@ -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
---
```

13
content/courses/hugo-blox/guide/formatting/_index.md Normal file
View File

@@ -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 >}}

BIN
content/courses/hugo-blox/guide/formatting/ambient-piano.mp3 Normal file
View File

Binary file not shown.

202
content/courses/hugo-blox/guide/formatting/button.md Normal file
View File

@@ -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

218
content/courses/hugo-blox/guide/formatting/callout.md Normal file
View File

@@ -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)

31
content/courses/hugo-blox/guide/formatting/cards.md Normal file
View File

@@ -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 |

132
content/courses/hugo-blox/guide/formatting/media.md Normal file
View File

@@ -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 🙌

47
content/courses/hugo-blox/guide/formatting/steps.md Normal file
View File

@@ -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 */%}}
```

27
content/courses/hugo-blox/guide/formatting/toggle.md Normal file
View File

@@ -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 */>}}
````

59
content/courses/hugo-blox/guide/project-structure.md Normal file
View File

@@ -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
---
```