Fix UTF8 Rendering of Emojis (#5)

osterman · actions-user · web-flow · commit 7b23cdff950c · 2024-01-18T09:16:01.000-06:00
Co-authored-by: screenshot-action 📼 &lt;actions@github.com&gt;
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
@@ -32,7 +32,7 @@ jobs:
             background: linear-gradient(139deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 56%, rgba(147,0,255,1) 100%);
           }
         customizations: |
-          "#name": "${{ github.event.repository.name }}"        
+          "#name": "${{ github.event.repository.name }} 📷"
         viewportWidth: 2000
         viewportHeight: 800
 
@@ -43,9 +43,9 @@ jobs:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
         commit_message: "chore: update example image"
-        commit_user_name: screenshot-action 📼
+        commit_user_name: screenshot-action 📷
         commit_user_email: actions@github.com
-        commit_author: screenshot-action 📼 <actions@github.com>
+        commit_author: screenshot-action 📷 <actions@github.com>
         file_pattern: 'docs/*.png'
 
     - name: Add Image to Step Summary
diff --git a/Makefile b/Makefile
@@ -12,3 +12,7 @@ deps:
 
 run:
 	node main.js
+
+# This will not work on a Mac
+docker/run:
+	docker run -i --init --cap-add=SYS_ADMIN -v $(PWD):$(PWD) --workdir=$(PWD) ghcr.io/puppeteer/puppeteer:21.3.8 bash -c 'npm install --no-fund option && node main.js'
diff --git a/action.yml b/action.yml
@@ -46,6 +46,9 @@ inputs:
   waitForTimeout:
     description: 'Number of miliseconds to delay before taking screenshot'
     default: 500
+  puppeteerImage:
+    description: 'Docker image to run puppeteer. See https://github.com/puppeteer/puppeteer/pkgs/container/puppeteer'
+    default: 'ghcr.io/puppeteer/puppeteer:21.7.0'
 outputs:
   file:
     description: "File containing the generated screenshot"
@@ -77,6 +80,7 @@ runs:
 
         # Prepare inputs that should be passed to the docker container.
         cat<<__EOF__>docker.env
+        LANG=C.UTF-8
         GITHUB_WORKSPACE=${{ github.workspace }}
         ACTION_PATH=${{ github.action_path }}
         INPUT_OUTPUT_TYPE=${{ inputs.outputType }}
@@ -105,11 +109,11 @@ runs:
       id: screenshot
       uses: tj-actions/docker-run@v2
       with:
-        image: ghcr.io/puppeteer/puppeteer:21.3.8
+        image: ${{ inputs.puppeteerImage }}
         name: puppeteer-chrome
         options: '-i --init --cap-add=SYS_ADMIN ${{ env.DOCKER_VOLUMES }} --workdir=${{github.action_path}} --env-file docker.env'
         args: |
-          bash -c 'npm install --no-fund option && node main.js'
+          bash -c './entrypoint.sh'
 
     - id: context
       shell: bash
diff --git a/docs/example.png b/docs/example.png
diff --git a/entrypoint.sh b/entrypoint.sh
@@ -0,0 +1,28 @@
+#!/bin/bash
+set -ex
+
+# Install Additional Fonts
+TWITTER_COLOR_EMOJI_VERSION="14.0.2"
+GOOGLE_NOTO_COLOR_EMOJI_VERSION="2.042"
+
+mkdir -p ~/.fonts
+
+# Solution found in https://stackoverflow.com/questions/50662388/running-headless-chrome-puppeteer-with-no-sandbox
+
+# Install Noto Color Emoji
+curl --location --silent --show-error -o ~/.fonts/NotoColorEmoji.ttf  https://github.com/googlefonts/noto-emoji/blob/v${GOOGLE_NOTO_COLOR_EMOJI_VERSION}/fonts/NotoColorEmoji.ttf?raw=true
+
+# Install Twitter Emoji Font
+wget https://github.com/13rac1/twemoji-color-font/releases/download/v${TWITTER_COLOR_EMOJI_VERSION}/TwitterColorEmoji-SVGinOT-Linux-${TWITTER_COLOR_EMOJI_VERSION}.tar.gz
+tar -xzvf TwitterColorEmoji-*.tar.gz --wildcards '*.ttf'
+find . -type f -wholename 'TwitterColorEmoji-*/*.ttf' -exec mv {} ~/.fonts/ \;
+
+# Rebuild the font cache
+fc-cache -f -v
+fc-list | grep -i emoji
+
+# Install dependencies
+npm install --no-fund option 
+
+# Generate screenshot
+node main.js
diff --git a/package.json b/package.json
@@ -54,6 +54,8 @@
 
     "js-yaml": "^4.1.0",
 
+    "option": "^0.2.4",
+
     "puppeteer": "^21.7.0"
 
   },
diff --git a/test/html/index.html b/test/html/index.html
@@ -1,5 +1,6 @@
 <html>
   <head>
+    <meta charset="UTF-8">
     <title>Cloud Posse</title>
     <style>
     body {

-Original file line number
+Diff line change
@@ @@ -1,5 +1,6 @@ @@
 <html>
   <head>
 +    <meta charset="UTF-8">
     <title>Cloud Posse</title>
     <style>
     body {