Начальный коммит

src/lib/components/SocialHyperlink.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import HoverIcon from './HoverIcon.svelte';
+
+	export let href: string;
+	let className: string = '';
+	export { className as class };
+	export let customIcon: string | null = null;
+
+	let url: URL;
+	let host: string;
+
+	const icons: Record<string, string> = {
+		none: 'material-symbols:link',
+		'steamcommunity.com': 'simple-icons:steam',
+		'twitter.com': 'simple-icons:x',
+		'x.com': 'simple-icons:x',
+		'github.com': 'simple-icons:github',
+		'youtube.com': 'simple-icons:youtube',
+		'itch.io': 'simple-icons:itchdotio',
+		'discord.gg': 'simple-icons:discord',
+		'gamebanana.com': 'simple-icons:gamebanana',
+		// https://хамяк.рф
+		'xn--80auf8a2c.xn--p1ai': 'fluent-emoji-high-contrast:hamster',
+		'teasanctuary.ru': '/icons/tea-sanctuary.svg',
+		'hl.teasanctuary.ru': '/icons/half-life.svg',
+		localhost: '/icons/tea-sanctuary.svg',
+		email: 'material-symbols:alternate-email'
+	};
+
+	function getHost(url: URL) {
+		const isEmail = url.href.startsWith('mailto:');
+		const hostname = isEmail ? 'email' : url.hostname;
+		// const split = hostname.split('.');
+		// const name = split[Math.max(split.length - 2, 0)];
+		// if (split.length > 1) return `${name}.${split[split.length - 1]}`;
+
+		// return name;
+		return hostname;
+	}
+
+	function tryGetIcon(link: string) {
+		try {
+			url = new URL(link);
+			host = getHost(url).replace(/\.com$/, '');
+		} catch {
+			return icons['none'];
+		}
+
+		let domain = getHost(url).toLocaleLowerCase();
+		let key = Object.keys(icons).find((key) => key == domain);
+		if (key == null) return icons['none'];
+
+		return icons[key];
+	}
+</script>
+
+<a {href} class="{className} inline-block ml-1 mr-1 group" target="_blank">
+	<span class="inline-block size-8 shrink-0 rounded-xl bg-emerald-800 p-1 align-bottom transition-all group-hover:scale-110">
+		<HoverIcon
+			src={customIcon ?? tryGetIcon(href)}
+			text={host}
+			size={24}
+		/>
+	</span>
+	<span class="items-center justify-center rounded-r-xl text-emerald-900 underline">
+		<slot />
+	</span>
+</a>
+
+<style></style>