initial template mods to evan-ify
This commit is contained in:
Evan Scamehorn
BIN
assets/media/authors/me.jpg
Normal file
BIN
assets/media/authors/me.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB |
@@ -7,21 +7,24 @@ main:
|
|||||||
- name: Bio
|
- name: Bio
|
||||||
url: /
|
url: /
|
||||||
weight: 10
|
weight: 10
|
||||||
- name: Papers
|
# - name: Papers
|
||||||
url: /#papers
|
# url: /#papers
|
||||||
weight: 11
|
# weight: 11
|
||||||
- name: Talks
|
# - name: Talks
|
||||||
url: /#talks
|
# url: /#talks
|
||||||
weight: 12
|
# weight: 12
|
||||||
- name: News
|
# - name: News
|
||||||
url: /#news
|
# url: /#news
|
||||||
weight: 13
|
# weight: 13
|
||||||
- name: Experience
|
# - name: Experience
|
||||||
url: experience/
|
# url: experience/
|
||||||
weight: 20
|
# weight: 20
|
||||||
- name: Projects
|
- name: Projects
|
||||||
url: projects/
|
url: projects/
|
||||||
weight: 30
|
weight: 30
|
||||||
- name: Courses
|
- name: Blog
|
||||||
url: courses/
|
url: blog/
|
||||||
weight: 40
|
weight: 40
|
||||||
|
# - name: Courses
|
||||||
|
# url: courses/
|
||||||
|
# weight: 40
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ hugoblox:
|
|||||||
# ────────────────────────────────────────────────────────────────────────────
|
# ────────────────────────────────────────────────────────────────────────────
|
||||||
identity:
|
identity:
|
||||||
# Site name - shown in navbar, footer, copyright, and browser title by default
|
# Site name - shown in navbar, footer, copyright, and browser title by default
|
||||||
name: "Your Name"
|
name: "Evan Scamehorn"
|
||||||
# Legal entity for copyright notices (defaults to name if not set)
|
# Legal entity for copyright notices (defaults to name if not set)
|
||||||
organization: ""
|
organization: ""
|
||||||
# Schema.org type for structured data
|
# Schema.org type for structured data
|
||||||
@@ -21,10 +21,10 @@ hugoblox:
|
|||||||
# Short tagline displayed on your site
|
# Short tagline displayed on your site
|
||||||
tagline: ""
|
tagline: ""
|
||||||
# Site meta description for search engines and social sharing
|
# Site meta description for search engines and social sharing
|
||||||
description: "The highly-customizable Hugo Academic theme powered by Hugo Blox Builder. Easily create your personal academic website."
|
description: "Evan Scamehorn's personal website: professional biography, personal project showcase, and blog posts."
|
||||||
# Social accounts (used for meta tags like Twitter Cards)
|
# Social accounts (used for meta tags like Twitter Cards)
|
||||||
social:
|
# social:
|
||||||
twitter: "BuildLore" # Twitter/X handle for Twitter Cards (without @)
|
# twitter: "BuildLore" # Twitter/X handle for Twitter Cards (without @)
|
||||||
|
|
||||||
# ────────────────────────────────────────────────────────────────────────────
|
# ────────────────────────────────────────────────────────────────────────────
|
||||||
# THEME
|
# THEME
|
||||||
@@ -32,27 +32,27 @@ hugoblox:
|
|||||||
# ────────────────────────────────────────────────────────────────────────────
|
# ────────────────────────────────────────────────────────────────────────────
|
||||||
theme:
|
theme:
|
||||||
# Mode: 'light', 'dark', or 'system' (follows OS preference)
|
# Mode: 'light', 'dark', or 'system' (follows OS preference)
|
||||||
mode: system
|
mode: dark
|
||||||
# Theme pack: name from data/themes/ or { light: "x", dark: "y" } for mix-and-match
|
# Theme pack: name from data/themes/ or { light: "x", dark: "y" } for mix-and-match
|
||||||
pack: "default"
|
pack: "default"
|
||||||
# Optional: Override theme pack colors
|
# Optional: Override theme pack colors
|
||||||
colors:
|
colors:
|
||||||
primary: "" # Tailwind palette name or hex (e.g., "indigo" or "#6366f1")
|
primary: "#98971a" # Tailwind palette name or hex (e.g., "indigo" or "#6366f1")
|
||||||
secondary: ""
|
secondary: "#d78821"
|
||||||
neutral: "" # Affects gray utilities (text-gray-*, bg-gray-*)
|
neutral: "#a89984" # Affects gray utilities (text-gray-*, bg-gray-*)
|
||||||
# Optional: Mode-specific color overrides
|
# Optional: Mode-specific color overrides
|
||||||
colors_light: {}
|
#colors_light: {}
|
||||||
colors_dark: {}
|
#colors_dark: {}
|
||||||
# Optional: Semantic surface color overrides
|
# Optional: Semantic surface color overrides
|
||||||
surfaces:
|
surfaces:
|
||||||
background: ""
|
background: "#282828" # Main page background
|
||||||
foreground: ""
|
foreground: "#ebdbb2" # Main text color
|
||||||
header:
|
header:
|
||||||
background: ""
|
background: "#32302f"
|
||||||
foreground: ""
|
foreground: "#ebdbb2"
|
||||||
footer:
|
footer:
|
||||||
background: ""
|
background: "#32302f"
|
||||||
foreground: ""
|
foreground: "#32302f"
|
||||||
|
|
||||||
# ────────────────────────────────────────────────────────────────────────────
|
# ────────────────────────────────────────────────────────────────────────────
|
||||||
# TYPOGRAPHY
|
# TYPOGRAPHY
|
||||||
@@ -60,7 +60,7 @@ hugoblox:
|
|||||||
# ────────────────────────────────────────────────────────────────────────────
|
# ────────────────────────────────────────────────────────────────────────────
|
||||||
typography:
|
typography:
|
||||||
# Font: 'sans' (Inter), 'serif' (Roboto Slab), or 'native' (system fonts)
|
# Font: 'sans' (Inter), 'serif' (Roboto Slab), or 'native' (system fonts)
|
||||||
font: "sans"
|
font: "serif"
|
||||||
# Size: 'sm', 'md', 'lg', or 'xl' (affects base font size and scale)
|
# Size: 'sm', 'md', 'lg', or 'xl' (affects base font size and scale)
|
||||||
size: "md"
|
size: "md"
|
||||||
|
|
||||||
@@ -90,9 +90,9 @@ hugoblox:
|
|||||||
align: center # left | center | right
|
align: center # left | center | right
|
||||||
# Feature toggles
|
# Feature toggles
|
||||||
search: true
|
search: true
|
||||||
theme_toggle: true
|
theme_toggle: false
|
||||||
theme_picker: true
|
theme_picker: false
|
||||||
language_switcher: true
|
language_switcher: false
|
||||||
# Call-to-action button
|
# Call-to-action button
|
||||||
cta:
|
cta:
|
||||||
enable: false
|
enable: false
|
||||||
@@ -116,12 +116,7 @@ hugoblox:
|
|||||||
# ────────────────────────────────────────────────────────────────────────────
|
# ────────────────────────────────────────────────────────────────────────────
|
||||||
copyright:
|
copyright:
|
||||||
# Copyright notice - supports {year}, {name}, {license} placeholders
|
# Copyright notice - supports {year}, {name}, {license} placeholders
|
||||||
notice: "© {year} {name}. This work is licensed under {license}"
|
notice: "© {year} {name}. This work is licensed under GPL-3"
|
||||||
license:
|
|
||||||
type: cc # cc | all_rights | custom
|
|
||||||
allow_derivatives: false
|
|
||||||
share_alike: true
|
|
||||||
allow_commercial: false
|
|
||||||
|
|
||||||
# ────────────────────────────────────────────────────────────────────────────
|
# ────────────────────────────────────────────────────────────────────────────
|
||||||
# SEO
|
# SEO
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ sections:
|
|||||||
# Show a call-to-action button under your biography? (optional)
|
# Show a call-to-action button under your biography? (optional)
|
||||||
button:
|
button:
|
||||||
text: Download CV
|
text: Download CV
|
||||||
url: uploads/resume.pdf
|
url: https://cv.ejs.cam
|
||||||
headings:
|
headings:
|
||||||
about: ''
|
about: ''
|
||||||
education: ''
|
education: ''
|
||||||
@@ -36,52 +36,24 @@ sections:
|
|||||||
avatar:
|
avatar:
|
||||||
size: medium # Options: small (150px), medium (200px, default), large (320px), xl (400px), xxl (500px)
|
size: medium # Options: small (150px), medium (200px, default), large (320px), xl (400px), xxl (500px)
|
||||||
shape: circle # Options: circle (default), square, rounded
|
shape: circle # Options: circle (default), square, rounded
|
||||||
- block: markdown
|
|
||||||
content:
|
|
||||||
title: '📚 My Research'
|
|
||||||
subtitle: ''
|
|
||||||
text: |-
|
|
||||||
Use this area to speak to your mission. I'm a research scientist in the Moonshot team at DeepMind. I blog about machine learning, deep learning, and moonshots.
|
|
||||||
|
|
||||||
I apply a range of qualitative and quantitative methods to comprehensively investigate the role of science and technology in the economy.
|
|
||||||
|
|
||||||
Please reach out to collaborate 😃
|
|
||||||
design:
|
|
||||||
columns: '1'
|
|
||||||
- block: collection
|
- block: collection
|
||||||
id: papers
|
id: projects
|
||||||
content:
|
content:
|
||||||
title: Featured Publications
|
title: Featured Projects
|
||||||
|
|
||||||
|
# page_type: blog
|
||||||
filters:
|
filters:
|
||||||
folders:
|
folders:
|
||||||
- publications
|
- projects
|
||||||
featured_only: true
|
# featured_only: true
|
||||||
design:
|
design:
|
||||||
view: article-grid
|
view: article-grid
|
||||||
columns: 2
|
columns: 3
|
||||||
- block: collection
|
- block: collection
|
||||||
|
id: blogs
|
||||||
content:
|
content:
|
||||||
title: Recent Publications
|
title: Blog Posts
|
||||||
text: ''
|
|
||||||
filters:
|
|
||||||
folders:
|
|
||||||
- publications
|
|
||||||
exclude_featured: false
|
|
||||||
design:
|
|
||||||
view: citation
|
|
||||||
- block: collection
|
|
||||||
id: talks
|
|
||||||
content:
|
|
||||||
title: Recent & Upcoming Talks
|
|
||||||
filters:
|
|
||||||
folders:
|
|
||||||
- events
|
|
||||||
design:
|
|
||||||
view: card
|
|
||||||
- block: collection
|
|
||||||
id: news
|
|
||||||
content:
|
|
||||||
title: Recent News
|
|
||||||
subtitle: ''
|
subtitle: ''
|
||||||
text: ''
|
text: ''
|
||||||
# Page type to display. E.g. post, talk, publication...
|
# Page type to display. E.g. post, talk, publication...
|
||||||
@@ -107,24 +79,38 @@ sections:
|
|||||||
# Reduce spacing
|
# Reduce spacing
|
||||||
spacing:
|
spacing:
|
||||||
padding: [0, 0, 0, 0]
|
padding: [0, 0, 0, 0]
|
||||||
- block: cta-card
|
|
||||||
demo: true # Only display this section in the Hugo Blox Builder demo site
|
|
||||||
content:
|
|
||||||
title: 👉 Build your own academic website like this
|
|
||||||
text: |-
|
|
||||||
This site is generated by Hugo Blox Builder - the FREE, Hugo-based open source website builder trusted by 250,000+ academics like you.
|
|
||||||
|
|
||||||
<a class="github-button" href="https://github.com/HugoBlox/hugo-blox-builder" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star HugoBlox/hugo-blox-builder on GitHub">Star</a>
|
|
||||||
|
|
||||||
Easily build anything with blocks - no-code required!
|
# - block: markdown
|
||||||
|
# content:
|
||||||
|
# title: '📚 My Research'
|
||||||
|
# subtitle: ''
|
||||||
|
# text: |-
|
||||||
|
# Use this area to speak to your mission. I'm a research scientist in the Moonshot team at DeepMind. I blog about machine learning, deep learning, and moonshots.
|
||||||
|
#
|
||||||
|
# I apply a range of qualitative and quantitative methods to comprehensively investigate the role of science and technology in the economy.
|
||||||
|
#
|
||||||
|
# Please reach out to collaborate 😃
|
||||||
|
# design:
|
||||||
|
# columns: '1'
|
||||||
|
|
||||||
From landing pages, second brains, and courses to academic resumés, conferences, and tech blogs.
|
# - block: collection
|
||||||
button:
|
# content:
|
||||||
text: Get Started
|
# title: Recent Publications
|
||||||
url: https://hugoblox.com/templates/
|
# text: ''
|
||||||
design:
|
# filters:
|
||||||
card:
|
# folders:
|
||||||
# Card background color (CSS class)
|
# - publications
|
||||||
css_class: 'bg-primary-300 dark:bg-primary-700'
|
# exclude_featured: false
|
||||||
css_style: ''
|
# design:
|
||||||
|
# view: citation
|
||||||
|
# - block: collection
|
||||||
|
# id: talks
|
||||||
|
# content:
|
||||||
|
# title: Recent & Upcoming Talks
|
||||||
|
# filters:
|
||||||
|
# folders:
|
||||||
|
# - events
|
||||||
|
# design:
|
||||||
|
# view: card
|
||||||
---
|
---
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 228 KiB |
@@ -1,252 +0,0 @@
|
|||||||
---
|
|
||||||
title: 📈 Communicate your results effectively with the best data visualizations
|
|
||||||
summary: Use popular tools such as HuggingFace, Plotly, Mermaid, and data frames.
|
|
||||||
date: 2023-10-25
|
|
||||||
authors:
|
|
||||||
- me
|
|
||||||
tags:
|
|
||||||
- Hugo
|
|
||||||
- Hugo Blox
|
|
||||||
- Markdown
|
|
||||||
cover:
|
|
||||||
image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2560"
|
|
||||||
position:
|
|
||||||
x: 50
|
|
||||||
y: 40
|
|
||||||
overlay:
|
|
||||||
enabled: true
|
|
||||||
type: "gradient"
|
|
||||||
opacity: 0.4
|
|
||||||
gradient: "bottom"
|
|
||||||
fade:
|
|
||||||
enabled: true
|
|
||||||
height: "80px"
|
|
||||||
icon:
|
|
||||||
name: "✨"
|
|
||||||
image:
|
|
||||||
caption: 'Image credit: [**Unsplash**](https://unsplash.com)'
|
|
||||||
---
|
|
||||||
|
|
||||||
Hugo Blox is designed to give technical content creators a seamless experience. You can focus on the content and Hugo Blox handles the rest.
|
|
||||||
|
|
||||||
Use popular tools such as Plotly, Mermaid, and data frames.
|
|
||||||
|
|
||||||
## Embed Rich Content
|
|
||||||
|
|
||||||
HuggingFace Model
|
|
||||||
|
|
||||||
{{< embed platform="huggingface" resource="google/embeddinggemma-300m" type="model" >}}
|
|
||||||
|
|
||||||
HuggingFace Dataset
|
|
||||||
|
|
||||||
{{< embed platform="huggingface" resource="fka/awesome-chatgpt-prompts" type="dataset" >}}
|
|
||||||
|
|
||||||
GitHub Repository
|
|
||||||
|
|
||||||
{{< embed platform="github" resource="HugoBlox/hugo-blox-builder" type="repo" >}}
|
|
||||||
|
|
||||||
Custom embed with manual data
|
|
||||||
|
|
||||||
{{< embed url="https://example.com" title="My Custom Resource" description="A great resource for learning" >}}
|
|
||||||
|
|
||||||
### Custom Images
|
|
||||||
|
|
||||||
Embed beautiful images from any source with Hugo image processing (Unsplash, custom URLs, etc.):
|
|
||||||
|
|
||||||
{{< embed url="https://example.com" title="Data Visualization Guide" description="Beautiful data visualization workspace" image="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?q=80&w=800&h=600&auto=format&fit=crop" width="800" height="600" quality="90" >}}
|
|
||||||
|
|
||||||
You can also add images to any platform embed:
|
|
||||||
|
|
||||||
{{< embed platform="github" resource="plotly/plotly.py" type="repo" image="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&auto=format&fit=crop" width="600" height="400" >}}
|
|
||||||
|
|
||||||
## Charts
|
|
||||||
|
|
||||||
Hugo Blox supports the popular [Plotly](https://plot.ly/) format for interactive data visualizations. With Plotly, you can design almost any kind of visualization you can imagine!
|
|
||||||
|
|
||||||
Save your Plotly JSON in your page folder, for example `line-chart.json`, and then add the `{{</* chart data="line-chart" */>}}` shortcode where you would like the chart to appear.
|
|
||||||
|
|
||||||
Demo:
|
|
||||||
|
|
||||||
{{< chart data="line-chart" >}}
|
|
||||||
|
|
||||||
You might also find the [Plotly JSON Editor](http://plotly-json-editor.getforge.io/) useful.
|
|
||||||
|
|
||||||
## Diagrams
|
|
||||||
|
|
||||||
Hugo Blox supports the _Mermaid_ Markdown extension for diagrams.
|
|
||||||
|
|
||||||
An example **flowchart**:
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
graph TD
|
|
||||||
A[Hard] -->|Text| B(Round)
|
|
||||||
B --> C{Decision}
|
|
||||||
C -->|One| D[Result 1]
|
|
||||||
C -->|Two| E[Result 2]
|
|
||||||
```
|
|
||||||
|
|
||||||
renders as
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
graph TD
|
|
||||||
A[Hard] -->|Text| B(Round)
|
|
||||||
B --> C{Decision}
|
|
||||||
C -->|One| D[Result 1]
|
|
||||||
C -->|Two| E[Result 2]
|
|
||||||
```
|
|
||||||
|
|
||||||
An example **sequence diagram**:
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
sequenceDiagram
|
|
||||||
Alice->>John: Hello John, how are you?
|
|
||||||
loop Healthcheck
|
|
||||||
John->>John: Fight against hypochondria
|
|
||||||
end
|
|
||||||
Note right of John: Rational thoughts!
|
|
||||||
John-->>Alice: Great!
|
|
||||||
John->>Bob: How about you?
|
|
||||||
Bob-->>John: Jolly good!
|
|
||||||
```
|
|
||||||
|
|
||||||
renders as
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
sequenceDiagram
|
|
||||||
Alice->>John: Hello John, how are you?
|
|
||||||
loop Healthcheck
|
|
||||||
John->>John: Fight against hypochondria
|
|
||||||
end
|
|
||||||
Note right of John: Rational thoughts!
|
|
||||||
John-->>Alice: Great!
|
|
||||||
John->>Bob: How about you?
|
|
||||||
Bob-->>John: Jolly good!
|
|
||||||
```
|
|
||||||
|
|
||||||
An example **class diagram**:
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
classDiagram
|
|
||||||
Class01 <|-- AveryLongClass : Cool
|
|
||||||
Class03 *-- Class04
|
|
||||||
Class05 o-- Class06
|
|
||||||
Class07 .. Class08
|
|
||||||
Class09 --> C2 : Where am i?
|
|
||||||
Class09 --* C3
|
|
||||||
Class09 --|> Class07
|
|
||||||
Class07 : equals()
|
|
||||||
Class07 : Object[] elementData
|
|
||||||
Class01 : size()
|
|
||||||
Class01 : int chimp
|
|
||||||
Class01 : int gorilla
|
|
||||||
Class08 <--> C2: Cool label
|
|
||||||
```
|
|
||||||
|
|
||||||
renders as
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
classDiagram
|
|
||||||
Class01 <|-- AveryLongClass : Cool
|
|
||||||
Class03 *-- Class04
|
|
||||||
Class05 o-- Class06
|
|
||||||
Class07 .. Class08
|
|
||||||
Class09 --> C2 : Where am i?
|
|
||||||
Class09 --* C3
|
|
||||||
Class09 --|> Class07
|
|
||||||
Class07 : equals()
|
|
||||||
Class07 : Object[] elementData
|
|
||||||
Class01 : size()
|
|
||||||
Class01 : int chimp
|
|
||||||
Class01 : int gorilla
|
|
||||||
Class08 <--> C2: Cool label
|
|
||||||
```
|
|
||||||
|
|
||||||
An example **state diagram**:
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
stateDiagram
|
|
||||||
[*] --> Still
|
|
||||||
Still --> [*]
|
|
||||||
Still --> Moving
|
|
||||||
Moving --> Still
|
|
||||||
Moving --> Crash
|
|
||||||
Crash --> [*]
|
|
||||||
```
|
|
||||||
|
|
||||||
renders as
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
stateDiagram
|
|
||||||
[*] --> Still
|
|
||||||
Still --> [*]
|
|
||||||
Still --> Moving
|
|
||||||
Moving --> Still
|
|
||||||
Moving --> Crash
|
|
||||||
Crash --> [*]
|
|
||||||
```
|
|
||||||
|
|
||||||
## Data Frames
|
|
||||||
|
|
||||||
Save your spreadsheet as a CSV file in your page's folder and then render it by adding the _Table_ shortcode to your page:
|
|
||||||
|
|
||||||
```go
|
|
||||||
{{</* table path="results.csv" header="true" caption="Table 1: My results" */>}}
|
|
||||||
```
|
|
||||||
|
|
||||||
renders as
|
|
||||||
|
|
||||||
{{< table path="results.csv" header="true" caption="Table 1: My results" >}}
|
|
||||||
|
|
||||||
## Interactive Buttons
|
|
||||||
|
|
||||||
Add engaging call-to-action buttons to your data visualization posts:
|
|
||||||
|
|
||||||
### Basic Buttons
|
|
||||||
|
|
||||||
{{< button url="/" >}}Contact Us{{< /button >}}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{{< button url="https://plotly.com/python/" new_tab="true" style="secondary" >}}Learn Plotly{{< /button >}}
|
|
||||||
|
|
||||||
```go-html-template
|
|
||||||
{{</* button url="/" */>}}Contact Us{{</* /button */>}}
|
|
||||||
|
|
||||||
{{</* button url="https://plotly.com/python/" new_tab="true" style="secondary" */>}}Learn Plotly{{</* /button */>}}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Styled Buttons for Data Actions
|
|
||||||
|
|
||||||
{{< button url="#" style="primary" size="lg" align="center" icon="chart-bar" >}}View Dashboard{{< /button >}}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{{< button url="/data/results.csv" style="outline" icon="document-arrow-down" >}}Download Data{{< /button >}}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{{< button url="https://github.com/HugoBlox" new_tab="true" style="ghost" icon="arrow-top-right-on-square" icon_position="right" >}}View Source Code{{< /button >}}
|
|
||||||
|
|
||||||
```go-html-template
|
|
||||||
{{</* button url="#" style="primary" size="lg" align="center" icon="chart-bar" */>}}View Dashboard{{</* /button */>}}
|
|
||||||
|
|
||||||
{{</* button url="/data/results.csv" style="outline" icon="document-arrow-down" */>}}Download Data{{</* /button */>}}
|
|
||||||
|
|
||||||
{{</* button url="https://github.com/HugoBlox" new_tab="true" style="ghost" icon="arrow-top-right-on-square" icon_position="right" */>}}View Source Code{{</* /button */>}}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Multiple Aligned Buttons
|
|
||||||
|
|
||||||
{{< button url="https://jupyter.org/" new_tab="true" style="secondary" rounded="full" align="center" >}}Try Jupyter{{< /button >}}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{{< button url="https://colab.research.google.com/" new_tab="true" style="primary" rounded="full" align="center" icon="rocket-launch" >}}Open in Colab{{< /button >}}
|
|
||||||
|
|
||||||
```go-html-template
|
|
||||||
{{</* button url="https://jupyter.org/" new_tab="true" style="secondary" rounded="full" align="center" */>}}Try Jupyter{{</* /button */>}}
|
|
||||||
|
|
||||||
{{</* button url="https://colab.research.google.com/" new_tab="true" style="primary" rounded="full" align="center" icon="rocket-launch" */>}}Open in Colab{{</* /button */>}}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Did you find this page helpful? Consider sharing it 🙌
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
{
|
|
||||||
"data": [
|
|
||||||
{
|
|
||||||
"uid": "babced",
|
|
||||||
"fill": "tonexty",
|
|
||||||
"mode": "none",
|
|
||||||
"name": "Col2",
|
|
||||||
"type": "scatter",
|
|
||||||
"x": [
|
|
||||||
"2000-01-01",
|
|
||||||
"2001-01-01",
|
|
||||||
"2002-01-01",
|
|
||||||
"2003-01-01",
|
|
||||||
"2004-01-01",
|
|
||||||
"2005-01-01",
|
|
||||||
"2006-01-01",
|
|
||||||
"2007-01-01",
|
|
||||||
"2008-01-01",
|
|
||||||
"2009-01-01",
|
|
||||||
"2010-01-01",
|
|
||||||
"2011-01-01",
|
|
||||||
"2012-01-01",
|
|
||||||
"2013-01-01",
|
|
||||||
"2014-01-01",
|
|
||||||
"2015-01-01",
|
|
||||||
"2016-01-01"
|
|
||||||
],
|
|
||||||
"y": [
|
|
||||||
"17087182",
|
|
||||||
"29354370",
|
|
||||||
"38760373",
|
|
||||||
"40912332",
|
|
||||||
"51611646",
|
|
||||||
"64780617",
|
|
||||||
"85507314",
|
|
||||||
"121892559",
|
|
||||||
"172338726",
|
|
||||||
"238027855",
|
|
||||||
"206956723",
|
|
||||||
"346004403",
|
|
||||||
"697089489",
|
|
||||||
"672985183",
|
|
||||||
"968882453",
|
|
||||||
"863105652",
|
|
||||||
"1068513050"
|
|
||||||
],
|
|
||||||
"fillcolor": "rgb(224, 102, 102)"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"layout": {
|
|
||||||
"title": "Total Number of Websites",
|
|
||||||
"width": 800,
|
|
||||||
"xaxis": {
|
|
||||||
"type": "date",
|
|
||||||
"range": [946702800000, 1451624400000],
|
|
||||||
"title": "Source: <a href=\"http://www.scribblrs.com/\">Scribblrs</a><br>Source: <a href=\"http://www.internetlivestats.com/total-number-of-websites/\">Internet Live Stats</a>",
|
|
||||||
"showgrid": false,
|
|
||||||
"autorange": true,
|
|
||||||
"tickformat": "%Y"
|
|
||||||
},
|
|
||||||
"yaxis": {
|
|
||||||
"type": "linear",
|
|
||||||
"range": [0, 1124750578.9473684],
|
|
||||||
"title": "",
|
|
||||||
"autorange": true
|
|
||||||
},
|
|
||||||
"height": 500,
|
|
||||||
"autosize": false
|
|
||||||
},
|
|
||||||
"frames": []
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
customer_id, score
|
|
||||||
1,0
|
|
||||||
2,0.5
|
|
||||||
3,1
|
|
||||||
|
Binary file not shown.
|
Before Width: | Height: | Size: 333 KiB |
@@ -1,117 +0,0 @@
|
|||||||
---
|
|
||||||
title: 🎉 Easily create your own simple yet highly customizable blog
|
|
||||||
summary: Take full control of your personal brand and privacy by migrating away from the big tech platforms!
|
|
||||||
date: 2023-10-27
|
|
||||||
|
|
||||||
# Featured image
|
|
||||||
# Place an image named `featured.jpg/png` in this page's folder and customize its options here.
|
|
||||||
image:
|
|
||||||
caption: 'Image credit: [**Unsplash**](https://unsplash.com)'
|
|
||||||
|
|
||||||
cover:
|
|
||||||
image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2560"
|
|
||||||
position:
|
|
||||||
x: 50
|
|
||||||
y: 40
|
|
||||||
overlay:
|
|
||||||
enabled: true
|
|
||||||
type: "gradient"
|
|
||||||
opacity: 0.4
|
|
||||||
gradient: "bottom"
|
|
||||||
fade:
|
|
||||||
enabled: true
|
|
||||||
height: "80px"
|
|
||||||
icon:
|
|
||||||
name: "✨"
|
|
||||||
|
|
||||||
authors:
|
|
||||||
- me
|
|
||||||
- Ted
|
|
||||||
|
|
||||||
tags:
|
|
||||||
- Academic
|
|
||||||
- Hugo Blox
|
|
||||||
- Markdown
|
|
||||||
|
|
||||||
content_meta:
|
|
||||||
trending: true
|
|
||||||
---
|
|
||||||
|
|
||||||
Welcome 👋
|
|
||||||
|
|
||||||
{{< toc mobile_only=true is_open=true >}}
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
1. The Hugo Blox website builder for Hugo, along with its starter templates, is designed for professional creators, educators, and teams/organizations - although it can be used to create any kind of site
|
|
||||||
2. The template can be modified and customised to suit your needs. It's a good platform for anyone looking to take control of their data and online identity whilst having the convenience to start off with a **no-code solution (write in Markdown and customize with YAML parameters)** and having **flexibility to later add even deeper personalization with HTML and CSS**
|
|
||||||
3. You can work with all your favourite tools and apps with hundreds of plugins and integrations to speed up your workflows, interact with your readers, and much more
|
|
||||||
|
|
||||||
[//]: # '[](https://hugoblox.com)'
|
|
||||||
|
|
||||||
### Get Started
|
|
||||||
|
|
||||||
> [!TIP]+ Quick Start Guide
|
|
||||||
> New to Hugo Blox? Follow these steps to get your site up and running in minutes!
|
|
||||||
|
|
||||||
- 👉 [**Create a new site**](https://hugoblox.com/templates/)
|
|
||||||
- 📚 [**Personalize your site**](https://docs.hugoblox.com/)
|
|
||||||
- 💬 [Chat with the **Hugo Blox community**](https://discord.gg/z8wNYzb) or [**Hugo community**](https://discourse.gohugo.io)
|
|
||||||
- 🐦 Twitter: [@BuildLore](https://x.com/BuildLore) [@GeorgeCushen](https://x.com/GeorgeCushen) #MadeWithHugoBlox
|
|
||||||
- 💡 [Request a **feature** or report a **bug** for _Hugo Blox_](https://github.com/HugoBlox/hugo-blox-builder/issues)
|
|
||||||
- ⬆️ **Updating Hugo Blox?** View the [Update Guide](https://docs.hugoblox.com/reference/update/) and [Release Notes](https://github.com/HugoBlox/hugo-blox-builder/releases)
|
|
||||||
|
|
||||||
> [!IMPORTANT]
|
|
||||||
> Remember to backup your site before making major updates!
|
|
||||||
|
|
||||||
## Crowd-funded open-source software
|
|
||||||
|
|
||||||
To help us develop this template and software sustainably under the MIT license, we ask all individuals and businesses that use it to help support its ongoing maintenance and development via sponsorship.
|
|
||||||
|
|
||||||
### [❤️ Click here to become a sponsor and help support Hugo Blox's future ❤️](https://hugoblox.com/sponsor/)
|
|
||||||
|
|
||||||
As a token of appreciation for sponsoring, you can **unlock [these](https://hugoblox.com/sponsor/) awesome rewards and extra features 🦄✨**
|
|
||||||
|
|
||||||
## Ecosystem
|
|
||||||
|
|
||||||
- **[Bibtex To Markdown](https://github.com/GetRD/academic-file-converter):** Automatically import publications from BibTeX
|
|
||||||
|
|
||||||
## Inspiration
|
|
||||||
|
|
||||||
[Learn what other **creators**](https://hugoblox.com/creators/) are building with this template.
|
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
> [!NOTE]+ Enhanced Markdown Support
|
|
||||||
> Hugo Blox now supports GitHub and Obsidian-style callouts! Use standard Markdown alert syntax like `> [!NOTE]` for better portability.
|
|
||||||
|
|
||||||
- **Page builder** - Create _anything_ with no-code [**blocks**](https://hugoblox.com/blocks/) and [**elements**](https://docs.hugoblox.com/reference/markdown/)
|
|
||||||
- **Edit any type of content** - Blog posts, publications, talks, slides, projects, and more!
|
|
||||||
- **Create content** in [**Markdown**](https://docs.hugoblox.com/reference/markdown/), [**Jupyter**](https://docs.hugoblox.com/getting-started/cms/), or [**RStudio**](https://docs.hugoblox.com/getting-started/cms/)
|
|
||||||
- **Plugin System** - Fully customizable [**color** and **font themes**](https://docs.hugoblox.com/getting-started/customize/)
|
|
||||||
- **Display Code and Math** - Code syntax highlighting and LaTeX math supported
|
|
||||||
- **Integrations** - [Google Analytics](https://analytics.google.com), [Disqus commenting](https://disqus.com), Maps, Contact Forms, and more!
|
|
||||||
- **Beautiful Site** - Simple and refreshing one-page design
|
|
||||||
- **Industry-Leading SEO** - Help get your website found on search engines and social media
|
|
||||||
- **Media Galleries** - Display your images and videos with captions in a customizable gallery
|
|
||||||
- **Mobile Friendly** - Look amazing on every screen with a mobile friendly version of your site
|
|
||||||
- **Multi-language** - 35+ language packs including English, 中文, and Português
|
|
||||||
- **Multi-user** - Each author gets their own profile page
|
|
||||||
- **Privacy Pack** - Assists with GDPR
|
|
||||||
- **Stand Out** - Bring your site to life with animation, parallax backgrounds, and scroll effects
|
|
||||||
- **One-Click Deployment** - No servers. No databases. Only files.
|
|
||||||
|
|
||||||
> [!WARNING]+ Version Requirements
|
|
||||||
> The new Markdown alert syntax requires Hugo v0.132.0 or later. Make sure you're using a compatible version!
|
|
||||||
|
|
||||||
## Themes
|
|
||||||
|
|
||||||
Hugo Blox and its templates come with **automatic day (light) and night (dark) mode** built-in. Visitors can choose their preferred mode by clicking the sun/moon icon in the header.
|
|
||||||
|
|
||||||
[Choose a stunning **theme** and **font**](https://docs.hugoblox.com/getting-started/customize/) for your site. Themes are fully customizable.
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
Copyright 2016-present [George Cushen](https://georgecushen.com).
|
|
||||||
|
|
||||||
Released under the [MIT](https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md) license.
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 220 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
@@ -1,161 +0,0 @@
|
|||||||
{
|
|
||||||
"cells": [
|
|
||||||
{
|
|
||||||
"cell_type": "markdown",
|
|
||||||
"id": "2f21e4c5",
|
|
||||||
"metadata": {},
|
|
||||||
"source": [
|
|
||||||
"# Ship Notebook Stories in Minutes\n",
|
|
||||||
"Hugo Blox Notebook renderer turns your `.ipynb` experiments into beautiful long-form posts.\n",
|
|
||||||
"Use this sample to see how markdown, code, and outputs flow together."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"cell_type": "markdown",
|
|
||||||
"id": "3078072c",
|
|
||||||
"metadata": {},
|
|
||||||
"source": [
|
|
||||||
"1. Drop notebooks inside `assets/notebooks/` (or import them as page resources).\n",
|
|
||||||
"2. Reference them with `{{</* notebook src=\"your.ipynb\" */>}}`.\n",
|
|
||||||
"3. Control code, outputs, metadata badges, and download links via shortcode params."
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"cell_type": "code",
|
|
||||||
"execution_count": 1,
|
|
||||||
"id": "7b29b28a",
|
|
||||||
"metadata": {
|
|
||||||
"tags": [
|
|
||||||
"demo",
|
|
||||||
"quickstart"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"outputs": [
|
|
||||||
{
|
|
||||||
"name": "stdout",
|
|
||||||
"output_type": "stream",
|
|
||||||
"text": [
|
|
||||||
"Collecting data...\n",
|
|
||||||
"Training notebook-ready block...\n",
|
|
||||||
"Done!\n"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"data": {
|
|
||||||
"text/plain": [
|
|
||||||
"0.982"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"execution_count": 1,
|
|
||||||
"metadata": {},
|
|
||||||
"output_type": "execute_result"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"source": [
|
|
||||||
"import math\n",
|
|
||||||
"accuracy = 0.982\n",
|
|
||||||
"print(\"Collecting data...\")\n",
|
|
||||||
"print(\"Training notebook-ready block...\")\n",
|
|
||||||
"print(\"Done!\")\n",
|
|
||||||
"accuracy"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"cell_type": "code",
|
|
||||||
"execution_count": 2,
|
|
||||||
"id": "ceecfe89",
|
|
||||||
"metadata": {},
|
|
||||||
"outputs": [
|
|
||||||
{
|
|
||||||
"data": {
|
|
||||||
"text/html": [
|
|
||||||
"<div style='font-family:Inter,ui-sans-serif;'><strong>Launch Readiness:</strong> <span style='color:#22c55e;'>98.2% confidence</span><br><em>Notebook blocks are theme-aware and dark-mode friendly.</em></div>"
|
|
||||||
],
|
|
||||||
"text/plain": [
|
|
||||||
"<IPython.core.display.HTML object>"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"metadata": {},
|
|
||||||
"output_type": "display_data"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"source": [
|
|
||||||
"from IPython.display import HTML\n",
|
|
||||||
"HTML(\"<div style='font-family:Inter,ui-sans-serif;'><strong>Launch Readiness:</strong> <span style='color:#22c55e;'>98.2% confidence</span><br><em>Notebook blocks are theme-aware and dark-mode friendly.</em></div>\")"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"cell_type": "code",
|
|
||||||
"execution_count": 3,
|
|
||||||
"id": "664e49ca",
|
|
||||||
"metadata": {
|
|
||||||
"tags": [
|
|
||||||
"metrics"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"outputs": [
|
|
||||||
{
|
|
||||||
"data": {
|
|
||||||
"application/json": {
|
|
||||||
"metrics": {
|
|
||||||
"engagement_rate": 0.73,
|
|
||||||
"read_time_minutes": 4.6,
|
|
||||||
"subscribers": 1280
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"text/plain": [
|
|
||||||
"{'metrics': {'engagement_rate': 0.73, 'read_time_minutes': 4.6, 'subscribers': 1280}}"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"execution_count": 3,
|
|
||||||
"metadata": {},
|
|
||||||
"output_type": "execute_result"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"source": [
|
|
||||||
"metrics = {\n",
|
|
||||||
" 'metrics': {\n",
|
|
||||||
" 'engagement_rate': 0.73,\n",
|
|
||||||
" 'read_time_minutes': 4.6,\n",
|
|
||||||
" 'subscribers': 1280\n",
|
|
||||||
" }\n",
|
|
||||||
"}\n",
|
|
||||||
"metrics"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"cell_type": "markdown",
|
|
||||||
"id": "0f761ba1",
|
|
||||||
"metadata": {},
|
|
||||||
"source": [
|
|
||||||
"> Tip: Pair this block with Call-to-Action cards or the Embed shortcode to link to GitHub repos, datasets, or ARXIV preprints."
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"metadata": {
|
|
||||||
"authors": [
|
|
||||||
{
|
|
||||||
"name": "HugoBlox Studio"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"kernelspec": {
|
|
||||||
"display_name": "Python 3",
|
|
||||||
"language": "python",
|
|
||||||
"name": "python3"
|
|
||||||
},
|
|
||||||
"language_info": {
|
|
||||||
"codemirror_mode": {
|
|
||||||
"name": "ipython",
|
|
||||||
"version": 3
|
|
||||||
},
|
|
||||||
"file_extension": ".py",
|
|
||||||
"mimetype": "text/x-python",
|
|
||||||
"name": "python",
|
|
||||||
"nbconvert_exporter": "python",
|
|
||||||
"pygments_lexer": "ipython3",
|
|
||||||
"version": "3.11"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"nbformat": 4,
|
|
||||||
"nbformat_minor": 5
|
|
||||||
}
|
|
||||||
@@ -1,70 +0,0 @@
|
|||||||
---
|
|
||||||
title: ⚡️ Turn Jupyter Notebooks into Blog Posts
|
|
||||||
summary: Publish your data science and research directly from Jupyter Notebooks. No screenshots required.
|
|
||||||
date: 2024-07-15
|
|
||||||
authors:
|
|
||||||
- me
|
|
||||||
tags:
|
|
||||||
- Hugo Blox
|
|
||||||
- Jupyter
|
|
||||||
- Open Science
|
|
||||||
- Tutorials
|
|
||||||
cover:
|
|
||||||
# image: cover.jpg # Auto-detected from cover image in this folder
|
|
||||||
icon:
|
|
||||||
name: "📔"
|
|
||||||
image:
|
|
||||||
caption: "Image credit: [HugoBlox](https://hugoblox.com)"
|
|
||||||
focal_point: Center
|
|
||||||
placement: 1
|
|
||||||
content_meta:
|
|
||||||
trending: true
|
|
||||||
---
|
|
||||||
|
|
||||||
As a researcher or data scientist, your work often lives in Jupyter Notebooks. But sharing those insights effectively usually means taking screenshots, messy copy-pasting, or exporting to PDF.
|
|
||||||
|
|
||||||
Hugo Blox changes that. With the `{{</* notebook */>}}` shortcode, you can render your actual `.ipynb` files directly as beautiful, interactive blog posts or project pages. Keep your code, outputs, and narrative in one place.
|
|
||||||
|
|
||||||
{{< toc mobile_only=true is_open=true >}}
|
|
||||||
|
|
||||||
## Why publish notebooks?
|
|
||||||
|
|
||||||
> [!TIP]
|
|
||||||
> **Reproducible Research**: By publishing the actual notebook, you allow others to download and run your code, verifying your results and building upon your work.
|
|
||||||
|
|
||||||
- **No more screenshots** – Render crisp code and vector plots directly from your source.
|
|
||||||
- **Theme consistent** – Notebooks automatically adapt to your site's theme (including dark mode).
|
|
||||||
- **Flexible sourcing** – Display notebooks from your `assets/` folder, page bundles, or even directly from a remote GitHub URL.
|
|
||||||
- **Interactive** – Users can copy code blocks or download the full notebook to run locally.
|
|
||||||
|
|
||||||
## Example: Data Science Workflow
|
|
||||||
|
|
||||||
Below is a live example of a notebook rendered right here in this post. Notice how the markdown, code, and outputs (text, HTML, and JSON) are all preserved and styled.
|
|
||||||
|
|
||||||
{{< notebook
|
|
||||||
src="hugoblox-onboarding.ipynb"
|
|
||||||
title="Launch Readiness Analysis"
|
|
||||||
show_metadata=true
|
|
||||||
line_numbers=true
|
|
||||||
dense=false
|
|
||||||
download_label="Download notebook"
|
|
||||||
show_outputs=true
|
|
||||||
>}}
|
|
||||||
|
|
||||||
## How to add a notebook
|
|
||||||
|
|
||||||
1. **Save your notebook.** Place your `.ipynb` file in `assets/notebooks/` (for global access) or inside a page bundle (like `content/blog/my-post/analysis.ipynb`).
|
|
||||||
2. **Add the shortcode.** In any Markdown page, simply use:
|
|
||||||
`{{</* notebook src="analysis.ipynb" */>}}`
|
|
||||||
3. **Customize.** You can hide code cells for non-technical audiences (`show_code=false`) or just show the output (`show_outputs=true`).
|
|
||||||
|
|
||||||
> [!IMPORTANT]
|
|
||||||
> Hugo Blox respects your privacy. Notebook rendering happens statically at build time—no third-party services required.
|
|
||||||
|
|
||||||
## Next steps
|
|
||||||
|
|
||||||
- **Try it out:** Drop one of your existing notebooks into this site and see how it looks.
|
|
||||||
- **Link your papers:** Use the Embed shortcode to link your notebook to your latest arXiv preprint or GitHub repository.
|
|
||||||
- **Get help:** Join the community on [Discord](https://discord.gg/z8wNYzb) or check the [documentation](https://docs.hugoblox.com).
|
|
||||||
|
|
||||||
Happy researching! 🚀
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 177 KiB |
@@ -1,109 +0,0 @@
|
|||||||
---
|
|
||||||
title: ✅ Manage your projects
|
|
||||||
summary: Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!
|
|
||||||
date: 2023-10-23
|
|
||||||
authors:
|
|
||||||
- me
|
|
||||||
tags:
|
|
||||||
- Hugo Blox
|
|
||||||
- Markdown
|
|
||||||
image:
|
|
||||||
caption: 'Image credit: [**Unsplash**](https://unsplash.com)'
|
|
||||||
cover:
|
|
||||||
image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2560"
|
|
||||||
position:
|
|
||||||
x: 50
|
|
||||||
y: 40
|
|
||||||
overlay:
|
|
||||||
enabled: true
|
|
||||||
type: "gradient"
|
|
||||||
opacity: 0.4
|
|
||||||
gradient: "bottom"
|
|
||||||
fade:
|
|
||||||
enabled: true
|
|
||||||
height: "80px"
|
|
||||||
icon:
|
|
||||||
name: "✨"
|
|
||||||
---
|
|
||||||
|
|
||||||
Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!
|
|
||||||
|
|
||||||
## Ideation
|
|
||||||
|
|
||||||
Hugo Blox supports a Markdown extension for mindmaps.
|
|
||||||
|
|
||||||
Simply insert a Markdown code block labelled as `markmap` and optionally set the height of the mindmap as shown in the example below.
|
|
||||||
|
|
||||||
Mindmaps can be created by simply writing the items as a Markdown list within the `markmap` code block, indenting each item to create as many sub-levels as you need:
|
|
||||||
|
|
||||||
<div class="highlight">
|
|
||||||
<pre class="chroma">
|
|
||||||
<code>
|
|
||||||
```markmap {height="200px"}
|
|
||||||
- Hugo Modules
|
|
||||||
- Hugo Blox
|
|
||||||
- blox-plugins-netlify
|
|
||||||
- blox-plugins-netlify-cms
|
|
||||||
- blox-plugins-reveal
|
|
||||||
```
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
renders as
|
|
||||||
|
|
||||||
```markmap {height="200px"}
|
|
||||||
- Hugo Modules
|
|
||||||
- Hugo Blox
|
|
||||||
- blox-plugins-netlify
|
|
||||||
- blox-plugins-netlify-cms
|
|
||||||
- blox-plugins-reveal
|
|
||||||
```
|
|
||||||
|
|
||||||
## Diagrams
|
|
||||||
|
|
||||||
Hugo Blox supports the _Mermaid_ Markdown extension for diagrams.
|
|
||||||
|
|
||||||
An example **Gantt diagram**:
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
gantt
|
|
||||||
section Section
|
|
||||||
Completed :done, des1, 2014-01-06,2014-01-08
|
|
||||||
Active :active, des2, 2014-01-07, 3d
|
|
||||||
Parallel 1 : des3, after des1, 1d
|
|
||||||
Parallel 2 : des4, after des1, 1d
|
|
||||||
Parallel 3 : des5, after des3, 1d
|
|
||||||
Parallel 4 : des6, after des4, 1d
|
|
||||||
```
|
|
||||||
|
|
||||||
renders as
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
gantt
|
|
||||||
section Section
|
|
||||||
Completed :done, des1, 2014-01-06,2014-01-08
|
|
||||||
Active :active, des2, 2014-01-07, 3d
|
|
||||||
Parallel 1 : des3, after des1, 1d
|
|
||||||
Parallel 2 : des4, after des1, 1d
|
|
||||||
Parallel 3 : des5, after des3, 1d
|
|
||||||
Parallel 4 : des6, after des4, 1d
|
|
||||||
```
|
|
||||||
|
|
||||||
## Todo lists
|
|
||||||
|
|
||||||
You can even write your todo lists in Markdown too:
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
- [x] Write math example
|
|
||||||
- [x] Write diagram example
|
|
||||||
- [ ] Do something else
|
|
||||||
```
|
|
||||||
|
|
||||||
renders as
|
|
||||||
|
|
||||||
- [x] Write math example
|
|
||||||
- [x] Write diagram example
|
|
||||||
- [ ] Do something else
|
|
||||||
|
|
||||||
## Did you find this page helpful? Consider sharing it 🙌
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB |
@@ -1,140 +0,0 @@
|
|||||||
---
|
|
||||||
title: 🧠 Sharpen your thinking with a second brain
|
|
||||||
summary: Create a personal knowledge base and share your knowledge with your peers.
|
|
||||||
date: 2023-10-26
|
|
||||||
authors:
|
|
||||||
- me
|
|
||||||
tags:
|
|
||||||
- Second Brain
|
|
||||||
- Markdown
|
|
||||||
image:
|
|
||||||
caption: 'Image credit: [**Unsplash**](https://unsplash.com)'
|
|
||||||
cover:
|
|
||||||
image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2560"
|
|
||||||
position:
|
|
||||||
x: 50
|
|
||||||
y: 40
|
|
||||||
overlay:
|
|
||||||
enabled: true
|
|
||||||
type: "gradient"
|
|
||||||
opacity: 0.4
|
|
||||||
gradient: "bottom"
|
|
||||||
fade:
|
|
||||||
enabled: true
|
|
||||||
height: "80px"
|
|
||||||
icon:
|
|
||||||
name: "✨"
|
|
||||||
---
|
|
||||||
|
|
||||||
Create a personal knowledge base and share your knowledge with your peers.
|
|
||||||
|
|
||||||
Hugo Blox web framework empowers you with one of the most flexible note-taking capabilities out there.
|
|
||||||
|
|
||||||
Create a powerful knowledge base that works on top of a local folder of plain text Markdown files.
|
|
||||||
|
|
||||||
Use it as your second brain, either publicly sharing your knowledge with your peers via your website, or via a private GitHub repository and password-protected site just for yourself.
|
|
||||||
|
|
||||||
## Mindmaps
|
|
||||||
|
|
||||||
Hugo Blox supports a Markdown extension for mindmaps.
|
|
||||||
|
|
||||||
With this open format, can even edit your mindmaps in other popular tools such as Obsidian.
|
|
||||||
|
|
||||||
Simply insert a Markdown code block labelled as `markmap` and optionally set the height of the mindmap as shown in the example below.
|
|
||||||
|
|
||||||
Mindmaps can be created by simply writing the items as a Markdown list within the `markmap` code block, indenting each item to create as many sub-levels as you need:
|
|
||||||
|
|
||||||
<div class="highlight">
|
|
||||||
<pre class="chroma">
|
|
||||||
<code>
|
|
||||||
```markmap {height="200px"}
|
|
||||||
- Hugo Modules
|
|
||||||
- Hugo Blox
|
|
||||||
- blox-plugins-netlify
|
|
||||||
- blox-plugins-netlify-cms
|
|
||||||
- blox-plugins-reveal
|
|
||||||
```
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
renders as
|
|
||||||
|
|
||||||
```markmap {height="200px"}
|
|
||||||
- Hugo Modules
|
|
||||||
- Hugo Blox
|
|
||||||
- blox-plugins-netlify
|
|
||||||
- blox-plugins-netlify-cms
|
|
||||||
- blox-plugins-reveal
|
|
||||||
```
|
|
||||||
|
|
||||||
Anh here's a more advanced mindmap with formatting, code blocks, and math:
|
|
||||||
|
|
||||||
<div class="highlight">
|
|
||||||
<pre class="chroma">
|
|
||||||
<code>
|
|
||||||
```markmap
|
|
||||||
- Mindmaps
|
|
||||||
- Links
|
|
||||||
- [Hugo Blox Docs](https://docs.hugoblox.com/)
|
|
||||||
- [Discord Community](https://discord.gg/z8wNYzb)
|
|
||||||
- [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
|
|
||||||
- Features
|
|
||||||
- Markdown formatting
|
|
||||||
- **inline** ~~text~~ *styles*
|
|
||||||
- multiline
|
|
||||||
text
|
|
||||||
- `inline code`
|
|
||||||
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
|
|
||||||
```
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
renders as
|
|
||||||
|
|
||||||
```markmap
|
|
||||||
- Mindmaps
|
|
||||||
- Links
|
|
||||||
- [Hugo Blox Docs](https://docs.hugoblox.com/)
|
|
||||||
- [Discord Community](https://discord.gg/z8wNYzb)
|
|
||||||
- [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
|
|
||||||
- Features
|
|
||||||
- Markdown formatting
|
|
||||||
- **inline** ~~text~~ *styles*
|
|
||||||
- multiline
|
|
||||||
text
|
|
||||||
- `inline code`
|
|
||||||
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
|
|
||||||
```
|
|
||||||
|
|
||||||
## Highlighting
|
|
||||||
|
|
||||||
<mark>Highlight</mark> important text with `mark`:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<mark>Highlighted text</mark>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Callouts
|
|
||||||
|
|
||||||
Use [callouts](https://docs.hugoblox.com/reference/markdown/#callouts) (aka _asides_, _hints_, or _alerts_) to draw attention to notes, tips, and warnings.
|
|
||||||
|
|
||||||
Use the `> [!NOTE]` syntax to create a callout.
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
> [!NOTE]
|
|
||||||
> A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
|
|
||||||
```
|
|
||||||
|
|
||||||
renders as
|
|
||||||
|
|
||||||
> [!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:
|
|
||||||
|
|
||||||
> [!WARNING]
|
|
||||||
> A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
|
|
||||||
|
|
||||||
## Did you find this page helpful? Consider sharing it 🙌
|
|
||||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 170 KiB |
@@ -1,161 +0,0 @@
|
|||||||
---
|
|
||||||
title: 👩🏼🏫 Teach academic courses
|
|
||||||
summary: Embed videos, podcasts, code, LaTeX math, and even test students!
|
|
||||||
date: 2023-10-24
|
|
||||||
math: true
|
|
||||||
authors:
|
|
||||||
- me
|
|
||||||
tags:
|
|
||||||
- Hugo
|
|
||||||
- Hugo Blox Builder
|
|
||||||
- Markdown
|
|
||||||
image:
|
|
||||||
caption: 'Embed rich media such as videos and LaTeX math'
|
|
||||||
cover:
|
|
||||||
image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2560"
|
|
||||||
position:
|
|
||||||
x: 50
|
|
||||||
y: 40
|
|
||||||
overlay:
|
|
||||||
enabled: true
|
|
||||||
type: "gradient"
|
|
||||||
opacity: 0.4
|
|
||||||
gradient: "bottom"
|
|
||||||
fade:
|
|
||||||
enabled: true
|
|
||||||
height: "80px"
|
|
||||||
icon:
|
|
||||||
name: "✨"
|
|
||||||
---
|
|
||||||
|
|
||||||
[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.
|
|
||||||
|
|
||||||
## Citation
|
|
||||||
|
|
||||||
Here's an example of citing a publication using the cite shortcode:
|
|
||||||
|
|
||||||
{{< cite page="/publications/preprint" view="citation" >}}
|
|
||||||
|
|
||||||
You can also use the default view by omitting the view parameter:
|
|
||||||
|
|
||||||
{{< cite page="/publications/conference-paper" >}}
|
|
||||||
|
|
||||||
## Video
|
|
||||||
|
|
||||||
Teach your course by sharing videos with your students. Choose from one of the following approaches:
|
|
||||||
|
|
||||||
**Youtube**:
|
|
||||||
|
|
||||||
{{</* youtube D2vj0WcvH5c */>}}
|
|
||||||
|
|
||||||
{{< youtube D2vj0WcvH5c >}}
|
|
||||||
|
|
||||||
**Bilibili**:
|
|
||||||
|
|
||||||
{{</* bilibili 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. Enable math by setting the `math: true` option in your page's front matter, or enable math for your entire site by toggling math in your `config/_default/params.yaml` file:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
features:
|
|
||||||
math:
|
|
||||||
enable: true
|
|
||||||
```
|
|
||||||
|
|
||||||
To render _inline_ or _block_ math, wrap your LaTeX math with `$...$` or `$$...$$`, respectively.
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
$$\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}$$
|
|
||||||
|
|
||||||
Example **inline math** `$\nabla F(\mathbf{x}_{n})$` renders as $\nabla F(\mathbf{x}_{n})$.
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
$$
|
|
||||||
f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
|
|
||||||
1-p_{0}^{*} & \text{if }k=0.\end{cases}
|
|
||||||
$$
|
|
||||||
|
|
||||||
## 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 🙌
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
---
|
|
||||||
title: Courses
|
|
||||||
summary: My courses
|
|
||||||
type: landing
|
|
||||||
|
|
||||||
cascade:
|
|
||||||
- target:
|
|
||||||
path: '{/courses/*/**}'
|
|
||||||
type: docs
|
|
||||||
params:
|
|
||||||
show_breadcrumb: true
|
|
||||||
|
|
||||||
sections:
|
|
||||||
- block: collection
|
|
||||||
id: courses
|
|
||||||
content:
|
|
||||||
title: Courses
|
|
||||||
filters:
|
|
||||||
tag: Course
|
|
||||||
kinds:
|
|
||||||
- section
|
|
||||||
design:
|
|
||||||
view: article-grid
|
|
||||||
show_read_time: false
|
|
||||||
show_date: false
|
|
||||||
show_read_more: false
|
|
||||||
columns: 1
|
|
||||||
---
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
---
|
|
||||||
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 >}}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 170 KiB |
@@ -1,38 +0,0 @@
|
|||||||
---
|
|
||||||
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 >}}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
---
|
|
||||||
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 >}}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
---
|
|
||||||
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
|
|
||||||
---
|
|
||||||
```
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
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 >}}
|
|
||||||
Binary file not shown.
@@ -1,202 +0,0 @@
|
|||||||
---
|
|
||||||
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
|
|
||||||
@@ -1,218 +0,0 @@
|
|||||||
---
|
|
||||||
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)
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
---
|
|
||||||
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 |
|
|
||||||
@@ -1,132 +0,0 @@
|
|||||||
---
|
|
||||||
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 🙌
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
---
|
|
||||||
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 */%}}
|
|
||||||
```
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
---
|
|
||||||
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 */>}}
|
|
||||||
````
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
---
|
|
||||||
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
|
|
||||||
---
|
|
||||||
```
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
---
|
|
||||||
linkTitle: Reference
|
|
||||||
title: Reference
|
|
||||||
---
|
|
||||||
|
|
||||||
This section covers reference docs.
|
|
||||||
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
---
|
|
||||||
title: Customizing Hugo
|
|
||||||
linkTitle: Customization
|
|
||||||
weight: 1
|
|
||||||
---
|
|
||||||
|
|
||||||
View the full docs at https://docs.hugoblox.com/getting-started/customize/
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
---
|
|
||||||
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/
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
title: Recent & Upcoming Talks
|
|
||||||
cms_exclude: true
|
|
||||||
#url: talk
|
|
||||||
|
|
||||||
# View
|
|
||||||
view: card
|
|
||||||
|
|
||||||
# Optional cover image (relative to `assets/media/` folder).
|
|
||||||
image:
|
|
||||||
caption: ''
|
|
||||||
filename: ''
|
|
||||||
---
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 606 KiB |
@@ -1,415 +0,0 @@
|
|||||||
---
|
|
||||||
title: "Create Beautiful Presentations with Markdown"
|
|
||||||
|
|
||||||
event: HugoBlox Showcase
|
|
||||||
event_url: https://hugoblox.com
|
|
||||||
|
|
||||||
location: Online & In-Person
|
|
||||||
address:
|
|
||||||
street: 450 Serra Mall
|
|
||||||
city: Stanford
|
|
||||||
region: CA
|
|
||||||
postcode: '94305'
|
|
||||||
country: United States
|
|
||||||
|
|
||||||
summary: Discover how to create stunning, interactive presentations using simple Markdown — no PowerPoint, Keynote, or vendor lock-in required.
|
|
||||||
abstract: |
|
|
||||||
Join us to explore HugoBlox's revolutionary Markdown-based slide system. Create beautiful presentations with code syntax highlighting, math equations, animations, and dual-column layouts. Edit your slides in any text editor, version control them with Git, and present them anywhere with just a browser. Experience true presentation freedom.
|
|
||||||
|
|
||||||
# Talk start and end times.
|
|
||||||
date: '2030-06-01T13:00:00Z'
|
|
||||||
date_end: '2030-06-01T15:00:00Z'
|
|
||||||
all_day: false
|
|
||||||
|
|
||||||
publishDate: '2017-01-01T00:00:00Z'
|
|
||||||
|
|
||||||
authors:
|
|
||||||
- me
|
|
||||||
|
|
||||||
tags:
|
|
||||||
- Markdown
|
|
||||||
- Presentations
|
|
||||||
- Open Science
|
|
||||||
- Academic
|
|
||||||
|
|
||||||
featured: true
|
|
||||||
|
|
||||||
image:
|
|
||||||
caption: 'Presentation freedom with Markdown'
|
|
||||||
focal_point: Right
|
|
||||||
|
|
||||||
links:
|
|
||||||
- icon: brands/github
|
|
||||||
name: Star on GitHub
|
|
||||||
url: https://github.com/HugoBlox/hugo-blox-builder
|
|
||||||
- icon: brands/youtube
|
|
||||||
name: Video Tutorial
|
|
||||||
url: https://www.youtube.com/
|
|
||||||
- icon: book-open
|
|
||||||
name: Documentation
|
|
||||||
url: https://docs.hugoblox.com/guides/slides/
|
|
||||||
|
|
||||||
# Link to your Markdown slides
|
|
||||||
slides: "example"
|
|
||||||
|
|
||||||
projects: []
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎯 Why Markdown Slides?
|
|
||||||
|
|
||||||
> [!SUCCESS] True Presentation Freedom
|
|
||||||
> Unlike PowerPoint or Keynote, your presentations are **future-proof**, **portable**, and completely **under your control**. No proprietary formats, no vendor lock-in, no subscription fees.
|
|
||||||
|
|
||||||
### The Problem with Traditional Slides
|
|
||||||
|
|
||||||
**PowerPoint & Keynote:**
|
|
||||||
- 💸 Expensive licenses or subscriptions
|
|
||||||
- 🔒 Proprietary file formats (`.pptx`, `.key`)
|
|
||||||
- 💻 Platform-specific (Windows/Mac only)
|
|
||||||
- 📦 Large binary files
|
|
||||||
- 🚫 Difficult to version control
|
|
||||||
- 😰 Lost formatting when sharing
|
|
||||||
|
|
||||||
**Google Slides:**
|
|
||||||
- ☁️ Requires internet connection
|
|
||||||
- 🔐 Data stored on Google's servers
|
|
||||||
- 📱 Limited offline editing
|
|
||||||
- 🎨 Formatting breaks when exporting
|
|
||||||
- 🔗 Dependency on Google's platform
|
|
||||||
|
|
||||||
### The Hugo Blox Solution
|
|
||||||
|
|
||||||
> [!TIP] **Markdown Changes Everything**
|
|
||||||
> Write your presentations in simple, human-readable Markdown. Edit anywhere, present anywhere, own forever.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## ✨ What You Get
|
|
||||||
|
|
||||||
### 🎨 Professional Design, Zero Effort
|
|
||||||
|
|
||||||
- **15+ Built-in Themes** — Black, white, sky, league, and more
|
|
||||||
- **Syntax Highlighting** — Beautiful code blocks with 50+ languages
|
|
||||||
- **Math Support** — LaTeX equations render perfectly: $E = mc^2$
|
|
||||||
- **Responsive** — Looks great on any screen size
|
|
||||||
|
|
||||||
### 📝 Write in Plain Text
|
|
||||||
|
|
||||||
````markdown
|
|
||||||
## My Slide Title
|
|
||||||
|
|
||||||
- Point one
|
|
||||||
- Point two
|
|
||||||
- Point three
|
|
||||||
|
|
||||||
```python
|
|
||||||
def hello():
|
|
||||||
return "World!"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
````
|
|
||||||
|
|
||||||
That's it! No complex UI, no formatting headaches.
|
|
||||||
|
|
||||||
### 🔄 Edit Anywhere, Anytime
|
|
||||||
|
|
||||||
> [!IMPORTANT] **Zero Lock-In**
|
|
||||||
> Your slides are just Markdown files. Edit them in:
|
|
||||||
> - **HugoBlox Studio** — Visual editing with live preview
|
|
||||||
> - **VS Code** — With Markdown extensions
|
|
||||||
> - **Obsidian** — Note-taking app that speaks Markdown
|
|
||||||
> - **Typora** — Minimal distraction writing
|
|
||||||
> - **Any text editor** — Even Notepad works!
|
|
||||||
|
|
||||||
{{< button url="https://docs.hugoblox.com/guides/studio/" text="Try HugoBlox Studio" icon="paint-brush" style="secondary" size="md" new_tab="true" rounded="lg" />}}
|
|
||||||
|
|
||||||
### 🎯 Advanced Features
|
|
||||||
|
|
||||||
**Dual Column Layouts:**
|
|
||||||
```markdown
|
|
||||||
<div style="display: flex; gap: 2rem;">
|
|
||||||
<div style="flex: 1;">Column 1</div>
|
|
||||||
<div style="flex: 1;">Column 2</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
**Fragment Animations:**
|
|
||||||
```markdown
|
|
||||||
{{</* fragment */>}}Appear on click!{{</* /fragment */>}}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Speaker Notes:**
|
|
||||||
```markdown
|
|
||||||
Note: Your private notes here
|
|
||||||
(visible in presenter view only)
|
|
||||||
```
|
|
||||||
|
|
||||||
**Vertical Slide Stacks:**
|
|
||||||
Navigate down for sub-topics!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🚀 Getting Started is Easy
|
|
||||||
|
|
||||||
> [!EXAMPLE] **Create Your First Slide Deck in 3 Steps**
|
|
||||||
|
|
||||||
### Step 1: Create Your Slides
|
|
||||||
|
|
||||||
Create `content/slides/my-talk/index.md`:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
---
|
|
||||||
title: "My Amazing Talk"
|
|
||||||
type: slides
|
|
||||||
slides:
|
|
||||||
theme: black
|
|
||||||
---
|
|
||||||
|
|
||||||
# My Amazing Talk
|
|
||||||
### Your Name
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Main Points
|
|
||||||
|
|
||||||
- Point 1
|
|
||||||
- Point 2
|
|
||||||
- Point 3
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Thank You!
|
|
||||||
```
|
|
||||||
|
|
||||||
### Step 2: Link to Your Event
|
|
||||||
|
|
||||||
In your event page (`content/events/my-event/index.md`):
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
---
|
|
||||||
title: "My Conference Presentation"
|
|
||||||
slides: "my-talk" # References the slides folder name
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
### Step 3: Present!
|
|
||||||
|
|
||||||
Your slides are automatically:
|
|
||||||
- ✅ Embedded on the event page
|
|
||||||
- ✅ Available in fullscreen mode (click {{< icon name="arrows-expand" >}} button)
|
|
||||||
- ✅ Accessible at a direct URL
|
|
||||||
- ✅ Keyboard-navigatable (→ ← keys)
|
|
||||||
|
|
||||||
{{< button url="https://docs.hugoblox.com/guides/slides/" text="Read Full Documentation" icon="book-open" style="outline" size="md" align="center" />}}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 💎 Why Academics & Researchers Love It
|
|
||||||
|
|
||||||
> [!QUOTE]
|
|
||||||
> "I can finally version control my presentations with Git, collaborate using GitHub, and never worry about formatting breaking again. Game changer for reproducible research!"
|
|
||||||
> — *Dr. Xin Liu, MIT*
|
|
||||||
|
|
||||||
### Perfect for Research
|
|
||||||
|
|
||||||
- **Version Control** — Track every change with Git
|
|
||||||
- **Collaboration** — Use GitHub pull requests for slide reviews
|
|
||||||
- **Reproducibility** — Slides are plain text, commit them with your code
|
|
||||||
- **Open Science** — Share presentations on GitHub, no barriers
|
|
||||||
- **Citations** — Include BibTeX references easily
|
|
||||||
- **Jupyter Integration** — Embed notebooks and visualizations
|
|
||||||
|
|
||||||
### Perfect for Teaching
|
|
||||||
|
|
||||||
- **Reusable Content** — Mix and match slides across courses
|
|
||||||
- **Student Contributions** — Students can submit slide PRs
|
|
||||||
- **Live Coding** — Syntax highlighting for all languages
|
|
||||||
- **Interactive Examples** — Embed interactive visualizations
|
|
||||||
- **Accessible** — Keyboard navigation, screen reader friendly
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎬 See It In Action
|
|
||||||
|
|
||||||
> [!NOTE]
|
|
||||||
> **Try it now!** The slides embedded above demonstrate all these features:
|
|
||||||
> - Code highlighting with Python
|
|
||||||
> - Mathematical equations with LaTeX
|
|
||||||
> - Dual column layouts (slides 4-6)
|
|
||||||
> - Fragment animations
|
|
||||||
> - Multiple themes
|
|
||||||
>
|
|
||||||
> Click the {{< icon name="arrows-expand" >}} **fullscreen button** (top right) to experience presentation mode!
|
|
||||||
|
|
||||||
### Live Features to Try
|
|
||||||
|
|
||||||
1. **Navigate**: Use arrow keys (→ ←) or click controls
|
|
||||||
2. **Fullscreen**: Click the expand button to go fullscreen
|
|
||||||
3. **Speaker Notes**: Press `S` to open presenter view (try it!)
|
|
||||||
4. **Overview**: Press `ESC` to see all slides at once
|
|
||||||
5. **Search**: Press `/` to search slide content
|
|
||||||
6. **Zoom**: `Alt+Click` to zoom into details
|
|
||||||
|
|
||||||
{{< button url="/slides/example/" text="Open Slides in New Tab" icon="external-link" style="ghost" new_tab="true" />}}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🆚 Comparison
|
|
||||||
|
|
||||||
| Feature | PowerPoint | Google Slides | **Hugo Blox** |
|
|
||||||
|---------|-----------|---------------|---------------|
|
|
||||||
| **Cost** | $159.99/year | Free* | **Free Forever** |
|
|
||||||
| **Format** | Binary (`.pptx`) | Proprietary | **Plain Markdown** |
|
|
||||||
| **Version Control** | ❌ Difficult | ❌ Limited | **✅ Git Native** |
|
|
||||||
| **Offline Editing** | ✅ Yes | ⚠️ Limited | **✅ Fully Offline** |
|
|
||||||
| **Platform Lock-in** | ⚠️ Microsoft | ⚠️ Google | **✅ None** |
|
|
||||||
| **Code Highlighting** | ⚠️ Basic | ⚠️ Limited | **✅ 50+ Languages** |
|
|
||||||
| **Math Equations** | ⚠️ Clunky | ⚠️ Basic | **✅ Full LaTeX** |
|
|
||||||
| **Portability** | ❌ Poor | ❌ Requires Google | **✅ Works Anywhere** |
|
|
||||||
| **Future-Proof** | ❌ Format changes | ⚠️ API changes | **✅ Plain Text Forever** |
|
|
||||||
| **Open Source** | ❌ No | ❌ No | **✅ Yes** |
|
|
||||||
|
|
||||||
> [!SUCCESS]
|
|
||||||
> **Hugo Blox wins on freedom, portability, and long-term sustainability.**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🛠️ Advanced Capabilities
|
|
||||||
|
|
||||||
### Code Blocks with Syntax Highlighting
|
|
||||||
|
|
||||||
```python
|
|
||||||
import torch
|
|
||||||
import torch.nn as nn
|
|
||||||
|
|
||||||
class Transformer(nn.Module):
|
|
||||||
def __init__(self, d_model=512, nhead=8):
|
|
||||||
super().__init__()
|
|
||||||
self.attention = nn.MultiheadAttention(d_model, nhead)
|
|
||||||
|
|
||||||
def forward(self, x):
|
|
||||||
return self.attention(x, x, x)[0]
|
|
||||||
```
|
|
||||||
|
|
||||||
### Mathematical Equations
|
|
||||||
|
|
||||||
Display equations with LaTeX:
|
|
||||||
|
|
||||||
```latex
|
|
||||||
$$
|
|
||||||
\nabla \times \vec{E} = -\frac{\partial \vec{B}}{\partial t}
|
|
||||||
$$
|
|
||||||
|
|
||||||
$$
|
|
||||||
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
|
|
||||||
$$
|
|
||||||
```
|
|
||||||
|
|
||||||
### Dual Column Layouts
|
|
||||||
|
|
||||||
Perfect for before/after comparisons, code + explanation, or image + text:
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
<div style="display: flex; gap: 2rem;">
|
|
||||||
<div style="flex: 1;">Left content</div>
|
|
||||||
<div style="flex: 1;">Right content</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
See slides 4-6 in the embedded presentation above for live examples!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎓 For Educators: Teach the Future
|
|
||||||
|
|
||||||
> [!TIP] **Empower Your Students**
|
|
||||||
> Teaching with Hugo Blox means teaching modern, transferable skills:
|
|
||||||
> - Markdown (used everywhere: GitHub, Notion, Obsidian)
|
|
||||||
> - Version control (essential for careers)
|
|
||||||
> - Web technologies (HTML, CSS)
|
|
||||||
> - Reproducible science practices
|
|
||||||
|
|
||||||
### Course Integration
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
courses/
|
|
||||||
├── ml-101/
|
|
||||||
│ ├── lecture-1/
|
|
||||||
│ │ ├── index.md (slides)
|
|
||||||
│ │ └── notes.md
|
|
||||||
│ ├── lecture-2/
|
|
||||||
│ │ └── index.md
|
|
||||||
│ └── _index.md
|
|
||||||
```
|
|
||||||
|
|
||||||
Each lecture gets its own slide deck, all version controlled, all editable by students as PRs.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🌍 Join the Community
|
|
||||||
|
|
||||||
> [!IMPORTANT] **Built by Academics, for Academics**
|
|
||||||
> Hugo Blox is used by researchers at:
|
|
||||||
> - 🎓 Stanford, MIT, Harvard, Oxford, Cambridge
|
|
||||||
> - 🏢 Google Research, Meta AI, OpenAI
|
|
||||||
> - 🔬 CERN, NASA, NIH
|
|
||||||
> - 🌐 Thousands of universities worldwide
|
|
||||||
|
|
||||||
{{< button url="https://github.com/HugoBlox/hugo-blox-builder" text="Star on GitHub" icon="brands/github" style="primary" size="lg" align="center" rounded="full" />}}
|
|
||||||
|
|
||||||
### Get Help & Connect
|
|
||||||
|
|
||||||
- 📚 [Documentation](https://docs.hugoblox.com/guides/slides/)
|
|
||||||
- 💬 [Discord Community](https://discord.gg/z8wNYzb)
|
|
||||||
- 🐛 [GitHub Issues](https://github.com/HugoBlox/hugo-blox-builder/issues)
|
|
||||||
- 🐦 [Follow @BuildLore](https://twitter.com/BuildLore)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🚀 Ready to Create?
|
|
||||||
|
|
||||||
> [!SUCCESS] **Start Building Beautiful Presentations Today**
|
|
||||||
> No installation required. No account needed. Just Markdown and your creativity.
|
|
||||||
|
|
||||||
{{< button url="https://docs.hugoblox.com/start/" text="Get Started Now" icon="rocket" style="primary" size="xl" align="center" rounded="full" />}}
|
|
||||||
|
|
||||||
{{< button url="https://docs.hugoblox.com/guides/studio/" text="Try HugoBlox Studio" icon="paint-brush" style="secondary" size="lg" align="center" rounded="lg" />}}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📖 Additional Resources
|
|
||||||
|
|
||||||
### Templates & Examples
|
|
||||||
|
|
||||||
- [Academic Slides Template](https://github.com/HugoBlox/theme-academic-cv)
|
|
||||||
|
|
||||||
<!--
|
|
||||||
- [Conference Talk Template](https://github.com/HugoBlox/starter-presentation)
|
|
||||||
- [Course Lecture Template](https://github.com/HugoBlox/starter-course)
|
|
||||||
|
|
||||||
|
|
||||||
### Tutorials
|
|
||||||
|
|
||||||
- [Creating Your First Slide Deck](https://docs.hugoblox.com/tutorial/slides/)
|
|
||||||
- [Advanced Slide Layouts](https://docs.hugoblox.com/reference/slides/)
|
|
||||||
- [Customizing Themes](https://docs.hugoblox.com/customization/)
|
|
||||||
- [Using HugoBlox Studio](https://docs.hugoblox.com/studio/)
|
|
||||||
-->
|
|
||||||
|
|
||||||
### Tips & Tricks
|
|
||||||
|
|
||||||
> [!TIP] **Pro Tips for Better Presentations**
|
|
||||||
> 1. Keep slides simple — one idea per slide
|
|
||||||
> 2. Use dual columns for comparisons
|
|
||||||
> 3. Add speaker notes with `Note:` prefix
|
|
||||||
> 4. Test presenter view before your talk
|
|
||||||
> 5. Use fragments to control pacing
|
|
||||||
> 6. Version control your slides with Git
|
|
||||||
> 7. Share source files for reproducibility
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Have questions?** Check out the [FAQ](https://docs.hugoblox.com/guides/slides/) or [ask the community](https://discord.gg/z8wNYzb)!
|
|
||||||
|
|
||||||
**Want to contribute?** Hugo Blox is open source! [Contributions welcome](https://github.com/HugoBlox/hugo-blox-builder/blob/main/CONTRIBUTING.md).
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
---
|
|
||||||
title: 'Experience'
|
|
||||||
date: 2023-10-24
|
|
||||||
type: landing
|
|
||||||
|
|
||||||
design:
|
|
||||||
spacing: '5rem'
|
|
||||||
|
|
||||||
# Note: `username` refers to the user's folder name in `content/authors/`
|
|
||||||
|
|
||||||
# Page sections
|
|
||||||
sections:
|
|
||||||
- block: resume-experience
|
|
||||||
content:
|
|
||||||
username: me
|
|
||||||
design:
|
|
||||||
# Hugo date format
|
|
||||||
date_format: 'January 2006'
|
|
||||||
# Education or Experience section first?
|
|
||||||
is_education_first: false
|
|
||||||
- block: resume-skills
|
|
||||||
content:
|
|
||||||
title: Skills & Hobbies
|
|
||||||
username: me
|
|
||||||
- block: resume-awards
|
|
||||||
content:
|
|
||||||
title: Awards
|
|
||||||
username: me
|
|
||||||
- block: resume-languages
|
|
||||||
content:
|
|
||||||
title: Languages
|
|
||||||
username: me
|
|
||||||
---
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
@@ -1,15 +0,0 @@
|
|||||||
---
|
|
||||||
title: Pandas
|
|
||||||
date: 2023-10-26
|
|
||||||
links:
|
|
||||||
- type: site
|
|
||||||
url: https://github.com/pandas-dev/pandas
|
|
||||||
tags:
|
|
||||||
- Hugo
|
|
||||||
- HugoBlox
|
|
||||||
- Markdown
|
|
||||||
---
|
|
||||||
|
|
||||||
Flexible and powerful data analysis / manipulation library for Python, providing labeled data structures.
|
|
||||||
|
|
||||||
<!--more-->
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
@@ -1,15 +0,0 @@
|
|||||||
---
|
|
||||||
title: PyTorch
|
|
||||||
date: 2023-10-26
|
|
||||||
links:
|
|
||||||
- type: site
|
|
||||||
url: https://github.com/pytorch/pytorch
|
|
||||||
tags:
|
|
||||||
- Hugo
|
|
||||||
- HugoBlox
|
|
||||||
- Markdown
|
|
||||||
---
|
|
||||||
|
|
||||||
PyTorch is a Python package that provides tensor computation (like NumPy) with strong GPU acceleration.
|
|
||||||
|
|
||||||
<!--more-->
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
@@ -1,15 +0,0 @@
|
|||||||
---
|
|
||||||
title: scikit-learn
|
|
||||||
date: 2023-10-26
|
|
||||||
links:
|
|
||||||
- type: site
|
|
||||||
url: https://github.com/scikit-learn/scikit-learn
|
|
||||||
tags:
|
|
||||||
- Hugo
|
|
||||||
- HugoBlox
|
|
||||||
- Markdown
|
|
||||||
---
|
|
||||||
|
|
||||||
scikit-learn is a Python module for machine learning built on top of SciPy and is distributed under the 3-Clause BSD license.
|
|
||||||
|
|
||||||
<!--more-->
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
---
|
|
||||||
title: Publications
|
|
||||||
cms_exclude: true
|
|
||||||
|
|
||||||
# View.
|
|
||||||
view: citation
|
|
||||||
|
|
||||||
# Optional header image (relative to `static/media/` folder).
|
|
||||||
banner:
|
|
||||||
caption: ''
|
|
||||||
image: ''
|
|
||||||
---
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
@inproceedings{example1,
|
|
||||||
title={An example conference paper},
|
|
||||||
author={Bighetti, Nelson and Ford, Robert},
|
|
||||||
booktitle={Source Themes Conference},
|
|
||||||
pages={1--6},
|
|
||||||
year={2013},
|
|
||||||
organization={IEEE}
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 305 KiB |
@@ -1,90 +0,0 @@
|
|||||||
---
|
|
||||||
title: 'An example conference paper'
|
|
||||||
|
|
||||||
# Authors
|
|
||||||
# If you created a profile for a user (e.g. the default `me` user), write the username (folder name) here
|
|
||||||
# and it will be replaced with their full name and linked to their profile.
|
|
||||||
authors:
|
|
||||||
- me
|
|
||||||
- Robert Ford
|
|
||||||
|
|
||||||
# Author notes (optional)
|
|
||||||
author_notes:
|
|
||||||
- 'Equal contribution'
|
|
||||||
- 'Equal contribution'
|
|
||||||
|
|
||||||
date: '2013-07-01T00:00:00Z'
|
|
||||||
|
|
||||||
# Schedule page publish date (NOT publication's date).
|
|
||||||
publishDate: '2017-01-01T00:00:00Z'
|
|
||||||
|
|
||||||
# Publication type.
|
|
||||||
# Accepts a single type but formatted as a YAML list (for Hugo requirements).
|
|
||||||
# Enter a publication type from the CSL standard.
|
|
||||||
publication_types: ['paper-conference']
|
|
||||||
|
|
||||||
# Publication name and optional abbreviated publication name.
|
|
||||||
publication: In *Hugo Blox Builder Conference*
|
|
||||||
publication_short: In *ICW*
|
|
||||||
|
|
||||||
abstract: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere tellus ac convallis placerat. Proin tincidunt magna sed ex sollicitudin condimentum. Sed ac faucibus dolor, scelerisque sollicitudin nisi. Cras purus urna, suscipit quis sapien eu, pulvinar tempor diam. Quisque risus orci, mollis id ante sit amet, gravida egestas nisl. Sed ac tempus magna. Proin in dui enim. Donec condimentum, sem id dapibus fringilla, tellus enim condimentum arcu, nec volutpat est felis vel metus. Vestibulum sit amet erat at nulla eleifend gravida.
|
|
||||||
|
|
||||||
# Summary. An optional shortened abstract.
|
|
||||||
summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere tellus ac convallis placerat. Proin tincidunt magna sed ex sollicitudin condimentum.
|
|
||||||
|
|
||||||
tags:
|
|
||||||
- Large Language Models
|
|
||||||
|
|
||||||
# Display this page in the Featured widget?
|
|
||||||
featured: true
|
|
||||||
|
|
||||||
# Standard identifiers for auto-linking
|
|
||||||
hugoblox:
|
|
||||||
ids:
|
|
||||||
doi: 10.5555/123456
|
|
||||||
|
|
||||||
# Custom links
|
|
||||||
links:
|
|
||||||
- type: pdf
|
|
||||||
url: ""
|
|
||||||
- type: code
|
|
||||||
url: https://github.com/HugoBlox/hugo-blox-builder
|
|
||||||
- type: dataset
|
|
||||||
url: https://github.com/HugoBlox/hugo-blox-builder
|
|
||||||
- type: slides
|
|
||||||
url: https://www.slideshare.net/
|
|
||||||
- type: source
|
|
||||||
url: https://github.com/HugoBlox/hugo-blox-builder
|
|
||||||
- type: video
|
|
||||||
url: https://youtube.com
|
|
||||||
|
|
||||||
# Featured image
|
|
||||||
# To use, add an image named `featured.jpg/png` to your page's folder.
|
|
||||||
image:
|
|
||||||
caption: 'Image credit: [**Unsplash**](https://unsplash.com/photos/pLCdAaMFLTE)'
|
|
||||||
focal_point: ''
|
|
||||||
preview_only: false
|
|
||||||
|
|
||||||
# Associated Projects (optional).
|
|
||||||
# Associate this publication with one or more of your projects.
|
|
||||||
# Simply enter your project's folder or file name without extension.
|
|
||||||
# E.g. `internal-project` references `content/project/internal-project/index.md`.
|
|
||||||
# Otherwise, set `projects: []`.
|
|
||||||
projects:
|
|
||||||
- example
|
|
||||||
|
|
||||||
# Slides (optional).
|
|
||||||
# Associate this publication with Markdown slides.
|
|
||||||
# Simply enter your slide deck's filename without extension.
|
|
||||||
# E.g. `slides: "example"` references `content/slides/example/index.md`.
|
|
||||||
# Otherwise, set `slides: ""`.
|
|
||||||
slides: ""
|
|
||||||
---
|
|
||||||
|
|
||||||
> [!NOTE]
|
|
||||||
> Click the _Cite_ button above to demo the feature to enable visitors to import publication metadata into their reference management software.
|
|
||||||
|
|
||||||
> [!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/).
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
@article{example2,
|
|
||||||
title = {An example journal article},
|
|
||||||
author={Bighetti, Nelson and Ford, Robert},
|
|
||||||
journal = {Journal of Source Themes},
|
|
||||||
year = 2015,
|
|
||||||
volume = 1,
|
|
||||||
number = 1
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 209 KiB |
@@ -1,82 +0,0 @@
|
|||||||
---
|
|
||||||
title: "An example journal article"
|
|
||||||
authors:
|
|
||||||
- me
|
|
||||||
- Robert Ford
|
|
||||||
author_notes:
|
|
||||||
- "Equal contribution"
|
|
||||||
- "Equal contribution"
|
|
||||||
date: "2015-09-01T00:00:00Z"
|
|
||||||
|
|
||||||
# Schedule page publish date (NOT publication's date).
|
|
||||||
publishDate: "2017-01-01T00:00:00Z"
|
|
||||||
|
|
||||||
# Publication type.
|
|
||||||
# Accepts a single type but formatted as a YAML list (for Hugo requirements).
|
|
||||||
# Enter a publication type from the CSL standard.
|
|
||||||
publication_types: ["article-journal"]
|
|
||||||
|
|
||||||
# Publication name and optional abbreviated publication name.
|
|
||||||
publication: "*Journal of Source Themes, 1*(1)"
|
|
||||||
publication_short: ""
|
|
||||||
|
|
||||||
abstract: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere tellus ac convallis placerat. Proin tincidunt magna sed ex sollicitudin condimentum. Sed ac faucibus dolor, scelerisque sollicitudin nisi. Cras purus urna, suscipit quis sapien eu, pulvinar tempor diam. Quisque risus orci, mollis id ante sit amet, gravida egestas nisl. Sed ac tempus magna. Proin in dui enim. Donec condimentum, sem id dapibus fringilla, tellus enim condimentum arcu, nec volutpat est felis vel metus. Vestibulum sit amet erat at nulla eleifend gravida.
|
|
||||||
|
|
||||||
# Summary. An optional shortened abstract.
|
|
||||||
summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere tellus ac convallis placerat. Proin tincidunt magna sed ex sollicitudin condimentum.
|
|
||||||
|
|
||||||
tags:
|
|
||||||
- Source Themes
|
|
||||||
featured: false
|
|
||||||
|
|
||||||
hugoblox:
|
|
||||||
ids:
|
|
||||||
arxiv: 1512.04133v1
|
|
||||||
|
|
||||||
links:
|
|
||||||
- type: pdf
|
|
||||||
url: http://arxiv.org/pdf/1512.04133v1
|
|
||||||
- type: code
|
|
||||||
url: https://github.com/HugoBlox/hugo-blox-builder
|
|
||||||
- type: dataset
|
|
||||||
url: ""
|
|
||||||
- type: poster
|
|
||||||
url: ""
|
|
||||||
- type: project
|
|
||||||
url: ""
|
|
||||||
- type: slides
|
|
||||||
url: https://www.slideshare.net/
|
|
||||||
- type: source
|
|
||||||
url: ""
|
|
||||||
- type: video
|
|
||||||
url: ""
|
|
||||||
|
|
||||||
# Featured image
|
|
||||||
# To use, add an image named `featured.jpg/png` to your page's folder.
|
|
||||||
image:
|
|
||||||
caption: 'Image credit: [**Unsplash**](https://unsplash.com/photos/jdD8gXaTZsc)'
|
|
||||||
focal_point: ""
|
|
||||||
preview_only: false
|
|
||||||
|
|
||||||
# Associated Projects (optional).
|
|
||||||
# Associate this publication with one or more of your projects.
|
|
||||||
# Simply enter your project's folder or file name without extension.
|
|
||||||
# E.g. `internal-project` references `content/project/internal-project/index.md`.
|
|
||||||
# Otherwise, set `projects: []`.
|
|
||||||
projects: []
|
|
||||||
|
|
||||||
# Slides (optional).
|
|
||||||
# Associate this publication with Markdown slides.
|
|
||||||
# Simply enter your slide deck's filename without extension.
|
|
||||||
# E.g. `slides: "example"` references `content/slides/example/index.md`.
|
|
||||||
# Otherwise, set `slides: ""`.
|
|
||||||
slides: ""
|
|
||||||
---
|
|
||||||
|
|
||||||
> [!NOTE]
|
|
||||||
> Click the *Cite* button above to demo the feature to enable visitors to import publication metadata into their reference management software.
|
|
||||||
|
|
||||||
> [!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/).
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 216 KiB |
@@ -1,81 +0,0 @@
|
|||||||
---
|
|
||||||
title: "An example preprint / working paper"
|
|
||||||
authors:
|
|
||||||
- me
|
|
||||||
date: "2019-04-07T00:00:00Z"
|
|
||||||
|
|
||||||
# Schedule page publish date (NOT publication's date).
|
|
||||||
publishDate: "2017-01-01T00:00:00Z"
|
|
||||||
|
|
||||||
# Publication type.
|
|
||||||
# Accepts a single type but formatted as a YAML list (for Hugo requirements).
|
|
||||||
# Enter a publication type from the CSL standard.
|
|
||||||
publication_types: ["article"]
|
|
||||||
|
|
||||||
# Publication name and optional abbreviated publication name.
|
|
||||||
publication: ""
|
|
||||||
publication_short: ""
|
|
||||||
|
|
||||||
abstract: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere tellus ac convallis placerat. Proin tincidunt magna sed ex sollicitudin condimentum. Sed ac faucibus dolor, scelerisque sollicitudin nisi. Cras purus urna, suscipit quis sapien eu, pulvinar tempor diam. Quisque risus orci, mollis id ante sit amet, gravida egestas nisl. Sed ac tempus magna. Proin in dui enim. Donec condimentum, sem id dapibus fringilla, tellus enim condimentum arcu, nec volutpat est felis vel metus. Vestibulum sit amet erat at nulla eleifend gravida.
|
|
||||||
|
|
||||||
# Summary. An optional shortened abstract.
|
|
||||||
summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere tellus ac convallis placerat. Proin tincidunt magna sed ex sollicitudin condimentum.
|
|
||||||
|
|
||||||
tags:
|
|
||||||
- Large Language Models
|
|
||||||
|
|
||||||
featured: true
|
|
||||||
|
|
||||||
hugoblox:
|
|
||||||
ids:
|
|
||||||
arxiv: 1512.04133v1
|
|
||||||
|
|
||||||
links:
|
|
||||||
- type: preprint
|
|
||||||
provider: arxiv
|
|
||||||
id: 1512.04133v1
|
|
||||||
- type: code
|
|
||||||
url: https://github.com/HugoBlox/hugo-blox-builder
|
|
||||||
- type: slides
|
|
||||||
url: https://www.slideshare.net/
|
|
||||||
- type: dataset
|
|
||||||
url: "#"
|
|
||||||
- type: poster
|
|
||||||
url: "#"
|
|
||||||
- type: source
|
|
||||||
url: "#"
|
|
||||||
- type: video
|
|
||||||
url: https://youtube.com
|
|
||||||
- type: custom
|
|
||||||
label: Custom Link
|
|
||||||
url: http://example.org
|
|
||||||
|
|
||||||
# Featured image
|
|
||||||
# To use, add an image named `featured.jpg/png` to your page's folder.
|
|
||||||
image:
|
|
||||||
caption: 'Image credit: [**Unsplash**](https://unsplash.com/photos/s9CC2SKySJM)'
|
|
||||||
focal_point: ""
|
|
||||||
preview_only: false
|
|
||||||
|
|
||||||
# Associated Projects (optional).
|
|
||||||
# Associate this publication with one or more of your projects.
|
|
||||||
# Simply enter your project's folder or file name without extension.
|
|
||||||
# E.g. `internal-project` references `content/project/internal-project/index.md`.
|
|
||||||
# Otherwise, set `projects: []`.
|
|
||||||
projects:
|
|
||||||
- internal-project
|
|
||||||
|
|
||||||
# Slides (optional).
|
|
||||||
# Associate this publication with Markdown slides.
|
|
||||||
# Simply enter your slide deck's filename without extension.
|
|
||||||
# E.g. `slides: "example"` references `content/slides/example/index.md`.
|
|
||||||
# Otherwise, set `slides: ""`.
|
|
||||||
slides: ""
|
|
||||||
---
|
|
||||||
|
|
||||||
This work is driven by the results in my [previous paper](/publications/conference-paper/) on LLMs.
|
|
||||||
|
|
||||||
> [!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/).
|
|
||||||
@@ -1,320 +0,0 @@
|
|||||||
---
|
|
||||||
title: "Example Talk: Recent Work"
|
|
||||||
date: 2024-01-01
|
|
||||||
# `type: slides` is inferred from folder, but can be set explicitly:
|
|
||||||
type: slides
|
|
||||||
slides:
|
|
||||||
theme: black
|
|
||||||
highlight_style: dracula
|
|
||||||
diagram: true # Enable Mermaid diagrams
|
|
||||||
reveal_options:
|
|
||||||
controls: true
|
|
||||||
progress: true
|
|
||||||
slideNumber: true
|
|
||||||
hash: true
|
|
||||||
---
|
|
||||||
|
|
||||||
# Example Talk
|
|
||||||
### Dr. Alex Johnson · Meta AI
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Research Overview
|
|
||||||
|
|
||||||
- Multimodal LLMs
|
|
||||||
- Efficient training
|
|
||||||
- Responsible AI
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Code & Math
|
|
||||||
|
|
||||||
```python
|
|
||||||
def score(x: int) -> int:
|
|
||||||
return x * x
|
|
||||||
```
|
|
||||||
|
|
||||||
$$
|
|
||||||
E = mc^2
|
|
||||||
$$
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Dual Column Layout
|
|
||||||
|
|
||||||
<div class="r-hstack">
|
|
||||||
|
|
||||||
<div style="flex: 1; padding-right: 1rem;">
|
|
||||||
|
|
||||||
### Left Column
|
|
||||||
|
|
||||||
- Point A
|
|
||||||
- Point B
|
|
||||||
- Point C
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="flex: 1; padding-left: 1rem;">
|
|
||||||
|
|
||||||
### Right Column
|
|
||||||
|
|
||||||
- Detail 1
|
|
||||||
- Detail 2
|
|
||||||
- Detail 3
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- Alternative: Asymmetric columns -->
|
|
||||||
|
|
||||||
<div style="display: flex; gap: 2rem;">
|
|
||||||
|
|
||||||
<div style="flex: 2;">
|
|
||||||
|
|
||||||
### Main Content (2/3 width)
|
|
||||||
|
|
||||||
This column takes up twice the space of the right column.
|
|
||||||
|
|
||||||
```python
|
|
||||||
def example():
|
|
||||||
return "code works too"
|
|
||||||
```
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="flex: 1;">
|
|
||||||
|
|
||||||
### Sidebar (1/3 width)
|
|
||||||
|
|
||||||
> **Note**
|
|
||||||
> Key points in smaller column
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Image + Text Layout
|
|
||||||
|
|
||||||
<div class="r-hstack" style="align-items: center;">
|
|
||||||
|
|
||||||
<div style="flex: 1;">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="flex: 1; padding-left: 2rem;">
|
|
||||||
|
|
||||||
### Results
|
|
||||||
|
|
||||||
- 95% accuracy
|
|
||||||
- 10x faster inference
|
|
||||||
- Lower memory usage
|
|
||||||
|
|
||||||
{{< fragment >}}**Breakthrough!**{{< /fragment >}}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Speaker Notes
|
|
||||||
|
|
||||||
Press **S** to open presenter view with notes!
|
|
||||||
|
|
||||||
This slide has hidden speaker notes below.
|
|
||||||
|
|
||||||
Note:
|
|
||||||
- This is a **speaker note** (only visible in presenter view)
|
|
||||||
- Press `S` key to open presenter console
|
|
||||||
- Perfect for remembering key talking points
|
|
||||||
- Can include reminders, timing, references
|
|
||||||
- Supports **Markdown** formatting too!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Progressive Reveals
|
|
||||||
|
|
||||||
Content appears step-by-step:
|
|
||||||
|
|
||||||
{{< fragment >}}First point appears{{< /fragment >}}
|
|
||||||
|
|
||||||
{{< fragment >}}Then the second point{{< /fragment >}}
|
|
||||||
|
|
||||||
{{< fragment >}}Finally the conclusion{{< /fragment >}}
|
|
||||||
|
|
||||||
{{< fragment class="highlight-red" >}}This one can be **highlighted**!{{< /fragment >}}
|
|
||||||
|
|
||||||
Note:
|
|
||||||
Use fragments to control pacing and maintain audience attention. Each fragment appears on click.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Diagrams with Mermaid
|
|
||||||
|
|
||||||
```mermaid
|
|
||||||
graph LR
|
|
||||||
A[Research Question] --> B{Hypothesis}
|
|
||||||
B -->|Valid| C[Experiment]
|
|
||||||
B -->|Invalid| D[Revise]
|
|
||||||
C --> E[Analyze Data]
|
|
||||||
E --> F{Significant?}
|
|
||||||
F -->|Yes| G[Publish]
|
|
||||||
F -->|No| D
|
|
||||||
```
|
|
||||||
|
|
||||||
Perfect for: Workflows, architectures, processes
|
|
||||||
|
|
||||||
Note:
|
|
||||||
Mermaid diagrams are created from simple text. They're version-controllable and edit anywhere!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Research Results
|
|
||||||
|
|
||||||
| Model | Accuracy | Speed | Memory |
|
|
||||||
|-------|----------|-------|--------|
|
|
||||||
| Baseline | 87.3% | 1.0x | 2GB |
|
|
||||||
| Ours (v1) | 92.1% | 1.5x | 1.8GB |
|
|
||||||
| **Ours (v2)** | **95.8%** | **2.3x** | **1.2GB** |
|
|
||||||
|
|
||||||
> **Key Finding:** 8.5% improvement over baseline with 40% memory reduction
|
|
||||||
|
|
||||||
Note:
|
|
||||||
Tables are perfect for comparative results. Markdown tables are simple and version-control friendly.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
{{< slide background-color="#1e3a8a" >}}
|
|
||||||
|
|
||||||
## Custom Backgrounds
|
|
||||||
|
|
||||||
This slide has a **blue background**!
|
|
||||||
|
|
||||||
You can customize:
|
|
||||||
- Background colors
|
|
||||||
- Background images
|
|
||||||
- Gradients
|
|
||||||
- Videos (yes, really!)
|
|
||||||
|
|
||||||
Use `{{</* slide background-color="#hex" */>}}`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Vertical Navigation
|
|
||||||
|
|
||||||
**There's more content below! ⬇️**
|
|
||||||
|
|
||||||
Press the **Down Arrow** to see substeps.
|
|
||||||
|
|
||||||
Note:
|
|
||||||
This demonstrates Reveal.js's vertical slide feature. Great for optional details or deep dives.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
{{< slide id="substep-1" >}}
|
|
||||||
|
|
||||||
### Substep 1: Details
|
|
||||||
|
|
||||||
This is additional content in a vertical stack.
|
|
||||||
|
|
||||||
Navigate down for more, or right to skip to next topic →
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
{{< slide id="substep-2" >}}
|
|
||||||
|
|
||||||
### Substep 2: More Details
|
|
||||||
|
|
||||||
Even more detailed information.
|
|
||||||
|
|
||||||
Press **Up Arrow** to go back, or **Right Arrow** to continue.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Citations & Quotes
|
|
||||||
|
|
||||||
> "The best way to predict the future is to invent it."
|
|
||||||
>
|
|
||||||
> — Alan Kay
|
|
||||||
|
|
||||||
Or reference research:
|
|
||||||
|
|
||||||
> Recent work by Smith et al. (2024) demonstrates that Markdown-based slides improve reproducibility by 78% compared to proprietary formats[^1].
|
|
||||||
|
|
||||||
[^1]: Smith, J. et al. (2024). *Open Science Presentations*. Nature Methods.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Media: YouTube Videos
|
|
||||||
|
|
||||||
{{< youtube dQw4w9WgXcQ >}}
|
|
||||||
|
|
||||||
Note:
|
|
||||||
Embed YouTube videos with just the video ID. Perfect for demos, tutorials, or interviews.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Media: All Options
|
|
||||||
|
|
||||||
Embed various media types with simple shortcodes:
|
|
||||||
|
|
||||||
- **YouTube**: `{{</* youtube VIDEO_ID */>}}`
|
|
||||||
- **Bilibili**: `{{</* bilibili id="BV1..." */>}}`
|
|
||||||
- **Local videos**: `{{</* video src="file.mp4" controls="yes" */>}}`
|
|
||||||
- **Audio**: `{{</* audio src="file.mp3" */>}}`
|
|
||||||
|
|
||||||
Perfect for demos, interviews, tutorials, or podcasts!
|
|
||||||
|
|
||||||
Note:
|
|
||||||
All media types work seamlessly in slides. Just use the appropriate shortcode.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Interactive Elements
|
|
||||||
|
|
||||||
Try these keyboard shortcuts:
|
|
||||||
|
|
||||||
- `→` `←` : Navigate slides
|
|
||||||
- `↓` `↑` : Vertical navigation
|
|
||||||
- `S` : Speaker notes
|
|
||||||
- `F` : Fullscreen
|
|
||||||
- `O` : Overview mode
|
|
||||||
- `/` : Search
|
|
||||||
- `ESC` : Exit modes
|
|
||||||
|
|
||||||
---
|
|
||||||
<!-- hide -->
|
|
||||||
## Hidden Slide Demo (Inline Comment)
|
|
||||||
|
|
||||||
This slide is hidden using the `<!-- hide -->` comment method.
|
|
||||||
|
|
||||||
Perfect for:
|
|
||||||
- Speaker-only content
|
|
||||||
- Backup slides
|
|
||||||
- Work-in-progress content
|
|
||||||
|
|
||||||
Note:
|
|
||||||
This slide won't appear in the presentation but remains in source for reference.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Thanks
|
|
||||||
|
|
||||||
### Questions?
|
|
||||||
|
|
||||||
- 🌐 Website: [hugoblox.com](https://hugoblox.com)
|
|
||||||
- 🐦 X/Twitter: [@BuildLore](https://twitter.com/BuildLore)
|
|
||||||
- 💬 Discord: [Join Community](https://discord.gg/z8wNYzb)
|
|
||||||
- ⭐ GitHub: [Star us!](https://github.com/HugoBlox/hugo-blox-builder)
|
|
||||||
|
|
||||||
**All slides created with Markdown** • No vendor lock-in • Edit anywhere
|
|
||||||
|
|
||||||
Note:
|
|
||||||
Thank you for your attention! Feel free to reach out with questions or contributions.
|
|
||||||
@@ -2,42 +2,25 @@ schema: hugoblox/author/v1
|
|||||||
slug: me
|
slug: me
|
||||||
is_owner: true
|
is_owner: true
|
||||||
name:
|
name:
|
||||||
display: Dr. Alex Johnson
|
display: Evan Scamehorn
|
||||||
given: Alex
|
given: Evan
|
||||||
family: Johnson
|
family: Scamehorn
|
||||||
alternate: '' # Example: 王伟
|
|
||||||
pronunciation: '' # Example: Wáng Wěi
|
|
||||||
pronouns: he/him
|
pronouns: he/him
|
||||||
postnominals:
|
|
||||||
- PhD
|
|
||||||
- MIEEE
|
|
||||||
status:
|
status:
|
||||||
icon: "☕️"
|
icon: "☕️"
|
||||||
role: Senior AI Research Scientist
|
role: CS Student at UW - Madison
|
||||||
bio: |
|
bio: |
|
||||||
Alex Johnson is a Senior AI Research Scientist at Meta AI. His research
|
I'm a computer science student at UW - Madison, interested in deep learning and
|
||||||
has been published in top conferences like NeurIPS and ICML, with over
|
devops.
|
||||||
10,000 citations. Alex is passionate about pushing the boundaries of AI
|
|
||||||
while ensuring ethical development.
|
|
||||||
|
|
||||||
affiliations:
|
|
||||||
- name: Meta AI
|
|
||||||
url: https://ai.meta.com/
|
|
||||||
|
|
||||||
links:
|
links:
|
||||||
- icon: at-symbol
|
- icon: envelope
|
||||||
url: mailto:alex.johnson@example.com
|
url: mailto:ejscam2@gmail.com
|
||||||
label: E-mail Me
|
label: E-mail Me
|
||||||
- icon: brands/x
|
|
||||||
url: https://x.com/example
|
|
||||||
- icon: brands/github
|
- icon: brands/github
|
||||||
url: https://github.com/example
|
url: https://github.com/evan203
|
||||||
- icon: brands/linkedin
|
- icon: brands/linkedin
|
||||||
url: https://www.linkedin.com/in/example/
|
url: https://www.linkedin.com/in/evan-scamehorn-b66a4226a/
|
||||||
- icon: academicons/google-scholar
|
|
||||||
url: https://scholar.google.com/citations?user=example
|
|
||||||
- icon: academicons/orcid
|
|
||||||
url: https://orcid.org/0000-0002-1825-0097
|
|
||||||
|
|
||||||
interests:
|
interests:
|
||||||
- Large Language Models
|
- Large Language Models
|
||||||
@@ -46,24 +29,10 @@ interests:
|
|||||||
- AI Ethics
|
- AI Ethics
|
||||||
|
|
||||||
education:
|
education:
|
||||||
- degree: PhD Computer Science
|
|
||||||
institution: Stanford University
|
|
||||||
start: 2015-09-01
|
|
||||||
end: 2019-06-30
|
|
||||||
summary: |
|
|
||||||
Thesis on scaling laws for neural language models. Published 5 papers in NeurIPS and ICML.
|
|
||||||
button:
|
|
||||||
text: Download dissertation
|
|
||||||
url: /resume.pdf
|
|
||||||
icon: hero/arrow-down-tray
|
|
||||||
- degree: MS Computer Science
|
|
||||||
institution: Carnegie Mellon University
|
|
||||||
start: 2013-09-01
|
|
||||||
end: 2015-05-31
|
|
||||||
- degree: BS Computer Science
|
- degree: BS Computer Science
|
||||||
institution: MIT
|
institution: Univeristy of Wisconsin - Madison
|
||||||
start: 2009-09-01
|
start: 2024
|
||||||
end: 2013-05-31
|
end: 2028
|
||||||
|
|
||||||
experience:
|
experience:
|
||||||
- role: Senior AI Research Scientist
|
- role: Senior AI Research Scientist
|
||||||
|
|||||||
6
go.sum
Normal file
6
go.sum
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-netlify v0.0.0-20251215001347-c72b26de8d15 h1:kK7WGIwmMcQS1DiIkpyTwToBf3som+dL7EraGgpC88g=
|
||||||
|
github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-netlify v0.0.0-20251215001347-c72b26de8d15/go.mod h1:C7jfxMLv1bEUqbM9XDSmEpfOpS8w06OgqNDEcbuRgL4=
|
||||||
|
github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-reveal v0.0.0-20251214235550-d15979197a2a h1:CLPCH2xu/TmZsir9sMAtg0sbBIjMhzp+LwVrrviub1k=
|
||||||
|
github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-reveal v0.0.0-20251214235550-d15979197a2a/go.mod h1:rc3iv07XFylONQor5A4GdjTffe4asUSdnC1VgzmQ5+s=
|
||||||
|
github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind v0.0.0-20251214032829-73b5f7d5758a h1:2JpJHmboUMvlW8ZHLnc2Zb9PlULB0huwYq3/DfjEU6k=
|
||||||
|
github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind v0.0.0-20251214032829-73b5f7d5758a/go.mod h1:blQEm4Y+xVVX9OTVDnO+p0MwHTy3hQdpU6pZK659DiI=
|
||||||
1186
package-lock.json
generated
Normal file
1186
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user