feat: support dir in frontmatter

2 years ago · fc880eab5d
parent 0c434bf537
commit fc880eab5d
1 changed files with 12 additions and 2 deletions
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRoute } from 'vitepress'
+import { useRoute, inBrowser } from 'vitepress'
 import { computed, provide, useSlots, watch } from 'vue'
 import VPBackdrop from './components/VPBackdrop.vue'
 import VPContent from './components/VPContent.vue'
@ -22,12 +22,22 @@ watch(() => route.path, closeSidebar)

 useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)

-const { frontmatter } = useData()
+const { frontmatter, dir } = 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>