mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-14 04:15:40 +00:00
feat(slides): add persistent branding with per-slide visibility control
- Add branding overlays: logo, title, author, and footer text - Use Reveal.js theme CSS variables for automatic color adaptation - Inline SVGs for currentColor support on any theme - Per-slide control via HTML comments: - <!-- no-branding -->: hide all elements - <!-- no-header -->: hide logo + title - <!-- no-footer -->: hide author + footer - Fix body-level CSS selectors for proper visibility - Add comprehensive documentation in example slides
This commit is contained in:
George Cushen committed
1 parent
1352d89867
commit
aa9edea5df
16 files changed
+902
-17
No files matched your search
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Markdown</title><path fill="currentColor" d="M22.27 19.385H1.73A1.73 1.73 0 010 17.655V6.345a1.73 1.73 0 011.73-1.73h20.54A1.73 1.73 0 0124 6.345v11.308a1.73 1.73 0 01-1.73 1.731zM5.769 15.923v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.46v7.847zM21.232 12h-2.309V8.077h-2.307V12h-2.308l3.461 4.039z"/></svg>
|
||||
|
After Width: | Height: | Size: 421 B |
@@ -1 +0,0 @@
|
||||
<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 104L87 158L175 125L262 131L349 163L436 163L524 168L611 174L698 136L785 104L873 125L960 147L960 0L873 0L785 0L698 0L611 0L524 0L436 0L349 0L262 0L175 0L87 0L0 0Z" fill="#003223"></path><path d="M0 185L87 195L175 212L262 217L349 206L436 239L524 233L611 222L698 185L785 147L873 190L960 190L960 145L873 123L785 102L698 134L611 172L524 166L436 161L349 161L262 129L175 123L87 156L0 102Z" fill="#013b2d"></path><path d="M0 228L87 249L175 287L262 309L349 303L436 336L524 298L611 282L698 260L785 255L873 287L960 255L960 188L873 188L785 145L698 183L611 220L524 231L436 237L349 204L262 215L175 210L87 193L0 183Z" fill="#014537"></path><path d="M0 357L87 395L175 347L262 368L349 428L436 449L524 363L611 390L698 352L785 379L873 368L960 401L960 253L873 285L785 253L698 258L611 280L524 296L436 334L349 301L262 307L175 285L87 247L0 226Z" fill="#024f42"></path><path d="M0 541L87 541L175 541L262 541L349 541L436 541L524 541L611 541L698 541L785 541L873 541L960 541L960 399L873 366L785 377L698 350L611 388L524 361L436 447L349 426L262 366L175 345L87 393L0 355Z" fill="#02594e"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@@ -5,16 +5,45 @@ date: 2024-01-01
|
||||
type: slides
|
||||
summary: "A quick tour of recent research highlights: multimodal LLMs, efficient training, and responsible AI."
|
||||
slides:
|
||||
theme: black
|
||||
highlight_style: dracula
|
||||
diagram: true # Enable Mermaid diagrams
|
||||
theme: black # Options: black, white, league, beige, sky, night, serif, simple, solarized
|
||||
highlight_style: dracula # Code syntax highlighting theme
|
||||
diagram: true # Enable Mermaid diagrams for flowcharts, etc.
|
||||
reveal_options:
|
||||
controls: true
|
||||
progress: true
|
||||
slideNumber: true
|
||||
hash: true
|
||||
controls: true # Show navigation arrows
|
||||
progress: true # Show progress bar
|
||||
slideNumber: true # Show slide numbers
|
||||
hash: true # Update URL when navigating slides
|
||||
|
||||
# BRANDING: Add logo, title overlay, and footer to your presentation
|
||||
# All settings are optional - remove any you don't need
|
||||
branding:
|
||||
# LOGO: Display your organization's logo
|
||||
logo:
|
||||
filename: "slides-logo.svg" # File in assets/media/ folder (SVG recommended for any theme)
|
||||
position: "top-right" # Options: top-left, top-right, bottom-left, bottom-right
|
||||
width: "50px" # Logo width (height scales automatically)
|
||||
# margin: "20px" # Distance from edge (optional, default: 20px)
|
||||
|
||||
# TITLE OVERLAY: Show presentation title on every slide
|
||||
title:
|
||||
show: true # Set to false to hide
|
||||
position: "bottom-left" # Options: top-left, top-right, bottom-left, bottom-right
|
||||
# text: "Short Title" # Optional: override the page title with custom text
|
||||
# margin: "20px" # Distance from edge (optional)
|
||||
|
||||
# AUTHOR OVERLAY: Show author name on every slide
|
||||
# author:
|
||||
# show: true
|
||||
# position: "bottom-right"
|
||||
|
||||
# FOOTER TEXT: Display copyright, conference name, etc.
|
||||
footer:
|
||||
text: "© 2026 HugoBlox" # Supports Markdown (e.g., links)
|
||||
position: "bottom-center" # Options: top-left, top-right, bottom-left, bottom-right, bottom-center
|
||||
---
|
||||
|
||||
|
||||
<!-- no-branding -->
|
||||
# Example Talk
|
||||
### Dr. Alex Johnson · Meta AI
|
||||
|
||||
@@ -319,3 +348,138 @@ This slide won't appear in the presentation but remains in source for reference.
|
||||
|
||||
Note:
|
||||
Thank you for your attention! Feel free to reach out with questions or contributions.
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Branding Your Slides
|
||||
|
||||
Add your identity to every slide with simple configuration!
|
||||
|
||||
**What you can add:**
|
||||
|
||||
| Element | Position Options |
|
||||
|---------|-----------------|
|
||||
| Logo | top-left, top-right, bottom-left, bottom-right |
|
||||
| Title | Same as above |
|
||||
| Author | Same as above |
|
||||
| Footer Text | Same + bottom-center |
|
||||
|
||||
Edit the `branding:` section in your slide's front matter (top of file).
|
||||
|
||||
---
|
||||
|
||||
## 📁 Adding Your Logo
|
||||
|
||||
1. Place your logo in `assets/media/` folder
|
||||
2. Use SVG format for best results (auto-adapts to any theme!)
|
||||
3. Add to front matter:
|
||||
|
||||
```yaml
|
||||
branding:
|
||||
logo:
|
||||
filename: "your-logo.svg" # Must be in assets/media/
|
||||
position: "top-right"
|
||||
width: "60px"
|
||||
```
|
||||
|
||||
**Tip:** SVGs with `fill="currentColor"` automatically match theme colors!
|
||||
|
||||
---
|
||||
|
||||
## 📝 Title & Author Overlays
|
||||
|
||||
Show presentation title and/or author on every slide:
|
||||
|
||||
```yaml
|
||||
branding:
|
||||
title:
|
||||
show: true
|
||||
position: "bottom-left"
|
||||
text: "Short Title" # Optional: override long page title
|
||||
|
||||
author:
|
||||
show: true
|
||||
position: "bottom-right"
|
||||
```
|
||||
|
||||
Author is auto-detected from page front matter (`author:` or `authors:`).
|
||||
|
||||
---
|
||||
|
||||
## 📄 Footer Text
|
||||
|
||||
Add copyright, conference name, or any persistent text:
|
||||
|
||||
```yaml
|
||||
branding:
|
||||
footer:
|
||||
text: "© 2024 Your Name · ICML 2024"
|
||||
position: "bottom-center"
|
||||
```
|
||||
|
||||
**Tip:** Supports Markdown! Use `[Link](url)` for clickable links.
|
||||
|
||||
---
|
||||
|
||||
<!-- no-branding -->
|
||||
|
||||
## 🔇 Hiding Branding Per-Slide
|
||||
|
||||
Sometimes you want a clean slide (title slides, full-screen images).
|
||||
|
||||
Add this comment at the **start** of your slide content:
|
||||
|
||||
```markdown
|
||||
<!-- no-branding -->
|
||||
## My Clean Slide
|
||||
|
||||
Content here...
|
||||
```
|
||||
|
||||
☝️ **This slide uses `<!-- no-branding -->`** — notice no logo or overlays!
|
||||
|
||||
---
|
||||
|
||||
<!-- no-header -->
|
||||
|
||||
## 🔇 Selective Hiding
|
||||
|
||||
Hide just the header (logo + title):
|
||||
|
||||
```markdown
|
||||
<!-- no-header -->
|
||||
```
|
||||
|
||||
Or just the footer (author + footer text):
|
||||
|
||||
```markdown
|
||||
<!-- no-footer -->
|
||||
```
|
||||
|
||||
☝️ **This slide uses `<!-- no-header -->`** — footer still visible below!
|
||||
|
||||
---
|
||||
|
||||
<!-- no-footer -->
|
||||
|
||||
## ✅ Quick Reference
|
||||
|
||||
| Comment | Hides |
|
||||
|---------|-------|
|
||||
| `<!-- no-branding -->` | Everything (logo, title, author, footer) |
|
||||
| `<!-- no-header -->` | Logo + Title overlay |
|
||||
| `<!-- no-footer -->` | Author + Footer text |
|
||||
|
||||
☝️ **This slide uses `<!-- no-footer -->`** — logo still visible above!
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Get Started
|
||||
|
||||
1. Copy this example's front matter as a starting point
|
||||
2. Replace logo with yours in `assets/media/`
|
||||
3. Customize positions and text
|
||||
4. Use `<!-- no-branding -->` for special slides
|
||||
|
||||
**Pro tip:** Set site-wide defaults in `config/_default/params.yaml` under `slides.branding`!
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Markdown</title><path fill="currentColor" d="M22.27 19.385H1.73A1.73 1.73 0 010 17.655V6.345a1.73 1.73 0 011.73-1.73h20.54A1.73 1.73 0 0124 6.345v11.308a1.73 1.73 0 01-1.73 1.731zM5.769 15.923v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.46v7.847zM21.232 12h-2.309V8.077h-2.307V12h-2.308l3.461 4.039z"/></svg>
|
||||
|
After Width: | Height: | Size: 421 B |
@@ -8,16 +8,36 @@ venue: "Hugo Blox Tutorial"
|
||||
featured: true
|
||||
type: slides
|
||||
slides:
|
||||
theme: black
|
||||
highlight_style: dracula
|
||||
diagram: true
|
||||
theme: black # Options: black, white, league, beige, sky, night, serif, simple, solarized
|
||||
highlight_style: dracula # Code syntax highlighting theme
|
||||
diagram: true # Enable Mermaid diagrams for flowcharts, etc.
|
||||
reveal_options:
|
||||
controls: true
|
||||
progress: true
|
||||
slideNumber: true
|
||||
hash: true
|
||||
controls: true # Show navigation arrows
|
||||
progress: true # Show progress bar
|
||||
slideNumber: true # Show slide numbers
|
||||
hash: true # Update URL when navigating slides
|
||||
|
||||
# BRANDING: Add logo, title overlay, and footer to your presentation
|
||||
# All settings are optional - remove any you don't need
|
||||
branding:
|
||||
# LOGO: Display your organization's logo
|
||||
logo:
|
||||
filename: "slides-logo.svg" # File in assets/media/ folder (SVG recommended for any theme)
|
||||
position: "top-right" # Options: top-left, top-right, bottom-left, bottom-right
|
||||
width: "50px" # Logo width (height scales automatically)
|
||||
|
||||
# TITLE OVERLAY: Show presentation title on every slide
|
||||
title:
|
||||
show: true # Set to false to hide
|
||||
position: "bottom-left" # Options: top-left, top-right, bottom-left, bottom-right
|
||||
|
||||
# FOOTER TEXT: Display copyright, conference name, etc.
|
||||
footer:
|
||||
text: "© 2026 HugoBlox" # Supports Markdown (e.g., links)
|
||||
position: "bottom-center" # Options: top-left, top-right, bottom-left, bottom-right, bottom-center
|
||||
---
|
||||
|
||||
<!-- no-branding -->
|
||||
# Markdown Slides
|
||||
|
||||
### Write in Markdown. Present Anywhere.
|
||||
@@ -164,3 +184,127 @@ Use `{{</* slide background-color="#hex" */>}}`
|
||||
- Docs: [docs.hugoblox.com](https://docs.hugoblox.com)
|
||||
|
||||
*Built with Markdown Slides*
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Branding Your Slides
|
||||
|
||||
Add your identity to every slide with simple configuration!
|
||||
|
||||
**What you can add:**
|
||||
|
||||
| Element | Position Options |
|
||||
|---------|-----------------|
|
||||
| Logo | top-left, top-right, bottom-left, bottom-right |
|
||||
| Title | Same as above |
|
||||
| Author | Same as above |
|
||||
| Footer Text | Same + bottom-center |
|
||||
|
||||
Edit the `branding:` section in your slide's front matter (top of file).
|
||||
|
||||
---
|
||||
|
||||
## 📁 Adding Your Logo
|
||||
|
||||
1. Place your logo in `assets/media/` folder
|
||||
2. Use SVG format for best results (auto-adapts to any theme!)
|
||||
3. Add to front matter:
|
||||
|
||||
```yaml
|
||||
branding:
|
||||
logo:
|
||||
filename: "your-logo.svg" # Must be in assets/media/
|
||||
position: "top-right"
|
||||
width: "60px"
|
||||
```
|
||||
|
||||
**Tip:** SVGs with `fill="currentColor"` automatically match theme colors!
|
||||
|
||||
---
|
||||
|
||||
## 📝 Title & Author Overlays
|
||||
|
||||
Show presentation title and/or author on every slide:
|
||||
|
||||
```yaml
|
||||
branding:
|
||||
title:
|
||||
show: true
|
||||
position: "bottom-left"
|
||||
text: "Short Title" # Optional: override long page title
|
||||
|
||||
author:
|
||||
show: true
|
||||
position: "bottom-right"
|
||||
```
|
||||
|
||||
Author is auto-detected from page front matter (`author:` or `authors:`).
|
||||
|
||||
---
|
||||
|
||||
## 📄 Footer Text
|
||||
|
||||
Add copyright, conference name, or any persistent text:
|
||||
|
||||
```yaml
|
||||
branding:
|
||||
footer:
|
||||
text: "© 2024 Your Name · ICML 2024"
|
||||
position: "bottom-center"
|
||||
```
|
||||
|
||||
**Tip:** Supports Markdown! Use `[Link](url)` for clickable links.
|
||||
|
||||
---
|
||||
|
||||
<!-- no-branding -->
|
||||
|
||||
## 🔇 Hiding Branding Per-Slide
|
||||
|
||||
Sometimes you want a clean slide (title slides, full-screen images).
|
||||
|
||||
Add this comment at the **start** of your slide content:
|
||||
|
||||
```markdown
|
||||
<!-- no-branding -->
|
||||
## My Clean Slide
|
||||
|
||||
Content here...
|
||||
```
|
||||
|
||||
☝️ **This slide uses `<!-- no-branding -->`** — notice no logo or overlays!
|
||||
|
||||
---
|
||||
|
||||
<!-- no-header -->
|
||||
|
||||
## 🔇 Selective Hiding
|
||||
|
||||
Hide just the header (logo + title):
|
||||
|
||||
```markdown
|
||||
<!-- no-header -->
|
||||
```
|
||||
|
||||
Or just the footer (author + footer text):
|
||||
|
||||
```markdown
|
||||
<!-- no-footer -->
|
||||
```
|
||||
|
||||
☝️ **This slide uses `<!-- no-header -->`** — footer still visible below!
|
||||
|
||||
---
|
||||
|
||||
<!-- no-footer -->
|
||||
|
||||
## ✅ Quick Reference
|
||||
|
||||
| Comment | Hides |
|
||||
|---------|-------|
|
||||
| `<!-- no-branding -->` | Everything (logo, title, author, footer) |
|
||||
| `<!-- no-header -->` | Logo + Title overlay |
|
||||
| `<!-- no-footer -->` | Author + Footer text |
|
||||
|
||||
☝️ **This slide uses `<!-- no-footer -->`** — logo still visible above!
|
||||
|
||||
Reference in new issue
Block a user