From d94d6845dc71c04993dc8f9841cf75c8f4d58365 Mon Sep 17 00:00:00 2001
From: zguiyang <zhaoguiyang18@outlook.com>
Date: Sat, 2 May 2026 09:51:38 +0800
Subject: [PATCH] chore: hide contact info behind eye toggle instead of MD5

---
 src/components/ContactCard.astro | 22 +++++++--------
 src/components/ContactReveal.tsx | 47 ++++++++++++++++++++++++++++++++
 src/i18n/translations.ts         | 16 +++++++----
 src/lib/data/contact.ts          |  6 ++--
 src/lib/data/personal-info.ts    |  2 +-
 5 files changed, 71 insertions(+), 22 deletions(-)
 create mode 100644 src/components/ContactReveal.tsx

diff --git a/src/components/ContactCard.astro b/src/components/ContactCard.astro
index 156e4e0..b9a2d7e 100644
--- a/src/components/ContactCard.astro
+++ b/src/components/ContactCard.astro
@@ -1,5 +1,6 @@
 ---
 import { contactIntents, contactMethods } from "@/lib/data";
+import ContactReveal from "@/components/ContactReveal";
 import type { Lang } from "@/types/i18n";
 
 interface Props {
@@ -40,18 +41,15 @@ const isZh = lang === "zh";
 
     <ul class="mt-6 space-y-3 text-sm">
         {
-            contactMethods.map((method) => (
-                <li class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between border-b border-border/70 pb-3 last:border-none last:pb-0">
-                    <span class="font-semibold text-foreground">
-                        {method.label[lang]}
-                    </span>
-                    <span class="text-muted-foreground break-all font-mono text-xs">
-                        {method.value}
-                    </span>
-                    <span class="inline-flex items-center rounded-md bg-muted px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-                        MD5
-                    </span>
-                </li>
+            contactMethods.map((method, index) => (
+                <ContactReveal
+                    client:load
+                    key={index}
+                    label={method.label[lang]}
+                    value={method.value}
+                    href={method.href}
+                    isZh={isZh}
+                />
             ))
         }
     </ul>
diff --git a/src/components/ContactReveal.tsx b/src/components/ContactReveal.tsx
new file mode 100644
index 0000000..d782243
--- /dev/null
+++ b/src/components/ContactReveal.tsx
@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+
+interface ContactRevealProps {
+  label: string;
+  value: string;
+  href?: string;
+  isZh?: boolean;
+}
+
+export default function ContactReveal({ label, value, href, isZh }: ContactRevealProps) {
+  const [revealed, setRevealed] = useState(false);
+  const masked = "******";
+
+  return (
+    <li className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between border-b border-border/70 pb-3 last:border-none last:pb-0">
+      <span className="font-semibold text-foreground">{label}</span>
+      <span className="flex items-center gap-2">
+        {revealed ? (
+          href ? (
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:text-primary/80 break-all text-sm"
+            >
+              {value}
+            </a>
+          ) : (
+            <span className="text-foreground break-all text-sm">{value}</span>
+          )
+        ) : (
+          <span className="text-muted-foreground tracking-widest text-sm">{masked}</span>
+        )}
+        <button
+          type="button"
+          onClick={() => setRevealed((prev) => !prev)}
+          className="inline-flex items-center justify-center rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+          aria-label={revealed ? (isZh ? "隐藏" : "Hide") : (isZh ? "显示" : "Reveal")}
+          title={revealed ? (isZh ? "点击隐藏" : "Click to hide") : (isZh ? "点击显示" : "Click to reveal")}
+        >
+          {revealed ? <EyeOff size={16} /> : <Eye size={16} />}
+        </button>
+      </span>
+    </li>
+  );
+}
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index 7ee64c3..0d9720f 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -151,18 +151,20 @@ export const translations = {
         methods: [
           {
             label: "Email",
-            value: "32df4a784e33b3964f4c06f6c6aeeecd",
+            value: "zhaoguiyang18@outlook.com",
             icon: "mail",
+            link: "mailto:zhaoguiyang18@outlook.com",
           },
           {
             label: "WeChat",
-            value: "1b2f7b05fca4d2b892e7fa7741d077ee",
+            value: "Joey_Zhao_dev",
             icon: "wechat",
           },
           {
             label: "Telegram",
-            value: "592dff213bb5e79a511c34a37f7edbb5",
+            value: "joey_zgy",
             icon: "send",
+            link: "https://t.me/joey_zgy",
           },
         ],
       },
@@ -379,18 +381,20 @@ export const translations = {
         methods: [
           {
             label: "邮箱",
-            value: "32df4a784e33b3964f4c06f6c6aeeecd",
+            value: "zhaoguiyang18@outlook.com",
             icon: "mail",
+            link: "mailto:zhaoguiyang18@outlook.com",
           },
           {
             label: "微信",
-            value: "1b2f7b05fca4d2b892e7fa7741d077ee",
+            value: "Joey_Zhao_dev",
             icon: "wechat",
           },
           {
             label: "Telegram",
-            value: "592dff213bb5e79a511c34a37f7edbb5",
+            value: "joey_zgy",
             icon: "send",
+            link: "https://t.me/joey_zgy",
           },
         ],
       },
diff --git a/src/lib/data/contact.ts b/src/lib/data/contact.ts
index 4358b94..17c3e82 100644
--- a/src/lib/data/contact.ts
+++ b/src/lib/data/contact.ts
@@ -39,14 +39,14 @@ export const contactIntents: ContactIntent[] = [
 export const contactMethods: ContactMethod[] = [
   {
     label: { en: "Email (Secondary)", zh: "邮箱（备用）" },
-    value: "32df4a784e33b3964f4c06f6c6aeeecd",
+    value: "zhaoguiyang18@outlook.com",
   },
   {
     label: { en: "WeChat", zh: "微信" },
-    value: "1b2f7b05fca4d2b892e7fa7741d077ee",
+    value: "Joey_Zhao_dev",
   },
   {
     label: { en: "Telegram", zh: "Telegram" },
-    value: "592dff213bb5e79a511c34a37f7edbb5",
+    value: "joey_zgy",
   },
 ];
diff --git a/src/lib/data/personal-info.ts b/src/lib/data/personal-info.ts
index d9c10ff..3bf919a 100644
--- a/src/lib/data/personal-info.ts
+++ b/src/lib/data/personal-info.ts
@@ -4,7 +4,7 @@ export const personalInfo: PersonalInfo = {
   name: "Joey Z.",
   location: "Chengdu, China",
   avatar: "https://avatars.githubusercontent.com/u/24975063?v=4",
-  email: "32df4a784e33b3964f4c06f6c6aeeecd",
+  email: "zhaoguiyang18@outlook.com",
   github: "https://github.com/zguiyang",
   linkedin: "",
   website: "https://zhaoguiyang.com",