feat!: use indieweb-glue

1 files changed, 33 insertions, 9 deletions

diff --git a/hovercard.js b/hovercard.js
index 9b8a92e..c8bd491 100644
--- a/hovercard.js
+++ b/hovercard.js
@@ -1,9 +1,13 @@
-// comment out this variable to add your own hovercards
-// var hovercards = {
-//     "https://www.w3.org/community/sustyweb/": {"title": "Sustainable Web Design Community Group", "A community group dedicated to creating sustainable websites. This group will not publish specifications." }
-//   };
-  
-  var article = document.getElementsByTagName("article");
+var curURL = document.URL
+var baseURL = document.domain
+
+// these will not attempt to get fetched, so can be used to override things
+var hovercards = {
+  curURL : {},
+  baseURL: {}
+};
+
+var article = document.getElementsByTagName("article");
 
   if (article) {
     article = article[0];
@@ -14,7 +18,14 @@
     if (hovercard_data) {
       var new_box = document.createElement("div");
       new_box.classList.add("hovercard");
-      new_box.innerHTML = "<strong>" + hovercard_data["title"] + "</strong><p>" + hovercard_data["description"] + "</p>";
+      new_box.innerHTML = "<strong>" + hovercard_data["title"] + "</strong>"
+      if (hovercard_data["description"]) {
+        new_box.innerHTML = new_box.innerHTML + "<p>" + hovercard_data["description"] + "</p>";
+      }
+      // if image available, add it
+      if (hovercard_data["image"]) {
+        new_box.innerHTML = "<img src='" + hovercard_data["image"] + "' alt='" + hovercard_data["title"] + "' /><br>" + new_box.innerHTML;
+      }
       new_box.style.top = window.scrollY + target_link.getBoundingClientRect().top + "px";
       new_box.style.left = window.scrollX + target_link.getBoundingClientRect().left + "px";
       new_box.id = "tooltip";
@@ -47,5 +58,18 @@
     links[i].addEventListener("onfocusout", function() {
       unhover(this);
     });
-  }
-
+    let url = links[i].href.replace(/\/+$/, "");
+    if (!hovercards[url]) {
+      let req = 'https://indieweb-glue.evgenykuznetsov.org/api/opengraph?url=';
+      req += url;
+      const r = encodeURI(req);
+      var xmlhttp = new XMLHttpRequest();
+      xmlhttp.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+          hovercards[url] = JSON.parse(this.responseText);
+        }
+      };
+      xmlhttp.open("GET", r, true);
+      xmlhttp.send();
+    }
+  }
\ No newline at end of file