diff --git a/src/components/Datetime.tsx b/src/components/Datetime.tsx
index e4b076989..ea96df7ed 100644
--- a/src/components/Datetime.tsx
+++ b/src/components/Datetime.tsx
@@ -30,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(LOCALE, {
+ const date = myDatetime.toLocaleDateString(LOCALE.langTag, {
year: "numeric",
month: "long",
day: "numeric",
});
- const time = myDatetime.toLocaleTimeString(LOCALE, {
+ const time = myDatetime.toLocaleTimeString(LOCALE.langTag, {
hour: "2-digit",
minute: "2-digit",
});
diff --git a/src/config.ts b/src/config.ts
index b4909b1bf..0f5f526a5 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -10,7 +10,10 @@ export const SITE: Site = {
postPerPage: 3,
};
-export const LOCALE = ["en-EN"]; // set to [] to use the environment default
+export const LOCALE = {
+ lang: "en", // html lang code. Set this empty and default will be "en"
+ langTag: ["en-EN"], // BCP 47 Language Tags. Set this empty [] to use the environment default
+} as const;
export const LOGO_IMAGE = {
enable: false,
diff --git a/src/content/blog/how-to-configure-astropaper-theme.md b/src/content/blog/how-to-configure-astropaper-theme.md
index 79ce4cb8a..42ae24bc5 100644
--- a/src/content/blog/how-to-configure-astropaper-theme.md
+++ b/src/content/blog/how-to-configure-astropaper-theme.md
@@ -52,10 +52,14 @@ You can configure the default locale used for the build (e.g., date format in th
```js
// file: src/config.ts
-export const LOCALE = ["en-EN"]; // set to [] to use the environment default
+export const LOCALE = {
+ lang: "en", // html lang code. Set this empty and default will be "en"
+ langTag: ["en-EN"], // BCP 47 Language Tags. Set this empty [] to use the environment default
+} as const;
```
-You can even specify an array of locales for fallback languages. Leave it empty `[]` to use the environment default at _build-_ and _run-time_.
+`LOCALE.lang` will be used as HTML ISO Language code in ``. If you don't specify this, default fallback will be set to `en`.
+`LOCALE.langTag` is used as [datetime locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#locales). For this, you can specify an array of locales for fallback languages. Leave `LOCALE.langTag` empty `[]` to use the environment default at _build-_ and _run-time_.
## Configuring logo or title
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 5fa9c271c..a99ccc3bb 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,5 +1,5 @@
---
-import { SITE } from "@config";
+import { LOCALE, SITE } from "@config";
import "@styles/base.css";
import { ViewTransitions } from "astro:transitions";
@@ -28,7 +28,7 @@ const socialImageURL = new URL(
---
-
+