feat(i18n): readermode translations and icon (#1961)

Felix Nie

2025-05-07 e98d97a271857efe14e6f15d8971d452b2d1a2d5

feat(i18n): readermode translations and icon (#1961)

* fix(readermode): Translations and a new icon for ReaderMode

* Formatted

* Replaced icon

 quartz/components/ReaderMode.tsx

@@ -2,25 +2,31 @@
import readerModeScript from "./scripts/readermode.inline"
import styles from "./styles/readermode.scss"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import { i18n } from "../i18n"
import { classNames } from "../util/lang"

const ReaderMode: QuartzComponent = ({ displayClass }: QuartzComponentProps) => {
const ReaderMode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
  return (
    <button class={classNames(displayClass, "readermode")}>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink"
        version="1.1"
        class="readerIcon"
        viewBox="0 0 24 24"
        fill="none"
        fill="currentColor"
        stroke="currentColor"
        stroke-width="2"
        stroke-width="0.2"
        stroke-linecap="round"
        stroke-linejoin="round"
        width="64px"
        height="64px"
        viewBox="0 0 24 24"
        aria-label={i18n(cfg.locale).components.readerMode.title}
      >
        <rect x="6" y="4" width="12" height="16" rx="1"></rect>
        <line x1="9" y1="8" x2="15" y2="8"></line>
        <line x1="9" y1="12" x2="15" y2="12"></line>
        <line x1="9" y1="16" x2="13" y2="16"></line>
        <title>{i18n(cfg.locale).components.readerMode.title}</title>
        <g transform="translate(-1.8, -1.8) scale(1.15, 1.2)">
          <path d="M8.9891247,2.5 C10.1384702,2.5 11.2209868,2.96705384 12.0049645,3.76669482 C12.7883914,2.96705384 13.8709081,2.5 15.0202536,2.5 L18.7549359,2.5 C19.1691495,2.5 19.5049359,2.83578644 19.5049359,3.25 L19.5046891,4.004 L21.2546891,4.00457396 C21.6343849,4.00457396 21.9481801,4.28672784 21.9978425,4.6528034 L22.0046891,4.75457396 L22.0046891,20.25 C22.0046891,20.6296958 21.7225353,20.943491 21.3564597,20.9931534 L21.2546891,21 L2.75468914,21 C2.37499337,21 2.06119817,20.7178461 2.01153575,20.3517706 L2.00468914,20.25 L2.00468914,4.75457396 C2.00468914,4.37487819 2.28684302,4.061083 2.65291858,4.01142057 L2.75468914,4.00457396 L4.50368914,4.004 L4.50444233,3.25 C4.50444233,2.87030423 4.78659621,2.55650904 5.15267177,2.50684662 L5.25444233,2.5 L8.9891247,2.5 Z M4.50368914,5.504 L3.50468914,5.504 L3.50468914,19.5 L10.9478955,19.4998273 C10.4513189,18.9207296 9.73864328,18.5588115 8.96709342,18.5065584 L8.77307039,18.5 L5.25444233,18.5 C4.87474657,18.5 4.56095137,18.2178461 4.51128895,17.8517706 L4.50444233,17.75 L4.50368914,5.504 Z M19.5049359,17.75 C19.5049359,18.1642136 19.1691495,18.5 18.7549359,18.5 L15.2363079,18.5 C14.3910149,18.5 13.5994408,18.8724714 13.0614828,19.4998273 L20.5046891,19.5 L20.5046891,5.504 L19.5046891,5.504 L19.5049359,17.75 Z M18.0059359,3.999 L15.0202536,4 L14.8259077,4.00692283 C13.9889509,4.06666544 13.2254227,4.50975805 12.7549359,5.212 L12.7549359,17.777 L12.7782651,17.7601316 C13.4923805,17.2719483 14.3447024,17 15.2363079,17 L18.0059359,16.999 L18.0056891,4.798 L18.0033792,4.75457396 L18.0056891,4.71 L18.0059359,3.999 Z M8.9891247,4 L6.00368914,3.999 L6.00599909,4.75457396 L6.00599909,4.75457396 L6.00368914,4.783 L6.00368914,16.999 L8.77307039,17 C9.57551536,17 10.3461406,17.2202781 11.0128313,17.6202194 L11.2536891,17.776 L11.2536891,5.211 C10.8200889,4.56369974 10.1361548,4.13636104 9.37521067,4.02745763 L9.18347055,4.00692283 L8.9891247,4 Z" />
        </g>
      </svg>
    </button>
  )

 quartz/components/styles/readermode.scss

@@ -15,6 +15,7 @@
    width: 20px;
    height: 20px;
    top: calc(50% - 10px);
    fill: var(--darkgray);
    stroke: var(--darkgray);
    transition: opacity 0.1s ease;
  }

 quartz/i18n/locales/ar-SA.ts

@@ -32,6 +32,9 @@
    explorer: {
      title: "المستعرض",
    },
    readerMode: {
      title: "وضع القارئ",
    },
    footer: {
      createdWith: "أُنشئ باستخدام",
    },

 quartz/i18n/locales/ca-ES.ts

@@ -29,6 +29,9 @@
      lightMode: "Mode clar",
      darkMode: "Mode fosc",
    },
    readerMode: {
      title: "Mode lector",
    },
    explorer: {
      title: "Explorador",
    },

 quartz/i18n/locales/cs-CZ.ts

@@ -29,6 +29,9 @@
      lightMode: "Světlý režim",
      darkMode: "Tmavý režim",
    },
    readerMode: {
      title: "Režim čtečky",
    },
    explorer: {
      title: "Procházet",
    },

 quartz/i18n/locales/de-DE.ts

@@ -26,8 +26,11 @@
      noBacklinksFound: "Keine Backlinks gefunden",
    },
    themeToggle: {
      lightMode: "Light Mode",
      darkMode: "Dark Mode",
      lightMode: "Heller Modus",
      darkMode: "Dunkler Modus",
    },
    readerMode: {
      title: "Lesemodus",
    },
    explorer: {
      title: "Explorer",

 quartz/i18n/locales/definition.ts

@@ -31,6 +31,9 @@
      lightMode: string
      darkMode: string
    }
    readerMode: {
      title: string
    }
    explorer: {
      title: string
    }

 quartz/i18n/locales/en-GB.ts

@@ -29,6 +29,9 @@
      lightMode: "Light mode",
      darkMode: "Dark mode",
    },
    readerMode: {
      title: "Reader mode",
    },
    explorer: {
      title: "Explorer",
    },

 quartz/i18n/locales/en-US.ts

@@ -29,6 +29,9 @@
      lightMode: "Light mode",
      darkMode: "Dark mode",
    },
    readerMode: {
      title: "Reader mode",
    },
    explorer: {
      title: "Explorer",
    },

 quartz/i18n/locales/es-ES.ts

@@ -29,6 +29,9 @@
      lightMode: "Modo claro",
      darkMode: "Modo oscuro",
    },
    readerMode: {
      title: "Modo lector",
    },
    explorer: {
      title: "Explorador",
    },

 quartz/i18n/locales/fa-IR.ts

@@ -29,6 +29,9 @@
      lightMode: "حالت روشن",
      darkMode: "حالت تاریک",
    },
    readerMode: {
      title: "حالت خواندن",
    },
    explorer: {
      title: "مطالب",
    },

 quartz/i18n/locales/fi-FI.ts

@@ -29,6 +29,9 @@
      lightMode: "Vaalea tila",
      darkMode: "Tumma tila",
    },
    readerMode: {
      title: "Lukijatila",
    },
    explorer: {
      title: "Selain",
    },

 quartz/i18n/locales/fr-FR.ts

@@ -29,6 +29,9 @@
      lightMode: "Mode clair",
      darkMode: "Mode sombre",
    },
    readerMode: {
      title: "Mode lecture",
    },
    explorer: {
      title: "Explorateur",
    },

 quartz/i18n/locales/hu-HU.ts

@@ -29,6 +29,9 @@
      lightMode: "Világos mód",
      darkMode: "Sötét mód",
    },
    readerMode: {
      title: "Olvasó mód",
    },
    explorer: {
      title: "Fájlböngésző",
    },

 quartz/i18n/locales/it-IT.ts

@@ -29,6 +29,9 @@
      lightMode: "Tema chiaro",
      darkMode: "Tema scuro",
    },
    readerMode: {
      title: "Modalità lettura",
    },
    explorer: {
      title: "Esplora",
    },

 quartz/i18n/locales/ja-JP.ts

@@ -29,6 +29,9 @@
      lightMode: "ライトモード",
      darkMode: "ダークモード",
    },
    readerMode: {
      title: "リーダーモード",
    },
    explorer: {
      title: "エクスプローラー",
    },

 quartz/i18n/locales/ko-KR.ts

@@ -29,6 +29,9 @@
      lightMode: "라이트 모드",
      darkMode: "다크 모드",
    },
    readerMode: {
      title: "리더 모드",
    },
    explorer: {
      title: "탐색기",
    },

 quartz/i18n/locales/lt-LT.ts

@@ -29,6 +29,9 @@
      lightMode: "Šviesus Režimas",
      darkMode: "Tamsus Režimas",
    },
    readerMode: {
      title: "Modalità lettore",
    },
    explorer: {
      title: "Naršyklė",
    },

 quartz/i18n/locales/nb-NO.ts

@@ -29,6 +29,9 @@
      lightMode: "Lys modus",
      darkMode: "Mørk modus",
    },
    readerMode: {
      title: "Læsemodus",
    },
    explorer: {
      title: "Utforsker",
    },

 quartz/i18n/locales/nl-NL.ts

@@ -29,6 +29,9 @@
      lightMode: "Lichte modus",
      darkMode: "Donkere modus",
    },
    readerMode: {
      title: "Leesmodus",
    },
    explorer: {
      title: "Verkenner",
    },

 quartz/i18n/locales/pl-PL.ts

@@ -29,6 +29,9 @@
      lightMode: "Trzyb jasny",
      darkMode: "Tryb ciemny",
    },
    readerMode: {
      title: "Tryb czytania",
    },
    explorer: {
      title: "Przeglądaj",
    },

 quartz/i18n/locales/pt-BR.ts

@@ -29,6 +29,9 @@
      lightMode: "Tema claro",
      darkMode: "Tema escuro",
    },
    readerMode: {
      title: "Modo leitor",
    },
    explorer: {
      title: "Explorador",
    },

 quartz/i18n/locales/ro-RO.ts

@@ -29,6 +29,9 @@
      lightMode: "Modul luminos",
      darkMode: "Modul întunecat",
    },
    readerMode: {
      title: "Modul de citire",
    },
    explorer: {
      title: "Explorator",
    },

 quartz/i18n/locales/ru-RU.ts

@@ -29,6 +29,9 @@
      lightMode: "Светлый режим",
      darkMode: "Тёмный режим",
    },
    readerMode: {
      title: "Режим чтения",
    },
    explorer: {
      title: "Проводник",
    },

 quartz/i18n/locales/th-TH.ts

@@ -29,6 +29,9 @@
      lightMode: "โหมดสว่าง",
      darkMode: "โหมดมืด",
    },
    readerMode: {
      title: "โหมดอ่าน",
    },
    explorer: {
      title: "รายการหน้า",
    },

 quartz/i18n/locales/tr-TR.ts

@@ -29,6 +29,9 @@
      lightMode: "Açık mod",
      darkMode: "Koyu mod",
    },
    readerMode: {
      title: "Okuma modu",
    },
    explorer: {
      title: "Gezgin",
    },

 quartz/i18n/locales/uk-UA.ts

@@ -29,6 +29,9 @@
      lightMode: "Світлий режим",
      darkMode: "Темний режим",
    },
    readerMode: {
      title: "Режим читання",
    },
    explorer: {
      title: "Провідник",
    },

 quartz/i18n/locales/vi-VN.ts

@@ -29,6 +29,9 @@
      lightMode: "Sáng",
      darkMode: "Tối",
    },
    readerMode: {
      title: "Chế độ đọc",
    },
    explorer: {
      title: "Trong bài này",
    },

 quartz/i18n/locales/zh-CN.ts

@@ -29,6 +29,9 @@
      lightMode: "亮色模式",
      darkMode: "暗色模式",
    },
    readerMode: {
      title: "阅读模式",
    },
    explorer: {
      title: "探索",
    },

 quartz/i18n/locales/zh-TW.ts

@@ -29,6 +29,9 @@
      lightMode: "亮色模式",
      darkMode: "暗色模式",
    },
    readerMode: {
      title: "閱讀模式",
    },
    explorer: {
      title: "探索",
    },