Copy public services tab into markdown

package.json

@@ -16,11 +16,13 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@heroicons/vue": "^2.1.1",
+    "@mdx-js/rollup": "^3.0.1",
     "@tailwindcss/typography": "^0.5.10",
     "@types/react-katex": "^3.0.4",
     "autoprefixer": "^10.4.16",
     "date-fns": "^3.3.1",
     "flowbite": "^2.3.0",
+    "github-markdown-css": "^5.5.1",
     "i18next": "^23.10.1",
     "postcss": "^8.4.33",
     "react": "^18.2.0",
@@ -31,6 +33,7 @@
     "react-markdown": "^9.0.1",
     "react-scroll-percentage": "^4.3.2",
     "recoil": "^0.7.7",
+    "remark-gfm": "^4.0.0",
     "tailwindcss": "^3.4.1"
   },
   "devDependencies": {

src/components/Services.tsx

@@ -1,71 +1,25 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
 import { useTranslation } from "react-i18next";
+import Ja from '../contents/services.ja.mdx';
+import En from '../contents/services.en.mdx';
+import ZhCn from '../contents/services.zh-cn.mdx';
+
 
 export default function Services() {
-    const { t } = useTranslation();
+    const { i18n: { language } } = useTranslation();
 
     return (
-        <>
+        <div
-            <div className="rounded-lg w-full">
+            className="prose dark:prose-invert prose-li:mt-0 prose-li:mb-0 prose-h2:mt-4 prose-h2:mb-0 prose-code:before:content-[''] prose-code:after:content-[''] prose-ul:mt-0 prose-ul:mb-0"
-                <h2 className="text-xl font-semibold dark:text-gray-200 mt-2 mb-1 ml-1">
+            style={{
-                    {t("services")}
+                marginBottom: `-5px`
-                </h2>
+            }}
-                <ul className="max-w-md space-y-1 ml-5 mt-3 list-disc list-inside dark:text-gray-400">
+        >
-                    <li>
+            {language === "ja" && <Ja />}
-                        <a className="hover:underline" href="https://soine.site">
+            {language === "en" && <En />}
-                            soine.site <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
+            {language === "zhCN" && <ZhCn />}
-                        </a>
-                    </li>
-                    <li>
-                        <a className="hover:underline" href="https://mstdn.soine.site">
-                            Mastodon {t("instance")}: 添い寝して！ <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-                        </a>
-                    </li>
-                    <li>
-                        <a className="hover:underline" href="https://discord.gg/X6srY7X">
-                            Discord {t("server")} <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-                        </a>
-                    </li>
-                    <li>
-                        <a className="hover:underline" href="https://github.com/yudejp">
-                            GitHub Organization <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-                        </a>
-                    </li>
-                    <li>
-                        <a className="hover:underline" href="https://status.yude.jp/">
-                            {t("service_status")} <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-                        </a>
-                    </li>
-                    <li>
-                        <span>Minecraft {t("multiplayer")} @ <code>yude.jp</code></span>
-                    </li>
-                    <li>
-                        <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>
-                <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/">
-                            The Onion Router <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-                        </a>
-                    </li>
-                    <li>
-                        <a className="hover:underline" href="http://yude.i2p/?i2paddresshelper=idabfrazqbh7upvo2f5hx3ajpqglrwny66qbvcoatfqoq64ifiaq.b32.i2p">
-                            I2P <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-                        </a>
-                    </li>
-                    <li>
-                        <a className="hover:underline" href="gemini://yude.jp">
-                            Gemini <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-                        </a>
-                    </li>
-                </ul>
 
-            </div>
+        </div >
-        </>
     )
 }

src/contents/services.en.mdx

@@ -0,0 +1,25 @@
+## Public services
+
+- [Mastodon instance mstdn.soine.site](https://mstdn.soine.site)
+- Minecraft Multiplayer
+    - Server address: `yude.jp`
+- TeamSpeak 3 server
+    - Server address: `yude.jp`
+- soine.site
+    - [soine.site](https://soine.site)
+    - [soine.site Wiki](https://wiki.soine.site)
+
+## Links
+
+- [GitHub Organization](https://github.com/yudejp)
+- [Discord server](https://github.com/yudejp)
+- [Service status, Failure history](https://status.yude.jp)
+
+## Connectivity
+
+- The Onion Router
+    - `yudejpwxp2cziclocqjfd55ucw2dh6ncswopluh7exwusjlfkvkwhwqd.onion`
+- I2P
+    - `idabfrazqbh7upvo2f5hx3ajpqglrwny66qbvcoatfqoq64ifiaq.b32.i2p`
+- Gemini
+    - `gemini://gemini.yude.jp`

src/contents/services.ja.mdx

@@ -0,0 +1,25 @@
+## 公開サービス
+
+- [Mastodon インスタンス mstdn.soine.site](https://mstdn.soine.site)
+- Minecraft マルチプレイサーバー
+    - サーバー アドレス: `yude.jp`
+- TeamSpeak 3 サーバー
+    - サーバー アドレス: `yude.jp`
+- soine.site 共用サービス
+    - [soine.site トップページ](https://soine.site)
+    - [soine.site Wiki](https://wiki.soine.site)
+
+## リンク
+
+- [GitHub Organization](https://github.com/yudejp)
+- [Discord サーバー](https://github.com/yudejp)
+- [サービス稼働状況・障害発生履歴](https://status.yude.jp)
+
+## 接続性
+
+- The Onion Router
+    - `yudejpwxp2cziclocqjfd55ucw2dh6ncswopluh7exwusjlfkvkwhwqd.onion`
+- I2P
+    - `idabfrazqbh7upvo2f5hx3ajpqglrwny66qbvcoatfqoq64ifiaq.b32.i2p`
+- Gemini
+    - `gemini://gemini.yude.jp`

src/contents/services.zh-cn.mdx

@@ -0,0 +1,25 @@
+## 公共服务
+
+- [乳齿象实例 mstdn.soine.site](https://mstdn.soine.site)
+- Minecraft 多人游戏服务器
+     - 服务器地址：`yude.jp`
+- TeamSpeak 3 服务器
+     - 服务器地址：`yude.jp`
+- soine.site 共享服务
+     - [soine.site 首页](https://soine.site)
+     - [soine.site 维基](https://wiki.soine.site)
+
+## 关联
+
+- [GitHub 组织](https://github.com/yudejp)
+- [Discord 服务器](https://github.com/yudejp)
+- [服务运行状态/故障历史](https://status.yude.jp)
+
+## 连接性
+
+- The Onion Router
+    - `yudejpwxp2cziclocqjfd55ucw2dh6ncswopluh7exwusjlfkvkwhwqd.onion`
+- I2P
+    - `idabfrazqbh7upvo2f5hx3ajpqglrwny66qbvcoatfqoq64ifiaq.b32.i2p`
+- Gemini
+    - `gemini://gemini.yude.jp`

src/locales/en.json

@@ -18,11 +18,6 @@
         "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: ",

src/locales/ja.json

@@ -20,11 +20,6 @@
         "licenses": "資格, 免許",
         "year/month": "{{year}} 年 {{month}} 月",
         "fingerprint": "鍵指紋",
-        "instance": "インスタンス",
-        "server": "サーバー",
-        "service_status": "サービス状況",
-        "multiplayer": "マルチプレイサーバー",
-        "connectivity": "接続性",
         "sent": "送信しました。",
         "message_leave": "言い残したいことは？",
         "sent_error": "送信するときになんらかの問題が発生しました: ",

src/locales/zh-cn.json

@@ -18,11 +18,6 @@
         "licenses": "资格, 执照",
         "year/month": "{{year}} 年 {{month}} 月",
         "fingerprint": "钥匙指纹",
-        "instance": "实例",
-        "server": "服务器",
-        "service_status": "服务状态",
-        "multiplayer": "多人服务器",
-        "connectivity": "连接性",
         "sent": "发送.",
         "message_leave": "你想留下什么?",
         "sent_error": "发送时出现问题: ",

src/main.tsx

@@ -4,6 +4,7 @@ import App from './App.tsx'
 import "./i18n.ts"
 
 import './index.css'
+import 'github-markdown-css';
 import 'katex/dist/katex.min.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

src/mdx.d.ts

@@ -0,0 +1,4 @@
+declare module '*.mdx' {
+    let MDXComponent: (props) => JSX.Element;
+    export default MDXComponent;
+}

vite.config.ts

@@ -2,9 +2,16 @@ import { defineConfig } from 'vite'
 import { resolve } from "path";
 import react from '@vitejs/plugin-react-swc'
 
+import mdx from '@mdx-js/rollup';
+import remarkGfm from 'remark-gfm';
+const mdxOptions = {
+  remarkPlugins: [remarkGfm],
+  rehypePlugins: [],
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), { enforce: 'pre', ...mdx(mdxOptions) }],
   build: {
     sourcemap: true,
     rollupOptions: {