feat: WIP i18n

playgrounds/i18n/docs/pages/index.mdx

@@ -0,0 +1,13 @@
+# Overview
+
+**i18n** is an example implementation of a multi-lingual supported site that allows for more than one language to be supported.
+
+In the top right, look for this symbol with additional options as a dropdown with different languages offered.
+
+<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <title>Language</title>
+  <path fill="currentColor" d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "></path>
+</svg>
+
+
+

playgrounds/i18n/docs/pages/translated/index.mdx

@@ -0,0 +1,3 @@
+# Translated
+
+An example of a page that is translated.

playgrounds/i18n/docs/pages/zh/index.mdx

@@ -0,0 +1,13 @@
+# 概述
+
+**i18n** 是多语言支持站点的示例实现，它允许支持多种语言。
+
+在右上角，通过提供不同语言的下拉菜单查找此符号以及其他选项。
+
+<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <title>Language</title>
+  <path fill="currentColor" d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "></path>
+</svg>
+
+
+

playgrounds/i18n/docs/pages/zh/translated/index.mdx

@@ -0,0 +1,3 @@
+# 已翻译
+
+已翻译页面的示例。

playgrounds/i18n/docs/styles.css

@@ -0,0 +1,3 @@
+.vocs_NavLogo_logoImage {
+  height: 50% !important;
+}

playgrounds/i18n/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "playgrounds-i18n",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "node --import tsx/esm ../../src/cli/index.ts dev",
+    "build": "NODE_ENV=production node --import tsx/esm ../../src/cli/index.ts build",
+    "preview": "node --import tsx/esm ../../src/cli/index.ts preview",
+    "dist:dev": "vocs dev",
+    "dist:build": "NODE_ENV=production vocs build",
+    "dist:preview": "vocs preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.17.0",
+    "vocs": "workspace:*"
+  }
+}

playgrounds/i18n/vocs.config.ts

@@ -0,0 +1,137 @@
+import { defineConfig } from '../../src/index.js'
+
+export default defineConfig({
+  editLink: {
+    // NOTE: the order is important
+    '/': {
+      pattern: 'https://github.com/wagmi-dev/vocs/edit/main/site/pages/:path',
+      text: 'Suggest changes to this page',
+      // Optional
+      // lastUpdated: 'Last updated'
+    },
+    '/zh': {
+      pattern: 'https://github.com/wagmi-dev/vocs/edit/main/site/pages/:path',
+      text: '建议对此页面进行更改',
+      lastUpdated: '最后更新时间',
+    },
+  },
+  footerNav: {
+    // NOTE: the order is important
+    '/': {
+      previous: 'Previous',
+      next: 'Next',
+    },
+    '/zh': {
+      previous: '以前的',
+      next: '下一个',
+    },
+  },
+  search: {
+    // NOTE: the order is important
+    '/': {
+      placeholder: 'Search',
+      navigate: 'Navigate',
+      select: 'Select',
+      close: 'Close',
+      reset: 'Reset',
+      noResults: 'No results for',
+      labelClose: 'Close search dialog',
+    },
+    '/zh': {
+      placeholder: '搜索',
+      navigate: '导航',
+      select: '选择',
+      close: '关闭',
+      reset: '重置',
+      noResults: '没有结果',
+      labelClose: '关闭搜索对话框',
+    },
+  },
+  sidebar: {
+    // NOTE: the order is important
+    '/': [
+      {
+        text: 'Overview',
+        link: '/',
+      },
+      {
+        text: 'Example',
+        items: [
+          {
+            text: 'Translated',
+            link: '/translated',
+          },
+        ],
+      },
+    ],
+    '/zh': [
+      {
+        text: '概述',
+        link: '/zh',
+      },
+      {
+        text: '例子',
+        items: [
+          {
+            text: '已翻译',
+            link: '/zh/translated',
+          },
+        ],
+      },
+    ],
+  },
+  defaultLocale: {
+    label: 'English',
+    lang: 'en',
+  },
+  locales: {
+    something: {
+      label: '简体中文',
+      lang: 'zh',
+    },
+  },
+  title:
+    // NOTE: the order is important
+    {
+      '/': 'i18n',
+      '/zh': 'i18n 中文',
+    },
+  description:
+    // NOTE: the order is important and this will show up when mdx description not defined
+    {
+      '/': 'English description',
+      '/zh': '中文说明',
+    },
+  topNav: {
+    '/': [
+      {
+        text: 'Overview',
+        link: '/',
+      },
+      {
+        text: 'Example',
+        items: [
+          {
+            text: 'Translated',
+            link: '/translated',
+          },
+        ],
+      },
+    ],
+    '/zh': [
+      {
+        text: '概述',
+        link: '/zh',
+      },
+      {
+        text: '例子',
+        items: [
+          {
+            text: '已翻译',
+            link: '/zh/translated',
+          },
+        ],
+      },
+    ],
+  },
+})

src/app/components/DesktopSearch.tsx

@@ -2,13 +2,28 @@ import * as Dialog from '@radix-ui/react-dialog'
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
 import { useEffect, useState } from 'react'
 
+import { useLocation } from 'react-router-dom'
+import { useConfig } from '../hooks/useConfig.js'
 import { useSearchIndex } from '../hooks/useSearchIndex.js'
 import * as styles from './DesktopSearch.css.js'
 import { SearchDialog } from './SearchDialog.js'
 
 export function DesktopSearch() {
   useSearchIndex()
   const [open, setOpen] = useState(false)
+  const config = useConfig()
+  const { pathname } = useLocation()
+
+  let pathKey = ''
+  if (typeof config?.title === 'object' && Object.keys(config?.title ?? {}).length > 0) {
+    let keys: string[] = []
+    keys = Object.keys(config?.title).filter((key) => pathname.startsWith(key))
+    pathKey = keys[keys.length - 1]
+  }
+
+  const configSearch = !config.search?.placeholder
+    ? (config?.search as any)?.[pathKey]
+    : config.search
 
   useEffect(() => {
     function keyDownHandler(event: KeyboardEvent) {
@@ -37,7 +52,7 @@ export function DesktopSearch() {
       <Dialog.Trigger asChild>
         <button className={styles.search} type="button">
           <MagnifyingGlassIcon style={{ marginTop: 2 }} />
-          Search
+          {configSearch.placeholder ?? 'Search'}
           <div className={styles.searchCommand}>
             <div
               style={{