feat: add dark theme, matrix and FA link, fix inline SVG aria label

src/components/external-link.astro

@@ -1,12 +1,20 @@
 ---
-const { ariaLabel, cssClass, href } = Astro.props;
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"a"> {
+  cssClass: string;
+  href: string;
+  title: string;
+}
+
+const { cssClass, href, title } = Astro.props;
 ---
 
 <a
-  aria-label={ariaLabel}
   class:list={[
     cssClass,
-    "flex min-w-full items-center gap-4 rounded px-6 py-2 text-lg sm:px-24",
+    "flex min-w-full items-center justify-center gap-4 rounded px-6 py-2 text-lg sm:px-24",
   ]}
-  {href}><slot /></a
+  {href}
+  {title}><slot name="logo" /><slot /></a
 >

src/components/inline-svg.astro

@@ -0,0 +1,12 @@
+---
+import type { SvgComponent } from "astro/types";
+
+interface Props {
+  SvgComponent: SvgComponent;
+  svgSize?: number;
+}
+
+const { SvgComponent, svgSize = 24 } = Astro.props;
+---
+
+<SvgComponent height={svgSize} width={svgSize} role="presentation" />

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import { Image } from "astro:assets";
 import ExternalLink from "../components/external-link.astro";
+import InlineSvg from "../components/inline-svg.astro";
 import avatar from "../images/Icon Alec 150.png";
 import MastodonLogo from "../images/mastodon-logo-white.svg";
 import "../styles/global.css";
@@ -31,24 +32,40 @@ const svgSize = 24;
         />
         <hgroup>
           <h1>f1r3w4rr10r</h1>
-          <p class="text-zinc-600">aka Alec the zebra</p>
+          <p class="text-soft">aka Alec the zebra</p>
         </hgroup>
-        <p class="text-zinc-600">
+        <section class="text-soft">
-          A zebra from Germany – (Web-)dev by day, furry, gamer and game master
+          <p>A zebra from Germany</p>
-          by night
+          <p>(Web-)dev by day – furry, gamer and game master by night</p>
-        </p>
+        </section>
-        <ul>
+        <ul class="flex flex-col gap-2">
+          <li>
+            <ExternalLink
+              cssClass="link-matrix"
+              href="https://matrix.to/#/@f1r3w4rr10r:bark.lgbt"
+              title="My matrix account"
+            >
+              <span>@f1r3w4rr10r:bark.lgbt</span>
+            </ExternalLink>
+          </li>
           <li>
             <ExternalLink
-              ariaLabel="Link to Mastodon"
               cssClass="link-mastodon"
               href="https://bark.lgbt/@f1r3w4rr10r"
-              ><MastodonLogo
+              title="My Mastodon account"
-                height={svgSize}
-                width={svgSize}
-                aria-label="Mastodon Logo"
-              /> @f1r3w4rr10r@bark.lgbt</ExternalLink
             >
+              <InlineSvg SvgComponent={MastodonLogo} slot="logo" />
+              <span>@f1r3w4rr10r@bark.lgbt</span>
+            </ExternalLink>
+          </li>
+          <li>
+            <ExternalLink
+              cssClass="link-fur-affinity"
+              href="https://www.furaffinity.net/user/f1r3w4rr10r/"
+              title="My Fur Affinity account"
+            >
+              <span>f1r3w4rr10r</span>
+            </ExternalLink>
           </li>
         </ul>
       </article>

src/styles/global.css

@@ -7,6 +7,10 @@
 }
 
 @layer base {
+  body {
+    @apply bg-neutral-50 text-black dark:bg-neutral-800 dark:text-white;
+  }
+
   h1 {
     @apply text-5xl font-bold;
   }
@@ -16,4 +20,14 @@
   .link-mastodon {
     @apply bg-mastodon-dark hover:bg-mastodon-dark-hover text-white;
   }
+
+  .link-matrix {
+    @apply bg-black text-white hover:bg-zinc-950;
+  }
+}
+
+@layer utilities {
+  .text-soft {
+    @apply text-zinc-600 dark:text-zinc-400;
+  }
 }