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

instead of accessing raw siteData.lang/dir fixes https://github.com/vuejs/vitepress/pull/3353#issuecomment-1874753809
12 months ago · c2b4c66e79
parent a6cd891d95
commit c2b4c66e79
3 changed files with 7 additions and 5 deletions
--- 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>
 }

--- 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
      })
    })

--- 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">
    ${