basic search implementation

quartz/bootstrap-cli.mjs

@@ -75,12 +75,14 @@ yargs(hideBin(process.argv))
               text = text.replace('export default', '')
               text = text.replace('export', '')
 
+              const sourcefile = path.relative(path.resolve('.'), args.path)
+              const resolveDir = path.dirname(sourcefile)
               const transpiled = await esbuild.build({
                 stdin: {
                   contents: text,
                   loader: 'ts',
-                  resolveDir: '.',
-                  sourcefile: path.relative(path.resolve('.'), args.path),
+                  resolveDir,
+                  sourcefile,
                 },
                 write: false,
                 bundle: true,

quartz/components/Backlinks.tsx

@@ -0,0 +1,19 @@
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import style from "./styles/backlinks.scss"
+import { relativeToRoot } from "../path"
+
+function Backlinks({ fileData, allFiles }: QuartzComponentProps) {
+  const slug = fileData.slug!
+  const backlinkFiles = allFiles.filter(file => file.links?.includes(slug))
+  return <div class="backlinks">
+    <h3>Backlinks</h3>
+    <ul>
+      {backlinkFiles.length > 0 ?
+        backlinkFiles.map(f => <li><a href={relativeToRoot(slug, f.slug!)} class="internal">{f.frontmatter?.title}</a></li>)
+        : <li>No backlinks found</li>}
+    </ul>
+  </div> 
+}
+
+Backlinks.css = style 
+export default (() => Backlinks) satisfies QuartzComponentConstructor

quartz/components/Search.tsx

@@ -0,0 +1,35 @@
+import { QuartzComponentConstructor } from "./types"
+import style from "./styles/search.scss"
+// @ts-ignore
+import script from "./scripts/search.inline"
+
+export default (() => {
+  function Search() {
+    return <div class="search">
+      <div id="search-icon">
+        <p>Search</p>
+        <div></div>
+        <svg tabIndex={0} aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7">
+          <title id="title">Search</title>
+          <desc id="desc">Search</desc>
+          <g class="search-path" fill="none">
+            <path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4" />
+            <circle cx="8" cy="8" r="7" />
+          </g>
+        </svg>
+      </div>
+      <div id="search-container">
+        <div id="search-space">
+          <input autocomplete="off" id="search-bar" name="search" type="text" aria-label="Search for something" placeholder="Search for something" />
+          <div id="results-container">
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+
+  Search.afterDOMLoaded = script
+  Search.css = style
+
+  return Search
+}) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -8,6 +8,8 @@ import Spacer from "./Spacer"
 import TableOfContents from "./TableOfContents"
 import TagList from "./TagList"
 import Graph from "./Graph" 
+import Backlinks from "./Backlinks"
+import Search from "./Search"
 
 export {
   ArticleTitle,
@@ -19,5 +21,7 @@ export {
   Spacer,
   TableOfContents,
   TagList,
-  Graph
+  Graph,
+  Backlinks,
+  Search
 } 

quartz/components/scripts/graph.inline.ts

@@ -1,5 +1,6 @@
 import { ContentDetails } from "../../plugins/emitters/contentIndex"
 import * as d3 from 'd3'
+import { registerEscapeHandler } from "./handler"
 
 type NodeData = {
   id: string,
@@ -25,7 +26,8 @@ function removeAllChildren(node: HTMLElement) {
 }
 
 async function renderGraph(container: string, slug: string) {
-  const graph = document.getElementById(container)!
+  const graph = document.getElementById(container)
+  if (!graph) return
   removeAllChildren(graph)
 
   let {
@@ -265,16 +267,15 @@ function renderGlobalGraph() {
   const container = document.getElementById("global-graph-outer")
   container?.classList.add("active")
 
-  function hideGlobalGraph(this: HTMLElement, e: HTMLElementEventMap["click"]) {
-    if (e.target !== this) return
 
+  function hideGlobalGraph() {
     container?.classList.remove("active")
-    const graph = document.getElementById("global-graph-container")!
+    const graph = document.getElementById("global-graph-container")
+    if (!graph) return
     removeAllChildren(graph)
   }
 
-  container?.removeEventListener("click", hideGlobalGraph)
-  container?.addEventListener("click", hideGlobalGraph)
+  registerEscapeHandler(container, hideGlobalGraph)
 }
 
 document.addEventListener("nav", async (e: unknown) => {

quartz/components/scripts/handler.ts

@@ -0,0 +1,19 @@
+export function registerEscapeHandler(outsideContainer: HTMLElement | null, cb: () => void) {
+  if (!outsideContainer) return
+  function click(this: HTMLElement, e: HTMLElementEventMap["click"]) {
+    if (e.target !== this) return
+    e.preventDefault()
+    cb()
+  }
+
+  function esc(e: HTMLElementEventMap["keydown"]) {
+    if (!e.key.startsWith("Esc")) return
+    e.preventDefault()
+    cb()
+  }
+
+  outsideContainer?.removeEventListener("click", click)
+  outsideContainer?.addEventListener("click", click)
+  document.removeEventListener("keydown", esc)
+  document.addEventListener('keydown', esc)
+}

quartz/components/scripts/popover.inline.ts

@@ -39,6 +39,7 @@ document.addEventListener("nav", () => {
 
       const popoverElement = document.createElement("div")
       popoverElement.classList.add("popover")
+      // TODO: scroll this element if we specify a header/anchor to jump to
       const popoverInner = document.createElement("div")
       popoverInner.classList.add("popover-inner")
       popoverElement.appendChild(popoverInner)

quartz/components/scripts/search.inline.ts

@@ -0,0 +1,192 @@
+import { Document } from "flexsearch"
+import { ContentDetails } from "../../plugins/emitters/contentIndex"
+import { registerEscapeHandler } from "./handler"
+
+interface Item {
+  slug: string,
+  title: string,
+  content: string,
+}
+let index: Document<Item> | undefined = undefined
+
+function relative(from: string, to: string) {
+  const pieces = [location.protocol, '//', location.host, location.pathname]
+  const url = pieces.join('').slice(0, -from.length) + to
+  return url
+}
+
+function removeAllChildren(node: HTMLElement) {
+  node.innerHTML = ``
+}
+
+const contextWindowWords = 30
+function highlight(searchTerm: string, text: string, trim?: boolean) {
+  const tokenizedTerms = searchTerm.split(/\s+/).filter(t => t !== "")
+  let tokenizedText = text
+    .split(/\s+/)
+    .filter(t => t !== "")
+
+  let startIndex = 0
+  let endIndex = tokenizedText.length - 1
+  if (trim) {
+    const includesCheck = (tok: string) => tokenizedTerms.some((term) => tok.toLowerCase().startsWith(term.toLowerCase()))
+    const occurencesIndices = tokenizedText.map(includesCheck)
+
+    let bestSum = 0
+    let bestIndex = 0
+    for (let i = 0; i < Math.max(tokenizedText.length - contextWindowWords, 0); i++) {
+      const window = occurencesIndices.slice(i, i + contextWindowWords)
+      const windowSum = window.reduce((total, cur) => total + (cur ? 1 : 0), 0)
+      if (windowSum >= bestSum) {
+        bestSum = windowSum
+        bestIndex = i
+      }
+    }
+
+    startIndex = Math.max(bestIndex - contextWindowWords, 0)
+    endIndex = Math.min(startIndex + 2 * contextWindowWords, tokenizedText.length - 1)
+    tokenizedText = tokenizedText.slice(startIndex, endIndex)
+  }
+
+  const slice = tokenizedText.map(tok => {
+    // see if this tok is prefixed by any search terms 
+    for (const searchTok of tokenizedTerms) {
+      if (tok.toLowerCase().includes(searchTok.toLowerCase())) {
+        const regex = new RegExp(searchTok, "gi")
+        return tok.replace(regex, `<span class="highlight">$&</span>`)
+      }
+    }
+    return tok
+  })
+    .join(" ")
+
+  return `${startIndex === 0 ? "" : "..."}${slice}${endIndex === tokenizedText.length - 1 ? "" : "..."}`
+}
+
+const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
+document.addEventListener("nav", async (e: unknown) => {
+  const currentSlug = (e as CustomEventMap["nav"]).detail.url
+
+  // setup index if it hasn't been already
+  const data = await fetchData
+  if (!index) {
+    index = new Document({
+      cache: true,
+      charset: 'latin:extra',
+      optimize: true,
+      encode: encoder,
+      document: {
+        id: "slug",
+        index: [
+          {
+            field: "title",
+            tokenize: "forward",
+          },
+          {
+            field: "content",
+            tokenize: "reverse",
+          },
+        ]
+      },
+    })
+
+    for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
+      index.add({
+        slug,
+        title: fileData.title,
+        content: fileData.content
+      })
+    }
+  }
+
+  const container = document.getElementById("search-container")
+  const searchIcon = document.getElementById("search-icon")
+  const searchBar = document.getElementById("search-bar") as HTMLInputElement | null
+  const results = document.getElementById("results-container")
+
+  function hideSearch() {
+    container?.classList.remove("active")
+    if (searchBar) {
+      searchBar.value = "" // clear the input when we dismiss the search
+    }
+    if (results) {
+      removeAllChildren(results)
+    }
+  }
+
+  function showSearch() {
+    container?.classList.add("active")
+    searchBar?.focus()
+  }
+
+  function shortcutHandler(e: HTMLElementEventMap["keydown"]) {
+    if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault()
+      const searchBarOpen = container?.classList.contains("active")
+      searchBarOpen ? hideSearch() : showSearch()
+    } else if (e.key === "Enter") {
+      const anchor = document.getElementsByClassName("result-card")[0] as HTMLInputElement | null
+      if (anchor) {
+        anchor.click()
+      }
+    }
+  }
+
+  const formatForDisplay = (term: string, slug: string) => ({
+    slug,
+    title: highlight(term, data[slug].title ?? ""),
+    content: highlight(term, data[slug].content ?? "", true),
+  })
+
+  const resultToHTML = ({ slug, title, content }: Item) => {
+    const button = document.createElement("button")
+    button.classList.add("result-card")
+    button.id = slug
+    button.innerHTML = `<h3>${title}</h3><p>${content}</p>`
+    button.addEventListener('click', () => {
+      const targ = relative(currentSlug, slug)
+      window.spaNavigate(new URL(targ))
+    })
+    return button
+  }
+
+  function displayResults(finalResults: Item[]) {
+    if (!results) return
+
+    removeAllChildren(results)
+    if (finalResults.length === 0) {
+      results.innerHTML = `<button class="result-card">
+                    <h3>No results.</h3>
+                    <p>Try another search term?</p>
+                </button>`
+    } else {
+      results.append(...finalResults.map(resultToHTML))
+    }
+
+  }
+
+  function onType(e: HTMLElementEventMap["input"]) {
+    const term = (e.target as HTMLInputElement).value
+    const searchResults = index?.search(term, 5) ?? []
+    const getByField = (field: string): string[] => {
+      const results = searchResults.filter((x) => x.field === field)
+      return results.length === 0 ? [] : [...results[0].result] as string[]
+    }
+
+    // order titles ahead of content
+    const allIds: Set<string> = new Set([...getByField("title"), ...getByField("content")])
+    const finalResults = [...allIds].map(id => formatForDisplay(term, id))
+    displayResults(finalResults)
+  }
+
+
+  document.removeEventListener("keydown", shortcutHandler)
+  document.addEventListener("keydown", shortcutHandler)
+  searchIcon?.removeEventListener("click", showSearch)
+  searchIcon?.addEventListener("click", showSearch)
+  searchBar?.removeEventListener("input", onType)
+  searchBar?.addEventListener("input", onType)
+
+  // register handlers
+  registerEscapeHandler(container, hideSearch)
+})

quartz/components/styles/backlinks.scss

@@ -0,0 +1,22 @@
+.backlinks {
+  & > h3 {
+    font-size: 1rem;
+    margin: 0;
+  }
+
+  & > ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    & > li {
+      margin: 0.5rem 0;
+      padding: 0.25rem 1rem;
+      border: var(--lightgray) 1px solid;
+      border-radius: 5px;
+      & > a {
+        background-color: transparent;
+      }
+    }
+  }
+}

quartz/components/styles/popover.scss

@@ -23,6 +23,8 @@
     height: 20rem;
     padding: 0 1rem 1rem 1rem;
     font-weight: initial;
+    line-height: initial;
+    font-size: initial;
     border: 1px solid var(--gray);
     background-color: var(--light);
     border-radius: 5px;
@@ -30,6 +32,10 @@
     overflow: scroll;
   }
 
+  h1 {
+    font-size: 1.5rem;
+  }
+
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.3s ease, visibility 0.3s ease;

quartz/components/styles/search.scss

@@ -0,0 +1,134 @@
+.search {
+  min-width: 5rem;
+  max-width: 12rem;
+  flex-grow: 0.3;
+  margin: 0 1.5rem;
+
+  & > #search-icon {
+    background-color: var(--lightgray);
+    border-radius: 4px;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    & > div {
+      flex-grow: 1;
+    }
+
+    & > p {
+      display: inline;
+      padding: 0 1rem;
+    }
+
+    & svg {
+      cursor: pointer;
+      width: 18px;
+      min-width: 18px;
+      margin: 0 0.5rem;
+
+      .search-path {
+        stroke: var(--darkgray);
+        stroke-width: 2px;
+        transition: stroke 0.5s ease;
+      }
+    }
+  }
+
+  & > #search-container {
+    position: fixed;
+    z-index: 999;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: scroll;
+    display: none;
+    backdrop-filter: blur(4px);
+
+    &.active {
+      display: inline-block;
+    }
+
+    & > #search-space {
+      width: 50%;
+      margin-top: 15vh;
+      margin-left: auto;
+      margin-right: auto;
+
+      @media all and (max-width: 1200px) {
+        width: 90%;
+      }
+
+      & > * {
+        width: 100%;
+        border-radius: 5px;
+        background: var(--light);
+        box-shadow: 0 14px 50px rgba(27, 33, 48, 0.12), 0 10px 30px rgba(27, 33, 48, 0.16);
+        margin-bottom: 2em;
+      }
+
+      & > input {
+        box-sizing: border-box;
+        padding: 0.5em 1em;
+        font-family: var(--bodyFont);
+        color: var(--dark);
+        font-size: 1.1em;
+        border: 1px solid var(--lightgray);
+
+        &:focus {
+          outline: none;
+        }
+      }
+
+      & > #results-container {
+        & .result-card {
+          padding: 1em;
+          cursor: pointer;
+          transition: background 0.2s ease;
+          border: 1px solid var(--lightgray);
+          border-bottom: none;
+          width: 100%;
+
+          // normalize button props
+          font-family: inherit;
+          font-size: 100%;
+          line-height: 1.15;
+          margin: 0;
+          text-transform: none;
+          text-align: left;
+          background: var(--light);
+          outline: none;
+
+          & .highlight {
+            color: var(--secondary);
+          }
+
+          &:hover, &:focus {
+            background: var(--lightgray);
+          }
+
+          &:first-of-type {
+            border-top-left-radius: 5px;
+            border-top-right-radius: 5px;
+          }
+
+          &:last-of-type {
+            border-bottom-left-radius: 5px;
+            border-bottom-right-radius: 5px;
+            border-bottom: 1px solid var(--lightgray);
+          }
+
+          & > h3 {
+            margin: 0;
+          }
+
+          & > p { 
+            margin-bottom: 0;
+          }
+        }
+      }
+
+    }
+  }
+}

quartz/components/styles/toc.scss

@@ -30,7 +30,6 @@ button#toc {
   overflow: hidden;
   max-height: none;
   transition: max-height 0.3s ease;
-  font-size: 0.9rem;
 
   & ul {
     list-style: none;

quartz/components/types.ts

@@ -10,6 +10,7 @@ export type QuartzComponentProps = {
   cfg: GlobalConfiguration
   children: QuartzComponent[] | JSX.Element[]
   tree: Node<QuartzPluginData>
+  allFiles: QuartzPluginData[]
 }
 
 export type QuartzComponent = ComponentType<QuartzComponentProps> & {

quartz/path.ts

@@ -9,10 +9,6 @@ export function trimPathSuffix(fp: string): string {
   let [cleanPath, anchor] = fp.split("#", 2)
   anchor = anchor === undefined ? "" : "#" + anchor
 
-  if (cleanPath.endsWith("index")) {
-    cleanPath = cleanPath.slice(0, -"index".length)
-  }
-
   return cleanPath + anchor
 }
 
@@ -48,7 +44,8 @@ export function relativeToRoot(slug: string, fp: string): string {
 }
 
 export function relative(src: string, dest: string): string {
-  return path.relative(src, dest)
+  return "./" + path.relative(src, dest)
+
 }
 
 export const QUARTZ = "quartz"

quartz/plugins/emitters/contentIndex.ts

@@ -1,20 +1,7 @@
-import { visit } from "unist-util-visit"
 import { QuartzEmitterPlugin } from "../types"
-import { Element } from "hast"
 import path from "path"
-import { trimPathSuffix } from "../../path"
 
-interface Options {
-  indexAnchorLinks: boolean,
-  indexExternalLinks: boolean,
-}
-
-const defaultOptions: Options = {
-  indexAnchorLinks: false,
-  indexExternalLinks: false,
-}
-
-export type ContentIndex = Map<string, ContentDetails> 
+export type ContentIndex = Map<string, ContentDetails>
 export type ContentDetails = {
   title: string,
   links?: string[],
@@ -22,39 +9,17 @@ export type ContentDetails = {
   content: string,
 }
 
-export const ContentIndex: QuartzEmitterPlugin<Options> = (userOpts) => {
-  const opts = { ...userOpts, ...defaultOptions }
+export const ContentIndex: QuartzEmitterPlugin = () => {
   return {
     name: "ContentIndex",
     async emit(_contentDir, _cfg, content, _resources, emit) {
       const fp = path.join("static", "contentIndex")
       const linkIndex: ContentIndex = new Map()
-      for (const [tree, file] of content) {
-        let slug = trimPathSuffix(file.data.slug!)
-
-        const outgoing: Set<string> = new Set()
-        visit(tree, 'element', (node: Element) => {
-          if (node.tagName === 'a' && node.properties && typeof node.properties.href === 'string') {
-            let dest = node.properties.href
-            if (dest.startsWith(".")) {
-              const normalizedPath = path.normalize(path.join(slug, dest))
-              dest = trimPathSuffix(normalizedPath)
-              outgoing.add(dest)
-            } else if (dest.startsWith("#")) {
-              if (opts.indexAnchorLinks) {
-                outgoing.add(dest)
-              }
-            } else {
-              if (opts.indexExternalLinks) {
-                outgoing.add(dest)
-              }
-            }
-          }
-        })
-
+      for (const [_tree, file] of content) {
+        let slug = file.data.slug!
         linkIndex.set(slug, {
           title: file.data.frontmatter?.title!,
-          links: [...outgoing],
+          links: file.data.links ?? [],
           tags: file.data.frontmatter?.tags,
           content: file.data.text ?? ""
         })

quartz/plugins/emitters/contentPage.tsx

@@ -33,7 +33,7 @@ export const ContentPage: QuartzEmitterPlugin<Options> = (opts) => {
     },
     async emit(_contentDir, cfg, content, resources, emit): Promise<string[]> {
       const fps: string[] = []
-
+      const allFiles = content.map(c => c[1].data)
       for (const [tree, file] of content) {
         const baseDir = resolveToRoot(file.data.slug!)
         const pageResources: StaticResources = {
@@ -50,13 +50,14 @@ export const ContentPage: QuartzEmitterPlugin<Options> = (opts) => {
           externalResources: pageResources,
           cfg,
           children: [],
-          tree
+          tree,
+          allFiles
         }
 
         const Content = opts.content
         const doc = <html>
           <Head {...componentData} />
-          <body data-slug={trimPathSuffix(file.data.slug ?? "")}>
+          <body data-slug={file.data.slug ?? ""}>
             <div id="quartz-root" class="page">
               <Header {...componentData} >
                 {header.map(HeaderComponent => <HeaderComponent {...componentData} />)}

quartz/plugins/index.ts

@@ -51,6 +51,7 @@ export function emitComponentResources(cfg: GlobalConfiguration, resources: Stat
     componentResources.afterDOMLoaded.push(spaRouterScript)
   } else {
     componentResources.afterDOMLoaded.push(`
+      window.spaNavigate = (url, _) => window.location.assign(url)
       const event = new CustomEvent("nav", { detail: { slug: document.body.dataset.slug } })
       document.dispatchEvent(event)`
     )

quartz/plugins/transformers/index.ts

@@ -3,7 +3,7 @@ export { GitHubFlavoredMarkdown } from './gfm'
 export { CreatedModifiedDate } from './lastmod'
 export { Katex } from './latex'
 export { Description } from './description'
-export { ResolveLinks } from './links'
+export { CrawlLinks } from './links'
 export { ObsidianFlavoredMarkdown } from './ofm'
 export { SyntaxHighlighting } from './syntax'
 export { TableOfContents } from './toc'

quartz/plugins/transformers/links.ts

@@ -1,5 +1,5 @@
 import { QuartzTransformerPlugin } from "../types"
-import { relative, relativeToRoot, slugify } from "../../path"
+import { relative, relativeToRoot, slugify, trimPathSuffix } from "../../path"
 import path from "path"
 import { visit } from 'unist-util-visit'
 import isAbsoluteUrl from "is-absolute-url"
@@ -9,14 +9,18 @@ interface Options {
   markdownLinkResolution: 'absolute' | 'relative'
   /** Strips folders from a link so that it looks nice */
   prettyLinks: boolean
+  indexAnchorLinks: boolean
+  indexExternalLinks: boolean
 }
 
 const defaultOptions: Options = {
   markdownLinkResolution: 'absolute',
-  prettyLinks: true
+  prettyLinks: true,
+  indexAnchorLinks: false,
+  indexExternalLinks: false,
 }
 
-export const ResolveLinks: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
+export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> = (userOpts) => {
   const opts = { ...defaultOptions, ...userOpts }
   return {
     name: "LinkProcessing",
@@ -36,6 +40,7 @@ export const ResolveLinks: QuartzTransformerPlugin<Partial<Options> | undefined>
             }
           }
 
+          const outgoing: Set<string> = new Set()
           visit(tree, 'element', (node, _index, _parent) => {
             // rewrite all links
             if (
@@ -43,13 +48,27 @@ export const ResolveLinks: QuartzTransformerPlugin<Partial<Options> | undefined>
               node.properties &&
               typeof node.properties.href === 'string'
             ) {
-              node.properties.className = isAbsoluteUrl(node.properties.href) ? "external" : "internal"
+              let dest = node.properties.href
+              node.properties.className = isAbsoluteUrl(dest) ? "external" : "internal"
+
 
               // don't process external links or intra-document anchors
-              if (!(isAbsoluteUrl(node.properties.href) || node.properties.href.startsWith("#"))) {
-                node.properties.href = transformLink(node.properties.href)
+              if (!(isAbsoluteUrl(dest) || dest.startsWith("#"))) {
+                node.properties.href = transformLink(dest)
+              }
+              
+              dest = node.properties.href
+              if (dest.startsWith(".")) {
+                const normalizedPath = path.normalize(path.join(curSlug, dest))
+                outgoing.add(trimPathSuffix(normalizedPath))
+              } else if (dest.startsWith("#")) {
+                if (opts.indexAnchorLinks) {
+                  outgoing.add(dest)
+                }
               } else {
-
+                if (opts.indexExternalLinks) {
+                  outgoing.add(dest)
+                }
               }
 
               // rewrite link internals if prettylinks is on
@@ -70,8 +89,16 @@ export const ResolveLinks: QuartzTransformerPlugin<Partial<Options> | undefined>
               }
             }
           })
+
+          file.data.links = [...outgoing]
         }
       }]
     }
   }
 }
+
+declare module 'vfile' {
+  interface DataMap {
+    links: string[]
+  }
+}

quartz/styles/base.scss

@@ -193,6 +193,7 @@ pre {
 
 code {
   font-size: 0.9em;
+  color: var(--dark);
   font-family: var(--codeFont);
   border-radius: 5px;
   padding: 0.1rem 0.2rem;