How can I build interactive blog post
hello friends I'm planning to build an interactive blog where I'm completely free to build interactive components in JS and insert them efficiently into the html
it's trivial to do if I'm using just html but I feel like inserting all the text into HTML is a bit unstable, so is there like a typical way people do this?
Like, specific technologies to do this with as little friction as possible, while still having good flexibility with the interactivity
I'm quite impressed by websites like https://distill.pub/, and frankly I want to build something similar.
14 Replies
Alternatively if someone can help me figure out how they build blog posts in distill.pub, that would be splendid
Building a simple blog post is easy, you can just use markdown.
If you want to make things a little more interactive you will need some JS but start with markdown it will get you far
wouldn't it be a pain in the ass to add interactive "components" to a markdown based website?
Not really.
You write the body, the main part of the blog post in markdown.
Lets say you want to add a navigation component like the trpc docs sidebar, it's just links with anchor tags and if you'd want for example add scroll animation you'd use a library like react-scroll and just like that you have an interactive blog post.
and it won't be challenging to add interactive diagrams in between paragraphs?
What do you mean exactly by interactive diagrams?
Simple Animations, or the user can drag around diagrams?
like in https://distill.pub/, they often have interactive diagrams to explain the concept they just explain. Could be a graph that depends on a certain button you click, or an animation of a certain process over time, or a simulation.
these are inbetween and part of the blog post, not part of the website
with html / javascript, it's trivial since you're just adding an html component. But in markdown, it's not immediately clear to me if it's gonna be a pain in the ass to add these "in-between" components
Yeah i see what you mean.
The hard part is creating the diagram
Not sure how it's built i haven't worked with diagrams like those.
After you figure out how to create those diagrams its easy to place it "in-between"
There are alot of ways of doing it.
but let's say I'm able to create those diagrams in some javascript file. Would it be a pain in the ass to add that as an html component in a markdown-first blog post?
You can check the trpc docs they managed to do it vey nicely
oh I see
but what markdown blog post frameworks would you first recommend to use? Ones that aren't a pain in the ass to insert arbrirary html components into
You simply create the diagram as a react component and then put it inside the markdown like so
The way trpc have done it is the most clean approach i've seen.
Another approach would be contentlayer. Here is a great tutorial explaining it. https://youtu.be/YC6LqIYVHxI
Josh tried coding
YouTube
My Favorite Way to Use Markdown in NextJS
Markdown is so nice for building fast, static pages. It has so many use cases too. Blog? Legal pages? Course content? Markdown or MDX (React components inside of markdown) got your back. This is by far the coolest way to use Markdown inside of your NextJS project I've ever seen.
Repo I learned this from: https://github.com/shadcn/taxonomy
My G...
interesting
I'll check it out thanks!