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!

Posted on May 13 by:

comscience profile

kapeel kokane

@comscience

Coder by day, Content creator by night, Learner at heart!

Discussion

markdown guide
 

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

 

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

 

something like that could be a web component ;)

 

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

 

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

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...

 

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

 
 

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.