Add webmentions in posts

3 files changed, 89 insertions, 3 deletions

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 6765bd5..3c67c9f 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -59,9 +59,21 @@
     {{ end }}
 
     {{if not .Params.hideComments }}
-      <section class="my-5 py-5 ">
-        <h2>Comments</h2>
-        {{ template "_internal/disqus.html" . }}
+      <section class="my-5 py-5 relative">
+        <h2>Interactions</h2>
+
+        {{if .Site.Params.webmention }}
+          <h3>Webmentions</h3>
+          {{ partial "webmentions.html" . }}
+
+          <h3>Comments</h3>
+        {{end}}
+
+        {{ if not .Site.IsServer }}
+          {{ template "_internal/disqus.html" . }}
+        {{ else }}
+          Disqus doesn't load in development mode
+        {{ end }}
       </section>
     {{ end }}
 </article>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index fef91e6..f886603 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -122,5 +122,8 @@
   {{with .Site.Params.webmention }}
     <link rel="webmention" href="https://webmention.io/{{.}}/webmention">
     <link rel="pingback" href="https://webmention.io/{{.}}/xmlrpc">
+
+    {{ $webmentions := resources.Get "js/webmentions.js" }}
+    <script src="{{ $webmentions.RelPermalink }}" type="text/javascript"></script>
   {{end}}
 </head>
diff --git a/layouts/partials/webmentions.html b/layouts/partials/webmentions.html
new file mode 100644
index 0000000..4062aa7
--- /dev/null
+++ b/layouts/partials/webmentions.html
@@ -0,0 +1,71 @@
+<div id="summary" class="flex items-center">
+  <div class="flex items-center mr-6 rounded-md">
+    <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+      <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
+    </svg>
+    <span id="webmentions-total-likes" class="mr-1"></span>
+    <!-- <span>(Show)</span> -->
+  </div>
+  <div class="flex items-center mr-6 rounded-md">
+    <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+      <path fill-rule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z" clip-rule="evenodd" />
+    </svg>
+    <span id="webmentions-total-interactions" class="mr-1"></span>
+    <!-- <span>(Show)</span> -->
+  </div>
+  <div class="flex-grow">
+    <div id="webmentions-avatars" class="flex -space-x-2 overflow-hidden"></div>
+  </div>
+  <div>
+    <a href="https://indieweb.org/Webmention" title="What are Webmentions?">
+      <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+      </svg>
+    </a>
+  </div>
+</div>
+
+<template id="reply-template" class="list-none">
+  <li class="h-entry flex mb-8 text-base">    
+    <a class="js-author flex-shrink-0" href="">
+      <img class="comment-avatar u-photo js-avatar w-8 h-8 rounded-full mr-3" alt="" src=""/>
+    </a>
+    <div class="comment-note__body">
+      <div class="p-author">
+        <strong><a class="no-underline u-author js-author-name" href=""></a></strong>
+        <small><a class="no-underline u-url js-date js-source" href=""></a></small>
+      </div>
+      <div class="js-content e-entry"></div>
+    </div>
+  </li>
+</template>
+<template id="like-template" class="list-none">
+  <li class="h-entry flex mb-8 text-base">
+    <a class="reply__avatar u-author js-author flex-shrink-0" href="">
+      <img class="u-photo js-avatar w-8 h-8 rounded-full mr-3" alt="" src=""/>
+    </a>
+    <a class="no-underline u-url js-source" href="">
+      <span class="reply__author p-name js-sentence js-author-name" href=""></span>
+      <small class="reply__date js-date" href=""></small>
+    </a>
+  </li>
+</template>
+
+<div id="webmentions-interactions">
+  <ul class="replies" id="replies"></ul>
+  <ul class="shares" id="shares"></ul>
+</div>
+
+<div id="webmentions-likes">
+  <ul class="likes" id="likes"></ul>
+</div>
+
+<div id="comments"></div>
+
+<script type="text/javascript">
+  var webmentions = (permalink, aliases, productionBaseUrl) => {
+    fetchWebmentions(permalink, aliases, productionBaseUrl);
+  };
+
+  document.addEventListener('turbolinks:load', webmentions({{ .Permalink }}, {{ .Aliases }}, {{ .Site.Params.productionBaseUrl }}));
+</script>