Merge Keys and Links into Identifier tab

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';
 

src/components/ContentRenderer.tsx

@@ -1,8 +1,7 @@
 import { useRecoilState } from 'recoil'
 
 import Profile from "./Profile"
-import Links from "./Links"
+import Identifier from "./Identifier"
-import Keys from "./Keys"
 import Spotify from "./Spotify"
 import Services from "./Services"
 import Chat from "./Chat"
@@ -14,8 +13,7 @@ export default function ContentRenderer() {
     return (
         <>
             {page === Pages.Profile && <><Profile /><Spotify /></>}
-            { page === Pages.Links && <Links /> }
+            {page === Pages.Identifier && <Identifier />}
-            { page === Pages.Keys && <Keys /> }
             {page === Pages.Services && <Services />}
             {page === Pages.Chat && <Chat />}
         </>

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>
     )
 }
-  

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'
@@ -24,16 +24,10 @@ export default function HorizontalMenu() {
                     <FontAwesomeIcon icon={faUser} />{" "}
                 </div>
                 <div
-                className={`self-start py-3 rounded-lg${page === Pages.Links ? activeColor : ""}`}
+                    className={`self-start py-3 rounded-lg${page === Pages.Identifier ? activeColor : ""}`}
-                onClick={() => {setPage(Pages.Links)}}
+                    onClick={() => { setPage(Pages.Identifier) }}
                 >
-                <FontAwesomeIcon icon={faLink} />{" "}
+                    <FontAwesomeIcon icon={faPassport} />{" "}
-            </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 : ""}`}
@@ -51,4 +45,3 @@ export default function HorizontalMenu() {
         </RecoilRoot>
     )
 }
-  

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 />
+        </>
+    )
+}

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>
         </>
     )

src/components/Links.tsx

@@ -148,4 +148,3 @@ export default function Links() {
         </>
     )
 }
-  

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,
+    Identifier = 1,
-    Keys = 2,
+    Activities = 2,
-    Activities = 3,
+    Spotify = 3,
-    Spotify = 4,
+    Services = 4,
-    Services = 5,
+    Chat = 5,
-    Chat = 6,
 }
 
 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 : ""}`}
+                        className={`w-full px-4 py-2 rounded-lg${page === Pages.Identifier ? activeColor : ""}`}
-                        onClick={() => { setPage(Pages.Links) }}
+                        onClick={() => { setPage(Pages.Identifier) }}
                     >
-                        <FontAwesomeIcon icon={faLink} />{" "}
+                        <FontAwesomeIcon icon={faPassport} className="w-10 h-10" />{" "}
-                        <p>{t("links")}</p>
+                        <p>{t("identifier")}</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>
                     </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>

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>
+        </>
+    )
+}

src/locales/en.json

@@ -2,6 +2,7 @@
     "translation": {
         "profile": "Profile",
         "links": "Links",
+        "identifier": "Identifier",
         "public_keys": "Public keys",
         "services": "Services",
         "chat": "Chat",

src/locales/ja.json

@@ -2,6 +2,7 @@
     "translation": {
         "profile": "プロフィール",
         "links": "リンク",
+        "identifier": "識別子",
         "public_keys": "公開鍵",
         "services": "サービス",
         "chat": "チャット",

src/locales/zh-cn.json

@@ -2,6 +2,7 @@
     "translation": {
         "profile": "关于我",
         "links": "超级链接",
+        "identifier": "識別符",
         "public_keys": "公钥",
         "services": "服务",
         "chat": "聊天",