dumi 2.0.0-rc.4 → 2.0.0-rc.6

package/dist/client/pages/{Demo.d.ts → Demo/index.d.ts}

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

package/dist/client/pages/{Demo.js → Demo/index.js}

@@ -1,5 +1,6 @@
 import { useParams, useSiteData } from 'dumi';
 import { createElement } from 'react';
+import "./index.less";
 
 var DemoRenderPage = function DemoRenderPage() {
   var _useParams = useParams(),

package/dist/client/pages/Demo/index.less

@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}

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

@@ -16,8 +16,7 @@ import React, { useEffect, useState } from 'react';
 import { useTabQueryState } from "./useTabMeta";
 export var DumiPage = function DumiPage(props) {
   var _useLocation = useLocation(),
-      hash = _useLocation.hash,
-      pathname = _useLocation.pathname;
+      hash = _useLocation.hash;
 
   var _useRouteMeta = useRouteMeta(),
       tabs = _useRouteMeta.tabs;
@@ -47,13 +46,11 @@ export var DumiPage = function DumiPage(props) {
 
   useEffect(function () {
     var id = hash.replace('#', '');
-    var elm = id && document.getElementById(id);
-    if (elm) elm.scrollIntoView();
-  }, [hash]); // handle pathname change
-
-  useEffect(function () {
-    document.documentElement.scrollTo(0, 0);
-  }, [pathname]);
+    setTimeout(function () {
+      var elm = id && document.getElementById(decodeURIComponent(id));
+      if (elm) document.documentElement.scrollTo(0, elm.offsetTop - 80);
+    }, 1);
+  }, [hash]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ContentTabs, {
     tabs: tabs,
     tabKey: tabKey,

package/dist/features/routes.js

@@ -47,7 +47,17 @@ function localizeUmiRoute(route, locales) {
 function flatRoute(route) {
   if (route.parentId !== "DocLayout") {
     route.parentId = "DocLayout";
-    route.path = route.path === "*" ? route.path : route.absPath.slice(1);
+    route.path = route.path === "*" ? route.path.toLowerCase() : route.absPath.slice(1).toLowerCase();
+  }
+}
+function getClientPageFile(file, cwd) {
+  try {
+    return import_plugin_utils.resolve.sync(`dumi/dist/${file}`, {
+      basedir: cwd,
+      preserveSymlinks: false
+    });
+  } catch {
+    return require.resolve(`../${file}`);
   }
 }
 var routes_default = (api) => {
@@ -112,6 +122,7 @@ var routes_default = (api) => {
     Object.entries(pages).forEach(([, route]) => {
       route.file = (0, import_plugin_utils.winPath)(import_path.default.resolve(api.config.conventionRoutes.base, route.file));
       flatRoute(route);
+      localizeUmiRoute(route, api.config.locales);
       routes[route.id] = route;
     });
     docDirs.map(normalizeDocDir).forEach(({ type, dir }) => {
@@ -137,7 +148,7 @@ var routes_default = (api) => {
       const base = import_path.default.join(api.cwd, dir);
       const atomFiles = import_plugin_utils.glob.sync("{*,*/index,*/index.*,*/README,*/README.*}.md", { cwd: base });
       atomFiles.forEach((file) => {
-        const routePath = (0, import_plugin_utils.winPath)(import_path.default.join((0, import_pluralize.plural)(type), file)).replace(/(\/index|\/README)?\.md$/, "").replace(/\./g, "/");
+        const routePath = (0, import_plugin_utils.winPath)(import_path.default.join((0, import_pluralize.plural)(type), file)).replace(/(\/index|\/README)?\.md$/, "").replace(/\./g, "/").toLowerCase();
         const routeId = (0, import_utils.createRouteId)(file);
         routes[routeId] = {
           id: routeId,
@@ -155,7 +166,7 @@ var routes_default = (api) => {
         path: "*",
         absPath: "/*",
         parentId: docLayoutId,
-        file: require.resolve("../client/pages/404")
+        file: getClientPageFile("client/pages/404", api.cwd)
       };
     }
     routes["demo-render"] = {
@@ -163,8 +174,14 @@ var routes_default = (api) => {
       path: `${import_constants.SP_ROUTE_PREFIX}demos/:id`,
       absPath: `/${import_constants.SP_ROUTE_PREFIX}demos/:id`,
       parentId: demoLayoutId,
-      file: require.resolve("../client/pages/Demo")
+      file: getClientPageFile("client/pages/Demo", api.cwd)
     };
+    Object.values(routes).forEach((route) => {
+      if (route.path !== encodeURI(route.path)) {
+        throw new Error(`Invalid route path: ${route.path}, please rename it with only alphanumeric, dash and slash.
+    at ${route.file}`);
+      }
+    });
     return routes;
   });
   api.addLayouts(() => {

package/dist/features/theme/index.js

@@ -26,6 +26,7 @@ __export(theme_exports, {
 });
 module.exports = __toCommonJS(theme_exports);
 var import_constants = require("../../constants");
+var import_bundler_utils = require("@umijs/bundler-utils");
 var import_fs = __toESM(require("fs"));
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
@@ -109,18 +110,30 @@ var theme_default = (api) => {
   api.onGenerateFiles(() => {
     themeMapKeys.forEach((key) => {
       Object.values(originalThemeData[key] || {}).forEach((item) => {
+        if (item.source === "dumi")
+          return;
+        let contents = [];
+        const [, exports] = (0, import_bundler_utils.parseModuleSync)({
+          path: item.source,
+          content: import_fs.default.readFileSync(item.source, "utf-8")
+        });
+        if (exports.includes("default")) {
+          contents.push(`export { default } from '${item.source}';`);
+        }
+        if (exports.some((exp) => exp !== "default")) {
+          contents.push(`export * from '${item.source}';`);
+        }
         api.writeTmpFile({
           noPluginDir: true,
           path: `dumi/theme/${key}/${item.specifier}.ts`,
-          content: `export * from '${item.source}';
-export { default } from '${item.source}';`
+          content: contents.join("\n")
         });
       });
     });
     api.writeTmpFile({
       noPluginDir: true,
       path: "dumi/theme/ContextWrapper.tsx",
-      content: `import React, { useState, useEffect } from 'react';
+      content: `import React, { useState, useEffect, useRef } from 'react';
 import { useOutlet, history } from 'dumi';
 import { SiteContext } from '${(0, import_plugin_utils.winPath)(require.resolve("../../client/theme-api/context"))}';
 import { demos, components } from '../meta';
@@ -129,10 +142,19 @@ import { locales } from '../locales/config';
 export default function DumiContextWrapper() {
   const outlet = useOutlet();
   const [loading, setLoading] = useState(true);
+  const prev = useRef(history.location.pathname);
 
-  // mark loading when route change, page component will set false when loaded
   useEffect(() => {
-    return history.listen(() => setLoading(true));
+    return history.listen((next) => {
+      // mark loading when route change, page component will set false when loaded
+      setLoading(true);
+
+      // scroll to top when route changed
+      if (next.location.pathname !== prev.current) {
+        prev.current = next.location.pathname;
+        document.documentElement.scrollTo(0, 0);
+      }
+    });
   }, []);
 
   return (

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

@@ -37,6 +37,7 @@ var import_rehypeRaw = __toESM(require("./rehypeRaw"));
 var import_rehypeSlug = __toESM(require("./rehypeSlug"));
 var import_rehypeStrip = __toESM(require("./rehypeStrip"));
 var import_rehypeText = __toESM(require("./rehypeText"));
+var import_remarkContainer = __toESM(require("./remarkContainer"));
 var import_remarkEmbed = __toESM(require("./remarkEmbed"));
 var import_remarkMeta = __toESM(require("./remarkMeta"));
 function applyUnifiedPlugin(opts) {
@@ -50,6 +51,7 @@ var transformer_default = async (raw, opts) => {
   const { unified } = await import("unified");
   const { default: remarkParse } = await import("remark-parse");
   const { default: remarkFrontmatter } = await import("remark-frontmatter");
+  const { default: remarkDirective } = await import("remark-directive");
   const { default: remarkBreaks } = await import("remark-breaks");
   const { default: remarkGfm } = await import("remark-gfm");
   const { default: remarkRehype } = await import("remark-rehype");
@@ -63,7 +65,7 @@ var transformer_default = async (raw, opts) => {
     cwd: opts.cwd,
     fileAbsPath: opts.fileAbsPath,
     resolve: opts.resolve
-  }).use(remarkBreaks).use(remarkGfm);
+  }).use(remarkDirective).use(import_remarkContainer.default).use(remarkBreaks).use(remarkGfm);
   (_a = opts.extraRemarkPlugins) == null ? void 0 : _a.forEach((plugin) => applyUnifiedPlugin({
     plugin,
     processor,

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

@@ -42,7 +42,11 @@ function rehypeSlug() {
     visit(tree, "element", (node) => {
       var _a, _b;
       if (HEADING_TAGS.includes(node.tagName)) {
-        const title = toString(node);
+        const title = toString({
+          type: "element",
+          tagName: node.tagName,
+          children: node.children.filter((child) => child.type !== "element" || child.tagName !== "Badge")
+        }).trim();
         const depth = Number(node.tagName.slice(1));
         const id = slugger.slug(title);
         node.properties.id = id;

package/dist/loaders/markdown/transformer/remarkContainer.d.ts

@@ -0,0 +1,3 @@
+import type { Root } from 'mdast';
+import type { Transformer } from 'unified';
+export default function remarkContainer(): Transformer<Root>;

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

@@ -0,0 +1,53 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/loaders/markdown/transformer/remarkContainer.ts
+var remarkContainer_exports = {};
+__export(remarkContainer_exports, {
+  default: () => remarkContainer
+});
+module.exports = __toCommonJS(remarkContainer_exports);
+var visit;
+var SKIP;
+var VALID_CONTAINER_TYPES = ["info", "warning", "success", "error"];
+(async () => {
+  ({ visit, SKIP } = await import("unist-util-visit"));
+})();
+function remarkContainer() {
+  return (tree) => {
+    visit(tree, (node, i, parent) => {
+      if (node.type === "containerDirective" && VALID_CONTAINER_TYPES.includes(node.name)) {
+        const attrs = Object.entries(node.attributes || {}).reduce((ret, [name, value]) => `${ret} ${value ? `${name}="${value}"` : name}`, "");
+        parent.children.splice(i, 1, {
+          type: "html",
+          value: `<Container type="${node.name}"${attrs}>`,
+          position: node.position
+        }, ...(node.children || []).concat({
+          type: "html",
+          value: "</Container>"
+        }));
+        return SKIP;
+      }
+    });
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

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

@@ -44,6 +44,9 @@ var visit;
 })();
 function remarkRawAST() {
   this.Compiler = function Compiler(ast) {
+    visit(ast, "yaml", (_node, i, parent) => {
+      parent.children.splice(i, 1);
+    });
     return ast;
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.0-rc.4",
+  "version": "2.0.0-rc.6",
   "description": "Framework for developing UI components",
   "keywords": [],
   "license": "MIT",
@@ -91,6 +91,7 @@
     "rehype-remove-comments": "^5.0.0",
     "rehype-stringify": "^9.0.3",
     "remark-breaks": "^3.0.2",
+    "remark-directive": "^2.0.1",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "remark-parse": "^10.0.1",

package/theme-default/builtins/Badge/index.d.ts

@@ -0,0 +1,7 @@
+import { type FC, type ReactNode } from 'react';
+import './index.less';
+declare const Badge: FC<{
+    children: ReactNode;
+    type: 'info' | 'warning' | 'error' | 'success';
+}>;
+export default Badge;

package/theme-default/builtins/Badge/index.js

@@ -0,0 +1,12 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import "./index.less";
+
+var Badge = function Badge(props) {
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: "dumi-default-badge"
+  }, props));
+};
+
+export default Badge;

package/theme-default/builtins/Badge/index.less

@@ -0,0 +1,33 @@
+@import (reference) '../../styles/variables.less';
+
+.@{prefix}-badge {
+  display: inline-block;
+  margin-left: 2px;
+  padding: 1px 8px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  border-radius: 4px;
+  vertical-align: top;
+
+  &:not([type]),
+  &[type='info'] {
+    color: @c-primary;
+    background: lighten(@c-primary, 40%);
+  }
+
+  &[type='warning'] {
+    color: @c-warning;
+    background: lighten(@c-warning, 48%);
+  }
+
+  &[type='success'] {
+    color: @c-success;
+    background: lighten(@c-success, 54%);
+  }
+
+  &[type='error'] {
+    color: @c-error;
+    background: lighten(@c-error, 47%);
+  }
+}

package/theme-default/builtins/Container/index.d.ts

@@ -0,0 +1,8 @@
+import { type FC, type ReactNode } from 'react';
+import './index.less';
+declare const Container: FC<{
+    type: string;
+    title?: string;
+    children: ReactNode;
+}>;
+export default Container;

package/theme-default/builtins/Container/index.js

@@ -0,0 +1,39 @@
+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 { ReactComponent as IconSuccess } from '@ant-design/icons-svg/inline-svg/outlined/check-circle.svg';
+import { ReactComponent as IconError } from '@ant-design/icons-svg/inline-svg/outlined/close-circle.svg';
+import { ReactComponent as IconInfo } from '@ant-design/icons-svg/inline-svg/outlined/info-circle.svg';
+import { ReactComponent as IconWarning } from '@ant-design/icons-svg/inline-svg/outlined/warning.svg';
+import React, { useState } from 'react';
+import "./index.less";
+var ICONS = {
+  info: IconInfo,
+  warning: IconWarning,
+  success: IconSuccess,
+  error: IconError
+};
+
+var Container = function Container(props) {
+  var _useState = useState(function () {
+    return ICONS[props.type];
+  }),
+      _useState2 = _slicedToArray(_useState, 1),
+      Icon = _useState2[0];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-container markdown",
+    "data-type": props.type
+  }, /*#__PURE__*/React.createElement(Icon, null), /*#__PURE__*/React.createElement("h4", null, props.title || props.type.toUpperCase()), props.children);
+};
+
+export default Container;

package/theme-default/builtins/Container/index.less

@@ -0,0 +1,70 @@
+@import (reference) '../../styles/variables.less';
+
+.@{prefix}-container {
+  margin: 24px 0 32px;
+  padding: 18px 16px 18px 44px;
+  border-radius: 4px;
+
+  > svg {
+    float: left;
+    fill: currentcolor;
+    margin-left: -26px;
+    width: 18px;
+  }
+
+  > h4 {
+    margin: 1px 0 0;
+    font-size: 15px;
+    line-height: 1;
+  }
+
+  > p {
+    margin: 8px 0 0;
+    font-size: 15px;
+    line-height: 1.2;
+  }
+
+  &[data-type='info'] {
+    @color: darken(desaturate(@c-primary, 45%), 10%);
+
+    color: @color;
+    background: lighten(@c-primary, 42%);
+
+    > p {
+      color: desaturate(@color, 20%);
+    }
+  }
+
+  &[data-type='warning'] {
+    @color: darken(desaturate(@c-warning, 20%), 2%);
+
+    color: @color;
+    background: lighten(@c-warning, 51%);
+
+    > p {
+      color: desaturate(@color, 24%);
+    }
+  }
+
+  &[data-type='success'] {
+    @color: darken(desaturate(@c-success, 5%), 1%);
+
+    color: @color;
+    background: lighten(@c-success, 59%);
+
+    > p {
+      color: desaturate(@color, 22%);
+    }
+  }
+
+  &[data-type='error'] {
+    @color: darken(desaturate(@c-error, 20%), 1%);
+
+    color: @color;
+    background: lighten(@c-error, 51%);
+
+    > p {
+      color: desaturate(@color, 25%);
+    }
+  }
+}

package/theme-default/builtins/Table/index.js

@@ -1,3 +1,5 @@
+var _excluded = ["children"];
+
 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."); }
@@ -10,12 +12,18 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 import throttle from 'lodash.throttle';
 import React, { useEffect, useRef, useState } from 'react';
 import "./index.less";
 
 var Table = function Table(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   var container = useRef(null);
 
   var _useState = useState(false),
@@ -53,7 +61,7 @@ var Table = function Table(_ref) {
     ref: container,
     "data-left-folded": leftFolded || undefined,
     "data-right-folded": rightFolded || undefined
-  }, /*#__PURE__*/React.createElement("table", null, children)));
+  }, /*#__PURE__*/React.createElement("table", props, children)));
 };
 
 export default Table;

package/theme-default/builtins/Table/index.less

@@ -1,7 +1,7 @@
 @import (reference) '../../styles/variables.less';
 
 .@{prefix}-table {
-  margin: 16px 0 32px;
+  margin: 24px 0 32px;
   transform: translate(0, 0);
 
   &-content {
@@ -23,15 +23,15 @@
       left: 0;
       background-image: linear-gradient(
         to right,
-        rgba(0, 0, 0, 0.1),
-        rgba(0, 0, 0, 0)
+        rgb(0 0 0 / 10%),
+        rgb(0 0 0 / 0%)
       );
 
       [data-prefers-color='dark'] & {
         background-image: linear-gradient(
           to right,
-          rgba(0, 0, 0, 0.5),
-          rgba(0, 0, 0, 0)
+          rgb(0 0 0 / 50%),
+          rgb(0 0 0 / 0%)
         );
       }
     }
@@ -40,15 +40,15 @@
       right: 0;
       background-image: linear-gradient(
         to left,
-        rgba(0, 0, 0, 0.1),
-        rgba(0, 0, 0, 0)
+        rgb(0 0 0 / 10%),
+        rgb(0 0 0 / 0%)
       );
 
       [data-prefers-color='dark'] & {
         background-image: linear-gradient(
           to left,
-          rgba(0, 0, 0, 0.5),
-          rgba(0, 0, 0, 0)
+          rgb(0 0 0 / 50%),
+          rgb(0 0 0 / 0%)
         );
       }
     }

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

@@ -3,10 +3,11 @@
 body {
   margin: 0;
   padding: 0;
-  background-color: @c-site-bg;
 }
 
 .@{prefix}-doc-layout {
+  background-color: @c-site-bg;
+
   @media @mobile {
     &::before {
       content: '';

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

@@ -41,6 +41,54 @@
     padding-inline-end: 16px;
     border-color: @c-border-light;
   }
+
+  // blockquote
+  blockquote {
+    font-style: italic;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    background-color: tint(@c-site-bg, 50%);
+    border-left: 5px solid @c-border-light;
+  }
+
+  // list
+  ul li {
+    line-height: 1.8;
+  }
+
+  // anchor of headings
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    > a[aria-hidden]:first-child {
+      float: left;
+      width: 20px;
+      padding-right: 4px;
+      margin-left: -24px;
+      color: @c-text;
+      // hide phantom blank node
+      font-size: 0;
+      text-align: right;
+      line-height: inherit;
+
+      &:hover {
+        border: 0;
+      }
+
+      > .icon-link::before {
+        content: '#';
+        color: @c-text-secondary;
+        font-size: 20px;
+      }
+    }
+
+    &:not(:hover) > a[aria-hidden]:first-child > .icon-link {
+      visibility: hidden;
+    }
+  }
 }
 
 .@{prefix}-content {

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

@@ -48,7 +48,7 @@
 
     > h3 {
       margin: 4px 0;
-      color: #2c4262;
+      color: @c-text;
       font-weight: normal;
       font-size: 20px;
 
@@ -59,7 +59,7 @@
 
     > p {
       margin: 12px 0;
-      color: #61728a;
+      color: @c-text-secondary;
       font-size: 16px;
       line-height: 1.475;
 

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

@@ -35,7 +35,7 @@
 
   > p {
     margin: 32px;
-    color: #4e6789;
+    color: @c-text-secondary;
     font-size: 20px;
     line-height: 1.6;
 

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

@@ -15,7 +15,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { ReactComponent as IconSearch } from '@ant-design/icons-svg/inline-svg/outlined/search.svg';
 import { useIntl, useSiteSearch } from 'dumi';
 import React, { useEffect, useRef, useState } from 'react';
-import { SearchResult } from "../SearchResult";
+import SearchResult from "../SearchResult";
 import "./index.less";
 var isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(typeof navigator !== 'undefined' ? (_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.platform : '');
 

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

@@ -2,8 +2,8 @@ import { type useSiteSearch } from 'dumi';
 import { type FC } from 'react';
 import './index.less';
 declare type ISearchResult = ReturnType<typeof useSiteSearch>['result'];
-export declare const SearchResult: FC<{
+declare const SearchResult: FC<{
     data: ISearchResult;
     loading: boolean;
 }>;
-export {};
+export default SearchResult;

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

@@ -106,7 +106,7 @@ var useFlatSearchData = function useFlatSearchData(data) {
   return flatData;
 };
 
-export var SearchResult = function SearchResult(props) {
+var SearchResult = function SearchResult(props) {
   var _useFlatSearchData = useFlatSearchData(props.data),
       _useFlatSearchData2 = _slicedToArray(_useFlatSearchData, 2),
       data = _useFlatSearchData2[0],
@@ -165,4 +165,6 @@ export var SearchResult = function SearchResult(props) {
   }, /*#__PURE__*/React.createElement(IconInbox, null), /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "search.not.found"
   })));
-};
+};
+
+export default SearchResult;

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

@@ -9,7 +9,8 @@ var Sidebar = function Sidebar() {
 
   var meta = useRouteMeta();
   var sidebar = useSidebarData();
-  return sidebar && /*#__PURE__*/React.createElement("div", {
+  if (!sidebar) return null;
+  return /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-sidebar"
   }, sidebar.map(function (item, i) {
     return /*#__PURE__*/React.createElement("dl", {

package/theme-default/styles/variables.less

@@ -7,13 +7,15 @@
 @s-header-height-m: 52px;
 
 @c-primary: #1677ff;
-@c-text: #333;
-@c-text-secondary: #666;
-@c-text-note: #999;
+@c-warning: #d59200;
+@c-success: #208a41;
+@c-error: #ce1f31;
+@c-text: #30363f;
+@c-text-secondary: #4f5866;
+@c-text-note: #8a9099;
 @c-border: #d0d5d8;
 @c-border-light: #e4e9ec;
 @c-site-bg: #f7f9fb;
-@c-warning: #dd9600;
 
 @mobile: ~'only screen and (max-width: 767px)';
 @tablet: ~'only screen and (min-width: 768px) and (max-width: 1024px)';