chore: add land and dir to html element

Author: userquin

app/app.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import type { Directions, LocaleObject } from '@nuxtjs/i18n'
 import { useEventListener } from '@vueuse/core'
 
 const route = useRoute()
 const router = useRouter()
+const { locale, locales, t } = useI18n()
 
 // Initialize accent color before hydration to prevent flash
 initAccentOnPrehydrate()
@@ -15,6 +17,21 @@ useHead({
   },
 })
 
+const localeMap = (locales.value as LocaleObject[]).reduce(
+  (acc, l) => {
+    acc[l.code!] = l.dir ?? 'ltr'
+    return acc
+  },
+  {} as Record<string, Directions>,
+)
+
+useHydratedHead({
+  htmlAttrs: {
+    lang: () => locale.value,
+    dir: () => localeMap[locale.value] ?? 'ltr',
+  },
+})
+
 // Global keyboard shortcut: "/" focuses search or navigates to search page
 function handleGlobalKeydown(e: KeyboardEvent) {
   const target = e.target as HTMLElement