pkg: bump to 4.2.2

* checkpoint

* finish

* docs

docs/advanced/making plugins.md

@@ -278,7 +278,7 @@ export const ContentPage: QuartzEmitterPlugin = () => {
           allFiles,
         }
 
-        const content = renderPage(slug, componentData, opts, externalResources)
+        const content = renderPage(cfg, slug, componentData, opts, externalResources)
         const fp = await emit({
           content,
           slug: file.data.slug!,

docs/configuration.md

@@ -27,6 +27,7 @@ This part of the configuration concerns anything that can affect the whole site.
   - `null`: don't use analytics;
   - `{ provider: 'plausible' }`: use [Plausible](https://plausible.io/), a privacy-friendly alternative to Google Analytics; or
   - `{ provider: 'google', tagId: <your-google-tag> }`: use Google Analytics
+- `locale`: used for [[i18n]] and date formatting
 - `baseUrl`: this is used for sitemaps and RSS feeds that require an absolute URL to know where the canonical 'home' of your site lives. This is normally the deployed URL of your site (e.g. `quartz.jzhao.xyz` for this site). Do not include the protocol (i.e. `https://`) or any leading or trailing slashes.
   - This should also include the subpath if you are [[hosting]] on GitHub pages without a custom domain. For example, if my repository is `jackyzha0/quartz`, GitHub pages would deploy to `https://jackyzha0.github.io/quartz` and the `baseUrl` would be `jackyzha0.github.io/quartz`
   - Note that Quartz 4 will avoid using this as much as possible and use relative URLs whenever it can to make sure your site works no matter _where_ you end up actually deploying it.

docs/features/i18n.md

@@ -0,0 +1,18 @@
+---
+title: Internationalization
+---
+
+Internationalization allows users to translate text in the Quartz interface into various supported languages without needing to make extensive code changes. This can be changed via the `locale` [[configuration]] field in `quartz.config.ts`.
+
+The locale field generally follows a certain format: `{language}-{REGION}`
+
+- `{language}` is usually a [2-letter lowercase language code](https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes).
+- `{REGION}` is usually a [2-letter uppercase region code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)
+
+> [!tip] Interested in contributing?
+> We [gladly welcome translation PRs](https://github.com/jackyzha0/quartz/tree/v4/quartz/i18n/locales)! To contribute a translation, do the following things:
+>
+> 1. In the `quartz/i18n/locales` folder, copy the `en-US.ts` file.
+> 2. Rename it to `{language}-{REGION}.ts` so it matches a locale of the format shown above.
+> 3. Fill in the translations!
+> 4. Add the entry under `TRANSLATIONS` in `quartz/i18n/index.ts`.

docs/index.md

@@ -31,7 +31,7 @@ If you prefer instructions in a video format you can try following Nicole van de
 
 ## 🔧 Features
 
-- [[Obsidian compatibility]], [[full-text search]], [[graph view]], note transclusion, [[wikilinks]], [[backlinks]], [[Latex]], [[syntax highlighting]], [[popover previews]], [[Docker Support]], and [many more](./features) right out of the box
+- [[Obsidian compatibility]], [[full-text search]], [[graph view]], note transclusion, [[wikilinks]], [[backlinks]], [[Latex]], [[syntax highlighting]], [[popover previews]], [[Docker Support]], [[i18n|internationalization]] and [many more](./features) right out of the box
 - Hot-reload for both configuration and content
 - Simple JSX layouts and [[creating components|page components]]
 - [[SPA Routing|Ridiculously fast page loads]] and tiny bundle sizes

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@jackyzha0/quartz",
-  "version": "4.2.0",
+  "version": "4.2.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@jackyzha0/quartz",
-      "version": "4.2.0",
+      "version": "4.2.2",
       "license": "MIT",
       "dependencies": {
         "@clack/prompts": "^0.7.0",

package.json

@@ -2,7 +2,7 @@
   "name": "@jackyzha0/quartz",
   "description": "🌱 publish your digital garden and notes as a website",
   "private": true,
-  "version": "4.2.0",
+  "version": "4.2.2",
   "type": "module",
   "author": "jackyzha0 <j.zhao2k19@gmail.com>",
   "license": "MIT",

quartz.config.ts

@@ -9,6 +9,7 @@ const config: QuartzConfig = {
     analytics: {
       provider: "plausible",
     },
+    locale: "en-US",
     baseUrl: "quartz.jzhao.xyz",
     ignorePatterns: ["private", "templates", ".obsidian"],
     defaultDateType: "created",
@@ -45,7 +46,6 @@ const config: QuartzConfig = {
   plugins: {
     transformers: [
       Plugin.FrontMatter(),
-      Plugin.TableOfContents(),
       Plugin.CreatedModifiedDate({
         // you can add 'git' here for last modified from Git
         // if you do rely on git for dates, ensure defaultDateType is 'modified'
@@ -55,6 +55,7 @@ const config: QuartzConfig = {
       Plugin.SyntaxHighlighting(),
       Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
       Plugin.GitHubFlavoredMarkdown(),
+      Plugin.TableOfContents(),
       Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
       Plugin.Description(),
     ],

quartz/cfg.ts

@@ -1,5 +1,6 @@
 import { ValidDateType } from "./components/Date"
 import { QuartzComponent } from "./components/types"
+import { ValidLocale } from "./i18n"
 import { PluginTypes } from "./plugins/types"
 import { Theme } from "./util/theme"
 
@@ -37,11 +38,14 @@ export interface GlobalConfiguration {
   baseUrl?: string
   theme: Theme
   /**
-   * The locale to use for date formatting. Default to "en-US"
    * Allow to translate the date in the language of your choice.
-   * Need to be formated following the IETF language tag format (https://en.wikipedia.org/wiki/IETF_language_tag)
+   * Also used for UI translation (default: en-US)
+   * Need to be formated following BCP 47: https://en.wikipedia.org/wiki/IETF_language_tag
+   * The first part is the language (en) and the second part is the script/region (US)
+   * Language Codes: https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes
+   * Region Codes: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
    */
-  locale?: string
+  locale: ValidLocale
 }
 
 export interface QuartzConfig {

quartz/components/ArticleTitle.tsx

@@ -9,6 +9,7 @@ function ArticleTitle({ fileData, displayClass }: QuartzComponentProps) {
     return null
   }
 }
+
 ArticleTitle.css = `
 .article-title {
   margin: 2rem 0 0 0;

quartz/components/Backlinks.tsx

@@ -1,14 +1,15 @@
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/backlinks.scss"
 import { resolveRelative, simplifySlug } from "../util/path"
+import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
-function Backlinks({ fileData, allFiles, displayClass }: QuartzComponentProps) {
+function Backlinks({ fileData, allFiles, displayClass, cfg }: QuartzComponentProps) {
   const slug = simplifySlug(fileData.slug!)
   const backlinkFiles = allFiles.filter((file) => file.links?.includes(slug))
   return (
     <div class={classNames(displayClass, "backlinks")}>
-      <h3>Backlinks</h3>
+      <h3>{i18n(cfg.locale).components.backlinks.title}</h3>
       <ul class="overflow">
         {backlinkFiles.length > 0 ? (
           backlinkFiles.map((f) => (
@@ -19,7 +20,7 @@ function Backlinks({ fileData, allFiles, displayClass }: QuartzComponentProps) {
             </li>
           ))
         ) : (
-          <li>No backlinks found</li>
+          <li>{i18n(cfg.locale).components.backlinks.noBacklinksFound}</li>
         )}
       </ul>
     </div>

quartz/components/Darkmode.tsx

@@ -4,9 +4,10 @@
 import darkmodeScript from "./scripts/darkmode.inline"
 import styles from "./styles/darkmode.scss"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
-function Darkmode({ displayClass }: QuartzComponentProps) {
+function Darkmode({ displayClass, cfg }: QuartzComponentProps) {
   return (
     <div class={classNames(displayClass, "darkmode")}>
       <input class="toggle" id="darkmode-toggle" type="checkbox" tabIndex={-1} />
@@ -22,7 +23,7 @@ function Darkmode({ displayClass }: QuartzComponentProps) {
           style="enable-background:new 0 0 35 35"
           xmlSpace="preserve"
         >
-          <title>Light mode</title>
+          <title>{i18n(cfg.locale).components.themeToggle.darkMode}</title>
           <path d="M6,17.5C6,16.672,5.328,16,4.5,16h-3C0.672,16,0,16.672,0,17.5    S0.672,19,1.5,19h3C5.328,19,6,18.328,6,17.5z M7.5,26c-0.414,0-0.789,0.168-1.061,0.439l-2,2C4.168,28.711,4,29.086,4,29.5    C4,30.328,4.671,31,5.5,31c0.414,0,0.789-0.168,1.06-0.44l2-2C8.832,28.289,9,27.914,9,27.5C9,26.672,8.329,26,7.5,26z M17.5,6    C18.329,6,19,5.328,19,4.5v-3C19,0.672,18.329,0,17.5,0S16,0.672,16,1.5v3C16,5.328,16.671,6,17.5,6z M27.5,9    c0.414,0,0.789-0.168,1.06-0.439l2-2C30.832,6.289,31,5.914,31,5.5C31,4.672,30.329,4,29.5,4c-0.414,0-0.789,0.168-1.061,0.44    l-2,2C26.168,6.711,26,7.086,26,7.5C26,8.328,26.671,9,27.5,9z M6.439,8.561C6.711,8.832,7.086,9,7.5,9C8.328,9,9,8.328,9,7.5    c0-0.414-0.168-0.789-0.439-1.061l-2-2C6.289,4.168,5.914,4,5.5,4C4.672,4,4,4.672,4,5.5c0,0.414,0.168,0.789,0.439,1.06    L6.439,8.561z M33.5,16h-3c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3c0.828,0,1.5-0.672,1.5-1.5S34.328,16,33.5,16z     M28.561,26.439C28.289,26.168,27.914,26,27.5,26c-0.828,0-1.5,0.672-1.5,1.5c0,0.414,0.168,0.789,0.439,1.06l2,2    C28.711,30.832,29.086,31,29.5,31c0.828,0,1.5-0.672,1.5-1.5c0-0.414-0.168-0.789-0.439-1.061L28.561,26.439z M17.5,29    c-0.829,0-1.5,0.672-1.5,1.5v3c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-3C19,29.672,18.329,29,17.5,29z M17.5,7    C11.71,7,7,11.71,7,17.5S11.71,28,17.5,28S28,23.29,28,17.5S23.29,7,17.5,7z M17.5,25c-4.136,0-7.5-3.364-7.5-7.5    c0-4.136,3.364-7.5,7.5-7.5c4.136,0,7.5,3.364,7.5,7.5C25,21.636,21.636,25,17.5,25z"></path>
         </svg>
       </label>
@@ -38,7 +39,7 @@ function Darkmode({ displayClass }: QuartzComponentProps) {
           style="enable-background:new 0 0 100 100"
           xmlSpace="preserve"
         >
-          <title>Dark mode</title>
+          <title>{i18n(cfg.locale).components.themeToggle.lightMode}</title>
           <path d="M96.76,66.458c-0.853-0.852-2.15-1.064-3.23-0.534c-6.063,2.991-12.858,4.571-19.655,4.571  C62.022,70.495,50.88,65.88,42.5,57.5C29.043,44.043,25.658,23.536,34.076,6.47c0.532-1.08,0.318-2.379-0.534-3.23  c-0.851-0.852-2.15-1.064-3.23-0.534c-4.918,2.427-9.375,5.619-13.246,9.491c-9.447,9.447-14.65,22.008-14.65,35.369  c0,13.36,5.203,25.921,14.65,35.368s22.008,14.65,35.368,14.65c13.361,0,25.921-5.203,35.369-14.65  c3.872-3.871,7.064-8.328,9.491-13.246C97.826,68.608,97.611,67.309,96.76,66.458z"></path>
         </svg>
       </label>

quartz/components/Date.tsx

@@ -1,9 +1,10 @@
 import { GlobalConfiguration } from "../cfg"
+import { ValidLocale } from "../i18n"
 import { QuartzPluginData } from "../plugins/vfile"
 
 interface Props {
   date: Date
-  locale?: string
+  locale?: ValidLocale
 }
 
 export type ValidDateType = keyof Required<QuartzPluginData>["dates"]
@@ -17,7 +18,7 @@ export function getDate(cfg: GlobalConfiguration, data: QuartzPluginData): Date
   return data.dates?.[cfg.defaultDateType]
 }
 
-export function formatDate(d: Date, locale = "en-US"): string {
+export function formatDate(d: Date, locale: ValidLocale = "en-US"): string {
   return d.toLocaleDateString(locale, {
     year: "numeric",
     month: "short",

quartz/components/Explorer.tsx

@@ -6,10 +6,10 @@ import script from "./scripts/explorer.inline"
 import { ExplorerNode, FileNode, Options } from "./ExplorerNode"
 import { QuartzPluginData } from "../plugins/vfile"
 import { classNames } from "../util/lang"
+import { i18n } from "../i18n"
 
 // Options interface defined in `ExplorerNode` to avoid circular dependency
 const defaultOptions = {
-  title: "Explorer",
   folderClickBehavior: "collapse",
   folderDefaultState: "collapsed",
   useSavedState: true,
@@ -75,7 +75,7 @@ export default ((userOpts?: Partial<Options>) => {
     jsonTree = JSON.stringify(folders)
   }
 
-  function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) {
+  function Explorer({ cfg, allFiles, displayClass, fileData }: QuartzComponentProps) {
     constructFileTree(allFiles)
     return (
       <div class={classNames(displayClass, "explorer")}>
@@ -87,7 +87,7 @@ export default ((userOpts?: Partial<Options>) => {
           data-savestate={opts.useSavedState}
           data-tree={jsonTree}
         >
-          <h1>{opts.title}</h1>
+          <h1>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h1>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="14"

quartz/components/ExplorerNode.tsx

@@ -12,7 +12,7 @@ import {
 type OrderEntries = "sort" | "filter" | "map"
 
 export interface Options {
-  title: string
+  title?: string
   folderDefaultState: "collapsed" | "open"
   folderClickBehavior: "collapse" | "link"
   useSavedState: boolean

quartz/components/Footer.tsx

@@ -1,20 +1,22 @@
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import style from "./styles/footer.scss"
 import { version } from "../../package.json"
+import { i18n } from "../i18n"
 
 interface Options {
   links: Record<string, string>
 }
 
 export default ((opts?: Options) => {
-  function Footer({ displayClass }: QuartzComponentProps) {
+  function Footer({ displayClass, cfg }: QuartzComponentProps) {
     const year = new Date().getFullYear()
     const links = opts?.links ?? []
     return (
       <footer class={`${displayClass ?? ""}`}>
         <hr />
         <p>
-          Created with <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a>, © {year}
+          {i18n(cfg.locale).components.footer.createdWith}{" "}
+          <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a> © {year}
         </p>
         <ul>
           {Object.entries(links).map(([text, link]) => (

quartz/components/Graph.tsx

@@ -2,6 +2,7 @@ import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 // @ts-ignore
 import script from "./scripts/graph.inline"
 import style from "./styles/graph.scss"
+import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
 export interface D3Config {
@@ -53,12 +54,12 @@ const defaultOptions: GraphOptions = {
 }
 
 export default ((opts?: GraphOptions) => {
-  function Graph({ displayClass }: QuartzComponentProps) {
+  function Graph({ displayClass, cfg }: QuartzComponentProps) {
     const localGraph = { ...defaultOptions.localGraph, ...opts?.localGraph }
     const globalGraph = { ...defaultOptions.globalGraph, ...opts?.globalGraph }
     return (
       <div class={classNames(displayClass, "graph")}>
-        <h3>Graph View</h3>
+        <h3>{i18n(cfg.locale).components.graph.title}</h3>
         <div class="graph-outer">
           <div id="graph-container" data-cfg={JSON.stringify(localGraph)}></div>
           <svg

quartz/components/Head.tsx

@@ -1,11 +1,13 @@
+import { i18n } from "../i18n"
 import { FullSlug, _stripSlashes, joinSegments, pathToRoot } from "../util/path"
 import { JSResourceToScriptElement } from "../util/resources"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
 export default (() => {
   function Head({ cfg, fileData, externalResources }: QuartzComponentProps) {
-    const title = fileData.frontmatter?.title ?? "Untitled"
+    const title = fileData.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title
-    const description = fileData.description?.trim() ?? "No description provided"
+    const description =
+      fileData.description?.trim() ?? i18n(cfg.locale).propertyDefaults.description
     const { css, js } = externalResources
 
     const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)

quartz/components/PageTitle.tsx

@@ -1,9 +1,10 @@
 import { pathToRoot } from "../util/path"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { classNames } from "../util/lang"
+import { i18n } from "../i18n"
 
 function PageTitle({ fileData, cfg, displayClass }: QuartzComponentProps) {
-  const title = cfg?.pageTitle ?? "Untitled Quartz"
+  const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
   const baseDir = pathToRoot(fileData.slug!)
   return (
     <h1 class={classNames(displayClass, "page-title")}>

quartz/components/RecentNotes.tsx

@@ -5,10 +5,11 @@ import { byDateAndAlphabetical } from "./PageList"
 import style from "./styles/recentNotes.scss"
 import { Date, getDate } from "./Date"
 import { GlobalConfiguration } from "../cfg"
+import { i18n } from "../i18n"
 import { classNames } from "../util/lang"
 
 interface Options {
-  title: string
+  title?: string
   limit: number
   linkToMore: SimpleSlug | false
   filter: (f: QuartzPluginData) => boolean
@@ -16,7 +17,6 @@ interface Options {
 }
 
 const defaultOptions = (cfg: GlobalConfiguration): Options => ({
-  title: "Recent Notes",
   limit: 3,
   linkToMore: false,
   filter: () => true,
@@ -30,10 +30,10 @@ export default ((userOpts?: Partial<Options>) => {
     const remaining = Math.max(0, pages.length - opts.limit)
     return (
       <div class={classNames(displayClass, "recent-notes")}>
-        <h3>{opts.title}</h3>
+        <h3>{opts.title ?? i18n(cfg.locale).components.recentNotes.title}</h3>
         <ul class="recent-ul">
           {pages.slice(0, opts.limit).map((page) => {
-            const title = page.frontmatter?.title
+            const title = page.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title
             const tags = page.frontmatter?.tags ?? []
 
             return (
@@ -70,7 +70,9 @@ export default ((userOpts?: Partial<Options>) => {
         </ul>
         {opts.linkToMore && remaining > 0 && (
           <p>
-            <a href={resolveRelative(fileData.slug!, opts.linkToMore)}>See {remaining} more →</a>
+            <a href={resolveRelative(fileData.slug!, opts.linkToMore)}>
+              {i18n(cfg.locale).components.recentNotes.seeRemainingMore({ remaining })}
+            </a>
           </p>
         )}
       </div>

quartz/components/Search.tsx

@@ -3,6 +3,7 @@ import style from "./styles/search.scss"
 // @ts-ignore
 import script from "./scripts/search.inline"
 import { classNames } from "../util/lang"
+import { i18n } from "../i18n"
 
 export interface SearchOptions {
   enablePreview: boolean
@@ -13,13 +14,13 @@ const defaultOptions: SearchOptions = {
 }
 
 export default ((userOpts?: Partial<SearchOptions>) => {
-  function Search({ displayClass }: QuartzComponentProps) {
+  function Search({ displayClass, cfg }: QuartzComponentProps) {
     const opts = { ...defaultOptions, ...userOpts }
-
+    const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
     return (
       <div class={classNames(displayClass, "search")}>
         <div id="search-icon">
-          <p>Search</p>
+          <p>{i18n(cfg.locale).components.search.title}</p>
           <div></div>
           <svg
             tabIndex={0}
@@ -43,8 +44,8 @@ export default ((userOpts?: Partial<SearchOptions>) => {
               id="search-bar"
               name="search"
               type="text"
-              aria-label="Search for something"
+              aria-label={searchPlaceholder}
-              placeholder="Search for something"
+              placeholder={searchPlaceholder}
             />
             <div id="search-layout" data-preview={opts.enablePreview}></div>
           </div>

quartz/components/TableOfContents.tsx

@@ -5,6 +5,7 @@ import { classNames } from "../util/lang"
 
 // @ts-ignore
 import script from "./scripts/toc.inline"
+import { i18n } from "../i18n"
 
 interface Options {
   layout: "modern" | "legacy"
@@ -14,7 +15,7 @@ const defaultOptions: Options = {
   layout: "modern",
 }
 
-function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
+function TableOfContents({ fileData, displayClass, cfg }: QuartzComponentProps) {
   if (!fileData.toc) {
     return null
   }
@@ -22,7 +23,7 @@ function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
   return (
     <div class={classNames(displayClass, "toc")}>
       <button type="button" id="toc" class={fileData.collapseToc ? "collapsed" : ""}>
-        <h3>Table of Contents</h3>
+        <h3>{i18n(cfg.locale).components.tableOfContents.title}</h3>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -55,15 +56,14 @@ function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
 TableOfContents.css = modernStyle
 TableOfContents.afterDOMLoaded = script
 
-function LegacyTableOfContents({ fileData }: QuartzComponentProps) {
+function LegacyTableOfContents({ fileData, cfg }: QuartzComponentProps) {
   if (!fileData.toc) {
     return null
   }
-
   return (
     <details id="toc" open={!fileData.collapseToc}>
       <summary>
-        <h3>Table of Contents</h3>
+        <h3>{i18n(cfg.locale).components.tableOfContents.title}</h3>
       </summary>
       <ul>
         {fileData.toc.map((tocEntry) => (

quartz/components/pages/404.tsx

@@ -1,10 +1,11 @@
-import { QuartzComponentConstructor } from "../types"
+import { i18n } from "../../i18n"
+import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
 
-function NotFound() {
+function NotFound({ cfg }: QuartzComponentProps) {
   return (
     <article class="popover-hint">
       <h1>404</h1>
-      <p>Either this page is private or doesn't exist.</p>
+      <p>{i18n(cfg.locale).pages.error.notFound}</p>
     </article>
   )
 }

quartz/components/pages/FolderContent.tsx

@@ -5,8 +5,8 @@ import style from "../styles/listPage.scss"
 import { PageList } from "../PageList"
 import { _stripSlashes, simplifySlug } from "../../util/path"
 import { Root } from "hast"
-import { pluralize } from "../../util/lang"
 import { htmlToJsx } from "../../util/jsx"
+import { i18n } from "../../i18n"
 
 interface FolderContentOptions {
   /**
@@ -23,7 +23,7 @@ export default ((opts?: Partial<FolderContentOptions>) => {
   const options: FolderContentOptions = { ...defaultOptions, ...opts }
 
   function FolderContent(props: QuartzComponentProps) {
-    const { tree, fileData, allFiles } = props
+    const { tree, fileData, allFiles, cfg } = props
     const folderSlug = _stripSlashes(simplifySlug(fileData.slug!))
     const allPagesInFolder = allFiles.filter((file) => {
       const fileSlug = _stripSlashes(simplifySlug(file.slug!))
@@ -52,7 +52,11 @@ export default ((opts?: Partial<FolderContentOptions>) => {
         </article>
         <div class="page-listing">
           {options.showFolderCount && (
-            <p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
+            <p>
+              {i18n(cfg.locale).pages.folderContent.itemsUnderFolder({
+                count: allPagesInFolder.length,
+              })}
+            </p>
           )}
           <div>
             <PageList {...listProps} />

quartz/components/pages/TagContent.tsx

@@ -4,12 +4,12 @@ import { PageList } from "../PageList"
 import { FullSlug, getAllSegmentPrefixes, simplifySlug } from "../../util/path"
 import { QuartzPluginData } from "../../plugins/vfile"
 import { Root } from "hast"
-import { pluralize } from "../../util/lang"
 import { htmlToJsx } from "../../util/jsx"
+import { i18n } from "../../i18n"
 
 const numPages = 10
 function TagContent(props: QuartzComponentProps) {
-  const { tree, fileData, allFiles } = props
+  const { tree, fileData, allFiles, cfg } = props
   const slug = fileData.slug
 
   if (!(slug?.startsWith("tags/") || slug === "tags")) {
@@ -43,7 +43,7 @@ function TagContent(props: QuartzComponentProps) {
         <article>
           <p>{content}</p>
         </article>
-        <p>Found {tags.length} total tags.</p>
+        <p>{i18n(cfg.locale).pages.tagContent.totalTags({ count: tags.length })}</p>
         <div>
           {tags.map((tag) => {
             const pages = tagItemMap.get(tag)!
@@ -64,8 +64,12 @@ function TagContent(props: QuartzComponentProps) {
                 {content && <p>{content}</p>}
                 <div class="page-listing">
                   <p>
-                    {pluralize(pages.length, "item")} with this tag.{" "}
+                    {i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}
-                    {pages.length > numPages && `Showing first ${numPages}.`}
+                    {pages.length > numPages && (
+                      <span>
+                        {i18n(cfg.locale).pages.tagContent.showingFirst({ count: numPages })}
+                      </span>
+                    )}
                   </p>
                   <PageList limit={numPages} {...listProps} />
                 </div>
@@ -86,7 +90,7 @@ function TagContent(props: QuartzComponentProps) {
       <div class={classes}>
         <article>{content}</article>
         <div class="page-listing">
-          <p>{pluralize(pages.length, "item")} with this tag.</p>
+          <p>{i18n(cfg.locale).pages.tagContent.itemsUnderTag({ count: pages.length })}</p>
           <div>
             <PageList {...listProps} />
           </div>

quartz/components/renderPage.tsx

@@ -7,6 +7,8 @@ import { FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../ut
 import { visit } from "unist-util-visit"
 import { Root, Element, ElementContent } from "hast"
 import { QuartzPluginData } from "../plugins/vfile"
+import { GlobalConfiguration } from "../cfg"
+import { i18n } from "../i18n"
 
 interface RenderComponents {
   head: QuartzComponent
@@ -63,6 +65,7 @@ function getOrComputeFileIndex(allFiles: QuartzPluginData[]): Map<FullSlug, Quar
 }
 
 export function renderPage(
+  cfg: GlobalConfiguration,
   slug: FullSlug,
   componentData: QuartzComponentProps,
   components: RenderComponents,
@@ -136,7 +139,9 @@ export function renderPage(
               type: "element",
               tagName: "a",
               properties: { href: inner.properties?.href, class: ["internal"] },
-              children: [{ type: "text", value: `Link to original` }],
+              children: [
+                { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
+              ],
             },
           ]
         } else if (page.htmlAst) {
@@ -147,7 +152,14 @@ export function renderPage(
               tagName: "h1",
               properties: {},
               children: [
-                { type: "text", value: page.frontmatter?.title ?? `Transclude of ${page.slug}` },
+                {
+                  type: "text",
+                  value:
+                    page.frontmatter?.title ??
+                    i18n(cfg.locale).components.transcludes.transcludeOf({
+                      targetSlug: page.slug!,
+                    }),
+                },
               ],
             },
             ...(page.htmlAst.children as ElementContent[]).map((child) =>
@@ -157,7 +169,9 @@ export function renderPage(
               type: "element",
               tagName: "a",
               properties: { href: inner.properties?.href, class: ["internal"] },
-              children: [{ type: "text", value: `Link to original` }],
+              children: [
+                { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
+              ],
             },
           ]
         }

quartz/components/scripts/search.inline.ts

@@ -15,10 +15,30 @@ interface Item {
 type SearchType = "basic" | "tags"
 let searchType: SearchType = "basic"
 let currentSearchTerm: string = ""
-let index: FlexSearch.Document<Item> | undefined = undefined
-const p = new DOMParser()
 const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
+let 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",
+      },
+    ],
+  },
+})
 
+const p = new DOMParser()
 const fetchContentCache: Map<FullSlug, Element[]> = new Map()
 const contextWindowWords = 30
 const numSearchResults = 8
@@ -81,10 +101,10 @@ function highlight(searchTerm: string, text: string, trim?: boolean) {
   }`
 }
 
-function highlightHTML(searchTerm: string, innerHTML: string) {
+function highlightHTML(searchTerm: string, el: HTMLElement) {
   const p = new DOMParser()
   const tokenizedTerms = tokenizeTerm(searchTerm)
-  const html = p.parseFromString(innerHTML, "text/html")
+  const html = p.parseFromString(el.innerHTML, "text/html")
 
   const createHighlightSpan = (text: string) => {
     const span = document.createElement("span")
@@ -143,13 +163,11 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   let previewInner: HTMLDivElement | undefined = undefined
   const results = document.createElement("div")
   results.id = "results-container"
-  results.style.flexBasis = enablePreview ? "min(30%, 450px)" : "100%"
   appendLayout(results)
 
   if (enablePreview) {
     preview = document.createElement("div")
     preview.id = "preview-container"
-    preview.style.flexBasis = "100%"
     appendLayout(preview)
   }
 
@@ -168,7 +186,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       removeAllChildren(preview)
     }
     if (searchLayout) {
-      searchLayout.style.visibility = "hidden"
+      searchLayout.classList.remove("display-results")
     }
 
     searchType = "basic" // reset search type after closing
@@ -208,7 +226,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
 
     // If search is active, then we will render the first result and display accordingly
     if (!container?.classList.contains("active")) return
-    else if (e.key === "Enter") {
+    if (e.key === "Enter") {
       // If result has focus, navigate to that one, otherwise pick first result
       if (results?.contains(document.activeElement)) {
         const active = document.activeElement as HTMLInputElement
@@ -230,9 +248,9 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
           : (document.activeElement as HTMLInputElement | null)
         const prevResult = currentResult?.previousElementSibling as HTMLInputElement | null
         currentResult?.classList.remove("focus")
-        await displayPreview(prevResult)
         prevResult?.focus()
-        currentHover = prevResult
+        if (prevResult) currentHover = prevResult
+        await displayPreview(prevResult)
       }
     } else if (e.key === "ArrowDown" || e.key === "Tab") {
       e.preventDefault()
@@ -244,19 +262,9 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
           : (document.getElementsByClassName("result-card")[0] as HTMLInputElement | null)
         const secondResult = firstResult?.nextElementSibling as HTMLInputElement | null
         firstResult?.classList.remove("focus")
-        await displayPreview(secondResult)
         secondResult?.focus()
-        currentHover = secondResult
+        if (secondResult) currentHover = secondResult
-      } else {
+        await displayPreview(secondResult)
-        // If an element in results-container already has focus, focus next one
-        const active = currentHover
-          ? currentHover
-          : (document.activeElement as HTMLInputElement | null)
-        active?.classList.remove("focus")
-        const nextResult = active?.nextElementSibling as HTMLInputElement | null
-        await displayPreview(nextResult)
-        nextResult?.focus()
-        currentHover = nextResult
       }
     }
   }
@@ -298,40 +306,29 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     itemTile.classList.add("result-card")
     itemTile.id = slug
     itemTile.href = resolveUrl(slug).toString()
-    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}<p class="preview">${content}</p>`
+    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}${
+      enablePreview && window.innerWidth > 600 ? "" : `<p>${content}</p>`
+    }`
+    itemTile.addEventListener("click", (event) => {
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+      hideSearch()
+    })
+
+    const handler = (event: MouseEvent) => {
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+      hideSearch()
+    }
 
     async function onMouseEnter(ev: MouseEvent) {
       if (!ev.target) return
-      currentHover?.classList.remove("focus")
-      currentHover?.blur()
       const target = ev.target as HTMLInputElement
       await displayPreview(target)
-      currentHover = target
-      currentHover.classList.add("focus")
     }
 
-    async function onMouseLeave(ev: MouseEvent) {
+    itemTile.addEventListener("mouseenter", onMouseEnter)
-      if (!ev.target) return
+    window.addCleanup(() => itemTile.removeEventListener("mouseenter", onMouseEnter))
-      const target = ev.target as HTMLElement
+    itemTile.addEventListener("click", handler)
-      target.classList.remove("focus")
+    window.addCleanup(() => itemTile.removeEventListener("click", handler))
-    }
-
-    const events = [
-      ["mouseenter", onMouseEnter],
-      ["mouseleave", onMouseLeave],
-      [
-        "click",
-        (event: MouseEvent) => {
-          if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
-          hideSearch()
-        },
-      ],
-    ] as const
-
-    events.forEach(([event, handler]) => {
-      itemTile.addEventListener(event, handler)
-      window.addCleanup(() => itemTile.removeEventListener(event, handler))
-    })
 
     return itemTile
   }
@@ -385,12 +382,11 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   async function displayPreview(el: HTMLElement | null) {
     if (!searchLayout || !enablePreview || !el || !preview) return
     const slug = el.id as FullSlug
-    el.classList.add("focus")
+    const innerDiv = await fetchContent(slug).then((contents) =>
+      contents.flatMap((el) => [...highlightHTML(currentSearchTerm, el as HTMLElement).children]),
+    )
     previewInner = document.createElement("div")
     previewInner.classList.add("preview-inner")
-    const innerDiv = await fetchContent(slug).then((contents) =>
-      contents.map((el) => highlightHTML(currentSearchTerm, el.innerHTML)),
-    )
     previewInner.append(...innerDiv)
     preview.replaceChildren(previewInner)
 
@@ -398,13 +394,13 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     const highlights = [...preview.querySelectorAll(".highlight")].sort(
       (a, b) => b.innerHTML.length - a.innerHTML.length,
     )
-    highlights[0]?.scrollIntoView()
+    highlights[0]?.scrollIntoView({ block: "start" })
   }
 
   async function onType(e: HTMLElementEventMap["input"]) {
     if (!searchLayout || !index) return
     currentSearchTerm = (e.target as HTMLInputElement).value
-    searchLayout.style.visibility = currentSearchTerm === "" ? "hidden" : "visible"
+    searchLayout.classList.toggle("display-results", currentSearchTerm !== "")
     searchType = currentSearchTerm.startsWith("#") ? "tags" : "basic"
 
     let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
@@ -444,8 +440,8 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   searchBar?.addEventListener("input", onType)
   window.addCleanup(() => searchBar?.removeEventListener("input", onType))
 
-  index ??= await fillDocument(data)
   registerEscapeHandler(container, hideSearch)
+  await fillDocument(data)
 })
 
 /**
@@ -454,37 +450,19 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
  * @param data data to fill index with
  */
 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
+  const promises: Array<Promise<unknown>> = []
   for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
-    await index.addAsync(id++, {
+    promises.push(
-      id,
+      index.addAsync(id++, {
-      slug: slug as FullSlug,
+        id,
-      title: fileData.title,
+        slug: slug as FullSlug,
-      content: fileData.content,
+        title: fileData.title,
-      tags: fileData.tags,
+        content: fileData.content,
-    })
+        tags: fileData.tags,
+      }),
+    )
   }
 
-  return index
+  return await Promise.all(promises)
 }

quartz/components/styles/explorer.scss

@@ -1,3 +1,5 @@
+@use "../../styles/variables.scss" as *;
+
 button#explorer {
   all: unset;
   background-color: transparent;
@@ -85,7 +87,7 @@ svg {
     color: var(--secondary);
     font-family: var(--headerFont);
     font-size: 0.95rem;
-    font-weight: 600;
+    font-weight: $boldWeight;
     line-height: 1.5rem;
     display: inline-block;
   }
@@ -110,7 +112,7 @@ svg {
       font-size: 0.95rem;
       display: inline-block;
       color: var(--secondary);
-      font-weight: 600;
+      font-weight: $boldWeight;
       margin: 0;
       line-height: 1.5rem;
       pointer-events: none;

quartz/components/styles/search.scss

@@ -61,7 +61,7 @@
 
       & > * {
         width: 100%;
-        border-radius: 5px;
+        border-radius: 7px;
         background: var(--light);
         box-shadow:
           0 14px 50px rgba(27, 33, 48, 0.12),
@@ -83,79 +83,77 @@
       }
 
       & > #search-layout {
-        display: flex;
+        display: none;
         flex-direction: row;
-        visibility: hidden;
         border: 1px solid var(--lightgray);
+        flex: 0 0 100%;
+        box-sizing: border-box;
+
+        &.display-results {
+          display: flex;
+        }
+
+        &[data-preview] > #results-container {
+          flex: 0 0 min(30%, 450px);
+        }
 
         @media all and (min-width: $tabletBreakpoint) {
           &[data-preview] {
             & .result-card > p.preview {
               display: none;
             }
+
+            & > div {
+              &:first-child {
+                border-right: 1px solid var(--lightgray);
+                border-top-right-radius: unset;
+                border-bottom-right-radius: unset;
+              }
+
+              &:last-child {
+                border-top-left-radius: unset;
+                border-bottom-left-radius: unset;
+              }
+            }
           }
         }
 
         & > div {
-          // vh - #search-space.margin-top
           height: calc(75vh - 12vh);
-          background: none;
+          border-radius: 5px;
-
-          &:first-child {
-            border-top-left-radius: 5px;
-            border-bottom-left-radius: 5px;
-            border-right: 1px solid var(--lightgray);
-          }
-
-          &:last-child {
-            border-top-right-radius: 5px;
-            border-bottom-right-radius: 5px;
-          }
         }
 
         @media all and (max-width: $tabletBreakpoint) {
-          display: block;
+          & > #preview-container {
-          & > *:not(#results-container) {
             display: none !important;
           }
 
-          & > #results-container {
+          &[data-preview] > #results-container {
             width: 100%;
             height: auto;
+            flex: 0 0 100%;
           }
         }
 
         & .highlight {
-          background: color-mix(in srgb, var(--tertiary) 60%, transparent);
+          background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0));
           border-radius: 5px;
+          scroll-margin-top: 2rem;
         }
 
         & > #preview-container {
           display: block;
-          box-sizing: border-box;
           overflow: hidden;
+          font-family: inherit;
+          color: var(--dark);
+          line-height: 1.5em;
+          font-weight: $normalWeight;
+          overflow-y: auto;
+          padding: 0 2rem;
 
           & .preview-inner {
             margin: 0 auto;
-            padding: 1em;
+            width: min($pageWidth, 100%);
-            height: 100%;
-            width: 100%;
-            box-sizing: border-box;
-            overflow-y: auto;
-            font-family: inherit;
-            color: var(--dark);
-            line-height: 1.5em;
-            font-weight: 400;
-            background: var(--light);
-            border-top-right-radius: 5px;
-            border-bottom-right-radius: 5px;
-            box-shadow:
-              0 14px 50px rgba(27, 33, 48, 0.12),
-              0 10px 30px rgba(27, 33, 48, 0.16);
-          }
-
-          a.internal {
-            background-color: none;
           }
         }
 
@@ -163,6 +161,7 @@
           overflow-y: auto;
 
           & .result-card {
+            overflow: hidden;
             padding: 1em;
             cursor: pointer;
             transition: background 0.2s ease;
@@ -178,10 +177,10 @@
             margin: 0;
             text-transform: none;
             text-align: left;
-            background: var(--light);
             outline: none;
             font-weight: inherit;
 
+            &:hover,
             &:focus,
             &.focus {
               background: var(--lightgray);
@@ -202,7 +201,7 @@
               padding: 0.2rem 0.4rem;
               margin: 0 0.1rem;
               line-height: 1.4rem;
-              font-weight: bold;
+              font-weight: $boldWeight;
               color: var(--secondary);
 
               &.match-tag {

quartz/i18n/index.ts

@@ -0,0 +1,11 @@
+import { Translation } from "./locales/definition"
+import en from "./locales/en-US"
+import fr from "./locales/fr-FR"
+
+export const TRANSLATIONS = {
+  "en-US": en,
+  "fr-FR": fr,
+} as const
+
+export const i18n = (locale: ValidLocale): Translation => TRANSLATIONS[locale]
+export type ValidLocale = keyof typeof TRANSLATIONS

quartz/i18n/locales/definition.ts

@@ -0,0 +1,63 @@
+import { FullSlug } from "../../util/path"
+
+export interface Translation {
+  propertyDefaults: {
+    title: string
+    description: string
+  }
+  components: {
+    backlinks: {
+      title: string
+      noBacklinksFound: string
+    }
+    themeToggle: {
+      lightMode: string
+      darkMode: string
+    }
+    explorer: {
+      title: string
+    }
+    footer: {
+      createdWith: string
+    }
+    graph: {
+      title: string
+    }
+    recentNotes: {
+      title: string
+      seeRemainingMore: (variables: { remaining: number }) => string
+    }
+    transcludes: {
+      transcludeOf: (variables: { targetSlug: FullSlug }) => string
+      linkToOriginal: string
+    }
+    search: {
+      title: string
+      searchBarPlaceholder: string
+    }
+    tableOfContents: {
+      title: string
+    }
+  }
+  pages: {
+    rss: {
+      recentNotes: string
+      lastFewNotes: (variables: { count: number }) => string
+    }
+    error: {
+      title: string
+      notFound: string
+    }
+    folderContent: {
+      folder: string
+      itemsUnderFolder: (variables: { count: number }) => string
+    }
+    tagContent: {
+      tag: string
+      tagIndex: string
+      itemsUnderTag: (variables: { count: number }) => string
+      showingFirst: (variables: { count: number }) => string
+      totalTags: (variables: { count: number }) => string
+    }
+  }
+}

quartz/i18n/locales/en-US.ts

@@ -0,0 +1,65 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Untitled",
+    description: "No description provided",
+  },
+  components: {
+    backlinks: {
+      title: "Backlinks",
+      noBacklinksFound: "No backlinks found",
+    },
+    themeToggle: {
+      lightMode: "Light mode",
+      darkMode: "Dark mode",
+    },
+    explorer: {
+      title: "Explorer",
+    },
+    footer: {
+      createdWith: "Created with",
+    },
+    graph: {
+      title: "Graph View",
+    },
+    recentNotes: {
+      title: "Recent Notes",
+      seeRemainingMore: ({ remaining }) => `See ${remaining} more →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Transclude of ${targetSlug}`,
+      linkToOriginal: "Link to original",
+    },
+    search: {
+      title: "Search",
+      searchBarPlaceholder: "Search for something",
+    },
+    tableOfContents: {
+      title: "Table of Contents",
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Recent notes",
+      lastFewNotes: ({ count }) => `Last ${count} notes`,
+    },
+    error: {
+      title: "Not Found",
+      notFound: "Either this page is private or doesn't exist.",
+    },
+    folderContent: {
+      folder: "Folder",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 item under this folder" : `${count} items under this folder.`,
+    },
+    tagContent: {
+      tag: "Tag",
+      tagIndex: "Tag Index",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 item with this tag" : `${count} items with this tag.`,
+      showingFirst: ({ count }) => `Showing first ${count} tags.`,
+      totalTags: ({ count }) => `Found ${count} total tags.`,
+    },
+  },
+} as const satisfies Translation

quartz/i18n/locales/fr-FR.ts

@@ -0,0 +1,65 @@
+import { Translation } from "./definition"
+
+export default {
+  propertyDefaults: {
+    title: "Sans titre",
+    description: "Aucune description fournie",
+  },
+  components: {
+    backlinks: {
+      title: "Liens retour",
+      noBacklinksFound: "Aucun lien retour trouvé",
+    },
+    themeToggle: {
+      lightMode: "Mode clair",
+      darkMode: "Mode sombre",
+    },
+    explorer: {
+      title: "Explorateur",
+    },
+    footer: {
+      createdWith: "Créé avec",
+    },
+    graph: {
+      title: "Vue Graphique",
+    },
+    recentNotes: {
+      title: "Notes Récentes",
+      seeRemainingMore: ({ remaining }) => `Voir ${remaining} de plus →`,
+    },
+    transcludes: {
+      transcludeOf: ({ targetSlug }) => `Transclusion de ${targetSlug}`,
+      linkToOriginal: "Lien vers l'original",
+    },
+    search: {
+      title: "Recherche",
+      searchBarPlaceholder: "Rechercher quelque chose",
+    },
+    tableOfContents: {
+      title: "Table des Matières",
+    },
+  },
+  pages: {
+    rss: {
+      recentNotes: "Notes récentes",
+      lastFewNotes: ({ count }) => `Les dernières ${count} notes`,
+    },
+    error: {
+      title: "Pas trouvé",
+      notFound: "Cette page est soit privée, soit elle n'existe pas.",
+    },
+    folderContent: {
+      folder: "Dossier",
+      itemsUnderFolder: ({ count }) =>
+        count === 1 ? "1 élément sous ce dossier" : `${count} éléments sous ce dossier.`,
+    },
+    tagContent: {
+      tag: "Étiquette",
+      tagIndex: "Index des étiquettes",
+      itemsUnderTag: ({ count }) =>
+        count === 1 ? "1 élément avec cette étiquette" : `${count} éléments avec cette étiquette.`,
+      showingFirst: ({ count }) => `Affichage des premières ${count} étiquettes.`,
+      totalTags: ({ count }) => `Trouvé ${count} étiquettes au total.`,
+    },
+  },
+} as const satisfies Translation

quartz/plugins/emitters/404.tsx

@@ -8,6 +8,7 @@ import { sharedPageComponents } from "../../../quartz.layout"
 import { NotFound } from "../../components"
 import { defaultProcessedContent } from "../vfile"
 import { write } from "./helpers"
+import { i18n } from "../../i18n"
 
 export const NotFoundPage: QuartzEmitterPlugin = () => {
   const opts: FullPageLayout = {
@@ -33,11 +34,12 @@ export const NotFoundPage: QuartzEmitterPlugin = () => {
       const url = new URL(`https://${cfg.baseUrl ?? "example.com"}`)
       const path = url.pathname as FullSlug
       const externalResources = pageResources(path, resources)
+      const notFound = i18n(cfg.locale).pages.error.title
       const [tree, vfile] = defaultProcessedContent({
         slug,
-        text: "Not Found",
+        text: notFound,
-        description: "Not Found",
+        description: notFound,
-        frontmatter: { title: "Not Found", tags: [] },
+        frontmatter: { title: notFound, tags: [] },
       })
       const componentData: QuartzComponentProps = {
         fileData: vfile.data,
@@ -51,7 +53,7 @@ export const NotFoundPage: QuartzEmitterPlugin = () => {
       return [
         await write({
           ctx,
-          content: renderPage(slug, componentData, opts, externalResources),
+          content: renderPage(cfg, slug, componentData, opts, externalResources),
           slug,
           ext: ".html",
         }),

quartz/plugins/emitters/contentIndex.ts

@@ -6,6 +6,7 @@ import { FilePath, FullSlug, SimpleSlug, joinSegments, simplifySlug } from "../.
 import { QuartzEmitterPlugin } from "../types"
 import { toHtml } from "hast-util-to-html"
 import { write } from "./helpers"
+import { i18n } from "../../i18n"
 
 export type ContentIndex = Map<FullSlug, ContentDetails>
 export type ContentDetails = {
@@ -38,7 +39,7 @@ function generateSiteMap(cfg: GlobalConfiguration, idx: ContentIndex): string {
   const base = cfg.baseUrl ?? ""
   const createURLEntry = (slug: SimpleSlug, content: ContentDetails): string => `<url>
     <loc>https://${joinSegments(base, encodeURI(slug))}</loc>
-    <lastmod>${content.date?.toISOString()}</lastmod>
+    ${content.date && `<lastmod>${content.date.toISOString()}</lastmod>`}
   </url>`
   const urls = Array.from(idx)
     .map(([slug, content]) => createURLEntry(simplifySlug(slug), content))
@@ -78,7 +79,7 @@ function generateRSSFeed(cfg: GlobalConfiguration, idx: ContentIndex, limit?: nu
     <channel>
       <title>${escapeHTML(cfg.pageTitle)}</title>
       <link>https://${base}</link>
-      <description>${!!limit ? `Last ${limit} notes` : "Recent notes"} on ${escapeHTML(
+      <description>${!!limit ? i18n(cfg.locale).pages.rss.lastFewNotes({ count: limit }) : i18n(cfg.locale).pages.rss.recentNotes} on ${escapeHTML(
         cfg.pageTitle,
       )}</description>
       <generator>Quartz -- quartz.jzhao.xyz</generator>

quartz/plugins/emitters/contentPage.tsx

@@ -49,7 +49,7 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
           allFiles,
         }
 
-        const content = renderPage(slug, componentData, opts, externalResources)
+        const content = renderPage(cfg, slug, componentData, opts, externalResources)
         const fp = await write({
           ctx,
           content,

quartz/plugins/emitters/folderPage.tsx

@@ -18,6 +18,7 @@ import {
 import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.layout"
 import { FolderContent } from "../../components"
 import { write } from "./helpers"
+import { i18n } from "../../i18n"
 
 export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
   const opts: FullPageLayout = {
@@ -57,7 +58,10 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpt
           folder,
           defaultProcessedContent({
             slug: joinSegments(folder, "index") as FullSlug,
-            frontmatter: { title: `Folder: ${folder}`, tags: [] },
+            frontmatter: {
+              title: `${i18n(cfg.locale).pages.folderContent.folder}: ${folder}`,
+              tags: [],
+            },
           }),
         ]),
       )
@@ -82,7 +86,7 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpt
           allFiles,
         }
 
-        const content = renderPage(slug, componentData, opts, externalResources)
+        const content = renderPage(cfg, slug, componentData, opts, externalResources)
         const fp = await write({
           ctx,
           content,

quartz/plugins/emitters/tagPage.tsx

@@ -15,6 +15,7 @@ import {
 import { defaultListPageLayout, sharedPageComponents } from "../../../quartz.layout"
 import { TagContent } from "../../components"
 import { write } from "./helpers"
+import { i18n } from "../../i18n"
 
 export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts) => {
   const opts: FullPageLayout = {
@@ -47,7 +48,10 @@ export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts)
 
       const tagDescriptions: Record<string, ProcessedContent> = Object.fromEntries(
         [...tags].map((tag) => {
-          const title = tag === "index" ? "Tag Index" : `Tag: #${tag}`
+          const title =
+            tag === "index"
+              ? i18n(cfg.locale).pages.tagContent.tagIndex
+              : `${i18n(cfg.locale).pages.tagContent.tag}: #${tag}`
           return [
             tag,
             defaultProcessedContent({
@@ -81,7 +85,7 @@ export const TagPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOpts)
           allFiles,
         }
 
-        const content = renderPage(slug, componentData, opts, externalResources)
+        const content = renderPage(cfg, slug, componentData, opts, externalResources)
         const fp = await write({
           ctx,
           content,

quartz/plugins/transformers/frontmatter.ts

@@ -5,6 +5,7 @@ import yaml from "js-yaml"
 import toml from "toml"
 import { slugTag } from "../../util/path"
 import { QuartzPluginData } from "../vfile"
+import { i18n } from "../../i18n"
 
 export interface Options {
   delims: string | string[]
@@ -43,7 +44,7 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
   const opts = { ...defaultOptions, ...userOpts }
   return {
     name: "FrontMatter",
-    markdownPlugins() {
+    markdownPlugins({ cfg }) {
       return [
         [remarkFrontmatter, ["yaml", "toml"]],
         () => {
@@ -59,7 +60,7 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
             if (data.title) {
               data.title = data.title.toString()
             } else if (data.title === null || data.title === undefined) {
-              data.title = file.stem ?? "Untitled"
+              data.title = file.stem ?? i18n(cfg.configuration.locale).propertyDefaults.title
             }
 
             const tags = coerceToArray(coalesceAliases(data, ["tags", "tag"]))

quartz/plugins/transformers/lastmod.ts

@@ -43,7 +43,7 @@ export const CreatedModifiedDate: QuartzTransformerPlugin<Partial<Options> | und
             let published: MaybeDate = undefined
 
             const fp = file.data.filePath!
-            const fullFp = path.posix.join(file.cwd, fp)
+            const fullFp = path.isAbsolute(fp) ? fp : path.posix.join(file.cwd, fp)
             for (const source of opts.priority) {
               if (source === "filesystem") {
                 const st = await fs.promises.stat(fullFp)

quartz/plugins/transformers/ofm.ts

@@ -74,6 +74,17 @@ const calloutMapping = {
   cite: "quote",
 } as const
 
+const arrowMapping: Record<string, string> = {
+  "->": "&rarr;",
+  "-->": "&rArr;",
+  "=>": "&rArr;",
+  "==>": "&rArr;",
+  "<-": "&larr;",
+  "<--": "&lArr;",
+  "<=": "&lArr;",
+  "<==": "&lArr;",
+}
+
 function canonicalizeCallout(calloutName: string): keyof typeof calloutMapping {
   const normalizedCallout = calloutName.toLowerCase() as keyof typeof calloutMapping
   // if callout is not recognized, make it a custom one
@@ -82,7 +93,7 @@ function canonicalizeCallout(calloutName: string): keyof typeof calloutMapping {
 
 export const externalLinkRegex = /^https?:\/\//i
 
-export const arrowRegex = new RegExp(/-{1,2}>/, "g")
+export const arrowRegex = new RegExp(/(-{1,2}>|={1,2}>|<-{1,2}|<={1,2})/, "g")
 
 // !?                -> optional embedding
 // \[\[              -> open brace
@@ -271,10 +282,12 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
           if (opts.parseArrows) {
             replacements.push([
               arrowRegex,
-              (_value: string, ..._capture: string[]) => {
+              (value: string, ..._capture: string[]) => {
+                const maybeArrow = arrowMapping[value]
+                if (maybeArrow === undefined) return SKIP
                 return {
                   type: "html",
-                  value: `<span>&rarr;</span>`,
+                  value: `<span>${maybeArrow}</span>`,
                 }
               },
             ])

quartz/plugins/transformers/toc.ts

@@ -3,7 +3,6 @@ import { Root } from "mdast"
 import { visit } from "unist-util-visit"
 import { toString } from "mdast-util-to-string"
 import Slugger from "github-slugger"
-import { wikilinkRegex } from "./ofm"
 
 export interface Options {
   maxDepth: 1 | 2 | 3 | 4 | 5 | 6
@@ -25,7 +24,7 @@ interface TocEntry {
   slug: string // this is just the anchor (#some-slug), not the canonical slug
 }
 
-const regexMdLinks = new RegExp(/\[([^\[]+)\](\(.*\))/, "g")
+const slugAnchor = new Slugger()
 export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefined> = (
   userOpts,
 ) => {
@@ -38,21 +37,12 @@ export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefin
           return async (tree: Root, file) => {
             const display = file.data.frontmatter?.enableToc ?? opts.showByDefault
             if (display) {
-              const slugAnchor = new Slugger()
+              slugAnchor.reset()
               const toc: TocEntry[] = []
               let highestDepth: number = opts.maxDepth
               visit(tree, "heading", (node) => {
                 if (node.depth <= opts.maxDepth) {
-                  let text = toString(node)
+                  const text = toString(node)
-
-                  // strip link formatting from toc entries
-                  text = text.replace(wikilinkRegex, (_, rawFp, __, rawAlias) => {
-                    const fp = rawFp?.trim() ?? ""
-                    const alias = rawAlias?.slice(1).trim()
-                    return alias ?? fp
-                  })
-                  text = text.replace(regexMdLinks, "$1")
-
                   highestDepth = Math.min(highestDepth, node.depth)
                   toc.push({
                     depth: node.depth,

quartz/styles/base.scss

@@ -26,7 +26,7 @@ section {
 }
 
 ::selection {
-  background: color-mix(in srgb, var(--tertiary) 60%, transparent);
+  background: color-mix(in srgb, var(--tertiary) 60%, rgba(255, 255, 255, 0));
   color: var(--darkgray);
 }
 
@@ -54,7 +54,7 @@ ul,
 }
 
 a {
-  font-weight: 600;
+  font-weight: $boldWeight;
   text-decoration: none;
   transition: color 0.2s ease;
   color: var(--secondary);

quartz/styles/callouts.scss

@@ -1,3 +1,4 @@
+@use "./variables.scss" as *;
 @use "sass:color";
 
 .callout {
@@ -119,7 +120,7 @@
 
 .callout-title {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 5px;
   padding: 1rem 0;
   color: var(--color);
@@ -130,8 +131,6 @@
     transition: transform 0.15s ease;
     opacity: 0.8;
     cursor: pointer;
-    width: var(--icon-size);
-    height: var(--icon-size);
     --callout-icon: var(--callout-icon-fold);
   }
 
@@ -144,6 +143,7 @@
   & .fold-callout-icon {
     width: var(--icon-size);
     height: var(--icon-size);
+    flex: 0 0 var(--icon-size);
 
     // icon support
     background-size: var(--icon-size) var(--icon-size);
@@ -153,9 +153,10 @@
     mask-size: var(--icon-size) var(--icon-size);
     mask-position: center;
     mask-repeat: no-repeat;
+    padding: 0.2rem 0;
   }
 
   .callout-title-inner {
-    font-weight: 700;
+    font-weight: $boldWeight;
   }
 }

quartz/styles/variables.scss

@@ -4,3 +4,5 @@ $tabletBreakpoint: 1000px;
 $sidePanelWidth: 380px;
 $topSpacing: 6rem;
 $fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
+$boldWeight: 700;
+$normalWeight: 400;

quartz/util/lang.ts

@@ -1,11 +1,3 @@
-export function pluralize(count: number, s: string): string {
-  if (count === 1) {
-    return `1 ${s}`
-  } else {
-    return `${count} ${s}s`
-  }
-}
-
 export function capitalize(s: string): string {
   return s.substring(0, 1).toUpperCase() + s.substring(1)
 }

quartz/util/path.test.ts

@@ -106,8 +106,9 @@ describe("transforms", () => {
         ["test.mp4", "test.mp4"],
         ["note with spaces.md", "note-with-spaces"],
         ["notes.with.dots.md", "notes.with.dots"],
-        ["test/special chars?.md", "test/special-chars-q"],
+        ["test/special chars?.md", "test/special-chars"],
         ["test/special chars #3.md", "test/special-chars-3"],
+        ["cool/what about r&d?.md", "cool/what-about-r-and-d"],
       ],
       path.slugifyFilePath,
       path.isFilePath,

quartz/util/path.ts

@@ -51,7 +51,12 @@ function sluggify(s: string): string {
   return s
     .split("/")
     .map((segment) =>
-      segment.replace(/\s/g, "-").replace(/%/g, "-percent").replace(/\?/g, "-q").replace(/#/g, ""),
+      segment
+        .replace(/\s/g, "-")
+        .replace(/&/g, "-and-")
+        .replace(/%/g, "-percent")
+        .replace(/\?/g, "")
+        .replace(/#/g, ""),
     )
     .join("/") // always use / as sep
     .replace(/\/$/, "")