$ name: Deploy & Screenshot on: push: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Deploy to Staging run: | # Your deployment commands -weight: 500;">npm run build -weight: 500;">npm run deploy:staging - name: Wait for Deploy run: sleep 30 - name: Capture Screenshots env: PAGEBOLT_API_KEY: ${{ secrets.PAGEBOLT_API_KEY }} run: | node capture-screenshots.js - name: Upload Screenshots to PR uses: actions/upload-artifact@v3 with: name: deploy-screenshots path: screenshots/ - name: Comment on PR uses: actions/github-script@v7 with: script: | const fs = require('fs'); const screenshots = fs.readdirSync('screenshots/'); let comment = '## 📸 Deployment Screenshots\n\n'; screenshots.forEach(file => { comment += `- [${file}](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}/attempts/${{ github.run_attempt }})\n`; }); github.rest.issues.createComment({ issue_number: context.issue.number, owner: context.repo.owner, repo: context.repo.repo, body: comment }); name: Deploy & Screenshot on: push: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Deploy to Staging run: | # Your deployment commands -weight: 500;">npm run build -weight: 500;">npm run deploy:staging - name: Wait for Deploy run: sleep 30 - name: Capture Screenshots env: PAGEBOLT_API_KEY: ${{ secrets.PAGEBOLT_API_KEY }} run: | node capture-screenshots.js - name: Upload Screenshots to PR uses: actions/upload-artifact@v3 with: name: deploy-screenshots path: screenshots/ - name: Comment on PR uses: actions/github-script@v7 with: script: | const fs = require('fs'); const screenshots = fs.readdirSync('screenshots/'); let comment = '## 📸 Deployment Screenshots\n\n'; screenshots.forEach(file => { comment += `- [${file}](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}/attempts/${{ github.run_attempt }})\n`; }); github.rest.issues.createComment({ issue_number: context.issue.number, owner: context.repo.owner, repo: context.repo.repo, body: comment }); name: Deploy & Screenshot on: push: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Deploy to Staging run: | # Your deployment commands -weight: 500;">npm run build -weight: 500;">npm run deploy:staging - name: Wait for Deploy run: sleep 30 - name: Capture Screenshots env: PAGEBOLT_API_KEY: ${{ secrets.PAGEBOLT_API_KEY }} run: | node capture-screenshots.js - name: Upload Screenshots to PR uses: actions/upload-artifact@v3 with: name: deploy-screenshots path: screenshots/ - name: Comment on PR uses: actions/github-script@v7 with: script: | const fs = require('fs'); const screenshots = fs.readdirSync('screenshots/'); let comment = '## 📸 Deployment Screenshots\n\n'; screenshots.forEach(file => { comment += `- [${file}](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}/attempts/${{ github.run_attempt }})\n`; }); github.rest.issues.createComment({ issue_number: context.issue.number, owner: context.repo.owner, repo: context.repo.repo, body: comment }); const fetch = require('node-fetch'); const fs = require('fs'); const path = require('path'); const PAGEBOLT_API_KEY = process.env.PAGEBOLT_API_KEY; const STAGING_URL = process.env.STAGING_URL || 'https://staging.example.com'; async function captureScreenshots() { const screenshots = [ { name: 'homepage.png', url: `${STAGING_URL}/`, viewport: { width: 1280, height: 720 } }, { name: 'dashboard.png', url: `${STAGING_URL}/dashboard`, viewport: { width: 1280, height: 720 } }, { name: 'settings.png', url: `${STAGING_URL}/settings`, viewport: { width: 1280, height: 720 } } ]; const dir = 'screenshots'; if (!fs.existsSync(dir)) { fs.mkdirSync(dir); } for (const screenshot of screenshots) { try { console.log(`Capturing ${screenshot.name}...`); const response = await fetch('https://api.pagebolt.com/v1/screenshot', { method: 'POST', headers: { 'Authorization': `Bearer ${PAGEBOLT_API_KEY}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ url: screenshot.url, viewport: screenshot.viewport, format: 'png' }) }); if (!response.ok) { console.error(`Failed to capture ${screenshot.name}: ${response.statusText}`); continue; } const buffer = await response.buffer(); fs.writeFileSync(path.join(dir, screenshot.name), buffer); console.log(`✓ Saved ${screenshot.name}`); } catch (error) { console.error(`Error capturing ${screenshot.name}:`, error.message); } } console.log(`\n✓ All screenshots captured and saved to ${dir}/`); } captureScreenshots().catch(console.error); const fetch = require('node-fetch'); const fs = require('fs'); const path = require('path'); const PAGEBOLT_API_KEY = process.env.PAGEBOLT_API_KEY; const STAGING_URL = process.env.STAGING_URL || 'https://staging.example.com'; async function captureScreenshots() { const screenshots = [ { name: 'homepage.png', url: `${STAGING_URL}/`, viewport: { width: 1280, height: 720 } }, { name: 'dashboard.png', url: `${STAGING_URL}/dashboard`, viewport: { width: 1280, height: 720 } }, { name: 'settings.png', url: `${STAGING_URL}/settings`, viewport: { width: 1280, height: 720 } } ]; const dir = 'screenshots'; if (!fs.existsSync(dir)) { fs.mkdirSync(dir); } for (const screenshot of screenshots) { try { console.log(`Capturing ${screenshot.name}...`); const response = await fetch('https://api.pagebolt.com/v1/screenshot', { method: 'POST', headers: { 'Authorization': `Bearer ${PAGEBOLT_API_KEY}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ url: screenshot.url, viewport: screenshot.viewport, format: 'png' }) }); if (!response.ok) { console.error(`Failed to capture ${screenshot.name}: ${response.statusText}`); continue; } const buffer = await response.buffer(); fs.writeFileSync(path.join(dir, screenshot.name), buffer); console.log(`✓ Saved ${screenshot.name}`); } catch (error) { console.error(`Error capturing ${screenshot.name}:`, error.message); } } console.log(`\n✓ All screenshots captured and saved to ${dir}/`); } captureScreenshots().catch(console.error); const fetch = require('node-fetch'); const fs = require('fs'); const path = require('path'); const PAGEBOLT_API_KEY = process.env.PAGEBOLT_API_KEY; const STAGING_URL = process.env.STAGING_URL || 'https://staging.example.com'; async function captureScreenshots() { const screenshots = [ { name: 'homepage.png', url: `${STAGING_URL}/`, viewport: { width: 1280, height: 720 } }, { name: 'dashboard.png', url: `${STAGING_URL}/dashboard`, viewport: { width: 1280, height: 720 } }, { name: 'settings.png', url: `${STAGING_URL}/settings`, viewport: { width: 1280, height: 720 } } ]; const dir = 'screenshots'; if (!fs.existsSync(dir)) { fs.mkdirSync(dir); } for (const screenshot of screenshots) { try { console.log(`Capturing ${screenshot.name}...`); const response = await fetch('https://api.pagebolt.com/v1/screenshot', { method: 'POST', headers: { 'Authorization': `Bearer ${PAGEBOLT_API_KEY}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ url: screenshot.url, viewport: screenshot.viewport, format: 'png' }) }); if (!response.ok) { console.error(`Failed to capture ${screenshot.name}: ${response.statusText}`); continue; } const buffer = await response.buffer(); fs.writeFileSync(path.join(dir, screenshot.name), buffer); console.log(`✓ Saved ${screenshot.name}`); } catch (error) { console.error(`Error capturing ${screenshot.name}:`, error.message); } } console.log(`\n✓ All screenshots captured and saved to ${dir}/`); } captureScreenshots().catch(console.error); // capture-screenshots.js with compliance metadata async function captureWithMetadata() { const metadata = { timestamp: new Date().toISOString(), commit: process.env.GITHUB_SHA, branch: process.env.GITHUB_REF, environment: 'staging', version: require('./package.json').version }; const response = await fetch('https://api.pagebolt.com/v1/screenshot', { method: 'POST', headers: { 'Authorization': `Bearer ${process.env.PAGEBOLT_API_KEY}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ url: 'https://staging.example.com/dashboard', viewport: { width: 1280, height: 720 }, format: 'png', // Metadata persists with the screenshot metadata: metadata }) }); const buffer = await response.buffer(); // Save with metadata in filename const filename = `screenshot-${metadata.timestamp.replace(/[:.]/g, '-')}.png`; fs.writeFileSync(path.join('screenshots', filename), buffer); console.log(`✓ Screenshot saved with compliance metadata`); } // capture-screenshots.js with compliance metadata async function captureWithMetadata() { const metadata = { timestamp: new Date().toISOString(), commit: process.env.GITHUB_SHA, branch: process.env.GITHUB_REF, environment: 'staging', version: require('./package.json').version }; const response = await fetch('https://api.pagebolt.com/v1/screenshot', { method: 'POST', headers: { 'Authorization': `Bearer ${process.env.PAGEBOLT_API_KEY}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ url: 'https://staging.example.com/dashboard', viewport: { width: 1280, height: 720 }, format: 'png', // Metadata persists with the screenshot metadata: metadata }) }); const buffer = await response.buffer(); // Save with metadata in filename const filename = `screenshot-${metadata.timestamp.replace(/[:.]/g, '-')}.png`; fs.writeFileSync(path.join('screenshots', filename), buffer); console.log(`✓ Screenshot saved with compliance metadata`); } // capture-screenshots.js with compliance metadata async function captureWithMetadata() { const metadata = { timestamp: new Date().toISOString(), commit: process.env.GITHUB_SHA, branch: process.env.GITHUB_REF, environment: 'staging', version: require('./package.json').version }; const response = await fetch('https://api.pagebolt.com/v1/screenshot', { method: 'POST', headers: { 'Authorization': `Bearer ${process.env.PAGEBOLT_API_KEY}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ url: 'https://staging.example.com/dashboard', viewport: { width: 1280, height: 720 }, format: 'png', // Metadata persists with the screenshot metadata: metadata }) }); const buffer = await response.buffer(); // Save with metadata in filename const filename = `screenshot-${metadata.timestamp.replace(/[:.]/g, '-')}.png`; fs.writeFileSync(path.join('screenshots', filename), buffer); console.log(`✓ Screenshot saved with compliance metadata`); } PAGEBOLT_API_KEY: pf_live_xxx STAGING_URL: https://staging.example.com PAGEBOLT_API_KEY: pf_live_xxx STAGING_URL: https://staging.example.com PAGEBOLT_API_KEY: pf_live_xxx STAGING_URL: https://staging.example.com - Deploys to staging manually and takes screenshots - Posts them to Slack (where they disappear in 90 days) - Or writes them to a shared folder (that nobody actually accesses) - Auditors ask "what did you ship?" → panic → search Slack archives - Runs after deployment - Takes a screenshot of your app - Attaches it to the PR - Sends a notification to your team - Engineer screenshots locally (5 min per deploy) - Posts to Slack (lost after 90 days) - Audit asks "what shipped?" → dig through archives - No timestamp, no commit metadata, no proof - Zero manual work per deploy - Screenshots attached to PR (permanent record) - Metadata (commit, timestamp, environment) embedded - Audit asks "what shipped?" → GitHub link + screenshot = instant proof - Cost: $29-79/month vs. 5 minutes × $150/hr × weekly deploys = $1,560/month in engineer time - Copy the workflow YAML to .github/workflows/deploy-screenshots.yml - Copy capture-screenshots.js to your repo root - Add PAGEBOLT_API_KEY to GitHub Secrets - Deploy → see screenshots auto-attached to PR - Auditors see proof of what shipped ✓