fix relative pathing for dynamic fetch

layouts/partials/head.html

@@ -26,24 +26,33 @@
 
     <!--  Preload page vars  -->
     <script>
-    const fetchData = async () => {
-      const promises = [
-        fetch("/linkIndex.json")
-          .then(data => data.json())
-          .then(data => ({
-            index: data.index,
-            links: data.links,
-          })),
-        fetch("/contentIndex.json")
-          .then(data => data.json()),
-      ]
-      const [{index, links}, content] = await Promise.all(promises)
-      return ({
-        index,
-        links,
-        content,
-      })
-    }
+      let saved = false
+      const fetchData = async () => {
+        if (saved) {
+          return saved
+        } else {
+          const promises = [
+            fetch("{{ .Site.BaseURL }}/linkIndex.json")
+              .then(data => data.json())
+              .then(data => ({
+                index: data.index,
+                links: data.links,
+              })),
+            fetch("{{ .Site.BaseURL }}/contentIndex.json")
+              .then(data => data.json()),
+          ]
+          const [{index, links}, content] = await Promise.all(promises)
+          const res = ({
+            index,
+            links,
+            content,
+          })
+          saved = res
+          return res
+        }
+
+      }
+      fetchData()
     </script>
 </head>
 {{ template "_internal/google_analytics.html" . }}

layouts/partials/popover.html

@@ -1,37 +1,38 @@
 {{if $.Site.Data.config.enableLinkPreview}}
 <script>
-async function run() {
-  const {content} = await fetchData()
   function htmlToElement(html) {
     const template = document.createElement('template')
     html = html.trim()
     template.innerHTML = html
     return template.content.firstChild
   }
-
-  const pathRegex = /\.\.?(\/\.\.)*/
+  const baseUrl = {{strings.TrimRight "/" .Site.BaseURL }}.replace(window.location.origin, "")
   document.addEventListener("DOMContentLoaded", () => {
-    [...document.getElementsByClassName("internal-link")]
-      .forEach(li => {
-        const linkDest = content[li.dataset.src.replace(pathRegex, '')]
-        if (linkDest) {
-          const popoverElement = `<div class="popover">
+    fetchData().then(({content}) => {
+      const links = [...document.getElementsByClassName("internal-link")]
+      links.forEach(li => {
+        console.log(li.dataset.src.replace(baseUrl, ""))
+        console.log(content[li.dataset.src.replace(baseUrl, "")])
+        console.log(content)
+        const linkDest = content[li.dataset.src.replace(baseUrl, "")]
+        // const linkDest = content[li.dataset.src]
+          if (linkDest) {
+            const popoverElement = `<div class="popover">
     <h3>${linkDest.title}</h3>
-    <p>${removeMarkdown(linkDest.content).split(" ", 15).join(" ")}...</p>
+    <p>${removeMarkdown(linkDest.content).split(" ", 20).join(" ")}...</p>
+    <p class="meta">${new Date(linkDest.lastmodified).toLocaleDateString()}</p>
 </div>`
-          const el = htmlToElement(popoverElement)
-          li.appendChild(el)
-          li.addEventListener("mouseover", () => {
-            el.classList.add("visible")
-          })
-          li.addEventListener("mouseout", () => {
-            el.classList.remove("visible")
-          })
-        }
-      })
+            const el = htmlToElement(popoverElement)
+            li.appendChild(el)
+            li.addEventListener("mouseover", () => {
+              el.classList.add("visible")
+            })
+            li.addEventListener("mouseout", () => {
+              el.classList.remove("visible")
+            })
+          }
+        })
+    })
   })
-}
-
-run()
 </script>
 {{end}}