feat: add Email link component

src/components/EmailLink.astro

@@ -0,0 +1,44 @@
+---
+import { Sprite } from 'astro-icon';
+
+import { TextLink } from '../components';
+
+export interface Props {
+	text?: string;
+}
+
+const { text = 'Email', ...props } = Astro.props;
+---
+
+<TextLink class="group" href="#protected-email" data-email-link {...props}>
+	{text}
+	<span
+		class="more-icon relative inline-flex mis-[0.2em] inline-start-[0.2em] block-start-[0.3em]"
+	>
+		<Sprite
+			name="ri:mail-send-line"
+			aria-hidden="true"
+			class="h-icon w-icon group-hover:translate-x-1 transition-transform duration-500 ease-in-out"
+		/>
+	</span>
+</TextLink>
+
+<script>
+	function handleClick(event: Event) {
+		event.preventDefault();
+		const currentTarget = event.currentTarget;
+		if (currentTarget instanceof HTMLElement) {
+			const { name, domain, tld } = currentTarget.dataset;
+			if (name && domain && tld) {
+				const mailto = `mailto:${name}@${domain}.${tld}`;
+				window.open(mailto, '_blank');
+			}
+		}
+	}
+
+	const links = document.querySelectorAll('[data-email-link]');
+
+	links.forEach((link) => {
+		link.addEventListener('click', handleClick);
+	});
+</script>

src/components/index.ts

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import DownloadLink from './DownloadLink.astro';
+import EmailLink from './EmailLink.astro';
 import MoreLink from './MoreLink.astro';
 
 export * from './AffiliateLink';
@@ -26,4 +27,4 @@ export * from './Title';
 export * from './UnorderedList';
 export * from './Verse';
 export * from './YouTubeVideo';
-export { DownloadLink, MoreLink };
+export { DownloadLink, EmailLink, MoreLink };

src/mdx-components.ts

@@ -6,6 +6,7 @@ import {
 	ColorSwatch,
 	Divider,
 	DownloadLink,
+	EmailLink,
 	Flag,
 	Headline,
 	Image,
@@ -33,6 +34,7 @@ export const mapping = {
 	Book,
 	ColorSwatch,
 	DownloadLink,
+	EmailLink,
 	Flag,
 	h1: Title,
 	h2: Headline,

src/pages/imprint.mdx

@@ -3,15 +3,14 @@ layout: ../layouts/PageLayout.astro
 title: Imprint
 ---
 
-import { mapping } from '../mdx-components.ts';
+import { mapping } from "../mdx-components.ts";
 export const components = mapping;
 
 ### Contact Person
 
-Stefan Imhoff \
+Stefan Imhoff<br />
-Walter-Heitmann-Str. 2 \
+Walter-Heitmann-Str. 2<br />
-22159 Hamburg \
+22159 Hamburg<br /><><EmailLink data-domain="stefanimhoff" data-name="hey" data-tld="de" text="Contact" /></>
-[Contact](#)
 
 ### License