chore: update slides and place on hero page

docs/astro.config.mjs

@@ -74,6 +74,8 @@ export default defineConfig({
 
 		// Introduction how-it-works → how-they-work
 		'/introduction/how-it-works/': '/gh-aw/introduction/how-they-work/',
+		'/introduction/slides/': '/gh-aw/',
+		'/slides/': '/gh-aw/',
 
 		// Tools → Setup renames
 		'/tools/cli/': '/gh-aw/setup/cli/',

docs/package.json

@@ -2,12 +2,15 @@
   "name": "docs",
   "type": "module",
   "version": "0.0.1",
+  "engines": {
+    "node": ">=22.13.0"
+  },
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
     "prebuild": "npm run generate-agent-factory && npm run generate-model-tables && npm run build:slides",
-    "build": "astro build",
-    "build:slides": "mkdir -p public/js && cp node_modules/mermaid/dist/mermaid.min.js public/js/ && npx @marp-team/marp-cli slides/index.md --html --allow-local-files --theme slides/gh-aw-theme.css -o public/slides/index.html && mkdir -p public/slides && cp slides/*.pdf public/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",
     "preview": "astro preview",
     "astro": "astro",
     "validate-links": "astro build",
@@ -25,14 +28,14 @@
     "astro": "^6.4.4",
     "astro-mermaid": "^2.0.2",
     "mermaid": "^11.15.0",
+    "pdfjs-dist": "^6.0.227",
     "sharp": "^0.34.5",
     "starlight-blog": "^0.26.1",
     "starlight-changelogs": "^0.5.0",
     "starlight-links-validator": "^0.24.0",
     "yaml": "^2.9.0"
   },
   "devDependencies": {
-    "@marp-team/marp-cli": "^4.4.0",
     "@playwright/test": "^1.60.0",
     "@types/primer__octicons": "^19.21.0",
     "http-server": "^14.1.1",

docs/src/components/WorkflowHero.astro

@@ -0,0 +1,285 @@
+---
+const deck = {
+  pdf: `${import.meta.env.BASE_URL}slides/github-agentic-workflows.pdf`,
+  title: 'April 7, 2026 slide deck preview',
+  intervalMs: 4200,
+};
+---
+
+<section
+  class="workflow-hero"
+  data-slide-hero
+  data-pdf-src={deck.pdf}
+  data-slide-interval={String(deck.intervalMs)}
+  aria-label={deck.title}
+>
+  <div class="workflow-hero__feature">
+    <div class="workflow-hero__frame-wrap" data-slide-stage>
+      <div class="workflow-hero__slides">
+        <div class="workflow-hero__loading" data-slide-loading>Loading slides...</div>
+        <canvas class="workflow-hero__canvas" data-slide-canvas role="img" aria-label={deck.title}></canvas>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    import * as pdfjsLib from 'pdfjs-dist/build/pdf.mjs';
+    import workerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url';
+
+    pdfjsLib.GlobalWorkerOptions.workerSrc = workerUrl;
+
+    /** @type {HTMLElement | null} */
+    const root = document.querySelector('[data-slide-hero]');
+    if (!root) throw new Error('Slide hero root not found');
+
+    function mountIntoHero() {
+      const hero = document.querySelector('.hero');
+      if (!hero || root.parentElement === hero) return;
+
+      hero.append(root);
+      root.classList.add('workflow-hero--mounted');
+    }
+
+    mountIntoHero();
+
+    /** @type {HTMLElement | null} */
+    const stage = root.querySelector('[data-slide-stage]');
+    /** @type {HTMLCanvasElement | null} */
+    const canvas = root.querySelector('[data-slide-canvas]');
+    /** @type {HTMLElement | null} */
+    const loading = root.querySelector('[data-slide-loading]');
+    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const pdfSrc = root.getAttribute('data-pdf-src');
+    const slideInterval = Number(root.getAttribute('data-slide-interval') || '4200');
+    const canvasContext = canvas?.getContext('2d', { alpha: false });
+    const bufferCanvas = document.createElement('canvas');
+    const bufferContext = bufferCanvas.getContext('2d', { alpha: false });
+
+    /** @type {import('pdfjs-dist/types/src/display/api').PDFDocumentProxy | null} */
+    let pdfDocument = null;
+    let activePage = 1;
+    let renderVersion = 0;
+    /** @type {number | undefined} */
+    let autoplayTimer;
+
+    function stopCarousel() {
+      window.clearInterval(autoplayTimer);
+    }
+
+    function startCarousel() {
+      if (reduceMotion.matches || !pdfDocument || pdfDocument.numPages < 2) return;
+      stopCarousel();
+      autoplayTimer = window.setInterval(() => {
+        void renderPage((activePage % pdfDocument.numPages) + 1);
+      }, slideInterval);
+    }
+
+    function openPresentation() {
+      if (!pdfSrc) return;
+      window.location.assign(pdfSrc);
+    }
+
+    async function renderPage(pageNumber) {
+      if (!pdfDocument || !canvas || !canvasContext || !bufferContext || !stage) return;
+
+      const currentRender = ++renderVersion;
+      const page = await pdfDocument.getPage(pageNumber);
+      if (currentRender !== renderVersion) return;
+
+      const devicePixelRatio = window.devicePixelRatio || 1;
+      const baseViewport = page.getViewport({ scale: 1 });
+      const availableWidth = stage.clientWidth - 16;
+      const scale = Math.max(availableWidth / baseViewport.width, 0.5);
+      const viewport = page.getViewport({ scale });
+
+      bufferCanvas.width = Math.floor(viewport.width * devicePixelRatio);
+      bufferCanvas.height = Math.floor(viewport.height * devicePixelRatio);
+
+      bufferContext.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
+      bufferContext.clearRect(0, 0, viewport.width, viewport.height);
+
+      const renderTask = page.render({
+        canvasContext: bufferContext,
+        viewport,
+      });
+
+      await renderTask.promise;
+      if (currentRender !== renderVersion) return;
+
+      canvas.width = bufferCanvas.width;
+      canvas.height = bufferCanvas.height;
+      canvas.style.width = `${Math.floor(viewport.width)}px`;
+      canvas.style.height = `${Math.floor(viewport.height)}px`;
+      canvasContext.setTransform(1, 0, 0, 1, 0, 0);
+      canvasContext.clearRect(0, 0, canvas.width, canvas.height);
+      canvasContext.drawImage(bufferCanvas, 0, 0);
+
+      activePage = pageNumber;
+      loading?.setAttribute('hidden', 'hidden');
+      root.classList.add('is-ready');
+    }
+
+    async function loadSlides() {
+      if (!pdfSrc || !canvas || !canvasContext || !bufferContext) return;
+
+      try {
+        const task = pdfjsLib.getDocument({
+          url: pdfSrc,
+        });
+        pdfDocument = await task.promise;
+        await renderPage(1);
+        startCarousel();
+      } catch (error) {
+        console.error('Failed to load PDF slides', error);
+        if (loading) loading.textContent = 'Unable to load slides';
+      }
+    }
+
+    stage?.addEventListener('mouseenter', stopCarousel);
+    stage?.addEventListener('mouseleave', startCarousel);
+    stage?.addEventListener('click', openPresentation);
+    stage?.setAttribute('tabindex', '0');
+    stage?.setAttribute('role', 'link');
+    stage?.setAttribute('aria-label', 'Open slide presentation');
+    stage?.addEventListener('keydown', (event) => {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      event.preventDefault();
+      openPresentation();
+    });
+    root.addEventListener('focusin', stopCarousel);
+    root.addEventListener('focusout', startCarousel);
+
+    document.addEventListener('visibilitychange', () => {
+      if (document.hidden) {
+        stopCarousel();
+        return;
+      }
+
+      startCarousel();
+    });
+
+    if (typeof reduceMotion.addEventListener === 'function') {
+      reduceMotion.addEventListener('change', () => {
+        if (reduceMotion.matches) {
+          stopCarousel();
+          return;
+        }
+
+        startCarousel();
+      });
+    }
+
+    window.addEventListener('resize', () => {
+      if (!pdfDocument) return;
+      void renderPage(activePage);
+    });
+
+    void loadSlides();
+  </script>
+</section>
+
+<style>
+  .workflow-hero {
+    position: relative;
+    margin: 0 0 1.5rem 0;
+  }
+
+  .workflow-hero__feature {
+    position: relative;
+    max-width: 52rem;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 1.25rem;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.03);
+    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
+  }
+
+  .workflow-hero__frame-wrap {
+    position: relative;
+    overflow: hidden;
+    padding: 0.5rem;
+    background: rgba(255, 255, 255, 0.02);
+  }
+
+  .workflow-hero__slides {
+    position: relative;
+    z-index: 2;
+    display: grid;
+    place-items: center;
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+    cursor: pointer;
+  }
+
+  .workflow-hero__loading {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--sl-color-gray-3);
+    letter-spacing: 0.02em;
+  }
+
+  .workflow-hero__canvas {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    border-radius: 1rem;
+    border: 0;
+    background: transparent;
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
+    opacity: 0;
+    transform: perspective(1800px) rotateY(-1.5deg) rotateX(0.6deg) scale(0.992);
+    transition: opacity 240ms ease, transform 320ms ease;
+  }
+
+  .workflow-hero.is-ready .workflow-hero__canvas {
+    opacity: 1;
+    transform: perspective(1800px) rotateY(-1.5deg) rotateX(0.6deg) scale(1);
+    animation: workflow-hero-float 10s ease-in-out infinite;
+  }
+
+  :global(.hero) > .workflow-hero--mounted {
+    width: min(100%, 52rem);
+  }
+
+  @media (min-width: 50rem) {
+    :global(.hero) {
+      grid-template-columns: minmax(0, 7fr) minmax(0, 13fr);
+      align-items: center;
+      gap: 1.5rem;
+    }
+
+    :global(.hero) > .workflow-hero--mounted {
+      order: 2;
+      justify-self: stretch;
+      align-self: center;
+      width: 100%;
+      max-width: none;
+      margin: 0;
+    }
+
+    :global(.hero) > :first-child {
+      min-width: 0;
+    }
+  }
+
+  :global([data-theme='light']) .workflow-hero__feature {
+    background: rgba(255, 255, 255, 0.82);
+    color: var(--sl-color-black);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .workflow-hero__canvas {
+      animation: none;
+    }
+  }
+
+  @keyframes workflow-hero-float {
+    0%, 100% { transform: perspective(1800px) rotateY(-1.5deg) rotateX(0.6deg) translateY(0) scale(1); }
+    50% { transform: perspective(1800px) rotateY(-1deg) rotateX(0.3deg) translateY(-3px) scale(1.004); }
+  }
+</style>

docs/src/content/docs/index.mdx

@@ -20,6 +20,9 @@ import FeatureCard from '../../components/FeatureCard.astro';
 import FeatureGrid from '../../components/FeatureGrid.astro';
 import Video from '../../components/Video.astro';
 import BlogLinkSection from '../../components/BlogLinkSection.astro';
+import WorkflowHero from '../../components/WorkflowHero.astro';
+
+<WorkflowHero />
 
 Wake up to ready-to-review repository improvements-automated triage, CI insights, docs updates, and test enhancements from simple markdown workflows.