yudejp/yude.jp
1
0
Fork 0
mirror of https://github.com/yudejp/yude.jp.git synced 2025-05-11 14:38:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Support i18n

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
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>

3
package.json
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",

3
src/App.tsx
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>

22
src/components/Chat.tsx
View File

@ -4,11 +4,14 @@ import { RecoilRoot, useRecoilState } from 'recoil'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPaperPlane } from '@fortawesome/free-solid-svg-icons'
import { formatDistance } from 'date-fns'
import { ja } from 'date-fns/locale/ja'
import { ja, enUS, zhCN } from 'date-fns/locale'
import { InlineMath } from 'react-katex';
import Markdown from 'react-markdown';
import { useTranslation } from "react-i18next";
export default function Chat() {
const { t, i18n: { language } } = useTranslation();
const [page, _] = useRecoilState(currentPage);
const [name, setName] = useState("");
const [body, setBody] = useState("");
@ -48,10 +51,10 @@ export default function Chat() {
.then(
async (text) => {
if (text.includes("Success")) {
await showAlert("送信しました。");
await showAlert(t("sent"));
setBody("");
} else {
await showAlert("送信するときになんらかの問題が発生しました。" + text);
await showAlert(t("sent_error") + text);
}
}
)
@ -101,7 +104,7 @@ export default function Chat() {
<div className="text-wrap max-w-xl">
<div className="mb-5">
<label className="block mb-2 text-sm font-medium dark:text-white">
名前{" "}
{t("name")}{" "}
<span className="text-orange-400">*</span>
</label>
<input
@ -116,7 +119,7 @@ export default function Chat() {
</div>
<div className="mb-5">
<label className="block mb-2 text-sm font-medium dark:text-white">
本文{" "}
{t("body")}{" "}
<span className="text-orange-400">*</span>
</label>
<textarea
@ -124,7 +127,7 @@ export default function Chat() {
id="body"
rows={4}
className="font-serif text-2xl w-full block p-2.5 rounded-lg border dark:bg-neutral-900 border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-blue-500 focus:border-blue-500"
placeholder="言い残したいことは？"
placeholder={t("message_leave")}
value={body}
onChange={updateBody}
></textarea>
@ -136,7 +139,7 @@ export default function Chat() {
className={`w-full text-xl dark:text-white hover:text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center border border-2 border-blue-600 hover:bg-blue-700 focus:ring-blue-800${name === "" || body === "" ? " opacity-20" : ""}`}
disabled={name === "" || body === ""}
>
<FontAwesomeIcon icon={faPaperPlane} />{" "}送信
<FontAwesomeIcon icon={faPaperPlane} />{" "}{t("send")}
</button>
</div>
@ -147,9 +150,9 @@ export default function Chat() {
return (
<div key={index} className="p-6 border border-gray-200 rounded-lg shadow border-gray-700 mb-2">
<p className="font-medium opacity-80">
{message.name} さん,{" "}
{message.name},{" "}
{
formatDistance(Date.parse(message.createdAt), new Date(), { addSuffix: true, locale: ja })
formatDistance(Date.parse(message.createdAt), new Date(), { addSuffix: true, locale: (language === "ja" ? ja : language === "en" ? enUS : language === "zhCN" ? zhCN : ja) })
}
</p>
<p className="font-serif text-2xl">
@ -173,4 +176,3 @@ export default function Chat() {
</RecoilRoot>
)
}

10
src/components/Keys.tsx
View File

@ -1,24 +1,27 @@
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} /> から入手できます。
<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>
{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} /> から入手できます。
<a className="underline" href="https://github.com/yude.keys">GitHub</a>&nbsp;<FontAwesomeIcon icon={faArrowUpRightFromSquare} />
</li>
</ul>
@ -26,4 +29,3 @@ export default function Keys() {
</>
)
}

36
src/components/LanguageMenu.tsx Normal file
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>
</>
)
}

66
src/components/Profile.tsx
View File

File diff suppressed because it is too large Load Diff

19
src/components/Services.tsx
View File

@ -1,12 +1,15 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
import { useTranslation } from "react-i18next";
export default function Services() {
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">
サービス
{t("services")}
</h2>
<ul className="max-w-md space-y-1 ml-5 mt-3 list-disc list-inside dark:text-gray-400">
<li>
@ -16,12 +19,12 @@ export default function Services() {
</li>
<li>
<a className="hover:underline" href="https://mstdn.soine.site">
Mastodon インスタンス: 添い寝して！ <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
Mastodon {t("instance")}: 添い寝して！ <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
</a>
</li>
<li>
<a className="hover:underline" href="https://discord.gg/X6srY7X">
Discord サーバー <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
Discord {t("server")} <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
</a>
</li>
<li>
@ -31,20 +34,19 @@ export default function Services() {
</li>
<li>
<a className="hover:underline" href="https://status.yude.jp/">
サービス状況 <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
{t("service_status")} <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
</a>
</li>
<li>
<span>Minecraft マルチプレイサーバ @ <code>yude.jp</code></span>
<span>Minecraft {t("multiplayer")} @ <code>yude.jp</code></span>
</li>
<li>
<span>TeamSpeak 3 サーバ @ <code>yude.jp</code></span>
<span>TeamSpeak 3 {t("server")} @ <code>yude.jp</code></span>
</li>
</ul>
<h2 className="text-xl font-semibold dark:text-gray-200 mt-2 mb-1 ml-1">
接続性
{t("connectivity")}
</h2>
<p className="dark:text-gray-200 ml-3 -mb-1">閲覧にはそれぞれのプロトコルに対応したソフトウェアが必要です。</p>
<ul className="max-w-md space-y-1 ml-5 mt-3 list-disc list-inside dark:text-gray-400">
<li>
<a className="hover:underline" href="http://yudejpwxp2cziclocqjfd55ucw2dh6ncswopluh7exwusjlfkvkwhwqd.onion/">
@ -67,4 +69,3 @@ export default function Services() {
</>
)
}

7
src/components/Theme.tsx
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>
)
}

14
src/components/VerticalMenu.tsx
View File

@ -3,6 +3,7 @@ import { faUser, faStar, faComments } from '@fortawesome/free-regular-svg-icons'
import { faLink, faKey } from '@fortawesome/free-solid-svg-icons'
import { RecoilRoot, atom, useRecoilState } from 'recoil'
import { useTranslation } from "react-i18next";
export enum Pages {
Profile = 0,
@ -20,6 +21,8 @@ export const currentPage = atom({
})
export default function VerticalMenu() {
const { t } = useTranslation();
const [page, setPage] = useRecoilState(currentPage);
const activeColor = " bg-slate-700 text-white"
@ -32,39 +35,38 @@ export default function VerticalMenu() {
onClick={() => { setPage(Pages.Profile) }}
>
<FontAwesomeIcon icon={faUser} />{" "}
<p>プロフィール</p>
<p>{t("profile")}</p>
</li>
<li
className={`w-full px-4 py-2 rounded-lg${page === Pages.Links ? activeColor : ""}`}
onClick={() => { setPage(Pages.Links) }}
>
<FontAwesomeIcon icon={faLink} />{" "}
<p>リンク</p>
<p>{t("links")}</p>
</li>
<li
className={`w-full px-4 py-2 rounded-lg${page === Pages.Keys ? activeColor : ""}`}
onClick={() => { setPage(Pages.Keys) }}
>
<FontAwesomeIcon icon={faKey} />{" "}
<p>公開鍵</p>
<p>{t("public_keys")}</p>
</li>
<li
className={`w-full px-4 py-2 rounded-lg${page === Pages.Services ? activeColor : ""}`}
onClick={() => { setPage(Pages.Services) }}
>
<FontAwesomeIcon icon={faStar} />{" "}
<p>サービス</p>
<p>{t("services")}</p>
</li>
<li
className={`w-full px-4 py-2 rounded-lg${page === Pages.Chat ? activeColor : ""}`}
onClick={() => { setPage(Pages.Chat) }}
>
<FontAwesomeIcon icon={faComments} />{" "}
<p>チャット</p>
<p>{t("chat")}</p>
</li>
</ul>
</div>
</RecoilRoot>
)
}

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": "发送"
}
}

4
src/main.tsx
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>

2
tailwind.config.js
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')
],
}