Prettier check now generates a diff comment on PR (#2085)

Splitted prettier GitHub action into two:
- `on push`, only runs on direct pushes, if test fails generates an
artifact (that lasts for 3 days) with an html version of the changes
needed to pass prettier test
- `on PR`, only runs on PRs, if test fails comments on the PR with the
HTML content of the diff

I couldn't actually test the `on PR` version since it needs to be on a
PR in the master branch, so this will only be triggered after this PR is
accepted, and for the next PR that fails prettier test.

PS: currently the artifact is a zip file with the html inside. It is not
currently possible to generate it other way, we have to wait for [this
issue](https://github.com/actions/upload-artifact/issues/14) to be
closed.

---------

Signed-off-by: George Araújo <george.gcac@gmail.com>

.github/workflows/prettier-on-pr.yml

@@ -0,0 +1,37 @@
+name: Prettier code formatter (PR)
+
+on:
+  pull_request:
+    branches:
+      - master
+      - main
+  workflow_dispatch:
+
+jobs:
+  check:
+    # available images: https://github.com/actions/runner-images#available-images
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+      - name: Setup Node.js ⚙️
+        uses: actions/setup-node@v4
+      - name: Install Prettier 💾
+        run: npm install --save-dev --save-exact prettier @shopify/prettier-plugin-liquid
+      - name: Prettier Check 🔎
+        id: prettier
+        run: npx prettier . --check
+      - name: Create diff 📝
+        # https://docs.github.com/en/actions/learn-github-actions/expressions#failure
+        if: ${{ failure() }}
+        run: |
+          npx prettier . --write
+          git diff -- . ':(exclude)package-lock.json' ':(exclude)package.json' > diff.txt
+          npm install -g diff2html-cli
+          diff2html -i file -s side -F diff.html -- diff.txt
+      - name: PR comment with html diff
+        # https://docs.github.com/en/actions/learn-github-actions/expressions#failure-with-conditions
+        if: ${{ failure() && steps.prettier.conclusion == 'failure' }}
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          filePath: diff.html

.github/workflows/prettier-on-push.yml

@@ -0,0 +1,38 @@
+name: Prettier code formatter (Push)
+
+on:
+  push:
+    branches:
+      - master
+      - main
+  workflow_dispatch:
+
+jobs:
+  check:
+    # available images: https://github.com/actions/runner-images#available-images
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+      - name: Setup Node.js ⚙️
+        uses: actions/setup-node@v4
+      - name: Install Prettier 💾
+        run: npm install --save-dev --save-exact prettier @shopify/prettier-plugin-liquid
+      - name: Prettier Check 🔎
+        id: prettier
+        run: npx prettier . --check
+      - name: Create diff 📝
+        # https://docs.github.com/en/actions/learn-github-actions/expressions#failure
+        if: ${{ failure() }}
+        run: |
+          npx prettier . --write
+          git diff -- . ':(exclude)package-lock.json' ':(exclude)package.json' > diff.txt
+          npm install -g diff2html-cli
+          diff2html -i file -s side -F diff.html -- diff.txt
+      - name: Upload html diff
+        if: ${{ failure() && steps.prettier.conclusion == 'failure' }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: HTML Diff
+          path: diff.html
+          retention-days: 3

.github/workflows/prettier.yml

@@ -1,26 +0,0 @@
-name: Prettier code formatter
-
-on:
-  push:
-    branches:
-      - master
-      - main
-  pull_request:
-    branches:
-      - master
-      - main
-  workflow_dispatch:
-
-jobs:
-  check:
-    # available images: https://github.com/actions/runner-images#available-images
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout 🛎️
-        uses: actions/checkout@v4
-      - name: Setup Node.js ⚙️
-        uses: actions/setup-node@v4
-      - name: Install Prettier 💾
-        run: npm install --save-dev --save-exact prettier @shopify/prettier-plugin-liquid
-      - name: Prettier Check 🔎
-        run: npx prettier . --check