From 767cf5a643a1a5d1cf9676ddc4785823e93d486d Mon Sep 17 00:00:00 2001
From: Andrea <andrea@avris.it>
Date: Sat, 7 May 2022 11:35:32 -0500
Subject: [PATCH] try Noto Emoji

---
 assets/fonts.scss      |  2 ++
 assets/variables.scss  |  4 ++--
 components/Twemoji.vue | 44 ++++++++++++++++++++++++------------------
 src/parseMarkdown.js   |  4 ++--
 4 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/assets/fonts.scss b/assets/fonts.scss
index ab4dd9a8..0fee506f 100644
--- a/assets/fonts.scss
+++ b/assets/fonts.scss
@@ -1,5 +1,7 @@
 @use "sass:list";
 
+@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji&display=swap');
+
 @if list.index($fonts, 'Quicksand') {
     /* quicksand-regular - latin-ext_latin */
     @font-face {
diff --git a/assets/variables.scss b/assets/variables.scss
index b4ab3db0..520bb1cc 100644
--- a/assets/variables.scss
+++ b/assets/variables.scss
@@ -1,8 +1,8 @@
 @import "../data/variables";
 $fonts: $fontHeadings $fontText;
 
-$font-family-sans-serif: $fontText, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-$headings-font-family: $fontHeadings, $fontText, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif: $fontText, "Noto Emoji", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$headings-font-family: $fontHeadings, "Noto Emoji", $fontText, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 
 $primary: #C71585;
 $alert-border-level: -3;
diff --git a/components/Twemoji.vue b/components/Twemoji.vue
index 5238c175..3ddee893 100644
--- a/components/Twemoji.vue
+++ b/components/Twemoji.vue
@@ -1,34 +1,40 @@
 <template>
+    <!-- twemoji disabled, testing Noto Emoji instead -->
+    <span>
+        <slot ref="source"></slot>
+    </span>
+    <!--
     <span>
         <span ref="source" v-show="false">
             <slot ref="source"></slot>
         </span>
         <span ref="target"></span>
     </span>
+    -->
 </template>
 
 <script>
-import twemoji from 'twemoji';
+// import twemoji from 'twemoji';
 
 export default {
-    mounted() {
-        this.update();
-
-        const observer = new MutationObserver(this.update);
-        observer.observe(this.$refs.source, {
-            childList: true,
-            subtree: true
-        });
-        this.observer = observer;
-    },
-    beforeUnmount() {
-        this.observer.disconnect();
-    },
-    methods: {
-        update() {
-            this.$refs.target.innerHTML = twemoji.parse(this.$refs.source.innerHTML);
-        },
-    },
+    // mounted() {
+    //     this.update();
+    //
+    //     const observer = new MutationObserver(this.update);
+    //     observer.observe(this.$refs.source, {
+    //         childList: true,
+    //         subtree: true
+    //     });
+    //     this.observer = observer;
+    // },
+    // beforeUnmount() {
+    //     this.observer.disconnect();
+    // },
+    // methods: {
+    //     update() {
+    //         this.$refs.target.innerHTML = twemoji.parse(this.$refs.source.innerHTML);
+    //     },
+    // },
 };
 </script>
 
diff --git a/src/parseMarkdown.js b/src/parseMarkdown.js
index 6674270d..0c41689b 100644
--- a/src/parseMarkdown.js
+++ b/src/parseMarkdown.js
@@ -1,4 +1,4 @@
-import twemoji from 'twemoji';
+// import twemoji from 'twemoji';
 
 const census_groups = {
     'location_poland': 'Osoby mieszkające w Polsce',
@@ -77,7 +77,7 @@ export default async function parseMarkdown(markdown) {
                 .replace(/<p>{census_groups}<\/p>(.+?)<p>{\/census_groups}<\/p>/gms, mainPlusDetails(census_groups, false))
                 .replace(/<p>{census_comparisons}<\/p>(.+?)<p>{\/census_comparisons}<\/p>/gms, mainPlusDetails(census_comparisons, true))
                 .replace(/{json=([^=}]+)=([^=}]+)}/g, fetchJson)
-                .replace(/<p>{twemoji}<\/p>(.+?)<p>{\/twemoji}<\/p>/gms, (_, c) => twemoji.parse(c))
+                .replace(/<p>{twemoji}<\/p>(.+?)<p>{\/twemoji}<\/p>/gms, (_, c) => c) // twemoji.parse(c)
             + '</div>'
         ;
         content = content.replace(/{table_of_contents}/g, generateToC(content));