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

2025-12-24 13:24:05 -06:00 · 2025-05-05 02:06:27 +08:00 · 2025-05-05 02:06:27 +08:00 · 9261dd42f1
commit 9261dd42f1
parent adf442036b
30 changed files with 101 additions and 10 deletions
--- a/quartz/components/ReaderMode.tsx
+++ b/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="2.5"
        stroke-linecap="round"
        stroke-linejoin="round"
+        viewBox="0 0 122.88 101.37" 
+        x="0px" 
+        y="0px" 
+        style="enable-background:new 0 0 122.88 101.37" 
+        xml:space="preserve"
+        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><path d="M12.64,77.27l0.31-54.92h-6.2v69.88c8.52-2.2,17.07-3.6,25.68-3.66c7.95-0.05,15.9,1.06,23.87,3.76 c-4.95-4.01-10.47-6.96-16.36-8.88c-7.42-2.42-15.44-3.22-23.66-2.52c-1.86,0.15-3.48-1.23-3.64-3.08 C12.62,77.65,12.62,77.46,12.64,77.27L12.64,77.27z M103.62,19.48c-0.02-0.16-0.04-0.33-0.04-0.51c0-0.17,0.01-0.34,0.04-0.51V7.34 c-7.8-0.74-15.84,0.12-22.86,2.78c-6.56,2.49-12.22,6.58-15.9,12.44V85.9c5.72-3.82,11.57-6.96,17.58-9.1 c6.85-2.44,13.89-3.6,21.18-3.02V19.48L103.62,19.48z M110.37,15.6h9.14c1.86,0,3.37,1.51,3.37,3.37v77.66 c0,1.86-1.51,3.37-3.37,3.37c-0.38,0-0.75-0.06-1.09-0.18c-9.4-2.69-18.74-4.48-27.99-4.54c-9.02-0.06-18.03,1.53-27.08,5.52 c-0.56,0.37-1.23,0.57-1.92,0.56c-0.68,0.01-1.35-0.19-1.92-0.56c-9.04-4-18.06-5.58-27.08-5.52c-9.25,0.06-18.58,1.85-27.99,4.54 c-0.34,0.12-0.71,0.18-1.09,0.18C1.51,100.01,0,98.5,0,96.64V18.97c0-1.86,1.51-3.37,3.37-3.37h9.61l0.06-11.26 c0.01-1.62,1.15-2.96,2.68-3.28l0,0c8.87-1.85,19.65-1.39,29.1,2.23c6.53,2.5,12.46,6.49,16.79,12.25 c4.37-5.37,10.21-9.23,16.78-11.72c8.98-3.41,19.34-4.23,29.09-2.8c1.68,0.24,2.88,1.69,2.88,3.33h0V15.6L110.37,15.6z M68.13,91.82c7.45-2.34,14.89-3.3,22.33-3.26c8.61,0.05,17.16,1.46,25.68,3.66V22.35h-5.77v55.22c0,1.86-1.51,3.37-3.37,3.37 c-0.27,0-0.53-0.03-0.78-0.09c-7.38-1.16-14.53-0.2-21.51,2.29C79.09,85.15,73.57,88.15,68.13,91.82L68.13,91.82z M58.12,85.25 V22.46c-3.53-6.23-9.24-10.4-15.69-12.87c-7.31-2.8-15.52-3.43-22.68-2.41l-0.38,66.81c7.81-0.28,15.45,0.71,22.64,3.06 C47.73,78.91,53.15,81.64,58.12,85.25L58.12,85.25z"/></g>
      </svg>
    </button>
  )
--- a/quartz/components/styles/readermode.scss
+++ b/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;
  }
--- a/quartz/i18n/locales/ar-SA.ts
+++ b/quartz/i18n/locales/ar-SA.ts
@ -32,6 +32,9 @@ export default {
    explorer: {
      title: "المستعرض",
    },
+    readerMode: {
+      title: "وضع القارئ",
+    },
    footer: {
      createdWith: "أُنشئ باستخدام",
    },
--- a/quartz/i18n/locales/ca-ES.ts
+++ b/quartz/i18n/locales/ca-ES.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Mode clar",
      darkMode: "Mode fosc",
    },
+    readerMode: {
+      title: "Mode lector",
+    },
    explorer: {
      title: "Explorador",
    },
--- a/quartz/i18n/locales/cs-CZ.ts
+++ b/quartz/i18n/locales/cs-CZ.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Světlý režim",
      darkMode: "Tmavý režim",
    },
+    readerMode: {
+      title: "Režim čtečky",
+    },
    explorer: {
      title: "Procházet",
    },
--- a/quartz/i18n/locales/de-DE.ts
+++ b/quartz/i18n/locales/de-DE.ts
@ -26,8 +26,11 @@ export default {
      noBacklinksFound: "Keine Backlinks gefunden",
    },
    themeToggle: {
-      lightMode: "Light Mode",
-      darkMode: "Dark Mode",
+      lightMode: "Heller Modus",
+      darkMode: "Dunkler Modus",
+    },
+    readerMode: {
+      title: "Lesemodus",
    },
    explorer: {
      title: "Explorer",
--- a/quartz/i18n/locales/definition.ts
+++ b/quartz/i18n/locales/definition.ts
@ -31,6 +31,9 @@ export interface Translation {
      lightMode: string
      darkMode: string
    }
+    readerMode: {
+      title: string
+    }
    explorer: {
      title: string
    }
--- a/quartz/i18n/locales/en-GB.ts
+++ b/quartz/i18n/locales/en-GB.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Light mode",
      darkMode: "Dark mode",
    },
+    readerMode: {
+      title: "Reader mode",
+    },
    explorer: {
      title: "Explorer",
    },
--- a/quartz/i18n/locales/en-US.ts
+++ b/quartz/i18n/locales/en-US.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Light mode",
      darkMode: "Dark mode",
    },
+    readerMode: {
+      title: "Reader mode",
+    },
    explorer: {
      title: "Explorer",
    },
--- a/quartz/i18n/locales/es-ES.ts
+++ b/quartz/i18n/locales/es-ES.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Modo claro",
      darkMode: "Modo oscuro",
    },
+    readerMode: {
+      title: "Modo lector",
+    },
    explorer: {
      title: "Explorador",
    },
--- a/quartz/i18n/locales/fa-IR.ts
+++ b/quartz/i18n/locales/fa-IR.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "حالت روشن",
      darkMode: "حالت تاریک",
    },
+    readerMode: {
+      title: "حالت خواندن",
+    },
    explorer: {
      title: "مطالب",
    },
--- a/quartz/i18n/locales/fi-FI.ts
+++ b/quartz/i18n/locales/fi-FI.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Vaalea tila",
      darkMode: "Tumma tila",
    },
+    readerMode: {
+      title: "Lukijatila",
+    },
    explorer: {
      title: "Selain",
    },
--- a/quartz/i18n/locales/fr-FR.ts
+++ b/quartz/i18n/locales/fr-FR.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Mode clair",
      darkMode: "Mode sombre",
    },
+    readerMode: {
+      title: "Mode lecture",
+    },
    explorer: {
      title: "Explorateur",
    },
--- a/quartz/i18n/locales/hu-HU.ts
+++ b/quartz/i18n/locales/hu-HU.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Világos mód",
      darkMode: "Sötét mód",
    },
+    readerMode: {
+      title: "Olvasó mód",
+    },
    explorer: {
      title: "Fájlböngésző",
    },
--- a/quartz/i18n/locales/it-IT.ts
+++ b/quartz/i18n/locales/it-IT.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Tema chiaro",
      darkMode: "Tema scuro",
    },
+    readerMode: {
+      title: "Modalità lettura",
+    },
    explorer: {
      title: "Esplora",
    },
--- a/quartz/i18n/locales/ja-JP.ts
+++ b/quartz/i18n/locales/ja-JP.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "ライトモード",
      darkMode: "ダークモード",
    },
+    readerMode: {
+      title: "リーダーモード",
+    },
    explorer: {
      title: "エクスプローラー",
    },
--- a/quartz/i18n/locales/ko-KR.ts
+++ b/quartz/i18n/locales/ko-KR.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "라이트 모드",
      darkMode: "다크 모드",
    },
+    readerMode: {
+      title: "리더 모드",
+    },
    explorer: {
      title: "탐색기",
    },
--- a/quartz/i18n/locales/lt-LT.ts
+++ b/quartz/i18n/locales/lt-LT.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Šviesus Režimas",
      darkMode: "Tamsus Režimas",
    },
+    readerMode: {
+      title: "Modalità lettore",
+    },
    explorer: {
      title: "Naršyklė",
    },
--- a/quartz/i18n/locales/nb-NO.ts
+++ b/quartz/i18n/locales/nb-NO.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Lys modus",
      darkMode: "Mørk modus",
    },
+    readerMode: {
+      title: "Læsemodus",
+    },
    explorer: {
      title: "Utforsker",
    },
--- a/quartz/i18n/locales/nl-NL.ts
+++ b/quartz/i18n/locales/nl-NL.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Lichte modus",
      darkMode: "Donkere modus",
    },
+    readerMode: {
+      title: "Leesmodus",
+    },
    explorer: {
      title: "Verkenner",
    },
--- a/quartz/i18n/locales/pl-PL.ts
+++ b/quartz/i18n/locales/pl-PL.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Trzyb jasny",
      darkMode: "Tryb ciemny",
    },
+    readerMode: {
+      title: "Tryb czytania",
+    },
    explorer: {
      title: "Przeglądaj",
    },
--- a/quartz/i18n/locales/pt-BR.ts
+++ b/quartz/i18n/locales/pt-BR.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Tema claro",
      darkMode: "Tema escuro",
    },
+    readerMode: {
+      title: "Modo leitor",
+    },
    explorer: {
      title: "Explorador",
    },
--- a/quartz/i18n/locales/ro-RO.ts
+++ b/quartz/i18n/locales/ro-RO.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Modul luminos",
      darkMode: "Modul întunecat",
    },
+    readerMode: {
+      title: "Modul de citire",
+    },
    explorer: {
      title: "Explorator",
    },
--- a/quartz/i18n/locales/ru-RU.ts
+++ b/quartz/i18n/locales/ru-RU.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Светлый режим",
      darkMode: "Тёмный режим",
    },
+    readerMode: {
+      title: "Режим чтения",
+    },
    explorer: {
      title: "Проводник",
    },
--- a/quartz/i18n/locales/th-TH.ts
+++ b/quartz/i18n/locales/th-TH.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "โหมดสว่าง",
      darkMode: "โหมดมืด",
    },
+    readerMode: {
+      title: "โหมดอ่าน",
+    },
    explorer: {
      title: "รายการหน้า",
    },
--- a/quartz/i18n/locales/tr-TR.ts
+++ b/quartz/i18n/locales/tr-TR.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Açık mod",
      darkMode: "Koyu mod",
    },
+    readerMode: {
+      title: "Okuma modu",
+    },
    explorer: {
      title: "Gezgin",
    },
--- a/quartz/i18n/locales/uk-UA.ts
+++ b/quartz/i18n/locales/uk-UA.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Світлий режим",
      darkMode: "Темний режим",
    },
+    readerMode: {
+      title: "Режим читання",
+    },
    explorer: {
      title: "Провідник",
    },
--- a/quartz/i18n/locales/vi-VN.ts
+++ b/quartz/i18n/locales/vi-VN.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "Sáng",
      darkMode: "Tối",
    },
+    readerMode: {
+      title: "Chế độ đọc",
+    },
    explorer: {
      title: "Trong bài này",
    },
--- a/quartz/i18n/locales/zh-CN.ts
+++ b/quartz/i18n/locales/zh-CN.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "亮色模式",
      darkMode: "暗色模式",
    },
+    readerMode: {
+      title: "阅读模式",
+    },
    explorer: {
      title: "探索",
    },
--- a/quartz/i18n/locales/zh-TW.ts
+++ b/quartz/i18n/locales/zh-TW.ts
@ -29,6 +29,9 @@ export default {
      lightMode: "亮色模式",
      darkMode: "暗色模式",
    },
+    readerMode: {
+      title: "閱讀模式",
+    },
    explorer: {
      title: "探索",
    },