Add postprocessing attributes editions for twemojis #183

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 */

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>
                       <% } %>