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

* fix: alt error mix with height/width

More granular detection of alt and resize in image

* fix: format

* feat: init i18n

* feat: add translation

* style: prettier for test

* fix: build-up the locale to fusion with dateLocale

* style: run prettier

* remove cursed file

* refactor: remove i18n library and use locale way instead

* format with prettier

* forgot to remove test

* prevent merging error

* format

* format

* fix: allow string for locale
- Check during translation if valid / existing locale
- Allow to use "en" and "en-US" for example
- Add fallback directly in the function
- Add default key in the function
- Add docstring to cfg.ts

* forgot item translation

* remove unused locale variable

* forgot to remove fr-FR testing

* format

quartz/components/pages/404.tsx

@@ -1,10 +1,11 @@
-import { QuartzComponentConstructor } from "../types"
+import { i18n } from "../../i18n/i18next"
+import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
 
-function NotFound() {
+function NotFound({ cfg }: QuartzComponentProps) {
   return (
     <article class="popover-hint">
       <h1>404</h1>
-      <p>Either this page is private or doesn't exist.</p>
+      <p>{i18n(cfg.locale, "404")}</p>
     </article>
   )
 }

quartz/components/pages/FolderContent.tsx

@@ -7,6 +7,7 @@ import { _stripSlashes, simplifySlug } from "../../util/path"
 import { Root } from "hast"
 import { pluralize } from "../../util/lang"
 import { htmlToJsx } from "../../util/jsx"
+import { i18n } from "../../i18n/i18next"
 
 interface FolderContentOptions {
   /**
@@ -23,7 +24,7 @@ export default ((opts?: Partial<FolderContentOptions>) => {
   const options: FolderContentOptions = { ...defaultOptions, ...opts }
 
   function FolderContent(props: QuartzComponentProps) {
-    const { tree, fileData, allFiles } = props
+    const { tree, fileData, allFiles, cfg } = props
     const folderSlug = _stripSlashes(simplifySlug(fileData.slug!))
     const allPagesInFolder = allFiles.filter((file) => {
       const fileSlug = _stripSlashes(simplifySlug(file.slug!))
@@ -52,7 +53,10 @@ export default ((opts?: Partial<FolderContentOptions>) => {
         </article>
         <div class="page-listing">
           {options.showFolderCount && (
-            <p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
+            <p>
+              {pluralize(allPagesInFolder.length, i18n(cfg.locale, "common.item"))}{" "}
+              {i18n(cfg.locale, "folderContent.underThisFolder")}.
+            </p>
           )}
           <div>
             <PageList {...listProps} />

quartz/components/pages/TagContent.tsx

@@ -6,10 +6,11 @@ import { QuartzPluginData } from "../../plugins/vfile"
 import { Root } from "hast"
 import { pluralize } from "../../util/lang"
 import { htmlToJsx } from "../../util/jsx"
+import { i18n } from "../../i18n/i18next"
 
 const numPages = 10
 function TagContent(props: QuartzComponentProps) {
-  const { tree, fileData, allFiles } = props
+  const { tree, fileData, allFiles, cfg } = props
   const slug = fileData.slug
 
   if (!(slug?.startsWith("tags/") || slug === "tags")) {
@@ -43,7 +44,10 @@ function TagContent(props: QuartzComponentProps) {
         <article>
           <p>{content}</p>
         </article>
-        <p>Found {tags.length} total tags.</p>
+        <p>
+          {i18n(cfg.locale, "tagContent.found")} {tags.length}{" "}
+          {i18n(cfg.locale, "tagContent.totalTags")}.
+        </p>
         <div>
           {tags.map((tag) => {
             const pages = tagItemMap.get(tag)!
@@ -64,8 +68,10 @@ function TagContent(props: QuartzComponentProps) {
                 {content && <p>{content}</p>}
                 <div class="page-listing">
                   <p>
-                    {pluralize(pages.length, "item")} with this tag.{" "}
-                    {pages.length > numPages && `Showing first ${numPages}.`}
+                    {pluralize(pages.length, i18n(cfg.locale, "common.item"))}{" "}
+                    {i18n(cfg.locale, "tagContent.withThisTag")}.{" "}
+                    {pages.length > numPages &&
+                      `${i18n(cfg.locale, "tagContent.showingFirst")} ${numPages}.`}
                   </p>
                   <PageList limit={numPages} {...listProps} />
                 </div>
@@ -86,7 +92,10 @@ function TagContent(props: QuartzComponentProps) {
       <div class={classes}>
         <article>{content}</article>
         <div class="page-listing">
-          <p>{pluralize(pages.length, "item")} with this tag.</p>
+          <p>
+            {pluralize(pages.length, i18n(cfg.locale, "common.item"))}{" "}
+            {i18n(cfg.locale, "tagContent.withThisTag")}.
+          </p>
           <div>
             <PageList {...listProps} />
           </div>