DEV Community

Cover image for Embed dev.to posts into your own website

Embed dev.to posts into your own website

Nuno Góis on June 19, 2022

I very recently wrote my very first post on dev.to - DEV Community, and there I mentioned integrating my dev.to posts into my own website. So here ...
Collapse
 
psypher1 profile image
James 'Dante' Midzi

Can you tell me where you got body_html?

I am trying to do the same with my Astro project

Collapse
 
nunogois profile image
Nuno Góis

Sure, when you fetch a single article from the slug, like this: dev.to/api/articles/nunogois/hello... - You'll see that the object it returns also includes this body_html property.

I believe in Astro you can then use set:html={body_html} in the element you wish to add the HTML. Let me know how it works and feel free to share the final result afterwards! I also want to try out Astro soon :)

Collapse
 
psypher1 profile image
James 'Dante' Midzi

The specific endpoint, I see...

From my testing, I have found this:
This endpoint: https://dev.to/api/articles?username=psypher1 gets my articles but without the body_html

That for some reason is only on the specific paths when you know the path you're trying to get, which presents issues with the way Astro fetches things (needs to know all the paths).... I would need an endpoint that exposes all the post information

Thread Thread
 
psypher1 profile image
James 'Dante' Midzi

Also, looking deeper at your code, the key part is page.params.slug

I'll work on reverse engineering that for my getStaticPaths

Thread Thread
 
nunogois profile image
Nuno Góis

Hmm, if that's the case I guess you can always fetch everything at once (loop through the articles and fetch their respective information) - That way you would end up with the complete dataset at the start/build time.

You can also check the API docs - Maybe there's a solution for your specific use case where the article info is expanded.

Like I said I'm not familiar with Astro yet, but it feels like it should have a solution for this specific use-case. These resources might help:

Thread Thread
 
psypher1 profile image
James 'Dante' Midzi

Thank you for this...

It's not the dynamic pages that are the issue - that I can do...

The url I need is one with all posts with all the content... I'll have a dig around the docs

Thread Thread
 
psypher1 profile image
James 'Dante' Midzi

Hey @nunogois

I got it! The docs were the key... for Astro I have to use this one https://dev.to/api/articles/me/published with an API key

I can write my article now

Thread Thread
 
nunogois profile image
Nuno Góis

Great that you got it, thanks for sharing! 🙂

Thread Thread
 
psypher1 profile image
James 'Dante' Midzi

Thank you for the help

Collapse
 
nunogois profile image
Nuno Góis

I've since updated my website to add some more CSS rules to properly render this new post - Things like syntax highlighting and the Twitter embed.
This is how this post looks like there: nunogois.com/blog/embed-devto-post...

Next step: Figuring out how to add a webhook to automatically trigger a website build whenever I publish a new post!

Collapse
 
steinbring profile image
Joe Steinbring

Very cool! I am doing something like that with my website but since I'm going for more of an "activity feed" type of thing, I'm stopping at the URL, title, and image. If you trust dev enough, there really isn't any reason why you can't go a lot further.

Collapse
 
ahmad_butt_faa7e5cc876ea7 profile image
Ahmad

very cool and creative!! 🤙 could even be a react component which fetches data from a list of blogging websites , and outputs their bodies extracted bodies from the full json.

Collapse
 
andrewbaisden profile image
Andrew Baisden

Awesome thanks for sharing this!

Collapse
 
jarvisscript profile image
Chris Jarvis

Very useful blog. Also congrats on the Lighthouse score.

Collapse
 
psypher1 profile image
James 'Dante' Midzi

I have been trying ro figure out how to this on my site with no luck. This is very helpful thank you

Collapse
 
iamhectorsosa profile image
Hector Sosa

Great post, Nuno. I'm doing something along the same lines. My entire website blog is ran out of Forem APIs. hectorsosa.me/blog