From a0c70b1e93501a9e7c91cf309157707e72e972d2 Mon Sep 17 00:00:00 2001
From: lowlighter <22963968+lowlighter@users.noreply.github.com>
Date: Sun, 14 Mar 2021 12:45:44 +0100
Subject: [PATCH] Add postprocessing attributes editions for twemojis #183

---
 source/app/metrics/utils.mjs                    |  4 +++-
 source/templates/classic/partials/reactions.ejs | 12 ++----------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/source/app/metrics/utils.mjs b/source/app/metrics/utils.mjs
index ea8a3663..d071c046 100644
--- a/source/app/metrics/utils.mjs
+++ b/source/app/metrics/utils.mjs
@@ -213,8 +213,10 @@
               emojis.set(emoji, (await axios.get(url)).data.replace(/^<svg /, '<svg class="twemoji" '))
           }
         //Apply replacements
-          for (const [emoji, twemoji] of emojis)
+          for (const [emoji, twemoji] of emojis) {
+            rendered = rendered.replace(new RegExp(`<metrics[ ]*(?<attributes>[^>]*)>${emoji}</metrics>`, "g"), twemoji.replace('<svg class="twemoji" ', '<svg class="twemoji" $<attributes>'))
             rendered = rendered.replace(new RegExp(emoji, "g"), twemoji)
+          }
         return rendered
       },
     /**Render github emojis */
diff --git a/source/templates/classic/partials/reactions.ejs b/source/templates/classic/partials/reactions.ejs
index 7995ffcf..888ca925 100644
--- a/source/templates/classic/partials/reactions.ejs
+++ b/source/templates/classic/partials/reactions.ejs
@@ -13,14 +13,6 @@
           </div>
         <% } else { %>
           <div class="row fill-width">
-            <% if (plugins.reactions.twemoji) { %>
-              <style>
-                .gauge.info .twemoji {
-                  transform: scale(0.5);
-                  transform-origin: center;
-                }
-              </style>
-            <% } %>
             <section class="categories">
               <% for (const [reaction, icon] of Object.entries({HEART:"❤️", THUMBS_UP:"👍", THUMBS_DOWN:"👎", LAUGH:"😄", CONFUSED:"😕", EYES:"👀", ROCKET:"🚀", HOORAY:"🎉"})) { const {score = 0, value:count = 0} = plugins.reactions.list[reaction] ?? {} %>
                 <div class="categorie column">
@@ -29,13 +21,13 @@
                     <% if (score > 0) { %>
                       <circle class="gauge-arc" transform="rotate(-90 60 60)" r="53" cx="60" cy="60" stroke-dasharray="<%= score * 329 %> 329"></circle>
                       <% if (plugins.reactions.twemoji) { %>
-                        <%= icon %>
+                        <metrics viewBox="0 0 70 70" x="30" y="30"><%= icon %></metrics>
                       <% } else { %>
                         <text x="60" y="60" dominant-baseline="central"><%= icon %></text>
                       <% } %>
                     <% } else { %>
                       <% if (plugins.reactions.twemoji) { %>
-                        <%= icon %>
+                        <metrics viewBox="0 0 70 70" x="30" y="30"><%= icon %></metrics>
                       <% } else { %>
                         <text x="60" y="60" dominant-baseline="central"><%= icon %></text>
                       <% } %>