fix(client): add computed dir and lang to html root

brc-dd · brc-dd · commit c2b4c66e79fd · 2024-01-03T14:48:14.000+05:30
instead of accessing raw siteData.lang/dir fixes #3353 (comment)
diff --git a/src/client/app/data.ts b/src/client/app/data.ts
@@ -44,8 +44,8 @@ export interface VitePressData<T = any> {
   title: Ref<string>
   description: Ref<string>
   lang: Ref<string>
-  isDark: Ref<boolean>
   dir: Ref<string>
+  isDark: Ref<boolean>
   localeIndex: Ref<string>
 }
 
diff --git a/src/client/app/index.ts b/src/client/app/index.ts
@@ -38,13 +38,13 @@ const Theme = resolveThemeExtends(RawTheme)
 const VitePressApp = defineComponent({
   name: 'VitePressApp',
   setup() {
-    const { site } = useData()
+    const { site, lang, dir } = useData()
 
     // change the language on the HTML element based on the current lang
     onMounted(() => {
       watchEffect(() => {
-        document.documentElement.lang = site.value.lang
-        document.documentElement.dir = site.value.dir
+        document.documentElement.lang = lang.value
+        document.documentElement.dir = dir.value
       })
     })
 
diff --git a/src/node/build/render.ts b/src/node/build/render.ts
@@ -152,8 +152,10 @@ export async function renderPage(
     }
   }
 
+  const dir = pageData.frontmatter.dir || siteData.dir || 'ltr'
+
   const html = `<!DOCTYPE html>
-<html lang="${siteData.lang}" dir="${siteData.dir}">
+<html lang="${siteData.lang}" dir="${dir}">
   <head>
     <meta charset="utf-8">
     ${

Original file line number	Diff line number	Diff line change
`@@ -44,8 +44,8 @@ export interface VitePressData<T = any> {`
`44`	`44`	`title: Ref<string>`
`45`	`45`	`description: Ref<string>`
`46`	`46`	`lang: Ref<string>`
`47`		`- isDark: Ref<boolean>`
`48`	`47`	`dir: Ref<string>`
	`48`	`+ isDark: Ref<boolean>`
`49`	`49`	`localeIndex: Ref<string>`
`50`	`50`	`}`
`51`	`51`
Original file line number	Diff line number	Diff line change
`@@ -152,8 +152,10 @@ export async function renderPage(`
`152`	`152`	`}`
`153`	`153`	`}`
`154`	`154`
	`155`	`+ const dir = pageData.frontmatter.dir \|\| siteData.dir \|\| 'ltr'`
	`156`	`+`
`155`	`157`	const html = `<!DOCTYPE html>
`156`		`-<html lang="${siteData.lang}" dir="${siteData.dir}">`
	`158`	`+<html lang="${siteData.lang}" dir="${dir}">`
`157`	`159`	`<head>`
`158`	`160`	`<meta charset="utf-8">`
`159`	`161`	`${`