flexdinesh / blogster

A collection of beautiful, accessible and performant Astro blog templates.
https://blogster-sleek.netlify.app
MIT License
609 stars 74 forks source link

Hot reload markdown content #21

Open ferntheplant opened 1 year ago

ferntheplant commented 1 year ago

Hi I'm very new to astro and was wondering if there's a way to get the markdown content itself to hot reload. The astro templates do hot reload when editing directly but not the blog content which I have to do a pge refresh to see. I'd love to edit the content with realtime updates to see how it would look like on prod instead of in my editor built in markdown preview tool (github styled)

jjaimealeman commented 1 year ago

Check out this VS Code extension called FrontMatter https://frontmatter.codes/

Setup is a pain, but well worth it!

James Q Quick features a one hour long video with the lead developer of FrontMatter. At the 56 minute 09 second mark, he shows the live preview with hot reloading https://www.youtube.com/watch?v=aCkkEDsJgL0&t=3369s

ferntheplant commented 1 year ago

Oh thanks for the suggestion. This extension is crazy featureful!

I got the live side-by-side preview running but unfortunately it has the same problem as a normal website: there is no hot reloading of the .md content. I believe this has to do with the way this blog template reads files in src/lib/markdoc/read.ts not refreshing with HMR. Now that I think about I'm not sure how I would get the astro dev server to detect a change in the content folder...

jjaimealeman commented 1 year ago

James Q Quick has an Astro Course coming up. I heard him mention it a few times on his podcast https://astrocourse.dev/

He said recently it'll be a few more weeks, so estimated early June 👍

Hopefully then, or by then, someone comes up with a solution to the HMR for MD files.

In the meantime, check out the current issues, perhaps it's already been mentioned?

https://github.com/estruyf/vscode-front-matter/issues