docs: sidebar i18n (#1756)

rainbow-me · Feb 7, 2024 · 4b30183 · 4b30183
1 parent 6489e26
commit 4b30183
Show file tree

Hide file tree

Showing 19 changed files with 177 additions and 36 deletions.
diff --git a/site/components/DocsLayout/DocsLayout.tsx b/site/components/DocsLayout/DocsLayout.tsx
@@ -27,6 +27,7 @@ import {
   navigationSidebarScroller,
   paginationItem,
 } from './DocsLayout.css';
+import { allDocs } from '.contentlayer/generated';
 
 export function DocsLayout({ children }: { children: React.ReactNode }) {
   const router = useRouter();
@@ -35,8 +36,16 @@ export function DocsLayout({ children }: { children: React.ReactNode }) {
   const currentPageIndex = allDocsRoutes.findIndex(
     (page) => page.slug === currentPageSlug,
   );
-  const previous = allDocsRoutes[currentPageIndex - 1];
-  const next = allDocsRoutes[currentPageIndex + 1];
+  const previous = allDocs.find(
+    (doc) =>
+      doc.slug === allDocsRoutes[currentPageIndex - 1]?.slug &&
+      doc.locale === router.locale,
+  );
+  const next = allDocs.find(
+    (doc) =>
+      doc.slug === allDocsRoutes[currentPageIndex + 1]?.slug &&
+      doc.locale === router.locale,
+  );
   const docsMobileMenuRef = React.useRef<HTMLDivElement>(null);
 
   const { isConnected } = useAccount();

diff --git a/site/components/Sidebar/Sidebar.tsx b/site/components/Sidebar/Sidebar.tsx
@@ -2,12 +2,16 @@ import { Box } from 'components/Box/Box';
 import { SearchIcon } from 'components/Icons/Search';
 import { SearchButton } from 'components/Search/Search';
 import { Text } from 'components/Text/Text';
+import { useTranslations } from 'next-intl';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { link } from './Sidebar.css';
+import { allDocs } from '.contentlayer/generated';
 
 export function Sidebar({ routes }) {
+  const { locale } = useRouter();
+  const t = useTranslations('docs.sidebar.section');
   return (
     <>
       <SearchButton
@@ -69,7 +73,7 @@ export function Sidebar({ routes }) {
       </SearchButton>
 
       {routes.map((route) => (
-        <Box key={route.label} marginBottom="7">
+        <Box key={route.section} marginBottom="7">
           <Text
             as="h3"
             variant="subhead"
@@ -79,11 +83,15 @@ export function Sidebar({ routes }) {
             marginLeft="5"
             weight="semibold"
           >
-            {route.label}
+            {t(route.section)}
           </Text>
           {route.pages.map((page) => (
-            <Link key={page.title} slug={page.slug}>
-              {page.title}
+            <Link key={page.slug} slug={page.slug}>
+              {
+                allDocs.find(
+                  (doc) => doc.slug === page.slug && doc.locale === locale,
+                ).title
+              }
             </Link>
           ))}
         </Box>

diff --git a/site/lib/docsRoutes.ts b/site/lib/docsRoutes.ts
@@ -1,50 +1,46 @@
 import { Doc } from '.contentlayer/generated';
 
-type PartialDoc = Pick<Doc, 'title'> & Pick<Doc, 'slug'>;
+type PartialDoc = Pick<Doc, 'slug'>;
 
 export type RouteProps = {
-  label: string;
+  section: string;
   pages: PartialDoc[];
-  section?: string;
 };
 
 export const docsRoutes: RouteProps[] = [
   {
-    label: 'Overview',
-    pages: [
-      { title: 'Introduction', slug: 'introduction' },
-      { title: 'Migration Guide', slug: 'migration-guide' },
-    ],
+    section: 'overview',
+    pages: [{ slug: 'introduction' }, { slug: 'migration-guide' }],
   },
 
   {
-    label: 'Getting Started',
+    section: 'getting_started',
     pages: [
-      { title: 'Installation', slug: 'installation' },
-      { title: 'ConnectButton', slug: 'connect-button' },
-      { title: 'Modal Sizes', slug: 'modal-sizes' },
-      { title: 'Theming', slug: 'theming' },
-      { title: 'Chains', slug: 'chains' },
-      { title: 'Localization', slug: 'localization' },
-      { title: 'Authentication', slug: 'authentication' },
-      { title: 'Recent Transactions', slug: 'recent-transactions' },
+      { slug: 'installation' },
+      { slug: 'connect-button' },
+      { slug: 'modal-sizes' },
+      { slug: 'theming' },
+      { slug: 'chains' },
+      { slug: 'localization' },
+      { slug: 'authentication' },
+      { slug: 'recent-transactions' },
     ],
   },
 
   {
-    label: 'Advanced',
+    section: 'advanced',
     pages: [
-      { title: 'Modal Hooks', slug: 'modal-hooks' },
-      { title: 'Custom ConnectButton', slug: 'custom-connect-button' },
-      { title: 'Custom Theme', slug: 'custom-theme' },
-      { title: 'Custom Wallet List', slug: 'custom-wallet-list' },
-      { title: 'Custom Wallets', slug: 'custom-wallets' },
-      { title: 'Custom Chains', slug: 'custom-chains' },
-      { title: 'Custom App Info', slug: 'custom-app-info' },
-      { title: 'Custom Avatars', slug: 'custom-avatars' },
-      { title: 'Custom Authentication', slug: 'custom-authentication' },
-      { title: 'WalletButton', slug: 'wallet-button' },
-      { title: 'Cool Mode', slug: 'cool-mode' },
+      { slug: 'modal-hooks' },
+      { slug: 'custom-connect-button' },
+      { slug: 'custom-theme' },
+      { slug: 'custom-wallet-list' },
+      { slug: 'custom-wallets' },
+      { slug: 'custom-chains' },
+      { slug: 'custom-app-info' },
+      { slug: 'custom-avatars' },
+      { slug: 'custom-authentication' },
+      { slug: 'wallet-button' },
+      { slug: 'cool-mode' },
     ],
   },
 ];

diff --git a/site/locales/ar.json b/site/locales/ar.json
@@ -41,5 +41,14 @@
     "meta": {
       "description": "أفضل طريقة لتوصيل المحفظة 🌈"
     }
+  },
+  "docs": {
+    "sidebar": {
+      "section": {
+        "overview": "نظرة عامة",
+        "getting_started": "بدء الاستخدام",
+        "advanced": "متقدم"
+      }
+    }
   }
 }
diff --git a/site/locales/en-US.json b/site/locales/en-US.json
@@ -41,5 +41,14 @@
     "meta": {
       "description": "The best way to connect a wallet 🌈"
     }
+  },
+  "docs": {
+    "sidebar": {
+      "section": {
+        "overview": "Overview",
+        "getting_started": "Getting Started",
+        "advanced": "Advanced"
+      }
+    }
   }
 }
diff --git a/site/locales/es-419.json b/site/locales/es-419.json
@@ -41,5 +41,14 @@
     "meta": {
       "description": "La mejor manera de conectar una billetera 🌈"
     }
+  },
+  "docs": {
+    "sidebar": {
+      "section": {
+        "overview": "Visión General",
+        "getting_started": "Primeros Pasos",
+        "advanced": "Avanzado"
+      }
+    }
   }
 }
diff --git a/site/locales/fr.json b/site/locales/fr.json
@@ -41,5 +41,14 @@
     "meta": {
       "description": "La meilleure façon de connecter un portefeuille 🌈"
     }
+  },
+  "docs": {
+    "sidebar": {
+      "section": {
+        "overview": "Aperçu",
+        "getting_started": "Prise en main",
+        "advanced": "Avancé"
+      }
+    }
   }
 }
diff --git a/site/locales/hi.json b/site/locales/hi.json
@@ -41,5 +41,14 @@
     "meta": {
       "description": "एक वॉलेट कनेक्ट करने का सबसे अच्छा तरीका 🌈"
     }
+  },
+  "docs": {
+    "sidebar": {
+      "section": {
+        "overview": "अवलोकन",
+        "getting_started": "आरंभ कैसे करें",
+        "advanced": "उन्नत"
+      }
+    }
   }
 }
diff --git a/site/locales/id.json b/site/locales/id.json
@@ -41,5 +41,14 @@
     "meta": {
       "description": "Cara terbaik untuk menghubungkan dompet 🌈"
     }
+  },
+  "docs": {
+    "sidebar": {
+      "section": {
+        "overview": "Ikhtisar",
+        "getting_started": "Memulai",
+        "advanced": "Lanjutan"
+      }
+    }
   }
 }
diff --git a/site/locales/ja.json b/site/locales/ja.json
@@ -41,5 +41,14 @@
     "meta": {
       "description": "ウォレットを接続する最良の方法 🌈"
     }
+  },
+  "docs": {
+    "sidebar": {
+      "section": {
+        "overview": "概要",
+        "getting_started": "入門",
+        "advanced": "高度な設定"
+      }
+    }
   }
 }
diff --git a/site/locales/ko.json b/site/locales/ko.json
@@ -41,5 +41,14 @@
     "meta": {
       "description": "지갑을 연결하는 최고의 방법 🌈"
     }
+  },
+  "docs": {
+    "sidebar": {
+      "section": {
+        "overview": "개요",
+        "getting_started": "시작하기",
+        "advanced": "고급"
+      }
+    }
   }
 }
diff --git a/site/locales/pt-BR.json b/site/locales/pt-BR.json
@@ -41,5 +41,14 @@
     "meta": {
       "description": "A melhor maneira de conectar uma carteira 🌈"
     }
+  },
+  "docs": {
+    "sidebar": {
+      "section": {
+        "overview": "Visão Geral",
+        "getting_started": "Introdução",
+        "advanced": "Avançado"
+      }
+    }
   }
 }
diff --git a/site/locales/ru.json b/site/locales/ru.json
@@ -41,5 +41,14 @@
     "meta": {
       "description": "Лучший способ подключить кошелек 🌈"
     }
+  },
+  "docs": {
+    "sidebar": {
+      "section": {
+        "overview": "Обзор",
+        "getting_started": "Начало работы",
+        "advanced": "Продвинутый уровень"
+      }
+    }
   }
 }
diff --git a/site/locales/th.json b/site/locales/th.json
@@ -41,5 +41,14 @@
     "meta": {
       "description": "วิธีที่ดีที่สุดในการเชื่อมต่อกระเป๋าเงิน 🌈"
     }
+  },
+  "docs": {
+    "sidebar": {
+      "section": {
+        "overview": "ภาพรวม",
+        "getting_started": "เริ่มต้นใช้งาน",
+        "advanced": "ขั้นสูง"
+      }
+    }
   }
 }
diff --git a/site/locales/tr.json b/site/locales/tr.json
@@ -41,5 +41,14 @@
     "meta": {
       "description": "Bir cüzdanı bağlamanın en iyi yolu 🌈"
     }
+  },
+  "docs": {
+    "sidebar": {
+      "section": {
+        "overview": "Genel Bakış",
+        "getting_started": "Başlarken",
+        "advanced": "Gelişmiş"
+      }
+    }
   }
 }
diff --git a/site/locales/ua.json b/site/locales/ua.json
@@ -41,5 +41,14 @@
     "meta": {
       "description": "Найкращий спосіб підключення гаманця 🌈"
     }
+  },
+  "docs": {
+    "sidebar": {
+      "section": {
+        "overview": "Огляд",
+        "getting_started": "Початок роботи",
+        "advanced": "Розширені можливості"
+      }
+    }
   }
 }
diff --git a/site/locales/zh-CN.json b/site/locales/zh-CN.json
@@ -41,5 +41,14 @@
     "meta": {
       "description": "连接钱包的最佳方式 🌈"
     }
+  },
+  "docs": {
+    "sidebar": {
+      "section": {
+        "overview": "概览",
+        "getting_started": "入门",
+        "advanced": "高级"
+      }
+    }
   }
 }
diff --git a/site/pages/docs/[slug].tsx b/site/pages/docs/[slug].tsx
@@ -44,7 +44,7 @@ export async function getStaticProps({ params, locale }) {
     for (const page of curr.pages) {
       if (page.slug === params.slug) {
         // biome-ignore lint/style/noParameterAssign: TODO
-        acc = curr.label;
+        acc = doc.title;
         break;
       }
     }
@@ -55,6 +55,7 @@ export async function getStaticProps({ params, locale }) {
     props: {
       doc,
       sectionName,
+      messages: (await import(`../../locales/${locale}.json`)).default,
     },
   };
 }
diff --git a/site/pages/guides/[slug].tsx b/site/pages/guides/[slug].tsx
@@ -40,6 +40,7 @@ export async function getStaticProps({ params, locale }) {
   return {
     props: {
       guide,
+      messages: (await import(`../../locales/${locale}.json`)).default,
     },
   };
 }