diff --git a/modules/slides/README.md b/modules/slides/README.md index 8e300fe7..2ee8fe6a 100644 --- a/modules/slides/README.md +++ b/modules/slides/README.md @@ -16,6 +16,76 @@ Supports math, syntax highlighting, diagrams, speaker notes, and much more! - path: github.com/HugoBlox/kit/modules/slides ``` +## Branding & Customization + +### Logo and Overlays + +Add consistent branding across all slides by configuring `slides.branding` in your site config or slide front matter: + +```yaml +# In hugo.yaml (site-wide) or slide front matter (per-deck) +params: + slides: + branding: + logo: + filename: "logo.png" # File in assets/media/ + position: "top-left" # top-left, top-right, bottom-left, bottom-right + width: "80px" # Logo width + margin: "20px" # Distance from edges + title: + show: true # Show presentation title overlay + text: "Short Title" # Optional: Override auto-detected title + position: "bottom-left" + author: + show: true # Show author name overlay + position: "bottom-right" + footer: + text: "© 2026 Copyright" # Footer text (e.g. copyright) + position: "bottom-center" # bottom-center, bottom-left, bottom-right + +``` + +### Hooks System + +Inject custom content into presentations without modifying module files. Create partials in your project's `layouts/_partials/hooks/` directory: + +| Hook | Location | Use Case | +|------|----------|----------| +| `slide-header/` | Top of presentation | Course code, session info | +| `slide-footer/` | Bottom of presentation | Social handles, copyright | +| `slide-head-end/` | End of `` | Custom CSS, fonts, analytics | +| `slide-body-end/` | End of `` | Custom JS, Reveal.js plugins | + +Example: Create `layouts/_partials/hooks/slide-footer/social.html`: + +```html +
+ @yourhandle · yoursite.com +
+``` + +See `_example.html` files in each hook directory for more examples. + +## Per-Slide Visibility + +Control branding visibility on individual slides using HTML comments: + +- ``: Hide all branding elements (logo, header, footer) +- ``: Hide only the header (and logo) +- ``: Hide only the footer + +Example: + +```markdown +--- + + + +## Full Screen Image Slide + +This slide will have no branding overlays. +``` + ## Usage [View the documentation](https://docs.hugoblox.com/content/slides/) diff --git a/modules/slides/assets/css/slides-branding.css b/modules/slides/assets/css/slides-branding.css new file mode 100644 index 00000000..2bf8d6bc --- /dev/null +++ b/modules/slides/assets/css/slides-branding.css @@ -0,0 +1,129 @@ +/* + * HugoBlox Slides Branding Styles + * + * Default styles for slide branding elements (logo, overlays, headers/footers). + * These styles ensure branding elements don't interfere with slide content. + */ + +/* Logo container */ +#slide-logo { + position: fixed; + z-index: 100; + pointer-events: none; + transition: opacity 0.3s ease; + color: var(--r-main-color, #fff); +} + +#slide-logo img { + width: 100%; + height: auto; + max-height: 60px; +} + +#slide-logo svg { + width: 100%; + height: auto; + max-height: 60px; + fill: currentColor; +} + +/* Title and author overlays */ +#slide-title-overlay, +#slide-author-overlay, +#slide-footer-text-overlay { + position: fixed; + z-index: 100; + pointer-events: none; + font-family: var(--r-main-font, inherit); + color: var(--r-main-color, #fff); + font-size: 0.7em; + opacity: 0.8; + max-width: 40%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); +} + +#slide-footer-text-overlay { + font-size: 0.6em; + opacity: 0.7; +} + +/* Header and footer hook containers */ +.slide-header, +.slide-footer { + position: fixed; + left: 0; + right: 0; + z-index: 100; + pointer-events: none; + display: flex; + align-items: center; + padding: 10px 20px; +} + +.slide-header { + top: 0; + justify-content: space-between; +} + +.slide-footer { + bottom: 0; + justify-content: space-between; +} + +/* Visibility Control via data-state classes (applied to body by JS) */ +body.no-branding #slide-logo, +body.no-branding #slide-title-overlay, +body.no-branding #slide-author-overlay, +body.no-branding #slide-footer-text-overlay, +body.no-branding .slide-header, +body.no-branding .slide-footer { + /* biome-ignore lint/complexity/noImportantStyles: Required to override Reveal.js styles */ + display: none !important; +} + +body.no-header .slide-header, +body.no-header #slide-logo, +body.no-header #slide-title-overlay { + /* biome-ignore lint/complexity/noImportantStyles: Required to override Reveal.js styles */ + display: none !important; +} + +body.no-footer .slide-footer, +body.no-footer #slide-author-overlay, +body.no-footer #slide-footer-text-overlay { + /* biome-ignore lint/complexity/noImportantStyles: Required to override Reveal.js styles */ + display: none !important; +} + +/* Re-enable pointer events for interactive elements within header/footer */ +.slide-header a, +.slide-header button, +.slide-footer a, +.slide-footer button { + pointer-events: auto; +} + +/* Hide branding in print mode for cleaner PDFs */ +@media print { + #slide-logo, + #slide-title-overlay, + #slide-author-overlay, + #slide-footer-text-overlay, + .slide-header, + .slide-footer { + opacity: 0.5; + } +} + +/* Respect Reveal.js overview mode */ +.reveal.overview #slide-logo, +.reveal.overview #slide-title-overlay, +.reveal.overview #slide-author-overlay, +.reveal.overview #slide-footer-text-overlay, +.reveal.overview .slide-header, +.reveal.overview .slide-footer { + display: none; +} diff --git a/modules/slides/assets/js/hugoblox-slides.js b/modules/slides/assets/js/hugoblox-slides.js index 2d7444ca..5d985dfd 100644 --- a/modules/slides/assets/js/hugoblox-slides.js +++ b/modules/slides/assets/js/hugoblox-slides.js @@ -63,6 +63,30 @@ pluginOptions.plugins = enabledPlugins; Reveal.initialize(pluginOptions); +// Handle data-state for branding visibility +// Apply classes to body since branding elements are body-level siblings of .reveal +const applySlideState = (event) => { + const body = document.body; + if (!body) return; + + // Remove previous state classes from body + body.classList.remove("no-branding", "no-header", "no-footer"); + + // Get current slide's data-state + const currentSlide = event?.currentSlide || Reveal.getCurrentSlide(); + if (currentSlide) { + const state = currentSlide.getAttribute("data-state"); + if (state) { + state.split(" ").forEach((s) => { + body.classList.add(s); + }); + } + } +}; + +Reveal.on("ready", applySlideState); +Reveal.on("slidechanged", applySlideState); + // Disable Mermaid by default. if (typeof slides.diagram === "undefined") { slides.diagram = false; diff --git a/modules/slides/layouts/_partials/components/slide-branding.html b/modules/slides/layouts/_partials/components/slide-branding.html new file mode 100644 index 00000000..20d55bb9 --- /dev/null +++ b/modules/slides/layouts/_partials/components/slide-branding.html @@ -0,0 +1,157 @@ +{{/* + Slide Branding Component + + Renders persistent branding elements (logo, title overlay, etc.) that appear + across all slides in a presentation. + + Configuration (site.Params.slides.branding or .Params.slides.branding): + logo: + src: "media/logo.png" # Path to logo image + alt: "Organization Logo" # Alt text + position: "top-left" # top-left, top-right, bottom-left, bottom-right + width: "100px" # Logo width + margin: "20px" # Distance from edges + title: + show: true # Show presentation title + position: "bottom-left" # Position of title text + author: + show: true # Show author/presenter name + position: "bottom-right" # Position of author text +*/}} + +{{/* Merge page-level config with site-level defaults */}} +{{ $site_branding := site.Params.slides.branding | default dict }} +{{ $page_branding := .Params.slides.branding | default dict }} +{{ $branding := merge $site_branding $page_branding }} + +{{/* Logo rendering */}} +{{ with $branding.logo }} + {{ if .filename }} + {{ $resource_path := printf "media/%s" .filename }} + {{ $logo_resource := resources.Get $resource_path }} + {{ with $logo_resource }} + {{ $position := $branding.logo.position | default "top-left" }} + {{ $width := $branding.logo.width | default "80px" }} + {{ $margin := $branding.logo.margin | default "20px" }} + {{ $alt := $branding.logo.alt | default "Logo" }} + + {{/* Calculate CSS position based on position string */}} + {{ $positionCSS := "" }} + {{ if eq $position "top-left" }} + {{ $positionCSS = printf "top: %s; left: %s;" $margin $margin }} + {{ else if eq $position "top-right" }} + {{ $positionCSS = printf "top: %s; right: %s;" $margin $margin }} + {{ else if eq $position "bottom-left" }} + {{ $positionCSS = printf "bottom: %s; left: %s;" $margin $margin }} + {{ else if eq $position "bottom-right" }} + {{ $positionCSS = printf "bottom: %s; right: %s;" $margin $margin }} + {{ else }} + {{/* Custom position - expect CSS string */}} + {{ $positionCSS = $position }} + {{ end }} + + + {{ end }} + {{ end }} +{{ end }} + +{{/* Title overlay (optional) */}} +{{ if $branding.title }} + {{ with $branding.title }} + {{ if .show }} + {{ $position := .position | default "bottom-left" }} + {{ $margin := .margin | default "20px" }} + + {{ $positionCSS := "" }} + {{ if eq $position "top-left" }} + {{ $positionCSS = printf "top: %s; left: %s;" $margin $margin }} + {{ else if eq $position "top-right" }} + {{ $positionCSS = printf "top: %s; right: %s;" $margin $margin }} + {{ else if eq $position "bottom-left" }} + {{ $positionCSS = printf "bottom: %s; left: %s;" $margin $margin }} + {{ else if eq $position "bottom-right" }} + {{ $positionCSS = printf "bottom: %s; right: %s;" $margin $margin }} + {{ end }} + +
+ {{ .text | default $.Title }} +
+ {{ end }} + {{ end }} +{{ end }} + +{{/* Author overlay (optional) */}} +{{ if $branding.author }} + {{ with $branding.author }} + {{ if .show }} + {{ $position := .position | default "bottom-right" }} + {{ $margin := .margin | default "20px" }} + + {{ $positionCSS := "" }} + {{ if eq $position "top-left" }} + {{ $positionCSS = printf "top: %s; left: %s;" $margin $margin }} + {{ else if eq $position "top-right" }} + {{ $positionCSS = printf "top: %s; right: %s;" $margin $margin }} + {{ else if eq $position "bottom-left" }} + {{ $positionCSS = printf "bottom: %s; left: %s;" $margin $margin }} + {{ else if eq $position "bottom-right" }} + {{ $positionCSS = printf "bottom: %s; right: %s;" $margin $margin }} + {{ end }} + + {{/* Get author from page params or first author */}} + {{ $author := "" }} + {{ with $.Params.authors }} + {{ if reflect.IsSlice . }} + {{ $author = index . 0 }} + {{ else }} + {{ $author = . }} + {{ end }} + {{ end }} + {{ with $.Params.author }} + {{ $author = . }} + {{ end }} + + {{ if $author }} +
+ {{ $author }} +
+ {{ end }} + {{ end }} + {{ end }} +{{ end }} + +{{/* Footer text overlay (optional) - e.g. for copyright */}} +{{ if $branding.footer }} + {{ with $branding.footer }} + {{ if .text }} + {{ $position := .position | default "bottom-center" }} + {{ $margin := .margin | default "20px" }} + + {{ $positionCSS := "" }} + {{ if eq $position "top-left" }} + {{ $positionCSS = printf "top: %s; left: %s;" $margin $margin }} + {{ else if eq $position "top-right" }} + {{ $positionCSS = printf "top: %s; right: %s;" $margin $margin }} + {{ else if eq $position "bottom-left" }} + {{ $positionCSS = printf "bottom: %s; left: %s;" $margin $margin }} + {{ else if eq $position "bottom-right" }} + {{ $positionCSS = printf "bottom: %s; right: %s;" $margin $margin }} + {{ else if eq $position "bottom-center" }} + {{ $positionCSS = printf "bottom: %s; left: 50%%; transform: translateX(-50%%);" $margin }} + {{ end }} + +
+ {{ .text | markdownify }} +
+ {{ end }} + {{ end }} +{{ end }} + + diff --git a/modules/slides/layouts/_partials/functions/slides_get_hook.html b/modules/slides/layouts/_partials/functions/slides_get_hook.html new file mode 100644 index 00000000..153381d9 --- /dev/null +++ b/modules/slides/layouts/_partials/functions/slides_get_hook.html @@ -0,0 +1,39 @@ +{{/* + Slides Hook Loader - Independent Implementation + + This is a self-contained hook system for the slides module that doesn't + depend on the blox module. Users can create partials in their own project's + layouts/_partials/hooks/{hook-name}/ directory. + + Usage: {{ partial "functions/slides_get_hook" (dict "hook" "slide-header" "context" .) }} + + Available hooks for slides: + - slide-header: Top of presentation (inside .reveal, above .slides) + - slide-footer: Bottom of presentation (inside .reveal, below .slides) + - slide-head-end: End of tag (for custom CSS/JS) + - slide-body-end: End of tag (for custom JS) + + Input: dict with "hook" (string) and "context" (page context) + Output: Renders all partials found in the hook directory +*/}} + +{{ $loaded := false }} +{{ $partial_dir := printf "hooks/%s/" .hook }} +{{ $context := .context }} +{{ $hook_dir_path := path.Join "layouts/_partials" $partial_dir }} + +{{/* Use try to gracefully handle missing directories */}} +{{ with try (os.ReadDir $hook_dir_path) }} + {{ with .Value }} + {{ range . }} + {{ if not .IsDir }} + {{ $partial_path := path.Join $partial_dir .Name }} + {{ partial $partial_path $context }} + {{ $loaded = true }} + {{ end }} + {{ end }} + {{ end }} +{{ end }} + +{{/* Debug: uncomment to see if hooks are loaded */}} +{{/* return $loaded */}} diff --git a/modules/slides/layouts/_partials/hooks/slide-body-end/_example.html b/modules/slides/layouts/_partials/hooks/slide-body-end/_example.html new file mode 100644 index 00000000..dc0b507f --- /dev/null +++ b/modules/slides/layouts/_partials/hooks/slide-body-end/_example.html @@ -0,0 +1,22 @@ +{{/* + Example Slide Body-End Hook + + This hook allows injecting custom JavaScript at the end of the + tag, after Reveal.js has been loaded. Useful for: + - Custom Reveal.js plugins + - Analytics tracking on slide changes + - Custom keyboard shortcuts + - Integration with other JS libraries + + To use this hook, create a file at: + layouts/_partials/hooks/slide-body-end/your-custom-script.html +*/}} + +{{/* Uncomment below to track slide changes with console logging */}} +{{/* + +*/}} diff --git a/modules/slides/layouts/_partials/hooks/slide-footer/_example.html b/modules/slides/layouts/_partials/hooks/slide-footer/_example.html new file mode 100644 index 00000000..e4c37ffa --- /dev/null +++ b/modules/slides/layouts/_partials/hooks/slide-footer/_example.html @@ -0,0 +1,20 @@ +{{/* + Example Slide Footer Hook + + This is an example file showing how to create custom footer content + that appears at the bottom of every slide in a presentation. + + To use this hook, create a file at: + layouts/_partials/hooks/slide-footer/your-custom-footer.html + + The content will be rendered inside a
container. + + Example usage: show social media handle or contact info +*/}} + +{{/* Uncomment below to show author's social handle in footer */}} +{{/* +
+ @yourhandle +
+*/}} diff --git a/modules/slides/layouts/_partials/hooks/slide-head-end/_example.html b/modules/slides/layouts/_partials/hooks/slide-head-end/_example.html new file mode 100644 index 00000000..725c1cea --- /dev/null +++ b/modules/slides/layouts/_partials/hooks/slide-head-end/_example.html @@ -0,0 +1,25 @@ +{{/* + Example Slide Head-End Hook + + This hook allows injecting custom CSS or JavaScript into the + section of the presentation. Useful for: + - Custom fonts + - Additional CSS frameworks + - Analytics scripts + - Custom Reveal.js configurations + + To use this hook, create a file at: + layouts/_partials/hooks/slide-head-end/your-custom-head.html +*/}} + +{{/* Uncomment below to add custom font */}} +{{/* + + + + +*/}} diff --git a/modules/slides/layouts/_partials/hooks/slide-header/_example.html b/modules/slides/layouts/_partials/hooks/slide-header/_example.html new file mode 100644 index 00000000..e5e482ae --- /dev/null +++ b/modules/slides/layouts/_partials/hooks/slide-header/_example.html @@ -0,0 +1,30 @@ +{{/* + Example Slide Header Hook + + This is an example file showing how to create custom header content + that appears at the top of every slide in a presentation. + + To use this hook, create a file at: + layouts/_partials/hooks/slide-header/your-custom-header.html + + The content will be rendered inside a
container. + + Available context variables: + .Title - Presentation title + .Params - All front matter parameters + .Params.authors - List of authors + .Params.course - Course code/name + .Params.venue - Event venue + .Date - Presentation date + + Example usage: +*/}} + +{{/* Uncomment below to show course code in header */}} +{{/* +{{ with .Params.course }} +
+ {{ . }}{{ with $.Params.lecture_number }} · Lecture {{ . }}{{ end }} +
+{{ end }} +*/}} diff --git a/modules/slides/layouts/_partials/slides.html b/modules/slides/layouts/_partials/slides.html index 9dc066ef..af12fddd 100644 --- a/modules/slides/layouts/_partials/slides.html +++ b/modules/slides/layouts/_partials/slides.html @@ -26,7 +26,20 @@ {{/* Each `
` defines a new slide. */}} {{/* Only begin new slide `
` if not already added by custom `slide` shortcode. */}} {{ if not (in . "data-noprocess") }} - + + {{/* Parse visibility comments */}} + {{ $state := slice }} + {{ if in . "" }} + {{ $state = $state | append "no-branding" }} + {{ end }} + {{ if in . "" }} + {{ $state = $state | append "no-header" }} + {{ end }} + {{ if in . "" }} + {{ $state = $state | append "no-footer" }} + {{ end }} + + {{ end }} {{ $slideContent | safeHTML }}
@@ -35,4 +48,21 @@ {{ end }} {{ end }}
+ + {{/* Branding elements - placed inside .reveal but outside .slides to be persistent and fixed */}} + + {{/* Branding overlay (logo, title, author) */}} + {{ $pageContext := index . 0 }} + {{ partial "components/slide-branding" $pageContext }} + + {{/* Hook: slide-header */}} +
+ {{ partial "functions/slides_get_hook" (dict "hook" "slide-header" "context" $pageContext) }} +
+ + {{/* Hook: slide-footer */}} +
+ {{ partial "functions/slides_get_hook" (dict "hook" "slide-footer" "context" $pageContext) }} +
+
diff --git a/modules/slides/layouts/slides/baseof.present.html b/modules/slides/layouts/slides/baseof.present.html index 340e476c..5632ad0c 100644 --- a/modules/slides/layouts/slides/baseof.present.html +++ b/modules/slides/layouts/slides/baseof.present.html @@ -1,5 +1,23 @@ {{/* Present Baseof - Presentation output only + + Hook Points Available: + - slide-head-end: End of for custom CSS/JS + - slide-header: Top of presentation (inside .reveal wrapper) + - slide-footer: Bottom of presentation (inside .reveal wrapper) + - slide-body-end: End of for custom JS + + Branding Configuration (site.Params.slides.branding or page front matter): + logo: + src: "media/logo.png" + position: "top-left" # top-left, top-right, bottom-left, bottom-right + width: "100px" + title: + show: true + position: "bottom-left" + author: + show: true + position: "bottom-right" */}} @@ -38,6 +56,13 @@ {{- $theme := $.Param "slides.theme" | default "black" -}} + {{/* Load branding CSS */}} + {{ $branding_css := resources.Get "css/slides-branding.css" }} + {{ with $branding_css }} + {{ $branding_css = . | minify | fingerprint }} + + {{ end }} + {{/* Hugo Chroma Syntax Highlighter */}} {{ $hl_theme := $.Param "slides.highlight_style" | default "dracula" }} {{ $hl_theme_path := printf "css/libs/chroma/%s.css" $hl_theme }} @@ -58,6 +83,10 @@ document.head.appendChild(link); })(); + + {{/* Hook: slide-head-end - Custom CSS/JS injection point */}} + {{ partial "functions/slides_get_hook" (dict "hook" "slide-head-end" "context" .) }} + @@ -80,7 +109,8 @@ {{ $slidejs := resources.Get "js/hugoblox-slides.js" | js.Build (dict "params" (dict "slides" $.Params.slides )) | fingerprint }} - {{ partial "functions/get_hook" (dict "hook" "body-end" "context" .) }} + {{/* Hook: slide-body-end - End of body for custom JS */}} + {{ partial "functions/slides_get_hook" (dict "hook" "slide-body-end" "context" .) }} diff --git a/templates/academic-cv/assets/media/slides-logo.svg b/templates/academic-cv/assets/media/slides-logo.svg new file mode 100644 index 00000000..d24a8a0c --- /dev/null +++ b/templates/academic-cv/assets/media/slides-logo.svg @@ -0,0 +1 @@ +Markdown \ No newline at end of file diff --git a/templates/academic-cv/assets/media/stacked-peaks.svg b/templates/academic-cv/assets/media/stacked-peaks.svg deleted file mode 100644 index 1adb53a5..00000000 --- a/templates/academic-cv/assets/media/stacked-peaks.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/templates/academic-cv/content/slides/example/index.md b/templates/academic-cv/content/slides/example/index.md index 210143fa..a4bdf6ab 100644 --- a/templates/academic-cv/content/slides/example/index.md +++ b/templates/academic-cv/content/slides/example/index.md @@ -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 --- + + # 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. + +--- + + + +## 🔇 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 + +## My Clean Slide + +Content here... +``` + +☝️ **This slide uses ``** — notice no logo or overlays! + +--- + + + +## 🔇 Selective Hiding + +Hide just the header (logo + title): + +```markdown + +``` + +Or just the footer (author + footer text): + +```markdown + +``` + +☝️ **This slide uses ``** — footer still visible below! + +--- + + + +## ✅ Quick Reference + +| Comment | Hides | +|---------|-------| +| `` | Everything (logo, title, author, footer) | +| `` | Logo + Title overlay | +| `` | Author + Footer text | + +☝️ **This slide uses ``** — 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 `` for special slides + +**Pro tip:** Set site-wide defaults in `config/_default/params.yaml` under `slides.branding`! + diff --git a/templates/markdown-slides/assets/media/slides-logo.svg b/templates/markdown-slides/assets/media/slides-logo.svg new file mode 100644 index 00000000..d24a8a0c --- /dev/null +++ b/templates/markdown-slides/assets/media/slides-logo.svg @@ -0,0 +1 @@ +Markdown \ No newline at end of file diff --git a/templates/markdown-slides/content/slides/example/index.md b/templates/markdown-slides/content/slides/example/index.md index 6e8161ac..12530c5a 100644 --- a/templates/markdown-slides/content/slides/example/index.md +++ b/templates/markdown-slides/content/slides/example/index.md @@ -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 --- + # Markdown Slides ### Write in Markdown. Present Anywhere. @@ -164,3 +184,127 @@ Use `{{}}` - 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. + +--- + + + +## 🔇 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 + +## My Clean Slide + +Content here... +``` + +☝️ **This slide uses ``** — notice no logo or overlays! + +--- + + + +## 🔇 Selective Hiding + +Hide just the header (logo + title): + +```markdown + +``` + +Or just the footer (author + footer text): + +```markdown + +``` + +☝️ **This slide uses ``** — footer still visible below! + +--- + + + +## ✅ Quick Reference + +| Comment | Hides | +|---------|-------| +| `` | Everything (logo, title, author, footer) | +| `` | Logo + Title overlay | +| `` | Author + Footer text | + +☝️ **This slide uses ``** — logo still visible above! +