Fix icon preview comment workflow (#1775)

* Add helpers

* fix preview script

* refactor markup to javascript

* test

* Add escaping

* Try alternative escaping

* test comment markup

* update comment markup

* Revert comment markup step

* revert escaping

* Test with markup file instead of GITHUB_OUTPUT var

.github/workflows/pull-request.yml

@@ -6,6 +6,7 @@ on:
       - 'icons/*.svg'
     branches:
       - main
+      - fix-icon-preview
 
 jobs:
   lint-contributors:
@@ -46,184 +47,43 @@ jobs:
           # Example for the previous substitution
           # input: +++ b/icons/accessibility.json%0A@@ -2,0 +3 @@%0A+  "contributors": ["hi"],%0A@@ -13 +14 @@%0A+}%0A
           # output: ::$ANNOTATION_SEVERITY file=icons/accessibility.json,line=2,endLine=3,title=$ANNOTATION_TITLE::$ANNOTATION_DESCRIPTION%0A%0A+  "contributors": ["hi"],%0A@@ -13 +14 @@%0A+}%0A
-      # - name: Fail if contributors have changed
-      #   run: git diff --exit-code -- icons/*.json
 
-  generate-changed-icons-comment-data:
-    if: github.repository == 'lucide-icons/lucide'
+  generate-changed-icons-comment:
     runs-on: ubuntu-latest
     permissions:
       contents: read
-    outputs:
-      generate-1px-stroke-width: ${{ steps.generate-1px-stroke-width.outputs.body }}
-      generate-2px-stroke-width: ${{ steps.generate-2px-stroke-width.outputs.body }}
-      generate-3px-stroke-width: ${{ steps.generate-3px-stroke-width.outputs.body }}
-      generate-24px-dpi-preview: ${{ steps.generate-24px-dpi-preview.outputs.body }}
-      generate-cohesion-check-random: ${{ steps.generate-cohesion-check-random.outputs.body }}
-      generate-cohesion-check-squares: ${{ steps.generate-cohesion-check-squares.outputs.body }}
-      generate-x-rays: ${{ steps.generate-x-rays.outputs.body }}
+      pull-requests: write
 
     steps:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
           ref: refs/pull/${{ github.event.pull_request.number }}/merge
+
       - name: Get changed files
         id: changed-files
         uses: tj-actions/changed-files@v41
         with:
           files: icons/*.svg
-      - name: Generate 24px dpi preview
-        id: generate-24px-dpi-preview
-        env:
-          CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
-        run: |
-          delimiter="$(openssl rand -hex 8)"
-          echo "body<<$delimiter" >> $GITHUB_OUTPUT
-          while IFS= read -r file; do
-            cat "$file" | # get file content
-            tr '\n' ' ' | # remove line breaks
-            sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
-            base64 -w 0 | # encode svg
-            sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/dpi/24/&.svg\"/> |"
-          done <<< "$CHANGED_FILES" | tr '\n' ' ' >> $GITHUB_OUTPUT
-          echo >> $GITHUB_OUTPUT
-          echo "$delimiter" >> $GITHUB_OUTPUT
-      - name: Generate cohesion check random
-        id: generate-cohesion-check-random
-        env:
-          CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
-        run: |
-          delimiter="$(openssl rand -hex 8)"
-          echo "body<<$delimiter" >> $GITHUB_OUTPUT
-          for file in $(printf "%s\\n" icons/*.svg | shuf | head -n$(awk -F' ' '{print NF}' <<< '${{ steps.changed-files.outputs.all_changed_files }}')); do
-            cat "$file" | # get file content
-            tr '\n' ' ' | # remove line breaks
-            sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
-            base64 -w 0 | # encode svg
-            sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/2/&.svg\"/> |"
-          done <<< "$CHANGED_FILES" | tr '\n' ' ' >> $GITHUB_OUTPUT
-          echo >> $GITHUB_OUTPUT
-          echo "$delimiter" >> $GITHUB_OUTPUT
-      - name: Generate cohesion check squares
-        id: generate-cohesion-check-squares
-        env:
-          CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
-        run: |
-          delimiter="$(openssl rand -hex 8)"
-          echo "body<<$delimiter" >> $GITHUB_OUTPUT
-          for file in $(printf "%s\\n" icons/*square*.svg | shuf | head -n$(awk -F' ' '{print NF}' <<< '${{ steps.changed-files.outputs.all_changed_files }}')); do
-            cat "$file" | # get file content
-            tr '\n' ' ' | # remove line breaks
-            sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
-            base64 -w 0 | # encode svg
-            sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/2/&.svg\"/> |"
-          done <<< "$CHANGED_FILES" | tr '\n' ' ' >> $GITHUB_OUTPUT
-          echo >> $GITHUB_OUTPUT
-          echo "$delimiter" >> $GITHUB_OUTPUT
-      - name: Generate 1px stroke-width
-        id: generate-1px-stroke-width
-        env:
-          CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
-        run: |
-          delimiter="$(openssl rand -hex 8)"
-          echo "body<<$delimiter" >> $GITHUB_OUTPUT
-          while IFS= read -r file; do
-            cat "$file" | # get file content
-            tr '\n' ' ' | # remove line breaks
-            sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
-            base64 -w 0 | # encode svg
-            sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/1/&.svg\"/> |"
-          done <<< "$CHANGED_FILES" | tr '\n' ' ' >> $GITHUB_OUTPUT
-          echo >> $GITHUB_OUTPUT
-          echo "$delimiter" >> $GITHUB_OUTPUT
-      - name: Generate 2px stroke-width
-        id: generate-2px-stroke-width
-        env:
-          CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
-        run: |
-          delimiter="$(openssl rand -hex 8)"
-          echo "body<<$delimiter" >> $GITHUB_OUTPUT
-          while IFS= read -r file; do
-            cat "$file" | # get file content
-            tr '\n' ' ' | # remove line breaks
-            sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
-            base64 -w 0 | # encode svg
-            sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/2/&.svg\"/> |"
-          done <<< "$CHANGED_FILES" | tr '\n' ' ' >> $GITHUB_OUTPUT
-          echo >> $GITHUB_OUTPUT
-          echo "$delimiter" >> $GITHUB_OUTPUT
-      - name: Generate 3px stroke-width
-        id: generate-3px-stroke-width
-        run: |
-          delimiter="$(openssl rand -hex 8)"
-          echo "body<<$delimiter" >> $GITHUB_OUTPUT
-          while IFS= read -r file; do
-            cat "$file" | # get file content
-            tr '\n' ' ' | # remove line breaks
-            sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
-            base64 -w 0 | # encode svg
-            sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/3/&.svg\"/> |"
-          done <<< "$CHANGED_FILES" | tr '\n' ' ' >> $GITHUB_OUTPUT
-          echo >> $GITHUB_OUTPUT
-          echo "$delimiter" >> $GITHUB_OUTPUT
-      - name: Generate X-rays
-        id: generate-x-rays
-        env:
-          CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
-        run: |
-          delimiter="$(openssl rand -hex 8)"
-          echo "body<<$delimiter" >> $GITHUB_OUTPUT
-          while IFS= read -r file; do
-            cat "$file" | # get file content
-            tr '\n' ' ' | # remove line breaks
-            sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
-            base64 -w 0 | # encode svg
-            sed "s|.*|<img width=\"400\" title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/$(basename ${file//\.svg/})/&.svg\"/> |"
-          done <<< "$CHANGED_FILES" | tr '\n' ' ' >> $GITHUB_OUTPUT
-          echo >> $GITHUB_OUTPUT
-          echo "$delimiter" >> $GITHUB_OUTPUT
 
-  add-changed-icons-comment:
-    if: github.repository == 'lucide-icons/lucide'
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: write
-    needs: [generate-changed-icons-comment-data]
-    steps:
       - name: Find Comment
         uses: peter-evans/find-comment@v2
-        id: fc
+        id: pr-comment
         with:
           issue-number: ${{ github.event.pull_request.number }}
           comment-author: 'github-actions[bot]'
           body-includes: Added or changed icons
+
+      - name: Generate comment markup
+        run: node ./scripts/generateChangedIconsCommentMarkup.mjs >> comment-markup.md
+        id: comment-markup
+        env:
+          CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
+
       - name: Create or update comment
         uses: peter-evans/create-or-update-comment@v3
         with:
-          comment-id: ${{ steps.fc.outputs.comment-id }}
+          comment-id: ${{ steps.pr-comment.outputs.comment-id }}
           issue-number: ${{ github.event.pull_request.number }}
-          body: |
-            ### Added or changed icons
-            ${{ needs.generate-changed-icons-comment-data.outputs.generate-2px-stroke-width }}<br/>
-            <details>
-            <summary>Preview cohesion</summary>
-            ${{ needs.generate-changed-icons-comment-data.outputs.generate-cohesion-check-squares }}<br/>
-            ${{ needs.generate-changed-icons-comment-data.outputs.generate-2px-stroke-width }}<br/>
-            ${{ needs.generate-changed-icons-comment-data.outputs.generate-cohesion-check-random }}<br/>
-            </details>
-            <details>
-            <summary>Preview stroke widths</summary>
-            ${{ needs.generate-changed-icons-comment-data.outputs.generate-1px-stroke-width }}<br/>
-            ${{ needs.generate-changed-icons-comment-data.outputs.generate-2px-stroke-width }}<br/>
-            ${{ needs.generate-changed-icons-comment-data.outputs.generate-3px-stroke-width }}<br/>
-            </details>
-            <details>
-            <summary>DPI Preview (24px)</summary>
-            ${{ needs.generate-changed-icons-comment-data.outputs.generate-24px-dpi-preview }}
-            </details>
-            <details>
-            <summary>Icon X-rays</summary>
-            ${{ needs.generate-changed-icons-comment-data.outputs.generate-x-rays }}
-            </details>
+          body-path: ./comment-markup.md
           edit-mode: replace