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

eslint.config.mjs

@@ -1,7 +1,8 @@
 import js from "@eslint/js";
-import { defineConfig } from "eslint/config";
 import eslintPluginAstro from "eslint-plugin-astro";
 import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+import { defineConfig } from "eslint/config";
+import jsxA11y from "eslint-plugin-jsx-a11y";
 
 export default defineConfig([
   {
@@ -9,6 +10,12 @@ export default defineConfig([
     plugins: { js },
     extends: ["js/recommended"],
   },
+  {
+    files: ["**/*.{astro,html}"],
+    plugins: {
+      "jsx-a11y": jsxA11y,
+    },
+  },
   ...eslintPluginAstro.configs.recommended,
   eslintPluginPrettierRecommended,
 ]);

package.json

@@ -17,13 +17,16 @@
     "tailwindcss": "^4.2.1"
   },
   "devDependencies": {
+    "@astrojs/ts-plugin": "^1.10.6",
     "@eslint/js": "^10.0.1",
     "@markuplint/astro-parser": "^4.6.23",
     "@markuplint/ml-config": "^4.8.15",
+    "@typescript-eslint/parser": "^8.56.1",
     "cspell": "^9.7.0",
     "eslint": "^10.0.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-astro": "^1.6.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.5.5",
     "markuplint": "^4.14.1",
     "postcss-html": "^1.8.1",

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">
-          A zebra from Germany – (Web-)dev by day, furry, gamer and game master
-          by night
-        </p>
-        <ul>
+        <section class="text-soft">
+          <p>A zebra from Germany</p>
+          <p>(Web-)dev by day – furry, gamer and game master by night</p>
+        </section>
+        <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
-                height={svgSize}
-                width={svgSize}
-                aria-label="Mastodon Logo"
-              /> @f1r3w4rr10r@bark.lgbt</ExternalLink
+              title="My Mastodon account"
             >
+              <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;
+  }
 }

tsconfig.json

@@ -1,5 +1,9 @@
 {
-  "extends": "astro/tsconfigs/strict",
+  "$schema": "https://json.schemastore.org/tsconfig.json",
+  "extends": "astro/tsconfigs/strictest",
   "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"]
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "plugins": [{ "name": "@astrojs/ts-plugin" }]
+  }
 }