Mads Stoumann

Posted on Feb 11

The Unofficial Dev.To Embed Web Component

#javascript #css #webdev #showdev

The other day, I re-discovered the dev.to API and found out that it can be used without an API key. That’s really great if you want to embed your articles anywhere — maybe on a personal blog — without the hassle of protecting secret keys. You can fetch a list of articles by a given author or a specific article.

So, I coded a web component that lets you grab either a list of articles or a specific one. Let’s start with the “list mode”:

<dev-to
  author="madsstoumann"
  theme="classic"
  itemsperpage="10"
  links="internal">
</dev-to>

Here’s what we get:

Notice the theme and links attributes.

I’ve added 3 themes to choose from (but you can easily add your own):

brutalist
classic
modern

links can be either “internal” or “external”. The first opens the article directly within the web component, while the latter opens the article on dev.to in a new tab.

Now, let’s click on “The Golden Ratio in CSS”.

Very posh, classic theme, isn’t it?!

If you just want to show the article directly, without showing the list first, you can use the component in “article mode”:

<dev-to article="2014104" theme="classic"></dev-to>

Let’s change the theme to “modern”:

... or how about “brutalist”, for that raw, industrial look?

Internationalization

If you want to display dates and UI text in your local language, the component supports i18n this way:

<dev-to 
  author="madsstoumann"
  lang="es"
  i18n='{"es":{"more":"Más...","reactions":"reacciones"}}'>
</dev-to>

Customization

The component exposes several parts that you can style using CSS ::part():

dev-to::part(avatar) {
  border-radius: 50%;
  border: 2px solid currentColor;
}

dev-to::part(cover) {
  filter: sepia(0.3);
}

dev-to::part(more) {
  background: #ff00ff;
}

Shadow DOM or Not?

If you need to style the component directly (without shadowDOM and parts), just add the noshadow attribute:

<dev-to author="madsstoumann" noshadow></dev-to>

Demo

You can try out a demo, using external links, here: browser.style/ui/dev-to

Installation

You can install the component directly from npm:

npm i @browser.style/dev-to

Or import the script directly from browser.style:

<script
  type="module"
  src="https://browser.style/ui/dev-to/index.js">
</script>

Let me know what you think!

Cover Photo by Markus Spiske: https://www.pexels.com/photo/mork-computer-gron-software-225769/

Top comments (16)

Ben Halpern • Feb 11

Nice

Mads Stoumann • Feb 11

Thanks!

Daniel T Sasser II • Feb 12

Very good 👍 I've been playing around with it, integrating the comment section and reactions into my blog for articles that have been cross posted. I have it working pretty good and I'm about ready to update my blog with it.

Mads Stoumann • Feb 12

Nice! Will you share a link when it’s up?

Daniel T Sasser II • Feb 12

Will do 👍
I've been meaning to update it for a couple of weeks now actually. I have so many projects going between my AI research and our current app development. But now that you and I are talking about it, it's back to the top of the list!