From 3c3c5e190ac602fff271f2ea8c96c248de7e4a0e Mon Sep 17 00:00:00 2001
From: Marie <marie@kaifa.ch>
Date: Thu, 4 Jan 2024 20:42:25 +0100
Subject: [PATCH] upd: add tossface emojis as an option

---
 .gitmodules                                       |  3 +++
 Dockerfile                                        |  1 +
 .../backend/src/server/web/ClientServerService.ts | 15 +++++++++++++++
 .../frontend/src/components/MkAutocomplete.vue    |  4 ++--
 .../frontend/src/components/global/MkEmoji.vue    |  4 ++--
 packages/frontend/src/pages/settings/general.vue  |  1 +
 packages/frontend/src/scripts/emoji-base.ts       | 12 ++++++++++++
 packages/frontend/vite.config.local-dev.ts        |  1 +
 packages/frontend/vite.config.ts                  |  1 +
 tossface-emojis                                   |  1 +
 10 files changed, 39 insertions(+), 4 deletions(-)
 create mode 160000 tossface-emojis

diff --git a/.gitmodules b/.gitmodules
index 225a69a65..92d3a8753 100644
--- a/.gitmodules
+++ b/.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
diff --git a/Dockerfile b/Dockerfile
index 99286b39b..2f2861960 100644
--- a/Dockerfile
+++ b/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
diff --git a/packages/backend/src/server/web/ClientServerService.ts b/packages/backend/src/server/web/ClientServerService.ts
index aa696046e..280bdb20b 100644
--- a/packages/backend/src/server/web/ClientServerService.ts
+++ b/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;
 
diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue
index 1f819cf60..6fd42f1ee 100644
--- a/packages/frontend/src/components/MkAutocomplete.vue
+++ b/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,
diff --git a/packages/frontend/src/components/global/MkEmoji.vue b/packages/frontend/src/components/global/MkEmoji.vue
index b1d62db33..f03bf26fa 100644
--- a/packages/frontend/src/components/global/MkEmoji.vue
+++ b/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(() => {
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 4cbf26ff1..f0644aae8 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/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>
diff --git a/packages/frontend/src/scripts/emoji-base.ts b/packages/frontend/src/scripts/emoji-base.ts
index 46a13462a..62a495c2d 100644
--- a/packages/frontend/src/scripts/emoji-base.ts
+++ b/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`;
+}
diff --git a/packages/frontend/vite.config.local-dev.ts b/packages/frontend/vite.config.local-dev.ts
index 5a6f511c6..41b4561e2 100644
--- a/packages/frontend/vite.config.local-dev.ts
+++ b/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/',
diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts
index ea8c4ced6..58cbeb451 100644
--- a/packages/frontend/vite.config.ts
+++ b/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/',
 			},
 		},
diff --git a/tossface-emojis b/tossface-emojis
new file mode 160000
index 000000000..3c0ac3f7b
--- /dev/null
+++ b/tossface-emojis
@@ -0,0 +1 @@
+Subproject commit 3c0ac3f7bdd794cc334363bf834e58079ca00dd2