The creation of this Blog

The goal was to create an easy to maintain blog with while the main focus relays on keeping the effort to write new posts minimal. This is more a ressource summery with tips, than an full tutorial.

Static side generation

The stack consists of:

• svelte + svelte-kit
• mdsvex
• static adapter

The core functionallity provides which allow you to combine svelte and markdown.

Image sizing

I want to be able to rezise an image in markdown without using HTML, just like in obsidian, by declaring the width after the alt text ![some alt text|<width>](/some-image.png). To archive that I replace every img that that mdsvex creates with some new written img component:

//img.svelte
<script lang="ts">
	export let src;
	export let alt;

	let width;
	[alt, width = '20rem'] = alt.split('|');
</script>

<img {src} style="width:{width}; max-width:100%; margin:auto; display:block" {alt} />

And then needs to be imported in the mdsvex layout:

<script context="module">
	import img from './img.svelte';
	export { img };
</script>

This is desctibed in furhter details by the mdsvex docs and this issue.

Colors

I love the rose pine color palette. I use it privatly for some applications, and think it improves this blog too. Both the prism theme and color palette can be added as npm package and used without compications.