🔖 chore: add playground

eternallycyf · May 1, 2024 · f6b4e62 · f6b4e62
1 parent ff251d2
commit f6b4e62
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 104 deletions.
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -11,6 +11,7 @@ const isProd = process.env.NODE_ENV === 'production';
 const themeConfig: SiteThemeConfig = {
   name: repo,
   github: homepage,
+  showCustomContent: true,
   logo: isProd ? '/images/origin.png' : `/${repo}/images/origin.png`,
   hero: {
     'zh-CN': {

diff --git a/README.md b/README.md
@@ -1,13 +1,13 @@
 <a name="readme-top"></a>
 
+> 🚧 Don't use this for production code!
+
 <div align="center">
 
 [//]: # '<img width="160" src="https://avatars.githubusercontent.com/u/17870709?v=4">'
 
 <h1>ims-keep-alive</h1>
 
-> 🚧 Don't use this for production code!
-
 react keepalive
 
 node 版本 v18.13.0

diff --git a/docs/index.md b/docs/index.md
@@ -1,7 +1,9 @@
 ---
+showCustomContent: true
 hero:
   title: ims-keep-alive
   description: React KeepAlive
+  showCustomContent: true
   actions:
     - text: 快速上手
       link: /components
@@ -11,6 +13,36 @@ hero:
 
 <embed src="../README.md"></embed>
 
+```tsx | demo
+/**
+ * inline: true
+ */
+import React from 'react';
+import { Section } from './site/Section';
+import './site/styles.less';
+
+export default () => (
+  <Section
+    title="Experience the ultimate in lordaeron online"
+    style={{ marginTop: 40 }}
+    titleStyle={{
+      paddingBottom: 100,
+      fontWeight: 'bold',
+      fontSize: 50,
+      textAlign: 'center',
+      color: 'black',
+    }}
+  >
+    <iframe
+      className="codesandbox"
+      src="https://codesandbox.io/p/sandbox/ims-keep-alive-gzn58l?file=%2Fsrc%2FApp.tsx"
+      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+    ></iframe>
+  </Section>
+);
+```
+
 工程框架选型如下：
 
 - 构建： father4

diff --git a/docs/site/Section.less b/docs/site/Section.less
@@ -0,0 +1,15 @@
+html[data-prefers-color='dark'],
+html[data-prefers-color='light'] {
+  .site-section {
+    &-title {
+      position: relative;
+      margin: 0 auto;
+      color: #fff;
+      font-size: 50px;
+      text-align: center;
+      @media (max-width: 480px) {
+        font-size: 30px;
+      }
+    }
+  }
+}
diff --git a/docs/site/Section.tsx b/docs/site/Section.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import './Section.less';
+
+export interface ISectionProps {
+  title?: React.ReactNode;
+  style?: React.CSSProperties;
+  titleStyle?: React.CSSProperties;
+  scale?: number;
+}
+
+export const Section: React.FC<React.PropsWithChildren<ISectionProps>> = (props) => {
+  return (
+    <section className="site-section" style={props.style}>
+      <div className="site-section-title" style={props.titleStyle}>
+        {props.title}
+      </div>
+      <div className="site-section-body" style={{ transform: `scale(${props.scale || 1})` }}>
+        {props.children}
+      </div>
+    </section>
+  );
+};
diff --git a/docs/site/styles.less b/docs/site/styles.less
@@ -0,0 +1,44 @@
+.site-section {
+  width: 80vw;
+  margin: 0 auto;
+
+  .codesandbox {
+    width: 80vw;
+    height: 700px;
+    overflow: hidden;
+    border: 0;
+    border-radius: 4px;
+    box-shadow: 0 10px 30px #555;
+  }
+
+  .site-section-body {
+    width: 80vw;
+    text-align: center;
+  }
+
+  img {
+    margin: 0 auto;
+    border-radius: 4px;
+    transform: scale(0.8);
+  }
+  @media screen and(max-width: 500px) {
+    img {
+      width: 400px;
+      margin: 0 auto;
+      border-radius: 4px;
+    }
+
+    .codesandbox {
+      width: 400px;
+      height: 700px;
+      overflow: hidden;
+      border: 0;
+      border-radius: 4px;
+      box-shadow: 0 10px 30px #555;
+    }
+  }
+}
+
+#root {
+  overflow: hidden;
+}
diff --git a/package.json b/package.json
@@ -87,7 +87,7 @@
     "conventional-changelog-gitmoji-config": "^1",
     "cross-env": "^7",
     "dumi": "^2",
-    "dumi-theme-antd-style": "^0.29.5",
+    "dumi-theme-antd-style": "^0.31.0",
     "eslint": "^8",
     "father": "^4",
     "husky": "^8",

diff --git a/src/components/keep-alive/index.md b/src/components/keep-alive/index.md
@@ -21,116 +21,17 @@ demo:
 
 在需要使用的地方引入 `KeepAlive` 组件， 并将需要缓存的组件作为 `KeepAlive` 的子组件。
 
-## 示例
-
-```tsx | pure
-import { useState } from 'react';
-import {
-  Link,
-  useLocation,
-  RouterProvider,
-  createBrowserRouter,
-  Outlet,
-  useOutlet,
-} from 'react-router-dom';
-import KeepAliveLayout, { useKeepOutlet } from 'ims-keep-alive';
-
-const Layout = () => {
-  const { pathname } = useLocation();
-  const element = useKeepOutlet();
-
-  return (
-    <div>
-      <div>当前路由: {pathname}</div>
-      {element}
-    </div>
-  );
-};
-
-const Aaa = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div>
-      <p>{count}</p>
-      <p>
-        <button onClick={() => setCount((count) => count + 1)}>加一</button>
-      </p>
-      <Link to="/bbb">去 Bbb 页面</Link>
-      <br />
-      <Link to="/ccc">去 Ccc 页面</Link>
-    </div>
-  );
-};
-
-const Bbb = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div>
-      <p>{count}</p>
-      <p>
-        <button onClick={() => setCount((count) => count + 1)}>加一</button>
-      </p>
-      <Link to="/">去首页</Link>
-    </div>
-  );
-};
-
-const Ccc = () => {
-  return (
-    <div>
-      <p>ccc</p>
-      <Link to="/">去首面</Link>
-    </div>
-  );
-};
-
-const routes = [
-  {
-    path: '/',
-    element: <Layout></Layout>,
-    children: [
-      {
-        path: '/',
-        element: <Aaa></Aaa>,
-      },
-      {
-        path: '/bbb',
-        element: <Bbb></Bbb>,
-      },
-      {
-        path: '/ccc',
-        element: <Ccc></Ccc>,
-      },
-    ],
-  },
-];
-
-export const router = createBrowserRouter(routes);
-
-const App = () => {
-  return (
-    <KeepAliveLayout keepPaths={[/bbb/, '/']}>
-      <RouterProvider router={router} />
-    </KeepAliveLayout>
-  );
-};
-
-export default App;
-```
-
 ## API
 
-## KeepAliveLayoutProps
+### KeepAliveLayoutProps
 
 | 参数         | 说明           | 类型                        | 默认值 |
 | ------------ | -------------- | --------------------------- | ------ |
 | keepPaths    | 需要缓存的路径 | `Array<string \| RegExp>`   | -      |
 | keepElements | 缓存的组件     | `Record<string, ReactNode>` | -      |
 | dropByPath   | 删除缓存的组件 | `(path: string) => void`    | -      |
 
-## KeepAliveContextType
+### KeepAliveContextType
 
 ```ts
 export type KeepAliveContextType = Omit<Required<KeepAliveLayoutProps>, 'children'>;