@farming-labs/svelte-theme 0.0.29 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/svelte-theme",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "Svelte UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "docs",
@@ -82,8 +82,8 @@
   "dependencies": {
     "gray-matter": "^4.0.3",
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.0.29",
-    "@farming-labs/svelte": "0.0.29"
+    "@farming-labs/docs": "0.0.31",
+    "@farming-labs/svelte": "0.0.31"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"

package/src/components/AskAIDialog.svelte

@@ -1,6 +1,7 @@
 <script>
   import { onMount, tick } from "svelte";
   import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
   import { renderMarkdown } from "../lib/renderMarkdown.js";
 
   let { onclose, api = "/api/docs", suggestedQuestions = [], aiLabel = "AI", hideAITab = false } = $props();
@@ -20,6 +21,19 @@
   let messagesEndEl = $state(null);
   let debounceTimer;
 
+  function withLang(url) {
+    if (!url || url.startsWith("#")) return url;
+    try {
+      const parsed = new URL(url, "https://farming-labs.local");
+      const locale = $page.url.searchParams.get("lang") ?? $page.url.searchParams.get("locale");
+      if (locale) parsed.searchParams.set("lang", locale);
+      else parsed.searchParams.delete("lang");
+      return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+    } catch {
+      return url;
+    }
+  }
+
   onMount(() => {
     document.body.style.overflow = "hidden";
     setTimeout(() => searchInputEl?.focus(), 50);
@@ -45,7 +59,7 @@
     isSearching = true;
     debounceTimer = setTimeout(async () => {
       try {
-        const res = await fetch(`${api}?query=${encodeURIComponent(searchQuery)}`);
+        const res = await fetch(withLang(`${api}?query=${encodeURIComponent(searchQuery)}`));
         if (res.ok) {
           searchResults = await res.json();
           activeIndex = 0;
@@ -59,7 +73,7 @@
 
   function navigateTo(url) {
     onclose?.();
-    goto(url);
+    goto(withLang(url));
   }
 
   function handleSearchKeydown(e) {
@@ -88,7 +102,7 @@
     messages = [...newMessages, { role: "assistant", content: "" }];
 
     try {
-      const res = await fetch(api, {
+      const res = await fetch(withLang(api), {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({

package/src/components/Breadcrumb.svelte

@@ -2,36 +2,59 @@
   /**
    * Breadcrumb — Path-based breadcrumb showing parent / current.
    */
-  let { pathname = "", entry = "docs" } = $props();
+  let { pathname = "", entry = "docs", locale = undefined } = $props();
 
   let segments = $derived.by(() => {
     return pathname.split("/").filter(Boolean);
   });
 
+  let entryParts = $derived.by(() => {
+    return entry.split("/").filter(Boolean);
+  });
+
+  let contentSegments = $derived.by(() => {
+    return segments.slice(entryParts.length);
+  });
+
   let parentLabel = $derived.by(() => {
-    if (segments.length < 2) return "";
-    return segments[segments.length - 2]
+    if (contentSegments.length < 2) return "";
+    return contentSegments[contentSegments.length - 2]
       .replace(/-/g, " ")
       .replace(/\b\w/g, (c) => c.toUpperCase());
   });
 
   let currentLabel = $derived.by(() => {
-    if (segments.length < 2) return "";
-    return segments[segments.length - 1]
+    if (contentSegments.length < 2) return "";
+    return contentSegments[contentSegments.length - 1]
       .replace(/-/g, " ")
       .replace(/\b\w/g, (c) => c.toUpperCase());
   });
 
   let parentUrl = $derived.by(() => {
-    if (segments.length < 2) return "";
-    return "/" + segments.slice(0, segments.length - 1).join("/");
+    if (contentSegments.length < 2) return "";
+    return (
+      "/" +
+      [...segments.slice(0, entryParts.length), ...contentSegments.slice(0, -1)].join("/")
+    );
+  });
+
+  let localizedParentUrl = $derived.by(() => {
+    if (!parentUrl) return "";
+    try {
+      const url = new URL(parentUrl, "https://farming-labs.local");
+      if (locale) url.searchParams.set("lang", locale);
+      else url.searchParams.delete("lang");
+      return `${url.pathname}${url.search}${url.hash}`;
+    } catch {
+      return parentUrl;
+    }
   });
 </script>
 
-{#if segments.length >= 2}
+{#if contentSegments.length >= 2}
   <nav 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.svelte

@@ -197,7 +197,8 @@
 </svelte:head>
 
 <DocsPage
-  entry={config?.entry ?? "docs"}
+  entry={data.entry ?? config?.entry ?? "docs"}
+  locale={data.locale}
   {tocEnabled}
   {tocStyle}
   {breadcrumbEnabled}

package/src/components/DocsLayout.svelte

@@ -19,7 +19,33 @@
   } = $props();
 
   let resolvedTitle = $derived(title ?? config?.nav?.title ?? "Docs");
-  let resolvedTitleUrl = $derived(titleUrl ?? config?.nav?.url ?? "/docs");
+  let localeConfig = $derived(config?.i18n ?? null);
+  let locales = $derived(
+    Array.isArray(localeConfig?.locales) ? localeConfig.locales.filter(Boolean) : []
+  );
+  let defaultLocale = $derived(
+    localeConfig?.defaultLocale && locales.includes(localeConfig.defaultLocale)
+      ? localeConfig.defaultLocale
+      : locales[0]
+  );
+  let activeLocale = $derived(
+    $page.url.searchParams.get("lang") ?? $page.url.searchParams.get("locale") ?? defaultLocale
+  );
+
+  function withLang(url) {
+    if (!url || url.startsWith("#")) return url;
+    try {
+      const parsed = new URL(url, "https://farming-labs.local");
+      if (activeLocale) parsed.searchParams.set("lang", activeLocale);
+      else parsed.searchParams.delete("lang");
+      return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+    } catch {
+      return url;
+    }
+  }
+
+  let resolvedTitleUrl = $derived(withLang(titleUrl ?? config?.nav?.url ?? "/docs"));
+  let localizedApi = $derived(withLang("/api/docs"));
   let staticExport = $derived(!!(config && config.staticExport));
   let showSearch = $derived(!staticExport);
   let showFloatingAI = $derived(!staticExport && config?.ai?.mode === "floating" && !!config?.ai?.enabled);
@@ -278,7 +304,7 @@
           {#each tree.children as node, i}
             {#if node.type === "page"}
               <a
-                href={node.url}
+                href={withLang(node.url)}
                 class="fd-sidebar-link fd-sidebar-top-link"
                 class:fd-sidebar-link-active={isActive(node.url)}
                 class:fd-sidebar-first-item={i === 0}
@@ -306,7 +332,7 @@
                 <div class="fd-sidebar-folder-content">
                   {#if node.index}
                     <a
-                      href={node.index.url}
+                      href={withLang(node.index.url)}
                       class="fd-sidebar-link fd-sidebar-child-link"
                       class:fd-sidebar-link-active={isActive(node.index.url)}
                       data-active={isActive(node.index.url)}
@@ -318,7 +344,7 @@
                   {#each node.children as child}
                     {#if child.type === "page"}
                       <a
-                        href={child.url}
+                        href={withLang(child.url)}
                         class="fd-sidebar-link fd-sidebar-child-link"
                         class:fd-sidebar-link-active={isActive(child.url)}
                         data-active={isActive(child.url)}
@@ -339,7 +365,7 @@
                         <div class="fd-sidebar-folder-content">
                           {#if child.index}
                             <a
-                              href={child.index.url}
+                              href={withLang(child.index.url)}
                               class="fd-sidebar-link fd-sidebar-child-link"
                               class:fd-sidebar-link-active={isActive(child.index.url)}
                               data-active={isActive(child.index.url)}
@@ -351,7 +377,7 @@
                           {#each child.children as grandchild}
                             {#if grandchild.type === "page"}
                               <a
-                                href={grandchild.url}
+                                href={withLang(grandchild.url)}
                                 class="fd-sidebar-link fd-sidebar-child-link"
                                 class:fd-sidebar-link-active={isActive(grandchild.url)}
                                 data-active={isActive(grandchild.url)}
@@ -385,9 +411,41 @@
       </div>
     {/if}
 
-    {#if showThemeToggle}
+    {#if locales.length > 0 || showThemeToggle}
       <div class="fd-sidebar-footer">
-        <ThemeToggle />
+        <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%">
+          {#if locales.length > 0}
+            <div style="position:relative;display:inline-flex;align-items:center;flex-shrink:0">
+              <select
+                aria-label="Select language"
+                value={activeLocale}
+                onchange={(e) => {
+                  const url = new URL($page.url.href);
+                  const nextLocale = e.currentTarget.value;
+                  if (nextLocale) url.searchParams.set("lang", nextLocale);
+                  else url.searchParams.delete("lang");
+                  goto(`${url.pathname}${url.search}${url.hash}`);
+                }}
+                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)"
+              >
+                {#each locales as item}
+                  <option value={item}>{item.toUpperCase()}</option>
+                {/each}
+              </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>
+          {/if}
+          {#if showThemeToggle}
+            <ThemeToggle />
+          {/if}
+        </div>
       </div>
     {/if}
   </aside>
@@ -399,6 +457,7 @@
 
 {#if showFloatingAI}
   <FloatingAIChat
+    api={localizedApi}
     suggestedQuestions={config.ai.suggestedQuestions ?? []}
     aiLabel={config.ai.aiLabel ?? "AI"}
     position={config.ai.position ?? "bottom-right"}

package/src/components/DocsPage.svelte

@@ -9,6 +9,7 @@
     tocStyle = "default",
     breadcrumbEnabled = true,
     entry = "docs",
+    locale = null,
     previousPage = null,
     nextPage = null,
     editOnGithub = null,
@@ -18,6 +19,26 @@
   } = $props();
 
   let tocItems = $state([]);
+  let llmsLangParam = $derived(locale ? `&lang=${encodeURIComponent(locale)}` : "");
+  let localizedPreviousPage = $derived.by(() => localizePage(previousPage, locale));
+  let localizedNextPage = $derived.by(() => localizePage(nextPage, locale));
+
+  function withLang(url, activeLocale) {
+    if (!url || url.startsWith("#")) return url;
+    try {
+      const parsed = new URL(url, "https://farming-labs.local");
+      if (activeLocale) parsed.searchParams.set("lang", activeLocale);
+      else parsed.searchParams.delete("lang");
+      return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+    } catch {
+      return url;
+    }
+  }
+
+  function localizePage(page, activeLocale) {
+    if (!page?.url) return page;
+    return { ...page, url: withLang(page.url, activeLocale) };
+  }
 
   onMount(() => {
     scanHeadings();
@@ -87,6 +108,13 @@
           };
         });
       });
+
+      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, locale);
+        if (localized) link.setAttribute("href", localized);
+      });
     });
   }
 </script>
@@ -94,7 +122,7 @@
 <div class="fd-page">
   <article class="fd-page-article" id="nd-page">
     {#if breadcrumbEnabled}
-      <Breadcrumb pathname={$page.url.pathname} {entry} />
+      <Breadcrumb pathname={$page.url.pathname} {entry} {locale} />
     {/if}
 
     <div class="fd-page-body">
@@ -115,8 +143,8 @@
           {/if}
           {#if llmsTxtEnabled}
             <span 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>
           {/if}
           {#if lastModified}
@@ -127,28 +155,28 @@
 
       {#if previousPage || nextPage}
         <nav class="fd-page-nav" aria-label="Page navigation">
-          {#if previousPage}
-            <a href={previousPage.url} class="fd-page-nav-card fd-page-nav-prev">
+          {#if localizedPreviousPage}
+            <a href={localizedPreviousPage.url} class="fd-page-nav-card fd-page-nav-prev">
               <span class="fd-page-nav-label">
                 <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="15 18 9 12 15 6" />
                 </svg>
                 Previous
               </span>
-              <span class="fd-page-nav-title">{previousPage.name}</span>
+              <span class="fd-page-nav-title">{localizedPreviousPage.name}</span>
             </a>
           {:else}
             <div></div>
           {/if}
-          {#if nextPage}
-            <a href={nextPage.url} class="fd-page-nav-card fd-page-nav-next">
+          {#if localizedNextPage}
+            <a href={localizedNextPage.url} class="fd-page-nav-card fd-page-nav-next">
               <span class="fd-page-nav-label">
                 Next
                 <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="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>
             </a>
           {:else}
             <div></div>

package/src/components/SearchDialog.svelte

@@ -6,6 +6,7 @@
    */
   import { onMount, onDestroy, tick } from "svelte";
   import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
 
   const STORAGE_KEY = "fd:omni:recents";
   const MAX_RECENTS = 8;
@@ -23,6 +24,19 @@
   let listRef = $state(null);
   let debounceTimer = null;
 
+  function withLang(url) {
+    if (!url || url.startsWith("#")) return url;
+    try {
+      const parsed = new URL(url, "https://farming-labs.local");
+      const locale = $page.url.searchParams.get("lang") ?? $page.url.searchParams.get("locale");
+      if (locale) parsed.searchParams.set("lang", locale);
+      else parsed.searchParams.delete("lang");
+      return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+    } catch {
+      return url;
+    }
+  }
+
   let flatItems = $derived.by(() => {
     const q = query.trim();
     if (q && currentResults.length) {
@@ -81,11 +95,12 @@
   }
 
   function executeItem(item) {
-    saveRecent({ id: item.url, label: item.label ?? item.content ?? item.url, url: item.url });
-    if (item.url.startsWith("http")) {
-      if (typeof window !== "undefined") window.open(item.url, "_blank", "noopener,noreferrer");
+    const localizedUrl = withLang(item.url);
+    saveRecent({ id: localizedUrl, label: item.label ?? item.content ?? item.url, url: localizedUrl });
+    if (localizedUrl.startsWith("http")) {
+      if (typeof window !== "undefined") window.open(localizedUrl, "_blank", "noopener,noreferrer");
     } else {
-      goto(item.url);
+      goto(localizedUrl);
     }
     close();
   }
@@ -123,7 +138,7 @@
     debounceTimer = setTimeout(async () => {
       loading = 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 = Array.isArray(data) ? data : [];
         activeId = currentResults[0]?.url ?? null;