feat: WebGL stack at js/webgl, npm regl/twgl, smoke tests and CI #173
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: PR Preview Deployment | |
| # Deploy PR branches to GitHub Pages at /pr-{number}/ for testing | |
| # This allows testing changes without merging to master | |
| on: | |
| workflow_dispatch: # Allow manual trigger | |
| pull_request: | |
| types: [opened, synchronize, reopened] | |
| branches: | |
| - master | |
| permissions: | |
| contents: write | |
| pages: write | |
| id-token: write | |
| pull-requests: write | |
| env: | |
| FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true | |
| jobs: | |
| deploy-preview: | |
| name: Deploy PR Preview | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout PR branch | |
| uses: actions/checkout@v6 | |
| with: | |
| ref: ${{ github.event.pull_request.head.sha || github.sha }} | |
| fetch-depth: 1 | |
| token: ${{ github.token }} | |
| - name: Determine preview path | |
| id: preview | |
| run: | | |
| if [ "${{ github.event_name }}" = "pull_request" ]; then | |
| PR_NUMBER="${{ github.event.pull_request.number }}" | |
| PREVIEW_PATH="pr-${PR_NUMBER}" | |
| else | |
| # Manual trigger - use branch name | |
| BRANCH_NAME="${GITHUB_REF#refs/heads/}" | |
| PREVIEW_PATH="pr-${BRANCH_NAME//\//-}" | |
| fi | |
| echo "path=${PREVIEW_PATH}" >> $GITHUB_OUTPUT | |
| echo "url=https://ap0ught.github.io/matrix/${PREVIEW_PATH}/" >> $GITHUB_OUTPUT | |
| echo "Preview will be deployed to: ${PREVIEW_PATH}" | |
| - name: Checkout gh-pages branch | |
| uses: actions/checkout@v6 | |
| with: | |
| ref: gh-pages | |
| path: gh-pages | |
| fetch-depth: 0 | |
| token: ${{ github.token }} | |
| continue-on-error: true | |
| - name: Initialize gh-pages if needed | |
| run: | | |
| if [ ! -d "gh-pages/.git" ]; then | |
| echo "Creating new gh-pages branch" | |
| rm -rf gh-pages | |
| mkdir -p gh-pages | |
| cd gh-pages | |
| git init | |
| git config user.name "github-actions[bot]" | |
| git config user.email "github-actions[bot]@users.noreply.github.com" | |
| git checkout -b gh-pages | |
| # Set up remote with authentication | |
| git remote add origin "https://x-access-token:${{ github.token }}@github.com/${{ github.repository }}.git" | |
| echo "# Matrix PR Previews" > README.md | |
| echo "" >> README.md | |
| echo "This branch contains PR preview deployments." >> README.md | |
| echo "Main site: https://ap0ught.github.io/matrix/" >> README.md | |
| git add . | |
| git commit -m "Initialize gh-pages branch" | |
| cd .. | |
| else | |
| echo "gh-pages branch exists, configuring..." | |
| cd gh-pages | |
| git config user.name "github-actions[bot]" | |
| git config user.email "github-actions[bot]@users.noreply.github.com" | |
| cd .. | |
| fi | |
| - name: Prepare preview directory | |
| run: | | |
| PREVIEW_PATH="${{ steps.preview.outputs.path }}" | |
| # Create preview directory in gh-pages | |
| mkdir -p "gh-pages/${PREVIEW_PATH}" | |
| mkdir -p "gh-pages/previews" | |
| # Copy web application files to preview directory | |
| cp index.html "gh-pages/${PREVIEW_PATH}/" | |
| cp -r js "gh-pages/${PREVIEW_PATH}/" | |
| cp -r lib "gh-pages/${PREVIEW_PATH}/" | |
| cp -r assets "gh-pages/${PREVIEW_PATH}/" | |
| cp -r shaders "gh-pages/${PREVIEW_PATH}/" | |
| # Copy gallery directory if it exists, otherwise create empty directory | |
| if [ -d "gallery" ]; then | |
| cp -r gallery "gh-pages/${PREVIEW_PATH}/" | |
| else | |
| mkdir -p "gh-pages/${PREVIEW_PATH}/gallery" | |
| fi | |
| # Copy PWA files (service worker, manifest, icons) | |
| cp service-worker.js "gh-pages/${PREVIEW_PATH}/" | |
| cp manifest.webmanifest "gh-pages/${PREVIEW_PATH}/" | |
| cp icon-192.png "gh-pages/${PREVIEW_PATH}/" | |
| cp icon-512.png "gh-pages/${PREVIEW_PATH}/" | |
| cp VERSION "gh-pages/${PREVIEW_PATH}/" | |
| # Optional files (don't fail if missing) | |
| cp README.md "gh-pages/${PREVIEW_PATH}/" 2>/dev/null || true | |
| cp screenshot.png "gh-pages/${PREVIEW_PATH}/" 2>/dev/null || true | |
| echo "✅ Preview files copied to gh-pages/${PREVIEW_PATH}" | |
| ls -la "gh-pages/${PREVIEW_PATH}" | |
| - name: Stamp PWA deploy build for preview | |
| run: | | |
| PREVIEW_PATH="${{ steps.preview.outputs.path }}" | |
| VER="matrix-pwa-${PREVIEW_PATH}-${GITHUB_RUN_NUMBER}-$(echo "$GITHUB_SHA" | cut -c1-7)" | |
| sed -i "s|const VER = \"local\"|const VER = \"${VER}\"|" "gh-pages/${PREVIEW_PATH}/service-worker.js" | |
| echo "VER=${VER}" | |
| - name: Update gh-pages previews index | |
| run: | | |
| cd gh-pages | |
| # Create or update previews/index.html with list of previews | |
| # Create previews directory if it doesn't exist | |
| mkdir -p previews | |
| # Create or update previews/index.html with list of PR previews | |
| # Note: We don't overwrite the root index.html (main site) | |
| cat > previews/index.html <<'HTMLEOF' | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Matrix PR Previews</title> | |
| <style> | |
| body { | |
| font-family: 'Courier New', monospace; | |
| background: #000; | |
| color: #0f0; | |
| padding: 20px; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| h1 { color: #0f0; text-shadow: 0 0 10px #0f0; } | |
| a { color: #0f0; text-decoration: none; } | |
| a:hover { text-decoration: underline; text-shadow: 0 0 5px #0f0; } | |
| .preview { | |
| margin: 10px 0; | |
| padding: 10px; | |
| border: 1px solid #0f0; | |
| border-radius: 4px; | |
| } | |
| .main-link { | |
| font-size: 1.2em; | |
| margin-bottom: 30px; | |
| padding: 15px; | |
| border: 2px solid #0f0; | |
| border-radius: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Matrix PR Preview Deployments</h1> | |
| <div class="main-link"> | |
| <strong>Main Site:</strong> <a href="/">https://ap0ught.github.io/matrix/</a><br> | |
| <strong>All Versions:</strong> <a href="/versions/">Version Archive</a> | |
| </div> | |
| <h2>Available PR Previews:</h2> | |
| <div id="previews"></div> | |
| <script> | |
| const previews = []; | |
| HTMLEOF | |
| # Add preview paths to the list | |
| for dir in pr-*/ ; do | |
| if [ -d "$dir" ]; then | |
| dir_name="${dir%/}" | |
| echo " previews.push('$dir_name');" >> previews/index.html | |
| fi | |
| done | |
| cat >> previews/index.html <<'HTMLEOF' | |
| const container = document.getElementById('previews'); | |
| if (previews.length === 0) { | |
| container.innerHTML = '<p>No PR previews available yet.</p>'; | |
| } else { | |
| previews.sort().reverse().forEach(preview => { | |
| const div = document.createElement('div'); | |
| div.className = 'preview'; | |
| div.innerHTML = `<strong>${preview}</strong>: <a href="/matrix/${preview}/">View Preview</a>`; | |
| container.appendChild(div); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |
| HTMLEOF | |
| echo "✅ Updated gh-pages previews/index.html" | |
| - name: Deploy to gh-pages | |
| run: | | |
| cd gh-pages | |
| # Ensure git config is set | |
| git config user.name "github-actions[bot]" | |
| git config user.email "github-actions[bot]@users.noreply.github.com" | |
| # Set up authentication for push | |
| git remote set-url origin "https://x-access-token:${{ github.token }}@github.com/${{ github.repository }}.git" || \ | |
| git remote add origin "https://x-access-token:${{ github.token }}@github.com/${{ github.repository }}.git" | |
| # Ensure we're on gh-pages branch (handle case where default branch might be different) | |
| CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD 2>/dev/null || echo "") | |
| if [ "$CURRENT_BRANCH" != "gh-pages" ]; then | |
| echo "Current branch is '$CURRENT_BRANCH', renaming to gh-pages" | |
| git branch -M gh-pages | |
| fi | |
| # Stage all changes | |
| git add . | |
| # Check if there are changes to commit | |
| if git diff --staged --quiet; then | |
| echo "No changes to deploy" | |
| else | |
| git commit -m "Deploy preview: ${{ steps.preview.outputs.path }}" | |
| # Fetch latest changes from remote to avoid race conditions | |
| echo "Fetching latest gh-pages from remote..." | |
| git fetch origin gh-pages | |
| # Rebase our local changes on top of the fetched remote branch | |
| echo "Rebasing local gh-pages on top of origin/gh-pages..." | |
| if git rebase origin/gh-pages; then | |
| echo "✅ Rebase successful, pushing changes with force-with-lease..." | |
| git push --force-with-lease origin gh-pages | |
| echo "✅ Successfully deployed to gh-pages via rebase (no force push required)" | |
| else | |
| echo "⚠️ Rebase conflict detected - this is rare but can happen with concurrent deployments" | |
| echo "Aborting rebase and using force push to ensure deployment succeeds..." | |
| git rebase --abort | |
| git push origin gh-pages --force | |
| echo "✅ Successfully deployed to gh-pages via force push after rebase conflict" | |
| fi | |
| fi | |
| - name: Comment on PR with preview URL | |
| if: github.event_name == 'pull_request' | |
| uses: actions/github-script@v8 | |
| with: | |
| script: | | |
| const previewUrl = '${{ steps.preview.outputs.url }}'; | |
| const comment = `## 🎬 PR Preview Deployed! | |
| Your changes are now available for testing: | |
| **Preview URL:** ${previewUrl} | |
| ### Test Links: | |
| - [Default Matrix](${previewUrl}?suppressWarnings=true) | |
| - [Gallery Mode](${previewUrl}?effect=gallery&suppressWarnings=true) | |
| - [Mirror Effect](${previewUrl}?effect=mirror&suppressWarnings=true) | |
| - [3D Mode](${previewUrl}?version=3d&suppressWarnings=true) | |
| - [Resurrections](${previewUrl}?version=resurrections&suppressWarnings=true) | |
| The preview will be updated automatically when you push new commits. | |
| --- | |
| *Preview deployed from commit ${{ github.event.pull_request.head.sha }}*`; | |
| // Find existing preview comment | |
| const { data: comments } = await github.rest.issues.listComments({ | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| issue_number: context.issue.number, | |
| }); | |
| const botComment = comments.find(comment => | |
| comment.user.type === 'Bot' && | |
| comment.body.includes('PR Preview Deployed') | |
| ); | |
| if (botComment) { | |
| // Update existing comment | |
| await github.rest.issues.updateComment({ | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| comment_id: botComment.id, | |
| body: comment | |
| }); | |
| } else { | |
| // Create new comment | |
| await github.rest.issues.createComment({ | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| issue_number: context.issue.number, | |
| body: comment | |
| }); | |
| } | |
| - name: Summary | |
| run: | | |
| echo "## 🎉 PR Preview Deployed Successfully!" >> $GITHUB_STEP_SUMMARY | |
| echo "" >> $GITHUB_STEP_SUMMARY | |
| echo "**Preview URL:** ${{ steps.preview.outputs.url }}" >> $GITHUB_STEP_SUMMARY | |
| echo "" >> $GITHUB_STEP_SUMMARY | |
| echo "### Quick Test Links:" >> $GITHUB_STEP_SUMMARY | |
| echo "- [Default Matrix](${{ steps.preview.outputs.url }}?suppressWarnings=true)" >> $GITHUB_STEP_SUMMARY | |
| echo "- [Gallery Mode](${{ steps.preview.outputs.url }}?effect=gallery&suppressWarnings=true)" >> $GITHUB_STEP_SUMMARY | |
| echo "- [Mirror Effect](${{ steps.preview.outputs.url }}?effect=mirror&suppressWarnings=true)" >> $GITHUB_STEP_SUMMARY | |
| echo "- [3D Mode](${{ steps.preview.outputs.url }}?version=3d&suppressWarnings=true)" >> $GITHUB_STEP_SUMMARY |