Fix landing demo asset path on GitHub Pages

Author: pulkitgoel

.github/workflows/ci.yml

@@ -20,3 +20,4 @@ jobs:
       - run: npm run test:e2e
         env:
           PLAYWRIGHT_PRODUCTION: 1
+      - run: npm run test:pages

README.md

@@ -170,6 +170,7 @@ header. See [SECURITY.md](SECURITY.md).
     npm run verify
     npx playwright install chromium
     npm run test:e2e
+    npm run test:pages
     npm audit
     npm run preview
 
@@ -189,6 +190,10 @@ unit tests, dependency audit, and Chromium end-to-end tests. Automated provider
 tests are mocked and never require a real key; live providers need a separate
 smoke test.
 
+`npm run test:pages` builds with the `/pulsegraph/` deployment prefix and checks
+that the landing GIF and reduced-motion PNG load successfully, catching asset
+paths that work locally but break on GitHub Pages.
+
 Regressions cover parsing (including stadium labels), malformed AI output, graph
 preservation, document round trips, framing limits, cycles, self-loops and a
 100-graph routing corpus. Browser tests cover editing, recovery, real exports,

package.json

@@ -13,6 +13,7 @@
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "test:e2e": "playwright test",
+    "test:pages": "playwright test --config playwright.pages.config.ts",
     "verify": "npm run format:check && npm run lint && npm run build && npm run typecheck:tests && npm test",
     "typecheck:tests": "tsc -p tsconfig.tests.json"
   },

playwright.pages.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from '@playwright/test';
+import workspaceConfig from './playwright.config';
+
+const pagesUrl = 'http://127.0.0.1:5179/pulsegraph/';
+
+export default defineConfig(workspaceConfig, {
+  testDir: './tests/pages',
+  use: { ...workspaceConfig.use, baseURL: pagesUrl },
+  webServer: {
+    command:
+      'npm run build -- --base=/pulsegraph/ && npm run preview -- --base=/pulsegraph/ --host 127.0.0.1 --port 5179 --strictPort',
+    url: pagesUrl,
+    reuseExistingServer: false,
+  },
+});

src/components/LandingPage.tsx

@@ -153,7 +153,7 @@ function BrowserShowcase() {
         </div>
         <div className="browser-screen">
           <img
-            src="/pulsegraph-live-flow.gif?v=8"
+            src={`${import.meta.env.BASE_URL}pulsegraph-live-flow.gif?v=8`}
             alt="PulseGraph animating a production API from customer and edge security through services, data stores and monitoring"
             width={2560}
             height={1440}

tests/e2e/workspace.spec.ts

@@ -143,6 +143,11 @@ test('browser showcase adds responsive depth and respects reduced motion', async
   await stage.scrollIntoViewIfNeeded();
   await expect(shot).toBeVisible();
   await expect(shot.locator('img')).toHaveJSProperty('complete', true);
+  await expect
+    .poll(() =>
+      shot.locator('img').evaluate((image) => (image as HTMLImageElement).naturalWidth),
+    )
+    .toBeGreaterThan(0);
 
   const bounds = await stage.boundingBox();
   expect(bounds).not.toBeNull();

tests/pages/landing.spec.ts

@@ -0,0 +1,38 @@
+import { expect, test } from '@playwright/test';
+
+test('landing demo loads from the GitHub Pages subpath in both motion preferences', async ({
+  page,
+}) => {
+  await page.emulateMedia({ reducedMotion: 'no-preference' });
+  const failedAssets: string[] = [];
+  page.on('response', (response) => {
+    if (response.status() >= 400) failedAssets.push(response.url());
+  });
+  await page.goto('./');
+  const preview = page.locator('.browser-screen img');
+  await preview.scrollIntoViewIfNeeded();
+  await expect(preview).toHaveAttribute(
+    'src',
+    '/pulsegraph/pulsegraph-live-flow.gif?v=8',
+  );
+  await expect
+    .poll(() => preview.evaluate((image) => (image as HTMLImageElement).naturalWidth))
+    .toBe(2560);
+  const gif = await page.request.get((await preview.getAttribute('src')) as string);
+  expect(gif.status()).toBe(200);
+  expect(gif.headers()['content-type']).toContain('image/gif');
+
+  const staticResponse = page.waitForResponse((response) =>
+    response.url().endsWith('/pulsegraph/pulsegraph-live-flow-static.png'),
+  );
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  expect((await staticResponse).status()).toBe(200);
+  await expect(preview).toHaveCSS(
+    'content',
+    'url("http://127.0.0.1:5179/pulsegraph/pulsegraph-live-flow-static.png")',
+  );
+  expect(failedAssets).toEqual([]);
+  await page
+    .locator('.browser-shot')
+    .screenshot({ path: 'test-results/pages-landing-demo.png' });
+});

tsconfig.tests.json

@@ -10,5 +10,5 @@
     "skipLibCheck": true,
     "types": ["node", "vite/client"]
   },
-  "include": ["tests/**/*.ts", "playwright.config.ts"]
+  "include": ["tests/**/*.ts", "playwright*.config.ts"]
 }