fix(locales): use correct lang (#276)

posva · web-flow · commit f505db945af3 · 2021-04-01T23:46:45.000+09:00
diff --git 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'
diff --git 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,19 @@ 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) => {
+          document.documentElement.lang = lang
+        },
+        { immediate: true }
+      )
+    })
+
     if (import.meta.env.PROD) {
       // in prod mode, enable intersectionObserver based pre-fetch
       usePrefetch()
diff --git a/src/client/app/router.ts b/src/client/app/router.ts
@@ -1,6 +1,7 @@
 import { reactive, inject, markRaw, nextTick, readonly } from 'vue'
 import type { Component, InjectionKey } from 'vue'
 import { PageData } from '../../../types/shared'
+import { inBrowser } from './utils'
 
 export interface Route {
   path: string
@@ -38,7 +39,6 @@ export function createRouter(
   fallbackComponent?: Component
 ): Router {
   const route = reactive(getDefaultRoute())
-  const inBrowser = typeof window !== 'undefined'
 
   function go(href: string = inBrowser ? location.href : '/') {
     // ensure correct deep link so page refresh lands on correct files.
diff --git 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.
diff --git 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.
