Merge Keys and Links into Identifier tab

2025-05-11 14:38:41 +00:00 · 2024-05-25 10:09:42 +09:00 · 2024-05-25 10:09:42 +09:00 · f4291f6dc0
commit f4291f6dc0
parent fad638d05a
12 changed files with 83 additions and 70 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -8,7 +8,7 @@ import LanguageMenu from "./components/LanguageMenu"
 import ContentRenderer from "./components/ContentRenderer"
 import Footer from "./components/Footer"
 import { ThemeProvider, ThemeSwitcher } from "./components/Theme"
-
+import Weather from "./components/Weather"

 import { useState, useEffect } from 'react';

--- a/src/components/ContentRenderer.tsx
+++ b/src/components/ContentRenderer.tsx
@ -1,8 +1,7 @@
 import { useRecoilState } from 'recoil'

 import Profile from "./Profile"
-import Links from "./Links"
-import Keys from "./Keys"
+import Identifier from "./Identifier"
 import Spotify from "./Spotify"
 import Services from "./Services"
 import Chat from "./Chat"
@ -13,11 +12,10 @@ export default function ContentRenderer() {
    const [page, _] = useRecoilState(currentPage);
    return (
        <>
-            { page === Pages.Profile && <><Profile /><Spotify /></> }
-            { page === Pages.Links && <Links /> }
-            { page === Pages.Keys && <Keys /> }
-            { page === Pages.Services && <Services /> }
-            { page === Pages.Chat && <Chat /> }
+            {page === Pages.Profile && <><Profile /><Spotify /></>}
+            {page === Pages.Identifier && <Identifier />}
+            {page === Pages.Services && <Services />}
+            {page === Pages.Chat && <Chat />}
        </>
    )
 }
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@ -1,9 +1,14 @@
+import Weather from "./Weather"
+
 export default function Footer() {
    return (
        <div className="text-center text-gray-500 mb-5">
            <img alt="yude.jp banner" src="./banner_new.png" className="h-12 inline" />
            <img alt="happybusy" src="./busy_banner.webp" className="h-12 inline" />
            <img alt="Page view counter" src="https://moe-counter-cf.yude.workers.dev/yude.jp:home" className="h-20 mx-auto" />
+            <div>
+                <Weather />
+            </div>
            <p className="mt-5">
                <a href="https://github.com/yudejp/yude.jp">
                    &copy; 2024 yude
@ -12,4 +17,3 @@ export default function Footer() {
        </div>
    )
 }
-  
--- a/src/components/HorizontalMenu.tsx
+++ b/src/components/HorizontalMenu.tsx
@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser, faStar, faComments } from '@fortawesome/free-regular-svg-icons'
-import { faLink, faKey } from '@fortawesome/free-solid-svg-icons'
+import { faPassport } from "@fortawesome/free-solid-svg-icons"
 import { Pages } from "./VerticalMenu"

 import { RecoilRoot, atom, useRecoilState } from 'recoil'
@ -15,40 +15,33 @@ export default function HorizontalMenu() {
    const activeColor = " bg-slate-700 text-white"

    return (
-      <RecoilRoot>
-        <div className="relative text-lg font-medium text-center hover:cursor-pointer grid grid-cols-5 grid-flow-col backdrop-blur-2xl bg-zinc-100/30 dark:bg-neutral-900/30 rounded-lg">
-            <div
-                className={`self-start py-3 rounded-lg${page === Pages.Profile ? activeColor : ""}`}
-                onClick={() => {setPage(Pages.Profile)}}
-            >
-                <FontAwesomeIcon icon={faUser} />{" "}
+        <RecoilRoot>
+            <div className="relative text-lg font-medium text-center hover:cursor-pointer grid grid-cols-5 grid-flow-col backdrop-blur-2xl bg-zinc-100/30 dark:bg-neutral-900/30 rounded-lg">
+                <div
+                    className={`self-start py-3 rounded-lg${page === Pages.Profile ? activeColor : ""}`}
+                    onClick={() => { setPage(Pages.Profile) }}
+                >
+                    <FontAwesomeIcon icon={faUser} />{" "}
+                </div>
+                <div
+                    className={`self-start py-3 rounded-lg${page === Pages.Identifier ? activeColor : ""}`}
+                    onClick={() => { setPage(Pages.Identifier) }}
+                >
+                    <FontAwesomeIcon icon={faPassport} />{" "}
+                </div>
+                <div
+                    className={`self-start py-3 rounded-lg${page === Pages.Services ? activeColor : ""}`}
+                    onClick={() => { setPage(Pages.Services) }}
+                >
+                    <FontAwesomeIcon icon={faStar} />{" "}
+                </div>
+                <div
+                    className={`self-start py-3 rounded-lg${page === Pages.Chat ? activeColor : ""}`}
+                    onClick={() => { setPage(Pages.Chat) }}
+                >
+                    <FontAwesomeIcon icon={faComments} />{" "}
+                </div>
            </div>
-            <div
-                className={`self-start py-3 rounded-lg${page === Pages.Links ? activeColor : ""}`}
-                onClick={() => {setPage(Pages.Links)}}
-            >
-                <FontAwesomeIcon icon={faLink} />{" "}
-            </div>
-            <div
-                className={`self-start py-3 rounded-lg${page === Pages.Keys ? activeColor : ""}`}
-                onClick={() => {setPage(Pages.Keys)}}
-            >
-                <FontAwesomeIcon icon={faKey} />{" "}
-            </div>
-            <div
-                className={`self-start py-3 rounded-lg${page === Pages.Services ? activeColor : ""}`}
-                onClick={() => {setPage(Pages.Services)}}
-            >
-                <FontAwesomeIcon icon={faStar} />{" "}
-            </div>
-            <div
-                className={`self-start py-3 rounded-lg${page === Pages.Chat ? activeColor : ""}`}
-                onClick={() => {setPage(Pages.Chat)}}
-            >
-                <FontAwesomeIcon icon={faComments} />{" "}
-            </div>
-        </div>
-      </RecoilRoot>
+        </RecoilRoot>
    )
-  }
-  
+}
--- a/src/components/Identifier.tsx
+++ b/src/components/Identifier.tsx
@ -0,0 +1,18 @@
+import Links from "./Links"
+import Keys from "./Keys"
+
+import { useTranslation } from "react-i18next";
+
+export default function Identifier() {
+    const { t } = useTranslation();
+
+    return (
+        <>
+            <p className="text-center mb-5 text-2xl">{t("links")}</p>
+            <Links />
+
+            <p className="text-center mt-10 mb-5 text-2xl">{t("public_keys")}</p>
+            <Keys />
+        </>
+    )
+}
--- a/src/components/Keys.tsx
+++ b/src/components/Keys.tsx
@ -24,7 +24,6 @@ export default function Keys() {
                        <a className="underline" href="https://github.com/yude.keys">GitHub</a>&nbsp;<FontAwesomeIcon icon={faArrowUpRightFromSquare} />
                    </li>
                </ul>
-
            </div>
        </>
    )
--- a/src/components/Links.tsx
+++ b/src/components/Links.tsx
@ -6,7 +6,7 @@ export default function Links() {
    return (
        <>
            <div className="rounded-lg w-full">
-              <div className="gap-x-6 gap-y-8 grid grid-cols-4 justify-between">
+                <div className="gap-x-6 gap-y-8 grid grid-cols-4 justify-between">
                    <div className="w-24 h-16">
                        <a href="https://x.com/yude_jp">
                            <FontAwesomeIcon className="w-24 h-11" icon={faXTwitter} />
@ -147,5 +147,4 @@ export default function Links() {
            </div>
        </>
    )
-  }
-  
+}
--- a/src/components/VerticalMenu.tsx
+++ b/src/components/VerticalMenu.tsx
@ -1,18 +1,17 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser, faStar, faComments } from '@fortawesome/free-regular-svg-icons'
-import { faLink, faKey } from '@fortawesome/free-solid-svg-icons'
+import { faPassport } from "@fortawesome/free-solid-svg-icons"

 import { RecoilRoot, atom, useRecoilState } from 'recoil'
 import { useTranslation } from "react-i18next";

 export enum Pages {
    Profile = 0,
-    Links = 1,
-    Keys = 2,
-    Activities = 3,
-    Spotify = 4,
-    Services = 5,
-    Chat = 6,
+    Identifier = 1,
+    Activities = 2,
+    Spotify = 3,
+    Services = 4,
+    Chat = 5,
 }

 export const currentPage = atom({
@ -34,35 +33,28 @@ export default function VerticalMenu() {
                        className={`w-full px-4 py-2 rounded-lg${page === Pages.Profile ? activeColor : ""}`}
                        onClick={() => { setPage(Pages.Profile) }}
                    >
-                        <FontAwesomeIcon icon={faUser} />{" "}
+                        <FontAwesomeIcon icon={faUser} className="w-10 h-10" />{" "}
                        <p>{t("profile")}</p>
                    </li>
                    <li
-                        className={`w-full px-4 py-2 rounded-lg${page === Pages.Links ? activeColor : ""}`}
-                        onClick={() => { setPage(Pages.Links) }}
+                        className={`w-full px-4 py-2 rounded-lg${page === Pages.Identifier ? activeColor : ""}`}
+                        onClick={() => { setPage(Pages.Identifier) }}
                    >
-                        <FontAwesomeIcon icon={faLink} />{" "}
-                        <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>{t("public_keys")}</p>
+                        <FontAwesomeIcon icon={faPassport} className="w-10 h-10" />{" "}
+                        <p>{t("identifier")}</p>
                    </li>
                    <li
                        className={`w-full px-4 py-2 rounded-lg${page === Pages.Services ? activeColor : ""}`}
                        onClick={() => { setPage(Pages.Services) }}
                    >
-                        <FontAwesomeIcon icon={faStar} />{" "}
+                        <FontAwesomeIcon icon={faStar} className="w-10 h-10" />{" "}
                        <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} />{" "}
+                        <FontAwesomeIcon icon={faComments} className="w-10 h-10" />{" "}
                        <p>{t("chat")}</p>
                    </li>
                </ul>
--- a/src/components/Weather.tsx
+++ b/src/components/Weather.tsx
@ -0,0 +1,7 @@
+export default function Weather() {
+    return (
+        <>
+            <div className="inline-block"><iframe src="https://www.tenki-yoho.com/blogparts/img.php?all,acrweb" width={200} height={200}><a href="https://www.tenki-yoho.com/">天気予報</a></iframe></div>
+        </>
+    )
+}
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -2,6 +2,7 @@
    "translation": {
        "profile": "Profile",
        "links": "Links",
+        "identifier": "Identifier",
        "public_keys": "Public keys",
        "services": "Services",
        "chat": "Chat",
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@ -2,6 +2,7 @@
    "translation": {
        "profile": "プロフィール",
        "links": "リンク",
+        "identifier": "識別子",
        "public_keys": "公開鍵",
        "services": "サービス",
        "chat": "チャット",
--- a/src/locales/zh-cn.json
+++ b/src/locales/zh-cn.json
@ -2,6 +2,7 @@
    "translation": {
        "profile": "关于我",
        "links": "超级链接",
+        "identifier": "識別符",
        "public_keys": "公钥",
        "services": "服务",
        "chat": "聊天",