chore(deps): bump the production-dependencies group with 3 updates (#2159)

Bumps the production-dependencies group with 3 updates: [preact-render-to-string](https://github.com/preactjs/preact-render-to-string), [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) and [typescript](https://github.com/microsoft/TypeScript).


Updates `preact-render-to-string` from 6.6.1 to 6.6.2
- [Release notes](https://github.com/preactjs/preact-render-to-string/releases)
- [Changelog](https://github.com/preactjs/preact-render-to-string/blob/main/CHANGELOG.md)
- [Commits](https://github.com/preactjs/preact-render-to-string/compare/v6.6.1...v6.6.2)

Updates `@types/node` from 24.6.0 to 24.7.0
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

Updates `typescript` from 5.9.2 to 5.9.3
- [Release notes](https://github.com/microsoft/TypeScript/releases)
- [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release-publish.yml)
- [Commits](https://github.com/microsoft/TypeScript/compare/v5.9.2...v5.9.3)

---
updated-dependencies:
- dependency-name: preact-render-to-string
  dependency-version: 6.6.2
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: production-dependencies
- dependency-name: "@types/node"
  dependency-version: 24.7.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: production-dependencies
- dependency-name: typescript
  dependency-version: 5.9.3
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: production-dependencies
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/docker-build-push.yaml

@@ -37,7 +37,7 @@ jobs:
             network=host
       - name: Install cosign
         if: github.event_name != 'pull_request'
-        uses: sigstore/cosign-installer@v3.9.2
+        uses: sigstore/cosign-installer@v3.10.0
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v3
         if: github.event_name != 'pull_request'

package.json

@@ -2,7 +2,7 @@
   "name": "@jackyzha0/quartz",
   "description": "🌱 publish your digital garden and notes as a website",
   "private": true,
-  "version": "4.5.1",
+  "version": "4.5.2",
   "type": "module",
   "author": "jackyzha0 <j.zhao2k19@gmail.com>",
   "license": "MIT",
@@ -46,25 +46,25 @@
     "cli-spinner": "^0.2.10",
     "d3": "^7.9.0",
     "esbuild-sass-plugin": "^3.3.1",
-    "flexsearch": "0.7.43",
+    "flexsearch": "^0.8.205",
     "github-slugger": "^2.0.0",
-    "globby": "^14.1.0",
+    "globby": "^15.0.0",
     "gray-matter": "^4.0.3",
     "hast-util-to-html": "^9.0.5",
     "hast-util-to-jsx-runtime": "^2.3.6",
     "hast-util-to-string": "^3.0.1",
-    "is-absolute-url": "^4.0.1",
+    "is-absolute-url": "^5.0.0",
     "js-yaml": "^4.1.0",
-    "lightningcss": "^1.30.1",
+    "lightningcss": "^1.30.2",
     "mdast-util-find-and-replace": "^3.0.2",
     "mdast-util-to-hast": "^13.2.0",
     "mdast-util-to-string": "^4.0.0",
     "micromorph": "^0.4.5",
     "minimatch": "^10.0.3",
-    "pixi.js": "^8.13.1",
+    "pixi.js": "^8.13.2",
-    "preact": "^10.27.1",
+    "preact": "^10.27.2",
-    "preact-render-to-string": "^6.6.1",
+    "preact-render-to-string": "^6.6.2",
-    "pretty-bytes": "^7.0.1",
+    "pretty-bytes": "^7.1.0",
     "pretty-time": "^1.1.0",
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",
@@ -83,9 +83,9 @@
     "remark-rehype": "^11.1.2",
     "remark-smartypants": "^3.0.2",
     "rfdc": "^1.4.1",
-    "satori": "^0.18.2",
+    "satori": "^0.18.3",
     "serve-handler": "^6.1.6",
-    "sharp": "^0.34.3",
+    "sharp": "^0.34.4",
     "shiki": "^1.26.2",
     "source-map-support": "^0.5.21",
     "to-vfile": "^8.0.0",
@@ -93,7 +93,7 @@
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
     "vfile": "^6.0.3",
-    "workerpool": "^9.3.3",
+    "workerpool": "^9.3.4",
     "ws": "^8.18.3",
     "yargs": "^18.0.0"
   },
@@ -101,14 +101,14 @@
     "@types/d3": "^7.4.3",
     "@types/hast": "^3.0.4",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^24.3.1",
+    "@types/node": "^24.7.0",
     "@types/pretty-time": "^1.1.5",
     "@types/source-map-support": "^0.5.10",
     "@types/ws": "^8.18.1",
     "@types/yargs": "^17.0.33",
-    "esbuild": "^0.25.9",
+    "esbuild": "^0.25.10",
     "prettier": "^3.6.2",
-    "tsx": "^4.20.5",
+    "tsx": "^4.20.6",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.3"
   }
 }

quartz/components/Search.tsx

@@ -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">

quartz/components/renderPage.tsx

@@ -231,8 +231,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">

quartz/components/scripts/search.inline.ts

@@ -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)

quartz/components/styles/search.scss

@@ -8,24 +8,23 @@
   }
 
   & > .search-button {
-    background-color: color-mix(in srgb, var(--lightgray) 60%, var(--light));
+    background-color: transparent;
-    border: none;
+    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);
     }
 
     & svg {
@@ -36,7 +35,7 @@
 
       .search-path {
         stroke: var(--darkgray);
-        stroke-width: 2px;
+        stroke-width: 1.5px;
         transition: stroke 0.5s ease;
       }
     }

quartz/i18n/locales/ar-SA.ts

@@ -5,6 +5,7 @@ export default {
     title: "غير معنون",
     description: "لم يتم تقديم أي وصف",
   },
+  direction: "rtl" as const,
   components: {
     callout: {
       note: "ملاحظة",

quartz/i18n/locales/definition.ts

@@ -21,6 +21,7 @@ export interface Translation {
     title: string
     description: string
   }
+  direction?: "ltr" | "rtl"
   components: {
     callout: CalloutTranslation
     backlinks: {

quartz/i18n/locales/fa-IR.ts

@@ -5,6 +5,7 @@ export default {
     title: "بدون عنوان",
     description: "توضیح خاصی اضافه نشده است",
   },
+  direction: "rtl" as const,
   components: {
     callout: {
       note: "یادداشت",

quartz/plugins/transformers/ofm.ts

@@ -488,16 +488,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
                     {
                       data: { hProperties: { className: ["callout-content"] }, hName: "div" },
                       type: "blockquote",
-                      children: [
+                      children: [...calloutContent],
-                        {
-                          data: {
-                            hProperties: { className: ["callout-content-inner"] },
-                            hName: "div",
-                          },
-                          type: "blockquote",
-                          children: [...calloutContent],
-                        },
-                      ],
                     },
                   ]
                 }

quartz/plugins/transformers/oxhugofm.ts

@@ -1,4 +1,6 @@
 import { QuartzTransformerPlugin } from "../types"
+import rehypeRaw from "rehype-raw"
+import { PluggableList } from "unified"
 
 export interface Options {
   /** Replace {{ relref }} with quartz wikilinks []() */
@@ -102,5 +104,9 @@ export const OxHugoFlavouredMarkdown: QuartzTransformerPlugin<Partial<Options>>
       }
       return src
     },
+    htmlPlugins() {
+      const plugins: PluggableList = [rehypeRaw]
+      return plugins
+    },
   }
 }

quartz/styles/base.scss

@@ -44,22 +44,8 @@ ul,
 .typst-doc * {
   color: var(--darkgray);
   fill: var(--darkgray);
-  hyphens: auto;
+  overflow-wrap: break-word;
-}
+  text-wrap: pretty;
-
-p,
-ul,
-text,
-a,
-li,
-ol,
-ul,
-.katex,
-.math,
-.typst-doc,
-.typst-doc * {
-  overflow-wrap: anywhere;
-  /* tr and td removed from list of selectors for overflow-wrap, allowing them to use default 'normal' property value */
 }
 
 .math {
@@ -225,7 +211,7 @@ a {
     }
 
     & .sidebar {
-      gap: 2rem;
+      gap: 1.2rem;
       top: 0;
       box-sizing: border-box;
       padding: $topSpacing 2rem 2rem 2rem;

quartz/styles/callouts.scss

@@ -11,14 +11,11 @@
 
   & > .callout-content {
     display: grid;
-    transition: grid-template-rows 0.3s ease;
+    transition: grid-template-rows 0.1s cubic-bezier(0.02, 0.01, 0.47, 1);
+    overflow: hidden;
 
-    & > .callout-content-inner {
+    & > :first-child {
-      overflow: hidden;
+      margin-top: 0;
-
-      & > :first-child {
-        margin-top: 0;
-      }
     }
   }
 
@@ -121,8 +118,19 @@
     --callout-icon: var(--callout-icon-quote);
   }
 
-  &.is-collapsed > .callout-title > .fold-callout-icon {
+  &.is-collapsed {
-    transform: rotateZ(-90deg);
+    & > .callout-title > .fold-callout-icon {
+      transform: rotateZ(-90deg);
+    }
+
+    .callout-content > :first-child {
+      transition:
+        height 0.1s cubic-bezier(0.02, 0.01, 0.47, 1),
+        margin 0.1s cubic-bezier(0.02, 0.01, 0.47, 1);
+      overflow-y: clip;
+      height: 0;
+      margin-top: -1rem;
+    }
   }
 }