Add version selector to web demo

.github/workflows/build-web-demo/action.yaml

@@ -1,10 +1,24 @@
 name: Build Web Demo
 description: Build the web demo
 
+on:
+  workflow_call:
+    inputs:
+      git_ref:
+        description: 'The git ref to checkout and build'
+        required: false
+        default: ''
 
 runs:
   using: "composite"
   steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+      if: ${{ inputs.git_ref != '' }}
+      with:
+        fetch-depth: 0
+        ref: ${{ inputs.git_ref }}
+
     - name: Install Rust
       uses: dtolnay/rust-toolchain@stable
 

.github/workflows/deploy-web-demo.yaml

@@ -3,10 +3,16 @@ name: Build and Deploy Web Demo to GitHub Pages
 on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
+    inputs:
+      git_ref:
+        description: 'The git ref to checkout and build'
+        required: false
 
   push:
     branches:
       - master
+    tags:
+      - v*
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
@@ -22,27 +28,94 @@ concurrency:
 jobs:
   build:
     runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.set-version.outputs.VERSION }}
 
     steps:
       - name: Checkout repository
         uses: actions/checkout@v2
 
+      - name: Determine version
+        id: set-version
+        run: |
+          VERSION="${{ github.event.inputs.git_ref || github.ref_name }}"
+          echo "VERSION=$VERSION" >> $GITHUB_ENV
+          echo "VERSION=$VERSION" >> $GITHUB_OUTPUT
+
       - name: Build Web Demo
         uses: ./.github/workflows/build-web-demo/
+        with:
+          git_ref: ${{ env.VERSION }}
 
       - name: Setup Pages
         uses: actions/configure-pages@v5
 
-      - name: Upload artifact
+      - name: Upload wasm-pack artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: 'web/pkg/'
+          name: 'wasm'
+
+      - name: Upload Vite artifact
         uses: actions/upload-pages-artifact@v3
         with:
           path: 'web/demo/dist/'
+          name: 'vite'
 
   deploy:
     runs-on: ubuntu-latest
     needs: build
+    permissions:
+      contents: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
 
     steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
+      - name: Set VERSION environment variable
+        run: echo "VERSION=${{ needs.build.outputs.VERSION }}" >> $GITHUB_ENV
+
+      - name: Checkout gh-pages branch
+        uses: actions/checkout@v4
+        with:
+          ref: gh-pages
+          fetch-depth: 0
+
+      - name: Download artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: ./
+
+      - name: Extract artifact
+        run: |
+          set -e
+
+          PKG_DIR=pkg/${VERSION:?}
+          rm -rf "$PKG_DIR"
+          mkdir -p "$PKG_DIR"
+          tar -xvf wasm/artifact.tar -C "$PKG_DIR" --wildcards "*.js" "*.wasm"
+          rm wasm/artifact.tar
+
+          tar -xvf vite/artifact.tar
+          rm vite/artifact.tar
+
+      - name: Update versions.json
+        run: |
+          set -e
+
+          readarray -t versions < <(find pkg -mindepth 1 -maxdepth 1 -type d -not -name '.*' -printf '%P\n' | sort -Vr)
+          echo "[$(printf '"%s",' "${versions[@]}" | sed 's/,$//')]" > versions.json
+
+      - name: Create .nojekyll file
+        run: |
+          touch .nojekyll
+
+      - name: Commit and push changes
+        run: |
+          set -e
+
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git add -A
+          git commit -m "Deploy ${VERSION:?}" || echo "No changes to commit"
+          git push origin gh-pages

web/demo/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pasfmt demo</title>
-    <link rel="icon" type="image/ico" href="/img/pasfmt.ico">
+    <link rel="icon" type="image/ico" href="/img/pasfmt.ico" />
     <style>
       @media (prefers-color-scheme: light) {
         :root {
@@ -43,13 +43,16 @@
         display: flex;
       }
       #github-logo {
-        margin-left: auto;
         margin-right: 1em;
       }
       #github-logo img {
         height: 1.5em;
         vertical-align: middle;
       }
+      #version-picker {
+        margin-right: 1em;
+        margin-left: auto;
+      }
       #editpane {
         display: flex;
         height: 100%;
@@ -105,6 +108,31 @@
       .label {
         margin: 10px 0 5px;
       }
+
+      .loading {
+        --stripe1: color-mix(in srgb, Canvas, CanvasText 10%);
+        --stripe2: color-mix(in srgb, Canvas, CanvasText 20%);
+        background-image: repeating-linear-gradient(
+          45deg,
+          var(--stripe1) 0,
+          var(--stripe1) 10px,
+          var(--stripe2) 10px,
+          var(--stripe2) 20px
+        );
+        background-size: 28px 60px;
+        animation: stripes 1s linear infinite;
+        text-shadow: 0 0 0 CanvasText;
+        border-radius: 4px;
+        cursor: wait;
+      }
+      @keyframes stripes {
+        0% {
+          background-position: 0 0;
+        }
+        100% {
+          background-position: 28px 0;
+        }
+      }
     </style>
   </head>
   <body>
@@ -124,7 +152,11 @@ <h2>Settings</h2>
         <option value="/pasfmt/examples/simple.pas">simple</option>
       </select>
       <button id="share-example">Share Example</button>
-      <a id="github-logo" href="https://github.com/integrated-application-development/pasfmt/">
+      <select name="version picker" id="version-picker"></select>
+      <a
+        id="github-logo"
+        href="https://github.com/integrated-application-development/pasfmt/"
+      >
         <img src="/img/github.svg" alt="github logo" />
       </a>
     </div>

web/demo/public/versions.json

@@ -0,0 +1 @@
+[]