DEV Community

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

Embed your dev.to posts anywhere!🥳

comscience profile image kapeel kokane ・1 min read

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:

Hope that helped!
Cheers!

Discussion (8)

pic
Editor guide
Collapse
steveblue profile image
Steve 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
comscience profile image
kapeel kokane Author

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

Collapse
milesq profile image
Miłosz Wiśniewski

something like that could be a web component ;)

Collapse
comscience profile image
kapeel kokane Author

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

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
jmau111 profile image
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.