From ecaec9b8cb4003c91a5363eea9d6d19807651ae2 Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Wed, 2 Apr 2025 20:16:45 +0000
Subject: [PATCH] Popover fixes

---
 docs/configuration.md                       | 10 +++++++++-
 docs/hosting.md                             |  2 +-
 quartz/components/scripts/popover.inline.ts | 13 ++++++++++++-
 quartz/plugins/transformers/ofm.ts          |  5 +++++
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 4026c5197..daf18187d 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -4,6 +4,14 @@ title: Configuration
 
 Quartz is meant to be extremely configurable, even if you don't know any coding. Most of the configuration you should need can be done by just editing `quartz.config.ts` or changing [[layout|the layout]] in `quartz.layout.ts`.
 
+[[hosting#^123456]]
+
+[[#general-configuration]]
+
+[[#^test]]
+
+[[configuration#^test]]
+
 > [!tip]
 > If you edit Quartz configuration using a text-editor that has TypeScript language support like VSCode, it will warn you when you you've made an error in your configuration, helping you avoid configuration mistakes!
 
@@ -76,7 +84,7 @@ plugins: {
 - [[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)
 
-You can customize the behaviour of Quartz by adding, removing and reordering plugins in the `transformers`, `filters` and `emitters` fields.
+You can customize the behaviour of Quartz by adding, removing and reordering plugins in the `transformers`, `filters` and `emitters` fields. ^test
 
 > [!note]
 > 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.
diff --git a/docs/hosting.md b/docs/hosting.md
index 8b945a24b..214bc4fa0 100644
--- a/docs/hosting.md
+++ b/docs/hosting.md
@@ -34,7 +34,7 @@ To add a custom domain, check out [Cloudflare's documentation](https://developer
 
 ## GitHub Pages
 
-In your local Quartz, create a new file `quartz/.github/workflows/deploy.yml`.
+In your local Quartz, create a new file `quartz/.github/workflows/deploy.yml`. ^123456
 
 ```yaml title="quartz/.github/workflows/deploy.yml"
 name: Deploy Quartz site to GitHub Pages
diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts
index b01af0e85..e4d878f1d 100644
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@@ -34,7 +34,7 @@ async function mouseEnterHandler(
   thisUrl.hash = ""
   thisUrl.search = ""
   const targetUrl = new URL(link.href)
-  const hash = decodeURIComponent(targetUrl.hash)
+  let hash = decodeURIComponent(targetUrl.hash)
   targetUrl.hash = ""
   targetUrl.search = ""
 
@@ -82,6 +82,17 @@ async function mouseEnterHandler(
       const contents = await response.text()
       const html = p.parseFromString(contents, "text/html")
       normalizeRelativeURLs(html, targetUrl)
+      // strip all IDs from elements to prevent duplicates on same-page links
+      if (thisUrl.pathname === targetUrl.pathname) {
+        html.querySelectorAll("[id]").forEach((el) => {
+          const targetID = `popover-${el.id}`
+          const targetLink = hash.startsWith("#popover")
+            ? hash
+            : `#popover-${hash.slice(1).replace("^", "").replace("%5E", "")}`
+          el.id = targetID
+          hash = targetLink
+        })
+      }
       const elts = [...html.getElementsByClassName("popover-hint")]
       if (elts.length === 0) return
 
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 5674bffcc..8404fa6f7 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -119,6 +119,7 @@ export const wikilinkRegex = new RegExp(
 )
 
 export const blockReferenceEscapeRegex = new RegExp(/[\s\#]\^([\w-]+)[\s\n\]]/g)
+export const blockReferenceCurrentPageRegex = new RegExp(/(\[\[\#\^|\]\(\#\^)/g)
 
 // ^\|([^\n])+\|\n(\|) -> matches the header row
 // ( ?:?-{3,}:? ?\|)+  -> matches the header row separator
@@ -193,6 +194,10 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
           return value.replace(capture, `block-${capture}`)
         })
 
+        src = src.replace(blockReferenceCurrentPageRegex, (value, capture) => {
+          return value.replace(capture, capture.slice(0, -1))
+        })
+
         // replace all other wikilinks
         src = src.replace(wikilinkRegex, (value, ...capture) => {
           const [rawFp, rawHeader, rawAlias]: (string | undefined)[] = capture