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

2
config/_default/menus.yaml
View File

@@ -22,6 +22,6 @@ main:
- name: Projects - name: Projects
url: projects/ url: projects/
weight: 30 weight: 30
- name: Teaching - name: Courses
url: courses/ url: courses/
weight: 40 weight: 40

2
content/_index.md
View File

@@ -118,6 +118,6 @@ sections:
design: design:
card: card:
# Card background color (CSS class) # Card background color (CSS class)
css_class: 'bg-primary-700' css_class: 'bg-primary-300'
css_style: '' css_style: ''
--- ---

17
content/blog/second-brain/index.md
View File

@@ -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. 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 ```markdown
{{%/* callout note */%}} > [!NOTE]
A Markdown aside is useful for displaying notices, hints, or definitions to your readers. > A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
{{%/* /callout */%}}
``` ```
renders as renders as
{{% callout note %}} > [!NOTE]
A Markdown aside is useful for displaying notices, hints, or definitions to your readers. > A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
{{% /callout %}}
Or use the `warning` callout type so your readers don't miss critical details: Or use the `warning` callout type so your readers don't miss critical details:
{{% callout warning %}} > [!WARNING]
A Markdown aside is useful for displaying notices, hints, or definitions to your readers. > A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
{{% /callout %}}
## Did you find this page helpful? Consider sharing it 🙌 ## Did you find this page helpful? Consider sharing it 🙌

15
content/courses/_index.md
View File

@@ -4,8 +4,9 @@ summary: My courses
type: landing type: landing
cascade: cascade:
- _target: - target:
kind: page path: '{/courses/*/**}'
type: docs
params: params:
show_breadcrumb: true show_breadcrumb: true
@@ -15,9 +16,13 @@ sections:
content: content:
title: Courses title: Courses
filters: filters:
folders: tag: Course
- courses kinds:
- section
design: design:
view: article-grid view: article-grid
columns: 2 show_read_time: false
show_date: false
show_read_more: false
columns: 1
--- ---

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

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

0
content/courses/js/featured.jpg → content/courses/hugo-blox/featured.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 170 KiB

After

Width:  |  Height:  |  Size: 170 KiB

38
content/courses/hugo-blox/getting-started.md Normal file
View File

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

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

0
content/courses/js/ambient-piano.mp3 → content/courses/hugo-blox/guide/formatting/ambient-piano.mp3
View File

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 |

20
content/courses/js/index.md → content/courses/hugo-blox/guide/formatting/media.md
View File

@@ -1,18 +1,7 @@
--- ---
title: Learn JavaScript title: Embed Media
summary: Easily learn JavaScript in 10 minutes! summary: Easily embed audio and video media in Hugo sites
date: 2023-10-24 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. [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. To render _inline_ or _block_ math, wrap your LaTeX math with `{{</* math */>}}$...${{</* /math */>}}` or `{{</* math */>}}$$...$${{</* /math */>}}`, respectively.
{{% callout note %}} > [!NOTE]
We wrap the LaTeX math in the Hugo Blox _math_ shortcode to prevent Hugo rendering our math as Markdown. > 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!
{{% /callout %}}
Example **math block**: Example **math block**:

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

7
content/courses/hugo-blox/reference/_index.md Normal file
View File

@@ -0,0 +1,7 @@
---
linkTitle: Reference
title: Reference
---
This section covers reference docs.

7
content/courses/hugo-blox/reference/customization.md Normal file
View File

@@ -0,0 +1,7 @@
---
title: Customizing Hugo
linkTitle: Customization
weight: 1
---
View the full docs at https://docs.hugoblox.com/getting-started/customize/

9
content/courses/hugo-blox/reference/i18n.md Normal file
View File

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

BIN
content/courses/python/ambient-piano.mp3
View File

Binary file not shown.

BIN
content/courses/python/featured.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 170 KiB

238
content/courses/python/index.md
View File

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

5
content/events/example/index.md
View File

@@ -60,9 +60,8 @@ projects:
- example - example
--- ---
{{% callout note %}} > [!NOTE]
Click on the **Slides** button above to view the built-in slides feature. > Click on the **Slides** button above to view the built-in slides feature.
{{% /callout %}}
Slides can be added in a few ways: Slides can be added in a few ways:

10
content/publications/conference-paper/index.md
View File

@@ -81,12 +81,10 @@ projects:
slides: "" slides: ""
--- ---
{{% callout note %}} > [!NOTE]
Click the _Cite_ button above to demo the feature to enable visitors to import publication metadata into their reference management software. > Click the _Cite_ button above to demo the feature to enable visitors to import publication metadata into their reference management software.
{{% /callout %}}
{{% callout note %}} > [!NOTE]
Create your slides in Markdown - click the _Slides_ button to check out the example. > Create your slides in Markdown - click the _Slides_ button to check out the example.
{{% /callout %}}
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/). 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/).

10
content/publications/journal-article/index.md
View File

@@ -73,12 +73,10 @@ projects: []
slides: "" slides: ""
--- ---
{{% callout note %}} > [!NOTE]
Click the *Cite* button above to demo the feature to enable visitors to import publication metadata into their reference management software. > Click the *Cite* button above to demo the feature to enable visitors to import publication metadata into their reference management software.
{{% /callout %}}
{{% callout note %}} > [!NOTE]
Create your slides in Markdown - click the *Slides* button to check out the example. > Create your slides in Markdown - click the *Slides* button to check out the example.
{{% /callout %}}
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/). 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/).

5
content/publications/preprint/index.md
View File

@@ -75,8 +75,7 @@ slides: ""
This work is driven by the results in my [previous paper](/publications/conference-paper/) on LLMs. This work is driven by the results in my [previous paper](/publications/conference-paper/) on LLMs.
{{% callout note %}} > [!NOTE]
Create your slides in Markdown - click the *Slides* button to check out the example. > Create your slides in Markdown - click the *Slides* button to check out the example.
{{% /callout %}}
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/). 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/).

4
go.mod
View File

@@ -3,6 +3,6 @@ module github.com/HugoBlox/hugo-blox-builder/starters/academic-cv
go 1.19 go 1.19
require ( require (
github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-netlify v1.1.2 github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-netlify v0.0.0-20231109145828-d9695efa098f
github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind v0.8.0 github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind v0.0.0-20250925005832-787ac94b5dda
) )