Webmentions

.eleventy.js

@@ -7,6 +7,8 @@ const markdownItAnchor = require('markdown-it-anchor')
 const markdownItHighlightJS = require('markdown-it-highlightjs')
 const typogr = require('typogr')
 
+const webmentions = require('./src/_data/webmentions')
+
 const mdOptions = {
   html: true,
   breaks: true,
@@ -65,6 +67,16 @@ module.exports = eleventyConfig => {
 
   eleventyConfig.addFilter('title_class', string => string.length > 30 ? ' is-long' : '')
 
+  eleventyConfig.addFilter('webmentionsPerPost', url => {
+    if (webmentions.children) {
+      return webmentions.children.filter(mention => {
+        return mention['wm-target'] && mention['wm-target'] === url
+      })
+    } else {
+      return []
+    }
+  })
+
   // eleventyConfig.addTransform('no_orphan', (content, outputPath) => {
   //   if( outputPath.endsWith(".html") ) {
   //     return typogr(content).chain().widont().value()

src/_data/webmentions.js

@@ -0,0 +1,27 @@
+const https = require('https')
+
+const url = 'https://webmention.io/api/mentions.jf2?domain=indiewebcamp.com&token=aKs-nlB_-kQV8JGQ5RIw7Q'
+
+const getWebmentions = () => {
+  return new Promise((resolve, reject) => {
+    https.get(
+      url,
+      res => {
+        let data = ''
+
+        res.on('data', d => {
+          data += d
+        })
+
+        res.on('end', () => {
+          resolve(JSON.parse(data))
+        })
+      }
+    ).on('error', error => {
+      console.error(error)
+      reject(error)
+    })
+  })
+}
+
+module.exports = getWebmentions()

src/_includes/partials/_head.liquid

@@ -36,6 +36,9 @@
   <link rel="canonical" href="{{ page.url | abs_url: site.url }}" itemprop="url" />
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | abs_url: site.url }}" />
 
+  <link rel="webmention" href="https://webmention.io/jdsteinbach.com/webmention" />
+  <link rel="pingback" href="https://webmention.io/jdsteinbach.com/xmlrpc" />
+
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
   <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
   <link rel="alternate icon" href="/favicon.ico" />

src/_includes/partials/_webmentions.liquid

@@ -0,0 +1,19 @@
+{% assign postUrl = page.url | abs_url: site.url %}
+{% assign mentions = postUrl | webmentionsPerPost %}
+
+<div class="mentions">
+  <h2>Webmentions</h2>
+  {% if mentions.length > 0 %}
+    <ul class="mention-list">
+      {% for m in mentions %}
+        <li class="mention">
+          <a href="{{ m.url }}">
+            {{ m.author.name }}
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+  {% else %}
+    <p>No webmentions were found for this post.</p>
+  {% endif %}
+</div>

src/_includes/post.liquid

@@ -5,27 +5,13 @@ layout: _base
 {%- assign toc = content | toc -%}
 
 <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
-  {% comment %} <header class="hero l-hero">
-    <h1 class="hero__title" itemprop="name title headline">{{ title }}</h1>
-
-    <p class="hero__meta">
-      {%- if page.date %}
-        <time class="date" datetime={{ page.date }} itemprop="dateCreated pubdate datePublished">{{ page.date | date: "%B %e, %Y" }}</time>
-      {%- endif %}
-      {%- if author %}
-        <span class="author" itemprop="author creator">{{ author }}</span>
-      {%- endif %}
-      {%- if categories %}
-        <span class="categories">{% include partials/_categories %}</span>
-      {%- endif %}
-    </p>
-  </header> {% endcomment %}
-
   {% include partials/_hero %}
 
   <div class="main-content l-grid l-grid--content" itemprop="articleBody">
     {% include partials/_toc %}
 
     {{ content | dropcap }}
+
+    {% include partials/_webmentions %}
   </div>
 </article>