feat(site): support site search

Author: anlyyao

package.json

@@ -149,6 +149,7 @@
     "rollup-plugin-styles": "^3.14.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
+    "semver": "^7.7.1",
     "tdesign-icons-view": "^0.3.4",
     "tdesign-site-components": "^0.15.6",
     "typescript": "^4.5.3",

site/docs/getting-started.en-US.md

@@ -0,0 +1,13 @@
+---
+title: React for Mobile
+description: TDesign Mobile React is a UI component library for React and Mobile application.
+spline: explain
+---
+
+## Installation
+
+### npm
+
+```bash
+npm i tdesign-mobile-react
+```

site/docs/overview.en-US.md

@@ -116,6 +116,7 @@ spline: explain
     </a>
   </div>
 </section>
+
 <h3>Form<em class="tag">14</em></h3>
 <section class="image-group">
   <div class="image-wrapper">
@@ -158,8 +159,8 @@ spline: explain
       <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-form.png" />
       <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-form-dark.png" />
       <p class="name">Form</p>
-    </a> -->
-  </div>
+    </a>
+  </div>-->
   <div class="image-wrapper">
     <a class="item" href="./components/input-en">
       <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-input.png" />

site/plugin-tdoc/md-to-react.js

@@ -164,10 +164,17 @@ const DEFAULT_TABS = [
   { tab: 'design', name: '指南' },
 ];
 
+const DEFAULT_EN_TABS = [
+  { tab: 'demo', name: 'DEMO' },
+  { tab: 'api', name: 'API' },
+  { tab: 'design', name: 'Guideline' },
+];
+
 // 解析 markdown 内容
 function customRender({ source, file, md }) {
   let { content, data } = matter(source);
   // console.log('data', data);
+  const isEn = file.endsWith('en-US.md');
 
   // md top data
   const pageData = {
@@ -177,15 +184,15 @@ function customRender({ source, file, md }) {
     description: '',
     isComponent: false,
     tdDocHeader: true,
-    tdDocTabs: DEFAULT_TABS,
+    tdDocTabs: !isEn ? DEFAULT_TABS : DEFAULT_EN_TABS,
     apiFlag: /#+\s*API/i,
     docClass: '',
     lastUpdated: Math.round(fs.statSync(file).mtimeMs),
     ...data,
   };
 
   // md filename
-  const reg = file.match(/src\/[\w-]+\/([\w-]+)\.md/);
+  const reg = file.match(/([\w-]+)\.?([\w-]+)?\.md/);
   const componentName = reg && reg[1];
 
   // split md

site/plugin-tdoc/transforms.js

@@ -9,35 +9,46 @@ let demoCodesImports = {};
 export default {
   before({ source, file }) {
     const resourceDir = path.dirname(file);
-    const reg = file.match(/src\/([\w-]+)\/([\w-]+)\.md/);
-    const name = reg && reg[1];
+    const reg = file.match(/([\w-]+)\.?([\w-]+)?\.md/);
+    const fileName = reg && reg[0];
+    const componentName = reg && reg[1];
+    const localeName = reg && reg[2];
     demoCodesImports = {};
 
-    // 统一换成 iwiki 文档内容
-    if (name && source.includes(':: BASE_DOC ::')) {
-      const docPath = path.resolve(__dirname, `../../src/_common/docs/mobile/api/${name}.md`);
-      if (fs.existsSync(docPath)) {
-        const baseDoc = fs.readFileSync(docPath, 'utf-8');
-        source = source.replace(':: BASE_DOC ::', baseDoc);
+    // 统一换成 common 文档内容
+    if (fileName && source.includes(':: BASE_DOC ::')) {
+      const localeDocPath = path.resolve(__dirname, `../../src/_common/docs/mobile/api/${fileName}`);
+      const defaultDocPath = path.resolve(__dirname, `../../src/_common/docs/mobile/api/${componentName}.md`);
+
+      let baseDoc = '';
+      if (fs.existsSync(localeDocPath)) {
+        // 优先载入语言版本
+        baseDoc = fs.readFileSync(localeDocPath, 'utf-8');
+      } else if (fs.existsSync(defaultDocPath)) {
+        // 回退中文默认版本
+        baseDoc = fs.readFileSync(defaultDocPath, 'utf-8');
       } else {
-        console.error(`未找到 ${docPath} 文件`);
+        console.error(`未找到 ${defaultDocPath} 文件`);
       }
+
+      source = source.replace(':: BASE_DOC ::', baseDoc);
     }
 
     // 替换成对应 demo 文件
     source = source.replace(/\{\{\s+(.+)\s+\}\}/g, (demoStr, demoFileName) => {
-      const tsDemoPath = path.resolve(resourceDir, `./_example/${demoFileName}.tsx`);
-      if (fs.existsSync(tsDemoPath)) {
-        return `\n::: demo _example/${demoFileName} ${name}\n:::\n`;
+      const defaultDemoPath = path.resolve(resourceDir, `./_example/${demoFileName}.tsx`);
+      const localeDemoPath = path.resolve(resourceDir, `../_example/${demoFileName}/${localeName}.tsx`);
+
+      if (fs.existsSync(localeDemoPath)) {
+        return `\n::: demo _example/.${localeName} ${componentName}\n:::\n`;
       }
 
-      const demoPath = path.resolve(resourceDir, `./_example/${demoFileName}.jsx`);
-      if (!fs.existsSync(demoPath)) {
-        console.log('\x1B[36m%s\x1B[0m', `${name} 组件需要实现 _example/${demoFileName}.tsx 示例!`);
+      if (!fs.existsSync(defaultDemoPath)) {
+        console.log('\x1B[36m%s\x1B[0m', `${componentName} 组件需要实现 _example/${demoFileName}.tsx 示例!`);
         return '\n<h3>DEMO (🚧建设中）...</h3>';
       }
 
-      return `\n::: demo _example/${demoFileName} ${name}\n:::\n`;
+      return `\n::: demo _example/${demoFileName} ${componentName}\n:::\n`;
     });
 
     source.replace(/:::\s*demo\s+([\\/.\w-]+)/g, (demoStr, relativeDemoPath) => {
@@ -48,6 +59,7 @@ export default {
 
     return source;
   },
+
   render({ source, file, md }) {
     const demoCodesDefsStr = Object.keys(demoCodesImports)
       .map((key) => demoCodesImports[key])

site/web/App.jsx

@@ -1,18 +1,25 @@
 import React, { useEffect, useRef, useState, lazy, Suspense } from 'react';
 import { BrowserRouter, Routes, Navigate, Route, useLocation, useNavigate, Outlet } from 'react-router-dom';
+import semver from 'semver';
 import siteConfig from './site.config';
 import { getRoute, filterVersions } from './utils';
 import packageJson from '@/package.json';
 
 const LazyDemo = lazy(() => import('./Demo'));
 
-const { docs: routerList } = JSON.parse(JSON.stringify(siteConfig).replace(/component:.+/g, ''));
+const { docs, enDocs } = JSON.parse(JSON.stringify(siteConfig).replace(/component:.+/g, ''));
+
+const docsMap = {
+  zh: docs,
+  en: enDocs,
+};
 
 const registryUrl =
   'https://service-edbzjd6y-1257786608.hk.apigw.tencentcs.com/release/npm/versions/tdesign-mobile-react';
 const currentVersion = packageJson.version.replace(/\./g, '_');
 
-const docRoutes = getRoute(siteConfig.docs, []);
+// eslint-disable-next-line import/no-named-as-default-member
+const docRoutes = [...getRoute(siteConfig.docs, []), ...getRoute(siteConfig.enDocs, [])];
 const renderRouter = docRoutes.map((nav, i) => {
   const LazyCom = lazy(nav.component);
 
@@ -36,37 +43,36 @@ function Components() {
   const tdHeaderRef = useRef();
   const tdDocAsideRef = useRef();
   const tdDocContentRef = useRef();
+  const tdSelectRef = useRef();
   const tdDocSearch = useRef();
 
-  const [versionOptions, setVersionOptions] = useState([]);
   const [version] = useState(currentVersion);
 
-  function changeVersion(version) {
-    if (version === currentVersion) return;
-    const historyUrl = `//${version}-tdesign-mobile-react.surge.sh`;
-    window.open(historyUrl, '_blank');
-  }
-
   function initHistoryVersions() {
     fetch(registryUrl)
       .then((res) => res.json())
       .then((res) => {
         const options = [];
-        const versions = filterVersions(Object.keys(res.versions).filter((v) => !v.includes('alpha')));
+        const versions = filterVersions(Object.keys(res.versions));
 
         versions.forEach((v) => {
           const nums = v.split('.');
+          if (nums[0] === '0' && nums[1] < 21) return false;
 
           options.unshift({ label: v, value: v.replace(/\./g, '_') });
         });
-        setVersionOptions(options);
+
+        tdSelectRef.current.options = options.sort((a, b) => (semver.gt(a.label, b.label) ? -1 : 1));
       });
   }
 
   useEffect(() => {
     tdHeaderRef.current.framework = 'react';
-    // tdDocSearch.current.docsearchInfo = { indexName: 'tdesign_doc_mobile_react' };
-    tdDocAsideRef.current.routerList = routerList;
+    tdDocSearch.current.docsearchInfo = { indexName: 'tdesign_doc_react_mobile' };
+
+    const isEn = window.location.pathname.endsWith('en');
+
+    tdDocAsideRef.current.routerList = isEn ? docsMap.en : docsMap.zh;
     tdDocAsideRef.current.onchange = ({ detail }) => {
       if (location.pathname === detail) return;
       tdDocContentRef.current.pageStatus = 'hidden';
@@ -83,20 +89,25 @@ function Components() {
       });
     };
 
-    // initHistoryVersions();
+    tdSelectRef.current.onchange = ({ detail }) => {
+      const { value: version } = detail;
+      if (version === currentVersion) return;
+
+      const historyUrl = `https://${version}-tdesign-mobile-react.surge.sh`;
+      window.open(historyUrl, '_blank');
+      tdSelectRef.current.value = currentVersion;
+    };
+
+    initHistoryVersions();
   }, [location, navigate]);
 
   return (
     <td-doc-layout>
       <td-header ref={tdHeaderRef} slot="header" platform="mobile">
-        {/* <td-doc-search slot="search" ref={tdDocSearch} /> */}
+        <td-doc-search slot="search" ref={tdDocSearch} />
       </td-header>
       <td-doc-aside ref={tdDocAsideRef} title="React for Mobile">
-        {/* {versionOptions.length ? (
-          <div slot="extra">
-            <Select popupProps={{ zIndex: 800 }} value={version} options={versionOptions} onChange={changeVersion} />
-          </div>
-        ) : null} */}
+        <td-select ref={tdSelectRef} value={version} slot="extra"></td-select>
       </td-doc-aside>
 
       <td-doc-content ref={tdDocContentRef} platform="mobile">
@@ -111,8 +122,8 @@ function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route exact path="/" element={<Navigate replace to="/mobile-react/getting-started" />} />
-        <Route exact path="/mobile-react" element={<Navigate replace to="/mobile-react/getting-started" />} />
+        <Route exact path="/" element={<Navigate replace to="/mobile-react/overview" />} />
+        <Route exact path="/mobile-react" element={<Navigate replace to="/mobile-react/overview" />} />
         <Route
           path="/mobile-react/demos/*"
           element={
@@ -124,7 +135,7 @@ function App() {
         <Route path="/mobile-react/*" element={<Components />}>
           {renderRouter}
         </Route>
-        <Route path="*" element={<Navigate replace to="/mobile-react/getting-started" />} />
+        <Route path="*" element={<Navigate replace to="/mobile-react/overview" />} />
       </Routes>
     </BrowserRouter>
   );

site/web/main.jsx

@@ -1,17 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { registerLocaleChange } from 'tdesign-site-components';
 import App from './App';
 
 import '../style/web/index.less';
 
-import 'tdesign-site-components';
 import 'tdesign-site-components/lib/styles/style.css';
 import 'tdesign-site-components/lib/styles/prism-theme.less';
 import 'tdesign-site-components/lib/styles/prism-theme-dark.less';
 
 // import icons webcomponents
 import 'tdesign-icons-view';
 
+registerLocaleChange();
 ReactDOM.render(
   <React.StrictMode>
     <App />