Added webmentions and adjusted timestamp on posts

assets/css/style.css

@@ -215,3 +215,5 @@ nav li {
 .title {
   font-family: 'Comfortaa';
 }
+
+#webmentions img { max-height: 1.2em; margin-right: -1ex; }

assets/js/webmention.min.js

@@ -0,0 +1 @@
+!function(){"use strict";window.i18next=window.i18next||{t:function(n){return n}};const n=window.i18next.t.bind(window.i18next);function t(n,t){return document.currentScript.getAttribute("data-"+n)||t}const e=t("page-url",window.location.href.replace(/#.*$/,"")),o=t("add-urls",void 0),r=t("id","webmentions"),s=t("wordcount"),i=t("max-webmentions",30),l=t("prevent-spoofing")?"wm-source":"url",c=t("sort-by","published"),a=t("sort-dir","up"),u=t("comments-are-reactions"),p={"in-reply-to":n("replied"),"like-of":n("liked"),"repost-of":n("reposted"),"bookmark-of":n("bookmarked"),"mention-of":n("mentioned"),rsvp:n("RSVPed"),"follow-of":n("followed")},f={"in-reply-to":"💬","like-of":"❤️","repost-of":"🔄","bookmark-of":"⭐️","mention-of":"💬",rsvp:"📅","follow-of":"🐜"},d={yes:"✅",no:"❌",interested:"💡",maybe:"💭"};function m(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function h(t,e){const o=m(t.author?.name??t.url.split("/")[2]);let r=p[t["wm-property"]]||n("reacted");!e&&t.content&&t.content.text&&(r+=": "+g(t));let s="";t.author&&t.author.photo&&(s=`\n        <img\n          src="${m(t.author.photo)}"\n          loading="lazy"\n          decoding="async"\n          alt="${o}"\n        >\n      `);let i="";return t.rsvp&&d[t.rsvp]&&(i=`<sub>${d[t.rsvp]}</sub>`),`\n      <a\n        class="reaction"\n        rel="nofollow ugc"\n        title="${o} ${r}"\n        href="${t[l]}"\n      >\n        ${s}\n        ${f[t["wm-property"]]||"💥"}\n        ${i}\n      </a>\n    `}function w(n){return n.substr(n.indexOf("//"))}function $(n){const t=[],e={};return n.forEach((function(n){const o=w(n.url);e[o]||(t.push(n),e[o]=!0)})),t}function g(n){let t=m(n.content.text);if(s){let n=t.replace(/\s+/g," ").split(" ",s+1);n.length>s&&(n[s-1]+="&hellip;",n=n.slice(0,s),t=n.join(" "))}return t}window.addEventListener("load",(async function(){const t=document.getElementById(r);if(!t)return;const s=[w(e)];o&&o.split("|").forEach((function(n){s.push(w(n))}));let p=`https://webmention.io/api/mentions.jf2?per-page=${i}&sort-by=${c}&sort-dir=${a}`;s.forEach((function(n){p+=`&target[]=${encodeURIComponent("http:"+n)}&target[]=${encodeURIComponent("https:"+n)}`}));let f={};try{const n=await window.fetch(p);n.status>=200&&n.status<300?f=await n.json():(console.error("Could not parse response"),new Error(n.statusText))}catch(n){console.error("Request failed",n)}let d=[];const b=[];u&&(d=b);const y={"in-reply-to":d,"like-of":b,"repost-of":b,"bookmark-of":b,"follow-of":b,"mention-of":d,rsvp:d};f.children.forEach((function(n){const t=y[n["wm-property"]];t&&t.push(n)}));let k="";d.length>0&&d!==b&&(k=function(t){return`\n      <h2>${n("Responses")}</h2>\n      <ul class="comments">${t.map((t=>{const e=h(t,!0);let o=m(t.url.split("/")[2]);t.author&&t.author.name&&(o=m(t.author.name));const r=`<a class="source" rel="nofollow ugc" href="${t[l]}">${o}</a>`;let s="name",i=`(${n("mention")})`;return t.name?(s="name",i=t.name):t.content&&t.content.text&&(s="text",i=g(t)),`<li>${e} ${r} <span class="${s}">${i}</span></li>`})).join("")}</ul>\n    `}($(d)));let x="";var v;b.length>0&&(v=$(b),x=`\n      <h2>${n("Reactions")}</h2>\n      <ul class="reacts">${v.map((n=>h(n))).join("")}</ul>\n    `),t.innerHTML=`${k}${x}`}))}();

layouts/blog/single.html

@@ -5,7 +5,7 @@
   <!-- date -->
   {{ if not .Date.IsZero }}
   {{ $singlePageDateFormat := .Site.Params.singlePageDateFormat | default "January 2, 2006"}}
-  <p class="date"><time class="dt-published" datetime='{{ .Date.Format "2006-01-02" }}'>{{ .Date.Format $singlePageDateFormat }}</time></p>
+  <p class="date">Published on <time class="dt-published" datetime='{{ .Date.Format "2006-01-02T15:04:05Z0700" }}'>{{ .Date.Format $singlePageDateFormat }}</time></p>
   <a style="display: none" class="u-url" href="{{ .Permalink }}"></a>
   {{ end }}
   <!-- tags -->
@@ -24,6 +24,15 @@
     {{ .Content }}
   </div>
   </article>
+  <div id="webmentions"></div>
+  <form method="post" action="https://webmention.io/brandonrozek.com/webmention">
+    <p>Have you published a response to this? <label for="webmention-source">Let me know the <abbr title="Uniform Resource Locator">URL</abbr></label>:</p>
+    <input type="url" name="source" id="webmention-source">
+    <input type="hidden" name="target" value="{{ .Permalink }}">
+    <button type="submit">Ping!</button>
+  </form>
+  {{ $webmentionjs := resources.Get "js/webmention.min.js" }}
+  <script src="{{ $webmentionjs.Permalink }}" async></script>
   <script type="application/ld+json">
     {
       "@context": "https://schema.org",

layouts/partials/head.html

@@ -20,6 +20,10 @@
     <link href="{{.}}" rel="me"/>
   {{ end -}}
 
+  <!-- Webmentions -->
+  <link rel="webmention" href="https://webmention.io/brandonrozek.com/webmention" />
+  <link rel="pingback" href="https://webmention.io/brandonrozek.com/xmlrpc" />
+
   <!-- RSS Links -->
   {{ range .AlternativeOutputFormats -}}
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}