Adjust html lang attribute, standard i18n capitalization

2025-05-24 16:18:19 -05:00 · 2025-05-24 16:18:19 -05:00 · bc7fc198c0
commit bc7fc198c0
parent ebdcbb8923
4 changed files with 14 additions and 9 deletions
--- a/README.md
+++ b/README.md
@ -264,12 +264,12 @@ Vercel Postgres can be switched to another Postgres-compatible, pooling provider
 Partial internationalization (for non-admin, user-facing text) provided for a handful of languages. Configure locale by setting environment variable `NEXT_PUBLIC_LOCALE`.

 ### Supported Languages
- `US_EN`
- `ES_ES` (coming soon)
- `PT_BR`
- `PT_PT`
- `ID_ID`
- `ZH_CN`
+- `us-en`
+- `es-es` (coming soon)
+- `pt-br`
+- `pt-pt`
+- `id-id`
+- `zh-cn`

 To add support for a new language, open a PR following instructions in [/src/i18n/index.ts](https://github.com/sambecker/exif-photo-blog/blob/main/src/i18n/index.ts), using [`US_EN`](https://github.com/sambecker/exif-photo-blog/blob/main/src/i18n/locales/us-en.ts) as reference.

--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -8,6 +8,7 @@ import {
  META_DESCRIPTION,
  NAV_TITLE_OR_DOMAIN,
  META_TITLE,
+  HTML_LANG,
 } from '@/app/config';
 import AppStateProvider from '@/state/AppStateProvider';
 import ToasterWithThemes from '@/toast/ToasterWithThemes';
@ -72,7 +73,7 @@ export default function RootLayout({
 }) {
  return (
    <html
-      lang="en"
+      lang={HTML_LANG}
      // Suppress hydration errors due to next-themes behavior
      suppressHydrationWarning
    >
--- a/src/admin/AdminAppConfigurationClient.tsx
+++ b/src/admin/AdminAppConfigurationClient.tsx
@ -294,7 +294,7 @@ export default function AdminAppConfigurationClient({
        icon={<BiPencil size={16} />}
      >
        <ChecklistRow
-          title={`Configure language: ${locale.toLocaleUpperCase()}`}
+          title={`Configure language: ${locale}`}
          status={hasLocale}
          optional
        >
--- a/src/app/config.ts
+++ b/src/app/config.ts
@ -101,7 +101,11 @@ const SITE_DOMAIN_SHORT = shortenUrl(SITE_DOMAIN);

 // SITE META

-export const APP_LOCALE = process.env.NEXT_PUBLIC_LOCALE || 'US-EN';
+export const APP_LOCALE = (process.env.NEXT_PUBLIC_LOCALE || 'us-en')
+  // Accepts both `us-en` and `US_EN`
+  .toLocaleLowerCase()
+  .replace('_', '-');
+export const HTML_LANG = (APP_LOCALE.split('-')[1] || 'en');

 export const NAV_TITLE =
  process.env.NEXT_PUBLIC_NAV_TITLE;