fix relative pathing for dynamic fetch

assets/base.scss

@@ -470,7 +470,7 @@ header {
 .popover {
   z-index: 999;
   position: absolute;
-  width: 15em;
+  width: 20em;
   display: inline-block;
   visibility: hidden;
   background-color: var(--light);
@@ -491,11 +491,18 @@ header {
   }
 
   & > h3 {
-    margin: 0.5em 0;
+    font-size: 1rem;
+    margin: 0.25em 0;
+  }
+
+  & > .meta {
+    margin-top: 0.25em;
+    opacity: 0.5;
   }
 
   & > p {
     margin: 0;
     font-weight: 400;
+    user-select: none;
   }
 }

config.toml

@@ -2,7 +2,7 @@ baseURL = "https://quartz.jzhao.xyz/"
 languageCode = "en-us"
 googleAnalytics = "G-XYFD95KB4J"
 pygmentsUseClasses = true
-relativeURLs = true
+relativeURLs = false
 disablePathToLower = true
 ignoreFiles = [
     "/content/templates/*",

layouts/_default/_markup/render-link.html

@@ -5,5 +5,6 @@
 <a href="{{ $trimmed }}" rel="noopener">{{ .Text | safeHTML }}</a>
 {{- else -}}
 {{$fixedUrl := (cond (hasPrefix $trimmed "/") $trimmed (print "/" $trimmed)) | urlize}}
-<a href="{{$fixedUrl}}" rel="noopener" class="internal-link" data-src="{{$fixedUrl}}">{{ .Text | safeHTML }}</a>
+{{$rooted := strings.TrimRight "/" (.Page.GetPage $fixedUrl).RelPermalink }}
+<a href="{{$rooted}}" rel="noopener" class="internal-link" data-src="{{$rooted}}">{{ .Text | safeHTML }}</a>
 {{- end -}}

layouts/partials/head.html

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

layouts/partials/popover.html

@@ -1,23 +1,26 @@
 {{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, '')]
+    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)
@@ -30,8 +33,6 @@ async function run() {
           }
         })
     })
-}
-
-run()
+  })
 </script>
 {{end}}