Merge 539611a05f9a6e71b1520293be6d004c3697955d into 91189dfd2f4cb32e205117b327e0ae7a0c2dd716

Co-authored-by: Aaron Pham <Aaronpham0103@gmail.com>

docs/plugins/CrawlLinks.md

@@ -19,6 +19,7 @@ This plugin accepts the following configuration options:
 - `openLinksInNewTab`: If `true`, configures external links to open in a new tab. Defaults to `false`.
 - `lazyLoad`: If `true`, adds lazy loading to resource elements (`img`, `video`, etc.) to improve page load performance. Defaults to `false`.
 - `externalLinkIcon`: Adds an icon next to external links when `true` (default) to visually distinguishing them from internal links.
+- `indexFrontmatterWikilinks`: If `true`, parses Obsidian-style wikilinks in the frontmatter and adds them to the graph (including things like backlinks) as if they were part of the note content. Defaults to `false`.
 
 > [!warning]
 > Removing this plugin is _not_ recommended and will likely break the page.

quartz.layout.ts

@@ -27,7 +27,7 @@ export const defaultContentPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
+    Component.Explorer(),
   ],
   right: [
     Component.Graph(),
@@ -44,7 +44,7 @@ export const defaultListPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer()),
+    Component.Explorer(),
   ],
   right: [],
 }

quartz/components/Explorer.tsx

@@ -1,5 +1,5 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
-import explorerStyle from "./styles/explorer.scss"
+import style from "./styles/explorer.scss"
 
 // @ts-ignore
 import script from "./scripts/explorer.inline"
@@ -83,18 +83,46 @@ export default ((userOpts?: Partial<Options>) => {
       lastBuildId = ctx.buildId
       constructFileTree(allFiles)
     }
-
     return (
       <div class={classNames(displayClass, "explorer")}>
         <button
           type="button"
-          id="explorer"
+          id="mobile-explorer"
+          class="collapsed hide-until-loaded"
           data-behavior={opts.folderClickBehavior}
           data-collapsed={opts.folderDefaultState}
           data-savestate={opts.useSavedState}
           data-tree={jsonTree}
+          data-mobile={true}
           aria-controls="explorer-content"
-          aria-expanded={opts.folderDefaultState === "open"}
+          aria-expanded={false}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-menu"
+          >
+            <line x1="4" x2="20" y1="12" y2="12" />
+            <line x1="4" x2="20" y1="6" y2="6" />
+            <line x1="4" x2="20" y1="18" y2="18" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          id="desktop-explorer"
+          class="title-button"
+          data-behavior={opts.folderClickBehavior}
+          data-collapsed={opts.folderDefaultState}
+          data-savestate={opts.useSavedState}
+          data-tree={jsonTree}
+          data-mobile={false}
+          aria-controls="explorer-content"
+          aria-expanded={true}
         >
           <h2>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h2>
           <svg
@@ -122,7 +150,7 @@ export default ((userOpts?: Partial<Options>) => {
     )
   }
 
-  Explorer.css = explorerStyle
+  Explorer.css = style
   Explorer.afterDOMLoaded = script
   return Explorer
 }) satisfies QuartzComponentConstructor

quartz/components/PageProperties.tsx

@@ -0,0 +1,165 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
+import { ComponentChildren, ComponentType } from "preact"
+import { externalLinkRegex, wikilinkRegex } from "../plugins/transformers/ofm"
+import style from "./styles/pageProperties.scss"
+import { pathToRoot, simplifySlug, slugTag, transformLink } from "../util/path"
+import { getFullInternalLink } from "../plugins/transformers/links"
+
+export type FieldComponent = ComponentType<
+  QuartzComponentProps & { fieldName: string; fieldValue: any }
+>
+
+interface PagePropertiesOptions {
+  fieldComponents: {
+    [name: string]: FieldComponent
+  }
+  defaultFieldComponent: FieldComponent
+}
+
+// this is ugly, we kind of ripped out what quartz does from ofm.ts
+// at least in my earlier commit we separated out the `getFullInternalLink` part
+// also hardcoded "shortest" transform strategy
+function renderInternalLink(
+  value: string,
+  rawFp: string,
+  rawHeader: string | undefined,
+  rawAlias: string | undefined,
+  props: QuartzComponentProps,
+): ComponentChildren {
+  const fp = rawFp?.trim() ?? ""
+  const anchor = rawHeader?.trim() ?? ""
+  const alias = rawAlias?.slice(1).trim()
+
+  const url = fp + anchor
+  const text = alias ?? fp
+
+  const href = transformLink(props.fileData.slug!, url, {
+    strategy: "shortest",
+    allSlugs: props.ctx.allSlugs,
+  })
+  const full = getFullInternalLink(href, simplifySlug(props.fileData.slug!))
+
+  return (
+    <a class="internal" href={href} data-slug={full}>
+      {text}
+    </a>
+  )
+}
+
+export const DefaultFieldComponent: FieldComponent = (props) => {
+  const { fieldValue } = props
+  if (fieldValue === null) {
+    return "null"
+  }
+  if (fieldValue === undefined) {
+    return null
+  }
+  if (typeof fieldValue === "string") {
+    if (fieldValue.match(externalLinkRegex)) {
+      return (
+        <a class="external" href={fieldValue} target="_blank">
+          {fieldValue}
+        </a>
+      )
+    }
+    const [match] = [...fieldValue.matchAll(wikilinkRegex)]
+    if (match && match[0] === fieldValue && !fieldValue.startsWith("!")) {
+      return renderInternalLink(fieldValue, match[1], match[2], match[3], props)
+    }
+    return fieldValue
+  }
+  if (Array.isArray(fieldValue)) {
+    if (fieldValue.length === 0) {
+      return null
+    }
+    return (
+      <ul class="property-list">
+        {fieldValue.map((v) => (
+          <li>
+            <DefaultFieldComponent {...props} fieldValue={v} />
+          </li>
+        ))}
+      </ul>
+    )
+  }
+  if (typeof fieldValue === "object") {
+    return <code>{JSON.stringify(fieldValue, null, 2)}</code>
+  }
+  return fieldValue.toString?.() ?? null
+}
+
+export const TagFieldComponent: FieldComponent = ({ fieldValue, fileData }) => {
+  const tags = Array.isArray(fieldValue) ? fieldValue : [fieldValue]
+  const baseDir = pathToRoot(fileData.slug!)
+  return (
+    <ul class="property-list">
+      {tags.map((tag) => {
+        return (
+          <li>
+            <a href={`${baseDir}/tags/${slugTag(`${tag}`)}`} class="internal tag-link">
+              {tag}
+            </a>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+// A sentinel value that hides a field
+export const HIDE = () => null
+
+const defaultOptions: PagePropertiesOptions = {
+  fieldComponents: {
+    title: HIDE,
+    date: HIDE,
+    cssclasses: HIDE,
+    tags: TagFieldComponent,
+    ["hide-props"]: HIDE,
+  },
+  defaultFieldComponent: DefaultFieldComponent,
+}
+
+export default ((opts?: Partial<PagePropertiesOptions>) => {
+  const fieldComponents = { ...defaultOptions.fieldComponents, ...opts?.fieldComponents }
+  const DefaultFieldComponent = opts?.defaultFieldComponent ?? defaultOptions.defaultFieldComponent
+
+  const PageProperties: QuartzComponent = (props: QuartzComponentProps) => {
+    if (!props.fileData.frontmatterRaw) {
+      return null
+    }
+
+    const hideRaw = props.fileData.frontmatter?.["hide-props"] ?? []
+    const hide = Array.isArray(hideRaw) ? hideRaw : [hideRaw]
+
+    const entries = Object.entries(props.fileData.frontmatterRaw).map(([name, value]) => {
+      // allow hiding through frontmatter
+      if (hide.includes(name)) {
+        return null
+      }
+      const FieldComponent = fieldComponents[name] ?? DefaultFieldComponent
+      // allow hiding through config
+      if (FieldComponent === HIDE) {
+        return null
+      }
+      return (
+        <>
+          <dt>{name}</dt>
+          <dd>
+            <FieldComponent {...props} fieldName={name} fieldValue={value} />
+          </dd>
+        </>
+      )
+    })
+
+    // avoid the padding if there's no frontmatter
+    return entries.length !== 0 ? (
+      <dl class={classNames(props.displayClass, "page-props")}>{entries}</dl>
+    ) : null
+  }
+
+  PageProperties.css = style
+
+  return PageProperties
+}) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -11,6 +11,7 @@ import Spacer from "./Spacer"
 import TableOfContents from "./TableOfContents"
 import Explorer from "./Explorer"
 import TagList from "./TagList"
+import PageProperties from "./PageProperties"
 import Graph from "./Graph"
 import Backlinks from "./Backlinks"
 import Search from "./Search"
@@ -34,6 +35,7 @@ export {
   TableOfContents,
   Explorer,
   TagList,
+  PageProperties,
   Graph,
   Backlinks,
   Search,

quartz/components/scripts/explorer.inline.ts

@@ -1,7 +1,9 @@
 import { FolderState } from "../ExplorerNode"
 
+// Current state of folders
 type MaybeHTMLElement = HTMLElement | undefined
 let currentExplorerState: FolderState[]
+
 const observer = new IntersectionObserver((entries) => {
   // If last element is observed, remove gradient of "overflow" class so element is visible
   const explorerUl = document.getElementById("explorer-ul")
@@ -16,23 +18,43 @@ const observer = new IntersectionObserver((entries) => {
 })
 
 function toggleExplorer(this: HTMLElement) {
+  // Toggle collapsed state of entire explorer
   this.classList.toggle("collapsed")
+
+  // Toggle collapsed aria state of entire explorer
   this.setAttribute(
     "aria-expanded",
     this.getAttribute("aria-expanded") === "true" ? "false" : "true",
   )
-  const content = this.nextElementSibling as MaybeHTMLElement
-  if (!content) return
 
+  const content = (
+    this.nextElementSibling?.nextElementSibling
+      ? this.nextElementSibling.nextElementSibling
+      : this.nextElementSibling
+  ) as MaybeHTMLElement
+  if (!content) return
   content.classList.toggle("collapsed")
+  content.classList.toggle("explorer-viewmode")
+
+  // Prevent scroll under
+  if (document.querySelector("#mobile-explorer")) {
+    // Disable scrolling on the page when the explorer is opened on mobile
+    const bodySelector = document.querySelector("#quartz-body")
+    if (bodySelector) bodySelector.classList.toggle("lock-scroll")
+  }
 }
 
 function toggleFolder(evt: MouseEvent) {
   evt.stopPropagation()
+
+  // Element that was clicked
   const target = evt.target as MaybeHTMLElement
   if (!target) return
 
+  // Check if target was svg icon or button
   const isSvg = target.nodeName === "svg"
+
+  // corresponding <ul> element relative to clicked button/folder
   const childFolderContainer = (
     isSvg
       ? target.parentElement?.nextSibling
@@ -42,10 +64,14 @@ function toggleFolder(evt: MouseEvent) {
     isSvg ? target.nextElementSibling : target.parentElement
   ) as MaybeHTMLElement
   if (!(childFolderContainer && currentFolderParent)) return
-
+  // <li> element of folder (stores folder-path dataset)
   childFolderContainer.classList.toggle("open")
+
+  // Collapse folder container
   const isCollapsed = childFolderContainer.classList.contains("open")
   setFolderState(childFolderContainer, !isCollapsed)
+
+  // Save folder state to localStorage
   const fullFolderPath = currentFolderParent.dataset.folderpath as string
   toggleCollapsedByPath(currentExplorerState, fullFolderPath)
   const stringifiedFileTree = JSON.stringify(currentExplorerState)
@@ -53,57 +79,106 @@ function toggleFolder(evt: MouseEvent) {
 }
 
 function setupExplorer() {
-  const explorer = document.getElementById("explorer")
-  if (!explorer) return
+  // Set click handler for collapsing entire explorer
+  const allExplorers = document.querySelectorAll(".explorer > button") as NodeListOf<HTMLElement>
 
-  if (explorer.dataset.behavior === "collapse") {
+  for (const explorer of allExplorers) {
+    // Get folder state from local storage
+    const storageTree = localStorage.getItem("fileTree")
+
+    // Convert to bool
+    const useSavedFolderState = explorer?.dataset.savestate === "true"
+
+    if (explorer) {
+      // Get config
+      const collapseBehavior = explorer.dataset.behavior
+
+      // Add click handlers for all folders (click handler on folder "label")
+      if (collapseBehavior === "collapse") {
+        for (const item of document.getElementsByClassName(
+          "folder-button",
+        ) as HTMLCollectionOf<HTMLElement>) {
+          window.addCleanup(() => explorer.removeEventListener("click", toggleExplorer))
+          item.addEventListener("click", toggleFolder)
+        }
+      }
+
+      // Add click handler to main explorer
+      window.addCleanup(() => explorer.removeEventListener("click", toggleExplorer))
+      explorer.addEventListener("click", toggleExplorer)
+    }
+
+    // Set up click handlers for each folder (click handler on folder "icon")
     for (const item of document.getElementsByClassName(
-      "folder-button",
+      "folder-icon",
     ) as HTMLCollectionOf<HTMLElement>) {
       item.addEventListener("click", toggleFolder)
       window.addCleanup(() => item.removeEventListener("click", toggleFolder))
     }
+
+    // Get folder state from local storage
+    const oldExplorerState: FolderState[] =
+      storageTree && useSavedFolderState ? JSON.parse(storageTree) : []
+    const oldIndex = new Map(oldExplorerState.map((entry) => [entry.path, entry.collapsed]))
+    const newExplorerState: FolderState[] = explorer.dataset.tree
+      ? JSON.parse(explorer.dataset.tree)
+      : []
+    currentExplorerState = []
+
+    for (const { path, collapsed } of newExplorerState) {
+      currentExplorerState.push({
+        path,
+        collapsed: oldIndex.get(path) ?? collapsed,
+      })
+    }
+
+    currentExplorerState.map((folderState) => {
+      const folderLi = document.querySelector(
+        `[data-folderpath='${folderState.path.replace("'", "-")}']`,
+      ) as MaybeHTMLElement
+      const folderUl = folderLi?.parentElement?.nextElementSibling as MaybeHTMLElement
+      if (folderUl) {
+        setFolderState(folderUl, folderState.collapsed)
+      }
+    })
   }
+}
 
-  explorer.addEventListener("click", toggleExplorer)
-  window.addCleanup(() => explorer.removeEventListener("click", toggleExplorer))
+function toggleExplorerFolders() {
+  const currentFile = (document.querySelector("body")?.getAttribute("data-slug") ?? "").replace(
+    /\/index$/g,
+    "",
+  )
+  const allFolders = document.querySelectorAll(".folder-outer")
 
-  // Set up click handlers for each folder (click handler on folder "icon")
-  for (const item of document.getElementsByClassName(
-    "folder-icon",
-  ) as HTMLCollectionOf<HTMLElement>) {
-    item.addEventListener("click", toggleFolder)
-    window.addCleanup(() => item.removeEventListener("click", toggleFolder))
-  }
-
-  // Get folder state from local storage
-  const storageTree = localStorage.getItem("fileTree")
-  const useSavedFolderState = explorer?.dataset.savestate === "true"
-  const oldExplorerState: FolderState[] =
-    storageTree && useSavedFolderState ? JSON.parse(storageTree) : []
-  const oldIndex = new Map(oldExplorerState.map((entry) => [entry.path, entry.collapsed]))
-  const newExplorerState: FolderState[] = explorer.dataset.tree
-    ? JSON.parse(explorer.dataset.tree)
-    : []
-  currentExplorerState = []
-  for (const { path, collapsed } of newExplorerState) {
-    currentExplorerState.push({ path, collapsed: oldIndex.get(path) ?? collapsed })
-  }
-
-  currentExplorerState.map((folderState) => {
-    const folderLi = document.querySelector(
-      `[data-folderpath='${folderState.path}']`,
-    ) as MaybeHTMLElement
-    const folderUl = folderLi?.parentElement?.nextElementSibling as MaybeHTMLElement
+  allFolders.forEach((element) => {
+    const folderUl = Array.from(element.children).find((child) =>
+      child.matches("ul[data-folderul]"),
+    )
     if (folderUl) {
-      setFolderState(folderUl, folderState.collapsed)
+      if (currentFile.includes(folderUl.getAttribute("data-folderul") ?? "")) {
+        if (!element.classList.contains("open")) {
+          element.classList.add("open")
+        }
+      }
     }
   })
 }
 
 window.addEventListener("resize", setupExplorer)
+
 document.addEventListener("nav", () => {
+  const explorer = document.querySelector("#mobile-explorer")
+  if (explorer) {
+    explorer.classList.add("collapsed")
+    const content = explorer.nextElementSibling?.nextElementSibling as HTMLElement
+    if (content) {
+      content.classList.add("collapsed")
+      content.classList.toggle("explorer-viewmode")
+    }
+  }
   setupExplorer()
+
   observer.disconnect()
 
   // select pseudo element at end of list
@@ -111,6 +186,12 @@ document.addEventListener("nav", () => {
   if (lastItem) {
     observer.observe(lastItem)
   }
+
+  // Hide explorer on mobile until it is requested
+  const hiddenUntilDoneLoading = document.querySelector("#mobile-explorer")
+  hiddenUntilDoneLoading?.classList.remove("hide-until-loaded")
+
+  toggleExplorerFolders()
 })
 
 /**

quartz/components/styles/explorer.scss

@@ -1,14 +1,70 @@
 @use "../../styles/variables.scss" as *;
 
+@media all and ($mobile) {
+  .page > #quartz-body {
+    // Shift page position when toggling Explorer on mobile.
+    & > :not(.sidebar.left:has(.explorer)) {
+      transform: translateX(0);
+      transition: transform 300ms ease-in-out;
+    }
+    &.lock-scroll > :not(.sidebar.left:has(.explorer)) {
+      transform: translateX(100dvw);
+      transition: transform 300ms ease-in-out;
+    }
+
+    // Sticky top bar (stays in place when scrolling down on mobile).
+    .sidebar.left:has(.explorer) {
+      box-sizing: border-box;
+      position: sticky;
+      background-color: var(--light);
+    }
+
+    // Hide Explorer on mobile until done loading.
+    // Prevents ugly animation on page load.
+    .hide-until-loaded ~ #explorer-content {
+      display: none;
+    }
+  }
+}
+
 .explorer {
   display: flex;
+  height: 100%;
   flex-direction: column;
   overflow-y: hidden;
+
+  @media all and ($mobile) {
+    order: -1;
+    height: initial;
+    overflow: hidden;
+    flex-shrink: 0;
+    align-self: flex-start;
+  }
+
+  button#mobile-explorer {
+    display: none;
+  }
+
+  button#desktop-explorer {
+    display: flex;
+  }
+
+  @media all and ($mobile) {
+    button#mobile-explorer {
+      display: flex;
+    }
+
+    button#desktop-explorer {
+      display: none;
+    }
+  }
+
   &.desktop-only {
     @media all and not ($mobile) {
       display: flex;
     }
   }
+
   /*&:after {
     pointer-events: none;
     content: "";
@@ -23,7 +79,8 @@
   }*/
 }
 
-button#explorer {
+button#mobile-explorer,
+button#desktop-explorer {
   background-color: transparent;
   border: none;
   text-align: left;
@@ -68,19 +125,19 @@ button#explorer {
   list-style: none;
   overflow: hidden;
   overflow-y: auto;
-  max-height: 100%;
+  max-height: 0px;
   transition:
     max-height 0.35s ease,
-    visibility 0s linear 0s;
+    visibility 0s linear 0.35s;
   margin-top: 0.5rem;
-  visibility: visible;
+  visibility: hidden;
 
   &.collapsed {
-    max-height: 0;
+    max-height: 100%;
     transition:
       max-height 0.35s ease,
-      visibility 0s linear 0.35s;
-    visibility: hidden;
+      visibility 0s linear 0s;
+    visibility: visible;
   }
 
   & ul {
@@ -91,12 +148,14 @@ button#explorer {
       max-height 0.35s ease,
       transform 0.35s ease,
       opacity 0.2s ease;
+
     & li > a {
       color: var(--dark);
       opacity: 0.75;
       pointer-events: all;
     }
   }
+
   > #explorer-ul {
     max-height: none;
   }
@@ -179,3 +238,80 @@ li:has(> .folder-outer:not(.open)) > .folder-container > svg {
   // remove default margin from li
   margin: 0;
 }
+
+.explorer {
+  @media all and ($mobile) {
+    #explorer-content {
+      box-sizing: border-box;
+      overscroll-behavior: none;
+      z-index: 100;
+      position: absolute;
+      top: 0;
+      background-color: var(--light);
+      max-width: 100dvw;
+      left: -100dvw;
+      width: 100%;
+      transition: transform 300ms ease-in-out;
+      overflow: hidden;
+      padding: $topSpacing 2rem 2rem;
+      height: 100dvh;
+      max-height: 100dvh;
+      margin-top: 0;
+      visibility: hidden;
+
+      &:not(.collapsed) {
+        transform: translateX(100dvw);
+        visibility: visible;
+      }
+
+      ul.overflow {
+        max-height: 100%;
+        width: 100%;
+      }
+
+      &.collapsed {
+        transform: translateX(0);
+        visibility: visible;
+      }
+    }
+
+    #mobile-explorer {
+      margin: 5px;
+      z-index: 101;
+
+      &:not(.collapsed) .lucide-menu {
+        transform: rotate(-90deg);
+        transition: transform 200ms ease-in-out;
+      }
+
+      .lucide-menu {
+        stroke: var(--darkgray);
+        transition: transform 200ms ease;
+
+        &:hover {
+          stroke: var(--dark);
+        }
+      }
+    }
+  }
+}
+
+.no-scroll {
+  opacity: 0;
+  overflow: hidden;
+}
+
+html:has(.no-scroll) {
+  overflow: hidden;
+}
+
+@media all and not ($mobile) {
+  .no-scroll {
+    opacity: 1 !important;
+    overflow: auto !important;
+  }
+
+  html:has(.no-scroll) {
+    overflow: auto !important;
+  }
+}

quartz/components/styles/pageProperties.scss

@@ -0,0 +1,42 @@
+.page-props {
+  display: grid;
+  gap: 4px 16px;
+  grid-template-columns: max-content;
+  color: var(--darkgray);
+
+  > dt {
+    font-weight: bold;
+    font-family: mono;
+    font-size: 0.8em;
+    align-self: center;
+  }
+
+  > dd {
+    margin: 0;
+    grid-column-start: 2;
+  }
+
+  .internal {
+    padding: 0 0.25rem;
+  }
+
+  .property-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.2rem;
+
+    > li {
+      line-height: initial;
+      display: flex;
+    }
+
+    > li:not(:last-child) {
+      &::after {
+        content: ",";
+      }
+    }
+  }
+}

quartz/plugins/transformers/frontmatter.ts

@@ -57,6 +57,8 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options>> = (userOpts)
               },
             })
 
+            ;(file.data as any).frontmatterRaw = structuredClone(data)
+
             if (data.title != null && data.title.toString() !== "") {
               data.title = data.title.toString()
             } else {
@@ -115,5 +117,6 @@ declare module "vfile" {
         socialImage: string
         comments: boolean | string
       }>
+    readonly frontmatterRaw: { readonly [key: string]: Readonly<any> }
   }
 }

quartz/plugins/transformers/links.ts

@@ -13,6 +13,7 @@ import path from "path"
 import { visit } from "unist-util-visit"
 import isAbsoluteUrl from "is-absolute-url"
 import { Root } from "hast"
+import { wikilinkRegex } from "./ofm"
 
 interface Options {
   /** How to resolve Markdown paths */
@@ -22,6 +23,7 @@ interface Options {
   openLinksInNewTab: boolean
   lazyLoad: boolean
   externalLinkIcon: boolean
+  indexFrontmatterWikilinks: boolean
 }
 
 const defaultOptions: Options = {
@@ -30,6 +32,20 @@ const defaultOptions: Options = {
   openLinksInNewTab: false,
   lazyLoad: false,
   externalLinkIcon: true,
+  indexFrontmatterWikilinks: false,
+}
+
+export function getFullInternalLink(dest: RelativeURL, fileSlug: SimpleSlug): FullSlug {
+  // url.resolve is considered legacy
+  // WHATWG equivalent https://nodejs.dev/en/api/v18/url/#urlresolvefrom-to
+  const url = new URL(dest, "https://base.com/" + stripSlashes(fileSlug, true))
+  const canonicalDest = url.pathname
+  let [destCanonical, _destAnchor] = splitAnchor(canonicalDest)
+  if (destCanonical.endsWith("/")) {
+    destCanonical += "index"
+  }
+  // need to decodeURIComponent here as WHATWG URL percent-encodes everything
+  return decodeURIComponent(stripSlashes(destCanonical, true)) as FullSlug
 }
 
 export const CrawlLinks: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
@@ -107,17 +123,7 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options>> = (userOpts)
                     transformOptions,
                   )
 
-                  // url.resolve is considered legacy
-                  // WHATWG equivalent https://nodejs.dev/en/api/v18/url/#urlresolvefrom-to
-                  const url = new URL(dest, "https://base.com/" + stripSlashes(curSlug, true))
-                  const canonicalDest = url.pathname
-                  let [destCanonical, _destAnchor] = splitAnchor(canonicalDest)
-                  if (destCanonical.endsWith("/")) {
-                    destCanonical += "index"
-                  }
-
-                  // need to decodeURIComponent here as WHATWG URL percent-encodes everything
-                  const full = decodeURIComponent(stripSlashes(destCanonical, true)) as FullSlug
+                  const full = getFullInternalLink(dest, curSlug)
                   const simple = simplifySlug(full)
                   outgoing.add(simple)
                   node.properties["data-slug"] = full
@@ -157,6 +163,31 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options>> = (userOpts)
               }
             })
 
+            if (opts.indexFrontmatterWikilinks) {
+              const strings = Object.values(file.data.frontmatter ?? {})
+                .flatMap((vs) => (Array.isArray(vs) ? vs : [vs]))
+                .filter((v) => typeof v === "string")
+
+              for (const string of strings) {
+                // the regex is /g so we have to do this to get the captures
+                // exec doesn't work because it's stateful and so returns null every other time (very bad)
+                // we do all of that to reuse the wikilinkRegex from ofm
+                const [captures] = [...string.matchAll(wikilinkRegex)]
+                if (!captures || captures[0] != string || string.startsWith("!")) {
+                  // not matched, or didn't match the whole string, or is the embed syntax for some reason,
+                  // which doesn't make sense to support in frontmatter
+                  continue
+                }
+                const [_, rawFp, rawHeader] = captures
+                const fp = rawFp?.trim() ?? ""
+                const anchor = rawHeader?.trim() ?? ""
+                const dest = transformLink(file.data.slug!, fp + anchor, transformOptions)
+                const full = getFullInternalLink(dest, curSlug)
+                const simple = simplifySlug(full)
+                outgoing.add(simple)
+              }
+            }
+
             file.data.links = [...outgoing]
           }
         },