Let the page scroll over an embedded deck until it is clicked

scripts/sync-showcases.mjs

@@ -39,6 +39,7 @@ export function titleOf(slug) {
 export function entryOf(deck) {
   return {
     slug: deck.slug,
+    live: deck.variants ? `${deck.slug}/${deck.theme}` : deck.slug,
     title: titleOf(deck.slug),
     theme: deck.variants ? 'all five' : deck.theme,
     blurb: deck.blurb,
@@ -74,7 +75,7 @@ ${entry.blurb}
   <ngmd-pill href="/resources/showcases" title="All showcases"></ngmd-pill>
 </ngmd-pill-row>
 
-<ngmd-demo src="${liveUrl(entry.slug)}" title="${attr(entry.title)}" source="${sourceUrl(entry.slug)}"></ngmd-demo>
+<ngmd-demo src="${liveUrl(entry.live ?? entry.slug)}" title="${attr(entry.title)}" source="${sourceUrl(entry.slug)}"></ngmd-demo>
 `;
 }
 

showcases.spec.ts

@@ -69,8 +69,8 @@ describe('sync-showcases', () => {
 
   it('points every frame at an address the demo component accepts', () => {
     for (const entry of entries) {
-      expect(liveUrl(entry.slug)).toBe(`https://slide-ng.github.io/showcases/${entry.slug}/`);
-      expect(resolveDemoSrc(liveUrl(entry.slug), '/')).toBe(liveUrl(entry.slug));
+      expect(liveUrl(entry.live)).toBe(`https://slide-ng.github.io/showcases/${entry.live}/`);
+      expect(resolveDemoSrc(liveUrl(entry.live), '/')).toBe(liveUrl(entry.live));
     }
   });
 

src/app/data/showcases.json

@@ -1,6 +1,7 @@
 [
   {
     "slug": "angular-workshop",
+    "live": "angular-workshop",
     "title": "Angular Workshop",
     "theme": "default",
     "blurb": "A hands-on signals workshop: live components, Twoslash types, Magic Move refactors and a runnable editor.",
@@ -14,6 +15,7 @@
   },
   {
     "slug": "signals-deep-dive",
+    "live": "signals-deep-dive",
     "title": "Signals Deep Dive",
     "theme": "default",
     "blurb": "signal, computed, effect, linkedSignal, resource, model() and view queries, each running on its slide.",
@@ -26,6 +28,7 @@
   },
   {
     "slug": "forms-and-di",
+    "live": "forms-and-di",
     "title": "Forms and DI",
     "theme": "moss",
     "blurb": "Reactive and template-driven forms with @angular/forms, a root service shared across slides, host bindings and a directive in markdown.",
@@ -37,6 +40,7 @@
   },
   {
     "slug": "pipes-and-i18n",
+    "live": "pipes-and-i18n",
     "title": "Pipes and i18n",
     "theme": "paper",
     "blurb": "Angular's number, currency, date and text pipes in German, async and i18n pipes, and a custom pipe used straight from a slide.",
@@ -48,6 +52,7 @@
   },
   {
     "slug": "control-flow-torture",
+    "live": "control-flow-torture",
     "title": "Control Flow Torture",
     "theme": "blueprint",
     "blurb": "@if, @for, @switch, @let and @defer written straight into markdown, nested and mixed with tables, code and clicks.",
@@ -58,6 +63,7 @@
   },
   {
     "slug": "angular-animations-and-styles",
+    "live": "angular-animations-and-styles",
     "title": "Angular Animations and Styles",
     "theme": "minimal",
     "blurb": "animate.enter and animate.leave, view encapsulation, per-slide styles and CSS animations on clicks.",
@@ -69,6 +75,7 @@
   },
   {
     "slug": "scaffold-flow",
+    "live": "scaffold-flow",
     "title": "Scaffold Flow",
     "theme": "moss",
     "blurb": "The deck `slide-ng create` gives you, grown into a short talk on signals.",
@@ -80,6 +87,7 @@
   },
   {
     "slug": "clicks-masterclass",
+    "live": "clicks-masterclass",
     "title": "Clicks Masterclass",
     "theme": "default",
     "blurb": "Absolute and relative clicks, ranges, hide, nested lists, switches, fixed totals and click markers in notes.",
@@ -90,6 +98,7 @@
   },
   {
     "slug": "motion-and-transitions",
+    "live": "motion-and-transitions",
     "title": "Motion and Transitions",
     "theme": "moss",
     "blurb": "All seven slide transitions, view transitions, forward and backward pairs, slide-ng-motion and hand-drawn marks.",
@@ -101,6 +110,7 @@
   },
   {
     "slug": "magic-move-stories",
+    "live": "magic-move-stories",
     "title": "Magic Move Stories",
     "theme": "blueprint",
     "blurb": "A cart total refactored in six Shiki Magic Moves: long stories, ranges, side-by-side blocks, snippets and clicks.",
@@ -112,6 +122,7 @@
   },
   {
     "slug": "monaco-and-twoslash",
+    "live": "monaco-and-twoslash",
     "title": "Monaco and Twoslash",
     "theme": "moss",
     "blurb": "Editors in slides, diffs, code you can run in JavaScript and TypeScript, and Twoslash types.",
@@ -123,6 +134,7 @@
   },
   {
     "slug": "polyglot-code",
+    "live": "polyglot-code",
     "title": "Polyglot Code",
     "theme": "default",
     "blurb": "One API in twenty languages: titles, line steps, diffs, scrolling blocks, snippet regions and code groups.",
@@ -133,6 +145,7 @@
   },
   {
     "slug": "diagram-zoo",
+    "live": "diagram-zoo",
     "title": "Diagram Zoo",
     "theme": "minimal",
     "blurb": "Mermaid flowcharts, sequences, classes, states, ER diagrams and Gantt charts, in light and dark.",
@@ -143,6 +156,7 @@
   },
   {
     "slug": "math-lecture",
+    "live": "math-lecture",
     "title": "Math Lecture",
     "theme": "default",
     "blurb": "A 4:3 linear algebra lecture with KaTeX, stepped derivations and draggable vectors.",
@@ -154,6 +168,7 @@
   },
   {
     "slug": "math-heavy",
+    "live": "math-heavy",
     "title": "Math Heavy",
     "theme": "paper",
     "blurb": "Gradient descent: math in titles, derivations one line per click, matrices and footnotes.",
@@ -165,6 +180,7 @@
   },
   {
     "slug": "markdown-extras",
+    "live": "markdown-extras",
     "title": "Markdown Extras",
     "theme": "blueprint",
     "blurb": "A site file in markdown: footnotes, GitHub alerts, tables, task lists, keys, heading ids, image sizes, imported slides and HTML with markdown inside.",
@@ -174,6 +190,7 @@
   },
   {
     "slug": "layouts-and-sizes",
+    "live": "layouts-and-sizes",
     "title": "Layouts and Sizes",
     "theme": "paper",
     "blurb": "Every built-in layout on a square 1:1 canvas, from cover to iframe, with a table of contents per section.",
@@ -184,6 +201,7 @@
   },
   {
     "slug": "layouts-and-sizes-portrait",
+    "live": "layouts-and-sizes-portrait",
     "title": "Layouts and Sizes Portrait",
     "theme": "paper",
     "blurb": "The same layouts on a 9:16 portrait canvas, for phones and vertical screens.",
@@ -194,6 +212,7 @@
   },
   {
     "slug": "presenter-and-drawing",
+    "live": "presenter-and-drawing",
     "title": "Presenter and Drawing",
     "theme": "minimal",
     "blurb": "A talk about giving talks: presenter notes with clicks, a countdown, drawing, the laser pointer, custom keys and remote control.",
@@ -204,6 +223,7 @@
   },
   {
     "slug": "all-setup-hooks",
+    "live": "all-setup-hooks",
     "title": "All Setup Hooks",
     "theme": "default",
     "blurb": "One slide per setup hook: Shiki, KaTeX, transformers, a preparser, Mermaid, Monaco, custom code runners, keys and the right-click menu.",
@@ -214,6 +234,7 @@
   },
   {
     "slug": "theme-switcher",
+    "live": "theme-switcher/default",
     "title": "Theme Switcher",
     "theme": "all five",
     "blurb": "A talk on edge caching that builds unchanged with any of the five themes.",
@@ -223,6 +244,7 @@
   },
   {
     "slug": "typography-history",
+    "live": "typography-history",
     "title": "Typography History",
     "theme": "paper",
     "blurb": "A short history of type in the paper theme: a contents page, marks, footnotes and a type specimen.",
@@ -233,6 +255,7 @@
   },
   {
     "slug": "recipes-zine",
+    "live": "recipes-zine",
     "title": "Recipes Zine",
     "theme": "paper",
     "blurb": "A kitchen zine with its own recipe layout, a running footer layer and reader notes in four scripts.",
@@ -244,6 +267,7 @@
   },
   {
     "slug": "brand-deck",
+    "live": "brand-deck",
     "title": "Brand Deck",
     "theme": "paper",
     "blurb": "A brand guide for an invented roastery: its own layouts, fonts, a custom pipe and a PDF download.",
@@ -255,6 +279,7 @@
   },
   {
     "slug": "forest-carbon-report",
+    "live": "forest-carbon-report",
     "title": "Forest Carbon Report",
     "theme": "moss",
     "blurb": "A field report in the moss theme: KaTeX, Mermaid charts, a live plot table and a custom pipe.",
@@ -266,6 +291,7 @@
   },
   {
     "slug": "architecture-review",
+    "live": "architecture-review",
     "title": "Architecture Review",
     "theme": "blueprint",
     "blurb": "An architecture review: topology diagrams, code imported from files, Twoslash and an outbox refactor.",
@@ -277,6 +303,7 @@
   },
   {
     "slug": "conference-keynote",
+    "live": "conference-keynote",
     "title": "Conference Keynote",
     "theme": "blueprint",
     "blurb": "A keynote on Angular performance with a stamp addon, review notes, PWA install and a PDF download.",
@@ -288,6 +315,7 @@
   },
   {
     "slug": "product-update",
+    "live": "product-update",
     "title": "Product Update",
     "theme": "minimal",
     "blurb": "A quarterly product update that uses every built-in layout: big numbers, quotes, charts and a live changelog.",
@@ -298,6 +326,7 @@
   },
   {
     "slug": "ship-it",
+    "live": "ship-it",
     "title": "Ship It",
     "theme": "moss",
     "blurb": "How a talk ships as a site, a PDF, an offline folder and an installable app, and how this gallery goes out to GitHub Pages.",
@@ -309,6 +338,7 @@
   },
   {
     "slug": "rtl-and-languages",
+    "live": "rtl-and-languages",
     "title": "RTL and Languages",
     "theme": "blueprint",
     "blurb": "A transit plan in Arabic: right-to-left slides with left-to-right code, plus Japanese, German and Hebrew pages.",
@@ -320,6 +350,7 @@
   },
   {
     "slug": "edge-cases",
+    "live": "edge-cases",
     "title": "Edge Cases",
     "theme": "default",
     "blurb": "Long titles, long lists, wide tables, braces, entities and file names with spaces, all laid out cleanly.",

src/app/ui/demo.ts

@@ -42,20 +42,37 @@ type DemoState = 'checking' | 'ready' | 'unavailable';
   template: `
     <figure class="m-0">
       <div
-        class="relative w-full rounded-xl overflow-hidden bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800"
+        class="group relative w-full rounded-xl overflow-hidden bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800"
         [style.aspect-ratio]="ratio()"
+        (mouseleave)="active.set(false)"
       >
         @switch (state()) {
           @case ('ready') {
             <iframe
               [src]="safeUrl()"
               [title]="title()"
+              #frame
               class="absolute inset-0 w-full h-full border-0"
+              [class.pointer-events-none]="!active()"
               allow="fullscreen; clipboard-write"
               sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-downloads allow-presentation"
               loading="lazy"
               (error)="state.set('unavailable')"
             ></iframe>
+            @if (!active()) {
+              <button
+                type="button"
+                class="absolute inset-0 w-full h-full cursor-pointer border-0 bg-transparent p-0"
+                [attr.aria-label]="'Use the deck: ' + title()"
+                (click)="active.set(true); frame.focus()"
+              >
+                <span
+                  class="absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full bg-zinc-900/70 px-3 py-1 text-xs font-medium text-white opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
+                >
+                  Click to use the deck
+                </span>
+              </button>
+            }
           }
           @case ('checking') {
             <p
@@ -109,6 +126,7 @@ export class NgmdDemo {
   );
 
   protected readonly state = signal<DemoState>('ready');
+  protected readonly active = signal(false);
 
   constructor() {
     effect(() => {

src/content/resources/showcases/theme-switcher.md

@@ -14,4 +14,4 @@ A talk on edge caching that builds unchanged with any of the five themes.
   <ngmd-pill href="/resources/showcases" title="All showcases"></ngmd-pill>
 </ngmd-pill-row>
 
-<ngmd-demo src="https://slide-ng.github.io/showcases/theme-switcher/" title="Theme Switcher" source="https://github.com/slide-ng/showcases/tree/main/decks/theme-switcher"></ngmd-demo>
+<ngmd-demo src="https://slide-ng.github.io/showcases/theme-switcher/default/" title="Theme Switcher" source="https://github.com/slide-ng/showcases/tree/main/decks/theme-switcher"></ngmd-demo>