From 18745a9dc68d26827ea0df99dcc709e311c74a98 Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Fri, 2 Feb 2024 09:36:36 -0800 Subject: [PATCH 1/7] 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 23289d2c1..24a72848f 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 Date: Fri, 2 Feb 2024 18:51:34 +0100 Subject: [PATCH 2/7] 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 31c8c2084..2c7b9ce47 100644 --- a/quartz/plugins/transformers/lastmod.ts +++ b/quartz/plugins/transformers/lastmod.ts @@ -43,7 +43,7 @@ export const CreatedModifiedDate: QuartzTransformerPlugin | 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 Date: Fri, 2 Feb 2024 10:10:25 -0800 Subject: [PATCH 3/7] 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 ec55f96b5..1ecf62fa4 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 Date: Fri, 2 Feb 2024 10:23:24 -0800 Subject: [PATCH 4/7] 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 d4f7069a0..7fa52c506 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 Date: Fri, 2 Feb 2024 10:44:19 -0800 Subject: [PATCH 5/7] 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 1ecf62fa4..b9b55bec6 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 = `

${title}

${htmlTags}

${content}

` - 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 24a72848f..9cc85dfcc 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 Date: Fri, 2 Feb 2024 10:52:51 -0800 Subject: [PATCH 6/7] 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 b9b55bec6..d707cfd66 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 Date: Fri, 2 Feb 2024 12:18:02 -0800 Subject: [PATCH 7/7] 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 d707cfd66..59942ebf5 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 9cc85dfcc..3ad774ed3 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 a4fde0639..33d6267f8 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); }