chore: notify div on popover correctly

Signed-off-by: Aaron Pham <contact@aarnphm.xyz>

content/thoughts/Camus.md

@@ -3,8 +3,8 @@ id: Camus
 tags:
   - philosophy
 date: "2024-02-28"
-description: Camus, a scattered thoughts and notes.
-modified: "2024-11-27"
+description: and absurdism, create value by revolting against the nothingness of life.
+modified: 2025-02-01 11:26:15 GMT-05:00
 title: Camus
 ---
 

globals.d.ts

@@ -13,6 +13,7 @@ export declare global {
 
   interface Window {
     spaNavigate(url: URL, isBack: boolean = false)
+    notifyNav(url: FullSlug)
     addCleanup(fn: (...args: any[]) => void)
     stacked: import("./quartz/plugins/types").Notes
     plausible: {

quartz/components/Evergreen.tsx

@@ -66,7 +66,7 @@ const Notes = ((userOpts?: EvergreenNotes) =>
               { href: resolveRelative(fileData.slug!, f.slug!), "data-list": true, class: "perma" },
               [
                 h("div", { class: "title" }, [f.frontmatter?.title]),
-                h("div", { class: "description" }, [fileData.description!]),
+                h("div", { class: "description" }, [f.description!]),
               ],
             ),
           ),
@@ -114,7 +114,6 @@ export default ((opts?: EvergreenNotes) => {
     return (
       <div class="evergreen-content">
         <Permanent {...props} />
-        <AllTags {...props} opts />
         <article style={{ marginBottom: 0 }}>
           <h3 class="note-title">description</h3>
           {content}
@@ -124,6 +123,7 @@ export default ((opts?: EvergreenNotes) => {
             })}
           </p>
         </article>
+        <AllTags {...props} opts />
       </div>
     )
   }

quartz/components/pages/TagContent.tsx

@@ -111,7 +111,7 @@ export default ((opts?: Partial<TagContentOptions>) => {
       }
 
       return (
-        <div class={classes}>
+        <div class={classes} data-pagelist>
           <article>{content}</article>
           <div class="page-listing">
             <p>{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}</p>

quartz/components/scripts/palette.inline.ts

@@ -340,7 +340,9 @@ document.addEventListener("nav", async (e) => {
       if (!asidePanel || !currentHover) return
 
       await fetchContent(currentSlug, currentHover.dataset.slug as FullSlug).then((innerDiv) => {
+        asidePanel.dataset.slug = currentHover!.dataset.slug
         createSidePanel(asidePanel, ...innerDiv)
+        window.notifyNav(currentHover!.dataset.slug as FullSlug)
         hidePalette()
       })
       return

quartz/components/scripts/popover.inline.ts

@@ -1,5 +1,5 @@
 import { arrow, computePosition, flip, inline, Placement, shift } from "@floating-ui/dom"
-import { getFullSlug, normalizeRelativeURLs } from "../../util/path"
+import { FullSlug, getFullSlug, normalizeRelativeURLs } from "../../util/path"
 import { getContentType } from "../../util/mime"
 import xmlFormat from "xml-formatter"
 import { createSidePanel, fetchCanonical } from "./util"
@@ -147,8 +147,6 @@ async function handleDefaultContent(
   popoverInner.append(...elts)
 }
 
-const checkFolderTagPage = () => window.document.body.dataset.isFolderTag === "true"
-
 async function setPosition(
   link: HTMLElement,
   popoverElement: HTMLElement,
@@ -186,11 +184,8 @@ async function setPosition(
       top: arrowY != null ? `${arrowY}px` : "",
     })
     element.dataset.placement = staticSide
-    const isFolderTag = checkFolderTagPage()
-    if (staticSide === "top" && isFolderTag) {
-      element.style.top = "0px"
-    } else if (staticSide === "bottom" && isFolderTag) {
-      element.style.bottom = "0px"
+    if (staticSide === "right") {
+      element.style.right = "2px"
     }
   }
 
@@ -367,7 +362,14 @@ async function mouseEnterHandler(
     return handleStackedNotes(container, link, { clientX, clientY })
   }
 
-  const position = checkFolderTagPage() ? "bottom" : "right"
+  let position: Placement = "right"
+  // Check if link is within sidepanel
+  const isInSidepanel = link.closest(".sidepanel-inner") !== null
+  if (window.document.body.dataset.isFolderTag === "true") {
+    position = "left"
+  } else if (isInSidepanel) {
+    position = "top"
+  }
 
   if (hasAlreadyBeenFetched(link)) {
     if (hasPositionChanged(link)) {
@@ -465,6 +467,7 @@ async function mouseClickHandler(evt: MouseEvent) {
     )
 
     if (!asidePanel) return
+    asidePanel.dataset.slug = link.dataset.slug
 
     let response: Response | void
     if (link.dataset.arxivId) {
@@ -496,6 +499,7 @@ async function mouseClickHandler(evt: MouseEvent) {
 
       createSidePanel(asidePanel, ...elts)
     }
+    window.notifyNav(link.dataset.slug as FullSlug)
     return
   }
 

quartz/components/scripts/spa.inline.ts

@@ -734,6 +734,7 @@ async function navigate(url: URL, isBack: boolean = false) {
 }
 
 window.spaNavigate = navigate
+window.notifyNav = notifyNav
 
 function createRouter() {
   if (typeof window !== "undefined") {

quartz/components/scripts/util.ts

@@ -1,4 +1,4 @@
-import { getFullSlug, SimpleSlug } from "../../util/path"
+import { FullSlug, getFullSlug, resolveRelative } from "../../util/path"
 
 export function registerEscapeHandler(outsideContainer: HTMLElement | null, cb: () => void) {
   if (!outsideContainer) return
@@ -336,6 +336,24 @@ export function createSidePanel(asidePanel: HTMLDivElement, ...inner: HTMLElemen
   }
   closeButton.addEventListener("click", onCloseClick)
   window.addCleanup(() => closeButton.removeEventListener("click", onCloseClick))
+
+  const redirectButton = document.createElement("button")
+  redirectButton.classList.add("redirect-button")
+  redirectButton.ariaLabel = "redirect to page"
+  redirectButton.title = "redirect to page"
+  redirectButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width=16 height=16 viewbox="0 0 24 24" fill="var(--gray)" stroke="none"><use href="#triple-dots"></svg>`
+  function onRedirectClick() {
+    window.spaNavigate(
+      new URL(
+        resolveRelative(getFullSlug(window), asidePanel.dataset.slug as FullSlug),
+        window.location.toString(),
+      ),
+    )
+  }
+  redirectButton.addEventListener("click", onRedirectClick)
+  window.addCleanup(() => redirectButton.removeEventListener("click", onRedirectClick))
+
+  header.appendChild(redirectButton)
   header.appendChild(closeButton)
 
   const sideInner = document.createElement("div")

quartz/components/styles/palette.scss

@@ -80,12 +80,16 @@ ul#helper {
     overflow: hidden auto;
     white-space: normal;
 
-    &[data-content-type*="pdf"] {
+    iframe {
       padding: 0;
-      max-height: 100%;
-      iframe {
-        width: 100%;
-      }
+      width: 100%;
+      height: 100%;
+      border-width: 0px;
+    }
+
+    .notes-list,
+    div[data-pagelist] {
+      height: 100%;
     }
 
     & > * {
@@ -138,6 +142,7 @@ ul#helper {
     & > .sidepanel-header {
       position: sticky;
       bottom: 0;
+      gap: 0.3em;
       display: flex;
       justify-content: flex-end;
       border-top: 1px solid var(--lightgray);
@@ -148,6 +153,7 @@ ul#helper {
         0 14px 50px rgba(27, 33, 48, 0.12),
         0 10px 30px rgba(27, 33, 48, 0.16);
 
+      & > .redirect-button,
       & > .close-button {
         display: flex;
         align-items: center;

quartz/components/styles/popover.scss

@@ -66,7 +66,7 @@
       &::after {
         border-top-width: 1px;
         border-left-width: 1px;
-        transform: translate(12px);
+        transform: translate(12px, 12px);
       }
     }
 
@@ -90,7 +90,7 @@
       &::after {
         border-right-width: 1px;
         border-top-width: 1px;
-        transform: translate(2px, 2px);
+        transform: translate(-18px);
       }
     }
   }