docs(readme): update README for marketing websites

.github/actions/frontend/marketing/ui-tests/action.yml

@@ -0,0 +1,91 @@
+name: "Run Marketing UI Tests"
+description: "Runs the marketing UI tests"
+
+inputs:
+  CONTENTFUL_SPACE_ID:
+    description: "Contentful Space ID"
+    required: true
+  DRAFT_MODE_TOKEN:
+    description: "Marketing App Draft Mode Token"
+    required: true
+  APPLITOOLS_API_KEY:
+    description: "Applitools API Key"
+    required: true
+  APPLICATION_BASE_ADDRESS:
+    description: "The base URL for the application. Defaults to http://code.marketing-sites.localhost:3001"
+    default: "code.marketing-sites.localhost:3001"
+  ENVIRONMENT_TYPE:
+    description: "local, pr, test, or production"
+    required: true
+  SHARD_INDEX:
+    description: "The shard index to use for the tests."
+    required: true
+  SHARD_TOTAL:
+    description: "The total number of shards to use for the tests."
+    required: true
+  GITHUB_ENVIRONMENT_NAME:
+    description: "The name of the GitHub environment to use for this action"
+    required: false
+  BRANCHED_TESTING_ENABLED:
+    description: "Whether branched testing is enabled. Defaults to false"
+    default: "false"
+    required: false
+  PR_HEAD_REF:
+    description: "The head ref of the pull request."
+    required: false
+  SITE_TYPE:
+    description: "The type of site being tested. Defaults to 'corporate'."
+    default: "corporate"
+    required: false
+
+runs:
+  using: composite
+
+  steps:
+    - name: Prepare UI Test Environment
+      shell: bash
+      working-directory: ./apps/marketing
+      run: |
+        echo "APPLITOOLS_API_KEY=${{ inputs.APPLITOOLS_API_KEY }}
+        DRAFT_MODE_TOKEN=${{ inputs.DRAFT_MODE_TOKEN }}
+        CI=true
+        STAGE=${{ inputs.ENVIRONMENT_TYPE }}
+        NEXT_PUBLIC_STAGE=${{ inputs.ENVIRONMENT_TYPE }}
+        APPLICATION_BASE_ADDRESS=${{ inputs.APPLICATION_BASE_ADDRESS }}
+        BRANCHED_TESTING_ENABLED=${{ inputs.BRANCHED_TESTING_ENABLED }}
+        PR_HEAD_REF=${{ inputs.PR_HEAD_REF }}
+        SITE_TYPE=${{ inputs.SITE_TYPE }}
+        " >> .env
+
+    - name: UI Tests
+      shell: bash
+      # If updating playwright, also update the version in package.json
+      run: |
+        docker run --network host \
+          --env-file ./apps/marketing/.env \
+          -v $PWD:/workspace \
+          -w /workspace\
+          mcr.microsoft.com/playwright:v1.49.1-noble \
+          bash -c "corepack enable && HOME=/root yarn workspace @code-dot-org/marketing test:ui:ci --shard ${{ inputs.SHARD_INDEX }}/${{ inputs.SHARD_TOTAL }}"
+      working-directory: ./
+
+    - name: Upload shard blob report to GitHub Actions Artifacts
+      if: ${{ !cancelled() }}
+      uses: actions/upload-artifact@v4
+      with:
+        name: blob-report-${{ inputs.GITHUB_ENVIRONMENT_NAME || 'pr' }}-${{ inputs.SHARD_INDEX }}
+        path: ./apps/marketing/blob-report
+        retention-days: 1
+
+    - name: Run Google Lighthouse Audits
+      uses: treosh/lighthouse-ci-action@9917efea514615fb2ff2890f5b8be2d51e703b6e
+      # Only run lighthouse audits once
+      if: inputs.SHARD_INDEX == '1'
+      env:
+        HTTP_PROTOCOL: ${{ inputs.APPLICATION_BASE_ADDRESS == 'code.marketing-sites.localhost:3001' && 'http' || 'https' }}
+      with:
+        urls: ${{ env.HTTP_PROTOCOL }}://${{ inputs.APPLICATION_BASE_ADDRESS }}/en-US/engineering/all-the-things
+        uploadArtifacts: true
+        temporaryPublicStorage: true
+        configPath: "./apps/marketing/.lighthouserc.js"
+        artifactName: "lighthouse-report-${{ inputs.GITHUB_ENVIRONMENT_NAME || 'local' }}"

.github/actions/frontend/merge-playwright-reports/action.yml

@@ -0,0 +1,32 @@
+name: "Merge Playwright Test Reports"
+description: "Merges playwright test reports from multiple shards into one single report"
+
+inputs:
+  GITHUB_ENVIRONMENT_NAME:
+    description: "The name of the GitHub environment to use for this action"
+    default: "pr"
+    required: false
+
+runs:
+  using: composite
+  steps:
+    - name: Setup Frontend
+      uses: ./.github/actions/frontend/setup
+
+    - name: Download blob reports from GitHub Actions Artifacts
+      uses: actions/download-artifact@v4
+      with:
+        path: all-blob-reports
+        pattern: blob-report-${{ inputs.GITHUB_ENVIRONMENT_NAME }}-*
+        merge-multiple: true
+
+    - name: Merge into HTML Report
+      shell: bash
+      run: yarn dlx playwright merge-reports --reporter html ./all-blob-reports
+
+    - name: Upload HTML report
+      uses: actions/upload-artifact@v4
+      with:
+        name: html-report--attempt-${{ inputs.GITHUB_ENVIRONMENT_NAME }}-${{ github.run_attempt }}
+        path: playwright-report
+        retention-days: 1

.github/actions/frontend/setup/action.yml

@@ -0,0 +1,31 @@
+name: "Install & Setup Frontend Directory"
+description: "Setup for the frontend directory"
+
+inputs:
+  INSTALL_DEPENDENCIES:
+    description: "Whether to install dependencies. Defaults to true"
+    default: "true"
+    required: false
+
+runs:
+  using: composite
+  steps:
+    - name: Enable Corepack before setting up Node
+      shell: bash
+      run: corepack enable
+
+    - name: Cache turborepo
+      uses: rharkor/caching-for-turbo@a1c4079258ae08389be75b57d4d7a70f23c1c66d # v1.8
+
+    - uses: actions/setup-node@v4
+      if: inputs.INSTALL_DEPENDENCIES == 'true'
+      with:
+        node-version-file: ".nvmrc"
+        cache: "yarn"
+        cache-dependency-path: 'yarn.lock'
+
+    - name: Install dependencies
+      if: inputs.INSTALL_DEPENDENCIES == 'true'
+      shell: bash
+      run: yarn install
+      working-directory: ./

.github/workflows/component-library-ci.yml

@@ -0,0 +1,105 @@
+name: Component-Library-CI
+
+on:
+  workflow_call:
+
+jobs:
+    build:
+        runs-on: ubuntu-24.04
+
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Setup Frontend
+              uses: ./.github/actions/frontend/setup
+
+            - name: Install Playwright for Design System Storybook
+              run: npx playwright install --with-deps
+              working-directory: ./apps/design-system-storybook
+
+            - name: Build
+              run: yarn build --filter @code-dot-org/component-library --filter @code-dot-org/design-system-storybook
+              working-directory: ./
+
+            - name: Lint
+              run: yarn lint --filter @code-dot-org/component-library --filter @code-dot-org/design-system-storybook
+              working-directory: ./
+
+            - name: Unit Tests
+              run: yarn test --filter @code-dot-org/component-library --filter @code-dot-org/design-system-storybook
+              working-directory: ./
+
+            - name: UI Tests
+              run: yarn test:ui:ci --filter @code-dot-org/component-library --filter @code-dot-org/design-system-storybook
+              working-directory: ./
+
+            - name: Upload static files as pages artifact
+              if: github.event_name == 'push' || github.event_name == 'workflow_dispatch' || github.event_name == 'workflow_call'
+              id: deployment
+              uses: actions/upload-pages-artifact@v3
+              with:
+                path: apps/design-system-storybook/dist
+                name: component-library-storybook
+
+    eyes:
+      runs-on: ubuntu-24.04
+
+      permissions:
+        pull-requests: write
+        issues: write
+
+      steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Frontend
+        uses: ./.github/actions/frontend/setup
+
+      - name: Build
+        run: yarn build --filter @code-dot-org/design-system-storybook
+        working-directory: ./
+
+      - name: Eyes Tests
+        id: eyes
+        run: |
+          EYES_REPORT=$(COREPACK_ENABLE_DOWNLOAD_PROMPT=0 yarn eyes-storybook)
+          echo "$EYES_REPORT"
+          # Send multiline report to environment var
+          echo "EYES_REPORT<<EOF" >> $GITHUB_OUTPUT
+          echo "$EYES_REPORT" >> $GITHUB_OUTPUT
+          echo "EOF" >> $GITHUB_OUTPUT
+          # Check if the report was successful, failing if not.
+          if echo "$EYES_REPORT" | grep -q "✅"; then
+            echo "✅ Eyes report was successful, exiting with 0"
+            exit 0
+          else
+            echo "❌ Eyes report unsuccessful, exiting with 1"
+            exit 1
+          fi
+        working-directory: ./apps/design-system-storybook
+        continue-on-error: ${{ github.event_name == 'pull_request' }}
+        env:
+          APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
+
+      - name: Find Report Comment
+        if: github.event.pull_request.number
+        uses: peter-evans/find-comment@3eae4d37986fb5a8592848f6a574fdf654e61f9e # v3.1.0
+        id: eyes-report-comment
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: 'github-actions[bot]'
+          body-includes: 'Visual Comparison Report'
+
+      - name: Create comment (if not exists)
+        if: github.event.pull_request.number && steps.eyes-report-comment.outputs.comment-id == ''
+        uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 # v4.0.0
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          body: ${{ steps.eyes.outputs.EYES_REPORT }}
+
+      - name: Update comment (if exists)
+        if: github.event.pull_request.number && steps.eyes-report-comment.outputs.comment-id != ''
+        uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 # v4.0.0
+        with:
+          comment-id: ${{ steps.eyes-report-comment.outputs.comment-id }}
+          edit-mode: replace
+          body: ${{ steps.eyes.outputs.EYES_REPORT }}

.github/workflows/component-library-deploy.yml

@@ -0,0 +1,37 @@
+name: Component-Library-Deploy
+
+on:
+    workflow_dispatch:
+
+    push:
+      branches:
+        - main
+      paths:
+        - 'packages/component-library/**'
+        - 'packages/component-library-styles/**'
+        - 'shared/**'
+
+jobs:
+    ci:
+      uses: ./.github/workflows/component-library-ci.yml
+      secrets: inherit
+
+    deploy:
+      needs:
+        - ci
+
+      permissions:
+        contents: read
+        pages: write
+        id-token: write
+
+      environment:
+        name: component-library-storybook
+
+      runs-on: ubuntu-24.04
+
+      steps:
+        - name: Deploy to GitHub Pages
+          uses: actions/deploy-pages@v4
+          with:
+            artifact_name: "component-library-storybook"

.github/workflows/frontend-ci.yml

@@ -0,0 +1,62 @@
+# Common workflow for execution of continuous integration for the `frontend` code base.
+# This workflow handles setup and teardown for parallel workflow execution for the various apps and packages in `frontend`.
+name: Frontend-CI
+
+on:
+  pull_request:
+    branches:
+      - main
+
+env:
+  APPLITOOLS_BATCH_ID: ${{ github.event.pull_request.head.sha || github.sha }}
+
+jobs:
+  # Initializes common variables and environment prior to executing other jobs
+  setup:
+    runs-on: ubuntu-24.04
+    outputs:
+      component-library-changed: ${{ steps.changes.outputs.component-library }}
+    steps:
+      # Determine what changed to later skip workflows
+      # Github Actions does not offer conditional runtime path filtering, thus use this action to calculate the
+      # changes. Root level applications (such as marketing) are not skipped as its dependency tree always changes
+      - name: Get Change Sets
+        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+        id: changes
+        with:
+          filters: |
+            component-library:
+              - 'apps/design-system-storybook/**'
+              - 'packages/component-library/**'
+              - 'packages/component-library-styles/**'
+              - 'packages/fonts/**'
+              - '*'
+
+  # Start the marketing app CI workflow
+  marketing:
+    needs: setup
+    uses: ./.github/workflows/marketing-app-ci.yml
+    with:
+      BRANCHED_TESTING_ENABLED: ${{ contains( github.event.pull_request.labels.*.name, 'All The Things') }}
+      PR_HEAD_REF: ${{ github.event.pull_request.head.ref }}
+    secrets: inherit
+
+  # Start the component library CI workflow
+  component-library:
+    if: ${{ needs.setup.outputs.component-library-changed == 'true' }}
+    needs: setup
+    uses: ./.github/workflows/component-library-ci.yml
+    secrets: inherit
+
+  # Common teardown actions that must occur after _all_ workflows have completed.
+  # For example, closing the Applitools batch after its completion.
+  teardown:
+    needs: [setup, marketing, component-library]
+    if: always()
+    runs-on: ubuntu-24.04
+    steps:
+      # Close the eyes batch after all distributed eyes tests have completed
+      - name: Update Applitools batch status
+        shell: bash
+        run: |
+          curl -X POST "https://eyesapi.applitools.com/api/externals/github/servers/github.com/commit/${{ env.APPLITOOLS_BATCH_ID }}/${{ github.run_id }}/complete?apiKey=${{secrets.APPLITOOLS_API_KEY}}"