mirror of
https://github.com/yudejp/yude.jp.git
synced 2025-05-09 13:38:41 +00:00
Support i18n
This commit is contained in:
parent
e36deac343
commit
0e6d8d2bc8
@ -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>
|
||||
|
@ -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",
|
||||
|
@ -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
@ -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> <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> <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> <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> <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
36
src/components/LanguageMenu.tsx
Normal file
36
src/components/LanguageMenu.tsx
Normal 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
@ -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
14
src/i18n.ts
Normal 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
33
src/locales/en.json
Normal 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
35
src/locales/ja.json
Normal 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
33
src/locales/zh-cn.json
Normal 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": "发送"
|
||||
}
|
||||
}
|
@ -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>
|
||||
|
@ -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')
|
||||
],
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user