feat: add Reveal.js slide deck support and embedded demo page

AGENTS.md

@@ -128,7 +128,8 @@ When adding a new doc page, ensure it is linked in the sticky documentation side
 ├── content/
 │   ├── _index.md           # Homepage metadata & copy
 │   ├── blog/               # Markdown blog posts
-│   └── docs/               # Documentation sections
+│   ├── docs/               # Documentation sections
+│   └── slides/             # Reveal.js markdown slide decks
 ├── layouts/
 │   ├── _default/
 │   │   ├── baseof.html     # HTML5 shell (nav, footer, head)
@@ -140,6 +141,11 @@ When adding a new doc page, ensure it is linked in the sticky documentation side
 │   ├── docs/
 │   │   ├── list.html       # Docs category view
 │   │   └── single.html     # Docs article view with sidebar
+│   ├── slides/
+│   │   ├── list.html       # /slides/ presentations index
+│   │   └── single.html     # /slides/<slug>/ Reveal.js standalone template
+│   ├── shortcodes/
+│   │   └── reveal.html     # {{< reveal src="..." >}} embed shortcode
 │   ├── partials/
 │   │   ├── head.html       # <head> meta, snice theme CSS, web components CDN
 │   │   ├── header.html     # Main navbar
@@ -156,7 +162,42 @@ When adding a new doc page, ensure it is linked in the sticky documentation side
 
 ---
 
-## 6. Design System & Web Components
+## 6. How to Add a Slide Deck
+
+Slide presentations are built using **Reveal.js** loaded via CDN (zero npm dependencies).
+
+### Creating a Deck
+Add a markdown file in `content/slides/<slug>.md`:
+```markdown
+---
+title: "My Presentation"
+layout: "slides"
+outputs: ["HTML"]
+---
+
+# Slide 1
+Opening slide content
+
+---
+
+## Slide 2
+Horizontal transition
+
+--
+
+### Deep Dive
+Vertical transition
+```
+
+### Embedding in Pages
+Use the `reveal` shortcode:
+```html
+{{</* reveal src="/slides/my-slug/" title="My Talk" */>}}
+```
+
+---
+
+## 7. Design System & Web Components
 
 The website integrates the **snice.dev** component suite via CDN in `layouts/partials/head.html`:
 * Theme CSS: `https://snice.dev/theme/theme.css`
@@ -172,7 +213,7 @@ All styles in `assets/css/style.css` consume snice design tokens (e.g., `var(--s
 
 ---
 
-## 7. Deployment & GitHub Actions
+## 8. Deployment & GitHub Actions
 
 * Static hosting: **GitHub Pages** with custom domain `https://gofs.dev`.
 * GitHub Pages source in repository settings must be set to **GitHub Actions** (not "Deploy from a branch").

content/slides/_index.md

@@ -0,0 +1,40 @@
+---
+title: "Interactive Slide Decks"
+description: "Interactive presentations powered by Reveal.js, pure Markdown, and zero npm build dependencies."
+---
+
+Presentations can be embedded directly into any page or viewed in standalone full-screen presentation mode. 
+
+{{< reveal src="/slides/demo/" title="Demo Presentation" >}}
+
+---
+
+### How to Navigate
+* Click inside the frame above and press <kbd>Space</kbd> or the <kbd>→</kbd> arrow to advance.
+* Press <kbd>F</kbd> for native fullscreen presentation mode.
+* Press <kbd>Esc</kbd> or <kbd>O</kbd> to see an interactive map of all slides.
+* You can also open the deck in its own tab: [**Full-Screen Slide View (/slides/demo/)**](/slides/demo/).
+
+### Authoring Slides
+To create a new slide presentation, add a `.md` file to `content/slides/` with `layout: "slides"`:
+
+```markdown
+---
+title: "My Presentation"
+layout: "slides"
+outputs: ["HTML"]
+---
+
+# Slide 1
+Intro content
+
+---
+
+## Slide 2
+Horizontal slide
+
+--
+
+### Slide 2.1
+Vertical slide stack
+```

content/slides/demo.md

@@ -0,0 +1,72 @@
+---
+title: "Reveal.js Demo Deck"
+layout: "slides"
+outputs: ["HTML"]
+---
+
+# Reveal.js + Hugo
+### Interactive Slide Decks on gofs.dev
+
+<p style="font-size: 0.7em; color: #888;">Use <kbd>Space</kbd> or arrow keys to navigate</p>
+
+---
+
+## Evergreen Web Standards
+
+- **Zero Node.js / Zero npm**
+- **100% Client-Side CDN**: Loaded directly via jsDelivr
+- **Pure Markdown**: Author slides with `---` separators
+- **Dark Theme**: Default Reveal.js black theme
+
+---
+
+## Syntax Highlighted Code
+
+```go
+package main
+
+import (
+    "fmt"
+    "net/http"
+)
+
+func main() {
+    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+        fmt.Fprintln(w, "Evergreen Go & Web Components")
+    })
+    http.ListenAndServe(":8080", nil)
+}
+```
+
+---
+
+## Vertical Slide Stacks
+
+Press <kbd>DOWN</kbd> or <kbd>Space</kbd> to explore deep dive slides:
+
+--
+
+### Deep Dive: Section 1
+Vertical slides allow drilling into details without cluttering horizontal flow.
+
+--
+
+### Deep Dive: Section 2
+Press <kbd>UP</kbd> to return or <kbd>RIGHT</kbd> to proceed to the next topic.
+
+---
+
+## Presentation Shortcuts
+
+| Key | Action |
+|:---:|:---|
+| <kbd>Space</kbd> / <kbd>→</kbd> | Next slide |
+| <kbd>F</kbd> | Toggle Fullscreen |
+| <kbd>Esc</kbd> / <kbd>O</kbd> | Slide Overview Map |
+| <kbd>S</kbd> | Speaker Notes View |
+| <kbd>?</kbd> | Help & Full Shortcut List |
+
+---
+
+# Built with Hugo
+### Zero build steps. Maximum longevity.

layouts/shortcodes/reveal.html

@@ -0,0 +1,13 @@
+{{ $src := .Get "src" | default (.Get 0) }}
+{{ $title := .Get "title" | default "Slide Presentation" }}
+<div class="reveal-embed-wrapper" style="margin: var(--snice-spacing-2xl) 0;">
+  <div style="position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--snice-border-radius-lg); overflow: hidden; border: 1px solid var(--snice-color-border); background: #191919; box-shadow: var(--snice-shadow-lg);">
+    <iframe src="{{ $src }}?embedded=true" title="{{ $title }}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" allowfullscreen allow="fullscreen"></iframe>
+  </div>
+  <div style="display: flex; justify-content: space-between; align-items: center; margin-top: var(--snice-spacing-sm); font-size: 0.85rem; color: var(--snice-color-text-secondary); flex-wrap: wrap; gap: 0.5rem;">
+    <span>💡 <em>Click inside the presentation and use <kbd style="background:var(--snice-color-surface-container);padding:0.15rem 0.4rem;border-radius:4px;border:1px solid var(--snice-color-border)">Space</kbd> or arrow keys to navigate.</em></span>
+    <a href="{{ $src }}" target="_blank" rel="noopener noreferrer" style="color: var(--snice-color-text); text-decoration: none;">
+      <snice-button variant="outline" size="small">Open Fullscreen ↗</snice-button>
+    </a>
+  </div>
+</div>

layouts/slides/list.html

@@ -0,0 +1,33 @@
+{{ define "main" }}
+<div class="prose-container" style="padding-top: var(--snice-spacing-3xl); padding-bottom: var(--snice-spacing-4xl);">
+  <header style="margin-bottom: var(--snice-spacing-2xl);">
+    <h1 style="font-size: 2.5rem; font-weight: 800; letter-spacing: var(--snice-tracking-tight); margin-bottom: var(--snice-spacing-xs); color: var(--snice-color-text);">{{ .Title }}</h1>
+    {{ with .Description }}
+    <p style="font-size: 1.125rem; color: var(--snice-color-text-secondary);">{{ . }}</p>
+    {{ end }}
+  </header>
+
+  <div class="article-content" style="margin-bottom: var(--snice-spacing-3xl);">
+    {{ .Content }}
+  </div>
+
+  {{ if gt (len .Pages) 0 }}
+  <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: var(--snice-spacing-md); color: var(--snice-color-text);">All Presentations</h2>
+  <div class="post-feed" style="display: flex; flex-direction: column; gap: var(--snice-spacing-md);">
+    {{ range .Pages }}
+    <a href="{{ .RelPermalink }}" style="text-decoration: none; color: inherit; display: block;">
+      <snice-card variant="bordered" clickable>
+        <div class="card-inner" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
+          <div>
+            <h3 style="margin-bottom: var(--snice-spacing-2xs); font-size: 1.15rem;">{{ .Title }}</h3>
+            <span style="font-size: 0.85rem; color: var(--snice-color-text-secondary);">Interactive Reveal.js Slide Deck</span>
+          </div>
+          <snice-button variant="outline" size="small">Launch Fullscreen →</snice-button>
+        </div>
+      </snice-card>
+    </a>
+    {{ end }}
+  </div>
+  {{ end }}
+</div>
+{{ end }}

layouts/slides/single.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>{{ .Title }} — {{ site.Title }}</title>
+
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  <link rel="icon" type="image/svg+xml" href="/img/favicon.svg">
+
+  <!-- Reveal.js Base CSS & Default Theme -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/theme/black.css" id="theme">
+
+  <!-- Code Syntax Highlighting Theme -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/highlight/monokai.css">
+
+  <style>
+    .reveal pre {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    }
+    .reveal kbd {
+      background: #333;
+      border: 1px solid #555;
+      border-radius: 4px;
+      padding: 0.1em 0.4em;
+      font-size: 0.85em;
+    }
+  </style>
+</head>
+<body>
+  <div class="reveal">
+    <div class="slides">
+      <section data-markdown data-separator="^---" data-separator-vertical="^--">
+        <textarea data-template>
+{{ .RawContent | safeHTML }}
+        </textarea>
+      </section>
+    </div>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/markdown/markdown.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/highlight/highlight.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/notes/notes.js"></script>
+
+  <script>
+    const urlParams = new URLSearchParams(window.location.search);
+    const isEmbedded = urlParams.get('embedded') === 'true';
+
+    Reveal.initialize({
+      hash: !isEmbedded,
+      history: !isEmbedded,
+      embedded: isEmbedded,
+      slideNumber: 'c/t',
+      controls: true,
+      progress: true,
+      center: true,
+      plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
+    });
+  </script>
+</body>
+</html>