feat: refactor inline links and use heroicons

src/components/inline-link.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import ExternalIcon from "../icons/arrow-top-right-on-square.svg";
+import InlineSvg from "./inline-svg.astro";
+
+interface Props extends HTMLAttributes<"a"> {
+  /** Whether this link should use defaults for external links. */
+  external?: boolean | null | undefined;
+}
+
+const { external, target, rel, ...rest } = Astro.props;
+---
+
+<a
+  target={target ?? (external ? "_blank" : undefined)}
+  rel={rel ?? (external ? "external me nofollow noreferrer" : undefined)}
+  {...rest}
+  ><slot />{
+    external ? (
+      <InlineSvg SvgComponent={ExternalIcon} class="ms-1" />
+    ) : undefined
+  }</a
+>

src/components/inline-svg.astro

@@ -3,22 +3,18 @@ import type { HTMLAttributes, SvgComponent } from "astro/types";
 
 interface Props extends HTMLAttributes<"svg"> {
   SvgComponent: SvgComponent;
-  size?: number;
 }
 
 const {
   SvgComponent,
-  height,
+  class: className,
   role = "presentation",
-  size = 24,
-  width,
   ...rest
 } = Astro.props;
 ---
 
 <SvgComponent
-  {...rest}
+  class:list={[className, "inline h-[1em]"]}
-  height={height ?? size}
   {role}
-  width={width ?? size}
+  {...rest}
 />

src/icons/arrow-left-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>

src/icons/arrow-top-right-on-square.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+</svg>

src/icons/back.svg

@@ -1,8 +0,0 @@
-<svg role="presentation" viewBox="0 0 100 100">
-  <g fill="none" stroke="currentColor" stroke-width="4">
-    <circle cx="50" cy="50" r="48" />
-    <line x1="25" x2="75" y1="50" y2="50" />
-    <line x1="25" x2="50" y1="50" y2="25" />
-    <line x1="25" x2="50" y1="50" y2="75" />
-  </g>
-</svg>

src/pages/index.astro

@@ -1,7 +1,6 @@
 ---
 import { Image } from "astro:assets";
 import ButtonLink from "../components/button-link.astro";
-import InlineSvg from "../components/inline-svg.astro";
 import GitHubLogo from "../images/GitHub.svg";
 import GitLabLogo from "../images/GitLab.svg";
 import KeyoxideLogo from "../images/Keyoxide.svg";
@@ -38,9 +37,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
               title="Mein Matrix-Konto"
               external
             >
-              <InlineSvg
+              <MatrixLogo
-                SvgComponent={MatrixLogo}
+                class="size-6"
                 fill="currentColor"
+                role="presentation"
                 slot="logo"
               />
               <span>@kmoschcau:matrix.org</span>
@@ -53,9 +53,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
               title="Mein GitHub-Konto"
               external
             >
-              <InlineSvg
+              <GitHubLogo
-                SvgComponent={GitHubLogo}
+                class="size-6"
                 fill="currentColor"
+                role="presentation"
                 slot="logo"
               />
               <span>kmoschcau</span>
@@ -68,9 +69,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
               title="Mein GitLab-Konto"
               external
             >
-              <InlineSvg
+              <GitLabLogo
-                SvgComponent={GitLabLogo}
+                class="size-6"
                 fill="currentColor"
+                role="presentation"
                 slot="logo"
               />
               <span>kmoschcau</span>
@@ -83,9 +85,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
               title="Mein LinkedIn-Konto"
               external
             >
-              <InlineSvg
+              <LinkedInLogo
-                SvgComponent={LinkedInLogo}
+                class="size-6"
                 fill="currentColor"
+                role="presentation"
                 slot="logo"
               />
               <span>kmoschcau</span>
@@ -98,9 +101,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
               title="Mein Keyoxide-Eintrag"
               external
             >
-              <InlineSvg
+              <KeyoxideLogo
-                SvgComponent={KeyoxideLogo}
+                class="size-6"
                 fill="currentColor"
+                role="presentation"
                 slot="logo"
               />
               <span>Keyoxide</span>

src/pages/skills.astro

@@ -1,10 +1,11 @@
 ---
-import BackIcon from "../icons/back.svg";
+import ArrowLeftCircle from "../icons/arrow-left-circle.svg";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import {
   getDurationInYearsBetween as between,
   getDurationInYearsFrom as from,
 } from "../duration-utils";
+import InlineLink from "../components/inline-link.astro";
 
 const trStart = new Date(2011, 7, 1);
 
@@ -32,11 +33,8 @@ const kcStart = new Date(2026, 0, 1);
   <main class="flex items-center justify-center">
     <article>
       <div class="mb-8 flex items-baseline gap-6">
-        <a
+        <a href="/" title="Zurück" class="text-soft rounded-full"
-          href="/"
+          ><ArrowLeftCircle class="size-9" /></a
-          title="Zurück"
-          class="text-soft rounded-full outline-offset-2"
-          ><BackIcon class="size-9" /></a
         >
         <h1>Skills</h1>
       </div>
@@ -110,11 +108,10 @@ const kcStart = new Date(2026, 0, 1);
             <li>
               Public, Private &amp; Clouds – {between(cbtStart, mcB2cEnd)}+
               Jahre<br />
-              (<a
+              (<InlineLink
                 href="https://www.credly.com/badges/e06dda2d-a444-448d-809a-31565c3b8c8d/public_url"
-                target="_blank"
+                external
-                rel="external me nofollow noreferrer"
+                >AWS Certified Solutions Architect – Associate</InlineLink
-                >AWS Certified Solutions Architect – Associate</a
               >, AWS, GCP, Azure, CloudFormation, HashiCorp Terraform)
             </li>
             <li>