diff --git a/quartz/plugins/emitters/contentPage.tsx b/quartz/plugins/emitters/contentPage.tsx index c3410ecc3..e0b3f6728 100644 --- a/quartz/plugins/emitters/contentPage.tsx +++ b/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, diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index b0c09dcb9..752b145f4 100644 --- a/quartz/styles/custom.scss +++ b/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; +}