feat: Adding support for i18n (closes #462) (#738)

Mara-Li

2024-02-04 dbbc672c67aa5ac0a915d22af5cf44c4e7011aae

 quartz/components/RecentNotes.tsx

@@ -3,7 +3,10 @@
import { QuartzPluginData } from "../plugins/vfile"
import { byDateAndAlphabetical } from "./PageList"
import style from "./styles/recentNotes.scss"
import { Date } from "./Date"
import { Date, getDate } from "./Date"
import { GlobalConfiguration } from "../cfg"
import { i18n } from "../i18n/i18next"
import { classNames } from "../util/lang"

interface Options {
  title: string
@@ -13,22 +16,21 @@
  sort: (f1: QuartzPluginData, f2: QuartzPluginData) => number
}

const defaultOptions: Options = {
const defaultOptions = (cfg: GlobalConfiguration): Options => ({
  title: "Recent Notes",
  limit: 3,
  linkToMore: false,
  filter: () => true,
  sort: byDateAndAlphabetical,
}
  sort: byDateAndAlphabetical(cfg),
})

export default ((userOpts?: Partial<Options>) => {
  const opts = { ...defaultOptions, ...userOpts }
  function RecentNotes(props: QuartzComponentProps) {
    const { allFiles, fileData, displayClass } = props
  function RecentNotes({ allFiles, fileData, displayClass, cfg }: QuartzComponentProps) {
    const opts = { ...defaultOptions(cfg), ...userOpts }
    const pages = allFiles.filter(opts.filter).sort(opts.sort)
    const remaining = Math.max(0, pages.length - opts.limit)
    return (
      <div class={`recent-notes ${displayClass}`}>
      <div class={classNames(displayClass, "recent-notes")}>
        <h3>{opts.title}</h3>
        <ul class="recent-ul">
          {pages.slice(0, opts.limit).map((page) => {
@@ -47,7 +49,7 @@
                  </div>
                  {page.dates && (
                    <p class="meta">
                      <Date date={page.dates.modified} />
                      <Date date={getDate(cfg, page)!} locale={cfg.locale} />
                    </p>
                  )}
                  <ul class="tags">
@@ -69,7 +71,13 @@
        </ul>
        {opts.linkToMore && remaining > 0 && (
          <p>
            <a href={resolveRelative(fileData.slug!, opts.linkToMore)}>See {remaining} more →</a>
            <a href={resolveRelative(fileData.slug!, opts.linkToMore)}>
              {" "}
              {i18n(cfg.locale, "recentNotes.seeRemainingMore", {
                remaining: remaining.toString(),
              })}{" "}
              →
            </a>
          </p>
        )}
      </div>