fix(frontend): use Fluent Emoji instead of Twemoji (broken)

package.json

@@ -36,6 +36,7 @@
 		"css-loader": "^6.2.0",
 		"dayjs": "^1.10.7",
 		"deepmerge": "^4.2.2",
+		"fluent-emoji": "^0.1.2",
 		"i18next": "^20.6.1",
 		"i18next-browser-languagedetector": "^6.1.2",
 		"insert-text-at-cursor": "^0.3.0",
@@ -55,6 +56,7 @@
 		"pug": "^3.0.0",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
+		"react-fluentui-emoji": "^0.0.7",
 		"react-i18next": "^11.12.0",
 		"react-image-crop": "^9.0.5",
 		"react-markdown": "^8.0.0",

src/app.ts

@@ -3,7 +3,7 @@ import 'reflect-metadata';
 import axios from 'axios';
 
 import { initDb } from './backend/services/db.js';
-import {config} from './config.js';
+import { config } from './config.js';
 
 export const ua = `Mozilla/5.0 MisskeyTools +https://github.com/LycheeBridge/tools Node/${process.version} ${config.uaExtra ?? ''}`;
 

src/backend/views/frontend.pug

@@ -12,7 +12,7 @@ html
         meta(property="og:site_name" content="Misskey Tools with LycheeBridge")
         meta(property="og:description" content=desc)
         meta(property="og:type" content="website")
-        meta(property="og:image" content="https://t.psec.dev/assets/misskey.png")
+        meta(property="og:image" content="/assets/misskey.png")
         link(rel="icon", href="/assets/lcb.png", type="image/png")
         link(rel="preload", href="/assets/otadesign_rounded.woff")
         link(rel="preload", href="/assets/otadesign_rounded.woff2")
@@ -21,7 +21,7 @@ html
         link(rel="stylesheet", href="/assets/style.css")
         script(src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js" crossorigin="anonymous")
     body
-        #app: .loading 불러오는 중입니다...
+        #app: .loading 잠시만 기다려주세요...
 
         if token
             script.

src/frontend/pages/index.session.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import { useGetScoreQuery, useGetSessionQuery } from '../services/session';
 import { useAnnouncements } from '../hooks/useAnnouncements';
 import { Link } from 'react-router-dom';
-import { config } from '../../config.js';
 
 export const IndexSessionPage: React.VFC = () => {
   const {t} = useTranslation();
@@ -63,9 +62,9 @@ export const IndexSessionPage: React.VFC = () => {
           <h2><i className="fas fa-circle-question"></i> {t('_developerInfo.title')}</h2>
           <p>{t('_developerInfo.description')}</p>
           <div className="menu large">
-            <a className="item" href={`https://${config.admin.host}/@${config.admin.username}`} target="_blank" rel="noopener noreferrer">
+            <a className="item" href="https://psec.dev/@Pathfinder" target="_blank" rel="noopener noreferrer">
               <i className="icon fas fa-at"></i>
-              @{config.admin.username}@{config.admin.host}
+              @Pathfinder@psec.dev
             </a>
           </div>
         </section>

src/frontend/pages/index.welcome.tsx

@@ -6,7 +6,7 @@ import { LoginForm } from '../components/LoginForm';
 import styled from 'styled-components';
 import { useSelector } from '../store';
 import { IsMobileProp } from '../misc/is-mobile-prop';
-import Twemoji from 'react-twemoji';
+import { IconMThumbsUp, IconMHeartSuit, IconMGrinningFaceWithSmilingEyes, IconMPartyPopper, IconMCustard } from 'react-fluentui-emoji/lib/modern';
 import { useAnnouncements } from '../hooks/useAnnouncements';
 
 const Hero = styled.div<IsMobileProp>`
@@ -34,9 +34,7 @@ const Hero = styled.div<IsMobileProp>`
     padding: var(--margin);
     border-radius: var(--radius);
     background: var(--black-50);
-    backdrop-filter: blur(4px) brightness(120%);
-    z-index: 1000;
-    @media screen and (max-width: 800px) {
+    backdrop-filter: blur(4px) brightness(120%);IconMCustard
       display: none;
     }
   }
@@ -100,11 +98,9 @@ export const IndexWelcomePage: React.VFC = () => {
           <div className="rect"></div>
         </div>
       </Hero>
-      <Twemoji options={{className: 'twemoji'}}>
       <div className="py-4 text-125 text-center">
-          👍&emsp;❤&emsp;😆&emsp;🎉&emsp;🍮
+        <IconMThumbsUp/>&emsp;<IconMHeartSuit/>&emsp;<IconMGrinningFaceWithSmilingEyes/>&emsp;<IconMPartyPopper/>&emsp;<IconMCustard/>
       </div>
-      </Twemoji>
       <article className="xarticle vstack pa-2">
         <header>
           <h2>{t('_welcome.title')}</h2>