chore: update docs and deployment

.gitignore

@@ -12,7 +12,7 @@
 /website/node_modules
 
 # Production
-/build
+/website/build
 
 # Generated files
 .docusaurus

packages/zmi-utils/package.json

@@ -5,6 +5,7 @@
   "types": "lib/index.d.ts",
   "license": "MIT",
   "dependencies": {
+    "@babel/core": "^7.13.10",
     "@babel/register": "^7.13.8",
     "@babel/types": "^7.13.0",
     "@types/cheerio": "^0.22.25",

packages/zmi-webpack/src/getBabelOptions.ts

@@ -1,3 +1,4 @@
+import { TransformOptions } from '@babel/core'
 import { IPrivate } from '.'
 
 export default function getBabelOpts({
@@ -25,6 +26,7 @@ export default function getBabelOpts({
       ...config.extraBabelPlugins
     ].filter(Boolean),
     sourceType: sourceMap ? 'unambiguous' : false,
-    babelrc: false
-  }
+    babelrc: false,
+    configFile: false
+  } as TransformOptions
 }

website/docusaurus.config.js

@@ -3,13 +3,13 @@
 module.exports = {
   title: 'Zmi-CLI',
   tagline: '🎃 通用的 React Vue miniapp-ts 开发工具.',
-  url: 'https://your-docusaurus-test-site.com',
-  baseUrl: '/',
+  url: 'https://l-zoy.github.io',
+  baseUrl: '/zmi/',
   titleDelimiter: '·',
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/logo.svg',
-  organizationName: 'zoy-l',
+  organizationName: 'l-zoy',
   projectName: 'zmi',
 
   themeConfig: {

website/package.json

@@ -14,6 +14,8 @@
     "start-doc": "docusaurus start",
     "build-doc": "docusaurus build",
     "serve-doc": "docusaurus serve",
-    "swizzle-doc": "docusaurus swizzle"
+    "swizzle-doc": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "deployment": "GIT_USER=l-zoy yarn deploy"
   }
 }

website/src/css/custom.css

@@ -20,22 +20,42 @@
   --use-button-color: #444950;
   --use-button-bg-color: rgba(130, 82, 157, 0.1);
   --use-button-border-color: rgba(130, 82, 157, 0.4);
+
   /* --ifm-button-border-color */
 }
 
 .table-of-contents__left-border {
   border: none;
 }
 
+.DocSearch-Search-Icon {
+  color: rgba(130, 82, 157, 0.7) !important;
+}
+
+html[data-theme='dark'] .DocSearch-Search-Icon {
+  color: rgba(255, 255, 255, 0.733) !important;
+}
+
+.react-toggle-track {
+  background-color: rgba(213, 172, 236, 0.2) !important;
+}
+
+.react-toggle-thumb {
+  border-color: rgba(213, 172, 236) !important;
+}
+
+.react-toggle--focus .react-toggle-thumb,
+.react-toggle:hover .react-toggle-thumb {
+  box-shadow: 0px 0px 5px 3px rgba(213, 172, 236, 0.5) !important;
+}
+
 html[data-theme='dark']
   .docSidebarContainer_node_modules-\@docusaurus-theme-classic-lib-next-theme-DocPage- {
-  /* border: none; */
   border-right: 1px solid rgba(58, 58, 58, 0.288);
 }
 
 html[data-theme='dark'] {
   --ifm-color-primary: rgb(203, 145, 236);
-
   --ifm-font-color-base: white;
   --use-button-bg-color: rgba(255, 255, 255, 0.2);
   --use-button-color: white;

website/src/css/styles.module.css

@@ -1,5 +1,5 @@
 .heroBanner {
-  padding: 4rem 0;
+  padding: 3rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;

website/src/pages/index.jsx

@@ -88,8 +88,13 @@ export default function Home() {
         </section>
       </main>
 
-      <div style={{ position: 'relative' }}>
-        <svg className={styles.waves} viewBox="0 24 150 28">
+      <div style={{ position: 'relative', height: '20vh', overflow: 'hidden' }}>
+        <svg
+          className={styles.waves}
+          viewBox="0 24 150 28"
+          preserveAspectRatio="none"
+          shapeRendering="auto"
+        >
           <defs>
             <path
               id="gentle-wave"
@@ -98,8 +103,8 @@ export default function Home() {
           </defs>
 
           <g className={styles.parallax}>
-            <use xlinkHref="#gentle-wave" x="48" y="0" fill="rgba(213, 172, 236, 0.2)" />
-            <use xlinkHref="#gentle-wave" x="48" y="3" fill="rgba(213, 172, 236, 0.1)" />
+            <use xlinkHref="#gentle-wave" x="48" y="0" fill="rgba(213, 172, 236, 0.1)" />
+            <use xlinkHref="#gentle-wave" x="48" y="2" fill="rgba(213, 172, 236, 0.1)" />
             <use xlinkHref="#gentle-wave" x="48" y="5" fill="rgba(213, 172, 236, 0.1)" />
             <use xlinkHref="#gentle-wave" x="48" y="7" fill="rgba(213, 172, 236, 0.1)" />
           </g>