refactor: set lang attribute for html tag (#6536)

* refactor: set `lang` attribute for html tag * refactor: use shared i18next instance * refactor: align html attr usage
logto-io · Sep 9, 2024 · 3b9714b · 3b9714b
1 parent b837efe
commit 3b9714b
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 4 deletions.
diff --git a/.changeset/quiet-penguins-join.md b/.changeset/quiet-penguins-join.md
@@ -0,0 +1,7 @@
+---
+"@logto/experience": patch
+"@logto/demo-app": patch
+"@logto/console": patch
+---
+
+set `lang` attribute for `<html>`
diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx
@@ -7,6 +7,7 @@ import {
   TenantScope,
 } from '@logto/schemas';
 import { conditionalArray } from '@silverhand/essentials';
+import i18next from 'i18next';
 import { useContext, useMemo } from 'react';
 import { Helmet } from 'react-helmet';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
@@ -114,7 +115,16 @@ function Providers() {
       }}
     >
       <AppThemeProvider>
-        <Helmet titleTemplate={`%s - ${mainTitle}`} defaultTitle={mainTitle} />
+        <Helmet
+          titleTemplate={`%s - ${mainTitle}`}
+          defaultTitle={mainTitle}
+          htmlAttributes={{
+            // We intentionally use the imported i18next instance instead of the hook, since the
+            // hook will cause a re-render following some bugs here. This still works for the
+            // initial render, so we're good for now. Consider refactoring this in the future.
+            lang: i18next.language,
+          }}
+        />
         <Toast />
         <AppConfirmModalProvider>
           <ErrorBoundary>

diff --git a/packages/demo-app/package.json b/packages/demo-app/package.json
@@ -31,6 +31,7 @@
     "@silverhand/ts-config-react": "6.0.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-helmet": "^6.1.6",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.56.0",
     "i18next": "^22.4.15",
@@ -40,6 +41,7 @@
     "prettier": "^3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
     "react-i18next": "^12.3.1",
     "stylelint": "^15.0.0",
     "typescript": "^5.5.3",

diff --git a/packages/demo-app/src/App.tsx b/packages/demo-app/src/App.tsx
@@ -1,6 +1,8 @@
 import { type IdTokenClaims, LogtoProvider, useLogto, type Prompt } from '@logto/react';
 import { demoAppApplicationId } from '@logto/schemas';
+import i18next from 'i18next';
 import { useCallback, useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
 import '@/scss/normalized.scss';
@@ -121,6 +123,14 @@ const Main = () => {
 
   return (
     <div className={styles.app}>
+      <Helmet
+        htmlAttributes={{
+          // We intentionally use the imported i18next instance instead of the hook, since the hook
+          // will cause a re-render following some bugs here. This still works for the initial
+          // render, so we're good for now. Consider refactoring this in the future.
+          lang: i18next.language,
+        }}
+      />
       {showDevPanel && <DevPanel />}
       <div className={[styles.card, styles.congrats].join(' ')}>
         {congratsIcon && <img src={congratsIcon} alt="Congrats" />}

diff --git a/packages/experience/src/App.tsx b/packages/experience/src/App.tsx
@@ -1,4 +1,6 @@
 import { MfaFactor, experience } from '@logto/schemas';
+import i18next from 'i18next';
+import { Helmet } from 'react-helmet';
 import { Route, Routes, BrowserRouter } from 'react-router-dom';
 
 import AppLayout from './Layout/AppLayout';
@@ -39,14 +41,21 @@ import Springboard from './pages/Springboard';
 import VerificationCode from './pages/VerificationCode';
 import { UserMfaFlow } from './types';
 import { handleSearchParametersData } from './utils/search-parameters';
-
 import './scss/normalized.scss';
 
 handleSearchParametersData();
 
 const App = () => {
   return (
     <BrowserRouter>
+      <Helmet
+        htmlAttributes={{
+          // We intentionally use the imported i18next instance instead of the hook, since the hook
+          // will cause a re-render following some bugs here. This still works for the initial
+          // render, so we're good for now. Consider refactoring this in the future.
+          lang: i18next.language,
+        }}
+      />
       <PageContextProvider>
         <SettingsProvider>
           <UserInteractionContextProvider>

diff --git a/packages/experience/src/Providers/AppBoundary/AppMeta.tsx b/packages/experience/src/Providers/AppBoundary/AppMeta.tsx
@@ -1,7 +1,6 @@
 import { Theme } from '@logto/schemas';
 import { conditionalString } from '@silverhand/essentials';
 import classNames from 'classnames';
-import i18next from 'i18next';
 import { useContext } from 'react';
 import { Helmet } from 'react-helmet';
 
@@ -38,7 +37,6 @@ const AppMeta = () => {
 
   return (
     <Helmet>
-      <html lang={i18next.language} data-theme={theme} />
       <link rel="shortcut icon" href={favicon ?? defaultFavicon} />
       <link rel="apple-touch-icon" href={favicon ?? defaultAppleTouchLogo} sizes="180x180" />
       {experienceSettings?.customCss && <style>{experienceSettings.customCss}</style>}

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml