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

@@ -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 {

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

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 {
+export function formatDate(d: Date, locale = "en-US"): string {
-  return d.toLocaleDateString("en-US", {
+  return d.toLocaleDateString(locale, {
     year: "numeric",
     month: "short",
     day: "2-digit",
   })
 }
 
-export function Date({ date }: Props) {
+export function Date({ date, locale }: Props) {
-  return <>{formatDate(date)}</>
+  return <>{formatDate(date, locale)}</>
 }

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">

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">

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>`,