Hide webmentions by default

2 files changed, 23 insertions, 17 deletions

diff --git a/assets/js/webmentions.js b/assets/js/webmentions.js
index b19dd7b..686b092 100644
--- a/assets/js/webmentions.js
+++ b/assets/js/webmentions.js
@@ -72,7 +72,6 @@ const parseWebmentions = (data) => {
         likes.push(l);
         break;
       case 'link':
-      case 'repost':
         reposts.push(l);
         break;
       default:
@@ -161,6 +160,7 @@ const getHostName = (url) => {
 const fillTemplate = (template, vals) => {
   template.querySelector('.js-avatar').src = vals.photo;
   template.querySelector('.js-author').href = vals.authorUrl;
+  template.querySelector('.js-author').title = vals.name;
   template.querySelector('.js-author-name').innerHTML = vals.name;
   template.querySelector('.js-author-name').href = vals.authorUrl;
   template.querySelector('.js-source').href = vals.url;
diff --git a/layouts/partials/webmentions.html b/layouts/partials/webmentions.html
index 20e0a10..503dbf0 100644
--- a/layouts/partials/webmentions.html
+++ b/layouts/partials/webmentions.html
@@ -1,28 +1,24 @@
 <div id="summary" class="flex items-center">
-  <div class="flex items-center mr-6 rounded-md">
+  <button id="button-likes-{{ md5 .Permalink }}" class="flex items-center mr-6 p-3 bg-gray-100 hover:bg-white transition duration-300 ease-in-out 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">
+  </button>
+  <button id="button-interactions-{{ md5 .Permalink }}" class="flex items-center mr-6 p-3 bg-gray-100 hover:bg-white transition duration-300 ease-in-out 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>
+  </button>
   <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="fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-        <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>
+  <a class="p-3 bg-gray-100 hover:bg-white transition duration-300 ease-in-out rounded-md text-gray-600" href="https://indieweb.org/Webmention" title="What are Webmentions?">
+    <svg class="fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+      <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>
 
 <template id="reply-template" class="list-none">
@@ -48,21 +44,31 @@
       <span class="js-sentence js-author-name" href=""></span>
       <small class="js-date ml-2" href=""></small>
     </a>
-  </li>
+  </li> 
 </template>
 
-<div id="webmentions-interactions">
+<div id="webmentions-interactions-{{ md5 .Permalink }}" class="hidden">
+  <h4>Replies & Shares</h4>
   <ul id="replies"></ul>
   <ul id="shares"></ul>
 </div>
 
-<div id="webmentions-likes">
+<div id="webmentions-likes-{{ md5 .Permalink }}" class="hidden">
+  <h4>Likes</h4>
   <ul id="likes"></ul>
 </div>
 
 <script type="text/javascript">
   var webmentions = (permalink, aliases, productionBaseUrl) => {
     fetchWebmentions(permalink, aliases, productionBaseUrl);
+
+    document.querySelector('#button-interactions-{{ md5 .Permalink }}').addEventListener('click', () => {
+      document.querySelector('#webmentions-interactions-{{ md5 .Permalink }}').classList.toggle('hidden');      
+    });
+
+    document.querySelector('#button-likes-{{ md5 .Permalink }}').addEventListener('click', () => {
+      document.querySelector('#webmentions-likes-{{ md5 .Permalink }}').classList.toggle('hidden');      
+    });
   };
 
   document.addEventListener('turbolinks:load', webmentions({{ .Permalink }}, {{ .Aliases }}, {{ .Site.Params.productionBaseUrl }}));