Embed your dev.to posts anywhere!🥳

#react #codepen #javascript #webdev

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" />

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:

Article No Longer Available

Hope that helped!
Cheers!

Top comments (7)

Stephen Belovarich • May 13 '20 • 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?

kapeel kokane • May 14 '20

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

Andrea Giammarchi • May 14 '20 • 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>

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 👍
  }
});