#digitalGarden #frontend #backendDevelopment #minio

If you have read this blog at all in the past or even the present you would notice none of the posts before this one have images. i outlined a bit of how this blog works in Building My Digital Garden, but i never added any media support. That changes now!

This is definitely more complicated than it needs to be on many levels, but imo part of making your own stuff is experimenting and doing things your way!

1. When the vault is synced by the obsidian plugin, every file gets serialized. The vault name and non-binary (like me!) data is jsonified and everything is stuffed into FormData.
2. The media for each node is also sent in a serialized form for the DB.
3. the FormData is read by the backend. createOrUpdateNodes is called on the nodes
4. createOrUpdateMedia is called for the media, which uploads the image to the minio bucket and adds a record to the media table so we know which node it belongs to. This way we can save a single item in the bucket and reference it from multiple nodes if needed.

The frontend uses the /api/blog endpoint of the backend which returns only vault nodes that are marked as #published. SvelteMarkdown takes the markdown content and renders it. It has a really nice feature that i was missing with mdsvex that allows you to pass in a custom renderer to render any markdown tag as you see fit. The same could be done with mdsvex and remark plugins but i think the renderer approach was way faster.

Everything is hosted on my k3s cluster at home which is why the images are being fetched the way they are: i want to expose the least a mount of stuff to the internet as possible.

i haven't open sourced the media part yet, and maybe i won't get around to it. Honestly at this point if i touch the project again i will probably redesign the whole thing.

Thanks for reading. Hopefully i will want to write more blogposts now that i can use images in them :).