I'm trying to have a list of short blogs with markdown bodies, that get fetched and rendered on scroll.
Looking around here I found this: https://stackblitz.com/edit/github-bdfozd?file=src%2Fpages%2Findex.astro
which uses an iframe to load an astro component, but this is a workaround and has limitations, since it creates a new document.
Another option would be to render it using a client side markdown rendering library. Also not ideal, since that's a rather large chunk of JS.
Are there any other ways?
Ideally there would be a way to define an Astro component that gets rendered on the server or statically, and can be fetched and injected by the client.
#Infinite scroll with markdown
1 messages · Page 1 of 1 (latest)
or render all posts on static separate htmls, and have your lazy loader fetch html and inject them.
But if I do that, the response contains a whole HTML document with tailwind classes and a bunch of other stuff. On my small site a file with <h1>hello</h1> is 20kb.
Is there a way to have astro send just the rendered HTML body? Perhaps serialize it in some way?
no, I do not think Astro is intended for this purpose, it's an interesting use case though. This is the closest I can get you to, there is a community repo for remote markdown support in Astro, with it you could figure out a way to render dynamically and send to your client https://github.com/MicroWebStacks/astro-examples#23_remote-markdown
Thank you for answering my questions!
The solution was relatively simple: I created a static file endpoint, where I render the markdown using marked, and send the HTML inside of this SSG'd json file to the client. Seems to be working well.
For future reference, here's my code
client: https://github.com/tomasz13nocon/karolina/blob/dbc64dad48be81b68c3156694f780bb79d228674/src/components/BlogList.astro#L48
server: https://github.com/tomasz13nocon/karolina/blob/dbc64dad48be81b68c3156694f780bb79d228674/src/pages/diary/[chunk].json.ts