refactor: ExternalLink component properties

src/components/external-link.astro

@@ -2,21 +2,21 @@
 import type { HTMLAttributes } from "astro/types";
 
 interface Props extends HTMLAttributes<"a"> {
-  cssClass: string;
-  href: string;
-  title: string;
+  /** Whether this link should use defaults for external links. */
+  external?: boolean | null | undefined;
 }
 
-const { cssClass, href, title } = Astro.props;
+const { class: className, external, href, target, title, rel } = Astro.props;
 ---
 
 <a
   class:list={[
-    cssClass,
+    className,
     "flex min-w-full items-center justify-center gap-4 rounded px-6 py-2 text-lg outline-offset-2 sm:px-24",
   ]}
   {href}
   {title}
-  target="_blank"
-  rel="external me nofollow noreferrer"><slot name="logo" /><slot /></a
+  target={target ?? (external ? "_blank" : undefined)}
+  rel={rel ?? (external ? "external me nofollow noreferrer" : undefined)}
+  ><slot name="logo" /><slot /></a
 >

src/pages/index.astro

@@ -33,9 +33,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
           </li>
           <li>
             <ExternalLink
-              cssClass="link-matrix"
+              class="link-matrix"
               href="https://matrix.to/#/@kmoschcau:matrix.org"
               title="Mein Matrix-Konto"
+              external
             >
               <InlineSvg SvgComponent={MatrixLogo} slot="logo" />
               <span>@kmoschcau:matrix.org</span>
@@ -43,9 +44,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
           </li>
           <li>
             <ExternalLink
-              cssClass="link-github"
+              class="link-github"
               href="https://github.com/kmoschcau/"
               title="Mein GitHub-Konto"
+              external
             >
               <InlineSvg SvgComponent={GitHubLogo} slot="logo" />
               <span>kmoschcau</span>
@@ -53,9 +55,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
           </li>
           <li>
             <ExternalLink
-              cssClass="link-gitlab"
+              class="link-gitlab"
               href="https://gitlab.com/kmoschcau"
               title="Mein GitLab-Konto"
+              external
             >
               <InlineSvg SvgComponent={GitLabLogo} slot="logo" />
               <span>kmoschcau</span>
@@ -63,9 +66,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
           </li>
           <li>
             <ExternalLink
-              cssClass="link-linked-in"
+              class="link-linked-in"
               href="https://www.linkedin.com/in/kmoschcau/"
               title="Mein LinkedIn-Konto"
+              external
             >
               <InlineSvg SvgComponent={LinkedInLogo} slot="logo" />
               <span>kmoschcau</span>
@@ -73,9 +77,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
           </li>
           <li>
             <ExternalLink
-              cssClass="link-keyoxide"
+              class="link-keyoxide"
               href="https://keyoxide.org/8CE00E9495B5030DA9217208DF16F424177090BB"
               title="Mein Keyoxide-Eintrag"
+              external
             >
               <InlineSvg SvgComponent={KeyoxideLogo} slot="logo" />
               <span>Keyoxide</span>