fix: #133 update LOCALE config to cover overall locales

satnaing · satnaing · commit cd02b047d2b5 · 2023-12-20T10:50:45.000+06:30
Update LOCALE inside config.ts to include html lang value and datetime locale values. Updated respective files and blog post. Closes: #133
diff --git 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
@@ -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
@@ -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 `<html lang="en">`. 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
@@ -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(
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang=`${LOCALE.lang ?? "en"}`>
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
