Support i18n

This commit is contained in:
Sumire Isshiki 2024-03-25 04:10:17 +00:00
parent e36deac343
commit 0e6d8d2bc8
16 changed files with 435 additions and 261 deletions

View File

@ -15,5 +15,6 @@
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
</body>
</html>

View File

@ -20,10 +20,13 @@
"@types/react-katex": "^3.0.4",
"autoprefixer": "^10.4.16",
"date-fns": "^3.3.1",
"flowbite": "^2.3.0",
"i18next": "^23.10.1",
"postcss": "^8.4.33",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-fast-marquee": "^1.6.4",
"react-i18next": "^14.1.0",
"react-katex": "^3.0.1",
"react-markdown": "^9.0.1",
"react-scroll-percentage": "^4.3.2",

View File

@ -4,10 +4,12 @@ import Mutuals from "./components/Mutuals"
import Card from "./components/Card"
import VerticalMenu from "./components/VerticalMenu"
import HorizontalMenu from "./components/HorizontalMenu"
import LanguageMenu from "./components/LanguageMenu"
import ContentRenderer from "./components/ContentRenderer"
import Footer from "./components/Footer"
import { ThemeProvider, ThemeSwitcher } from "./components/Theme"
import { useState, useEffect } from 'react';
export default function App() {
@ -82,6 +84,7 @@ export default function App() {
</div>
<div className="fixed top-5 right-5 text-3xl dark:text-white">
<ThemeSwitcher />
<LanguageMenu />
</div>
</>
</ThemeProvider>

File diff suppressed because it is too large Load Diff

View File

@ -1,29 +1,31 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
import { useTranslation } from "react-i18next";
export default function Keys() {
const { t } = useTranslation();
return (
<>
<div className="rounded-lg w-full">
<h2 className="text-xl font-semibold dark:text-gray-200 mt-2 mb-1 ml-1">GNU Privacy Guard</h2>
<ul className="max-w-md space-y-1 list-disc list-inside dark:text-gray-300 ml-5">
<li>
<a className="underline" href="https://github.com/yude.gpg">GitHub</a>&nbsp;<FontAwesomeIcon icon={faArrowUpRightFromSquare} />
</li>
<li>
: <code>3745 F270 DB4E 8975 6B07 62BE EB0F E5D9 25C4 A968</code>
</li>
</ul>
<div className="rounded-lg w-full">
<h2 className="text-xl font-semibold dark:text-gray-200 mt-2 mb-1 ml-1">GNU Privacy Guard</h2>
<ul className="max-w-md space-y-1 list-disc list-inside dark:text-gray-300 ml-5">
<li>
<a className="underline" href="https://github.com/yude.gpg">GitHub</a>&nbsp;<FontAwesomeIcon icon={faArrowUpRightFromSquare} />
</li>
<li>
{t("fingerprint")}: <code>3745 F270 DB4E 8975 6B07 62BE EB0F E5D9 25C4 A968</code>
</li>
</ul>
<h2 className="text-xl font-semibold dark:text-gray-200 mt-2 mb-1 ml-1">The Secure Shell (RFC 4716)</h2>
<ul className="max-w-md space-y-1 list-disc list-inside dark:text-gray-300 ml-5">
<li>
<a className="underline" href="https://github.com/yude.keys">GitHub</a>&nbsp;<FontAwesomeIcon icon={faArrowUpRightFromSquare} />
</li>
</ul>
</div>
<h2 className="text-xl font-semibold dark:text-gray-200 mt-2 mb-1 ml-1">The Secure Shell (RFC 4716)</h2>
<ul className="max-w-md space-y-1 list-disc list-inside dark:text-gray-300 ml-5">
<li>
<a className="underline" href="https://github.com/yude.keys">GitHub</a>&nbsp;<FontAwesomeIcon icon={faArrowUpRightFromSquare} />
</li>
</ul>
</div>
</>
)
}
}

View File

@ -0,0 +1,36 @@
import { useTranslation } from "react-i18next";
export default function LanguageMenu() {
const { t, i18n: { changeLanguage, language } } = useTranslation();
return (
<>
<button
type="button"
className="btn btn-secondary drop-shadow-md mr-3"
id="dropdownDefaultButton"
data-dropdown-toggle="dropdown"
aria-label="言語の切り替え"
>
{language === "ja" && "🇯🇵"}
{language === "en" && "🇺🇸"}
{language === "zhCN" && "🇨🇳"}
</button>
<div id="dropdown" className="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
<ul className="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
<li onClick={() => { changeLanguage("ja") }}>
<a href="#" className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">🇯🇵 </a>
</li>
<li onClick={() => { changeLanguage("en") }}>
<a href="#" className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">🇺🇸 English (US)</a>
</li>
<li onClick={() => { changeLanguage("zhCN") }}>
<a href="#" className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">🇨🇳 </a>
</li>
</ul>
</div>
</>
)
}

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -37,15 +37,14 @@ export const ThemeSwitcher = () => {
return (
<button
type="button"
className="btn btn-secondary drop-shadow-md"
className="btn btn-secondary drop-shadow-md mr-3"
onClick={toggleTheme}
aria-label="テーマの切り替え"
>
{theme === "light" ? (
<FontAwesomeIcon icon={faMoon} />
"🌙"
) : (
<FontAwesomeIcon icon={faSun} />
)}
"🌞")}
</button>
)
}

File diff suppressed because it is too large Load Diff

14
src/i18n.ts Normal file
View File

@ -0,0 +1,14 @@
import i18n from "i18next";
import { useTranslation, initReactI18next } from "react-i18next";
import ja from './locales/ja.json'
import en from './locales/en.json'
import zhCN from './locales/zh-cn.json'
i18n.use(initReactI18next).init({
resources: {
en: { ...en },
ja: { ...ja },
zhCN: { ...zhCN },
},
lng: "ja",
});

33
src/locales/en.json Normal file
View File

@ -0,0 +1,33 @@
{
"translation": {
"profile": "Profile",
"links": "Links",
"public_keys": "Public keys",
"services": "Services",
"chat": "Chat",
"present": "Present",
"affiliation": "Affiliation",
"hcu": "Hiroshima City University",
"faculty": "Department of Computer and Network Engineering, Faculty of Information Sciences",
"degree": "Bachelor of Information Engineering",
"past_activities": "Past activities",
"basic_info": "Basic information",
"2001/11/19": "November 19th, 2001",
"birth": "({{age}} y/o)",
"location": "Chiba, Japan",
"licenses": "Qualifications, Licenses",
"year/month": "{{month}}, {{year}}",
"fingerprint": "Key fingerprint",
"instance": "instance",
"server": "server",
"service_status": "Service status",
"multiplayer": "multiplayer",
"connectivity": "Connectivity",
"sent": "Successfully sent.",
"message_leave": "Do you have any last words?",
"sent_error": "Error occured while sending your message: ",
"name": "Name",
"body": "Message body",
"send": "Send"
}
}

35
src/locales/ja.json Normal file
View File

@ -0,0 +1,35 @@
{
"translation": {
"profile": "プロフィール",
"links": "リンク",
"public_keys": "公開鍵",
"services": "サービス",
"chat": "チャット",
"affiliation": "所属",
"2020/4": "2020 年 4 月",
"2024/3": "2024 年 3 月",
"present": "現在",
"hcu": "広島市立大学",
"faculty": "情報科学部 情報工学科",
"degree": "学士 (情報工学)",
"past_activities": "過去の活動",
"basic_info": "基本情報",
"2001/11/19": "2001 年 11 月 19 日",
"birth": "生まれ ({{age}} 歳)",
"location": "日本, 千葉県",
"licenses": "資格, 免許",
"year/month": "{{year}} 年 {{month}} 月",
"fingerprint": "鍵指紋",
"instance": "インスタンス",
"server": "サーバー",
"service_status": "サービス状況",
"multiplayer": "マルチプレイサーバー",
"connectivity": "接続性",
"sent": "送信しました。",
"message_leave": "言い残したいことは?",
"sent_error": "送信するときになんらかの問題が発生しました: ",
"name": "名前",
"body": "本文",
"send": "送信"
}
}

33
src/locales/zh-cn.json Normal file
View File

@ -0,0 +1,33 @@
{
"translation": {
"profile": "关于我",
"links": "超级链接",
"public_keys": "公钥",
"services": "服务",
"chat": "聊天",
"affiliation": "所属",
"present": "现在",
"hcu": "广岛市立大学",
"faculty": "情报科学部 信息工程系",
"degree": "学士(信息工程)",
"past_activities": "过去的活动",
"basic_info": "基本信息",
"2001/11/19": "2001 年 11 月 19 日",
"birth": "出生 ({{age}} 岁)",
"location": "日本, 千叶县",
"licenses": "资格, 执照",
"year/month": "{{year}} 年 {{month}} 月",
"fingerprint": "钥匙指纹",
"instance": "实例",
"server": "服务器",
"service_status": "服务状态",
"multiplayer": "多人服务器",
"connectivity": "连接性",
"sent": "发送.",
"message_leave": "你想留下什么?",
"sent_error": "发送时出现问题: ",
"name": "句柄名称",
"body": "文本",
"send": "发送"
}
}

View File

@ -1,8 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import "./i18n.ts"
import './index.css'
import 'katex/dist/katex.min.css';
import 'katex/dist/katex.min.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>

View File

@ -4,11 +4,13 @@ export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/flowbite/**/*.js",
],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/typography'),
require('flowbite/plugin')
],
}