fix: enhance slide loading and error handling in WorkflowHero component

Author: mnkiefer

.github/workflows/docs.yml

@@ -49,6 +49,8 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          lfs: true
 
       - name: Setup Node.js
         uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6

docs/package.json

@@ -10,7 +10,7 @@
     "start": "astro dev",
     "prebuild": "npm run generate-agent-factory && npm run generate-model-tables && npm run build:slides",
     "build": "rm -rf dist && astro build",
-    "build:slides": "mkdir -p public/slides && cp slides/github-agentic-workflows.pdf public/slides/github-agentic-workflows.pdf",
+    "build:slides": "head -c 5 slides/github-agentic-workflows.pdf | grep -q '%PDF-' && mkdir -p public/slides && cp slides/github-agentic-workflows.pdf public/slides/github-agentic-workflows.pdf || (echo 'slides/github-agentic-workflows.pdf is not a real PDF. Did checkout skip Git LFS?' >&2; exit 1)",
     "preview": "astro preview",
     "astro": "astro",
     "validate-links": "astro build",

docs/src/components/WorkflowHero.astro

@@ -32,14 +32,27 @@ const deck = {
     const root = document.querySelector('[data-slide-hero]');
     if (!root) throw new Error('Slide hero root not found');
 
+    /** @type {HTMLElement | null} */
+    let heroRoot = null;
+
     function mountIntoHero() {
       const hero = document.querySelector('.hero');
-      if (!hero || root.parentElement === hero) return;
+      if (!hero) return;
+
+      heroRoot = hero;
+      hero.dataset.workflowHeroMounted = 'true';
+      if (root.parentElement === hero) return;
 
       hero.append(root);
       root.classList.add('workflow-hero--mounted');
     }
 
+    function unmountFromHero() {
+      stopCarousel();
+      root.remove();
+      heroRoot?.removeAttribute('data-workflow-hero-mounted');
+    }
+
     mountIntoHero();
 
     /** @type {HTMLElement | null} */
@@ -131,7 +144,7 @@ const deck = {
         startCarousel();
       } catch (error) {
         console.error('Failed to load PDF slides', error);
-        if (loading) loading.textContent = 'Unable to load slides';
+        unmountFromHero();
       }
     }
 
@@ -247,7 +260,7 @@ const deck = {
   }
 
   @media (min-width: 50rem) {
-    :global(.hero) {
+    :global(.hero[data-workflow-hero-mounted='true']) {
       grid-template-columns: minmax(0, 7fr) minmax(0, 13fr);
       align-items: center;
       gap: 1.5rem;

docs/tests/slide-preview.spec.ts

@@ -122,9 +122,11 @@ test.describe('Slide Preview on Homepage', () => {
     // Wait a bit for the error to be displayed
     await page.waitForTimeout(2000);
 
-    // Verify error message is displayed
-    const loading = page.locator('[data-slide-loading]');
-    const errorText = await loading.textContent();
-    expect(errorText).toContain('Unable to load slides');
+    // Verify the slide preview is removed so the default hero layout remains.
+    const slideHero = page.locator('[data-slide-hero]');
+    await expect(slideHero).toHaveCount(0);
+
+    const hero = page.locator('.hero');
+    await expect(hero).not.toHaveAttribute('data-workflow-hero-mounted', 'true');
   });
 });