feat(site): add Compose and VirtualScroll tag

xiejay97 · xiejay97 · commit 140751541939 · 2022-08-18T17:20:04.000+08:00
close #183
diff --git a/packages/site/src/app/components/route/component/ComponentRouteArticle.scss b/packages/site/src/app/components/route/component/ComponentRouteArticle.scss
@@ -31,6 +31,7 @@
   align-items: center;
   justify-content: center;
   padding: 0 8px;
+  font: inherit;
   font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   font-weight: 500;
diff --git a/packages/site/src/app/components/route/component/ComponentRouteArticle.tsx b/packages/site/src/app/components/route/component/ComponentRouteArticle.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 
 import { AppRouteArticle } from '../RouteArticle';
 import marked, { toString } from '../utils';
@@ -10,13 +11,15 @@ export interface AppComponentRouteArticleProps {
   subtitle: string;
   description: number[];
   aria: string;
+  compose: string;
+  'virtual-scroll': string;
   api: number[];
   demos: React.ReactNode;
   links: { href: string; title: string }[];
 }
 
 export function AppComponentRouteArticle(props: AppComponentRouteArticleProps) {
-  const { title, subtitle, aria, demos, links } = props;
+  const { title, subtitle, aria, compose, 'virtual-scroll': virtualScroll, demos, links } = props;
 
   const description = marked(toString(props.description));
   const api = marked(toString(props.api));
@@ -70,6 +73,22 @@ export function AppComponentRouteArticle(props: AppComponentRouteArticleProps) {
             </a>
           </li>
         )}
+        {compose && (
+          <li>
+            <Link className="app-component-route-article__tag-link" to="/components/Compose">
+              <img src="/assets/imgs/compose.png" alt="Compose" height={24} width={20} />
+              <span>Compose</span>
+            </Link>
+          </li>
+        )}
+        {virtualScroll && (
+          <li>
+            <Link className="app-component-route-article__tag-link" to="/components/VirtualScroll">
+              <img src="/assets/imgs/virtual-scroll.png" alt="Compose" height={16} width={16} />
+              <span>VirtualScroll</span>
+            </Link>
+          </li>
+        )}
       </ul>
       <h2 id="component-route-examples" className="app-component-route-article__examples">
         {t('Examples')}
diff --git a/packages/site/src/assets/imgs/compose.png b/packages/site/src/assets/imgs/compose.png
diff --git a/packages/site/src/assets/imgs/virtual-scroll.png b/packages/site/src/assets/imgs/virtual-scroll.png
diff --git a/packages/ui/components/auto-complete/README.md b/packages/ui/components/auto-complete/README.md
@@ -2,6 +2,8 @@
 group: Data Entry
 title: AutoComplete
 aria: combobox
+compose: true
+virtual-scroll: true
 ---
 
 ## API
diff --git a/packages/ui/components/button/README.md b/packages/ui/components/button/README.md
@@ -2,6 +2,7 @@
 group: General
 title: Button
 aria: button
+compose: true
 ---
 
 ## API
diff --git a/packages/ui/components/cascader/README.md b/packages/ui/components/cascader/README.md
@@ -2,6 +2,8 @@
 group: Data Entry
 title: Cascader
 aria: combobox
+compose: true
+virtual-scroll: true
 ---
 
 ## API
diff --git a/packages/ui/components/date-picker/README.md b/packages/ui/components/date-picker/README.md
@@ -1,6 +1,7 @@
 ---
 group: Data Entry
 title: DatePicker
+compose: true
 ---
 
 ## API
diff --git a/packages/ui/components/form/demos/13.SupportComponents.md b/packages/ui/components/form/demos/13.SupportComponents.md
@@ -6,11 +6,11 @@ title:
 
 # en-US
 
-All supported components are shown here.
+All components under Data Entry are supported.
 
 # zh-Hant
 
-这里展示了所有受支持的组件。
+支持数据录入下所有的组件。
 
 ```tsx
 import { useState } from 'react';
diff --git a/packages/ui/components/input/README.md b/packages/ui/components/input/README.md
@@ -1,6 +1,7 @@
 ---
 group: Data Entry
 title: Input
+compose: true
 ---
 
 ## API
diff --git a/packages/ui/components/select/README.md b/packages/ui/components/select/README.md
@@ -2,6 +2,8 @@
 group: Data Entry
 title: Select
 aria: combobox
+compose: true
+virtual-scroll: true
 ---
 
 ## API
diff --git a/packages/ui/components/time-picker/README.md b/packages/ui/components/time-picker/README.md
@@ -1,6 +1,7 @@
 ---
 group: Data Entry
 title: TimePicker
+compose: true
 ---
 
 ## API
diff --git a/packages/ui/components/transfer/README.md b/packages/ui/components/transfer/README.md
@@ -1,6 +1,7 @@
 ---
 group: Data Entry
 title: Transfer
+virtual-scroll: true
 ---
 
 ## API
diff --git a/packages/ui/components/tree-select/README.md b/packages/ui/components/tree-select/README.md
@@ -2,6 +2,8 @@
 group: Data Entry
 title: TreeSelect
 aria: combobox
+compose: true
+virtual-scroll: true
 ---
 
 ## API
diff --git a/packages/ui/components/tree/README.md b/packages/ui/components/tree/README.md
@@ -2,6 +2,7 @@
 group: Data Entry
 title: Tree
 aria: treeview
+virtual-scroll: true
 ---
 
 ## API
diff --git a/tools/executors/site/build-base/impl.js b/tools/executors/site/build-base/impl.js
@@ -165,11 +165,13 @@ class GenerateSite {
         }
     }
     generateComponentRoute(file) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const enMeta = yamlFront.loadFront((0, fs_extra_2.readFileSync)(path_1.default.join(file.path, 'README.md')));
         const zhMeta = yamlFront.loadFront((0, fs_extra_2.readFileSync)(path_1.default.join(file.path, 'README.zh-Hant.md')));
         const meta = {
             aria: (_a = enMeta.aria) !== null && _a !== void 0 ? _a : '',
+            compose: (_b = enMeta.compose) !== null && _b !== void 0 ? _b : '',
+            'virtual-scroll': (_c = enMeta['virtual-scroll']) !== null && _c !== void 0 ? _c : '',
             title: {
                 'en-US': enMeta.title,
                 'zh-Hant': zhMeta.title,
@@ -204,7 +206,7 @@ class GenerateSite {
             let importStr = '';
             const demoList = [];
             for (const demoFile of (0, fs_extra_2.readdirSync)(path_1.default.join(file.path, 'demos'))) {
-                const order = (_b = demoFile.match(/^[0-9]+/)) === null || _b === void 0 ? void 0 : _b[0];
+                const order = (_d = demoFile.match(/^[0-9]+/)) === null || _d === void 0 ? void 0 : _d[0];
                 if (order) {
                     const demo = this.generateComponentDemo({
                         name: demoFile,
@@ -255,6 +257,8 @@ class GenerateSite {
   subtitle: '__subtitle__',
   description: [__description__],
   aria: '__aria__',
+  compose: '__compose__',
+  'virtual-scroll': '__virtual-scroll__',
   api: [__api__],
   demos: (
     <>
@@ -267,6 +271,8 @@ class GenerateSite {
                 routeArticleProps = routeArticleProps.replace(/__title__/g, meta.title['en-US']);
                 routeArticleProps = routeArticleProps.replace(/__subtitle__/g, meta.title[lang]);
                 routeArticleProps = routeArticleProps.replace(/__aria__/g, meta.aria);
+                routeArticleProps = routeArticleProps.replace(/__compose__/g, meta.compose);
+                routeArticleProps = routeArticleProps.replace(/__virtual-scroll__/g, meta['virtual-scroll']);
                 routeArticleProps = routeArticleProps.replace(/__links__/g, linksStr);
                 const article = meta.__content[lang];
                 const description = (_a = article.match(/^[\s\S]*(?=## API)/g)) === null || _a === void 0 ? void 0 : _a[0];
diff --git a/tools/executors/site/build-base/impl.ts b/tools/executors/site/build-base/impl.ts
@@ -39,6 +39,8 @@ interface ComponentMeta {
   title: string;
   img?: string;
   aria?: string;
+  compose?: string;
+  'virtual-scroll'?: string;
   __content: string;
 }
 
@@ -175,6 +177,8 @@ class GenerateSite {
     const zhMeta: ComponentMeta = yamlFront.loadFront(readFileSync(path.join(file.path, 'README.zh-Hant.md')));
     const meta = {
       aria: enMeta.aria ?? '',
+      compose: enMeta.compose ?? '',
+      'virtual-scroll': enMeta['virtual-scroll'] ?? '',
       title: {
         'en-US': enMeta.title,
         'zh-Hant': zhMeta.title,
@@ -271,6 +275,8 @@ class GenerateSite {
   subtitle: '__subtitle__',
   description: [__description__],
   aria: '__aria__',
+  compose: '__compose__',
+  'virtual-scroll': '__virtual-scroll__',
   api: [__api__],
   demos: (
     <>
@@ -283,6 +289,8 @@ class GenerateSite {
         routeArticleProps = routeArticleProps.replace(/__title__/g, meta.title['en-US']);
         routeArticleProps = routeArticleProps.replace(/__subtitle__/g, meta.title[lang]);
         routeArticleProps = routeArticleProps.replace(/__aria__/g, meta.aria);
+        routeArticleProps = routeArticleProps.replace(/__compose__/g, meta.compose);
+        routeArticleProps = routeArticleProps.replace(/__virtual-scroll__/g, meta['virtual-scroll']);
         routeArticleProps = routeArticleProps.replace(/__links__/g, linksStr);
 
         const article = meta.__content[lang];
