Use Twemoji

This commit is contained in:
Acid Chicken (硫酸鶏) 2018-11-05 11:19:40 +09:00
parent 4e7fbd8967
commit 0963e6d6e1
6 changed files with 98 additions and 25 deletions

View file

@ -40,18 +40,20 @@ const lib = Object.entries(emojilib.lib).filter((x: any) => {
}); });
const emjdb: EmojiDef[] = lib.map((x: any) => ({ const emjdb: EmojiDef[] = lib.map((x: any) => ({
emoji: x[1].char, emoji: `:${x[0]}:`,
name: x[0], name: x[0],
aliasOf: null aliasOf: null,
url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg`
})); }));
lib.forEach((x: any) => { lib.forEach((x: any) => {
if (x[1].keywords) { if (x[1].keywords) {
x[1].keywords.forEach(k => { x[1].keywords.forEach(k => {
emjdb.push({ emjdb.push({
emoji: x[1].char, emoji: `:${x[0]}:`,
name: k, name: k,
aliasOf: x[0] aliasOf: x[0],
url: `https://twemoji.maxcdn.com/2/svg/${x[1].char.codePointAt(0).toString(16)}.svg`
}); });
}); });
} }

View file

@ -0,0 +1,42 @@
<template>
<img class="mk-emoji" :src="url" :alt="alt || name" :title="name">
</template>
<script lang="ts">
import Vue from 'vue';
import { lib } from 'emojilib';
export default Vue.extend({
props: ['emoji'],
data() {
return {
url: null,
alt: null,
name: null
}
},
mounted() {
this.$nextTick(() => this.exec());
},
methods: {
exec() {
const { emoji } = this;
this.name = emoji;
(this as any).api('meta').then(meta =>
this.url = meta && meta.emojis ? meta.emojis.find(e => e.name === emoji || e.aliases && e.aliases.includes(emoji)).url : null);
if (!this.url) {
const { char } = lib[emoji] || { char: null };
if (char) {
this.url = `https://twemoji.maxcdn.com/2/svg/${char.codePointAt(0).toString(16)}.svg`;
this.alt = char;
}
}
}
}
});
</script>
<style lang="stylus" scoped>
.mk-emoji
height 2.5em
vertical-align middle
</style>

View file

@ -39,6 +39,7 @@ import urlPreview from './url-preview.vue';
import twitterSetting from './twitter-setting.vue'; import twitterSetting from './twitter-setting.vue';
import githubSetting from './github-setting.vue'; import githubSetting from './github-setting.vue';
import fileTypeIcon from './file-type-icon.vue'; import fileTypeIcon from './file-type-icon.vue';
import emoji from './emoji.vue';
import Reversi from './games/reversi/reversi.vue'; import Reversi from './games/reversi/reversi.vue';
import welcomeTimeline from './welcome-timeline.vue'; import welcomeTimeline from './welcome-timeline.vue';
import uiInput from './ui/input.vue'; import uiInput from './ui/input.vue';
@ -93,6 +94,7 @@ Vue.component('mk-url-preview', urlPreview);
Vue.component('mk-twitter-setting', twitterSetting); Vue.component('mk-twitter-setting', twitterSetting);
Vue.component('mk-github-setting', githubSetting); Vue.component('mk-github-setting', githubSetting);
Vue.component('mk-file-type-icon', fileTypeIcon); Vue.component('mk-file-type-icon', fileTypeIcon);
Vue.component('mk-emoji', emoji);
Vue.component('mk-reversi', Reversi); Vue.component('mk-reversi', Reversi);
Vue.component('mk-welcome-timeline', welcomeTimeline); Vue.component('mk-welcome-timeline', welcomeTimeline);
Vue.component('ui-input', uiInput); Vue.component('ui-input', uiInput);

View file

@ -188,24 +188,10 @@ export default Vue.component('misskey-flavored-markdown', {
} }
case 'emoji': { case 'emoji': {
//#region カスタム絵文字 const { emoji } = token;
if (this.customEmojis != null) { return [createElement('mk-emoji', {
const customEmoji = this.customEmojis.find(e => e.name == token.emoji || (e.aliases || []).includes(token.emoji)); attrs: { emoji }
if (customEmoji) { })];
return [createElement('img', {
attrs: {
src: customEmoji.url,
alt: token.emoji,
title: token.emoji,
style: 'height: 2.5em; vertical-align: middle;'
}
})];
}
}
//#endregion
const emoji = emojilib.lib[token.emoji];
return [createElement('span', emoji ? emoji.char : token.content)];
} }
case 'search': { case 'search': {

View file

@ -0,0 +1,35 @@
export type IMastodonEmoji = {
shortcode: string,
url: string,
static_url: string,
visible_in_picker: boolean
};
export async function toMastodonEmojis(emoji: any): Promise<IMastodonEmoji[]> {
return [{
shortcode: emoji.name,
url: emoji.url,
static_url: emoji.url, // TODO: Implement ensuring static emoji
visible_in_picker: true
}, ...(emoji.aliases as string[] || []).map(x => ({
shortcode: x,
url: emoji.url,
static_url: emoji.url,
visible_in_picker: true
}))];
}
export function toMisskeyEmojiSync(emoji: IMastodonEmoji) {
return {
name: emoji.shortcode,
url: emoji.url
};
}
export function toMisskeyEmojiWithAliasesSync(emoji: IMastodonEmoji, ...aliases: string[]) {
return {
name: emoji.shortcode,
aliases,
url: emoji.url
};
}

View file

@ -5,17 +5,18 @@ import config from '../../config';
import Meta from '../../models/meta'; import Meta from '../../models/meta';
import { ObjectID } from 'bson'; import { ObjectID } from 'bson';
import Emoji from '../../models/emoji'; import Emoji from '../../models/emoji';
import { toMastodonEmojis } from '../../models/mastodon/emoji';
const pkg = require('../../../package.json'); const pkg = require('../../../package.json');
// Init router // Init router
const router = new Router(); const router = new Router();
router.get('/v1/custom_emojis', async ctx => ctx.body = router.get('/v1/custom_emojis', async ctx => ctx.body =
await Emoji.find({ host: null }, { (await Emoji.find({ host: null }, {
fields: { fields: {
_id: false _id: false
} }
})); })).map(toMastodonEmojis));
router.get('/v1/instance', async ctx => { // TODO: This is a temporary implementation. Consider creating helper methods! router.get('/v1/instance', async ctx => { // TODO: This is a temporary implementation. Consider creating helper methods!
const meta = await Meta.findOne() || {}; const meta = await Meta.findOne() || {};
@ -40,6 +41,11 @@ router.get('/v1/instance', async ctx => { // TODO: This is a temporary implement
notesCount: 0 notesCount: 0
}; };
const acct = maintainer.host ? `${maintainer.username}@${maintainer.host}` : maintainer.username; const acct = maintainer.host ? `${maintainer.username}@${maintainer.host}` : maintainer.username;
const emojis = (await Emoji.find({ host: null }, {
fields: {
_id: false
}
})).map(toMastodonEmojis);
ctx.body = { ctx.body = {
uri: config.hostname, uri: config.hostname,
@ -79,7 +85,7 @@ router.get('/v1/instance', async ctx => { // TODO: This is a temporary implement
followers_count: maintainer.followersCount, followers_count: maintainer.followersCount,
following_count: maintainer.followingCount, following_count: maintainer.followingCount,
statuses_count: maintainer.notesCount, statuses_count: maintainer.notesCount,
emojis: [], emojis: emojis,
moved: null, moved: null,
fields: null fields: null
} }