DEV Community

Cover image for Embed your posts anywhere!🥳
kapeel kokane
kapeel kokane

Posted on

Embed your posts anywhere!🥳

Hey People of Dev!

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

I had a similar requirement where I was thinking of embedding my top 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!

Top comments (7)

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?

kokaneka profile image
kapeel kokane

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

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:

patricnox profile image

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

milesq profile image
Miłosz Wiśniewski

something like that could be a web component ;)

kokaneka profile image
kapeel kokane

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

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 Like a blog of all posts.