Переработал обработчик иконок для гиперссылок

This commit is contained in:
Иван Кузьменко 2025-07-05 05:57:27 +03:00
parent 418892b3a4
commit df54426a75
5 changed files with 143 additions and 104 deletions

View file

@ -1,6 +1,7 @@
<script lang="ts">
import { MediaQuery } from 'svelte/reactivity';
import HoverIcon from './HoverIcon.svelte';
import { tryGetIcon } from '$lib/util/IconResolver';
export let href: string;
let className: string = '';
@ -8,60 +9,13 @@
export let customIcon: string | null = null;
const sm = new MediaQuery('width >= 40rem', false);
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 group" target="_blank">
<span class="inline-block {sm.current ? 'size-8 rounded-xl p-1' : 'size-6 rounded-sm p-0.5'} bg-emerald-800 align-bottom transition-all group-hover:scale-110">
<HoverIcon
src={customIcon ?? tryGetIcon(href)}
text={host}
text={href}
size={sm.current ? 24 : 20}
/>
</span>