Add GitHub Actions workflow for deploying production Design System Docs (#103837)

* Move existing docs workflow to grouping folder

* Add GitHub Actions workflow for deploying production Design System Docs

* Flatten workflows to avoid recursive directory

May not be supported after all

* Move checkout back to individual actions

Can't reference a composite action until the repo is checked out

* Use scp instead of rsync

rsync may not be available

Author: aduth

.github/actions/build-design-system-docs/action.yml

@@ -0,0 +1,21 @@
+name: Build Design System Docs
+
+description: Build the Design System Docs site
+
+runs:
+  using: composite
+  steps:
+    # 1. Set up Node
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: .nvmrc
+        cache: yarn
+
+    # 2. Install dependencies for just the design-system-docs package
+    - run: yarn workspaces focus --production @automattic/design-system-docs
+      shell: bash
+
+    # 3. Build the design-system-docs workspace
+    - name: Build design system docs
+      run: yarn workspace @automattic/design-system-docs build
+      shell: bash

.github/workflows/ds-docs-deploy-production.yml

@@ -0,0 +1,51 @@
+name: Deploy Design System Docs to Production
+
+on:
+  push:
+    branches:
+      - trunk
+    paths:
+      - apps/design-system-docs/**
+      - .github/actions/build-design-system-docs/action.yml
+      - .github/workflows/ds-docs-deploy-production.yml
+
+concurrency:
+  group: deploy-production-design-system-docs
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      # 1. Checkout the PR code
+      - uses: actions/checkout@v4
+
+      # 2. Build the Design System Docs site
+      - uses: ./.github/actions/build-design-system-docs
+
+      # 3. Upload over SSH to the production server
+      - name: Sync to production server
+        env:
+          # See: https://wp.me/p9o2xV-5Da#comment-11607
+          SSH_USER: ${{ secrets.DESIGN_SYSTEM_PRODUCTION_SSH_USER }}
+          SSH_PRIVATE_KEY: ${{ secrets.DESIGN_SYSTEM_PRODUCTION_SSH_KEY }}
+          # Generated via: `ssh-keyscan -t ssh-ed25519 sftp.wp.com`. Stored as a secret not because
+          # it's sensitive, but to make it easier to change without code revisions.
+          SSH_HOST_PUBLIC_KEY: ${{ secrets.DESIGN_SYSTEM_PRODUCTION_SSH_PUBLIC_KEY }}
+        run: |
+          printf '%s' "$SSH_PRIVATE_KEY" > key.pem
+          chmod 600 key.pem
+
+          # Write known_hosts with public key for strict key checking
+          mkdir -p ~/.ssh
+          echo "sftp.wp.com ssh-ed25519 $SSH_HOST_PUBLIC_KEY" > ~/.ssh/known_hosts
+
+          # Copy the built site to the production server
+          scp -r -i key.pem \
+            -o UserKnownHostsFile=~/.ssh/known_hosts \
+            -o StrictHostKeyChecking=yes \
+            apps/design-system-docs/dist/* \
+            "$SSH_USER@sftp.wp.com:/srv/htdocs/"
+
+          rm key.pem

.github/workflows/design-system-docs.yml .github/workflows/ds-docs-pr-preview.yml.github/workflows/design-system-docs.yml renamed to .github/workflows/ds-docs-pr-preview.yml

@@ -4,8 +4,9 @@ on:
   pull_request:
     types: [opened, synchronize, reopened]
     paths:
-      - 'apps/design-system-docs/**'
-      - .github/workflows/design-system-docs.yml
+      - apps/design-system-docs/**
+      - .github/actions/build-design-system-docs/action.yml
+      - .github/workflows/ds-docs-pr-preview.yml
 
 # Ensure only one preview build runs per-PR at a time
 concurrency:
@@ -23,23 +24,13 @@ jobs:
       # 1. Checkout the PR code
       - uses: actions/checkout@v4
 
-      # 2. Set up Node
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: .nvmrc
-          cache: yarn
-
-      # 3. Install dependencies for just the design-system-docs package
-      - run: yarn workspaces focus --production @automattic/design-system-docs
-
-      # 4. Build the design-system-docs workspace
-      - name: Build design system docs
-        run: yarn workspace @automattic/design-system-docs build
+      # 2. Build the Design System Docs site
+      - uses: ./.github/actions/build-design-system-docs
 
-      # 5. Install Wrangler
+      # 3. Install Wrangler
       - run: npm install -g wrangler
 
-      # 6. Upload a new Worker version and capture the preview URL
+      # 4. Upload a new Worker version and capture the preview URL
       - name: Upload Worker version
         id: upload
         env:
@@ -58,15 +49,15 @@ jobs:
           # Expose it to later steps
           echo "url=$URL" >> "$GITHUB_OUTPUT"
 
-      # 7. Try to find an existing comment with our marker
+      # 5. Try to find an existing comment with our marker
       - name: Find preview comment
         id: find_comment
         uses: peter-evans/find-comment@v3
         with:
           issue-number: ${{ github.event.pull_request.number }}
           body-includes: '<!-- cf-preview-comment -->'
 
-      # 8. Create or update a comment that shows the preview URL
+      # 6. Create or update a comment that shows the preview URL
       - name: Comment (create or update)
         uses: peter-evans/create-or-update-comment@v4
         with: