Add option to use twemojis instead of emojis (#121)

CONTRIBUTING.md

@@ -519,6 +519,8 @@ Below is a list of used packages.
   * For mocking data
 * [steveukx/git-js](https://github.com/steveukx/git-js)
   * For simple git operations
+* [twitter/twemoji-parser](https://github.com/twitter/twemoji-parser)
+  * To parse emojis and replace them by [twemojis](https://github.com/twitter/twemoji)
 
 </details>
 

package-lock.json

@@ -7715,6 +7715,11 @@
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
       "dev": true
     },
+    "twemoji-parser": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-13.0.0.tgz",
+      "integrity": "sha512-zMaGdskpH8yKjT2RSE/HwE340R4Fm+fbie4AaqjDa4H/l07YUmAvxkSfNl6awVWNRRQ0zdzLQ8SAJZuY5MgstQ=="
+    },
     "type-check": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",

package.json

@@ -39,6 +39,7 @@
     "puppeteer": "^5.5.0",
     "simple-git": "^2.31.0",
     "svgo": "^1.3.2",
+    "twemoji-parser": "^13.0.0",
     "vue": "^2.6.12",
     "vue-prism-component": "^1.2.0"
   },

source/app/metrics/index.mjs

@@ -55,6 +55,8 @@
         //Rendering and resizing
           console.debug(`metrics/compute/${login} > render`)
           let rendered = await ejs.render(image, {...data, s:imports.s, f:imports.format, style, fonts}, {views, async:true})
+          if (q["config.twemoji"])
+            rendered = await imports.svgemojis(rendered)
           const {resized, mime} = await imports.svgresize(rendered, {paddings:q["config.padding"] || conf.settings.padding, convert})
           rendered = resized
 

source/app/metrics/utils.mjs

@@ -9,6 +9,7 @@
   import puppeteer from "puppeteer"
   import imgb64 from "image-to-base64"
   import git from "simple-git"
+  import twemojis from "twemoji-parser"
 
   export {fs, os, paths, url, util, processes, axios, puppeteer, imgb64, git}
 
@@ -168,6 +169,20 @@
       return {resized, mime}
   }
 
+/**Render twemojis */
+  export async function svgemojis(svg) {
+    //Load emojis
+      const emojis = new Map()
+      for (const {text:emoji, url} of twemojis.parse(svg)) {
+        if (!emojis.has(emoji))
+          emojis.set(emoji, (await axios.get(url)).data.replace(/^<svg /, '<svg class="twemoji" '))
+      }
+    //Apply replacements
+      for (const [emoji, twemoji] of emojis)
+        svg = svg.replace(new RegExp(emoji, "g"), twemoji)
+    return svg
+  }
+
 /**Wait */
   export async function wait(seconds) {
     await new Promise(solve => setTimeout(solve, seconds*1000)) //eslint-disable-line no-promise-executor-return

source/plugins/core/README.md

@@ -39,6 +39,21 @@ Omitted one will be appended using default order.
     config_order: base.header, isocalendar, languages, stars
 ```
 
+### 🙂 Using twemojis instead of emojis
+
+You can choose to use [twemojis](https://github.com/twitter/twemoji) instead of regular emojis so rendered metrics are more consistent across all platforms.
+
+It may increase filesize since it replace unicode characters by SVG images.
+
+#### ℹ️ Examples workflows
+
+```yaml
+- uses: lowlighter/metrics@latest
+  with:
+    # ... other options
+    config_twemoji: yes
+```
+
 ### 🎞️ SVG CSS Animations
 
 As rendered metrics use HTML and CSS, some templates have animations.

source/plugins/core/metadata.yml

@@ -88,6 +88,13 @@ inputs:
     format: comma-separated
     default: ""
 
+  # Use twemojis instead of emojis
+  # May increase filesize but emojis will be rendered the same across all platforms
+  config_twemoji:
+    description: Use twemojis instead of emojis
+    type: boolean
+    default: no
+
   # Enable SVG CSS animations
   config_animations:
     description: SVG CSS animations

source/plugins/core/tests.yml

@@ -10,6 +10,12 @@
     token: MOCKED_TOKEN
     config_output: png
 
+- name: Use twemoji
+  uses: lowlighter/metrics@latest
+  with:
+    token: MOCKED_TOKEN
+    config_twemoji: yes
+
 - name: Disable animations
   uses: lowlighter/metrics@latest
   with:

source/templates/classic/style.css

@@ -649,6 +649,13 @@
     }
   }
 
+/* Twemoji */
+  .twemoji {
+    height: 1em;
+    width: 1em;
+    margin-bottom: -.125em;
+  }
+
 /* Cake day */
   .cakeday, .cakeday svg {
     animation: animation-rainbow 1.2s;