fix(locales): use correct lang

5 years ago · 93a2f89709
parent fa1616ac4e
commit 93a2f89709
4 changed files with 26 additions and 5 deletions
--- a/docs/config/basics.md
+++ b/docs/config/basics.md
@ -22,8 +22,6 @@ module.exports = {

 The `lang` attribute for the site. This will render as a `<html lang="en-US">` tag in the page HTML.

-Note that the `lang` attribute will only be added when building the site via `vitepress build`. You will not see this rendered during `vitepress dev`.
-
 ```js
 module.exports = {
  lang: 'en-US'
--- a/src/client/app/index.ts
+++ b/src/client/app/index.ts
@ -1,5 +1,12 @@
 import 'vite/dynamic-import-polyfill'
-import { App, createApp as createClientApp, createSSRApp, h } from 'vue'
+import {
+  App,
+  createApp as createClientApp,
+  createSSRApp,
+  h,
+  onMounted,
+  watch
+} from 'vue'
 import { inBrowser, pathToFile } from './utils'
 import { Router, RouterSymbol, createRouter } from './router'
 import { mixinGlobalComputed, mixinGlobalComponents } from './mixin'
@ -15,6 +22,20 @@ const NotFound = Theme.NotFound || (() => '404 Not Found')
 const VitePressApp = {
  name: 'VitePressApp',
  setup() {
+    const siteData = useSiteDataByRoute()
+
+    // change the language on the HTML element based on the current lang
+    onMounted(() => {
+      watch(
+        () => siteData.value.lang,
+        (lang: string) => {
+          console.log('lang', lang)
+          document.documentElement.lang = lang
+        },
+        { immediate: true }
+      )
+    })
+
    if (import.meta.env.PROD) {
      // in prod mode, enable intersectionObserver based pre-fetch
      usePrefetch()
--- a/src/client/app/utils.ts
+++ b/src/client/app/utils.ts
@ -1,4 +1,6 @@
-export const inBrowser = typeof window !== 'undefined'
+import { inBrowser } from '/@shared/config'
+
+export { inBrowser }

 /**
 * Join two paths by resolving the slash collision.
--- a/src/shared/config.ts
+++ b/src/shared/config.ts
@ -1,6 +1,6 @@
 import { SiteData } from '/@types/shared'

-const inBrowser = typeof window !== 'undefined'
+export const inBrowser = typeof window !== 'undefined'

 function findMatchRoot(route: string, roots: string[]) {
  // first match to the routes with the most deep level.