DEVto: My Posts

by WebComponents

HTML

<b>My Dev.to Web Components posts:</b>
<dev-posts user="dannyengelman"></dev-posts>

<script>
customElements.define(
  "dev-posts",
  class extends HTMLElement {
    async connectedCallback(
      uri = `https://dev.to/api/articles?state=all&page=1&per_page=100&username=${this.getAttribute("user")}`,
    ) {
      let json = await (await fetch(uri, {mode: "cors"})).json();
      this.innerHTML = "<ul>" + json.map(
        ({title,description,readable_publish_date,
          url,public_reactions_count,tags}) => (
          (tags.includes("unlist")) 
            ? `<!-- don't list ${title}-->`
            : `<li title="${description}">` +
                  `<span>${readable_publish_date}</span>` +
                  //` ⭐ ${public_reactions_count}` +
                  `<br><a href="${url}" target="_blank">${title.split("(")[0]}</a>` +
              `</li>`
      )).join ``;
    }
  }
);
</script>

CSS

body{
  font:15px Arial;
  background:beige;
}
li{
  margin-top:.1em;
}
span{
  display:inline-block;
  font-size:80%;
  width:5em;
}
h4{
  margin-top:0;
  margin-bottom:0;
}