npm - stack-site-builder - Versions diffs - 1.17.1 → 1.17.3 - Mend

stack-site-builder 1.17.1 → 1.17.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/CHANGELOG.md +23 -0
package/package.json +1 -1
package/src/components/DeckView.astro +31 -1
package/src/layouts/BaseLayout.astro +4 -16
package/src/lib/icons.ts +30 -0

package/CHANGELOG.md CHANGED Viewed

@@ -11,6 +11,27 @@ 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.3] - 2026-07-22
+### Fixed
+- **Slide transitions degraded after passing embed slides** — interactive
+  demo iframes kept their animation loops running offscreen, janking every
+  later transition until a refresh. The deck now keeps only the on/near-
+  screen slides' iframes live (an IntersectionObserver with one viewport of
+  side margin stashes/restores `src`), so a revisited demo reloads fresh and
+  transitions stay smooth.
+## [1.17.2] - 2026-07-22
+### Fixed
+- **Slide decks ignored the site's custom favicon** — DeckView owns its own
+  `<head>` (fullscreen layout) and still hardcoded `/favicon.svg`. Browser
+  icons are now resolved once in `lib/icons` and shared by BaseLayout and
+  DeckView, so `site.icons` applies everywhere (favicon, apple-touch,
+  manifest).
 ## [1.17.1] - 2026-07-22
 ### Fixed
@@ -244,6 +265,8 @@ 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.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
 [1.17.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.16.0...v1.17.0
 [1.16.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.15.0...v1.16.0

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "stack-site-builder",
   "type": "module",
-  "version": "1.17.1",
+  "version": "1.17.3",
   "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 CHANGED Viewed

@@ -6,6 +6,7 @@ import { render, type CollectionEntry } from 'astro:content';
 import MermaidLoader from './MermaidLoader.astro';
 import PrivateGate from './PrivateGate.astro';
 import { useTranslations, type Lang } from '../i18n/ui';
+import { siteIcons } from '../lib/icons';
 // Renders a full-screen slide deck as a horizontal scroll-snap presentation.
 // A page (src/pages/slides/[deck].astro and its ko/ sibling) picks the deck for
@@ -33,7 +34,9 @@ const priv = entry.data.private;
     <title>{entry.data.title} — {site.name}</title>
     <meta name="description" content={(priv ? entry.data.teaser : entry.data.description) ?? ''} />
     {priv && <meta name="robots" content="noindex" />}
-    <link rel="icon" type="image/svg+xml" href={`${base}/favicon.svg`} />
+    <link rel="icon" {...(siteIcons.faviconType ? { type: siteIcons.faviconType } : {})} href={`${base}${siteIcons.favicon}`} />
+    {siteIcons.appleTouch && <link rel="apple-touch-icon" href={`${base}${siteIcons.appleTouch}`} />}
+    {siteIcons.manifest && <link rel="manifest" href={`${base}${siteIcons.manifest}`} />}
     {/* Follow the site's light/dark preference before first paint (same logic as
         BaseLayout). The deck's visual theme is a separate CSS class, below. */}
     <script is:inline>
@@ -170,6 +173,33 @@ 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) {
+          const io = new IntersectionObserver(
+            (entries) => {
+              for (const e of entries) {
+                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;
+                    f.removeAttribute('src');
+                  }
+                }
+              }
+            },
+            { root: deck, rootMargin: '0px 100% 0px 100%' },
+          );
+          framedSlides.forEach((s) => io.observe(s));
+        }
         let current = 0;
         // Step reveal (fragments): each slide's `.aas-step` elements are revealed
         // one at a time. `shown[i]` = how many are currently visible.

package/src/layouts/BaseLayout.astro CHANGED Viewed

@@ -10,6 +10,7 @@ import { getNavPages, pageSlugOf } from '../lib/pages';
 import { getNavProducts, getTopProducts, productSlugOf } from '../lib/products';
 import { homeTemplate } from '../lib/home';
 import { sectionEnabled, type SectionKey } from '../lib/sections';
+import { siteIcons } from '../lib/icons';
 interface Props {
   title: string;
@@ -33,19 +34,6 @@ const container = wide ? 'max-w-[81rem]' : 'max-w-[75rem]';
 const home = getRelativeLocaleUrl(lang, '');
 const base = import.meta.env.BASE_URL;
-// Site-configurable browser icons (`site.icons`). `favicon` may be any image
-// the browser can render (SVG/PNG/ICO — public/ path); appleTouch/manifest
-// links render only when declared. Defaults to the theme's /favicon.svg.
-const icons =
-  (site as { icons?: { favicon?: string; appleTouch?: string; manifest?: string } }).icons ?? {};
-const faviconHref = icons.favicon ?? '/favicon.svg';
-const faviconType = faviconHref.endsWith('.svg')
-  ? 'image/svg+xml'
-  : faviconHref.endsWith('.png')
-    ? 'image/png'
-    : faviconHref.endsWith('.ico')
-      ? 'image/x-icon'
-      : undefined;
 const baseNoSlash = base.replace(/\/$/, '');
 // Home URL per locale, for the language auto-detect redirect on the root home.
@@ -173,9 +161,9 @@ const navItems = allNavItems.filter((item) => !item.section || sectionEnabled(it
     <title>{title}</title>
     <meta name="description" content={description} />
     {noindex && <meta name="robots" content="noindex" />}
-    <link rel="icon" {...(faviconType ? { type: faviconType } : {})} href={`${baseNoSlash}${faviconHref}`} />
-    {icons.appleTouch && <link rel="apple-touch-icon" href={`${baseNoSlash}${icons.appleTouch}`} />}
-    {icons.manifest && <link rel="manifest" href={`${baseNoSlash}${icons.manifest}`} />}
+    <link rel="icon" {...(siteIcons.faviconType ? { type: siteIcons.faviconType } : {})} href={`${baseNoSlash}${siteIcons.favicon}`} />
+    {siteIcons.appleTouch && <link rel="apple-touch-icon" href={`${baseNoSlash}${siteIcons.appleTouch}`} />}
+    {siteIcons.manifest && <link rel="manifest" href={`${baseNoSlash}${siteIcons.manifest}`} />}
     {
       sectionEnabled('articles') && (
         <link

package/src/lib/icons.ts ADDED Viewed

@@ -0,0 +1,30 @@
+import { site } from '@aas-data/site';
+/**
+ * The site's browser icons (`site.ts` `icons`), resolved once with the theme
+ * default. Shared by every layout that owns a `<head>` (BaseLayout, DeckView)
+ * so a site's custom favicon applies everywhere.
+ */
+export interface SiteIcons {
+  favicon: string;
+  faviconType?: string;
+  appleTouch?: string;
+  manifest?: string;
+}
+const cfg =
+  (site as { icons?: { favicon?: string; appleTouch?: string; manifest?: string } }).icons ?? {};
+const favicon = cfg.favicon ?? '/favicon.svg';
+export const siteIcons: SiteIcons = {
+  favicon,
+  faviconType: favicon.endsWith('.svg')
+    ? 'image/svg+xml'
+    : favicon.endsWith('.png')
+      ? 'image/png'
+      : favicon.endsWith('.ico')
+        ? 'image/x-icon'
+        : undefined,
+  appleTouch: cfg.appleTouch,
+  manifest: cfg.manifest,
+};