Initial Mentions United

source/_dynamic/photos-map.md

@@ -6,7 +6,7 @@ photograph:
   name: Photographers Mosaic
   keepOutOverview: true
 date: 2021-08-24 15:56:00
-updated: 2024-08-12 20:40:54
+updated: 2024-08-15 10:08:34
 ---
 
 Most of the images listed in the collection (and some more out of the shed) contain geo-localisations in the form of GPS coordinates in their metadata. These **{% photo.count %} photos** are pinned on this map.

source/_dynamic/photos.md

@@ -5,7 +5,7 @@ photograph:
   file: $20-08-Mallorca-7627.jpg
   name: Photographers Mosaic
 date: 2021-08-24 15:56:00
-updated: 2024-08-12 20:40:54
+updated: 2024-08-15 10:08:34
 ---
 
 <div><img src="/images/cc-free-culture.png" class="float-element" style="width:5rem;" /></div>

source/_posts/2024/Exploit-the-feedback-potential-with-syndication-links.md

@@ -24,6 +24,7 @@ syndication:
     url: https://indieweb.social/@kiko/112950680884970685
   - host: DevTo
     url: https://dev.to/kristofzerbe/exploit-the-feedback-potential-with-syndication-links-42oh
+    id: 1960161
 ---
 
 With the introduction of my [blogroll](/blogroll/), my morning routine has changed without me having planned it. By displaying the latest blogger posts there by fetsching them while the site is build once a day, I start reading there instead of in my standard feed reader [feedly](https://feedly.com/). I no longer subscribe to the 40 blogs currently on my list, but use [Read You](https://github.com/Ashinch/ReadYou) as a blogroll reader in case I miss something. 

themes/landscape/assets/webmentions.js

@@ -1,65 +1,3 @@
-/**
- * Method to send Webmention form and retrieve reponse to show on page
- * @param {string} formName - forms name
- */
-function bindWebmentionSending(formName) {
-
-  function submitWebmention(e) {
-    e.preventDefault();
-
-    var wmForm = document.getElementsByName(formName)[0];
-    var wmData = new FormData(wmForm);
-
-    //DEBUG
-    // let dataElement = document.createElement("pre");
-    // var wmObject = {};
-    // wmData.forEach(function(value, key) { wmObject[key] = value; });
-    // dataElement.innerHTML = JSON.stringify(wmObject, null, 2);
-    // wmForm.replaceWith(dataElement);
-    // return;
-
-    let resElement = document.createElement("div");
-    resElement.classList.add("alertbox");
-    resElement.classList.add("no-block");
-
-    fetch(wmForm.action, {
-      method: wmForm.method,
-      body: wmData,
-    })
-    .then(response => {
-      if (!response.ok) {
-        resElement.classList.add("alertbox-warning");
-        resElement.innerHTML = `<p>Network returns an error</p>`;
-        wmForm.replaceWith(resElement);
-      }
-      return response.json();
-    })
-    .then((resJson) => {
-      resElement.classList.add("alertbox-success");
-      //DEBUG: resElement.innerHTML = `<pre>${JSON.stringify(resJson, null, 2)}</pre>`;
-      console.log(JSON.stringify(resJson, null, 2));
-      if (resJson && resJson.summary) {
-        resElement.innerHTML = `
-          <p><strong>Thank you!</strong> ${resJson.summary}</p>
-          <p><a href="${resJson.location}" target="blank">See result data...</a></p>
-        `;
-      } else {
-        resElement.innerHTML = `<p><strong>Thank you!</strong>`;
-      }
-      wmForm.replaceWith(resElement);
-    })
-    .catch((error) => {
-      resElement.classList.remove("alertbox-success");
-      resElement.classList.add("alertbox-warning");
-      resElement.innerHTML = `<p>${error}</p>`;
-      wmForm.replaceWith(resElement);
-    });
-  }
-
-  var myform = document.getElementsByName(formName)[0];
-  myform.addEventListener("submit", submitWebmention);
-}
-
 /**
  * Method to retreive Webmentions from webmention.io and insert them into a article page
  * see: https://kiko.io/post/Hexo-and-the-IndieWeb-Receiving-Webmentions/

themes/landscape/layout/_partial/post/interaction.ejs

@@ -1,32 +1,31 @@
 <%
-    let synArray = [];
-    if (post.syndication && post.syndication.length) {
-      post.syndication.forEach(function(syn) {
-        if (syn.host && syn.url) {
-          let wm = config.syndication_hosts.find(h => h.name === syn.host)?.webmention;
-          if (wm) {
-            synArray.push(`<a class="${syn.host.toLowerCase()}" href="${syn.url}">${syn.host}</a>`);
-          }
-        }
-      });
-    }
+  let syndications = post.syndication?.filter(s => s.url?.length > 0 && s.host?.length > 0)
+  let synDevTo = syndications?.find(s => s.host.toLowerCase() === "devto");
+  let synLinks = [];
+  let synText = "";
 
-    let synText = "";
-    if (synArray.length > 0) {
-      synText = " or by replying to its syndication on " + synArray.join(" or ");
+  if (syndications?.length > 0) {
+    syndications.forEach(function(syn) {
+      let wm = config.syndication_hosts.find(h => h.name === syn.host)?.webmention;
+      if (wm) {
+        synLinks.push(`<a class="${syn.host.toLowerCase()}" href="${syn.url}">${syn.host}</a>`);
+      }
+    });
+    if (synLinks.length > 0) {
+      synText = " or by replying to its syndication on " + synLinks.join(" or ");
     }
+  }
 %>
 
 <div class="article-share" data-pagefind-ignore>
   <button onclick="dialog.shareOnMastodon();" class="share mastodon">Share on Mastodon</button>
 </div>
 
-<% let syndication = post.syndication?.filter(s => s.url?.length > 0) %>
-<% if (syndication?.length > 0) { %>
+<% if (syndications?.length > 0) { %>
 <div class="article-syndication" data-pagefind-ignore>
   <h2>Syndication</h2>
   <div class="syndication-wrapper">
-    <%- partial('syndication-links', { syndication: syndication, type: type, text: true }) %>
+    <%- partial('syndication-links', { syndication: syndications, type: type, text: true }) %>
   </div>
 </div>
 <% } %>
@@ -61,6 +60,10 @@
     <p class="wm-placeholder">No Webmentions yet...</p>
   </div>
 
+  <%- js('js/mentions-united.js') %>
+  <%- js('js/mentions-united_webmentions.js') %>
+  <% if (synDevTo) { %><%- js('js/mentions-united_devto.js'); %><% } %>
+
   <script>
     window.addEventListener('load', function () {
       bindWebmentionSending("webmention-form");

themes/landscape/source/js/mentions-united.js

@@ -0,0 +1,46 @@
+/**
+ * Mentions United script
+ */
+const mentionsUnited = {
+  plugins: {},
+
+  register(plugin, args) {
+    const { name } = plugin;
+    plugin.options = args;
+    this.plugins[name] = plugin;
+  },
+
+  load() {
+    for (const p in this.plugins) {
+      this.plugins[p].retrieve();
+    }
+  }
+
+}
+const mentionsUnitedReaction = class  {
+  constructor() {
+    this.author = new mentionsUnitedAuthor();
+  }
+  author;
+  received;
+  type;
+  source;
+  sender;
+  protocol;
+  url;
+  content;
+  toObject() {
+    const {...object} = this;
+    object.author = this.author.toObject();
+    return object; 
+  }
+}
+const mentionsUnitedAuthor = class {
+  name;
+  avatar;
+  profile;
+  toObject() {
+    const {...object} = this;
+    return object; 
+  }
+}

themes/landscape/source/js/mentions-united_devto.js

@@ -0,0 +1,42 @@
+
+/**
+ * Mentions United plugin for retreiving reactions from DevTo
+ *
+ * Options:
+ *  - targetUrl  = URL of the page mentioned
+ *  - sourceUrl  = URL of dev.to article
+ *  - sourceId   = ID of dev.to article (only available over API)
+ *
+ * Remarks:
+ *  - If 'sourceId' is not provided, the article will fetched over the published articles list
+ */
+const mentionsUnited_devto = {
+  name: "dev.to",
+  options: {
+    targetUrl: "",
+    sourceUrl: "",
+    sourceId: 0
+  },
+  retrieve: function () {
+    console.log(`Retreiving devto reactions on ${this.options.url}`);
+    console.log(this.options);
+
+    let reactions = [];
+
+    // load reactions from dev.to into 'reactions'
+
+    // let r = new mentionsUnitedReaction();
+    // r.author.name = "Me";
+    // r.author.avatar = "http//xxx.com";
+    // r.author.profile = "https://yyy.com"
+    // r.type = "comment";
+    // console.log(r);
+    // let ro = r.toObject();
+    // console.log(ro);
+
+    reactions.push(r);
+    //console.log(reactions);
+
+    return reactions;
+  }
+}

themes/landscape/source/js/mentions-united_pixelfed.js

@@ -0,0 +1,19 @@
+
+/**
+ * Mentions United plugin for retreiving reactions from Pixelfed
+ */
+const mentionsUnited_pixelfed = {
+  name: "pixelfed.social",
+  options: {
+    //define options and init with null
+  },
+  retrieve: function () {
+    console.log(`Retreiving pixelfed reactions`);
+
+    let reactions = [];
+
+    // load reactions from dev.to into 'reactions'
+
+    return reactions;
+  }
+}

themes/landscape/source/js/mentions-united_webmentions.js

@@ -0,0 +1,27 @@
+
+/**
+ * Mentions United plugin for retreiving webmentions from webmention.io
+ * 
+ * Options:
+ *  - targetUrl  = URL of the page mentioned
+ *  - aliasUrl   = alternative URL of the page
+ *  - authorName = Author's name to determine if a wm is a reply of the owner
+ */
+const mentionsUnited_webmentions = {
+  name: "webmention.io",
+  options: { 
+    targetUrl: "", 
+    aliasUrl: "",
+    authorName: ""
+  },
+  retrieve: function () {
+    console.info(`Retreiving webmentions for '${this.options.host}'`);
+    console.log(this.options);
+
+    let reactions = [];
+
+    // load webmentions from webmention.io into 'reactions'
+
+    return reactions;
+  }
+}

themes/landscape/source/js/scripts.js

@@ -249,4 +249,62 @@ function setVibrantColor(theme) {
   }
 }
 
+function bindWebmentionSending(formName) {
+
+  function submitWebmention(e) {
+    e.preventDefault();
+
+    var wmForm = document.getElementsByName(formName)[0];
+    var wmData = new FormData(wmForm);
+
+    //DEBUG
+    // let dataElement = document.createElement("pre");
+    // var wmObject = {};
+    // wmData.forEach(function(value, key) { wmObject[key] = value; });
+    // dataElement.innerHTML = JSON.stringify(wmObject, null, 2);
+    // wmForm.replaceWith(dataElement);
+    // return;
+
+    let resElement = document.createElement("div");
+    resElement.classList.add("alertbox");
+    resElement.classList.add("no-block");
+
+    fetch(wmForm.action, {
+      method: wmForm.method,
+      body: wmData,
+    })
+    .then(response => {
+      if (!response.ok) {
+        resElement.classList.add("alertbox-warning");
+        resElement.innerHTML = `<p>Network returns an error</p>`;
+        wmForm.replaceWith(resElement);
+      }
+      return response.json();
+    })
+    .then((resJson) => {
+      resElement.classList.add("alertbox-success");
+      //DEBUG: resElement.innerHTML = `<pre>${JSON.stringify(resJson, null, 2)}</pre>`;
+      // console.log(JSON.stringify(resJson, null, 2));
+      if (resJson && resJson.summary) {
+        resElement.innerHTML = `
+          <p><strong>Thank you!</strong> ${resJson.summary}</p>
+          <p><a href="${resJson.location}" target="blank">See result data...</a></p>
+        `;
+      } else {
+        resElement.innerHTML = `<p><strong>Thank you!</strong>`;
+      }
+      wmForm.replaceWith(resElement);
+    })
+    .catch((error) => {
+      resElement.classList.remove("alertbox-success");
+      resElement.classList.add("alertbox-warning");
+      resElement.innerHTML = `<p>${error}</p>`;
+      wmForm.replaceWith(resElement);
+    });
+  }
+
+  var myform = document.getElementsByName(formName)[0];
+  myform.addEventListener("submit", submitWebmention);
+}
+
 /** ============================================================ */