feat(index): replace inline svg with lucide icons & make logo unselectable

astro.config.ts

@@ -1,7 +1,10 @@
-import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "astro/config";
 
+import tailwindcss from "@tailwindcss/vite";
+import icon from "astro-icon";
+
 export default defineConfig({
+  integrations: [icon()],
   vite: {
     plugins: [tailwindcss()],
   },

package.json

@@ -12,9 +12,11 @@
     "@astrojs/check": "^0.9.4",
     "@biomejs/biome": "1.9.4",
     "@fontsource-variable/geist": "^5.2.6",
+    "@iconify-json/lucide": "^1.2.45",
     "@tailwindcss/vite": "^4.1.8",
     "@types/node": "^22.15.29",
     "astro": "^5.8.1",
+    "astro-icon": "^1.1.5",
     "motion": "^12.15.0",
     "tailwindcss": "^4.1.8"
   },

src/components/Links.astro

@@ -1,36 +1,19 @@
+---
+import { Icon } from "astro-icon/components";
+---
 <ul class="flex gap-6">
   <li class="opacity-0 motion-links group">
     <a
       aria-label="git"
       href="https://git.z0x.ca?utm_source=z0x.ca"
       target="_blank"
-      class="git flex relative justify-center items-center w-12 transition aspect-square hover:text-muted-foreground"
+      class="flex relative justify-center items-center w-12 transition aspect-square hover:text-muted-foreground"
     >
       <div
         class="absolute inset-0 aspect-square h-12 bg-foreground/10 rounded-md"
       >
       </div>
-      <svg
+      <Icon name="lucide:github" />
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        width="32"
-        height="32"
-        stroke-width="2"
-      >
-        <path d="M16 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-        <path d="M12 8m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-        <path d="M12 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
-        <path d="M12 15v-6"></path>
-        <path d="M15 11l-2 -2"></path>
-        <path d="M11 7l-1.9 -1.9"></path>
-        <path
-          d="M13.446 2.6l7.955 7.954a2.045 2.045 0 0 1 0 2.892l-7.955 7.955a2.045 2.045 0 0 1 -2.892 0l-7.955 -7.955a2.045 2.045 0 0 1 0 -2.892l7.955 -7.955a2.045 2.045 0 0 1 2.892 0z"
-        ></path>
-      </svg>
     </a>
   </li>
   <li class="opacity-0 motion-links group">
@@ -38,28 +21,13 @@
       aria-label="blog"
       href="https://blog.z0x.ca?utm_source=z0x.ca"
       target="_blank"
-      class="blog flex relative justify-center items-center w-12 transition aspect-square hover:text-muted-foreground"
+      class="flex relative justify-center items-center w-12 transition aspect-square hover:text-muted-foreground"
     >
       <div
         class="absolute inset-0 aspect-square h-12 bg-foreground/10 rounded-md"
       >
       </div>
-      <svg
+      <Icon name="lucide:library-big" />
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        class="relative w-8 aspect-square transition"
-      >
-        <path
-          d="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18"
-        ></path>
-        <path d="M13 8l2 0"></path>
-        <path d="M13 12l2 0"></path>
-      </svg>
     </a>
   </li>
   <li class="opacity-0 motion-links group">
@@ -67,28 +35,13 @@
       aria-label="matrix"
       href="https://matrix.to/#/@z0x:z0x.ca"
       target="_blank"
-      class="matrix flex relative justify-center items-center w-12 transition aspect-square hover:text-muted-foreground"
+      class="flex relative justify-center items-center w-12 transition aspect-square hover:text-muted-foreground"
     >
       <div
         class="absolute inset-0 aspect-square h-12 bg-foreground/10 rounded-md"
       >
       </div>
-      <svg
+      <Icon name="lucide:message-circle" />
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        class="relative w-8 aspect-square transition"
-      >
-        <path d="M4 3h-1v18h1"></path>
-        <path d="M20 21h1v-18h-1"></path>
-        <path d="M7 9v6"></path>
-        <path d="M12 15v-3.5a2.5 2.5 0 1 0 -5 0v.5"></path>
-        <path d="M17 15v-3.5a2.5 2.5 0 1 0 -5 0v.5"></path>
-      </svg>
     </a>
   </li>
 </ul>

src/components/Logo.astro

@@ -7,6 +7,6 @@ import logo from "/src/assets/logo.svg";
   src={logo}
   alt="logo"
   loading="eager"
-  class="w-48 opacity-0 motion-logo"
+  class="w-48 select-none opacity-0 motion-logo"
   fetchpriority="high"
 />

src/js/index.ts

@@ -15,28 +15,3 @@ animate(
     ease: "easeIn",
   },
 );
-
-document.addEventListener("keydown", ({ key }: KeyboardEvent) => {
-  const shortcuts: Record<string, string> = {
-    g: "a.git",
-    b: "a.blog",
-    m: "a.matrix",
-  };
-
-  const selector = shortcuts[key.toLowerCase()];
-  if (!selector) return;
-
-  const link = document.querySelector(selector) as HTMLAnchorElement | null;
-  if (!link?.href) return;
-
-  const a = Object.assign(document.createElement("a"), {
-    href: link.href,
-    target: link.target,
-    rel: link.rel,
-    style: "display: none",
-  });
-
-  document.body.append(a);
-  a.click();
-  a.remove();
-});

src/styles/globals.css

@@ -14,6 +14,10 @@
   main {
     @apply flex flex-col flex-auto gap-4 justify-center items-center;
   }
+
+  [data-icon] {
+    @apply w-8 h-8;
+  }
 }
 
 :root {