Merge branch 'v4' of https://github.com/jackyzha0/quartz

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)
   }
 
@@ -224,12 +222,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 +249,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 +263,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)
       }
     }
   }
@@ -321,38 +308,21 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     itemTile.href = resolveUrl(slug).toString()
     itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}<p class="preview">${content}</p>`
 
+    const handler = (event: MouseEvent) => {
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+      hideSearch()
+    }
+
     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)
     }
 
-    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("mouseenter", onMouseEnter)
+    window.addCleanup(() => itemTile.removeEventListener("mouseenter", onMouseEnter))
+    itemTile.addEventListener("click", handler)
+    window.addCleanup(() => itemTile.removeEventListener("click", handler))
 
     return itemTile
   }

quartz/components/styles/search.scss

@@ -64,7 +64,7 @@
 
       & > * {
         width: 100%;
-        border-radius: 5px;
+        border-radius: 7px;
         background: var(--light);
         box-shadow:
           0 14px 50px rgba(27, 33, 48, 0.12),
@@ -89,68 +89,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;
-          & > *: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;
@@ -162,6 +164,7 @@
           overflow-y: auto;
 
           & .result-card {
+            overflow: hidden;
             padding: 1em;
             cursor: pointer;
             transition: background 0.2s ease;
@@ -177,10 +180,10 @@
             margin: 0;
             text-transform: none;
             text-align: left;
-            background: var(--light);
             outline: none;
             font-weight: inherit;
 
+            &:hover,
             &:focus,
             &.focus {
               background: var(--lightgray);

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)

quartz/styles/base.scss

@@ -30,7 +30,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);
 }
 

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 {