@farming-labs/astro-theme 0.0.29 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/astro-theme",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "Astro UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "astro",
@@ -79,8 +79,8 @@
   },
   "dependencies": {
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.0.29",
-    "@farming-labs/astro": "0.0.29"
+    "@farming-labs/docs": "0.0.31",
+    "@farming-labs/astro": "0.0.31"
   },
   "peerDependencies": {
     "astro": ">=4.0.0"

package/src/components/DocsContent.astro

@@ -107,7 +107,8 @@ const htmlWithoutFirstH1 = (data.html || "").replace(/<h1[^>]*>[\s\S]*?<\/h1>\s*
 </head>
 
 <DocsPage
-  entry={config?.entry ?? "docs"}
+  entry={data.entry ?? config?.entry ?? "docs"}
+  locale={data.locale}
   tocEnabled={tocEnabled}
   tocStyle={tocStyle}
   breadcrumbEnabled={breadcrumbEnabled}

package/src/components/DocsLayout.astro

@@ -7,8 +7,25 @@ const { tree, config = null, title, titleUrl, flatPages = null } = Astro.props;
 const sidebarFlat = !!(config?.sidebar && typeof config.sidebar === "object" && (config.sidebar as { flat?: boolean }).flat);
 const useFlatSidebar = sidebarFlat && Array.isArray(flatPages) && flatPages.length > 0;
 
+const i18n = config?.i18n as { locales?: string[]; defaultLocale?: string } | undefined;
+const locales = Array.isArray(i18n?.locales) ? i18n.locales.filter(Boolean) : [];
+const defaultLocale = (i18n?.defaultLocale && locales.includes(i18n.defaultLocale))
+  ? i18n.defaultLocale
+  : locales[0];
+const activeLocale =
+  Astro.url.searchParams.get("lang") ??
+  Astro.url.searchParams.get("locale") ??
+  defaultLocale;
+const withLang = (url?: string | null) => {
+  if (!url || url.startsWith("#")) return url ?? "";
+  const parsed = new URL(url, Astro.url);
+  if (activeLocale) parsed.searchParams.set("lang", activeLocale);
+  else parsed.searchParams.delete("lang");
+  return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+};
+
 const resolvedTitle = title ?? config?.nav?.title ?? "Docs";
-const resolvedTitleUrl = titleUrl ?? config?.nav?.url ?? "/docs";
+const resolvedTitleUrl = withLang(titleUrl ?? config?.nav?.url ?? "/docs");
 
 const showThemeToggle = (() => {
   const toggle = config?.themeToggle;
@@ -207,7 +224,7 @@ const showSearch = !staticExport;
           const icon = getIcon(page.icon);
           return (
             <a
-              href={page.url}
+              href={withLang(page.url)}
               class={`fd-sidebar-link fd-sidebar-top-link ${isActive(page.url) ? 'fd-sidebar-link-active' : ''} ${i === 0 ? 'fd-sidebar-first-item' : ''}`}
               data-active={isActive(page.url) || undefined}
             >
@@ -224,7 +241,7 @@ const showSearch = !staticExport;
           const icon = getIcon(node.icon);
           return (
             <a
-              href={node.url}
+              href={withLang(node.url)}
               class={`fd-sidebar-link fd-sidebar-top-link ${isActive(node.url) ? 'fd-sidebar-link-active' : ''} ${i === 0 ? 'fd-sidebar-first-item' : ''}`}
               data-active={isActive(node.url) || undefined}
             >
@@ -248,7 +265,7 @@ const showSearch = !staticExport;
               <div class="fd-sidebar-folder-content">
                 {node.index && (
                   <a
-                    href={node.index.url}
+                    href={withLang(node.index.url)}
                     class={`fd-sidebar-link fd-sidebar-child-link ${isActive(node.index.url) ? 'fd-sidebar-link-active' : ''}`}
                     data-active={isActive(node.index.url) || undefined}
                   >
@@ -259,7 +276,7 @@ const showSearch = !staticExport;
                   if (child.type === "page") {
                     return (
                       <a
-                        href={child.url}
+                        href={withLang(child.url)}
                         class={`fd-sidebar-link fd-sidebar-child-link ${isActive(child.url) ? 'fd-sidebar-link-active' : ''}`}
                         data-active={isActive(child.url) || undefined}
                       >
@@ -278,7 +295,7 @@ const showSearch = !staticExport;
                         <div class="fd-sidebar-folder-content">
                           {child.index && (
                             <a
-                              href={child.index.url}
+                              href={withLang(child.index.url)}
                               class={`fd-sidebar-link fd-sidebar-child-link ${isActive(child.index.url) ? 'fd-sidebar-link-active' : ''}`}
                               data-active={isActive(child.index.url) || undefined}
                             >
@@ -289,7 +306,7 @@ const showSearch = !staticExport;
                             if (grandchild.type === "page") {
                               return (
                                 <a
-                                  href={grandchild.url}
+                                href={withLang(grandchild.url)}
                                   class={`fd-sidebar-link fd-sidebar-child-link ${isActive(grandchild.url) ? 'fd-sidebar-link-active' : ''}`}
                                   data-active={isActive(grandchild.url) || undefined}
                                 >
@@ -317,9 +334,33 @@ const showSearch = !staticExport;
       </div>
     )}
 
-    {showThemeToggle && (
+    {(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%">
+          {locales.length > 0 && (
+            <div style="position:relative;display:inline-flex;align-items:center;flex-shrink:0">
+              <select
+                id="fd-locale-select"
+                aria-label="Select language"
+                data-default-locale={defaultLocale}
+                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)"
+              >
+                {locales.map((item) => (
+                  <option value={item} selected={item === activeLocale}>{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>
+          )}
+          {showThemeToggle && <ThemeToggle />}
+        </div>
       </div>
     )}
   </aside>
@@ -331,7 +372,7 @@ const showSearch = !staticExport;
 
 {showFloatingAI && (
   <FloatingAIChat
-    api="/api/docs"
+    api={withLang("/api/docs")}
     suggestedQuestions={aiConfig?.suggestedQuestions ?? []}
     aiLabel={aiConfig?.aiLabel ?? "AI"}
     position={aiConfig?.position ?? "bottom-right"}
@@ -393,4 +434,12 @@ const showSearch = !staticExport;
       overlay!.style.display = 'none';
     });
   });
+
+  document.getElementById('fd-locale-select')?.addEventListener('change', (event) => {
+    const target = event.target as HTMLSelectElement;
+    const url = new URL(window.location.href);
+    if (target.value) url.searchParams.set('lang', target.value);
+    else url.searchParams.delete('lang');
+    window.location.assign(`${url.pathname}${url.search}${url.hash}`);
+  });
 </script>

package/src/components/DocsPage.astro

@@ -4,6 +4,7 @@ const {
   tocStyle = "default",
   breadcrumbEnabled = true,
   entry = "docs",
+  locale = null,
   previousPage = null,
   nextPage = null,
   editOnGithub = null,
@@ -13,19 +14,34 @@ const {
 
 const pathname = Astro.url.pathname;
 const segments = pathname.split("/").filter(Boolean);
-const parentLabel = segments.length >= 2 ? segments[segments.length - 2].replace(/-/g, " ").replace(/\b\w/g, c => c.toUpperCase()) : "";
-const currentLabel = segments.length >= 2 ? segments[segments.length - 1].replace(/-/g, " ").replace(/\b\w/g, c => c.toUpperCase()) : "";
-const parentUrl = segments.length >= 2
-  ? "/" + segments.slice(0, segments.length - 1).join("/")
+const entryParts = entry.split("/").filter(Boolean);
+const contentSegments = segments.slice(entryParts.length);
+const parentLabel = contentSegments.length >= 2
+  ? contentSegments[contentSegments.length - 2].replace(/-/g, " ").replace(/\b\w/g, c => c.toUpperCase())
   : "";
+const currentLabel = contentSegments.length >= 2
+  ? contentSegments[contentSegments.length - 1].replace(/-/g, " ").replace(/\b\w/g, c => c.toUpperCase())
+  : "";
+const parentUrl = contentSegments.length >= 2
+  ? "/" + [...segments.slice(0, entryParts.length), ...contentSegments.slice(0, contentSegments.length - 1)].join("/")
+  : "";
+const llmsLangParam = locale ? `&lang=${encodeURIComponent(locale)}` : "";
+const withLang = (url: string) => {
+  if (!url || url.startsWith("#")) return url;
+  const parsed = new URL(url, Astro.url);
+  if (locale) parsed.searchParams.set("lang", locale);
+  else parsed.searchParams.delete("lang");
+  return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+};
+const localizedParentUrl = withLang(parentUrl);
 ---
 
 <div class="fd-page">
   <article class="fd-page-article" id="nd-page">
-    {breadcrumbEnabled && segments.length >= 2 && (
+    {breadcrumbEnabled && 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">{parentLabel}</a>
+          <a href={localizedParentUrl} class="fd-breadcrumb-parent fd-breadcrumb-link">{parentLabel}</a>
         </span>
         <span class="fd-breadcrumb-item">
           <span class="fd-breadcrumb-sep">/</span>
@@ -54,8 +70,8 @@ const parentUrl = segments.length >= 2
           )}
           {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>
           )}
           {lastModified && (
@@ -67,7 +83,7 @@ const parentUrl = segments.length >= 2
       {(previousPage || nextPage) && (
         <nav class="fd-page-nav" aria-label="Page navigation">
           {previousPage ? (
-            <a href={previousPage.url} class="fd-page-nav-card fd-page-nav-prev">
+            <a href={withLang(previousPage.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" />
@@ -78,7 +94,7 @@ const parentUrl = segments.length >= 2
             </a>
           ) : <div />}
           {nextPage ? (
-            <a href={nextPage.url} class="fd-page-nav-card fd-page-nav-next">
+            <a href={withLang(nextPage.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">
@@ -127,6 +143,20 @@ const parentUrl = segments.length >= 2
     const tocAside = document.getElementById('fd-toc');
     if (container && tocList) {
       const headings = container.querySelectorAll('h2[id], h3[id], h4[id]');
+      const activeLocale =
+        new URL(window.location.href).searchParams.get('lang') ||
+        new URL(window.location.href).searchParams.get('locale');
+      container.querySelectorAll('a[href]').forEach((link) => {
+        const href = link.getAttribute('href');
+        if (!href || href.startsWith('#') || /^(mailto:|tel:|javascript:)/i.test(href)) return;
+        try {
+          const url = new URL(href, window.location.origin);
+          if (url.origin !== window.location.origin) return;
+          if (activeLocale) url.searchParams.set('lang', activeLocale);
+          else url.searchParams.delete('lang');
+          link.setAttribute('href', `${url.pathname}${url.search}${url.hash}`);
+        } catch {}
+      });
       const isClerk = tocList.closest('[data-toc-style]')?.getAttribute('data-toc-style') === 'directional';
 
       const tocItems = [];

package/src/components/SearchDialog.astro

@@ -125,6 +125,29 @@ const { config = null } = Astro.props;
     } catch (e) {}
   }
 
+  function getActiveLocale() {
+    try {
+      var current = new URL(window.location.href);
+      return current.searchParams.get("lang") || current.searchParams.get("locale") || "";
+    } catch (e) {
+      return "";
+    }
+  }
+
+  function withLang(url) {
+    if (!url || url.charAt(0) === "#") return url;
+    try {
+      var parsed = new URL(url, window.location.origin);
+      if (parsed.origin !== window.location.origin) return url;
+      var locale = getActiveLocale();
+      if (locale) parsed.searchParams.set("lang", locale);
+      else parsed.searchParams.delete("lang");
+      return parsed.pathname + parsed.search + parsed.hash;
+    } catch (e) {
+      return url;
+    }
+  }
+
   function openDialog() {
     var dialog = getDialog();
     if (dialog) {
@@ -241,14 +264,15 @@ const { config = null } = Astro.props;
 
   function navigateToUrl(url, newTab) {
     if (!url) return;
+    var localizedUrl = withLang(url);
     if (newTab || url.startsWith("http")) {
       try {
-        window.open(url, "_blank", "noopener,noreferrer");
+        window.open(localizedUrl, "_blank", "noopener,noreferrer");
       } catch (err) {
-        window.location.assign(url);
+        window.location.assign(localizedUrl);
       }
     } else {
-      window.location.assign(url);
+      window.location.assign(localizedUrl);
     }
   }
 
@@ -352,9 +376,8 @@ const { config = null } = Astro.props;
     if (items[activeIndex]) {
       var it = items[activeIndex];
       saveRecent({ id: it.url, label: it.content || it.label, url: it.url });
-      if (it.url.startsWith("http")) window.open(it.url, "_blank", "noopener");
-      else window.location.href = it.url;
       closeDialog();
+      navigateToUrl(it.url, it.url.startsWith("http"));
     }
   }
 
@@ -375,7 +398,7 @@ const { config = null } = Astro.props;
     if (!q) return;
     debounceTimer = setTimeout(function () {
       if (getLoading()) getLoading().style.display = "flex";
-      fetch("/api/docs?query=" + encodeURIComponent(q))
+      fetch(withLang("/api/docs?query=" + encodeURIComponent(q)))
         .then(function (res) { return res.ok ? res.json() : []; })
         .then(function (data) {
           currentResults = Array.isArray(data) ? data : [];