dumi 2.0.0-beta.16 → 2.0.0-beta.17

package/dist/client/theme-api/index.d.ts

@@ -3,6 +3,7 @@ export { useSiteData } from './context';
 export { DumiDemo } from './DumiDemo';
 export { DumiDemoGrid } from './DumiDemoGrid';
 export { DumiPage } from './DumiPage';
+export { openCodeSandbox } from './openCodeSandbox';
 export type { IPreviewerProps } from './types';
 export { useAtomAssets } from './useAtomAssets';
 export { useLocale } from './useLocale';

package/dist/client/theme-api/index.js

@@ -3,6 +3,7 @@ export { useSiteData } from "./context";
 export { DumiDemo } from "./DumiDemo";
 export { DumiDemoGrid } from "./DumiDemoGrid";
 export { DumiPage } from "./DumiPage";
+export { openCodeSandbox } from "./openCodeSandbox";
 export { useAtomAssets } from "./useAtomAssets";
 export { useLocale } from "./useLocale";
 export { useNavData } from "./useNavData";

package/dist/client/theme-api/openCodeSandbox.d.ts

@@ -0,0 +1,9 @@
+/**
+ * use CodeSandbox.io
+ * @param data  previewer opts
+ * @param opts  the api that CodeSandbox calls when creating the demo
+ * @note  return a open function for open demo on codesandbox.io
+ */
+export declare const openCodeSandbox: (data: IPreviewerProps, opts?: {
+    api?: string;
+}) => void;

package/dist/client/theme-api/openCodeSandbox.js

@@ -0,0 +1,110 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { getParameters } from 'codesandbox/lib/api/define';
+import { genReactRenderCode } from "./utils";
+var CSB_API_ENDPOINT = 'https://codesandbox.io/api/v1/sandboxes/define';
+/**
+ * get serialized data that use to submit to codesandbox.io
+ * @param opts  previewer props
+ */
+
+function getCSBData(opts) {
+  var _opts$asset$dependenc, _react, _deps$_react, _reactDom, _deps$_reactDom;
+
+  var isTSX = Boolean((_opts$asset$dependenc = opts.asset.dependencies) === null || _opts$asset$dependenc === void 0 ? void 0 : _opts$asset$dependenc['index.tsx']);
+  var ext = isTSX ? '.tsx' : '.jsx';
+  var files = {};
+  var deps = {};
+  var entryFileName = "index".concat(ext);
+  Object.entries(opts.asset.dependencies).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        name = _ref2[0],
+        _ref2$ = _ref2[1],
+        type = _ref2$.type,
+        value = _ref2$.value;
+
+    if (type === 'NPM') {
+      // generate dependencies
+      deps[name] = value;
+    } else {
+      // append other imported local files
+      files[name === entryFileName ? "App".concat(ext) : name] = {
+        content: value,
+        isBinary: false
+      };
+    }
+  }); // add react、react-dom dependency
+
+  (_deps$_react = deps[_react = 'react']) !== null && _deps$_react !== void 0 ? _deps$_react : deps[_react] = 'latest';
+  (_deps$_reactDom = deps[_reactDom = 'react-dom']) !== null && _deps$_reactDom !== void 0 ? _deps$_reactDom : deps[_reactDom] = deps.react; // append sandbox.config.json
+
+  files['sandbox.config.json'] = {
+    content: JSON.stringify({
+      template: isTSX ? 'create-react-app-typescript' : 'create-react-app'
+    }, null, 2),
+    isBinary: false
+  }; // append package.json
+
+  files['package.json'] = {
+    content: JSON.stringify({
+      name: opts.title,
+      description: opts.description || 'An auto-generated demo by dumi',
+      main: entryFileName,
+      dependencies: deps,
+      // add TypeScript dependency if required, must in devDeps to avoid csb compile error
+      devDependencies: isTSX ? {
+        typescript: '^4'
+      } : {}
+    }, null, 2),
+    isBinary: false
+  }; // append index.html
+
+  files['index.html'] = {
+    content: '<div style="margin: 16px;" id="root"></div>',
+    isBinary: false
+  }; // append entry file
+
+  files[entryFileName] = {
+    content: genReactRenderCode(deps.react),
+    isBinary: false
+  };
+  return getParameters({
+    files: files
+  });
+}
+/**
+ * use CodeSandbox.io
+ * @param data  previewer opts
+ * @param opts  the api that CodeSandbox calls when creating the demo
+ * @note  return a open function for open demo on codesandbox.io
+ */
+
+
+export var openCodeSandbox = function openCodeSandbox(data, opts) {
+  var _data$assets;
+
+  var form = document.createElement('form');
+  var input = document.createElement('input');
+  var CSBData = getCSBData(data);
+  form.method = 'POST';
+  form.target = '_blank';
+  form.style.display = 'none';
+  form.action = (opts === null || opts === void 0 ? void 0 : opts.api) || CSB_API_ENDPOINT;
+  form.appendChild(input);
+  form.setAttribute('data-demo', ((_data$assets = data.assets) === null || _data$assets === void 0 ? void 0 : _data$assets.id) || '');
+  input.name = 'parameters';
+  input.value = CSBData;
+  document.body.appendChild(form);
+  form.submit();
+  form.remove();
+};

package/dist/client/theme-api/types.d.ts

@@ -10,9 +10,9 @@ export interface IPreviewerProps {
      */
     description?: string;
     /**
-     * file path of current demo
+     * filename of current demo
      */
-    filePath?: string;
+    filename?: string;
     /**
      * use iframe to render demo
      */
@@ -79,6 +79,7 @@ export interface IRouteMeta {
             tocDepth?: number;
         };
         atomId?: string;
+        filename?: string;
         [key: string]: any;
     };
     toc: {
@@ -148,6 +149,7 @@ export interface IThemeConfig {
         children?: INavItem[];
     })[];
     sidebar?: Record<string, ISidebarGroup[]>;
+    footer?: string;
     [key: string]: any;
 }
 export declare type IRoutesById = Record<string, {

package/dist/client/theme-api/utils.d.ts

@@ -1,2 +1,8 @@
 import type { IRoutesById } from './types';
 export declare const useLocaleDocRoutes: () => IRoutesById;
+/**
+ * 在 react 18 中需要新的 render 方式，这个函数用来处理不同的 jsx 模式。
+ * @param version react version
+ * @returns code string
+ */
+export declare const genReactRenderCode: (version: string) => string;

package/dist/client/theme-api/utils.js

@@ -41,4 +41,19 @@ export var useLocaleDocRoutes = function useLocaleDocRoutes() {
       localeDocRoutes = _useState2[0];
 
   return localeDocRoutes;
+};
+/**
+ * 在 react 18 中需要新的 render 方式，这个函数用来处理不同的 jsx 模式。
+ * @param version react version
+ * @returns code string
+ */
+
+export var genReactRenderCode = function genReactRenderCode(version) {
+  var annotation = "/**\n * This is an auto-generated demo by dumi\n * if you think it is not working as expected,\n * please report the issue at\n * https://github.com/umijs/dumi/issues\n */";
+
+  if (version.startsWith('18.') || version === 'latest') {
+    return "".concat(annotation, "\n\nimport React from 'react';\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\n\nconst rootElement = document.getElementById(\"root\");\nconst root = createRoot(rootElement);\n\nroot.render(<App />);");
+  }
+
+  return "".concat(annotation, "\n    \nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n    \nReactDOM.render(\n  <App />,\n  document.getElementById('root'),\n);");
 };

package/dist/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const LOCAL_DUMI_DIR = ".dumi";
 export declare const LOCAL_THEME_DIR: string;
+export declare const LOCAL_PAGES_DIR: string;
 export declare const THEME_PREFIX = "dumi-theme-";
 export declare const SP_ROUTE_PREFIX = "~";
 export declare const PICKED_PKG_FIELDS: {

package/dist/constants.js

@@ -21,6 +21,7 @@ var constants_exports = {};
 __export(constants_exports, {
   CLIENT_DEPS: () => CLIENT_DEPS,
   LOCAL_DUMI_DIR: () => LOCAL_DUMI_DIR,
+  LOCAL_PAGES_DIR: () => LOCAL_PAGES_DIR,
   LOCAL_THEME_DIR: () => LOCAL_THEME_DIR,
   PICKED_PKG_FIELDS: () => PICKED_PKG_FIELDS,
   SP_ROUTE_PREFIX: () => SP_ROUTE_PREFIX,
@@ -29,6 +30,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 var LOCAL_DUMI_DIR = ".dumi";
 var LOCAL_THEME_DIR = `${LOCAL_DUMI_DIR}/theme`;
+var LOCAL_PAGES_DIR = `${LOCAL_DUMI_DIR}/pages`;
 var THEME_PREFIX = "dumi-theme-";
 var SP_ROUTE_PREFIX = "~";
 var PICKED_PKG_FIELDS = {
@@ -57,6 +59,7 @@ var CLIENT_DEPS = [
 0 && (module.exports = {
   CLIENT_DEPS,
   LOCAL_DUMI_DIR,
+  LOCAL_PAGES_DIR,
   LOCAL_THEME_DIR,
   PICKED_PKG_FIELDS,
   SP_ROUTE_PREFIX,

package/dist/features/configPlugins/index.js

@@ -30,7 +30,9 @@ var configPlugins_default = (api) => {
       atomDirs: [{ type: "component", dir: "src" }],
       codeBlockMode: "active"
     },
-    themeConfig: {}
+    themeConfig: {
+      footer: `Copyright \xA9 ${new Date().getFullYear()} | Powered by <a href="https://d.umijs.org" target="_blank" rel="noreferrer">dumi</a>`
+    }
   };
   const schemas = (0, import_schema.getSchemas)();
   for (const key of Object.keys(schemas)) {

package/dist/features/derivative.js

@@ -68,6 +68,12 @@ var derivative_default = (api) => {
         });
       }
     }
+    if (api.userConfig.conventionRoutes !== false) {
+      memo.conventionRoutes = {
+        base: import_path.default.join(api.cwd, import_constants.LOCAL_PAGES_DIR),
+        exclude: [/(\/|^)(\.|_\/)/]
+      };
+    }
     memo.hash = true;
     return memo;
   });

package/dist/features/routes.js

@@ -58,15 +58,8 @@ var routes_default = (api) => {
       { dir: "docs" }
     ]
   ].map(({ dir }) => import_path.default.join(api.cwd, dir, "**/*.md"));
-  const pagesDir = import_path.default.join(api.cwd, ".dumi/pages");
   api.describe({ key: "dumi:routes" });
   api.addTmpGenerateWatcherPaths(() => extraWatchPaths);
-  api.modifyConfig((memo) => {
-    memo.conventionRoutes = {
-      base: pagesDir
-    };
-    return memo;
-  });
   api.modifyDefaultConfig((memo) => {
     if (api.userConfig.resolve) {
       const keys = ["docDirs", "atomDirs"];
@@ -117,7 +110,7 @@ var routes_default = (api) => {
       };
     }
     Object.entries(pages).forEach(([, route]) => {
-      route.file = (0, import_plugin_utils.winPath)(import_path.default.resolve(pagesDir, route.file));
+      route.file = (0, import_plugin_utils.winPath)(import_path.default.resolve(api.config.conventionRoutes.base, route.file));
       flatRoute(route);
       routes[route.id] = route;
     });
@@ -125,7 +118,7 @@ var routes_default = (api) => {
       const base = import_path.default.join(api.cwd, dir);
       const dirRoutes = (0, import_core.getConventionRoutes)({
         base,
-        exclude: [/.*(?<!md)$/]
+        exclude: [/.*(?<!md)$/, /(\/|^)(\.|_\/)/]
       });
       Object.entries(dirRoutes).forEach(([key, route]) => {
         route.id = `${dir}/${key}`;

package/dist/loaders/markdown/index.js

@@ -87,16 +87,24 @@ function DumiMarkdownContent() {
 export default DumiMarkdownContent;`;
   }
 }
+function getEmbedsCacheKey(embeds = []) {
+  return JSON.stringify(embeds.map((file) => `${file}:${import_fs.default.statSync(file).mtimeMs}`));
+}
 var deferrer = {};
+var embedsMapping = {};
 function mdLoader(content) {
   const opts = this.getOptions();
   const cb = this.async();
   const cache = (0, import_utils.getCache)("md-loader");
-  const cacheKey = [
+  const baseCacheKey = [
     this.resourcePath,
     import_fs.default.statSync(this.resourcePath).mtimeMs,
     JSON.stringify(import_plugin_utils.lodash.omit(opts, ["mode", "builtins", "onResolveDemos"]))
   ].join(":");
+  const cacheKey = [
+    baseCacheKey,
+    getEmbedsCacheKey(embedsMapping[this.resourcePath])
+  ].join(":");
   const cacheRet = cache.getSync(cacheKey, "");
   if (cacheRet) {
     cb(null, emit.call(this, opts, cacheRet));
@@ -112,7 +120,12 @@ function mdLoader(content) {
     fileAbsPath: this.resourcePath
   });
   deferrer[cacheKey].then((ret) => {
-    cache.setSync(cacheKey, ret);
+    const finalCacheKey = [
+      baseCacheKey,
+      getEmbedsCacheKey(ret.meta.embeds)
+    ].join(":");
+    embedsMapping[this.resourcePath] = ret.meta.embeds || [];
+    cache.setSync(finalCacheKey, ret);
     cb(null, emit.call(this, opts, ret));
   }).catch(cb);
 }

package/dist/loaders/markdown/transformer/rehypeDemo.js

@@ -58,7 +58,7 @@ function getCodeLang(node, opts) {
 }
 function getCodeId(cwd, fileAbsPath, localId, atomId) {
   const prefix = atomId || (0, import_utils.getRoutePathFromFsPath)(import_path.default.relative(cwd, fileAbsPath)).replace(/\//g, "-");
-  return [prefix, "demo", localId].filter(Boolean).join("-");
+  return [prefix.toLowerCase(), "demo", localId.toLowerCase()].filter(Boolean).join("-");
 }
 function tryMarkDemoNode(node, opts) {
   var _a, _b;
@@ -140,13 +140,13 @@ function rehypeDemo(opts) {
             let component = "";
             if (codeType === "external") {
               parseOpts.fileAbsPath = codeNode.properties.src;
-              parseOpts.id = getCodeId(opts.cwd, opts.fileAbsPath, import_path.default.parse(parseOpts.fileAbsPath).name);
+              parseOpts.id = getCodeId(opts.cwd, opts.fileAbsPath, import_path.default.parse(parseOpts.fileAbsPath).name, vFile.data.frontmatter.atomId);
               component = `React.lazy(() => import('${(0, import_plugin_utils.winPath)(parseOpts.fileAbsPath)}?techStack=${techStack.name}'))`;
               codeNode.properties.title = codeValue || void 0;
-              (_a2 = codeNode.properties).filePath ?? (_a2.filePath = (0, import_plugin_utils.winPath)(import_path.default.relative(opts.cwd, parseOpts.fileAbsPath)));
+              (_a2 = codeNode.properties).filename ?? (_a2.filename = (0, import_plugin_utils.winPath)(import_path.default.relative(opts.cwd, parseOpts.fileAbsPath)));
             } else {
               parseOpts.fileAbsPath = opts.fileAbsPath.replace(".md", ".tsx");
-              parseOpts.id = getCodeId(opts.cwd, opts.fileAbsPath, String(index++));
+              parseOpts.id = getCodeId(opts.cwd, opts.fileAbsPath, String(index++), vFile.data.frontmatter.atomId);
               component = techStack.transformCode(codeValue, {
                 type: "code-block",
                 fileAbsPath: opts.fileAbsPath

package/dist/loaders/markdown/transformer/remarkMeta.js

@@ -52,6 +52,8 @@ function remarkMeta(opts) {
     const guessAtomId = getGuessAtomId(opts);
     vFile.data.frontmatter = {
       title: "",
+      toc: "menu",
+      filename: (0, import_plugin_utils.winPath)(import_path.default.relative(opts.cwd, opts.fileAbsPath)),
       ...guessAtomId && { atomId: guessAtomId }
     };
     visit(tree, "yaml", (node) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.0-beta.16",
+  "version": "2.0.0-beta.17",
   "description": "Framework for developing UI components",
   "keywords": [],
   "license": "MIT",
@@ -12,7 +12,6 @@
     "dist",
     "compiled",
     "theme-default",
-    "theme.d.ts",
     "index.d.ts"
   ],
   "scripts": {
@@ -59,7 +58,7 @@
     "@types/mdast": "^3.0.10",
     "@umijs/bundler-utils": "^4.0.27",
     "@umijs/core": "^4.0.27",
-    "@umijs/utils": "^4.0.27",
+    "codesandbox": "^2.2.3",
     "deepmerge": "^4.2.2",
     "dumi-afx-deps": "^1.0.0-alpha.1",
     "dumi-assets-types": "2.0.0-alpha.0",

package/theme-default/layouts/DocLayout/index.js

@@ -1,9 +1,11 @@
 import { useIntl, useOutlet, useRouteMeta } from 'dumi';
 import Content from 'dumi/theme/slots/Content';
 import Features from 'dumi/theme/slots/Features';
+import Footer from 'dumi/theme/slots/Footer';
 import Header from 'dumi/theme/slots/Header';
 import Hero from 'dumi/theme/slots/Hero';
 import Sidebar from 'dumi/theme/slots/Sidebar';
+import Toc from 'dumi/theme/slots/Toc';
 import React from 'react';
 import Helmet from 'react-helmet';
 import "./index.less";
@@ -34,7 +36,9 @@ var DocLayout = function DocLayout() {
   }), fm.keywords && /*#__PURE__*/React.createElement("meta", {
     property: "og:keywords",
     content: fm.keywords.join(',')
-  })), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(Hero, null), /*#__PURE__*/React.createElement(Features, null), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(Sidebar, null), /*#__PURE__*/React.createElement(Content, null, outlet)));
+  })), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(Hero, null), /*#__PURE__*/React.createElement(Features, null), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(Sidebar, null), /*#__PURE__*/React.createElement(Content, null, outlet, /*#__PURE__*/React.createElement(Footer, null)), fm.toc === 'content' && /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-doc-layout-toc-wrapper"
+  }, /*#__PURE__*/React.createElement("h4", null, "TABLE OF CONTENTS"), /*#__PURE__*/React.createElement(Toc, null))));
 };
 
 export default DocLayout;

package/theme-default/layouts/DocLayout/index.less

@@ -19,5 +19,23 @@ body {
       flex: 1;
       max-width: 100%;
     }
+
+    > .@{prefix}-doc-layout-toc-wrapper {
+      position: sticky;
+      top: @s-header-height + 30px;
+      width: @s-sidebar-width;
+      margin-left: 24px;
+      max-height: 80vh;
+      overflow: auto;
+      overscroll-behavior: contain;
+      -webkit-overflow-scrolling: touch;
+
+      > h4 {
+        margin: 0 0 8px;
+        color: @c-text-note;
+        font-size: 13px;
+        line-height: 1;
+      }
+    }
   }
 }

package/theme-default/locales/en-US.json

@@ -3,7 +3,7 @@
   "header.search.placeholder": "Type keywords...",
   "previewer.actions.code.expand": "Show Code",
   "previewer.actions.code.shrink": "Hide Code",
-  "previewer.actions.codesandbox": "Open in CodeSandbox (Not implemented)",
+  "previewer.actions.codesandbox": "Open in CodeSandbox",
   "previewer.actions.codepen": "Open in CodePen (Not implemented)",
   "previewer.actions.separate": "Open in separate page",
   "404.title": "PAGE NOT FOUND",

package/theme-default/locales/zh-CN.json

@@ -3,7 +3,7 @@
   "header.search.placeholder": "输入关键字搜索...",
   "previewer.actions.code.expand": "展开代码",
   "previewer.actions.code.shrink": "收起代码",
-  "previewer.actions.codesandbox": "在 CodeSandbox 中打开（未实现）",
+  "previewer.actions.codesandbox": "在 CodeSandbox 中打开",
   "previewer.actions.codepen": "在 CodePen 中打开（未实现）",
   "previewer.actions.separate": "在独立页面中打开",
   "404.title": "页面未找到",

package/theme-default/slots/Content/index.less

@@ -45,13 +45,19 @@
 
 .@{prefix}-content {
   flex: 1;
+  min-width: 0;
   max-width: 100%;
+  box-sizing: border-box;
 
   &:not([data-no-sidebar]) {
-    padding: @s-content-padding;
+    padding: @s-content-padding @s-content-padding 0;
     background-color: #fff;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     box-shadow: 0 8px 24px 0 rgb(0 0 0 / 5%);
   }
+
+  .@{prefix}-header + main > & {
+    min-height: calc(100vh - @s-header-height);
+  }
 }

package/theme-default/slots/Features/index.js

@@ -11,7 +11,7 @@ var Features = function Features() {
   return Boolean((_frontmatter$features = frontmatter.features) === null || _frontmatter$features === void 0 ? void 0 : _frontmatter$features.length) ? /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-features" // auto render 2 or 3 cols by feature count
     ,
-    "data-cols": [2, 3].find(function (n) {
+    "data-cols": [3, 2].find(function (n) {
       return frontmatter.features.length % n === 0;
     }) || 3
   }, frontmatter.features.map(function (_ref) {
@@ -21,7 +21,11 @@ var Features = function Features() {
     return /*#__PURE__*/React.createElement("div", {
       key: title,
       className: "dumi-default-features-item"
-    }, emoji && /*#__PURE__*/React.createElement("i", null, emoji), title && /*#__PURE__*/React.createElement("h3", null, title), description && /*#__PURE__*/React.createElement("p", null, description));
+    }, emoji && /*#__PURE__*/React.createElement("i", null, emoji), title && /*#__PURE__*/React.createElement("h3", null, title), description && /*#__PURE__*/React.createElement("p", {
+      dangerouslySetInnerHTML: {
+        __html: description
+      }
+    }));
   })) : null;
 };
 

package/theme-default/slots/Features/index.less

@@ -36,7 +36,7 @@
       margin: 4px 0;
       color: #2c4262;
       font-weight: normal;
-      font-size: 22px;
+      font-size: 20px;
     }
 
     > p {
@@ -44,6 +44,14 @@
       color: #61728a;
       font-size: 16px;
       line-height: 1.475;
+
+      a {
+        color: @c-primary;
+
+        &:not(:hover) {
+          text-decoration: none;
+        }
+      }
     }
   }
 }

package/theme-default/slots/Footer/index.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import './index.less';
+declare const Footer: FC;
+export default Footer;

package/theme-default/slots/Footer/index.js

@@ -0,0 +1,18 @@
+import { useSiteData } from 'dumi';
+import React from 'react';
+import "./index.less";
+
+var Footer = function Footer() {
+  var _useSiteData = useSiteData(),
+      themeConfig = _useSiteData.themeConfig;
+
+  if (!themeConfig.footer) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-footer",
+    dangerouslySetInnerHTML: {
+      __html: themeConfig.footer
+    }
+  });
+};
+
+export default Footer;

package/theme-default/slots/Footer/index.less

@@ -0,0 +1,19 @@
+@import (reference) '../../styles/variables.less';
+
+.@{prefix}-footer {
+  margin-top: @s-content-padding;
+  border-top: 1px solid @c-border-light;
+  color: @c-text-note;
+  font-size: 15px;
+  line-height: 26px;
+  text-align: center;
+  padding: @s-content-padding * 0.6 0;
+
+  a {
+    color: @c-primary;
+
+    &:not(:hover) {
+      text-decoration: none;
+    }
+  }
+}

package/theme-default/slots/Hero/index.less

@@ -9,6 +9,10 @@
   text-align: center;
   box-sizing: border-box;
 
+  + * {
+    position: relative;
+  }
+
   &::before {
     content: '';
     position: absolute;
@@ -26,7 +30,7 @@
   > p {
     margin: 32px;
     color: #4e6789;
-    font-size: 24px;
+    font-size: 20px;
     line-height: 1.6;
   }
 
@@ -37,12 +41,12 @@
 
     > a {
       display: inline-block;
-      height: 56px;
-      font-size: 20px;
-      line-height: 56px;
+      height: 52px;
+      font-size: 18px;
+      line-height: 52px;
       text-decoration: none;
       min-width: 168px;
-      border-radius: 28px;
+      border-radius: 26px;
       box-sizing: border-box;
       transition: opacity 0.2s;
 

package/theme-default/slots/PreviewerActions/index.js

@@ -12,7 +12,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { ReactComponent as IconCodeSandbox } from '@ant-design/icons-svg/inline-svg/outlined/code-sandbox.svg';
 import { ReactComponent as IconCodePen } from '@ant-design/icons-svg/inline-svg/outlined/codepen.svg';
-import { useIntl } from 'dumi';
+import { openCodeSandbox, useIntl } from 'dumi';
 import SourceCode from 'dumi/theme/builtins/SourceCode';
 import PreviewerActionsExtra from 'dumi/theme/slots/PreviewerActionsExtra';
 import Tabs from 'rc-tabs';
@@ -75,7 +75,10 @@ var PreviewerActions = function PreviewerActions(props) {
     type: "button",
     "data-dumi-tooltip": intl.formatMessage({
       id: 'previewer.actions.codesandbox'
-    })
+    }),
+    onClick: function onClick() {
+      return openCodeSandbox(props);
+    }
   }, /*#__PURE__*/React.createElement(IconCodeSandbox, null)), !((_props$disabledAction2 = props.disabledActions) !== null && _props$disabledAction2 !== void 0 && _props$disabledAction2.includes('CODEPEN')) && /*#__PURE__*/React.createElement("button", {
     className: "dumi-default-previewer-action-btn",
     type: "button",

package/theme-default/slots/Sidebar/index.js

@@ -1,4 +1,4 @@
-import { NavLink, useLocation, useSidebarData } from 'dumi';
+import { NavLink, useLocation, useRouteMeta, useSidebarData } from 'dumi';
 import Toc from 'dumi/theme/slots/Toc';
 import React from 'react';
 import "./index.less";
@@ -7,6 +7,7 @@ var Sidebar = function Sidebar() {
   var _useLocation = useLocation(),
       pathname = _useLocation.pathname;
 
+  var meta = useRouteMeta();
   var sidebar = useSidebarData();
   return sidebar && /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-sidebar"
@@ -21,7 +22,7 @@ var Sidebar = function Sidebar() {
         to: child.link,
         title: child.title,
         end: true
-      }, child.title), child.link === pathname && /*#__PURE__*/React.createElement(Toc, null));
+      }, child.title), child.link === pathname && meta.frontmatter.toc === 'menu' && /*#__PURE__*/React.createElement(Toc, null));
     }));
   }));
 };

package/theme-default/slots/Toc/index.less

@@ -23,6 +23,10 @@
       overflow: hidden;
       text-overflow: ellipsis;
 
+      &:hover {
+        color: @c-text;
+      }
+
       &.active {
         margin-left: -1px;
         color: @c-text;

package/theme.d.ts

@@ -1 +0,0 @@
-export * from './dist/client/theme-api';