---
title: "The creation of this Blog"
date: 2025-09-12
desc: "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."
listed: true
img_cov: blog-1.jpg
---


# Static side generation
The stack consists of:
- [svelte + svelte-kit](https://svelte.dev/docs/kit/introduction)
- [mdsvex](https://mdsvex.pngwn.io/) 
- [static adapter](https://svelte.dev/docs/kit/adapter-static)

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

![Tasd|20rem](/blog-covers/blog-1.png)

# 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:

```ts
//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:
```ts
<script context="module">
	import img from './img.svelte';
	export { img };
</script>
```

This is desctibed in furhter details by the [mdsvex docs](https://mdsvex.pngwn.io/docs#custom-components)
and this [issue](https://github.com/pngwn/MDsveX/discussions/292).

# Colors

I love the [rose pine](https://rosepinetheme.com/) color palette. I use it privatly for some applications,
and think it improves this blog too.
Both the [prism theme](https://github.com/rose-pine/prism) and [color palette](https://github.com/rose-pine/rose-pine-palette)
can be added as npm package and used without compications.