#Infinite scroll with markdown

1 messages · Page 1 of 1 (latest)

unkempt hedge
#

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.

Run official live example code for Astro Basics, created by Withastro on StackBlitz

outer cove
#

or render all posts on static separate htmls, and have your lazy loader fetch html and inject them.

unkempt hedge
#

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?

outer cove
#

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

unkempt hedge
#

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