Временно убрал чашки у ссылок с иконкой

mdsvex.config.js

@@ -1,3 +0,0 @@
-export default {
-	extensions: ['.md']
-};

src/lib/components/HoverIcon.svelte

@@ -4,29 +4,35 @@
 	let className: string = '';
 	export { className as class };
 	export let src: string | null = null;
-	export let text: string;
+	export let alt: string | undefined = undefined;
 	export let size: number = 32;
 	export let black: boolean = false;
 
-	let isUrl;
+	function isUrl(src?: string) {
-	$: isUrl = src?.startsWith('/') || src?.startsWith('http');
+		return src?.startsWith('/') || src?.startsWith('http');
+	}
 </script>
 
-<div
+<span class="{className} {black ? 'fill-slate-950' : 'fill-slate-50'} hover-icon">
-	class="{className} {black
-		? 'fill-slate-950'
-		: 'fill-slate-50'} text-sm uppercase transition-all"
->
 	{#if src}
-		{#if isUrl}
+		{#if isUrl(src)}
-			<img {src} alt={text} width={size} height={size} />
+			<img {src} {alt} width={size} height={size} />
 		{:else}
 			<Icon width={size} height={size} icon={src} color={black ? '#020618' : '#f8fafc'} />
 		{/if}
 	{:else}
-		{text}
+		{alt ?? 'Без иконки'}
 	{/if}
-</div>
+</span>
 
 <style>
+	@import '$src/app.css';
+
+	.hover-icon {
+		@apply text-sm uppercase transition-all;
+
+		img {
+			margin: 0;
+		}
+	}
 </style>

src/lib/components/MdsvexLayout.svelte

@@ -0,0 +1,11 @@
+<script lang="ts" module>
+	import SocialHyperlink from './SocialHyperlink.svelte';
+
+	export { SocialHyperlink as a };
+</script>
+
+<script lang="ts">
+	const { children, ...rest } = $props();
+</script>
+
+{@render children()}

src/lib/components/NavBar.svelte

@@ -20,7 +20,7 @@
 				<HoverIcon
 					src={route.icon}
 					class="text-sm uppercase"
-					text={route.href}
+					alt={route.label}
 					size={32}
 					black={!isActive(route.href)}
 				/>

src/lib/components/SocialButton.svelte

@@ -14,7 +14,7 @@
 	target={isLinkLocal(href) ? '_self' : '_blank'}
 >
 	<div class="shrink-0 rounded-l-xl bg-slate-800 p-2">
-		<HoverIcon src={customIcon ?? tryGetIcon(href)} class="text-sm uppercase" text={href} />
+		<HoverIcon src={customIcon ?? tryGetIcon(href)} class="text-sm uppercase" />
 	</div>
 	<div
 		class="flex shrink-0 grow flex-nowrap items-center justify-center rounded-r-xl bg-slate-100 p-2 text-2xl text-nowrap text-slate-950"

src/lib/components/SocialHyperlink.svelte

@@ -11,11 +11,11 @@
 	const sm = new MediaQuery('width >= 40rem', false);
 </script>
 
-<a {href} class="{className} group inline-block" target={isLinkLocal(href) ? '_self' : '_blank'}>
+<a {href} class="{className} group inline-block no-underline" target={isLinkLocal(href) ? '_self' : '_blank'}>
 	<span
 		class="inline-block size-6 rounded-sm bg-emerald-800 p-0.5 align-bottom transition-all group-hover:scale-110 sm:size-8 sm:rounded-xl sm:p-1"
 	>
-		<HoverIcon src={customIcon ?? tryGetIcon(href)} text={href} size={sm.current ? 24 : 20} />
+		<HoverIcon src={customIcon ?? tryGetIcon(href)} size={sm.current ? 24 : 20} />
 	</span>
 	<span class="text-emerald-900 underline">
 		<slot />

src/lib/components/WarningBlock.svelte

@@ -3,8 +3,8 @@
 </script>
 
 <IconBlock
-	bgStrong="bg-amber-500"
+	bgStrong="bg-yellow-500"
-	bgBleak="bg-amber-50"
+	bgBleak="bg-yellow-50"
 	icon="material-symbols:warning"
 	caption="Внимание"
 >

src/lib/util/LinkResolver.ts

@@ -1,3 +1,4 @@
+// TODO: чашки на иконках выглядят страшненько, пока что пусть лучше будет голая ссылка
 const icons: Record<string, string> = {
     none: 'material-symbols:link',
     'steamcommunity.com': 'simple-icons:steam',
@@ -12,10 +13,10 @@ const icons: Record<string, string> = {
     'bsky.social': 'simple-icons:bluesky',
     // https://хамяк.рф
     'xn--80auf8a2c.xn--p1ai': 'fluent-emoji-high-contrast:hamster',
-    'teasanctuary.ru': '/icons/tea-sanctuary-white.svg',
+    // 'teasanctuary.ru': '/icons/tea-sanctuary-white.svg',
     'hl.teasanctuary.ru': '/icons/half-life.svg',
     'git.teasanctuary.ru': 'devicon-plain:git',
-    localhost: '/icons/tea-sanctuary-white.svg',
+    // localhost: '/icons/tea-sanctuary-white.svg',
     email: 'material-symbols:alternate-email',
     rss: 'material-symbols:rss-feed'
 };

src/routes/blog/[slug]/+page.svelte

@@ -72,18 +72,17 @@
 
 <article
 	class="prose
-		lg:prose-lg
+		sm:prose-xl
-		prose-a:text-blue
+		prose-slate
-		prose-a:decoration-2
-		prose-a:underline-offset-2
-		hover:prose-a:text-lightblue
-		hover:prose-a:transition-all
 		prose-code:break-words
 		prose-pre:drop-shadow-md
-		mx-auto
+		prose-headings:font-disket
+		prose-headings:mb-4
+		prose-headings:text-2xl prose-headings:font-bold prose-headings:sm:text-4xl prose-headings:text-slate-950 mx-auto
 		w-5xl
-		bg-white
+		p-4
-		p-4 lg:p-8"
+		text-slate-950
+		sm:text-xl lg:p-8"
 >
 	<svelte:component this={data.content} />
 </article>

svelte.config.js

@@ -1,8 +1,13 @@
 import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { mdsvex } from 'mdsvex';
-import mdsvexConfig from './mdsvex.config.js';
 import autoImport from 'sveltekit-autoimport';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+// https://flaviocopes.com/fix-dirname-not-defined-es-module-scope/
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -34,7 +39,10 @@ const config = {
 	extensions: ['.svelte', '.md'],
 	preprocess: [
 		vitePreprocess(),
-		mdsvex(mdsvexConfig),
+		mdsvex({
+			extensions: ['.md'],
+			layout: join(__dirname, "./src/lib/components/MdsvexLayout.svelte")
+		}),
 		autoImport({
 			include: ['**/*.(svelte|md)'],
 			components: ['./src/lib/components/', { name: './src' }]