57 lines
1.8 KiB
Plaintext
57 lines
1.8 KiB
Plaintext
---
|
|
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.
|
|
|
|
|
|
|
|
# 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 ``.
|
|
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.
|