Add some very basic fediverse integration

It doesn't go as far as I wanted, because I don't
know how to get the counts I need as yet.

configuration/template.html

@@ -29,6 +29,10 @@
 		<a class="status_url" href="{status_url}"><i class="omg-icon omg-prami"></i> via status.lol</a>
 		<a class="external_url" href="{external_url}"><i class="omg-icon omg-fediverse"></i> Interact on the Fediverse</a>
 	</aside>
+	<aside class="post-info">
+		<a class="status_url" href="https://deathau.status.lol/663cb4853797d"><i class="omg-icon omg-prami"></i> via status.lol</a>
+		<a class="external_url" href="https://monrepos.casa/objects/0e03068e-3466-3cb4-8207-08c267219144"><i class="omg-icon omg-fediverse"></i> Reply on the Fediverse</a>
+		</aside>
 	<aside class="post-tags">
 		{tags}
 	</aside>

fediverse.js

@@ -0,0 +1 @@
+./weblog/B0. Template/fediverse.js.md

weblog/B0. Template/fediverse.js.md

@@ -6,14 +6,9 @@ Location: /fediverse.js
 /**/
 
 const SUBSCRIBE_LINK_REL = 'http://ostatus.org/schema/1.0/subscribe'
-function share(uri, handle) {
-  if(!handle){
-    handle = prompt("Please enter your fediverse / mastodon handle (e.g. '@user@domain.social')\n(remember to look for blocked pop-ups)", "@")
-  }
-  
-  if(handle) {
-    const input = handle
-    handle = handle.trim().replace(/^@/,'')
+async function getSubscribeTemplate() {
+  const input = prompt("Please enter your fediverse / mastodon handle (e.g. '@user@domain.social')", "@")
+  let handle = input.trim().replace(/^@/,'')
   const split = handle.split('@')
   if(split.length == 2) {
     const resource = `acct:${handle}`
@@ -21,31 +16,92 @@ function share(uri, handle) {
     
     // look up remote user via webfinger
     const url = `https://${domain}/.well-known/webfinger?resource=${resource}`
-      fetch(url, {headers: {
-        'Content-Type': 'application/activity+json'
+    return fetch(url, {headers: {
+      'Content-Type': 'application/json'
     }}).then(async result => {
       const json = await result.json()
       const subscribe = json.links.find(link => link.rel && link.rel == SUBSCRIBE_LINK_REL)
       let template = subscribe.template
-        window.open(template.replace("{uri}", uri), '_blank').focus()
+      return template
     })
     .catch(e => {
       console.error(e)
-        throw `Sorry, we couldn't find an uri for ${input}.\n\nTry searching for "${uri}" on ${domain} (or in your fediverse client of choice)`
+      alert(`Sorry, we couldn't find an uri for ${input}.\n\nTry searching for "${uri}" on ${domain} (or in your fediverse client of choice)`)
+      return null
     })
-      
   }
   else {
-      throw 'Please enter your fediverse address in @user@domain.social format'
+    alert('Please enter your fediverse address in @user@domain.social format')
+    return null
+  }
+  return null
+}
+
+function linkToUrl(uri) {
+  // window.open(uri, '_blank').focus()
+  const link = document.createElement('a')
+  link.href = uri
+  link.target = "_blank"
+  link.click()
+}
+
+function noDataCick(href) {
+  return async (e) => {
+    e.preventDefault()
+    let subscribe_template = await getSubscribeTemplate()
+    if(subscribe_template) {
+      localStorage.setItem('subscribe_template', subscribe_template)
+      const url = subscribe_template.replace("{uri}", href)
+      linkToUrl(url)
+      addSocialButtons(this, url)
+    }
+    else {
+      linkToUrl(href)
     }
   }
 }
 
+function addSocialButtons(el, href) {
+  // TODO: fetch the post from the fediverse to add in comment, like and retweet count
+  // the following fetches the activitypub object but has no reference to the likes, etc
+  // if I had the local id, I could use the mastodon API to get it, but friendica uses the diaspora:guid in the link
+  // const url = new URL(href).searchParams.get("uri")
+  // fetch(url, {
+  //   headers: {
+  //     'Accept': 'application/json'
+  //   }
+  // }).then(async result => {
+  //   const json = await result.text()
+  //   console.log(json)
+  // })
+  // .catch(e => {
+  //   console.error(e)
+  // })
+  
+  const innerHTML = `
+    <a href='${href}' target="_blank"><i class="fa fa-comment"></i></a>
+    <a href='${href}' target="_blank"><i class="fa fa-star"></i></a>
+    <a href='${href}' target="_blank"><i class="fa fa-retweet"></i></a>
+  `
+
+  const span = document.createElement('span')
+  span.classList.add('fediverse')
+  span.innerHTML = innerHTML
+
+  el.insertAdjacentElement('afterend', span)
+  el.remove()
+}
+
 function fediverse() {
+  let subscribe_template = localStorage.getItem('subscribe_template');
+  
   document.querySelectorAll("a.external_url:not([href='{external_url}'])").forEach(el => {
-		el.addEventListener('click', e => {
-			e.preventDefault()
-			share(el.href)
-		})
+    if(subscribe_template) {
+      console.log(subscribe_template.replace("{uri}", el.href))
+      addSocialButtons(el, subscribe_template.replace("{uri}", el.href))
+    }
+    else {
+      el.addEventListener('click', noDataCick(el.href))
+    }
   })
 }

weblog/B0. Template/styles.css.md

@@ -93,7 +93,7 @@ main.page {
   margin-left: .75em;
 }
 
-.post-info>a {
+.post-info a {
   margin-left: 1em;
   background: none;
 }