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

5 years ago · f505db945a
parent fa1616ac4e
commit f505db945a
5 changed files with 26 additions and 6 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,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()
--- 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.
--- 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.