Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions layer/app/app.config.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
export default defineAppConfig({
docus: {
locale: 'en',
},
ui: {
colors: {
primary: 'emerald',
Expand Down
11 changes: 6 additions & 5 deletions layer/app/app.vue
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<script setup lang="ts">
import type { PageCollections } from '@nuxt/content'
import type { ContentNavigationItem, PageCollections } from '@nuxt/content'
import * as nuxtUiLocales from '@nuxt/ui/locale'

const { seo } = useAppConfig()
const site = useSiteConfig()
const { locale, locales, isEnabled, switchLocalePath } = useDocusI18n()

const lang = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.code || 'en')
const dir = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.dir || 'ltr')
const nuxtUiLocale = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales] || nuxtUiLocales.en)
const lang = computed(() => nuxtUiLocale.value.code)
const dir = computed(() => nuxtUiLocale.value.dir)
const collectionName = computed(() => isEnabled.value ? `docs_${locale.value}` : 'docs')

useHead({
Expand Down Expand Up @@ -43,7 +44,7 @@ if (isEnabled.value) {
}

const { data: navigation } = await useAsyncData(() => `navigation_${collectionName.value}`, () => queryCollectionNavigation(collectionName.value as keyof PageCollections), {
transform: (data) => {
transform: (data: ContentNavigationItem[]) => {
const rootResult = data.find(item => item.path === '/docs')?.children || data || []

return rootResult.find(item => item.path === `/${locale.value}`)?.children || rootResult
Expand All @@ -58,7 +59,7 @@ provide('navigation', navigation)
</script>

<template>
<UApp :locale="nuxtUiLocales[locale as keyof typeof nuxtUiLocales]">
<UApp :locale="nuxtUiLocale">
<NuxtLoadingIndicator color="var(--ui-primary)" />

<AppHeader v-if="$route.meta.header !== false" />
Expand Down
1 change: 1 addition & 0 deletions layer/app/components/LanguageSelect.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ function getEmojiFlag(locale: string): string {
uk: 'ua', // Ukrainian -> Ukraine
ur: 'pk', // Urdu -> Pakistan
vi: 'vn', // Vietnamese -> Vietnam
es: 'es', // Spanish -> Spain
}

const baseLanguage = locale.split('-')[0]?.toLowerCase() || locale
Expand Down
8 changes: 5 additions & 3 deletions layer/app/composables/useDocusI18n.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
import type { LocaleObject } from '@nuxtjs/i18n'
import en from '../../i18n/locales/en.json'

export const useDocusI18n = () => {
const config = useRuntimeConfig().public
const isEnabled = ref(!!config.i18n)

if (!isEnabled.value) {
const locale = useNuxtApp().$locale as string
const localeMessages = useNuxtApp().$localeMessages as Record<string, unknown>

return {
isEnabled,
locale: ref('en'),
locale: ref(locale),
locales: [],
localePath: (path: string) => path,
switchLocalePath: () => {},
t: (key: string): string => {
const path = key.split('.')
return path.reduce((acc: unknown, curr) => (acc as Record<string, unknown>)?.[curr], en) as string
return path.reduce((acc: unknown, curr) => (acc as Record<string, unknown>)?.[curr], localeMessages) as string
},
}
}
Expand Down
13 changes: 8 additions & 5 deletions layer/app/error.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import type { NuxtError } from '#app'
import type { PageCollections } from '@nuxt/content'
import type { ContentNavigationItem, PageCollections } from '@nuxt/content'
import * as nuxtUiLocales from '@nuxt/ui/locale'

const props = defineProps<{
Expand All @@ -9,8 +9,10 @@ const props = defineProps<{

const { locale, locales, isEnabled, t, switchLocalePath } = useDocusI18n()

const lang = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.code || 'en')
const dir = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.dir || 'ltr')
const nuxtUiLocale = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales] || nuxtUiLocales.en)
const lang = computed(() => nuxtUiLocale.value.code)
const dir = computed(() => nuxtUiLocale.value.dir)

useHead({
htmlAttrs: {
lang,
Expand All @@ -22,6 +24,7 @@ const localizedError = computed(() => {
return {
...props.error,
statusMessage: t('common.error.title'),
message: t('common.error.description'),
}
})

Expand All @@ -44,7 +47,7 @@ if (isEnabled.value) {
const collectionName = computed(() => isEnabled.value ? `docs_${locale.value}` : 'docs')

const { data: navigation } = await useAsyncData(`navigation_${collectionName.value}`, () => queryCollectionNavigation(collectionName.value as keyof PageCollections), {
transform: (data) => {
transform: (data: ContentNavigationItem[]) => {
const rootResult = data.find(item => item.path === '/docs')?.children || data || []

return rootResult.find(item => item.path === `/${locale.value}`)?.children || rootResult
Expand All @@ -59,7 +62,7 @@ provide('navigation', navigation)
</script>

<template>
<UApp>
<UApp :locale="nuxtUiLocale">
<AppHeader />

<UError :error="localizedError" />
Expand Down
28 changes: 25 additions & 3 deletions layer/app/plugins/i18n.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,34 @@
export default defineNuxtPlugin(() => {
import en from '../../i18n/locales/en.json'
import type { RouteLocationNormalized } from 'vue-router'

export default defineNuxtPlugin(async () => {
const nuxtApp = useNuxtApp()

const i18nConfig = nuxtApp.$config.public.i18n

// If i18n is not enabled, fetch and provide the configured locale in app config
if (!i18nConfig) {
return
let locale = 'en'
let resolvedMessages: Record<string, unknown> = en

const appConfig = useAppConfig()
const configuredLocale = appConfig.docus.locale
if (configuredLocale !== 'en') {
const localeMessages = await import(`../../i18n/locales/${configuredLocale}.json`)
if (!localeMessages) {
console.warn(`[Docus] Missing locale file for "${configuredLocale}". Falling back to "en".`)
}
else {
locale = configuredLocale
resolvedMessages = localeMessages
}
}

nuxtApp.provide('locale', locale)
nuxtApp.provide('localeMessages', resolvedMessages)
}

addRouteMiddleware((to) => {
addRouteMiddleware((to: RouteLocationNormalized) => {
if (to.path === '/') {
const cookieLocale = useCookie('i18n_redirected').value || i18nConfig.defaultLocale || 'en'

Expand Down
3 changes: 3 additions & 0 deletions layer/app/types/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
declare module 'nuxt/schema' {
interface AppConfig {
docus: {
locale: string
}
seo: {
titleTemplate: string
title: string
Expand Down
Loading