fix: #133 update LOCALE config to cover overall locales

Update LOCALE inside config.ts to include html lang value and datetime locale values. Updated respective files and blog post.

Closes: #133
This commit is contained in:
satnaing
2023-12-20 10:50:45 +06:30
parent c526157118
commit cd02b047d2
4 changed files with 14 additions and 7 deletions
+2 -2
View File
@@ -30,13 +30,13 @@ export default function Datetime({ datetime, size = "sm", className }: Props) {
const FormattedDatetime = ({ datetime }: { datetime: string | Date }) => { const FormattedDatetime = ({ datetime }: { datetime: string | Date }) => {
const myDatetime = new Date(datetime); const myDatetime = new Date(datetime);
const date = myDatetime.toLocaleDateString(LOCALE, { const date = myDatetime.toLocaleDateString(LOCALE.langTag, {
year: "numeric", year: "numeric",
month: "long", month: "long",
day: "numeric", day: "numeric",
}); });
const time = myDatetime.toLocaleTimeString(LOCALE, { const time = myDatetime.toLocaleTimeString(LOCALE.langTag, {
hour: "2-digit", hour: "2-digit",
minute: "2-digit", minute: "2-digit",
}); });
+4 -1
View File
@@ -10,7 +10,10 @@ export const SITE: Site = {
postPerPage: 3, 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 = { export const LOGO_IMAGE = {
enable: false, enable: false,
@@ -52,10 +52,14 @@ You can configure the default locale used for the build (e.g., date format in th
```js ```js
// file: src/config.ts // 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 ## Configuring logo or title
+2 -2
View File
@@ -1,5 +1,5 @@
--- ---
import { SITE } from "@config"; import { LOCALE, SITE } from "@config";
import "@styles/base.css"; import "@styles/base.css";
import { ViewTransitions } from "astro:transitions"; import { ViewTransitions } from "astro:transitions";
@@ -28,7 +28,7 @@ const socialImageURL = new URL(
--- ---
<!doctype html> <!doctype html>
<html lang="en"> <html lang=`${LOCALE.lang ?? "en"}`>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />