DEV Community

Cover image for Embed your dev.to posts anywhere!πŸ₯³
kapeel kokane
kapeel kokane

Posted on

39 10

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!

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

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

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.

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

πŸ‘‹ Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay