feat(index): add link keyboard shortcuts

src/components/Links.astro

@@ -1,10 +1,10 @@
 <ul class="flex gap-6">
   <li class="opacity-0 motion-links group">
     <a
-      aria-label="forgejo"
+      aria-label="git"
       href="https://git.z0x.ca?utm_source=z0x.ca"
       target="_blank"
-      class="flex relative justify-center items-center w-12 transition aspect-square hover:text-muted-foreground"
+      class="git 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"
@@ -38,7 +38,7 @@
       aria-label="blog"
       href="https://blog.z0x.ca?utm_source=z0x.ca"
       target="_blank"
-      class="flex relative justify-center items-center w-12 transition aspect-square hover:text-muted-foreground"
+      class="blog 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"
@@ -67,7 +67,7 @@
       aria-label="matrix"
       href="https://matrix.to/#/@z0x:z0x.ca"
       target="_blank"
-      class="flex relative justify-center items-center w-12 transition aspect-square hover:text-muted-foreground"
+      class="matrix 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"

src/js/index.ts

@@ -12,3 +12,27 @@ animate(
     ease: "easeIn",
   },
 );
+
+document.addEventListener("keydown", ({ key }: KeyboardEvent) => {
+  const shortcuts: Record<string, string> = {
+    g: "a.git",
+    b: "a.blog",
+    m: "a.matrix",
+  };
+
+  const link = document.querySelector(
+    shortcuts[key.toLowerCase()] || "",
+  ) 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();
+});