upd: add tossface emojis as an option

This commit is contained in:
Marie 2024-01-04 20:42:25 +01:00
parent c8a7e27e70
commit 3c3c5e190a
No known key found for this signature in database
GPG key ID: 56569BBE47D2C828
10 changed files with 39 additions and 4 deletions

3
.gitmodules vendored
View file

@ -4,3 +4,6 @@
[submodule "fluent-emojis"]
path = fluent-emojis
url = https://github.com/misskey-dev/emojis.git
[submodule "tossface-emojis"]
path = tossface-emojis
url = https://git.joinsharkey.org/Sharkey/tossface-emojis.git

View file

@ -44,6 +44,7 @@ COPY --from=build /sharkey/packages/megalodon/node_modules ./packages/megalodon/
COPY --from=build /sharkey/packages/misskey-js/built ./packages/misskey-js/built
COPY --from=build /sharkey/packages/misskey-js/node_modules ./packages/misskey-js/node_modules
COPY --from=build /sharkey/fluent-emojis ./fluent-emojis
COPY --from=build /sharkey/tossface-emojis/dist ./tossface-emojis/dist
COPY --from=build /sharkey/sharkey-assets ./packages/frontend/assets
COPY package.json ./package.json

View file

@ -327,6 +327,21 @@ export class ClientServerService {
});
});
fastify.get<{ Params: { path: string } }>('/tossface/:path(.*)', async (request, reply) => {
const path = request.params.path;
if (!path.match(/^[0-9a-f-]+\.svg$/)) {
reply.code(404);
return;
}
reply.header('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
return await reply.sendFile(path, `${_dirname}/../../../../../tossface-emojis/dist`, {
maxAge: ms('30 days'),
});
});
fastify.get<{ Params: { path: string } }>('/twemoji-badge/:path(.*)', async (request, reply) => {
const path = request.params.path;

View file

@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import { markRaw, ref, shallowRef, computed, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import sanitizeHtml from 'sanitize-html';
import contains from '@/scripts/contains.js';
import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base.js';
import { char2twemojiFilePath, char2fluentEmojiFilePath, char2tossfaceFilePath } from '@/scripts/emoji-base.js';
import { acct } from '@/filters/user.js';
import * as os from '@/os.js';
import { defaultStore } from '@/store.js';
@ -68,7 +68,7 @@ const lib = emojilist.filter(x => x.category !== 'flags');
const emojiDb = computed(() => {
//#region Unicode Emoji
const char2path = defaultStore.reactiveState.emojiStyle.value === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
const char2path = defaultStore.reactiveState.emojiStyle.value === 'twemoji' ? char2twemojiFilePath : defaultStore.reactiveState.emojiStyle.value === 'tossface' ? char2tossfaceFilePath : char2fluentEmojiFilePath;
const unicodeEmojiDB: EmojiDef[] = lib.map(x => ({
emoji: x.char,

View file

@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed, inject } from 'vue';
import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base.js';
import { char2twemojiFilePath, char2fluentEmojiFilePath, char2tossfaceFilePath } from '@/scripts/emoji-base.js';
import { defaultStore } from '@/store.js';
import { getEmojiName } from '@/scripts/emojilist.js';
import * as os from '@/os.js';
@ -27,7 +27,7 @@ const props = defineProps<{
const react = inject<((name: string) => void) | null>('react', null);
const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : defaultStore.reactiveState.emojiStyle.value === 'tossface' ? char2tossfaceFilePath : char2fluentEmojiFilePath;
const useOsNativeEmojis = computed(() => defaultStore.state.emojiStyle === 'native');
const url = computed(() => {

View file

@ -146,6 +146,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<option value="native">{{ i18n.ts.native }}</option>
<option value="fluentEmoji">Fluent Emoji</option>
<option value="twemoji">Twemoji</option>
<option value="tossface">Tossface</option>
</MkRadios>
<div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
</div>

View file

@ -5,6 +5,7 @@
const twemojiSvgBase = '/twemoji';
const fluentEmojiPngBase = '/fluent-emoji';
const tossfaceSvgBase = '/tossface';
export function char2twemojiFilePath(char: string): string {
let codes = Array.from(char, x => x.codePointAt(0)?.toString(16));
@ -23,3 +24,14 @@ export function char2fluentEmojiFilePath(char: string): string {
const fileName = codes.map(x => x!.padStart(4, '0')).join('-');
return `${fluentEmojiPngBase}/${fileName}.png`;
}
export function char2tossfaceFilePath(char: string): string {
let codes = Array.from(char, x => x.codePointAt(0)?.toString(16));
// Twemoji is the only emoji font which still supports the shibuya 50 emoji to this day
if (codes[0]?.startsWith('e50a')) return char2twemojiFilePath(char);
// Tossface does not use the fe0f modifier
codes = codes.filter(x => x !== 'fe0f');
codes = codes.filter(x => x && x.length);
const fileName = codes.join('-');
return `${tossfaceSvgBase}/${fileName}.svg`;
}

View file

@ -27,6 +27,7 @@ const devConfig = {
'/files': 'http://localhost:3000/',
'/twemoji': 'http://localhost:3000/',
'/fluent-emoji': 'http://localhost:3000/',
'/tossface': 'http://localhost:3000/',
'/sw.js': 'http://localhost:3000/',
'/streaming': {
target: 'ws://localhost:3000/',

View file

@ -71,6 +71,7 @@ export function getConfig(): UserConfig {
'/client-assets/': __dirname + '/assets/',
'/static-assets/': __dirname + '/../backend/assets/',
'/fluent-emojis/': __dirname + '/../../fluent-emojis/dist/',
'/tossface/': __dirname + '/../../tossface-emojis/dist/',
'/fluent-emoji/': __dirname + '/../../fluent-emojis/dist/',
},
},

1
tossface-emojis Submodule

@ -0,0 +1 @@
Subproject commit 3c0ac3f7bdd794cc334363bf834e58079ca00dd2