fix build issue with search

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea or improvement for Quartz
+title: ""
+labels: enhancement
+assignees: ""
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

package.json

@@ -34,16 +34,16 @@
     "quartz": "./quartz/bootstrap-cli.mjs"
   },
   "dependencies": {
-    "@clack/prompts": "^0.6.3",
+    "@clack/prompts": "^0.7.0",
-    "@floating-ui/dom": "^1.4.0",
+    "@floating-ui/dom": "^1.5.3",
-    "@napi-rs/simple-git": "^0.1.9",
+    "@napi-rs/simple-git": "0.1.9",
     "async-mutex": "^0.4.0",
     "chalk": "^5.3.0",
     "chokidar": "^3.5.3",
     "cli-spinner": "^0.2.10",
     "d3": "^7.8.5",
-    "esbuild-sass-plugin": "^2.12.0",
+    "esbuild-sass-plugin": "^2.16.0",
-    "flexsearch": "^0.7.21",
+    "flexsearch": "0.7.21",
     "github-slugger": "^2.0.0",
     "globby": "^14.0.0",
     "gray-matter": "^4.0.3",
@@ -52,10 +52,10 @@
     "hast-util-to-string": "^3.0.0",
     "is-absolute-url": "^4.0.1",
     "js-yaml": "^4.1.0",
-    "lightningcss": "^1.21.7",
+    "lightningcss": "^1.22.1",
-    "mdast-util-find-and-replace": "^2.2.2",
+    "mdast-util-find-and-replace": "^3.0.1",
-    "mdast-util-to-hast": "^12.3.0",
+    "mdast-util-to-hast": "^13.0.2",
-    "mdast-util-to-string": "^3.2.0",
+    "mdast-util-to-string": "^4.0.0",
     "micromorph": "^0.4.5",
     "preact": "^10.19.3",
     "preact-render-to-string": "^6.3.1",
@@ -97,14 +97,14 @@
     "@types/hast": "^3.0.3",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^20.1.2",
-    "@types/pretty-time": "^1.1.2",
+    "@types/pretty-time": "^1.1.5",
-    "@types/source-map-support": "^0.5.6",
+    "@types/source-map-support": "^0.5.10",
-    "@types/workerpool": "^6.4.0",
+    "@types/workerpool": "^6.4.7",
-    "@types/ws": "^8.5.5",
+    "@types/ws": "^8.5.10",
-    "@types/yargs": "^17.0.24",
+    "@types/yargs": "^17.0.32",
-    "esbuild": "^0.19.2",
+    "esbuild": "^0.19.9",
-    "prettier": "^3.0.0",
+    "prettier": "^3.1.1",
-    "tsx": "^3.12.7",
+    "tsx": "^4.6.2",
-    "typescript": "^5.0.4"
+    "typescript": "^5.3.3"
   }
 }

quartz.layout.ts

@@ -20,29 +20,26 @@ export const sharedPageComponents: SharedLayout = {
 // components for pages that display a single page (e.g. a single note)
 export const defaultContentPageLayout: PageLayout = {
   beforeBody: [
-    // Component.Breadcrumbs(),
+    Component.Breadcrumbs(),
     Component.ArticleTitle(),
     Component.ContentMeta(),
     // Component.TagList(),
     Component.MobileOnly(Component.TableOfContents()),
-    Component.MobileOnly(Component.Spacer()),
+    // Component.MobileOnly(Component.Spacer()),
   ],
   left: [
     Component.PageTitle(),
-    Component.Search(),
     Component.MobileOnly(Component.Spacer()),
+    Component.Search(),
     Component.Darkmode(),
     Component.DesktopOnly(Component.Explorer()),
-    Component.DesktopOnly(Component.Spacer()),
+    // Component.DesktopOnly(Component.Spacer()),
-    Component.DesktopOnly(Component.Backlinks()),
+    // Component.DesktopOnly(Component.Backlinks()),
   ],
   right: [
     Component.Graph(),
-    Component.DesktopOnly(Component.Spacer()),
     Component.DesktopOnly(Component.TableOfContents()),
     Component.MobileOnly(Component.Backlinks()),
-    Component.MobileOnly(Component.Spacer()),
-    Component.MobileOnly(Component.Explorer()),
   ],
 }
 
@@ -51,11 +48,9 @@ export const defaultListPageLayout: PageLayout = {
   beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
   left: [
     Component.PageTitle(),
+    Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
-    Component.MobileOnly(Component.Spacer()),
     Component.DesktopOnly(Component.Explorer())],
-  right: [
+  right: [],
-    Component.MobileOnly(Component.Spacer()),
-    Component.MobileOnly(Component.Explorer()),],
 }

quartz/components/Footer.tsx

@@ -13,7 +13,7 @@ export default ((opts?: Options) => {
     return (
       <footer class={`${displayClass ?? ""}`}>
         <hr />
-        <p>© {year} Miguel Pimentel · Powered by <a href="https://quartz.jzhao.xyz/">Quartz</a>.
+        <p>© {year} Miguel Pimentel · Created with <a href="https://quartz.jzhao.xyz/">Quartz</a>.
         </p>
         <ul>
           {Object.entries(links).map(([text, link]) => (
@@ -27,6 +27,5 @@ export default ((opts?: Options) => {
   }
 
   Footer.css = style
-
   return Footer
 }) satisfies QuartzComponentConstructor

quartz/components/Graph.tsx

@@ -57,8 +57,7 @@ export default ((opts?: GraphOptions) => {
     const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph }
     return (
       <div class={`graph ${displayClass ?? ""}`}>
-        {/* line bellow was h3 */}
+        <h3>Graph View</h3>
-        <h2>Graph View</h2>
         <div class="graph-outer">
           <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div>
           <svg

quartz/components/Search.tsx

@@ -8,8 +8,8 @@ export default (() => {
     return (
       <div class={`search ${displayClass ?? ""}`}>
         <div id="search-icon">
-          {/* <p>Search</p>
+          {/* <p>Search</p> */}
-          <div></div> */}
+          <div></div>
           <svg
             tabIndex={0}
             aria-labelledby="title desc"

quartz/components/renderPage.tsx

@@ -194,7 +194,7 @@ export function renderPage(
   )
 
   const doc = (
-    <html lang="en-US">
+    <html>
       <Head {...componentData} />
       <body data-slug={slug}>
         <div id="quartz-root" class="page">
@@ -208,8 +208,7 @@ export function renderPage(
                   ))}
                 </Header>
                 <div class="popover-hint">
-                  {/* implement https://discord.com/channels/927628110009098281/1157949033592139866 */}
+                  {beforeBody.map((BodyComponent) => (
-                {slug !== "index" && beforeBody.map((BodyComponent) => (
                     <BodyComponent {...componentData} />
                   ))}
                 </div>

quartz/components/scripts/callout.inline.ts

@@ -31,7 +31,7 @@ function setupCallout() {
 
     if (title) {
       title.removeEventListener(`click`, toggleCallout)
-      title.addEventListener(`click`, toggleCallout, {passive: true})
+      title.addEventListener(`click`, toggleCallout)
 
       const collapsed = div.classList.contains(`is-collapsed`)
       const height = collapsed ? title.scrollHeight : div.scrollHeight
@@ -40,5 +40,5 @@ function setupCallout() {
   }
 }
 
-document.addEventListener(`nav`, setupCallout, {passive: true})
+document.addEventListener(`nav`, setupCallout)
-window.addEventListener(`resize`, setupCallout, {passive: true})
+window.addEventListener(`resize`, setupCallout)

quartz/components/scripts/clipboard.inline.ts

@@ -26,8 +26,8 @@ document.addEventListener("nav", () => {
           },
           (error) => console.error(error),
         )
-      }, {passive: true})
+      })
       els[i].prepend(button)
     }
   }
-}, {passive: true})
+})

quartz/components/scripts/darkmode.inline.ts

@@ -16,7 +16,7 @@ document.addEventListener("nav", () => {
   // Darkmode toggle
   const toggleSwitch = document.querySelector("#darkmode-toggle") as HTMLInputElement
   toggleSwitch.removeEventListener("change", switchTheme)
-  toggleSwitch.addEventListener("change", switchTheme, {passive: true})
+  toggleSwitch.addEventListener("change", switchTheme)
   if (currentTheme === "dark") {
     toggleSwitch.checked = true
   }
@@ -28,5 +28,5 @@ document.addEventListener("nav", () => {
     document.documentElement.setAttribute("saved-theme", newTheme)
     localStorage.setItem("theme", newTheme)
     toggleSwitch.checked = e.matches
-  }, {passive: true})
+  })
-}, {passive: true})
+})

quartz/components/scripts/explorer.inline.ts

@@ -86,20 +86,20 @@ function setupExplorer() {
         document.getElementsByClassName("folder-button"),
         function (item) {
           item.removeEventListener("click", toggleFolder)
-          item.addEventListener("click", toggleFolder, {passive: true})
+          item.addEventListener("click", toggleFolder)
         },
       )
     }
 
     // Add click handler to main explorer
     explorer.removeEventListener("click", toggleExplorer)
-    explorer.addEventListener("click", toggleExplorer, {passive: true})
+    explorer.addEventListener("click", toggleExplorer)
   }
 
   // Set up click handlers for each folder (click handler on folder "icon")
   Array.prototype.forEach.call(document.getElementsByClassName("folder-icon"), function (item) {
     item.removeEventListener("click", toggleFolder)
-    item.addEventListener("click", toggleFolder, {passive: true})
+    item.addEventListener("click", toggleFolder)
   })
 
   if (storageTree && useSavedFolderState) {
@@ -123,7 +123,7 @@ function setupExplorer() {
   }
 }
 
-window.addEventListener("resize", setupExplorer, {passive: true})
+window.addEventListener("resize", setupExplorer)
 document.addEventListener("nav", () => {
   setupExplorer()
 
@@ -131,10 +131,10 @@ document.addEventListener("nav", () => {
 
   // select pseudo element at end of list
   const lastItem = document.getElementById("explorer-end")
-
+  if (lastItem) {
-  observer.disconnect()
+    observer.observe(lastItem)
-  observer.observe(lastItem as Element)
+  }
-}, {passive: true})
+})
 
 /**
  * Toggles the state of a given folder

quartz/components/scripts/graph.inline.ts

@@ -326,5 +326,5 @@ document.addEventListener("nav", async (e: unknown) => {
 
   const containerIcon = document.getElementById("global-graph-icon")
   containerIcon?.removeEventListener("click", renderGlobalGraph)
-  containerIcon?.addEventListener("click", renderGlobalGraph, {passive: true})
+  containerIcon?.addEventListener("click", renderGlobalGraph)
-}, {passive: true})
+})

quartz/components/scripts/popover.inline.ts

@@ -77,6 +77,6 @@ document.addEventListener("nav", () => {
   const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[]
   for (const link of links) {
     link.removeEventListener("mouseenter", mouseEnterHandler)
-    link.addEventListener("mouseenter", mouseEnterHandler, {passive: true})
+    link.addEventListener("mouseenter", mouseEnterHandler)
   }
-}, {passive: true})
+})

quartz/components/scripts/search.inline.ts

@@ -352,4 +352,4 @@ async function fillDocument(index: Document<Item, false>, data: any) {
     })
     id++
   }
-}
+}

quartz/components/scripts/spa.inline.ts

@@ -123,7 +123,7 @@ function createRouter() {
       } catch (e) {
         window.location.assign(url)
       }
-    }, {passive: true})
+    })
 
     window.addEventListener("popstate", (event) => {
       const { url } = getOpts(event) ?? {}
@@ -134,7 +134,7 @@ function createRouter() {
         window.location.reload()
       }
       return
-    }, {passive: true})
+    })
   }
 
   return new (class Router {

quartz/components/scripts/toc.inline.ts

@@ -28,11 +28,11 @@ function setupToc() {
     const content = toc.nextElementSibling as HTMLElement
     content.style.maxHeight = collapsed ? "0px" : content.scrollHeight + "px"
     toc.removeEventListener("click", toggleToc)
-    toc.addEventListener("click", toggleToc, {passive: true})
+    toc.addEventListener("click", toggleToc)
   }
 }
 
-window.addEventListener("resize", setupToc, {passive: true})
+window.addEventListener("resize", setupToc)
 document.addEventListener("nav", () => {
   setupToc()
 
@@ -40,4 +40,4 @@ document.addEventListener("nav", () => {
   observer.disconnect()
   const headers = document.querySelectorAll("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]")
   headers.forEach((header) => observer.observe(header))
-}, {passive: true})
+})

quartz/components/scripts/util.ts

@@ -13,9 +13,9 @@ export function registerEscapeHandler(outsideContainer: HTMLElement | null, cb:
   }
 
   outsideContainer?.removeEventListener("click", click)
-  outsideContainer?.addEventListener("click", click, {passive: true})
+  outsideContainer?.addEventListener("click", click)
   document.removeEventListener("keydown", esc)
-  document.addEventListener("keydown", esc, {passive: true})
+  document.addEventListener("keydown", esc)
 }
 
 export function removeAllChildren(node: HTMLElement) {

quartz/components/styles/darkmode.scss

@@ -1,5 +1,4 @@
 .darkmode {
-
   position: relative;
   width: 20px;
   height: 20px;
@@ -18,7 +17,7 @@
     height: 20px;
     top: calc(50% - 10px);
     fill: var(--darkgray);
-    transition: opacity 0.3s ease; // 0.1s
+    transition: opacity 0.1s ease;
   }
 }
 
@@ -47,19 +46,3 @@
     opacity: 0;
   }
 }
-
-@media (max-width: 1510px) {
-  .darkmode {
-    // left: 2rem;
-    // top: -59px;
-    padding-left: 0.5rem;
-  }
-}
-
-@media (min-width: 1511px) {
-  .darkmode {
-    left: 2rem;
-    top: -59px;
-    padding-left: 0.5rem;
-  }
-}

quartz/components/styles/explorer.scss

@@ -1,9 +1,3 @@
-.explorer,
-.desktop-only {
-  position: relative;
-  top: -60px;
-}
-
 button#explorer {
   all: unset;
   background-color: transparent;
@@ -90,7 +84,7 @@ svg {
   & div > a {
     color: var(--secondary);
     font-family: var(--headerFont);
-    font-size: 0.95rem; // 0.95
+    font-size: 0.95rem;
     font-weight: 600;
     line-height: 1.5rem;
     display: inline-block;
@@ -112,8 +106,8 @@ svg {
     align-items: center;
     font-family: var(--headerFont);
 
-    & p {
+    & span {
-      font-size: 1.1rem; // 0.95
+      font-size: 0.95rem;
       display: inline-block;
       color: var(--secondary);
       font-weight: 600;

quartz/components/styles/footer.scss

@@ -1,15 +1,13 @@
 footer {
-  text-align: center; // was left
+  text-align: left;
   margin-bottom: 4rem;
   opacity: 0.7;
-  & p {
+
-    margin: auto; // eliminates spacing between p and ul
-  }
   & ul {
     list-style: none;
     margin: 0;
     padding: 0;
-    display: inline-flex; // was flex
+    display: flex;
     flex-direction: row;
     gap: 1rem;
     margin-top: -1rem;

quartz/components/styles/listPage.scss

@@ -11,7 +11,7 @@ li.section-li {
 
   & > .section {
     display: grid;
-    // grid-template-columns: 6em 3fr 1fr;
+    grid-template-columns: 6em 3fr 1fr;
 
     @media all and (max-width: $mobileBreakpoint) {
       & > .tags {
@@ -33,7 +33,7 @@ li.section-li {
 
 // modifications in popover context
 .popover .section {
-  // grid-template-columns: 6em 1fr !important;
+  grid-template-columns: 6em 1fr !important;
   & > .tags {
     display: none;
   }

quartz/components/styles/popover.scss

@@ -31,11 +31,10 @@
     font-family: var(--bodyFont);
     border: 1px solid var(--lightgray);
     background-color: var(--light);
-    border-radius: 8px; // 5px
+    border-radius: 5px;
     box-shadow: 6px 6px 36px 0 rgba(0, 0, 0, 0.25);
     overflow: auto;
     white-space: normal;
-    // scrollbar-width: none;
   }
 
   h1 {

quartz/components/styles/search.scss

@@ -2,12 +2,13 @@
 
 .search {
   min-width: fit-content;
-  min-width: auto;
+  // min-width: auto;
-  max-width: 18px;
+  max-width: 18px; // 14rem
   flex-grow: 0.3;
   padding-right: 1rem;
 
   & > #search-icon {
+    // background-color: var(--lightgray);
     background-color: transparent;
     border-radius: 4px;
     height: 2rem;

quartz/components/styles/toc.scss

@@ -1,6 +1,4 @@
 button#toc {
-  margin-top: 2rem;
-  all: unset;
   background-color: transparent;
   border: none;
   text-align: left;
@@ -44,12 +42,12 @@ button#toc {
     padding: 0;
     & > li > a {
       color: var(--dark);
-      opacity: 0.7; // 0.35
+      opacity: 0.35;
       transition:
         0.5s ease opacity,
         0.3s ease color;
       &.in-view {
-        opacity: 0.95; //0.75
+        opacity: 0.75;
       }
     }
   }

quartz/plugins/emitters/aliases.ts

@@ -38,7 +38,7 @@ export const AliasRedirects: QuartzEmitterPlugin = () => ({
           ctx,
           content: `
             <!DOCTYPE html>
-            <html lang="en-US">
+            <html lang="en-us">
             <head>
             <title>${ogSlug}</title>
             <link rel="canonical" href="${redirUrl}">

quartz/plugins/transformers/ofm.ts

@@ -582,7 +582,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
             await mermaid.run({
               querySelector: '.mermaid'
             })
-          }, {passive: true});
+          });
           `,
           loadTime: "afterDOMReady",
           moduleType: "module",

quartz/styles/base.scss

@@ -1,12 +1,11 @@
-@use "variables" as *;
+@use "./variables.scss" as *;
-@use "syntax";
+@use "./syntax.scss";
-@use "callouts";
+@use "./callouts.scss";
 // @use "custom";
 
 * {
   scrollbar-width: thin;
 }
-
 html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: none;
@@ -32,7 +31,7 @@ section {
 }
 
 ::selection {
-  background: color-mix(in srgb, var(--tertiary) 50%, transparent); // 75%
+  background: color-mix(in srgb, var(--tertiary) 75%, transparent);
   color: var(--darkgray);
 }
 
@@ -62,14 +61,12 @@ ul,
 a {
   font-weight: 600;
   text-decoration: none;
+  transition: color 0.2s ease;
   color: var(--secondary);
-  text-decoration: underline 0.2rem transparent;
+  display: inline-block;
-  transition: all 0.5s ease;
 
   &:hover {
     color: var(--tertiary) !important;
-    text-decoration-color: var(--tertiary) !important;
-    // text-underline-offset: 0.4em;
   }
 
   &.internal {
@@ -98,7 +95,6 @@ a {
 
 .desktop-only {
   display: initial;
-
   @media all and (max-width: $fullPageWidth) {
     display: none;
   }
@@ -178,12 +174,9 @@ a {
         align-items: center;
       }
     }
-    
+
     & .sidebar.right {
       right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
-      @media all and (max-width: $fullPageWidth) {
-        flex-direction: column;
-      }
       & > * {
         @media all and (max-width: $fullPageWidth) {
           flex: 1;
@@ -487,8 +480,8 @@ video {
 
 ul.overflow,
 ol.overflow {
-  max-height: 400; // 400
+  max-height: 400;
-  overflow-y: auto; // auto, scroll
+  overflow-y: auto;
 
   // clearfix
   content: "";
@@ -507,9 +500,8 @@ ol.overflow {
     left: 0;
     bottom: 0;
     opacity: 1;
-    // Removes opacity fade
+    transition: opacity 0.3s ease;
-    // transition: opacity 0.3s ease;
+    background: linear-gradient(transparent 0px, var(--light));
-    // background: linear-gradient(transparent 0px, var(--light));
   }
 }
 

quartz/styles/variables.scss

@@ -2,5 +2,5 @@ $pageWidth: 750px;
 $mobileBreakpoint: 600px;
 $tabletBreakpoint: 1200px;
 $sidePanelWidth: 380px;
-$topSpacing: 4rem; // 6rem
+$topSpacing: 6rem;
 $fullPageWidth: $pageWidth + 2 * $sidePanelWidth;

quartz/util/resources.tsx

@@ -21,14 +21,17 @@ export function JSResourceToScriptElement(resource: JSResource, preserve?: boole
   const spaPreserve = preserve ?? resource.spaPreserve
   if (resource.contentType === "external") {
     return (
-      <script defer key={resource.src} src={resource.src} type={scriptType} spa-preserve={spaPreserve} />
+      <script key={resource.src} src={resource.src} type={scriptType} spa-preserve={spaPreserve} />
     )
   } else {
     const content = resource.script
     return (
-      <script defer key={randomUUID()} type={scriptType} spa-preserve={spaPreserve}>
+      <script
-        {content}
+        key={randomUUID()}
-      </script>
+        type={scriptType}
+        spa-preserve={spaPreserve}
+        dangerouslySetInnerHTML={{ __html: content }}
+      ></script>
     )
   }
 }