forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: change the html dir and lang attributes on locale change (#373)
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
Joaquín Sánchez
Daniel Roe
and committed by
GitHub
817b4a91
d1687786
+14
+14
app/app.vue
+14
app/app.vue
···
1
1
<script setup lang="ts">
2
+
import type { Directions } from '@nuxtjs/i18n'
2
3
import { useEventListener } from '@vueuse/core'
3
4
4
5
const route = useRoute()
5
6
const router = useRouter()
7
+
const { locale, locales } = useI18n()
6
8
7
9
// Initialize accent color before hydration to prevent flash
8
10
initAccentOnPrehydrate()
9
11
10
12
const isHomepage = computed(() => route.name === 'index')
11
13
14
+
const localeMap = locales.value.reduce(
15
+
(acc, l) => {
16
+
acc[l.code] = l.dir ?? 'ltr'
17
+
return acc
18
+
},
19
+
{} as Record<string, Directions>,
20
+
)
21
+
12
22
useHead({
23
+
htmlAttrs: {
24
+
lang: () => locale.value,
25
+
dir: () => localeMap[locale.value] ?? 'ltr',
26
+
},
13
27
titleTemplate: titleChunk => {
14
28
return titleChunk ? titleChunk : 'npmx - Better npm Package Browser'
15
29
},