Add comment to PR with preview link

.github/workflows/deploy-dev.yml

@@ -1,14 +1,15 @@
 name: "Deploy to Dev"
 
 on:
-  pull_request
-  # push: 
-    # branches:
-    #   - uswds-redesign
+  pull_request:
+  push: 
+    branches:
+      - uswds-redesign
 
 jobs: 
-  deploy:
+  deploy-dev:
     runs-on: self-hosted
+    if: ${{ !startsWith(github.actor, 'bot-') }}
 
     steps:
       # Step 1: Checkout the repo
@@ -18,6 +19,16 @@ jobs:
       - name: Install project dependencies
         run: |
           sudo dnf -y install ruby3.2 ruby3.2-devel openssl-devel amazon-rpm-config gcc-c++
+
+      # Step 2: Set base url/deployment path
+      - name: Set Deployment Path
+        id: set_deploy_path
+        run: |
+          if [[ "${{ github.event_name }}" == "pull_request" ]]; then
+            echo "DEPLOY_PATH=${{ github.event.number }}" >> $GITHUB_ENV
+          else
+            echo "DEPLOY_PATH=${{ github.ref_name }}" >> $GITHUB_ENV
+          fi
 
       # Step 3: Set up Node.js
       - name: Set up Node.js
@@ -26,50 +37,50 @@ jobs:
           node-version-file: '.nvmrc' 
           # node-version: 20 ## Using a .nvmrc file to stay in sync with the repo
 
-      # Step 2: Set up Ruby
+      # Step 4: Set up Ruby
       - name: Set up ruby
         run: |
           ruby -v
           echo 'export GEM_HOME="$HOME/gems"' >> $GITHUB_ENV
           echo 'export PATH="$HOME/ec2-user/bin:$HOME/gems/bin:$PATH"' >> $GITHUB_ENV
 
-      # Step 4: Install Ruby Gems
+      # Step 5: Install Ruby Gems
       - name: Install jekyll and bundler
         run: |
           sudo chmod -R 777 /usr/share
           sudo gem install jekyll bundler
           sudo bundle install
 
-      # Step 5: Install Node.js Dependencies
+      # Step 6: Install Node.js Dependencies
       - name: Install npm dependencies
         run: |
           npm ci
 
-      # Step 6: Compile Assets
+      # Step 7: Compile Assets
       - name: Compile assets with Gulp
         run: |
-          npm run gulp compile
+          npm run build
 
-      # Step 7: Build Site
+      # Step 8: Build Site
       - name: Build the site
         env:
           JEKYLL_ENV: production
         run: |
-          bundle exec jekyll build --baseurl /${{ github.event.number }}
+          bundle exec jekyll build --baseurl /${{ env.DEPLOY_PATH }}
 
-      # Step 8: Initialize AWS Connection
+      # Step 9: Initialize AWS Connection
       - name: Configure AWS Credentials
         uses: aws-actions/configure-aws-credentials@v4
         with: 
           aws-region: ${{ vars.AWS_REGION }}
           role-to-assume: arn:aws:iam::${{ secrets.TEST_ACCOUNT_ID }}:role/delegatedadmin/developer/ab2d-test-github-actions
 
-      # Step 9: Deploy to S3
+      # Step 10: Deploy to S3
       - name: Deploy the site
         run: |
-          aws s3 sync _site/ s3://website-ab2d-east-impl/${{ github.event.number }}/
+          aws s3 sync _site/ s3://website-ab2d-east-impl/${{ env.DEPLOY_PATH }}/
 
-      # Step 10: Invalidate existing cache
+      # Step 11: Invalidate existing cache
       # - name: Invalidate Cloudfront cache
       #   env: 
       #     AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
@@ -79,4 +90,87 @@ jobs:
       #     aws cloudfront create-invalidation \
       #     --distribution-id ${{ secrets.DISTRIBUTION_ID }} \
       #     --paths "/*"
-
+
+  comment-pr:  
+    needs: deploy-dev
+    runs-on: self-hosted
+    if: github.event_name == 'pull_request'
+    permissions:
+      pull-requests: 'write'
+
+    steps: 
+      - name: Post or update comment
+        uses: actions/github-script@v7
+        with: 
+          script: |
+            const sha = context.event_name === 'pull_request'
+              ? context.payload.pull_request.head.sha
+              : context.payload.after;
+            const commentIdentifier = '## Deploy Preview';
+            const commitUrl = `https://github.com/${context.repo.owner}/${context.repo.repo}/commit/${context.sha}`;
+            const previewUrl = `https://dyx9tyg1h7v8p.cloudfront.net/${context.issue.number}/`
+
+            const body = `${commentIdentifier}
+
+            **Preview URL:** [${previewUrl}](${previewUrl})
+
+            **Latest commit:** [${sha.substring(0, 7)}](\`${commitUrl}\`)`;
+
+            async function findComment(issueNumber) {
+              if (!issueNumber) return null;
+              const comments = await github.rest.issues.listComments({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: issueNumber,
+              });
+              return comments.data.find((comment) =>
+                comment.body.startsWith(commentIdentifier)
+              );
+            }
+
+            async function createOrUpdateComment(issueNumber) {
+              if (!issueNumber) {
+                console.log('No issue number provided. Cannot post or update comment.');
+                return;
+              }
+
+              const existingComment = await findComment(issueNumber);
+              if (existingComment) {
+                await github.rest.issues.deleteComment({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  comment_id: existingComment.id,
+                });
+              } 
+
+              await github.rest.issues.createComment({
+                issue_number: issueNumber,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                body: body,
+              });
+            }
+
+            if (context.eventName === 'pull_request') {
+              if (context.issue.number) {
+                await createOrUpdateComment(context.issue.number);
+              }
+            } else if (context.eventName === 'push') {
+              const pullRequests = await github.rest.pulls.list({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                state: 'open',
+                head: `${context.repo.owner}:${context.ref.replace(
+                  'refs/heads/',
+                  ''
+                )}`,
+              });
+
+              if (pullRequests.data.length > 0) {
+                await createOrUpdateComment(pullRequests.data[0].number);
+              } else {
+                console.log(
+                  'No open pull request found for this push. Logging publish information to console:'
+                );
+              }
+            }

package.json

@@ -1,6 +1,8 @@
 {
   "scripts": {
-    "gulp": "gulp"
+    "gulp": "gulp",
+    "dev": "gulp updateUswds && gulp watch",
+    "build": "gulp updateUswds && gulp compile"
   },
   "dependencies": {
     "gulp": "^5.0.0",

sass/_uswds-theme.scss

@@ -8,6 +8,7 @@ in the form $setting: value,
 */
 
 @use "uswds-core" with (
+  $theme-show-notifications: false,
   $theme-banner-max-width: "desktop-lg",
   $theme-color-primary-darker: "blue-90",
   $theme-focus-color: "cyan-30v",