fix(i18n): Add RTL Detection based on Config Set Language (#2100)

* Add rtl automatic detection to base.scss

* Implement RTL support for Arabic and Persian locales and update HTML direction attribute in renderPage component

* Update HTML direction attribute in renderPage component to prioritize frontmatter dir value

* Refactor renderPage component to simplify HTML direction attribute assignment by removing frontmatter dir fallback

.github/workflows/build-preview.yaml

@@ -16,7 +16,7 @@ jobs:
           fetch-depth: 0
 
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version: 22
 

.github/workflows/ci.yaml

@@ -24,7 +24,7 @@ jobs:
           fetch-depth: 0
 
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version: 22
 
@@ -57,7 +57,7 @@ jobs:
         with:
           fetch-depth: 0
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version: 22
       - name: Get package version

docs/hosting.md

@@ -15,7 +15,7 @@ However, if you'd like to publish your site to the world, you need a way to host
 ## Cloudflare Pages
 
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
-2. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**.
+2. In Account Home, select **Compute (Workers)** > **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**.
 3. Select the new GitHub repository that you created and, in the **Set up builds and deployments** section, provide the following information:
 
 | Configuration option   | Value              |

package-lock.json

@@ -20,7 +20,7 @@
         "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",
         "gray-matter": "^4.0.3",
@@ -35,7 +35,7 @@
         "mdast-util-to-string": "^4.0.0",
         "micromorph": "^0.4.5",
         "minimatch": "^10.0.3",
-        "pixi.js": "^8.12.0",
+        "pixi.js": "^8.13.1",
         "preact": "^10.27.1",
         "preact-render-to-string": "^6.6.1",
         "pretty-bytes": "^7.0.1",
@@ -57,7 +57,7 @@
         "remark-rehype": "^11.1.2",
         "remark-smartypants": "^3.0.2",
         "rfdc": "^1.4.1",
-        "satori": "^0.16.2",
+        "satori": "^0.18.2",
         "serve-handler": "^6.1.6",
         "sharp": "^0.34.3",
         "shiki": "^1.26.2",
@@ -78,7 +78,7 @@
         "@types/d3": "^7.4.3",
         "@types/hast": "^3.0.4",
         "@types/js-yaml": "^4.0.9",
-        "@types/node": "^24.3.0",
+        "@types/node": "^24.3.1",
         "@types/pretty-time": "^1.1.5",
         "@types/source-map-support": "^0.5.10",
         "@types/ws": "^8.18.1",
@@ -2040,9 +2040,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "24.3.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.3.0.tgz",
-      "integrity": "sha512-aPTXCrfwnDLj4VvXrm+UUCQjNEvJgNA8s5F1cvwQU+3KNltTOkBm1j30uNLyqqPNe7gE3KFzImYoZEfLhp4Yow==",
+      "version": "24.3.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.3.1.tgz",
+      "integrity": "sha512-3vXmQDXy+woz+gnrTvuvNrPzekOi+Ds0ReMxw0LzBiK3a+1k0kQn9f2NWk+lgD4rJehFUmYy2gMhJ2ZI+7YP9g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3189,9 +3189,36 @@
       }
     },
     "node_modules/flexsearch": {
-      "version": "0.7.43",
-      "resolved": "https://registry.npmjs.org/flexsearch/-/flexsearch-0.7.43.tgz",
-      "integrity": "sha512-c5o/+Um8aqCSOXGcZoqZOm+NqtVwNsvVpWv6lfmSclU954O3wvQKxxK8zj74fPaSJbXpSLTs4PRhh+wnoCXnKg=="
+      "version": "0.8.205",
+      "resolved": "https://registry.npmjs.org/flexsearch/-/flexsearch-0.8.205.tgz",
+      "integrity": "sha512-REFjMqy86DKkCTJ4gIE42c9MVm9t1vUWfEub/8taixYuhvyu4jd4XmFALk5VuKW4GH4VLav8A4BJboTsslHF1w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/ts-thomas"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/flexsearch"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/user?u=96245532"
+        },
+        {
+          "type": "liberapay",
+          "url": "https://liberapay.com/ts-thomas"
+        },
+        {
+          "type": "paypal",
+          "url": "https://www.paypal.com/donate/?hosted_button_id=GEVR88FC9BWRW"
+        },
+        {
+          "type": "bountysource",
+          "url": "https://salt.bountysource.com/teams/ts-thomas"
+        }
+      ],
+      "license": "Apache-2.0"
     },
     "node_modules/format": {
       "version": "0.2.2",
@@ -5432,9 +5459,9 @@
       }
     },
     "node_modules/pixi.js": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.12.0.tgz",
-      "integrity": "sha512-or7vrH7WajLevu/JnGMdD80JaSpTlXfjwCLtzhg2BL60LWPf1pF0w08Qleiqr1Saj012gevguM//+6HzzVlnfA==",
+      "version": "8.13.1",
+      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.13.1.tgz",
+      "integrity": "sha512-n7lP3FG8noZV00O6ZTUNWQGg2j6xNjK/8TiGviptb4kfyGJvP4zMvF8s6DR0BymZ8P/lix/3Ye5rqilynpl/+g==",
       "license": "MIT",
       "dependencies": {
         "@pixi/colord": "^2.9.6",
@@ -5446,7 +5473,8 @@
         "eventemitter3": "^5.0.1",
         "gifuct-js": "^2.1.2",
         "ismobilejs": "^1.1.1",
-        "parse-svg-path": "^0.1.2"
+        "parse-svg-path": "^0.1.2",
+        "tiny-lru": "^11.4.5"
       },
       "funding": {
         "type": "opencollective",
@@ -6414,9 +6442,9 @@
       }
     },
     "node_modules/satori": {
-      "version": "0.16.2",
-      "resolved": "https://registry.npmjs.org/satori/-/satori-0.16.2.tgz",
-      "integrity": "sha512-tORnR2UZ1cB9N81WDjx5ZC4ToPmkybnJWyR8N1OC/z+5kWZcG1mcLssJ5WLNBj1lNr2igIFW0bIiugCxRKL/jQ==",
+      "version": "0.18.2",
+      "resolved": "https://registry.npmjs.org/satori/-/satori-0.18.2.tgz",
+      "integrity": "sha512-Y9fOzHuaslMX+3otoULyvUBOxXN6a0CJL+MPeFrHgGSPDwdSxkZdhY9W8U4MvDm0aT/+EIr5g18dvAQV+UplDA==",
       "license": "MPL-2.0",
       "dependencies": {
         "@shuding/opentype.js": "1.4.0-beta.0",
@@ -6766,6 +6794,15 @@
       "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
       "license": "MIT"
     },
+    "node_modules/tiny-lru": {
+      "version": "11.4.5",
+      "resolved": "https://registry.npmjs.org/tiny-lru/-/tiny-lru-11.4.5.tgz",
+      "integrity": "sha512-hkcz3FjNJfKXjV4mjQ1OrXSLAehg8Hw+cEZclOVT+5c/cWQWImQ9wolzTjth+dmmDe++p3bme3fTxz6Q4Etsqw==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

package.json

@@ -46,7 +46,7 @@
     "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",
     "gray-matter": "^4.0.3",
@@ -61,7 +61,7 @@
     "mdast-util-to-string": "^4.0.0",
     "micromorph": "^0.4.5",
     "minimatch": "^10.0.3",
-    "pixi.js": "^8.12.0",
+    "pixi.js": "^8.13.1",
     "preact": "^10.27.1",
     "preact-render-to-string": "^6.6.1",
     "pretty-bytes": "^7.0.1",
@@ -83,7 +83,7 @@
     "remark-rehype": "^11.1.2",
     "remark-smartypants": "^3.0.2",
     "rfdc": "^1.4.1",
-    "satori": "^0.16.2",
+    "satori": "^0.18.2",
     "serve-handler": "^6.1.6",
     "sharp": "^0.34.3",
     "shiki": "^1.26.2",
@@ -101,7 +101,7 @@
     "@types/d3": "^7.4.3",
     "@types/hast": "^3.0.4",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^24.3.0",
+    "@types/node": "^24.3.1",
     "@types/pretty-time": "^1.1.5",
     "@types/source-map-support": "^0.5.10",
     "@types/ws": "^8.18.1",

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,8 +8,8 @@
   }
 
   & > .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;
@@ -21,11 +21,10 @@
     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/emitters/cname.ts

@@ -1,7 +1,7 @@
-import { FilePath, joinSegments } from "../../util/path"
 import { QuartzEmitterPlugin } from "../types"
-import fs from "fs"
+import { write } from "./helpers"
 import { styleText } from "util"
+import { FullSlug } from "../../util/path"
 
 export function extractDomainFromBaseUrl(baseUrl: string) {
   const url = new URL(`https://${baseUrl}`)
@@ -10,20 +10,25 @@ export function extractDomainFromBaseUrl(baseUrl: string) {
 
 export const CNAME: QuartzEmitterPlugin = () => ({
   name: "CNAME",
-  async emit({ argv, cfg }) {
-    if (!cfg.configuration.baseUrl) {
+  async emit(ctx) {
+    if (!ctx.cfg.configuration.baseUrl) {
       console.warn(
         styleText("yellow", "CNAME emitter requires `baseUrl` to be set in your configuration"),
       )
       return []
     }
-    const path = joinSegments(argv.output, "CNAME")
-    const content = extractDomainFromBaseUrl(cfg.configuration.baseUrl)
+    const content = extractDomainFromBaseUrl(ctx.cfg.configuration.baseUrl)
     if (!content) {
       return []
     }
-    await fs.promises.writeFile(path, content)
-    return [path] as FilePath[]
+
+    const path = await write({
+      ctx,
+      content,
+      slug: "CNAME" as FullSlug,
+      ext: "",
+    })
+    return [path]
   },
   async *partialEmit() {},
 })

quartz/styles/base.scss

@@ -44,22 +44,8 @@ ul,
 .typst-doc * {
   color: var(--darkgray);
   fill: var(--darkgray);
-  hyphens: auto;
-}
-
-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 */
+  overflow-wrap: break-word;
+  text-wrap: pretty;
 }
 
 .math {
@@ -225,7 +211,7 @@ a {
     }
 
     & .sidebar {
-      gap: 2rem;
+      gap: 1.2rem;
       top: 0;
       box-sizing: border-box;
       padding: $topSpacing 2rem 2rem 2rem;