Skip to content

Idea 5: PortalPresenter — Turn Learning Docs into Presentations

Field Detail
Priority 📌 Important
Status 🪦 Shelved (2026-05-03) — feature was implemented but rarely used; CSS/JS removed during Zen migration. Spec retained for future revival.
Category 🎓 Learning / 💼 Official / 🎬 Content
Date added 2026-03-29
Date shelved 2026-05-03
Source Copilot CLI brainstorm session

Shelved during Zen migration

The implementation lived in docs/stylesheets/portal-presenter.css and docs/javascripts/portal-presenter.js (~94KB combined) and was retired on 2026-05-03 because Sush didn't end up using it for demos. The service worker (docs/sw.js) was rewritten as a self-unregistering worker so previously-cached presenter assets get cleaned up on next visit. This spec page is kept as a record of the original idea — if presenter mode is ever revived, this is the starting point.

What Is PortalPresenter? (The Simple Version)

☕ Cloud Café analogy: Imagine your café has a beautiful printed menu (the learning portal). Every time you do a cooking class or VIP tasting event, you've been making separate handwritten cards to explain each dish. PortalPresenter turns your printed menu INTO the cooking class — just press a button and each menu section becomes a beautiful display card, while your private notes appear on a screen only you can see.

PortalPresenter transforms the learning portal (learn.aguidetocloud.com) into a full presentation tool — replacing PowerPoint for both YouTube video recordings and customer enablement sessions.

No more:

  • ❌ Creating PowerPoint slides from scratch
  • ❌ Alt+Tabbing between apps during recordings
  • ❌ Inconsistent branding between docs and slides
  • ❌ Duplicating content that already exists in the portal

The Problem It Solves

Current Workflow (Painful)

Record demo → Alt+Tab to PowerPoint → Show 2-3 slides → Alt+Tab back → Resume demo
                  ↑                                            ↑
            Manually created                          Edit out messy
            slides (time-consuming)                   transitions in post

New Workflow (PortalPresenter)

Record demo → Press 'P' key → Portal enters Presentation Mode → Navigate slides
                                        ↑                              ↑
                                  Content already                Arrow keys +
                                  exists in docs                 smooth transitions

Core Features (v1)

1. Presentation Mode

Feature Detail
Enter mode Button on page + keyboard shortcut (P)
Slide splitting Auto-split by H2 and H3 headings
Large sections Auto-split across multiple slides (no cramming)
Transitions Clean fade between slides
Navigation Arrow keys + keyboard shortcuts
Exit Esc key

2. Slide Picker / Overview

  • Grid of slide thumbnails before presenting
  • Check/uncheck slides to include or skip
  • Creative freedom to curate the flow per session
  • Different selections for different audiences

3. Lightbox Pop-out

  • Click ANY element to pop it full-screen with dimmed background
  • Works for: images, tables, code blocks, diagrams, bullet points, admonitions
  • Works both in presentation mode AND normal browsing
  • Close with Esc or click outside

4. Presenter View (Dual Screen)

Screen What's Shown
Screen 1 (audience) Clean slide — visuals only, no progress indicator
Screen 2 (presenter) Current slide + speaker notes + next slide preview + timer

5. Auto-Generated Speaker Notes

  • Visuals (diagrams, tables, code, bullet points) stay on the SLIDE
  • Explanatory paragraphs automatically move to SPEAKER NOTES
  • No manual note-writing needed — content already exists in the docs
  • Presenter reads notes on Screen 2, audience sees clean visuals on Screen 1

6. Auto-Generated Title Slide

  • Generated from page title + portal branding
  • Helps start each topic on video with a branded intro
  • Uses the retro terminal theme / clean theme (TBD)

7. Interactive Mermaid Diagrams

  • Live rendering in slides (not static images)
  • Zoom and pan during presentation
  • Perfect for explaining complex architecture to customers

8. Annotation Tools

  • Laser pointer: Red dot follows mouse cursor
  • Drawing tools: Draw circles, arrows, highlight areas over slides
  • Toggle on/off with keyboard shortcut
  • Clear annotations between slides

9. Offline Support

  • Cache/download presentation for offline use
  • Critical for customer sites with spotty WiFi
  • All assets (images, diagrams, fonts) bundled

10. PDF Export

  • Export static slides as PDF
  • Share with customers after enablement sessions
  • "Here are the slides we discussed" follow-up

Theme Options

Will prototype BOTH and let Sutheesh decide:

Option Description
Retro Terminal Green-on-dark, terminal fonts, scanlines — full brand identity
Clean Minimal Same content, cleaner typography, white/dark background — max readability

Keyboard Shortcuts (Presentation Mode)

Key Action
P Enter presentation mode
← / → Previous / next slide
Space Next (same as →)
Esc Exit (priority: lightbox → picker → annotations → exit)
O Slide picker / overview grid
S Toggle speaker notes / presenter view
F Toggle fullscreen
L Toggle laser pointer
D Toggle draw mode (shows toolbar: freehand, arrow, rect, circle, eraser, colors)
E Toggle eraser (while in draw mode)
C Clear annotations on current slide
W Toggle whiteboard / blackboard canvas
X Export presentation as PDF
Home/End Jump to first/last slide

Page Eligibility

  • All pages presentable by default
  • Exclude specific pages using frontmatter:
---
presentable: false
---

Pages to exclude: Task Board, Progress Tracker, Idea Vault index

Architecture (How It Works)

┌─────────────────────────────────────────────────────────────┐
│                    LEARNING PORTAL (MkDocs)                  │
│                                                              │
│  ┌─────────────┐    ┌──────────────┐    ┌────────────────┐  │
│  │  Normal Mode │    │ Presentation │    │ Presenter View │  │
│  │  (browsing)  │◄──►│    Mode      │◄──►│ (2nd screen)   │  │
│  └─────────────┘    └──────┬───────┘    └────────────────┘  │
│                            │                                 │
│  ┌─────────────────────────┼─────────────────────────────┐  │
│  │              Custom JavaScript Layer                    │  │
│  │                                                        │  │
│  │  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │  │
│  │  │  Slide   │ │ Lightbox │ │ Annotate │ │  Export  │ │  │
│  │  │ Splitter │ │  Engine  │ │  Tools   │ │  (PDF)   │ │  │
│  │  └──────────┘ └──────────┘ └──────────┘ └──────────┘ │  │
│  │                                                        │  │
│  │  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │  │
│  │  │  Note    │ │  Slide   │ │ Offline  │ │ Diagram  │ │  │
│  │  │Generator │ │  Picker  │ │  Cache   │ │  Zoom    │ │  │
│  │  └──────────┘ └──────────┘ └──────────┘ └──────────┘ │  │
│  └────────────────────────────────────────────────────────┘  │
│                                                              │
│  ┌────────────────────────────────────────────────────────┐  │
│  │          MkDocs Material Theme + Plugins                │  │
│  │    (glightbox, mermaid, custom CSS/JS extensions)       │  │
│  └────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

Technology Considerations

Component Options
Slide engine Custom JS (no external framework)
Lightbox Custom overlay with fit-content sizing
Presenter view Window.open() to 2nd screen + BroadcastChannel API
Annotations Canvas overlay + toolbar (freehand, arrow, rect, circle, eraser, 6 colors)
PDF export window.print() — no external library, respects picker selections
Offline Service Worker (network-first caching strategy)
Diagram zoom Custom pan/zoom (wheel + drag + pinch, no external library)

v2 Features (Later)

Feature Description
Customer branding Add customer logo to title slide ("Prepared for Contoso Ltd")
Phone remote QR code link to control slides from phone
Slide templates Pre-defined layouts (comparison, timeline, diagram-focus)
Recording integration Built-in screen recording from the portal

Use Cases

  1. YouTube Videos: Record demos, press P to present a concept, resume demo — all in one app
  2. Customer Enablement: Present from the portal with branded slides, share PDF after
  3. Internal Training: Use the same content for team enablement at Microsoft
  4. Conference Talks: Full presentation tool with offline support

Success Criteria

  • [x] Can enter/exit presentation mode on any doc page
  • [x] Slides auto-split cleanly by headings
  • [x] Speaker notes auto-generated from content (with contextual coaching)
  • [x] Presenter view works on second screen (BroadcastChannel)
  • [x] Lightbox pop-out works for all content elements
  • [x] Clean fade transitions between slides
  • [x] Slide picker/overview with element-level toggle
  • [x] Laser pointer and drawing tools (freehand, arrow, rect, circle, eraser, colors)
  • [x] Whiteboard/blackboard canvas for free explaining
  • [x] Offline mode works reliably (Service Worker)
  • [x] PDF export produces clean static slides
  • [x] Mermaid diagrams enabled and zoomable/pannable
  • [x] Retro neon theme applied throughout

🎬 PortalPresenter User Guide

Every page on this site can become a full-screen presentation — no PowerPoint needed. Here's how to use it.

Quick Start

  1. Open any learning page
  2. Click the ▶ Present button (bottom-right corner) or press P
  3. Use → arrow to advance (reveals content step-by-step)
  4. Press Esc to exit

Keyboard Shortcuts

Key Action
P Enter presentation mode
→ / Space Next fragment or slide
← Previous slide
Home Jump to first slide
End Jump to last slide
F Toggle fullscreen
O Slide overview / picker
S Open speaker notes (2nd screen)
L Laser pointer
D Drawing mode
W Whiteboard / blackboard
E Eraser
C Clear annotations
X Export to PDF
Esc Exit (closes active tool first)

Features

🧩 Build-Up Animations

Content reveals one element at a time — tables build row-by-row, lists appear step-by-step. This keeps your audience focused on what you're explaining right now.

🔍 Click to Zoom

Click any table, code block, diagram, or tip box to pop it out full-screen. Perfect for zooming into details during a live session. Press Esc or click outside to close.

📋 Slide Picker

Press O to see all slides as a grid. You can:

  • Skip slides — uncheck the box to hide them
  • Toggle elements — click ⚙️ to show/hide individual elements per slide
  • Jump — click any slide card to jump directly to it

🖊️ Annotations

While presenting, press D to draw freehand, or use the toolbar for arrows, rectangles, and circles. Pick from 6 colours. Drawings persist per slide.

📝 Whiteboard

Press W to open a blank canvas for freehand explanations. Toggle between a dark blackboard and light whiteboard with the 🔄 button.

🎤 Presenter View

Press S to open a second window with:

  • Current slide preview
  • Speaker notes (auto-generated from page content)
  • Next slide preview
  • Elapsed timer

Drag this window to your second monitor for a classic presenter setup.

📄 PDF Export

Press X to export your presentation as a PDF. It respects any slides you've skipped or elements you've hidden via the picker.

🏢 Customer Branding

Page authors can add a client name to the title slide by adding this to the page frontmatter:

---
meta:
  - name: presenter_client
    content: "Contoso Ltd"
---

The title slide will then show "Prepared for Contoso Ltd".

Touch / Mobile

Swipe left or right to navigate slides on touch devices.

Tips

Best pages for presenting

Pages with headings (H2/H3), tables, code blocks, and admonitions create the best slides. The engine splits content automatically at each heading.

Practice with the picker

Before a session, press O to review all slides. Skip anything you don't need and customise the flow for your audience.