feat: publish demo page on GitHub Pages

Author: jkrenge

.github/workflows/pages.yml

@@ -0,0 +1,54 @@
+name: Deploy Demo Page
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: github-pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24.13.1
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build GitHub Pages site
+        run: node scripts/build-pages.mjs
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v4
+        with:
+          path: site
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -81,6 +81,7 @@ out
 # Nuxt.js build / generate output
 .nuxt
 dist
+site
 
 # Gatsby files
 .cache/

README.md

@@ -14,6 +14,14 @@ Build output:
 - `dist/size-recommender.iife.js` for `<script>` embeds
 - `dist/size-recommender.esm.js` for module consumers
 
+GitHub Pages demo build:
+
+```sh
+npm run build:pages
+```
+
+This writes a static demo site to `site/`.
+
 ## Dev Demo
 
 ```sh
@@ -28,6 +36,13 @@ Open [http://localhost:4173](http://localhost:4173). The demo page uses your sam
 The page loads the local IIFE bundle and initializes the widget via
 `window.SizeRecommender.init(...)`.
 
+## GitHub Pages Demo
+
+The repository is configured to publish the demo page with GitHub Pages from a
+custom GitHub Actions workflow. After deployment, the project site URL is:
+
+`https://jkrenge.github.io/size-recommender-ui/`
+
 ## HTML Embed
 
 ```html

dev/index.html

@@ -303,7 +303,7 @@ <h2>Embedded widget</h2>
       </div>
     </main>
 
-    <script src="/dist/size-recommender.iife.js"></script>
-    <script src="/dev/main.js"></script>
+    <script src="./dist/size-recommender.iife.js"></script>
+    <script src="./dev/main.js"></script>
   </body>
 </html>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@jkrenge/size-recommender-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Embeddable size recommender widget for retailer PDPs.",
   "type": "module",
   "license": "MIT",
@@ -16,6 +16,7 @@
   ],
   "scripts": {
     "build": "rm -rf dist && node scripts/build.mjs && tsc -p tsconfig.types.json",
+    "build:pages": "node scripts/build-pages.mjs",
     "dev": "node scripts/dev.mjs",
     "test": "vitest run --environment jsdom"
   },

package.json

@@ -0,0 +1,51 @@
+import { cp, mkdir, rm, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { build } from 'esbuild';
+
+const cwd = fileURLToPath(new URL('..', import.meta.url));
+const siteDir = path.join(cwd, 'site');
+const distDir = path.join(siteDir, 'dist');
+const devDir = path.join(siteDir, 'dev');
+
+await rm(siteDir, { force: true, recursive: true });
+await mkdir(distDir, { recursive: true });
+await mkdir(devDir, { recursive: true });
+
+const shared = {
+  bundle: true,
+  entryPoints: ['src/index.ts'],
+  legalComments: 'none',
+  minifyWhitespace: true,
+  sourcemap: false,
+  target: ['es2018'],
+  define: {
+    __VERSION__: JSON.stringify('pages'),
+  },
+};
+
+await build({
+  ...shared,
+  format: 'iife',
+  globalName: 'SizeRecommender',
+  minify: true,
+  outfile: path.join(distDir, 'size-recommender.iife.js'),
+  define: {
+    ...shared.define,
+    __AUTO_INIT__: 'true',
+  },
+});
+
+await build({
+  ...shared,
+  format: 'esm',
+  outfile: path.join(distDir, 'size-recommender.esm.js'),
+  define: {
+    ...shared.define,
+    __AUTO_INIT__: 'false',
+  },
+});
+
+await cp(path.join(cwd, 'dev', 'index.html'), path.join(siteDir, 'index.html'));
+await cp(path.join(cwd, 'dev', 'main.js'), path.join(devDir, 'main.js'));
+await writeFile(path.join(siteDir, '.nojekyll'), '');