basic search implementation

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> & {