refactor: migrate site to nutui-react

.gitignore

@@ -6,6 +6,7 @@ node_modules
 .npmrc
 /dist
 /dist-demo
+/dist-site
 /libs
 /jd/upload.js
 # yarn.lock

index.html

@@ -49,7 +49,7 @@
       continue.</strong>
   </noscript>
   <div id="doc"></div>
-  <script type="module" src="/src/sites/doc/main.tsx"></script>
+  <script type="module" src="/src/sites/sites-react/doc/main.tsx"></script>
   <script>
     //分享配置
     var shareOption = {

package.json

@@ -52,6 +52,7 @@
     "changelog": "node ./scripts/generate-changelog.js",
     "clone:jdharmony": "node ./scripts/harmony/clone-jdharmony.js",
     "dev": "vite --open --force",
+    "dev:site:taro": "tsc && vite --force --config vite.config.site.taro.ts",
     "dev:rtl": "VITE_RTL=rtl vite --open --force",
     "dev:jrkf": "VITE_APP_PROJECT_ID=jrkf vite --open --force",
     "dev:taro:rn:dark": "THEME=dark pnpm dev:taro:rn",
@@ -64,12 +65,14 @@
     "build": "node ./scripts/replace-css-var.js && npm run checked && node scripts/build.mjs",
     "build:taro": "node ./scripts/replace-css-var.js && npm run checked:taro && node scripts/build-taro.mjs",
     "build:taro:jmapp": "npm run checked:taro && VITE_APP_PROJECT_ID=jmapp node scripts/build-taro.mjs",
-    "build:site": "npm run checked && vite build --config vite.config.site.ts",
-    "build:site:jmapp": "npm run checked && VITE_APP_PROJECT_ID=jmapp vite build",
-    "build:taro:site": "pnpm update:taro:entry && npm run checked:taro && npm run generate:file:taro:pages && pnpm --dir ./packages/nutui-taro-demo build:h5",
-    "build:jdtaro:site": "pnpm update:taro:entry && npm run checked:taro && npm run generate:file:taro:pages && JD=1 pnpm --dir ./packages/nutui-taro-demo build:h5",
-    "build:taro:site:jmapp": "npm run checked:taro && VITE_APP_PROJECT_ID=jmapp npm run generate:file:taro:pages && pnpm --dir ./packages/nutui-taro-demo build:h5",
-    "build:jstaro:site:jmapp": "npm run checked:taro && VITE_APP_PROJECT_ID=jmapp npm run generate:file:taro:pages && JD=1 pnpm --dir ./packages/nutui-taro-demo build:h5",
+    "build:demo": "npm run checked && vite build --config vite.config.demo.ts",
+    "build:demo:jmapp": "npm run checked && VITE_APP_PROJECT_ID=jmapp vite build",
+    "build:taro:demo": "pnpm update:taro:entry && npm run checked:taro && npm run generate:file:taro:pages && pnpm --dir ./packages/nutui-taro-demo build:h5",
+    "build:site": "vite build --config vite.config.site.ts",
+    "build:taro:site": "vite build --config vite.config.site.taro.ts",
+    "build:jdtaro:demo": "pnpm update:taro:entry && npm run checked:taro && npm run generate:file:taro:pages && JD=1 pnpm --dir ./packages/nutui-taro-demo build:h5",
+    "build:taro:demo:jmapp": "npm run checked:taro && VITE_APP_PROJECT_ID=jmapp npm run generate:file:taro:pages && pnpm --dir ./packages/nutui-taro-demo build:h5",
+    "build:jstaro:demo:jmapp": "npm run checked:taro && VITE_APP_PROJECT_ID=jmapp npm run generate:file:taro:pages && JD=1 pnpm --dir ./packages/nutui-taro-demo build:h5",
     "generate:file": "node scripts/generate-nutui.js",
     "generate:themes": "node scripts/generate-themes.js",
     "generate:themes-dev": "node scripts/generate-themes-dev.js",

src/packages/popup/doc.taro.md

@@ -52,14 +52,6 @@ import { Popup } from '@nutui/nutui-react-taro'
 
 :::
 
-<!-- ### 指定节点挂载
-
-:::demo
-
-<CodeBlock src='taro/demo6.tsx'></CodeBlock>
-
-::: -->
-
 ### 多层堆叠
 
 :::demo
@@ -110,7 +102,7 @@ import { Popup } from '@nutui/nutui-react-taro'
 | description | 子标题/描述部分 | `ReactNode` | `-` |
 | destroyOnClose | 组件不可见时，卸载内容 | `boolean` | `false` |
 | round | 是否显示圆角 | `boolean` | `false` |
-| portal | 指定节点挂载 | `HTMLElement` \| `(() => HTMLElement)` | null` | `null` |
+| portal | 指定节点挂载 | ``HTMLElement` \| `(() => HTMLElement)` \| null`` | `null` |
 | onClick | 点击弹框时触发 | `event: MouseEvent` | `-` |
 | onCloseIconClick | 点击关闭图标时触发 | `event: MouseEvent` | `-` |
 | onOpen | 打开弹框时触发 | `-` | `-` |

src/packages/uploader/doc.en-US.md

@@ -102,25 +102,25 @@ import { Uploader } from '@nutui/nutui-react'
 | deletable | Whether or not to show the delete button | `boolean` | `true` |
 | method | The http method for the upload request | `string` | `post` | | previewType
 | previewType | The built-in style of the uploaded list, two basic styles are supported picture, list | `string`
-| capture | Picture [selection mode] (<https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture>"), directly bring up the camera | `string` | `false` | maxFileSize
+| capture | Picture [selection mode](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture), directly bring up the camera | `string` | `false` | maxFileSize
 | maxFileSize | You can set the maximum file size (in bytes) for uploading | `number` \| `string` | `Number.MAX_VALUE` |
 | maxCount | File upload count limit | `number` \| `string` | `1` |
 | fit | Picture fill mode | `contain` \| `cover` \| `fill` \| `none` \| `scale-down` | `cover` |
 | clearInput | If or not you want to clear the `input` content, set it to `true` to support selecting the same file to upload over and over again | `boolean` | `true` |
-| accept | Allowed file types to be uploaded, [Details] ("<https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%> B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B") | `string` | `*` |
-| uploadIcon | uploadRegion <a href=“#/zh-CN/icon”>Icon Name</a> | `React.ReactNode` | `-` |
+| accept | Allowed file types to be uploaded, [Details](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | `string` | `*` |
+| uploadIcon | uploadRegion <a href="#/zh-CN/icon">Icon Name</a> | `React.ReactNode` | `-` |
 | deleteIcon | Delete the icon name of the region | `React.ReactNode` | `-` |
 | uploadLabel | Text below the image in the upload area | `React.
 | multiple | Whether to support file multi-selection |`boolean`|`false`|
 | disabled | Whether to disable file uploading |`boolean`|`false`|
-| beforeUpload | The beforeUpload function needs to return a`Promise`object |`(file: File[]) => Promise<File[] \| boolean>`|`-`|
-| beforeDelete | Callback when deleting a file, does not remove it if the return value is false. Supports returning a`Promise`object, which is not removed when resolve(false) or reject |`(file: FileItem, files: FileItem[]) => boolean`|`-`|
-| onOversize | Triggered when file size exceeds limit |`(file: File[]) => void`|`-`|
+| beforeUpload | The beforeUpload function needs to return a`Promise`object |```(file: File[]) => Promise<File[] \| boolean>```|`-`|
+| beforeDelete | Callback when deleting a file, does not remove it if the return value is false. Supports returning a`Promise`object, which is not removed when resolve(false) or reject |```(file: FileItem, files: FileItem[]) => boolean```|`-`|
+| onOversize | Triggered when file size exceeds limit |```(file: File[]) => void```|`-`|
 | onOverCount | Triggered when the number of files exceeds the limit |`(count: number) => void`|`-`|
-| onChange | Triggered when the list of uploaded files changes |`(files: FileItem[]) => void`|`-`|
-| onDelete | Triggered when clicked to delete a file |`(file: FileItem, files: FileItem[]) => void`|`-`|
-| onFileItemClick | Triggered when a file is uploaded successfully |`(file: FileItem, index: number) => void`|`-`|
-| onUploadQueueChange | Triggered when the image upload queue changes |`(tasks: FileItem[]) => void`|`-` |
+| onChange | Triggered when the list of uploaded files changes |```(files: FileItem[]) => void```|`-`|
+| onDelete | Triggered when clicked to delete a file |```(file: FileItem, files: FileItem[]) => void```|`-`|
+| onFileItemClick | Triggered when a file is uploaded successfully |```(file: FileItem, index: number) => void```|`-`|
+| onUploadQueueChange | Triggered when the image upload queue changes |```(tasks: FileItem[]) => void```|`-` |
 
 > Note: accept, capture and multiple are the native attributes of the browser input tag, the support for these attributes varies among mobile models, so there may be some compatibility issues under different models and WebViews.
 

src/sites/assets/styles/highlight.scss

@@ -13,10 +13,10 @@ code {
   -webkit-font-smoothing: auto;
   background-color: #fafafa;
   border-radius: 16px;
-}
 
-code span {
-  font-family: $nutui-doc-code-font-family;
+  span {
+    font-family: $nutui-doc-code-font-family;
+  }
 }
 
 pre {

src/sites/assets/styles/md-style.scss

@@ -2,11 +2,17 @@
 
 .doc-content-document {
   position: relative;
+  min-width: 1000px;
   background: #fff;
   padding-top: 40px;
   padding-bottom: 40px;
   padding-left: 40px;
   padding-right: 445px;
+
+  &.full {
+    padding-right: 100px;
+  }
+
   .card {
     margin-bottom: 24px;
     padding: 24px;
@@ -21,11 +27,11 @@
     -webkit-font-smoothing: auto;
 
     &:hover {
-      color: mix(black, $nutui-doc-blue, 10%);
+      color: darken($nutui-doc-blue, 10%);
     }
 
     &:active {
-      color: mix(black, $nutui-doc-blue, 20%);
+      color: darken($nutui-doc-blue, 20%);
     }
   }
 
@@ -38,13 +44,11 @@
     color: $nutui-doc-black;
     font-weight: bold;
     line-height: 1.5;
-
-    &[id] {
-      cursor: pointer;
-    }
   }
 
   &.isComponent {
+    padding-top: 0;
+
     h1 {
       display: none;
     }
@@ -65,20 +69,20 @@
       left: 16px;
       width: 44px;
       height: 17px;
-      background: url('https://img10.360buyimg.com/imagetools/jfs/t1/136135/19/14659/946/5fa20aa8E33a9aa26/d329fbe669171208.png');
+      background: $doc-smile-curve;
       background-size: 100% 100%;
     }
   }
 
   h2 {
-    margin: 45px 0 20px;
-    font-size: 24px;
+    margin: 16px 0;
+    font-size: 20px;
   }
 
   h3 {
     margin: 16px 0px;
-    font-weight: 600;
-    font-size: 20px;
+    font-weight: 400;
+    font-size: 18px;
   }
 
   h4 {
@@ -98,12 +102,14 @@
     font-size: 14px;
     line-height: 22px;
   }
+
   strong {
     margin: 24px 0 12px;
     font-weight: bold;
     font-size: 14px;
     color: #333;
   }
+
   table {
     width: 100%;
     margin-top: 12px;
@@ -112,12 +118,16 @@
     line-height: 1.5;
     border-collapse: collapse;
     border: 1px solid #eee;
+
     th {
       padding: 8px 20px;
       font-weight: 600;
       text-align: left;
       border-left: 1px solid #e9e9e9;
       background-color: #f7f8fa;
+      // &:first-child {
+      //   padding-left: 0;
+      // }
 
       &:last-child {
         padding-right: 0;
@@ -128,6 +138,7 @@
       padding: 8px 20px;
       border-top: 1px solid $nutui-doc-code-background-color;
       border-left: 1px solid #e9e9e9;
+
       &:first-child {
         // padding-left: 0;
         border-left: 0px;
@@ -157,6 +168,11 @@
     }
   }
 
+  ul,
+  ol {
+    margin: 16px 0;
+  }
+
   ul li,
   ol li {
     position: relative;
@@ -212,14 +228,21 @@
   blockquote {
     margin: 16px 0px;
     padding: 16px;
-    background-color: #fff4f0;
-    border-left: 6px solid #fa192c;
+    background-color: rgba($doc-default-color, 0.06);
+    border-left: 6px solid $doc-default-color;
     border-radius: 3px;
+
     p {
       color: #1a1a1a;
     }
   }
 
+  img {
+    max-width: 100%;
+    // margin: 16px 0;
+    // border-radius: $nutui-doc-border-radius;
+  }
+
   &--changelog,
   &--changelog-v3 {
     strong {
@@ -240,21 +263,69 @@
       }
     }
   }
+
   .handle-part {
     height: 50px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
+
     .online-btn {
       display: block;
       color: #5555e2;
       background-color: #fff;
       font-size: 14px;
       cursor: pointer;
+
       &:hover {
         color: blue;
         text-decoration: underline;
       }
     }
   }
+
+  .contributor {
+    display: table;
+    width: 1120px;
+    margin-top: 12px;
+    color: #666;
+    font-size: 14px;
+    line-height: 1.5;
+    border-collapse: collapse;
+    border: 0;
+    table-layout: fixed;
+
+    .contributor-head {
+      display: table-row;
+
+      .contributor-head-item {
+        display: table-cell;
+        padding: 10px 15px;
+        font-weight: 600;
+        text-align: center;
+        background-color: transparent;
+        border: 0;
+
+        a {
+          img {
+            width: 60px;
+            height: 60px;
+          }
+        }
+      }
+    }
+
+    .contributor-body {
+      display: table-row;
+      border-top: 1px solid #eee;
+      padding-top: 15px;
+
+      .contributor-body-item {
+        display: table-cell;
+        padding: 10px 15px;
+        border: 0;
+        text-align: center;
+      }
+    }
+  }
 }

src/sites/assets/styles/reset.scss

@@ -54,7 +54,12 @@ video {
   margin: 0;
   padding: 0;
   border: 0;
-  font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun,
+  font-family:
+    PingFang SC,
+    Microsoft YaHei,
+    Helvetica,
+    Hiragino Sans GB,
+    SimSun,
     sans-serif;
   -webkit-overflow-scrolling: touch;
 }
@@ -94,6 +99,9 @@ table {
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 html,
@@ -118,5 +126,7 @@ html,
 body {
   height: 100%;
   width: 100%;
-  background: #fff;
+}
+#doc {
+  overflow-x: hidden;
 }