From f505db945af3ca4e4ce0a06b5aa2a4d32d47bac7 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Thu, 1 Apr 2021 16:46:45 +0200 Subject: [PATCH] fix(locales): use correct lang (#276) --- docs/config/basics.md | 2 -- src/client/app/index.ts | 22 +++++++++++++++++++++- src/client/app/router.ts | 2 +- src/client/app/utils.ts | 4 +++- src/shared/config.ts | 2 +- 5 files changed, 26 insertions(+), 6 deletions(-) diff --git a/docs/config/basics.md b/docs/config/basics.md index d0d6719d..9e95b703 100644 --- 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 `` 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 index 5eb688e3..8324a9ba 100644 --- 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 index 7e445d29..7be4d609 100644 --- 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 index 26383bf5..dea88b64 100644 --- 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 index 378829e1..281ce539 100644 --- 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.