diff --git a/AGENTS.md b/AGENTS.md index f5a675a..cd5ff66 100644 --- a/AGENTS.md +++ b/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// Reveal.js standalone template +│ ├── shortcodes/ +│ │ └── reveal.html # {{< reveal src="..." >}} embed shortcode │ ├── partials/ │ │ ├── head.html # 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/.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 +{{}} +``` + +--- + +## 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"). diff --git a/content/slides/_index.md b/content/slides/_index.md new file mode 100644 index 0000000..33f13f7 --- /dev/null +++ b/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 Space or the → arrow to advance. +* Press F for native fullscreen presentation mode. +* Press Esc or O 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 +``` diff --git a/content/slides/demo.md b/content/slides/demo.md new file mode 100644 index 0000000..81e66ee --- /dev/null +++ b/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 + +

Use Space or arrow keys to navigate

+ +--- + +## 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 DOWN or Space to explore deep dive slides: + +-- + +### Deep Dive: Section 1 +Vertical slides allow drilling into details without cluttering horizontal flow. + +-- + +### Deep Dive: Section 2 +Press UP to return or RIGHT to proceed to the next topic. + +--- + +## Presentation Shortcuts + +| Key | Action | +|:---:|:---| +| Space / → | Next slide | +| F | Toggle Fullscreen | +| Esc / O | Slide Overview Map | +| S | Speaker Notes View | +| ? | Help & Full Shortcut List | + +--- + +# Built with Hugo +### Zero build steps. Maximum longevity. diff --git a/layouts/shortcodes/reveal.html b/layouts/shortcodes/reveal.html new file mode 100644 index 0000000..7e5b095 --- /dev/null +++ b/layouts/shortcodes/reveal.html @@ -0,0 +1,13 @@ +{{ $src := .Get "src" | default (.Get 0) }} +{{ $title := .Get "title" | default "Slide Presentation" }} +
+
+ +
+
+ 💡 Click inside the presentation and use Space or arrow keys to navigate. + + Open Fullscreen ↗ + +
+
diff --git a/layouts/slides/list.html b/layouts/slides/list.html new file mode 100644 index 0000000..94879fd --- /dev/null +++ b/layouts/slides/list.html @@ -0,0 +1,33 @@ +{{ define "main" }} +
+
+

{{ .Title }}

+ {{ with .Description }} +

{{ . }}

+ {{ end }} +
+ +
+ {{ .Content }} +
+ + {{ if gt (len .Pages) 0 }} +

All Presentations

+
+ {{ range .Pages }} + + +
+
+

{{ .Title }}

+ Interactive Reveal.js Slide Deck +
+ Launch Fullscreen → +
+ + + {{ end }} +
+ {{ end }} +
+{{ end }} diff --git a/layouts/slides/single.html b/layouts/slides/single.html new file mode 100644 index 0000000..75c5619 --- /dev/null +++ b/layouts/slides/single.html @@ -0,0 +1,63 @@ + + + + + + {{ .Title }} — {{ site.Title }} + + + + + + + + + + + + + + +
+
+
+ +
+
+
+ + + + + + + + +