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

pull/281/head
Eduardo San Martin Morote 5 years ago committed by GitHub
parent fa1616ac4e
commit f505db945a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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. 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 ```js
module.exports = { module.exports = {
lang: 'en-US' lang: 'en-US'

@ -1,5 +1,12 @@
import 'vite/dynamic-import-polyfill' 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 { inBrowser, pathToFile } from './utils'
import { Router, RouterSymbol, createRouter } from './router' import { Router, RouterSymbol, createRouter } from './router'
import { mixinGlobalComputed, mixinGlobalComponents } from './mixin' import { mixinGlobalComputed, mixinGlobalComponents } from './mixin'
@ -15,6 +22,19 @@ const NotFound = Theme.NotFound || (() => '404 Not Found')
const VitePressApp = { const VitePressApp = {
name: 'VitePressApp', name: 'VitePressApp',
setup() { 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) { if (import.meta.env.PROD) {
// in prod mode, enable intersectionObserver based pre-fetch // in prod mode, enable intersectionObserver based pre-fetch
usePrefetch() usePrefetch()

@ -1,6 +1,7 @@
import { reactive, inject, markRaw, nextTick, readonly } from 'vue' import { reactive, inject, markRaw, nextTick, readonly } from 'vue'
import type { Component, InjectionKey } from 'vue' import type { Component, InjectionKey } from 'vue'
import { PageData } from '../../../types/shared' import { PageData } from '../../../types/shared'
import { inBrowser } from './utils'
export interface Route { export interface Route {
path: string path: string
@ -38,7 +39,6 @@ export function createRouter(
fallbackComponent?: Component fallbackComponent?: Component
): Router { ): Router {
const route = reactive(getDefaultRoute()) const route = reactive(getDefaultRoute())
const inBrowser = typeof window !== 'undefined'
function go(href: string = inBrowser ? location.href : '/') { function go(href: string = inBrowser ? location.href : '/') {
// ensure correct deep link so page refresh lands on correct files. // ensure correct deep link so page refresh lands on correct files.

@ -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. * Join two paths by resolving the slash collision.

@ -1,6 +1,6 @@
import { SiteData } from '/@types/shared' import { SiteData } from '/@types/shared'
const inBrowser = typeof window !== 'undefined' export const inBrowser = typeof window !== 'undefined'
function findMatchRoot(route: string, roots: string[]) { function findMatchRoot(route: string, roots: string[]) {
// first match to the routes with the most deep level. // first match to the routes with the most deep level.

Loading…
Cancel
Save