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

2026-06-03 21:10:34 +00:00 · 2025-11-09 15:15:58 -05:00
parent 6783a351a9 ef29c69828
commit 342d6428a3
29 changed files with 750 additions and 483 deletions
@@ -20,7 +20,6 @@ export default ((userOpts?: Partial<SearchOptions>) => {
    return (
      <div class={classNames(displayClass, "search")}>
        <button class="search-button">
-          <p>{i18n(cfg.locale).components.search.title}</p>
          <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7">
            <title>Search</title>
            <g class="search-path" fill="none">
@@ -28,6 +27,7 @@ export default ((userOpts?: Partial<SearchOptions>) => {
              <circle cx="8" cy="8" r="7" />
            </g>
          </svg>
+          <p>{i18n(cfg.locale).components.search.title}</p>
        </button>
        <div class="search-container">
          <div class="search-space">
@@ -9,6 +9,7 @@ import { visit } from "unist-util-visit"
 import { Root, Element, ElementContent } from "hast"
 import { GlobalConfiguration } from "../cfg"
 import { i18n } from "../i18n"
+import { styleText } from "util"

 interface RenderComponents {
  head: QuartzComponent
@@ -68,6 +69,7 @@ function renderTranscludes(
  cfg: GlobalConfiguration,
  slug: FullSlug,
  componentData: QuartzComponentProps,
+  visited: Set<FullSlug>,
 ) {
  // process transcludes in componentData
  visit(root, "element", (node, _index, _parent) => {
@@ -76,6 +78,30 @@ function renderTranscludes(
      if (classNames.includes("transclude")) {
        const inner = node.children[0] as Element
        const transcludeTarget = (inner.properties["data-slug"] ?? slug) as FullSlug
+        if (visited.has(transcludeTarget)) {
+          console.warn(
+            styleText(
+              "yellow",
+              `Warning: Skipping circular transclusion: ${slug} -> ${transcludeTarget}`,
+            ),
+          )
+          node.children = [
+            {
+              type: "element",
+              tagName: "p",
+              properties: { style: "color: var(--secondary);" },
+              children: [
+                {
+                  type: "text",
+                  value: `Circular transclusion detected: ${transcludeTarget}`,
+                },
+              ],
+            },
+          ]
+          return
+        }
+        visited.add(transcludeTarget)
+
        const page = componentData.allFiles.find((f) => f.slug === transcludeTarget)
        if (!page) {
          return
@@ -196,7 +222,8 @@ export function renderPage(
  // make a deep copy of the tree so we don't remove the transclusion references
  // for the file cached in contentMap in build.ts
  const root = clone(componentData.tree) as Root
-  renderTranscludes(root, cfg, slug, componentData)
+  const visited = new Set<FullSlug>([slug])
+  renderTranscludes(root, cfg, slug, componentData, visited)

  // set componentData.tree to the edited html that has transclusions rendered
  componentData.tree = root
@@ -231,8 +258,9 @@ export function renderPage(
  )

  const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
+  const direction = i18n(cfg.locale).direction ?? "ltr"
  const doc = (
-    <html lang={lang}>
+    <html lang={lang} dir={direction}>
      <Head {...componentData} />
      <body data-slug={slug}>
        <div id="quartz-root" class="page">
@@ -1,4 +1,4 @@
-import FlexSearch from "flexsearch"
+import FlexSearch, { DefaultDocumentSearchResults } from "flexsearch"
 import { ContentDetails } from "../../plugins/emitters/contentIndex"
 import { registerEscapeHandler, removeAllChildren } from "./util"
 import { FullSlug, normalizeRelativeURLs, resolveRelative } from "../../util/path"
@@ -9,15 +9,21 @@ interface Item {
  title: string
  content: string
  tags: string[]
+  [key: string]: any
 }

 // Can be expanded with things like "term" in the future
 type SearchType = "basic" | "tags"
 let searchType: SearchType = "basic"
 let currentSearchTerm: string = ""
-const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
+const encoder = (str: string) => {
+  return str
+    .toLowerCase()
+    .split(/\s+/)
+    .filter((token) => token.length > 0)
+}
+
 let index = new FlexSearch.Document<Item>({
-  charset: "latin:extra",
  encode: encoder,
  document: {
    id: "id",
@@ -397,7 +403,7 @@ async function setupSearch(searchElement: Element, currentSlug: FullSlug, data:
    searchLayout.classList.toggle("display-results", currentSearchTerm !== "")
    searchType = currentSearchTerm.startsWith("#") ? "tags" : "basic"

-    let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
+    let searchResults: DefaultDocumentSearchResults<Item>
    if (searchType === "tags") {
      currentSearchTerm = currentSearchTerm.substring(1).trim()
      const separatorIndex = currentSearchTerm.indexOf(" ")
@@ -410,7 +416,7 @@ async function setupSearch(searchElement: Element, currentSlug: FullSlug, data:
          // return at least 10000 documents, so it is enough to filter them by tag (implemented in flexsearch)
          limit: Math.max(numSearchResults, 10000),
          index: ["title", "content"],
-          tag: tag,
+          tag: { tags: tag },
        })
        for (let searchResult of searchResults) {
          searchResult.result = searchResult.result.slice(0, numSearchResults)
@@ -133,12 +133,16 @@ button.desktop-explorer {
  }

  .folder-outer {
+    visibility: collapse;
    display: grid;
    grid-template-rows: 0fr;
-    transition: grid-template-rows 0.3s ease-in-out;
+    transition-property: grid-template-rows, visibility;
+    transition-duration: 0.3s;
+    transition-timing-function: ease-in-out;
  }

  .folder-outer.open {
+    visibility: visible;
    grid-template-rows: 1fr;
  }

@@ -8,24 +8,24 @@
  }

  & > .search-button {
-    background-color: color-mix(in srgb, var(--lightgray) 60%, var(--light));
-    border: none;
+    background-color: transparent;
+    border: 1px var(--lightgray) solid;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
    height: 2rem;
-    padding: 0;
+    padding: 0 1rem 0 0;
    display: flex;
    align-items: center;
    text-align: inherit;
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
-    justify-content: space-between;

    & > p {
      display: inline;
-      padding: 0 1rem;
+      color: var(--gray);
+      text-wrap: unset;
    }

    & svg {
@@ -36,7 +36,7 @@

      .search-path {
        stroke: var(--darkgray);
-        stroke-width: 2px;
+        stroke-width: 1.5px;
        transition: stroke 0.5s ease;
      }
    }