diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c533c63a..a5af245d 100644 --- a/CONTRIBUTING.md +++ b/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) diff --git a/package-lock.json b/package-lock.json index a86ef2a3..b4c87232 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 555d23ae..92388ff3 100644 --- a/package.json +++ b/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" }, diff --git a/source/app/metrics/index.mjs b/source/app/metrics/index.mjs index 85eedb92..284b3e81 100644 --- a/source/app/metrics/index.mjs +++ b/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 diff --git a/source/app/metrics/utils.mjs b/source/app/metrics/utils.mjs index d24f7004..f2b1a5a8 100644 --- a/source/app/metrics/utils.mjs +++ b/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(/^ setTimeout(solve, seconds*1000)) //eslint-disable-line no-promise-executor-return diff --git a/source/plugins/core/README.md b/source/plugins/core/README.md index 22283723..d237db67 100644 --- a/source/plugins/core/README.md +++ b/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. diff --git a/source/plugins/core/metadata.yml b/source/plugins/core/metadata.yml index 70bdd5cf..912728b4 100644 --- a/source/plugins/core/metadata.yml +++ b/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 diff --git a/source/plugins/core/tests.yml b/source/plugins/core/tests.yml index cf4d28df..a5ba9470 100644 --- a/source/plugins/core/tests.yml +++ b/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: diff --git a/source/templates/classic/style.css b/source/templates/classic/style.css index 2ba04860..62c9f9d9 100644 --- a/source/templates/classic/style.css +++ b/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;