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] 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 82fdf82..55919cd 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 784c114..0e6ecb5 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 31e1d3e..5a0bed9 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>