Standardize how posts are rendered

[felixsanz]

Hi! You're using <svelte:component this={page}/> inside [email protected] to output the posts. But that looks weird to me! Why you do not use {@html post.html} ?

[matfantinel]

The way posts are fetched on that file (const allPosts = import.meta.globEager('../../lib/posts/*.md')) does not return their rendered HTML, instead they return a component instance with a render function, which is exactly what <svelte:component> needs.

If you add console.logs inside that <script context="module"> code you can see the output of the server inside the terminal you use to run the app! See below:

That being said, I'm thinking about revisiting the way posts are displayed in the future. I know there have been a lot of improvements to SvelteKit since I first wrote that code.

[felixsanz]

@matfantinel But here you are rendering them and exporting it:

https://github.com/matfantinel/matfantinel.github.io/blob/main/src/lib/posts.js#L13

const posts = [];
for (const path in imports) {
	const post = imports[path];
	if (post) {
		posts.push({
			...post.metadata,
			...post.default.render()
		});
	}
}

Why you don't use this? Looks like you are mixing both different methods to do the same in different places

[matfantinel]

Hmmm yeah that makes sense. I think I changed approaches halfway during development and ended up with different ones by the end.

Gonna edit the Issue to reflect this and have it as a to-do. Thanks for the feedback!

[matfantinel]

So, I was working to fix this, and ended up remembering why I did it like this in the first place.

I am rendering it with post.default.render() to be able to get the HTML on the server and calculate its readingTime. Using {@html post.html} unfortunately does not work as it does not render the child components correctly (or at least not the ones with some JS, like the SparklingHighlight).