feat: allow specifying dir attribute for html

vuejs · Sep 14, 2022 · fd0beb5 · fd0beb5
1 parent b2a89ca
commit fd0beb5
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 9 deletions.
diff --git a/src/client/app/data.ts b/src/client/app/data.ts
@@ -19,6 +19,7 @@ export interface VitePressData<T = any> {
   title: Ref<string>
   description: Ref<string>
   lang: Ref<string>
+  dir: Ref<string>
   localeIndex: Ref<string>
 }
 
@@ -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
@@ -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
@@ -144,7 +144,7 @@ export async function renderPage(
 
   const html = `
 <!DOCTYPE html>
-<html lang="${siteData.lang}">
+<html lang="${siteData.lang}" dir="${siteData.dir}">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">

diff --git 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
@@ -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
@@ -51,6 +51,7 @@ export interface SiteData<ThemeConfig = any> {
   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<ThemeConfig = any> {
   lang?: string
+  dir?: string
   title?: string
   titleTemplate?: string | boolean
   description?: string