add support for xlinks (closes #5)

client/src/index.html

@@ -109,6 +109,42 @@ <h1>This is a test</h1>
       eget gravida magna molestie.
     </p>
 
+    <svg
+      width="600px"
+      height="550px"
+      viewBox="0 0 600 550"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <line x1="5" y1="10" x2="440" y2="550" stroke="black"></line>
+      <a xlink:href="https://en.wikipedia.org" id="svg-link">
+        <line x1="5" y1="10" x2="50" y2="10" stroke="black"></line>
+        <circle cx="5" cy="10" r="5"></circle>
+        <text x="55" y="15">
+          Thu, Sep 9, 2021
+          <tspan x="55" y="35">in Berkeley, CA</tspan>
+        </text>
+      </a>
+
+      <polygon points="440,540 440,550 430,550"></polygon>
+      <style>
+        text {
+          text-decoration: underline;
+          text-decoration-style: dotted;
+        }
+
+        a:hover {
+          fill: var(--external-link-color);
+        }
+
+        a: hover &gt;
+        line {
+          stroke: var(--external-link-color);
+        }
+        * {
+        }
+      </style>
+    </svg>
+
     <p>
       <a
         id="link-2"

client/src/index.js

@@ -33,7 +33,12 @@ function linkPreview(elt, opts = {}) {
   }
 
   let element = getElement(elt);
-  // TODO verify the element has a valid href
+
+  if (element.hasAttribute("href") || element.hasAttribute("xlink:href")) {
+    // ok, the element has an href
+  } else {
+    logError("element missing href");
+  }
 
   if (!opts.template || options.template === "basic") {
     // if the user hasn't provided a template, add the default one to the DOM
@@ -47,10 +52,12 @@ function linkPreview(elt, opts = {}) {
   const observer = new MutationObserver((mutations, observer) => {
     for (const mutation of mutations) {
       if (
-        mutation.attributeName === "href" ||
+        mutation.attributeName.includes("href") ||
         mutation.attributeName.includes("lp-") // any attribute prefixed by lp-* we use
       ) {
-        const attr = mutation.attributeName.replace("lp-", "");
+        const attr = mutation.attributeName
+          .replace("lp-", "")
+          .replace("xlink:", "");
         const attrValue = element.getAttribute(mutation.attributeName);
         options.content[attr] = attrValue;
 
@@ -68,7 +75,7 @@ function linkPreview(elt, opts = {}) {
 
   // get the attributes from the element
   for (const attribute of element.attributes) {
-    const attr = attribute.nodeName.replace("lp-", "");
+    const attr = attribute.nodeName.replace("lp-", "").replace("xlink:", "");
     options.content[attr] = attribute.nodeValue;
   }
   preview.setAttribute("content", JSON.stringify(options.content));

client/src/utils/getElement.js

@@ -13,6 +13,8 @@ const getElement = (elt) => {
     }
   } else if (elt instanceof HTMLElement) {
     element = elt;
+  } else if (elt instanceof SVGElement) {
+    element = elt;
   } else {
     logError("unknown element type; must be a string or HTMLElement");
   }