@sit-onyx/nuxt-docs 1.0.0-beta.104 → 1.0.0-beta.105

package/app/components/NavBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { iconCircleContrast } from "@sit-onyx/icons";
-import { extractLinkProps, type ColorSchemeValue } from "sit-onyx";
+import { iconCircleContrast, iconTranslate } from "@sit-onyx/icons";
+import { extractLinkProps, type ColorSchemeValue, type SelectDialogOption } from "sit-onyx";
 
 const { onyxDocs } = useAppConfig();
 const router = useRouter();
@@ -16,10 +16,32 @@ const colorScheme = computed({
     colorMode.preference = newValue === "auto" ? "system" : newValue;
   },
 });
+
+const { locale, setLocale, locales } = useI18n();
+const localePath = useLocalePath();
+const isLanguageDialogOpen = ref(false);
+
+const languageOptions = computed(() => {
+  return locales.value.map((locale) => {
+    return {
+      label: locale.name ?? locale.code,
+      value: locale.code,
+    } satisfies SelectDialogOption;
+  });
+});
+
+const currentLocaleLabel = computed(() => {
+  // using "!" here is safe since splitting a string will always return at least one string in the returned array
+  return locale.value.split("-")[0]!.split("_")[0]!.toUpperCase();
+});
 </script>
 
 <template>
-  <OnyxNavBar v-bind="onyxDocs.nav" @navigate-back="router.back">
+  <OnyxNavBar
+    :app-area="{ link: localePath('/') }"
+    v-bind="onyxDocs.nav"
+    @navigate-back="router.back"
+  >
     <NavItem
       v-for="item in onyxDocs.nav?.items"
       :key="extractLinkProps(item.link ?? '').href"
@@ -27,6 +49,26 @@ const colorScheme = computed({
     />
 
     <template #contextArea>
+      <template v-if="locales.length > 1">
+        <OnyxButton
+          :label="currentLocaleLabel"
+          :icon="iconTranslate"
+          color="neutral"
+          mode="plain"
+          @click="isLanguageDialogOpen = true"
+        />
+
+        <OnyxSelectDialog
+          v-model:open="isLanguageDialogOpen"
+          :label="$t('onyx.languageSelect.headline')"
+          :model-value="locale"
+          :options="languageOptions"
+          @update:model-value="setLocale($event)"
+        >
+          <template #description> {{ $t("onyx.languageSelect.subtitle") }} </template>
+        </OnyxSelectDialog>
+      </template>
+
       <OnyxIconButton
         label="Toggle color scheme"
         :icon="iconCircleContrast"

package/app/components/NavItem.vue

@@ -1,8 +1,11 @@
 <script lang="ts" setup>
+import { extractLinkProps } from "sit-onyx";
 import type { NavItem } from "../app.config";
 
 const props = defineProps<NavItem>();
 
+const localePath = useLocalePath();
+
 /**
  * Same as `props` but without the `children` property to prevent console warnings when using `v-bind`.
  */
@@ -10,10 +13,19 @@ const navItemProps = computed(() => {
   const { children: _, ...rest } = props;
   return rest;
 });
+
+/**
+ * Nav item link depending on the current locale / i18n.
+ */
+const localeLink = computed(() => {
+  if (!props.link) return;
+  const _link = extractLinkProps(props.link);
+  return { ..._link, href: localePath(_link.href) };
+});
 </script>
 
 <template>
-  <OnyxNavItem v-bind="navItemProps">
+  <OnyxNavItem v-bind="navItemProps" :link="localeLink">
     <template v-if="props.children?.length" #children>
       <NavItem v-for="child in props.children" :key="child.label" v-bind="child" />
     </template>

package/app/error.vue

@@ -6,7 +6,9 @@ const props = defineProps<{
   error: NuxtError;
 }>();
 
-const handleError = () => clearError({ redirect: "/" });
+const localePath = useLocalePath();
+
+const handleError = () => clearError({ redirect: localePath("/") });
 </script>
 
 <template>

package/app/pages/{[...path].vue → [...slug].vue}

@@ -1,9 +1,19 @@
 <script setup lang="ts">
+import type { Collections } from "@nuxt/content";
+
 const route = useRoute();
-const path = computed(() => route.path);
+const { locale } = useI18n();
+const slug = computed(() => {
+  const value = String(route.params.slug);
+  return value.startsWith("/") ? value : `/${value}`;
+});
 
-const collection = await useAsyncData(path, () =>
-  queryCollection("content").path(path.value).first(),
+const collection = await useAsyncData(
+  () => `page-${slug.value}-${locale.value}`,
+  () => {
+    const collection = `content_${locale.value}` as keyof Collections;
+    return queryCollection(collection).path(slug.value).first();
+  },
 );
 
 watch(

package/content.config.ts

@@ -3,13 +3,13 @@ import path from "node:path";
 
 export default defineContentConfig({
   collections: {
-    content: defineCollection({
+    content_en: defineCollection({
       type: "page",
       source: [
         // include files from content folder of the extending app
-        { cwd: path.resolve("content"), include: "**/*.md" },
+        { cwd: path.resolve("content"), include: "en/**", prefix: "" },
         // include files from playground (mainly needed for this monorepo)
-        { cwd: path.resolve("playground/content"), include: "**/*.md" },
+        { cwd: path.resolve("playground/content"), include: "en/**", prefix: "" },
       ],
     }),
   },

package/nuxt.config.ts

@@ -3,9 +3,15 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   compatibilityDate: "2025-01-20",
   typescript: { typeCheck: "build" },
-  modules: ["@sit-onyx/nuxt", "@nuxt/content", "@nuxtjs/color-mode", "@nuxt/image"],
+  modules: ["@sit-onyx/nuxt", "@nuxt/content", "@nuxtjs/color-mode", "@nuxt/image", "@nuxtjs/i18n"],
   css: ["@fontsource-variable/source-code-pro", "@fontsource-variable/source-sans-3"],
   colorMode: {
     classSuffix: "",
   },
+  i18n: {
+    defaultLocale: "en",
+    // we explicitly don't define any default locales here so the project is fully in charge if defining which locales to use.
+    // Otherwise if we would e.g. add en here, the project would always be forced to register en, even if it does not plan to add en translations
+    // which could conflict with e.g. "const { locales } = useI18n()" to render a language switch which would always include en then
+  },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt-docs",
-  "version": "1.0.0-beta.104",
+  "version": "1.0.0-beta.105",
   "description": "Nuxt layer/template for creating documentations with the onyx design system",
   "type": "module",
   "author": "Schwarz IT KG",
@@ -28,6 +28,7 @@
     "@nuxt/content": ">= 3",
     "@nuxt/image": ">= 1",
     "@nuxtjs/color-mode": ">= 3",
+    "@nuxtjs/i18n": ">= 10",
     "sass-embedded": ">= 1",
     "@sit-onyx/icons": "^1.0.0-beta.24",
     "@sit-onyx/nuxt": "^1.0.0-beta.290",
@@ -46,10 +47,10 @@
     "sass-embedded": "1.90.0",
     "typescript": "5.9.2",
     "vue": "3.5.18",
-    "@sit-onyx/icons": "^1.0.0-beta.24",
-    "@sit-onyx/nuxt": "^1.0.0-beta.290",
     "@sit-onyx/shared": "^1.0.0-beta.4",
-    "sit-onyx": "^1.0.0-beta.290"
+    "@sit-onyx/nuxt": "^1.0.0-beta.290",
+    "sit-onyx": "^1.0.0-beta.290",
+    "@sit-onyx/icons": "^1.0.0-beta.24"
   },
   "scripts": {
     "dev": "pnpm dev:prepare && nuxi dev playground",