From 0e9f709c5dbd9a75aaf33e7994e88216fd56d8be Mon Sep 17 00:00:00 2001
From: Andrea Mignone <14820600+floatingpurr@users.noreply.github.com>
Date: Mon, 17 Apr 2023 19:26:58 +0200
Subject: [PATCH] feat: add locale configuration for Datetime component (#59)

---
 src/components/Datetime.tsx                           |  6 ++++--
 src/config.ts                                         |  2 ++
 src/content/blog/how-to-configure-astropaper-theme.md | 11 +++++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/Datetime.tsx b/src/components/Datetime.tsx
index afe3ab3..e4b0769 100644
--- a/src/components/Datetime.tsx
+++ b/src/components/Datetime.tsx
@@ -1,3 +1,5 @@
+import { LOCALE } from "@config";
+
 export interface Props {
   datetime: string | Date;
   size?: "sm" | "lg";
@@ -28,13 +30,13 @@ export default function Datetime({ datetime, size = "sm", className }: Props) {
 const FormattedDatetime = ({ datetime }: { datetime: string | Date }) => {
   const myDatetime = new Date(datetime);
 
-  const date = myDatetime.toLocaleDateString([], {
+  const date = myDatetime.toLocaleDateString(LOCALE, {
     year: "numeric",
     month: "long",
     day: "numeric",
   });
 
-  const time = myDatetime.toLocaleTimeString([], {
+  const time = myDatetime.toLocaleTimeString(LOCALE, {
     hour: "2-digit",
     minute: "2-digit",
   });
diff --git a/src/config.ts b/src/config.ts
index 0b70e96..b7933f6 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -10,6 +10,8 @@ export const SITE: Site = {
   postPerPage: 3,
 };
 
+export const LOCALE = ["en-EN"]; // set to [] to use the environment default
+
 export const LOGO_IMAGE = {
   enable: false,
   svg: true,
diff --git a/src/content/blog/how-to-configure-astropaper-theme.md b/src/content/blog/how-to-configure-astropaper-theme.md
index 2ce338f..92650bc 100644
--- a/src/content/blog/how-to-configure-astropaper-theme.md
+++ b/src/content/blog/how-to-configure-astropaper-theme.md
@@ -47,6 +47,17 @@ Here are SITE configuration options
 | `lightAndDarkMode` | Enable or disable `light & dark mode` for the website. If disabled, primary color scheme will be used. This option is enabled by default.                    |
 | `postPerPage`      | You can specify how many posts will be displayed in each posts page. (eg: if you set SITE.postPerPage to 3, each page will only show 3 posts per page)       |
 
+## Configuring locale
+
+You can configure the default locale used for the build (e.g., date format in the post page), and for the rendering in browsers (e.g., date format in the search page)
+
+```js
+// file: src/config.ts
+export const LOCALE = ["en-EN"]; // set to [] to use the environment default
+```
+
+You can even specify an array of locales for fallback languages. Leave it empty `[]` to use the environment default at _build-_ and _run-time_.
+
 ## Configuring logo or title
 
 You can specify site's title or logo image in `src/config.ts` file.