From 7de73c8fd22f322483c57ecc22cc5a7c8a6063a6 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Fri, 24 Dec 2021 23:00:50 -0500
Subject: [PATCH] [F] Fix emoji in about page

---
 package.json        |  1 +
 src/views/About.vue | 10 ++++++++--
 yarn.lock           | 10 ++++++++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d6ade6b..ff14a68 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
         "@types/marked": "^4.0.1",
         "@types/three": "^0.135.0",
         "core-js": "^3.6.5",
+        "emoji-regex": "^10.0.0",
         "marked": "^4.0.6",
         "meshline": "^2.0.3",
         "moment": "^2.29.1",
diff --git a/src/views/About.vue b/src/views/About.vue
index ee5f2e0..8cb818f 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -7,6 +7,7 @@
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
 import {marked} from 'marked';
+import emojiRegex from 'emoji-regex';
 
 @Options({components: {}})
 export default class About extends Vue
@@ -17,18 +18,23 @@ export default class About extends Vue
     {
         // TODO: Cloudflare CDN
         fetch("https://raw.githubusercontent.com/hykilpikonna/hykilpikonna/main/README.md").then(it => it.text())
-            .then(it => this.html = marked(it))
+            .then(it => this.html = marked(it.replace(emojiRegex(), (emoji) => {
+                return `<span class="emoji">${emoji}</span>`
+            })))
     }
 }
 </script>
 
-<style lang="sass" scoped>
+<style lang="sass">
 @import "../css/colors"
 
 #About
     width: min(600px, 80vw)
     margin: auto
 
+.emoji
+    font-weight: normal
+
 // Markdown style
 .markdown-content
     text-align: justify
diff --git a/yarn.lock b/yarn.lock
index 5b0a183..e16321b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1939,6 +1939,11 @@ ansi-html-community@0.0.8:
   resolved "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz"
   integrity sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==
 
+ansi-html-community@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
+  integrity sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==
+
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz"
@@ -3667,6 +3672,11 @@ elliptic@^6.5.3:
     minimalistic-assert "^1.0.1"
     minimalistic-crypto-utils "^1.0.1"
 
+emoji-regex@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.0.0.tgz#96559e19f82231b436403e059571241d627c42b8"
+  integrity sha512-KmJa8l6uHi1HrBI34udwlzZY1jOEuID/ft4d8BSSEdRyap7PwBEt910453PJa5MuGvxkLqlt4Uvhu7tttFHViw==
+
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz"