From 041ea5d0ed2c39496d0f92548896b8895ea1b1c9 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Wed, 4 Feb 2026 13:07:40 +0100 Subject: [PATCH 1/2] Add WebContainer-based preview deployment system Deploy branch previews to Netlify with a WebContainer-powered loader that boots Node-RED in the browser. Includes GitHub deployment status integration for PR visibility. --- .github/workflows/preview-deploy.yml | 724 +++++++++++++++++++++++++++ 1 file changed, 724 insertions(+) create mode 100644 .github/workflows/preview-deploy.yml diff --git a/.github/workflows/preview-deploy.yml b/.github/workflows/preview-deploy.yml new file mode 100644 index 0000000000..89c203989a --- /dev/null +++ b/.github/workflows/preview-deploy.yml @@ -0,0 +1,724 @@ +name: Deploy Branch Preview + +on: + push: + branches: + - '**' # Trigger on all branches + +jobs: + deploy-preview: + runs-on: ubuntu-latest + environment: + name: preview + url: ${{ steps.deploy.outputs.deploy_url }} + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + + - name: Create preview directory + run: mkdir -p preview + + - name: Generate WebContainer snapshot + run: | + # Install snapshot tool in a temp directory to avoid creating + # node_modules (with symlinks) in the project root + SNAPSHOT_TOOL_DIR=$(mktemp -d) + cd "$SNAPSHOT_TOOL_DIR" && npm init -y --silent && npm install --silent @webcontainer/snapshot + cd "$GITHUB_WORKSPACE" + + node -e " + const { snapshot } = require('$SNAPSHOT_TOOL_DIR/node_modules/@webcontainer/snapshot'); + const fs = require('fs'); + snapshot('.').then(buf => { + fs.writeFileSync('preview/snapshot', buf); + console.log('✓ Snapshot generated (' + (buf.length / 1024 / 1024).toFixed(2) + ' MB)'); + }); + " + + - name: Generate preview HTML + run: | + cat > preview/index.html << 'EOF' + + + + + + Node-RED Preview + + + +
+
+ +

Node-RED Preview

+
+ +
+
+
+
+ + + + +
+
+
Boot environment
+
Initializing WebContainer...
+
+
+ +
+
+
+ + + + +
+
+
Install dependencies
+
Waiting...
+
+
+ +
+
+
+ + + + +
+
+
Build Node-RED
+
Waiting...
+
+
+ +
+
+
+ + + + +
+
+
Start Node-RED
+
Waiting...
+
+
+
+ +
+
Error
+
+
+
+ + + +
+
+

Build Terminal

+ +
+
+
+ + + + + + + EOF + echo "✓ Generated preview/index.html" + + - name: Generate Netlify headers + run: | + cat > preview/_headers << 'EOF' + /* + Cross-Origin-Embedder-Policy: credentialless + Cross-Origin-Opener-Policy: same-origin + EOF + echo "✓ Generated preview/_headers" + + - name: Install Netlify CLI + run: npm install -g netlify-cli + + - name: Deploy to Netlify + id: deploy + env: + NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} + NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} + GITHUB_REF: ${{ github.ref }} + run: | + # Safely extract branch name using environment variable + BRANCH_NAME="${GITHUB_REF#refs/heads/}" + + # Deploy with branch-specific alias + if [ "$BRANCH_NAME" = "master" ]; then + echo "Deploying to production..." + OUTPUT=$(netlify deploy --dir=preview --prod --json) + else + echo "Deploying branch preview: $BRANCH_NAME" + OUTPUT=$(netlify deploy --dir=preview --alias="$BRANCH_NAME" --json) + fi + + DEPLOY_URL=$(echo "$OUTPUT" | jq -r '.deploy_url // .url') + echo "deploy_url=$DEPLOY_URL" >> "$GITHUB_OUTPUT" + echo "Deployed to: $DEPLOY_URL" From 5df600a998fa0ee505bd91d591f6be879e4a0194 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Wed, 4 Feb 2026 14:02:50 +0100 Subject: [PATCH 2/2] Fix text contrast to WCAG AAA compliance --- .github/workflows/preview-deploy.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/preview-deploy.yml b/.github/workflows/preview-deploy.yml index 89c203989a..5c7a33ac82 100644 --- a/.github/workflows/preview-deploy.yml +++ b/.github/workflows/preview-deploy.yml @@ -103,7 +103,7 @@ jobs: .header h1 { font-size: 2rem; font-weight: 400; - color: #c12120; + color: #e0e0e0; } .progress-container { @@ -216,12 +216,12 @@ jobs: font-size: 1rem; font-weight: 500; margin-bottom: 0.25rem; - color: #888; + color: #aaaaaa; transition: color 0.3s ease; } .step.active .step-label { - color: #c12120; + color: #e0e0e0; } .step.completed .step-label {