feat: allow to config a translation for date (#739)

Mara-Li

2024-01-29 603c181ad27109327617a78e5f672ebf68edc267

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 @@
   */
  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 @@
      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 @@

interface Props {
  date: Date
  locale?: string
}

export type ValidDateType = keyof Required<QuartzPluginData>["dates"]
@@ -16,14 +17,14 @@
  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)}</>
}

 quartz/components/PageList.tsx

@@ -46,7 +46,7 @@
            <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 @@
                  </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 @@
                  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>`,