I am sitting here trying to decide if it is wrong to embed my images/videos in markdown using an MDX component or keep the Markdown "pure" so that it will be able to be read fully on GitHub and DEV (dev.to). Anyone have thoughts on this, should i keep all of the main video/thumbnail of a blog in a separate frontmatter area, or just start adding all the components, similar to how DEV uses liquid tags?
With the front matter I will still need to parse the front matter and most likely store it in Firestore as a item anyways like below
If you have ever uploaded a photo on DEV it immediately gives you the markdown to insert after loading up to S3 like below. This is cool and makes sense for an image that doesn't need to lazy load on the web, and actually we leverage Cloudinary so it handles some of this for us on the new CodingCatDev site. But it is also nice for an end user to not load this image on page load and instead use a loading image like on Gatsby (which will soon be available on Next.js).
Now the goal is to have lessons that will allow you to stay within the same course. To me this means there is a main video that you will want, but again should this be done in an MDX component at the top, or in the world of react would it make more sense to pass the stored video from the frontmatter over to a prop where the video already lives. For other videos within the lesson or Blog I think it makes total sense to have that in the MDX we store. So we can do cool stuff like below.
I love everything about MDX and want to use it, but what are the long term ramifications of putting components in markdown?
Top comments (0)