diff --git a/config/_default/menus.yaml b/config/_default/menus.yaml index 5c5c959..9ba6eee 100644 --- a/config/_default/menus.yaml +++ b/config/_default/menus.yaml @@ -22,6 +22,6 @@ main: - name: Projects url: projects/ weight: 30 - - name: Teaching + - name: Courses url: courses/ weight: 40 diff --git a/content/_index.md b/content/_index.md index 322ef2a..4356c67 100644 --- 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: '' --- diff --git a/content/blog/second-brain/index.md b/content/blog/second-brain/index.md index a96a877..f174a9f 100644 --- 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 πŸ™Œ diff --git a/content/courses/_index.md b/content/courses/_index.md index 2d5dd43..ac725cc 100644 --- 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 --- diff --git a/content/courses/hugo-blox/_index.md b/content/courses/hugo-blox/_index.md new file mode 100644 index 0000000..881ecd0 --- /dev/null +++ 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? + + + +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 >}} diff --git a/content/courses/js/featured.jpg b/content/courses/hugo-blox/featured.jpg similarity index 100% rename from content/courses/js/featured.jpg rename to content/courses/hugo-blox/featured.jpg diff --git a/content/courses/hugo-blox/getting-started.md b/content/courses/hugo-blox/getting-started.md new file mode 100644 index 0000000..511eb21 --- /dev/null +++ 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 >}} diff --git a/content/courses/hugo-blox/guide/_index.md b/content/courses/hugo-blox/guide/_index.md new file mode 100644 index 0000000..223a44c --- /dev/null +++ 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 >}} diff --git a/content/courses/hugo-blox/guide/configuration.md b/content/courses/hugo-blox/guide/configuration.md new file mode 100644 index 0000000..d66e59c --- /dev/null +++ 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/`. + + + +## 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 +--- +``` diff --git a/content/courses/hugo-blox/guide/formatting/_index.md b/content/courses/hugo-blox/guide/formatting/_index.md new file mode 100644 index 0000000..13db466 --- /dev/null +++ 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 >}} diff --git a/content/courses/js/ambient-piano.mp3 b/content/courses/hugo-blox/guide/formatting/ambient-piano.mp3 similarity index 100% rename from content/courses/js/ambient-piano.mp3 rename to content/courses/hugo-blox/guide/formatting/ambient-piano.mp3 diff --git a/content/courses/hugo-blox/guide/formatting/button.md b/content/courses/hugo-blox/guide/formatting/button.md new file mode 100644 index 0000000..607276e --- /dev/null +++ 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. + + + +## 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 +{{}}Contact Us{{}} + +{{}}Visit External Site{{}} +``` + +## Style Variants + +### Primary (Default) + +{{< button url="#" style="primary" >}}Primary Button{{< /button >}} + +```go-html-template +{{}}Primary Button{{}} +``` + +### Secondary + +{{< button url="#" style="secondary" >}}Secondary Button{{< /button >}} + +```go-html-template +{{}}Secondary Button{{}} +``` + +### Outline + +{{< button url="#" style="outline" >}}Outline Button{{< /button >}} + +```go-html-template +{{}}Outline Button{{}} +``` + +### Ghost + +{{< button url="#" style="ghost" >}}Ghost Button{{< /button >}} + +```go-html-template +{{}}Ghost 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 +{{}}Small Button{{}} +{{}}Medium Button{{}} +{{}}Large Button{{}} +{{}}Extra Large{{}} +``` + +## 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 +{{}}Left Aligned{{}} +{{}}Center Aligned{{}} +{{}}Right Aligned{{}} +``` + +## 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 +{{}}Download{{}} +{{}}Continue{{}} +``` + +## 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 +{{}}Small Radius{{}} +{{}}Medium Radius{{}} +{{}}Large Radius{{}} +{{}}Pill 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 +{{}}Get Started Today{{}} +``` + +### 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 +{{}}View on GitHub{{}} +``` + +### Download Button + +{{< button url="/files/document.pdf" style="secondary" icon="document-arrow-down" rounded="full" >}}Download PDF{{< /button >}} + +```go-html-template +{{}}Download PDF{{}} +``` + +## 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 diff --git a/content/courses/hugo-blox/guide/formatting/callout.md b/content/courses/hugo-blox/guide/formatting/callout.md new file mode 100644 index 0000000..c41715b --- /dev/null +++ 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. + + + +## 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 +{{}} +This still works but is deprecated. Use the Markdown syntax above! +{{}} +``` + +### 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) diff --git a/content/courses/hugo-blox/guide/formatting/cards.md b/content/courses/hugo-blox/guide/formatting/cards.md new file mode 100644 index 0000000..08af73d --- /dev/null +++ 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: + +``` +{{}} + {{}} + {{}} +{{}} +``` + +## 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 | diff --git a/content/courses/js/index.md b/content/courses/hugo-blox/guide/formatting/media.md similarity index 89% rename from content/courses/js/index.md rename to content/courses/hugo-blox/guide/formatting/media.md index 7b01e45..4fe7b41 100644 --- a/content/courses/js/index.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 `{{}}$...${{}}` or `{{}}$$...$${{}}`, 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**: diff --git a/content/courses/hugo-blox/guide/formatting/steps.md b/content/courses/hugo-blox/guide/formatting/steps.md new file mode 100644 index 0000000..fb9d189 --- /dev/null +++ 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 */%}} +``` diff --git a/content/courses/hugo-blox/guide/formatting/toggle.md b/content/courses/hugo-blox/guide/formatting/toggle.md new file mode 100644 index 0000000..90805ac --- /dev/null +++ b/content/courses/hugo-blox/guide/formatting/toggle.md @@ -0,0 +1,27 @@ +--- +title: Spoilers +--- + +A Hugo shortcode to toggle collapsible content. + + + +## Example + +{{< spoiler text="Click to view the spoiler" >}} +You found me! + +Markdown is **supported**. +{{< /spoiler >}} + +## Usage + +```` +{{}} + +This is the content of the details. + +Markdown is **supported**. + +{{}} +```` diff --git a/content/courses/hugo-blox/guide/project-structure.md b/content/courses/hugo-blox/guide/project-structure.md new file mode 100644 index 0000000..b3a6bf0 --- /dev/null +++ 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 +--- +``` diff --git a/content/courses/hugo-blox/reference/_index.md b/content/courses/hugo-blox/reference/_index.md new file mode 100644 index 0000000..74cc26c --- /dev/null +++ b/content/courses/hugo-blox/reference/_index.md @@ -0,0 +1,7 @@ +--- +linkTitle: Reference +title: Reference +--- + +This section covers reference docs. + diff --git a/content/courses/hugo-blox/reference/customization.md b/content/courses/hugo-blox/reference/customization.md new file mode 100644 index 0000000..8c197f2 --- /dev/null +++ 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/ diff --git a/content/courses/hugo-blox/reference/i18n.md b/content/courses/hugo-blox/reference/i18n.md new file mode 100644 index 0000000..61327a6 --- /dev/null +++ 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. + + + +View the full docs at https://docs.hugoblox.com/reference/language/ diff --git a/content/courses/python/ambient-piano.mp3 b/content/courses/python/ambient-piano.mp3 deleted file mode 100644 index 8795f38..0000000 Binary files a/content/courses/python/ambient-piano.mp3 and /dev/null differ diff --git a/content/courses/python/featured.jpg b/content/courses/python/featured.jpg deleted file mode 100644 index 5b05393..0000000 Binary files a/content/courses/python/featured.jpg and /dev/null differ diff --git a/content/courses/python/index.md b/content/courses/python/index.md deleted file mode 100644 index d093ec8..0000000 --- a/content/courses/python/index.md +++ /dev/null @@ -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**: - - {{}} - -**Bilibili**: - - {{}} - -**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: - - {{}} - -## 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: - - {{}} - -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 -{{}} -You found me! -{{}} -``` - -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 `{{}}$...${{}}` or `{{}}$$...$${{}}`, 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 -{{}} -$$ -\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} -$$ -{{}} -``` - -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** `{{}}$\nabla F(\mathbf{x}_{n})${{}}` renders as {{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}}. - -Example **multi-line math** using the math linebreak (`\\`): - -```latex -{{}} -$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ -1-p_{0}^{*} & \text{if }k=0.\end{cases}$$ -{{}} -``` - -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 -{{}} 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 -{{}} -This still works but is deprecated. Use the Markdown syntax above! -{{}} -``` - -{{% 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 πŸ™Œ diff --git a/content/events/example/index.md b/content/events/example/index.md index c61a513..cbd77b7 100644 --- 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: diff --git a/content/publications/conference-paper/index.md b/content/publications/conference-paper/index.md index 90b04ef..fc4efd3 100644 --- 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/). diff --git a/content/publications/journal-article/index.md b/content/publications/journal-article/index.md index 9dbb33a..1e1984a 100644 --- 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/). diff --git a/content/publications/preprint/index.md b/content/publications/preprint/index.md index 7ff6461..30b590f 100644 --- 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/). diff --git a/go.mod b/go.mod index 0b54845..5b4f909 100644 --- a/go.mod +++ b/go.mod @@ -3,6 +3,6 @@ module github.com/HugoBlox/hugo-blox-builder/starters/academic-cv go 1.19 require ( - github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-netlify v1.1.2 - github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind v0.8.0 + 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.0.0-20250925005832-787ac94b5dda )