kmoschcau/kmoschcau.de-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor inline links and use heroicons

Browse Source
This commit is contained in:
Kai Moschcau
2026-04-01 21:03:52 +02:00
parent d9d87daf7e
commit 62339b4f33
7 changed files with 54 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/inline-link.astro Normal file
View File

@@ -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
>

10
src/components/inline-svg.astro
View File

@@ -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}
height={height ?? size}
class:list={[className, "inline h-[1em]"]}
{role}
width={width ?? size}
{...rest}
/>

3
src/icons/arrow-left-circle.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 265 B

3
src/icons/arrow-top-right-on-square.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 316 B

8
src/icons/back.svg
View File

@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 292 B

26
src/pages/index.astro
View File

@@ -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
SvgComponent={MatrixLogo}
<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
SvgComponent={GitHubLogo}
<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
SvgComponent={GitLabLogo}
<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
SvgComponent={LinkedInLogo}
<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
SvgComponent={KeyoxideLogo}
<KeyoxideLogo
class="size-6"
fill="currentColor"
role="presentation"
slot="logo"
/>
<span>Keyoxide</span>

17
src/pages/skills.astro
View File

@@ -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
href="/"
title="Zurück"
class="text-soft rounded-full outline-offset-2"
><BackIcon class="size-9" /></a
<a href="/" title="Zurück" class="text-soft rounded-full"
><ArrowLeftCircle 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"
rel="external me nofollow noreferrer"
>AWS Certified Solutions Architect – Associate</a
external
>AWS Certified Solutions Architect – Associate</InlineLink
>, AWS, GCP, Azure, CloudFormation, HashiCorp Terraform)
</li>
<li>