DEV Community

Cover image for Embed your dev.to posts anywhere!🥳
kapeel kokane
kapeel kokane

Posted on

Embed your dev.to posts anywhere!🥳

Hey People of Dev!

Do you have a requirement of embedding your dev.to posts in your web-site or any other site?

I had a similar requirement where I was thinking of embedding my top dev.to posts in my personal github-pages web site. I could not find any that would suit my requirement. So I went ahead and have built my own solution.

A react component that accepts a dev username and all that is needed to do is call the react component in your page like so:

<DevArticles username="comscience" />
Enter fullscreen mode Exit fullscreen mode

And done! 🎉

You have a beautifully laid out row of your dev articles as shown in this codepen below:

Do play around with it and suggest improvements. Here are some I was thinking:

  • ability to limit the number of articles
  • ability to limit the number of rows
  • ability to sort by max comments and hearts etc.

If you liked that article, you might also like:

Hope that helped!
Cheers!

Top comments (7)

Collapse
 
steveblue profile image
Stephen Belovarich • Edited

That’s rad, except why wouldn’t you code this with custom elements to make it work with any framework or no framework scenario?

Collapse
 
kokaneka profile image
kapeel kokane

Yup. I was thinking of creating a web component. I will give it a shot.

Collapse
 
webreflection profile image
Andrea Giammarchi • Edited

of course every other framework user would ask a version that works in there too ...

<!-- ... while this would work everywhere ... -->
<dev-articles username="comscience"></dev-articles>
Enter fullscreen mode Exit fullscreen mode

This component is an excellent use case for Custom Elements.

customElements.define('dev-articles', class extends HTMLElement {
  static get observedAttributes() { return ['username']; }
  attributeChangedCallback(key, _, value) {
    // do whatever you like in here đź‘Ť
  }
});
Enter fullscreen mode Exit fullscreen mode

Let's use the right tool for the job đź‘‹

P.S. I've made a uce version which is based on Custom Elements, so you can have a look in there too: codepen.io/WebReflection/pen/GRpXq...

Collapse
 
patricnox profile image
PatricNox

That's cool, you should create a vue version as well!

Collapse
 
milesq profile image
Miłosz Wiśniewski

something like that could be a web component ;)

Collapse
 
kokaneka profile image
kapeel kokane

Yes. Have a plan to do that as well. Let's see.

Collapse
 
gixxerblade profile image
Steve Clark 🤷‍♀️

I did something similar except using graphql and creating a new page with the users post instead of linking back to dev.to. Like a blog of all posts.