dumi 2.0.0-rc.2 → 2.0.0-rc.3

package/dist/features/assets.d.ts

@@ -5,6 +5,10 @@ declare const examples: ExampleAsset[];
  * internal function to add example assets
  */
 export declare function addExampleAssets(data: typeof examples): void;
+/**
+ * internal function to get atom assets
+ */
+export declare function getExampleAssets(): ExampleAsset[];
 /**
  * internal function to add meta for atom
  */

package/dist/features/assets.js

@@ -24,7 +24,8 @@ var assets_exports = {};
 __export(assets_exports, {
   addAtomMeta: () => addAtomMeta,
   addExampleAssets: () => addExampleAssets,
-  default: () => assets_default
+  default: () => assets_default,
+  getExampleAssets: () => getExampleAssets
 });
 module.exports = __toCommonJS(assets_exports);
 var import_fs = __toESM(require("fs"));
@@ -35,6 +36,9 @@ var atomsMeta = {};
 function addExampleAssets(data) {
   examples.push(...data);
 }
+function getExampleAssets() {
+  return examples;
+}
 function addAtomMeta(atomId, data) {
   atomsMeta[atomId] = import_plugin_utils.lodash.pick(data, ["title", "keywords", "deprecated"]);
 }
@@ -69,5 +73,6 @@ var assets_default = (api) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   addAtomMeta,
-  addExampleAssets
+  addExampleAssets,
+  getExampleAssets
 });

package/dist/features/compile/babelLoaderCustomize.d.ts

@@ -0,0 +1,4 @@
+import type { PartialConfig } from '@umijs/bundler-utils/compiled/@babel/core';
+export default function babelLoaderCustomize(): {
+    config(config: PartialConfig): import("@umijs/bundler-utils/compiled/@babel/core").TransformOptions;
+};

package/dist/features/compile/babelLoaderCustomize.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/features/compile/babelLoaderCustomize.ts
+var babelLoaderCustomize_exports = {};
+__export(babelLoaderCustomize_exports, {
+  default: () => babelLoaderCustomize
+});
+module.exports = __toCommonJS(babelLoaderCustomize_exports);
+function babelLoaderCustomize() {
+  return {
+    config(config) {
+      const context = this;
+      if (config.options.filename && context.resourceQuery.includes("type=meta")) {
+        config.options.filename += context.resourceQuery;
+      }
+      return config.options;
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/features/compile/index.d.ts

@@ -0,0 +1,3 @@
+import type { IApi } from "../../types";
+declare const _default: (api: IApi) => void;
+export default _default;

package/dist/features/{compile.js → compile/index.js}

@@ -19,34 +19,43 @@ var __copyProps = (to, from, except, desc) => {
 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/features/compile.ts
+// src/features/compile/index.ts
 var compile_exports = {};
 __export(compile_exports, {
   default: () => compile_default
 });
 module.exports = __toCommonJS(compile_exports);
-var import_react = __toESM(require("../techStacks/react"));
-var import_assets = require("./assets");
+var import_react = __toESM(require("../../techStacks/react"));
+var import_assets = require("../assets");
 var compile_default = (api) => {
+  api.describe({ key: "dumi:compile" });
   api.register({
     key: "registerTechStack",
     stage: Infinity,
     fn: () => new import_react.default()
   });
+  api.modifyConfig((memo) => {
+    if (memo.babelLoaderCustomize) {
+      api.logger.warn("Config `babelLoaderCustomize` will be override by dumi, please report issue if you need it.");
+    }
+    memo.babelLoaderCustomize = require.resolve("./babelLoaderCustomize");
+    return memo;
+  });
   api.chainWebpack(async (memo) => {
     const babelInUmi = memo.module.rule("src").use("babel-loader").entries();
     const techStacks = await api.applyPlugins({
       key: "registerTechStack",
       type: api.ApplyPluginsType.add
     });
-    const loaderPath = require.resolve("../loaders/markdown");
+    const loaderPath = require.resolve("../../loaders/markdown");
     const loaderBaseOpts = {
       techStacks,
       cwd: api.cwd,
       alias: api.config.alias,
       resolve: api.config.resolve,
       extraRemarkPlugins: api.config.extraRemarkPlugins,
-      extraRehypePlugins: api.config.extraRehypePlugins
+      extraRehypePlugins: api.config.extraRehypePlugins,
+      routers: api.appData.routes
     };
     memo.module.rule("dumi-md").type("javascript/auto").test(/\.md$/).oneOf("md-meta").resourceQuery(/meta$/).use("babel-loader").loader(babelInUmi.loader).options(babelInUmi.options).end().use("md-meta-loader").loader(loaderPath).options({
       ...loaderBaseOpts,
@@ -64,9 +73,9 @@ var compile_default = (api) => {
       ...loaderBaseOpts,
       builtins: api.service.themeData.builtins
     });
-    memo.module.rule("dumi-page").type("javascript/auto").test(/\.(j|t)sx?$/).resourceQuery(/meta$/).use("page-meta-loader").loader(require.resolve("../loaders/page"));
-    memo.module.rule("dumi-demo").type("javascript/auto").test(/\..+$/).enforce("pre").resourceQuery(/techStack/).use("demo-loader").loader(require.resolve("../loaders/demo")).options({ techStacks, cwd: api.cwd });
-    memo.module.rule("dumi-raw").resourceQuery(/raw/).use("raw-loader").loader(require.resolve("raw-loader"));
+    memo.module.rule("dumi-page").type("javascript/auto").test(/\.(j|t)sx?$/).resourceQuery(/meta$/).use("page-meta-loader").loader(require.resolve("../../loaders/page"));
+    memo.module.rule("dumi-demo").type("javascript/auto").test(/\..+$/).enforce("pre").resourceQuery(/techStack/).use("demo-loader").loader(require.resolve("../../loaders/demo")).options({ techStacks, cwd: api.cwd });
+    memo.module.rule("dumi-raw").post().resourceQuery(/dumi-raw/).use("raw-loader").loader(require.resolve("raw-loader"));
     if (api.env === "development" && memo.plugins.has("fastRefresh")) {
       memo.plugin("fastRefresh").tap(([params]) => [
         {

package/dist/features/exportStatic.js

@@ -0,0 +1,48 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/features/exportStatic.ts
+var exportStatic_exports = {};
+__export(exportStatic_exports, {
+  default: () => exportStatic_default
+});
+module.exports = __toCommonJS(exportStatic_exports);
+var import_constants = require("../constants");
+var import_assets = require("./assets");
+var exportStatic_default = (api) => {
+  api.describe({ key: "dumi:exportStatic" });
+  api.register({
+    key: "modifyConfig",
+    stage: Infinity,
+    fn(memo) {
+      var _a;
+      if (api.userConfig.exportStatic !== false) {
+        const prev = ((_a = memo.exportStatic) == null ? void 0 : _a.extraRoutePaths) || [];
+        memo.exportStatic ?? (memo.exportStatic = {});
+        memo.exportStatic.extraRoutePaths = async () => {
+          const examples = (0, import_assets.getExampleAssets)();
+          const userExtraPaths = typeof prev === "function" ? await prev() : prev;
+          return userExtraPaths.concat(examples.map(({ id }) => `/${import_constants.SP_ROUTE_PREFIX}demos/${id}`));
+        };
+      }
+      return memo;
+    }
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/features/theme/index.js

@@ -82,6 +82,10 @@ var theme_default = (api) => {
         DumiDemoGrid: {
           specifier: "{ DumiDemoGrid }",
           source: "dumi"
+        },
+        Link: {
+          specifier: "{ Link }",
+          source: "dumi"
         }
       });
       return memo;

package/dist/loaders/markdown/index.js

@@ -75,7 +75,7 @@ export const texts = {{{texts}}};
         const { sources } = this;
         Object.keys(this.sources).forEach((file) => {
           asset = import_plugin_utils.lodash.cloneDeep(asset);
-          asset.dependencies[file].value = `{{{require('!!raw-loader!${sources[file]}?raw').default}}}`;
+          asset.dependencies[file].value = `{{{require('-!${sources[file]}?dumi-raw').default}}}`;
         });
         return JSON.stringify(asset, null, 2).replace(/"{{{|}}}"/g, "");
       }

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

@@ -1,6 +1,7 @@
 import type { IParsedBlockAsset } from "../../../assetParsers/block";
 import type { IRouteMeta } from "../../../client/theme-api/types";
 import type { IDumiConfig, IDumiTechStack } from "../../../types";
+import type { IRoute } from 'umi';
 import type { Data } from 'vfile';
 declare module 'hast' {
     interface Element {
@@ -40,6 +41,7 @@ export interface IMdTransformerOptions {
     resolve: IDumiConfig['resolve'];
     extraRemarkPlugins?: IDumiConfig['extraRemarkPlugins'];
     extraRehypePlugins?: IDumiConfig['extraRehypePlugins'];
+    routers: Record<string, IRoute>;
 }
 export interface IMdTransformerResult {
     content: string;

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

@@ -32,6 +32,7 @@ var import_rehypeEnhancedTag = __toESM(require("./rehypeEnhancedTag"));
 var import_rehypeImg = __toESM(require("./rehypeImg"));
 var import_rehypeIsolation = __toESM(require("./rehypeIsolation"));
 var import_rehypeJsxify = __toESM(require("./rehypeJsxify"));
+var import_rehypeLink = __toESM(require("./rehypeLink"));
 var import_rehypeRaw = __toESM(require("./rehypeRaw"));
 var import_rehypeSlug = __toESM(require("./rehypeSlug"));
 var import_rehypeStrip = __toESM(require("./rehypeStrip"));
@@ -74,7 +75,10 @@ var transformer_default = async (raw, opts) => {
     fileAbsPath: opts.fileAbsPath,
     resolve: opts.resolve,
     resolver
-  }).use(import_rehypeSlug.default).use(rehypeAutolinkHeadings).use(import_rehypeIsolation.default).use(import_rehypeEnhancedTag.default).use(import_rehypeDesc.default).use(import_rehypeText.default);
+  }).use(import_rehypeSlug.default).use(import_rehypeLink.default, {
+    fileAbsPath: opts.fileAbsPath,
+    routers: opts.routers
+  }).use(rehypeAutolinkHeadings).use(import_rehypeIsolation.default).use(import_rehypeEnhancedTag.default).use(import_rehypeDesc.default).use(import_rehypeText.default);
   (_b = opts.extraRehypePlugins) == null ? void 0 : _b.forEach((plugin) => applyUnifiedPlugin({
     plugin,
     processor,

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

@@ -0,0 +1,6 @@
+import type { Root } from 'hast';
+import type { Transformer } from 'unified';
+import type { IMdTransformerOptions } from '.';
+declare type IRehypeLinkOptions = Pick<IMdTransformerOptions, 'fileAbsPath' | 'routers'>;
+export default function rehypeLink(opts: IRehypeLinkOptions): Transformer<Root>;
+export {};

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

@@ -0,0 +1,68 @@
+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/rehypeLink.ts
+var rehypeLink_exports = {};
+__export(rehypeLink_exports, {
+  default: () => rehypeLink
+});
+module.exports = __toCommonJS(rehypeLink_exports);
+var import_path = __toESM(require("path"));
+var import_plugin_utils = require("umi/plugin-utils");
+var import_url = __toESM(require("url"));
+var visit;
+var SKIP;
+(async () => {
+  ({ visit, SKIP } = await import("unist-util-visit"));
+})();
+function rehypeLink(opts) {
+  return (tree) => {
+    visit(tree, "element", (node, i, parent) => {
+      var _a;
+      if (node.tagName === "a" && typeof ((_a = node.properties) == null ? void 0 : _a.href) === "string") {
+        const href = node.properties.href;
+        const parsedUrl = import_url.default.parse(href);
+        if (parsedUrl.hostname)
+          return SKIP;
+        if (/\.md$/i.test(parsedUrl.pathname)) {
+          const { routers } = opts;
+          const absPath = (0, import_plugin_utils.winPath)(import_path.default.resolve(opts.fileAbsPath, "..", parsedUrl.pathname));
+          Object.keys(routers).forEach((key) => {
+            if (routers[key].file === absPath) {
+              parsedUrl.pathname = routers[key].absPath;
+            }
+          });
+        }
+        parent.children.splice(i, 1, {
+          type: "element",
+          tagName: "Link",
+          children: node.children,
+          properties: {
+            ...import_plugin_utils.lodash.omit(node.properties, ["href"]),
+            to: import_url.default.format(parsedUrl)
+          }
+        });
+      }
+    });
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/preset.js

@@ -55,7 +55,8 @@ var preset_default = (api) => {
       require.resolve("./features/theme"),
       require.resolve("./features/locales"),
       require.resolve("./features/parser"),
-      require.resolve("./features/assets")
+      require.resolve("./features/assets"),
+      require.resolve("./features/exportStatic")
     ]
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.0-rc.3",
   "description": "Framework for developing UI components",
   "keywords": [],
   "license": "MIT",

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

@@ -1,4 +1,17 @@
-import { useIntl, useOutlet, useRouteMeta } from 'dumi';
+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 IconSidebar } from '@ant-design/icons-svg/inline-svg/outlined/align-left.svg';
+import { useIntl, useOutlet, useRouteMeta, useSidebarData } from 'dumi';
 import Content from 'dumi/theme/slots/Content';
 import Features from 'dumi/theme/slots/Features';
 import Footer from 'dumi/theme/slots/Footer';
@@ -6,19 +19,29 @@ 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 React, { useState } from 'react';
 import Helmet from 'react-helmet';
 import "./index.less";
 
 var DocLayout = function DocLayout() {
   var intl = useIntl();
   var outlet = useOutlet();
+  var sidebar = useSidebarData();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showSidebar = _useState2[0],
+      setShowSidebar = _useState2[1];
 
   var _useRouteMeta = useRouteMeta(),
       fm = _useRouteMeta.frontmatter;
 
   return /*#__PURE__*/React.createElement("div", {
-    className: "dumi-default-doc-layout"
+    className: "dumi-default-doc-layout",
+    "data-mobile-sidebar-active": showSidebar || undefined,
+    onClick: function onClick() {
+      return setShowSidebar(false);
+    }
   }, /*#__PURE__*/React.createElement(Helmet, null, /*#__PURE__*/React.createElement("html", {
     lang: intl.locale.replace(/-.+$/, '')
   }), fm.title && /*#__PURE__*/React.createElement("title", null, fm.title), fm.title && /*#__PURE__*/React.createElement("meta", {
@@ -36,7 +59,20 @@ 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(Footer, null)), fm.toc === 'content' && /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(Hero, null), /*#__PURE__*/React.createElement(Features, null), sidebar && /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-doc-layout-mobile-bar"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "dumi-default-sidebar-btn",
+    onClick: function onClick(ev) {
+      ev.stopPropagation();
+      setShowSidebar(function (v) {
+        return !v;
+      });
+    }
+  }, /*#__PURE__*/React.createElement(IconSidebar, null), intl.formatMessage({
+    id: 'layout.sidebar.btn'
+  }))), /*#__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))));
 };

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

@@ -7,6 +7,60 @@ body {
 }
 
 .@{prefix}-doc-layout {
+  @media @mobile {
+    &::before {
+      content: '';
+      position: fixed;
+      z-index: 11; // 1 more than header
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      background-color: rgb(0 0 0 / 50%);
+      transition: all 0.1s;
+    }
+
+    &:not([data-mobile-sidebar-active])::before {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+
+  &-mobile-bar {
+    @height: 36px;
+
+    position: sticky;
+    z-index: 9; // 1 less than header
+    top: @s-header-height-m;
+    left: 0;
+    right: 0;
+    display: none;
+    align-items: center;
+    padding: 0 24px;
+    height: @height;
+    border-top: 1px solid @c-border-light;
+    background-color: fadeout(@c-site-bg, 10%);
+    backdrop-filter: blur(6px);
+
+    @media @mobile {
+      display: flex;
+    }
+
+    .@{prefix}-sidebar-btn {
+      padding: 0;
+      color: @c-text-secondary;
+      border: 0;
+      background-color: transparent;
+
+      > svg {
+        width: 16px;
+        margin-right: 6px;
+        fill: @c-text-secondary;
+        vertical-align: middle;
+      }
+    }
+  }
+
   > main {
     display: flex;
     align-items: flex-start;
@@ -30,6 +84,10 @@ body {
       overscroll-behavior: contain;
       -webkit-overflow-scrolling: touch;
 
+      @media @mobile {
+        display: none;
+      }
+
       > h4 {
         margin: 0 0 8px;
         color: @c-text-note;

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

@@ -16,5 +16,6 @@
   "api.component.loading": "Properties definition is resolving, wait a moment...",
   "api.component.not.found": "Properties definition not found for {id} component",
   "content.tabs.default": "Doc",
-  "search.not.found": "No content was found"
+  "search.not.found": "No content was found",
+  "layout.sidebar.btn": "Sidebar"
 }

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

@@ -16,5 +16,6 @@
   "api.component.loading": "属性定义正在解析中，稍等片刻...",
   "api.component.not.found": "未找到 {id} 组件的属性定义",
   "content.tabs.default": "文档",
-  "search.not.found": "未找到相关内容"
+  "search.not.found": "未找到相关内容",
+  "layout.sidebar.btn": "侧边菜单"
 }

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

@@ -55,9 +55,22 @@
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     box-shadow: 0 8px 24px 0 rgb(0 0 0 / 5%);
+
+    @media @mobile {
+      max-width: initial;
+      margin: 0 -24px;
+      padding: 24px 24px 0;
+      border-radius: 0;
+      box-shadow: none;
+    }
   }
 
-  .@{prefix}-header + main > & {
+  .@{prefix}-header + main > &,
+  .@{prefix}-doc-layout-mobile-bar + main > & {
     min-height: calc(100vh - @s-header-height);
+
+    @media @mobile {
+      min-height: calc(100vh - @s-header-height-m);
+    }
   }
 }

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

@@ -2,7 +2,7 @@
 
 .@{prefix}-features {
   margin: 0 auto 48px;
-  width: @s-content-width;
+  max-width: @s-content-width;
   padding: 0 24px;
   overflow: hidden;
   box-sizing: border-box;
@@ -13,6 +13,11 @@
     &:nth-child(odd) {
       margin-right: 8%;
     }
+
+    @media @mobile {
+      width: 100%;
+      margin-right: 0;
+    }
   }
 
   &[data-cols='3'] > &-item {
@@ -21,6 +26,11 @@
     &:not(:nth-child(3n)) {
       margin-right: 2.9%;
     }
+
+    @media @mobile {
+      width: 100%;
+      margin-right: 0;
+    }
   }
 
   &-item {
@@ -30,6 +40,10 @@
     > i {
       font-size: 64px;
       font-style: normal;
+
+      @media @mobile {
+        font-size: 48px;
+      }
     }
 
     > h3 {
@@ -37,6 +51,10 @@
       color: #2c4262;
       font-weight: normal;
       font-size: 20px;
+
+      @media @mobile {
+        font-size: 18px;
+      }
     }
 
     > p {
@@ -45,6 +63,10 @@
       font-size: 16px;
       line-height: 1.475;
 
+      @media @mobile {
+        font-size: 14px;
+      }
+
       a {
         color: @c-primary;
 

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

@@ -9,6 +9,11 @@
   text-align: center;
   padding: @s-content-padding * 0.6 0;
 
+  @media @mobile {
+    padding: @s-content-padding * 0.3 0;
+    font-size: 13px;
+  }
+
   a {
     color: @c-primary;
 

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

@@ -1,18 +1,41 @@
+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 IconClose } from '@ant-design/icons-svg/inline-svg/outlined/close.svg';
+import { ReactComponent as IconMenu } from '@ant-design/icons-svg/inline-svg/outlined/menu.svg';
 import { useRouteMeta } from 'dumi';
 import LangSwitch from 'dumi/theme/slots/LangSwitch';
 import Logo from 'dumi/theme/slots/Logo';
 import Navbar from 'dumi/theme/slots/Navbar';
 import SearchBar from 'dumi/theme/slots/SearchBar';
-import React from 'react';
+import React, { useState } from 'react';
 import "./index.less";
 
 var Header = function Header() {
   var _useRouteMeta = useRouteMeta(),
       frontmatter = _useRouteMeta.frontmatter;
 
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showMenu = _useState2[0],
+      setShowMenu = _useState2[1];
+
   return /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-header",
-    "data-static": Boolean(frontmatter.hero) || undefined
+    "data-static": Boolean(frontmatter.hero) || undefined,
+    "data-mobile-active": showMenu || undefined,
+    onClick: function onClick() {
+      return setShowMenu(false);
+    }
   }, /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-header-content"
   }, /*#__PURE__*/React.createElement("section", {
@@ -21,7 +44,16 @@ var Header = function Header() {
     className: "dumi-default-header-right"
   }, /*#__PURE__*/React.createElement(Navbar, null), /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-header-right-aside"
-  }, /*#__PURE__*/React.createElement(SearchBar, null), /*#__PURE__*/React.createElement(LangSwitch, null)))));
+  }, /*#__PURE__*/React.createElement(SearchBar, null), /*#__PURE__*/React.createElement(LangSwitch, null))), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "dumi-default-header-menu-btn",
+    onClick: function onClick(ev) {
+      ev.stopPropagation();
+      setShowMenu(function (v) {
+        return !v;
+      });
+    }
+  }, showMenu ? /*#__PURE__*/React.createElement(IconClose, null) : /*#__PURE__*/React.createElement(IconMenu, null))));
 };
 
 export default Header;

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

@@ -9,6 +9,12 @@
     position: sticky;
     background-color: fadeout(@c-site-bg, 10%);
     backdrop-filter: blur(6px);
+
+    // to avoid backdrop filter conflict with navbar overlay
+    &[data-mobile-active] {
+      background-color: @c-site-bg;
+      backdrop-filter: none;
+    }
   }
 
   &-content {
@@ -19,6 +25,10 @@
     max-width: @s-content-width;
     height: @s-header-height;
     box-sizing: border-box;
+
+    @media @mobile {
+      height: @s-header-height-m;
+    }
   }
 
   &-left {
@@ -34,5 +44,45 @@
       display: flex;
       align-items: center;
     }
+
+    @media @mobile {
+      position: fixed;
+      top: @s-header-height-m;
+      left: 0;
+      right: 0;
+      height: calc(100vh - @s-header-height-m);
+      display: block;
+      background-color: fadeout(@c-site-bg, 40%);
+      border-top: 1px solid @c-border-light;
+      backdrop-filter: blur(30px);
+      box-sizing: border-box;
+      transition: all 0.2s;
+
+      .@{prefix}-header:not([data-mobile-active]) & {
+        opacity: 0;
+        visibility: hidden;
+        padding-top: 20px;
+      }
+    }
+  }
+
+  &-menu-btn {
+    position: absolute;
+    top: 50%;
+    right: 24px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    transform: translateY(-50%);
+    display: none;
+
+    @media @mobile {
+      display: block;
+    }
+
+    > svg {
+      width: 20px;
+      fill: @c-text-secondary;
+    }
   }
 }

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

@@ -9,6 +9,12 @@
   text-align: center;
   box-sizing: border-box;
 
+  @media @mobile {
+    margin-top: -@s-header-height-m - 20;
+    padding-top: 160px;
+    height: 660px;
+  }
+
   + * {
     position: relative;
   }
@@ -32,6 +38,10 @@
     color: #4e6789;
     font-size: 20px;
     line-height: 1.6;
+
+    @media @mobile {
+      font-size: 16px;
+    }
   }
 
   &-actions {
@@ -50,6 +60,13 @@
       box-sizing: border-box;
       transition: opacity 0.2s;
 
+      @media @mobile {
+        font-size: 16px;
+        height: 42px;
+        line-height: 40px;
+        min-width: 128px;
+      }
+
       &:hover {
         opacity: 0.8;
       }

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

@@ -20,4 +20,8 @@
     background: linear-gradient(30deg, #91d6ff 30%, #66a6ff);
     background-clip: text;
   }
+
+  @media @mobile {
+    font-size: 60px;
+  }
 }

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

@@ -9,8 +9,20 @@
   font-weight: 500;
   text-decoration: none;
 
+  @media @mobile {
+    font-size: 18px;
+
+    img {
+      height: 32px;
+    }
+  }
+
   img {
     margin-right: 10px;
     height: 40px;
+
+    @media @mobile {
+      height: 32px;
+    }
   }
 }

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

@@ -7,9 +7,19 @@
   display: flex;
   align-items: center;
 
+  @media @mobile {
+    display: block;
+    padding-top: 24px;
+  }
+
   > li {
     font-size: 18px;
     line-height: 1;
+    text-align: center;
+
+    @media @mobile {
+      padding: 12px 0;
+    }
 
     > a {
       color: @c-text-secondary;
@@ -28,6 +38,10 @@
 
     &:not(:last-child) {
       margin-right: 48px;
+
+      @media @mobile {
+        margin-right: 0;
+      }
     }
   }
 }

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

@@ -3,6 +3,11 @@
 .@{prefix}-search-bar {
   position: relative;
 
+  @media @mobile {
+    // TODO: support search for mobile devices
+    display: none;
+  }
+
   &:not(:last-child) {
     margin-right: 28px;
   }
@@ -57,6 +62,10 @@
     transform: translateY(-50%);
     transition: all 0.3s;
     pointer-events: none;
+
+    @media @mobile {
+      display: none;
+    }
   }
 
   .@{prefix}-search-popover {

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

@@ -9,6 +9,26 @@
   box-sizing: border-box;
   overflow: auto;
 
+  @media @mobile {
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    max-height: initial;
+    padding-left: 32px;
+    background-color: @c-site-bg;
+    border-top: 1px solid @c-border-light;
+    box-shadow: 0 0 20px rgb(0 0 0 / 10%);
+    transition: 0.2s all;
+
+    .@{prefix}-doc-layout:not([data-mobile-sidebar-active]) & {
+      opacity: 0;
+      visibility: hidden;
+      transform: translateX(-100%);
+    }
+  }
+
   > dl {
     margin: 0;
     padding: 0;

package/theme-default/styles/variables.less

@@ -4,6 +4,7 @@
 @s-content-padding: 48px;
 @s-sidebar-width: 184px;
 @s-header-height: 76px;
+@s-header-height-m: 52px;
 
 @c-primary: #1677ff;
 @c-text: #333;
@@ -13,3 +14,6 @@
 @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)';