use Twemoji for profiles and emojiself
This commit is contained in:
Avris
parent
095da6b8c3
commit
b4f9313fce
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<Twemoji>
|
||||
<span>
|
||||
<span v-for="part in example[(example.isHonorific ? pronoun.isPluralHonorific(counter) : pronoun.isPlural(counter)) ? 'pluralParts' : 'singularParts']">
|
||||
<strong v-if="part.variable"><Spelling escape :text="pronoun.getMorpheme(part.str, counter)"/></strong>
|
||||
|
|
@ -16,6 +17,7 @@
|
|||
</a>
|
||||
</template>
|
||||
</span>
|
||||
</Twemoji>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<span class="flag-wrapper">
|
||||
<a v-if="link" :href="`/${config.nouns.route}/${config.terminology.route}#${link.toLowerCase()}`" :title="alt">
|
||||
<img :src="img" :alt="name" class="flag-mini rounded"/>
|
||||
<Spelling escape :text="name"/><sup v-if="custom" class="text-muted"><small><Icon v="user"/></small></sup>
|
||||
<Twemoji><Spelling escape :text="name"/><sup v-if="custom" class="text-muted"><small><Icon v="user"/></small></sup></Twemoji>
|
||||
</a>
|
||||
<span v-else :title="alt">
|
||||
<img :src="img" :alt="name" class="flag-mini rounded"/>
|
||||
<Spelling escape :text="name"/><sup v-if="custom" class="text-muted"><small><Icon v="user"/></small></sup>
|
||||
<Twemoji><Spelling escape :text="name"/><sup v-if="custom" class="text-muted"><small><Icon v="user"/></small></sup></Twemoji>
|
||||
</span>
|
||||
<span class="flag-preview bg-white rouded p-2 border">
|
||||
<img :src="img" :alt="name" class="rounded"/>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,10 @@
|
|||
</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="small">Using a gradient from <a href="https://www.gradientmagic.com/" target="_blank" rel="noopener">gradientmagic.com</a></p>
|
||||
<p class="small">
|
||||
Using <a href="https://www.gradientmagic.com/" target="_blank" rel="noopener">gradientmagic.com</a>
|
||||
and <a href="https://twemoji.twitter.com/" target="_blank" rel="noopener">Twemoji</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="my-2">
|
||||
<Share/>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<Twemoji>
|
||||
<span>
|
||||
<strong v-if="opinion === 1">
|
||||
<Tooltip :text="$t('profile.opinion.yes')">
|
||||
|
|
@ -36,6 +37,7 @@
|
|||
<span v-else><Spelling escape :text="word"/></span>
|
||||
</span>
|
||||
</span>
|
||||
</Twemoji>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<section class="row">
|
||||
<div v-if="hasDescriptionColumn" :class="['col-12', manyFlagsLayout ? '' : 'col-lg-6']">
|
||||
<p v-for="line in profile.description.split('\n')" class="mb-1">
|
||||
<Spelling escape :text="line"/>
|
||||
<Twemoji><Spelling escape :text="line"/></Twemoji>
|
||||
</p>
|
||||
<p v-if="profile.age">
|
||||
<Icon v="birthday-cake"/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<span>
|
||||
<span ref="source" v-show="false">
|
||||
<slot ref="source"></slot>
|
||||
</span>
|
||||
<span ref="target"></span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.emoji {
|
||||
height: 1em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -43,6 +43,7 @@
|
|||
"sqlite": "^4.0.12",
|
||||
"sqlite3": "^5.0.0",
|
||||
"suml-loader": "^0.1.1",
|
||||
"twemoji": "^13.1.0",
|
||||
"twitter": "^1.7.1",
|
||||
"ulid": "^2.3.0",
|
||||
"uuid": "^8.3.2",
|
||||
|
|
|
|||
|
|
@ -17,14 +17,16 @@
|
|||
<div class="alert alert-primary">
|
||||
<h2 class="text-center mb-0">
|
||||
<template v-if="nameOptions.length === 1">
|
||||
<strong>{{ selectedPronoun.name(glue) }}</strong><small v-if="selectedPronoun.smallForm">/{{selectedPronoun.morphemes[selectedPronoun.smallForm]}}</small>
|
||||
<Twemoji><strong>{{ selectedPronoun.name(glue) }}</strong><small v-if="selectedPronoun.smallForm">/{{selectedPronoun.morphemes[selectedPronoun.smallForm]}}</small></Twemoji>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-for="(nameOption, i) in nameOptions">
|
||||
<nuxt-link :to="'/' + addSlash(nameOption)">
|
||||
<Twemoji>
|
||||
<strong>
|
||||
<Spelling :text="nameOption" escape/>
|
||||
</strong>
|
||||
</Twemoji>
|
||||
</nuxt-link>
|
||||
<span v-if="i < nameOptions.length - 1"><Spelling :text="glue"/></span>
|
||||
</template>
|
||||
|
|
@ -32,9 +34,9 @@
|
|||
</h2>
|
||||
<p class="h6 small text-center mb-0 mt-2" v-if="selectedPronoun.description">
|
||||
<em>
|
||||
(<LinkedText escape :text="Array.isArray(selectedPronoun.description)
|
||||
(<Twemoji><LinkedText escape :text="Array.isArray(selectedPronoun.description)
|
||||
? ($t('pronouns.alt.header') + ': ' + selectedPronoun.description.join(glue))
|
||||
: selectedPronoun.description"/>)
|
||||
: selectedPronoun.description"/></Twemoji>)
|
||||
</em>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
26
yarn.lock
26
yarn.lock
|
|
@ -4472,7 +4472,7 @@ fs-constants@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
|
||||
integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
|
||||
|
||||
fs-extra@^8.1.0:
|
||||
fs-extra@^8.0.1, fs-extra@^8.1.0:
|
||||
version "8.1.0"
|
||||
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
|
||||
integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
|
||||
|
|
@ -5722,6 +5722,15 @@ jsonfile@^4.0.0:
|
|||
optionalDependencies:
|
||||
graceful-fs "^4.1.6"
|
||||
|
||||
jsonfile@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-5.0.0.tgz#e6b718f73da420d612823996fdf14a03f6ff6922"
|
||||
integrity sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==
|
||||
dependencies:
|
||||
universalify "^0.1.2"
|
||||
optionalDependencies:
|
||||
graceful-fs "^4.1.6"
|
||||
|
||||
jsonfile@^6.0.1:
|
||||
version "6.1.0"
|
||||
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
|
||||
|
|
@ -9813,6 +9822,21 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
|
|||
resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
|
||||
integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
|
||||
|
||||
twemoji-parser@13.1.0:
|
||||
version "13.1.0"
|
||||
resolved "https://registry.yarnpkg.com/twemoji-parser/-/twemoji-parser-13.1.0.tgz#65e7e449c59258791b22ac0b37077349127e3ea4"
|
||||
integrity sha512-AQOzLJpYlpWMy8n+0ATyKKZzWlZBJN+G0C+5lhX7Ftc2PeEVdUU/7ns2Pn2vVje26AIZ/OHwFoUbdv6YYD/wGg==
|
||||
|
||||
twemoji@^13.1.0:
|
||||
version "13.1.0"
|
||||
resolved "https://registry.yarnpkg.com/twemoji/-/twemoji-13.1.0.tgz#65bb71e966dae56f0d42c30176f04cbdae109913"
|
||||
integrity sha512-e3fZRl2S9UQQdBFLYXtTBT6o4vidJMnpWUAhJA+yLGR+kaUTZAt3PixC0cGvvxWSuq2MSz/o0rJraOXrWw/4Ew==
|
||||
dependencies:
|
||||
fs-extra "^8.0.1"
|
||||
jsonfile "^5.0.0"
|
||||
twemoji-parser "13.1.0"
|
||||
universalify "^0.1.2"
|
||||
|
||||
twitter@^1.7.1:
|
||||
version "1.7.1"
|
||||
resolved "https://registry.yarnpkg.com/twitter/-/twitter-1.7.1.tgz#0762378f1dc1c050e48f666aca904e24b1a962f4"
|
||||
|
|
|
|||
Reference in New Issue