docs: update

difizen · Sep 4, 2024 · 3cf15f6 · 3cf15f6
1 parent ef630be
commit 3cf15f6
Show file tree

Hide file tree

Showing 81 changed files with 4,702 additions and 57 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -5,3 +5,5 @@
 **/dist/**/*.js
 **/dist/**/*.cjs
 **/dist/**/*.mjs
+
+tailwind.out.css
diff --git a/.prettierignore b/.prettierignore
@@ -22,3 +22,5 @@ pnpm-lock.yaml
 tinyColor.less
 
 .changeset
+
+tailwind.out.css
diff --git a/.stylelintignore b/.stylelintignore
@@ -1 +1,2 @@
 tinyColor.less
+tailwind.out.css
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,11 @@
+# 开发
+
+```
+pnpm bootstrap
+```
+
+# 启动示例站点
+
+```
+pnpm run docs
+```
diff --git a/README.md b/README.md
@@ -2,14 +2,30 @@
 
 [![codecov](https://codecov.io/gh/difizen/mana/graph/badge.svg?token=VGJDF8511R)](https://codecov.io/gh/difizen/mana)
 
-# init
+模块化可扩展前端框架
 
-```
-pnpm bootstrap
-```
+### 官网
 
-# dev & doc
+💡 请访问 https://mana.difizen.net/
 
-```
-pnpm run docs
-```
+### 提交issue
+
+😊 我们建议您使用[github issue](https://github.com/difizen/mana/issues) 提交您的疑问, 我们通常会在2日内回复。
+
+### 贡献代码
+
+🤝 请查阅 [CONTRIBUTING.md](./CONTRIBUTING.md)
+
+### 贡献者
+
+💪 感谢所有的贡献者
+
+<a href="https://github.com/difizen/mana/graphs/contributors">
+  <img src="https://contributors-img.web.app/image?repo=difizen/mana" alt="List of Contributors"/>
+</a>
+
+### 联系我们
+
+🤗 加入我们的钉钉答疑群与我们联系。
+
+<img src="./apps/docs/public/ding-qrcode.png" width="30%">
diff --git a/apps/docs/.dumi/theme/componets/banner/background.png b/apps/docs/.dumi/theme/componets/banner/background.png
diff --git a/apps/docs/.dumi/theme/componets/banner/index.less b/apps/docs/.dumi/theme/componets/banner/index.less
@@ -3,8 +3,8 @@
   position: relative;
   width: 100%;
   height: 548px;
-  background-color: #fff;
-  background-image: url('https://mdn.alipayobjects.com/huamei_usjdcg/afts/img/A*D4cjRIorZ9oAAAAAAAAAAAAADo6HAQ/original');
+  background-color: rgba(241, 249, 255, 90%);
+  // background-image: url('https://mdn.alipayobjects.com/huamei_usjdcg/afts/img/A*D4cjRIorZ9oAAAAAAAAAAAAADo6HAQ/original');
   background-position: center;
   background-repeat: no-repeat;
   background-size: auto 548px;
@@ -155,3 +155,132 @@
     }
   }
 }
+
+.content-animate {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 105px;
+  right: 105px;
+  background-image: url('./background.png');
+  pointer-events: none;
+}
+
+.circle-first {
+  position: absolute;
+  height: 590px;
+  width: 760px;
+  top: 256px;
+  left: 280px;
+  animation: rotate-animation 10s linear 1s 5 alternate;
+  animation: rotate-animation 10s linear infinite;
+}
+
+.circle-first-one {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 480px;
+  height: 480px;
+  background: linear-gradient(to right, #ffde16, #02ffce);
+  filter: blur(50px);
+  border-radius: 50%;
+  opacity: 0.1;
+}
+
+.circle-first-two {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 480px;
+  height: 480px;
+  background: linear-gradient(to right, #0266ff, #167aff);
+  filter: blur(50px);
+  border-radius: 50%;
+  opacity: 0.1;
+}
+
+.circle-second {
+  position: absolute;
+  top: 132px;
+  left: 233px;
+  width: 100px;
+  height: 100px;
+  background-color: #1677ff;
+  opacity: 0.2;
+  filter: blur(50px);
+  border-radius: 50%;
+}
+
+.circle-third {
+  position: absolute;
+  top: 100px;
+  left: 0;
+  width: 200px;
+  height: 200px;
+  background-color: #1677ff;
+  opacity: 0.2;
+  filter: blur(50px);
+  border-radius: 50%;
+}
+
+.start-btn {
+  height: 40px;
+  width: 140px;
+  padding: 4px;
+  background: linear-gradient(135deg, rgb(98, 83, 225), rgb(4, 190, 254));
+  border: unset;
+}
+
+.start-btn:hover {
+  background: linear-gradient(135deg, rgb(98, 83, 225), rgb(4, 190, 254)) !important;
+}
+
+.install-btn {
+  margin-left: 40px;
+  border: none;
+}
+
+.feature-title,
+.feature-title-libro {
+  font-size: 1.875rem;
+  color: #27272e;
+  font-weight: 600;
+  text-align: center;
+}
+
+.feature-title-libro {
+  margin-top: 28px;
+}
+
+.user-item {
+  display: flex;
+  align-items: center;
+  font-size: 32px;
+  justify-content: center;
+  background: #fff;
+  margin: 0 10px 20px;
+  padding: 12px;
+  box-shadow: -1px 4px 20px 0 rgba(213, 168, 255, 19%);
+  height: 84px;
+
+  &-img {
+    height: 60px;
+    object-fit: contain;
+    margin-right: 12px;
+    width: 258px;
+
+    &-sm {
+      height: 45px;
+    }
+  }
+}
+
+.user-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  row-gap: 10px;
+  margin-left: -62px;
+  margin-right: -62px;
+}
diff --git a/apps/docs/.dumi/theme/componets/banner/index.tsx b/apps/docs/.dumi/theme/componets/banner/index.tsx
@@ -1,6 +1,9 @@
+import { Button, message } from 'antd';
 import { Link, useSiteData } from 'dumi';
 import React, { useEffect, useState } from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import './index.less';
+import '../../tailwind.out.css';
 
 const Banner: React.FC = () => {
   const [animate, setAnimate] = useState({
@@ -25,36 +28,40 @@ const Banner: React.FC = () => {
   return (
     <div className="difizen-dumi-banner">
       <div className="difizen-dumi-banner-main">
-        <div className="difizen-dumi-hero">
-          <h1 className="difizen-dumi-hero-title">
-            <span>{themeConfig.banner.title}</span>
-          </h1>
-          <p className="difizen-dumi-hero-desc">{themeConfig.banner.desc}</p>
-          <div className="difizen-dumi-hero-actions">
-            {bottons.map(({ name, link }, index) => {
-              const style =
-                index === 0
-                  ? {
-                      color: '#fff',
-                      backgroundColor: '#1677ff',
-                    }
-                  : {};
-              return /^(\w+:)\/\/|^(mailto|tel):/.test(link) ? (
-                <a
-                  style={style}
-                  href={link}
-                  target="_blank"
-                  rel="noreferrer"
-                  key={name}
-                >
-                  {name}
-                </a>
-              ) : (
-                <Link style={style} key={name} to={link}>
-                  {name}
-                </Link>
-              );
-            })}
+        <div className="from-zinc-50 to-white dark:from-zinc-950 to-black relative">
+          <div className="absolute bg-[url('/_convertfast/gradient-bg-0.svg')] bg-auto bg-no-repeat z-0 inset-0 top-0 bottom-0 left-0 right-0 grayscale"></div>
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-24 lg:py-32 relative z-10">
+            <div className="max-w-3xl">
+              <div className="content-animate">
+                <div className="circle-first">
+                  <div className="circle-first-one" />
+                  <div className="circle-first-two" />
+                </div>
+                <div className="circle-second"></div>
+                <div className="circle-third"></div>
+              </div>
+              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-primary mb-6 drop-shadow-md">
+                libro
+              </h1>
+              <p className="text-xl sm:text-2xl text-muted-foreground mb-8">
+                灵活定制、轻松集成的 Notebook 产品方案
+              </p>
+              <Link to={'/quickstart'}>
+                <Button type="primary" size="large" className="start-btn">
+                  Start now
+                </Button>
+              </Link>
+              <CopyToClipboard
+                text="npm install @difizen/mana-app"
+                onCopy={() => {
+                  message.success('已复制');
+                }}
+              >
+                <Button size="large" className="install-btn">
+                  npm install @difizen/mana-app
+                </Button>
+              </CopyToClipboard>
+            </div>
           </div>
         </div>
       </div>

diff --git a/apps/docs/.dumi/theme/slots/Footer/index.less b/apps/docs/.dumi/theme/slots/Footer/index.less
@@ -92,4 +92,21 @@
       border-top: 1px solid #bdc0c4;
     }
   }
+
+  &-logo {
+    a {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      color: #000;
+
+      @{dark-selector} & {
+        color: #fff;
+      }
+    }
+
+    .difizen-dumi-header-logo-img {
+      margin-right: 0;
+    }
+  }
 }
diff --git a/apps/docs/.dumi/theme/slots/Footer/index.tsx b/apps/docs/.dumi/theme/slots/Footer/index.tsx
@@ -1,4 +1,4 @@
-import { useSiteData } from 'dumi';
+import { useSiteData, Link } from 'dumi';
 import React from 'react';
 import './index.less';
 
@@ -17,9 +17,14 @@ const Footer: React.FC = () => {
   return (
     <div className="difizen-dumi-footer">
       <div className="difizen-dumi-footer-content">
-        {/* <div className="difizen-dumi-footer-text-group">
-          {themeConfig['linksTitle']}
-        </div> */}
+        <div className="difizen-dumi-footer-logo">
+          {themeConfig.logo && (
+            <Link to={themeConfig['link']}>
+              <img className="difizen-dumi-header-logo-img" src={themeConfig.logo} />
+              <span>{themeConfig.name}</span>
+            </Link>
+          )}
+        </div>
         {(themeConfig['links'] || []).map((datum: DatumType) => (
           <div className="difizen-dumi-footer-text-group" key={datum.title}>
             <div className="difizen-dumi-footer-title">{datum.title}</div>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -22,3 +22,5 @@ pnpm-lock.yaml
		tinyColor.less

		.changeset

		tailwind.out.css