mdsvex.config.js

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

src/lib/components/HoverIcon.svelte

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

src/lib/components/MdsvexLayout.svelte

@@ -1,11 +0,0 @@
-<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"
-					alt={route.label}
+					text={route.href}
 					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" />
+		<HoverIcon src={customIcon ?? tryGetIcon(href)} class="text-sm uppercase" text={href} />
 	</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 no-underline" target={isLinkLocal(href) ? '_self' : '_blank'}>
+<a {href} class="{className} group inline-block" 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)} size={sm.current ? 24 : 20} />
+		<HoverIcon src={customIcon ?? tryGetIcon(href)} text={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-yellow-500"
+	bgStrong="bg-amber-500"
-	bgBleak="bg-yellow-50"
+	bgBleak="bg-amber-50"
 	icon="material-symbols:warning"
 	caption="Внимание"
 >

src/lib/util/LinkResolver.ts

@@ -1,4 +1,3 @@
-// TODO: чашки на иконках выглядят страшненько, пока что пусть лучше будет голая ссылка
 const icons: Record<string, string> = {
     none: 'material-symbols:link',
     'steamcommunity.com': 'simple-icons:steam',
@@ -13,10 +12,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,17 +72,18 @@
 
 <article
 	class="prose
-		sm:prose-xl
+		lg:prose-lg
-		prose-slate
+		prose-a:text-blue
+		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
-		prose-headings:font-disket
+		mx-auto
-		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
-		p-4
+		bg-white
-		text-slate-950
+		p-4 lg:p-8"
-		sm:text-xl lg:p-8"
 >
 	<svelte:component this={data.content} />
 </article>

svelte.config.js

@@ -1,13 +1,8 @@
 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 = {
@@ -39,10 +34,7 @@ const config = {
 	extensions: ['.svelte', '.md'],
 	preprocess: [
 		vitePreprocess(),
-		mdsvex({
+		mdsvex(mdsvexConfig),
-			extensions: ['.md'],
-			layout: join(__dirname, "./src/lib/components/MdsvexLayout.svelte")
-		}),
 		autoImport({
 			include: ['**/*.(svelte|md)'],
 			components: ['./src/lib/components/', { name: './src' }]