Add support for handling dataviewjs links

.eleventy.js

@@ -29,6 +29,68 @@ function transformImage(src, cls, alt, sizes, widths = ["500", "700", "auto"]) {
   return metadata;
 }
 
+function getAnchorLink(filePath, linkTitle) {
+  const {attributes, innerHTML} = getAnchorAttributes(filePath, linkTitle);
+  return `<a ${Object.keys(attributes).map(key => `${key}="${attributes[key]}"`).join(" ")}>${innerHTML}</a>`;
+}
+
+function getAnchorAttributes(filePath, linkTitle) {
+  let fileName = filePath.replaceAll("&amp;", "&");
+  let header = "";
+  let headerLinkPath = "";
+  if (filePath.includes("#")) {
+    [fileName, header] = filePath.split("#");
+    headerLinkPath = `#${headerToId(header)}`;
+  }
+
+  let noteIcon = process.env.NOTE_ICON_DEFAULT;
+  const title = linkTitle ? linkTitle : fileName;
+  let permalink = `/notes/${slugify(filePath)}`;
+  let deadLink = false;
+  try {
+    const startPath = "./src/site/notes/";
+    const fullPath = filePath.endsWith(".md")
+      ? `${startPath}${filePath}`
+      : `${startPath}${filePath}.md`;
+    const file = fs.readFileSync(fullPath, "utf8");
+    const frontMatter = matter(file);
+    if (frontMatter.data.permalink) {
+      permalink = frontMatter.data.permalink;
+    }
+    if (
+      frontMatter.data.tags &&
+      frontMatter.data.tags.indexOf("gardenEntry") != -1
+    ) {
+      permalink = "/";
+    }
+    if (frontMatter.data.noteIcon) {
+      noteIcon = frontMatter.data.noteIcon;
+    }
+  } catch {
+    deadLink = true;
+  }
+
+  if (deadLink) {
+    return {
+      attributes: {
+        "class": "internal-link is-unresolved",
+        "href": "/404",
+        "target": "",
+      },
+      innerHTML: title,
+    }
+  }
+  return {
+    attributes: {
+      "class": "internal-link",
+      "target": "",
+      "data-note-icon": noteIcon,
+      "href": `${permalink}${headerLinkPath}`,
+    },
+    innerHTML: title,
+  }
+}
+
 const tagRegex = /(^|\s|\>)(#[^\s!@#$%^&*()=+\.,\[{\]};:'"?><]+)(?!([^<]*>))/g;
 
 module.exports = function (eleventyConfig) {
@@ -212,7 +274,6 @@ module.exports = function (eleventyConfig) {
     return date && date.toISOString();
   });
 
-
   eleventyConfig.addFilter("link", function (str) {
     return (
       str &&
@@ -223,46 +284,7 @@ module.exports = function (eleventyConfig) {
         }
         const [fileLink, linkTitle] = p1.split("|");
 
-        let fileName = fileLink.replaceAll("&amp;", "&");
+        return getAnchorLink(fileLink, linkTitle);
-        let header = "";
-        let headerLinkPath = "";
-        if (fileLink.includes("#")) {
-          [fileName, header] = fileLink.split("#");
-          headerLinkPath = `#${headerToId(header)}`;
-        }
-
-        let permalink = `/notes/${slugify(fileName)}`;
-        let noteIcon = process.env.NOTE_ICON_DEFAULT;
-        const title = linkTitle ? linkTitle : fileName;
-        let deadLink = false;
-
-        try {
-          const startPath = "./src/site/notes/";
-          const fullPath = fileName.endsWith(".md")
-            ? `${startPath}${fileName}`
-            : `${startPath}${fileName}.md`;
-          const file = fs.readFileSync(fullPath, "utf8");
-          const frontMatter = matter(file);
-          if (frontMatter.data.permalink) {
-            permalink = frontMatter.data.permalink;
-          }
-          if (
-            frontMatter.data.tags &&
-            frontMatter.data.tags.indexOf("gardenEntry") != -1
-          ) {
-            permalink = "/";
-          }
-          if (frontMatter.data.noteIcon) {
-            noteIcon = frontMatter.data.noteIcon;
-          }
-        } catch {
-          deadLink = true;
-        }
-
-        if (deadLink) {
-          return `<a class="internal-link is-unresolved" href="/404">${title}</a>`;
-        }
-        return `<a class="internal-link" data-note-icon="${noteIcon}" href="${permalink}${headerLinkPath}">${title}</a>`;
       })
     );
   });
@@ -302,6 +324,21 @@ module.exports = function (eleventyConfig) {
     );
   });
 
+  eleventyConfig.addTransform("dataview-js-links", function (str) {
+    const parsed = parse(str);
+    for (const dataViewJsLink of parsed.querySelectorAll("a[data-href].internal-link")) {
+      const notePath = dataViewJsLink.getAttribute("data-href");
+      const title = dataViewJsLink.innerHTML;
+      const {attributes, innerHTML} = getAnchorAttributes(notePath, title);
+      for (const key in attributes) {
+        dataViewJsLink.setAttribute(key, attributes[key]);
+      }
+      dataViewJsLink.innerHTML = innerHTML;
+    }
+
+    return str && parsed.innerHTML;
+  });
+
   eleventyConfig.addTransform("callout-block", function (str) {
     const parsed = parse(str);