Add Prettier GitHub workflow (#9163)

* replace older eslintrc with newer eslint.config.js

* replace older prettierrc with newer prettier.config.cjs
split the difference between the two configs

* require eslint
eslint is a linter that we can run using prettier rules

* needs to be a module so we can call the eslint.config.js

* add a lint script

* remove debugging

* add a lint action

* remove semi from prettier config

* remove the eslint line at the end
that I forgot to delete

* update readme

* refactor eslint to prettier action

* only trigger on workflow dispatch

* update the prettier path

* add fetch depth to checkout

* oneline the pr comment

* output the changed files & diff to the github env
and then use those env variables in the pr comment

* proper diff and fetch main

* simplify path mapping

* update gh action with tweaks from https://github.com/pantheon-systems/documentation/pull/9180/files

* add some inline docs to the action
so it's easier to understand what it's doing

* readme copy changes

* remove plugin-prettier

* update package-lock
to remove prettier-plugin

* Update README.md

---------

Co-authored-by: Steve Persch <stevector@users.noreply.github.com>

.github/workflows/prettier.yml

@@ -0,0 +1,80 @@
+name: Prettier
+
+on:
+  pull_request:
+    paths:
+      - 'src/**/*.js'
+      - '.github/workflows/prettier.yml'
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - ready_for_review
+  workflow_dispatch:
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'latest'
+      - name: Install Node dependencies
+        run: npm ci
+      - name: Run Prettier on changed files
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          git fetch origin main
+          # Check for changed JavaScript files.
+          CHANGED_FILES=$(git diff --name-only origin/main...HEAD | grep -E '\.js$|\.jsx$|\.ts$|\.tsx$' || echo "")
+          # If JavaScript files have changed, run Prettier.
+          if [ -n "$CHANGED_FILES" ]; then
+            echo "Fixing the following files:"
+            echo "$CHANGED_FILES"
+
+            # Run Prettier on the changed files.
+            echo "$CHANGED_FILES" | xargs npx prettier --write
+            
+            # Join the filenames into a single line with space separation.
+            JOINED_FILES=$(echo $CHANGED_FILES | tr '\n' ' ')
+            echo "CHANGED_FILES=$JOINED_FILES" >> $GITHUB_ENV
+          else
+            echo "No files to format"
+          fi
+      - name: Commit and push Prettier changes
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          # Did we make changes when we ran Prettier?
+          if [ -n "$(git status --porcelain)" ]; then
+            git config user.name "Pantheon Bot"
+            git config user.email "bot@getpantheon.com"
+            git add .
+            git commit -m "Apply Prettier formatting"
+            git push origin HEAD:${{ github.head_ref }}
+
+            DIFF_OUTPUT=$(git diff HEAD~1 HEAD)
+            echo "DIFF_OUTPUT<<EOF" >> $GITHUB_ENV
+            echo "$DIFF_OUTPUT" >> $GITHUB_ENV
+            echo "EOF" >> $GITHUB_ENV
+          else
+            echo "No changes to commit"
+          fi
+      - name: Set Prettier diff output
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          if [ -n "${{ env.DIFF_OUTPUT }}" ]; then
+            CURRENT_COMMIT=$(git rev-parse --short HEAD)
+            gh pr comment ${{ github.event.pull_request.number }} --body "$(echo -e "Hi from your friendly robot! 🤖\n\nI've applied Prettier formatting to the following files in $CURRENT_COMMIT:\n\n\`${{ env.CHANGED_FILES }}\`\n\nThe full diff is below. Please review the changes.\n\n<details>\n<summary>Click to expand</summary>\n\n\`\`\`diff\n$DIFF_OUTPUT\n\`\`\`\n</details>")"
+          else
+            echo "No Prettier changes"
+          fi

README.md

@@ -139,6 +139,20 @@ lando start
 
 You can view the local environment at `localhost:8000/`. Updates to docs are automatically refreshed in the browser.
 
+## Linting and Code Formatting
+We use ESLint and Prettier to enforce code style. On each pull request to the repository, if any `.js`, `.jsx`, `.ts` or `.tsx` files are modified in the `/src` directory, We run Prettier to check for code styling issues on the updated/changed files. If Prettier made any changes, those changes are automatically committed back to the PR (see [example PR](https://github.com/pantheon-systems/documentation/pull/9180#issuecomment-2292403319)).
+
+To check for linting issues locally, run:
+```bash
+npm run lint
+```
+
+To automatically fix formatting issues across the entire `/src` directory, run:
+```bash
+npm run format
+```
+Be cautious when running this command, as it will automatically fix any formatting issues it can.
+
 ## Testing
 
 We include several tools to test that new content doesn't break the documentation. Most of these tests are performed automatically by our continuous integration service, but pull requests created from external contributors aren't included in CI tests. If you want to manually test your branch, you can execute the following tests within the Docker container.

eslint.config.js

@@ -0,0 +1,27 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import prettier from 'eslint-config-prettier';
+
+const compat = new FlatCompat({
+  baseDirectory: process.cwd(),
+  recommendedConfig: js.configs.recommended,
+});
+
+export default [
+  {
+    ignores: ['node_modules/**'],
+  },
+  ...compat.config({
+    extends: ['plugin:prettier/recommended'],
+    plugins: ['prettier'],
+    rules: {
+      'prettier/prettier': 'error',
+    },
+    globals: {
+      MktoForms2: 'readonly',
+      jQuery: 'readonly',
+      $: 'readonly',
+    },
+  }),
+  prettier,
+];