Re-add Prettier GitHub workflow #9163

.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,16 @@ lando start
 
 You can view the local environment at `localhost:8000/`. Updates to docs are automatically refreshed in the browser.
 
+## Code Formatting
+We use Prettier to enforce code style on changed files. 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 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.

package.json

@@ -67,7 +67,7 @@
     "@octokit/rest": "^16.43.2",
     "date-fns": "^2.29.3",
     "mark.js": "^8.11.1",
-    "prettier": "^2.8.3",
+    "prettier": "3.3.3",
     "react-date-range": "^1.4.0"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",

prettier.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  "endOfLine": "lf",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all"
+}