From 603c181ad27109327617a78e5f672ebf68edc267 Mon Sep 17 00:00:00 2001
From: Mara-Li <lili.simonetti@outlook.fr>
Date: Mon, 29 Jan 2024 07:13:59 +0100
Subject: [PATCH] feat: allow to config a translation for date (#739)

* fix: alt error mix with height/width

More granular detection of alt and resize in image

* fix: format

* feat: allow to translate the date displayed

* style: format

* fix: rename to fusion dateLocale with locale (i18n support)

* Update quartz/components/PageList.tsx

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* remove default key as it was already set

* add docstring for locale

---------

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
---
 quartz/cfg.ts                      | 6 ++++++
 quartz/components/ContentMeta.tsx  | 2 +-
 quartz/components/Date.tsx         | 9 +++++----
 quartz/components/PageList.tsx     | 2 +-
 quartz/components/RecentNotes.tsx  | 2 +-
 quartz/plugins/transformers/ofm.ts | 2 +-
 6 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/quartz/cfg.ts b/quartz/cfg.ts
index 7f0f206e1..153bbe21d 100644
--- a/quartz/cfg.ts
+++ b/quartz/cfg.ts
@@ -35,6 +35,12 @@ 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)
+   */
+  locale?: string
 }
 
 export interface QuartzConfig {
diff --git a/quartz/components/ContentMeta.tsx b/quartz/components/ContentMeta.tsx
index 254c5d405..5337feed8 100644
--- a/quartz/components/ContentMeta.tsx
+++ b/quartz/components/ContentMeta.tsx
@@ -24,7 +24,7 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
       const segments: string[] = []
 
       if (fileData.dates) {
-        segments.push(formatDate(getDate(cfg, fileData)!))
+        segments.push(formatDate(getDate(cfg, fileData)!, cfg.locale))
       }
 
       // Display reading time if enabled
diff --git a/quartz/components/Date.tsx b/quartz/components/Date.tsx
index 8713cfd3c..6feac178c 100644
--- a/quartz/components/Date.tsx
+++ b/quartz/components/Date.tsx
@@ -3,6 +3,7 @@ import { QuartzPluginData } from "../plugins/vfile"
 
 interface Props {
   date: Date
+  locale?: string
 }
 
 export type ValidDateType = keyof Required<QuartzPluginData>["dates"]
@@ -16,14 +17,14 @@ export function getDate(cfg: GlobalConfiguration, data: QuartzPluginData): Date
   return data.dates?.[cfg.defaultDateType]
 }
 
-export function formatDate(d: Date): string {
-  return d.toLocaleDateString("en-US", {
+export function formatDate(d: Date, locale = "en-US"): string {
+  return d.toLocaleDateString(locale, {
     year: "numeric",
     month: "short",
     day: "2-digit",
   })
 }
 
-export function Date({ date }: Props) {
-  return <>{formatDate(date)}</>
+export function Date({ date, locale }: Props) {
+  return <>{formatDate(date, locale)}</>
 }
diff --git a/quartz/components/PageList.tsx b/quartz/components/PageList.tsx
index eb34f02f7..644e354c4 100644
--- a/quartz/components/PageList.tsx
+++ b/quartz/components/PageList.tsx
@@ -46,7 +46,7 @@ export function PageList({ cfg, fileData, allFiles, limit }: Props) {
             <div class="section">
               {page.dates && (
                 <p class="meta">
-                  <Date date={getDate(cfg, page)!} />
+                  <Date date={getDate(cfg, page)!} locale={cfg.locale} />
                 </p>
               )}
               <div class="desc">
diff --git a/quartz/components/RecentNotes.tsx b/quartz/components/RecentNotes.tsx
index 63f040d81..9a53ad7eb 100644
--- a/quartz/components/RecentNotes.tsx
+++ b/quartz/components/RecentNotes.tsx
@@ -47,7 +47,7 @@ export default ((userOpts?: Partial<Options>) => {
                   </div>
                   {page.dates && (
                     <p class="meta">
-                      <Date date={getDate(cfg, page)!} />
+                      <Date date={getDate(cfg, page)!} locale={cfg.locale} />
                     </p>
                   )}
                   <ul class="tags">
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 7c9b33bbd..1eeb78322 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -441,7 +441,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                   value: `<div
                   class="callout-title"
                 >
-                  <div class="callout-icon">${callouts[calloutType] ?? callouts.note}</div> 
+                  <div class="callout-icon">${callouts[calloutType] ?? callouts.note}</div>
                   <div class="callout-title-inner">${title}</div>
                   ${collapse ? toggleIcon : ""}
                 </div>`,