upd: add tossface emojis as an option

.gitmodules

@@ -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

Dockerfile

@@ -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

packages/backend/src/server/web/ClientServerService.ts

@@ -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;
 

packages/frontend/src/components/MkAutocomplete.vue

@@ -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,

packages/frontend/src/components/global/MkEmoji.vue

@@ -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(() => {

packages/frontend/src/pages/settings/general.vue

@@ -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>

packages/frontend/src/scripts/emoji-base.ts

@@ -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`;
+}

packages/frontend/vite.config.local-dev.ts

@@ -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/',

packages/frontend/vite.config.ts

@@ -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/',
 			},
 		},

tossface-emojis

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