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,46 +6,102 @@ 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)", "@")
+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}`
+    const domain = split[1]
+    
+    // look up remote user via webfinger
+    const url = `https://${domain}/.well-known/webfinger?resource=${resource}`
+    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
+      return template
+    })
+    .catch(e => {
+      console.error(e)
+      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
+    })
   }
-  
-  if(handle) {
-    const input = handle
-    handle = handle.trim().replace(/^@/,'')
-    const split = handle.split('@')
-    if(split.length == 2) {
-      const resource = `acct:${handle}`
-      const domain = split[1]
-      
-      // look up remote user via webfinger
-      const url = `https://${domain}/.well-known/webfinger?resource=${resource}`
-      fetch(url, {headers: {
-        'Content-Type': 'application/activity+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()
-      })
-      .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)`
-      })
-      
+  else {
+    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 {
-      throw 'Please enter your fediverse address in @user@domain.social format'
+      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() {
-	document.querySelectorAll("a.external_url:not([href='{external_url}'])").forEach(el => {
-		el.addEventListener('click', e => {
-			e.preventDefault()
-			share(el.href)
-		})
-	})
-}
+  let subscribe_template = localStorage.getItem('subscribe_template');
+  
+  document.querySelectorAll("a.external_url:not([href='{external_url}'])").forEach(el => {
+    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;
 }