混淆

2026-04-09 15:12:48 +08:00
parent ee3585586d
commit 2de3841f7d
8 changed files with 193 additions and 113 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -44,6 +44,7 @@
        "lint-staged": "^16.4.0",
        "prettier": "^3.8.1",
        "prettier-plugin-astro": "^0.14.1",
+        "prettier-plugin-svelte": "^3.5.1",
        "svelte-eslint-parser": "^1.6.0"
      },
      "engines": {
@ -7768,6 +7769,17 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/prettier-plugin-svelte": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.5.1.tgz",
+      "integrity": "sha512-65+fr5+cgIKWKiqM1Doum4uX6bY8iFCdztvvp2RcF+AJoieaw9kJOFMNcJo/bkmKYsxFaM9OsVZK/gWauG/5mg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "prettier": "^3.0.0",
+        "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
+      }
+    },
    "node_modules/prismjs": {
      "version": "1.30.0",
      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
--- a/package.json
+++ b/package.json
@ -62,6 +62,7 @@
    "lint-staged": "^16.4.0",
    "prettier": "^3.8.1",
    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-svelte": "^3.5.1",
    "svelte-eslint-parser": "^1.6.0"
  }
 }
--- a/prettier.config.cjs
+++ b/prettier.config.cjs
@ -9,7 +9,7 @@ const config = {
  tabWidth: 2,
  semi: false,
  singleQuote: true,
-  plugins: ['prettier-plugin-astro'],
+  plugins: ['prettier-plugin-astro', 'prettier-plugin-svelte'],
  overrides: [
    {
      files: '*.astro',
--- a/scripts/generate_contact.py
+++ b/scripts/generate_contact.py
@ -0,0 +1,47 @@
+import base64
+import json
+from pathlib import Path
+
+raw_contact: list[dict[str, str]] = [
+    {
+        "platform": "Github",
+        "href": "https://github.com/passthem-desu",
+        "name": "passthem-desu",
+    },
+    {
+        "platform": "Wakatime",
+        "href": "https://wakatime.com/@passthem",
+        "name": "@passthem",
+    },
+    {
+        "platform": "Youtube",
+        "href": "https://www.youtube.com/@Passthem183",
+        "name": "@Passthem183",
+    },
+    {
+        "platform": "OtoSite",
+        "href": "https://otomad.site/@passthem",
+        "name": "@passthem",
+    },
+    {
+        "platform": "Email",
+        "href": "mailto:passthem183@gmail.com",
+        "name": "passthem183@gmail.com",
+    },
+    {
+        "platform": "Bilibili",
+        "href": "https://space.bilibili.com/92852604",
+        "name": "passthem",
+    },
+]
+
+
+def hack(raw: str) -> str:
+    return base64.b64encode(raw[::-1].encode()).decode()
+
+
+hacked_contact = [{k: hack(v) for k, v in c.items()} for c in raw_contact]
+(Path(__file__).parent / "../src/lib/data").mkdir(exist_ok=True)
+_ = (Path(__file__).parent / "../src/lib/data/contact.json").write_text(
+    json.dumps(hacked_contact)
+)
--- a/src/components/MainpageContactMe.svelte
+++ b/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>
--- a/src/lib/data/contact.json
+++ b/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="
+  }
+]
--- a/src/pages/contact.astro
+++ b/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>
--- a/src/pages/index.astro
+++ b/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;
-            }
-          }
-        }
-      }
-    }
  }

  /* 友链页 */