diff --git a/src/client/app/data.ts b/src/client/app/data.ts index 3d9508090c68..1bd90b8ecddb 100644 --- a/src/client/app/data.ts +++ b/src/client/app/data.ts @@ -19,6 +19,7 @@ export interface VitePressData { title: Ref description: Ref lang: Ref + dir: Ref localeIndex: Ref } @@ -48,6 +49,7 @@ export function initData(route: Route): VitePressData { page: computed(() => route.data), frontmatter: computed(() => route.data.frontmatter), lang: computed(() => site.value.lang), + dir: computed(() => site.value.dir), localeIndex: computed(() => site.value.localeIndex || 'root'), title: computed(() => { return createTitle(site.value, route.data) diff --git a/src/client/app/index.ts b/src/client/app/index.ts index 84bd1c23da8b..acf92c0b32b5 100644 --- a/src/client/app/index.ts +++ b/src/client/app/index.ts @@ -5,7 +5,7 @@ import { defineComponent, h, onMounted, - watch + watchEffect } from 'vue' import Theme from '@theme/index' import { inBrowser, pathToFile } from './utils.js' @@ -27,13 +27,10 @@ const VitePressApp = defineComponent({ // change the language on the HTML element based on the current lang onMounted(() => { - watch( - () => site.value.lang, - (lang: string) => { - document.documentElement.lang = lang - }, - { immediate: true } - ) + watchEffect(() => { + document.documentElement.lang = site.value.lang + document.documentElement.dir = site.value.dir + }) }) if (import.meta.env.PROD) { diff --git a/src/node/build/render.ts b/src/node/build/render.ts index f706764821c8..a701003b94c8 100644 --- a/src/node/build/render.ts +++ b/src/node/build/render.ts @@ -144,7 +144,7 @@ export async function renderPage( const html = ` - + diff --git a/src/node/config.ts b/src/node/config.ts index 3920a0cd8fe1..8941434a2f69 100644 --- a/src/node/config.ts +++ b/src/node/config.ts @@ -316,6 +316,7 @@ export async function resolveSiteData( return { lang: userConfig.lang || 'en-US', + dir: userConfig.dir || 'ltr', title: userConfig.title || 'VitePress', titleTemplate: userConfig.titleTemplate, description: userConfig.description || 'A VitePress site', diff --git a/src/shared/shared.ts b/src/shared/shared.ts index 51101745aa6d..0ac515dc7dc3 100644 --- a/src/shared/shared.ts +++ b/src/shared/shared.ts @@ -83,6 +83,7 @@ export function resolveSiteDataByRoute( return Object.assign({}, siteData, { localeIndex, lang: siteData.locales[localeIndex]?.lang ?? siteData.lang, + dir: siteData.locales[localeIndex]?.dir ?? siteData.dir, title: siteData.locales[localeIndex]?.title ?? siteData.title, titleTemplate: siteData.locales[localeIndex]?.titleTemplate ?? siteData.titleTemplate, diff --git a/types/shared.d.ts b/types/shared.d.ts index ee1ace4c1f2c..24a41a036261 100644 --- a/types/shared.d.ts +++ b/types/shared.d.ts @@ -51,6 +51,7 @@ export interface SiteData { base: string cleanUrls?: CleanUrlsMode lang: string + dir: string title: string titleTemplate?: string | boolean description: string @@ -73,6 +74,7 @@ export interface PageDataPayload { export interface LocaleSpecificConfig { lang?: string + dir?: string title?: string titleTemplate?: string | boolean description?: string