try Noto Emoji

This commit is contained in:
Andrea 2022-05-07 11:35:32 -05:00
parent 3090d167b3
commit 767cf5a643
4 changed files with 31 additions and 23 deletions

View File

@ -1,5 +1,7 @@
@use "sass:list"; @use "sass:list";
@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji&display=swap');
@if list.index($fonts, 'Quicksand') { @if list.index($fonts, 'Quicksand') {
/* quicksand-regular - latin-ext_latin */ /* quicksand-regular - latin-ext_latin */
@font-face { @font-face {

View File

@ -1,8 +1,8 @@
@import "../data/variables"; @import "../data/variables";
$fonts: $fontHeadings $fontText; $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; $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, $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, "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; $primary: #C71585;
$alert-border-level: -3; $alert-border-level: -3;

View File

@ -1,34 +1,40 @@
<template> <template>
<!-- twemoji disabled, testing Noto Emoji instead -->
<span>
<slot ref="source"></slot>
</span>
<!--
<span> <span>
<span ref="source" v-show="false"> <span ref="source" v-show="false">
<slot ref="source"></slot> <slot ref="source"></slot>
</span> </span>
<span ref="target"></span> <span ref="target"></span>
</span> </span>
-->
</template> </template>
<script> <script>
import twemoji from 'twemoji'; // import twemoji from 'twemoji';
export default { export default {
mounted() { // mounted() {
this.update(); // this.update();
//
const observer = new MutationObserver(this.update); // const observer = new MutationObserver(this.update);
observer.observe(this.$refs.source, { // observer.observe(this.$refs.source, {
childList: true, // childList: true,
subtree: true // subtree: true
}); // });
this.observer = observer; // this.observer = observer;
}, // },
beforeUnmount() { // beforeUnmount() {
this.observer.disconnect(); // this.observer.disconnect();
}, // },
methods: { // methods: {
update() { // update() {
this.$refs.target.innerHTML = twemoji.parse(this.$refs.source.innerHTML); // this.$refs.target.innerHTML = twemoji.parse(this.$refs.source.innerHTML);
}, // },
}, // },
}; };
</script> </script>

View File

@ -1,4 +1,4 @@
import twemoji from 'twemoji'; // import twemoji from 'twemoji';
const census_groups = { const census_groups = {
'location_poland': 'Osoby mieszkające w Polsce', '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_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(/<p>{census_comparisons}<\/p>(.+?)<p>{\/census_comparisons}<\/p>/gms, mainPlusDetails(census_comparisons, true))
.replace(/{json=([^=}]+)=([^=}]+)}/g, fetchJson) .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>' + '</div>'
; ;
content = content.replace(/{table_of_contents}/g, generateToC(content)); content = content.replace(/{table_of_contents}/g, generateToC(content));