Add PR preview deployments with GitHub Pages

.claude/settings.local.json

@@ -9,7 +9,7 @@
       "Bash(git commit:*)",
       "Bash(git submodule:*)",
       "Bash(ln:*)",
-      "Bash(export PATH=$PATH:/home/tim/.local/share/gem/ruby/3.2.0/bin)",
+      "Bash(export PATH=$PATH:~/.local/share/gem/ruby/3.2.0/bin)",
       "Bash(jekyll --version)",
       "Bash(bundle exec jekyll:*)",
       "Bash(git stash:*)",
@@ -53,15 +53,42 @@
       "Bash(gh workflow:*)",
       "Bash(git push:*)",
       "Bash(grep:*)",
-      "Bash(export PATH=$PATH:/home/tim/.local/share/gem/ruby/3.2.0/bin)",
+      "Bash(export PATH=$PATH:~/.local/share/gem/ruby/3.2.0/bin)",
       "Bash(make:*)",
       "Bash(export:*)",
       "Bash(bundle install)",
       "Bash(bundle config set:*)",
       "Bash(git add:*)",
       "Bash(git commit:*)",
       "Bash(bundle exec:*)",
-      "Bash(ls:*)"
+      "Bash(ls:*)",
+      "Bash(gh pr create:*)",
+      "Bash(gh pr view:*)",
+      "Bash(gh pr diff:*)",
+      "Bash(ruby --version)",
+      "Bash(gh pr checks:*)",
+      "Bash(gh run watch:*)",
+      "Bash(curl:*)",
+      "Bash(gh pr:*)",
+      "Bash(nslookup:*)",
+      "Bash(git config:*)",
+      "Bash(git rm:*)",
+      "Bash(./fix_asset_paths.sh:*)",
+      "Bash(./fix_relative_url.sh:*)",
+      "Bash(rg:*)",
+      "Bash(yamllint:*)",
+      "WebFetch(domain:preview.wafer.space)",
+      "Bash(for file in nav-*.html one-page-nav-*.html _offcanvas-info.html)",
+      "Bash(do if [ -f \"$file\" ])",
+      "Bash(then sed -i \"s/{{site.url}}/{{ ''\\/'' | relative_url }}/g\" \"$file\")",
+      "Bash(fi)",
+      "Bash(done)",
+      "Bash(for file in nav-*.html one-page-nav*.html)",
+      "Bash(then sed -i 's/href=\"\"{{menu\\.url}}\"\"/href=\"\"{{menu.url | relative_url}}\"\"/g' \"$file\")",
+      "Bash(for file in _includes/layouts/nav/nav-*.html _includes/layouts/nav/one-page-nav*.html)",
+      "Bash(then echo \"Processing $file\")",
+      "Bash(node:*)",
+      "WebFetch(domain:github.com)"
     ],
     "deny": []
   }

.github/scripts/cleanup-deployments.js

@@ -0,0 +1,45 @@
+// Mark GitHub deployments as inactive when PR is closed
+// This module exports a function that can be safely called by actions/github-script
+
+module.exports = async function cleanupDeployments(github, context, core) {
+  // Validate inputs
+  if (!context.payload.pull_request) {
+    throw new Error('No pull request data available');
+  }
+
+  const prNumber = context.payload.pull_request.number;
+  if (!Number.isInteger(prNumber) || prNumber < 1 || prNumber > 99999) {
+    throw new Error('Invalid PR number');
+  }
+
+  const environment = `pr-preview-${prNumber}`;
+
+  // Get all deployments for this PR environment
+  const { data: deployments } = await github.rest.repos.listDeployments({
+    owner: context.repo.owner,
+    repo: context.repo.repo,
+    environment: environment,
+  });
+
+  console.log(`Found ${deployments.length} deployments for environment: ${environment}`);
+
+  // Mark each deployment as inactive
+  for (const deployment of deployments) {
+    // Validate deployment ID
+    if (!deployment.id || !Number.isInteger(deployment.id)) {
+      console.log(`Skipping invalid deployment ID: ${deployment.id}`);
+      continue;
+    }
+
+    await github.rest.repos.createDeploymentStatus({
+      owner: context.repo.owner,
+      repo: context.repo.repo,
+      deployment_id: deployment.id,
+      state: 'inactive',
+      description: 'PR closed - preview removed'
+    });
+    console.log(`Marked deployment ${deployment.id} as inactive`);
+  }
+
+  console.log(`Cleanup completed for PR #${prNumber}`);
+};

.github/scripts/comment-pr-cleanup.js

@@ -0,0 +1,40 @@
+// Comment on PR when preview is cleaned up
+// This module exports a function that can be safely called by actions/github-script
+
+module.exports = async function commentPrCleanup(github, context, core) {
+  // Validate inputs
+  if (!context.payload.pull_request) {
+    throw new Error('No pull request data available');
+  }
+
+  const prNumber = context.payload.pull_request.number;
+  if (!Number.isInteger(prNumber) || prNumber < 1 || prNumber > 99999) {
+    throw new Error('Invalid PR number');
+  }
+
+  // Read comment template with path validation
+  const fs = require('fs');
+  const path = require('path');
+  const templatePath = '.github/templates/pr-cleanup-template.md';
+
+  // Validate template path to prevent directory traversal
+  const resolvedPath = path.resolve(templatePath);
+  if (!resolvedPath.includes('.github/templates/pr-cleanup-template.md')) {
+    throw new Error('Invalid template path');
+  }
+
+  if (!fs.existsSync(templatePath)) {
+    throw new Error(`Template file ${templatePath} not found`);
+  }
+
+  const commentBody = fs.readFileSync(templatePath, 'utf8');
+
+  await github.rest.issues.createComment({
+    owner: context.repo.owner,
+    repo: context.repo.repo,
+    issue_number: prNumber,
+    body: commentBody
+  });
+
+  console.log(`Posted cleanup comment on PR #${prNumber}`);
+};

.github/scripts/comment-pr-preview.js

@@ -0,0 +1,86 @@
+// Comment on PR with preview deployment information
+// This module exports a function that can be safely called by actions/github-script
+
+module.exports = async function commentPrPreview(github, context, core) {
+  // Validate inputs
+  if (!context.payload.pull_request) {
+    throw new Error('No pull request data available');
+  }
+
+  const prNumber = context.payload.pull_request.number;
+  if (!Number.isInteger(prNumber) || prNumber < 1 || prNumber > 99999) {
+    throw new Error('Invalid PR number');
+  }
+
+  const rawCommitSha = context.payload.pull_request.head.sha;
+  if (!rawCommitSha || !rawCommitSha.match(/^[a-f0-9]{40}$/)) {
+    throw new Error('Invalid commit SHA format');
+  }
+
+  const previewUrl = `https://preview.wafer.space/pr-${prNumber}/`;
+  const commitSha = rawCommitSha.substring(0, 7);
+
+  // Read comment template with path validation
+  const fs = require('fs');
+  const path = require('path');
+  const templatePath = '.github/templates/pr-comment-template.md';
+
+  // Validate template path to prevent directory traversal
+  const resolvedPath = path.resolve(templatePath);
+  if (!resolvedPath.includes('.github/templates/pr-comment-template.md')) {
+    throw new Error('Invalid template path');
+  }
+
+  if (!fs.existsSync(templatePath)) {
+    throw new Error(`Template file ${templatePath} not found`);
+  }
+
+  let commentBody = fs.readFileSync(templatePath, 'utf8');
+
+  // Sanitize and replace placeholders in template
+  const sanitizedPreviewUrl = previewUrl.replace(/[<>&"']/g, (match) => {
+    const entityMap = { '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;', "'": '&#x27;' };
+    return entityMap[match];
+  });
+
+  const sanitizedCommitSha = commitSha.replace(/[<>&"']/g, (match) => {
+    const entityMap = { '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;', "'": '&#x27;' };
+    return entityMap[match];
+  });
+
+  commentBody = commentBody
+    .replace(/\{\{PREVIEW_URL\}\}/g, sanitizedPreviewUrl)
+    .replace(/\{\{COMMIT_SHA\}\}/g, sanitizedCommitSha);
+
+  // Find existing comment
+  const { data: comments } = await github.rest.issues.listComments({
+    owner: context.repo.owner,
+    repo: context.repo.repo,
+    issue_number: prNumber,
+  });
+
+  const botComment = comments.find(comment => 
+    comment.user.type === 'Bot' && 
+    (comment.body.includes('Preview Deployment Ready!') || 
+     comment.body.includes('Preview Deployment Partially Ready') ||
+     comment.body.includes('Preview Deployment Failed'))
+  );
+
+  if (botComment) {
+    await github.rest.issues.updateComment({
+      owner: context.repo.owner,
+      repo: context.repo.repo,
+      comment_id: botComment.id,
+      body: commentBody
+    });
+    console.log(`Updated existing comment ${botComment.id} on PR #${prNumber}`);
+  } else {
+    await github.rest.issues.createComment({
+      owner: context.repo.owner,
+      repo: context.repo.repo,
+      issue_number: prNumber,
+      body: commentBody
+    });
+    console.log(`Created new comment on PR #${prNumber}`);
+  }
+};

.github/scripts/create-deployment.js

@@ -0,0 +1,47 @@
+// Create GitHub deployment for PR preview
+// This module exports a function that can be safely called by actions/github-script
+
+module.exports = async function createDeployment(github, context, core) {
+  // Validate inputs
+  if (!context.payload.pull_request) {
+    throw new Error('No pull request data available');
+  }
+
+  const prNumber = context.payload.pull_request.number;
+  if (!Number.isInteger(prNumber) || prNumber < 1 || prNumber > 99999) {
+    throw new Error('Invalid PR number');
+  }
+
+  // Sanitize PR title to prevent code injection
+  const rawTitle = context.payload.pull_request.title || '';
+  const prTitle = rawTitle.replace(/[^\w\s-_.]/g, '').substring(0, 100);
+
+  // Validate ref format
+  const ref = context.payload.pull_request.head.ref;
+  if (!ref || ref.length > 255) {
+    throw new Error('Invalid ref format');
+  }
+
+  const deployment = await github.rest.repos.createDeployment({
+    owner: context.repo.owner,
+    repo: context.repo.repo,
+    ref: ref,
+    environment: `pr-preview-${prNumber}`,
+    transient_environment: true,
+    production_environment: false,
+    required_contexts: [],
+    description: `PR #${prNumber}: ${prTitle}`,
+    auto_merge: false
+  });
+
+  await github.rest.repos.createDeploymentStatus({
+    owner: context.repo.owner,
+    repo: context.repo.repo,
+    deployment_id: deployment.data.id,
+    state: 'in_progress',
+    description: 'Building preview...'
+  });
+
+  core.setOutput('deployment_id', deployment.data.id);
+  console.log(`Created deployment ${deployment.data.id} for PR #${prNumber}`);
+};

.github/scripts/generate-pr-directory-name.js

@@ -0,0 +1,32 @@
+// Generate user-friendly directory name for PR previews
+// This module exports a function that creates a slugified directory name from PR title
+
+module.exports = function generatePrDirectoryName(prNumber, prTitle) {
+  // Validate inputs
+  if (!Number.isInteger(prNumber) || prNumber < 1 || prNumber > 99999) {
+    throw new Error('Invalid PR number');
+  }
+
+  if (typeof prTitle !== 'string') {
+    throw new Error('PR title must be a string');
+  }
+
+  // Slugify the PR title
+  const slugifiedTitle = prTitle
+    .toLowerCase()
+    .trim()
+    // Replace special characters and spaces with hyphens
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    // Limit length to reasonable size
+    .substring(0, 50)
+    .replace(/-+$/, ''); // Remove trailing hyphens after truncation
+
+  // Ensure we have a valid slug
+  const finalSlug = slugifiedTitle || 'untitled';
+
+  // Format: pr-{number}-{slug}
+  return `pr-${prNumber}-${finalSlug}`;
+};