混淆

src/components/MainpageContactMe.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import _data from '../lib/data/contact.json'
+
+  /**
+   * 为什么要一个独立的 Contact 组件呢...？这就不得不提到，现在可是有网络爬虫的
+   * 时代！我们得给我们的个人信息做反爬呀！
+   *
+   * 另见：https://spencermortensen.com/articles/email-obfuscation/
+   */
+
+  let data = $state<{ platform: string; name: string; href: string }[]>([])
+
+  function unhack(raw: string) {
+    return atob(raw).split('').reverse().join('')
+  }
+
+  onMount(() => {
+    data = _data
+  })
+</script>
+
+<table>
+  <tbody>
+    {#each data as item}
+      <tr>
+        <td>{unhack(item.platform)}</td>
+        <td><a href={unhack(item.href)}>{unhack(item.name)}</a></td>
+      </tr>
+    {/each}
+  </tbody>
+</table>
+
+<style>
+  table {
+    font-family: var(--font-mono);
+
+    & tr {
+      text-align: left;
+      display: grid;
+      grid-template-columns: 6em 16em;
+      gap: 1em;
+      line-height: 2em;
+
+      @media (max-width: 767px) {
+        grid-template-columns: 18em;
+        gap: 0;
+        line-height: 1.8em;
+        margin-block: 1em;
+      }
+
+      & td:nth-child(1) {
+        display: flex;
+        justify-content: space-between;
+
+        @media (max-width: 767px) {
+          justify-content: left;
+        }
+
+        &::after {
+          content: ':';
+        }
+      }
+
+      & td:nth-child(2) {
+        display: flex;
+        justify-content: space-between;
+
+        @media (max-width: 767px) {
+          justify-content: end;
+        }
+
+        &::before {
+          content: '[';
+        }
+
+        &::after {
+          content: ']';
+        }
+
+        &:hover,
+        &:has(a:focus) {
+          background-color: var(--color-fg-0);
+          color: var(--color-bg-0);
+        }
+
+        & > a {
+          text-align: center;
+          margin-inline: 1em;
+
+          &:focus {
+            outline: none;
+          }
+        }
+      }
+    }
+  }
+</style>

src/lib/data/contact.json

@@ -0,0 +1,32 @@
+[
+  {
+    "platform": "YnVodGlH",
+    "href": "dXNlZC1tZWh0c3NhcC9tb2MuYnVodGlnLy86c3B0dGg=",
+    "name": "dXNlZC1tZWh0c3NhcA=="
+  },
+  {
+    "platform": "ZW1pdGFrYVc=",
+    "href": "bWVodHNzYXBAL21vYy5lbWl0YWthdy8vOnNwdHRo",
+    "name": "bWVodHNzYXBA"
+  },
+  {
+    "platform": "ZWJ1dHVvWQ==",
+    "href": "MzgxbWVodHNzYVBAL21vYy5lYnV0dW95Lnd3dy8vOnNwdHRo",
+    "name": "MzgxbWVodHNzYVBA"
+  },
+  {
+    "platform": "ZXRpU290Tw==",
+    "href": "bWVodHNzYXBAL2V0aXMuZGFtb3RvLy86c3B0dGg=",
+    "name": "bWVodHNzYXBA"
+  },
+  {
+    "platform": "bGlhbUU=",
+    "href": "bW9jLmxpYW1nQDM4MW1laHRzc2FwOm90bGlhbQ==",
+    "name": "bW9jLmxpYW1nQDM4MW1laHRzc2Fw"
+  },
+  {
+    "platform": "aWxpYmlsaUI=",
+    "href": "NDA2MjU4MjkvbW9jLmlsaWJpbGliLmVjYXBzLy86c3B0dGg=",
+    "name": "bWVodHNzYXA="
+  }
+]

src/pages/contact.astro

@@ -1,9 +0,0 @@
----
-import BoringLayout from '../layout/BoringLayout.astro'
----
-
-<BoringLayout title="联络我">
-  <h1>联络我</h1>
-  <p>邮箱：<a href="mailto:passthem183@gmail.com">passthem183@gmail.com</a></p>
-  <p>点击 <a href="/">这里</a> 返回主页</p>
-</BoringLayout>

src/pages/index.astro

@@ -6,6 +6,7 @@ import FullLayoutV1 from '../layout/FullLayoutV1.astro'
 import MainpageButton from '../components/MainpageButton.svelte'
 import MainpageComments from '../components/MainpageComments.astro'
 import MainpageTypewriter from '../components/MainpageTypewriter.svelte'
+import MainpageContactMe from '../components/MainpageContactMe.svelte'
 import { Image } from 'astro:assets'
 import { Icon } from 'astro-icon/components'
 import PassthemAvatar from '../assets/mainpage_avatars/passthem.png'
@@ -102,41 +103,7 @@ try {
         >
         </div>
       </h1>
-      <table>
-        <tbody>
-          <tr>
-            <th>Github</th>
-            <th><a href="https://github.com/passthem-desu">passthem-desu</a></th
-            >
-          </tr>
-          <tr>
-            <th>Wakatime</th>
-            <th><a href="https://wakatime.com/@passthem">@passthem</a></th>
-          </tr>
-          <tr>
-            <th>Youtube</th>
-            <th
-              ><a href="https://www.youtube.com/@Passthem183">@Passthem183</a
-              ></th
-            >
-          </tr>
-          <tr>
-            <th>OtoSite</th>
-            <th><a href="https://otomad.site/@passthem">@passthem</a></th>
-          </tr>
-          <tr>
-            <th>Email</th>
-            <th
-              ><a href="mailto:passthem183@gmail.com">passthem183@gmail.com</a
-              ></th
-            >
-          </tr>
-          <tr>
-            <th>Bilibili</th>
-            <th><a href="https://space.bilibili.com/92852604">passthem</a></th>
-          </tr>
-        </tbody>
-      </table>
+      <MainpageContactMe client:idle />
     </div>
   </section>
 
@@ -614,74 +581,6 @@ try {
         transform: skewX(var(--skew-angle)) translateX(calc(var(--unit) - 1px));
       }
     }
-
-    & > table {
-      font-family: var(--font-mono);
-
-      & caption {
-        text-align: center;
-      }
-
-      & tr {
-        text-align: left;
-        display: grid;
-        grid-template-columns: 6em 16em;
-        gap: 1em;
-        line-height: 2em;
-
-        @media (max-width: 767px) {
-          grid-template-columns: 18em;
-          gap: 0;
-          line-height: 1.8em;
-          margin-block: 1em;
-        }
-
-        & th:nth-child(1) {
-          display: flex;
-          justify-content: space-between;
-
-          @media (max-width: 767px) {
-            justify-content: left;
-          }
-
-          &::after {
-            content: ':';
-          }
-        }
-
-        & th:nth-child(2) {
-          display: flex;
-          justify-content: space-between;
-
-          @media (max-width: 767px) {
-            justify-content: end;
-          }
-
-          &::before {
-            content: '[';
-          }
-
-          &::after {
-            content: ']';
-          }
-
-          &:hover,
-          &:has(a:focus) {
-            background-color: var(--color-fg-0);
-            color: var(--color-bg-0);
-          }
-
-          & > a {
-            text-align: center;
-            margin-inline: 1em;
-
-            &:focus {
-              outline: none;
-            }
-          }
-        }
-      }
-    }
   }
 
   /* 友链页 */