Feat: Fix dead links

quartz/plugins/emitters/contentPage.tsx

@@ -5,15 +5,18 @@ import HeaderConstructor from "../../components/Header"
 import BodyConstructor from "../../components/Body"
 import { pageResources, renderPage } from "../../components/renderPage"
 import { FullPageLayout } from "../../cfg"
-import { pathToRoot } from "../../util/path"
+import { pathToRoot, resolveRelative } from "../../util/path"
 import { defaultContentPageLayout, sharedPageComponents } from "../../../quartz.layout"
 import { Content } from "../../components"
 import { styleText } from "util"
 import { write } from "./helpers"
 import { BuildCtx } from "../../util/ctx"
 import { Node } from "unist"
+import { Root } from "hast"
 import { StaticResources } from "../../util/resources"
 import { QuartzPluginData } from "../vfile"
+import { visit } from "unist-util-visit"
+import { RelativeURL } from "../../util/path"
 
 async function processContent(
   ctx: BuildCtx,
@@ -25,6 +28,38 @@ async function processContent(
 ) {
   const slug = fileData.slug!
   const cfg = ctx.cfg.configuration
+
+  const allSlugs = allFiles.map((f) => (f.slug ? resolveRelative(slug, f.slug) : ""))
+
+  visit(tree as Root, "element", (elem) => {
+    if (elem.tagName === "a" && elem.properties.href) {
+      const href = elem.properties.href.toString()
+
+      if (href.startsWith("#")) {
+        return
+      }
+
+      if (!allSlugs.includes(href as RelativeURL)) {
+        if (elem.properties.className === undefined) {
+          elem.properties.className = "dead-link"
+        } else if (Array.isArray(elem.properties.className)) {
+          if (elem.properties.className.includes("external")) {
+            return
+          }
+          elem.properties.className.push("dead-link")
+        } else if (typeof elem.properties.className === "string") {
+          if (elem.properties.className.includes("external")) {
+            return
+          }
+          elem.properties.className += " dead-link"
+        } else {
+          return
+        }
+        elem.tagName = "span"
+      }
+    }
+  })
+
   const externalResources = pageResources(pathToRoot(slug), resources)
   const componentData: QuartzComponentProps = {
     ctx,

quartz/styles/custom.scss

@@ -1,3 +1,15 @@
 @use "./base.scss";
 
 // put your custom CSS here!
+// Dead link styling - links to missing pages
+.dead-link {
+  font-weight: 600;
+  text-decoration: none;
+  transition: color 0.2s ease;
+  color: #d97706;
+  background-color: var(--lightgray);
+  padding: 0 0.1rem;
+  border-radius: 5px;
+  line-height: 1.4rem;
+  cursor: default;
+}