add boost & like count to blog

Author: keithamus

.eleventy.js

@@ -21,6 +21,7 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addFilter("date_to_rfc3339", rss.dateToRfc3339)
   eleventyConfig.addFilter("date_to_rfc822", rss.dateToRfc822)
   eleventyConfig.addFilter("html_to_absolute_urls", rss.convertHtmlToAbsoluteUrls)
+  eleventyConfig.addFilter("domain", (str) => new URL(str).hostname)
 
   eleventyConfig.setLibrary(
     "md",
@@ -40,12 +41,12 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addGlobalData("discord", "https://discord.gg/CqhDNXepDV")
   eleventyConfig.addGlobalData("baseurl", "https://webcomponents.guide")
   eleventyConfig.addGlobalData("repository", "https://github.com/WebComponentsGuide/webcomponents.guide")
+  eleventyConfig.addGlobalData("mastodon", "https://fosstodon.org/@webcomponentsguide")
 
   const customGroups = require("./_data/groups.json")
 
   for (const [type, groups] of Object.entries(customGroups)) {
     for (const group of groups) {
-      console.log(`adding ${type} ${group}`)
       eleventyConfig.addCollection(group, (api) => {
         return api
           .getFilteredByGlob(`${type}/**/*.md`)
@@ -61,7 +62,8 @@ module.exports = (eleventyConfig) => {
 
   const icon = (icon) =>
     `<svg width="24" height="24" class="icon icon-${icon}"><use xlink:href="/images/icons.svg#${icon}"></use></svg>`
-  const callout = (content, style = "info") => dedent`
+  const callout = (content, style = "info") =>
+    dedent`
     <div class="callout ${style}">
     ${content}
     ${icon(style)}
@@ -82,12 +84,12 @@ module.exports = (eleventyConfig) => {
     menu: icon("menu"),
   }
   const menu = (first, ...rest) => [menumap[first] || `<strong>${first}</strong>`, ...rest].join(icon("chevron-right"))
-  const picture = (name) => `
-      <picture>
-        <source srcset="/images/${name}.avif" type="image/avif">
-        <source srcset="/images/${name}.webp" type="image/webp">
-        <img src="/images/${name}.jpg">
-      </picture>
+  const picture = (name) =>
+    `<picture>
+      <source srcset="/images/${name}.avif" type="image/avif">
+      <source srcset="/images/${name}.webp" type="image/webp">
+      <img src="/images/${name}.jpg">
+    </picture>
   `
 
   eleventyConfig.addShortcode("icon", icon)
@@ -140,7 +142,6 @@ module.exports = (eleventyConfig) => {
 ${html}
 </div>
     `
-    console.log(out)
     return out
   })
 }

.gitignore

@@ -2,3 +2,4 @@ node_modules
 _site
 guide/.obsidian
 *.kra
+.cache

_includes/blog-index.html

@@ -0,0 +1,9 @@
+---
+layout: main.html
+css: [content.css, blog.css]
+script: [relative-time.js]
+---
+
+<h1>{{ title }}</h1>
+
+<section class="content">{{ content }}</section>

_includes/blog.html

@@ -4,14 +4,11 @@
 script: [relative-time.js]
 ---
 
-{% if title == "Blog" %}
-<h1>{{ title }}</h1>
-{%- else %}
 <header>
   <h1>{{ title }}</h1>
   {{ imageslug | picture }}
   <aside class="excerpt">{{ excerpt }}</aside>
-  <div class="author-block">
+  <aside class="author-block">
     {%- for author in authors %}
     <a href="/blog/by-author/{{ author | slugify }}" class="avatar">
       <img
@@ -27,8 +24,32 @@ <h1>{{ title }}</h1>
     <a href="/blog/by-author/{{ author | slugify }}"> {{ author }}{% unless forloop.last %}, {% endunless %} </a>
     {%- endfor %}<br />
     <relative-time format="datetime" datetime="{{ page.date | iso8601 }}"> {{ page.date | iso8601 }} </relative-time>
-  </div>
+  </aside>
+  <aside class="mentions">
+    <a href="{{ announcePost }}" class="reposts" aria-label="{{ reposts | size }} Boosts">
+      {% icon "repeat" %}{{ reposts | size }}
+    </a>
+    <a href="{{ announcePost }}" class="likes" aria-label="{{ likes | size }} Likes">
+      {% icon "heart" %}{{ likes | size }}
+    </a>
+  </aside>
 </header>
-{%- endif %}
 
 <section class="content">{{ content }}</section>
+
+<section class="mentions">
+  <div class="reposts">
+    <span class="type"> {% icon "repeat" %} {{ reposts | size }} reposts: {% for repost in reposts %} </span>
+    <a href="{{ repost.author.url }}" class="avatar">
+      <img src="{{ repost.author.photo }}" loading="lazy" decoding="async " width="50" height="50" />
+    </a>
+    {% endfor %}
+  </div>
+  <div class="likes">
+    <span class="type"> {% icon "heart" %} {{ likes | size }} likes: {% for like in likes %} </span>
+    <a href="{{ like.author.url }}" class="avatar">
+      <img src="{{ like.author.photo }}" loading="lazy" decoding="async " width="50" height="50" />
+    </a>
+    {% endfor %}
+  </div>
+</section>

blog/blog.11tydata.js

@@ -0,0 +1,47 @@
+const { AssetCache } = require("@11ty/eleventy-fetch")
+module.exports = {
+  layout: "blog.html",
+  permalink: "/blog/{{ page.fileSlug }}/",
+  tags: ["blog"],
+  eleventyComputed: {
+    async mentions(data) {
+      const fetch = (await import("node-fetch")).default
+      const url = `${data.baseurl}/blog/${data.page.fileSlug}/`
+      const apiUrl = `https://webmention.io/api/mentions.jf2?target=${url}&per-page=1000`
+      console.log("Fetching web mentions", apiUrl)
+      let asset = new AssetCache(apiUrl)
+      if (asset.isCacheValid("1h")) {
+        console.log("Returning now data from cache")
+        return await asset.getCachedValue()
+      }
+      const res = await fetch(apiUrl)
+      const json = await res.json()
+      const { children } = json
+      await asset.save(children, "json")
+      return children
+    },
+    async likes(data) {
+      const mentions = (await data.mentions) || []
+      return mentions.filter((mention) => mention["wm-property"] === "like-of")
+    },
+    async reposts(data) {
+      const mentions = (await data.mentions) || []
+      return mentions.filter((mention) => mention["wm-property"] === "repost-of")
+    },
+    async replies(data) {
+      const mentions = (await data.mentions) || []
+      return mentions.filter((mention) => mention["wm-property"] === "in-reply-to")
+    },
+    async announcePost(data) {
+      const mentions = (await data.mentions) || []
+      for (const mention of mentions) {
+        if (mention.url.startsWith(data.mastodon)) {
+          const url = new URL(mention.url)
+          url.hash = ""
+          return url.toString()
+        }
+      }
+      return ""
+    },
+  },
+}

blog/blog.json

@@ -1,5 +1,6 @@
 ---
 permalink: /blog/
+layout: blog-index.html
 override:tags:
 title: Blog
 ---
@@ -30,6 +31,14 @@ title: Blog
         {{ post.date | iso8601 }}
       </relative-time>
     </div>
+  <aside class="mentions">
+    <a href="{{ post.data.announcePost }}" class="reposts" aria-label="{{ post.data.reposts | size }} Boosts">
+      {% icon "repeat" %}{{ post.data.reposts | size }}
+    </a>
+    <a href="{{ post.data.announcePost }}" class="likes" aria-label="{{ post.data.likes | size }} Likes">
+      {% icon "heart" %}{{ post.data.likes | size }}
+    </a>
+  </aside>
   </li>
 {% endunless %}{% endfor %}
 </ol>

blog/index.md

@@ -29,6 +29,92 @@
   }
 }
 
+.mentions {
+  border-block-start: var(--border-size-2) solid var(--brand-color-dark);
+  max-width: 100ch;
+
+  & :where(.reposts, .likes, .replies) {
+    display: flex;
+    align-items: center;
+    margin: var(--size-4) 0;
+
+    & .type {
+      display: inline-block;
+      inline-size: 130px;
+    }
+
+    & svg {
+      margin-inline-end: var(--size-2);
+    }
+
+    & a {
+      display: inline-block;
+      margin-inline-start: calc(var(--size-4) * -1);
+
+      &:first-of-type {
+        margin-inline-start: var(--size-1);
+      }
+    }
+
+    & .avatar img {
+      border-radius: var(--radius-round);
+      border: var(--border-size-1) solid var(--surface-2);
+      background: var(--surface-1);
+      box-shadow: var(--shadow-3);
+    }
+  }
+
+  & .reposts {
+    color: var(--blue-6);
+  }
+
+  & .likes {
+    color: var(--red-6);
+  }
+
+  & .replies {
+    align-items: start;
+    flex-direction: column;
+
+    & .reply {
+      margin-block: var(--size-3);
+      display: grid;
+      gap: var(--size-2);
+      align-items: center;
+      grid-template:
+        "icon avatar name aside" auto
+        "post post   post post" auto
+        / auto 50px auto 1fr;
+
+      & a {
+        margin: 0;
+        padding: 0;
+      }
+
+      & svg {
+        grid-area: icon;
+      }
+
+      & .avatar {
+        grid-area: avatar;
+        padding-inline-start: var(--size-1);
+      }
+
+      & .name {
+        grid-area: name;
+      }
+
+      & section {
+        grid-area: post;
+      }
+
+      & aside {
+        grid-area: aside;
+      }
+    }
+  }
+}
+
 main {
   padding: var(--size-8);
 
@@ -51,7 +137,7 @@ main {
       "title    title" auto
       "picture  picture" auto
       "excerpt  excerpt" auto
-      "author   author" auto
+      "author   mentions" auto
       / 1fr 1fr;
 
     & > h1 {
@@ -71,6 +157,18 @@ main {
       grid-area: author;
       margin: 0;
     }
+
+    & > .mentions {
+      border: 0;
+      padding: 0;
+      grid-area: mentions;
+      display: flex;
+      justify-content: flex-end;
+
+      & :where(.reposts, .likes) {
+        margin: 0 var(--size-2);
+      }
+    }
   }
 }
 
@@ -109,6 +207,13 @@ main {
     margin: 0;
   }
 
+  & .mentions {
+    grid-area: mentions;
+    display: flex;
+    justify-content: flex-end;
+    padding: 0;
+    border: 0;
+  }
 }
 
 @media (--lg-n-above) {