stack-site-builder 1.17.3 → 1.17.4

package/CHANGELOG.md

@@ -11,6 +11,18 @@ content schema, while a consuming site supplies only content, taxonomy data and
 config. Sites track the theme with `pnpm up stack-site-builder`, so each release
 here is a plain version bump they pull in.
 
+## [1.17.4] - 2026-07-22
+
+### Changed
+
+- **Deck embeds are click-to-run** — 1.17.3 only paused demos you had merely
+  scrolled past; once you *interacted* with one, its (now heavier) loops kept
+  janking transitions while its slide was near the screen. Every slide iframe
+  now starts blank behind a themed "Run the demo" overlay (`slides.runEmbed`
+  UI string), loads only on click, and unloads back to the overlay as soon as
+  its slide leaves the screen — the deck never carries a live embed between
+  slides.
+
 ## [1.17.3] - 2026-07-22
 
 ### Fixed
@@ -265,6 +277,7 @@ catalog sites from a thin content-only repository.
 - **Standalone development setup** — a devcontainer and a minimal `playground/`
   consuming site for developing and previewing the theme on its own.
 
+[1.17.4]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.17.3...v1.17.4
 [1.17.3]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.17.2...v1.17.3
 [1.17.2]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.17.1...v1.17.2
 [1.17.1]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.17.0...v1.17.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stack-site-builder",
   "type": "module",
-  "version": "1.17.3",
+  "version": "1.17.4",
   "license": "MIT",
   "description": "The engine behind the awesome-*-stack catalog sites: an Astro theme with the catalog/concepts/articles/slides/samples routes, components, styles and markdown pipeline. Sites provide content, taxonomy data and config.",
   "repository": {

package/src/components/DeckView.astro

@@ -64,6 +64,7 @@ const priv = entry.data.private;
     <main
       class:list={['aas-deck', themeClass]}
       data-deck
+      data-run-embed-label={t('slides.runEmbed')}
       data-transition={entry.data.transition}
       data-toc={String(entry.data.toc)}
       data-toc-level={String(entry.data.toc_level)}
@@ -173,31 +174,47 @@ const priv = entry.data.private;
         const btnNext = document.querySelector<HTMLButtonElement>('[data-next]');
         if (elTot) elTot.textContent = String(total);
 
-        // Heavy embeds (interactive demo iframes) keep animating offscreen and
-        // make every later slide transition jank. Keep only the on/near-screen
-        // slides' iframes live: leaving a slide blanks its frames (src stashed
-        // on the element), returning restores them — the demo reloads fresh,
-        // exactly like a page refresh. One viewport of margin each side means
-        // the neighbor slide is already loading while you transition into it.
-        const framedSlides = slides.filter((s) => s.querySelector('iframe'));
-        if (framedSlides.length) {
+        // Heavy embeds (interactive demo iframes) jank slide transitions the
+        // moment they run — worse once the viewer has interacted with one. So
+        // embeds are click-to-run: each iframe starts blank behind a "run"
+        // overlay (src stashed), loads only when the viewer asks, and unloads
+        // back to the overlay as soon as its slide leaves the screen. The deck
+        // itself never carries a live embed between slides.
+        const runLabel = deck.dataset.runEmbedLabel || 'Run';
+        const embeds = Array.from(deck.querySelectorAll<HTMLIFrameElement>('.aas-slide iframe'));
+        if (embeds.length) {
+          for (const f of embeds) {
+            f.dataset.aasSrc = f.getAttribute('src') ?? '';
+            f.removeAttribute('src');
+            const wrap = document.createElement('div');
+            wrap.className = 'aas-embed';
+            f.parentNode?.insertBefore(wrap, f);
+            wrap.appendChild(f);
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'aas-embed-run';
+            btn.innerHTML = `<span aria-hidden="true">▶</span> ${runLabel}`;
+            btn.addEventListener('click', () => {
+              if (f.dataset.aasSrc) f.setAttribute('src', f.dataset.aasSrc);
+              wrap.classList.add('running');
+            });
+            wrap.appendChild(btn);
+          }
           const io = new IntersectionObserver(
             (entries) => {
               for (const e of entries) {
+                if (e.isIntersecting) continue;
                 for (const f of Array.from(e.target.querySelectorAll<HTMLIFrameElement>('iframe'))) {
-                  const src = f.getAttribute('src');
-                  if (e.isIntersecting) {
-                    if (!src && f.dataset.aasSrc) f.setAttribute('src', f.dataset.aasSrc);
-                  } else if (src) {
-                    f.dataset.aasSrc = src;
+                  if (f.getAttribute('src')) {
                     f.removeAttribute('src');
+                    f.closest('.aas-embed')?.classList.remove('running');
                   }
                 }
               }
             },
-            { root: deck, rootMargin: '0px 100% 0px 100%' },
+            { root: deck },
           );
-          framedSlides.forEach((s) => io.observe(s));
+          slides.filter((s) => s.querySelector('iframe')).forEach((s) => io.observe(s));
         }
 
         let current = 0;

package/src/i18n/ui.ts

@@ -90,6 +90,7 @@ export const ui = {
     'slides.zoom': 'Enlarge',
     'slides.close': 'Close',
     'slides.overview': 'Overview',
+    'slides.runEmbed': 'Run the demo',
     'sample.title': 'Samples',
     'sample.tagline':
       'The runnable mini-projects behind the catalog — download a folder and run it with Docker.',
@@ -253,6 +254,7 @@ export const ui = {
     'slides.zoom': '크게 보기',
     'slides.close': '닫기',
     'slides.overview': '한눈에 보기',
+    'slides.runEmbed': '데모 실행',
     'sample.title': '샘플',
     'sample.tagline': '카탈로그 뒤의 실행 가능한 미니 프로젝트 — 폴더를 받아 Docker로 실행해 보세요.',
     'sample.usedBy': '이 샘플을 쓰는 곳',

package/src/styles/global.css

@@ -2355,3 +2355,32 @@ summary {
   min-width: 3.5ch;
   text-align: center;
 }
+
+/* Click-to-run embeds in slide decks (DeckView wraps each slide iframe): the
+   frame stays blank behind this overlay until the viewer runs it; leaving the
+   slide unloads the frame and brings the overlay back. */
+.aas-embed {
+  position: relative;
+  display: block;
+}
+.aas-embed .aas-embed-run {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px dashed var(--aas-border);
+  border-radius: 12px;
+  background: var(--aas-panel);
+  color: var(--aas-text);
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+}
+.aas-embed .aas-embed-run:hover {
+  background: var(--aas-tint);
+}
+.aas-embed.running .aas-embed-run {
+  display: none;
+}