@farming-labs/nuxt-theme 0.0.29 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/nuxt-theme",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "Nuxt/Vue UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "docs",
@@ -60,7 +60,7 @@
   },
   "dependencies": {
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.0.29"
+    "@farming-labs/docs": "0.0.31"
   },
   "peerDependencies": {
     "nuxt": ">=3.0.0",

package/src/components/Breadcrumb.vue

@@ -1,39 +1,55 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-const props = withDefaults(defineProps<{ pathname?: string; entry?: string }>(), {
+const props = withDefaults(defineProps<{ pathname?: string; entry?: string; locale?: string }>(), {
   pathname: "",
   entry: "docs",
+  locale: undefined,
 });
 
-const segments = computed(() => {
-  return props.pathname.split("/").filter(Boolean);
-});
+const segments = computed(() => props.pathname.split("/").filter(Boolean));
+const entryParts = computed(() => props.entry.split("/").filter(Boolean));
+const contentSegments = computed(() => segments.value.slice(entryParts.value.length));
 
 const parentLabel = computed(() => {
-  if (segments.value.length < 2) return "";
-  return segments.value[segments.value.length - 2]
+  if (contentSegments.value.length < 2) return "";
+  return contentSegments.value[contentSegments.value.length - 2]
     .replace(/-/g, " ")
     .replace(/\b\w/g, (c: string) => c.toUpperCase());
 });
 
 const currentLabel = computed(() => {
-  if (segments.value.length < 2) return "";
-  return segments.value[segments.value.length - 1]
+  if (contentSegments.value.length < 2) return "";
+  return contentSegments.value[contentSegments.value.length - 1]
     .replace(/-/g, " ")
     .replace(/\b\w/g, (c: string) => c.toUpperCase());
 });
 
 const parentUrl = computed(() => {
-  if (segments.value.length < 2) return "";
-  return "/" + segments.value.slice(0, segments.value.length - 1).join("/");
+  if (contentSegments.value.length < 2) return "";
+  return (
+    "/" +
+    [...segments.value.slice(0, entryParts.value.length), ...contentSegments.value.slice(0, -1)].join("/")
+  );
+});
+
+const localizedParentUrl = computed(() => {
+  if (!parentUrl.value) return "";
+  try {
+    const url = new URL(parentUrl.value, "https://farming-labs.local");
+    if (props.locale) url.searchParams.set("lang", props.locale);
+    else url.searchParams.delete("lang");
+    return `${url.pathname}${url.search}${url.hash}`;
+  } catch {
+    return parentUrl.value;
+  }
 });
 </script>
 
 <template>
-  <nav v-if="segments.length >= 2" class="fd-breadcrumb" aria-label="Breadcrumb">
+  <nav v-if="contentSegments.length >= 2" class="fd-breadcrumb" aria-label="Breadcrumb">
     <span class="fd-breadcrumb-item">
-      <a :href="parentUrl" class="fd-breadcrumb-parent fd-breadcrumb-link">
+      <a :href="localizedParentUrl" class="fd-breadcrumb-parent fd-breadcrumb-link">
         {{ parentLabel }}
       </a>
     </span>

package/src/components/DocsContent.vue

@@ -19,6 +19,8 @@ const props = defineProps<{
     nextPage?: { name: string; url: string } | null;
     editOnGithub?: string;
     lastModified?: string;
+    entry?: string;
+    locale?: string;
   };
   config?: Record<string, unknown> | null;
 }>();
@@ -61,7 +63,7 @@ const llmsTxtEnabled = computed(() => {
   return false;
 });
 
-const entry = computed(() => (props.config?.entry as string) ?? "docs");
+const entry = computed(() => (props.data.entry as string) ?? (props.config?.entry as string) ?? "docs");
 
 const copyMarkdownEnabled = computed(() => {
   const pa = props.config?.pageActions as Record<string, unknown> | undefined;
@@ -217,6 +219,7 @@ onUnmounted(() => {
 <template>
   <DocsPage
     :entry="entry"
+    :locale="data.locale"
     :toc-enabled="tocEnabledVal"
     :toc-style="tocStyleVal"
     :breadcrumb-enabled="breadcrumbEnabled"

package/src/components/DocsLayout.vue

@@ -27,9 +27,37 @@ const props = withDefaults(
 );
 
 const route = useRoute();
+const localeConfig = computed(() => props.config?.i18n as
+  | { locales?: string[]; defaultLocale?: string }
+  | undefined);
+const locales = computed(() =>
+  Array.isArray(localeConfig.value?.locales) ? localeConfig.value.locales.filter(Boolean) : [],
+);
+const defaultLocale = computed(() =>
+  localeConfig.value?.defaultLocale && locales.value.includes(localeConfig.value.defaultLocale)
+    ? localeConfig.value.defaultLocale
+    : locales.value[0],
+);
+
+function withLang(url?: string | null) {
+  if (!url || url.startsWith("#")) return url ?? "";
+  try {
+    const parsed = new URL(url, "https://farming-labs.local");
+    const locale =
+      (route.query.lang as string | undefined) ??
+      (route.query.locale as string | undefined) ??
+      defaultLocale.value;
+    if (locale) parsed.searchParams.set("lang", locale);
+    else parsed.searchParams.delete("lang");
+    return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+  } catch {
+    return url ?? "";
+  }
+}
 
 const resolvedTitle = computed(() => props.title ?? props.config?.nav?.title ?? "Docs");
-const resolvedTitleUrl = computed(() => props.titleUrl ?? props.config?.nav?.url ?? "/docs");
+const resolvedTitleUrl = computed(() => withLang(props.titleUrl ?? props.config?.nav?.url ?? "/docs"));
+const localizedApi = computed(() => withLang("/api/docs"));
 
 const showThemeToggle = computed(() => {
   const toggle = props.config?.themeToggle;
@@ -315,7 +343,7 @@ const showFloatingAI = computed(
               <template v-for="(node, i) in tree.children" :key="node.name + (node.url ?? '')">
                 <NuxtLink
                   v-if="node.type === 'page'"
-                  :to="node.url!"
+                  :to="withLang(node.url!)"
                   class="fd-sidebar-link fd-sidebar-top-link"
                   :class="{
                     'fd-sidebar-link-active': isActive(node.url ?? ''),
@@ -360,7 +388,7 @@ const showFloatingAI = computed(
                   <div class="fd-sidebar-folder-content">
                     <NuxtLink
                       v-if="node.index"
-                      :to="node.index.url"
+                      :to="withLang(node.index.url)"
                       class="fd-sidebar-link fd-sidebar-child-link"
                       :class="{ 'fd-sidebar-link-active': isActive(node.index.url) }"
                       @click="closeSidebar"
@@ -373,7 +401,7 @@ const showFloatingAI = computed(
                     >
                       <NuxtLink
                         v-if="child.type === 'page'"
-                        :to="(child as any).url"
+                        :to="withLang((child as any).url)"
                         class="fd-sidebar-link fd-sidebar-child-link"
                         :class="{ 'fd-sidebar-link-active': isActive((child as any).url) }"
                         @click="closeSidebar"
@@ -402,7 +430,7 @@ const showFloatingAI = computed(
                         <div class="fd-sidebar-folder-content">
                           <NuxtLink
                             v-if="(child as any).index"
-                            :to="(child as any).index.url"
+                            :to="withLang((child as any).index.url)"
                             class="fd-sidebar-link fd-sidebar-child-link"
                             :class="{ 'fd-sidebar-link-active': isActive((child as any).index.url) }"
                             @click="closeSidebar"
@@ -413,7 +441,7 @@ const showFloatingAI = computed(
                             v-for="grandchild in (child as any).children"
                             v-if="grandchild.type === 'page'"
                             :key="grandchild.url"
-                            :to="grandchild.url"
+                            :to="withLang(grandchild.url)"
                             class="fd-sidebar-link fd-sidebar-child-link"
                             :class="{ 'fd-sidebar-link-active': isActive(grandchild.url) }"
                             @click="closeSidebar"
@@ -434,8 +462,44 @@ const showFloatingAI = computed(
           <slot name="sidebar-footer" />
         </div>
 
-        <div v-if="showThemeToggle" class="fd-sidebar-footer">
-          <ThemeToggle />
+        <div v-if="locales.length > 0 || showThemeToggle" class="fd-sidebar-footer">
+          <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%">
+            <div
+              v-if="locales.length > 0"
+              style="position:relative;display:inline-flex;align-items:center;flex-shrink:0"
+            >
+              <select
+                :value="(route.query.lang as string | undefined) ?? (route.query.locale as string | undefined) ?? defaultLocale"
+                aria-label="Select language"
+                style="appearance:none;-webkit-appearance:none;-moz-appearance:none;min-width:84px;height:36px;border-radius:9999px;border:1px solid var(--color-fd-border);background:var(--color-fd-card, var(--color-fd-background));color:var(--color-fd-foreground);padding:0 36px 0 14px;font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.08)"
+                @change="
+                  (event) => {
+                    const nextLocale = (event.target as HTMLSelectElement).value;
+                    navigateTo({
+                      path: route.path,
+                      query: {
+                        ...route.query,
+                        lang: nextLocale || undefined,
+                      },
+                    });
+                  }
+                "
+              >
+                <option v-for="item in locales" :key="item" :value="item">
+                  {{ item.toUpperCase() }}
+                </option>
+              </select>
+              <span
+                aria-hidden="true"
+                style="position:absolute;right:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--color-fd-muted-foreground);pointer-events:none"
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="6 9 12 15 18 9" />
+                </svg>
+              </span>
+            </div>
+            <ThemeToggle v-if="showThemeToggle" />
+          </div>
         </div>
       </aside>
 
@@ -446,7 +510,7 @@ const showFloatingAI = computed(
 
     <FloatingAIChat
       v-if="showFloatingAI"
-      api="/api/docs"
+      :api="localizedApi"
       :suggested-questions="config?.ai?.suggestedQuestions ?? []"
       :ai-label="config?.ai?.aiLabel ?? 'AI'"
       :position="config?.ai?.position ?? 'bottom-right'"

package/src/components/DocsPage.vue

@@ -10,6 +10,7 @@ const props = withDefaults(
     tocStyle?: "default" | "directional";
     breadcrumbEnabled?: boolean;
     entry?: string;
+    locale?: string;
     previousPage?: { name: string; url: string } | null;
     nextPage?: { name: string; url: string } | null;
     editOnGithub?: string | null;
@@ -21,6 +22,7 @@ const props = withDefaults(
     tocStyle: "default",
     breadcrumbEnabled: true,
     entry: "docs",
+    locale: undefined,
     previousPage: null,
     nextPage: null,
     editOnGithub: null,
@@ -31,6 +33,29 @@ const props = withDefaults(
 
 const route = useRoute();
 const tocItems = ref<{ title: string; url: string; depth: number }[]>([]);
+const llmsLangParam = computed(() =>
+  props.locale ? `&lang=${encodeURIComponent(props.locale)}` : "",
+);
+const localizedPreviousPage = computed(() => localizePage(props.previousPage));
+const localizedNextPage = computed(() => localizePage(props.nextPage));
+
+function withLang(url?: string) {
+  if (!url || url.startsWith("#")) return url;
+  try {
+    const parsed = new URL(url, "https://farming-labs.local");
+    const locale = props.locale ?? (route.query.lang as string | undefined);
+    if (locale) parsed.searchParams.set("lang", locale);
+    else parsed.searchParams.delete("lang");
+    return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+  } catch {
+    return url;
+  }
+}
+
+function localizePage(page?: { name: string; url: string } | null) {
+  if (!page?.url) return page;
+  return { ...page, url: withLang(page.url)! };
+}
 
 function scanHeadings() {
   requestAnimationFrame(() => {
@@ -91,6 +116,12 @@ function wireInteractive() {
         });
       });
     });
+    document.querySelectorAll(".fd-page-body a[href]").forEach((link) => {
+      const href = link.getAttribute("href");
+      if (!href || href.startsWith("#") || /^(mailto:|tel:|javascript:)/i.test(href)) return;
+      const localized = withLang(href);
+      if (localized) link.setAttribute("href", localized);
+    });
   });
 }
 
@@ -111,7 +142,7 @@ watch(
 <template>
   <div class="fd-page">
     <article class="fd-page-article" id="nd-page">
-      <Breadcrumb v-if="breadcrumbEnabled" :pathname="route.path" :entry="entry" />
+      <Breadcrumb v-if="breadcrumbEnabled" :pathname="route.path" :entry="entry" :locale="props.locale" />
 
       <div class="fd-page-body">
         <div class="fd-docs-content">
@@ -138,16 +169,16 @@ watch(
             Edit on GitHub
           </a>
           <span v-if="llmsTxtEnabled" class="fd-llms-txt-links">
-            <a href="/api/docs?format=llms" target="_blank" rel="noopener noreferrer" class="fd-llms-txt-link">llms.txt</a>
-            <a href="/api/docs?format=llms-full" target="_blank" rel="noopener noreferrer" class="fd-llms-txt-link">llms-full.txt</a>
+            <a :href="`/api/docs?format=llms${llmsLangParam}`" target="_blank" rel="noopener noreferrer" class="fd-llms-txt-link">llms.txt</a>
+            <a :href="`/api/docs?format=llms-full${llmsLangParam}`" target="_blank" rel="noopener noreferrer" class="fd-llms-txt-link">llms-full.txt</a>
           </span>
           <span v-if="lastModified" class="fd-last-modified">Last updated: {{ lastModified }}</span>
         </div>
 
         <nav v-if="previousPage || nextPage" class="fd-page-nav" aria-label="Page navigation">
           <NuxtLink
-            v-if="previousPage"
-            :to="previousPage.url"
+            v-if="localizedPreviousPage"
+            :to="localizedPreviousPage.url"
             class="fd-page-nav-card fd-page-nav-prev"
           >
             <span class="fd-page-nav-label">
@@ -165,10 +196,10 @@ watch(
               </svg>
               Previous
             </span>
-            <span class="fd-page-nav-title">{{ previousPage.name }}</span>
+            <span class="fd-page-nav-title">{{ localizedPreviousPage.name }}</span>
           </NuxtLink>
           <div v-else></div>
-          <NuxtLink v-if="nextPage" :to="nextPage.url" class="fd-page-nav-card fd-page-nav-next">
+          <NuxtLink v-if="localizedNextPage" :to="localizedNextPage.url" class="fd-page-nav-card fd-page-nav-next">
             <span class="fd-page-nav-label">
               Next
               <svg
@@ -184,7 +215,7 @@ watch(
                 <polyline points="9 18 15 12 9 6" />
               </svg>
             </span>
-            <span class="fd-page-nav-title">{{ nextPage.name }}</span>
+            <span class="fd-page-nav-title">{{ localizedNextPage.name }}</span>
           </NuxtLink>
           <div v-else></div>
         </nav>

package/src/components/SearchDialog.vue

@@ -5,12 +5,14 @@
  */
 import { ref, computed, watch, onMounted, nextTick } from "vue";
 import { navigateTo } from "#app";
+import { useRoute } from "vue-router";
 
 const STORAGE_KEY = "fd:omni:recents";
 const MAX_RECENTS = 8;
 const DEBOUNCE_MS = 150;
 
 const emit = defineEmits<{ (e: "close"): void }>();
+const route = useRoute();
 
 const query = ref("");
 const currentResults = ref<{ content: string; url: string; description?: string }[]>([]);
@@ -45,6 +47,19 @@ function saveRecent(entry: RecentEntry) {
 
 const recentsList = ref<RecentEntry[]>([]);
 
+function withLang(url: string): string {
+  if (!url || url.startsWith("#")) return url;
+  try {
+    const parsed = new URL(url, "https://farming-labs.local");
+    const locale = (route.query.lang as string | undefined) ?? (route.query.locale as string | undefined);
+    if (locale) parsed.searchParams.set("lang", locale);
+    else parsed.searchParams.delete("lang");
+    return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+  } catch {
+    return url;
+  }
+}
+
 const allItems = computed(() => {
   const q = query.value.trim();
   if (q && currentResults.value.length) return currentResults.value.map((r) => ({ id: r.url, label: r.content, url: r.url, subtitle: r.description ?? "Page" }));
@@ -72,11 +87,12 @@ function close() {
 
 function executeItem(item: { url: string; label?: string; content?: string }) {
   const label = item.label ?? item.content ?? item.url;
-  saveRecent({ id: item.url, label, url: item.url });
-  if (item.url.startsWith("http")) {
-    window.open(item.url, "_blank", "noopener,noreferrer");
+  const localizedUrl = withLang(item.url);
+  saveRecent({ id: localizedUrl, label, url: localizedUrl });
+  if (localizedUrl.startsWith("http")) {
+    window.open(localizedUrl, "_blank", "noopener,noreferrer");
   } else {
-    navigateTo(item.url);
+    navigateTo(localizedUrl);
   }
   close();
 }
@@ -119,7 +135,7 @@ function onInput() {
   debounceTimer = setTimeout(async () => {
     loading.value = true;
     try {
-      const res = await fetch(`/api/docs?query=${encodeURIComponent(q)}`);
+      const res = await fetch(withLang(`/api/docs?query=${encodeURIComponent(q)}`));
       const data = res.ok ? await res.json() : [];
       currentResults.value = Array.isArray(data) ? data : [];
       activeIndex.value = 0;
@@ -171,9 +187,9 @@ function onExternalClick(e: Event, url: string) {
   e.preventDefault();
   e.stopPropagation();
   try {
-    window.open(url, "_blank", "noopener,noreferrer");
+    window.open(withLang(url), "_blank", "noopener,noreferrer");
   } catch {
-    window.location.href = url;
+    window.location.href = withLang(url);
   }
 }