+
+ )
+ );
+};
diff --git a/.dumi/theme/builtins/Previewer.less b/.dumi/theme/builtins/Previewer.less
new file mode 100755
index 000000000..f8f038e4e
--- /dev/null
+++ b/.dumi/theme/builtins/Previewer.less
@@ -0,0 +1,364 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-previewer {
+ background-color: #fff;
+ border: 1px solid @c-border;
+ border-radius: 1px;
+
+ &[data-debug] {
+ margin-top: 32px;
+ border-color: #ffcb00;
+
+ &::before {
+ content: 'DEV ONLY';
+ float: left;
+ margin-left: -1px;
+ margin-top: -18px;
+ padding: 3px 6px;
+ font-size: 12px;
+ line-height: 1;
+ background-color: #ffcb00;
+ color: #735600;
+ text-shadow: 0.5px 0.5px 0 rgba(255, 255, 255, 0.5);
+ border-top-left-radius: 1px;
+ border-top-right-radius: 1px;
+ }
+ }
+
+ &[data-iframe] {
+ .@{prefix}-previewer-browser-nav {
+ padding: 2px 6px;
+ background-color: @c-border;
+
+ &::before {
+ @s-btn: 12px;
+ @s-btn-gap: 8px;
+
+ content: '';
+ display: inline-block;
+ width: @s-btn;
+ height: @s-btn;
+ border-radius: 50%;
+ background-color: #fd6458;
+ box-shadow: (@s-btn + @s-btn-gap) 0 0 #ffbf2b, (@s-btn + @s-btn-gap) * 2 0 0 #24cc3d;
+ }
+ }
+
+ .@{prefix}-previewer-demo > iframe {
+ border: 0;
+ width: 100%;
+ height: 300px;
+ }
+ }
+
+ + .@{prefix}-previewer {
+ margin-top: 32px;
+ }
+
+ &-demo {
+ padding: 40px 24px;
+ }
+
+ &-target {
+ border-color: fade(@c-primary, 50%);
+ box-shadow: 0 0 0 5px fade(@c-primary, 5%);
+ }
+
+ &-desc {
+ > div:last-child {
+ padding: 1.2em 1em 1em;
+ color: @c-text;
+ border-top: 1px solid @c-border;
+ }
+
+ .markdown > p:first-child {
+ margin-top: 0;
+ }
+
+ .markdown > p:last-child {
+ margin-bottom: 0;
+ }
+
+ &[data-title] {
+ position: relative;
+
+ > a:first-child {
+ position: absolute;
+ top: 0;
+ left: 1em;
+ margin-left: -4px;
+ padding: 0 4px;
+ color: @c-heading;
+ font-size: inherit;
+ font-weight: 500;
+ background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+ transform: translateY(-50%);
+ pointer-events: auto;
+ cursor: pointer;
+ }
+
+ &:empty {
+ padding-top: 0;
+
+ // modify action area style when only has title field
+ + .@{prefix}-previewer-actions {
+ height: 46px;
+ border-top-style: solid;
+ }
+ }
+ }
+ }
+
+ &-actions {
+ display: flex;
+ height: 40px;
+ padding: 0 1em;
+ align-items: center;
+ border-top: 1px dashed @c-border;
+
+ > a:not(:last-child),
+ > button:not(:last-child) {
+ margin-right: 8px;
+ }
+
+ > a {
+ display: flex;
+ }
+
+ button {
+ position: relative;
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ padding: 0;
+ border: 0;
+ box-sizing: border-box;
+ cursor: pointer;
+ opacity: 0.6;
+ outline: none;
+ transition: opacity 0.2s, background 0.2s;
+
+ // expand click area
+ &::after {
+ content: '';
+ position: absolute;
+ top: -8px;
+ left: -8px;
+ right: -8px;
+ bottom: -8px;
+ }
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ &:active {
+ opacity: 0.9;
+ }
+
+ &:disabled {
+ opacity: 0.2;
+ cursor: not-allowed;
+ }
+
+ &[role='codesandbox'] {
+ background-position: -18px 0;
+ }
+
+ &[role='codepen'] {
+ background-position: -36px 0;
+ }
+
+ &[role='source'] {
+ background-position: -72px 0;
+ }
+
+ &[role='change-jsx'] {
+ background-position: -90px 0;
+ }
+
+ &[role='change-tsx'] {
+ background-position: -108px 0;
+ }
+
+ &[role='open-demo'] {
+ background-position: -126px 0;
+ }
+
+ &[role='motions'] {
+ background-position: -162px 0;
+ }
+
+ &[role='sketch-component'] {
+ background-position: -182px 0;
+ }
+
+ &[role='sketch-group'] {
+ background-position: -200px 0;
+ }
+
+ &[role='copy'][data-status='ready'] {
+ background-position: -54px 0;
+ }
+
+ &[role='copy'][data-status='copied'] {
+ pointer-events: none;
+ background-position: -54px -16px;
+ }
+
+ &[role='refresh'] {
+ background-position-x: -144px;
+ }
+ }
+
+ // split action buttons by a blank node
+ > span {
+ flex: 1;
+ display: inline-block;
+ }
+ }
+
+ &-source {
+ border-top: 1px dashed @c-border;
+
+ &-tab {
+ border-top: 1px dashed @c-border;
+
+ .@{prefix}-tabs-tab-btn {
+ position: relative;
+ padding-left: 32px;
+
+ &::before,
+ &::after {
+ content: '';
+ position: absolute;
+ margin-right: 4px;
+ display: inline-block;
+ }
+
+ &::before {
+ left: 16px;
+ top: 50%;
+ margin-top: -6px;
+ width: 10px;
+ height: 12px;
+ border: 1px solid @c-secondary;
+ }
+
+ &::after {
+ top: 50%;
+ left: 23px;
+ margin-top: -7px;
+ width: 4px;
+ height: 4px;
+ background: #fff;
+ border-bottom: 1px solid @c-secondary;
+ transform: rotate(45deg);
+ }
+ }
+ }
+ }
+}
+
+.@{prefix}-tabs {
+ overflow: hidden;
+
+ &.@{prefix}-tabs-top {
+ flex-direction: column;
+
+ .@{prefix}-tabs-ink-bar {
+ bottom: 0;
+ }
+ }
+
+ &-nav {
+ display: flex;
+
+ &-wrap {
+ display: flex;
+ white-space: nowrap;
+ overflow: hidden;
+
+ &&-ping-left {
+ box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.1) inset;
+ }
+
+ &&-ping-right ~ * > .@{prefix}-tabs-nav-more {
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+ }
+ }
+
+ &-list {
+ position: relative;
+ display: flex;
+ transition: transform 0.2s;
+ }
+
+ &-more {
+ height: 100%;
+ cursor: pointer;
+ background: none;
+ border: 0;
+ transition: box-shadow 0.2s;
+ }
+ }
+
+ &-tab {
+ display: flex;
+
+ &-btn {
+ padding: 0 16px;
+ font-size: 14px;
+ line-height: 36px;
+ border: 0;
+ outline: none;
+ background: transparent;
+ box-sizing: border-box;
+ cursor: pointer;
+
+ &:hover {
+ color: @c-primary;
+ }
+ }
+ }
+
+ &-ink-bar {
+ position: absolute;
+ height: 2px;
+ background: @c-primary;
+ transition: left 0.2s, width 0.2s;
+ pointer-events: none;
+ }
+
+ &-dropdown {
+ position: absolute;
+ background: #fff;
+ border: 1px solid @c-border;
+ max-height: 200px;
+ overflow: auto;
+
+ > ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ > li {
+ padding: 4px 12px;
+ font-size: 14px;
+ cursor: pointer;
+
+ &:hover {
+ color: @c-primary;
+ }
+
+ &:not(:last-child) {
+ border-bottom: 1px dashed @c-border;
+ }
+ }
+ }
+
+ &-hidden {
+ display: none;
+ }
+ }
+}
diff --git a/.dumi/theme/builtins/Previewer.tsx b/.dumi/theme/builtins/Previewer.tsx
new file mode 100755
index 000000000..71c16b641
--- /dev/null
+++ b/.dumi/theme/builtins/Previewer.tsx
@@ -0,0 +1,253 @@
+import React, { useState, useContext, useRef, useEffect } from 'react';
+import Tabs, { TabPane } from 'rc-tabs';
+// @ts-ignore
+import { history } from 'dumi';
+import type { IPreviewerComponentProps} from 'dumi/theme';
+import {
+ context,
+ useCodeSandbox,
+ useRiddle,
+ useMotions,
+ useCopy,
+ useLocaleProps,
+ useDemoUrl,
+ useTSPlaygroundUrl,
+ Link,
+ AnchorLink,
+ usePrefersColor
+} from 'dumi/theme';
+import type { ICodeBlockProps } from './SourceCode';
+import SourceCode from './SourceCode';
+import './Previewer.less';
+
+export interface IPreviewerProps extends IPreviewerComponentProps {
+ /**
+ * enable transform to change CSS containing block for demo
+ */
+ transform?: boolean;
+ /**
+ * modify background for demo area
+ */
+ background?: string;
+ /**
+ * collapse padding of demo area
+ */
+ compact?: boolean;
+ /**
+ * configurations for action button
+ */
+ hideActions?: ('CSB' | 'EXTERNAL' | 'RIDDLE')[];
+ /**
+ * show source code by default
+ */
+ defaultShowCode?: boolean;
+ /**
+ * use iframe mode for this demo
+ */
+ iframe?: true | number;
+ /**
+ * replace builtin demo url
+ */
+ demoUrl?: string;
+}
+
+/**
+ * get source code type for file
+ * @param file file path
+ * @param source file source object
+ */
+function getSourceType(file: string, source: IPreviewerComponentProps['sources']['_']) {
+ // use file extension as source type first
+ let type = file.match(/\.(\w+)$/)?.[1];
+
+ if (!type) {
+ type = source.tsx ? 'tsx' : 'jsx';
+ }
+
+ return type as ICodeBlockProps['lang'];
+}
+
+const Previewer: React.FC
+ {props.route.meta.description || props.route.meta.title}
+
+
+
+
+
+ {props.iframe && }
+
+ );
+};
+
+export default Previewer;
diff --git a/.dumi/theme/builtins/SourceCode.less b/.dumi/theme/builtins/SourceCode.less
new file mode 100755
index 000000000..49ba683ab
--- /dev/null
+++ b/.dumi/theme/builtins/SourceCode.less
@@ -0,0 +1,58 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-code-block {
+ position: relative;
+ background-color: @c-light-bg;
+
+ & + &,
+ & + table {
+ margin-top: 16px;
+ }
+
+ > pre[class*='language-'] {
+ margin: 0;
+ background: transparent;
+
+ .token-line:not(:last-child) .plain:empty {
+ display: inline-block;
+ min-height: 1em;
+ }
+ }
+
+ &-copy-btn {
+ position: absolute;
+ top: 1.1em;
+ right: 1em;
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ border: 0;
+ outline: none;
+ cursor: pointer;
+ opacity: 0.6;
+ transition: opacity 0.2s, background 0.2s;
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ &:active {
+ opacity: 0.9;
+ }
+
+ &[data-status='ready'] {
+ background-position: -54px 0;
+ }
+
+ &[data-status='copied'] {
+ opacity: 1;
+ pointer-events: none;
+ background-position: -54px -16px;
+ }
+ }
+
+ &:not(:hover) &-copy-btn {
+ visibility: hidden;
+ opacity: 0;
+ }
+}
diff --git a/.dumi/theme/builtins/SourceCode.tsx b/.dumi/theme/builtins/SourceCode.tsx
new file mode 100755
index 000000000..c975033dd
--- /dev/null
+++ b/.dumi/theme/builtins/SourceCode.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Language } from 'prism-react-renderer';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import { useCopy } from 'dumi/theme';
+import 'prismjs/themes/prism.css';
+import './SourceCode.less';
+
+export interface ICodeBlockProps {
+ code: string;
+ lang: Language;
+ showCopy?: boolean;
+}
+
+export default ({ code, lang, showCopy = true }: ICodeBlockProps) => {
+ const [copyCode, copyStatus] = useCopy();
+
+ return (
+
+ {props.iframe ? (
+
+ ) : (
+ props.children
+ )}
+
+
+ {props.title && {props.title} }
+ {props.description && (
+
+ )}
+
+
+ {openCSB && (
+
+ )}
+ {openRiddle && (
+
+ )}
+ {props.motions && (
+
+ {showSource && (
+
+ {!isSingleFile && (
+
+ {Object.keys(props.sources).map(filename => (
+
+ )}
+
+ )}
+
+
+
+
+ {({ className, style, tokens, getLineProps, getTokenProps }) => (
+
+
+ );
+};
diff --git a/.dumi/theme/builtins/Tree.less b/.dumi/theme/builtins/Tree.less
new file mode 100644
index 000000000..913b87680
--- /dev/null
+++ b/.dumi/theme/builtins/Tree.less
@@ -0,0 +1,22 @@
+@import (reference) '~dumi-theme-default/src/style/variables.less';
+
+.__dumi-site-tree {
+ padding: 16px;
+ border: 1px solid @c-border;
+ border-radius: 2px;
+ background-color: @c-light-bg;
+
+ small {
+ padding-left: 24px;
+ font-size: 14px;
+ color: @c-secondary;
+
+ &::before {
+ content: '# ';
+ }
+ }
+
+ .ant-tree-switcher {
+ background: transparent;
+ }
+}
diff --git a/.dumi/theme/builtins/Tree.tsx b/.dumi/theme/builtins/Tree.tsx
new file mode 100644
index 000000000..df39e5aef
--- /dev/null
+++ b/.dumi/theme/builtins/Tree.tsx
@@ -0,0 +1,60 @@
+import React, { useEffect, useState, ReactNode, ComponentProps } from 'react';
+import { Tree } from 'antd';
+import { TreeProps } from 'antd/es/tree';
+import './Tree.less';
+
+function getTreeFromList(nodes: ReactNode, prefix = '') {
+ const data: TreeProps['treeData'] = [];
+
+ [].concat(nodes).forEach((node, i) => {
+ const key = `${prefix ? `${prefix}-` : ''}${i}`;
+
+ switch (node.type) {
+ case 'ul':
+ const parent = data[data.length - 1]?.children || data;
+ const ulLeafs = getTreeFromList(node.props.children || [], key);
+
+ parent.push(...ulLeafs);
+ break;
+
+ case 'li':
+ const liLeafs = getTreeFromList(node.props.children, key);
+
+ data.push({
+ title: [].concat(node.props.children).filter(child => child.type !== 'ul'),
+ key,
+ children: liLeafs,
+ isLeaf: !liLeafs.length,
+ });
+ break;
+
+ default:
+ }
+ });
+
+ return data;
+}
+
+const useListToTree = (nodes: ReactNode) => {
+ const [tree, setTree] = useState(getTreeFromList(nodes));
+
+ useEffect(() => {
+ setTree(getTreeFromList(nodes));
+ }, [nodes]);
+
+ return tree;
+};
+
+export default (props: ComponentProps<'div'>) => {
+ const data = useListToTree(props.children);
+
+ return (
+
+ {showCopy && (
+
+ )}
+
+ {locales.length > 2 ? (
+
+ ) : (
+ {firstDiffLocale.label}
+ )}
+
+ ) : null;
+};
+
+export default LocaleSelect;
diff --git a/.dumi/theme/components/Navbar.less b/.dumi/theme/components/Navbar.less
new file mode 100755
index 000000000..be3d380e5
--- /dev/null
+++ b/.dumi/theme/components/Navbar.less
@@ -0,0 +1,172 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-navbar {
+ position: fixed;
+ z-index: 101;
+ top: 0;
+ left: 0;
+ right: 0;
+ display: none;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 58px;
+ height: @s-nav-height;
+ white-space: nowrap;
+ background: #fff;
+ box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.05);
+
+ @media @mobile {
+ display: flex;
+ justify-content: center;
+ height: @s-mobile-nav-height;
+ }
+
+ &-toggle {
+ position: absolute;
+ top: 14px;
+ left: 16px;
+ display: none;
+ width: 22px;
+ height: 22px;
+ border: 0;
+ outline: none;
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAA4CAYAAAB5YT9uAAAAAXNSR0IArs4c6QAAASVJREFUeAHt3DuOwjAUBVAHscWZjaSkAIqU2QjskV80QwpsF3ArdGiw3hW3OGnQM2Iof6/dfr7+n71/LjAdx+HRsvm8SkNPAHBPJ5ABDiD2KgD3dAIZ4ABirwJwTyeQAQ4g9ioA93QC2fbZsSm/z7MDAQIECBAgQIAAAQIECBAgQIAAAQKvAsvV8mO8O8yn19jkXYHpMC7byXVdeS0/75b5XFvAwr1tE0kARxjbJYDbNpEEcISxXQK4bRNJAEcY2yWA2zaRZP0ePJRzpFEJAQIECBAgQIAAAQIECBAgQIAAgW8VWK/tj7Nb5eBTnvbjsp1c15WX4ncRQeB7lb8zyHrW29xo1F1iU8AxynoR4LpLbAo4RlkvAlx3iU0BxyjrRYDrLrHpDVSAEEPXScHTAAAAAElFTkSuQmCC')
+ no-repeat center / contain;
+
+ @media @mobile {
+ display: block;
+ }
+ }
+
+ &-logo {
+ display: inline-block;
+ height: 40px;
+ width: 180px;
+ color: #080e29;
+ font-weight: 500;
+ text-decoration: none;
+ font-size: 24px;
+ line-height: 40px;
+
+ &:not([data-plaintext]) {
+ padding-left: 56px;
+ background: url(@img-logo) no-repeat 0 / contain;
+ }
+
+ &:active,
+ &:hover {
+ color: #080e29;
+ }
+
+ @media @mobile {
+ height: 28px;
+ line-height: 28px;
+
+ &:not([data-plaintext]) {
+ padding-left: 36px;
+ }
+ }
+ }
+
+ nav {
+ > span {
+ position: relative;
+ margin-left: 40px;
+ display: inline-block;
+ color: @c-text;
+ height: @s-nav-height;
+ cursor: pointer;
+ font-size: 14px;
+ line-height: @s-nav-height;
+ text-decoration: none;
+ letter-spacing: 0;
+
+ > a {
+ color: #4d5164;
+ text-decoration: none;
+
+ &:hover,
+ &.active {
+ color: @c-primary;
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: -18px;
+ left: -18px;
+ }
+
+ &.active::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: -2px;
+ right: -2px;
+ height: 2px;
+ background-color: @c-primary;
+ border-radius: 1px;
+ }
+ }
+
+ + *:not(a) {
+ margin-left: 40px;
+ }
+
+ // second nav
+ > ul {
+ list-style: none;
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ margin: 0;
+ min-width: 100px;
+ padding: 8px 18px;
+ line-height: 2;
+ background-color: #fff;
+ box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.08);
+ transform: translate(-50%);
+ transform-origin: top;
+ border-radius: 1px;
+ transition: all 0.2s;
+
+ a {
+ position: relative;
+ display: block;
+ color: @c-text;
+ text-decoration: none;
+
+ &:hover,
+ &.active {
+ color: @c-primary;
+ }
+ }
+ }
+
+ &:not(:hover) > ul {
+ visibility: hidden;
+ pointer-events: none;
+ transform: translate(-50%) scaleY(0.9);
+ opacity: 0;
+ }
+ }
+
+ .@{prefix}-search + .@{prefix}-locale-select {
+ margin-left: 40px;
+ }
+
+ @media @mobile {
+ > a,
+ > span,
+ > div {
+ display: none;
+ }
+ }
+ }
+
+ &[data-mode='site'] {
+ display: flex;
+ }
+}
diff --git a/.dumi/theme/components/Navbar.tsx b/.dumi/theme/components/Navbar.tsx
new file mode 100755
index 000000000..e6734a1e5
--- /dev/null
+++ b/.dumi/theme/components/Navbar.tsx
@@ -0,0 +1,68 @@
+import type { FC, MouseEvent } from 'react';
+import React, { useContext } from 'react';
+import { context, Link, NavLink } from 'dumi/theme';
+import LocaleSelect from './LocaleSelect';
+import './Navbar.less';
+
+interface INavbarProps {
+ location: any;
+ navPrefix?: React.ReactNode;
+ onMobileMenuClick: (ev: MouseEvent
+ {/* menu toogle button (only for mobile) */}
+
+ {/* logo & title */}
+
+ {title}
+
+
+
+ );
+};
+
+export default Navbar;
diff --git a/.dumi/theme/components/SearchBar.less b/.dumi/theme/components/SearchBar.less
new file mode 100755
index 000000000..d428b5f48
--- /dev/null
+++ b/.dumi/theme/components/SearchBar.less
@@ -0,0 +1,107 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-search {
+ margin-left: 20px;
+ position: relative;
+ display: inline-block;
+
+ &-input {
+ width: 200px;
+ height: 32px;
+ padding: 0 38px 0 14px;
+ color: @c-heading;
+ font-size: 14px;
+ border: 0;
+ outline: none;
+ transition: all 0.2s;
+ border-radius: 16px;
+ background: url('data:image/png;base64,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')
+ #f5f6f7 no-repeat right 14px center / 16px;
+ appearance: none;
+ }
+
+ > ul {
+ list-style: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ z-index: 10;
+ margin: 8px 0 0;
+ min-width: 280px;
+ max-width: 500px;
+ padding: 6px 0;
+ background-color: #fff;
+ border: 1px solid @c-border;
+ border-radius: 1px;
+ box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
+ box-sizing: border-box;
+
+ &:empty {
+ display: none;
+ }
+
+ li {
+ font-size: 15px;
+
+ a {
+ display: block;
+ padding: 6px 20px;
+ color: @c-secondary;
+ text-decoration: none;
+ transition: background-color 0.3s;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &:hover {
+ color: @c-primary;
+ background-color: @c-light-bg;
+ }
+ }
+
+ span:first-child {
+ position: relative;
+ display: inline-block;
+ max-width: 100%;
+ padding-right: 26px;
+ vertical-align: -0.37em;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ opacity: 0.8;
+
+ &::after {
+ content: '>';
+ position: absolute;
+ top: 50%;
+ right: 6px;
+ opacity: 0.6;
+ transform: translateY(-54%);
+ }
+ }
+ }
+ }
+
+ @media only screen and (max-width: 1024px) {
+ margin-right: -14px;
+
+ > input:not(:focus) {
+ width: 32px;
+ padding-right: 0;
+ box-shadow: none;
+ cursor: pointer;
+ background-position: right 8px center;
+
+ + ul {
+ transition: 0.1s visibility;
+ visibility: hidden;
+ }
+ }
+ }
+
+ @media @mobile {
+ position: absolute;
+ top: 9px;
+ right: 24px;
+ display: block !important;
+ }
+}
diff --git a/.dumi/theme/components/SearchBar.tsx b/.dumi/theme/components/SearchBar.tsx
new file mode 100755
index 000000000..9267911e1
--- /dev/null
+++ b/.dumi/theme/components/SearchBar.tsx
@@ -0,0 +1,41 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useSearch, AnchorLink } from 'dumi/theme';
+import './SearchBar.less';
+
+export default () => {
+ const [keywords, setKeywords] = useState
+ setKeywords(ev.target.value) }
+ : {})}
+ />
+
+ );
+};
diff --git a/.dumi/theme/components/SideMenu.less b/.dumi/theme/components/SideMenu.less
new file mode 100755
index 000000000..36b0f2756
--- /dev/null
+++ b/.dumi/theme/components/SideMenu.less
@@ -0,0 +1,321 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-menu {
+ position: fixed;
+ z-index: 100;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: @s-menu-width;
+ background-color: #f2f5fa;
+ box-sizing: border-box;
+ transition: left 0.3s;
+
+ &[data-hidden] {
+ display: none;
+ }
+
+ @media @mobile {
+ left: -@s-menu-mobile-width;
+ top: @s-mobile-nav-height;
+ display: block !important;
+ width: @s-menu-mobile-width;
+ background-color: #fff;
+
+ &[data-mobile-show] {
+ left: 0;
+ }
+ }
+
+ // shadow
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ display: block;
+ width: 20px;
+ background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
+ pointer-events: none;
+
+ // use border on mobile devices
+ @media @mobile {
+ width: 1px;
+ background: @c-border;
+ }
+ }
+
+ &-header {
+ position: relative;
+ padding-top: 40px;
+ text-align: center;
+ border-bottom: 1px solid @c-border;
+
+ @media @mobile {
+ display: none;
+ }
+
+ .@{prefix}-menu-logo {
+ display: inline-block;
+ width: 66px;
+ height: 65px;
+ background: url(@img-logo) no-repeat 0 / contain;
+ }
+
+ h1 {
+ margin: 10px 0 0;
+ color: @c-heading;
+ font-weight: 500;
+ line-height: 1.40625;
+ }
+
+ p {
+ margin: 0 0 5px;
+ color: lighten(@c-secondary, 10%);
+
+ // badges
+ > object[data^='https://img.shields.io'] {
+ max-height: 20px;
+ }
+
+ + p {
+ margin-bottom: 10px;
+ }
+ }
+ }
+
+ &-doc-locale {
+ padding: 16px 0;
+ text-align: center;
+ border-bottom: 1px solid @c-border;
+
+ &:empty {
+ display: none;
+ }
+ }
+
+ &-inner {
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ overscroll-behavior: contain;
+
+ // common list styles
+ ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ font-size: 16px;
+
+ li {
+ color: @c-text;
+ a,
+ > span {
+ position: relative;
+ display: block;
+ padding-right: 24px;
+ color: @c-heading;
+ line-height: 2.4;
+ text-decoration: none;
+ outline: none;
+ transition: color 0.3s, background 0.3s;
+
+ span {
+ display: block;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ &:hover,
+ &.active {
+ color: @c-primary;
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: -10px;
+ margin-top: -2.5px;
+ display: inline-block;
+ width: 5px;
+ height: 5px;
+ background-color: @c-primary;
+ border-radius: 50%;
+ opacity: 0;
+ transition: transform 0.2s, opacity 0.2s;
+ transform: scale(0) translateX(-10px);
+ }
+ }
+
+ &.active a,
+ a.active {
+ &::before {
+ opacity: 1;
+ transform: scale(1) translateX(0);
+ }
+ }
+
+ // level larger, offset larger, font size smaller
+ ul {
+ font-size: 0.9em;
+ padding-left: 1em;
+ }
+ }
+ }
+
+ // 1-level list styles
+ > ul {
+ > li > a {
+ line-height: 2.875;
+
+ &:not([href]) {
+ padding-top: 24px;
+ line-height: 1;
+ font-weight: 500;
+ color: @c-heading !important;
+ background: transparent !important;
+ cursor: default;
+ }
+ }
+
+ > li:first-child > a:not([href]) {
+ padding-top: 0;
+ }
+ }
+
+ // n-level list styles
+ > ul ul {
+ a {
+ color: @c-secondary;
+
+ &.active {
+ color: @c-primary;
+ }
+ }
+ }
+
+ .@{prefix}-menu-mobile-area {
+ display: none;
+ padding-bottom: 16px;
+ margin-bottom: 16px;
+ text-align: center;
+ border-bottom: 1px solid @c-border;
+
+ @media @mobile {
+ display: block;
+ }
+ }
+
+ // mobile nav list
+ .@{prefix}-menu-nav-list {
+ padding: 16px 0;
+
+ > li,
+ > li > a {
+ padding-right: 0;
+ line-height: 2.4;
+
+ ul {
+ padding-left: 0;
+
+ a {
+ padding-right: 0;
+ font-size: 90%;
+ }
+ }
+ }
+ }
+
+ // menu list
+ .@{prefix}-menu-list {
+ padding: 8px 0;
+ margin-bottom: 40px;
+
+ > li > a {
+ @c-active-bg: #e8ecf4;
+
+ padding-left: 28px;
+
+ &.active {
+ background: linear-gradient(to left, #e8ecf4, rgba(232, 236, 244, 0));
+ }
+
+ ~ ul {
+ margin-top: 8px;
+ margin-left: 28px;
+ }
+
+ @media @mobile {
+ padding-left: 16px;
+
+ ~ ul {
+ margin-left: 16px;
+ }
+ }
+ }
+ }
+ }
+
+ &[data-mode='site'] {
+ &::after {
+ width: 1px;
+ background: @c-border;
+ }
+
+ .@{prefix}-menu-list {
+ padding: 0;
+
+ > li > a {
+ position: relative;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ display: block;
+ width: 3px;
+ background-color: @c-primary;
+ visibility: hidden;
+ opacity: 0;
+ transition: all 0.3s;
+ border-radius: 1px;
+ }
+
+ &.active {
+ z-index: 1;
+ background: linear-gradient(to left, #f8faff, rgba(248, 250, 255, 0));
+
+ &::after {
+ opacity: 1;
+ visibility: visible;
+ }
+ }
+ }
+ }
+
+ @media @desktop {
+ top: @s-nav-height;
+ width: @s-site-menu-width;
+ padding-top: 50px;
+ background: transparent;
+
+ .@{prefix}-menu-nav,
+ .@{prefix}-menu-header {
+ display: none;
+ }
+
+ .@{prefix}-menu-list > li > a {
+ padding-left: 58px;
+
+ ~ ul {
+ margin-left: 58px;
+ }
+ }
+ }
+ }
+}
diff --git a/.dumi/theme/components/SideMenu.tsx b/.dumi/theme/components/SideMenu.tsx
new file mode 100755
index 000000000..2f534b2f4
--- /dev/null
+++ b/.dumi/theme/components/SideMenu.tsx
@@ -0,0 +1,139 @@
+import type { FC} from 'react';
+import React, { useContext } from 'react';
+import { context, Link, NavLink } from 'dumi/theme';
+import LocaleSelect from './LocaleSelect';
+import SlugList from './SlugList';
+import './SideMenu.less';
+
+interface INavbarProps {
+ mobileMenuCollapsed: boolean;
+ location: any;
+}
+
+const SideMenu: FC-
+ {items.map(meta => (
+
- setKeywords('')}>
+
+ {meta.parent?.title && {meta.parent.title}} + {meta.title} + +
+ ))}
+
+
+ );
+};
+
+export default SideMenu;
diff --git a/.dumi/theme/components/SlugList.less b/.dumi/theme/components/SlugList.less
new file mode 100755
index 000000000..16b370f08
--- /dev/null
+++ b/.dumi/theme/components/SlugList.less
@@ -0,0 +1,22 @@
+@import (reference) '../style/variables.less';
+
+ul[role='slug-list'] {
+ &:empty {
+ margin: 0 !important;
+ padding: 0 !important;
+ }
+
+ li {
+ > a.active {
+ color: darken(@c-primary, 2%);
+ }
+
+ &[data-depth='3'] {
+ padding-left: 24px;
+ }
+
+ &[data-depth='4'] {
+ padding-left: 48px;
+ }
+ }
+}
diff --git a/.dumi/theme/components/SlugList.tsx b/.dumi/theme/components/SlugList.tsx
new file mode 100755
index 000000000..c17dd012f
--- /dev/null
+++ b/.dumi/theme/components/SlugList.tsx
@@ -0,0 +1,20 @@
+import type { FC } from 'react';
+import React from 'react';
+import { AnchorLink } from 'dumi/theme';
+import './SlugList.less';
+
+const SlugsList: FC<{ slugs: any; className?: string }> = ({ slugs, ...props }) => (
+
+
+
+
+
+ {/* mobile nav list */}
+ {navItems.length ? (
+ {title}
+{description}
+ {/* github star badge */} + {/github\.com/.test(repoUrl) && mode === 'doc' && ( ++ +
+ )} +
+
+ ) : (
+ -
+ {navItems.map(nav => {
+ const child = Boolean(nav.children?.length) && (
+
-
+
{item.title} +
+ ))}
+ -
+ {nav.path ?
{nav.title} : nav.title} + {child} +
+ );
+ })}
+
-
+ {nav.children.map(item => (
+
+ {/* doc mode locale select */}
+
+ )}
+ {/* menu list */}
+ -
+ {!isHiddenMenus &&
+ menu.map(item => {
+ // always use meta from routes to reduce menu data size
+ const hasSlugs = Boolean(meta.slugs?.length);
+ const hasChildren = item.children && Boolean(item.children.length);
+ const show1LevelSlugs =
+ meta.toc === 'menu' && !hasChildren && hasSlugs && item.path === location.pathname.replace(/([^^])\/$/, '$1');
+
+ return (
+
-
+
+ {item.title} + + {/* group children */} + {Boolean(item.children && item.children.length) && ( +-
+ {item.children.map(child => (
+
-
+
+ {child.title} + + {/* group children slugs */} + {Boolean( + meta.toc === 'menu' && + typeof window !== 'undefined' && + child.path === location.pathname && + hasSlugs, + ) &&} +
+ ))}
+
} +
+ );
+ })}
+ -
+
-
+ {slugs
+ .filter(({ depth }) => depth > 1 && depth < 5)
+ .map(slug => (
+
-
+
+ {slug.value} + +
+ ))}
+
+ {hero.image && 
}
+
+
+);
+
+const Features = features => (
+ {hero.title}
+ + {hero.actions && + hero.actions.map(action => ( + + + + ))} +
+ {features.map(feat => (
+
+);
+
+const Layout: React.FC-
+ {feat.link ? (
+
+
- {feat.title} + + ) : ( +
- {feat.title} + )} + +
{
+ if (menuCollapsed) return;
+ setMenuCollapsed(true);
+ }}
+ >
+
+ );
+};
+
+export default Layout;
diff --git a/.dumi/theme/style/layout.less b/.dumi/theme/style/layout.less
new file mode 100755
index 000000000..0cfec6bd6
--- /dev/null
+++ b/.dumi/theme/style/layout.less
@@ -0,0 +1,325 @@
+@import './markdown.less';
+@import './variables.less';
+
+@s-toc-width: 350px;
+
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB,
+ Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+ Segoe UI Symbol;
+ font-variant: tabular-nums;
+ font-feature-settings: 'tnum';
+ -webkit-font-smoothing: antialiased;
+}
+
+.@{prefix}-layout {
+ box-sizing: border-box;
+ min-height: 100vh;
+ padding: 16px (@s-content-margin + @s-toc-width) 50px @s-menu-width + @s-content-margin;
+
+ @media @mobile {
+ padding-top: 66px !important;
+ padding-left: 16px !important;
+ padding-right: 16px !important;
+ }
+
+ &[data-gapless='true'] {
+ padding-top: @s-nav-height !important;
+ padding-right: 0 !important;
+ padding-left: 0 !important;
+ padding-bottom: 0;
+
+ @media @mobile {
+ padding-top: @s-mobile-nav-height !important;
+ }
+ }
+
+ &[data-show-sidemenu='false'] {
+ padding-left: @s-content-margin;
+ }
+
+ &[data-show-slugs='false'] {
+ padding-right: @s-content-margin;
+ }
+
+ &[data-site-mode='true'] {
+ padding-top: @s-nav-height + 50px;
+
+ &[data-show-sidemenu='true'] {
+ padding-left: @s-site-menu-width + 50px;
+ }
+
+ &[data-show-slugs='true'] {
+ padding-right: @s-content-margin + @s-toc-width + 14;
+ }
+
+ .@{prefix}-layout-content > .markdown:first-child > *:first-child {
+ margin-top: 0;
+ }
+
+ .@{prefix}-layout-toc {
+ top: 114px;
+ max-height: calc(100vh - 154px);
+ }
+ }
+
+ &-hero {
+ margin: -50px -58px 0;
+ padding: 100px 0;
+ text-align: center;
+ background-color: #f5f6f8;
+
+ @media @mobile {
+ margin: -16px -16px 0;
+ padding: 48px 0;
+ }
+
+ img {
+ max-width: 100%;
+ max-height: 200px;
+ margin-bottom: 1rem;
+ }
+
+ h1 {
+ margin: 0 0 16px;
+ font-size: 48px;
+ font-weight: 600;
+ line-height: 56px;
+ color: #080e29;
+
+ + div {
+ margin: 16px 0 32px;
+ opacity: 0.78;
+
+ .markdown {
+ font-size: 16px;
+ }
+ }
+ }
+
+ button {
+ margin-right: 16px;
+ padding: 0 32px;
+ height: 44px;
+ color: @c-primary;
+ font-size: 16px;
+ background: transparent;
+ border: 1px solid @c-primary;
+ border-radius: 22px;
+ box-sizing: border-box;
+ cursor: pointer;
+ outline: none;
+ transition: all 0.3s;
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ &:active {
+ opacity: 0.9;
+ }
+ }
+
+ a:last-child button {
+ margin-right: 0;
+ color: #fff;
+ background: @c-primary;
+ }
+ }
+
+ &-features {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-column-gap: 96px;
+ grid-row-gap: 56px;
+ padding: 72px 0;
+
+ > dl {
+ flex: 1;
+ margin: 0;
+ text-align: center;
+ background: no-repeat center top / auto 48px;
+
+ &[style*='background-image'] {
+ padding-top: 64px;
+ }
+
+ dt {
+ margin-bottom: 12px;
+ font-size: 20px;
+ line-height: 1;
+ color: @c-heading;
+ }
+
+ a {
+ transition-duration: none;
+ }
+
+ a dt {
+ color: @c-link;
+ transition: opacity 0.2s;
+ &:hover {
+ opacity: 0.7;
+ text-decoration: underline;
+ }
+
+ &:active {
+ opacity: 0.9;
+ }
+ }
+
+ dd {
+ margin: 0;
+
+ .markdown {
+ color: @c-secondary;
+ font-size: 14px;
+ line-height: 22px;
+
+ > p:first-child {
+ margin-top: 0;
+ }
+
+ > p:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+ }
+
+ @media @mobile {
+ display: block;
+ padding: 40px 0;
+
+ > dl {
+ text-align: left;
+ background-position: left top;
+
+ &[style*='background-image'] {
+ padding: 0 0 0 60px;
+ }
+
+ + dl {
+ margin-top: 32px;
+ }
+ }
+ }
+ }
+
+ &-features,
+ &-features + &-content,
+ &-hero + &-content {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 960px;
+ }
+
+ &-hero + &-content {
+ margin-top: 60px;
+ }
+
+ &-toc {
+ list-style: none;
+ position: fixed;
+ z-index: 10;
+ top: 50px;
+ right: 0;
+ width: @s-toc-width;
+ max-height: calc(90vh - 80px);
+ margin: 0;
+ padding: 0 24px 0 0;
+ background-color: #fff;
+ box-shadow: 0 0 16px 16px #fff;
+ box-sizing: content-box;
+ overflow: auto;
+
+ @media @mobile {
+ display: none;
+ }
+
+ li {
+ position: relative;
+ margin: 0;
+ padding: 4px 0 4px 6px;
+ text-indent: 24px;
+ font-size: 13px;
+ // line-height: 1.40625;
+ line-height: 1.60625;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+
+ a {
+ color: @c-text;
+ text-decoration: none;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ display: inline-block;
+ width: 2px;
+ background: @c-border;
+ }
+
+ &:hover {
+ color: lighten(@c-primary, 5%);
+ }
+
+ &:active {
+ color: lighten(@c-primary, 3%);
+ }
+
+ &.active {
+ color: @c-primary;
+
+ &::before {
+ background: @c-primary;
+ }
+ }
+ }
+ }
+ }
+
+ &-footer-meta {
+ margin-top: 40px;
+ padding-top: 24px;
+ display: flex;
+ color: @c-secondary;
+ font-size: 14px;
+ justify-content: space-between;
+ border-top: 1px solid @c-border;
+
+ @media only screen and (max-width: 960px) {
+ display: block;
+ }
+
+ > a {
+ margin-bottom: 4px;
+ display: block;
+ color: @c-primary;
+ text-decoration: none;
+ }
+
+ > span:last-child {
+ &::before {
+ content: attr(data-updated-text);
+ color: @c-primary;
+ }
+ }
+ }
+}
+
+.__dumi-default-layout-footer {
+ margin: 72px 0 -32px;
+ padding-top: 24px;
+ border-top: 1px solid @c-border;
+ text-align: center;
+
+ .markdown {
+ color: #b0b1ba;
+ }
+}
diff --git a/.dumi/theme/style/markdown.less b/.dumi/theme/style/markdown.less
new file mode 100755
index 000000000..803b7d66d
--- /dev/null
+++ b/.dumi/theme/style/markdown.less
@@ -0,0 +1,196 @@
+@import (reference) './variables.less';
+
+.markdown {
+ color: @c-text;
+ font-size: 15px;
+ line-height: 1.60625;
+
+ &:not(:first-child):empty {
+ min-height: 32px;
+ }
+
+ // titles
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ margin: 42px 0 18px;
+ color: @c-heading;
+ font-weight: 500;
+ line-height: 1.40625;
+
+ // anchor link
+ &:hover > a[aria-hidden] {
+ float: left;
+ margin-top: 0.06em;
+ margin-left: -20px;
+ width: 20px;
+ padding-right: 4px;
+ line-height: 1;
+ box-sizing: border-box;
+
+ @media @mobile {
+ width: 14px;
+ margin-left: -14px;
+ }
+
+ &::after {
+ content: '#';
+ display: inline-block;
+ vertical-align: middle;
+ font-size: 20px;
+ }
+
+ span {
+ display: none;
+ }
+ }
+
+ + h1,
+ + h2,
+ + h3,
+ + h4,
+ + h5,
+ + h6 {
+ margin-top: 16px;
+ }
+ }
+
+ h1 {
+ margin-top: 48px;
+ margin-bottom: 32px;
+ font-size: 32px;
+ }
+
+ h2 {
+ font-size: 24px;
+ }
+
+ h3 {
+ font-size: 20px;
+ }
+
+ h4 {
+ font-size: 18px;
+ }
+
+ h5 {
+ font-size: 16px;
+ }
+
+ h6 {
+ font-size: 14px;
+ }
+
+ // paragraph
+ p {
+ margin: 16px 0;
+ }
+
+ // inline code
+ *:not(pre) code {
+ padding: 2px 5px;
+ color: #d56161;
+ background: darken(@c-light-bg, 1%);
+ }
+
+ code {
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ }
+
+ // code block
+ pre {
+ font-size: 14px;
+ background: darken(@c-light-bg, 1%);
+
+ &:not([class^='language-']) {
+ padding: 1em;
+ }
+ }
+
+ // horizontal line
+ hr {
+ margin: 16px 0;
+ border: 0;
+ border-top: 1px solid @c-border;
+ }
+
+ // blockquote
+ blockquote {
+ margin: 16px 0;
+ padding: 0 24px;
+ color: fadeout(@c-text, 30%);
+ border-left: 4px solid @c-border;
+ overflow: hidden;
+ }
+
+ // list
+ ul,
+ ol {
+ margin: 8px 0 8px 32px;
+ padding: 0;
+
+ li {
+ margin-bottom: 4px;
+ }
+ }
+
+ // table
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ border: 1px solid @c-border;
+
+ th,
+ td {
+ padding: 10px 24px;
+ border: 1px solid @c-border;
+ }
+
+ th {
+ font-weight: 600;
+ background: @c-light-bg;
+ }
+
+ td:first-child {
+ font-weight: 500;
+ }
+
+ a {
+ svg {
+ display: none;
+ }
+ }
+ }
+
+ // links
+ a {
+ color: @c-link;
+ text-decoration: none;
+ transition: opacity 0.2s;
+ outline: none;
+
+ &:hover {
+ opacity: 0.7;
+ text-decoration: underline;
+ }
+
+ &:active {
+ opacity: 0.9;
+ }
+ }
+
+ // images
+ img {
+ max-width: 100%;
+ }
+}
+
+.@{prefix} {
+ &-external-link-icon {
+ vertical-align: -0.155em;
+ margin-left: 2px;
+ }
+}
diff --git a/.dumi/theme/style/variables.less b/.dumi/theme/style/variables.less
new file mode 100755
index 000000000..b6f3d7009
--- /dev/null
+++ b/.dumi/theme/style/variables.less
@@ -0,0 +1,26 @@
+/* 颜色表 */
+@c-primary: #4569d4;
+@c-heading: #454d64;
+@c-text: #454d64;
+@c-secondary: #717484;
+@c-link: @c-primary;
+@c-border: #ebedf1;
+@c-light-bg: #f9fafb;
+
+/* 尺寸表 */
+@s-nav-height: 64px;
+@s-mobile-nav-height: 50px;
+@s-menu-width: 260px;
+@s-site-menu-width: 350px;
+@s-menu-mobile-width: 80vw;
+@s-content-margin: 58px;
+
+@img-logo: 'data:image/png;base64,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';
+@prefix: __dumi-default;
+@mobile: ~'only screen and (max-width: 767px)';
+@desktop: ~'only screen and (min-width: 768px)';
+@icons: 'data:image/png;base64,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';
+
+.@{prefix}-icon {
+ background: url(@icons) no-repeat ~'0 0/230px auto';
+}
diff --git a/.dumi/theme/test/index.test.tsx b/.dumi/theme/test/index.test.tsx
new file mode 100755
index 000000000..bae46d9e2
--- /dev/null
+++ b/.dumi/theme/test/index.test.tsx
@@ -0,0 +1,315 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, queryByAttribute, fireEvent } from '@testing-library/react';
+import type { MemoryHistory} from '@umijs/runtime';
+import { createMemoryHistory, Router } from '@umijs/runtime';
+import { context as Context } from 'dumi/theme';
+import SourceCode from '../builtins/SourceCode';
+import Alert from '../builtins/Alert';
+import Badge from '../builtins/Badge';
+import Previewer from '../builtins/Previewer';
+import API from '../builtins/API';
+import Layout from '../layout';
+
+let history: MemoryHistory;
+
+// mock history location which import from 'dumi'
+jest.mock('dumi', () => ({
+ history: { location: { pathname: '/' } },
+}));
+
+describe('default theme', () => {
+ history = createMemoryHistory({ initialEntries: ['/', '/en-US'], initialIndex: 0 });
+ const baseCtx = {
+ title: 'test',
+ locale: 'zh-CN',
+ routes: [
+ {
+ path: '/',
+ title: '首页',
+ meta: {},
+ },
+ {
+ path: '/en-US',
+ title: 'Home',
+ meta: {},
+ },
+ ],
+ config: {
+ locales: [
+ { name: 'zh-CN', label: '中文' },
+ { name: 'en-US', label: 'English' },
+ ],
+ menus: {},
+ navs: {},
+ title: 'test',
+ logo: '/',
+ mode: 'site' as 'doc' | 'site',
+ repository: { branch: 'mater' },
+ },
+ meta: {},
+ menu: [
+ {
+ title: '分组',
+ children: [
+ {
+ title: 'English',
+ path: '/en',
+ },
+ ],
+ },
+ ],
+ nav: [
+ {
+ path: '/',
+ title: '首页',
+ children: [],
+ },
+ {
+ title: '生态',
+ children: [
+ {
+ path: 'https://d.umijs.org',
+ title: 'GitHub',
+ children: [],
+ },
+ ],
+ },
+ ],
+ base: '/',
+ };
+ const baseProps = {
+ history,
+ location: { ...history.location, query: {} },
+ match: { params: {}, isExact: true, path: '/', url: '/' },
+ route: { path: '/', routes: baseCtx.routes },
+ };
+
+ it('should render site home page', () => {
+ const wrapper = ({ children }) => (
+
+ {children}
+ {!showHero && !showFeatures && meta.filePath && !meta.gapless && (
+
+
+ {repoPlatform && (
+
+ {isCN ? `在 ${repoPlatform} 上编辑此页` : `Edit this doc on ${repoPlatform}`}
+
+ )}
+ {updatedTime}
+
+ )}
+ {(showHero || showFeatures) && meta.footer && (
+
+ )}
+ Home Page
+Doc
+
+
+## 数据的存储 —— 结构和关系
+
+## 数据的行为 —— 操作和事件
+
+## 数据的形态 —— 页面和区块
\ No newline at end of file
diff --git a/docs/cores/nocobase-core.png b/docs/cores/nocobase-core.png
new file mode 100644
index 000000000..0b3f4db1b
Binary files /dev/null and b/docs/cores/nocobase-core.png differ
diff --git a/docs/cores/packages/actions.md b/docs/cores/packages/actions.md
new file mode 100644
index 000000000..418bcd4f8
--- /dev/null
+++ b/docs/cores/packages/actions.md
@@ -0,0 +1,426 @@
+---
+title: '@nocobase/actions'
+order: 4
+# toc: menu
+---
+
+# @nocobase/actions
+
+## 介绍
+
+为资源提供了几种默认方法：
+
+- list：查看列表
+- get：查看详情
+- create：创建数据
+- update：更新数据
+- destroy：删除数据
+- set：建立关联
+- add：附加关联
+- remove：删除关联
+- toggle：附加或删除关联
+- sort：排序
+
+## 安装
+
+```bash
+yarn add @nocobase/actions
+```
+
+.env 环境变量配置，这种方式有些局限，接下来会提供更完整的 .nocobaserc.ts 文件，用于支持更灵活的配置，包括但不局限于数据库信息、插件等。
+
+
+### 微内核
+
+NocoBase 采用微内核架构，框架只保留核心的概念，具体各类功能都以插件的形式扩展。各个包可以拆出来单独或组合使用，可用于现有项目中，这也是渐进式框架的意义所在。除此之外，我们也非常注重与现有技术框架融合，做连接现有生态的桥梁，而不是闭门造车。
+
+### 插件化
+
+所有的功能需求都通过插件形式扩展，除了现有的几个核心插件以外，开发者还可以自由的扩展，包括但不局限于：
+
+- Collection - 数据
+- Relationship - 相关数据
+- Field - 字段
+- Model - 模型
+- Hook - 触发事件
+- Resource - 资源
+- Action - 操作方法
+- Middleware - 中间件
+- Block - 区块
+- Page - 页面
+
+### 配置化驱动
+
+配置化是常见的无代码/低代码技术方案，NocoBase 也是基于配置驱动的，为了方便各类配置需求，配置有三类写法：
+
+- 直接写在代码里，多用于处理动态配置
+- 保存在文件里，多用于系统表配置或纯开发配置
+- 保存在数据表里，多用于业务表配置
+
+## 核心点在哪里？
+
+NocoBase 本质上是对数据的信息化处理，包括三点核心：
+
+- 数据的存储 —— 结构和关系
+- 数据的行为 —— 方法和事件
+- 数据的形态 —— 页面和区块
diff --git a/docs/guide/nocobase.png b/docs/guide/nocobase.png
new file mode 100644
index 000000000..c5001529b
Binary files /dev/null and b/docs/guide/nocobase.png differ
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 000000000..5244a2c4d
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,20 @@
+---
+title: NocoBase - An open source and free no-code development platform
+hero:
+ title: NocoBase
+ desc: An open source and free no-code development platform
+ actions:
+ - text: Getting Started
+ link: /guide
+features:
+ - icon: https://gw.alipayobjects.com/zos/bmw-prod/881dc458-f20b-407b-947a-95104b5ec82b/k79dm8ih_w144_h144.png
+ title: Feature 1
+ desc: Balabala
+ - icon: https://gw.alipayobjects.com/zos/bmw-prod/d60657df-0822-4631-9d7c-e7a869c2f21c/k79dmz3q_w126_h126.png
+ title: Feature 2
+ desc: Balabala
+ - icon: https://gw.alipayobjects.com/zos/bmw-prod/d1ee0c6f-5aed-4a45-a507-339a4bfe076c/k7bjsocq_w144_h144.png
+ title: Feature 3
+ desc: Balabala
+footer: Copyright © 2020-2021 NocoBase. All rights reserved.
+---
diff --git a/docs/index.zh-CN.md b/docs/index.zh-CN.md
new file mode 100644
index 000000000..0b622a96b
--- /dev/null
+++ b/docs/index.zh-CN.md
@@ -0,0 +1,20 @@
+---
+title: NocoBase - An open source and free no-code development platform
+hero:
+ title: NocoBase
+ desc: An open source and free no-code development platform
+ actions:
+ - text: 快速上手
+ link: /zh-CN/guide
+features:
+ - icon: https://gw.alipayobjects.com/zos/bmw-prod/881dc458-f20b-407b-947a-95104b5ec82b/k79dm8ih_w144_h144.png
+ title: 特性 1
+ desc: Balabala
+ - icon: https://gw.alipayobjects.com/zos/bmw-prod/d60657df-0822-4631-9d7c-e7a869c2f21c/k79dmz3q_w126_h126.png
+ title: 特性 2
+ desc: Balabala
+ - icon: https://gw.alipayobjects.com/zos/bmw-prod/d1ee0c6f-5aed-4a45-a507-339a4bfe076c/k7bjsocq_w144_h144.png
+ title: 特性 3
+ desc: Balabala
+footer: Copyright © 2020-2021 NocoBase. All rights reserved.
+---
diff --git a/docs/plugins/concepts/actions.md b/docs/plugins/concepts/actions.md
new file mode 100644
index 000000000..bb70b34a7
--- /dev/null
+++ b/docs/plugins/concepts/actions.md
@@ -0,0 +1,24 @@
+---
+title: Actions - 操作方法
+group:
+ order: 2
+ title: 概念
+---
+
+# Actions - 操作方法
+
+与 resourcer.registerAction 用法一致
+
+```ts
+export async function get(ctx, next) {
+ await next();
+}
+
+export const list = {
+ filter,
+ fields, // 初始化的参数
+ async handler(ctx, next) {
+ await next();
+ }
+}
+```
diff --git a/docs/plugins/concepts/blocks.md b/docs/plugins/concepts/blocks.md
new file mode 100644
index 000000000..18d1f0b07
--- /dev/null
+++ b/docs/plugins/concepts/blocks.md
@@ -0,0 +1,56 @@
+---
+title: Blocks - 区块
+---
+
+# Blocks - 区块
+
+## 字段区块
+
+```ts
+export default {
+ name: 'examples',
+ fields: [
+ {
+ name: 'content',
+ interface: 'string',
+ type: 'string',
+ block: {
+ type: 'textarea',
+ },
+ }
+ ],
+};
+```
+
+## 数据表区块
+
+```ts
+export default {
+ name: 'examples',
+ blocks: [
+ {
+ type: 'form',
+ name: 'form',
+ title: '表单',
+ fields: ['col1', 'col2'],
+ },
+ ],
+};
+```
+
+## 后台可配置
+
+```ts
+export const form = {
+ title: '表单',
+ options: {
+ // form blocks 配置项默认值
+ },
+ properties: {
+ // 需要开放配置的字段
+ },
+ linkages: {
+ // 字段联动
+ },
+};
+```
diff --git a/docs/plugins/concepts/collections.md b/docs/plugins/concepts/collections.md
new file mode 100644
index 000000000..62adcc70f
--- /dev/null
+++ b/docs/plugins/concepts/collections.md
@@ -0,0 +1,25 @@
+---
+title: Collections - 数据集
+---
+
+# Collections - 数据集
+
+与 database.table 用法一致
+
+```ts
+export default {
+ name: 'examples',
+ fields: [],
+}
+```
+
+配置扩展
+
+```ts
+import { extend } from '@nocobase/database';
+
+export default extend({
+ name: 'examples',
+ fields: [],
+});
+```
\ No newline at end of file
diff --git a/docs/plugins/concepts/fields.md b/docs/plugins/concepts/fields.md
new file mode 100644
index 000000000..0aa16af72
--- /dev/null
+++ b/docs/plugins/concepts/fields.md
@@ -0,0 +1,117 @@
+---
+title: Fields - 字段
+---
+
+# Fields
+
+一个完整的字段由「数据类型」和「区块类型」两部分参数组合而成。同一个数据类型可能对应多种区块类型，同一个区块类型的数据值也可能是多种数据类型。因此提炼了字段的接口（Interface）作为唯一标识。
+
+字段的 Types 和 Blocks 就不赘述了，请查阅核心章节介绍
+
+- [Field Types](/cores/packages/database#field-types)
+- [Field Blocks](/cores/packages/blocks#fields---字段)
+
+