From 9aa6a18be2eae0d84c7897470a46ede19d5ac191 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Thu, 1 Feb 2024 15:56:42 -0500
Subject: [PATCH 001/115] fix(search): improve more general usability (closes
 #781) (#782)

* fix(search): improve more general usability

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: revert naming

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: correct check for enter event on no-match cases

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* Update quartz/components/scripts/search.inline.ts

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* chore: remove unecessary class for tracking mouse

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
---
 quartz/components/scripts/search.inline.ts | 66 ++++++++++++++--------
 1 file changed, 44 insertions(+), 22 deletions(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 170a8f014ba20..43332a6d8044a 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -122,6 +122,9 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     if (preview) {
       removeAllChildren(preview)
     }
+    if (searchLayout) {
+      searchLayout.style.opacity = "0"
+    }
 
     searchType = "basic" // reset search type after closing
   }
@@ -135,6 +138,8 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     searchBar?.focus()
   }
 
+  let currentHover: HTMLInputElement | null = null
+
   async function shortcutHandler(e: HTMLElementEventMap["keydown"]) {
     if (e.key === "k" && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
       e.preventDefault()
@@ -150,51 +155,61 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       if (searchBar) searchBar.value = "#"
     }
 
-    const resultCards = document.getElementsByClassName("result-card")
+    if (currentHover) {
+      currentHover.classList.remove("focus")
+    }
 
     // If search is active, then we will render the first result and display accordingly
     if (!container?.classList.contains("active")) return
-    else if (results?.contains(document.activeElement)) {
-      const active = document.activeElement as HTMLInputElement
-      await displayPreview(active)
-      if (e.key === "Enter") {
+    else if (e.key === "Enter") {
+      // If result has focus, navigate to that one, otherwise pick first result
+      if (results?.contains(document.activeElement)) {
+        const active = document.activeElement as HTMLInputElement
+        if (active.classList.contains("no-match")) return
+        await displayPreview(active)
         active.click()
+      } else {
+        const anchor = document.getElementsByClassName("result-card")[0] as HTMLInputElement | null
+        if (!anchor || anchor?.classList.contains("no-match")) return
+        await displayPreview(anchor)
+        anchor.click()
       }
-    } else {
-      const anchor = resultCards[0] as HTMLInputElement | null
-      await displayPreview(anchor)
-      if (e.key === "Enter") {
-        anchor?.click()
-      }
-    }
-
-    if (e.key === "ArrowUp" || (e.shiftKey && e.key === "Tab")) {
+    } else if (e.key === "ArrowUp" || (e.shiftKey && e.key === "Tab")) {
       e.preventDefault()
       if (results?.contains(document.activeElement)) {
         // If an element in results-container already has focus, focus previous one
-        const currentResult = document.activeElement as HTMLInputElement | null
+        const currentResult = currentHover
+          ? currentHover
+          : (document.activeElement as HTMLInputElement | null)
         const prevResult = currentResult?.previousElementSibling as HTMLInputElement | null
         currentResult?.classList.remove("focus")
         await displayPreview(prevResult)
         prevResult?.focus()
+        currentHover = prevResult
       }
     } else if (e.key === "ArrowDown" || e.key === "Tab") {
       e.preventDefault()
       // The results should already been focused, so we need to find the next one.
       // The activeElement is the search bar, so we need to find the first result and focus it.
       if (!results?.contains(document.activeElement)) {
-        const firstResult = resultCards[0] as HTMLInputElement | null
+        const firstResult = currentHover
+          ? currentHover
+          : (document.getElementsByClassName("result-card")[0] as HTMLInputElement | null)
         const secondResult = firstResult?.nextElementSibling as HTMLInputElement | null
         firstResult?.classList.remove("focus")
         await displayPreview(secondResult)
         secondResult?.focus()
+        currentHover = secondResult
       } else {
         // If an element in results-container already has focus, focus next one
-        const active = document.activeElement as HTMLInputElement | null
+        const active = currentHover
+          ? currentHover
+          : (document.activeElement as HTMLInputElement | null)
         active?.classList.remove("focus")
         const nextResult = active?.nextElementSibling as HTMLInputElement | null
         await displayPreview(nextResult)
         nextResult?.focus()
+        currentHover = nextResult
       }
     }
   }
@@ -282,15 +297,17 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
 
     async function onMouseEnter(ev: MouseEvent) {
       // Actually when we hover, we need to clean all highlights within the result childs
+      if (!ev.target) return
       for (const el of document.getElementsByClassName(
         "result-card",
       ) as HTMLCollectionOf<HTMLElement>) {
         el.classList.remove("focus")
         el.blur()
       }
-      const target = ev.target as HTMLAnchorElement
-      target.classList.add("focus")
+      const target = ev.target as HTMLInputElement
       await displayPreview(target)
+      currentHover = target
+      currentHover.classList.remove("focus")
     }
 
     async function onMouseLeave(ev: MouseEvent) {
@@ -320,7 +337,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
 
     removeAllChildren(results)
     if (finalResults.length === 0) {
-      results.innerHTML = `<a class="result-card">
+      results.innerHTML = `<a class="result-card no-match">
                     <h3>No results.</h3>
                     <p>Try another search term?</p>
                 </a>`
@@ -329,8 +346,13 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     }
     // focus on first result, then also dispatch preview immediately
     if (results?.firstElementChild) {
-      results?.firstElementChild?.classList.add("focus")
-      await displayPreview(results?.firstElementChild as HTMLElement)
+      const firstChild = results.firstElementChild as HTMLElement
+      if (firstChild.classList.contains("no-match")) {
+        removeAllChildren(preview as HTMLElement)
+      } else {
+        firstChild.classList.add("focus")
+        await displayPreview(firstChild)
+      }
     }
   }
 

From 756acc7f975f313f9d9139b42be9d57805014454 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Thu, 1 Feb 2024 16:48:27 -0500
Subject: [PATCH 002/115] feat(search): highlight on preview (#783)

* feat: primitive full-text search on preview

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: remove invalid regex and unused code path

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/components/scripts/search.inline.ts | 67 +++++++++++++++++++---
 quartz/components/styles/search.scss       | 10 ++--
 2 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 43332a6d8044a..3bbfa7bf27e9b 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -11,23 +11,29 @@ interface Item {
   tags: string[]
 }
 
-let index: FlexSearch.Document<Item> | undefined = undefined
-
 // Can be expanded with things like "term" in the future
 type SearchType = "basic" | "tags"
 
 // Current searchType
 let searchType: SearchType = "basic"
+// Current search term // TODO: exact match
+let currentSearchTerm: string = ""
+// index for search
+let index: FlexSearch.Document<Item> | undefined = undefined
 
 const contextWindowWords = 30
 const numSearchResults = 8
 const numTagResults = 5
-function highlight(searchTerm: string, text: string, trim?: boolean) {
-  // try to highlight longest tokens first
-  const tokenizedTerms = searchTerm
+
+const tokenizeTerm = (term: string) =>
+  term
     .split(/\s+/)
     .filter((t) => t !== "")
     .sort((a, b) => b.length - a.length)
+
+function highlight(searchTerm: string, text: string, trim?: boolean) {
+  // try to highlight longest tokens first
+  const tokenizedTerms = tokenizeTerm(searchTerm)
   let tokenizedText = text.split(/\s+/).filter((t) => t !== "")
 
   let startIndex = 0
@@ -64,6 +70,7 @@ function highlight(searchTerm: string, text: string, trim?: boolean) {
       }
       return tok
     })
+    .slice(startIndex, endIndex + 1)
     .join(" ")
 
   return `${startIndex === 0 ? "" : "..."}${slice}${
@@ -71,6 +78,45 @@ function highlight(searchTerm: string, text: string, trim?: boolean) {
   }`
 }
 
+function highlightHTML(searchTerm: string, el: HTMLElement) {
+  // try to highlight longest tokens first
+  const p = new DOMParser()
+  const tokenizedTerms = tokenizeTerm(searchTerm)
+  const html = p.parseFromString(el.innerHTML, "text/html")
+
+  const createHighlightSpan = (text: string) => {
+    const span = document.createElement("span")
+    span.className = "highlight"
+    span.textContent = text
+    return span
+  }
+
+  const highlightTextNodes = (node: Node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      let nodeText = node.nodeValue || ""
+      tokenizedTerms.forEach((term) => {
+        const regex = new RegExp(term.toLowerCase(), "gi")
+        const matches = nodeText.match(regex)
+        const spanContainer = document.createElement("span")
+        let lastIndex = 0
+        matches?.forEach((match) => {
+          const matchIndex = nodeText.indexOf(match, lastIndex)
+          spanContainer.appendChild(document.createTextNode(nodeText.slice(lastIndex, matchIndex)))
+          spanContainer.appendChild(createHighlightSpan(match))
+          lastIndex = matchIndex + match.length
+        })
+        spanContainer.appendChild(document.createTextNode(nodeText.slice(lastIndex)))
+        node.parentNode?.replaceChild(spanContainer, node)
+      })
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      Array.from(node.childNodes).forEach(highlightTextNodes)
+    }
+  }
+
+  highlightTextNodes(html.body)
+  return html.body
+}
+
 const p = new DOMParser()
 const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
 let prevShortcutHandler: ((e: HTMLElementEventMap["keydown"]) => void) | undefined = undefined
@@ -96,6 +142,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
 
   const enablePreview = searchLayout?.dataset?.preview === "true"
   let preview: HTMLDivElement | undefined = undefined
+  let previewInner: HTMLDivElement | undefined = undefined
   const results = document.createElement("div")
   results.id = "results-container"
   results.style.flexBasis = enablePreview ? "30%" : "100%"
@@ -384,17 +431,21 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     el.classList.add("focus")
 
     removeAllChildren(preview as HTMLElement)
-    const contentDetails = await fetchContent(slug)
 
-    const previewInner = document.createElement("div")
+    previewInner = document.createElement("div")
     previewInner.classList.add("preview-inner")
     preview?.appendChild(previewInner)
-    contentDetails?.forEach((elt) => previewInner.appendChild(elt))
+
+    const innerDiv = await fetchContent(slug).then((contents) =>
+      contents.map((el) => highlightHTML(currentSearchTerm, el as HTMLElement)),
+    )
+    previewInner.append(...innerDiv)
   }
 
   async function onType(e: HTMLElementEventMap["input"]) {
     let term = (e.target as HTMLInputElement).value
     let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
+    currentSearchTerm = (e.target as HTMLInputElement).value
 
     if (searchLayout) {
       searchLayout.style.opacity = "1"
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index fb7dd745804b4..e84172e3503d1 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -121,6 +121,11 @@
           }
         }
 
+        & .highlight {
+          color: var(--secondary);
+          font-weight: 700;
+        }
+
         & > #preview-container {
           display: block;
           box-sizing: border-box;
@@ -166,11 +171,6 @@
             outline: none;
             font-weight: inherit;
 
-            & .highlight {
-              color: var(--secondary);
-              font-weight: 700;
-            }
-
             &:hover,
             &:focus,
             &.focus {

From 295b8fc9149e6702629717e3b71b2eff7d726a19 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Thu, 1 Feb 2024 19:44:33 -0500
Subject: [PATCH 003/115] fix(search): increase size on fullPageWidth viewport
 (#784)

* fix(search): increase size on fullPageWidth viewport

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: fix width size to be consistent on multiple views

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: set layout to 0 if there is no term

remove flashing by setting max-height

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/components/scripts/search.inline.ts |  4 ++++
 quartz/components/styles/search.scss       | 13 +++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 3bbfa7bf27e9b..7871b39d630fa 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -451,6 +451,10 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       searchLayout.style.opacity = "1"
     }
 
+    if (term === "" && searchLayout) {
+      searchLayout.style.opacity = "0"
+    }
+
     if (term.toLowerCase().startsWith("#")) {
       searchType = "tags"
     } else {
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index e84172e3503d1..11e7c4e14b2a6 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -54,15 +54,11 @@
     }
 
     & > #search-space {
-      width: 50%;
+      width: 75%;
       margin-top: 12vh;
       margin-left: auto;
       margin-right: auto;
 
-      @media all and (max-width: $fullPageWidth) {
-        width: 90%;
-      }
-
       & > * {
         width: 100%;
         border-radius: 5px;
@@ -94,7 +90,8 @@
         border: 1px solid var(--lightgray);
 
         & > div {
-          height: calc(75vh - 20em);
+          // vh - #search-space.margin-top
+          height: calc(75vh - 12vh);
           background: none;
 
           &:first-child {
@@ -146,6 +143,10 @@
               0 14px 50px rgba(27, 33, 48, 0.12),
               0 10px 30px rgba(27, 33, 48, 0.16);
           }
+
+          a.internal {
+            background-color: none;
+          }
         }
 
         & > #results-container {

From f78b512436ebc293d10e9ebdd0fc5fbd1705dde4 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Thu, 1 Feb 2024 22:25:45 -0500
Subject: [PATCH 004/115] chore(search): check for input type and assignment of
 focus (#785)

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/components/scripts/search.inline.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 7871b39d630fa..8ead5c9523b80 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -238,7 +238,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       e.preventDefault()
       // The results should already been focused, so we need to find the next one.
       // The activeElement is the search bar, so we need to find the first result and focus it.
-      if (!results?.contains(document.activeElement)) {
+      if (document.activeElement === searchBar || currentHover !== null) {
         const firstResult = currentHover
           ? currentHover
           : (document.getElementsByClassName("result-card")[0] as HTMLInputElement | null)
@@ -398,6 +398,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
         removeAllChildren(preview as HTMLElement)
       } else {
         firstChild.classList.add("focus")
+        currentHover = firstChild as HTMLInputElement
         await displayPreview(firstChild)
       }
     }

From 8a6ebd193933c2879c2a36e1b2f164889575d3bc Mon Sep 17 00:00:00 2001
From: Justin Fowler <justin.fowler@hey.com>
Date: Thu, 1 Feb 2024 22:17:21 -0600
Subject: [PATCH 005/115] docs: clarity for `RecentNotes` (#786)

- Removed a word for clarity
- added reference to layout file
---
 docs/features/recent notes.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/features/recent notes.md b/docs/features/recent notes.md
index 439d6d0503130..9236b7ce207d4 100644
--- a/docs/features/recent notes.md	
+++ b/docs/features/recent notes.md	
@@ -3,7 +3,7 @@ title: Recent Notes
 tags: component
 ---
 
-Quartz can generate a list of recent notes for based on some filtering and sorting criteria. Though this component isn't included in any [[layout]] by default, you can add it by using `Component.RecentNotes`.
+Quartz can generate a list of recent notes based on some filtering and sorting criteria. Though this component isn't included in any [[layout]] by default, you can add it by using `Component.RecentNotes` in `quartz.layout.ts`.
 
 ## Customization
 

From c00089bd5728188ce554303b5b18754467c97c85 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 1 Feb 2024 20:07:14 -0800
Subject: [PATCH 006/115] chore: add window.addCleanup() for cleaning up
 handlers

---
 docs/advanced/creating components.md          |  5 ++--
 globals.d.ts                                  |  1 +
 quartz/components/scripts/callout.inline.ts   | 24 ++++++++---------
 quartz/components/scripts/darkmode.inline.ts  |  2 +-
 quartz/components/scripts/explorer.inline.ts  |  6 ++---
 quartz/components/scripts/graph.inline.ts     |  2 +-
 quartz/components/scripts/popover.inline.ts   |  2 +-
 quartz/components/scripts/search.inline.ts    | 27 +++++--------------
 quartz/components/scripts/spa.inline.ts       |  7 +++++
 quartz/components/scripts/toc.inline.ts       |  2 +-
 quartz/components/scripts/util.ts             |  4 +--
 quartz/plugins/emitters/componentResources.ts | 14 +++++-----
 12 files changed, 47 insertions(+), 49 deletions(-)

diff --git a/docs/advanced/creating components.md b/docs/advanced/creating components.md
index 1496b15b2afc5..27369abf22a42 100644
--- a/docs/advanced/creating components.md	
+++ b/docs/advanced/creating components.md	
@@ -156,12 +156,13 @@ document.addEventListener("nav", () => {
   // do page specific logic here
   // e.g. attach event listeners
   const toggleSwitch = document.querySelector("#switch") as HTMLInputElement
-  toggleSwitch.removeEventListener("change", switchTheme)
   toggleSwitch.addEventListener("change", switchTheme)
+  window.addCleanup(() => toggleSwitch.removeEventListener("change", switchTheme))
 })
 ```
 
-It is best practice to also unmount any existing event handlers to prevent memory leaks.
+It is best practice to track any event handlers via `window.addCleanup` to prevent memory leaks.
+This will get called on page navigation.
 
 #### Importing Code
 
diff --git a/globals.d.ts b/globals.d.ts
index 0509f2665b260..ee13005c98b6c 100644
--- a/globals.d.ts
+++ b/globals.d.ts
@@ -8,5 +8,6 @@ export declare global {
   }
   interface Window {
     spaNavigate(url: URL, isBack: boolean = false)
+    addCleanup(fn: (...args: any[]) => void)
   }
 }
diff --git a/quartz/components/scripts/callout.inline.ts b/quartz/components/scripts/callout.inline.ts
index d8cf5180a69c5..8f63df36f6d3e 100644
--- a/quartz/components/scripts/callout.inline.ts
+++ b/quartz/components/scripts/callout.inline.ts
@@ -1,21 +1,21 @@
 function toggleCallout(this: HTMLElement) {
   const outerBlock = this.parentElement!
-  outerBlock.classList.toggle(`is-collapsed`)
-  const collapsed = outerBlock.classList.contains(`is-collapsed`)
+  outerBlock.classList.toggle("is-collapsed")
+  const collapsed = outerBlock.classList.contains("is-collapsed")
   const height = collapsed ? this.scrollHeight : outerBlock.scrollHeight
-  outerBlock.style.maxHeight = height + `px`
+  outerBlock.style.maxHeight = height + "px"
 
   // walk and adjust height of all parents
   let current = outerBlock
   let parent = outerBlock.parentElement
   while (parent) {
-    if (!parent.classList.contains(`callout`)) {
+    if (!parent.classList.contains("callout")) {
       return
     }
 
-    const collapsed = parent.classList.contains(`is-collapsed`)
+    const collapsed = parent.classList.contains("is-collapsed")
     const height = collapsed ? parent.scrollHeight : parent.scrollHeight + current.scrollHeight
-    parent.style.maxHeight = height + `px`
+    parent.style.maxHeight = height + "px"
 
     current = parent
     parent = parent.parentElement
@@ -30,15 +30,15 @@ function setupCallout() {
     const title = div.firstElementChild
 
     if (title) {
-      title.removeEventListener(`click`, toggleCallout)
-      title.addEventListener(`click`, toggleCallout)
+      title.addEventListener("click", toggleCallout)
+      window.addCleanup(() => title.removeEventListener("click", toggleCallout))
 
-      const collapsed = div.classList.contains(`is-collapsed`)
+      const collapsed = div.classList.contains("is-collapsed")
       const height = collapsed ? title.scrollHeight : div.scrollHeight
-      div.style.maxHeight = height + `px`
+      div.style.maxHeight = height + "px"
     }
   }
 }
 
-document.addEventListener(`nav`, setupCallout)
-window.addEventListener(`resize`, setupCallout)
+document.addEventListener("nav", setupCallout)
+window.addEventListener("resize", setupCallout)
diff --git a/quartz/components/scripts/darkmode.inline.ts b/quartz/components/scripts/darkmode.inline.ts
index 86735e3967aba..4c671aa41ecb4 100644
--- a/quartz/components/scripts/darkmode.inline.ts
+++ b/quartz/components/scripts/darkmode.inline.ts
@@ -19,8 +19,8 @@ document.addEventListener("nav", () => {
 
   // Darkmode toggle
   const toggleSwitch = document.querySelector("#darkmode-toggle") as HTMLInputElement
-  toggleSwitch.removeEventListener("change", switchTheme)
   toggleSwitch.addEventListener("change", switchTheme)
+  window.addCleanup(() => toggleSwitch.removeEventListener("change", switchTheme))
   if (currentTheme === "dark") {
     toggleSwitch.checked = true
   }
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 12546bbb01fb9..3eb25ead42e40 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -57,20 +57,20 @@ function setupExplorer() {
     for (const item of document.getElementsByClassName(
       "folder-button",
     ) as HTMLCollectionOf<HTMLElement>) {
-      item.removeEventListener("click", toggleFolder)
       item.addEventListener("click", toggleFolder)
+      window.addCleanup(() => item.removeEventListener("click", toggleFolder))
     }
   }
 
-  explorer.removeEventListener("click", toggleExplorer)
   explorer.addEventListener("click", toggleExplorer)
+  window.addCleanup(() => explorer.removeEventListener("click", toggleExplorer))
 
   // Set up click handlers for each folder (click handler on folder "icon")
   for (const item of document.getElementsByClassName(
     "folder-icon",
   ) as HTMLCollectionOf<HTMLElement>) {
-    item.removeEventListener("click", toggleFolder)
     item.addEventListener("click", toggleFolder)
+    window.addCleanup(() => item.removeEventListener("click", toggleFolder))
   }
 
   // Get folder state from local storage
diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
index a76409c139cd6..c991e163ef0c8 100644
--- a/quartz/components/scripts/graph.inline.ts
+++ b/quartz/components/scripts/graph.inline.ts
@@ -325,6 +325,6 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   await renderGraph("graph-container", slug)
 
   const containerIcon = document.getElementById("global-graph-icon")
-  containerIcon?.removeEventListener("click", renderGlobalGraph)
   containerIcon?.addEventListener("click", renderGlobalGraph)
+  window.addCleanup(() => containerIcon?.removeEventListener("click", renderGlobalGraph))
 })
diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts
index 4d51e2a6f6df1..0251834cb5df7 100644
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@@ -76,7 +76,7 @@ async function mouseEnterHandler(
 document.addEventListener("nav", () => {
   const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[]
   for (const link of links) {
-    link.removeEventListener("mouseenter", mouseEnterHandler)
     link.addEventListener("mouseenter", mouseEnterHandler)
+    window.addCleanup(() => link.removeEventListener("mouseenter", mouseEnterHandler))
   }
 })
diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 8ead5c9523b80..797685adf11b1 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -13,14 +13,13 @@ interface Item {
 
 // Can be expanded with things like "term" in the future
 type SearchType = "basic" | "tags"
-
-// Current searchType
 let searchType: SearchType = "basic"
-// Current search term // TODO: exact match
 let currentSearchTerm: string = ""
-// index for search
 let index: FlexSearch.Document<Item> | undefined = undefined
+const p = new DOMParser()
+const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
 
+const fetchContentCache: Map<FullSlug, Element[]> = new Map()
 const contextWindowWords = 30
 const numSearchResults = 8
 const numTagResults = 5
@@ -79,7 +78,6 @@ function highlight(searchTerm: string, text: string, trim?: boolean) {
 }
 
 function highlightHTML(searchTerm: string, el: HTMLElement) {
-  // try to highlight longest tokens first
   const p = new DOMParser()
   const tokenizedTerms = tokenizeTerm(searchTerm)
   const html = p.parseFromString(el.innerHTML, "text/html")
@@ -117,12 +115,6 @@ function highlightHTML(searchTerm: string, el: HTMLElement) {
   return html.body
 }
 
-const p = new DOMParser()
-const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
-let prevShortcutHandler: ((e: HTMLElementEventMap["keydown"]) => void) | undefined = undefined
-
-const fetchContentCache: Map<FullSlug, Element[]> = new Map()
-
 document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   const currentSlug = e.detail.url
 
@@ -496,16 +488,12 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     await displayResults(finalResults)
   }
 
-  if (prevShortcutHandler) {
-    document.removeEventListener("keydown", prevShortcutHandler)
-  }
-
   document.addEventListener("keydown", shortcutHandler)
-  prevShortcutHandler = shortcutHandler
-  searchIcon?.removeEventListener("click", () => showSearch("basic"))
+  window.addCleanup(() => document.removeEventListener("keydown", shortcutHandler))
   searchIcon?.addEventListener("click", () => showSearch("basic"))
-  searchBar?.removeEventListener("input", onType)
+  window.addCleanup(() => searchIcon?.removeEventListener("click", () => showSearch("basic")))
   searchBar?.addEventListener("input", onType)
+  window.addCleanup(() => searchBar?.removeEventListener("input", onType))
 
   // setup index if it hasn't been already
   if (!index) {
@@ -546,13 +534,12 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
 async function fillDocument(index: FlexSearch.Document<Item, false>, data: any) {
   let id = 0
   for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
-    await index.addAsync(id, {
+    await index.addAsync(id++, {
       id,
       slug: slug as FullSlug,
       title: fileData.title,
       content: fileData.content,
       tags: fileData.tags,
     })
-    id++
   }
 }
diff --git a/quartz/components/scripts/spa.inline.ts b/quartz/components/scripts/spa.inline.ts
index c2a44c9a8bb62..1790bcabccebd 100644
--- a/quartz/components/scripts/spa.inline.ts
+++ b/quartz/components/scripts/spa.inline.ts
@@ -39,6 +39,9 @@ function notifyNav(url: FullSlug) {
   document.dispatchEvent(event)
 }
 
+const cleanupFns: Set<(...args: any[]) => void> = new Set()
+window.addCleanup = (fn) => cleanupFns.add(fn)
+
 let p: DOMParser
 async function navigate(url: URL, isBack: boolean = false) {
   p = p || new DOMParser()
@@ -57,6 +60,10 @@ async function navigate(url: URL, isBack: boolean = false) {
 
   if (!contents) return
 
+  // cleanup old
+  cleanupFns.forEach((fn) => fn())
+  cleanupFns.clear()
+
   const html = p.parseFromString(contents, "text/html")
   normalizeRelativeURLs(html, url)
 
diff --git a/quartz/components/scripts/toc.inline.ts b/quartz/components/scripts/toc.inline.ts
index 2e1e52b0e3fd7..546859ed3261b 100644
--- a/quartz/components/scripts/toc.inline.ts
+++ b/quartz/components/scripts/toc.inline.ts
@@ -29,8 +29,8 @@ function setupToc() {
     const content = toc.nextElementSibling as HTMLElement | undefined
     if (!content) return
     content.style.maxHeight = collapsed ? "0px" : content.scrollHeight + "px"
-    toc.removeEventListener("click", toggleToc)
     toc.addEventListener("click", toggleToc)
+    window.addCleanup(() => toc.removeEventListener("click", toggleToc))
   }
 }
 
diff --git a/quartz/components/scripts/util.ts b/quartz/components/scripts/util.ts
index 5fcabadc15b5c..4ffff29e28e46 100644
--- a/quartz/components/scripts/util.ts
+++ b/quartz/components/scripts/util.ts
@@ -12,10 +12,10 @@ export function registerEscapeHandler(outsideContainer: HTMLElement | null, cb:
     cb()
   }
 
-  outsideContainer?.removeEventListener("click", click)
   outsideContainer?.addEventListener("click", click)
-  document.removeEventListener("keydown", esc)
+  window.addCleanup(() => outsideContainer?.removeEventListener("click", click))
   document.addEventListener("keydown", esc)
+  window.addCleanup(() => document.removeEventListener("keydown", esc))
 }
 
 export function removeAllChildren(node: HTMLElement) {
diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts
index accc2611effc7..5eb9718a953b4 100644
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@@ -131,9 +131,11 @@ function addGlobalPageResources(
     componentResources.afterDOMLoaded.push(spaRouterScript)
   } else {
     componentResources.afterDOMLoaded.push(`
-        window.spaNavigate = (url, _) => window.location.assign(url)
-        const event = new CustomEvent("nav", { detail: { url: document.body.dataset.slug } })
-        document.dispatchEvent(event)`)
+      window.spaNavigate = (url, _) => window.location.assign(url)
+      window.addCleanup = () => {}
+      const event = new CustomEvent("nav", { detail: { url: document.body.dataset.slug } })
+      document.dispatchEvent(event)
+    `)
   }
 
   let wsUrl = `ws://localhost:${ctx.argv.wsPort}`
@@ -147,9 +149,9 @@ function addGlobalPageResources(
       loadTime: "afterDOMReady",
       contentType: "inline",
       script: `
-          const socket = new WebSocket('${wsUrl}')
-          socket.addEventListener('message', () => document.location.reload())
-        `,
+        const socket = new WebSocket('${wsUrl}')
+        socket.addEventListener('message', () => document.location.reload())
+      `,
     })
   }
 }

From c0c0b24138c6718a7bc91926c7e4dd074845e620 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 1 Feb 2024 21:15:28 -0800
Subject: [PATCH 007/115] feat: improve search preview styling and tokenization

---
 quartz/components/scripts/search.inline.ts | 62 ++++++++++++----------
 quartz/components/styles/search.scss       | 11 ++--
 quartz/styles/base.scss                    |  2 +-
 quartz/styles/variables.scss               |  2 +-
 4 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 797685adf11b1..82fdf826b9e2b 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -24,14 +24,20 @@ const contextWindowWords = 30
 const numSearchResults = 8
 const numTagResults = 5
 
-const tokenizeTerm = (term: string) =>
-  term
-    .split(/\s+/)
-    .filter((t) => t !== "")
-    .sort((a, b) => b.length - a.length)
+const tokenizeTerm = (term: string) => {
+  const tokens = term.split(/\s+/).filter((t) => t.trim() !== "")
+
+  const tokenLen = tokens.length
+  if (tokenLen > 1) {
+    for (let i = 1; i < tokenLen; i++) {
+      tokens.push(tokens.slice(0, i + 1).join(" "))
+    }
+  }
+
+  return tokens.sort((a, b) => b.length - a.length) // always highlight longest terms first
+}
 
 function highlight(searchTerm: string, text: string, trim?: boolean) {
-  // try to highlight longest tokens first
   const tokenizedTerms = tokenizeTerm(searchTerm)
   let tokenizedText = text.split(/\s+/).filter((t) => t !== "")
 
@@ -69,7 +75,6 @@ function highlight(searchTerm: string, text: string, trim?: boolean) {
       }
       return tok
     })
-    .slice(startIndex, endIndex + 1)
     .join(" ")
 
   return `${startIndex === 0 ? "" : "..."}${slice}${
@@ -89,29 +94,32 @@ function highlightHTML(searchTerm: string, el: HTMLElement) {
     return span
   }
 
-  const highlightTextNodes = (node: Node) => {
+  const highlightTextNodes = (node: Node, term: string) => {
     if (node.nodeType === Node.TEXT_NODE) {
-      let nodeText = node.nodeValue || ""
-      tokenizedTerms.forEach((term) => {
-        const regex = new RegExp(term.toLowerCase(), "gi")
-        const matches = nodeText.match(regex)
-        const spanContainer = document.createElement("span")
-        let lastIndex = 0
-        matches?.forEach((match) => {
-          const matchIndex = nodeText.indexOf(match, lastIndex)
-          spanContainer.appendChild(document.createTextNode(nodeText.slice(lastIndex, matchIndex)))
-          spanContainer.appendChild(createHighlightSpan(match))
-          lastIndex = matchIndex + match.length
-        })
-        spanContainer.appendChild(document.createTextNode(nodeText.slice(lastIndex)))
-        node.parentNode?.replaceChild(spanContainer, node)
-      })
+      const nodeText = node.nodeValue ?? ""
+      const regex = new RegExp(term.toLowerCase(), "gi")
+      const matches = nodeText.match(regex)
+      if (!matches || matches.length === 0) return
+      const spanContainer = document.createElement("span")
+      let lastIndex = 0
+      for (const match of matches) {
+        const matchIndex = nodeText.indexOf(match, lastIndex)
+        spanContainer.appendChild(document.createTextNode(nodeText.slice(lastIndex, matchIndex)))
+        spanContainer.appendChild(createHighlightSpan(match))
+        lastIndex = matchIndex + match.length
+      }
+      spanContainer.appendChild(document.createTextNode(nodeText.slice(lastIndex)))
+      node.parentNode?.replaceChild(spanContainer, node)
     } else if (node.nodeType === Node.ELEMENT_NODE) {
-      Array.from(node.childNodes).forEach(highlightTextNodes)
+      if ((node as HTMLElement).classList.contains("highlight")) return
+      Array.from(node.childNodes).forEach((child) => highlightTextNodes(child, term))
     }
   }
 
-  highlightTextNodes(html.body)
+  for (const term of tokenizedTerms) {
+    highlightTextNodes(html.body, term)
+  }
+
   return html.body
 }
 
@@ -137,13 +145,13 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   let previewInner: HTMLDivElement | undefined = undefined
   const results = document.createElement("div")
   results.id = "results-container"
-  results.style.flexBasis = enablePreview ? "30%" : "100%"
+  results.style.flexBasis = enablePreview ? "min(30%, 450px)" : "100%"
   appendLayout(results)
 
   if (enablePreview) {
     preview = document.createElement("div")
     preview.id = "preview-container"
-    preview.style.flexBasis = "70%"
+    preview.style.flexBasis = "100%"
     appendLayout(preview)
   }
 
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 11e7c4e14b2a6..0a763ec55b353 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -54,7 +54,7 @@
     }
 
     & > #search-space {
-      width: 75%;
+      width: 65%;
       margin-top: 12vh;
       margin-left: auto;
       margin-right: auto;
@@ -85,7 +85,6 @@
       & > #search-layout {
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
         opacity: 0;
         border: 1px solid var(--lightgray);
 
@@ -106,7 +105,7 @@
           }
         }
 
-        @media all and (max-width: $mobileBreakpoint) {
+        @media all and (max-width: $tabletBreakpoint) {
           display: block;
           & > *:not(#results-container) {
             display: none !important;
@@ -119,8 +118,8 @@
         }
 
         & .highlight {
-          color: var(--secondary);
-          font-weight: 700;
+          background: color-mix(in srgb, var(--tertiary) 60%, transparent);
+          border-radius: 5px;
         }
 
         & > #preview-container {
@@ -129,8 +128,10 @@
           overflow: hidden;
 
           & .preview-inner {
+            margin: 0 auto;
             padding: 1em;
             height: 100%;
+            width: 100%;
             box-sizing: border-box;
             overflow-y: auto;
             font-family: inherit;
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index fc1db9581e3c7..0fa7a55674de6 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -26,7 +26,7 @@ section {
 }
 
 ::selection {
-  background: color-mix(in srgb, var(--tertiary) 75%, transparent);
+  background: color-mix(in srgb, var(--tertiary) 60%, transparent);
   color: var(--darkgray);
 }
 
diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss
index 30004aa7b2646..db43f8ed9edd2 100644
--- a/quartz/styles/variables.scss
+++ b/quartz/styles/variables.scss
@@ -1,6 +1,6 @@
 $pageWidth: 750px;
 $mobileBreakpoint: 600px;
-$tabletBreakpoint: 1200px;
+$tabletBreakpoint: 1000px;
 $sidePanelWidth: 380px;
 $topSpacing: 6rem;
 $fullPageWidth: $pageWidth + 2 * $sidePanelWidth;

From e9fb0ecb96a2de53cf5f060c4e151f539ca4b089 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 1 Feb 2024 21:19:48 -0800
Subject: [PATCH 008/115] fix: border radius on search preview

---
 quartz/components/styles/search.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 0a763ec55b353..784c114c123bc 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -139,7 +139,8 @@
             line-height: 1.5em;
             font-weight: 400;
             background: var(--light);
-            border-radius: 5px;
+            border-top-right-radius: 5px;
+            border-bottom-right-radius: 5px;
             box-shadow:
               0 14px 50px rgba(27, 33, 48, 0.12),
               0 10px 30px rgba(27, 33, 48, 0.16);

From 45b93a80f4538b43bf71993d05902308db786051 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 1 Feb 2024 22:22:06 -0800
Subject: [PATCH 009/115] fix: index setup, styling fixes

---
 quartz/components/scripts/search.inline.ts | 63 +++++++++++-----------
 quartz/components/styles/search.scss       |  2 +-
 quartz/plugins/emitters/contentIndex.ts    |  1 -
 3 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 82fdf826b9e2b..55919cdc670c1 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -128,6 +128,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
 
   const data = await fetchData
   const container = document.getElementById("search-container")
+  const searchSpace = document.getElementById("search-space")
   const sidebar = container?.closest(".sidebar") as HTMLElement
   const searchIcon = document.getElementById("search-icon")
   const searchBar = document.getElementById("search-bar") as HTMLInputElement | null
@@ -170,7 +171,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       removeAllChildren(preview)
     }
     if (searchLayout) {
-      searchLayout.style.opacity = "0"
+      searchLayout.style.visibility = "hidden"
     }
 
     searchType = "basic" // reset search type after closing
@@ -449,11 +450,11 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     currentSearchTerm = (e.target as HTMLInputElement).value
 
     if (searchLayout) {
-      searchLayout.style.opacity = "1"
+      searchLayout.style.visibility = "visible"
     }
 
     if (term === "" && searchLayout) {
-      searchLayout.style.opacity = "0"
+      searchLayout.style.visibility = "hidden"
     }
 
     if (term.toLowerCase().startsWith("#")) {
@@ -503,35 +504,8 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   searchBar?.addEventListener("input", onType)
   window.addCleanup(() => searchBar?.removeEventListener("input", onType))
 
-  // setup index if it hasn't been already
-  if (!index) {
-    index = new FlexSearch.Document({
-      charset: "latin:extra",
-      encode: encoder,
-      document: {
-        id: "id",
-        index: [
-          {
-            field: "title",
-            tokenize: "forward",
-          },
-          {
-            field: "content",
-            tokenize: "forward",
-          },
-          {
-            field: "tags",
-            tokenize: "forward",
-          },
-        ],
-      },
-    })
-
-    fillDocument(index, data)
-  }
-
-  // register handlers
-  registerEscapeHandler(container, hideSearch)
+  index ??= await fillDocument(data)
+  registerEscapeHandler(searchSpace, hideSearch)
 })
 
 /**
@@ -539,7 +513,28 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
  * @param index index to fill
  * @param data data to fill index with
  */
-async function fillDocument(index: FlexSearch.Document<Item, false>, data: any) {
+async function fillDocument(data: { [key: FullSlug]: ContentDetails }) {
+  const index = new FlexSearch.Document<Item>({
+    charset: "latin:extra",
+    encode: encoder,
+    document: {
+      id: "id",
+      index: [
+        {
+          field: "title",
+          tokenize: "forward",
+        },
+        {
+          field: "content",
+          tokenize: "forward",
+        },
+        {
+          field: "tags",
+          tokenize: "forward",
+        },
+      ],
+    },
+  })
   let id = 0
   for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
     await index.addAsync(id++, {
@@ -550,4 +545,6 @@ async function fillDocument(index: FlexSearch.Document<Item, false>, data: any)
       tags: fileData.tags,
     })
   }
+
+  return index
 }
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 784c114c123bc..0e6ecb5806c9e 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -85,7 +85,7 @@
       & > #search-layout {
         display: flex;
         flex-direction: row;
-        opacity: 0;
+        visibility: hidden;
         border: 1px solid var(--lightgray);
 
         & > div {
diff --git a/quartz/plugins/emitters/contentIndex.ts b/quartz/plugins/emitters/contentIndex.ts
index 31e1d3e2a6313..5a0bed914e742 100644
--- a/quartz/plugins/emitters/contentIndex.ts
+++ b/quartz/plugins/emitters/contentIndex.ts
@@ -5,7 +5,6 @@ import { escapeHTML } from "../../util/escape"
 import { FilePath, FullSlug, SimpleSlug, joinSegments, simplifySlug } from "../../util/path"
 import { QuartzEmitterPlugin } from "../types"
 import { toHtml } from "hast-util-to-html"
-import path from "path"
 import { write } from "./helpers"
 
 export type ContentIndex = Map<FullSlug, ContentDetails>

From 9b8e0c9d1aa5857db3d27bfae229c03b2c8a8b59 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 1 Feb 2024 23:55:11 -0800
Subject: [PATCH 010/115] chore(cleanup): misc refactoring for cleanup, fix
 some search bugs

---
 quartz/components/scripts/clipboard.inline.ts |   6 +-
 quartz/components/scripts/darkmode.inline.ts  |  21 +-
 quartz/components/scripts/search.inline.ts    | 201 ++++++------------
 quartz/components/styles/search.scss          |  47 ++--
 4 files changed, 102 insertions(+), 173 deletions(-)

diff --git a/quartz/components/scripts/clipboard.inline.ts b/quartz/components/scripts/clipboard.inline.ts
index c604c9bc5e3d7..87182a154b45f 100644
--- a/quartz/components/scripts/clipboard.inline.ts
+++ b/quartz/components/scripts/clipboard.inline.ts
@@ -14,7 +14,7 @@ document.addEventListener("nav", () => {
       button.type = "button"
       button.innerHTML = svgCopy
       button.ariaLabel = "Copy source"
-      button.addEventListener("click", () => {
+      function onClick() {
         navigator.clipboard.writeText(source).then(
           () => {
             button.blur()
@@ -26,7 +26,9 @@ document.addEventListener("nav", () => {
           },
           (error) => console.error(error),
         )
-      })
+      }
+      button.addEventListener("click", onClick)
+      window.addCleanup(() => button.removeEventListener("click", onClick))
       els[i].prepend(button)
     }
   }
diff --git a/quartz/components/scripts/darkmode.inline.ts b/quartz/components/scripts/darkmode.inline.ts
index 4c671aa41ecb4..48e0aa1f5df36 100644
--- a/quartz/components/scripts/darkmode.inline.ts
+++ b/quartz/components/scripts/darkmode.inline.ts
@@ -10,13 +10,21 @@ const emitThemeChangeEvent = (theme: "light" | "dark") => {
 }
 
 document.addEventListener("nav", () => {
-  const switchTheme = (e: any) => {
-    const newTheme = e.target.checked ? "dark" : "light"
+  const switchTheme = (e: Event) => {
+    const newTheme = (e.target as HTMLInputElement)?.checked ? "dark" : "light"
     document.documentElement.setAttribute("saved-theme", newTheme)
     localStorage.setItem("theme", newTheme)
     emitThemeChangeEvent(newTheme)
   }
 
+  const themeChange = (e: MediaQueryListEvent) => {
+    const newTheme = e.matches ? "dark" : "light"
+    document.documentElement.setAttribute("saved-theme", newTheme)
+    localStorage.setItem("theme", newTheme)
+    toggleSwitch.checked = e.matches
+    emitThemeChangeEvent(newTheme)
+  }
+
   // Darkmode toggle
   const toggleSwitch = document.querySelector("#darkmode-toggle") as HTMLInputElement
   toggleSwitch.addEventListener("change", switchTheme)
@@ -27,11 +35,6 @@ document.addEventListener("nav", () => {
 
   // Listen for changes in prefers-color-scheme
   const colorSchemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
-  colorSchemeMediaQuery.addEventListener("change", (e) => {
-    const newTheme = e.matches ? "dark" : "light"
-    document.documentElement.setAttribute("saved-theme", newTheme)
-    localStorage.setItem("theme", newTheme)
-    toggleSwitch.checked = e.matches
-    emitThemeChangeEvent(newTheme)
-  })
+  colorSchemeMediaQuery.addEventListener("change", themeChange)
+  window.addCleanup(() => colorSchemeMediaQuery.removeEventListener("change", themeChange))
 })
diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 55919cdc670c1..c960f5e479e33 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -26,7 +26,6 @@ const numTagResults = 5
 
 const tokenizeTerm = (term: string) => {
   const tokens = term.split(/\s+/).filter((t) => t.trim() !== "")
-
   const tokenLen = tokens.length
   if (tokenLen > 1) {
     for (let i = 1; i < tokenLen; i++) {
@@ -77,15 +76,14 @@ function highlight(searchTerm: string, text: string, trim?: boolean) {
     })
     .join(" ")
 
-  return `${startIndex === 0 ? "" : "..."}${slice}${
-    endIndex === tokenizedText.length - 1 ? "" : "..."
-  }`
+  return `${startIndex === 0 ? "" : "..."}${slice}${endIndex === tokenizedText.length - 1 ? "" : "..."
+    }`
 }
 
-function highlightHTML(searchTerm: string, el: HTMLElement) {
+function highlightHTML(searchTerm: string, innerHTML: string) {
   const p = new DOMParser()
   const tokenizedTerms = tokenizeTerm(searchTerm)
-  const html = p.parseFromString(el.innerHTML, "text/html")
+  const html = p.parseFromString(innerHTML, "text/html")
 
   const createHighlightSpan = (text: string) => {
     const span = document.createElement("span")
@@ -125,10 +123,8 @@ function highlightHTML(searchTerm: string, el: HTMLElement) {
 
 document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   const currentSlug = e.detail.url
-
   const data = await fetchData
   const container = document.getElementById("search-container")
-  const searchSpace = document.getElementById("search-space")
   const sidebar = container?.closest(".sidebar") as HTMLElement
   const searchIcon = document.getElementById("search-icon")
   const searchBar = document.getElementById("search-bar") as HTMLInputElement | null
@@ -193,6 +189,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       e.preventDefault()
       const searchBarOpen = container?.classList.contains("active")
       searchBarOpen ? hideSearch() : showSearch("basic")
+      return
     } else if (e.shiftKey && (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
       // Hotkey to open tag search
       e.preventDefault()
@@ -201,6 +198,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
 
       // add "#" prefix for tag search
       if (searchBar) searchBar.value = "#"
+      return
     }
 
     if (currentHover) {
@@ -262,69 +260,29 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     }
   }
 
-  function trimContent(content: string) {
-    // works without escaping html like in `description.ts`
-    const sentences = content.replace(/\s+/g, " ").split(".")
-    let finalDesc = ""
-    let sentenceIdx = 0
-
-    // Roughly estimate characters by (words * 5). Matches description length in `description.ts`.
-    const len = contextWindowWords * 5
-    while (finalDesc.length < len) {
-      const sentence = sentences[sentenceIdx]
-      if (!sentence) break
-      finalDesc += sentence + "."
-      sentenceIdx++
-    }
-
-    // If more content would be available, indicate it by finishing with "..."
-    if (finalDesc.length < content.length) {
-      finalDesc += ".."
-    }
-
-    return finalDesc
-  }
-
   const formatForDisplay = (term: string, id: number) => {
     const slug = idDataMap[id]
     return {
       id,
       slug,
       title: searchType === "tags" ? data[slug].title : highlight(term, data[slug].title ?? ""),
-      // if searchType is tag, display context from start of file and trim, otherwise use regular highlight
-      content:
-        searchType === "tags"
-          ? trimContent(data[slug].content)
-          : highlight(term, data[slug].content ?? "", true),
-      tags: highlightTags(term, data[slug].tags),
+      content: highlight(term, data[slug].content ?? "", true),
+      tags: highlightTags(term.substring(1), data[slug].tags),
     }
   }
 
   function highlightTags(term: string, tags: string[]) {
-    if (tags && searchType === "tags") {
-      // Find matching tags
-      const termLower = term.toLowerCase()
-      let matching = tags.filter((str) => str.includes(termLower))
-
-      // Subtract matching from original tags, then push difference
-      if (matching.length > 0) {
-        let difference = tags.filter((x) => !matching.includes(x))
-
-        // Convert to html (cant be done later as matches/term dont get passed to `resultToHTML`)
-        matching = matching.map((tag) => `<li><p class="match-tag">#${tag}</p></li>`)
-        difference = difference.map((tag) => `<li><p>#${tag}</p></li>`)
-        matching.push(...difference)
-      }
-
-      // Only allow max of `numTagResults` in preview
-      if (tags.length > numTagResults) {
-        matching.splice(numTagResults)
-      }
-
-      return matching
-    } else {
+    if (!tags || searchType !== "tags") {
       return []
     }
+
+    return tags.map(tag => {
+      if (tag.toLowerCase().includes(term.toLowerCase())) {
+        return `<li><p class="match-tag">#${tag}</p></li>`
+      } else {
+        return `<li><p>#${tag}</p></li>`
+      }
+    }).slice(0, numTagResults)
   }
 
   function resolveUrl(slug: FullSlug): URL {
@@ -332,34 +290,26 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   }
 
   const resultToHTML = ({ slug, title, content, tags }: Item) => {
-    const htmlTags = tags.length > 0 ? `<ul>${tags.join("")}</ul>` : ``
-    const resultContent = enablePreview && window.innerWidth > 600 ? "" : `<p>${content}</p>`
-
+    const htmlTags = tags.length > 0 ? `<ul class="tags">${tags.join("")}</ul>` : ``
     const itemTile = document.createElement("a")
     itemTile.classList.add("result-card")
-    Object.assign(itemTile, {
-      id: slug,
-      href: resolveUrl(slug).toString(),
-      innerHTML: `<h3>${title}</h3>${htmlTags}${resultContent}`,
-    })
+    itemTile.id = slug
+    itemTile.href = resolveUrl(slug).toString()
+    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}<p class="preview">${content}</p>`
 
     async function onMouseEnter(ev: MouseEvent) {
-      // Actually when we hover, we need to clean all highlights within the result childs
       if (!ev.target) return
-      for (const el of document.getElementsByClassName(
-        "result-card",
-      ) as HTMLCollectionOf<HTMLElement>) {
-        el.classList.remove("focus")
-        el.blur()
-      }
+      currentHover?.classList.remove('focus')
+      currentHover?.blur()
       const target = ev.target as HTMLInputElement
       await displayPreview(target)
       currentHover = target
-      currentHover.classList.remove("focus")
+      currentHover.classList.add("focus")
     }
 
     async function onMouseLeave(ev: MouseEvent) {
-      const target = ev.target as HTMLAnchorElement
+      if (!ev.target) return
+      const target = ev.target as HTMLElement
       target.classList.remove("focus")
     }
 
@@ -373,9 +323,12 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
           hideSearch()
         },
       ],
-    ] as [keyof HTMLElementEventMap, (this: HTMLElement) => void][]
+    ] as const
 
-    events.forEach(([event, handler]) => itemTile.addEventListener(event, handler))
+    events.forEach(([event, handler]) => {
+      itemTile.addEventListener(event, handler)
+      window.addCleanup(() => itemTile.removeEventListener(event, handler))
+    })
 
     return itemTile
   }
@@ -386,22 +339,22 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     removeAllChildren(results)
     if (finalResults.length === 0) {
       results.innerHTML = `<a class="result-card no-match">
-                    <h3>No results.</h3>
-                    <p>Try another search term?</p>
-                </a>`
+          <h3>No results.</h3>
+          <p>Try another search term?</p>
+      </a>`
     } else {
       results.append(...finalResults.map(resultToHTML))
     }
-    // focus on first result, then also dispatch preview immediately
-    if (results?.firstElementChild) {
+
+    if (finalResults.length === 0 && preview) {
+      // no results, clear previous preview
+      removeAllChildren(preview)
+    } else {
+      // focus on first result, then also dispatch preview immediately
       const firstChild = results.firstElementChild as HTMLElement
-      if (firstChild.classList.contains("no-match")) {
-        removeAllChildren(preview as HTMLElement)
-      } else {
-        firstChild.classList.add("focus")
-        currentHover = firstChild as HTMLInputElement
-        await displayPreview(firstChild)
-      }
+      firstChild.classList.add("focus")
+      currentHover = firstChild as HTMLInputElement
+      await displayPreview(firstChild)
     }
   }
 
@@ -427,59 +380,41 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   }
 
   async function displayPreview(el: HTMLElement | null) {
-    if (!searchLayout || !enablePreview || !el) return
-
+    if (!searchLayout || !enablePreview || !el || !preview) return
     const slug = el.id as FullSlug
     el.classList.add("focus")
-
-    removeAllChildren(preview as HTMLElement)
-
     previewInner = document.createElement("div")
     previewInner.classList.add("preview-inner")
-    preview?.appendChild(previewInner)
-
     const innerDiv = await fetchContent(slug).then((contents) =>
-      contents.map((el) => highlightHTML(currentSearchTerm, el as HTMLElement)),
+      contents.map((el) => highlightHTML(currentSearchTerm, el.innerHTML)),
     )
     previewInner.append(...innerDiv)
+    preview.replaceChildren(previewInner)
+
+    // scroll to longest
+    const highlights = [...preview.querySelectorAll(".highlight")].sort((a, b) => b.innerHTML.length - a.innerHTML.length)
+    highlights[0]?.scrollIntoView()
   }
 
   async function onType(e: HTMLElementEventMap["input"]) {
-    let term = (e.target as HTMLInputElement).value
-    let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
+    if (!searchLayout || !index) return
     currentSearchTerm = (e.target as HTMLInputElement).value
+    searchLayout.style.visibility = currentSearchTerm === "" ? "hidden" : "visible"
+    searchType = currentSearchTerm.startsWith("#") ? "tags" : "basic"
 
-    if (searchLayout) {
-      searchLayout.style.visibility = "visible"
-    }
-
-    if (term === "" && searchLayout) {
-      searchLayout.style.visibility = "hidden"
-    }
-
-    if (term.toLowerCase().startsWith("#")) {
-      searchType = "tags"
-    } else {
-      searchType = "basic"
-    }
-
-    switch (searchType) {
-      case "tags": {
-        term = term.substring(1)
-        searchResults =
-          (await index?.searchAsync({ query: term, limit: numSearchResults, index: ["tags"] })) ??
-          []
-        break
-      }
-      case "basic":
-      default: {
-        searchResults =
-          (await index?.searchAsync({
-            query: term,
-            limit: numSearchResults,
-            index: ["title", "content"],
-          })) ?? []
-      }
+    let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
+    if (searchType === "tags") {
+      searchResults = await index.searchAsync({
+        query: currentSearchTerm.substring(1),
+        limit: numSearchResults,
+        index: ["tags"],
+      })
+    } else if (searchType === "basic") {
+      searchResults = await index.searchAsync({
+        query: currentSearchTerm,
+        limit: numSearchResults,
+        index: ["title", "content"],
+      })
     }
 
     const getByField = (field: string): number[] => {
@@ -493,7 +428,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       ...getByField("content"),
       ...getByField("tags"),
     ])
-    const finalResults = [...allIds].map((id) => formatForDisplay(term, id))
+    const finalResults = [...allIds].map((id) => formatForDisplay(currentSearchTerm, id))
     await displayResults(finalResults)
   }
 
@@ -505,7 +440,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   window.addCleanup(() => searchBar?.removeEventListener("input", onType))
 
   index ??= await fillDocument(data)
-  registerEscapeHandler(searchSpace, hideSearch)
+  registerEscapeHandler(container, hideSearch)
 })
 
 /**
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 0e6ecb5806c9e..df4f5bab56ee4 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -88,6 +88,14 @@
         visibility: hidden;
         border: 1px solid var(--lightgray);
 
+        @media all and (min-width: $tabletBreakpoint) {
+          &[data-preview] {
+            & .result-card > p.preview {
+              display: none;
+            }
+          }
+        }
+
         & > div {
           // vh - #search-space.margin-top
           height: calc(75vh - 12vh);
@@ -174,7 +182,6 @@
             outline: none;
             font-weight: inherit;
 
-            &:hover,
             &:focus,
             &.focus {
               background: var(--lightgray);
@@ -184,41 +191,23 @@
               margin: 0;
             }
 
-            & > ul > li {
-              margin: 0;
-              display: inline-block;
-              white-space: nowrap;
-              margin: 0;
-              overflow-wrap: normal;
-            }
-
-            & > ul {
-              list-style: none;
-              display: flex;
-              padding-left: 0;
-              gap: 0.4rem;
-              margin: 0;
+            & > ul.tags {
               margin-top: 0.45rem;
-              box-sizing: border-box;
-              overflow: hidden;
-              background-clip: border-box;
+              margin-bottom: 0;
             }
 
             & > ul > li > p {
               border-radius: 8px;
               background-color: var(--highlight);
-              overflow: hidden;
-              background-clip: border-box;
-              padding: 0.03rem 0.4rem;
-              margin: 0;
-              color: var(--secondary);
-              opacity: 0.85;
-            }
-
-            & > ul > li > .match-tag {
-              color: var(--tertiary);
+              padding: 0.2rem 0.4rem;
+              margin: 0 0.1rem;
+              line-height: 1.4rem;
               font-weight: bold;
-              opacity: 1;
+              color: var(--secondary);
+              
+              &.match-tag {
+                color: var(--tertiary);
+              }
             }
 
             & > p {

From dc62aeb213aa68051aaaf3ddc2f25be4e4d6d466 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 1 Feb 2024 23:55:40 -0800
Subject: [PATCH 011/115] pkg: bump to 4.2.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ef9313491b1d8..2d0468c4cc43d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@jackyzha0/quartz",
-  "version": "4.1.6",
+  "version": "4.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@jackyzha0/quartz",
-      "version": "4.1.6",
+      "version": "4.2.0",
       "license": "MIT",
       "dependencies": {
         "@clack/prompts": "^0.7.0",
diff --git a/package.json b/package.json
index ee4810f5071b0..fb4175e63d60d 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@jackyzha0/quartz",
   "description": "🌱 publish your digital garden and notes as a website",
   "private": true,
-  "version": "4.1.6",
+  "version": "4.2.0",
   "type": "module",
   "author": "jackyzha0 <j.zhao2k19@gmail.com>",
   "license": "MIT",

From 970a30a139953c8d58705474b7910a64153e9466 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 1 Feb 2024 23:57:17 -0800
Subject: [PATCH 012/115] chore: fmt

---
 quartz/components/scripts/search.inline.ts | 27 +++++++++++++---------
 quartz/components/styles/search.scss       |  2 +-
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index c960f5e479e33..17f3e1ba84bed 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -76,8 +76,9 @@ function highlight(searchTerm: string, text: string, trim?: boolean) {
     })
     .join(" ")
 
-  return `${startIndex === 0 ? "" : "..."}${slice}${endIndex === tokenizedText.length - 1 ? "" : "..."
-    }`
+  return `${startIndex === 0 ? "" : "..."}${slice}${
+    endIndex === tokenizedText.length - 1 ? "" : "..."
+  }`
 }
 
 function highlightHTML(searchTerm: string, innerHTML: string) {
@@ -276,13 +277,15 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       return []
     }
 
-    return tags.map(tag => {
-      if (tag.toLowerCase().includes(term.toLowerCase())) {
-        return `<li><p class="match-tag">#${tag}</p></li>`
-      } else {
-        return `<li><p>#${tag}</p></li>`
-      }
-    }).slice(0, numTagResults)
+    return tags
+      .map((tag) => {
+        if (tag.toLowerCase().includes(term.toLowerCase())) {
+          return `<li><p class="match-tag">#${tag}</p></li>`
+        } else {
+          return `<li><p>#${tag}</p></li>`
+        }
+      })
+      .slice(0, numTagResults)
   }
 
   function resolveUrl(slug: FullSlug): URL {
@@ -299,7 +302,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
 
     async function onMouseEnter(ev: MouseEvent) {
       if (!ev.target) return
-      currentHover?.classList.remove('focus')
+      currentHover?.classList.remove("focus")
       currentHover?.blur()
       const target = ev.target as HTMLInputElement
       await displayPreview(target)
@@ -392,7 +395,9 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     preview.replaceChildren(previewInner)
 
     // scroll to longest
-    const highlights = [...preview.querySelectorAll(".highlight")].sort((a, b) => b.innerHTML.length - a.innerHTML.length)
+    const highlights = [...preview.querySelectorAll(".highlight")].sort(
+      (a, b) => b.innerHTML.length - a.innerHTML.length,
+    )
     highlights[0]?.scrollIntoView()
   }
 
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index df4f5bab56ee4..b4bb64a00102b 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -204,7 +204,7 @@
               line-height: 1.4rem;
               font-weight: bold;
               color: var(--secondary);
-              
+
               &.match-tag {
                 color: var(--tertiary);
               }

From 3b596c9311fd5fe552d6c53e9b27841932a26587 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 00:19:19 -0800
Subject: [PATCH 013/115] fix: flatmap children when highlighting rich preview
 to avoid body

---
 quartz/components/scripts/search.inline.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 17f3e1ba84bed..57067d1e3ecc8 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -81,10 +81,10 @@ function highlight(searchTerm: string, text: string, trim?: boolean) {
   }`
 }
 
-function highlightHTML(searchTerm: string, innerHTML: string) {
+function highlightHTML(searchTerm: string, el: HTMLElement) {
   const p = new DOMParser()
   const tokenizedTerms = tokenizeTerm(searchTerm)
-  const html = p.parseFromString(innerHTML, "text/html")
+  const html = p.parseFromString(el.innerHTML, "text/html")
 
   const createHighlightSpan = (text: string) => {
     const span = document.createElement("span")
@@ -389,7 +389,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     previewInner = document.createElement("div")
     previewInner.classList.add("preview-inner")
     const innerDiv = await fetchContent(slug).then((contents) =>
-      contents.map((el) => highlightHTML(currentSearchTerm, el.innerHTML)),
+      contents.flatMap((el) => [...highlightHTML(currentSearchTerm, el as HTMLElement).children]),
     )
     previewInner.append(...innerDiv)
     preview.replaceChildren(previewInner)

From 0416c03ae646acf72422fe615445d07a327cc580 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 00:25:05 -0800
Subject: [PATCH 014/115] fix: be more eager about constructing search index

---
 quartz/components/scripts/search.inline.ts | 49 ++++++++++------------
 1 file changed, 23 insertions(+), 26 deletions(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 57067d1e3ecc8..2924f398e671a 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -15,10 +15,30 @@ interface Item {
 type SearchType = "basic" | "tags"
 let searchType: SearchType = "basic"
 let currentSearchTerm: string = ""
-let index: FlexSearch.Document<Item> | undefined = undefined
-const p = new DOMParser()
 const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
+let index = new FlexSearch.Document<Item>({
+  charset: "latin:extra",
+  encode: encoder,
+  document: {
+    id: "id",
+    index: [
+      {
+        field: "title",
+        tokenize: "forward",
+      },
+      {
+        field: "content",
+        tokenize: "forward",
+      },
+      {
+        field: "tags",
+        tokenize: "forward",
+      },
+    ],
+  },
+})
 
+const p = new DOMParser()
 const fetchContentCache: Map<FullSlug, Element[]> = new Map()
 const contextWindowWords = 30
 const numSearchResults = 8
@@ -444,7 +464,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   searchBar?.addEventListener("input", onType)
   window.addCleanup(() => searchBar?.removeEventListener("input", onType))
 
-  index ??= await fillDocument(data)
+  await fillDocument(data)
   registerEscapeHandler(container, hideSearch)
 })
 
@@ -454,27 +474,6 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
  * @param data data to fill index with
  */
 async function fillDocument(data: { [key: FullSlug]: ContentDetails }) {
-  const index = new FlexSearch.Document<Item>({
-    charset: "latin:extra",
-    encode: encoder,
-    document: {
-      id: "id",
-      index: [
-        {
-          field: "title",
-          tokenize: "forward",
-        },
-        {
-          field: "content",
-          tokenize: "forward",
-        },
-        {
-          field: "tags",
-          tokenize: "forward",
-        },
-      ],
-    },
-  })
   let id = 0
   for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
     await index.addAsync(id++, {
@@ -485,6 +484,4 @@ async function fillDocument(data: { [key: FullSlug]: ContentDetails }) {
       tags: fileData.tags,
     })
   }
-
-  return index
 }

From 5a36e5b68d9d49ddcbfc87421216bfa6b9d913cf Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 00:29:45 -0800
Subject: [PATCH 015/115] fix(style): reasonable page width for rich search
 preview

---
 quartz/components/styles/search.scss | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index b4bb64a00102b..87033998cb1c8 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -134,24 +134,20 @@
           display: block;
           box-sizing: border-box;
           overflow: hidden;
+          box-sizing: border-box;
+          font-family: inherit;
+          color: var(--dark);
+          line-height: 1.5em;
+          font-weight: 400;
+          background: var(--light);
+          border-top-right-radius: 5px;
+          border-bottom-right-radius: 5px;
+          overflow-y: auto;
+          padding: 1rem;
 
           & .preview-inner {
             margin: 0 auto;
-            padding: 1em;
-            height: 100%;
-            width: 100%;
-            box-sizing: border-box;
-            overflow-y: auto;
-            font-family: inherit;
-            color: var(--dark);
-            line-height: 1.5em;
-            font-weight: 400;
-            background: var(--light);
-            border-top-right-radius: 5px;
-            border-bottom-right-radius: 5px;
-            box-shadow:
-              0 14px 50px rgba(27, 33, 48, 0.12),
-              0 10px 30px rgba(27, 33, 48, 0.16);
+            width: min($pageWidth, 100%);
           }
 
           a.internal {

From ee868b2d792559171fec6ad7426a196289cd5824 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Fri, 2 Feb 2024 03:35:53 -0500
Subject: [PATCH 016/115] fix(search): set correct attribute on hover icon
 (#787)

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/components/styles/search.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 87033998cb1c8..aac01bed5e820 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -151,7 +151,7 @@
           }
 
           a.internal {
-            background-color: none;
+            background-color: inherit;
           }
         }
 

From 18cd58617dbe6a1b887ab08e4d29694bb1b3d0e0 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 00:45:02 -0800
Subject: [PATCH 017/115] fix: parallelize search indexing

---
 quartz/components/scripts/search.inline.ts | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 2924f398e671a..769483d4e297b 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -464,8 +464,8 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   searchBar?.addEventListener("input", onType)
   window.addCleanup(() => searchBar?.removeEventListener("input", onType))
 
-  await fillDocument(data)
   registerEscapeHandler(container, hideSearch)
+  await fillDocument(data)
 })
 
 /**
@@ -475,13 +475,18 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
  */
 async function fillDocument(data: { [key: FullSlug]: ContentDetails }) {
   let id = 0
+  const promises: Array<Promise<unknown>> = []
   for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
-    await index.addAsync(id++, {
-      id,
-      slug: slug as FullSlug,
-      title: fileData.title,
-      content: fileData.content,
-      tags: fileData.tags,
-    })
+    promises.push(
+      index.addAsync(id++, {
+        id,
+        slug: slug as FullSlug,
+        title: fileData.title,
+        content: fileData.content,
+        tags: fileData.tags,
+      }),
+    )
   }
+
+  return await Promise.all(promises)
 }

From 2b57a68e1f9528de3c08633251f37d5755c75698 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 00:53:05 -0800
Subject: [PATCH 018/115] fix: font weight consistency

---
 quartz/components/styles/explorer.scss | 6 ++++--
 quartz/components/styles/search.scss   | 4 ++--
 quartz/styles/base.scss                | 2 +-
 quartz/styles/callouts.scss            | 3 ++-
 quartz/styles/variables.scss           | 2 ++
 5 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 304fd450093e9..34f180cf2c03d 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -1,3 +1,5 @@
+@use "../../styles/variables.scss" as *;
+
 button#explorer {
   all: unset;
   background-color: transparent;
@@ -85,7 +87,7 @@ svg {
     color: var(--secondary);
     font-family: var(--headerFont);
     font-size: 0.95rem;
-    font-weight: 600;
+    font-weight: $boldWeight;
     line-height: 1.5rem;
     display: inline-block;
   }
@@ -110,7 +112,7 @@ svg {
       font-size: 0.95rem;
       display: inline-block;
       color: var(--secondary);
-      font-weight: 600;
+      font-weight: $boldWeight;
       margin: 0;
       line-height: 1.5rem;
       pointer-events: none;
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index aac01bed5e820..1471a77cb8761 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -138,7 +138,7 @@
           font-family: inherit;
           color: var(--dark);
           line-height: 1.5em;
-          font-weight: 400;
+          font-weight: $normalWeight;
           background: var(--light);
           border-top-right-radius: 5px;
           border-bottom-right-radius: 5px;
@@ -198,7 +198,7 @@
               padding: 0.2rem 0.4rem;
               margin: 0 0.1rem;
               line-height: 1.4rem;
-              font-weight: bold;
+              font-weight: $boldWeight;
               color: var(--secondary);
 
               &.match-tag {
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 0fa7a55674de6..a4fde06392a3e 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -54,7 +54,7 @@ ul,
 }
 
 a {
-  font-weight: 600;
+  font-weight: $boldWeight;
   text-decoration: none;
   transition: color 0.2s ease;
   color: var(--secondary);
diff --git a/quartz/styles/callouts.scss b/quartz/styles/callouts.scss
index ee62e39c5d1a3..d4f7069a06047 100644
--- a/quartz/styles/callouts.scss
+++ b/quartz/styles/callouts.scss
@@ -1,3 +1,4 @@
+@use "./variables.scss" as *;
 @use "sass:color";
 
 .callout {
@@ -156,6 +157,6 @@
   }
 
   .callout-title-inner {
-    font-weight: 700;
+    font-weight: $boldWeight;
   }
 }
diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss
index db43f8ed9edd2..8384b9c4ef89a 100644
--- a/quartz/styles/variables.scss
+++ b/quartz/styles/variables.scss
@@ -4,3 +4,5 @@ $tabletBreakpoint: 1000px;
 $sidePanelWidth: 380px;
 $topSpacing: 6rem;
 $fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
+$boldWeight: 700;
+$normalWeight: 400;

From d11a0e71a86eae41735d825d88c3bf7d8dcf949e Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 01:01:04 -0800
Subject: [PATCH 019/115] fix: font smoothing defaults

---
 quartz/styles/base.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index a4fde06392a3e..7bc799ae34896 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -7,6 +7,8 @@ html {
   text-size-adjust: none;
   overflow-x: hidden;
   width: 100vw;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body,

From 5ab922f3163a53418cb7d1c72cf7546c848159bc Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 01:15:10 -0800
Subject: [PATCH 020/115] fix(revert): font aliasing

---
 quartz/styles/base.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 7bc799ae34896..a4fde06392a3e 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -7,8 +7,6 @@ html {
   text-size-adjust: none;
   overflow-x: hidden;
   width: 100vw;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 body,

From a0b927da4aa9bb540b50c875e77f97bd4a7c279a Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 01:24:40 -0800
Subject: [PATCH 021/115] fix: use display instead of visibility for click
 handling pasthrough

---
 quartz/components/scripts/search.inline.ts | 4 ++--
 quartz/components/styles/search.scss       | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 769483d4e297b..abdef06dad05a 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -188,7 +188,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       removeAllChildren(preview)
     }
     if (searchLayout) {
-      searchLayout.style.visibility = "hidden"
+      searchLayout.classList.remove("display-results")
     }
 
     searchType = "basic" // reset search type after closing
@@ -424,7 +424,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   async function onType(e: HTMLElementEventMap["input"]) {
     if (!searchLayout || !index) return
     currentSearchTerm = (e.target as HTMLInputElement).value
-    searchLayout.style.visibility = currentSearchTerm === "" ? "hidden" : "visible"
+    searchLayout.classList.toggle("display-results", currentSearchTerm !== "")
     searchType = currentSearchTerm.startsWith("#") ? "tags" : "basic"
 
     let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 1471a77cb8761..7ede3595cf742 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -83,11 +83,14 @@
       }
 
       & > #search-layout {
-        display: flex;
+        display: none;
         flex-direction: row;
-        visibility: hidden;
         border: 1px solid var(--lightgray);
 
+        &.display-results {
+          display: flex;
+        }
+
         @media all and (min-width: $tabletBreakpoint) {
           &[data-preview] {
             & .result-card > p.preview {

From 3231ce6e7970dd0bc79c33aa8bc09cfa9ab59d09 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 01:36:17 -0800
Subject: [PATCH 022/115] fix: search async ordering, scroll offset

---
 quartz/components/scripts/search.inline.ts | 16 ++++++++--------
 quartz/components/styles/search.scss       |  1 +
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index abdef06dad05a..ec55f96b58dc4 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -224,6 +224,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
 
     if (currentHover) {
       currentHover.classList.remove("focus")
+      currentHover.blur()
     }
 
     // If search is active, then we will render the first result and display accordingly
@@ -250,9 +251,9 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
           : (document.activeElement as HTMLInputElement | null)
         const prevResult = currentResult?.previousElementSibling as HTMLInputElement | null
         currentResult?.classList.remove("focus")
-        await displayPreview(prevResult)
         prevResult?.focus()
         currentHover = prevResult
+        await displayPreview(prevResult)
       }
     } else if (e.key === "ArrowDown" || e.key === "Tab") {
       e.preventDefault()
@@ -264,9 +265,9 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
           : (document.getElementsByClassName("result-card")[0] as HTMLInputElement | null)
         const secondResult = firstResult?.nextElementSibling as HTMLInputElement | null
         firstResult?.classList.remove("focus")
-        await displayPreview(secondResult)
         secondResult?.focus()
         currentHover = secondResult
+        await displayPreview(secondResult)
       } else {
         // If an element in results-container already has focus, focus next one
         const active = currentHover
@@ -274,9 +275,9 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
           : (document.activeElement as HTMLInputElement | null)
         active?.classList.remove("focus")
         const nextResult = active?.nextElementSibling as HTMLInputElement | null
-        await displayPreview(nextResult)
         nextResult?.focus()
         currentHover = nextResult
+        await displayPreview(nextResult)
       }
     }
   }
@@ -325,9 +326,9 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       currentHover?.classList.remove("focus")
       currentHover?.blur()
       const target = ev.target as HTMLInputElement
-      await displayPreview(target)
       currentHover = target
       currentHover.classList.add("focus")
+      await displayPreview(target)
     }
 
     async function onMouseLeave(ev: MouseEvent) {
@@ -405,12 +406,11 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   async function displayPreview(el: HTMLElement | null) {
     if (!searchLayout || !enablePreview || !el || !preview) return
     const slug = el.id as FullSlug
-    el.classList.add("focus")
-    previewInner = document.createElement("div")
-    previewInner.classList.add("preview-inner")
     const innerDiv = await fetchContent(slug).then((contents) =>
       contents.flatMap((el) => [...highlightHTML(currentSearchTerm, el as HTMLElement).children]),
     )
+    previewInner = document.createElement("div")
+    previewInner.classList.add("preview-inner")
     previewInner.append(...innerDiv)
     preview.replaceChildren(previewInner)
 
@@ -418,7 +418,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     const highlights = [...preview.querySelectorAll(".highlight")].sort(
       (a, b) => b.innerHTML.length - a.innerHTML.length,
     )
-    highlights[0]?.scrollIntoView()
+    highlights[0]?.scrollIntoView({ block: "start" })
   }
 
   async function onType(e: HTMLElementEventMap["input"]) {
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 7ede3595cf742..d6202b5a83136 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -131,6 +131,7 @@
         & .highlight {
           background: color-mix(in srgb, var(--tertiary) 60%, transparent);
           border-radius: 5px;
+          scroll-margin-top: 2rem;
         }
 
         & > #preview-container {

From 44da82467ee7077a22f0054b7bc4d0f2a008e2e0 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 01:45:15 -0800
Subject: [PATCH 023/115] fix(style): remove redundant selector

---
 quartz/components/styles/search.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index d6202b5a83136..23289d2c1cf41 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -153,10 +153,6 @@
             margin: 0 auto;
             width: min($pageWidth, 100%);
           }
-
-          a.internal {
-            background-color: inherit;
-          }
         }
 
         & > #results-container {

From 34a8dfcd55789090d1a9b019539b8770c6ce98e5 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 01:45:28 -0800
Subject: [PATCH 024/115] pkg: bump to 4.2.1

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2d0468c4cc43d..66a772cde5e47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@jackyzha0/quartz",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@jackyzha0/quartz",
-      "version": "4.2.0",
+      "version": "4.2.1",
       "license": "MIT",
       "dependencies": {
         "@clack/prompts": "^0.7.0",
diff --git a/package.json b/package.json
index fb4175e63d60d..d9f0f7bf24a70 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@jackyzha0/quartz",
   "description": "🌱 publish your digital garden and notes as a website",
   "private": true,
-  "version": "4.2.0",
+  "version": "4.2.1",
   "type": "module",
   "author": "jackyzha0 <j.zhao2k19@gmail.com>",
   "license": "MIT",

From 18745a9dc68d26827ea0df99dcc709e311c74a98 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 09:36:36 -0800
Subject: [PATCH 025/115] fix(style): correctly collapse on mobile

---
 quartz/components/styles/search.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 23289d2c1cf41..24a72848f8c8f 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -117,7 +117,8 @@
         }
 
         @media all and (max-width: $tabletBreakpoint) {
-          display: block;
+          display: block !important;
+
           & > *:not(#results-container) {
             display: none !important;
           }

From bece8fcab6e12db79617dcbcccb174d299140b51 Mon Sep 17 00:00:00 2001
From: Luis Michaelis <me@lmichaelis.de>
Date: Fri, 2 Feb 2024 18:51:34 +0100
Subject: [PATCH 026/115] fix: properly handle absolute paths in
 `CreatedModifiedDate` (#790)

When providing an absolute path to the content directory (e.g. when using an Obsidian Vault in another directory), the build step would fail with

    Failed to process `/absolute/path/to/file.md`: ENOENT: no such file or directory, stat '/current/working/directory/absolute/path/'

This problem originated in the `CreatedModifiedDate` transformer which tries to construct a native filesystem path to the file to call `fs.stat` on. It did not however, account for the original file path contained in the received `VFile` being an absolute path and so, just concatenated the current working directory with the absolute path producing a nonexistent one.

This patch adds a simple fix for this issue by checking if the original file path is already absolute before concatenating with the current working directory.
---
 quartz/plugins/transformers/lastmod.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quartz/plugins/transformers/lastmod.ts b/quartz/plugins/transformers/lastmod.ts
index 31c8c208420e0..2c7b9ce47fa8a 100644
--- a/quartz/plugins/transformers/lastmod.ts
+++ b/quartz/plugins/transformers/lastmod.ts
@@ -43,7 +43,7 @@ export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options> | und
             let published: MaybeDate = undefined
 
             const fp = file.data.filePath!
-            const fullFp = path.posix.join(file.cwd, fp)
+            const fullFp = path.isAbsolute(fp) ? fp : path.posix.join(file.cwd, fp)
             for (const source of opts.priority) {
               if (source === "filesystem") {
                 const st = await fs.promises.stat(fullFp)

From 0a3379a8530f365e2bd85e8ea20a1dfc8126c39c Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 10:10:25 -0800
Subject: [PATCH 027/115] fix(search): null checks and focus fixes

---
 quartz/components/scripts/search.inline.ts | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index ec55f96b58dc4..1ecf62fa40b30 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -224,12 +224,11 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
 
     if (currentHover) {
       currentHover.classList.remove("focus")
-      currentHover.blur()
     }
 
     // If search is active, then we will render the first result and display accordingly
     if (!container?.classList.contains("active")) return
-    else if (e.key === "Enter") {
+    if (e.key === "Enter") {
       // If result has focus, navigate to that one, otherwise pick first result
       if (results?.contains(document.activeElement)) {
         const active = document.activeElement as HTMLInputElement
@@ -252,7 +251,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
         const prevResult = currentResult?.previousElementSibling as HTMLInputElement | null
         currentResult?.classList.remove("focus")
         prevResult?.focus()
-        currentHover = prevResult
+        if (prevResult) currentHover = prevResult
         await displayPreview(prevResult)
       }
     } else if (e.key === "ArrowDown" || e.key === "Tab") {
@@ -266,18 +265,8 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
         const secondResult = firstResult?.nextElementSibling as HTMLInputElement | null
         firstResult?.classList.remove("focus")
         secondResult?.focus()
-        currentHover = secondResult
+        if (secondResult) currentHover = secondResult
         await displayPreview(secondResult)
-      } else {
-        // If an element in results-container already has focus, focus next one
-        const active = currentHover
-          ? currentHover
-          : (document.activeElement as HTMLInputElement | null)
-        active?.classList.remove("focus")
-        const nextResult = active?.nextElementSibling as HTMLInputElement | null
-        nextResult?.focus()
-        currentHover = nextResult
-        await displayPreview(nextResult)
       }
     }
   }

From 260498a96b90ed44c120f4234238b6813272ec47 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 10:23:24 -0800
Subject: [PATCH 028/115] fix(style): prevent callout icon from shrinking on
 long titles (closes #792)

---
 quartz/styles/callouts.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/quartz/styles/callouts.scss b/quartz/styles/callouts.scss
index d4f7069a06047..7fa52c506c860 100644
--- a/quartz/styles/callouts.scss
+++ b/quartz/styles/callouts.scss
@@ -120,7 +120,7 @@
 
 .callout-title {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 5px;
   padding: 1rem 0;
   color: var(--color);
@@ -131,8 +131,6 @@
     transition: transform 0.15s ease;
     opacity: 0.8;
     cursor: pointer;
-    width: var(--icon-size);
-    height: var(--icon-size);
     --callout-icon: var(--callout-icon-fold);
   }
 
@@ -145,6 +143,7 @@
   & .fold-callout-icon {
     width: var(--icon-size);
     height: var(--icon-size);
+    flex: 0 0 var(--icon-size);
 
     // icon support
     background-size: var(--icon-size) var(--icon-size);
@@ -154,6 +153,7 @@
     mask-size: var(--icon-size) var(--icon-size);
     mask-position: center;
     mask-repeat: no-repeat;
+    padding: 0.2rem 0;
   }
 
   .callout-title-inner {

From a2c46f442d26fe33c9b4cc00ddb9b805363edd20 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 10:44:19 -0800
Subject: [PATCH 029/115] fix(search): dont rely on mouse to manipulate focus

---
 quartz/components/scripts/search.inline.ts | 36 +++-------------------
 quartz/components/styles/search.scss       |  1 +
 2 files changed, 6 insertions(+), 31 deletions(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 1ecf62fa40b30..b9b55bec64254 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -310,38 +310,12 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     itemTile.href = resolveUrl(slug).toString()
     itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}<p class="preview">${content}</p>`
 
-    async function onMouseEnter(ev: MouseEvent) {
-      if (!ev.target) return
-      currentHover?.classList.remove("focus")
-      currentHover?.blur()
-      const target = ev.target as HTMLInputElement
-      currentHover = target
-      currentHover.classList.add("focus")
-      await displayPreview(target)
+    const handler = (event: MouseEvent) => {
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+      hideSearch()
     }
-
-    async function onMouseLeave(ev: MouseEvent) {
-      if (!ev.target) return
-      const target = ev.target as HTMLElement
-      target.classList.remove("focus")
-    }
-
-    const events = [
-      ["mouseenter", onMouseEnter],
-      ["mouseleave", onMouseLeave],
-      [
-        "click",
-        (event: MouseEvent) => {
-          if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
-          hideSearch()
-        },
-      ],
-    ] as const
-
-    events.forEach(([event, handler]) => {
-      itemTile.addEventListener(event, handler)
-      window.addCleanup(() => itemTile.removeEventListener(event, handler))
-    })
+    itemTile.addEventListener("click", handler)
+    window.addCleanup(() => itemTile.removeEventListener("click", handler))
 
     return itemTile
   }
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 24a72848f8c8f..9cc85dfccc702 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -179,6 +179,7 @@
             outline: none;
             font-weight: inherit;
 
+            &:hover,
             &:focus,
             &.focus {
               background: var(--lightgray);

From 9ff1fdd280f4b4c554f1bddfa51689fcb1576558 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 10:52:51 -0800
Subject: [PATCH 030/115] fix(search): oops restore ability to preview on hover
 lol

---
 quartz/components/scripts/search.inline.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index b9b55bec64254..d707cfd662d0d 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -314,6 +314,15 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
       hideSearch()
     }
+
+    async function onMouseEnter(ev: MouseEvent) {
+      if (!ev.target) return
+      const target = ev.target as HTMLInputElement
+      await displayPreview(target)
+    }
+
+    itemTile.addEventListener("mouseenter", onMouseEnter)
+    window.addCleanup(() => itemTile.removeEventListener("mouseenter", onMouseEnter))
     itemTile.addEventListener("click", handler)
     window.addCleanup(() => itemTile.removeEventListener("click", handler))
 

From 742b8832569e338848476fa415b858ce57b99e1b Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 2 Feb 2024 12:18:02 -0800
Subject: [PATCH 031/115] fix(search): flex basis and card highlighting

---
 quartz/components/scripts/search.inline.ts |  2 -
 quartz/components/styles/search.scss       | 53 +++++++++++-----------
 quartz/styles/base.scss                    |  2 +-
 3 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index d707cfd662d0d..59942ebf584f5 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -163,13 +163,11 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   let previewInner: HTMLDivElement | undefined = undefined
   const results = document.createElement("div")
   results.id = "results-container"
-  results.style.flexBasis = enablePreview ? "min(30%, 450px)" : "100%"
   appendLayout(results)
 
   if (enablePreview) {
     preview = document.createElement("div")
     preview.id = "preview-container"
-    preview.style.flexBasis = "100%"
     appendLayout(preview)
   }
 
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 9cc85dfccc702..3ad774ed39259 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -61,7 +61,7 @@
 
       & > * {
         width: 100%;
-        border-radius: 5px;
+        border-radius: 7px;
         background: var(--light);
         box-shadow:
           0 14px 50px rgba(27, 33, 48, 0.12),
@@ -86,69 +86,70 @@
         display: none;
         flex-direction: row;
         border: 1px solid var(--lightgray);
+        flex: 0 0 100%;
+        box-sizing: border-box;
 
         &.display-results {
           display: flex;
         }
 
+        &[data-preview] > #results-container {
+          flex: 0 0 min(30%, 450px);
+        }
+
         @media all and (min-width: $tabletBreakpoint) {
           &[data-preview] {
             & .result-card > p.preview {
               display: none;
             }
+
+            & > div {
+              &:first-child {
+                border-right: 1px solid var(--lightgray);
+                border-top-right-radius: unset;
+                border-bottom-right-radius: unset;
+              }
+
+              &:last-child {
+                border-top-left-radius: unset;
+                border-bottom-left-radius: unset;
+              }
+            }
           }
         }
 
         & > div {
-          // vh - #search-space.margin-top
           height: calc(75vh - 12vh);
-          background: none;
-
-          &:first-child {
-            border-top-left-radius: 5px;
-            border-bottom-left-radius: 5px;
-            border-right: 1px solid var(--lightgray);
-          }
-
-          &:last-child {
-            border-top-right-radius: 5px;
-            border-bottom-right-radius: 5px;
-          }
+          border-radius: 5px;
         }
 
         @media all and (max-width: $tabletBreakpoint) {
-          display: block !important;
-
-          & > *:not(#results-container) {
+          & > #preview-container {
             display: none !important;
           }
 
-          & > #results-container {
+          &[data-preview] > #results-container {
             width: 100%;
             height: auto;
+            flex: 0 0 100%;
           }
         }
 
         & .highlight {
-          background: color-mix(in srgb, var(--tertiary) 60%, transparent);
+          background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0));
           border-radius: 5px;
           scroll-margin-top: 2rem;
         }
 
         & > #preview-container {
           display: block;
-          box-sizing: border-box;
           overflow: hidden;
-          box-sizing: border-box;
           font-family: inherit;
           color: var(--dark);
           line-height: 1.5em;
           font-weight: $normalWeight;
-          background: var(--light);
-          border-top-right-radius: 5px;
-          border-bottom-right-radius: 5px;
           overflow-y: auto;
-          padding: 1rem;
+          padding: 0 2rem;
 
           & .preview-inner {
             margin: 0 auto;
@@ -160,6 +161,7 @@
           overflow-y: auto;
 
           & .result-card {
+            overflow: hidden;
             padding: 1em;
             cursor: pointer;
             transition: background 0.2s ease;
@@ -175,7 +177,6 @@
             margin: 0;
             text-transform: none;
             text-align: left;
-            background: var(--light);
             outline: none;
             font-weight: inherit;
 
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index a4fde06392a3e..33d6267f80fa4 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -26,7 +26,7 @@ section {
 }
 
 ::selection {
-  background: color-mix(in srgb, var(--tertiary) 60%, transparent);
+  background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0));
   color: var(--darkgray);
 }
 

From 3fb3930df8d3bc61bbf6ac69360a1b5949270cca Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sat, 3 Feb 2024 19:44:24 -0800
Subject: [PATCH 032/115] fix: calculate heading after latex (closes #719)

---
 quartz.config.ts                   | 2 +-
 quartz/plugins/transformers/toc.ts | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/quartz.config.ts b/quartz.config.ts
index 1f7399a88f569..d4fc5d38ae93a 100644
--- a/quartz.config.ts
+++ b/quartz.config.ts
@@ -45,7 +45,6 @@ const config: QuartzConfig = {
   plugins: {
     transformers: [
       Plugin.FrontMatter(),
-      Plugin.TableOfContents(),
       Plugin.CreatedModifiedDate({
         // you can add 'git' here for last modified from Git
         // if you do rely on git for dates, ensure defaultDateType is 'modified'
@@ -55,6 +54,7 @@ const config: QuartzConfig = {
       Plugin.SyntaxHighlighting(),
       Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
       Plugin.GitHubFlavoredMarkdown(),
+      Plugin.TableOfContents(),
       Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
       Plugin.Description(),
     ],
diff --git a/quartz/plugins/transformers/toc.ts b/quartz/plugins/transformers/toc.ts
index d0781ec202ad0..e831f9452afb0 100644
--- a/quartz/plugins/transformers/toc.ts
+++ b/quartz/plugins/transformers/toc.ts
@@ -26,6 +26,7 @@ interface TocEntry {
 }
 
 const regexMdLinks = new RegExp(/\[([^\[]+)\](\(.*\))/, "g")
+const slugAnchor = new Slugger()
 export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefined> = (
   userOpts,
 ) => {
@@ -38,7 +39,7 @@ export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefin
           return async (tree: Root, file) => {
             const display = file.data.frontmatter?.enableToc ?? opts.showByDefault
             if (display) {
-              const slugAnchor = new Slugger()
+              slugAnchor.reset()
               const toc: TocEntry[] = []
               let highestDepth: number = opts.maxDepth
               visit(tree, "heading", (node) => {

From dbbc672c67aa5ac0a915d22af5cf44c4e7011aae Mon Sep 17 00:00:00 2001
From: Mara-Li <mara-li@outlook.fr>
Date: Sun, 4 Feb 2024 04:55:24 +0100
Subject: [PATCH 033/115] feat: Adding support for i18n (closes #462) (#738)

* fix: alt error mix with height/width

More granular detection of alt and resize in image

* fix: format

* feat: init i18n

* feat: add translation

* style: prettier for test

* fix: build-up the locale to fusion with dateLocale

* style: run prettier

* remove cursed file

* refactor: remove i18n library and use locale way instead

* format with prettier

* forgot to remove test

* prevent merging error

* format

* format

* fix: allow string for locale
- Check during translation if valid / existing locale
- Allow to use "en" and "en-US" for example
- Add fallback directly in the function
- Add default key in the function
- Add docstring to cfg.ts

* forgot item translation

* remove unused locale variable

* forgot to remove fr-FR testing

* format
---
 quartz.config.ts                           |  1 +
 quartz/cfg.ts                              |  2 +-
 quartz/components/Backlinks.tsx            |  7 ++--
 quartz/components/Darkmode.tsx             |  7 ++--
 quartz/components/Footer.tsx               |  6 ++--
 quartz/components/Graph.tsx                |  5 +--
 quartz/components/Head.tsx                 |  6 ++--
 quartz/components/RecentNotes.tsx          |  9 ++++-
 quartz/components/Search.tsx               |  5 +--
 quartz/components/TableOfContents.tsx      | 10 +++---
 quartz/components/pages/404.tsx            |  7 ++--
 quartz/components/pages/FolderContent.tsx  |  8 +++--
 quartz/components/pages/TagContent.tsx     | 19 ++++++++---
 quartz/components/scripts/search.inline.ts |  8 ++++-
 quartz/i18n/i18next.ts                     | 37 +++++++++++++++++++++
 quartz/i18n/locales/en.json                | 37 +++++++++++++++++++++
 quartz/i18n/locales/fr.json                | 38 ++++++++++++++++++++++
 17 files changed, 180 insertions(+), 32 deletions(-)
 create mode 100644 quartz/i18n/i18next.ts
 create mode 100644 quartz/i18n/locales/en.json
 create mode 100644 quartz/i18n/locales/fr.json

diff --git a/quartz.config.ts b/quartz.config.ts
index d4fc5d38ae93a..4921a11855f3f 100644
--- a/quartz.config.ts
+++ b/quartz.config.ts
@@ -9,6 +9,7 @@ const config: QuartzConfig = {
     analytics: {
       provider: "plausible",
     },
+    locale: "en-US",
     baseUrl: "quartz.jzhao.xyz",
     ignorePatterns: ["private", "templates", ".obsidian"],
     defaultDateType: "created",
diff --git a/quartz/cfg.ts b/quartz/cfg.ts
index a7f79e3b80c54..e7ae783f80295 100644
--- a/quartz/cfg.ts
+++ b/quartz/cfg.ts
@@ -37,8 +37,8 @@ export interface GlobalConfiguration {
   baseUrl?: string
   theme: Theme
   /**
-   * The locale to use for date formatting. Default to "en-US"
    * Allow to translate the date in the language of your choice.
+   * Also used for UI translation (default: en-US)
    * Need to be formated following the IETF language tag format (https://en.wikipedia.org/wiki/IETF_language_tag)
    */
   locale?: string
diff --git a/quartz/components/Backlinks.tsx b/quartz/components/Backlinks.tsx
index d5bdc0b9514e5..1688db62d57fe 100644
--- a/quartz/components/Backlinks.tsx
+++ b/quartz/components/Backlinks.tsx
@@ -1,14 +1,15 @@
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/backlinks.scss"
 import { resolveRelative, simplifySlug } from "../util/path"
+import { i18n } from "../i18n/i18next"
 import { classNames } from "../util/lang"
 
-function Backlinks({ fileData, allFiles, displayClass }: QuartzComponentProps) {
+function Backlinks({ fileData, allFiles, displayClass, cfg }: QuartzComponentProps) {
   const slug = simplifySlug(fileData.slug!)
   const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
   return (
     <div class={classNames(displayClass, "backlinks")}>
-      <h3>Backlinks</h3>
+      <h3>{i18n(cfg.locale, "backlinks.backlinks")}</h3>
       <ul class="overflow">
         {backlinkFiles.length > 0 ? (
           backlinkFiles.map((f) => (
@@ -19,7 +20,7 @@ function Backlinks({ fileData, allFiles, displayClass }: QuartzComponentProps) {
             </li>
           ))
         ) : (
-          <li>No backlinks found</li>
+          <li>{i18n(cfg.locale, "backlinks.noBlacklinksFound")}</li>
         )}
       </ul>
     </div>
diff --git a/quartz/components/Darkmode.tsx b/quartz/components/Darkmode.tsx
index 6d10bb99e7b33..056e684d30853 100644
--- a/quartz/components/Darkmode.tsx
+++ b/quartz/components/Darkmode.tsx
@@ -4,9 +4,10 @@
 import darkmodeScript from "./scripts/darkmode.inline"
 import styles from "./styles/darkmode.scss"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { i18n } from "../i18n/i18next"
 import { classNames } from "../util/lang"
 
-function Darkmode({ displayClass }: QuartzComponentProps) {
+function Darkmode({ displayClass, cfg }: QuartzComponentProps) {
   return (
     <div class={classNames(displayClass, "darkmode")}>
       <input class="toggle" id="darkmode-toggle" type="checkbox" tabIndex={-1} />
@@ -22,7 +23,7 @@ function Darkmode({ displayClass }: QuartzComponentProps) {
           style="enable-background:new 0 0 35 35"
           xmlSpace="preserve"
         >
-          <title>Light mode</title>
+          <title>{i18n(cfg.locale, "darkmode.lightMode")}</title>
           <path d="M6,17.5C6,16.672,5.328,16,4.5,16h-3C0.672,16,0,16.672,0,17.5    S0.672,19,1.5,19h3C5.328,19,6,18.328,6,17.5z M7.5,26c-0.414,0-0.789,0.168-1.061,0.439l-2,2C4.168,28.711,4,29.086,4,29.5    C4,30.328,4.671,31,5.5,31c0.414,0,0.789-0.168,1.06-0.44l2-2C8.832,28.289,9,27.914,9,27.5C9,26.672,8.329,26,7.5,26z M17.5,6    C18.329,6,19,5.328,19,4.5v-3C19,0.672,18.329,0,17.5,0S16,0.672,16,1.5v3C16,5.328,16.671,6,17.5,6z M27.5,9    c0.414,0,0.789-0.168,1.06-0.439l2-2C30.832,6.289,31,5.914,31,5.5C31,4.672,30.329,4,29.5,4c-0.414,0-0.789,0.168-1.061,0.44    l-2,2C26.168,6.711,26,7.086,26,7.5C26,8.328,26.671,9,27.5,9z M6.439,8.561C6.711,8.832,7.086,9,7.5,9C8.328,9,9,8.328,9,7.5    c0-0.414-0.168-0.789-0.439-1.061l-2-2C6.289,4.168,5.914,4,5.5,4C4.672,4,4,4.672,4,5.5c0,0.414,0.168,0.789,0.439,1.06    L6.439,8.561z M33.5,16h-3c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3c0.828,0,1.5-0.672,1.5-1.5S34.328,16,33.5,16z     M28.561,26.439C28.289,26.168,27.914,26,27.5,26c-0.828,0-1.5,0.672-1.5,1.5c0,0.414,0.168,0.789,0.439,1.06l2,2    C28.711,30.832,29.086,31,29.5,31c0.828,0,1.5-0.672,1.5-1.5c0-0.414-0.168-0.789-0.439-1.061L28.561,26.439z M17.5,29    c-0.829,0-1.5,0.672-1.5,1.5v3c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-3C19,29.672,18.329,29,17.5,29z M17.5,7    C11.71,7,7,11.71,7,17.5S11.71,28,17.5,28S28,23.29,28,17.5S23.29,7,17.5,7z M17.5,25c-4.136,0-7.5-3.364-7.5-7.5    c0-4.136,3.364-7.5,7.5-7.5c4.136,0,7.5,3.364,7.5,7.5C25,21.636,21.636,25,17.5,25z"></path>
         </svg>
       </label>
@@ -38,7 +39,7 @@ function Darkmode({ displayClass }: QuartzComponentProps) {
           style="enable-background:new 0 0 100 100"
           xmlSpace="preserve"
         >
-          <title>Dark mode</title>
+          <title>{i18n(cfg.locale, "darkmode.lightMode")}</title>
           <path d="M96.76,66.458c-0.853-0.852-2.15-1.064-3.23-0.534c-6.063,2.991-12.858,4.571-19.655,4.571  C62.022,70.495,50.88,65.88,42.5,57.5C29.043,44.043,25.658,23.536,34.076,6.47c0.532-1.08,0.318-2.379-0.534-3.23  c-0.851-0.852-2.15-1.064-3.23-0.534c-4.918,2.427-9.375,5.619-13.246,9.491c-9.447,9.447-14.65,22.008-14.65,35.369  c0,13.36,5.203,25.921,14.65,35.368s22.008,14.65,35.368,14.65c13.361,0,25.921-5.203,35.369-14.65  c3.872-3.871,7.064-8.328,9.491-13.246C97.826,68.608,97.611,67.309,96.76,66.458z"></path>
         </svg>
       </label>
diff --git a/quartz/components/Footer.tsx b/quartz/components/Footer.tsx
index 54440cffd9859..40faef9c62a86 100644
--- a/quartz/components/Footer.tsx
+++ b/quartz/components/Footer.tsx
@@ -1,20 +1,22 @@
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/footer.scss"
 import { version } from "../../package.json"
+import { i18n } from "../i18n/i18next"
 
 interface Options {
   links: Record<string, string>
 }
 
 export default ((opts?: Options) => {
-  function Footer({ displayClass }: QuartzComponentProps) {
+  function Footer({ displayClass, cfg }: QuartzComponentProps) {
     const year = new Date().getFullYear()
     const links = opts?.links ?? []
     return (
       <footer class={`${displayClass ?? ""}`}>
         <hr />
         <p>
-          Created with <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a>, © {year}
+          {i18n(cfg.locale, "footer.createdWith")}{" "}
+          <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a>, © {year}
         </p>
         <ul>
           {Object.entries(links).map(([text, link]) => (
diff --git a/quartz/components/Graph.tsx b/quartz/components/Graph.tsx
index 756a46bb7d13d..f728c5e5d59ac 100644
--- a/quartz/components/Graph.tsx
+++ b/quartz/components/Graph.tsx
@@ -2,6 +2,7 @@ import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 // @ts-ignore
 import script from "./scripts/graph.inline"
 import style from "./styles/graph.scss"
+import { i18n } from "../i18n/i18next"
 import { classNames } from "../util/lang"
 
 export interface D3Config {
@@ -53,12 +54,12 @@ const defaultOptions: GraphOptions = {
 }
 
 export default ((opts?: GraphOptions) => {
-  function Graph({ displayClass }: QuartzComponentProps) {
+  function Graph({ displayClass, cfg }: QuartzComponentProps) {
     const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph }
     const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph }
     return (
       <div class={classNames(displayClass, "graph")}>
-        <h3>Graph View</h3>
+        <h3>{i18n(cfg.locale, "graph.graphView")}</h3>
         <div class="graph-outer">
           <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div>
           <svg
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index 2bf26381795ed..b49c385eed8d7 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -1,11 +1,13 @@
+import { i18n } from "../i18n/i18next"
 import { FullSlug, _stripSlashes, joinSegments, pathToRoot } from "../util/path"
 import { JSResourceToScriptElement } from "../util/resources"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
 export default (() => {
   function Head({ cfg, fileData, externalResources }: QuartzComponentProps) {
-    const title = fileData.frontmatter?.title ?? "Untitled"
-    const description = fileData.description?.trim() ?? "No description provided"
+    const title = fileData.frontmatter?.title ?? i18n(cfg.locale, "head.untitled")
+    const description =
+      fileData.description?.trim() ?? i18n(cfg.locale, "head.noDescriptionProvided")
     const { css, js } = externalResources
 
     const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
diff --git a/quartz/components/RecentNotes.tsx b/quartz/components/RecentNotes.tsx
index 81b354d778a44..240ef98f3f388 100644
--- a/quartz/components/RecentNotes.tsx
+++ b/quartz/components/RecentNotes.tsx
@@ -5,6 +5,7 @@ import { byDateAndAlphabetical } from "./PageList"
 import style from "./styles/recentNotes.scss"
 import { Date, getDate } from "./Date"
 import { GlobalConfiguration } from "../cfg"
+import { i18n } from "../i18n/i18next"
 import { classNames } from "../util/lang"
 
 interface Options {
@@ -70,7 +71,13 @@ export default ((userOpts?: Partial<Options>) => {
         </ul>
         {opts.linkToMore && remaining > 0 && (
           <p>
-            <a href={resolveRelative(fileData.slug!, opts.linkToMore)}>See {remaining} more →</a>
+            <a href={resolveRelative(fileData.slug!, opts.linkToMore)}>
+              {" "}
+              {i18n(cfg.locale, "recentNotes.seeRemainingMore", {
+                remaining: remaining.toString(),
+              })}{" "}
+              →
+            </a>
           </p>
         )}
       </div>
diff --git a/quartz/components/Search.tsx b/quartz/components/Search.tsx
index 239bc033bba6a..b73ce0bfc5429 100644
--- a/quartz/components/Search.tsx
+++ b/quartz/components/Search.tsx
@@ -3,6 +3,7 @@ import style from "./styles/search.scss"
 // @ts-ignore
 import script from "./scripts/search.inline"
 import { classNames } from "../util/lang"
+import { i18n } from "../i18n/i18next"
 
 export interface SearchOptions {
   enablePreview: boolean
@@ -13,13 +14,13 @@ const defaultOptions: SearchOptions = {
 }
 
 export default ((userOpts?: Partial<SearchOptions>) => {
-  function Search({ displayClass }: QuartzComponentProps) {
+  function Search({ displayClass, cfg }: QuartzComponentProps) {
     const opts = { ...defaultOptions, ...userOpts }
 
     return (
       <div class={classNames(displayClass, "search")}>
         <div id="search-icon">
-          <p>Search</p>
+          <p>{i18n(cfg.locale, "search")}</p>
           <div></div>
           <svg
             tabIndex={0}
diff --git a/quartz/components/TableOfContents.tsx b/quartz/components/TableOfContents.tsx
index 167c837dd1db3..2e015076fccba 100644
--- a/quartz/components/TableOfContents.tsx
+++ b/quartz/components/TableOfContents.tsx
@@ -5,6 +5,7 @@ import { classNames } from "../util/lang"
 
 // @ts-ignore
 import script from "./scripts/toc.inline"
+import { i18n } from "../i18n/i18next"
 
 interface Options {
   layout: "modern" | "legacy"
@@ -14,7 +15,7 @@ const defaultOptions: Options = {
   layout: "modern",
 }
 
-function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
+function TableOfContents({ fileData, displayClass, cfg }: QuartzComponentProps) {
   if (!fileData.toc) {
     return null
   }
@@ -22,7 +23,7 @@ function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
   return (
     <div class={classNames(displayClass, "toc")}>
       <button type="button" id="toc" class={fileData.collapseToc ? "collapsed" : ""}>
-        <h3>Table of Contents</h3>
+        <h3>{i18n(cfg.locale, "tableOfContent")}</h3>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -55,15 +56,14 @@ function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
 TableOfContents.css = modernStyle
 TableOfContents.afterDOMLoaded = script
 
-function LegacyTableOfContents({ fileData }: QuartzComponentProps) {
+function LegacyTableOfContents({ fileData, cfg }: QuartzComponentProps) {
   if (!fileData.toc) {
     return null
   }
-
   return (
     <details id="toc" open={!fileData.collapseToc}>
       <summary>
-        <h3>Table of Contents</h3>
+        <h3>{i18n(cfg.locale, "tableOfContent")}</h3>
       </summary>
       <ul>
         {fileData.toc.map((tocEntry) => (
diff --git a/quartz/components/pages/404.tsx b/quartz/components/pages/404.tsx
index c276f568d1026..56adbf981cf2b 100644
--- a/quartz/components/pages/404.tsx
+++ b/quartz/components/pages/404.tsx
@@ -1,10 +1,11 @@
-import { QuartzComponentConstructor } from "../types"
+import { i18n } from "../../i18n/i18next"
+import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
 
-function NotFound() {
+function NotFound({ cfg }: QuartzComponentProps) {
   return (
     <article class="popover-hint">
       <h1>404</h1>
-      <p>Either this page is private or doesn't exist.</p>
+      <p>{i18n(cfg.locale, "404")}</p>
     </article>
   )
 }
diff --git a/quartz/components/pages/FolderContent.tsx b/quartz/components/pages/FolderContent.tsx
index 47fb02f1be742..02938e32c2686 100644
--- a/quartz/components/pages/FolderContent.tsx
+++ b/quartz/components/pages/FolderContent.tsx
@@ -7,6 +7,7 @@ import { _stripSlashes, simplifySlug } from "../../util/path"
 import { Root } from "hast"
 import { pluralize } from "../../util/lang"
 import { htmlToJsx } from "../../util/jsx"
+import { i18n } from "../../i18n/i18next"
 
 interface FolderContentOptions {
   /**
@@ -23,7 +24,7 @@ export default ((opts?: Partial<FolderContentOptions>) => {
   const options: FolderContentOptions = { ...defaultOptions, ...opts }
 
   function FolderContent(props: QuartzComponentProps) {
-    const { tree, fileData, allFiles } = props
+    const { tree, fileData, allFiles, cfg } = props
     const folderSlug = _stripSlashes(simplifySlug(fileData.slug!))
     const allPagesInFolder = allFiles.filter((file) => {
       const fileSlug = _stripSlashes(simplifySlug(file.slug!))
@@ -52,7 +53,10 @@ export default ((opts?: Partial<FolderContentOptions>) => {
         </article>
         <div class="page-listing">
           {options.showFolderCount && (
-            <p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
+            <p>
+              {pluralize(allPagesInFolder.length, i18n(cfg.locale, "common.item"))}{" "}
+              {i18n(cfg.locale, "folderContent.underThisFolder")}.
+            </p>
           )}
           <div>
             <PageList {...listProps} />
diff --git a/quartz/components/pages/TagContent.tsx b/quartz/components/pages/TagContent.tsx
index ec30c5ff946ab..57a6c321678d4 100644
--- a/quartz/components/pages/TagContent.tsx
+++ b/quartz/components/pages/TagContent.tsx
@@ -6,10 +6,11 @@ import { QuartzPluginData } from "../../plugins/vfile"
 import { Root } from "hast"
 import { pluralize } from "../../util/lang"
 import { htmlToJsx } from "../../util/jsx"
+import { i18n } from "../../i18n/i18next"
 
 const numPages = 10
 function TagContent(props: QuartzComponentProps) {
-  const { tree, fileData, allFiles } = props
+  const { tree, fileData, allFiles, cfg } = props
   const slug = fileData.slug
 
   if (!(slug?.startsWith("tags/") || slug === "tags")) {
@@ -43,7 +44,10 @@ function TagContent(props: QuartzComponentProps) {
         <article>
           <p>{content}</p>
         </article>
-        <p>Found {tags.length} total tags.</p>
+        <p>
+          {i18n(cfg.locale, "tagContent.found")} {tags.length}{" "}
+          {i18n(cfg.locale, "tagContent.totalTags")}.
+        </p>
         <div>
           {tags.map((tag) => {
             const pages = tagItemMap.get(tag)!
@@ -64,8 +68,10 @@ function TagContent(props: QuartzComponentProps) {
                 {content && <p>{content}</p>}
                 <div class="page-listing">
                   <p>
-                    {pluralize(pages.length, "item")} with this tag.{" "}
-                    {pages.length > numPages && `Showing first ${numPages}.`}
+                    {pluralize(pages.length, i18n(cfg.locale, "common.item"))}{" "}
+                    {i18n(cfg.locale, "tagContent.withThisTag")}.{" "}
+                    {pages.length > numPages &&
+                      `${i18n(cfg.locale, "tagContent.showingFirst")} ${numPages}.`}
                   </p>
                   <PageList limit={numPages} {...listProps} />
                 </div>
@@ -86,7 +92,10 @@ function TagContent(props: QuartzComponentProps) {
       <div class={classes}>
         <article>{content}</article>
         <div class="page-listing">
-          <p>{pluralize(pages.length, "item")} with this tag.</p>
+          <p>
+            {pluralize(pages.length, i18n(cfg.locale, "common.item"))}{" "}
+            {i18n(cfg.locale, "tagContent.withThisTag")}.
+          </p>
           <div>
             <PageList {...listProps} />
           </div>
diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 59942ebf584f5..a75f4ff460eb9 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -306,7 +306,13 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     itemTile.classList.add("result-card")
     itemTile.id = slug
     itemTile.href = resolveUrl(slug).toString()
-    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}<p class="preview">${content}</p>`
+    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}${
+      enablePreview && window.innerWidth > 600 ? "" : `<p>${content}</p>`
+    }`
+    itemTile.addEventListener("click", (event) => {
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+      hideSearch()
+    })
 
     const handler = (event: MouseEvent) => {
       if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
diff --git a/quartz/i18n/i18next.ts b/quartz/i18n/i18next.ts
new file mode 100644
index 0000000000000..39c446132d797
--- /dev/null
+++ b/quartz/i18n/i18next.ts
@@ -0,0 +1,37 @@
+import en from "./locales/en.json"
+import fr from "./locales/fr.json"
+
+const TRANSLATION = {
+  "en-US": en,
+  "fr-FR": fr,
+} as const
+
+type TranslationOptions = {
+  [key: string]: string
+}
+
+export const i18n = (lang = "en-US", key: string, options?: TranslationOptions) => {
+  const locale =
+    Object.keys(TRANSLATION).find(
+      (key) =>
+        key.toLowerCase() === lang.toLowerCase() || key.toLowerCase().includes(lang.toLowerCase()),
+    ) ?? "en-US"
+  const getTranslation = (key: string) => {
+    const keys = key.split(".")
+    let translationString: string | Record<string, unknown> =
+      TRANSLATION[locale as keyof typeof TRANSLATION]
+    keys.forEach((key) => {
+      // @ts-ignore
+      translationString = translationString[key]
+    })
+    return translationString
+  }
+  if (options) {
+    let translationString = getTranslation(key).toString()
+    Object.keys(options).forEach((key) => {
+      translationString = translationString.replace(`{{${key}}}`, options[key])
+    })
+    return translationString
+  }
+  return getTranslation(key).toString()
+}
diff --git a/quartz/i18n/locales/en.json b/quartz/i18n/locales/en.json
new file mode 100644
index 0000000000000..28b6dff2d2aa1
--- /dev/null
+++ b/quartz/i18n/locales/en.json
@@ -0,0 +1,37 @@
+{
+  "404": "Either this page is private or doesn't exist.",
+  "backlinks": {
+    "backlinks": "Backlinks",
+    "noBlacklinksFound": "No backlinks found"
+  },
+  "common": {
+    "item": "item"
+  },
+  "darkmode": {
+    "lightMode": "Light mode"
+  },
+  "folderContent": {
+    "underThisFolder": "under this folder"
+  },
+  "footer": {
+    "createdWith": "Created with"
+  },
+  "graph": {
+    "graphView": "Graph View"
+  },
+  "head": {
+    "noDescriptionProvided": "No description provided",
+    "untitled": "Untitled"
+  },
+  "recentNotes": {
+    "seeRemainingMore": "See {{remaining}} more"
+  },
+  "search": "Search",
+  "tableOfContent": "Table of Contents",
+  "tagContent": {
+    "showingFirst": "Showing first",
+    "totalTags": "total tags",
+    "withThisTag": "with this tag",
+    "found": "Found"
+  }
+}
diff --git a/quartz/i18n/locales/fr.json b/quartz/i18n/locales/fr.json
new file mode 100644
index 0000000000000..97f8f31bc37a0
--- /dev/null
+++ b/quartz/i18n/locales/fr.json
@@ -0,0 +1,38 @@
+{
+  "404": "Soit cette page est privée, soit elle n'existe pas.",
+  "backlinks": {
+    "backlinks": "Rétroliens",
+    "noBlacklinksFound": "Aucun rétrolien trouvé"
+  },
+  "common": {
+    "item": "fichier"
+  },
+  "darkmode": {
+    "darkmode": "Thème sombre",
+    "lightMode": "Thème clair"
+  },
+  "folderContent": {
+    "underThisFolder": "dans ce dossier"
+  },
+  "footer": {
+    "createdWith": "Créé avec"
+  },
+  "graph": {
+    "graphView": "Vue Graphique"
+  },
+  "head": {
+    "noDescriptionProvided": "Aucune description n'a été fournie",
+    "untitled": "Sans titre"
+  },
+  "recentNotes": {
+    "seeRemainingMore": "Voir {{remaining}} plus"
+  },
+  "search": "Rechercher",
+  "tableOfContent": "Table des Matières",
+  "tagContent": {
+    "showingFirst": "Afficher en premier",
+    "totalTags": "tags totaux",
+    "withThisTag": "avec ce tag",
+    "found": "Trouvé"
+  }
+}

From 5b90fbd0d0ac93a6ef5921f7693d36574224531c Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Sun, 4 Feb 2024 00:51:55 -0500
Subject: [PATCH 034/115] feat(ofm): parsing all type of arrow (#797)

* feat(ofm): parsing all type of arrow

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: use html value instead of decimal

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: skip parsing arrow if it is not a valid supported mapping

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/plugins/transformers/ofm.ts | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 44df3fa9ee269..18ff6b438aa02 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -74,6 +74,17 @@ const calloutMapping = {
   cite: "quote",
 } as const
 
+const arrowMapping: Record<string, string> = {
+  "->": "&rarr;",
+  "-->": "&rArr;",
+  "=>": "&rArr;",
+  "==>": "&rArr;",
+  "<-": "&larr;",
+  "<--": "&lArr;",
+  "<=": "&lArr;",
+  "<==": "&lArr;",
+}
+
 function canonicalizeCallout(calloutName: string): keyof typeof calloutMapping {
   const normalizedCallout = calloutName.toLowerCase() as keyof typeof calloutMapping
   // if callout is not recognized, make it a custom one
@@ -82,7 +93,7 @@ function canonicalizeCallout(calloutName: string): keyof typeof calloutMapping {
 
 export const externalLinkRegex = /^https?:\/\//i
 
-export const arrowRegex = new RegExp(/-{1,2}>/, "g")
+export const arrowRegex = new RegExp(/(-{1,2}>|={1,2}>|<-{1,2}|<={1,2})/, "g")
 
 // !?                -> optional embedding
 // \[\[              -> open brace
@@ -271,10 +282,12 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
           if (opts.parseArrows) {
             replacements.push([
               arrowRegex,
-              (_value: string, ..._capture: string[]) => {
+              (value: string, ..._capture: string[]) => {
+                const maybeArrow = arrowMapping[value]
+                if (maybeArrow === undefined) return SKIP
                 return {
                   type: "html",
-                  value: `<span>&rarr;</span>`,
+                  value: `<span>${maybeArrow}</span>`,
                 }
               },
             ])

From dff4b063135297aaa2f0605fd3267a874baaa90d Mon Sep 17 00:00:00 2001
From: Mats Fangohr <83273529+MatsFangohr@users.noreply.github.com>
Date: Sun, 4 Feb 2024 15:48:31 +0100
Subject: [PATCH 035/115] fix(i18n): backlinks naming in mapping (#800)

---
 quartz/components/Backlinks.tsx | 2 +-
 quartz/i18n/locales/en.json     | 2 +-
 quartz/i18n/locales/fr.json     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/quartz/components/Backlinks.tsx b/quartz/components/Backlinks.tsx
index 1688db62d57fe..458e48b2454b6 100644
--- a/quartz/components/Backlinks.tsx
+++ b/quartz/components/Backlinks.tsx
@@ -20,7 +20,7 @@ function Backlinks({ fileData, allFiles, displayClass, cfg }: QuartzComponentPro
             </li>
           ))
         ) : (
-          <li>{i18n(cfg.locale, "backlinks.noBlacklinksFound")}</li>
+          <li>{i18n(cfg.locale, "backlinks.noBacklinksFound")}</li>
         )}
       </ul>
     </div>
diff --git a/quartz/i18n/locales/en.json b/quartz/i18n/locales/en.json
index 28b6dff2d2aa1..fc3cebbb6f735 100644
--- a/quartz/i18n/locales/en.json
+++ b/quartz/i18n/locales/en.json
@@ -2,7 +2,7 @@
   "404": "Either this page is private or doesn't exist.",
   "backlinks": {
     "backlinks": "Backlinks",
-    "noBlacklinksFound": "No backlinks found"
+    "noBacklinksFound": "No backlinks found"
   },
   "common": {
     "item": "item"
diff --git a/quartz/i18n/locales/fr.json b/quartz/i18n/locales/fr.json
index 97f8f31bc37a0..8b526b5429ce3 100644
--- a/quartz/i18n/locales/fr.json
+++ b/quartz/i18n/locales/fr.json
@@ -2,7 +2,7 @@
   "404": "Soit cette page est privée, soit elle n'existe pas.",
   "backlinks": {
     "backlinks": "Rétroliens",
-    "noBlacklinksFound": "Aucun rétrolien trouvé"
+    "noBacklinksFound": "Aucun rétrolien trouvé"
   },
   "common": {
     "item": "fichier"

From 36e4cc41a9e74faddabfd22878ea13b6c504209c Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 4 Feb 2024 20:57:10 -0800
Subject: [PATCH 036/115] chore(i18n): refactor and cleanup (#805)

* checkpoint

* finish

* docs
---
 docs/advanced/making plugins.md            |  2 +-
 docs/configuration.md                      |  1 +
 docs/features/i18n.md                      | 18 ++++++
 docs/index.md                              |  2 +-
 quartz/cfg.ts                              |  8 ++-
 quartz/components/ArticleTitle.tsx         |  1 +
 quartz/components/Backlinks.tsx            |  6 +-
 quartz/components/Darkmode.tsx             |  6 +-
 quartz/components/Date.tsx                 |  5 +-
 quartz/components/Explorer.tsx             |  6 +-
 quartz/components/ExplorerNode.tsx         |  2 +-
 quartz/components/Footer.tsx               |  6 +-
 quartz/components/Graph.tsx                |  4 +-
 quartz/components/Head.tsx                 |  6 +-
 quartz/components/PageTitle.tsx            |  3 +-
 quartz/components/RecentNotes.tsx          | 15 ++---
 quartz/components/Search.tsx               | 10 ++--
 quartz/components/TableOfContents.tsx      |  6 +-
 quartz/components/pages/404.tsx            |  4 +-
 quartz/components/pages/FolderContent.tsx  |  8 +--
 quartz/components/pages/TagContent.tsx     | 23 +++-----
 quartz/components/renderPage.tsx           | 20 ++++++-
 quartz/i18n/i18next.ts                     | 37 ------------
 quartz/i18n/index.ts                       | 11 ++++
 quartz/i18n/locales/definition.ts          | 63 +++++++++++++++++++++
 quartz/i18n/locales/en-US.ts               | 65 ++++++++++++++++++++++
 quartz/i18n/locales/en.json                | 37 ------------
 quartz/i18n/locales/fr-FR.ts               | 65 ++++++++++++++++++++++
 quartz/i18n/locales/fr.json                | 38 -------------
 quartz/plugins/emitters/404.tsx            | 10 ++--
 quartz/plugins/emitters/contentIndex.ts    |  5 +-
 quartz/plugins/emitters/contentPage.tsx    |  2 +-
 quartz/plugins/emitters/folderPage.tsx     |  8 ++-
 quartz/plugins/emitters/tagPage.tsx        |  8 ++-
 quartz/plugins/transformers/frontmatter.ts |  5 +-
 quartz/plugins/transformers/toc.ts         | 13 +----
 quartz/util/lang.ts                        |  8 ---
 37 files changed, 326 insertions(+), 211 deletions(-)
 create mode 100644 docs/features/i18n.md
 delete mode 100644 quartz/i18n/i18next.ts
 create mode 100644 quartz/i18n/index.ts
 create mode 100644 quartz/i18n/locales/definition.ts
 create mode 100644 quartz/i18n/locales/en-US.ts
 delete mode 100644 quartz/i18n/locales/en.json
 create mode 100644 quartz/i18n/locales/fr-FR.ts
 delete mode 100644 quartz/i18n/locales/fr.json

diff --git a/docs/advanced/making plugins.md b/docs/advanced/making plugins.md
index 65209a2caea2b..565f5bdba9752 100644
--- a/docs/advanced/making plugins.md	
+++ b/docs/advanced/making plugins.md	
@@ -278,7 +278,7 @@ export const ContentPage: QuartzEmitterPlugin = () => {
           allFiles,
         }
 
-        const content = renderPage(slug, componentData, opts, externalResources)
+        const content = renderPage(cfg, slug, componentData, opts, externalResources)
         const fp = await emit({
           content,
           slug: file.data.slug!,
diff --git a/docs/configuration.md b/docs/configuration.md
index 047f6ca6badc5..33d5a5744269e 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -27,6 +27,7 @@ This part of the configuration concerns anything that can affect the whole site.
   - `null`: don't use analytics;
   - `{ provider: 'plausible' }`: use [Plausible](https://plausible.io/), a privacy-friendly alternative to Google Analytics; or
   - `{ provider: 'google', tagId: <your-google-tag> }`: use Google Analytics
+- `locale`: used for [[i18n]] and date formatting
 - `baseUrl`: this is used for sitemaps and RSS feeds that require an absolute URL to know where the canonical 'home' of your site lives. This is normally the deployed URL of your site (e.g. `quartz.jzhao.xyz` for this site). Do not include the protocol (i.e. `https://`) or any leading or trailing slashes.
   - This should also include the subpath if you are [[hosting]] on GitHub pages without a custom domain. For example, if my repository is `jackyzha0/quartz`, GitHub pages would deploy to `https://jackyzha0.github.io/quartz` and the `baseUrl` would be `jackyzha0.github.io/quartz`
   - Note that Quartz 4 will avoid using this as much as possible and use relative URLs whenever it can to make sure your site works no matter _where_ you end up actually deploying it.
diff --git a/docs/features/i18n.md b/docs/features/i18n.md
new file mode 100644
index 0000000000000..57547ddadbe40
--- /dev/null
+++ b/docs/features/i18n.md
@@ -0,0 +1,18 @@
+---
+title: Internationalization
+---
+
+Internationalization allows users to translate text in the Quartz interface into various supported languages without needing to make extensive code changes. This can be changed via the `locale` [[configuration]] field in `quartz.config.ts`.
+
+The locale field generally follows a certain format: `{language}-{REGION}`
+
+- `{language}` is usually a [2-letter lowercase language code](https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes).
+- `{REGION}` is usually a [2-letter uppercase region code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)
+
+> [!tip] Interested in contributing?
+> We [gladly welcome translation PRs](https://github.com/jackyzha0/quartz/tree/v4/quartz/i18n/locales)! To contribute a translation, do the following things:
+>
+> 1. In the `quartz/i18n/locales` folder, copy the `en-US.ts` file.
+> 2. Rename it to `{language}-{REGION}.ts` so it matches a locale of the format shown above.
+> 3. Fill in the translations!
+> 4. Add the entry under `TRANSLATIONS` in `quartz/i18n/index.ts`.
diff --git a/docs/index.md b/docs/index.md
index cbf8719d1ca62..f25b6e24425d4 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -31,7 +31,7 @@ If you prefer instructions in a video format you can try following Nicole van de
 
 ## 🔧 Features
 
-- [[Obsidian compatibility]], [[full-text search]], [[graph view]], note transclusion, [[wikilinks]], [[backlinks]], [[Latex]], [[syntax highlighting]], [[popover previews]], [[Docker Support]], and [many more](./features) right out of the box
+- [[Obsidian compatibility]], [[full-text search]], [[graph view]], note transclusion, [[wikilinks]], [[backlinks]], [[Latex]], [[syntax highlighting]], [[popover previews]], [[Docker Support]], [[i18n|internationalization]] and [many more](./features) right out of the box
 - Hot-reload for both configuration and content
 - Simple JSX layouts and [[creating components|page components]]
 - [[SPA Routing|Ridiculously fast page loads]] and tiny bundle sizes
diff --git a/quartz/cfg.ts b/quartz/cfg.ts
index e7ae783f80295..a477db057f732 100644
--- a/quartz/cfg.ts
+++ b/quartz/cfg.ts
@@ -1,5 +1,6 @@
 import { ValidDateType } from "./components/Date"
 import { QuartzComponent } from "./components/types"
+import { ValidLocale } from "./i18n"
 import { PluginTypes } from "./plugins/types"
 import { Theme } from "./util/theme"
 
@@ -39,9 +40,12 @@ export interface GlobalConfiguration {
   /**
    * Allow to translate the date in the language of your choice.
    * Also used for UI translation (default: en-US)
-   * Need to be formated following the IETF language tag format (https://en.wikipedia.org/wiki/IETF_language_tag)
+   * Need to be formated following BCP 47: https://en.wikipedia.org/wiki/IETF_language_tag
+   * The first part is the language (en) and the second part is the script/region (US)
+   * Language Codes: https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes
+   * Region Codes: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
    */
-  locale?: string
+  locale: ValidLocale
 }
 
 export interface QuartzConfig {
diff --git a/quartz/components/ArticleTitle.tsx b/quartz/components/ArticleTitle.tsx
index 2484c946a4650..7768de6cb0ec7 100644
--- a/quartz/components/ArticleTitle.tsx
+++ b/quartz/components/ArticleTitle.tsx
@@ -9,6 +9,7 @@ function ArticleTitle({ fileData, displayClass }: QuartzComponentProps) {
     return null
   }
 }
+
 ArticleTitle.css = `
 .article-title {
   margin: 2rem 0 0 0;
diff --git a/quartz/components/Backlinks.tsx b/quartz/components/Backlinks.tsx
index 458e48b2454b6..573c1c39195d3 100644
--- a/quartz/components/Backlinks.tsx
+++ b/quartz/components/Backlinks.tsx
@@ -1,7 +1,7 @@
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/backlinks.scss"
 import { resolveRelative, simplifySlug } from "../util/path"
-import { i18n } from "../i18n/i18next"
+import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
 function Backlinks({ fileData, allFiles, displayClass, cfg }: QuartzComponentProps) {
@@ -9,7 +9,7 @@ function Backlinks({ fileData, allFiles, displayClass, cfg }: QuartzComponentPro
   const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
   return (
     <div class={classNames(displayClass, "backlinks")}>
-      <h3>{i18n(cfg.locale, "backlinks.backlinks")}</h3>
+      <h3>{i18n(cfg.locale).components.backlinks.title}</h3>
       <ul class="overflow">
         {backlinkFiles.length > 0 ? (
           backlinkFiles.map((f) => (
@@ -20,7 +20,7 @@ function Backlinks({ fileData, allFiles, displayClass, cfg }: QuartzComponentPro
             </li>
           ))
         ) : (
-          <li>{i18n(cfg.locale, "backlinks.noBacklinksFound")}</li>
+          <li>{i18n(cfg.locale).components.backlinks.noBacklinksFound}</li>
         )}
       </ul>
     </div>
diff --git a/quartz/components/Darkmode.tsx b/quartz/components/Darkmode.tsx
index 056e684d30853..62d3c2382dec5 100644
--- a/quartz/components/Darkmode.tsx
+++ b/quartz/components/Darkmode.tsx
@@ -4,7 +4,7 @@
 import darkmodeScript from "./scripts/darkmode.inline"
 import styles from "./styles/darkmode.scss"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
-import { i18n } from "../i18n/i18next"
+import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
 function Darkmode({ displayClass, cfg }: QuartzComponentProps) {
@@ -23,7 +23,7 @@ function Darkmode({ displayClass, cfg }: QuartzComponentProps) {
           style="enable-background:new 0 0 35 35"
           xmlSpace="preserve"
         >
-          <title>{i18n(cfg.locale, "darkmode.lightMode")}</title>
+          <title>{i18n(cfg.locale).components.themeToggle.darkMode}</title>
           <path d="M6,17.5C6,16.672,5.328,16,4.5,16h-3C0.672,16,0,16.672,0,17.5    S0.672,19,1.5,19h3C5.328,19,6,18.328,6,17.5z M7.5,26c-0.414,0-0.789,0.168-1.061,0.439l-2,2C4.168,28.711,4,29.086,4,29.5    C4,30.328,4.671,31,5.5,31c0.414,0,0.789-0.168,1.06-0.44l2-2C8.832,28.289,9,27.914,9,27.5C9,26.672,8.329,26,7.5,26z M17.5,6    C18.329,6,19,5.328,19,4.5v-3C19,0.672,18.329,0,17.5,0S16,0.672,16,1.5v3C16,5.328,16.671,6,17.5,6z M27.5,9    c0.414,0,0.789-0.168,1.06-0.439l2-2C30.832,6.289,31,5.914,31,5.5C31,4.672,30.329,4,29.5,4c-0.414,0-0.789,0.168-1.061,0.44    l-2,2C26.168,6.711,26,7.086,26,7.5C26,8.328,26.671,9,27.5,9z M6.439,8.561C6.711,8.832,7.086,9,7.5,9C8.328,9,9,8.328,9,7.5    c0-0.414-0.168-0.789-0.439-1.061l-2-2C6.289,4.168,5.914,4,5.5,4C4.672,4,4,4.672,4,5.5c0,0.414,0.168,0.789,0.439,1.06    L6.439,8.561z M33.5,16h-3c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3c0.828,0,1.5-0.672,1.5-1.5S34.328,16,33.5,16z     M28.561,26.439C28.289,26.168,27.914,26,27.5,26c-0.828,0-1.5,0.672-1.5,1.5c0,0.414,0.168,0.789,0.439,1.06l2,2    C28.711,30.832,29.086,31,29.5,31c0.828,0,1.5-0.672,1.5-1.5c0-0.414-0.168-0.789-0.439-1.061L28.561,26.439z M17.5,29    c-0.829,0-1.5,0.672-1.5,1.5v3c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-3C19,29.672,18.329,29,17.5,29z M17.5,7    C11.71,7,7,11.71,7,17.5S11.71,28,17.5,28S28,23.29,28,17.5S23.29,7,17.5,7z M17.5,25c-4.136,0-7.5-3.364-7.5-7.5    c0-4.136,3.364-7.5,7.5-7.5c4.136,0,7.5,3.364,7.5,7.5C25,21.636,21.636,25,17.5,25z"></path>
         </svg>
       </label>
@@ -39,7 +39,7 @@ function Darkmode({ displayClass, cfg }: QuartzComponentProps) {
           style="enable-background:new 0 0 100 100"
           xmlSpace="preserve"
         >
-          <title>{i18n(cfg.locale, "darkmode.lightMode")}</title>
+          <title>{i18n(cfg.locale).components.themeToggle.lightMode}</title>
           <path d="M96.76,66.458c-0.853-0.852-2.15-1.064-3.23-0.534c-6.063,2.991-12.858,4.571-19.655,4.571  C62.022,70.495,50.88,65.88,42.5,57.5C29.043,44.043,25.658,23.536,34.076,6.47c0.532-1.08,0.318-2.379-0.534-3.23  c-0.851-0.852-2.15-1.064-3.23-0.534c-4.918,2.427-9.375,5.619-13.246,9.491c-9.447,9.447-14.65,22.008-14.65,35.369  c0,13.36,5.203,25.921,14.65,35.368s22.008,14.65,35.368,14.65c13.361,0,25.921-5.203,35.369-14.65  c3.872-3.871,7.064-8.328,9.491-13.246C97.826,68.608,97.611,67.309,96.76,66.458z"></path>
         </svg>
       </label>
diff --git a/quartz/components/Date.tsx b/quartz/components/Date.tsx
index 6feac178cacb6..26b59647c281d 100644
--- a/quartz/components/Date.tsx
+++ b/quartz/components/Date.tsx
@@ -1,9 +1,10 @@
 import { GlobalConfiguration } from "../cfg"
+import { ValidLocale } from "../i18n"
 import { QuartzPluginData } from "../plugins/vfile"
 
 interface Props {
   date: Date
-  locale?: string
+  locale?: ValidLocale
 }
 
 export type ValidDateType = keyof Required<QuartzPluginData>["dates"]
@@ -17,7 +18,7 @@ export function getDate(cfg: GlobalConfiguration, data: QuartzPluginData): Date
   return data.dates?.[cfg.defaultDateType]
 }
 
-export function formatDate(d: Date, locale = "en-US"): string {
+export function formatDate(d: Date, locale: ValidLocale = "en-US"): string {
   return d.toLocaleDateString(locale, {
     year: "numeric",
     month: "short",
diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index e964c5a410f18..f7017342e963f 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -6,10 +6,10 @@ import script from "./scripts/explorer.inline"
 import { ExplorerNode, FileNode, Options } from "./ExplorerNode"
 import { QuartzPluginData } from "../plugins/vfile"
 import { classNames } from "../util/lang"
+import { i18n } from "../i18n"
 
 // Options interface defined in `ExplorerNode` to avoid circular dependency
 const defaultOptions = {
-  title: "Explorer",
   folderClickBehavior: "collapse",
   folderDefaultState: "collapsed",
   useSavedState: true,
@@ -75,7 +75,7 @@ export default ((userOpts?: Partial<Options>) => {
     jsonTree = JSON.stringify(folders)
   }
 
-  function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) {
+  function Explorer({ cfg, allFiles, displayClass, fileData }: QuartzComponentProps) {
     constructFileTree(allFiles)
     return (
       <div class={classNames(displayClass, "explorer")}>
@@ -87,7 +87,7 @@ export default ((userOpts?: Partial<Options>) => {
           data-savestate={opts.useSavedState}
           data-tree={jsonTree}
         >
-          <h1>{opts.title}</h1>
+          <h1>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h1>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="14"
diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx
index 60966b3b1d230..2968a03e99ce0 100644
--- a/quartz/components/ExplorerNode.tsx
+++ b/quartz/components/ExplorerNode.tsx
@@ -12,7 +12,7 @@ import {
 type OrderEntries = "sort" | "filter" | "map"
 
 export interface Options {
-  title: string
+  title?: string
   folderDefaultState: "collapsed" | "open"
   folderClickBehavior: "collapse" | "link"
   useSavedState: boolean
diff --git a/quartz/components/Footer.tsx b/quartz/components/Footer.tsx
index 40faef9c62a86..de472f72941e3 100644
--- a/quartz/components/Footer.tsx
+++ b/quartz/components/Footer.tsx
@@ -1,7 +1,7 @@
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/footer.scss"
 import { version } from "../../package.json"
-import { i18n } from "../i18n/i18next"
+import { i18n } from "../i18n"
 
 interface Options {
   links: Record<string, string>
@@ -15,8 +15,8 @@ export default ((opts?: Options) => {
       <footer class={`${displayClass ?? ""}`}>
         <hr />
         <p>
-          {i18n(cfg.locale, "footer.createdWith")}{" "}
-          <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a>, © {year}
+          {i18n(cfg.locale).components.footer.createdWith}{" "}
+          <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a> © {year}
         </p>
         <ul>
           {Object.entries(links).map(([text, link]) => (
diff --git a/quartz/components/Graph.tsx b/quartz/components/Graph.tsx
index f728c5e5d59ac..9fce9bd8f02ff 100644
--- a/quartz/components/Graph.tsx
+++ b/quartz/components/Graph.tsx
@@ -2,7 +2,7 @@ import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 // @ts-ignore
 import script from "./scripts/graph.inline"
 import style from "./styles/graph.scss"
-import { i18n } from "../i18n/i18next"
+import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
 export interface D3Config {
@@ -59,7 +59,7 @@ export default ((opts?: GraphOptions) => {
     const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph }
     return (
       <div class={classNames(displayClass, "graph")}>
-        <h3>{i18n(cfg.locale, "graph.graphView")}</h3>
+        <h3>{i18n(cfg.locale).components.graph.title}</h3>
         <div class="graph-outer">
           <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div>
           <svg
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index b49c385eed8d7..b94909cc1ae82 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -1,13 +1,13 @@
-import { i18n } from "../i18n/i18next"
+import { i18n } from "../i18n"
 import { FullSlug, _stripSlashes, joinSegments, pathToRoot } from "../util/path"
 import { JSResourceToScriptElement } from "../util/resources"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
 export default (() => {
   function Head({ cfg, fileData, externalResources }: QuartzComponentProps) {
-    const title = fileData.frontmatter?.title ?? i18n(cfg.locale, "head.untitled")
+    const title = fileData.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title
     const description =
-      fileData.description?.trim() ?? i18n(cfg.locale, "head.noDescriptionProvided")
+      fileData.description?.trim() ?? i18n(cfg.locale).propertyDefaults.description
     const { css, js } = externalResources
 
     const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
diff --git a/quartz/components/PageTitle.tsx b/quartz/components/PageTitle.tsx
index fb1660a7c82bb..d129602647351 100644
--- a/quartz/components/PageTitle.tsx
+++ b/quartz/components/PageTitle.tsx
@@ -1,9 +1,10 @@
 import { pathToRoot } from "../util/path"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { classNames } from "../util/lang"
+import { i18n } from "../i18n"
 
 function PageTitle({ fileData, cfg, displayClass }: QuartzComponentProps) {
-  const title = cfg?.pageTitle ?? "Untitled Quartz"
+  const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
   const baseDir = pathToRoot(fileData.slug!)
   return (
     <h1 class={classNames(displayClass, "page-title")}>
diff --git a/quartz/components/RecentNotes.tsx b/quartz/components/RecentNotes.tsx
index 240ef98f3f388..f8f6de41f76cd 100644
--- a/quartz/components/RecentNotes.tsx
+++ b/quartz/components/RecentNotes.tsx
@@ -5,11 +5,11 @@ import { byDateAndAlphabetical } from "./PageList"
 import style from "./styles/recentNotes.scss"
 import { Date, getDate } from "./Date"
 import { GlobalConfiguration } from "../cfg"
-import { i18n } from "../i18n/i18next"
+import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
 interface Options {
-  title: string
+  title?: string
   limit: number
   linkToMore: SimpleSlug | false
   filter: (f: QuartzPluginData) => boolean
@@ -17,7 +17,6 @@ interface Options {
 }
 
 const defaultOptions = (cfg: GlobalConfiguration): Options => ({
-  title: "Recent Notes",
   limit: 3,
   linkToMore: false,
   filter: () => true,
@@ -31,10 +30,10 @@ export default ((userOpts?: Partial<Options>) => {
     const remaining = Math.max(0, pages.length - opts.limit)
     return (
       <div class={classNames(displayClass, "recent-notes")}>
-        <h3>{opts.title}</h3>
+        <h3>{opts.title ?? i18n(cfg.locale).components.recentNotes.title}</h3>
         <ul class="recent-ul">
           {pages.slice(0, opts.limit).map((page) => {
-            const title = page.frontmatter?.title
+            const title = page.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title
             const tags = page.frontmatter?.tags ?? []
 
             return (
@@ -72,11 +71,7 @@ export default ((userOpts?: Partial<Options>) => {
         {opts.linkToMore && remaining > 0 && (
           <p>
             <a href={resolveRelative(fileData.slug!, opts.linkToMore)}>
-              {" "}
-              {i18n(cfg.locale, "recentNotes.seeRemainingMore", {
-                remaining: remaining.toString(),
-              })}{" "}
-              →
+              {i18n(cfg.locale).components.recentNotes.seeRemainingMore({ remaining })}
             </a>
           </p>
         )}
diff --git a/quartz/components/Search.tsx b/quartz/components/Search.tsx
index b73ce0bfc5429..a07dbc4fd1d6d 100644
--- a/quartz/components/Search.tsx
+++ b/quartz/components/Search.tsx
@@ -3,7 +3,7 @@ import style from "./styles/search.scss"
 // @ts-ignore
 import script from "./scripts/search.inline"
 import { classNames } from "../util/lang"
-import { i18n } from "../i18n/i18next"
+import { i18n } from "../i18n"
 
 export interface SearchOptions {
   enablePreview: boolean
@@ -16,11 +16,11 @@ const defaultOptions: SearchOptions = {
 export default ((userOpts?: Partial<SearchOptions>) => {
   function Search({ displayClass, cfg }: QuartzComponentProps) {
     const opts = { ...defaultOptions, ...userOpts }
-
+    const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
     return (
       <div class={classNames(displayClass, "search")}>
         <div id="search-icon">
-          <p>{i18n(cfg.locale, "search")}</p>
+          <p>{i18n(cfg.locale).components.search.title}</p>
           <div></div>
           <svg
             tabIndex={0}
@@ -44,8 +44,8 @@ export default ((userOpts?: Partial<SearchOptions>) => {
               id="search-bar"
               name="search"
               type="text"
-              aria-label="Search for something"
-              placeholder="Search for something"
+              aria-label={searchPlaceholder}
+              placeholder={searchPlaceholder}
             />
             <div id="search-layout" data-preview={opts.enablePreview}></div>
           </div>
diff --git a/quartz/components/TableOfContents.tsx b/quartz/components/TableOfContents.tsx
index 2e015076fccba..2abc74b5308f5 100644
--- a/quartz/components/TableOfContents.tsx
+++ b/quartz/components/TableOfContents.tsx
@@ -5,7 +5,7 @@ import { classNames } from "../util/lang"
 
 // @ts-ignore
 import script from "./scripts/toc.inline"
-import { i18n } from "../i18n/i18next"
+import { i18n } from "../i18n"
 
 interface Options {
   layout: "modern" | "legacy"
@@ -23,7 +23,7 @@ function TableOfContents({ fileData, displayClass, cfg }: QuartzComponentProps)
   return (
     <div class={classNames(displayClass, "toc")}>
       <button type="button" id="toc" class={fileData.collapseToc ? "collapsed" : ""}>
-        <h3>{i18n(cfg.locale, "tableOfContent")}</h3>
+        <h3>{i18n(cfg.locale).components.tableOfContents.title}</h3>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -63,7 +63,7 @@ function LegacyTableOfContents({ fileData, cfg }: QuartzComponentProps) {
   return (
     <details id="toc" open={!fileData.collapseToc}>
       <summary>
-        <h3>{i18n(cfg.locale, "tableOfContent")}</h3>
+        <h3>{i18n(cfg.locale).components.tableOfContents.title}</h3>
       </summary>
       <ul>
         {fileData.toc.map((tocEntry) => (
diff --git a/quartz/components/pages/404.tsx b/quartz/components/pages/404.tsx
index 56adbf981cf2b..276d5e561c0bf 100644
--- a/quartz/components/pages/404.tsx
+++ b/quartz/components/pages/404.tsx
@@ -1,11 +1,11 @@
-import { i18n } from "../../i18n/i18next"
+import { i18n } from "../../i18n"
 import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
 
 function NotFound({ cfg }: QuartzComponentProps) {
   return (
     <article class="popover-hint">
       <h1>404</h1>
-      <p>{i18n(cfg.locale, "404")}</p>
+      <p>{i18n(cfg.locale).pages.error.notFound}</p>
     </article>
   )
 }
diff --git a/quartz/components/pages/FolderContent.tsx b/quartz/components/pages/FolderContent.tsx
index 02938e32c2686..b954ea21c42c5 100644
--- a/quartz/components/pages/FolderContent.tsx
+++ b/quartz/components/pages/FolderContent.tsx
@@ -5,9 +5,8 @@ import style from "../styles/listPage.scss"
 import { PageList } from "../PageList"
 import { _stripSlashes, simplifySlug } from "../../util/path"
 import { Root } from "hast"
-import { pluralize } from "../../util/lang"
 import { htmlToJsx } from "../../util/jsx"
-import { i18n } from "../../i18n/i18next"
+import { i18n } from "../../i18n"
 
 interface FolderContentOptions {
   /**
@@ -54,8 +53,9 @@ export default ((opts?: Partial<FolderContentOptions>) => {
         <div class="page-listing">
           {options.showFolderCount && (
             <p>
-              {pluralize(allPagesInFolder.length, i18n(cfg.locale, "common.item"))}{" "}
-              {i18n(cfg.locale, "folderContent.underThisFolder")}.
+              {i18n(cfg.locale).pages.folderContent.itemsUnderFolder({
+                count: allPagesInFolder.length,
+              })}
             </p>
           )}
           <div>
diff --git a/quartz/components/pages/TagContent.tsx b/quartz/components/pages/TagContent.tsx
index 57a6c321678d4..19452ec44a63d 100644
--- a/quartz/components/pages/TagContent.tsx
+++ b/quartz/components/pages/TagContent.tsx
@@ -4,9 +4,8 @@ import { PageList } from "../PageList"
 import { FullSlug, getAllSegmentPrefixes, simplifySlug } from "../../util/path"
 import { QuartzPluginData } from "../../plugins/vfile"
 import { Root } from "hast"
-import { pluralize } from "../../util/lang"
 import { htmlToJsx } from "../../util/jsx"
-import { i18n } from "../../i18n/i18next"
+import { i18n } from "../../i18n"
 
 const numPages = 10
 function TagContent(props: QuartzComponentProps) {
@@ -44,10 +43,7 @@ function TagContent(props: QuartzComponentProps) {
         <article>
           <p>{content}</p>
         </article>
-        <p>
-          {i18n(cfg.locale, "tagContent.found")} {tags.length}{" "}
-          {i18n(cfg.locale, "tagContent.totalTags")}.
-        </p>
+        <p>{i18n(cfg.locale).pages.tagContent.totalTags({ count: tags.length })}</p>
         <div>
           {tags.map((tag) => {
             const pages = tagItemMap.get(tag)!
@@ -68,10 +64,12 @@ function TagContent(props: QuartzComponentProps) {
                 {content && <p>{content}</p>}
                 <div class="page-listing">
                   <p>
-                    {pluralize(pages.length, i18n(cfg.locale, "common.item"))}{" "}
-                    {i18n(cfg.locale, "tagContent.withThisTag")}.{" "}
-                    {pages.length > numPages &&
-                      `${i18n(cfg.locale, "tagContent.showingFirst")} ${numPages}.`}
+                    {i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}
+                    {pages.length > numPages && (
+                      <span>
+                        {i18n(cfg.locale).pages.tagContent.showingFirst({ count: numPages })}
+                      </span>
+                    )}
                   </p>
                   <PageList limit={numPages} {...listProps} />
                 </div>
@@ -92,10 +90,7 @@ function TagContent(props: QuartzComponentProps) {
       <div class={classes}>
         <article>{content}</article>
         <div class="page-listing">
-          <p>
-            {pluralize(pages.length, i18n(cfg.locale, "common.item"))}{" "}
-            {i18n(cfg.locale, "tagContent.withThisTag")}.
-          </p>
+          <p>{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}</p>
           <div>
             <PageList {...listProps} />
           </div>
diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index b3fe06baf37ae..fa8305d748e76 100644
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -7,6 +7,8 @@ import { FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../ut
 import { visit } from "unist-util-visit"
 import { Root, Element, ElementContent } from "hast"
 import { QuartzPluginData } from "../plugins/vfile"
+import { GlobalConfiguration } from "../cfg"
+import { i18n } from "../i18n"
 
 interface RenderComponents {
   head: QuartzComponent
@@ -63,6 +65,7 @@ function getOrComputeFileIndex(allFiles: QuartzPluginData[]): Map<FullSlug, Quar
 }
 
 export function renderPage(
+  cfg: GlobalConfiguration,
   slug: FullSlug,
   componentData: QuartzComponentProps,
   components: RenderComponents,
@@ -136,7 +139,9 @@ export function renderPage(
               type: "element",
               tagName: "a",
               properties: { href: inner.properties?.href, class: ["internal"] },
-              children: [{ type: "text", value: `Link to original` }],
+              children: [
+                { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
+              ],
             },
           ]
         } else if (page.htmlAst) {
@@ -147,7 +152,14 @@ export function renderPage(
               tagName: "h1",
               properties: {},
               children: [
-                { type: "text", value: page.frontmatter?.title ?? `Transclude of ${page.slug}` },
+                {
+                  type: "text",
+                  value:
+                    page.frontmatter?.title ??
+                    i18n(cfg.locale).components.transcludes.transcludeOf({
+                      targetSlug: page.slug!,
+                    }),
+                },
               ],
             },
             ...(page.htmlAst.children as ElementContent[]).map((child) =>
@@ -157,7 +169,9 @@ export function renderPage(
               type: "element",
               tagName: "a",
               properties: { href: inner.properties?.href, class: ["internal"] },
-              children: [{ type: "text", value: `Link to original` }],
+              children: [
+                { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
+              ],
             },
           ]
         }
diff --git a/quartz/i18n/i18next.ts b/quartz/i18n/i18next.ts
deleted file mode 100644
index 39c446132d797..0000000000000
--- a/quartz/i18n/i18next.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import en from "./locales/en.json"
-import fr from "./locales/fr.json"
-
-const TRANSLATION = {
-  "en-US": en,
-  "fr-FR": fr,
-} as const
-
-type TranslationOptions = {
-  [key: string]: string
-}
-
-export const i18n = (lang = "en-US", key: string, options?: TranslationOptions) => {
-  const locale =
-    Object.keys(TRANSLATION).find(
-      (key) =>
-        key.toLowerCase() === lang.toLowerCase() || key.toLowerCase().includes(lang.toLowerCase()),
-    ) ?? "en-US"
-  const getTranslation = (key: string) => {
-    const keys = key.split(".")
-    let translationString: string | Record<string, unknown> =
-      TRANSLATION[locale as keyof typeof TRANSLATION]
-    keys.forEach((key) => {
-      // @ts-ignore
-      translationString = translationString[key]
-    })
-    return translationString
-  }
-  if (options) {
-    let translationString = getTranslation(key).toString()
-    Object.keys(options).forEach((key) => {
-      translationString = translationString.replace(`{{${key}}}`, options[key])
-    })
-    return translationString
-  }
-  return getTranslation(key).toString()
-}
diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
new file mode 100644
index 0000000000000..47645c539dab3
--- /dev/null
+++ b/quartz/i18n/index.ts
@@ -0,0 +1,11 @@
+import { Translation } from "./locales/definition"
+import en from "./locales/en-US"
+import fr from "./locales/fr-FR"
+
+export const TRANSLATIONS = {
+  "en-US": en,
+  "fr-FR": fr,
+} as const
+
+export const i18n = (locale: ValidLocale): Translation => TRANSLATIONS[locale]
+export type ValidLocale = keyof typeof TRANSLATIONS
diff --git a/quartz/i18n/locales/definition.ts b/quartz/i18n/locales/definition.ts
new file mode 100644
index 0000000000000..de607eb56fe00
--- /dev/null
+++ b/quartz/i18n/locales/definition.ts
@@ -0,0 +1,63 @@
+import { FullSlug } from "../../util/path"
+
+export interface Translation {
+  propertyDefaults: {
+    title: string
+    description: string
+  }
+  components: {
+    backlinks: {
+      title: string
+      noBacklinksFound: string
+    }
+    themeToggle: {
+      lightMode: string
+      darkMode: string
+    }
+    explorer: {
+      title: string
+    }
+    footer: {
+      createdWith: string
+    }
+    graph: {
+      title: string
+    }
+    recentNotes: {
+      title: string
+      seeRemainingMore: (variables: { remaining: number }) => string
+    }
+    transcludes: {
+      transcludeOf: (variables: { targetSlug: FullSlug }) => string
+      linkToOriginal: string
+    }
+    search: {
+      title: string
+      searchBarPlaceholder: string
+    }
+    tableOfContents: {
+      title: string
+    }
+  }
+  pages: {
+    rss: {
+      recentNotes: string
+      lastFewNotes: (variables: { count: number }) => string
+    }
+    error: {
+      title: string
+      notFound: string
+    }
+    folderContent: {
+      folder: string
+      itemsUnderFolder: (variables: { count: number }) => string
+    }
+    tagContent: {
+      tag: string
+      tagIndex: string
+      itemsUnderTag: (variables: { count: number }) => string
+      showingFirst: (variables: { count: number }) => string
+      totalTags: (variables: { count: number }) => string
+    }
+  }
+}
diff --git a/quartz/i18n/locales/en-US.ts b/quartz/i18n/locales/en-US.ts
new file mode 100644
index 0000000000000..6ba6d0e5d90e6
--- /dev/null
+++ b/quartz/i18n/locales/en-US.ts
@@ -0,0 +1,65 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Untitled",
+    description: "No description provided",
+  },
+  components: {
+    backlinks: {
+      title: "Backlinks",
+      noBacklinksFound: "No backlinks found",
+    },
+    themeToggle: {
+      lightMode: "Light mode",
+      darkMode: "Dark mode",
+    },
+    explorer: {
+      title: "Explorer",
+    },
+    footer: {
+      createdWith: "Created with",
+    },
+    graph: {
+      title: "Graph View",
+    },
+    recentNotes: {
+      title: "Recent Notes",
+      seeRemainingMore: ({ remaining }) => `See ${remaining} more →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Transclude of ${targetSlug}`,
+      linkToOriginal: "Link to original",
+    },
+    search: {
+      title: "Search",
+      searchBarPlaceholder: "Search for something",
+    },
+    tableOfContents: {
+      title: "Table of Contents",
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Recent notes",
+      lastFewNotes: ({ count }) => `Last ${count} notes`,
+    },
+    error: {
+      title: "Not Found",
+      notFound: "Either this page is private or doesn't exist.",
+    },
+    folderContent: {
+      folder: "Folder",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 item under this folder" : `${count} items under this folder.`,
+    },
+    tagContent: {
+      tag: "Tag",
+      tagIndex: "Tag Index",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 item with this tag" : `${count} items with this tag.`,
+      showingFirst: ({ count }) => `Showing first ${count} tags.`,
+      totalTags: ({ count }) => `Found ${count} total tags.`,
+    },
+  },
+} as const satisfies Translation
diff --git a/quartz/i18n/locales/en.json b/quartz/i18n/locales/en.json
deleted file mode 100644
index fc3cebbb6f735..0000000000000
--- a/quartz/i18n/locales/en.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
-  "404": "Either this page is private or doesn't exist.",
-  "backlinks": {
-    "backlinks": "Backlinks",
-    "noBacklinksFound": "No backlinks found"
-  },
-  "common": {
-    "item": "item"
-  },
-  "darkmode": {
-    "lightMode": "Light mode"
-  },
-  "folderContent": {
-    "underThisFolder": "under this folder"
-  },
-  "footer": {
-    "createdWith": "Created with"
-  },
-  "graph": {
-    "graphView": "Graph View"
-  },
-  "head": {
-    "noDescriptionProvided": "No description provided",
-    "untitled": "Untitled"
-  },
-  "recentNotes": {
-    "seeRemainingMore": "See {{remaining}} more"
-  },
-  "search": "Search",
-  "tableOfContent": "Table of Contents",
-  "tagContent": {
-    "showingFirst": "Showing first",
-    "totalTags": "total tags",
-    "withThisTag": "with this tag",
-    "found": "Found"
-  }
-}
diff --git a/quartz/i18n/locales/fr-FR.ts b/quartz/i18n/locales/fr-FR.ts
new file mode 100644
index 0000000000000..b30ff049f6181
--- /dev/null
+++ b/quartz/i18n/locales/fr-FR.ts
@@ -0,0 +1,65 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Sans titre",
+    description: "Aucune description fournie",
+  },
+  components: {
+    backlinks: {
+      title: "Liens retour",
+      noBacklinksFound: "Aucun lien retour trouvé",
+    },
+    themeToggle: {
+      lightMode: "Mode clair",
+      darkMode: "Mode sombre",
+    },
+    explorer: {
+      title: "Explorateur",
+    },
+    footer: {
+      createdWith: "Créé avec",
+    },
+    graph: {
+      title: "Vue Graphique",
+    },
+    recentNotes: {
+      title: "Notes Récentes",
+      seeRemainingMore: ({ remaining }) => `Voir ${remaining} de plus →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Transclusion de ${targetSlug}`,
+      linkToOriginal: "Lien vers l'original",
+    },
+    search: {
+      title: "Recherche",
+      searchBarPlaceholder: "Rechercher quelque chose",
+    },
+    tableOfContents: {
+      title: "Table des Matières",
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Notes récentes",
+      lastFewNotes: ({ count }) => `Les dernières ${count} notes`,
+    },
+    error: {
+      title: "Pas trouvé",
+      notFound: "Cette page est soit privée, soit elle n'existe pas.",
+    },
+    folderContent: {
+      folder: "Dossier",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 élément sous ce dossier" : `${count} éléments sous ce dossier.`,
+    },
+    tagContent: {
+      tag: "Étiquette",
+      tagIndex: "Index des étiquettes",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 élément avec cette étiquette" : `${count} éléments avec cette étiquette.`,
+      showingFirst: ({ count }) => `Affichage des premières ${count} étiquettes.`,
+      totalTags: ({ count }) => `Trouvé ${count} étiquettes au total.`,
+    },
+  },
+} as const satisfies Translation
diff --git a/quartz/i18n/locales/fr.json b/quartz/i18n/locales/fr.json
deleted file mode 100644
index 8b526b5429ce3..0000000000000
--- a/quartz/i18n/locales/fr.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "404": "Soit cette page est privée, soit elle n'existe pas.",
-  "backlinks": {
-    "backlinks": "Rétroliens",
-    "noBacklinksFound": "Aucun rétrolien trouvé"
-  },
-  "common": {
-    "item": "fichier"
-  },
-  "darkmode": {
-    "darkmode": "Thème sombre",
-    "lightMode": "Thème clair"
-  },
-  "folderContent": {
-    "underThisFolder": "dans ce dossier"
-  },
-  "footer": {
-    "createdWith": "Créé avec"
-  },
-  "graph": {
-    "graphView": "Vue Graphique"
-  },
-  "head": {
-    "noDescriptionProvided": "Aucune description n'a été fournie",
-    "untitled": "Sans titre"
-  },
-  "recentNotes": {
-    "seeRemainingMore": "Voir {{remaining}} plus"
-  },
-  "search": "Rechercher",
-  "tableOfContent": "Table des Matières",
-  "tagContent": {
-    "showingFirst": "Afficher en premier",
-    "totalTags": "tags totaux",
-    "withThisTag": "avec ce tag",
-    "found": "Trouvé"
-  }
-}
diff --git a/quartz/plugins/emitters/404.tsx b/quartz/plugins/emitters/404.tsx
index 58ae59a4b6d71..079adbcadbce0 100644
--- a/quartz/plugins/emitters/404.tsx
+++ b/quartz/plugins/emitters/404.tsx
@@ -8,6 +8,7 @@ import { sharedPageComponents } from "../../../quartz.layout"
 import { NotFound } from "../../components"
 import { defaultProcessedContent } from "../vfile"
 import { write } from "./helpers"
+import { i18n } from "../../i18n"
 
 export const NotFoundPage: QuartzEmitterPlugin = () => {
   const opts: FullPageLayout = {
@@ -33,11 +34,12 @@ export const NotFoundPage: QuartzEmitterPlugin = () => {
       const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
       const path = url.pathname as FullSlug
       const externalResources = pageResources(path, resources)
+      const notFound = i18n(cfg.locale).pages.error.title
       const [tree, vfile] = defaultProcessedContent({
         slug,
-        text: "Not Found",
-        description: "Not Found",
-        frontmatter: { title: "Not Found", tags: [] },
+        text: notFound,
+        description: notFound,
+        frontmatter: { title: notFound, tags: [] },
       })
       const componentData: QuartzComponentProps = {
         fileData: vfile.data,
@@ -51,7 +53,7 @@ export const NotFoundPage: QuartzEmitterPlugin = () => {
       return [
         await write({
           ctx,
-          content: renderPage(slug, componentData, opts, externalResources),
+          content: renderPage(cfg, slug, componentData, opts, externalResources),
           slug,
           ext: ".html",
         }),
diff --git a/quartz/plugins/emitters/contentIndex.ts b/quartz/plugins/emitters/contentIndex.ts
index 5a0bed914e742..1c86b71b8d815 100644
--- a/quartz/plugins/emitters/contentIndex.ts
+++ b/quartz/plugins/emitters/contentIndex.ts
@@ -6,6 +6,7 @@ import { FilePath, FullSlug, SimpleSlug, joinSegments, simplifySlug } from "../.
 import { QuartzEmitterPlugin } from "../types"
 import { toHtml } from "hast-util-to-html"
 import { write } from "./helpers"
+import { i18n } from "../../i18n"
 
 export type ContentIndex = Map<FullSlug, ContentDetails>
 export type ContentDetails = {
@@ -38,7 +39,7 @@ function generateSiteMap(cfg: GlobalConfiguration, idx: ContentIndex): string {
   const base = cfg.baseUrl ?? ""
   const createURLEntry = (slug: SimpleSlug, content: ContentDetails): string => `<url>
     <loc>https://${joinSegments(base, encodeURI(slug))}</loc>
-    <lastmod>${content.date?.toISOString()}</lastmod>
+    ${content.date && `<lastmod>${content.date.toISOString()}</lastmod>`}
   </url>`
   const urls = Array.from(idx)
     .map(([slug, content]) => createURLEntry(simplifySlug(slug), content))
@@ -78,7 +79,7 @@ function generateRSSFeed(cfg: GlobalConfiguration, idx: ContentIndex, limit?: nu
     <channel>
       <title>${escapeHTML(cfg.pageTitle)}</title>
       <link>https://${base}</link>
-      <description>${!!limit ? `Last ${limit} notes` : "Recent notes"} on ${escapeHTML(
+      <description>${!!limit ? i18n(cfg.locale).pages.rss.lastFewNotes({ count: limit }) : i18n(cfg.locale).pages.rss.recentNotes} on ${escapeHTML(
         cfg.pageTitle,
       )}</description>
       <generator>Quartz -- quartz.jzhao.xyz</generator>
diff --git a/quartz/plugins/emitters/contentPage.tsx b/quartz/plugins/emitters/contentPage.tsx
index f8e640473c50e..b11890b3208a4 100644
--- a/quartz/plugins/emitters/contentPage.tsx
+++ b/quartz/plugins/emitters/contentPage.tsx
@@ -49,7 +49,7 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
           allFiles,
         }
 
-        const content = renderPage(slug, componentData, opts, externalResources)
+        const content = renderPage(cfg, slug, componentData, opts, externalResources)
         const fp = await write({
           ctx,
           content,
diff --git a/quartz/plugins/emitters/folderPage.tsx b/quartz/plugins/emitters/folderPage.tsx
index 04a5a008643c4..35c360aab6256 100644
--- a/quartz/plugins/emitters/folderPage.tsx
+++ b/quartz/plugins/emitters/folderPage.tsx
@@ -18,6 +18,7 @@ import {
 import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.layout"
 import { FolderContent } from "../../components"
 import { write } from "./helpers"
+import { i18n } from "../../i18n"
 
 export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
   const opts: FullPageLayout = {
@@ -57,7 +58,10 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpt
           folder,
           defaultProcessedContent({
             slug: joinSegments(folder, "index") as FullSlug,
-            frontmatter: { title: `Folder: ${folder}`, tags: [] },
+            frontmatter: {
+              title: `${i18n(cfg.locale).pages.folderContent.folder}: ${folder}`,
+              tags: [],
+            },
           }),
         ]),
       )
@@ -82,7 +86,7 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpt
           allFiles,
         }
 
-        const content = renderPage(slug, componentData, opts, externalResources)
+        const content = renderPage(cfg, slug, componentData, opts, externalResources)
         const fp = await write({
           ctx,
           content,
diff --git a/quartz/plugins/emitters/tagPage.tsx b/quartz/plugins/emitters/tagPage.tsx
index 3e450f6a85fdd..2411c683729da 100644
--- a/quartz/plugins/emitters/tagPage.tsx
+++ b/quartz/plugins/emitters/tagPage.tsx
@@ -15,6 +15,7 @@ import {
 import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.layout"
 import { TagContent } from "../../components"
 import { write } from "./helpers"
+import { i18n } from "../../i18n"
 
 export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
   const opts: FullPageLayout = {
@@ -47,7 +48,10 @@ export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts)
 
       const tagDescriptions: Record<string, ProcessedContent> = Object.fromEntries(
         [...tags].map((tag) => {
-          const title = tag === "index" ? "Tag Index" : `Tag: #${tag}`
+          const title =
+            tag === "index"
+              ? i18n(cfg.locale).pages.tagContent.tagIndex
+              : `${i18n(cfg.locale).pages.tagContent.tag}: #${tag}`
           return [
             tag,
             defaultProcessedContent({
@@ -81,7 +85,7 @@ export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts)
           allFiles,
         }
 
-        const content = renderPage(slug, componentData, opts, externalResources)
+        const content = renderPage(cfg, slug, componentData, opts, externalResources)
         const fp = await write({
           ctx,
           content,
diff --git a/quartz/plugins/transformers/frontmatter.ts b/quartz/plugins/transformers/frontmatter.ts
index eae359e1e8518..9371df81eb3d4 100644
--- a/quartz/plugins/transformers/frontmatter.ts
+++ b/quartz/plugins/transformers/frontmatter.ts
@@ -5,6 +5,7 @@ import yaml from "js-yaml"
 import toml from "toml"
 import { slugTag } from "../../util/path"
 import { QuartzPluginData } from "../vfile"
+import { i18n } from "../../i18n"
 
 export interface Options {
   delims: string | string[]
@@ -43,7 +44,7 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
   const opts = { ...defaultOptions, ...userOpts }
   return {
     name: "FrontMatter",
-    markdownPlugins() {
+    markdownPlugins({ cfg }) {
       return [
         [remarkFrontmatter, ["yaml", "toml"]],
         () => {
@@ -59,7 +60,7 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
             if (data.title) {
               data.title = data.title.toString()
             } else if (data.title === null || data.title === undefined) {
-              data.title = file.stem ?? "Untitled"
+              data.title = file.stem ?? i18n(cfg.configuration.locale).propertyDefaults.title
             }
 
             const tags = coerceToArray(coalesceAliases(data, ["tags", "tag"]))
diff --git a/quartz/plugins/transformers/toc.ts b/quartz/plugins/transformers/toc.ts
index e831f9452afb0..4c31d2062eecc 100644
--- a/quartz/plugins/transformers/toc.ts
+++ b/quartz/plugins/transformers/toc.ts
@@ -3,7 +3,6 @@ import { Root } from "mdast"
 import { visit } from "unist-util-visit"
 import { toString } from "mdast-util-to-string"
 import Slugger from "github-slugger"
-import { wikilinkRegex } from "./ofm"
 
 export interface Options {
   maxDepth: 1 | 2 | 3 | 4 | 5 | 6
@@ -25,7 +24,6 @@ interface TocEntry {
   slug: string // this is just the anchor (#some-slug), not the canonical slug
 }
 
-const regexMdLinks = new RegExp(/\[([^\[]+)\](\(.*\))/, "g")
 const slugAnchor = new Slugger()
 export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefined> = (
   userOpts,
@@ -44,16 +42,7 @@ export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefin
               let highestDepth: number = opts.maxDepth
               visit(tree, "heading", (node) => {
                 if (node.depth <= opts.maxDepth) {
-                  let text = toString(node)
-
-                  // strip link formatting from toc entries
-                  text = text.replace(wikilinkRegex, (_, rawFp, __, rawAlias) => {
-                    const fp = rawFp?.trim() ?? ""
-                    const alias = rawAlias?.slice(1).trim()
-                    return alias ?? fp
-                  })
-                  text = text.replace(regexMdLinks, "$1")
-
+                  const text = toString(node)
                   highestDepth = Math.min(highestDepth, node.depth)
                   toc.push({
                     depth: node.depth,
diff --git a/quartz/util/lang.ts b/quartz/util/lang.ts
index 31e8c02c1abc5..6fb046996da25 100644
--- a/quartz/util/lang.ts
+++ b/quartz/util/lang.ts
@@ -1,11 +1,3 @@
-export function pluralize(count: number, s: string): string {
-  if (count === 1) {
-    return `1 ${s}`
-  } else {
-    return `${count} ${s}s`
-  }
-}
-
 export function capitalize(s: string): string {
   return s.substring(0, 1).toUpperCase() + s.substring(1)
 }

From 06ee73e006fedef64d326aae8909bcc4ca5b243a Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 4 Feb 2024 21:22:57 -0800
Subject: [PATCH 037/115] fix(path): properly path encode &

---
 quartz/util/path.test.ts | 3 ++-
 quartz/util/path.ts      | 7 ++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/quartz/util/path.test.ts b/quartz/util/path.test.ts
index 6a8aa3d1d4556..7e9c4c84a32ac 100644
--- a/quartz/util/path.test.ts
+++ b/quartz/util/path.test.ts
@@ -106,8 +106,9 @@ describe("transforms", () => {
         ["test.mp4", "test.mp4"],
         ["note with spaces.md", "note-with-spaces"],
         ["notes.with.dots.md", "notes.with.dots"],
-        ["test/special chars?.md", "test/special-chars-q"],
+        ["test/special chars?.md", "test/special-chars"],
         ["test/special chars #3.md", "test/special-chars-3"],
+        ["cool/what about r&d?.md", "cool/what-about-r-and-d"],
       ],
       path.slugifyFilePath,
       path.isFilePath,
diff --git a/quartz/util/path.ts b/quartz/util/path.ts
index 07f25a59d84de..5cd79ba5f0e4a 100644
--- a/quartz/util/path.ts
+++ b/quartz/util/path.ts
@@ -51,7 +51,12 @@ function sluggify(s: string): string {
   return s
     .split("/")
     .map((segment) =>
-      segment.replace(/\s/g, "-").replace(/%/g, "-percent").replace(/\?/g, "-q").replace(/#/g, ""),
+      segment
+        .replace(/\s/g, "-")
+        .replace(/&/g, "-and-")
+        .replace(/%/g, "-percent")
+        .replace(/\?/g, "")
+        .replace(/#/g, ""),
     )
     .join("/") // always use / as sep
     .replace(/\/$/, "")

From c891ad8ff5824d4a14ceecf2398b6728028b0a0c Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 4 Feb 2024 21:23:01 -0800
Subject: [PATCH 038/115] pkg: bump to 4.2.2

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 66a772cde5e47..acd4772de59e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@jackyzha0/quartz",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@jackyzha0/quartz",
-      "version": "4.2.1",
+      "version": "4.2.2",
       "license": "MIT",
       "dependencies": {
         "@clack/prompts": "^0.7.0",
diff --git a/package.json b/package.json
index d9f0f7bf24a70..05c6a4506902d 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@jackyzha0/quartz",
   "description": "🌱 publish your digital garden and notes as a website",
   "private": true,
-  "version": "4.2.1",
+  "version": "4.2.2",
   "type": "module",
   "author": "jackyzha0 <j.zhao2k19@gmail.com>",
   "license": "MIT",

From 90725688a7b7dfd042268267b11fd4002008499b Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Mon, 5 Feb 2024 00:52:24 -0500
Subject: [PATCH 039/115] style(search): increase width on mobile view (#796)

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/components/styles/search.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 3ad774ed39259..d25d0f80d4d98 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -59,6 +59,10 @@
       margin-left: auto;
       margin-right: auto;
 
+      @media all and (max-width: $fullPageWidth) {
+        width: 90%;
+      }
+
       & > * {
         width: 100%;
         border-radius: 7px;

From e58c217de11680cb09fa29ccd5f1493bcb77a60a Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Mon, 5 Feb 2024 01:19:25 -0500
Subject: [PATCH 040/115] feat: support checkbox (closes #646) (#799)

* feat: support checkbox

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: apply review from jacky

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/components/scripts/checkbox.inline.ts | 23 +++++++++++++++
 quartz/plugins/transformers/ofm.ts           | 30 ++++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 quartz/components/scripts/checkbox.inline.ts

diff --git a/quartz/components/scripts/checkbox.inline.ts b/quartz/components/scripts/checkbox.inline.ts
new file mode 100644
index 0000000000000..50ab0425a619e
--- /dev/null
+++ b/quartz/components/scripts/checkbox.inline.ts
@@ -0,0 +1,23 @@
+import { getFullSlug } from "../../util/path"
+
+const checkboxId = (index: number) => `${getFullSlug(window)}-checkbox-${index}`
+
+document.addEventListener("nav", () => {
+  const checkboxes = document.querySelectorAll(
+    "input.checkbox-toggle",
+  ) as NodeListOf<HTMLInputElement>
+  checkboxes.forEach((el, index) => {
+    const elId = checkboxId(index)
+
+    const switchState = (e: Event) => {
+      const newCheckboxState = (e.target as HTMLInputElement)?.checked ? "true" : "false"
+      localStorage.setItem(elId, newCheckboxState)
+    }
+
+    el.addEventListener("change", switchState)
+    window.addCleanup(() => el.removeEventListener("change", switchState))
+    if (localStorage.getItem(elId) === "true") {
+      el.checked = true
+    }
+  })
+})
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 18ff6b438aa02..908c23d0ac70f 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -9,6 +9,8 @@ import path from "path"
 import { JSResource } from "../../util/resources"
 // @ts-ignore
 import calloutScript from "../../components/scripts/callout.inline.ts"
+// @ts-ignore
+import checkboxScript from "../../components/scripts/checkbox.inline.ts"
 import { FilePath, pathToRoot, slugTag, slugifyFilePath } from "../../util/path"
 import { toHast } from "mdast-util-to-hast"
 import { toHtml } from "hast-util-to-html"
@@ -28,6 +30,7 @@ export interface Options {
   enableInHtmlEmbed: boolean
   enableYouTubeEmbed: boolean
   enableVideoEmbed: boolean
+  enableCheckbox: boolean
 }
 
 const defaultOptions: Options = {
@@ -42,6 +45,7 @@ const defaultOptions: Options = {
   enableInHtmlEmbed: false,
   enableYouTubeEmbed: true,
   enableVideoEmbed: true,
+  enableCheckbox: false,
 }
 
 const calloutMapping = {
@@ -554,11 +558,37 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
         })
       }
 
+      if (opts.enableCheckbox) {
+        plugins.push(() => {
+          return (tree: HtmlRoot, _file) => {
+            visit(tree, "element", (node) => {
+              if (node.tagName === "input" && node.properties.type === "checkbox") {
+                const isChecked = node.properties?.checked ?? false
+                node.properties = {
+                  type: "checkbox",
+                  disabled: false,
+                  checked: isChecked,
+                  class: "checkbox-toggle",
+                }
+              }
+            })
+          }
+        })
+      }
+
       return plugins
     },
     externalResources() {
       const js: JSResource[] = []
 
+      if (opts.enableCheckbox) {
+        js.push({
+          script: checkboxScript,
+          loadTime: "afterDOMReady",
+          contentType: "inline",
+        })
+      }
+
       if (opts.callouts) {
         js.push({
           script: calloutScript,

From b061b1b6a229e042a2a0c08e5a4d8ed016f46a1e Mon Sep 17 00:00:00 2001
From: Mats Fangohr <83273529+MatsFangohr@users.noreply.github.com>
Date: Mon, 5 Feb 2024 15:59:58 +0100
Subject: [PATCH 041/115] feat(i18n): German translation (#808)

---
 quartz/i18n/index.ts         |  2 ++
 quartz/i18n/locales/de-DE.ts | 65 ++++++++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 quartz/i18n/locales/de-DE.ts

diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
index 47645c539dab3..6ae2a16f027e4 100644
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@@ -1,10 +1,12 @@
 import { Translation } from "./locales/definition"
 import en from "./locales/en-US"
 import fr from "./locales/fr-FR"
+import de from "./locales/de-DE"
 
 export const TRANSLATIONS = {
   "en-US": en,
   "fr-FR": fr,
+  "de-DE": de,
 } as const
 
 export const i18n = (locale: ValidLocale): Translation => TRANSLATIONS[locale]
diff --git a/quartz/i18n/locales/de-DE.ts b/quartz/i18n/locales/de-DE.ts
new file mode 100644
index 0000000000000..c6531bef4bd6f
--- /dev/null
+++ b/quartz/i18n/locales/de-DE.ts
@@ -0,0 +1,65 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Unbenannt",
+    description: "Keine Beschreibung angegeben",
+  },
+  components: {
+    backlinks: {
+      title: "Backlinks",
+      noBacklinksFound: "Keine Backlinks gefunden",
+    },
+    themeToggle: {
+      lightMode: "Light Mode",
+      darkMode: "Dark Mode",
+    },
+    explorer: {
+      title: "Explorer",
+    },
+    footer: {
+      createdWith: "Erstellt mit",
+    },
+    graph: {
+      title: "Graphansicht",
+    },
+    recentNotes: {
+      title: "Zuletzt bearbeitete Seiten",
+      seeRemainingMore: ({ remaining }) => `${remaining} weitere ansehen →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Transklusion von ${targetSlug}`,
+      linkToOriginal: "Link zum Original",
+    },
+    search: {
+      title: "Suche",
+      searchBarPlaceholder: "Suche nach etwas",
+    },
+    tableOfContents: {
+      title: "Inhaltsverzeichnis",
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Zuletzt bearbeitete Seiten",
+      lastFewNotes: ({ count }) => `Letzte ${count} Seiten`,
+    },
+    error: {
+      title: "Nicht gefunden",
+      notFound: "Diese Seite ist entweder nicht öffentlich oder existiert nicht.",
+    },
+    folderContent: {
+      folder: "Ordner",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 Datei in diesem Ordner" : `${count} Dateien in diesem Ordner.`,
+    },
+    tagContent: {
+      tag: "Tag",
+      tagIndex: "Tag-Übersicht",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 Datei mit diesem Tag" : `${count} Dateien mit diesem Tag.`,
+      showingFirst: ({ count }) => `Die ersten ${count} Tags werden angezeigt.`,
+      totalTags: ({ count }) => `${count} Tags insgesamt.`,
+    },
+  },
+} as const satisfies Translation

From ba836dd3e0cda5df23f6d34539809d36805d230e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=BE=E6=B5=A6=20=E7=9F=A5=E4=B9=9F=20Matsuura=20Tomoy?=
 =?UTF-8?q?a?= <me@matsuuratomoya.com>
Date: Tue, 6 Feb 2024 01:58:31 +0900
Subject: [PATCH 042/115] feat(i18n): Add Japanese to i18n (#809)

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
---
 quartz/i18n/index.ts         |  2 ++
 quartz/i18n/locales/ja-JP.ts | 63 ++++++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 quartz/i18n/locales/ja-JP.ts

diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
index 6ae2a16f027e4..25aa5fba2e8c8 100644
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@@ -1,11 +1,13 @@
 import { Translation } from "./locales/definition"
 import en from "./locales/en-US"
 import fr from "./locales/fr-FR"
+import ja from "./locales/ja-JP"
 import de from "./locales/de-DE"
 
 export const TRANSLATIONS = {
   "en-US": en,
   "fr-FR": fr,
+  "ja-JP": ja,
   "de-DE": de,
 } as const
 
diff --git a/quartz/i18n/locales/ja-JP.ts b/quartz/i18n/locales/ja-JP.ts
new file mode 100644
index 0000000000000..a886d84f8485b
--- /dev/null
+++ b/quartz/i18n/locales/ja-JP.ts
@@ -0,0 +1,63 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "無題",
+    description: "説明なし",
+  },
+  components: {
+    backlinks: {
+      title: "バックリンク",
+      noBacklinksFound: "バックリンクはありません",
+    },
+    themeToggle: {
+      lightMode: "ライトモード",
+      darkMode: "ダークモード",
+    },
+    explorer: {
+      title: "エクスプローラー",
+    },
+    footer: {
+      createdWith: "作成",
+    },
+    graph: {
+      title: "グラフビュー",
+    },
+    recentNotes: {
+      title: "最近の記事",
+      seeRemainingMore: ({ remaining }) => `さらに${remaining}件 →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `${targetSlug}のまとめ`,
+      linkToOriginal: "元記事へのリンク",
+    },
+    search: {
+      title: "検索",
+      searchBarPlaceholder: "検索ワードを入力",
+    },
+    tableOfContents: {
+      title: "目次",
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "最近の記事",
+      lastFewNotes: ({ count }) => `最新の${count}件`,
+    },
+    error: {
+      title: "Not Found",
+      notFound: "ページが存在しないか、非公開設定になっています。",
+    },
+    folderContent: {
+      folder: "フォルダ",
+      itemsUnderFolder: ({ count }) => `${count}件のページ`,
+    },
+    tagContent: {
+      tag: "タグ",
+      tagIndex: "タグ一覧",
+      itemsUnderTag: ({ count }) => `${count}件のページ`,
+      showingFirst: ({ count }) => `のうち最初の${count}件を表示しています`,
+      totalTags: ({ count }) => `全${count}個のタグを表示中`,
+    },
+  },
+} as const satisfies Translation

From b169a5880fd346d5c23154eba50f29b2c01f0eb9 Mon Sep 17 00:00:00 2001
From: Emile Bangma <ewjbangma@hotmail.com>
Date: Mon, 5 Feb 2024 22:12:54 +0100
Subject: [PATCH 043/115] feat(i18n): Add Dutch to i18n (#813)

* Create nl-NL.ts

* Update index.ts

* Update nl-NL.ts
---
 quartz/i18n/index.ts         |  2 ++
 quartz/i18n/locales/nl-NL.ts | 66 ++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 quartz/i18n/locales/nl-NL.ts

diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
index 25aa5fba2e8c8..69a18c9704233 100644
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@@ -3,12 +3,14 @@ import en from "./locales/en-US"
 import fr from "./locales/fr-FR"
 import ja from "./locales/ja-JP"
 import de from "./locales/de-DE"
+import nl from "./locales/nl-NL"
 
 export const TRANSLATIONS = {
   "en-US": en,
   "fr-FR": fr,
   "ja-JP": ja,
   "de-DE": de,
+  "nl-NL": nl,
 } as const
 
 export const i18n = (locale: ValidLocale): Translation => TRANSLATIONS[locale]
diff --git a/quartz/i18n/locales/nl-NL.ts b/quartz/i18n/locales/nl-NL.ts
new file mode 100644
index 0000000000000..5426a1e1f5e66
--- /dev/null
+++ b/quartz/i18n/locales/nl-NL.ts
@@ -0,0 +1,66 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Naamloos",
+    description: "Geen beschrijving gegeven.",
+  },
+  components: {
+    backlinks: {
+      title: "Backlinks",
+      noBacklinksFound: "Geen backlinks gevonden",
+    },
+    themeToggle: {
+      lightMode: "Lichte modus",
+      darkMode: "Donkere modus",
+    },
+    explorer: {
+      title: "Verkenner",
+    },
+    footer: {
+      createdWith: "Gemaakt met",
+    },
+    graph: {
+      title: "Grafiekweergave",
+    },
+    recentNotes: {
+      title: "Recente notities",
+      seeRemainingMore: ({ remaining }) => `Zie ${remaining} meer →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Invoeging van ${targetSlug}`,
+      linkToOriginal: "Link naar origineel",
+    },
+    search: {
+      title: "Zoeken",
+      searchBarPlaceholder: "Doorzoek de website",
+    },
+    tableOfContents: {
+      title: "Inhoudsopgave",
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Recente notities",
+      lastFewNotes: ({ count }) => `Laatste ${count} notities`,
+    },
+    error: {
+      title: "Niet gevonden",
+      notFound: "Deze pagina is niet zichtbaar of bestaat niet.",
+    },
+    folderContent: {
+      folder: "Map",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 item in deze map" : `${count} items in deze map.`,
+    },
+    tagContent: {
+      tag: "Label",
+      tagIndex: "Label-index",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 item met dit label." : `${count} items met dit label.`,
+      showingFirst: ({ count }) =>
+        count === 1 ? "Eerste label tonen." : `Eerste ${count} labels tonen.`,
+      totalTags: ({ count }) => `${count} labels gevonden.`,
+    },
+  },
+} as const satisfies Translation

From 479cbb6d9157244a8035247ab9fbd3f66dbd2e46 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 5 Feb 2024 16:19:34 -0500
Subject: [PATCH 044/115] chore(deps): bump @napi-rs/simple-git from 0.1.14 to
 0.1.16 (#810)

Bumps [@napi-rs/simple-git](https://github.com/Brooooooklyn/simple-git) from 0.1.14 to 0.1.16.
- [Release notes](https://github.com/Brooooooklyn/simple-git/releases)
- [Commits](https://github.com/Brooooooklyn/simple-git/compare/v0.1.14...v0.1.16)

---
updated-dependencies:
- dependency-name: "@napi-rs/simple-git"
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 96 +++++++++++++++++++++++------------------------
 package.json      |  2 +-
 2 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index acd4772de59e8..f7979b6da905c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "@clack/prompts": "^0.7.0",
         "@floating-ui/dom": "^1.6.1",
-        "@napi-rs/simple-git": "0.1.14",
+        "@napi-rs/simple-git": "0.1.16",
         "async-mutex": "^0.4.1",
         "chalk": "^5.3.0",
         "chokidar": "^3.5.3",
@@ -516,30 +516,30 @@
       }
     },
     "node_modules/@napi-rs/simple-git": {
-      "version": "0.1.14",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git/-/simple-git-0.1.14.tgz",
-      "integrity": "sha512-2cDnsT0nKpQ7yg5u/Zf8/ibp9YFIKhpcfMAGATYuqdJoHuBo6P6UArZ0RDOOtfFC5b9FXuYcGw2ApbM4eWdnbQ==",
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git/-/simple-git-0.1.16.tgz",
+      "integrity": "sha512-C5wRPw9waqL2jk3jEDeJv+f7ScuO3N0a39HVdyFLkwKxHH4Sya4ZbzZsu2JLi6eEqe7RuHipHL6mC7B2OfYZZw==",
       "engines": {
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@napi-rs/simple-git-android-arm-eabi": "0.1.14",
-        "@napi-rs/simple-git-android-arm64": "0.1.14",
-        "@napi-rs/simple-git-darwin-arm64": "0.1.14",
-        "@napi-rs/simple-git-darwin-x64": "0.1.14",
-        "@napi-rs/simple-git-linux-arm-gnueabihf": "0.1.14",
-        "@napi-rs/simple-git-linux-arm64-gnu": "0.1.14",
-        "@napi-rs/simple-git-linux-arm64-musl": "0.1.14",
-        "@napi-rs/simple-git-linux-x64-gnu": "0.1.14",
-        "@napi-rs/simple-git-linux-x64-musl": "0.1.14",
-        "@napi-rs/simple-git-win32-arm64-msvc": "0.1.14",
-        "@napi-rs/simple-git-win32-x64-msvc": "0.1.14"
+        "@napi-rs/simple-git-android-arm-eabi": "0.1.16",
+        "@napi-rs/simple-git-android-arm64": "0.1.16",
+        "@napi-rs/simple-git-darwin-arm64": "0.1.16",
+        "@napi-rs/simple-git-darwin-x64": "0.1.16",
+        "@napi-rs/simple-git-linux-arm-gnueabihf": "0.1.16",
+        "@napi-rs/simple-git-linux-arm64-gnu": "0.1.16",
+        "@napi-rs/simple-git-linux-arm64-musl": "0.1.16",
+        "@napi-rs/simple-git-linux-x64-gnu": "0.1.16",
+        "@napi-rs/simple-git-linux-x64-musl": "0.1.16",
+        "@napi-rs/simple-git-win32-arm64-msvc": "0.1.16",
+        "@napi-rs/simple-git-win32-x64-msvc": "0.1.16"
       }
     },
     "node_modules/@napi-rs/simple-git-android-arm-eabi": {
-      "version": "0.1.14",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-android-arm-eabi/-/simple-git-android-arm-eabi-0.1.14.tgz",
-      "integrity": "sha512-fAJ/Hxc9DhtSHOcB3dPCRW1YcVsqAnbNoOOnHir4aDCtqTP64HrFa7A/675v3vQZpI0u3fXHRcYqW8NF0O/zcg==",
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-android-arm-eabi/-/simple-git-android-arm-eabi-0.1.16.tgz",
+      "integrity": "sha512-dbrCL0Pl5KZG7x7tXdtVsA5CO6At5ohDX3myf5xIYn9kN4jDFxsocl8bNt6Vb/hZQoJd8fI+k5VlJt+rFhbdVw==",
       "cpu": [
         "arm"
       ],
@@ -552,9 +552,9 @@
       }
     },
     "node_modules/@napi-rs/simple-git-android-arm64": {
-      "version": "0.1.14",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-android-arm64/-/simple-git-android-arm64-0.1.14.tgz",
-      "integrity": "sha512-dav730MRAR142DoyNDafuwKXcUCYwlbxxxxOarDph7bbN0mZZnKHOQohvRCD/Uz4aJLaj6khCavXSjLDWArEUg==",
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-android-arm64/-/simple-git-android-arm64-0.1.16.tgz",
+      "integrity": "sha512-xYz+TW5J09iK8SuTAKK2D5MMIsBUXVSs8nYp7HcMi8q6FCRO7yJj96YfP9PvKsc/k64hOyqGmL5DhCzY9Cu1FQ==",
       "cpu": [
         "arm64"
       ],
@@ -567,9 +567,9 @@
       }
     },
     "node_modules/@napi-rs/simple-git-darwin-arm64": {
-      "version": "0.1.14",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-darwin-arm64/-/simple-git-darwin-arm64-0.1.14.tgz",
-      "integrity": "sha512-f6+DqRnI+vFvnsAyw66mWhwl0vw1TOieHV07hvKbg4PU5j+RBI+lVqwY2L+IEAxDFlPirTWKKvGY1Lr7M/yi/A==",
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-darwin-arm64/-/simple-git-darwin-arm64-0.1.16.tgz",
+      "integrity": "sha512-XfgsYqxhUE022MJobeiX563TJqyQyX4FmYCnqrtJwAfivESVeAJiH6bQIum8dDEYMHXCsG7nL8Ok0Dp8k2m42g==",
       "cpu": [
         "arm64"
       ],
@@ -582,9 +582,9 @@
       }
     },
     "node_modules/@napi-rs/simple-git-darwin-x64": {
-      "version": "0.1.14",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-darwin-x64/-/simple-git-darwin-x64-0.1.14.tgz",
-      "integrity": "sha512-x/EnwJdDWJAFay8TQt09byJoBlVZhPEaTAPmRR0fUPzWTjrr28bOy8UW1ysszd9ylBxlyIhuWjOHMHu9CBigTQ==",
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-darwin-x64/-/simple-git-darwin-x64-0.1.16.tgz",
+      "integrity": "sha512-tkEVBhD6vgRCbeWsaAQqM3bTfpIVGeitamPPRVSbsq8qgzJ5Dx6ZedH27R7KSsA/uao7mZ3dsrNLXbu1Wy5MzA==",
       "cpu": [
         "x64"
       ],
@@ -597,9 +597,9 @@
       }
     },
     "node_modules/@napi-rs/simple-git-linux-arm-gnueabihf": {
-      "version": "0.1.14",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm-gnueabihf/-/simple-git-linux-arm-gnueabihf-0.1.14.tgz",
-      "integrity": "sha512-k0JZaXBl031gP5VOnoMa1I3lCHlBG7QvtunX5rxnRjx2kZ+JgUyT12s/qle/4xkJ0MnmfKTeiD7hs4Cc4Z3Tzw==",
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm-gnueabihf/-/simple-git-linux-arm-gnueabihf-0.1.16.tgz",
+      "integrity": "sha512-R6VAyNnp/yRaT7DV1Ao3r67SqTWDa+fNq2LrNy0Z8gXk2wB9ZKlrxFtLPE1WSpWknWtyRDLpRlsorh7Evk7+7w==",
       "cpu": [
         "arm"
       ],
@@ -612,9 +612,9 @@
       }
     },
     "node_modules/@napi-rs/simple-git-linux-arm64-gnu": {
-      "version": "0.1.14",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm64-gnu/-/simple-git-linux-arm64-gnu-0.1.14.tgz",
-      "integrity": "sha512-CsmKP6tSIxau10ZKxV1Q1kem2QcJ/Qlov7pxp1Q7kMErcouW0H6vliVniewicaXRVDYV9wK18iD2t5GoJttwlA==",
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm64-gnu/-/simple-git-linux-arm64-gnu-0.1.16.tgz",
+      "integrity": "sha512-LAGI0opFKw/HBMCV2qIBK3uWSEW9h4xd2ireZKLJy8DBPymX6NrWIamuxYNyCuACnFdPRxR4LaRFy4J5ZwuMdw==",
       "cpu": [
         "arm64"
       ],
@@ -627,9 +627,9 @@
       }
     },
     "node_modules/@napi-rs/simple-git-linux-arm64-musl": {
-      "version": "0.1.14",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm64-musl/-/simple-git-linux-arm64-musl-0.1.14.tgz",
-      "integrity": "sha512-krfEckZQ3myoHwmGmqY0aHBnqAzzV66+jFNLQEKaVMSGsXA2P+UcGo0coGzmB13rFRWC2eZpZRNB3MrfrStHkw==",
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-arm64-musl/-/simple-git-linux-arm64-musl-0.1.16.tgz",
+      "integrity": "sha512-I57Ph0F0Yn2KW93ep+V1EzKhACqX0x49vvSiapqIsdDA2PifdEWLc1LJarBolmK7NKoPqKmf6lAKKO9lhiZzkg==",
       "cpu": [
         "arm64"
       ],
@@ -642,9 +642,9 @@
       }
     },
     "node_modules/@napi-rs/simple-git-linux-x64-gnu": {
-      "version": "0.1.14",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-x64-gnu/-/simple-git-linux-x64-gnu-0.1.14.tgz",
-      "integrity": "sha512-4T2Q2QdO6t3OawkwdVmdqLz2EH8lfAw2cMT/zdjfTMfhNKjJgSg3kTgRnu/tf8TLCb+wu80fFvafwE0laB2VTQ==",
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-x64-gnu/-/simple-git-linux-x64-gnu-0.1.16.tgz",
+      "integrity": "sha512-AZYYFY2V7hlcQASPEOWyOa3e1skzTct9QPzz0LiDM3f/hCFY/wBaU2M6NC5iG3d2Kr38heuyFS/+JqxLm5WaKA==",
       "cpu": [
         "x64"
       ],
@@ -657,9 +657,9 @@
       }
     },
     "node_modules/@napi-rs/simple-git-linux-x64-musl": {
-      "version": "0.1.14",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-x64-musl/-/simple-git-linux-x64-musl-0.1.14.tgz",
-      "integrity": "sha512-RaTGW8u+RXJbfRF4QN2Dcr5r5DrFh4wLjOvFeOy7sGX3Q9m3IKuw5AjRxTJqIw6xD/AAPKKNzOvPjrIF7728Lw==",
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-linux-x64-musl/-/simple-git-linux-x64-musl-0.1.16.tgz",
+      "integrity": "sha512-9TyMcYSBJwjT8jwjY9m24BZbu7ozyWTjsmYBYNtK3B0Um1Ov6jthSNneLVvouQ6x+k3Ow+00TiFh6bvmT00r8g==",
       "cpu": [
         "x64"
       ],
@@ -672,9 +672,9 @@
       }
     },
     "node_modules/@napi-rs/simple-git-win32-arm64-msvc": {
-      "version": "0.1.14",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-win32-arm64-msvc/-/simple-git-win32-arm64-msvc-0.1.14.tgz",
-      "integrity": "sha512-kb9bKG9t79HJMuRMqbUJFLfWRf952O2Ea4VFwoRA2d/Uwtowm85Ol3JV9E6oeurguRLqdMLrUKyduCW6Hc9Jsg==",
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-win32-arm64-msvc/-/simple-git-win32-arm64-msvc-0.1.16.tgz",
+      "integrity": "sha512-uslJ1WuAHCYJWui6xjsyT47SjX6KOHDtClmNO8hqKz1pmDSNY7AjyUY8HxvD1lK9bDnWwc4JYhikS9cxCqHybw==",
       "cpu": [
         "arm64"
       ],
@@ -687,9 +687,9 @@
       }
     },
     "node_modules/@napi-rs/simple-git-win32-x64-msvc": {
-      "version": "0.1.14",
-      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-win32-x64-msvc/-/simple-git-win32-x64-msvc-0.1.14.tgz",
-      "integrity": "sha512-3835xy0e2gOaZ3SPt1pINBFSBBL3dOx3cChyAzQU0TnMU4Ye/YOh1qa5pO7BOJlCSnOh7iWt782blxCT0HH61w==",
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@napi-rs/simple-git-win32-x64-msvc/-/simple-git-win32-x64-msvc-0.1.16.tgz",
+      "integrity": "sha512-SoEaVeCZCDF1MP+M9bMSXsZWgEjk4On9GWADO5JOulvzR1bKjk0s9PMHwe/YztR9F0sJzrCxwtvBZowhSJsQPg==",
       "cpu": [
         "x64"
       ],
diff --git a/package.json b/package.json
index 05c6a4506902d..6ca683af1530d 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
   "dependencies": {
     "@clack/prompts": "^0.7.0",
     "@floating-ui/dom": "^1.6.1",
-    "@napi-rs/simple-git": "0.1.14",
+    "@napi-rs/simple-git": "0.1.16",
     "async-mutex": "^0.4.1",
     "chalk": "^5.3.0",
     "chokidar": "^3.5.3",

From 19fc53854fb179a49b4f54f3d378ad3a643395b3 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 5 Feb 2024 16:19:49 -0500
Subject: [PATCH 045/115] chore(deps-dev): bump @types/node from 20.11.14 to
 20.11.16 (#811)

Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.11.14 to 20.11.16.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

---
updated-dependencies:
- dependency-name: "@types/node"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f7979b6da905c..1b6a4e0331fb3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -73,7 +73,7 @@
         "@types/d3": "^7.4.3",
         "@types/hast": "^3.0.4",
         "@types/js-yaml": "^4.0.9",
-        "@types/node": "^20.11.14",
+        "@types/node": "^20.11.16",
         "@types/pretty-time": "^1.1.5",
         "@types/source-map-support": "^0.5.10",
         "@types/ws": "^8.5.10",
@@ -1088,9 +1088,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "20.11.14",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.14.tgz",
-      "integrity": "sha512-w3yWCcwULefjP9DmDDsgUskrMoOy5Z8MiwKHr1FvqGPtx7CvJzQvxD7eKpxNtklQxLruxSXWddyeRtyud0RcXQ==",
+      "version": "20.11.16",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.16.tgz",
+      "integrity": "sha512-gKb0enTmRCzXSSUJDq6/sPcqrfCv2mkkG6Jt/clpn5eiCbKTY+SgZUxo+p8ZKMof5dCp9vHQUAB7wOUTod22wQ==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
diff --git a/package.json b/package.json
index 6ca683af1530d..c51a9ed5b5cea 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "@types/d3": "^7.4.3",
     "@types/hast": "^3.0.4",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^20.11.14",
+    "@types/node": "^20.11.16",
     "@types/pretty-time": "^1.1.5",
     "@types/source-map-support": "^0.5.10",
     "@types/ws": "^8.5.10",

From 2b9659a1c228c96070f57dc84b89e5e14245fc16 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 5 Feb 2024 14:19:21 -0800
Subject: [PATCH 046/115] fix(i18n): add default locale

---
 quartz/i18n/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
index 69a18c9704233..9e14ffeea52d8 100644
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@@ -13,5 +13,5 @@ export const TRANSLATIONS = {
   "nl-NL": nl,
 } as const
 
-export const i18n = (locale: ValidLocale): Translation => TRANSLATIONS[locale]
+export const i18n = (locale: ValidLocale): Translation => TRANSLATIONS[locale ?? "en-US"]
 export type ValidLocale = keyof typeof TRANSLATIONS

From bec726b666ca0051bb14eb62926c57fe2d98a70e Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 5 Feb 2024 16:40:39 -0800
Subject: [PATCH 047/115] fix(i18n): forgot a string

---
 quartz/components/renderPage.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index fa8305d748e76..1ed05a704685b 100644
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -104,7 +104,9 @@ export function renderPage(
                 type: "element",
                 tagName: "a",
                 properties: { href: inner.properties?.href, class: ["internal"] },
-                children: [{ type: "text", value: `Link to original` }],
+                children: [
+                  { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
+                ],
               },
             ]
           }

From 34334eabed151cf5fa881d6b34f75107a2d3871e Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 5 Feb 2024 20:36:31 -0800
Subject: [PATCH 048/115] perf: don't load mermaid if its not on the page

---
 quartz/plugins/transformers/ofm.ts | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 908c23d0ac70f..f8a28c486b72c 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -600,17 +600,22 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
       if (opts.mermaid) {
         js.push({
           script: `
-          import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
-          const darkMode = document.documentElement.getAttribute('saved-theme') === 'dark'
-          mermaid.initialize({
-            startOnLoad: false,
-            securityLevel: 'loose',
-            theme: darkMode ? 'dark' : 'default'
-          });
+          let mermaidImport = undefined
           document.addEventListener('nav', async () => {
-            await mermaid.run({
-              querySelector: '.mermaid'
-            })
+            if (document.querySelector("code.mermaid")) {
+              mermaidImport ||= await import('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs')
+              const mermaid = mermaidImport.default
+              const darkMode = document.documentElement.getAttribute('saved-theme') === 'dark'
+              mermaid.initialize({
+                startOnLoad: false,
+                securityLevel: 'loose',
+                theme: darkMode ? 'dark' : 'default'
+              })
+
+              await mermaid.run({
+                querySelector: '.mermaid'
+              })
+            }
           });
           `,
           loadTime: "afterDOMReady",

From 52ef6d1b6f2c4be99426929fc98b17dc7e7e96fc Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Tue, 6 Feb 2024 01:12:31 -0500
Subject: [PATCH 049/115] fix(search): set background-color for icon within
 preview panel (#815)

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/components/styles/search.scss | 4 ++++
 quartz/plugins/transformers/gfm.ts   | 1 +
 2 files changed, 5 insertions(+)

diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index d25d0f80d4d98..2f07fe712eba2 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -159,6 +159,10 @@
             margin: 0 auto;
             width: min($pageWidth, 100%);
           }
+
+          & [data-icon] {
+            background-color: transparent;
+          }
         }
 
         & > #results-container {
diff --git a/quartz/plugins/transformers/gfm.ts b/quartz/plugins/transformers/gfm.ts
index 7860f851c4bf0..dc0d1f09a2bcd 100644
--- a/quartz/plugins/transformers/gfm.ts
+++ b/quartz/plugins/transformers/gfm.ts
@@ -35,6 +35,7 @@ export const GitHubFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> |
                 ariaHidden: true,
                 tabIndex: -1,
                 "data-no-popover": true,
+                "data-icon": true,
               },
               content: {
                 type: "element",

From d2fb50b83c9557f1cd36e4706e9a11aa8f01e458 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Tue, 6 Feb 2024 02:06:19 -0500
Subject: [PATCH 050/115] fix(links): show backdrop on links highlighted in
 headers alias (#816)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: assign specific classes based on parent node

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: use custom role for anchor icone

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: allow color on links 😄

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: unify search inner container

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/components/styles/search.scss | 2 +-
 quartz/plugins/transformers/gfm.ts   | 2 +-
 quartz/styles/base.scss              | 6 ++----
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 2f07fe712eba2..8a9ec6714ac36 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -160,7 +160,7 @@
             width: min($pageWidth, 100%);
           }
 
-          & [data-icon] {
+          a[role="anchor"] {
             background-color: transparent;
           }
         }
diff --git a/quartz/plugins/transformers/gfm.ts b/quartz/plugins/transformers/gfm.ts
index dc0d1f09a2bcd..48681ff77999d 100644
--- a/quartz/plugins/transformers/gfm.ts
+++ b/quartz/plugins/transformers/gfm.ts
@@ -32,10 +32,10 @@ export const GitHubFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> |
             {
               behavior: "append",
               properties: {
+                role: "anchor",
                 ariaHidden: true,
                 tabIndex: -1,
                 "data-no-popover": true,
-                "data-icon": true,
               },
               content: {
                 type: "element",
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 33d6267f80fa4..f0e7c14d152df 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -259,11 +259,9 @@ thead {
   font-weight: revert;
   margin-bottom: 0;
 
-  article > & > a {
+  article > & > a[role="anchor"] {
     color: var(--dark);
-    &.internal {
-      background-color: transparent;
-    }
+    background-color: transparent;
   }
 }
 

From ce413b4bae40a21e354b2e065fda60045ae28ecb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Silviu=20Loren=C8=9B?=
 <124451350+smilorent@users.noreply.github.com>
Date: Wed, 7 Feb 2024 18:26:45 +0200
Subject: [PATCH 051/115] feat(i18n): add Romanian to i18n (#821)

---
 quartz/i18n/index.ts         |  2 ++
 quartz/i18n/locales/ro-RO.ts | 65 ++++++++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 quartz/i18n/locales/ro-RO.ts

diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
index 9e14ffeea52d8..579f19e4a07f4 100644
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@@ -4,6 +4,7 @@ import fr from "./locales/fr-FR"
 import ja from "./locales/ja-JP"
 import de from "./locales/de-DE"
 import nl from "./locales/nl-NL"
+import ro from "./locales/ro-RO"
 
 export const TRANSLATIONS = {
   "en-US": en,
@@ -11,6 +12,7 @@ export const TRANSLATIONS = {
   "ja-JP": ja,
   "de-DE": de,
   "nl-NL": nl,
+  "ro-RO": ro,
 } as const
 
 export const i18n = (locale: ValidLocale): Translation => TRANSLATIONS[locale ?? "en-US"]
diff --git a/quartz/i18n/locales/ro-RO.ts b/quartz/i18n/locales/ro-RO.ts
new file mode 100644
index 0000000000000..8fce4a90de32a
--- /dev/null
+++ b/quartz/i18n/locales/ro-RO.ts
@@ -0,0 +1,65 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Fără titlu",
+    description: "Nici o descriere furnizată",
+  },
+  components: {
+    backlinks: {
+      title: "Legături înapoi",
+      noBacklinksFound: "Nu s-au găsit legături înapoi",
+    },
+    themeToggle: {
+      lightMode: "Modul luminos",
+      darkMode: "Modul întunecat",
+    },
+    explorer: {
+      title: "Explorator",
+    },
+    footer: {
+      createdWith: "Creat cu",
+    },
+    graph: {
+      title: "Graf",
+    },
+    recentNotes: {
+      title: "Notițe recente",
+      seeRemainingMore: ({ remaining }) => `Vezi încă ${remaining} →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Extras din ${targetSlug}`,
+      linkToOriginal: "Legătură către original",
+    },
+    search: {
+      title: "Căutare",
+      searchBarPlaceholder: "Introduceți termenul de căutare...",
+    },
+    tableOfContents: {
+      title: "Cuprins",
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Notițe recente",
+      lastFewNotes: ({ count }) => `Ultimele ${count} notițe`,
+    },
+    error: {
+      title: "Pagina nu a fost găsită",
+      notFound: "Fie această pagină este privată, fie nu există.",
+    },
+    folderContent: {
+      folder: "Dosar",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 articol în acest dosar." : `${count} elemente în acest dosar.`,
+    },
+    tagContent: {
+      tag: "Etichetă",
+      tagIndex: "Indexul etichetelor",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 articol cu această etichetă." : `${count} articole cu această etichetă.`,
+      showingFirst: ({ count }) => `Se afișează primele ${count} etichete.`,
+      totalTags: ({ count }) => `Au fost găsite ${count} etichete în total.`,
+    },
+  },
+} as const satisfies Translation

From 2578597f7ec7e932f5e30e2c38995dc9dd6eac75 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Wed, 7 Feb 2024 12:29:47 -0500
Subject: [PATCH 052/115] chore(lang): lang element based on frontmatter or
 default locale (#819)

default locale

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/components/renderPage.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index 1ed05a704685b..d6bcf0a950264 100644
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -209,8 +209,10 @@ export function renderPage(
     </div>
   )
 
+  const lang = componentData.frontmatter?.lang ?? cfg.locale.split("-")[0]
+
   const doc = (
-    <html>
+    <html lang={lang}>
       <Head {...componentData} />
       <body data-slug={slug}>
         <div id="quartz-root" class="page">

From ca284778b257698457116d65bc9559dbb37a1166 Mon Sep 17 00:00:00 2001
From: Miguel Pimentel <contact@miguelpimentel.do>
Date: Wed, 7 Feb 2024 09:57:14 -0800
Subject: [PATCH 053/115] add Spanish translations (#822)

* add Spanish translations

* format with prettier

* clears npm ci, formatted w/ prettier
---
 quartz/i18n/index.ts         |  2 ++
 quartz/i18n/locales/es-ES.ts | 65 ++++++++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 quartz/i18n/locales/es-ES.ts

diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
index 579f19e4a07f4..d24d5282a80c4 100644
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@@ -5,6 +5,7 @@ import ja from "./locales/ja-JP"
 import de from "./locales/de-DE"
 import nl from "./locales/nl-NL"
 import ro from "./locales/ro-RO"
+import es from "./locales/es-ES"
 
 export const TRANSLATIONS = {
   "en-US": en,
@@ -13,6 +14,7 @@ export const TRANSLATIONS = {
   "de-DE": de,
   "nl-NL": nl,
   "ro-RO": ro,
+  "es-ES": es,
 } as const
 
 export const i18n = (locale: ValidLocale): Translation => TRANSLATIONS[locale ?? "en-US"]
diff --git a/quartz/i18n/locales/es-ES.ts b/quartz/i18n/locales/es-ES.ts
new file mode 100644
index 0000000000000..4d395429d01dc
--- /dev/null
+++ b/quartz/i18n/locales/es-ES.ts
@@ -0,0 +1,65 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Sin título",
+    description: "Sin descripción",
+  },
+  components: {
+    backlinks: {
+      title: "Enlaces de Retroceso",
+      noBacklinksFound: "No se han encontrado enlaces traseros",
+    },
+    themeToggle: {
+      lightMode: "Modo claro",
+      darkMode: "Modo oscuro",
+    },
+    explorer: {
+      title: "Explorador",
+    },
+    footer: {
+      createdWith: "Creado con",
+    },
+    graph: {
+      title: "Vista Gráfica",
+    },
+    recentNotes: {
+      title: "Notas Recientes",
+      seeRemainingMore: ({ remaining }) => `Vea ${remaining} más →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Transcluido de ${targetSlug}`,
+      linkToOriginal: "Enlace al original",
+    },
+    search: {
+      title: "Buscar",
+      searchBarPlaceholder: "Busca algo",
+    },
+    tableOfContents: {
+      title: "Tabla de Contenidos",
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Notas recientes",
+      lastFewNotes: ({ count }) => `Últimás ${count} notas`,
+    },
+    error: {
+      title: "No se encontró.",
+      notFound: "Esta página es privada o no existe.",
+    },
+    folderContent: {
+      folder: "Carpeta",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 artículo en esta carpeta" : `${count} artículos en esta carpeta.`,
+    },
+    tagContent: {
+      tag: "Etiqueta",
+      tagIndex: "Índice de Etiquetas",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 artículo con esta etiqueta" : `${count} artículos con esta etiqueta.`,
+      showingFirst: ({ count }) => `Mostrando las primeras ${count} etiquetas.`,
+      totalTags: ({ count }) => `Se encontraron ${count} etiquetas en total.`,
+    },
+  },
+} as const satisfies Translation

From 330e322e48ba8890b11f4de0a84f3cffaad22096 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Thu, 8 Feb 2024 02:52:55 -0500
Subject: [PATCH 054/115] feat(fonts): fetch before build (#817)

* feat: fetch google fonts before build

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* Update quartz/plugins/emitters/componentResources.ts

* fix: fetching wolff2

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: remove request stylesheet

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: race condition

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: remove preconnect for static fonts

since we are already downloading fonts into public folder

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: remove deadcode

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: add options to gate for cdn caching

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* chore: apply jacky's suggestion

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* chore: add docs and only use one promise

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: fmt

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: remove deadcode

* chore: final touches

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* revert: changes in theme.ts

* fix: styles and remove deadcode

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
---
 docs/configuration.md                         |  1 +
 quartz.config.ts                              |  1 +
 quartz/components/Head.tsx                    |  8 ++-
 quartz/plugins/emitters/componentResources.ts | 62 ++++++++++++++++---
 quartz/plugins/emitters/helpers.ts            |  2 +-
 quartz/util/theme.ts                          |  1 +
 6 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 33d5a5744269e..b0c8506236314 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -34,6 +34,7 @@ This part of the configuration concerns anything that can affect the whole site.
 - `ignorePatterns`: a list of [glob](<https://en.wikipedia.org/wiki/Glob_(programming)>) patterns that Quartz should ignore and not search through when looking for files inside the `content` folder. See [[private pages]] for more details.
 - `defaultDateType`: whether to use created, modified, or published as the default date to display on pages and page listings.
 - `theme`: configure how the site looks.
+  - `cdnCaching`: Whether to use Google CDN to cache the fonts (generally will be faster). Disable this if you want Quartz to be self-contained. Default to `true`
   - `typography`: what fonts to use. Any font available on [Google Fonts](https://fonts.google.com/) works here.
     - `header`: Font to use for headers
     - `code`: Font for inline and block quotes.
diff --git a/quartz.config.ts b/quartz.config.ts
index 4921a11855f3f..4e36e9408e3db 100644
--- a/quartz.config.ts
+++ b/quartz.config.ts
@@ -14,6 +14,7 @@ const config: QuartzConfig = {
     ignorePatterns: ["private", "templates", ".obsidian"],
     defaultDateType: "created",
     theme: {
+      cdnCaching: true,
       typography: {
         header: "Schibsted Grotesk",
         body: "Source Sans Pro",
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index b94909cc1ae82..dae81c73120c1 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -30,8 +30,12 @@ export default (() => {
         <link rel="icon" href={iconPath} />
         <meta name="description" content={description} />
         <meta name="generator" content="Quartz" />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        {cfg.theme.cdnCaching && (
+          <>
+            <link rel="preconnect" href="https://fonts.googleapis.com" />
+            <link rel="preconnect" href="https://fonts.gstatic.com" />
+          </>
+        )}
         {css.map((href) => (
           <link key={href} href={href} rel="stylesheet" type="text/css" spa-preserve />
         ))}
diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts
index 5eb9718a953b4..666c1d26baf61 100644
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@@ -1,4 +1,4 @@
-import { FilePath, FullSlug } from "../../util/path"
+import { FilePath, FullSlug, joinSegments } from "../../util/path"
 import { QuartzEmitterPlugin } from "../types"
 
 // @ts-ignore
@@ -172,27 +172,72 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
       return []
     },
     async emit(ctx, _content, resources): Promise<FilePath[]> {
+      const promises: Promise<FilePath>[] = []
+      const cfg = ctx.cfg.configuration
       // component specific scripts and styles
       const componentResources = getComponentResources(ctx)
       // important that this goes *after* component scripts
       // as the "nav" event gets triggered here and we should make sure
       // that everyone else had the chance to register a listener for it
 
-      if (fontOrigin === "googleFonts") {
-        resources.css.push(googleFontHref(ctx.cfg.configuration.theme))
-      } else if (fontOrigin === "local") {
+      let googleFontsStyleSheet = ""
+      if (fontOrigin === "local") {
         // let the user do it themselves in css
+      } else if (fontOrigin === "googleFonts") {
+        if (cfg.theme.cdnCaching) {
+          resources.css.push(googleFontHref(cfg.theme))
+        } else {
+          let match
+
+          const fontSourceRegex = /url\((https:\/\/fonts.gstatic.com\/s\/[^)]+\.(woff2|ttf))\)/g
+
+          googleFontsStyleSheet = await (
+            await fetch(googleFontHref(ctx.cfg.configuration.theme))
+          ).text()
+
+          while ((match = fontSourceRegex.exec(googleFontsStyleSheet)) !== null) {
+            // match[0] is the `url(path)`, match[1] is the `path`
+            const url = match[1]
+            // the static name of this file.
+            const [filename, ext] = url.split("/").pop()!.split(".")
+
+            googleFontsStyleSheet = googleFontsStyleSheet.replace(url, `/fonts/${filename}.ttf`)
+
+            promises.push(
+              fetch(url)
+                .then((res) => {
+                  if (!res.ok) {
+                    throw new Error(`Failed to fetch font`)
+                  }
+                  return res.arrayBuffer()
+                })
+                .then((buf) =>
+                  write({
+                    ctx,
+                    slug: joinSegments("fonts", filename) as FullSlug,
+                    ext: `.${ext}`,
+                    content: Buffer.from(buf),
+                  }),
+                ),
+            )
+          }
+        }
       }
 
       addGlobalPageResources(ctx, resources, componentResources)
 
-      const stylesheet = joinStyles(ctx.cfg.configuration.theme, ...componentResources.css, styles)
+      const stylesheet = joinStyles(
+        ctx.cfg.configuration.theme,
+        ...componentResources.css,
+        googleFontsStyleSheet,
+        styles,
+      )
       const [prescript, postscript] = await Promise.all([
         joinScripts(componentResources.beforeDOMLoaded),
         joinScripts(componentResources.afterDOMLoaded),
       ])
 
-      const fps = await Promise.all([
+      promises.push(
         write({
           ctx,
           slug: "index" as FullSlug,
@@ -223,8 +268,9 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
           ext: ".js",
           content: postscript,
         }),
-      ])
-      return fps
+      )
+
+      return await Promise.all(promises)
     },
   }
 }
diff --git a/quartz/plugins/emitters/helpers.ts b/quartz/plugins/emitters/helpers.ts
index ef1d1c35c4a5a..523151c2cd85e 100644
--- a/quartz/plugins/emitters/helpers.ts
+++ b/quartz/plugins/emitters/helpers.ts
@@ -7,7 +7,7 @@ type WriteOptions = {
   ctx: BuildCtx
   slug: FullSlug
   ext: `.${string}` | ""
-  content: string
+  content: string | Buffer
 }
 
 export const write = async ({ ctx, slug, ext, content }: WriteOptions): Promise<FilePath> => {
diff --git a/quartz/util/theme.ts b/quartz/util/theme.ts
index 47951c4f47156..bd0da5fb0adbc 100644
--- a/quartz/util/theme.ts
+++ b/quartz/util/theme.ts
@@ -15,6 +15,7 @@ export interface Theme {
     body: string
     code: string
   }
+  cdnCaching: boolean
   colors: {
     lightMode: ColorScheme
     darkMode: ColorScheme

From 51818efc38eae1e4d300f004cb637d2f75a7f41a Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Thu, 8 Feb 2024 11:45:20 -0500
Subject: [PATCH 055/115] fix(umami): format correct string from custom hosts
 (#826)

---
 quartz/plugins/emitters/componentResources.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts
index 666c1d26baf61..4033bdf7b6b40 100644
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@@ -119,7 +119,7 @@ function addGlobalPageResources(
   } else if (cfg.analytics?.provider === "umami") {
     componentResources.afterDOMLoaded.push(`
       const umamiScript = document.createElement("script")
-      umamiScript.src = cfg.analytics.host ?? "https://analytics.umami.is/script.js"
+      umamiScript.src = ${cfg.analytics.host} ?? "https://analytics.umami.is/script.js"
       umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}")
       umamiScript.async = true
 

From e186811c9c309a61f9c29208541949dd2bc5d77d Mon Sep 17 00:00:00 2001
From: Serhii Stets <stets.serhii@gmail.com>
Date: Thu, 8 Feb 2024 18:47:12 +0200
Subject: [PATCH 056/115] added Ukrainian to i18n (#829)

---
 quartz/i18n/index.ts         |  2 ++
 quartz/i18n/locales/uk-UA.ts | 65 ++++++++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 quartz/i18n/locales/uk-UA.ts

diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
index d24d5282a80c4..2031724ca08fd 100644
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@@ -6,6 +6,7 @@ import de from "./locales/de-DE"
 import nl from "./locales/nl-NL"
 import ro from "./locales/ro-RO"
 import es from "./locales/es-ES"
+import uk from "./locales/uk-UA"
 
 export const TRANSLATIONS = {
   "en-US": en,
@@ -15,6 +16,7 @@ export const TRANSLATIONS = {
   "nl-NL": nl,
   "ro-RO": ro,
   "es-ES": es,
+  "uk-UA": uk,
 } as const
 
 export const i18n = (locale: ValidLocale): Translation => TRANSLATIONS[locale ?? "en-US"]
diff --git a/quartz/i18n/locales/uk-UA.ts b/quartz/i18n/locales/uk-UA.ts
new file mode 100644
index 0000000000000..bf664b6f8a2b0
--- /dev/null
+++ b/quartz/i18n/locales/uk-UA.ts
@@ -0,0 +1,65 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Без назви",
+    description: "Опис не надано",
+  },
+  components: {
+    backlinks: {
+      title: "Зворотні посилання",
+      noBacklinksFound: "Зворотних посилань не знайдено",
+    },
+    themeToggle: {
+      lightMode: "Світлий режим",
+      darkMode: "Темний режим",
+    },
+    explorer: {
+      title: "Провідник",
+    },
+    footer: {
+      createdWith: "Створено за допомогою",
+    },
+    graph: {
+      title: "Вигляд графа",
+    },
+    recentNotes: {
+      title: "Останні нотатки",
+      seeRemainingMore: ({ remaining }) => `Переглянути ще ${remaining} →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Видобуто з ${targetSlug}`,
+      linkToOriginal: "Посилання на оригінал",
+    },
+    search: {
+      title: "Пошук",
+      searchBarPlaceholder: "Шукати щось",
+    },
+    tableOfContents: {
+      title: "Зміст",
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Останні нотатки",
+      lastFewNotes: ({ count }) => `Останні нотатки: ${count}`,
+    },
+    error: {
+      title: "Не знайдено",
+      notFound: "Ця сторінка або приватна, або не існує.",
+    },
+    folderContent: {
+      folder: "Папка",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "У цій папці 1 елемент" : `Елементів у цій папці: ${count}.`,
+    },
+    tagContent: {
+      tag: "Тег",
+      tagIndex: "Індекс тегу",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 елемент з цим тегом" : `Елементів з цим тегом: ${count}.`,
+      showingFirst: ({ count }) => `Показ перших ${count} тегів.`,
+      totalTags: ({ count }) => `Всього знайдено тегів: ${count}.`,
+    },
+  },
+} as const satisfies Translation

From fd785ada56902d7ab0a63899b0e798e0c43e8071 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Silviu=20Loren=C8=9B?=
 <124451350+smilorent@users.noreply.github.com>
Date: Thu, 8 Feb 2024 18:48:13 +0200
Subject: [PATCH 057/115] feat(i18n): use Romanian translation for `ro-MD`
 locale (#828)

---
 quartz/i18n/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
index 2031724ca08fd..0f17fff60dfbc 100644
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@@ -15,6 +15,7 @@ export const TRANSLATIONS = {
   "de-DE": de,
   "nl-NL": nl,
   "ro-RO": ro,
+  "ro-MD": ro,
   "es-ES": es,
   "uk-UA": uk,
 } as const

From a87704cd05e379c670abce823385fb937a65920d Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 8 Feb 2024 09:31:36 -0800
Subject: [PATCH 058/115] fix: set default locale for lang attribute

---
 quartz/components/renderPage.tsx | 3 +--
 quartz/i18n/index.ts             | 3 ++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index d6bcf0a950264..4643d0a3a7b79 100644
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -209,8 +209,7 @@ export function renderPage(
     </div>
   )
 
-  const lang = componentData.frontmatter?.lang ?? cfg.locale.split("-")[0]
-
+  const lang = componentData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
   const doc = (
     <html lang={lang}>
       <Head {...componentData} />
diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
index 0f17fff60dfbc..7fd978e6dfd36 100644
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@@ -20,5 +20,6 @@ export const TRANSLATIONS = {
   "uk-UA": uk,
 } as const
 
-export const i18n = (locale: ValidLocale): Translation => TRANSLATIONS[locale ?? "en-US"]
+export const defaultTranslation = "en-US"
+export const i18n = (locale: ValidLocale): Translation => TRANSLATIONS[locale ?? defaultTranslation]
 export type ValidLocale = keyof typeof TRANSLATIONS

From fe353d946bd90d38647a9dceff7ea85d425e8a83 Mon Sep 17 00:00:00 2001
From: kabirgh <15871468+kabirgh@users.noreply.github.com>
Date: Fri, 9 Feb 2024 15:07:32 +0000
Subject: [PATCH 059/115] feat(experimental): partial rebuilds (#716)

---
 package.json                                  |   2 +-
 quartz/build.ts                               | 194 +++++++++++++++++-
 quartz/cli/args.js                            |   5 +
 quartz/depgraph.test.ts                       |  96 +++++++++
 quartz/depgraph.ts                            | 187 +++++++++++++++++
 quartz/plugins/emitters/404.tsx               |   4 +
 quartz/plugins/emitters/aliases.ts            |   5 +
 quartz/plugins/emitters/assets.ts             |  19 ++
 quartz/plugins/emitters/cname.ts              |   4 +
 quartz/plugins/emitters/componentResources.ts |  26 ++-
 quartz/plugins/emitters/contentIndex.ts       |  21 ++
 quartz/plugins/emitters/contentPage.tsx       |  17 +-
 quartz/plugins/emitters/folderPage.tsx        |   8 +
 quartz/plugins/emitters/static.ts             |  15 ++
 quartz/plugins/emitters/tagPage.tsx           |   5 +
 quartz/plugins/types.ts                       |   6 +
 quartz/util/ctx.ts                            |   1 +
 17 files changed, 604 insertions(+), 11 deletions(-)
 create mode 100644 quartz/depgraph.test.ts
 create mode 100644 quartz/depgraph.ts

diff --git a/package.json b/package.json
index c51a9ed5b5cea..5c7570125e4cb 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "docs": "npx quartz build --serve -d docs",
     "check": "tsc --noEmit && npx prettier . --check",
     "format": "npx prettier . --write",
-    "test": "tsx ./quartz/util/path.test.ts",
+    "test": "tsx ./quartz/util/path.test.ts && tsx ./quartz/depgraph.test.ts",
     "profile": "0x -D prof ./quartz/bootstrap-cli.mjs build --concurrency=1"
   },
   "engines": {
diff --git a/quartz/build.ts b/quartz/build.ts
index 1f90301e92eb0..ed166bb6c76f8 100644
--- a/quartz/build.ts
+++ b/quartz/build.ts
@@ -17,6 +17,10 @@ import { glob, toPosixPath } from "./util/glob"
 import { trace } from "./util/trace"
 import { options } from "./util/sourcemap"
 import { Mutex } from "async-mutex"
+import DepGraph from "./depgraph"
+import { getStaticResourcesFromPlugins } from "./plugins"
+
+type Dependencies = Record<string, DepGraph<FilePath> | null>
 
 type BuildData = {
   ctx: BuildCtx
@@ -29,8 +33,11 @@ type BuildData = {
   toRebuild: Set<FilePath>
   toRemove: Set<FilePath>
   lastBuildMs: number
+  dependencies: Dependencies
 }
 
+type FileEvent = "add" | "change" | "delete"
+
 async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
   const ctx: BuildCtx = {
     argv,
@@ -68,12 +75,24 @@ async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
 
   const parsedFiles = await parseMarkdown(ctx, filePaths)
   const filteredContent = filterContent(ctx, parsedFiles)
+
+  const dependencies: Record<string, DepGraph<FilePath> | null> = {}
+
+  // Only build dependency graphs if we're doing a fast rebuild
+  if (argv.fastRebuild) {
+    const staticResources = getStaticResourcesFromPlugins(ctx)
+    for (const emitter of cfg.plugins.emitters) {
+      dependencies[emitter.name] =
+        (await emitter.getDependencyGraph?.(ctx, filteredContent, staticResources)) ?? null
+    }
+  }
+
   await emitContent(ctx, filteredContent)
   console.log(chalk.green(`Done processing ${fps.length} files in ${perf.timeSince()}`))
   release()
 
   if (argv.serve) {
-    return startServing(ctx, mut, parsedFiles, clientRefresh)
+    return startServing(ctx, mut, parsedFiles, clientRefresh, dependencies)
   }
 }
 
@@ -83,9 +102,11 @@ async function startServing(
   mut: Mutex,
   initialContent: ProcessedContent[],
   clientRefresh: () => void,
+  dependencies: Dependencies, // emitter name: dep graph
 ) {
   const { argv } = ctx
 
+  // cache file parse results
   const contentMap = new Map<FilePath, ProcessedContent>()
   for (const content of initialContent) {
     const [_tree, vfile] = content
@@ -95,6 +116,7 @@ async function startServing(
   const buildData: BuildData = {
     ctx,
     mut,
+    dependencies,
     contentMap,
     ignored: await isGitIgnored(),
     initialSlugs: ctx.allSlugs,
@@ -110,19 +132,181 @@ async function startServing(
     ignoreInitial: true,
   })
 
+  const buildFromEntry = argv.fastRebuild ? partialRebuildFromEntrypoint : rebuildFromEntrypoint
   watcher
-    .on("add", (fp) => rebuildFromEntrypoint(fp, "add", clientRefresh, buildData))
-    .on("change", (fp) => rebuildFromEntrypoint(fp, "change", clientRefresh, buildData))
-    .on("unlink", (fp) => rebuildFromEntrypoint(fp, "delete", clientRefresh, buildData))
+    .on("add", (fp) => buildFromEntry(fp, "add", clientRefresh, buildData))
+    .on("change", (fp) => buildFromEntry(fp, "change", clientRefresh, buildData))
+    .on("unlink", (fp) => buildFromEntry(fp, "delete", clientRefresh, buildData))
 
   return async () => {
     await watcher.close()
   }
 }
 
+async function partialRebuildFromEntrypoint(
+  filepath: string,
+  action: FileEvent,
+  clientRefresh: () => void,
+  buildData: BuildData, // note: this function mutates buildData
+) {
+  const { ctx, ignored, dependencies, contentMap, mut, toRemove } = buildData
+  const { argv, cfg } = ctx
+
+  // don't do anything for gitignored files
+  if (ignored(filepath)) {
+    return
+  }
+
+  const buildStart = new Date().getTime()
+  buildData.lastBuildMs = buildStart
+  const release = await mut.acquire()
+  if (buildData.lastBuildMs > buildStart) {
+    release()
+    return
+  }
+
+  const perf = new PerfTimer()
+  console.log(chalk.yellow("Detected change, rebuilding..."))
+
+  // UPDATE DEP GRAPH
+  const fp = joinSegments(argv.directory, toPosixPath(filepath)) as FilePath
+
+  const staticResources = getStaticResourcesFromPlugins(ctx)
+  let processedFiles: ProcessedContent[] = []
+
+  switch (action) {
+    case "add":
+      // add to cache when new file is added
+      processedFiles = await parseMarkdown(ctx, [fp])
+      processedFiles.forEach(([tree, vfile]) => contentMap.set(vfile.data.filePath!, [tree, vfile]))
+
+      // update the dep graph by asking all emitters whether they depend on this file
+      for (const emitter of cfg.plugins.emitters) {
+        const emitterGraph =
+          (await emitter.getDependencyGraph?.(ctx, processedFiles, staticResources)) ?? null
+
+        // emmiter may not define a dependency graph. nothing to update if so
+        if (emitterGraph) {
+          dependencies[emitter.name]?.updateIncomingEdgesForNode(emitterGraph, fp)
+        }
+      }
+      break
+    case "change":
+      // invalidate cache when file is changed
+      processedFiles = await parseMarkdown(ctx, [fp])
+      processedFiles.forEach(([tree, vfile]) => contentMap.set(vfile.data.filePath!, [tree, vfile]))
+
+      // only content files can have added/removed dependencies because of transclusions
+      if (path.extname(fp) === ".md") {
+        for (const emitter of cfg.plugins.emitters) {
+          // get new dependencies from all emitters for this file
+          const emitterGraph =
+            (await emitter.getDependencyGraph?.(ctx, processedFiles, staticResources)) ?? null
+
+          // emmiter may not define a dependency graph. nothing to update if so
+          if (emitterGraph) {
+            // merge the new dependencies into the dep graph
+            dependencies[emitter.name]?.updateIncomingEdgesForNode(emitterGraph, fp)
+          }
+        }
+      }
+      break
+    case "delete":
+      toRemove.add(fp)
+      break
+  }
+
+  if (argv.verbose) {
+    console.log(`Updated dependency graphs in ${perf.timeSince()}`)
+  }
+
+  // EMIT
+  perf.addEvent("rebuild")
+  let emittedFiles = 0
+  const destinationsToDelete = new Set<FilePath>()
+
+  for (const emitter of cfg.plugins.emitters) {
+    const depGraph = dependencies[emitter.name]
+
+    // emitter hasn't defined a dependency graph. call it with all processed files
+    if (depGraph === null) {
+      if (argv.verbose) {
+        console.log(
+          `Emitter ${emitter.name} doesn't define a dependency graph. Calling it with all files...`,
+        )
+      }
+
+      const files = [...contentMap.values()].filter(
+        ([_node, vfile]) => !toRemove.has(vfile.data.filePath!),
+      )
+
+      const emittedFps = await emitter.emit(ctx, files, staticResources)
+
+      if (ctx.argv.verbose) {
+        for (const file of emittedFps) {
+          console.log(`[emit:${emitter.name}] ${file}`)
+        }
+      }
+
+      emittedFiles += emittedFps.length
+      continue
+    }
+
+    // only call the emitter if it uses this file
+    if (depGraph.hasNode(fp)) {
+      // re-emit using all files that are needed for the downstream of this file
+      // eg. for ContentIndex, the dep graph could be:
+      // a.md --> contentIndex.json
+      // b.md ------^
+      //
+      // if a.md changes, we need to re-emit contentIndex.json,
+      // and supply [a.md, b.md] to the emitter
+      const upstreams = [...depGraph.getLeafNodeAncestors(fp)] as FilePath[]
+
+      if (action === "delete" && upstreams.length === 1) {
+        // if there's only one upstream, the destination is solely dependent on this file
+        destinationsToDelete.add(upstreams[0])
+      }
+
+      const upstreamContent = upstreams
+        // filter out non-markdown files
+        .filter((file) => contentMap.has(file))
+        // if file was deleted, don't give it to the emitter
+        .filter((file) => !toRemove.has(file))
+        .map((file) => contentMap.get(file)!)
+
+      const emittedFps = await emitter.emit(ctx, upstreamContent, staticResources)
+
+      if (ctx.argv.verbose) {
+        for (const file of emittedFps) {
+          console.log(`[emit:${emitter.name}] ${file}`)
+        }
+      }
+
+      emittedFiles += emittedFps.length
+    }
+  }
+
+  console.log(`Emitted ${emittedFiles} files to \`${argv.output}\` in ${perf.timeSince("rebuild")}`)
+
+  // CLEANUP
+  // delete files that are solely dependent on this file
+  await rimraf([...destinationsToDelete])
+  for (const file of toRemove) {
+    // remove from cache
+    contentMap.delete(file)
+    // remove the node from dependency graphs
+    Object.values(dependencies).forEach((depGraph) => depGraph?.removeNode(file))
+  }
+
+  toRemove.clear()
+  release()
+  clientRefresh()
+}
+
 async function rebuildFromEntrypoint(
   fp: string,
-  action: "add" | "change" | "delete",
+  action: FileEvent,
   clientRefresh: () => void,
   buildData: BuildData, // note: this function mutates buildData
 ) {
diff --git a/quartz/cli/args.js b/quartz/cli/args.js
index 7ed5b078e9dd1..123d0ac552361 100644
--- a/quartz/cli/args.js
+++ b/quartz/cli/args.js
@@ -71,6 +71,11 @@ export const BuildArgv = {
     default: false,
     describe: "run a local server to live-preview your Quartz",
   },
+  fastRebuild: {
+    boolean: true,
+    default: false,
+    describe: "[experimental] rebuild only the changed files",
+  },
   baseDir: {
     string: true,
     default: "",
diff --git a/quartz/depgraph.test.ts b/quartz/depgraph.test.ts
new file mode 100644
index 0000000000000..43eb4024ff3e1
--- /dev/null
+++ b/quartz/depgraph.test.ts
@@ -0,0 +1,96 @@
+import test, { describe } from "node:test"
+import DepGraph from "./depgraph"
+import assert from "node:assert"
+
+describe("DepGraph", () => {
+  test("getLeafNodes", () => {
+    const graph = new DepGraph<string>()
+    graph.addEdge("A", "B")
+    graph.addEdge("B", "C")
+    graph.addEdge("D", "C")
+    assert.deepStrictEqual(graph.getLeafNodes("A"), new Set(["C"]))
+    assert.deepStrictEqual(graph.getLeafNodes("B"), new Set(["C"]))
+    assert.deepStrictEqual(graph.getLeafNodes("C"), new Set(["C"]))
+    assert.deepStrictEqual(graph.getLeafNodes("D"), new Set(["C"]))
+  })
+
+  describe("getLeafNodeAncestors", () => {
+    test("gets correct ancestors in a graph without cycles", () => {
+      const graph = new DepGraph<string>()
+      graph.addEdge("A", "B")
+      graph.addEdge("B", "C")
+      graph.addEdge("D", "B")
+      assert.deepStrictEqual(graph.getLeafNodeAncestors("A"), new Set(["A", "B", "D"]))
+      assert.deepStrictEqual(graph.getLeafNodeAncestors("B"), new Set(["A", "B", "D"]))
+      assert.deepStrictEqual(graph.getLeafNodeAncestors("C"), new Set(["A", "B", "D"]))
+      assert.deepStrictEqual(graph.getLeafNodeAncestors("D"), new Set(["A", "B", "D"]))
+    })
+
+    test("gets correct ancestors in a graph with cycles", () => {
+      const graph = new DepGraph<string>()
+      graph.addEdge("A", "B")
+      graph.addEdge("B", "C")
+      graph.addEdge("C", "A")
+      graph.addEdge("C", "D")
+      assert.deepStrictEqual(graph.getLeafNodeAncestors("A"), new Set(["A", "B", "C"]))
+      assert.deepStrictEqual(graph.getLeafNodeAncestors("B"), new Set(["A", "B", "C"]))
+      assert.deepStrictEqual(graph.getLeafNodeAncestors("C"), new Set(["A", "B", "C"]))
+      assert.deepStrictEqual(graph.getLeafNodeAncestors("D"), new Set(["A", "B", "C"]))
+    })
+  })
+
+  describe("updateIncomingEdgesForNode", () => {
+    test("merges when node exists", () => {
+      // A.md -> B.md -> B.html
+      const graph = new DepGraph<string>()
+      graph.addEdge("A.md", "B.md")
+      graph.addEdge("B.md", "B.html")
+
+      // B.md is edited so it removes the A.md transclusion
+      // and adds C.md transclusion
+      // C.md -> B.md
+      const other = new DepGraph<string>()
+      other.addEdge("C.md", "B.md")
+      other.addEdge("B.md", "B.html")
+
+      // A.md -> B.md removed, C.md -> B.md added
+      // C.md -> B.md -> B.html
+      graph.updateIncomingEdgesForNode(other, "B.md")
+
+      const expected = {
+        nodes: ["A.md", "B.md", "B.html", "C.md"],
+        edges: [
+          ["B.md", "B.html"],
+          ["C.md", "B.md"],
+        ],
+      }
+
+      assert.deepStrictEqual(graph.export(), expected)
+    })
+
+    test("adds node if it does not exist", () => {
+      // A.md -> B.md
+      const graph = new DepGraph<string>()
+      graph.addEdge("A.md", "B.md")
+
+      // Add a new file C.md that transcludes B.md
+      // B.md -> C.md
+      const other = new DepGraph<string>()
+      other.addEdge("B.md", "C.md")
+
+      // B.md -> C.md added
+      // A.md -> B.md -> C.md
+      graph.updateIncomingEdgesForNode(other, "C.md")
+
+      const expected = {
+        nodes: ["A.md", "B.md", "C.md"],
+        edges: [
+          ["A.md", "B.md"],
+          ["B.md", "C.md"],
+        ],
+      }
+
+      assert.deepStrictEqual(graph.export(), expected)
+    })
+  })
+})
diff --git a/quartz/depgraph.ts b/quartz/depgraph.ts
new file mode 100644
index 0000000000000..1efad077054ea
--- /dev/null
+++ b/quartz/depgraph.ts
@@ -0,0 +1,187 @@
+export default class DepGraph<T> {
+  // node: incoming and outgoing edges
+  _graph = new Map<T, { incoming: Set<T>; outgoing: Set<T> }>()
+
+  constructor() {
+    this._graph = new Map()
+  }
+
+  export(): Object {
+    return {
+      nodes: this.nodes,
+      edges: this.edges,
+    }
+  }
+
+  toString(): string {
+    return JSON.stringify(this.export(), null, 2)
+  }
+
+  // BASIC GRAPH OPERATIONS
+
+  get nodes(): T[] {
+    return Array.from(this._graph.keys())
+  }
+
+  get edges(): [T, T][] {
+    let edges: [T, T][] = []
+    this.forEachEdge((edge) => edges.push(edge))
+    return edges
+  }
+
+  hasNode(node: T): boolean {
+    return this._graph.has(node)
+  }
+
+  addNode(node: T): void {
+    if (!this._graph.has(node)) {
+      this._graph.set(node, { incoming: new Set(), outgoing: new Set() })
+    }
+  }
+
+  removeNode(node: T): void {
+    if (this._graph.has(node)) {
+      this._graph.delete(node)
+    }
+  }
+
+  hasEdge(from: T, to: T): boolean {
+    return Boolean(this._graph.get(from)?.outgoing.has(to))
+  }
+
+  addEdge(from: T, to: T): void {
+    this.addNode(from)
+    this.addNode(to)
+
+    this._graph.get(from)!.outgoing.add(to)
+    this._graph.get(to)!.incoming.add(from)
+  }
+
+  removeEdge(from: T, to: T): void {
+    if (this._graph.has(from) && this._graph.has(to)) {
+      this._graph.get(from)!.outgoing.delete(to)
+      this._graph.get(to)!.incoming.delete(from)
+    }
+  }
+
+  // returns -1 if node does not exist
+  outDegree(node: T): number {
+    return this.hasNode(node) ? this._graph.get(node)!.outgoing.size : -1
+  }
+
+  // returns -1 if node does not exist
+  inDegree(node: T): number {
+    return this.hasNode(node) ? this._graph.get(node)!.incoming.size : -1
+  }
+
+  forEachOutNeighbor(node: T, callback: (neighbor: T) => void): void {
+    this._graph.get(node)?.outgoing.forEach(callback)
+  }
+
+  forEachInNeighbor(node: T, callback: (neighbor: T) => void): void {
+    this._graph.get(node)?.incoming.forEach(callback)
+  }
+
+  forEachEdge(callback: (edge: [T, T]) => void): void {
+    for (const [source, { outgoing }] of this._graph.entries()) {
+      for (const target of outgoing) {
+        callback([source, target])
+      }
+    }
+  }
+
+  // DEPENDENCY ALGORITHMS
+
+  // For the node provided:
+  // If node does not exist, add it
+  // If an incoming edge was added in other, it is added in this graph
+  // If an incoming edge was deleted in other, it is deleted in this graph
+  updateIncomingEdgesForNode(other: DepGraph<T>, node: T): void {
+    this.addNode(node)
+
+    // Add edge if it is present in other
+    other.forEachInNeighbor(node, (neighbor) => {
+      this.addEdge(neighbor, node)
+    })
+
+    // For node provided, remove incoming edge if it is absent in other
+    this.forEachEdge(([source, target]) => {
+      if (target === node && !other.hasEdge(source, target)) {
+        this.removeEdge(source, target)
+      }
+    })
+  }
+
+  // Get all leaf nodes (i.e. destination paths) reachable from the node provided
+  // Eg. if the graph is A -> B -> C
+  //                     D ---^
+  // and the node is B, this function returns [C]
+  getLeafNodes(node: T): Set<T> {
+    let stack: T[] = [node]
+    let visited = new Set<T>()
+    let leafNodes = new Set<T>()
+
+    // DFS
+    while (stack.length > 0) {
+      let node = stack.pop()!
+
+      // If the node is already visited, skip it
+      if (visited.has(node)) {
+        continue
+      }
+      visited.add(node)
+
+      // Check if the node is a leaf node (i.e. destination path)
+      if (this.outDegree(node) === 0) {
+        leafNodes.add(node)
+      }
+
+      // Add all unvisited neighbors to the stack
+      this.forEachOutNeighbor(node, (neighbor) => {
+        if (!visited.has(neighbor)) {
+          stack.push(neighbor)
+        }
+      })
+    }
+
+    return leafNodes
+  }
+
+  // Get all ancestors of the leaf nodes reachable from the node provided
+  // Eg. if the graph is A -> B -> C
+  //                     D ---^
+  // and the node is B, this function returns [A, B, D]
+  getLeafNodeAncestors(node: T): Set<T> {
+    const leafNodes = this.getLeafNodes(node)
+    let visited = new Set<T>()
+    let upstreamNodes = new Set<T>()
+
+    // Backwards DFS for each leaf node
+    leafNodes.forEach((leafNode) => {
+      let stack: T[] = [leafNode]
+
+      while (stack.length > 0) {
+        let node = stack.pop()!
+
+        if (visited.has(node)) {
+          continue
+        }
+        visited.add(node)
+        // Add node if it's not a leaf node (i.e. destination path)
+        // Assumes destination file cannot depend on another destination file
+        if (this.outDegree(node) !== 0) {
+          upstreamNodes.add(node)
+        }
+
+        // Add all unvisited parents to the stack
+        this.forEachInNeighbor(node, (parentNode) => {
+          if (!visited.has(parentNode)) {
+            stack.push(parentNode)
+          }
+        })
+      }
+    })
+
+    return upstreamNodes
+  }
+}
diff --git a/quartz/plugins/emitters/404.tsx b/quartz/plugins/emitters/404.tsx
index 079adbcadbce0..f9d7a8620f5bd 100644
--- a/quartz/plugins/emitters/404.tsx
+++ b/quartz/plugins/emitters/404.tsx
@@ -9,6 +9,7 @@ import { NotFound } from "../../components"
 import { defaultProcessedContent } from "../vfile"
 import { write } from "./helpers"
 import { i18n } from "../../i18n"
+import DepGraph from "../../depgraph"
 
 export const NotFoundPage: QuartzEmitterPlugin = () => {
   const opts: FullPageLayout = {
@@ -27,6 +28,9 @@ export const NotFoundPage: QuartzEmitterPlugin = () => {
     getQuartzComponents() {
       return [Head, Body, pageBody, Footer]
     },
+    async getDependencyGraph(_ctx, _content, _resources) {
+      return new DepGraph<FilePath>()
+    },
     async emit(ctx, _content, resources): Promise<FilePath[]> {
       const cfg = ctx.cfg.configuration
       const slug = "404" as FullSlug
diff --git a/quartz/plugins/emitters/aliases.ts b/quartz/plugins/emitters/aliases.ts
index d407629db371d..fb25a448e83a0 100644
--- a/quartz/plugins/emitters/aliases.ts
+++ b/quartz/plugins/emitters/aliases.ts
@@ -2,12 +2,17 @@ import { FilePath, FullSlug, joinSegments, resolveRelative, simplifySlug } from
 import { QuartzEmitterPlugin } from "../types"
 import path from "path"
 import { write } from "./helpers"
+import DepGraph from "../../depgraph"
 
 export const AliasRedirects: QuartzEmitterPlugin = () => ({
   name: "AliasRedirects",
   getQuartzComponents() {
     return []
   },
+  async getDependencyGraph(_ctx, _content, _resources) {
+    // TODO implement
+    return new DepGraph<FilePath>()
+  },
   async emit(ctx, content, _resources): Promise<FilePath[]> {
     const { argv } = ctx
     const fps: FilePath[] = []
diff --git a/quartz/plugins/emitters/assets.ts b/quartz/plugins/emitters/assets.ts
index cc97b2e3eb32c..379cd5b2d7df3 100644
--- a/quartz/plugins/emitters/assets.ts
+++ b/quartz/plugins/emitters/assets.ts
@@ -3,6 +3,7 @@ import { QuartzEmitterPlugin } from "../types"
 import path from "path"
 import fs from "fs"
 import { glob } from "../../util/glob"
+import DepGraph from "../../depgraph"
 
 export const Assets: QuartzEmitterPlugin = () => {
   return {
@@ -10,6 +11,24 @@ export const Assets: QuartzEmitterPlugin = () => {
     getQuartzComponents() {
       return []
     },
+    async getDependencyGraph(ctx, _content, _resources) {
+      const { argv, cfg } = ctx
+      const graph = new DepGraph<FilePath>()
+
+      const fps = await glob("**", argv.directory, ["**/*.md", ...cfg.configuration.ignorePatterns])
+
+      for (const fp of fps) {
+        const ext = path.extname(fp)
+        const src = joinSegments(argv.directory, fp) as FilePath
+        const name = (slugifyFilePath(fp as FilePath, true) + ext) as FilePath
+
+        const dest = joinSegments(argv.output, name) as FilePath
+
+        graph.addEdge(src, dest)
+      }
+
+      return graph
+    },
     async emit({ argv, cfg }, _content, _resources): Promise<FilePath[]> {
       // glob all non MD/MDX/HTML files in content folder and copy it over
       const assetsPath = argv.output
diff --git a/quartz/plugins/emitters/cname.ts b/quartz/plugins/emitters/cname.ts
index 3e17fea2efdfb..cbed2a8b4bb24 100644
--- a/quartz/plugins/emitters/cname.ts
+++ b/quartz/plugins/emitters/cname.ts
@@ -2,6 +2,7 @@ import { FilePath, joinSegments } from "../../util/path"
 import { QuartzEmitterPlugin } from "../types"
 import fs from "fs"
 import chalk from "chalk"
+import DepGraph from "../../depgraph"
 
 export function extractDomainFromBaseUrl(baseUrl: string) {
   const url = new URL(`https://${baseUrl}`)
@@ -13,6 +14,9 @@ export const CNAME: QuartzEmitterPlugin = () => ({
   getQuartzComponents() {
     return []
   },
+  async getDependencyGraph(_ctx, _content, _resources) {
+    return new DepGraph<FilePath>()
+  },
   async emit({ argv, cfg }, _content, _resources): Promise<FilePath[]> {
     if (!cfg.configuration.baseUrl) {
       console.warn(chalk.yellow("CNAME emitter requires `baseUrl` to be set in your configuration"))
diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts
index 4033bdf7b6b40..c3a60b2121cf3 100644
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@@ -14,6 +14,7 @@ import { googleFontHref, joinStyles } from "../../util/theme"
 import { Features, transform } from "lightningcss"
 import { transform as transpile } from "esbuild"
 import { write } from "./helpers"
+import DepGraph from "../../depgraph"
 
 type ComponentResources = {
   css: string[]
@@ -149,9 +150,10 @@ function addGlobalPageResources(
       loadTime: "afterDOMReady",
       contentType: "inline",
       script: `
-        const socket = new WebSocket('${wsUrl}')
-        socket.addEventListener('message', () => document.location.reload())
-      `,
+          const socket = new WebSocket('${wsUrl}')
+          // reload(true) ensures resources like images and scripts are fetched again in firefox
+          socket.addEventListener('message', () => document.location.reload(true))
+        `,
     })
   }
 }
@@ -171,6 +173,24 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
     getQuartzComponents() {
       return []
     },
+    async getDependencyGraph(ctx, content, _resources) {
+      // This emitter adds static resources to the `resources` parameter. One
+      // important resource this emitter adds is the code to start a websocket
+      // connection and listen to rebuild messages, which triggers a page reload.
+      // The resources parameter with the reload logic is later used by the
+      // ContentPage emitter while creating the final html page. In order for
+      // the reload logic to be included, and so for partial rebuilds to work,
+      // we need to run this emitter for all markdown files.
+      const graph = new DepGraph<FilePath>()
+
+      for (const [_tree, file] of content) {
+        const sourcePath = file.data.filePath!
+        const slug = file.data.slug!
+        graph.addEdge(sourcePath, joinSegments(ctx.argv.output, slug + ".html") as FilePath)
+      }
+
+      return graph
+    },
     async emit(ctx, _content, resources): Promise<FilePath[]> {
       const promises: Promise<FilePath>[] = []
       const cfg = ctx.cfg.configuration
diff --git a/quartz/plugins/emitters/contentIndex.ts b/quartz/plugins/emitters/contentIndex.ts
index 1c86b71b8d815..c0fef86d27100 100644
--- a/quartz/plugins/emitters/contentIndex.ts
+++ b/quartz/plugins/emitters/contentIndex.ts
@@ -7,6 +7,7 @@ import { QuartzEmitterPlugin } from "../types"
 import { toHtml } from "hast-util-to-html"
 import { write } from "./helpers"
 import { i18n } from "../../i18n"
+import DepGraph from "../../depgraph"
 
 export type ContentIndex = Map<FullSlug, ContentDetails>
 export type ContentDetails = {
@@ -92,6 +93,26 @@ export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {
   opts = { ...defaultOptions, ...opts }
   return {
     name: "ContentIndex",
+    async getDependencyGraph(ctx, content, _resources) {
+      const graph = new DepGraph<FilePath>()
+
+      for (const [_tree, file] of content) {
+        const sourcePath = file.data.filePath!
+
+        graph.addEdge(
+          sourcePath,
+          joinSegments(ctx.argv.output, "static/contentIndex.json") as FilePath,
+        )
+        if (opts?.enableSiteMap) {
+          graph.addEdge(sourcePath, joinSegments(ctx.argv.output, "sitemap.xml") as FilePath)
+        }
+        if (opts?.enableRSS) {
+          graph.addEdge(sourcePath, joinSegments(ctx.argv.output, "index.xml") as FilePath)
+        }
+      }
+
+      return graph
+    },
     async emit(ctx, content, _resources) {
       const cfg = ctx.cfg.configuration
       const emitted: FilePath[] = []
diff --git a/quartz/plugins/emitters/contentPage.tsx b/quartz/plugins/emitters/contentPage.tsx
index b11890b3208a4..e531b36e877dc 100644
--- a/quartz/plugins/emitters/contentPage.tsx
+++ b/quartz/plugins/emitters/contentPage.tsx
@@ -4,11 +4,12 @@ import HeaderConstructor from "../../components/Header"
 import BodyConstructor from "../../components/Body"
 import { pageResources, renderPage } from "../../components/renderPage"
 import { FullPageLayout } from "../../cfg"
-import { FilePath, pathToRoot } from "../../util/path"
+import { FilePath, joinSegments, pathToRoot } from "../../util/path"
 import { defaultContentPageLayout, sharedPageComponents } from "../../../quartz.layout"
 import { Content } from "../../components"
 import chalk from "chalk"
 import { write } from "./helpers"
+import DepGraph from "../../depgraph"
 
 export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
   const opts: FullPageLayout = {
@@ -27,6 +28,18 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
     getQuartzComponents() {
       return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
     },
+    async getDependencyGraph(ctx, content, _resources) {
+      // TODO handle transclusions
+      const graph = new DepGraph<FilePath>()
+
+      for (const [_tree, file] of content) {
+        const sourcePath = file.data.filePath!
+        const slug = file.data.slug!
+        graph.addEdge(sourcePath, joinSegments(ctx.argv.output, slug + ".html") as FilePath)
+      }
+
+      return graph
+    },
     async emit(ctx, content, resources): Promise<FilePath[]> {
       const cfg = ctx.cfg.configuration
       const fps: FilePath[] = []
@@ -60,7 +73,7 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
         fps.push(fp)
       }
 
-      if (!containsIndex) {
+      if (!containsIndex && !ctx.argv.fastRebuild) {
         console.log(
           chalk.yellow(
             `\nWarning: you seem to be missing an \`index.md\` home page file at the root of your \`${ctx.argv.directory}\` folder. This may cause errors when deploying.`,
diff --git a/quartz/plugins/emitters/folderPage.tsx b/quartz/plugins/emitters/folderPage.tsx
index 35c360aab6256..7a62cda56b2f3 100644
--- a/quartz/plugins/emitters/folderPage.tsx
+++ b/quartz/plugins/emitters/folderPage.tsx
@@ -19,6 +19,7 @@ import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.lay
 import { FolderContent } from "../../components"
 import { write } from "./helpers"
 import { i18n } from "../../i18n"
+import DepGraph from "../../depgraph"
 
 export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
   const opts: FullPageLayout = {
@@ -37,6 +38,13 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpt
     getQuartzComponents() {
       return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
     },
+    async getDependencyGraph(ctx, content, _resources) {
+      // Example graph:
+      // nested/file.md --> nested/file.html
+      //          \-------> nested/index.html
+      // TODO implement
+      return new DepGraph<FilePath>()
+    },
     async emit(ctx, content, resources): Promise<FilePath[]> {
       const fps: FilePath[] = []
       const allFiles = content.map((c) => c[1].data)
diff --git a/quartz/plugins/emitters/static.ts b/quartz/plugins/emitters/static.ts
index 9f93d9b0a4147..c52c6287968a0 100644
--- a/quartz/plugins/emitters/static.ts
+++ b/quartz/plugins/emitters/static.ts
@@ -2,12 +2,27 @@ import { FilePath, QUARTZ, joinSegments } from "../../util/path"
 import { QuartzEmitterPlugin } from "../types"
 import fs from "fs"
 import { glob } from "../../util/glob"
+import DepGraph from "../../depgraph"
 
 export const Static: QuartzEmitterPlugin = () => ({
   name: "Static",
   getQuartzComponents() {
     return []
   },
+  async getDependencyGraph({ argv, cfg }, _content, _resources) {
+    const graph = new DepGraph<FilePath>()
+
+    const staticPath = joinSegments(QUARTZ, "static")
+    const fps = await glob("**", staticPath, cfg.configuration.ignorePatterns)
+    for (const fp of fps) {
+      graph.addEdge(
+        joinSegments("static", fp) as FilePath,
+        joinSegments(argv.output, "static", fp) as FilePath,
+      )
+    }
+
+    return graph
+  },
   async emit({ argv, cfg }, _content, _resources): Promise<FilePath[]> {
     const staticPath = joinSegments(QUARTZ, "static")
     const fps = await glob("**", staticPath, cfg.configuration.ignorePatterns)
diff --git a/quartz/plugins/emitters/tagPage.tsx b/quartz/plugins/emitters/tagPage.tsx
index 2411c683729da..332c758d5b6f5 100644
--- a/quartz/plugins/emitters/tagPage.tsx
+++ b/quartz/plugins/emitters/tagPage.tsx
@@ -16,6 +16,7 @@ import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.lay
 import { TagContent } from "../../components"
 import { write } from "./helpers"
 import { i18n } from "../../i18n"
+import DepGraph from "../../depgraph"
 
 export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
   const opts: FullPageLayout = {
@@ -34,6 +35,10 @@ export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts)
     getQuartzComponents() {
       return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
     },
+    async getDependencyGraph(ctx, _content, _resources) {
+      // TODO implement
+      return new DepGraph<FilePath>()
+    },
     async emit(ctx, content, resources): Promise<FilePath[]> {
       const fps: FilePath[] = []
       const allFiles = content.map((c) => c[1].data)
diff --git a/quartz/plugins/types.ts b/quartz/plugins/types.ts
index a361bb9fdca89..a23f5d6f4630a 100644
--- a/quartz/plugins/types.ts
+++ b/quartz/plugins/types.ts
@@ -4,6 +4,7 @@ import { ProcessedContent } from "./vfile"
 import { QuartzComponent } from "../components/types"
 import { FilePath } from "../util/path"
 import { BuildCtx } from "../util/ctx"
+import DepGraph from "../depgraph"
 
 export interface PluginTypes {
   transformers: QuartzTransformerPluginInstance[]
@@ -38,4 +39,9 @@ export type QuartzEmitterPluginInstance = {
   name: string
   emit(ctx: BuildCtx, content: ProcessedContent[], resources: StaticResources): Promise<FilePath[]>
   getQuartzComponents(ctx: BuildCtx): QuartzComponent[]
+  getDependencyGraph?(
+    ctx: BuildCtx,
+    content: ProcessedContent[],
+    resources: StaticResources,
+  ): Promise<DepGraph<FilePath>>
 }
diff --git a/quartz/util/ctx.ts b/quartz/util/ctx.ts
index 13e0bf8644591..e056114184dc0 100644
--- a/quartz/util/ctx.ts
+++ b/quartz/util/ctx.ts
@@ -6,6 +6,7 @@ export interface Argv {
   verbose: boolean
   output: string
   serve: boolean
+  fastRebuild: boolean
   port: number
   wsPort: number
   remoteDevHost?: string

From a0d6daa3b4d736a9fe29b2ad15bea5f670f79dfa Mon Sep 17 00:00:00 2001
From: Alq <ahmed.elq53@gmail.com>
Date: Sat, 10 Feb 2024 20:02:28 +0300
Subject: [PATCH 060/115] feat(i18n): add Arabic translation (#837)

* feat(i18n): add Arabic translation

* chore: format
---
 quartz/i18n/index.ts         | 21 ++++++++++++
 quartz/i18n/locales/ar-SA.ts | 65 ++++++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+)
 create mode 100644 quartz/i18n/locales/ar-SA.ts

diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
index 7fd978e6dfd36..f9758d36b8288 100644
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@@ -6,6 +6,7 @@ import de from "./locales/de-DE"
 import nl from "./locales/nl-NL"
 import ro from "./locales/ro-RO"
 import es from "./locales/es-ES"
+import ar from "./locales/ar-SA"
 import uk from "./locales/uk-UA"
 
 export const TRANSLATIONS = {
@@ -17,6 +18,26 @@ export const TRANSLATIONS = {
   "ro-RO": ro,
   "ro-MD": ro,
   "es-ES": es,
+  "ar-SA": ar,
+  "ar-AE": ar,
+  "ar-QA": ar,
+  "ar-BH": ar,
+  "ar-KW": ar,
+  "ar-OM": ar,
+  "ar-YE": ar,
+  "ar-IR": ar,
+  "ar-SY": ar,
+  "ar-IQ": ar,
+  "ar-JO": ar,
+  "ar-PL": ar,
+  "ar-LB": ar,
+  "ar-EG": ar,
+  "ar-SD": ar,
+  "ar-LY": ar,
+  "ar-MA": ar,
+  "ar-TN": ar,
+  "ar-DZ": ar,
+  "ar-MR": ar,
   "uk-UA": uk,
 } as const
 
diff --git a/quartz/i18n/locales/ar-SA.ts b/quartz/i18n/locales/ar-SA.ts
new file mode 100644
index 0000000000000..9c29b4d5ec89c
--- /dev/null
+++ b/quartz/i18n/locales/ar-SA.ts
@@ -0,0 +1,65 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "غير معنون",
+    description: "لم يتم تقديم أي وصف",
+  },
+  components: {
+    backlinks: {
+      title: "وصلات العودة",
+      noBacklinksFound: "لا يوجد وصلات عودة",
+    },
+    themeToggle: {
+      lightMode: "الوضع النهاري",
+      darkMode: "الوضع الليلي",
+    },
+    explorer: {
+      title: "المستعرض",
+    },
+    footer: {
+      createdWith: "أُنشئ باستخدام",
+    },
+    graph: {
+      title: "التمثيل التفاعلي",
+    },
+    recentNotes: {
+      title: "آخر الملاحظات",
+      seeRemainingMore: ({ remaining }) => `تصفح ${remaining} أكثر →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `مقتبس من ${targetSlug}`,
+      linkToOriginal: "وصلة للملاحظة الرئيسة",
+    },
+    search: {
+      title: "بحث",
+      searchBarPlaceholder: "ابحث عن شيء ما",
+    },
+    tableOfContents: {
+      title: "فهرس المحتويات",
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "آخر الملاحظات",
+      lastFewNotes: ({ count }) => `آخر ${count} ملاحظة`,
+    },
+    error: {
+      title: "غير موجود",
+      notFound: "إما أن هذه الصفحة خاصة أو غير موجودة.",
+    },
+    folderContent: {
+      folder: "مجلد",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "يوجد عنصر واحد فقط تحت هذا المجلد" : `يوجد ${count} عناصر تحت هذا المجلد.`,
+    },
+    tagContent: {
+      tag: "الوسم",
+      tagIndex: "مؤشر الوسم",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "يوجد عنصر واحد فقط تحت هذا الوسم" : `يوجد ${count} عناصر تحت هذا الوسم.`,
+      showingFirst: ({ count }) => `إظهار أول ${count} أوسمة.`,
+      totalTags: ({ count }) => `يوجد ${count} أوسمة.`,
+    },
+  },
+} as const satisfies Translation

From db5e701810f17aef70a2bea078de27f0e4386c06 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Sat, 10 Feb 2024 17:09:57 -0500
Subject: [PATCH 061/115] feat(i18n): support parsing callouts (#834)

* feat(i18n): support parsing callouts

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: move callout into components

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: update arabic translation

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: make sure to use correct items

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/i18n/index.ts               |  3 ++-
 quartz/i18n/locales/ar-SA.ts       | 15 +++++++++++++++
 quartz/i18n/locales/de-DE.ts       | 15 +++++++++++++++
 quartz/i18n/locales/definition.ts  | 17 +++++++++++++++++
 quartz/i18n/locales/en-US.ts       | 15 +++++++++++++++
 quartz/i18n/locales/es-ES.ts       | 15 +++++++++++++++
 quartz/i18n/locales/fr-FR.ts       | 15 +++++++++++++++
 quartz/i18n/locales/ja-JP.ts       | 15 +++++++++++++++
 quartz/i18n/locales/nl-NL.ts       | 15 +++++++++++++++
 quartz/i18n/locales/ro-RO.ts       | 15 +++++++++++++++
 quartz/i18n/locales/uk-UA.ts       | 15 +++++++++++++++
 quartz/plugins/transformers/ofm.ts | 13 ++++++++++---
 12 files changed, 164 insertions(+), 4 deletions(-)

diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
index f9758d36b8288..a422acb79f944 100644
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@@ -1,4 +1,4 @@
-import { Translation } from "./locales/definition"
+import { Translation, CalloutTranslation } from "./locales/definition"
 import en from "./locales/en-US"
 import fr from "./locales/fr-FR"
 import ja from "./locales/ja-JP"
@@ -44,3 +44,4 @@ export const TRANSLATIONS = {
 export const defaultTranslation = "en-US"
 export const i18n = (locale: ValidLocale): Translation => TRANSLATIONS[locale ?? defaultTranslation]
 export type ValidLocale = keyof typeof TRANSLATIONS
+export type ValidCallout = keyof CalloutTranslation
diff --git a/quartz/i18n/locales/ar-SA.ts b/quartz/i18n/locales/ar-SA.ts
index 9c29b4d5ec89c..d8efeffefd116 100644
--- a/quartz/i18n/locales/ar-SA.ts
+++ b/quartz/i18n/locales/ar-SA.ts
@@ -6,6 +6,21 @@ export default {
     description: "لم يتم تقديم أي وصف",
   },
   components: {
+    callout: {
+      note: "ملاحظة",
+      abstract: "ملخص",
+      info: "معلومات",
+      todo: "للقيام",
+      tip: "نصيحة",
+      success: "نجاح",
+      question: "سؤال",
+      warning: "تحذير",
+      failure: "فشل",
+      danger: "خطر",
+      bug: "خلل",
+      example: "مثال",
+      quote: "اقتباس",
+    },
     backlinks: {
       title: "وصلات العودة",
       noBacklinksFound: "لا يوجد وصلات عودة",
diff --git a/quartz/i18n/locales/de-DE.ts b/quartz/i18n/locales/de-DE.ts
index c6531bef4bd6f..f2125bf601b90 100644
--- a/quartz/i18n/locales/de-DE.ts
+++ b/quartz/i18n/locales/de-DE.ts
@@ -6,6 +6,21 @@ export default {
     description: "Keine Beschreibung angegeben",
   },
   components: {
+    callout: {
+      note: "Hinweis",
+      abstract: "Zusammenfassung",
+      info: "Info",
+      todo: "Zu erledigen",
+      tip: "Tipp",
+      success: "Erfolg",
+      question: "Frage",
+      warning: "Warnung",
+      failure: "Misserfolg",
+      danger: "Gefahr",
+      bug: "Fehler",
+      example: "Beispiel",
+      quote: "Zitat",
+    },
     backlinks: {
       title: "Backlinks",
       noBacklinksFound: "Keine Backlinks gefunden",
diff --git a/quartz/i18n/locales/definition.ts b/quartz/i18n/locales/definition.ts
index de607eb56fe00..baf2a58751d2d 100644
--- a/quartz/i18n/locales/definition.ts
+++ b/quartz/i18n/locales/definition.ts
@@ -1,11 +1,28 @@
 import { FullSlug } from "../../util/path"
 
+export interface CalloutTranslation {
+  note: string
+  abstract: string
+  info: string
+  todo: string
+  tip: string
+  success: string
+  question: string
+  warning: string
+  failure: string
+  danger: string
+  bug: string
+  example: string
+  quote: string
+}
+
 export interface Translation {
   propertyDefaults: {
     title: string
     description: string
   }
   components: {
+    callout: CalloutTranslation
     backlinks: {
       title: string
       noBacklinksFound: string
diff --git a/quartz/i18n/locales/en-US.ts b/quartz/i18n/locales/en-US.ts
index 6ba6d0e5d90e6..3ba28a0d5e986 100644
--- a/quartz/i18n/locales/en-US.ts
+++ b/quartz/i18n/locales/en-US.ts
@@ -6,6 +6,21 @@ export default {
     description: "No description provided",
   },
   components: {
+    callout: {
+      note: "Note",
+      abstract: "Abstract",
+      info: "Info",
+      todo: "Todo",
+      tip: "Tip",
+      success: "Success",
+      question: "Question",
+      warning: "Warning",
+      failure: "Failure",
+      danger: "Danger",
+      bug: "Bug",
+      example: "Example",
+      quote: "Quote",
+    },
     backlinks: {
       title: "Backlinks",
       noBacklinksFound: "No backlinks found",
diff --git a/quartz/i18n/locales/es-ES.ts b/quartz/i18n/locales/es-ES.ts
index 4d395429d01dc..92a74a03ce72d 100644
--- a/quartz/i18n/locales/es-ES.ts
+++ b/quartz/i18n/locales/es-ES.ts
@@ -6,6 +6,21 @@ export default {
     description: "Sin descripción",
   },
   components: {
+    callout: {
+      note: "Nota",
+      abstract: "Resumen",
+      info: "Información",
+      todo: "Por hacer",
+      tip: "Consejo",
+      success: "Éxito",
+      question: "Pregunta",
+      warning: "Advertencia",
+      failure: "Fallo",
+      danger: "Peligro",
+      bug: "Error",
+      example: "Ejemplo",
+      quote: "Cita",
+    },
     backlinks: {
       title: "Enlaces de Retroceso",
       noBacklinksFound: "No se han encontrado enlaces traseros",
diff --git a/quartz/i18n/locales/fr-FR.ts b/quartz/i18n/locales/fr-FR.ts
index b30ff049f6181..fee1ad921c564 100644
--- a/quartz/i18n/locales/fr-FR.ts
+++ b/quartz/i18n/locales/fr-FR.ts
@@ -6,6 +6,21 @@ export default {
     description: "Aucune description fournie",
   },
   components: {
+    callout: {
+      note: "Note",
+      abstract: "Résumé",
+      info: "Info",
+      todo: "À faire",
+      tip: "Conseil",
+      success: "Succès",
+      question: "Question",
+      warning: "Avertissement",
+      failure: "Échec",
+      danger: "Danger",
+      bug: "Bogue",
+      example: "Exemple",
+      quote: "Citation",
+    },
     backlinks: {
       title: "Liens retour",
       noBacklinksFound: "Aucun lien retour trouvé",
diff --git a/quartz/i18n/locales/ja-JP.ts b/quartz/i18n/locales/ja-JP.ts
index a886d84f8485b..f684c36b30640 100644
--- a/quartz/i18n/locales/ja-JP.ts
+++ b/quartz/i18n/locales/ja-JP.ts
@@ -6,6 +6,21 @@ export default {
     description: "説明なし",
   },
   components: {
+    callout: {
+      note: "ノート",
+      abstract: "抄録",
+      info: "情報",
+      todo: "やるべきこと",
+      tip: "ヒント",
+      success: "成功",
+      question: "質問",
+      warning: "警告",
+      failure: "失敗",
+      danger: "危険",
+      bug: "バグ",
+      example: "例",
+      quote: "引用",
+    },
     backlinks: {
       title: "バックリンク",
       noBacklinksFound: "バックリンクはありません",
diff --git a/quartz/i18n/locales/nl-NL.ts b/quartz/i18n/locales/nl-NL.ts
index 5426a1e1f5e66..b40362355d69f 100644
--- a/quartz/i18n/locales/nl-NL.ts
+++ b/quartz/i18n/locales/nl-NL.ts
@@ -6,6 +6,21 @@ export default {
     description: "Geen beschrijving gegeven.",
   },
   components: {
+    callout: {
+      note: "Notitie",
+      abstract: "Samenvatting",
+      info: "Info",
+      todo: "Te doen",
+      tip: "Tip",
+      success: "Succes",
+      question: "Vraag",
+      warning: "Waarschuwing",
+      failure: "Mislukking",
+      danger: "Gevaar",
+      bug: "Bug",
+      example: "Voorbeeld",
+      quote: "Citaat",
+    },
     backlinks: {
       title: "Backlinks",
       noBacklinksFound: "Geen backlinks gevonden",
diff --git a/quartz/i18n/locales/ro-RO.ts b/quartz/i18n/locales/ro-RO.ts
index 8fce4a90de32a..39f1344be925d 100644
--- a/quartz/i18n/locales/ro-RO.ts
+++ b/quartz/i18n/locales/ro-RO.ts
@@ -6,6 +6,21 @@ export default {
     description: "Nici o descriere furnizată",
   },
   components: {
+    callout: {
+      note: "Notă",
+      abstract: "Rezumat",
+      info: "Informație",
+      todo: "De făcut",
+      tip: "Sfat",
+      success: "Succes",
+      question: "Întrebare",
+      warning: "Avertisment",
+      failure: "Eșec",
+      danger: "Pericol",
+      bug: "Bug",
+      example: "Exemplu",
+      quote: "Citat",
+    },
     backlinks: {
       title: "Legături înapoi",
       noBacklinksFound: "Nu s-au găsit legături înapoi",
diff --git a/quartz/i18n/locales/uk-UA.ts b/quartz/i18n/locales/uk-UA.ts
index bf664b6f8a2b0..d60b1f8cf380d 100644
--- a/quartz/i18n/locales/uk-UA.ts
+++ b/quartz/i18n/locales/uk-UA.ts
@@ -6,6 +6,21 @@ export default {
     description: "Опис не надано",
   },
   components: {
+    callout: {
+      note: "Примітка",
+      abstract: "Абстракт",
+      info: "Інформація",
+      todo: "Завдання",
+      tip: "Порада",
+      success: "Успіх",
+      question: "Питання",
+      warning: "Попередження",
+      failure: "Невдача",
+      danger: "Небезпека",
+      bug: "Баг",
+      example: "Приклад",
+      quote: "Цитата",
+    },
     backlinks: {
       title: "Зворотні посилання",
       noBacklinksFound: "Зворотних посилань не знайдено",
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index f8a28c486b72c..a9d39458dfd3c 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -1,5 +1,5 @@
 import { QuartzTransformerPlugin } from "../types"
-import { Root, Html, BlockContent, DefinitionContent, Paragraph, Code } from "mdast"
+import { Blockquote, Root, Html, BlockContent, DefinitionContent, Paragraph, Code } from "mdast"
 import { Element, Literal, Root as HtmlRoot } from "hast"
 import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
 import { slug as slugAnchor } from "github-slugger"
@@ -17,6 +17,7 @@ import { toHtml } from "hast-util-to-html"
 import { PhrasingContent } from "mdast-util-find-and-replace/lib"
 import { capitalize } from "../../util/lang"
 import { PluggableList } from "unified"
+import { ValidCallout, i18n } from "../../i18n"
 
 export interface Options {
   comments: boolean
@@ -185,8 +186,9 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
 
       return src
     },
-    markdownPlugins() {
+    markdownPlugins(ctx) {
       const plugins: PluggableList = []
+      const cfg = ctx.cfg.configuration
 
       // regex replacements
       plugins.push(() => {
@@ -407,7 +409,12 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                   children: [
                     {
                       type: "text",
-                      value: useDefaultTitle ? capitalize(calloutType) : titleContent + " ",
+                      value: useDefaultTitle
+                        ? capitalize(
+                            i18n(cfg.locale).components.callout[calloutType as ValidCallout] ??
+                              calloutType,
+                          )
+                        : titleContent + " ",
                     },
                     ...restOfTitle,
                   ],

From 6ae0bb0908b2408aee7c75ee9289413ab8606fa0 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Sat, 10 Feb 2024 17:17:41 -0500
Subject: [PATCH 062/115] chore: move fonts all into static folder (#835)

* chore: move fonts all into static folder

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* chore: update formatter

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
---
 quartz/plugins/emitters/componentResources.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts
index c3a60b2121cf3..290cb6f2afea5 100644
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@@ -221,7 +221,10 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
             // the static name of this file.
             const [filename, ext] = url.split("/").pop()!.split(".")
 
-            googleFontsStyleSheet = googleFontsStyleSheet.replace(url, `/fonts/${filename}.ttf`)
+            googleFontsStyleSheet = googleFontsStyleSheet.replace(
+              url,
+              `/static/fonts/${filename}.ttf`,
+            )
 
             promises.push(
               fetch(url)
@@ -234,7 +237,7 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
                 .then((buf) =>
                   write({
                     ctx,
-                    slug: joinSegments("fonts", filename) as FullSlug,
+                    slug: joinSegments("static", "fonts", filename) as FullSlug,
                     ext: `.${ext}`,
                     content: Buffer.from(buf),
                   }),

From ab80eba7941eb7dbf4944ec63d52e1bfc7925ddc Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Sat, 10 Feb 2024 17:19:17 -0500
Subject: [PATCH 063/115] chore(callouts): remove unnecessary whitespaces after
 class name (#833)

Though we should have a plugins that just strip whitespace in all node
class.

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/plugins/transformers/ofm.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index a9d39458dfd3c..89b297b2e987f 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -450,13 +450,19 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                 // replace first line of blockquote with title and rest of the paragraph text
                 node.children.splice(0, 1, ...blockquoteContent)
 
+                const classNames = ["callout", calloutType]
+                if (collapse) {
+                  classNames.push("is-collapsible")
+                }
+                if (defaultState === "collapsed") {
+                  classNames.push("is-collapsed")
+                }
+
                 // add properties to base blockquote
                 node.data = {
                   hProperties: {
                     ...(node.data?.hProperties ?? {}),
-                    className: `callout ${calloutType} ${collapse ? "is-collapsible" : ""} ${
-                      defaultState === "collapsed" ? "is-collapsed" : ""
-                    }`,
+                    className: classNames.join(" "),
                     "data-callout": calloutType,
                     "data-callout-fold": collapse,
                   },

From 3518ca9e2a04f326eda25ada2393a4bbfde10738 Mon Sep 17 00:00:00 2001
From: Alq <ahmed.elq53@gmail.com>
Date: Sun, 11 Feb 2024 21:43:08 +0300
Subject: [PATCH 064/115] feat(i18n): localize the min read string (#838)

* feat(i18n): localize the min read string fixes #825

* chore: format
---
 quartz/components/ContentMeta.tsx | 8 ++++++--
 quartz/i18n/locales/ar-SA.ts      | 8 ++++++++
 quartz/i18n/locales/de-DE.ts      | 3 +++
 quartz/i18n/locales/definition.ts | 3 +++
 quartz/i18n/locales/en-US.ts      | 3 +++
 quartz/i18n/locales/es-ES.ts      | 3 +++
 quartz/i18n/locales/fr-FR.ts      | 3 +++
 quartz/i18n/locales/ja-JP.ts      | 3 +++
 quartz/i18n/locales/nl-NL.ts      | 3 +++
 quartz/i18n/locales/ro-RO.ts      | 3 +++
 quartz/i18n/locales/uk-UA.ts      | 3 +++
 11 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/quartz/components/ContentMeta.tsx b/quartz/components/ContentMeta.tsx
index 6cd083e692b40..bcbe4285de50c 100644
--- a/quartz/components/ContentMeta.tsx
+++ b/quartz/components/ContentMeta.tsx
@@ -2,6 +2,7 @@ import { formatDate, getDate } from "./Date"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import readingTime from "reading-time"
 import { classNames } from "../util/lang"
+import { i18n } from "../i18n"
 
 interface ContentMetaOptions {
   /**
@@ -30,8 +31,11 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
 
       // Display reading time if enabled
       if (options.showReadingTime) {
-        const { text: timeTaken, words: _words } = readingTime(text)
-        segments.push(timeTaken)
+        const { minutes, words: _words } = readingTime(text)
+        const displayedTime = i18n(cfg.locale).components.contentMeta.readingTime({
+          minutes: Math.ceil(minutes),
+        })
+        segments.push(displayedTime)
       }
 
       return <p class={classNames(displayClass, "content-meta")}>{segments.join(", ")}</p>
diff --git a/quartz/i18n/locales/ar-SA.ts b/quartz/i18n/locales/ar-SA.ts
index d8efeffefd116..f7048103fc616 100644
--- a/quartz/i18n/locales/ar-SA.ts
+++ b/quartz/i18n/locales/ar-SA.ts
@@ -53,6 +53,14 @@ export default {
     tableOfContents: {
       title: "فهرس المحتويات",
     },
+    contentMeta: {
+      readingTime: ({ minutes }) =>
+        minutes == 1
+          ? `دقيقة أو أقل للقراءة`
+          : minutes == 2
+            ? `دقيقتان للقراءة`
+            : `${minutes} دقائق للقراءة`,
+    },
   },
   pages: {
     rss: {
diff --git a/quartz/i18n/locales/de-DE.ts b/quartz/i18n/locales/de-DE.ts
index f2125bf601b90..e3821944b0bfb 100644
--- a/quartz/i18n/locales/de-DE.ts
+++ b/quartz/i18n/locales/de-DE.ts
@@ -53,6 +53,9 @@ export default {
     tableOfContents: {
       title: "Inhaltsverzeichnis",
     },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min read`,
+    },
   },
   pages: {
     rss: {
diff --git a/quartz/i18n/locales/definition.ts b/quartz/i18n/locales/definition.ts
index baf2a58751d2d..1d5d3dda6f3dc 100644
--- a/quartz/i18n/locales/definition.ts
+++ b/quartz/i18n/locales/definition.ts
@@ -55,6 +55,9 @@ export interface Translation {
     tableOfContents: {
       title: string
     }
+    contentMeta: {
+      readingTime: (variables: { minutes: number }) => string
+    }
   }
   pages: {
     rss: {
diff --git a/quartz/i18n/locales/en-US.ts b/quartz/i18n/locales/en-US.ts
index 3ba28a0d5e986..4a308d79a7cd2 100644
--- a/quartz/i18n/locales/en-US.ts
+++ b/quartz/i18n/locales/en-US.ts
@@ -53,6 +53,9 @@ export default {
     tableOfContents: {
       title: "Table of Contents",
     },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min read`,
+    },
   },
   pages: {
     rss: {
diff --git a/quartz/i18n/locales/es-ES.ts b/quartz/i18n/locales/es-ES.ts
index 92a74a03ce72d..f59d201a3b37f 100644
--- a/quartz/i18n/locales/es-ES.ts
+++ b/quartz/i18n/locales/es-ES.ts
@@ -53,6 +53,9 @@ export default {
     tableOfContents: {
       title: "Tabla de Contenidos",
     },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min read`,
+    },
   },
   pages: {
     rss: {
diff --git a/quartz/i18n/locales/fr-FR.ts b/quartz/i18n/locales/fr-FR.ts
index fee1ad921c564..8b7229201208a 100644
--- a/quartz/i18n/locales/fr-FR.ts
+++ b/quartz/i18n/locales/fr-FR.ts
@@ -53,6 +53,9 @@ export default {
     tableOfContents: {
       title: "Table des Matières",
     },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min read`,
+    },
   },
   pages: {
     rss: {
diff --git a/quartz/i18n/locales/ja-JP.ts b/quartz/i18n/locales/ja-JP.ts
index f684c36b30640..d429db411a934 100644
--- a/quartz/i18n/locales/ja-JP.ts
+++ b/quartz/i18n/locales/ja-JP.ts
@@ -53,6 +53,9 @@ export default {
     tableOfContents: {
       title: "目次",
     },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min read`,
+    },
   },
   pages: {
     rss: {
diff --git a/quartz/i18n/locales/nl-NL.ts b/quartz/i18n/locales/nl-NL.ts
index b40362355d69f..3ff3e8cd98f95 100644
--- a/quartz/i18n/locales/nl-NL.ts
+++ b/quartz/i18n/locales/nl-NL.ts
@@ -53,6 +53,9 @@ export default {
     tableOfContents: {
       title: "Inhoudsopgave",
     },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min read`,
+    },
   },
   pages: {
     rss: {
diff --git a/quartz/i18n/locales/ro-RO.ts b/quartz/i18n/locales/ro-RO.ts
index 39f1344be925d..a1c216ded4daa 100644
--- a/quartz/i18n/locales/ro-RO.ts
+++ b/quartz/i18n/locales/ro-RO.ts
@@ -53,6 +53,9 @@ export default {
     tableOfContents: {
       title: "Cuprins",
     },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min read`,
+    },
   },
   pages: {
     rss: {
diff --git a/quartz/i18n/locales/uk-UA.ts b/quartz/i18n/locales/uk-UA.ts
index d60b1f8cf380d..c997a6972c7dd 100644
--- a/quartz/i18n/locales/uk-UA.ts
+++ b/quartz/i18n/locales/uk-UA.ts
@@ -53,6 +53,9 @@ export default {
     tableOfContents: {
       title: "Зміст",
     },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min read`,
+    },
   },
   pages: {
     rss: {

From af5f5abad4c3b01315a8ccda1c2c9aef9d26d695 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Silviu=20Loren=C8=9B?=
 <124451350+smilorent@users.noreply.github.com>
Date: Sun, 11 Feb 2024 20:51:10 +0200
Subject: [PATCH 065/115] docs: add documentation for Umami analytics
 integration (#846)

---
 docs/configuration.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index b0c8506236314..366430cc2f799 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -25,8 +25,9 @@ This part of the configuration concerns anything that can affect the whole site.
 - `enablePopovers`: whether to enable [[popover previews]] on your site.
 - `analytics`: what to use for analytics on your site. Values can be
   - `null`: don't use analytics;
-  - `{ provider: 'plausible' }`: use [Plausible](https://plausible.io/), a privacy-friendly alternative to Google Analytics; or
-  - `{ provider: 'google', tagId: <your-google-tag> }`: use Google Analytics
+  - `{ provider: 'google', tagId: '<your-google-tag>' }`: use Google Analytics;
+  - `{ provider: 'plausible' }` (managed) or `{ provider: 'plausible', host: '<your-plausible-host>' }` (self-hosted): use [Plausible](https://plausible.io/);
+  - `{ provider: 'umami', host: '<your-umami-host>', websiteId: '<your-umami-website-id>' }`: use [Umami](https://umami.is/);
 - `locale`: used for [[i18n]] and date formatting
 - `baseUrl`: this is used for sitemaps and RSS feeds that require an absolute URL to know where the canonical 'home' of your site lives. This is normally the deployed URL of your site (e.g. `quartz.jzhao.xyz` for this site). Do not include the protocol (i.e. `https://`) or any leading or trailing slashes.
   - This should also include the subpath if you are [[hosting]] on GitHub pages without a custom domain. For example, if my repository is `jackyzha0/quartz`, GitHub pages would deploy to `https://jackyzha0.github.io/quartz` and the `baseUrl` would be `jackyzha0.github.io/quartz`

From ab0e20b4d0ad1e650126ffd0afa7d0ed6bd46da2 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 11 Feb 2024 10:57:24 -0800
Subject: [PATCH 066/115] chore: refactor out and export endsWith

---
 quartz/components/Head.tsx                |  2 +-
 quartz/components/pages/FolderContent.tsx |  6 +--
 quartz/plugins/emitters/folderPage.tsx    |  6 +--
 quartz/plugins/transformers/links.ts      |  4 +-
 quartz/util/path.ts                       | 49 ++++++++++++-----------
 5 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index dae81c73120c1..8292acc0533fa 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -1,5 +1,5 @@
 import { i18n } from "../i18n"
-import { FullSlug, _stripSlashes, joinSegments, pathToRoot } from "../util/path"
+import { FullSlug, joinSegments, pathToRoot } from "../util/path"
 import { JSResourceToScriptElement } from "../util/resources"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
diff --git a/quartz/components/pages/FolderContent.tsx b/quartz/components/pages/FolderContent.tsx
index b954ea21c42c5..d3f28ddf19682 100644
--- a/quartz/components/pages/FolderContent.tsx
+++ b/quartz/components/pages/FolderContent.tsx
@@ -3,7 +3,7 @@ import path from "path"
 
 import style from "../styles/listPage.scss"
 import { PageList } from "../PageList"
-import { _stripSlashes, simplifySlug } from "../../util/path"
+import { stripSlashes, simplifySlug } from "../../util/path"
 import { Root } from "hast"
 import { htmlToJsx } from "../../util/jsx"
 import { i18n } from "../../i18n"
@@ -24,9 +24,9 @@ export default ((opts?: Partial<FolderContentOptions>) => {
 
   function FolderContent(props: QuartzComponentProps) {
     const { tree, fileData, allFiles, cfg } = props
-    const folderSlug = _stripSlashes(simplifySlug(fileData.slug!))
+    const folderSlug = stripSlashes(simplifySlug(fileData.slug!))
     const allPagesInFolder = allFiles.filter((file) => {
-      const fileSlug = _stripSlashes(simplifySlug(file.slug!))
+      const fileSlug = stripSlashes(simplifySlug(file.slug!))
       const prefixed = fileSlug.startsWith(folderSlug) && fileSlug !== folderSlug
       const folderParts = folderSlug.split(path.posix.sep)
       const fileParts = fileSlug.split(path.posix.sep)
diff --git a/quartz/plugins/emitters/folderPage.tsx b/quartz/plugins/emitters/folderPage.tsx
index 7a62cda56b2f3..690fa56f770b1 100644
--- a/quartz/plugins/emitters/folderPage.tsx
+++ b/quartz/plugins/emitters/folderPage.tsx
@@ -10,7 +10,7 @@ import {
   FilePath,
   FullSlug,
   SimpleSlug,
-  _stripSlashes,
+  stripSlashes,
   joinSegments,
   pathToRoot,
   simplifySlug,
@@ -38,7 +38,7 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpt
     getQuartzComponents() {
       return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
     },
-    async getDependencyGraph(ctx, content, _resources) {
+    async getDependencyGraph(_ctx, _content, _resources) {
       // Example graph:
       // nested/file.md --> nested/file.html
       //          \-------> nested/index.html
@@ -75,7 +75,7 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpt
       )
 
       for (const [tree, file] of content) {
-        const slug = _stripSlashes(simplifySlug(file.data.slug!)) as SimpleSlug
+        const slug = stripSlashes(simplifySlug(file.data.slug!)) as SimpleSlug
         if (folders.has(slug)) {
           folderDescriptions[slug] = [tree, file]
         }
diff --git a/quartz/plugins/transformers/links.ts b/quartz/plugins/transformers/links.ts
index 1ba0c8e586584..2d43be1b2c671 100644
--- a/quartz/plugins/transformers/links.ts
+++ b/quartz/plugins/transformers/links.ts
@@ -4,7 +4,7 @@ import {
   RelativeURL,
   SimpleSlug,
   TransformOptions,
-  _stripSlashes,
+  stripSlashes,
   simplifySlug,
   splitAnchor,
   transformLink,
@@ -115,7 +115,7 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
                   }
 
                   // need to decodeURIComponent here as WHATWG URL percent-encodes everything
-                  const full = decodeURIComponent(_stripSlashes(destCanonical, true)) as FullSlug
+                  const full = decodeURIComponent(stripSlashes(destCanonical, true)) as FullSlug
                   const simple = simplifySlug(full)
                   outgoing.add(simple)
                   node.properties["data-slug"] = full
diff --git a/quartz/util/path.ts b/quartz/util/path.ts
index 5cd79ba5f0e4a..dceb89bfa5149 100644
--- a/quartz/util/path.ts
+++ b/quartz/util/path.ts
@@ -23,22 +23,22 @@ export type FullSlug = SlugLike<"full">
 export function isFullSlug(s: string): s is FullSlug {
   const validStart = !(s.startsWith(".") || s.startsWith("/"))
   const validEnding = !s.endsWith("/")
-  return validStart && validEnding && !_containsForbiddenCharacters(s)
+  return validStart && validEnding && !containsForbiddenCharacters(s)
 }
 
 /** Shouldn't be a relative path and shouldn't have `/index` as an ending or a file extension. It _can_ however have a trailing slash to indicate a folder path. */
 export type SimpleSlug = SlugLike<"simple">
 export function isSimpleSlug(s: string): s is SimpleSlug {
   const validStart = !(s.startsWith(".") || (s.length > 1 && s.startsWith("/")))
-  const validEnding = !(s.endsWith("/index") || s === "index")
-  return validStart && !_containsForbiddenCharacters(s) && validEnding && !_hasFileExtension(s)
+  const validEnding = !endsWith(s, "index")
+  return validStart && !containsForbiddenCharacters(s) && validEnding && !_hasFileExtension(s)
 }
 
 /** Can be found on `href`s but can also be constructed for client-side navigation (e.g. search and graph) */
 export type RelativeURL = SlugLike<"relative">
 export function isRelativeURL(s: string): s is RelativeURL {
   const validStart = /^\.{1,2}/.test(s)
-  const validEnding = !(s.endsWith("/index") || s === "index")
+  const validEnding = !endsWith(s, "index")
   return validStart && validEnding && ![".md", ".html"].includes(_getFileExtension(s) ?? "")
 }
 
@@ -63,7 +63,7 @@ function sluggify(s: string): string {
 }
 
 export function slugifyFilePath(fp: FilePath, excludeExt?: boolean): FullSlug {
-  fp = _stripSlashes(fp) as FilePath
+  fp = stripSlashes(fp) as FilePath
   let ext = _getFileExtension(fp)
   const withoutFileExt = fp.replace(new RegExp(ext + "$"), "")
   if (excludeExt || [".md", ".html", undefined].includes(ext)) {
@@ -73,7 +73,7 @@ export function slugifyFilePath(fp: FilePath, excludeExt?: boolean): FullSlug {
   let slug = sluggify(withoutFileExt)
 
   // treat _index as index
-  if (_endsWith(slug, "_index")) {
+  if (endsWith(slug, "_index")) {
     slug = slug.replace(/_index$/, "index")
   }
 
@@ -81,21 +81,21 @@ export function slugifyFilePath(fp: FilePath, excludeExt?: boolean): FullSlug {
 }
 
 export function simplifySlug(fp: FullSlug): SimpleSlug {
-  const res = _stripSlashes(_trimSuffix(fp, "index"), true)
+  const res = stripSlashes(trimSuffix(fp, "index"), true)
   return (res.length === 0 ? "/" : res) as SimpleSlug
 }
 
 export function transformInternalLink(link: string): RelativeURL {
   let [fplike, anchor] = splitAnchor(decodeURI(link))
 
-  const folderPath = _isFolderPath(fplike)
+  const folderPath = isFolderPath(fplike)
   let segments = fplike.split("/").filter((x) => x.length > 0)
-  let prefix = segments.filter(_isRelativeSegment).join("/")
-  let fp = segments.filter((seg) => !_isRelativeSegment(seg) && seg !== "").join("/")
+  let prefix = segments.filter(isRelativeSegment).join("/")
+  let fp = segments.filter((seg) => !isRelativeSegment(seg) && seg !== "").join("/")
 
   // manually add ext here as we want to not strip 'index' if it has an extension
   const simpleSlug = simplifySlug(slugifyFilePath(fp as FilePath))
-  const joined = joinSegments(_stripSlashes(prefix), _stripSlashes(simpleSlug))
+  const joined = joinSegments(stripSlashes(prefix), stripSlashes(simpleSlug))
   const trail = folderPath ? "/" : ""
   const res = (_addRelativeToStart(joined) + trail + anchor) as RelativeURL
   return res
@@ -206,8 +206,8 @@ export function transformLink(src: FullSlug, target: string, opts: TransformOpti
   if (opts.strategy === "relative") {
     return targetSlug as RelativeURL
   } else {
-    const folderTail = _isFolderPath(targetSlug) ? "/" : ""
-    const canonicalSlug = _stripSlashes(targetSlug.slice(".".length))
+    const folderTail = isFolderPath(targetSlug) ? "/" : ""
+    const canonicalSlug = stripSlashes(targetSlug.slice(".".length))
     let [targetCanonical, targetAnchor] = splitAnchor(canonicalSlug)
 
     if (opts.strategy === "shortest") {
@@ -230,28 +230,29 @@ export function transformLink(src: FullSlug, target: string, opts: TransformOpti
   }
 }
 
-function _isFolderPath(fplike: string): boolean {
+// path helpers
+function isFolderPath(fplike: string): boolean {
   return (
     fplike.endsWith("/") ||
-    _endsWith(fplike, "index") ||
-    _endsWith(fplike, "index.md") ||
-    _endsWith(fplike, "index.html")
+    endsWith(fplike, "index") ||
+    endsWith(fplike, "index.md") ||
+    endsWith(fplike, "index.html")
   )
 }
 
-function _endsWith(s: string, suffix: string): boolean {
+export function endsWith(s: string, suffix: string): boolean {
   return s === suffix || s.endsWith("/" + suffix)
 }
 
-function _trimSuffix(s: string, suffix: string): string {
-  if (_endsWith(s, suffix)) {
+function trimSuffix(s: string, suffix: string): string {
+  if (endsWith(s, suffix)) {
     s = s.slice(0, -suffix.length)
   }
   return s
 }
 
-function _containsForbiddenCharacters(s: string): boolean {
-  return s.includes(" ") || s.includes("#") || s.includes("?")
+function containsForbiddenCharacters(s: string): boolean {
+  return s.includes(" ") || s.includes("#") || s.includes("?") || s.includes("&")
 }
 
 function _hasFileExtension(s: string): boolean {
@@ -262,11 +263,11 @@ function _getFileExtension(s: string): string | undefined {
   return s.match(/\.[A-Za-z0-9]+$/)?.[0]
 }
 
-function _isRelativeSegment(s: string): boolean {
+function isRelativeSegment(s: string): boolean {
   return /^\.{0,2}$/.test(s)
 }
 
-export function _stripSlashes(s: string, onlyStripPrefix?: boolean): string {
+export function stripSlashes(s: string, onlyStripPrefix?: boolean): string {
   if (s.startsWith("/")) {
     s = s.substring(1)
   }

From b5295e0f261dd6dc7903bae2102115340ccd46dd Mon Sep 17 00:00:00 2001
From: Neel Shah <neelshah.1998@gmail.com>
Date: Mon, 12 Feb 2024 00:38:12 +0530
Subject: [PATCH 067/115] fix: breadcrumbs displayName issue for file names
 ending with index (#839)

---
 quartz/components/Breadcrumbs.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/quartz/components/Breadcrumbs.tsx b/quartz/components/Breadcrumbs.tsx
index 3875f5e55c51e..116f9523a6bd8 100644
--- a/quartz/components/Breadcrumbs.tsx
+++ b/quartz/components/Breadcrumbs.tsx
@@ -68,8 +68,8 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
       folderIndex = new Map()
       // construct the index for the first time
       for (const file of allFiles) {
-        if (file.slug?.endsWith("index")) {
-          const folderParts = file.slug?.split("/")
+        const folderParts = file.slug?.split("/")
+        if (folderParts?.at(-1) === "index") {
           // 2nd last to exclude the /index
           const folderName = folderParts?.at(-2)
           if (folderName) {

From 2b39bd93f38414d7fb03458bbb51252ada194df0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Silviu=20Loren=C8=9B?=
 <124451350+smilorent@users.noreply.github.com>
Date: Sun, 11 Feb 2024 21:23:58 +0200
Subject: [PATCH 068/115] feat(i18n): localize the `min read` string for the
 `ro-RO` locale (#847)

* feat(i18n): localize `min read` string for `ro-RO` locale

* chore: run Prettier on `quartz/i18n/locales/ro-RO.ts`
---
 quartz/i18n/locales/ro-RO.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/quartz/i18n/locales/ro-RO.ts b/quartz/i18n/locales/ro-RO.ts
index a1c216ded4daa..556b1899503fe 100644
--- a/quartz/i18n/locales/ro-RO.ts
+++ b/quartz/i18n/locales/ro-RO.ts
@@ -54,7 +54,8 @@ export default {
       title: "Cuprins",
     },
     contentMeta: {
-      readingTime: ({ minutes }) => `${minutes} min read`,
+      readingTime: ({ minutes }) =>
+        minutes == 1 ? `lectură de 1 minut` : `lectură de ${minutes} minute`,
     },
   },
   pages: {

From 4a6a44950fbfb8cf0e60b62254fc38404c35a1b8 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 11 Feb 2024 11:26:14 -0800
Subject: [PATCH 069/115] fix(breadcrumbs): folder index by full path rather
 than folder name (closes #676)

---
 quartz/components/Breadcrumbs.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/quartz/components/Breadcrumbs.tsx b/quartz/components/Breadcrumbs.tsx
index 116f9523a6bd8..eab8a34e2a292 100644
--- a/quartz/components/Breadcrumbs.tsx
+++ b/quartz/components/Breadcrumbs.tsx
@@ -70,11 +70,7 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
       for (const file of allFiles) {
         const folderParts = file.slug?.split("/")
         if (folderParts?.at(-1) === "index") {
-          // 2nd last to exclude the /index
-          const folderName = folderParts?.at(-2)
-          if (folderName) {
-            folderIndex.set(folderName, file)
-          }
+          folderIndex.set(folderParts.slice(0, -1).join("/"), file)
         }
       }
     }
@@ -88,7 +84,7 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
         let curPathSegment = slugParts[i]
 
         // Try to resolve frontmatter folder title
-        const currentFile = folderIndex?.get(curPathSegment)
+        const currentFile = folderIndex?.get(slugParts.slice(0, i + 1).join("/"))
         if (currentFile) {
           const title = currentFile.frontmatter!.title
           if (title !== "index") {

From 998198cffb9bbcc8a75cd07310c06fabff6750bd Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 11 Feb 2024 11:27:16 -0800
Subject: [PATCH 070/115] chore(deps): bump esbuild-sass-plugin from 2.16.0 to
 2.16.1 (#778)

Bumps [esbuild-sass-plugin](https://github.com/glromeo/esbuild-sass-plugin) from 2.16.0 to 2.16.1.
- [Release notes](https://github.com/glromeo/esbuild-sass-plugin/releases)
- [Commits](https://github.com/glromeo/esbuild-sass-plugin/compare/v2.16.0...v2.16.1)

---
updated-dependencies:
- dependency-name: esbuild-sass-plugin
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1b6a4e0331fb3..e4881249541f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "chokidar": "^3.5.3",
         "cli-spinner": "^0.2.10",
         "d3": "^7.8.5",
-        "esbuild-sass-plugin": "^2.16.0",
+        "esbuild-sass-plugin": "^2.16.1",
         "flexsearch": "0.7.43",
         "github-slugger": "^2.0.0",
         "globby": "^14.0.0",
@@ -2052,9 +2052,9 @@
       }
     },
     "node_modules/esbuild-sass-plugin": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/esbuild-sass-plugin/-/esbuild-sass-plugin-2.16.0.tgz",
-      "integrity": "sha512-mGCe9MxNYvZ+j77Q/QFO+rwUGA36mojDXkOhtVmoyz1zwYbMaNrtVrmXwwYDleS/UMKTNU3kXuiTtPiAD3K+Pw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/esbuild-sass-plugin/-/esbuild-sass-plugin-2.16.1.tgz",
+      "integrity": "sha512-mBB2aEF0xk7yo+Q9pSUh8xYED/1O2wbAM6IauGkDrqy6pl9SbJNakLeLGXiNpNujWIudu8TJTZCv2L5AQYRXtA==",
       "dependencies": {
         "resolve": "^1.22.6",
         "sass": "^1.7.3"
diff --git a/package.json b/package.json
index 5c7570125e4cb..3235b5fa546ca 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "chokidar": "^3.5.3",
     "cli-spinner": "^0.2.10",
     "d3": "^7.8.5",
-    "esbuild-sass-plugin": "^2.16.0",
+    "esbuild-sass-plugin": "^2.16.1",
     "flexsearch": "0.7.43",
     "github-slugger": "^2.0.0",
     "globby": "^14.0.0",

From 389f2e8beee35c60da9b343883d0e09ca92f821b Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 11 Feb 2024 12:11:52 -0800
Subject: [PATCH 071/115] fix(ofm): allow diacretic marks in tag regex (closes
 #830)

---
 quartz/plugins/transformers/ofm.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 89b297b2e987f..e110e403f0730 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -118,7 +118,10 @@ const calloutLineRegex = new RegExp(/^> *\[\!\w+\][+-]?.*$/, "gm")
 // #(...)               -> capturing group, tag itself must start with #
 // (?:[-_\p{L}\d\p{Z}])+       -> non-capturing group, non-empty string of (Unicode-aware) alpha-numeric characters and symbols, hyphens and/or underscores
 // (?:\/[-_\p{L}\d\p{Z}]+)*)   -> non-capturing group, matches an arbitrary number of tag strings separated by "/"
-const tagRegex = new RegExp(/(?:^| )#((?:[-_\p{L}\p{Emoji}\d])+(?:\/[-_\p{L}\p{Emoji}\d]+)*)/, "gu")
+const tagRegex = new RegExp(
+  /(?:^| )#((?:[-_\p{L}\p{Emoji}\p{M}\d])+(?:\/[-_\p{L}\p{Emoji}\p{M}\d]+)*)/,
+  "gu",
+)
 const blockReferenceRegex = new RegExp(/\^([-_A-Za-z0-9]+)$/, "g")
 const ytLinkRegex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
 const videoExtensionRegex = new RegExp(/\.(mp4|webm|ogg|avi|mov|flv|wmv|mkv|mpg|mpeg|3gp|m4v)$/)

From 226891b9b1630c90835d1bc1a239c2ebbb5c9ff1 Mon Sep 17 00:00:00 2001
From: kabirgh <15871468+kabirgh@users.noreply.github.com>
Date: Sun, 11 Feb 2024 20:20:44 +0000
Subject: [PATCH 072/115] fix(fast rebuild): call only required emitters, don't
 always copy assets (#845)

* fix(fast rebuild): call only required emitters, don't always copy assets

* Type function
---
 quartz/build.ts                   |  5 +++--
 quartz/plugins/emitters/assets.ts | 12 +++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/quartz/build.ts b/quartz/build.ts
index ed166bb6c76f8..452a2f1aeba17 100644
--- a/quartz/build.ts
+++ b/quartz/build.ts
@@ -203,8 +203,9 @@ async function partialRebuildFromEntrypoint(
           const emitterGraph =
             (await emitter.getDependencyGraph?.(ctx, processedFiles, staticResources)) ?? null
 
-          // emmiter may not define a dependency graph. nothing to update if so
-          if (emitterGraph) {
+          // only update the graph if the emitter plugin uses the changed file
+          // eg. Assets plugin ignores md files, so we skip updating the graph
+          if (emitterGraph?.hasNode(fp)) {
             // merge the new dependencies into the dep graph
             dependencies[emitter.name]?.updateIncomingEdgesForNode(emitterGraph, fp)
           }
diff --git a/quartz/plugins/emitters/assets.ts b/quartz/plugins/emitters/assets.ts
index 379cd5b2d7df3..036b27da43f43 100644
--- a/quartz/plugins/emitters/assets.ts
+++ b/quartz/plugins/emitters/assets.ts
@@ -4,6 +4,13 @@ import path from "path"
 import fs from "fs"
 import { glob } from "../../util/glob"
 import DepGraph from "../../depgraph"
+import { Argv } from "../../util/ctx"
+import { QuartzConfig } from "../../cfg"
+
+const filesToCopy = async (argv: Argv, cfg: QuartzConfig) => {
+  // glob all non MD files in content folder and copy it over
+  return await glob("**", argv.directory, ["**/*.md", ...cfg.configuration.ignorePatterns])
+}
 
 export const Assets: QuartzEmitterPlugin = () => {
   return {
@@ -15,7 +22,7 @@ export const Assets: QuartzEmitterPlugin = () => {
       const { argv, cfg } = ctx
       const graph = new DepGraph<FilePath>()
 
-      const fps = await glob("**", argv.directory, ["**/*.md", ...cfg.configuration.ignorePatterns])
+      const fps = await filesToCopy(argv, cfg)
 
       for (const fp of fps) {
         const ext = path.extname(fp)
@@ -30,9 +37,8 @@ export const Assets: QuartzEmitterPlugin = () => {
       return graph
     },
     async emit({ argv, cfg }, _content, _resources): Promise<FilePath[]> {
-      // glob all non MD/MDX/HTML files in content folder and copy it over
       const assetsPath = argv.output
-      const fps = await glob("**", argv.directory, ["**/*.md", ...cfg.configuration.ignorePatterns])
+      const fps = await filesToCopy(argv, cfg)
       const res: FilePath[] = []
       for (const fp of fps) {
         const ext = path.extname(fp)

From 76f295620c5e8ffc21a78698468ab38b2916a461 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 12 Feb 2024 08:51:47 -0800
Subject: [PATCH 073/115] feat: add transclude-src to transclude 'link to
 original'

---
 quartz/components/renderPage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index 4643d0a3a7b79..33671d21d900b 100644
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -103,7 +103,7 @@ export function renderPage(
               {
                 type: "element",
                 tagName: "a",
-                properties: { href: inner.properties?.href, class: ["internal"] },
+                properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] },
                 children: [
                   { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
                 ],
@@ -140,7 +140,7 @@ export function renderPage(
             {
               type: "element",
               tagName: "a",
-              properties: { href: inner.properties?.href, class: ["internal"] },
+              properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] },
               children: [
                 { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
               ],
@@ -170,7 +170,7 @@ export function renderPage(
             {
               type: "element",
               tagName: "a",
-              properties: { href: inner.properties?.href, class: ["internal"] },
+              properties: { href: inner.properties?.href, class: ["internal", "transclude-src"] },
               children: [
                 { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
               ],

From 5dc4f21a4baf564ede85d8e702ef5b19c96657a3 Mon Sep 17 00:00:00 2001
From: Emile Bangma <ewjbangma@hotmail.com>
Date: Mon, 12 Feb 2024 17:58:00 +0100
Subject: [PATCH 074/115] feat(i18n): localize the min read string for the
 nl-NL locale (#850)

* Update min read translation

* Added nl_BE to Dutch

Added Flemish (nl_BE) to point to nl.

* Removed period to match other translations
---
 quartz/i18n/index.ts         | 1 +
 quartz/i18n/locales/nl-NL.ts | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
index a422acb79f944..c4fa4251c4597 100644
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@@ -15,6 +15,7 @@ export const TRANSLATIONS = {
   "ja-JP": ja,
   "de-DE": de,
   "nl-NL": nl,
+  "nl-BE": nl,
   "ro-RO": ro,
   "ro-MD": ro,
   "es-ES": es,
diff --git a/quartz/i18n/locales/nl-NL.ts b/quartz/i18n/locales/nl-NL.ts
index 3ff3e8cd98f95..e239be0e1d793 100644
--- a/quartz/i18n/locales/nl-NL.ts
+++ b/quartz/i18n/locales/nl-NL.ts
@@ -54,7 +54,8 @@ export default {
       title: "Inhoudsopgave",
     },
     contentMeta: {
-      readingTime: ({ minutes }) => `${minutes} min read`,
+      readingTime: ({ minutes }) =>
+        minutes === 1 ? "1 minuut leestijd" : `${minutes} minuten leestijd`,
     },
   },
   pages: {

From a7325eadc1483c181928425a4c7379427f21995a Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 12 Feb 2024 09:00:58 -0800
Subject: [PATCH 075/115] fix(analytics): umami custom host should be a string
 (closes #852)

---
 quartz/plugins/emitters/componentResources.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts
index 290cb6f2afea5..67bc69c3da77f 100644
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@@ -120,7 +120,7 @@ function addGlobalPageResources(
   } else if (cfg.analytics?.provider === "umami") {
     componentResources.afterDOMLoaded.push(`
       const umamiScript = document.createElement("script")
-      umamiScript.src = ${cfg.analytics.host} ?? "https://analytics.umami.is/script.js"
+      umamiScript.src = "${cfg.analytics.host}" ?? "https://analytics.umami.is/script.js"
       umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}")
       umamiScript.async = true
 

From 4a28d0e5d1b8fa866d0594a89ad72a751633dc8c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 13 Feb 2024 00:21:13 -0500
Subject: [PATCH 076/115] chore(deps-dev): bump tsx from 4.7.0 to 4.7.1 (#859)

Bumps [tsx](https://github.com/privatenumber/tsx) from 4.7.0 to 4.7.1.
- [Release notes](https://github.com/privatenumber/tsx/releases)
- [Changelog](https://github.com/privatenumber/tsx/blob/develop/release.config.cjs)
- [Commits](https://github.com/privatenumber/tsx/compare/v4.7.0...v4.7.1)

---
updated-dependencies:
- dependency-name: tsx
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e4881249541f0..891fcea53a49a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -80,7 +80,7 @@
         "@types/yargs": "^17.0.32",
         "esbuild": "^0.19.9",
         "prettier": "^3.2.4",
-        "tsx": "^4.7.0",
+        "tsx": "^4.7.1",
         "typescript": "^5.3.3"
       },
       "engines": {
@@ -5647,9 +5647,9 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/tsx": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.7.0.tgz",
-      "integrity": "sha512-I+t79RYPlEYlHn9a+KzwrvEwhJg35h/1zHsLC2JXvhC2mdynMv6Zxzvhv5EMV6VF5qJlLlkSnMVvdZV3PSIGcg==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.7.1.tgz",
+      "integrity": "sha512-8d6VuibXHtlN5E3zFkgY8u4DX7Y3Z27zvvPKVmLon/D4AjuKzarkUBTLDBgj9iTQ0hg5xM7c/mYiRVM+HETf0g==",
       "dev": true,
       "dependencies": {
         "esbuild": "~0.19.10",
diff --git a/package.json b/package.json
index 3235b5fa546ca..2d408b7304825 100644
--- a/package.json
+++ b/package.json
@@ -102,7 +102,7 @@
     "@types/yargs": "^17.0.32",
     "esbuild": "^0.19.9",
     "prettier": "^3.2.4",
-    "tsx": "^4.7.0",
+    "tsx": "^4.7.1",
     "typescript": "^5.3.3"
   }
 }

From 2c06e68ba6ccc5b079ca6ec96cc6e08c082d9fd8 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 13 Feb 2024 00:21:30 -0500
Subject: [PATCH 077/115] chore(deps): bump preact from 10.19.3 to 10.19.4
 (#858)

Bumps [preact](https://github.com/preactjs/preact) from 10.19.3 to 10.19.4.
- [Release notes](https://github.com/preactjs/preact/releases)
- [Commits](https://github.com/preactjs/preact/compare/10.19.3...10.19.4)

---
updated-dependencies:
- dependency-name: preact
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 891fcea53a49a..9a0d8cb4e4f04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,7 @@
         "mdast-util-to-hast": "^13.1.0",
         "mdast-util-to-string": "^4.0.0",
         "micromorph": "^0.4.5",
-        "preact": "^10.19.3",
+        "preact": "^10.19.4",
         "preact-render-to-string": "^6.3.1",
         "pretty-bytes": "^6.1.1",
         "pretty-time": "^1.1.0",
@@ -4454,9 +4454,9 @@
       }
     },
     "node_modules/preact": {
-      "version": "10.19.3",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.19.3.tgz",
-      "integrity": "sha512-nHHTeFVBTHRGxJXKkKu5hT8C/YWBkPso4/Gad6xuj5dbptt9iF9NZr9pHbPhBrnT2klheu7mHTxTZ/LjwJiEiQ==",
+      "version": "10.19.4",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.19.4.tgz",
+      "integrity": "sha512-dwaX5jAh0Ga8uENBX1hSOujmKWgx9RtL80KaKUFLc6jb4vCEAc3EeZ0rnQO/FO4VgjfPMfoLFWnNG8bHuZ9VLw==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
diff --git a/package.json b/package.json
index 2d408b7304825..e11e6c4da72e9 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     "mdast-util-to-hast": "^13.1.0",
     "mdast-util-to-string": "^4.0.0",
     "micromorph": "^0.4.5",
-    "preact": "^10.19.3",
+    "preact": "^10.19.4",
     "preact-render-to-string": "^6.3.1",
     "pretty-bytes": "^6.1.1",
     "pretty-time": "^1.1.0",

From a31e3f9458431883d8ee68961132b5cdb1ef2db6 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 13 Feb 2024 00:21:45 -0500
Subject: [PATCH 078/115] chore(deps): bump @floating-ui/dom from 1.6.1 to
 1.6.3 (#857)

Bumps [@floating-ui/dom](https://github.com/floating-ui/floating-ui/tree/HEAD/packages/dom) from 1.6.1 to 1.6.3.
- [Release notes](https://github.com/floating-ui/floating-ui/releases)
- [Changelog](https://github.com/floating-ui/floating-ui/blob/master/packages/dom/CHANGELOG.md)
- [Commits](https://github.com/floating-ui/floating-ui/commits/@floating-ui/dom@1.6.3/packages/dom)

---
updated-dependencies:
- dependency-name: "@floating-ui/dom"
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 12 ++++++------
 package.json      |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9a0d8cb4e4f04..7d1d9737ee756 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@clack/prompts": "^0.7.0",
-        "@floating-ui/dom": "^1.6.1",
+        "@floating-ui/dom": "^1.6.3",
         "@napi-rs/simple-git": "0.1.16",
         "async-mutex": "^0.4.1",
         "chalk": "^5.3.0",
@@ -486,12 +486,12 @@
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.1.tgz",
-      "integrity": "sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==",
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
       "dependencies": {
-        "@floating-ui/core": "^1.6.0",
-        "@floating-ui/utils": "^0.2.1"
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
       }
     },
     "node_modules/@floating-ui/utils": {
diff --git a/package.json b/package.json
index e11e6c4da72e9..f89bb2a0b5154 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@clack/prompts": "^0.7.0",
-    "@floating-ui/dom": "^1.6.1",
+    "@floating-ui/dom": "^1.6.3",
     "@napi-rs/simple-git": "0.1.16",
     "async-mutex": "^0.4.1",
     "chalk": "^5.3.0",

From 880a9511b695f57b9b323be1f57b13d1598d42a9 Mon Sep 17 00:00:00 2001
From: Lin <git@compilin.dev>
Date: Tue, 13 Feb 2024 09:11:16 +0100
Subject: [PATCH 079/115] fix: incorrect link resolution for transclusion in
 root index file (#853)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Lauréline Nevin <laureline.nevin@unicaen.fr>
---
 quartz/plugins/transformers/links.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/quartz/plugins/transformers/links.ts b/quartz/plugins/transformers/links.ts
index 2d43be1b2c671..1e03876922ed5 100644
--- a/quartz/plugins/transformers/links.ts
+++ b/quartz/plugins/transformers/links.ts
@@ -8,6 +8,7 @@ import {
   simplifySlug,
   splitAnchor,
   transformLink,
+  joinSegments,
 } from "../../util/path"
 import path from "path"
 import { visit } from "unist-util-visit"
@@ -107,7 +108,7 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
 
                   // url.resolve is considered legacy
                   // WHATWG equivalent https://nodejs.dev/en/api/v18/url/#urlresolvefrom-to
-                  const url = new URL(dest, `https://base.com/${curSlug}`)
+                  const url = new URL(dest, joinSegments(`https://base.com/`, curSlug))
                   const canonicalDest = url.pathname
                   let [destCanonical, _destAnchor] = splitAnchor(canonicalDest)
                   if (destCanonical.endsWith("/")) {

From b87a701ff75946ff8150052e16916f041f065544 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Tue, 13 Feb 2024 01:27:27 -0800
Subject: [PATCH 080/115] fix: base.com not being resolved properly with
 joinSegments

---
 quartz/plugins/transformers/links.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quartz/plugins/transformers/links.ts b/quartz/plugins/transformers/links.ts
index 1e03876922ed5..f89d367d75fb3 100644
--- a/quartz/plugins/transformers/links.ts
+++ b/quartz/plugins/transformers/links.ts
@@ -108,7 +108,7 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
 
                   // url.resolve is considered legacy
                   // WHATWG equivalent https://nodejs.dev/en/api/v18/url/#urlresolvefrom-to
-                  const url = new URL(dest, joinSegments(`https://base.com/`, curSlug))
+                  const url = new URL(dest, "https://base.com/" + stripSlashes(curSlug, true))
                   const canonicalDest = url.pathname
                   let [destCanonical, _destAnchor] = splitAnchor(canonicalDest)
                   if (destCanonical.endsWith("/")) {

From 21c6bbf3026cf9c06f6458bdb6614099d9a91adc Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Tue, 13 Feb 2024 23:53:44 -0500
Subject: [PATCH 081/115] chore(types): add additional hint for LSP support
 (#864)

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/components/ArticleTitle.tsx    |  4 ++--
 quartz/components/Backlinks.tsx       |  9 +++++++--
 quartz/components/Body.tsx            |  4 ++--
 quartz/components/Breadcrumbs.tsx     |  9 +++++++--
 quartz/components/Darkmode.tsx        |  4 ++--
 quartz/components/DesktopOnly.tsx     |  2 +-
 quartz/components/Explorer.tsx        |  9 +++++++--
 quartz/components/Footer.tsx          |  4 ++--
 quartz/components/Graph.tsx           |  4 ++--
 quartz/components/Head.tsx            |  4 ++--
 quartz/components/Header.tsx          |  4 ++--
 quartz/components/MobileOnly.tsx      |  2 +-
 quartz/components/PageList.tsx        |  4 ++--
 quartz/components/PageTitle.tsx       |  4 ++--
 quartz/components/RecentNotes.tsx     |  9 +++++++--
 quartz/components/Search.tsx          |  4 ++--
 quartz/components/TableOfContents.tsx | 10 +++++++---
 quartz/components/TagList.tsx         |  4 ++--
 18 files changed, 59 insertions(+), 35 deletions(-)

diff --git a/quartz/components/ArticleTitle.tsx b/quartz/components/ArticleTitle.tsx
index 7768de6cb0ec7..318aeb24eeb49 100644
--- a/quartz/components/ArticleTitle.tsx
+++ b/quartz/components/ArticleTitle.tsx
@@ -1,7 +1,7 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { classNames } from "../util/lang"
 
-function ArticleTitle({ fileData, displayClass }: QuartzComponentProps) {
+const ArticleTitle: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
   const title = fileData.frontmatter?.title
   if (title) {
     return <h1 class={classNames(displayClass, "article-title")}>{title}</h1>
diff --git a/quartz/components/Backlinks.tsx b/quartz/components/Backlinks.tsx
index 573c1c39195d3..aa412a2e08d38 100644
--- a/quartz/components/Backlinks.tsx
+++ b/quartz/components/Backlinks.tsx
@@ -1,10 +1,15 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/backlinks.scss"
 import { resolveRelative, simplifySlug } from "../util/path"
 import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
-function Backlinks({ fileData, allFiles, displayClass, cfg }: QuartzComponentProps) {
+const Backlinks: QuartzComponent = ({
+  fileData,
+  allFiles,
+  displayClass,
+  cfg,
+}: QuartzComponentProps) => {
   const slug = simplifySlug(fileData.slug!)
   const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
   return (
diff --git a/quartz/components/Body.tsx b/quartz/components/Body.tsx
index fbb857293e2ab..96b6278831c86 100644
--- a/quartz/components/Body.tsx
+++ b/quartz/components/Body.tsx
@@ -1,9 +1,9 @@
 // @ts-ignore
 import clipboardScript from "./scripts/clipboard.inline"
 import clipboardStyle from "./styles/clipboard.scss"
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
-function Body({ children }: QuartzComponentProps) {
+const Body: QuartzComponent = ({ children }: QuartzComponentProps) => {
   return <div id="quartz-body">{children}</div>
 }
 
diff --git a/quartz/components/Breadcrumbs.tsx b/quartz/components/Breadcrumbs.tsx
index eab8a34e2a292..b1a924aa8b125 100644
--- a/quartz/components/Breadcrumbs.tsx
+++ b/quartz/components/Breadcrumbs.tsx
@@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import breadcrumbsStyle from "./styles/breadcrumbs.scss"
 import { FullSlug, SimpleSlug, resolveRelative } from "../util/path"
 import { QuartzPluginData } from "../plugins/vfile"
@@ -54,7 +54,11 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
   // computed index of folder name to its associated file data
   let folderIndex: Map<string, QuartzPluginData> | undefined
 
-  function Breadcrumbs({ fileData, allFiles, displayClass }: QuartzComponentProps) {
+  const Breadcrumbs: QuartzComponent = ({
+    fileData,
+    allFiles,
+    displayClass,
+  }: QuartzComponentProps) => {
     // Hide crumbs on root if enabled
     if (options.hideOnRoot && fileData.slug === "index") {
       return <></>
@@ -121,5 +125,6 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
     )
   }
   Breadcrumbs.css = breadcrumbsStyle
+
   return Breadcrumbs
 }) satisfies QuartzComponentConstructor
diff --git a/quartz/components/Darkmode.tsx b/quartz/components/Darkmode.tsx
index 62d3c2382dec5..8ed7c99b0a101 100644
--- a/quartz/components/Darkmode.tsx
+++ b/quartz/components/Darkmode.tsx
@@ -3,11 +3,11 @@
 // see: https://v8.dev/features/modules#defer
 import darkmodeScript from "./scripts/darkmode.inline"
 import styles from "./styles/darkmode.scss"
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
-function Darkmode({ displayClass, cfg }: QuartzComponentProps) {
+const Darkmode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
   return (
     <div class={classNames(displayClass, "darkmode")}>
       <input class="toggle" id="darkmode-toggle" type="checkbox" tabIndex={-1} />
diff --git a/quartz/components/DesktopOnly.tsx b/quartz/components/DesktopOnly.tsx
index a11f23fa81246..fe2a27f14cc91 100644
--- a/quartz/components/DesktopOnly.tsx
+++ b/quartz/components/DesktopOnly.tsx
@@ -3,7 +3,7 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro
 export default ((component?: QuartzComponent) => {
   if (component) {
     const Component = component
-    function DesktopOnly(props: QuartzComponentProps) {
+    const DesktopOnly: QuartzComponent = (props: QuartzComponentProps) => {
       return <Component displayClass="desktop-only" {...props} />
     }
 
diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index f7017342e963f..cffc079ef80f7 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import explorerStyle from "./styles/explorer.scss"
 
 // @ts-ignore
@@ -75,7 +75,12 @@ export default ((userOpts?: Partial<Options>) => {
     jsonTree = JSON.stringify(folders)
   }
 
-  function Explorer({ cfg, allFiles, displayClass, fileData }: QuartzComponentProps) {
+  const Explorer: QuartzComponent = ({
+    cfg,
+    allFiles,
+    displayClass,
+    fileData,
+  }: QuartzComponentProps) => {
     constructFileTree(allFiles)
     return (
       <div class={classNames(displayClass, "explorer")}>
diff --git a/quartz/components/Footer.tsx b/quartz/components/Footer.tsx
index de472f72941e3..076c37874a6d7 100644
--- a/quartz/components/Footer.tsx
+++ b/quartz/components/Footer.tsx
@@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/footer.scss"
 import { version } from "../../package.json"
 import { i18n } from "../i18n"
@@ -8,7 +8,7 @@ interface Options {
 }
 
 export default ((opts?: Options) => {
-  function Footer({ displayClass, cfg }: QuartzComponentProps) {
+  const Footer: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
     const year = new Date().getFullYear()
     const links = opts?.links ?? []
     return (
diff --git a/quartz/components/Graph.tsx b/quartz/components/Graph.tsx
index 9fce9bd8f02ff..40ab43a2d6c99 100644
--- a/quartz/components/Graph.tsx
+++ b/quartz/components/Graph.tsx
@@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 // @ts-ignore
 import script from "./scripts/graph.inline"
 import style from "./styles/graph.scss"
@@ -54,7 +54,7 @@ const defaultOptions: GraphOptions = {
 }
 
 export default ((opts?: GraphOptions) => {
-  function Graph({ displayClass, cfg }: QuartzComponentProps) {
+  const Graph: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
     const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph }
     const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph }
     return (
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index 8292acc0533fa..a3c0800abdbd5 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -1,10 +1,10 @@
 import { i18n } from "../i18n"
 import { FullSlug, joinSegments, pathToRoot } from "../util/path"
 import { JSResourceToScriptElement } from "../util/resources"
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
 export default (() => {
-  function Head({ cfg, fileData, externalResources }: QuartzComponentProps) {
+  const Head: QuartzComponent = ({ cfg, fileData, externalResources }: QuartzComponentProps) => {
     const title = fileData.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title
     const description =
       fileData.description?.trim() ?? i18n(cfg.locale).propertyDefaults.description
diff --git a/quartz/components/Header.tsx b/quartz/components/Header.tsx
index 5281f7296777a..eba17ae09ae92 100644
--- a/quartz/components/Header.tsx
+++ b/quartz/components/Header.tsx
@@ -1,6 +1,6 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
-function Header({ children }: QuartzComponentProps) {
+const Header: QuartzComponent = ({ children }: QuartzComponentProps) => {
   return children.length > 0 ? <header>{children}</header> : null
 }
 
diff --git a/quartz/components/MobileOnly.tsx b/quartz/components/MobileOnly.tsx
index 5a190957b9746..7d2108de7b96c 100644
--- a/quartz/components/MobileOnly.tsx
+++ b/quartz/components/MobileOnly.tsx
@@ -3,7 +3,7 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro
 export default ((component?: QuartzComponent) => {
   if (component) {
     const Component = component
-    function MobileOnly(props: QuartzComponentProps) {
+    const MobileOnly: QuartzComponent = (props: QuartzComponentProps) => {
       return <Component displayClass="mobile-only" {...props} />
     }
 
diff --git a/quartz/components/PageList.tsx b/quartz/components/PageList.tsx
index 644e354c4b234..62b77b17b0201 100644
--- a/quartz/components/PageList.tsx
+++ b/quartz/components/PageList.tsx
@@ -1,7 +1,7 @@
 import { FullSlug, resolveRelative } from "../util/path"
 import { QuartzPluginData } from "../plugins/vfile"
 import { Date, getDate } from "./Date"
-import { QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentProps } from "./types"
 import { GlobalConfiguration } from "../cfg"
 
 export function byDateAndAlphabetical(
@@ -29,7 +29,7 @@ type Props = {
   limit?: number
 } & QuartzComponentProps
 
-export function PageList({ cfg, fileData, allFiles, limit }: Props) {
+export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit }: Props) => {
   let list = allFiles.sort(byDateAndAlphabetical(cfg))
   if (limit) {
     list = list.slice(0, limit)
diff --git a/quartz/components/PageTitle.tsx b/quartz/components/PageTitle.tsx
index d129602647351..2362f1027510b 100644
--- a/quartz/components/PageTitle.tsx
+++ b/quartz/components/PageTitle.tsx
@@ -1,9 +1,9 @@
 import { pathToRoot } from "../util/path"
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { classNames } from "../util/lang"
 import { i18n } from "../i18n"
 
-function PageTitle({ fileData, cfg, displayClass }: QuartzComponentProps) {
+const PageTitle: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => {
   const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
   const baseDir = pathToRoot(fileData.slug!)
   return (
diff --git a/quartz/components/RecentNotes.tsx b/quartz/components/RecentNotes.tsx
index f8f6de41f76cd..549b025d33683 100644
--- a/quartz/components/RecentNotes.tsx
+++ b/quartz/components/RecentNotes.tsx
@@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { FullSlug, SimpleSlug, resolveRelative } from "../util/path"
 import { QuartzPluginData } from "../plugins/vfile"
 import { byDateAndAlphabetical } from "./PageList"
@@ -24,7 +24,12 @@ const defaultOptions = (cfg: GlobalConfiguration): Options => ({
 })
 
 export default ((userOpts?: Partial<Options>) => {
-  function RecentNotes({ allFiles, fileData, displayClass, cfg }: QuartzComponentProps) {
+  const RecentNotes: QuartzComponent = ({
+    allFiles,
+    fileData,
+    displayClass,
+    cfg,
+  }: QuartzComponentProps) => {
     const opts = { ...defaultOptions(cfg), ...userOpts }
     const pages = allFiles.filter(opts.filter).sort(opts.sort)
     const remaining = Math.max(0, pages.length - opts.limit)
diff --git a/quartz/components/Search.tsx b/quartz/components/Search.tsx
index a07dbc4fd1d6d..01e5a353d0884 100644
--- a/quartz/components/Search.tsx
+++ b/quartz/components/Search.tsx
@@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/search.scss"
 // @ts-ignore
 import script from "./scripts/search.inline"
@@ -14,7 +14,7 @@ const defaultOptions: SearchOptions = {
 }
 
 export default ((userOpts?: Partial<SearchOptions>) => {
-  function Search({ displayClass, cfg }: QuartzComponentProps) {
+  const Search: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
     const opts = { ...defaultOptions, ...userOpts }
     const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
     return (
diff --git a/quartz/components/TableOfContents.tsx b/quartz/components/TableOfContents.tsx
index 2abc74b5308f5..77ff0eb106b37 100644
--- a/quartz/components/TableOfContents.tsx
+++ b/quartz/components/TableOfContents.tsx
@@ -1,4 +1,4 @@
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import legacyStyle from "./styles/legacyToc.scss"
 import modernStyle from "./styles/toc.scss"
 import { classNames } from "../util/lang"
@@ -15,7 +15,11 @@ const defaultOptions: Options = {
   layout: "modern",
 }
 
-function TableOfContents({ fileData, displayClass, cfg }: QuartzComponentProps) {
+const TableOfContents: QuartzComponent = ({
+  fileData,
+  displayClass,
+  cfg,
+}: QuartzComponentProps) => {
   if (!fileData.toc) {
     return null
   }
@@ -56,7 +60,7 @@ function TableOfContents({ fileData, displayClass, cfg }: QuartzComponentProps)
 TableOfContents.css = modernStyle
 TableOfContents.afterDOMLoaded = script
 
-function LegacyTableOfContents({ fileData, cfg }: QuartzComponentProps) {
+const LegacyTableOfContents: QuartzComponent = ({ fileData, cfg }: QuartzComponentProps) => {
   if (!fileData.toc) {
     return null
   }
diff --git a/quartz/components/TagList.tsx b/quartz/components/TagList.tsx
index e5dd1a3ae5cb0..04a483b6c39b9 100644
--- a/quartz/components/TagList.tsx
+++ b/quartz/components/TagList.tsx
@@ -1,8 +1,8 @@
 import { pathToRoot, slugTag } from "../util/path"
-import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { classNames } from "../util/lang"
 
-function TagList({ fileData, displayClass }: QuartzComponentProps) {
+const TagList: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
   const tags = fileData.frontmatter?.tags
   const baseDir = pathToRoot(fileData.slug!)
   if (tags && tags.length > 0) {

From 2041341d9fd9a3b674d7fa7286ad5b6e99ce80e5 Mon Sep 17 00:00:00 2001
From: Aaron Bull Schaefer <aaron@elasticdog.com>
Date: Wed, 14 Feb 2024 09:41:44 -0800
Subject: [PATCH 082/115] docs: workaround for shallow clones on Cloudflare
 Pages (#868)

Rather than recommend a different hosting provider, Cloudflare Pages
users that prioritize the `git` method for their `CreatedModifiedDate`
configuration can preface the build command with a means of fetching the
required repository history.

See:
- https://gohugo.io/methods/page/gitinfo/#hosting-considerations
---
 docs/hosting.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/hosting.md b/docs/hosting.md
index e6340d293183a..bae7ed899355c 100644
--- a/docs/hosting.md
+++ b/docs/hosting.md
@@ -30,7 +30,7 @@ Press "Save and deploy" and Cloudflare should have a deployed version of your si
 To add a custom domain, check out [Cloudflare's documentation](https://developers.cloudflare.com/pages/platform/custom-domains/).
 
 > [!warning]
-> Cloudflare Pages only allows shallow `git` clones so if you rely on `git` for timestamps, it is recommended you either add dates to your frontmatter (see [[authoring content#Syntax]]) or use another hosting provider.
+> Cloudflare Pages performs a shallow clone by default, so if you rely on `git` for timestamps, it is recommended that you add `git fetch --unshallow &&` to the beginning of the build command (e.g., `git fetch --unshallow && npx quartz build`).
 
 ## GitHub Pages
 

From 6c8023463d0e4ea68be3216c454775fd87d3e370 Mon Sep 17 00:00:00 2001
From: David Fischer <david@konst.fish>
Date: Wed, 14 Feb 2024 21:41:13 +0100
Subject: [PATCH 083/115] Add support for image popovers (#854)

* feat(popover): Add support for images

* fix: run prettier

* feat(popover): use switch logic for content types & adjust styles

* feat(popover): Add content type data tag for popover-inner class
---
 docs/features/popover previews.md           |  2 ++
 quartz/components/scripts/popover.inline.ts | 40 +++++++++++++++------
 quartz/components/styles/popover.scss       | 11 ++++++
 3 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/docs/features/popover previews.md b/docs/features/popover previews.md
index f882224024400..0666047588691 100644
--- a/docs/features/popover previews.md	
+++ b/docs/features/popover previews.md	
@@ -8,6 +8,8 @@ By default, Quartz only fetches previews for pages inside your vault due to [COR
 
 When [[creating components|creating your own components]], you can include this `popover-hint` class to also include it in the popover.
 
+Similar to Obsidian, [[quartz layout.png|images referenced using wikilinks]] can also be viewed as popups.
+
 ## Configuration
 
 - Remove popovers: set the `enablePopovers` field in `quartz.config.ts` to be `false`.
diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts
index 0251834cb5df7..d0346b05b0c26 100644
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@@ -37,29 +37,47 @@ async function mouseEnterHandler(
   targetUrl.hash = ""
   targetUrl.search = ""
 
-  const contents = await fetch(`${targetUrl}`)
-    .then((res) => res.text())
-    .catch((err) => {
-      console.error(err)
-    })
+  const response = await fetch(`${targetUrl}`).catch((err) => {
+    console.error(err)
+  })
 
   // bailout if another popover exists
   if (hasAlreadyBeenFetched()) {
     return
   }
 
-  if (!contents) return
-  const html = p.parseFromString(contents, "text/html")
-  normalizeRelativeURLs(html, targetUrl)
-  const elts = [...html.getElementsByClassName("popover-hint")]
-  if (elts.length === 0) return
+  if (!response) return
+  const contentType = response.headers.get("Content-Type")
+  const contentTypeCategory = contentType?.split("/")[0] ?? "text"
 
   const popoverElement = document.createElement("div")
   popoverElement.classList.add("popover")
   const popoverInner = document.createElement("div")
   popoverInner.classList.add("popover-inner")
   popoverElement.appendChild(popoverInner)
-  elts.forEach((elt) => popoverInner.appendChild(elt))
+
+  popoverInner.dataset.contentType = contentTypeCategory
+
+  switch (contentTypeCategory) {
+    case "image":
+      const img = document.createElement("img")
+
+      response.blob().then((blob) => {
+        img.src = URL.createObjectURL(blob)
+      })
+      img.alt = targetUrl.pathname
+
+      popoverInner.appendChild(img)
+      break
+    default:
+      const contents = await response.text()
+      const html = p.parseFromString(contents, "text/html")
+      normalizeRelativeURLs(html, targetUrl)
+      const elts = [...html.getElementsByClassName("popover-hint")]
+      if (elts.length === 0) return
+
+      elts.forEach((elt) => popoverInner.appendChild(elt))
+  }
 
   setPosition(popoverElement)
   link.appendChild(popoverElement)
diff --git a/quartz/components/styles/popover.scss b/quartz/components/styles/popover.scss
index e46292a21180e..141b89ddf0f9f 100644
--- a/quartz/components/styles/popover.scss
+++ b/quartz/components/styles/popover.scss
@@ -38,6 +38,17 @@
     white-space: normal;
   }
 
+  & > .popover-inner[data-content-type="image"] {
+    padding: 0;
+    max-height: 100%;
+
+    img {
+      margin: 0;
+      border-radius: 0;
+      display: block;
+    }
+  }
+
   h1 {
     font-size: 1.5rem;
   }

From 78a408c96a221629ce1a8b70a17ed4981aad1336 Mon Sep 17 00:00:00 2001
From: kabirgh <15871468+kabirgh@users.noreply.github.com>
Date: Fri, 16 Feb 2024 00:50:33 +0000
Subject: [PATCH 084/115] feat: implement getDependencyGraph for FolderPage
 (#849)

---
 quartz/plugins/emitters/folderPage.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/quartz/plugins/emitters/folderPage.tsx b/quartz/plugins/emitters/folderPage.tsx
index 690fa56f770b1..bf69d298782e1 100644
--- a/quartz/plugins/emitters/folderPage.tsx
+++ b/quartz/plugins/emitters/folderPage.tsx
@@ -38,12 +38,21 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpt
     getQuartzComponents() {
       return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
     },
-    async getDependencyGraph(_ctx, _content, _resources) {
+    async getDependencyGraph(_ctx, content, _resources) {
       // Example graph:
-      // nested/file.md --> nested/file.html
-      //          \-------> nested/index.html
-      // TODO implement
-      return new DepGraph<FilePath>()
+      // nested/file.md --> nested/index.html
+      // nested/file2.md ------^
+      const graph = new DepGraph<FilePath>()
+
+      content.map(([_tree, vfile]) => {
+        const slug = vfile.data.slug
+        const folderName = path.dirname(slug ?? "") as SimpleSlug
+        if (slug && folderName !== "." && folderName !== "tags") {
+          graph.addEdge(vfile.data.filePath!, joinSegments(folderName, "index.html") as FilePath)
+        }
+      })
+
+      return graph
     },
     async emit(ctx, content, resources): Promise<FilePath[]> {
       const fps: FilePath[] = []

From 823d9529224d70056be9dbac29dbbc66f75ae5e8 Mon Sep 17 00:00:00 2001
From: kabirgh <15871468+kabirgh@users.noreply.github.com>
Date: Fri, 16 Feb 2024 00:50:48 +0000
Subject: [PATCH 085/115] feat: implement getDependencyGraph for AliasRedirects
 emitter (#860)

---
 quartz/plugins/emitters/aliases.ts | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/quartz/plugins/emitters/aliases.ts b/quartz/plugins/emitters/aliases.ts
index fb25a448e83a0..af3578ebe52f3 100644
--- a/quartz/plugins/emitters/aliases.ts
+++ b/quartz/plugins/emitters/aliases.ts
@@ -9,9 +9,30 @@ export const AliasRedirects: QuartzEmitterPlugin = () => ({
   getQuartzComponents() {
     return []
   },
-  async getDependencyGraph(_ctx, _content, _resources) {
-    // TODO implement
-    return new DepGraph<FilePath>()
+  async getDependencyGraph(ctx, content, _resources) {
+    const graph = new DepGraph<FilePath>()
+
+    const { argv } = ctx
+    for (const [_tree, file] of content) {
+      const dir = path.posix.relative(argv.directory, path.dirname(file.data.filePath!))
+      const aliases = file.data.frontmatter?.aliases ?? []
+      const slugs = aliases.map((alias) => path.posix.join(dir, alias) as FullSlug)
+      const permalink = file.data.frontmatter?.permalink
+      if (typeof permalink === "string") {
+        slugs.push(permalink as FullSlug)
+      }
+
+      for (let slug of slugs) {
+        // fix any slugs that have trailing slash
+        if (slug.endsWith("/")) {
+          slug = joinSegments(slug, "index") as FullSlug
+        }
+
+        graph.addEdge(file.data.filePath!, joinSegments(argv.output, slug + ".html") as FilePath)
+      }
+    }
+
+    return graph
   },
   async emit(ctx, content, _resources): Promise<FilePath[]> {
     const { argv } = ctx

From 5af707ea20e8106857750e1d6a0e43cf18679749 Mon Sep 17 00:00:00 2001
From: kabirgh <15871468+kabirgh@users.noreply.github.com>
Date: Sat, 17 Feb 2024 17:45:01 +0000
Subject: [PATCH 086/115] fix/feat(fast rebuild): re-render transclusions in
 normal and fastRebuild mode (#842)

* Re-render transclusions in normal watch mode

* Include transclusions in ContentPage getDependencyGraph

* Address PR comments
---
 quartz/components/renderPage.tsx        | 26 +++++--------
 quartz/plugins/emitters/contentPage.tsx | 49 +++++++++++++++++++++++--
 2 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index 33671d21d900b..5394d6f4c91f9 100644
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -3,10 +3,9 @@ import { QuartzComponent, QuartzComponentProps } from "./types"
 import HeaderConstructor from "./Header"
 import BodyConstructor from "./Body"
 import { JSResourceToScriptElement, StaticResources } from "../util/resources"
-import { FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path"
+import { clone, FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path"
 import { visit } from "unist-util-visit"
 import { Root, Element, ElementContent } from "hast"
-import { QuartzPluginData } from "../plugins/vfile"
 import { GlobalConfiguration } from "../cfg"
 import { i18n } from "../i18n"
 
@@ -52,18 +51,6 @@ export function pageResources(
   }
 }
 
-let pageIndex: Map<FullSlug, QuartzPluginData> | undefined = undefined
-function getOrComputeFileIndex(allFiles: QuartzPluginData[]): Map<FullSlug, QuartzPluginData> {
-  if (!pageIndex) {
-    pageIndex = new Map()
-    for (const file of allFiles) {
-      pageIndex.set(file.slug!, file)
-    }
-  }
-
-  return pageIndex
-}
-
 export function renderPage(
   cfg: GlobalConfiguration,
   slug: FullSlug,
@@ -71,14 +58,18 @@ export function renderPage(
   components: RenderComponents,
   pageResources: StaticResources,
 ): string {
+  // make a deep copy of the tree so we don't remove the transclusion references
+  // for the file cached in contentMap in build.ts
+  const root = clone(componentData.tree) as Root
+
   // process transcludes in componentData
-  visit(componentData.tree as Root, "element", (node, _index, _parent) => {
+  visit(root, "element", (node, _index, _parent) => {
     if (node.tagName === "blockquote") {
       const classNames = (node.properties?.className ?? []) as string[]
       if (classNames.includes("transclude")) {
         const inner = node.children[0] as Element
         const transcludeTarget = inner.properties["data-slug"] as FullSlug
-        const page = getOrComputeFileIndex(componentData.allFiles).get(transcludeTarget)
+        const page = componentData.allFiles.find((f) => f.slug === transcludeTarget)
         if (!page) {
           return
         }
@@ -181,6 +172,9 @@ export function renderPage(
     }
   })
 
+  // set componentData.tree to the edited html that has transclusions rendered
+  componentData.tree = root
+
   const {
     head: Head,
     header,
diff --git a/quartz/plugins/emitters/contentPage.tsx b/quartz/plugins/emitters/contentPage.tsx
index e531b36e877dc..904a8a8cae21d 100644
--- a/quartz/plugins/emitters/contentPage.tsx
+++ b/quartz/plugins/emitters/contentPage.tsx
@@ -1,16 +1,56 @@
+import path from "path"
+import { visit } from "unist-util-visit"
+import { Root } from "hast"
+import { VFile } from "vfile"
 import { QuartzEmitterPlugin } from "../types"
 import { QuartzComponentProps } from "../../components/types"
 import HeaderConstructor from "../../components/Header"
 import BodyConstructor from "../../components/Body"
 import { pageResources, renderPage } from "../../components/renderPage"
 import { FullPageLayout } from "../../cfg"
-import { FilePath, joinSegments, pathToRoot } from "../../util/path"
+import { Argv } from "../../util/ctx"
+import { FilePath, isRelativeURL, joinSegments, pathToRoot } from "../../util/path"
 import { defaultContentPageLayout, sharedPageComponents } from "../../../quartz.layout"
 import { Content } from "../../components"
 import chalk from "chalk"
 import { write } from "./helpers"
 import DepGraph from "../../depgraph"
 
+// get all the dependencies for the markdown file
+// eg. images, scripts, stylesheets, transclusions
+const parseDependencies = (argv: Argv, hast: Root, file: VFile): string[] => {
+  const dependencies: string[] = []
+
+  visit(hast, "element", (elem): void => {
+    let ref: string | null = null
+
+    if (
+      ["script", "img", "audio", "video", "source", "iframe"].includes(elem.tagName) &&
+      elem?.properties?.src
+    ) {
+      ref = elem.properties.src.toString()
+    } else if (["a", "link"].includes(elem.tagName) && elem?.properties?.href) {
+      // transclusions will create a tags with relative hrefs
+      ref = elem.properties.href.toString()
+    }
+
+    // if it is a relative url, its a local file and we need to add
+    // it to the dependency graph. otherwise, ignore
+    if (ref === null || !isRelativeURL(ref)) {
+      return
+    }
+
+    let fp = path.join(file.data.filePath!, path.relative(argv.directory, ref)).replace(/\\/g, "/")
+    // markdown files have the .md extension stripped in hrefs, add it back here
+    if (!fp.split("/").pop()?.includes(".")) {
+      fp += ".md"
+    }
+    dependencies.push(fp)
+  })
+
+  return dependencies
+}
+
 export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
   const opts: FullPageLayout = {
     ...sharedPageComponents,
@@ -29,13 +69,16 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
       return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
     },
     async getDependencyGraph(ctx, content, _resources) {
-      // TODO handle transclusions
       const graph = new DepGraph<FilePath>()
 
-      for (const [_tree, file] of content) {
+      for (const [tree, file] of content) {
         const sourcePath = file.data.filePath!
         const slug = file.data.slug!
         graph.addEdge(sourcePath, joinSegments(ctx.argv.output, slug + ".html") as FilePath)
+
+        parseDependencies(ctx.argv, tree as Root, file).forEach((dep) => {
+          graph.addEdge(dep as FilePath, sourcePath)
+        })
       }
 
       return graph

From fa2ea2896f0977253733334199d28e509351e621 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Silviu=20Loren=C8=9B?=
 <124451350+smilorent@users.noreply.github.com>
Date: Sat, 17 Feb 2024 20:23:45 +0200
Subject: [PATCH 087/115] feat: add user-defined config for syntax highlighting
 plugin (#869)

* feat: add user-defined options to syntax highlighting plugin

* feat: add default syntax highlighting config to `quartz.config.ts`

* chore: refactor according to @aarnphm's review

Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com>

* chore: run Prettier on `quartz/plugins/transformers/syntax.ts`

* Update quartz/plugins/transformers/syntax.ts

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* Update syntax.ts

---------

Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
---
 quartz.config.ts                      | 11 ++++++-
 quartz/plugins/transformers/syntax.ts | 47 +++++++++++++++++----------
 2 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/quartz.config.ts b/quartz.config.ts
index 4e36e9408e3db..8c479ac789a77 100644
--- a/quartz.config.ts
+++ b/quartz.config.ts
@@ -53,7 +53,16 @@ const config: QuartzConfig = {
         priority: ["frontmatter", "filesystem"],
       }),
       Plugin.Latex({ renderEngine: "katex" }),
-      Plugin.SyntaxHighlighting(),
+      Plugin.SyntaxHighlighting({
+        // uses themes bundled with Shikiji, see https://shikiji.netlify.app/themes
+        theme: {
+          light: "github-light",
+          dark: "github-dark",
+        },
+        // set this to 'true' to use the background color of the Shikiji theme
+        // if set to 'false', will use Quartz theme colors for background
+        keepBackground: false,
+      }),
       Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
       Plugin.GitHubFlavoredMarkdown(),
       Plugin.TableOfContents(),
diff --git a/quartz/plugins/transformers/syntax.ts b/quartz/plugins/transformers/syntax.ts
index e84772962b3f2..f11734e5f5a90 100644
--- a/quartz/plugins/transformers/syntax.ts
+++ b/quartz/plugins/transformers/syntax.ts
@@ -1,20 +1,33 @@
 import { QuartzTransformerPlugin } from "../types"
-import rehypePrettyCode, { Options as CodeOptions } from "rehype-pretty-code"
+import rehypePrettyCode, { Options as CodeOptions, Theme as CodeTheme } from "rehype-pretty-code"
 
-export const SyntaxHighlighting: QuartzTransformerPlugin = () => ({
-  name: "SyntaxHighlighting",
-  htmlPlugins() {
-    return [
-      [
-        rehypePrettyCode,
-        {
-          keepBackground: false,
-          theme: {
-            dark: "github-dark",
-            light: "github-light",
-          },
-        } satisfies Partial<CodeOptions>,
-      ],
-    ]
+interface Theme extends Record<string, CodeTheme> {
+  light: CodeTheme
+  dark: CodeTheme
+}
+
+interface Options {
+  theme?: Theme
+  keepBackground?: boolean
+}
+
+const defaultOptions: Options = {
+  theme: {
+    light: "github-light",
+    dark: "github-dark",
   },
-})
+  keepBackground: false,
+}
+
+export const SyntaxHighlighting: QuartzTransformerPlugin<Options> = (
+  userOpts?: Partial<Options>,
+) => {
+  const opts: Partial<CodeOptions> = { ...defaultOptions, ...userOpts }
+
+  return {
+    name: "SyntaxHighlighting",
+    htmlPlugins() {
+      return [[rehypePrettyCode, opts]]
+    },
+  }
+}

From 06e3f8b93d5fbe96e7a05e4eb6be97b6a2d7ead0 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sat, 17 Feb 2024 10:34:46 -0800
Subject: [PATCH 088/115] fix(style): introduce semiBoldWeight and various
 improvements to reduce CLS

---
 quartz/components/Head.tsx                    | 12 ++++++------
 quartz/components/styles/explorer.scss        |  4 ++--
 quartz/plugins/emitters/componentResources.ts |  9 ++++-----
 quartz/styles/base.scss                       |  2 +-
 quartz/styles/callouts.scss                   |  2 +-
 quartz/styles/variables.scss                  |  1 +
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index a3c0800abdbd5..3cb6bea66550e 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -21,6 +21,12 @@ export default (() => {
       <head>
         <title>{title}</title>
         <meta charSet="utf-8" />
+        {cfg.theme.cdnCaching && (
+          <>
+            <link rel="preconnect" href="https://fonts.googleapis.com" />
+            <link rel="preconnect" href="https://fonts.gstatic.com" />
+          </>
+        )}
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta property="og:title" content={title} />
         <meta property="og:description" content={description} />
@@ -30,12 +36,6 @@ export default (() => {
         <link rel="icon" href={iconPath} />
         <meta name="description" content={description} />
         <meta name="generator" content="Quartz" />
-        {cfg.theme.cdnCaching && (
-          <>
-            <link rel="preconnect" href="https://fonts.googleapis.com" />
-            <link rel="preconnect" href="https://fonts.gstatic.com" />
-          </>
-        )}
         {css.map((href) => (
           <link key={href} href={href} rel="stylesheet" type="text/css" spa-preserve />
         ))}
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 34f180cf2c03d..55ea8aa88202d 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -87,7 +87,7 @@ svg {
     color: var(--secondary);
     font-family: var(--headerFont);
     font-size: 0.95rem;
-    font-weight: $boldWeight;
+    font-weight: $semiBoldWeight;
     line-height: 1.5rem;
     display: inline-block;
   }
@@ -112,7 +112,7 @@ svg {
       font-size: 0.95rem;
       display: inline-block;
       color: var(--secondary);
-      font-weight: $boldWeight;
+      font-weight: $semiBoldWeight;
       margin: 0;
       line-height: 1.5rem;
       pointer-events: none;
diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts
index 67bc69c3da77f..046841689b653 100644
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@@ -196,10 +196,6 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
       const cfg = ctx.cfg.configuration
       // component specific scripts and styles
       const componentResources = getComponentResources(ctx)
-      // important that this goes *after* component scripts
-      // as the "nav" event gets triggered here and we should make sure
-      // that everyone else had the chance to register a listener for it
-
       let googleFontsStyleSheet = ""
       if (fontOrigin === "local") {
         // let the user do it themselves in css
@@ -247,12 +243,15 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
         }
       }
 
+      // important that this goes *after* component scripts
+      // as the "nav" event gets triggered here and we should make sure
+      // that everyone else had the chance to register a listener for it
       addGlobalPageResources(ctx, resources, componentResources)
 
       const stylesheet = joinStyles(
         ctx.cfg.configuration.theme,
-        ...componentResources.css,
         googleFontsStyleSheet,
+        ...componentResources.css,
         styles,
       )
       const [prescript, postscript] = await Promise.all([
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index f0e7c14d152df..6c8f836ab8947 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -54,7 +54,7 @@ ul,
 }
 
 a {
-  font-weight: $boldWeight;
+  font-weight: $semiBoldWeight;
   text-decoration: none;
   transition: color 0.2s ease;
   color: var(--secondary);
diff --git a/quartz/styles/callouts.scss b/quartz/styles/callouts.scss
index 7fa52c506c860..b1fd180ce30fc 100644
--- a/quartz/styles/callouts.scss
+++ b/quartz/styles/callouts.scss
@@ -157,6 +157,6 @@
   }
 
   .callout-title-inner {
-    font-weight: $boldWeight;
+    font-weight: $semiBoldWeight;
   }
 }
diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss
index 8384b9c4ef89a..e45cc9158b536 100644
--- a/quartz/styles/variables.scss
+++ b/quartz/styles/variables.scss
@@ -5,4 +5,5 @@ $sidePanelWidth: 380px;
 $topSpacing: 6rem;
 $fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
 $boldWeight: 700;
+$semiBoldWeight: 600;
 $normalWeight: 400;

From a6690c6503ca6b2957a4476671c7239212b81b1a Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sat, 17 Feb 2024 10:57:59 -0800
Subject: [PATCH 089/115] fix(style): bold should use semibold

---
 quartz/styles/base.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 6c8f836ab8947..92798a2da1304 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -53,6 +53,10 @@ ul,
   }
 }
 
+strong {
+  font-weight: $semiBoldWeight;
+}
+
 a {
   font-weight: $semiBoldWeight;
   text-decoration: none;

From aa24a62ae77ed1bd3edd4b617cd76d7a056c7f1c Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sat, 17 Feb 2024 11:12:35 -0800
Subject: [PATCH 090/115] fix(breadcrumbs): calculate trailing slash for tag
 hierarchies (closes #873)

---
 quartz/components/Breadcrumbs.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/quartz/components/Breadcrumbs.tsx b/quartz/components/Breadcrumbs.tsx
index b1a924aa8b125..9ccfb9a6a2728 100644
--- a/quartz/components/Breadcrumbs.tsx
+++ b/quartz/components/Breadcrumbs.tsx
@@ -1,6 +1,6 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import breadcrumbsStyle from "./styles/breadcrumbs.scss"
-import { FullSlug, SimpleSlug, resolveRelative } from "../util/path"
+import { FullSlug, SimpleSlug, joinSegments, resolveRelative } from "../util/path"
 import { QuartzPluginData } from "../plugins/vfile"
 import { classNames } from "../util/lang"
 
@@ -82,8 +82,12 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
     // Split slug into hierarchy/parts
     const slugParts = fileData.slug?.split("/")
     if (slugParts) {
+      // is tag breadcrumb?
+      const isTagPath = slugParts[0] === "tags"
+
       // full path until current part
       let currentPath = ""
+
       for (let i = 0; i < slugParts.length - 1; i++) {
         let curPathSegment = slugParts[i]
 
@@ -97,10 +101,15 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
         }
 
         // Add current slug to full path
-        currentPath += slugParts[i] + "/"
+        currentPath = joinSegments(currentPath, slugParts[i])
+        const includeTrailingSlash = !isTagPath || i < 1
 
         // Format and add current crumb
-        const crumb = formatCrumb(curPathSegment, fileData.slug!, currentPath as SimpleSlug)
+        const crumb = formatCrumb(
+          curPathSegment,
+          fileData.slug!,
+          (currentPath + (includeTrailingSlash ? "/" : "")) as SimpleSlug,
+        )
         crumbs.push(crumb)
       }
 

From 8c5c5f9130c65fcc48412a24b0a6c98b254f1934 Mon Sep 17 00:00:00 2001
From: makondratev <69584771+makondratev@users.noreply.github.com>
Date: Sun, 18 Feb 2024 21:54:37 +0300
Subject: [PATCH 091/115] feat(i18n): add Russian (#886)

---
 quartz/i18n/index.ts         |  2 +
 quartz/i18n/locales/ru-RU.ts | 95 ++++++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+)
 create mode 100644 quartz/i18n/locales/ru-RU.ts

diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
index c4fa4251c4597..1e4853f4026d4 100644
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@@ -8,6 +8,7 @@ import ro from "./locales/ro-RO"
 import es from "./locales/es-ES"
 import ar from "./locales/ar-SA"
 import uk from "./locales/uk-UA"
+import ru from "./locales/ru-RU"
 
 export const TRANSLATIONS = {
   "en-US": en,
@@ -40,6 +41,7 @@ export const TRANSLATIONS = {
   "ar-DZ": ar,
   "ar-MR": ar,
   "uk-UA": uk,
+  "ru-RU": ru,
 } as const
 
 export const defaultTranslation = "en-US"
diff --git a/quartz/i18n/locales/ru-RU.ts b/quartz/i18n/locales/ru-RU.ts
new file mode 100644
index 0000000000000..8ead3cabe8b63
--- /dev/null
+++ b/quartz/i18n/locales/ru-RU.ts
@@ -0,0 +1,95 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Без названия",
+    description: "Описание отсутствует",
+  },
+  components: {
+    callout: {
+      note: "Заметка",
+      abstract: "Резюме",
+      info: "Инфо",
+      todo: "Сделать",
+      tip: "Подсказка",
+      success: "Успех",
+      question: "Вопрос",
+      warning: "Предупреждение",
+      failure: "Неудача",
+      danger: "Опасность",
+      bug: "Баг",
+      example: "Пример",
+      quote: "Цитата",
+    },
+    backlinks: {
+      title: "Обратные ссылки",
+      noBacklinksFound: "Обратные ссылки отсутствуют",
+    },
+    themeToggle: {
+      lightMode: "Светлый режим",
+      darkMode: "Тёмный режим",
+    },
+    explorer: {
+      title: "Проводник",
+    },
+    footer: {
+      createdWith: "Создано с помощью",
+    },
+    graph: {
+      title: "Вид графа",
+    },
+    recentNotes: {
+      title: "Недавние заметки",
+      seeRemainingMore: ({ remaining }) =>
+        `Посмотреть оставш${getForm(remaining, "уюся", "иеся", "иеся")} ${remaining} →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Переход из ${targetSlug}`,
+      linkToOriginal: "Ссылка на оригинал",
+    },
+    search: {
+      title: "Поиск",
+      searchBarPlaceholder: "Найти что-нибудь",
+    },
+    tableOfContents: {
+      title: "Оглавление",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `время чтения ~${minutes} мин.`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Недавние заметки",
+      lastFewNotes: ({ count }) =>
+        `Последн${getForm(count, "яя", "ие", "ие")} ${count} замет${getForm(count, "ка", "ки", "ок")}`,
+    },
+    error: {
+      title: "Страница не найдена",
+      notFound: "Эта страница приватная или не существует",
+    },
+    folderContent: {
+      folder: "Папка",
+      itemsUnderFolder: ({ count }) =>
+        `в этой папке ${count} элемент${getForm(count, "", "а", "ов")}`,
+    },
+    tagContent: {
+      tag: "Тег",
+      tagIndex: "Индекс тегов",
+      itemsUnderTag: ({ count }) => `с этим тегом ${count} элемент${getForm(count, "", "а", "ов")}`,
+      showingFirst: ({ count }) =>
+        `Показыва${getForm(count, "ется", "ются", "ются")} ${count} тег${getForm(count, "", "а", "ов")}`,
+      totalTags: ({ count }) => `Всего ${count} тег${getForm(count, "", "а", "ов")}`,
+    },
+  },
+} as const satisfies Translation
+
+function getForm(number: number, form1: string, form2: string, form5: string): string {
+  const remainder100 = number % 100
+  const remainder10 = remainder100 % 10
+
+  if (remainder100 >= 10 && remainder100 <= 20) return form5
+  if (remainder10 > 1 && remainder10 < 5) return form2
+  if (remainder10 == 1) return form1
+  return form5
+}

From b1a105371bffdea6ca10a010292248ef9aff3ce2 Mon Sep 17 00:00:00 2001
From: JONG HWAN KIM <99215801+JongDeug@users.noreply.github.com>
Date: Mon, 19 Feb 2024 07:37:59 +0900
Subject: [PATCH 092/115] feat(i18n): add Korean (#889)

* feat(i18n): add Korean

* feat(i18n): add Korean
---
 quartz/i18n/index.ts         |  2 +
 quartz/i18n/locales/ko-KR.ts | 81 ++++++++++++++++++++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 quartz/i18n/locales/ko-KR.ts

diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
index 1e4853f4026d4..5224f667b465a 100644
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@@ -9,6 +9,7 @@ import es from "./locales/es-ES"
 import ar from "./locales/ar-SA"
 import uk from "./locales/uk-UA"
 import ru from "./locales/ru-RU"
+import ko from "./locales/ko-KR"
 
 export const TRANSLATIONS = {
   "en-US": en,
@@ -42,6 +43,7 @@ export const TRANSLATIONS = {
   "ar-MR": ar,
   "uk-UA": uk,
   "ru-RU": ru,
+  "ko-KR": ko,
 } as const
 
 export const defaultTranslation = "en-US"
diff --git a/quartz/i18n/locales/ko-KR.ts b/quartz/i18n/locales/ko-KR.ts
new file mode 100644
index 0000000000000..ed859a90eac26
--- /dev/null
+++ b/quartz/i18n/locales/ko-KR.ts
@@ -0,0 +1,81 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "제목 없음",
+    description: "설명 없음",
+  },
+  components: {
+    callout: {
+      note: "노트",
+      abstract: "개요",
+      info: "정보",
+      todo: "할일",
+      tip: "팁",
+      success: "성공",
+      question: "질문",
+      warning: "주의",
+      failure: "실패",
+      danger: "위험",
+      bug: "버그",
+      example: "예시",
+      quote: "인용",
+    },
+    backlinks: {
+      title: "백링크",
+      noBacklinksFound: "백링크가 없습니다.",
+    },
+    themeToggle: {
+      lightMode: "라이트 모드",
+      darkMode: "다크 모드",
+    },
+    explorer: {
+      title: "탐색기",
+    },
+    footer: {
+      createdWith: "Created with",
+    },
+    graph: {
+      title: "그래프 뷰",
+    },
+    recentNotes: {
+      title: "최근 게시글",
+      seeRemainingMore: ({ remaining }) => `${remaining}건 더보기 →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `${targetSlug}의 포함`,
+      linkToOriginal: "원본 링크",
+    },
+    search: {
+      title: "검색",
+      searchBarPlaceholder: "검색어를 입력하세요",
+    },
+    tableOfContents: {
+      title: "목차",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} min read`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "최근 게시글",
+      lastFewNotes: ({ count }) => `최근 ${count} 건`,
+    },
+    error: {
+      title: "Not Found",
+      notFound: "페이지가 존재하지 않거나 비공개 설정이 되어 있습니다.",
+    },
+    folderContent: {
+      folder: "폴더",
+      itemsUnderFolder: ({ count }) => `${count}건의 페이지`,
+    },
+    tagContent: {
+      tag: "태그",
+      tagIndex: "태그 목록",
+      itemsUnderTag: ({ count }) => `${count}건의 페이지`,
+      showingFirst: ({ count }) => `처음 ${count}개의 태그`,
+      totalTags: ({ count }) => `총 ${count}개의 태그를 찾았습니다.`,
+    },
+  },
+} as const satisfies Translation

From 739c2e2cc8db456514f81def7fa8c519656fdaa7 Mon Sep 17 00:00:00 2001
From: s-crypt <41712656+s-crypt@users.noreply.github.com>
Date: Sun, 18 Feb 2024 20:26:04 -0800
Subject: [PATCH 093/115] perf(cdn): CDNJS instead of JSDelivr (#891)

---
 docs/advanced/making plugins.md      | 4 ++--
 quartz/plugins/transformers/latex.ts | 4 ++--
 quartz/plugins/transformers/ofm.ts   | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/advanced/making plugins.md b/docs/advanced/making plugins.md
index 565f5bdba9752..d9ed9e33efcad 100644
--- a/docs/advanced/making plugins.md	
+++ b/docs/advanced/making plugins.md	
@@ -84,10 +84,10 @@ export const Latex: QuartzTransformerPlugin<Options> = (opts?: Options) => {
     externalResources() {
       if (engine === "katex") {
         return {
-          css: ["https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css"],
+          css: ["https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css"],
           js: [
             {
-              src: "https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/copy-tex.min.js",
+              src: "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/contrib/copy-tex.min.js",
               loadTime: "afterDOMReady",
               contentType: "external",
             },
diff --git a/quartz/plugins/transformers/latex.ts b/quartz/plugins/transformers/latex.ts
index ab10a4fbb6d24..c9f6bff0d07ba 100644
--- a/quartz/plugins/transformers/latex.ts
+++ b/quartz/plugins/transformers/latex.ts
@@ -26,12 +26,12 @@ export const Latex: QuartzTransformerPlugin<Options> = (opts?: Options) => {
         return {
           css: [
             // base css
-            "https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css",
+            "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css",
           ],
           js: [
             {
               // fix copy behaviour: https://github.com/KaTeX/KaTeX/blob/main/contrib/copy-tex/README.md
-              src: "https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/copy-tex.min.js",
+              src: "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/copy-tex.min.js",
               loadTime: "afterDOMReady",
               contentType: "external",
             },
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index e110e403f0730..6aad230523ed0 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -619,7 +619,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
           let mermaidImport = undefined
           document.addEventListener('nav', async () => {
             if (document.querySelector("code.mermaid")) {
-              mermaidImport ||= await import('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs')
+              mermaidImport ||= await import('https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs')
               const mermaid = mermaidImport.default
               const darkMode = document.documentElement.getAttribute('saved-theme') === 'dark'
               mermaid.initialize({

From efd46f84de2d8dcc630b96de5454027bfbbf5f6e Mon Sep 17 00:00:00 2001
From: Eiko Wagenknecht <git@eiko-wagenknecht.de>
Date: Mon, 19 Feb 2024 09:08:36 +0100
Subject: [PATCH 094/115] fix(frontmatter): delimiters parameter was not passed
 (#885)

* fix: delimiters parameter was not passed

Signed-off-by: Eiko Wagenknecht <git@eiko-wagenknecht.de>

* fix: remove unneeded undefined

---------

Signed-off-by: Eiko Wagenknecht <git@eiko-wagenknecht.de>
---
 quartz/plugins/transformers/frontmatter.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/quartz/plugins/transformers/frontmatter.ts b/quartz/plugins/transformers/frontmatter.ts
index 9371df81eb3d4..7073d43bdc8e4 100644
--- a/quartz/plugins/transformers/frontmatter.ts
+++ b/quartz/plugins/transformers/frontmatter.ts
@@ -8,12 +8,12 @@ import { QuartzPluginData } from "../vfile"
 import { i18n } from "../../i18n"
 
 export interface Options {
-  delims: string | string[]
+  delimiters: string | [string, string]
   language: "yaml" | "toml"
 }
 
 const defaultOptions: Options = {
-  delims: "---",
+  delimiters: "---",
   language: "yaml",
 }
 

From d9e8ffc78c54a59047df56d8000b2f6289eb9be0 Mon Sep 17 00:00:00 2001
From: Leonardo Ledda <35930217+LeddaZ@users.noreply.github.com>
Date: Mon, 19 Feb 2024 18:50:01 +0100
Subject: [PATCH 095/115] feat(i18n): Add Italian (#893)

Signed-off-by: Leonardo Ledda <leonardoledda@gmail.com>
---
 quartz/i18n/index.ts         |  2 +
 quartz/i18n/locales/it-IT.ts | 83 ++++++++++++++++++++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 quartz/i18n/locales/it-IT.ts

diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
index 5224f667b465a..3861bf73c4da6 100644
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@@ -1,6 +1,7 @@
 import { Translation, CalloutTranslation } from "./locales/definition"
 import en from "./locales/en-US"
 import fr from "./locales/fr-FR"
+import it from "./locales/it-IT"
 import ja from "./locales/ja-JP"
 import de from "./locales/de-DE"
 import nl from "./locales/nl-NL"
@@ -14,6 +15,7 @@ import ko from "./locales/ko-KR"
 export const TRANSLATIONS = {
   "en-US": en,
   "fr-FR": fr,
+  "it-IT": it,
   "ja-JP": ja,
   "de-DE": de,
   "nl-NL": nl,
diff --git a/quartz/i18n/locales/it-IT.ts b/quartz/i18n/locales/it-IT.ts
new file mode 100644
index 0000000000000..a0cc042830688
--- /dev/null
+++ b/quartz/i18n/locales/it-IT.ts
@@ -0,0 +1,83 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Senza titolo",
+    description: "Nessuna descrizione",
+  },
+  components: {
+    callout: {
+      note: "Nota",
+      abstract: "Astratto",
+      info: "Info",
+      todo: "Da fare",
+      tip: "Consiglio",
+      success: "Completato",
+      question: "Domanda",
+      warning: "Attenzione",
+      failure: "Errore",
+      danger: "Pericolo",
+      bug: "Bug",
+      example: "Esempio",
+      quote: "Citazione",
+    },
+    backlinks: {
+      title: "Link entranti",
+      noBacklinksFound: "Nessun link entrante",
+    },
+    themeToggle: {
+      lightMode: "Tema chiaro",
+      darkMode: "Tema scuro",
+    },
+    explorer: {
+      title: "Esplora",
+    },
+    footer: {
+      createdWith: "Creato con",
+    },
+    graph: {
+      title: "Vista grafico",
+    },
+    recentNotes: {
+      title: "Note recenti",
+      seeRemainingMore: ({ remaining }) => `Vedi ${remaining} altro →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Transclusione di ${targetSlug}`,
+      linkToOriginal: "Link all'originale",
+    },
+    search: {
+      title: "Cerca",
+      searchBarPlaceholder: "Cerca qualcosa",
+    },
+    tableOfContents: {
+      title: "Tabella dei contenuti",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes} minuti`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Note recenti",
+      lastFewNotes: ({ count }) => `Ultime ${count} note`,
+    },
+    error: {
+      title: "Non trovato",
+      notFound: "Questa pagina è privata o non esiste.",
+    },
+    folderContent: {
+      folder: "Cartella",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 oggetto in questa cartella" : `${count} oggetti in questa cartella.`,
+    },
+    tagContent: {
+      tag: "Etichetta",
+      tagIndex: "Indice etichette",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 oggetto con questa etichetta" : `${count} oggetti con questa etichetta.`,
+      showingFirst: ({ count }) => `Prime ${count} etichette.`,
+      totalTags: ({ count }) => `Trovate ${count} etichette totali.`,
+    },
+  },
+} as const satisfies Translation

From 3e09b05468c372e85518ff76d8d6d9a415f61fac Mon Sep 17 00:00:00 2001
From: kon-foo <25391223+kon-foo@users.noreply.github.com>
Date: Mon, 19 Feb 2024 18:50:40 +0100
Subject: [PATCH 096/115] docs: add self-hosting section (#883)

* Add Self-Hosting section
Add Nginx section

* run prettier
---
 docs/hosting.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/docs/hosting.md b/docs/hosting.md
index bae7ed899355c..eeb930849c965 100644
--- a/docs/hosting.md
+++ b/docs/hosting.md
@@ -228,3 +228,25 @@ pages:
 When `.gitlab-ci.yaml` is committed, GitLab will build and deploy the website as a GitLab Page. You can find the url under `Deploy > Pages` in the sidebar.
 
 By default, the page is private and only visible when logged in to a GitLab account with access to the repository but can be opened in the settings under `Deploy` -> `Pages`.
+
+## Self-Hosting
+
+Copy the `public` directory to your web server and configure it to serve the files. You can use any web server to host your site. Since Quartz generates links that do not include the `.html` extension, you need to let your web server know how to deal with it.
+
+### Using Nginx
+
+Here's an example of how to do this with Nginx:
+
+```nginx title="nginx.conf"
+server {
+    listen 80;
+    server_name example.com;
+    root /path/to/quartz/public;
+    index index.html;
+    error_page 404 /404.html;
+
+    location / {
+        try_files $uri $uri.html $uri/ =404;
+    }
+}
+```

From e85ea490003870c5a6c004bb2e6bd6d76769a2ce Mon Sep 17 00:00:00 2001
From: KylinDC <solder-hulls.06@icloud.com>
Date: Tue, 20 Feb 2024 02:31:09 +0800
Subject: [PATCH 097/115] feat(i18n): add Simplified Chinese (#896)

---
 quartz/i18n/index.ts         |  2 +
 quartz/i18n/locales/zh-CN.ts | 81 ++++++++++++++++++++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 quartz/i18n/locales/zh-CN.ts

diff --git a/quartz/i18n/index.ts b/quartz/i18n/index.ts
index 3861bf73c4da6..38d356280a9ef 100644
--- a/quartz/i18n/index.ts
+++ b/quartz/i18n/index.ts
@@ -11,6 +11,7 @@ import ar from "./locales/ar-SA"
 import uk from "./locales/uk-UA"
 import ru from "./locales/ru-RU"
 import ko from "./locales/ko-KR"
+import zh from "./locales/zh-CN"
 
 export const TRANSLATIONS = {
   "en-US": en,
@@ -46,6 +47,7 @@ export const TRANSLATIONS = {
   "uk-UA": uk,
   "ru-RU": ru,
   "ko-KR": ko,
+  "zh-CN": zh,
 } as const
 
 export const defaultTranslation = "en-US"
diff --git a/quartz/i18n/locales/zh-CN.ts b/quartz/i18n/locales/zh-CN.ts
new file mode 100644
index 0000000000000..43d011197bd99
--- /dev/null
+++ b/quartz/i18n/locales/zh-CN.ts
@@ -0,0 +1,81 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "无题",
+    description: "无描述",
+  },
+  components: {
+    callout: {
+      note: "笔记",
+      abstract: "摘要",
+      info: "提示",
+      todo: "待办",
+      tip: "提示",
+      success: "成功",
+      question: "问题",
+      warning: "警告",
+      failure: "失败",
+      danger: "危险",
+      bug: "错误",
+      example: "示例",
+      quote: "引用",
+    },
+    backlinks: {
+      title: "反向链接",
+      noBacklinksFound: "无法找到反向链接",
+    },
+    themeToggle: {
+      lightMode: "亮色模式",
+      darkMode: "暗色模式",
+    },
+    explorer: {
+      title: "探索",
+    },
+    footer: {
+      createdWith: "Created with",
+    },
+    graph: {
+      title: "关系图谱",
+    },
+    recentNotes: {
+      title: "最近的笔记",
+      seeRemainingMore: ({ remaining }) => `查看更多${remaining}篇笔记 →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `包含${targetSlug}`,
+      linkToOriginal: "指向原始笔记的链接",
+    },
+    search: {
+      title: "搜索",
+      searchBarPlaceholder: "搜索些什么",
+    },
+    tableOfContents: {
+      title: "目录",
+    },
+    contentMeta: {
+      readingTime: ({ minutes }) => `${minutes}分钟阅读`,
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "最近的笔记",
+      lastFewNotes: ({ count }) => `最近的${count}条笔记`,
+    },
+    error: {
+      title: "无法找到",
+      notFound: "私有笔记或笔记不存在。",
+    },
+    folderContent: {
+      folder: "文件夹",
+      itemsUnderFolder: ({ count }) => `此文件夹下有${count}条笔记。`,
+    },
+    tagContent: {
+      tag: "标签",
+      tagIndex: "标签索引",
+      itemsUnderTag: ({ count }) => `此标签下有${count}条笔记。`,
+      showingFirst: ({ count }) => `显示前${count}个标签。`,
+      totalTags: ({ count }) => `总共有${count}个标签。`,
+    },
+  },
+} as const satisfies Translation

From a67a8d7aa9da06d8f87d0f48bac630728a4ea394 Mon Sep 17 00:00:00 2001
From: kabirgh <15871468+kabirgh@users.noreply.github.com>
Date: Mon, 19 Feb 2024 18:58:15 +0000
Subject: [PATCH 098/115] feat: implement getDependencyGraph for TagPage (#872)

* feat: implement getDependencyGraph for TagPage

* Only add file to dg if it has at least 1 tag
---
 quartz/plugins/emitters/tagPage.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/quartz/plugins/emitters/tagPage.tsx b/quartz/plugins/emitters/tagPage.tsx
index 332c758d5b6f5..3eb6975f71b21 100644
--- a/quartz/plugins/emitters/tagPage.tsx
+++ b/quartz/plugins/emitters/tagPage.tsx
@@ -35,9 +35,26 @@ export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts)
     getQuartzComponents() {
       return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
     },
-    async getDependencyGraph(ctx, _content, _resources) {
-      // TODO implement
-      return new DepGraph<FilePath>()
+    async getDependencyGraph(ctx, content, _resources) {
+      const graph = new DepGraph<FilePath>()
+
+      for (const [_tree, file] of content) {
+        const sourcePath = file.data.filePath!
+        const tags = (file.data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes)
+        // if the file has at least one tag, it is used in the tag index page
+        if (tags.length > 0) {
+          tags.push("index")
+        }
+
+        for (const tag of tags) {
+          graph.addEdge(
+            sourcePath,
+            joinSegments(ctx.argv.output, "tags", tag + ".html") as FilePath,
+          )
+        }
+      }
+
+      return graph
     },
     async emit(ctx, content, resources): Promise<FilePath[]> {
       const fps: FilePath[] = []

From 0493942c79f8528ca8bef6cd8e2f634275f03119 Mon Sep 17 00:00:00 2001
From: kon-foo <25391223+kon-foo@users.noreply.github.com>
Date: Mon, 19 Feb 2024 20:04:27 +0100
Subject: [PATCH 099/115] fix: remove assets via globs to avoid volume mount
 lock (#877)

* Fix docker volume lock issue by altering asset cleanup method
Modified build process to prevent the deletion of the output directory.

* Add fsOps utility for filesystem operations

* Use cleanDirectory in build process to fix volume lock issue

* applied prettier

* handle ENOENT error when output dir does not exist

* remove native function in favor of rimraf

* use path.join to concatenate paths
---
 quartz/build.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/quartz/build.ts b/quartz/build.ts
index 452a2f1aeba17..3d95f315f4bf5 100644
--- a/quartz/build.ts
+++ b/quartz/build.ts
@@ -60,7 +60,7 @@ async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () => void) {
 
   const release = await mut.acquire()
   perf.addEvent("clean")
-  await rimraf(output)
+  await rimraf(path.join(output, "*"), { glob: true })
   console.log(`Cleaned output directory \`${output}\` in ${perf.timeSince("clean")}`)
 
   perf.addEvent("glob")
@@ -375,7 +375,7 @@ async function rebuildFromEntrypoint(
 
     // TODO: we can probably traverse the link graph to figure out what's safe to delete here
     // instead of just deleting everything
-    await rimraf(argv.output)
+    await rimraf(path.join(argv.output, ".*"), { glob: true })
     await emitContent(ctx, filteredContent)
     console.log(chalk.green(`Done rebuilding in ${perf.timeSince()}`))
   } catch (err) {

From 637e336cdaa8cf8eb918257c236c53ccc5dc5ae8 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 19 Feb 2024 13:46:27 -0800
Subject: [PATCH 100/115] chore(deps-dev): bump @types/node from 20.11.16 to
 20.11.19 (#899)

Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.11.16 to 20.11.19.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

---
updated-dependencies:
- dependency-name: "@types/node"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7d1d9737ee756..4d0ef1a6977f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -73,7 +73,7 @@
         "@types/d3": "^7.4.3",
         "@types/hast": "^3.0.4",
         "@types/js-yaml": "^4.0.9",
-        "@types/node": "^20.11.16",
+        "@types/node": "^20.11.19",
         "@types/pretty-time": "^1.1.5",
         "@types/source-map-support": "^0.5.10",
         "@types/ws": "^8.5.10",
@@ -1088,9 +1088,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "20.11.16",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.16.tgz",
-      "integrity": "sha512-gKb0enTmRCzXSSUJDq6/sPcqrfCv2mkkG6Jt/clpn5eiCbKTY+SgZUxo+p8ZKMof5dCp9vHQUAB7wOUTod22wQ==",
+      "version": "20.11.19",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.19.tgz",
+      "integrity": "sha512-7xMnVEcZFu0DikYjWOlRq7NTPETrm7teqUT2WkQjrTIkEgUyyGdWsj/Zg8bEJt5TNklzbPD1X3fqfsHw3SpapQ==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
diff --git a/package.json b/package.json
index f89bb2a0b5154..2a567358b38ae 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "@types/d3": "^7.4.3",
     "@types/hast": "^3.0.4",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^20.11.16",
+    "@types/node": "^20.11.19",
     "@types/pretty-time": "^1.1.5",
     "@types/source-map-support": "^0.5.10",
     "@types/ws": "^8.5.10",

From f1619620d5cd285b4a4dabf69a9dd1d95de2f36c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 19 Feb 2024 13:47:00 -0800
Subject: [PATCH 101/115] chore(deps): bump globby from 14.0.0 to 14.0.1 (#897)

Bumps [globby](https://github.com/sindresorhus/globby) from 14.0.0 to 14.0.1.
- [Release notes](https://github.com/sindresorhus/globby/releases)
- [Commits](https://github.com/sindresorhus/globby/compare/v14.0.0...v14.0.1)

---
updated-dependencies:
- dependency-name: globby
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 16 ++++++++--------
 package.json      |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4d0ef1a6977f0..e2ae90e7c87c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
         "esbuild-sass-plugin": "^2.16.1",
         "flexsearch": "0.7.43",
         "github-slugger": "^2.0.0",
-        "globby": "^14.0.0",
+        "globby": "^14.0.1",
         "gray-matter": "^4.0.3",
         "hast-util-to-html": "^9.0.0",
         "hast-util-to-jsx-runtime": "^2.3.0",
@@ -743,9 +743,9 @@
       }
     },
     "node_modules/@sindresorhus/merge-streams": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-1.0.0.tgz",
-      "integrity": "sha512-rUV5WyJrJLoloD4NDN1V1+LDMDWOa4OTsT4yYJwQNpTU6FWxkxHpL7eu4w+DmiH8x/EAM1otkPE1+LaspIbplw==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
+      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
       "engines": {
         "node": ">=18"
       },
@@ -2301,11 +2301,11 @@
       }
     },
     "node_modules/globby": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.0.tgz",
-      "integrity": "sha512-/1WM/LNHRAOH9lZta77uGbq0dAEQM+XjNesWwhlERDVenqothRbnzTrL3/LrIoEPPjeUHC3vrS6TwoyxeHs7MQ==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.1.tgz",
+      "integrity": "sha512-jOMLD2Z7MAhyG8aJpNOpmziMOP4rPLcc95oQPKXBazW82z+CEgPFBQvEpRUa1KeIMUJo4Wsm+q6uzO/Q/4BksQ==",
       "dependencies": {
-        "@sindresorhus/merge-streams": "^1.0.0",
+        "@sindresorhus/merge-streams": "^2.1.0",
         "fast-glob": "^3.3.2",
         "ignore": "^5.2.4",
         "path-type": "^5.0.0",
diff --git a/package.json b/package.json
index 2a567358b38ae..d469d7b01867c 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "esbuild-sass-plugin": "^2.16.1",
     "flexsearch": "0.7.43",
     "github-slugger": "^2.0.0",
-    "globby": "^14.0.0",
+    "globby": "^14.0.1",
     "gray-matter": "^4.0.3",
     "hast-util-to-html": "^9.0.0",
     "hast-util-to-jsx-runtime": "^2.3.0",

From 779c501d9eb6393539f0be7653dbdc09f1b9ebe9 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 19 Feb 2024 13:47:07 -0800
Subject: [PATCH 102/115] chore(deps): bump preact from 10.19.4 to 10.19.5
 (#898)

Bumps [preact](https://github.com/preactjs/preact) from 10.19.4 to 10.19.5.
- [Release notes](https://github.com/preactjs/preact/releases)
- [Commits](https://github.com/preactjs/preact/compare/10.19.4...10.19.5)

---
updated-dependencies:
- dependency-name: preact
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e2ae90e7c87c2..4a8b583367050 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,7 @@
         "mdast-util-to-hast": "^13.1.0",
         "mdast-util-to-string": "^4.0.0",
         "micromorph": "^0.4.5",
-        "preact": "^10.19.4",
+        "preact": "^10.19.5",
         "preact-render-to-string": "^6.3.1",
         "pretty-bytes": "^6.1.1",
         "pretty-time": "^1.1.0",
@@ -4454,9 +4454,9 @@
       }
     },
     "node_modules/preact": {
-      "version": "10.19.4",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.19.4.tgz",
-      "integrity": "sha512-dwaX5jAh0Ga8uENBX1hSOujmKWgx9RtL80KaKUFLc6jb4vCEAc3EeZ0rnQO/FO4VgjfPMfoLFWnNG8bHuZ9VLw==",
+      "version": "10.19.5",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.19.5.tgz",
+      "integrity": "sha512-OPELkDmSVbKjbFqF9tgvOowiiQ9TmsJljIzXRyNE8nGiis94pwv1siF78rQkAP1Q1738Ce6pellRg/Ns/CtHqQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
diff --git a/package.json b/package.json
index d469d7b01867c..54c67fbff851f 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     "mdast-util-to-hast": "^13.1.0",
     "mdast-util-to-string": "^4.0.0",
     "micromorph": "^0.4.5",
-    "preact": "^10.19.4",
+    "preact": "^10.19.5",
     "preact-render-to-string": "^6.3.1",
     "pretty-bytes": "^6.1.1",
     "pretty-time": "^1.1.0",

From b6cf3df84f452c22ac9ddaf452b0ecbe0828086f Mon Sep 17 00:00:00 2001
From: Eiko Wagenknecht <git@eiko-wagenknecht.de>
Date: Mon, 19 Feb 2024 22:49:07 +0100
Subject: [PATCH 103/115] fix: correctly parse falsy js as title (#900)

---
 quartz/plugins/transformers/frontmatter.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/quartz/plugins/transformers/frontmatter.ts b/quartz/plugins/transformers/frontmatter.ts
index 7073d43bdc8e4..79aa5f3134989 100644
--- a/quartz/plugins/transformers/frontmatter.ts
+++ b/quartz/plugins/transformers/frontmatter.ts
@@ -57,9 +57,9 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
               },
             })
 
-            if (data.title) {
+            if (data.title != null && data.title.toString() !== "") {
               data.title = data.title.toString()
-            } else if (data.title === null || data.title === undefined) {
+            } else {
               data.title = file.stem ?? i18n(cfg.configuration.locale).propertyDefaults.title
             }
 

From fc5fa48bf18ec0bc0b7a7e31a086428664117e04 Mon Sep 17 00:00:00 2001
From: JONG HWAN KIM <99215801+JongDeug@users.noreply.github.com>
Date: Tue, 20 Feb 2024 15:36:54 +0900
Subject: [PATCH 104/115] feat(i18n): change itemsUnderFolder, itemsUnderTag
 translation of ko-KR (#905)

* feat(i18n): add Korean

* feat(i18n): add Korean

* feat(i18n): change itemsUnderFolder, itemsUnderTag translation of ko-KR
---
 quartz/i18n/locales/ko-KR.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/quartz/i18n/locales/ko-KR.ts b/quartz/i18n/locales/ko-KR.ts
index ed859a90eac26..ea735b00c961f 100644
--- a/quartz/i18n/locales/ko-KR.ts
+++ b/quartz/i18n/locales/ko-KR.ts
@@ -68,12 +68,12 @@ export default {
     },
     folderContent: {
       folder: "폴더",
-      itemsUnderFolder: ({ count }) => `${count}건의 페이지`,
+      itemsUnderFolder: ({ count }) => `${count}건의 항목`,
     },
     tagContent: {
       tag: "태그",
       tagIndex: "태그 목록",
-      itemsUnderTag: ({ count }) => `${count}건의 페이지`,
+      itemsUnderTag: ({ count }) => `${count}건의 항목`,
       showingFirst: ({ count }) => `처음 ${count}개의 태그`,
       totalTags: ({ count }) => `총 ${count}개의 태그를 찾았습니다.`,
     },

From 3b266ee7d0d414d2af7d291f249b0153af51aa2e Mon Sep 17 00:00:00 2001
From: Eiko Wagenknecht <git@eiko-wagenknecht.de>
Date: Tue, 20 Feb 2024 15:45:10 +0100
Subject: [PATCH 105/115] fix: add space and missing dot for listing pages
 (#907)

---
 quartz/components/pages/TagContent.tsx | 9 ++++++---
 quartz/i18n/locales/de-DE.ts           | 4 ++--
 quartz/i18n/locales/en-US.ts           | 4 ++--
 quartz/i18n/locales/es-ES.ts           | 4 ++--
 quartz/i18n/locales/fr-FR.ts           | 4 ++--
 quartz/i18n/locales/it-IT.ts           | 4 ++--
 quartz/i18n/locales/nl-NL.ts           | 2 +-
 quartz/i18n/locales/uk-UA.ts           | 4 ++--
 8 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/quartz/components/pages/TagContent.tsx b/quartz/components/pages/TagContent.tsx
index 19452ec44a63d..22f6bb25df3bb 100644
--- a/quartz/components/pages/TagContent.tsx
+++ b/quartz/components/pages/TagContent.tsx
@@ -66,9 +66,12 @@ function TagContent(props: QuartzComponentProps) {
                   <p>
                     {i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}
                     {pages.length > numPages && (
-                      <span>
-                        {i18n(cfg.locale).pages.tagContent.showingFirst({ count: numPages })}
-                      </span>
+                      <>
+                        {" "}
+                        <span>
+                          {i18n(cfg.locale).pages.tagContent.showingFirst({ count: numPages })}
+                        </span>
+                      </>
                     )}
                   </p>
                   <PageList limit={numPages} {...listProps} />
diff --git a/quartz/i18n/locales/de-DE.ts b/quartz/i18n/locales/de-DE.ts
index e3821944b0bfb..64c9ba9df5d4d 100644
--- a/quartz/i18n/locales/de-DE.ts
+++ b/quartz/i18n/locales/de-DE.ts
@@ -69,13 +69,13 @@ export default {
     folderContent: {
       folder: "Ordner",
       itemsUnderFolder: ({ count }) =>
-        count === 1 ? "1 Datei in diesem Ordner" : `${count} Dateien in diesem Ordner.`,
+        count === 1 ? "1 Datei in diesem Ordner." : `${count} Dateien in diesem Ordner.`,
     },
     tagContent: {
       tag: "Tag",
       tagIndex: "Tag-Übersicht",
       itemsUnderTag: ({ count }) =>
-        count === 1 ? "1 Datei mit diesem Tag" : `${count} Dateien mit diesem Tag.`,
+        count === 1 ? "1 Datei mit diesem Tag." : `${count} Dateien mit diesem Tag.`,
       showingFirst: ({ count }) => `Die ersten ${count} Tags werden angezeigt.`,
       totalTags: ({ count }) => `${count} Tags insgesamt.`,
     },
diff --git a/quartz/i18n/locales/en-US.ts b/quartz/i18n/locales/en-US.ts
index 4a308d79a7cd2..ac283fdafaeba 100644
--- a/quartz/i18n/locales/en-US.ts
+++ b/quartz/i18n/locales/en-US.ts
@@ -69,13 +69,13 @@ export default {
     folderContent: {
       folder: "Folder",
       itemsUnderFolder: ({ count }) =>
-        count === 1 ? "1 item under this folder" : `${count} items under this folder.`,
+        count === 1 ? "1 item under this folder." : `${count} items under this folder.`,
     },
     tagContent: {
       tag: "Tag",
       tagIndex: "Tag Index",
       itemsUnderTag: ({ count }) =>
-        count === 1 ? "1 item with this tag" : `${count} items with this tag.`,
+        count === 1 ? "1 item with this tag." : `${count} items with this tag.`,
       showingFirst: ({ count }) => `Showing first ${count} tags.`,
       totalTags: ({ count }) => `Found ${count} total tags.`,
     },
diff --git a/quartz/i18n/locales/es-ES.ts b/quartz/i18n/locales/es-ES.ts
index f59d201a3b37f..37a2a79c721f6 100644
--- a/quartz/i18n/locales/es-ES.ts
+++ b/quartz/i18n/locales/es-ES.ts
@@ -69,13 +69,13 @@ export default {
     folderContent: {
       folder: "Carpeta",
       itemsUnderFolder: ({ count }) =>
-        count === 1 ? "1 artículo en esta carpeta" : `${count} artículos en esta carpeta.`,
+        count === 1 ? "1 artículo en esta carpeta." : `${count} artículos en esta carpeta.`,
     },
     tagContent: {
       tag: "Etiqueta",
       tagIndex: "Índice de Etiquetas",
       itemsUnderTag: ({ count }) =>
-        count === 1 ? "1 artículo con esta etiqueta" : `${count} artículos con esta etiqueta.`,
+        count === 1 ? "1 artículo con esta etiqueta." : `${count} artículos con esta etiqueta.`,
       showingFirst: ({ count }) => `Mostrando las primeras ${count} etiquetas.`,
       totalTags: ({ count }) => `Se encontraron ${count} etiquetas en total.`,
     },
diff --git a/quartz/i18n/locales/fr-FR.ts b/quartz/i18n/locales/fr-FR.ts
index 8b7229201208a..b485d2b6e5a01 100644
--- a/quartz/i18n/locales/fr-FR.ts
+++ b/quartz/i18n/locales/fr-FR.ts
@@ -69,13 +69,13 @@ export default {
     folderContent: {
       folder: "Dossier",
       itemsUnderFolder: ({ count }) =>
-        count === 1 ? "1 élément sous ce dossier" : `${count} éléments sous ce dossier.`,
+        count === 1 ? "1 élément sous ce dossier." : `${count} éléments sous ce dossier.`,
     },
     tagContent: {
       tag: "Étiquette",
       tagIndex: "Index des étiquettes",
       itemsUnderTag: ({ count }) =>
-        count === 1 ? "1 élément avec cette étiquette" : `${count} éléments avec cette étiquette.`,
+        count === 1 ? "1 élément avec cette étiquette." : `${count} éléments avec cette étiquette.`,
       showingFirst: ({ count }) => `Affichage des premières ${count} étiquettes.`,
       totalTags: ({ count }) => `Trouvé ${count} étiquettes au total.`,
     },
diff --git a/quartz/i18n/locales/it-IT.ts b/quartz/i18n/locales/it-IT.ts
index a0cc042830688..ca8818a650f35 100644
--- a/quartz/i18n/locales/it-IT.ts
+++ b/quartz/i18n/locales/it-IT.ts
@@ -69,13 +69,13 @@ export default {
     folderContent: {
       folder: "Cartella",
       itemsUnderFolder: ({ count }) =>
-        count === 1 ? "1 oggetto in questa cartella" : `${count} oggetti in questa cartella.`,
+        count === 1 ? "1 oggetto in questa cartella." : `${count} oggetti in questa cartella.`,
     },
     tagContent: {
       tag: "Etichetta",
       tagIndex: "Indice etichette",
       itemsUnderTag: ({ count }) =>
-        count === 1 ? "1 oggetto con questa etichetta" : `${count} oggetti con questa etichetta.`,
+        count === 1 ? "1 oggetto con questa etichetta." : `${count} oggetti con questa etichetta.`,
       showingFirst: ({ count }) => `Prime ${count} etichette.`,
       totalTags: ({ count }) => `Trovate ${count} etichette totali.`,
     },
diff --git a/quartz/i18n/locales/nl-NL.ts b/quartz/i18n/locales/nl-NL.ts
index e239be0e1d793..d075d584a45be 100644
--- a/quartz/i18n/locales/nl-NL.ts
+++ b/quartz/i18n/locales/nl-NL.ts
@@ -70,7 +70,7 @@ export default {
     folderContent: {
       folder: "Map",
       itemsUnderFolder: ({ count }) =>
-        count === 1 ? "1 item in deze map" : `${count} items in deze map.`,
+        count === 1 ? "1 item in deze map." : `${count} items in deze map.`,
     },
     tagContent: {
       tag: "Label",
diff --git a/quartz/i18n/locales/uk-UA.ts b/quartz/i18n/locales/uk-UA.ts
index c997a6972c7dd..b636938373c37 100644
--- a/quartz/i18n/locales/uk-UA.ts
+++ b/quartz/i18n/locales/uk-UA.ts
@@ -69,13 +69,13 @@ export default {
     folderContent: {
       folder: "Папка",
       itemsUnderFolder: ({ count }) =>
-        count === 1 ? "У цій папці 1 елемент" : `Елементів у цій папці: ${count}.`,
+        count === 1 ? "У цій папці 1 елемент." : `Елементів у цій папці: ${count}.`,
     },
     tagContent: {
       tag: "Тег",
       tagIndex: "Індекс тегу",
       itemsUnderTag: ({ count }) =>
-        count === 1 ? "1 елемент з цим тегом" : `Елементів з цим тегом: ${count}.`,
+        count === 1 ? "1 елемент з цим тегом." : `Елементів з цим тегом: ${count}.`,
       showingFirst: ({ count }) => `Показ перших ${count} тегів.`,
       totalTags: ({ count }) => `Всього знайдено тегів: ${count}.`,
     },

From 1c3f3d03e1682cd435363e354acae6dc936baef3 Mon Sep 17 00:00:00 2001
From: Eiko Wagenknecht <git@eiko-wagenknecht.de>
Date: Tue, 20 Feb 2024 18:06:53 +0100
Subject: [PATCH 106/115] fix(toc): correct type for minEntries param (#909)

---
 quartz/plugins/transformers/toc.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/quartz/plugins/transformers/toc.ts b/quartz/plugins/transformers/toc.ts
index 4c31d2062eecc..bfc2f9877fea8 100644
--- a/quartz/plugins/transformers/toc.ts
+++ b/quartz/plugins/transformers/toc.ts
@@ -6,7 +6,7 @@ import Slugger from "github-slugger"
 
 export interface Options {
   maxDepth: 1 | 2 | 3 | 4 | 5 | 6
-  minEntries: 1
+  minEntries: number
   showByDefault: boolean
   collapseByDefault: boolean
 }
@@ -52,7 +52,7 @@ export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefin
                 }
               })
 
-              if (toc.length > opts.minEntries) {
+              if (toc.length > 0 && toc.length > opts.minEntries) {
                 file.data.toc = toc.map((entry) => ({
                   ...entry,
                   depth: entry.depth - highestDepth,

From 7dd596ebcece8badf18586186c9712b364fab42e Mon Sep 17 00:00:00 2001
From: kon-foo <25391223+kon-foo@users.noreply.github.com>
Date: Wed, 21 Feb 2024 17:18:44 +0100
Subject: [PATCH 107/115] docs: Fix in explorer.md (#911)

---
 docs/features/explorer.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/features/explorer.md b/docs/features/explorer.md
index b5fd379a78eb9..a2acb861a1f0c 100644
--- a/docs/features/explorer.md
+++ b/docs/features/explorer.md
@@ -42,7 +42,7 @@ When passing in your own options, you can omit any or all of these fields if you
 
 Want to customize it even more?
 
-- Removing table of contents: remove `Component.Explorer()` from `quartz.layout.ts`
+- Removing explorer: remove `Component.Explorer()` from `quartz.layout.ts`
   - (optional): After removing the explorer component, you can move the [[table of contents | Table of Contents]] component back to the `left` part of the layout
 - Changing `sort`, `filter` and `map` behavior: explained in [[#Advanced customization]]
 - Component:

From 916aedce40864a485724d9df78879e8d130beab3 Mon Sep 17 00:00:00 2001
From: Aster Hu <asterhu17@gmail.com>
Date: Wed, 21 Feb 2024 22:04:36 -0500
Subject: [PATCH 108/115] docs: Add Aster's notebook to showcase.md (#912)

---
 docs/showcase.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/showcase.md b/docs/showcase.md
index cdef5fc5089c9..0509e93abdfaf 100644
--- a/docs/showcase.md
+++ b/docs/showcase.md
@@ -25,5 +25,6 @@ Want to see what Quartz can do? Here are some cool community gardens:
 - [Scaling Synthesis - A hypertext research notebook](https://scalingsynthesis.com/)
 - [Data Dictionary 🧠](https://glossary.airbyte.com/)
 - [sspaeti.com's Second Brain](https://brain.sspaeti.com/)
+- [🪴Aster's notebook](https://notes.asterhu.com)
 
 If you want to see your own on here, submit a [Pull Request adding yourself to this file](https://github.com/jackyzha0/quartz/blob/v4/docs/showcase.md)!

From 345c347a56070d0b0d2b72656df891eec6a1f7ab Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Thu, 22 Feb 2024 20:51:07 -0500
Subject: [PATCH 109/115] chore: passing additional buildCtx to componentData
 (#914)

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/components/types.ts              | 2 ++
 quartz/plugins/emitters/404.tsx         | 1 +
 quartz/plugins/emitters/contentPage.tsx | 1 +
 quartz/plugins/emitters/folderPage.tsx  | 1 +
 quartz/plugins/emitters/tagPage.tsx     | 1 +
 5 files changed, 6 insertions(+)

diff --git a/quartz/components/types.ts b/quartz/components/types.ts
index d322ea92672ce..a6b90d3b278a4 100644
--- a/quartz/components/types.ts
+++ b/quartz/components/types.ts
@@ -3,8 +3,10 @@ import { StaticResources } from "../util/resources"
 import { QuartzPluginData } from "../plugins/vfile"
 import { GlobalConfiguration } from "../cfg"
 import { Node } from "hast"
+import { BuildCtx } from "../util/ctx"
 
 export type QuartzComponentProps = {
+  ctx: BuildCtx
   externalResources: StaticResources
   fileData: QuartzPluginData
   cfg: GlobalConfiguration
diff --git a/quartz/plugins/emitters/404.tsx b/quartz/plugins/emitters/404.tsx
index f9d7a8620f5bd..e4605cfcd2f3e 100644
--- a/quartz/plugins/emitters/404.tsx
+++ b/quartz/plugins/emitters/404.tsx
@@ -46,6 +46,7 @@ export const NotFoundPage: QuartzEmitterPlugin = () => {
         frontmatter: { title: notFound, tags: [] },
       })
       const componentData: QuartzComponentProps = {
+        ctx,
         fileData: vfile.data,
         externalResources,
         cfg,
diff --git a/quartz/plugins/emitters/contentPage.tsx b/quartz/plugins/emitters/contentPage.tsx
index 904a8a8cae21d..f4938026e779f 100644
--- a/quartz/plugins/emitters/contentPage.tsx
+++ b/quartz/plugins/emitters/contentPage.tsx
@@ -97,6 +97,7 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
 
         const externalResources = pageResources(pathToRoot(slug), resources)
         const componentData: QuartzComponentProps = {
+          ctx,
           fileData: file.data,
           externalResources,
           cfg,
diff --git a/quartz/plugins/emitters/folderPage.tsx b/quartz/plugins/emitters/folderPage.tsx
index bf69d298782e1..d892b282a1c7b 100644
--- a/quartz/plugins/emitters/folderPage.tsx
+++ b/quartz/plugins/emitters/folderPage.tsx
@@ -95,6 +95,7 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpt
         const externalResources = pageResources(pathToRoot(slug), resources)
         const [tree, file] = folderDescriptions[folder]
         const componentData: QuartzComponentProps = {
+          ctx,
           fileData: file.data,
           externalResources,
           cfg,
diff --git a/quartz/plugins/emitters/tagPage.tsx b/quartz/plugins/emitters/tagPage.tsx
index 3eb6975f71b21..6f65ae477db8c 100644
--- a/quartz/plugins/emitters/tagPage.tsx
+++ b/quartz/plugins/emitters/tagPage.tsx
@@ -99,6 +99,7 @@ export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts)
         const externalResources = pageResources(pathToRoot(slug), resources)
         const [tree, file] = tagDescriptions[tag]
         const componentData: QuartzComponentProps = {
+          ctx,
           fileData: file.data,
           externalResources,
           cfg,

From 96c7076fb5333882dd354c5f156232217d4fab13 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Thu, 22 Feb 2024 22:16:40 -0500
Subject: [PATCH 110/115] feat(popover): add support for PDF (#913)

* feat(popover): add support for PDF

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: split pdf by ';'

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: remove unnecessary check

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/components/scripts/popover.inline.ts | 17 +++++++++++---
 quartz/components/styles/popover.scss       | 25 +++++++++++++++------
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts
index d0346b05b0c26..dee0a7876e19e 100644
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@@ -47,8 +47,8 @@ async function mouseEnterHandler(
   }
 
   if (!response) return
-  const contentType = response.headers.get("Content-Type")
-  const contentTypeCategory = contentType?.split("/")[0] ?? "text"
+  const [contentType] = response.headers.get("Content-Type")!.split(";")
+  const [contentTypeCategory, typeInfo] = contentType.split("/")
 
   const popoverElement = document.createElement("div")
   popoverElement.classList.add("popover")
@@ -56,7 +56,7 @@ async function mouseEnterHandler(
   popoverInner.classList.add("popover-inner")
   popoverElement.appendChild(popoverInner)
 
-  popoverInner.dataset.contentType = contentTypeCategory
+  popoverInner.dataset.contentType = contentType ?? undefined
 
   switch (contentTypeCategory) {
     case "image":
@@ -69,6 +69,17 @@ async function mouseEnterHandler(
 
       popoverInner.appendChild(img)
       break
+    case "application":
+      switch (typeInfo) {
+        case "pdf":
+          const pdf = document.createElement("iframe")
+          pdf.src = targetUrl.toString()
+          popoverInner.appendChild(pdf)
+          break
+        default:
+          break
+      }
+      break
     default:
       const contents = await response.text()
       const html = p.parseFromString(contents, "text/html")
diff --git a/quartz/components/styles/popover.scss b/quartz/components/styles/popover.scss
index 141b89ddf0f9f..b1694f97cb787 100644
--- a/quartz/components/styles/popover.scss
+++ b/quartz/components/styles/popover.scss
@@ -38,14 +38,25 @@
     white-space: normal;
   }
 
-  & > .popover-inner[data-content-type="image"] {
-    padding: 0;
-    max-height: 100%;
+  & > .popover-inner[data-content-type] {
+    &[data-content-type*="pdf"],
+    &[data-content-type*="image"] {
+      padding: 0;
+      max-height: 100%;
+    }
+
+    &[data-content-type*="image"] {
+      img {
+        margin: 0;
+        border-radius: 0;
+        display: block;
+      }
+    }
 
-    img {
-      margin: 0;
-      border-radius: 0;
-      display: block;
+    &[data-content-type*="pdf"] {
+      iframe {
+        width: 100%;
+      }
     }
   }
 

From 129e878b29dc53a1327d88089fa5876b0b1cc764 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Fri, 23 Feb 2024 00:55:35 -0500
Subject: [PATCH 111/115] chore(img): return targetUrl as given href (#916)

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
---
 quartz/components/scripts/popover.inline.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts
index dee0a7876e19e..972d3c638819c 100644
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@@ -61,10 +61,7 @@ async function mouseEnterHandler(
   switch (contentTypeCategory) {
     case "image":
       const img = document.createElement("img")
-
-      response.blob().then((blob) => {
-        img.src = URL.createObjectURL(blob)
-      })
+      img.src = targetUrl.toString()
       img.alt = targetUrl.pathname
 
       popoverInner.appendChild(img)

From fb66ae283848deec6b2be405642bd63f0c113e61 Mon Sep 17 00:00:00 2001
From: KylinDC <solder-hulls.06@icloud.com>
Date: Fri, 23 Feb 2024 13:56:26 +0800
Subject: [PATCH 112/115] deps(highlighting): migrate to shiki as shikiji has
 been archived (#918)

---
 package-lock.json | 34 +++++++++++++++++-----------------
 package.json      |  4 ++--
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4a8b583367050..dc020fc83b54e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,7 +40,7 @@
         "rehype-autolink-headings": "^7.1.0",
         "rehype-katex": "^7.0.0",
         "rehype-mathjax": "^6.0.0",
-        "rehype-pretty-code": "^0.12.6",
+        "rehype-pretty-code": "^0.13.0",
         "rehype-raw": "^7.0.0",
         "rehype-slug": "^6.0.0",
         "remark": "^15.0.1",
@@ -54,7 +54,7 @@
         "rfdc": "^1.3.1",
         "rimraf": "^5.0.5",
         "serve-handler": "^6.1.5",
-        "shikiji": "^0.10.2",
+        "shiki": "^1.1.6",
         "source-map-support": "^0.5.21",
         "to-vfile": "^8.0.0",
         "toml": "^3.0.0",
@@ -742,6 +742,11 @@
         "node": ">=14"
       }
     },
+    "node_modules/@shikijs/core": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.1.6.tgz",
+      "integrity": "sha512-kt9hhvrWTm0EPtRDIsoAZnSsFlIDBVBBI5CQewpA/NZCPin+MOKRXg+JiWc4y+8fZ/v0HzfDhu/UC+OTZGMt7A=="
+    },
     "node_modules/@sindresorhus/merge-streams": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
@@ -4708,11 +4713,11 @@
       }
     },
     "node_modules/rehype-pretty-code": {
-      "version": "0.12.6",
-      "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.12.6.tgz",
-      "integrity": "sha512-AW18s4eXwnb4PGwL0Y8BoUzBJr23epWNXndCKaZ52S4kl/4tsgM+406oCp5NdtPZsB0ItpaY+hCMv3kw58DLrA==",
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.13.0.tgz",
+      "integrity": "sha512-+22dz1StXlF7dlMyOySNaVxgcGhMI4BCxq0JxJJPWYGiKsI6cu5jyuIKGHXHvH18D8sv1rdKtvsY9UEfN3++SQ==",
       "dependencies": {
-        "@types/hast": "^3.0.3",
+        "@types/hast": "^3.0.4",
         "hast-util-to-string": "^3.0.0",
         "parse-numeric-range": "^1.3.0",
         "rehype-parse": "^9.0.0",
@@ -4723,7 +4728,7 @@
         "node": ">=18"
       },
       "peerDependencies": {
-        "shikiji": "^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0"
+        "shiki": "^1.0.0"
       }
     },
     "node_modules/rehype-raw": {
@@ -5321,19 +5326,14 @@
         "node": ">=8"
       }
     },
-    "node_modules/shikiji": {
-      "version": "0.10.2",
-      "resolved": "https://registry.npmjs.org/shikiji/-/shikiji-0.10.2.tgz",
-      "integrity": "sha512-wtZg3T0vtYV2PnqusWQs3mDaJBdCPWxFDrBM/SE5LfrX92gjUvfEMlc+vJnoKY6Z/S44OWaCRzNIsdBRWcTAiw==",
+    "node_modules/shiki": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.1.6.tgz",
+      "integrity": "sha512-j4pcpvaQWHb42cHeV+W6P+X/VcK7Y2ctvEham6zB8wsuRQroT6cEMIkiUmBU2Nqg2qnHZDH6ZyRdVldcy0l6xw==",
       "dependencies": {
-        "shikiji-core": "0.10.2"
+        "@shikijs/core": "1.1.6"
       }
     },
-    "node_modules/shikiji-core": {
-      "version": "0.10.2",
-      "resolved": "https://registry.npmjs.org/shikiji-core/-/shikiji-core-0.10.2.tgz",
-      "integrity": "sha512-9Of8HMlF96usXJHmCL3Gd0Fcf0EcyJUF9m8EoAKKd98mHXi0La2AZl1h6PegSFGtiYcBDK/fLuKbDa1l16r1fA=="
-    },
     "node_modules/signal-exit": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
diff --git a/package.json b/package.json
index 54c67fbff851f..094e62ae4e860 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "rehype-autolink-headings": "^7.1.0",
     "rehype-katex": "^7.0.0",
     "rehype-mathjax": "^6.0.0",
-    "rehype-pretty-code": "^0.12.6",
+    "rehype-pretty-code": "^0.13.0",
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
     "remark": "^15.0.1",
@@ -79,7 +79,7 @@
     "rfdc": "^1.3.1",
     "rimraf": "^5.0.5",
     "serve-handler": "^6.1.5",
-    "shikiji": "^0.10.2",
+    "shiki": "^1.1.6",
     "source-map-support": "^0.5.21",
     "to-vfile": "^8.0.0",
     "toml": "^3.0.0",

From be9b6b3a1e2038ea0a985ebd37fb18a661bddd04 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 23 Feb 2024 09:32:08 -0800
Subject: [PATCH 113/115] fix(docs): make docs accurate to callout behaviour
 (closes #920)

---
 docs/features/callouts.md | 63 +++++++++++++++++----------------------
 1 file changed, 27 insertions(+), 36 deletions(-)

diff --git a/docs/features/callouts.md b/docs/features/callouts.md
index d73979284ab66..3fefda2e60cdd 100644
--- a/docs/features/callouts.md
+++ b/docs/features/callouts.md
@@ -55,50 +55,41 @@ By default, custom callouts are handled by applying the `note` style. To make fa
 > >
 > > > [!example] You can even use multiple layers of nesting.
 
-> [!EXAMPLE] Examples
->
-> Aliases: example
+> [!note]
+> Aliases: "note"
 
-> [!note] Notes
->
-> Aliases: note
+> [!abstract]
+> Aliases: "abstract", "summary", "tldr"
 
-> [!abstract] Summaries
->
-> Aliases: abstract, summary, tldr
+> [!info]
+> Aliases: "info"
 
-> [!info] Info
->
-> Aliases: info, todo
+> [!todo]
+> Aliases: "todo"
 
-> [!tip] Hint
->
-> Aliases: tip, hint, important
+> [!tip]
+> Aliases: "tip", "hint", "important"
 
-> [!success] Success
->
-> Aliases: success, check, done
+> [!success]
+> Aliases: "success", "check", "done"
 
-> [!question] Question
->
-> Aliases: question, help, faq
+> [!question]
+> Aliases: "question", "help", "faq"
 
-> [!warning] Warning
->
-> Aliases: warning, caution, attention
+> [!warning]
+> Aliases: "warning", "attention", "caution"
 
-> [!failure] Failure
->
-> Aliases: failure, fail, missing
+> [!failure]
+> Aliases: "failure", "missing", "fail"
 
-> [!danger] Error
->
-> Aliases: danger, error
+> [!danger]
+> Aliases: "danger", "error"
 
-> [!bug] Bug
->
-> Aliases: bug
+> [!bug]
+> Aliases: "bug"
 
-> [!quote] Quote
->
-> Aliases: quote, cite
+> [!example]
+> Aliases: "example"
+
+> [!quote]
+> Aliases: "quote", "cite"

From 421718958fc47db0f1a7b53f51e0c7063db744b3 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 23 Feb 2024 11:20:35 -0800
Subject: [PATCH 114/115] fix(callouts): use user provided title instead of
 canonical for default title

---
 quartz/plugins/transformers/ofm.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 6aad230523ed0..fab7cf894740d 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -412,12 +412,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                   children: [
                     {
                       type: "text",
-                      value: useDefaultTitle
-                        ? capitalize(
-                            i18n(cfg.locale).components.callout[calloutType as ValidCallout] ??
-                              calloutType,
-                          )
-                        : titleContent + " ",
+                      value: useDefaultTitle ? capitalize(typeString) : titleContent + " ",
                     },
                     ...restOfTitle,
                   ],

From 1929241a62b67ebd9cc9831e372ab321874d03d1 Mon Sep 17 00:00:00 2001
From: Eiko Wagenknecht <git@eiko-wagenknecht.de>
Date: Fri, 23 Feb 2024 21:07:53 +0100
Subject: [PATCH 115/115] docs: update plugin documentation (#888)

* docs: first few plugins documented

* docs: move plugin info

* docs: move plugin docs to tag based system

* docs: update latex example code snippet

* docs: fix spelling of latex in title

* docs: add missing linebreak

* docs: remove plugin tag from feature pages

* docs: shorten titles

* docs: refine wording

* docs: move plugin details for frontmatter

* docs: add features/* tags

* docs: update latex example

* docs: make references more explicit

* docs: add stubs for the remaining plugins

* docs: more descriptions

* docs: fix feature tags

* docs: descriptions

* docs: new plugin pages

* docs: update configuration page

* docs: more plugin work

* docs: run prettier

* docs: remove comments in config file and add link to docs

* docs: minor fixes

* docs: run prettier

* docs: spelling

* docs: update docs/plugins/AliasRedirects.md

Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com>

* docs: update docs/plugins/Assets.md

Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com>

* docs: update docs/plugins/CNAME.md

Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com>

* docs: update docs/plugins/Static.md

Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com>

* docs: update docs

* docs: update docs/features/Mermaid diagrams.md

Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com>

* docs: update docs/plugins/RemoveDrafts.md

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* docs: update docs/plugins/Assets.md

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* docs: update docs/configuration.md

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* docs: update docs/configuration.md

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* docs: update docs/configuration.md

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* docs: some updates

* docs: work in review comments

---------

Signed-off-by: Eiko Wagenknecht <git@eiko-wagenknecht.de>
Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
---
 docs/advanced/making plugins.md          | 12 ++++---
 docs/authoring content.md                |  4 +++
 docs/configuration.md                    | 44 +++++++++++++++++-------
 docs/features/Latex.md                   | 13 ++++---
 docs/features/Mermaid diagrams.md        |  8 ++++-
 docs/features/Obsidian compatibility.md  | 28 ++++-----------
 docs/features/OxHugo compatibility.md    | 18 +++-------
 docs/features/RSS Feed.md                |  6 ++--
 docs/features/callouts.md                |  9 ++---
 docs/features/folder and tag listings.md | 21 +++++------
 docs/features/private pages.md           |  6 ++--
 docs/features/syntax highlighting.md     |  6 ++--
 docs/features/table of contents.md       | 22 ++++--------
 docs/features/wikilinks.md               |  2 +-
 docs/index.md                            |  2 +-
 docs/plugins/AliasRedirects.md           | 37 ++++++++++++++++++++
 docs/plugins/Assets.md                   | 20 +++++++++++
 docs/plugins/CNAME.md                    | 22 ++++++++++++
 docs/plugins/ComponentResources.md       | 18 ++++++++++
 docs/plugins/ContentIndex.md             | 26 ++++++++++++++
 docs/plugins/ContentPage.md              | 18 ++++++++++
 docs/plugins/CrawlLinks.md               | 30 ++++++++++++++++
 docs/plugins/CreatedModifiedDate.md      | 25 ++++++++++++++
 docs/plugins/Description.md              | 22 ++++++++++++
 docs/plugins/ExplicitPublish.md          | 18 ++++++++++
 docs/plugins/FolderPage.md               | 22 ++++++++++++
 docs/plugins/Frontmatter.md              | 24 +++++++++++++
 docs/plugins/GitHubFlavoredMarkdown.md   | 23 +++++++++++++
 docs/plugins/HardLineBreaks.md           | 18 ++++++++++
 docs/plugins/Latex.md                    | 20 +++++++++++
 docs/plugins/NotFoundPage.md             | 18 ++++++++++
 docs/plugins/ObsidianFlavoredMarkdown.md | 34 ++++++++++++++++++
 docs/plugins/OxHugoFlavoredMarkdown.md   | 29 ++++++++++++++++
 docs/plugins/RemoveDrafts.md             | 18 ++++++++++
 docs/plugins/Static.md                   | 21 +++++++++++
 docs/plugins/SyntaxHighlighting.md       | 23 +++++++++++++
 docs/plugins/TableOfContents.md          | 26 ++++++++++++++
 docs/plugins/TagPage.md                  | 20 +++++++++++
 docs/plugins/index.md                    |  3 ++
 docs/tags/plugin.md                      |  3 ++
 quartz.config.ts                         | 10 +++---
 41 files changed, 641 insertions(+), 108 deletions(-)
 create mode 100644 docs/plugins/AliasRedirects.md
 create mode 100644 docs/plugins/Assets.md
 create mode 100644 docs/plugins/CNAME.md
 create mode 100644 docs/plugins/ComponentResources.md
 create mode 100644 docs/plugins/ContentIndex.md
 create mode 100644 docs/plugins/ContentPage.md
 create mode 100644 docs/plugins/CrawlLinks.md
 create mode 100644 docs/plugins/CreatedModifiedDate.md
 create mode 100644 docs/plugins/Description.md
 create mode 100644 docs/plugins/ExplicitPublish.md
 create mode 100644 docs/plugins/FolderPage.md
 create mode 100644 docs/plugins/Frontmatter.md
 create mode 100644 docs/plugins/GitHubFlavoredMarkdown.md
 create mode 100644 docs/plugins/HardLineBreaks.md
 create mode 100644 docs/plugins/Latex.md
 create mode 100644 docs/plugins/NotFoundPage.md
 create mode 100644 docs/plugins/ObsidianFlavoredMarkdown.md
 create mode 100644 docs/plugins/OxHugoFlavoredMarkdown.md
 create mode 100644 docs/plugins/RemoveDrafts.md
 create mode 100644 docs/plugins/Static.md
 create mode 100644 docs/plugins/SyntaxHighlighting.md
 create mode 100644 docs/plugins/TableOfContents.md
 create mode 100644 docs/plugins/TagPage.md
 create mode 100644 docs/plugins/index.md
 create mode 100644 docs/tags/plugin.md

diff --git a/docs/advanced/making plugins.md b/docs/advanced/making plugins.md
index d9ed9e33efcad..b2bacf0aa3f3c 100644
--- a/docs/advanced/making plugins.md	
+++ b/docs/advanced/making plugins.md	
@@ -53,12 +53,12 @@ All transformer plugins must define at least a `name` field to register the plug
 
 Normally for both `remark` and `rehype`, you can find existing plugins that you can use to . If you'd like to create your own `remark` or `rehype` plugin, checkout the [guide to creating a plugin](https://unifiedjs.com/learn/guide/create-a-plugin/) using `unified` (the underlying AST parser and transformer library).
 
-A good example of a transformer plugin that borrows from the `remark` and `rehype` ecosystems is the [[Latex]] plugin:
+A good example of a transformer plugin that borrows from the `remark` and `rehype` ecosystems is the [[plugins/Latex|Latex]] plugin:
 
 ```ts title="quartz/plugins/transformers/latex.ts"
 import remarkMath from "remark-math"
 import rehypeKatex from "rehype-katex"
-import rehypeMathjax from "rehype-mathjax/svg.js"
+import rehypeMathjax from "rehype-mathjax/svg"
 import { QuartzTransformerPlugin } from "../types"
 
 interface Options {
@@ -84,10 +84,14 @@ export const Latex: QuartzTransformerPlugin<Options> = (opts?: Options) => {
     externalResources() {
       if (engine === "katex") {
         return {
-          css: ["https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css"],
+          css: [
+            // base css
+            "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css",
+          ],
           js: [
             {
-              src: "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/contrib/copy-tex.min.js",
+              // fix copy behaviour: https://github.com/KaTeX/KaTeX/blob/main/contrib/copy-tex/README.md
+              src: "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/copy-tex.min.js",
               loadTime: "afterDOMReady",
               contentType: "external",
             },
diff --git a/docs/authoring content.md b/docs/authoring content.md
index c259e501100bf..d872a964fa6c5 100644
--- a/docs/authoring content.md	
+++ b/docs/authoring content.md	
@@ -38,3 +38,7 @@ Some common frontmatter fields that are natively supported by Quartz:
 
 When your Quartz is at a point you're happy with, you can save your changes to GitHub.
 First, make sure you've [[setting up your GitHub repository|already setup your GitHub repository]] and then do `npx quartz sync`.
+
+## Customization
+
+Frontmatter parsing for `title`, `tags`, `aliases` and `cssclasses` is a functionality of the [[Frontmatter]] plugin, `date` is handled by the [[CreatedModifiedDate]] plugin and `description` by the [[Description]] plugin. See the plugin pages for customization options.
diff --git a/docs/configuration.md b/docs/configuration.md
index 366430cc2f799..6c76654926105 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -30,12 +30,12 @@ This part of the configuration concerns anything that can affect the whole site.
   - `{ provider: 'umami', host: '<your-umami-host>', websiteId: '<your-umami-website-id>' }`: use [Umami](https://umami.is/);
 - `locale`: used for [[i18n]] and date formatting
 - `baseUrl`: this is used for sitemaps and RSS feeds that require an absolute URL to know where the canonical 'home' of your site lives. This is normally the deployed URL of your site (e.g. `quartz.jzhao.xyz` for this site). Do not include the protocol (i.e. `https://`) or any leading or trailing slashes.
-  - This should also include the subpath if you are [[hosting]] on GitHub pages without a custom domain. For example, if my repository is `jackyzha0/quartz`, GitHub pages would deploy to `https://jackyzha0.github.io/quartz` and the `baseUrl` would be `jackyzha0.github.io/quartz`
+  - This should also include the subpath if you are [[hosting]] on GitHub pages without a custom domain. For example, if my repository is `jackyzha0/quartz`, GitHub pages would deploy to `https://jackyzha0.github.io/quartz` and the `baseUrl` would be `jackyzha0.github.io/quartz`.
   - Note that Quartz 4 will avoid using this as much as possible and use relative URLs whenever it can to make sure your site works no matter _where_ you end up actually deploying it.
 - `ignorePatterns`: a list of [glob](<https://en.wikipedia.org/wiki/Glob_(programming)>) patterns that Quartz should ignore and not search through when looking for files inside the `content` folder. See [[private pages]] for more details.
 - `defaultDateType`: whether to use created, modified, or published as the default date to display on pages and page listings.
 - `theme`: configure how the site looks.
-  - `cdnCaching`: Whether to use Google CDN to cache the fonts (generally will be faster). Disable this if you want Quartz to be self-contained. Default to `true`
+  - `cdnCaching`: If `true` (default), use Google CDN to cache the fonts. This will generally will be faster. Disable (`false`) this if you want Quartz to download the fonts to be self-contained.
   - `typography`: what fonts to use. Any font available on [Google Fonts](https://fonts.google.com/) works here.
     - `header`: Font to use for headers
     - `code`: Font for inline and block quotes.
@@ -56,7 +56,7 @@ You can think of Quartz plugins as a series of transformations over content.
 
 ![[quartz transform pipeline.png]]
 
-```ts
+```ts title="quartz.config.ts"
 plugins: {
   transformers: [...],
   filters: [...],
@@ -64,22 +64,40 @@ plugins: {
 }
 ```
 
-- [[making plugins#Transformers|Transformers]] **map** over content (e.g. parsing frontmatter, generating a description)
-- [[making plugins#Filters|Filters]] **filter** content (e.g. filtering out drafts)
-- [[making plugins#Emitters|Emitters]] **reduce** over content (e.g. creating an RSS feed or pages that list all files with a specific tag)
+- [[tags/plugin/transformer|Transformers]] **map** over content (e.g. parsing frontmatter, generating a description)
+- [[tags/plugin/filter|Filters]] **filter** content (e.g. filtering out drafts)
+- [[tags/plugin/emitter|Emitters]] **reduce** over content (e.g. creating an RSS feed or pages that list all files with a specific tag)
 
-By adding, removing, and reordering plugins from the `tranformers`, `filters`, and `emitters` fields, you can customize the behaviour of Quartz.
+You can customize the behaviour of Quartz by adding, removing and reordering plugins in the `transformers`, `filters` and `emitters` fields.
 
 > [!note]
-> Each node is modified by every transformer _in order_. Some transformers are position-sensitive so you may need to take special note of whether it needs come before or after any other particular plugins.
+> Each node is modified by every transformer _in order_. Some transformers are position sensitive, so you may need to pay particular attention to whether they need to come before or after certain other plugins.
 
-Additionally, plugins may also have their own configuration settings that you can pass in. For example, the [[Latex]] plugin allows you to pass in a field specifying the `renderEngine` to choose between Katex and MathJax.
+You should take care to add the plugin to the right entry corresponding to its plugin type. For example, to add the [[ExplicitPublish]] plugin (a [[tags/plugin/transformer|Transformer]], you would add the following line:
 
-```ts
+```ts title="quartz.config.ts"
 transformers: [
-  Plugin.FrontMatter(), // uses default options
-  Plugin.Latex({ renderEngine: "katex" }), // specify some options
+  ...
+  Plugin.ExplicitPublish(),
+  ...
+],
+```
+
+To remove a plugin, you should remove all occurrences of it in the `quartz.config.ts`.
+
+To customize plugins further, some plugins may also have their own configuration settings that you can pass in. If you do not pass in a configuration, the plugin will use its default settings.
+
+For example, the [[plugins/Latex|Latex]] plugin allows you to pass in a field specifying the `renderEngine` to choose between Katex and MathJax.
+
+```ts title="quartz.config.ts"
+transformers: [
+  Plugin.FrontMatter(), // use default options
+  Plugin.Latex({ renderEngine: "katex" }), // set some custom options
 ]
 ```
 
-If you'd like to make your own plugins, read the guide on [[making plugins]] for more information.
+Some plugins are included by default in the[ `quartz.config.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz.config.ts), but there are more available.
+
+You can see a list of all plugins and their configuration options [[tags/plugin|here]].
+
+If you'd like to make your own plugins, see the [[making plugins|making custom plugins]] guide.
diff --git a/docs/features/Latex.md b/docs/features/Latex.md
index 3c8f6ff1fde5a..e019190e1ac7b 100644
--- a/docs/features/Latex.md
+++ b/docs/features/Latex.md
@@ -1,6 +1,7 @@
 ---
+title: LaTeX
 tags:
-  - plugin/transformer
+  - feature/transformer
 ---
 
 Quartz uses [Katex](https://katex.org/) by default to typeset both inline and block math expressions at build time.
@@ -38,6 +39,9 @@ a & b & c
 \end{bmatrix}
 $$
 
+> [!warn]
+> Due to limitations in the [underlying parsing library](https://github.com/remarkjs/remark-math), block math in Quartz requires the `$$` delimiters to be on newlines like above.
+
 ### Inline Math
 
 Similarly, inline math can be rendered by delimiting math expression with a single `$`. For example, `$e^{i\pi} = -1$` produces $e^{i\pi} = -1$
@@ -53,11 +57,6 @@ For example:
 - Incorrect: `I have $1 and you have $2` produces I have $1 and you have $2
 - Correct: `I have \$1 and you have \$2` produces I have \$1 and you have \$2
 
-## MathJax
-
-In `quartz.config.ts`, you can configure Quartz to use [MathJax SVG rendering](https://docs.mathjax.org/en/latest/output/svg.html) by replacing `Plugin.Latex({ renderEngine: 'katex' })` with `Plugin.Latex({ renderEngine: 'mathjax' })`
-
 ## Customization
 
-- Removing Latex support: remove all instances of `Plugin.Latex()` from `quartz.config.ts`.
-- Plugin: `quartz/plugins/transformers/latex.ts`
+Latex parsing is a functionality of the [[plugins/Latex|Latex]] plugin. See the plugin page for customization options.
diff --git a/docs/features/Mermaid diagrams.md b/docs/features/Mermaid diagrams.md
index f14a5589b7701..9cc408917c137 100644
--- a/docs/features/Mermaid diagrams.md	
+++ b/docs/features/Mermaid diagrams.md	
@@ -1,9 +1,15 @@
+---
+title: "Mermaid Diagrams"
+tags:
+  - feature/transformer
+---
+
 Quartz supports Mermaid which allows you to add diagrams and charts to your notes. Mermaid supports a range of diagrams, such as [flow charts](https://mermaid.js.org/syntax/flowchart.html), [sequence diagrams](https://mermaid.js.org/syntax/sequenceDiagram.html), and [timelines](https://mermaid.js.org/syntax/timeline.html). This is enabled as a part of [[Obsidian compatibility]] and can be configured and enabled/disabled from that plugin.
 
 By default, Quartz will render Mermaid diagrams to match the site theme.
 
 > [!warning]
-> Wondering why Mermaid diagrams may not be showing up even if you have them enabled? You may need to reorder your plugins so that `Plugin.ObsidianFlavoredMarkdown()` is _after_ `Plugin.SyntaxHighlighting()`.
+> Wondering why Mermaid diagrams may not be showing up even if you have them enabled? You may need to reorder your plugins so that [[ObsidianFlavoredMarkdown]] is _after_ [[SyntaxHighlighting]].
 
 ## Syntax
 
diff --git a/docs/features/Obsidian compatibility.md b/docs/features/Obsidian compatibility.md
index 1254370e0765a..e469f48665975 100644
--- a/docs/features/Obsidian compatibility.md	
+++ b/docs/features/Obsidian compatibility.md	
@@ -1,33 +1,17 @@
 ---
+title: "Obsidian Compatibility"
 tags:
-  - plugin/transformer
+  - feature/transformer
 ---
 
 Quartz was originally designed as a tool to publish Obsidian vaults as websites. Even as the scope of Quartz has widened over time, it hasn't lost the ability to seamlessly interoperate with Obsidian.
 
-By default, Quartz ships with `Plugin.ObsidianFlavoredMarkdown` which is a transformer plugin that adds support for [Obsidian Flavored Markdown](https://help.obsidian.md/Editing+and+formatting/Obsidian+Flavored+Markdown). This includes support for features like [[wikilinks]] and [[Mermaid diagrams]].
+By default, Quartz ships with the [[ObsidianFlavoredMarkdown]] plugin, which is a transformer plugin that adds support for [Obsidian Flavored Markdown](https://help.obsidian.md/Editing+and+formatting/Obsidian+Flavored+Markdown). This includes support for features like [[wikilinks]] and [[Mermaid diagrams]].
 
-It also ships with support for [frontmatter parsing](https://help.obsidian.md/Editing+and+formatting/Properties) with the same fields that Obsidian uses through the `Plugin.FrontMatter` transformer plugin.
+It also ships with support for [frontmatter parsing](https://help.obsidian.md/Editing+and+formatting/Properties) with the same fields that Obsidian uses through the [[Frontmatter]] transformer plugin.
 
-Finally, Quartz also provides `Plugin.CrawlLinks` which allows you to customize Quartz's link resolution behaviour to match Obsidian.
+Finally, Quartz also provides [[CrawlLinks]] plugin, which allows you to customize Quartz's link resolution behaviour to match Obsidian.
 
 ## Configuration
 
-- Frontmatter parsing:
-  - Disabling: remove all instances of `Plugin.FrontMatter()` from `quartz.config.ts`.
-  - Customize default values for frontmatter: edit `quartz/plugins/transformers/frontmatter.ts`
-- Obsidian Flavored Markdown:
-  - Disabling: remove all instances of `Plugin.ObsidianFlavoredMarkdown()` from `quartz.config.ts`
-  - Customizing features: `Plugin.ObsidianFlavoredMarkdown` has several other options to toggle on and off:
-    - `comments`: whether to enable `%%` style Obsidian comments. Defaults to `true`
-    - `highlight`: whether to enable `==` style highlights. Defaults to `true`
-    - `wikilinks`: whether to enable turning [[wikilinks]] into regular links. Defaults to `true`
-    - `callouts`: whether to enable [[callouts]]. Defaults to `true`
-    - `mermaid`: whether to enable [[Mermaid diagrams]]. Defaults to `true`
-    - `parseTags`: whether to try and parse tags in the content body. Defaults to `true`
-    - `parseArrows`: whether to try and parse arrows in the content body. Defaults to `true`.
-    - `enableInHtmlEmbed`: whether to try and parse Obsidian flavoured markdown in raw HTML. Defaults to `false`
-    - `enableYouTubeEmbed`: whether to enable embedded YouTube videos using external image Markdown syntax. Defaults to `false`
-- Link resolution behaviour:
-  - Disabling: remove all instances of `Plugin.CrawlLinks()` from `quartz.config.ts`
-  - Changing link resolution preference: set `markdownLinkResolution` to one of `absolute`, `relative` or `shortest`
+This functionality is provided by the [[ObsidianFlavoredMarkdown]], [[Frontmatter]] and [[CrawlLinks]] plugins. See the plugin pages for customization options.
diff --git a/docs/features/OxHugo compatibility.md b/docs/features/OxHugo compatibility.md
index 3143eb1b5f265..e220511467e2b 100644
--- a/docs/features/OxHugo compatibility.md	
+++ b/docs/features/OxHugo compatibility.md	
@@ -1,11 +1,12 @@
 ---
+title: "OxHugo Compatibility"
 tags:
-  - plugin/transformer
+  - feature/transformer
 ---
 
 [org-roam](https://www.orgroam.com/) is a plain-text personal knowledge management system for [emacs](https://en.wikipedia.org/wiki/Emacs). [ox-hugo](https://github.com/kaushalmodi/ox-hugo) is org exporter backend that exports `org-mode` files to [Hugo](https://gohugo.io/) compatible Markdown.
 
-Because the Markdown generated by ox-hugo is not pure Markdown but Hugo specific, we need to transform it to fit into Quartz. This is done by `Plugin.OxHugoFlavouredMarkdown`. Even though this [[making plugins|plugin]] was written with `ox-hugo` in mind, it should work for any Hugo specific Markdown.
+Because the Markdown generated by ox-hugo is not pure Markdown but Hugo specific, we need to transform it to fit into Quartz. This is done by the [[OxHugoFlavoredMarkdown]] plugin. Even though this plugin was written with `ox-hugo` in mind, it should work for any Hugo specific Markdown.
 
 ```typescript title="quartz.config.ts"
 plugins: {
@@ -25,15 +26,4 @@ Quartz by default doesn't understand `org-roam` files as they aren't Markdown. Y
 
 ## Configuration
 
-- Link resolution
-  - `wikilinks`: Whether to replace `{{ relref }}` with Quartz [[wikilinks]]
-  - `removePredefinedAnchor`: Whether to remove [pre-defined anchor set by ox-hugo](https://ox-hugo.scripter.co/doc/anchors/).
-- Image handling
-  - `replaceFigureWithMdImg`: Whether to replace `<figure/>` with `![]()`
-- Formatting
-  - `removeHugoShortcode`: Whether to remove hugo shortcode syntax (`{{}}`)
-  - `replaceOrgLatex`: Whether to replace org-mode formatting for latex fragments with what `Plugin.Latex` supports.
-
-> [!warning]
->
-> While you can use `Plugin.OxHugoFlavoredMarkdown` and `Plugin.ObsidianFlavoredMarkdown` together, it's not recommended because it might mutate the file in unexpected ways. Use with caution.
+This functionality is provided by the [[OxHugoFlavoredMarkdown]] plugin. See the plugin page for customization options.
diff --git a/docs/features/RSS Feed.md b/docs/features/RSS Feed.md
index bfeb399c98fbd..ed4138dfca3a8 100644
--- a/docs/features/RSS Feed.md	
+++ b/docs/features/RSS Feed.md	
@@ -1,7 +1,5 @@
-Quartz creates an RSS feed for all the content on your site by generating an `index.xml` file that RSS readers can subscribe to. Because of the RSS spec, this requires the `baseUrl` property in your [[configuration]] to be set properly for RSS readers to pick it up properly.
+Quartz emits an RSS feed for all the content on your site by generating an `index.xml` file that RSS readers can subscribe to. Because of the RSS spec, this requires the `baseUrl` property in your [[configuration]] to be set properly for RSS readers to pick it up properly.
 
 ## Configuration
 
-- Remove RSS feed: set the `enableRSS` field of `Plugin.ContentIndex` in `quartz.config.ts` to be `false`.
-- Change number of entries: set the `rssLimit` field of `Plugin.ContentIndex` to be the desired value. It defaults to latest 10 items.
-- Use rich HTML output in RSS: set `rssFullHtml` field of `Plugin.ContentIndex` to be `true`.
+This functionality is provided by the [[ContentIndex]] plugin. See the plugin page for customization options.
diff --git a/docs/features/callouts.md b/docs/features/callouts.md
index 3fefda2e60cdd..4caeeb4c8048c 100644
--- a/docs/features/callouts.md
+++ b/docs/features/callouts.md
@@ -1,7 +1,7 @@
 ---
 title: Callouts
 tags:
-  - plugin/transformer
+  - feature/transformer
 ---
 
 Quartz supports the same Admonition-callout syntax as Obsidian.
@@ -19,12 +19,13 @@ This includes
 See [documentation on supported types and syntax here](https://help.obsidian.md/Editing+and+formatting/Callouts).
 
 > [!warning]
-> Wondering why callouts may not be showing up even if you have them enabled? You may need to reorder your plugins so that `Plugin.ObsidianFlavoredMarkdown()` is _after_ `Plugin.SyntaxHighlighting()`.
+> Wondering why callouts may not be showing up even if you have them enabled? You may need to reorder your plugins so that [[ObsidianFlavoredMarkdown]] is _after_ [[SyntaxHighlighting]].
 
 ## Customization
 
-- Disable callouts: simply pass `callouts: false` to the plugin: `Plugin.ObsidianFlavoredMarkdown({ callouts: false })`
-- Editing icons: `quartz/styles/callouts.scss`
+The callouts are a functionality of the [[ObsidianFlavoredMarkdown]] plugin. See the plugin page for how to enable or disable them.
+
+You can edit the icons by customizing `quartz/styles/callouts.scss`.
 
 ### Add custom callouts
 
diff --git a/docs/features/folder and tag listings.md b/docs/features/folder and tag listings.md
index dfde7c26ebc57..d330f14797133 100644
--- a/docs/features/folder and tag listings.md	
+++ b/docs/features/folder and tag listings.md	
@@ -1,18 +1,20 @@
 ---
 title: Folder and Tag Listings
 tags:
-  - plugin/emitter
+  - feature/emitter
 ---
 
-Quartz creates listing pages for any folders and tags you have.
+Quartz emits listing pages for any folders and tags you have.
 
 ## Folder Listings
 
 Quartz will generate an index page for all the pages under that folder. This includes any content that is multiple levels deep.
 
-Additionally, Quartz will also generate pages for subfolders. Say you have a note in a nested folder `content/abc/def/note.md`. Then, Quartz would generate a page for all the notes under `abc` _and_ a page for all the notes under `abc/def`.
+Additionally, Quartz will also generate pages for subfolders. Say you have a note in a nested folder `content/abc/def/note.md`. Then Quartz would generate a page for all the notes under `abc` _and_ a page for all the notes under `abc/def`.
 
-By default, Quartz will title the page `Folder: <name of folder>` and no description. You can override this by creating an `index.md` file in the folder with the `title` [[authoring content#Syntax|frontmatter]] field. Any content you write in this file will also be used in the description of the folder.
+You can link to the folder listing by referencing its name, plus a trailing slash, like this: `[[advanced/]]` (results in [[advanced/]]).
+
+By default, Quartz will title the page `Folder: <folder name>` and no description. You can override this by creating an `index.md` file in the folder with the `title` [[authoring content#Syntax|frontmatter]] field. Any content you write in this file will also be used in the folder description.
 
 For example, for the folder `content/posts`, you can add another file `content/posts/index.md` to add a specific description for it.
 
@@ -20,13 +22,12 @@ For example, for the folder `content/posts`, you can add another file `content/p
 
 Quartz will also create an index page for each unique tag in your vault and render a list of all notes with that tag.
 
-Quartz also supports tag hierarchies as well (e.g. `plugin/emitter`) and will also render a separate tag page for each layer of the tag hierarchy. It will also create a default global tag index page at `/tags` that displays a list of all the tags in your Quartz.
+Quartz also supports tag hierarchies as well (e.g. `plugin/emitter`) and will also render a separate tag page for each level of the tag hierarchy. It will also create a default global tag index page at `/tags` that displays a list of all the tags in your Quartz.
 
-Like folder listings, you can also provide a description and title for a tag page by creating a file for each tag. For example, if you wanted to create a custom description for the #component tag, you would create a file at `content/tags/component.md` with a title and description.
+You can link to the tag listing by referencing its name with a `tag/` prefix, like this: `[[tags/plugin]]` (results in [[tags/plugin]]).
 
-## Customization
+As with folder listings, you can also provide a description and title for a tag page by creating a file for each tag. For example, if you wanted to create a custom description for the #component tag, you would create a file at `content/tags/component.md` with a title and description.
 
-The layout for both the folder and content pages can be customized. By default, they use the `defaultListPageLayout` in `quartz.layouts.ts`. If you'd like to make more involved changes to the layout and don't mind editing some [[creating components|Quartz components]], you can take a look at `quartz/components/pages/FolderContent.tsx` and `quartz/components/pages/TagContent.tsx` respectively.
+## Customization
 
-- Removing folder listings: remove `Plugin.FolderPage()` from `emitters` in `quartz.config.ts`
-- Removing tag listings: remove `Plugin.TagPage()` from `emitters` in `quartz.config.ts`
+The folder listings are a functionality of the [[FolderPage]] plugin, the tag listings of the [[TagPage]] plugin. See the plugin pages for customization options.
diff --git a/docs/features/private pages.md b/docs/features/private pages.md
index 638c628b6b662..1e8f8aa24c90e 100644
--- a/docs/features/private pages.md	
+++ b/docs/features/private pages.md	
@@ -1,16 +1,16 @@
 ---
 title: Private Pages
 tags:
-  - plugin/filter
+  - feature/filter
 ---
 
 There may be some notes you want to avoid publishing as a website. Quartz supports this through two mechanisms which can be used in conjunction:
 
 ## Filter Plugins
 
-[[making plugins#Filters|Filter plugins]] are plugins that filter out content based off of certain criteria. By default, Quartz uses the `Plugin.RemoveDrafts` plugin which filters out any note that has `draft: true` in the frontmatter.
+[[making plugins#Filters|Filter plugins]] are plugins that filter out content based off of certain criteria. By default, Quartz uses the [[RemoveDrafts]] plugin which filters out any note that has `draft: true` in the frontmatter.
 
-If you'd like to only publish a select number of notes, you can instead use `Plugin.ExplicitPublish` which will filter out all notes except for any that have `publish: true` in the frontmatter.
+If you'd like to only publish a select number of notes, you can instead use [[ExplicitPublish]] which will filter out all notes except for any that have `publish: true` in the frontmatter.
 
 > [!warning]
 > Regardless of the filter plugin used, **all non-markdown files will be emitted and available publically in the final build.** This includes files such as images, voice recordings, PDFs, etc. One way to prevent this and still be able to embed local images is to create a folder specifically for public media and add the following two patterns to the ignorePatterns array.
diff --git a/docs/features/syntax highlighting.md b/docs/features/syntax highlighting.md
index 68436c2da599b..16fef2575757b 100644
--- a/docs/features/syntax highlighting.md	
+++ b/docs/features/syntax highlighting.md	
@@ -1,7 +1,7 @@
 ---
 title: Syntax Highlighting
 tags:
-  - plugin/transformer
+  - feature/transformer
 ---
 
 Syntax highlighting in Quartz is completely done at build-time. This means that Quartz only ships pre-calculated CSS to highlight the right words so there is no heavy client-side bundle that does the syntax highlighting.
@@ -130,6 +130,4 @@ const [name, setName] = useState('Taylor');
 
 ## Customization
 
-- Removing syntax highlighting: delete all usages of `Plugin.SyntaxHighlighting()` from `quartz.config.ts`.
-- Style: By default, Quartz uses derivatives of the GitHub light and dark themes. You can customize the colours in the `quartz/styles/syntax.scss` file.
-- Plugin: `quartz/plugins/transformers/syntax.ts`
+Syntax highlighting is a functionality of the [[SyntaxHighlighting]] plugin. See the plugin page for customization options.
diff --git a/docs/features/table of contents.md b/docs/features/table of contents.md
index 0298ffaabf9f5..4ecccc9340ede 100644
--- a/docs/features/table of contents.md	
+++ b/docs/features/table of contents.md	
@@ -2,25 +2,17 @@
 title: "Table of Contents"
 tags:
   - component
-  - plugin/transformer
+  - feature/transformer
 ---
 
-Quartz can automatically generate a table of contents from a list of headings on each page. It will also show you your current scroll position on the site by marking headings you've scrolled through with a different colour.
+Quartz can automatically generate a table of contents (TOC) from a list of headings on each page. It will also show you your current scrolling position on the page by highlighting headings you've scrolled through with a different color.
 
-By default, it will show all headers from H1 (`# Title`) all the way to H3 (`### Title`) and will only show the table of contents if there is more than 1 header on the page.
-You can also hide the table of contents on a page by adding `enableToc: false` to the frontmatter for that page.
+You can hide the TOC on a page by adding `enableToc: false` to the frontmatter for that page.
 
-> [!info]
-> This feature requires both `Plugin.TableOfContents` in your `quartz.config.ts` and `Component.TableOfContents` in your `quartz.layout.ts` to function correctly.
+By default, the TOC shows all headings from H1 (`# Title`) to H3 (`### Title`) and is only displayed if there is more than one heading on the page.
 
 ## Customization
 
-- Removing table of contents: remove all instances of `Plugin.TableOfContents()` from `quartz.config.ts`. and `Component.TableOfContents()` from `quartz.layout.ts`
-- Changing the max depth: pass in a parameter to `Plugin.TableOfContents({ maxDepth: 4 })`
-- Changing the minimum number of entries in the Table of Contents before it renders: pass in a parameter to `Plugin.TableOfContents({ minEntries: 3 })`
-- Collapse the table of content by default: pass in a parameter to `Plugin.TableOfContents({ collapseByDefault: true })`
-- Component: `quartz/components/TableOfContents.tsx`
-- Style:
-  - Modern (default): `quartz/components/styles/toc.scss`
-  - Legacy Quartz 3 style: `quartz/components/styles/legacyToc.scss`
-- Script: `quartz/components/scripts/toc.inline.ts`
+The table of contents is a functionality of the [[TableOfContents]] plugin. See the plugin page for more customization options.
+
+It also needs the `TableOfContents` component, which is displayed in the right sidebar by default. You can change this by customizing the [[layout]]. The TOC component can be configured with the `layout` parameter, which can either be `modern` (default) or `legacy`.
diff --git a/docs/features/wikilinks.md b/docs/features/wikilinks.md
index 1b005327c5b49..ad4f2d7798e31 100644
--- a/docs/features/wikilinks.md
+++ b/docs/features/wikilinks.md
@@ -4,7 +4,7 @@ title: Wikilinks
 
 Wikilinks were pioneered by earlier internet wikis to make it easier to write links across pages without needing to write Markdown or HTML links each time.
 
-Quartz supports Wikilinks by default and these links are resolved by Quartz using `Plugin.CrawlLinks`. See the [Obsidian Help page on Internal Links](https://help.obsidian.md/Linking+notes+and+files/Internal+links) for more information on Wikilink syntax.
+Quartz supports Wikilinks by default and these links are resolved by Quartz using the [[CrawlLinks]] plugin. See the [Obsidian Help page on Internal Links](https://help.obsidian.md/Linking+notes+and+files/Internal+links) for more information on Wikilink syntax.
 
 This is enabled as a part of [[Obsidian compatibility]] and can be configured and enabled/disabled from that plugin.
 
diff --git a/docs/index.md b/docs/index.md
index f25b6e24425d4..87cf024a3458c 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -31,7 +31,7 @@ If you prefer instructions in a video format you can try following Nicole van de
 
 ## 🔧 Features
 
-- [[Obsidian compatibility]], [[full-text search]], [[graph view]], note transclusion, [[wikilinks]], [[backlinks]], [[Latex]], [[syntax highlighting]], [[popover previews]], [[Docker Support]], [[i18n|internationalization]] and [many more](./features) right out of the box
+- [[Obsidian compatibility]], [[full-text search]], [[graph view]], note transclusion, [[wikilinks]], [[backlinks]], [[features/Latex|Latex]], [[syntax highlighting]], [[popover previews]], [[Docker Support]], [[i18n|internationalization]] and [many more](./features) right out of the box
 - Hot-reload for both configuration and content
 - Simple JSX layouts and [[creating components|page components]]
 - [[SPA Routing|Ridiculously fast page loads]] and tiny bundle sizes
diff --git a/docs/plugins/AliasRedirects.md b/docs/plugins/AliasRedirects.md
new file mode 100644
index 0000000000000..3a33ce6490336
--- /dev/null
+++ b/docs/plugins/AliasRedirects.md
@@ -0,0 +1,37 @@
+---
+title: AliasRedirects
+tags:
+  - plugin/emitter
+---
+
+This plugin emits HTML redirect pages for aliases and permalinks defined in the frontmatter of content files.
+
+For example, A `foo.md` has the following frontmatter
+
+```md title="foo.md"
+---
+title: "Foo"
+alias:
+  - "bar"
+---
+```
+
+The target `host.me/bar` will be redirected to `host.me/foo`
+
+Note that these are permanent redirect.
+
+The emitter supports the following aliases:
+
+- `aliases`
+- `alias`
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin has no configuration options.
+
+## API
+
+- Category: Emitter
+- Function name: `Plugin.AliasRedirects()`.
+- Source: [`quartz/plugins/emitters/aliases.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/aliases.ts).
diff --git a/docs/plugins/Assets.md b/docs/plugins/Assets.md
new file mode 100644
index 0000000000000..eb03994e1a505
--- /dev/null
+++ b/docs/plugins/Assets.md
@@ -0,0 +1,20 @@
+---
+title: Assets
+tags:
+  - plugin/emitter
+---
+
+This plugin emits all non-Markdown static assets in your content folder (like images, videos, HTML, etc). The plugin respects the `ignorePatterns` in the global [[configuration]].
+
+Note that all static assets will then be accessible through its path on your generated site, i.e: `host.me/path/to/static.pdf`
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin has no configuration options.
+
+## API
+
+- Category: Emitter
+- Function name: `Plugin.Assets()`.
+- Source: [`quartz/plugins/emitters/assets.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/assets.ts).
diff --git a/docs/plugins/CNAME.md b/docs/plugins/CNAME.md
new file mode 100644
index 0000000000000..1cc0b5ccfe537
--- /dev/null
+++ b/docs/plugins/CNAME.md
@@ -0,0 +1,22 @@
+---
+title: CNAME
+tags:
+  - plugin/emitter
+---
+
+This plugin emits a `CNAME` record that points your subdomain to the default domain of your site.
+
+If you want to use a custom domain name like `quartz.example.com` for the site, then this is needed.
+
+See [[Hosting]] for more information.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin has no configuration options.
+
+## API
+
+- Category: Emitter
+- Function name: `Plugin.CNAME()`.
+- Source: [`quartz/plugins/emitters/cname.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/cname.ts).
diff --git a/docs/plugins/ComponentResources.md b/docs/plugins/ComponentResources.md
new file mode 100644
index 0000000000000..739c170701939
--- /dev/null
+++ b/docs/plugins/ComponentResources.md
@@ -0,0 +1,18 @@
+---
+title: ComponentResources
+tags:
+  - plugin/emitter
+---
+
+This plugin manages and emits the static resources required for the Quartz framework. This includes CSS stylesheets and JavaScript scripts that enhance the functionality and aesthetics of the generated site. See also the `cdnCaching` option in the `theme` section of the [[configuration]].
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin has no configuration options.
+
+## API
+
+- Category: Emitter
+- Function name: `Plugin.ComponentResources()`.
+- Source: [`quartz/plugins/emitters/componentResources.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/componentResources.ts).
diff --git a/docs/plugins/ContentIndex.md b/docs/plugins/ContentIndex.md
new file mode 100644
index 0000000000000..af235b057806a
--- /dev/null
+++ b/docs/plugins/ContentIndex.md
@@ -0,0 +1,26 @@
+---
+title: ContentIndex
+tags:
+  - plugin/emitter
+---
+
+This plugin emits both RSS and an XML sitemap for your site. The [[RSS Feed]] allows users to subscribe to content on your site and the sitemap allows search engines to better index your site. The plugin also emits a `contentIndex.json` file which is used by dynamic frontend components like search and graph.
+
+This plugin emits a comprehensive index of the site's content, generating additional resources such as a sitemap, an RSS feed, and a
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin accepts the following configuration options:
+
+- `enableSiteMap`: If `true` (default), generates a sitemap XML file (`sitemap.xml`) listing all site URLs for search engines in content discovery.
+- `enableRSS`: If `true` (default), produces an RSS feed (`index.xml`) with recent content updates.
+- `rssLimit`: Defines the maximum number of entries to include in the RSS feed, helping to focus on the most recent or relevant content. Defaults to `10`.
+- `rssFullHtml`: If `true`, the RSS feed includes full HTML content. Otherwise it includes just summaries.
+- `includeEmptyFiles`: If `true` (default), content files with no body text are included in the generated index and resources.
+
+## API
+
+- Category: Emitter
+- Function name: `Plugin.ContentIndex()`.
+- Source: [`quartz/plugins/emitters/contentIndex.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/contentIndex.ts).
diff --git a/docs/plugins/ContentPage.md b/docs/plugins/ContentPage.md
new file mode 100644
index 0000000000000..5d9016f3c30a1
--- /dev/null
+++ b/docs/plugins/ContentPage.md
@@ -0,0 +1,18 @@
+---
+title: ContentPage
+tags:
+  - plugin/emitter
+---
+
+This plugin is a core component of the Quartz framework. It generates the HTML pages for each piece of Markdown content. It emits the full-page [[layout]], including headers, footers, and body content, among others.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin has no configuration options.
+
+## API
+
+- Category: Emitter
+- Function name: `Plugin.ContentPage()`.
+- Source: [`quartz/plugins/emitters/contentPage.tsx`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/contentPage.tsx).
diff --git a/docs/plugins/CrawlLinks.md b/docs/plugins/CrawlLinks.md
new file mode 100644
index 0000000000000..15a0d660795d4
--- /dev/null
+++ b/docs/plugins/CrawlLinks.md
@@ -0,0 +1,30 @@
+---
+title: CrawlLinks
+tags:
+  - plugin/transformer
+---
+
+This plugin parses links and processes them to point to the right places. It is also needed for embedded links (like images). See [[Obsidian compatibility]] for more information.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin accepts the following configuration options:
+
+- `markdownLinkResolution`: Sets the strategy for resolving Markdown paths, can be `"absolute"` (default), `"relative"` or `"shortest"`. You should use the same setting here as in [[Obsidian compatibility|Obsidian]].
+  - `absolute`: Path relative to the root of the content folder.
+  - `relative`: Path relative to the file you are linking from.
+  - `shortest`: Name of the file. If this isn't enough to identify the file, use the full absolute path.
+- `prettyLinks`: If `true` (default), simplifies links by removing folder paths, making them more user friendly (e.g. `folder/deeply/nested/note` becomes `note`).
+- `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.
+
+> [!warning]
+> Removing this plugin is _not_ recommended and will likely break the page.
+
+## API
+
+- Category: Transformer
+- Function name: `Plugin.CrawlLinks()`.
+- Source: [`quartz/plugins/transformers/links.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/links.ts).
diff --git a/docs/plugins/CreatedModifiedDate.md b/docs/plugins/CreatedModifiedDate.md
new file mode 100644
index 0000000000000..6a0f1371a0730
--- /dev/null
+++ b/docs/plugins/CreatedModifiedDate.md
@@ -0,0 +1,25 @@
+---
+title: "CreatedModifiedDate"
+tags:
+  - plugin/transformer
+---
+
+This plugin determines the created, modified, and published dates for a document using three potential data sources: frontmatter metadata, Git history, and the filesystem. See [[authoring content#Syntax]] for more information.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin accepts the following configuration options:
+
+- `priority`: The data sources to consult for date information. Highest priority first. Possible values are `"frontmatter"`, `"git"`, and `"filesystem"`. Defaults to `"frontmatter", "git", "filesystem"]`.
+
+> [!warning]
+> If you rely on `git` for dates, make sure `defaultDateType` is set to `modified` in `quartz.config.ts`.
+>
+> Depending on how you [[hosting|host]] your Quartz, the `filesystem` dates of your local files may not match the final dates. In these cases, it may be better to use `git` or `frontmatter` to guarantee correct dates.
+
+## API
+
+- Category: Transformer
+- Function name: `Plugin.CreatedModifiedDate()`.
+- Source: [`quartz/plugins/transformers/lastmod.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/lastmod.ts).
diff --git a/docs/plugins/Description.md b/docs/plugins/Description.md
new file mode 100644
index 0000000000000..6849b3ca42c60
--- /dev/null
+++ b/docs/plugins/Description.md
@@ -0,0 +1,22 @@
+---
+title: Description
+tags:
+  - plugin/transformer
+---
+
+This plugin generates descriptions that are used as metadata for the HTML `head`, the [[RSS Feed]] and in [[folder and tag listings]] if there is no main body content, the description is used as the text between the title and the listing.
+
+If the frontmatter contains a `description` property, it is used (see [[authoring content#Syntax]]). Otherwise, the plugin will do its best to use the first few sentences of the content to reach the target description length.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin accepts the following configuration options:
+
+- `descriptionLength`: the maximum length of the generated description. Default is 150 characters. The cut off happens after the first _sentence_ that ends after the given length.
+
+## API
+
+- Category: Transformer
+- Function name: `Plugin.Description()`.
+- Source: [`quartz/plugins/transformers/description.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/description.ts).
diff --git a/docs/plugins/ExplicitPublish.md b/docs/plugins/ExplicitPublish.md
new file mode 100644
index 0000000000000..7ef2dd4d02e21
--- /dev/null
+++ b/docs/plugins/ExplicitPublish.md
@@ -0,0 +1,18 @@
+---
+title: ExplicitPublish
+tags:
+  - plugin/filter
+---
+
+This plugin filters content based on an explicit `publish` flag in the frontmatter, allowing only content that is explicitly marked for publication to pass through. It's the opt-in version of [[RemoveDrafts]]. See [[private pages]] for more information.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin has no configuration options.
+
+## API
+
+- Category: Emitter
+- Function name: `Plugin.ExplicitPublish()`.
+- Source: [`quartz/plugins/filters/explicit.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/filters/explicit.ts).
diff --git a/docs/plugins/FolderPage.md b/docs/plugins/FolderPage.md
new file mode 100644
index 0000000000000..92a700ae97076
--- /dev/null
+++ b/docs/plugins/FolderPage.md
@@ -0,0 +1,22 @@
+---
+title: FolderPage
+tags:
+  - plugin/emitter
+---
+
+This plugin generates index pages for folders, creating a listing page for each folder that contains multiple content files. See [[folder and tag listings]] for more information.
+
+Example: [[advanced/|Advanced]]
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin has no configuration options.
+
+The pages are displayed using the `defaultListPageLayout` in `quartz.layouts.ts`. For the content, the `FolderContent` component is used. If you want to modify the layout, you must edit it directly (`quartz/components/pages/FolderContent.tsx`).
+
+## API
+
+- Category: Emitter
+- Function name: `Plugin.FolderPage()`.
+- Source: [`quartz/plugins/emitters/folderPage.tsx`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/folderPage.tsx).
diff --git a/docs/plugins/Frontmatter.md b/docs/plugins/Frontmatter.md
new file mode 100644
index 0000000000000..960417a804721
--- /dev/null
+++ b/docs/plugins/Frontmatter.md
@@ -0,0 +1,24 @@
+---
+title: "Frontmatter"
+tags:
+  - plugin/transformer
+---
+
+This plugin parses the frontmatter of the page using the [gray-matter](https://github.com/jonschlinkert/gray-matter) library. See [[authoring content#Syntax]], [[Obsidian compatibility]] and [[OxHugo compatibility]] for more information.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin accepts the following configuration options:
+
+- `delimiters`: the delimiters to use for the frontmatter. Can have one value (e.g. `"---"`) or separate values for opening and closing delimiters (e.g. `["---", "~~~"]`). Defaults to `"---"`.
+- `language`: the language to use for parsing the frontmatter. Can be `yaml` (default) or `toml`.
+
+> [!warning]
+> This plugin must not be removed, otherwise Quartz will break.
+
+## API
+
+- Category: Transformer
+- Function name: `Plugin.Frontmatter()`.
+- Source: [`quartz/plugins/transformers/frontmatter.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/frontmatter.ts).
diff --git a/docs/plugins/GitHubFlavoredMarkdown.md b/docs/plugins/GitHubFlavoredMarkdown.md
new file mode 100644
index 0000000000000..2ea8f8d38beab
--- /dev/null
+++ b/docs/plugins/GitHubFlavoredMarkdown.md
@@ -0,0 +1,23 @@
+---
+title: GitHubFlavoredMarkdown
+tags:
+  - plugin/transformer
+---
+
+This plugin enhances Markdown processing to support GitHub Flavored Markdown (GFM) which adds features like autolink literals, footnotes, strikethrough, tables and tasklists.
+
+In addition, this plugin adds optional features for typographic refinement (such as converting straight quotes to curly quotes, dashes to en-dashes/em-dashes, and ellipses) and automatic heading links as a symbol that appears next to the heading on hover.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin accepts the following configuration options:
+
+- `enableSmartyPants`: When true, enables typographic enhancements. Default is true.
+- `linkHeadings`: When true, automatically adds links to headings. Default is true.
+
+## API
+
+- Category: Transformer
+- Function name: `Plugin.GitHubFlavoredMarkdown()`.
+- Source: [`quartz/plugins/transformers/gfm.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/gfm.ts).
diff --git a/docs/plugins/HardLineBreaks.md b/docs/plugins/HardLineBreaks.md
new file mode 100644
index 0000000000000..d35d74cf96ffc
--- /dev/null
+++ b/docs/plugins/HardLineBreaks.md
@@ -0,0 +1,18 @@
+---
+title: HardLineBreaks
+tags:
+  - plugin/transformer
+---
+
+This plugin automatically converts single line breaks in Markdown text into hard line breaks in the HTML output. This plugin is not enabled by default as this doesn't follow the semantics of actual Markdown but you may enable it if you'd like parity with [[Obsidian compatibility|Obsidian]].
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin has no configuration options.
+
+## API
+
+- Category: Transformer
+- Function name: `Plugin.HardLineBreaks()`.
+- Source: [`quartz/plugins/transformers/linebreaks.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/linebreaks.ts).
diff --git a/docs/plugins/Latex.md b/docs/plugins/Latex.md
new file mode 100644
index 0000000000000..8a8999e86c76f
--- /dev/null
+++ b/docs/plugins/Latex.md
@@ -0,0 +1,20 @@
+---
+title: "Latex"
+tags:
+  - plugin/transformer
+---
+
+This plugin adds LaTeX support to Quartz. See [[features/Latex|Latex]] for more information.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin accepts the following configuration options:
+
+- `renderEngine`: the engine to use to render LaTeX equations. Can be `"katex"` for [KaTeX](https://katex.org/) or `"mathjax"` for [MathJax](https://www.mathjax.org/) [SVG rendering](https://docs.mathjax.org/en/latest/output/svg.html). Defaults to KaTeX.
+
+## API
+
+- Category: Transformer
+- Function name: `Plugin.Latex()`.
+- Source: [`quartz/plugins/transformers/latex.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/latex.ts).
diff --git a/docs/plugins/NotFoundPage.md b/docs/plugins/NotFoundPage.md
new file mode 100644
index 0000000000000..082f864252a65
--- /dev/null
+++ b/docs/plugins/NotFoundPage.md
@@ -0,0 +1,18 @@
+---
+title: NotFoundPage
+tags:
+  - plugin/emitter
+---
+
+This plugin emits a 404 (Not Found) page for broken or non-existent URLs.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin has no configuration options.
+
+## API
+
+- Category: Emitter
+- Function name: `Plugin.NotFoundPage()`.
+- Source: [`quartz/plugins/emitters/404.tsx`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/404.tsx).
diff --git a/docs/plugins/ObsidianFlavoredMarkdown.md b/docs/plugins/ObsidianFlavoredMarkdown.md
new file mode 100644
index 0000000000000..7700a5cfb08af
--- /dev/null
+++ b/docs/plugins/ObsidianFlavoredMarkdown.md
@@ -0,0 +1,34 @@
+---
+title: ObsidianFlavoredMarkdown
+tags:
+  - plugin/transformer
+---
+
+This plugin provides support for [[Obsidian compatibility]].
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin accepts the following configuration options:
+
+- `comments`: If `true` (default), enables parsing of `%%` style Obsidian comment blocks.
+- `highlight`: If `true` (default), enables parsing of `==` style highlights within content.
+- `wikilinks`:If `true` (default), turns [[wikilinks]] into regular links.
+- `callouts`: If `true` (default), adds support for [[callouts|callout]] blocks for emphasizing content.
+- `mermaid`: If `true` (default), enables [[Mermaid diagrams|Mermaid diagram]] rendering within Markdown files.
+- `parseTags`: If `true` (default), parses and links tags within the content.
+- `parseArrows`: If `true` (default), transforms arrow symbols into their HTML character equivalents.
+- `parseBlockReferences`: If `true` (default), handles block references, linking to specific content blocks.
+- `enableInHtmlEmbed`: If `true`, allows embedding of content directly within HTML. Defaults to `false`.
+- `enableYouTubeEmbed`: If `true` (default), enables the embedding of YouTube videos using external image Markdown syntax.
+- `enableVideoEmbed`: If `true` (default), enables the embedding of video files.
+- `enableCheckbox`: If `true`, adds support for interactive checkboxes in content. Defaults to `false`.
+
+> [!warning]
+> Don't remove this plugin if you're using [[Obsidian compatibility|Obsidian]] to author the content!
+
+## API
+
+- Category: Transformer
+- Function name: `Plugin.ObsidianFlavoredMarkdown()`.
+- Source: [`quartz/plugins/transformers/toc.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/toc.ts).
diff --git a/docs/plugins/OxHugoFlavoredMarkdown.md b/docs/plugins/OxHugoFlavoredMarkdown.md
new file mode 100644
index 0000000000000..523a21589fb7d
--- /dev/null
+++ b/docs/plugins/OxHugoFlavoredMarkdown.md
@@ -0,0 +1,29 @@
+---
+title: OxHugoFlavoredMarkdown
+tags:
+  - plugin/transformer
+---
+
+This plugin provides support for [ox-hugo](https://github.com/kaushalmodi/ox-hugo) compatibility. See [[OxHugo compatibility]] for more information.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin accepts the following configuration options:
+
+- `wikilinks`: If `true` (default), converts Hugo `{{ relref }}` shortcodes to Quartz [[wikilinks]].
+- `removePredefinedAnchor`: If `true` (default), strips predefined anchors from headings.
+- `removeHugoShortcode`: If `true` (default), removes Hugo shortcode syntax (`{{}}`) from the content.
+- `replaceFigureWithMdImg`: If `true` (default), replaces `<figure/>` with `![]()`.
+- `replaceOrgLatex`: If `true` (default), converts Org-mode [[features/Latex|Latex]] fragments to Quartz-compatible LaTeX wrapped in `$` (for inline) and `$$` (for block equations).
+
+> [!warning]
+> While you can use this together with [[ObsidianFlavoredMarkdown]], it's not recommended because it might mutate the file in unexpected ways. Use with caution.
+>
+> If you use `toml` frontmatter, make sure to configure the [[Frontmatter]] plugin accordingly. See [[OxHugo compatibility]] for an example.
+
+## API
+
+- Category: Transformer
+- Function name: `Plugin.OxHugoFlavoredMarkdown()`.
+- Source: [`quartz/plugins/transformers/oxhugofm.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/oxhugofm.ts).
diff --git a/docs/plugins/RemoveDrafts.md b/docs/plugins/RemoveDrafts.md
new file mode 100644
index 0000000000000..729ac86a77e8f
--- /dev/null
+++ b/docs/plugins/RemoveDrafts.md
@@ -0,0 +1,18 @@
+---
+title: RemoveDrafts
+tags:
+  - plugin/filter
+---
+
+This plugin filters out content from your vault, so that only finalized content is made available. This prevents [[private pages]] from being published. By default, it filters out all pages with `draft: true` in the frontmatter and leaves all other pages intact.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin has no configuration options.
+
+## API
+
+- Category: Filter
+- Function name: `Plugin.RemoveDrafts()`.
+- Source: [`quartz/plugins/filters/draft.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/filters/draft.ts).
diff --git a/docs/plugins/Static.md b/docs/plugins/Static.md
new file mode 100644
index 0000000000000..c660eabf410d0
--- /dev/null
+++ b/docs/plugins/Static.md
@@ -0,0 +1,21 @@
+---
+title: Static
+tags:
+  - plugin/emitter
+---
+
+This plugin emits all static resources needed by Quartz. This is used, for example, for fonts and images that need a stable position, such as banners and icons. The plugin respects the `ignorePatterns` in the global [[configuration]].
+
+> [!important]
+> This is different from [[Assets]]. The resources from the [[Static]] plugin are located under `quartz/static`, whereas [[Assets]] renders all static resources under `content` and is used for images, videos, audio, etc. that are directly referenced by your markdown content.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin has no configuration options.
+
+## API
+
+- Category: Emitter
+- Function name: `Plugin.Static()`.
+- Source: [`quartz/plugins/emitters/static.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/static.ts).
diff --git a/docs/plugins/SyntaxHighlighting.md b/docs/plugins/SyntaxHighlighting.md
new file mode 100644
index 0000000000000..8bf581eb48539
--- /dev/null
+++ b/docs/plugins/SyntaxHighlighting.md
@@ -0,0 +1,23 @@
+---
+title: "SyntaxHighlighting"
+tags:
+  - plugin/transformer
+---
+
+This plugin is used to add syntax highlighting to code blocks in Quartz. See [[syntax highlighting]] for more information.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin accepts the following configuration options:
+
+- `theme`: a separate id of one of the [themes bundled with Shikiji](https://shikiji.netlify.app/themes). One for light mode and one for dark mode. Defaults to `theme: { light: "github-light", dark: "github-dark" }`.
+- `keepBackground`: If set to `true`, the background of the Shikiji theme will be used. With `false` (default) the Quartz theme color for background will be used instead.
+
+In addition, you can further override the colours in the `quartz/styles/syntax.scss` file.
+
+## API
+
+- Category: Transformer
+- Function name: `Plugin.SyntaxHighlighting()`.
+- Source: [`quartz/plugins/transformers/syntax.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/syntax.ts).
diff --git a/docs/plugins/TableOfContents.md b/docs/plugins/TableOfContents.md
new file mode 100644
index 0000000000000..d443d0eaa04a1
--- /dev/null
+++ b/docs/plugins/TableOfContents.md
@@ -0,0 +1,26 @@
+---
+title: TableOfContents
+tags:
+  - plugin/transformer
+---
+
+This plugin generates a table of contents (TOC) for Markdown documents. See [[table of contents]] for more information.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin accepts the following configuration options:
+
+- `maxDepth`: Limits the depth of headings included in the TOC, ranging from `1` (top level headings only) to `6` (all heading levels). Default is `3`.
+- `minEntries`: The minimum number of heading entries required for the TOC to be displayed. Default is `1`.
+- `showByDefault`: If `true` (default), the TOC should be displayed by default. Can be overridden by frontmatter settings.
+- `collapseByDefault`: If `true`, the TOC will start in a collapsed state. Default is `false`.
+
+> [!warning]
+> This plugin needs the `Component.TableOfContents` component in `quartz.layout.ts` to determine where to display the TOC. Without it, nothing will be displayed. They should always be added or removed together.
+
+## API
+
+- Category: Transformer
+- Function name: `Plugin.TableOfContents()`.
+- Source: [`quartz/plugins/transformers/toc.ts`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/transformers/toc.ts).
diff --git a/docs/plugins/TagPage.md b/docs/plugins/TagPage.md
new file mode 100644
index 0000000000000..4dabfd06cdc0d
--- /dev/null
+++ b/docs/plugins/TagPage.md
@@ -0,0 +1,20 @@
+---
+title: TagPage
+tags:
+  - plugin/emitter
+---
+
+This plugin emits dedicated pages for each tag used in the content. See [[folder and tag listings]] for more information.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[Configuration#Plugins|Configuration]] page.
+
+This plugin has no configuration options.
+
+The pages are displayed using the `defaultListPageLayout` in `quartz.layouts.ts`. For the content, the `TagContent` component is used. If you want to modify the layout, you must edit it directly (`quartz/components/pages/TagContent.tsx`).
+
+## API
+
+- Category: Emitter
+- Function name: `Plugin.AliasRedirects()`.
+- Source: [`quartz/plugins/emitters/tagPage.tsx`](https://github.com/jackyzha0/quartz/blob/v4/quartz/plugins/emitters/tagPage.tsx).
diff --git a/docs/plugins/index.md b/docs/plugins/index.md
new file mode 100644
index 0000000000000..298ff164cf8b7
--- /dev/null
+++ b/docs/plugins/index.md
@@ -0,0 +1,3 @@
+---
+title: Plugins
+---
diff --git a/docs/tags/plugin.md b/docs/tags/plugin.md
new file mode 100644
index 0000000000000..298ff164cf8b7
--- /dev/null
+++ b/docs/tags/plugin.md
@@ -0,0 +1,3 @@
+---
+title: Plugins
+---
diff --git a/quartz.config.ts b/quartz.config.ts
index 8c479ac789a77..2cdadb740483e 100644
--- a/quartz.config.ts
+++ b/quartz.config.ts
@@ -1,6 +1,11 @@
 import { QuartzConfig } from "./quartz/cfg"
 import * as Plugin from "./quartz/plugins"
 
+/**
+ * Quartz 4.0 Configuration
+ *
+ * See https://quartz.jzhao.xyz/configuration for more information.
+ */
 const config: QuartzConfig = {
   configuration: {
     pageTitle: "🪴 Quartz 4.0",
@@ -48,19 +53,14 @@ const config: QuartzConfig = {
     transformers: [
       Plugin.FrontMatter(),
       Plugin.CreatedModifiedDate({
-        // you can add 'git' here for last modified from Git
-        // if you do rely on git for dates, ensure defaultDateType is 'modified'
         priority: ["frontmatter", "filesystem"],
       }),
       Plugin.Latex({ renderEngine: "katex" }),
       Plugin.SyntaxHighlighting({
-        // uses themes bundled with Shikiji, see https://shikiji.netlify.app/themes
         theme: {
           light: "github-light",
           dark: "github-dark",
         },
-        // set this to 'true' to use the background color of the Shikiji theme
-        // if set to 'false', will use Quartz theme colors for background
         keepBackground: false,
       }),
       Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),