make dir consistent

2 years ago · ef8750174b
parent cd3bd7a0c2
commit ef8750174b
3 changed files with 5 additions and 17 deletions
--- a/src/client/app/data.ts
+++ b/src/client/app/data.ts
@ -89,7 +89,7 @@ export function initData(route: Route): VitePressData {
    frontmatter: computed(() => route.data.frontmatter),
    params: computed(() => route.data.params),
    lang: computed(() => site.value.lang),
-    dir: computed(() => site.value.dir),
+    dir: computed(() => route.data.frontmatter.dir || site.value.dir || 'ltr'),
    localeIndex: computed(() => site.value.localeIndex || 'root'),
    title: computed(() => {
      return createTitle(site.value, route.data)
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRoute, inBrowser } from 'vitepress'
+import { useRoute } from 'vitepress'
 import { computed, provide, useSlots, watch } from 'vue'
 import VPBackdrop from './components/VPBackdrop.vue'
 import VPContent from './components/VPContent.vue'
@ -22,22 +22,12 @@ watch(() => route.path, closeSidebar)

 useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)

-const { frontmatter, dir } = useData()
+const { frontmatter } = useData()

 const slots = useSlots()
 const heroImageSlotExists = computed(() => !!slots['home-hero-image'])

 provide('hero-image-slot-exists', heroImageSlotExists)
-
-watch(() => frontmatter.value.dir, (metaDir) => {
-  if (!inBrowser) { return }
-  const pageDir = metaDir || dir.value || 'ltr'
-  // <html dir>
-  document.documentElement.dir = pageDir
-  // <body dir> and <body style="direction">
-  document.body.dir = pageDir
-  document.body.style.direction = pageDir
-}, { immediate: true })
 </script>

 <template>
--- a/src/node/build/render.ts
+++ b/src/node/build/render.ts
@ -148,10 +148,8 @@ export async function renderPage(
    }
  }

-  const pageDir = pageData.frontmatter.dir || siteData.dir || 'ltr'
-
  const html = `<!DOCTYPE html>
-<html lang="${siteData.lang}" dir="${pageDir}">
+<html lang="${siteData.lang}" dir="${siteData.dir}">
  <head>
    <meta charset="utf-8">
    ${
@ -175,7 +173,7 @@ export async function renderPage(
    }
    ${await renderHead(head)}
  </head>
-  <body dir="${pageDir}" style="direction: ${pageDir}">${teleports?.body || ''}
+  <body>${teleports?.body || ''}
    <div id="app">${content}</div>
    ${metadataScript.inHead ? '' : metadataScript.html}
    ${inlinedScript}