Update website

src/pages/index.astro

@@ -1,56 +1,35 @@
 ---
-import Layout from "../layouts/index.astro";
+import Layout from "@layouts/index.astro";
 
-// const socials = [
-//   ["Bluesky", "bs/lua.re", "https://bsky.app/profile/lua.re"],
-//   ["GitHub", "gh/luaneko", "https://github.com/luaneko"],
-// ];
-
-const links = [
-  ["Twitter", "twt", "https://twitter.com/luanekos"],
-  ["Bluesky", "bsky", "https://bsky.app/profile/lua.re"],
-  ["Gitea", "git", "https://git.lua.re/"],
-  ["Memos", "memo", "https://memo.lua.re/"],
-  ["AFFiNE", "docs", "https://docs.lua.re/"],
-].sort(([_a, a], [_b, b]) => a.length - b.length || a.localeCompare(b));
+const links = {
+  git: { alt: "Git", href: "https://git.lua.re/" },
+  twt: { alt: "Twitter", href: "https://twitter.com/luanekos" },
+  mail: { alt: "Email", href: "mailto:lumi(at)lua.re" },
+  // bsky: { alt: "Bluesky", href: "https://bsky.app/profile/lua.re" },
+};
 ---
 
-<Layout>
-  <div class="max-w-screen-sm mx-auto p-8">
-    <pre
-      class="leading-snug px-5 py-4 bg-white rounded-lg border-gray-100 shadow-xs">
-  ∧.,,∧ 𝜗𝜚
-(  ̳• · • ̳)   ᭢
-/      づ <a class="mail font-serif"><em><strong class="font-semibold">lumi</strong><span class="at"> at </span>lua.re</em></a> ₊˚.⋆⁺₊
-<!-- 
-{socials.map(([name, text, href]) => (
-<>・:。<small><a href={href} title={name}>{text}</a></small>
-</s>))} -->
-🍡 🌸 🎀 🌙
-</pre>
-    <p class="my-2">
-      <small
-        >{
-          links.map(([name, sub, href], i) => (
-            <>
-              {i ? " · " : ""}
-              <a href={href} title={name}>
-                {sub}
-              </a>
-            </>
-          ))
-        }</small
-      >
-    </p>
-  </div>
+<Layout class="max-w-screen-sm mx-auto p-8">
+  <main class="px-4 py-3 bg-white rounded shadow-xs leading-tight">
+    <pre>{
+`  ∧...∧ 𝜗𝜚
+(  ̳• · • ̳)      ᭢
+/         づ `}<a href={links.twt.href} title={links.twt.alt}>awa {`⋆.⁺₊`}</a>{
+}</pre>
+  </main>
+  <footer class="my-3 text-sm">
+    {
+      Object.entries(links).map(([name, { alt, href }], i) => [
+        i ? " · " : "",
+        <a href={href} title={alt} set:text={name} />,
+      ])
+    }
+  </footer>
+
+  <script>
+    for (const link of document.querySelectorAll(`a[href^="mailto:"]`)) {
+      const href = link.attributes.getNamedItem("href")!;
+      href.value = href.value.replace("(at)", "@");
+    }
+  </script>
 </Layout>
-
-<script>
-  // don't scrape my email please
-  const node = document.querySelector(`.mail`);
-
-  if (node) {
-    node.querySelector(`.at`)?.replaceWith("@");
-    node.setAttribute("href", `mailto:${node.textContent}`);
-  }
-</script>