feat: refactor inline links and use heroicons

package.json

@@ -37,6 +37,7 @@
     "postcss-html": "^1.8.1",
     "prettier": "^3.8.1",
     "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "sharp": "^0.34.5",
     "stylelint": "^17.5.0",

pnpm-lock.yaml

@@ -72,9 +72,12 @@ importers:
       prettier-plugin-astro:
         specifier: ^0.14.1
         version: 0.14.1
+      prettier-plugin-organize-imports:
+        specifier: ^4.3.0
+        version: 4.3.0(prettier@3.8.1)(typescript@5.9.3)
       prettier-plugin-tailwindcss:
         specifier: ^0.7.2
-        version: 0.7.2(prettier-plugin-astro@0.14.1)(prettier@3.8.1)
+        version: 0.7.2(prettier-plugin-astro@0.14.1)(prettier-plugin-organize-imports@4.3.0(prettier@3.8.1)(typescript@5.9.3))(prettier@3.8.1)
       sharp:
         specifier: ^0.34.5
         version: 0.34.5
@@ -2939,6 +2942,16 @@ packages:
     resolution: {integrity: sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==}
     engines: {node: ^14.15.0 || >=16.0.0}
 
+  prettier-plugin-organize-imports@4.3.0:
+    resolution: {integrity: sha512-FxFz0qFhyBsGdIsb697f/EkvHzi5SZOhWAjxcx2dLt+Q532bAlhswcXGYB1yzjZ69kW8UoadFBw7TyNwlq96Iw==}
+    peerDependencies:
+      prettier: '>=2.0'
+      typescript: '>=2.9'
+      vue-tsc: ^2.1.0 || 3
+    peerDependenciesMeta:
+      vue-tsc:
+        optional: true
+
   prettier-plugin-tailwindcss@0.7.2:
     resolution: {integrity: sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==}
     engines: {node: '>=20.19'}
@@ -6885,11 +6898,17 @@ snapshots:
       prettier: 3.8.1
       sass-formatter: 0.7.9
 
-  prettier-plugin-tailwindcss@0.7.2(prettier-plugin-astro@0.14.1)(prettier@3.8.1):
+  prettier-plugin-organize-imports@4.3.0(prettier@3.8.1)(typescript@5.9.3):
+    dependencies:
+      prettier: 3.8.1
+      typescript: 5.9.3
+
+  prettier-plugin-tailwindcss@0.7.2(prettier-plugin-astro@0.14.1)(prettier-plugin-organize-imports@4.3.0(prettier@3.8.1)(typescript@5.9.3))(prettier@3.8.1):
     dependencies:
       prettier: 3.8.1
     optionalDependencies:
       prettier-plugin-astro: 0.14.1
+      prettier-plugin-organize-imports: 4.3.0(prettier@3.8.1)(typescript@5.9.3)
 
   prettier@3.8.1: {}
 

prettier.config.mjs

@@ -1,6 +1,10 @@
 /** @type {import("prettier").Config} */
 export default {
-  plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  plugins: [
+    "prettier-plugin-astro",
+    "prettier-plugin-organize-imports",
+    "prettier-plugin-tailwindcss",
+  ],
 
   overrides: [
     {

src/components/button-link.astro

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

src/components/external-link.astro

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

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

@@ -1,17 +1,20 @@
 ---
-import type { SvgComponent } from "astro/types";
+import type { HTMLAttributes, SvgComponent } from "astro/types";
 
-interface Props {
+interface Props extends HTMLAttributes<"svg"> {
   SvgComponent: SvgComponent;
-  size?: number;
 }
 
-const { size = 24, SvgComponent } = Astro.props;
+const {
+  SvgComponent,
+  class: className,
+  role = "presentation",
+  ...rest
+} = Astro.props;
 ---
 
 <SvgComponent
-  height={size}
-  width={size}
-  fill="currentColor"
-  role="presentation"
+  class:list={[className, "inline h-[1em]"]}
+  {role}
+  {...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 ExternalLink from "../components/external-link.astro";
-import InlineSvg from "../components/inline-svg.astro";
+import ButtonLink from "../components/button-link.astro";
 import GitHubLogo from "../images/GitHub.svg";
 import GitLabLogo from "../images/GitLab.svg";
 import KeyoxideLogo from "../images/Keyoxide.svg";
@@ -32,54 +31,84 @@ import BaseLayout from "../layouts/BaseLayout.astro";
             <a href="/skills">Skills</a>
           </li>
           <li>
-            <ExternalLink
-              cssClass="link-matrix"
+            <ButtonLink
+              class="link-matrix"
               href="https://matrix.to/#/@kmoschcau:matrix.org"
               title="Mein Matrix-Konto"
+              external
             >
-              <InlineSvg SvgComponent={MatrixLogo} slot="logo" />
+              <MatrixLogo
+                class="size-6"
+                fill="currentColor"
+                role="presentation"
+                slot="logo"
+              />
               <span>@kmoschcau:matrix.org</span>
-            </ExternalLink>
+            </ButtonLink>
           </li>
           <li>
-            <ExternalLink
-              cssClass="link-github"
+            <ButtonLink
+              class="link-github"
               href="https://github.com/kmoschcau/"
               title="Mein GitHub-Konto"
+              external
             >
-              <InlineSvg SvgComponent={GitHubLogo} slot="logo" />
+              <GitHubLogo
+                class="size-6"
+                fill="currentColor"
+                role="presentation"
+                slot="logo"
+              />
               <span>kmoschcau</span>
-            </ExternalLink>
+            </ButtonLink>
           </li>
           <li>
-            <ExternalLink
-              cssClass="link-gitlab"
+            <ButtonLink
+              class="link-gitlab"
               href="https://gitlab.com/kmoschcau"
               title="Mein GitLab-Konto"
+              external
             >
-              <InlineSvg SvgComponent={GitLabLogo} slot="logo" />
+              <GitLabLogo
+                class="size-6"
+                fill="currentColor"
+                role="presentation"
+                slot="logo"
+              />
               <span>kmoschcau</span>
-            </ExternalLink>
+            </ButtonLink>
           </li>
           <li>
-            <ExternalLink
-              cssClass="link-linked-in"
+            <ButtonLink
+              class="link-linked-in"
               href="https://www.linkedin.com/in/kmoschcau/"
               title="Mein LinkedIn-Konto"
+              external
             >
-              <InlineSvg SvgComponent={LinkedInLogo} slot="logo" />
+              <LinkedInLogo
+                class="size-6"
+                fill="currentColor"
+                role="presentation"
+                slot="logo"
+              />
               <span>kmoschcau</span>
-            </ExternalLink>
+            </ButtonLink>
           </li>
           <li>
-            <ExternalLink
-              cssClass="link-keyoxide"
+            <ButtonLink
+              class="link-keyoxide"
               href="https://keyoxide.org/8CE00E9495B5030DA9217208DF16F424177090BB"
               title="Mein Keyoxide-Eintrag"
+              external
             >
-              <InlineSvg SvgComponent={KeyoxideLogo} slot="logo" />
+              <KeyoxideLogo
+                class="size-6"
+                fill="currentColor"
+                role="presentation"
+                slot="logo"
+              />
               <span>Keyoxide</span>
-            </ExternalLink>
+            </ButtonLink>
           </li>
         </ul>
       </nav>

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,8 +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 href="/" title="Zurück" class="text-soft"
-          ><BackIcon class="size-9" /></a
+        <a href="/" title="Zurück" class="text-soft rounded-full"
+          ><ArrowLeftCircle class="size-9" /></a
         >
         <h1>Skills</h1>
       </div>
@@ -107,9 +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"
-                >AWS Certified Solutions Architect – Associate</a
+                external
+                >AWS Certified Solutions Architect – Associate</InlineLink
               >, AWS, GCP, Azure, CloudFormation, HashiCorp Terraform)
             </li>
             <li>