dumi 2.0.0-alpha.3 → 2.0.0-alpha.4

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

@@ -0,0 +1,162 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+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 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, useLocation } from 'dumi';
+import SourceCode from 'dumi/theme/builtins/SourceCode';
+import Tabs from 'rc-tabs';
+import React, { useState } from 'react';
+import "./index.less";
+
+var IconCode = function IconCode() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 200 117"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M59.688 2.578c-3.438-3.437-8.438-3.437-11.563 0L3.75 48.516c-5 5.937-5 14.062 0 19.062l44.063 45.938c1.562 1.562 4.062 2.5 5.937 2.5s4.063-.938 5.938-2.5c3.437-3.438 3.437-8.438 0-11.563l-42.5-43.437 42.5-44.063c3.437-3.437 3.437-8.437 0-11.875Zm135.937 45.938L151.25 2.578c-3.438-3.437-8.438-3.437-11.563 0-3.125 3.438-3.437 8.438 0 11.563l42.5 44.375-42.5 44.062c-3.437 3.438-3.437 8.438 0 11.563 1.563 1.562 3.438 2.5 5.938 2.5 2.5 0 4.063-.938 5.938-2.5l44.062-45.938c5.625-5.625 5.625-13.75 0-19.687Zm-75.938-45c-4.062-1.563-9.062.937-10.937 5l-34.063 95c-1.562 4.062.938 9.062 5 10.937.938 0 1.563.938 2.5.938 3.438 0 6.563-2.5 7.5-5.938l35-95.937c1.563-4.063-.937-9.063-5-10Z"
+  }));
+};
+
+var IconCodeExpand = function IconCodeExpand() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 200 117"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M59.688 2.578c-3.438-3.437-8.438-3.437-11.563 0L3.75 48.516c-5 5.937-5 14.062 0 19.062l44.063 45.938c1.562 1.562 4.062 2.5 5.937 2.5s4.063-.938 5.938-2.5c3.437-3.438 3.437-8.438 0-11.563l-42.5-43.437 42.5-44.063c3.437-3.437 3.437-8.437 0-11.875Zm135.937 45.938L151.25 2.578c-3.438-3.437-8.438-3.437-11.563 0-3.125 3.438-3.437 8.438 0 11.563l42.5 44.375-42.5 44.062c-3.437 3.438-3.437 8.438 0 11.563 1.563 1.562 3.438 2.5 5.938 2.5 2.5 0 4.063-.938 5.938-2.5l44.062-45.938c5.625-5.625 5.625-13.75 0-19.687Z"
+  }));
+};
+
+var IconExternalLink = function IconExternalLink() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 1024 1024"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z"
+  }));
+};
+
+var Previewer = function Previewer(props) {
+  var _files$activeKey$0$ma;
+
+  var intl = useIntl();
+
+  var _useLocation = useLocation(),
+      hash = _useLocation.hash;
+
+  var files = Object.entries(props.asset.dependencies).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        type = _ref2[1].type;
+
+    return type === 'FILE';
+  });
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeKey = _useState2[0],
+      setActiveKey = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showCode = _useState4[0],
+      setShowCode = _useState4[1];
+
+  var isSingleFile = files.length === 1;
+  var lang = ((_files$activeKey$0$ma = files[activeKey][0].match(/\.([^.]+)$/)) === null || _files$activeKey$0$ma === void 0 ? void 0 : _files$activeKey$0$ma[1]) || 'text';
+  var link = "#".concat(props.asset.id);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-previewer",
+    "data-debug": props.debug,
+    "data-active": hash === link || undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-previewer-demo",
+    style: {
+      background: props.background
+    },
+    "data-compact": props.compact || undefined,
+    "data-transform": props.transform || undefined,
+    "data-iframe": props.iframe || undefined
+  }, props.iframe ? /*#__PURE__*/React.createElement("iframe", {
+    style: ['string', 'number'].includes(_typeof(props.iframe)) ? {
+      height: Number(props.iframe)
+    } : {},
+    src: "/~demos/".concat(props.asset.id)
+  }) : props.children), /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-previewer-meta"
+  }, (props.title || props.debug) && /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-previewer-desc"
+  }, /*#__PURE__*/React.createElement("h5", null, /*#__PURE__*/React.createElement("a", {
+    href: link
+  }, props.debug && /*#__PURE__*/React.createElement("strong", null, "DEV ONLY"), props.title)), props.description && /*#__PURE__*/React.createElement("div", {
+    className: "markdown",
+    dangerouslySetInnerHTML: {
+      __html: props.description
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-previewer-actions"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "dumi-default-previewer-action-btn",
+    type: "button",
+    "data-dumi-tooltip": intl.formatMessage({
+      id: 'previewer.actions.codesandbox'
+    })
+  }, /*#__PURE__*/React.createElement(IconCodeSandbox, null)), /*#__PURE__*/React.createElement("button", {
+    className: "dumi-default-previewer-action-btn",
+    type: "button",
+    "data-dumi-tooltip": intl.formatMessage({
+      id: 'previewer.actions.codepen'
+    })
+  }, /*#__PURE__*/React.createElement(IconCodePen, null)), /*#__PURE__*/React.createElement("a", {
+    target: "_blank",
+    rel: "noreferrer",
+    href: props.demoUrl,
+    className: "dumi-default-previewer-action-btn",
+    "data-dumi-tooltip": intl.formatMessage({
+      id: 'previewer.actions.separate'
+    })
+  }, /*#__PURE__*/React.createElement(IconExternalLink, null)), /*#__PURE__*/React.createElement("button", {
+    className: "dumi-default-previewer-action-btn",
+    type: "button",
+    onClick: function onClick() {
+      return setShowCode(function (prev) {
+        return !prev;
+      });
+    },
+    "data-dumi-tooltip": intl.formatMessage({
+      id: "previewer.actions.code.".concat(showCode ? 'shrink' : 'expand')
+    })
+  }, showCode ? /*#__PURE__*/React.createElement(IconCodeExpand, null) : /*#__PURE__*/React.createElement(IconCode, null))), showCode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-previewer-sources"
+  }, !isSingleFile && /*#__PURE__*/React.createElement(Tabs, {
+    className: "dumi-default-previewer-tabs",
+    prefixCls: "dumi-default-tabs",
+    moreIcon: "\xB7\xB7\xB7",
+    defaultActiveKey: String(activeKey),
+    onChange: function onChange(key) {
+      return setActiveKey(Number(key));
+    },
+    items: files.map(function (_ref3, i) {
+      var _ref4 = _slicedToArray(_ref3, 1),
+          filename = _ref4[0];
+
+      return {
+        key: String(i),
+        label: filename
+      };
+    })
+  })), /*#__PURE__*/React.createElement(SourceCode, {
+    lang: lang
+  }, files[activeKey][1].value))));
+};
+
+export default Previewer;

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

@@ -0,0 +1,297 @@
+@import (reference) '../../styles/variables.less';
+@import '../../styles/utils.less';
+
+.@{prefix}-previewer {
+  margin: 24px 0 32px;
+  border: 1px solid @c-border-light;
+  border-radius: 4px;
+  background-color: #fff;
+
+  [data-dumi-demo-grid] & {
+    margin: 0 0 16px;
+
+    &:first-child {
+      margin-top: 24px;
+    }
+
+    &:last-child {
+      margin-bottom: 32px;
+    }
+  }
+
+  &-demo {
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+    padding: 40px 24px;
+
+    > iframe {
+      display: block;
+      width: 100%;
+      height: 300px;
+      border: 0;
+    }
+
+    // demo render controls
+    &[data-iframe] {
+      position: relative;
+      padding: 0;
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        display: block;
+        height: 24px;
+        background-color: @c-border-light;
+      }
+
+      &::after {
+        @btn-gap: 8px;
+        @btn-width: 12px;
+
+        content: '';
+        position: absolute;
+        top: 5px;
+        left: @btn-gap;
+        display: inline-block;
+        width: @btn-width;
+        height: @btn-width;
+        border-radius: 50%;
+        background-color: #fd6458;
+        box-shadow: (@btn-width + @btn-gap) 0 0 #ffbf2b,
+          (@btn-width + @btn-gap) * 2 0 0 #24cc3d;
+      }
+    }
+
+    &[data-transform] {
+      transform: translate(0, 0);
+    }
+
+    &[data-compact] {
+      padding: 0;
+    }
+  }
+
+  &-meta {
+    border-top: 1px solid @c-border-light;
+  }
+
+  &-desc {
+    position: relative;
+
+    > .markdown {
+      padding: 14px 24px;
+      border-bottom: 1px dashed @c-border-light;
+    }
+
+    > h5 {
+      position: absolute;
+      top: -7px;
+      left: 20px;
+      margin: 0;
+      padding: 0 4px;
+      display: inline-block;
+      font-size: 14px;
+      line-height: 1;
+      font-weight: 500;
+      background: linear-gradient(
+          to top,
+          rgb(255 255 255 / 100%),
+          rgb(255 255 255 / 100%) 50%,
+          rgb(255 255 255 / 0%)
+        )
+        100%;
+
+      > a {
+        color: @c-text;
+
+        &:not(:hover) {
+          text-decoration: none;
+        }
+
+        > strong {
+          padding-right: 8px;
+          color: @c-warning;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  &-actions {
+    display: flex;
+    height: 32px;
+    align-items: center;
+    justify-content: center;
+
+    &:not(:last-child) {
+      border-bottom: 1px dashed @c-border-light;
+    }
+  }
+
+  &-action-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+
+    > svg {
+      width: 16px;
+      fill: darken(@c-border, 20%);
+      transition: fill 0.2s;
+    }
+
+    &:hover > svg {
+      fill: darken(@c-border, 30%);
+    }
+
+    &:not(:last-child) {
+      margin-right: 4px;
+    }
+  }
+
+  &-tabs {
+    position: relative;
+    padding: 0 12px;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 0;
+      border-bottom: 1px dashed @c-border-light;
+    }
+  }
+
+  // active
+  &[data-active] {
+    box-shadow: 0 0 0 4px fade(@c-primary, 10%);
+    border-color: lighten(@c-primary, 20%);
+  }
+
+  // debug mode
+  &[data-debug] {
+    border-color: lighten(@c-warning, 20%);
+
+    &[data-active] {
+      box-shadow: 0 0 0 4px fade(@c-warning, 10%);
+    }
+  }
+}
+
+.@{prefix}-tabs {
+  overflow: hidden;
+
+  &-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 rgb(0 0 0 / 10%) inset;
+      }
+
+      &&-ping-right ~ * > .@{prefix}-tabs-nav-more {
+        box-shadow: 0 0 5px rgb(0 0 0 / 10%);
+      }
+    }
+
+    &-list {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      transition: transform 0.2s;
+    }
+
+    &-more {
+      height: 100%;
+      cursor: pointer;
+      background: none;
+      border: 0;
+      transition: box-shadow 0.2s;
+    }
+  }
+
+  &-tab {
+    display: flex;
+    margin: 0 12px;
+
+    &-btn {
+      padding: 0;
+      color: @c-text-secondary;
+      font-size: 14px;
+      line-height: 36px;
+      border: 0;
+      outline: none;
+      background: transparent;
+      box-sizing: border-box;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      &:hover {
+        color: @c-text;
+      }
+    }
+
+    &-active &-btn {
+      color: @c-text;
+    }
+  }
+
+  &-ink-bar {
+    position: absolute;
+    height: 1px;
+    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;
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import { type Language } from 'prism-react-renderer';
+import 'prismjs/themes/prism.css';
+import { type FC } from 'react';
+import './index.less';
+declare const SourceCode: FC<{
+    children: string;
+    lang: Language;
+}>;
+export default SourceCode;

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

@@ -0,0 +1,87 @@
+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); }
+
+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 IconCheck } from '@ant-design/icons-svg/inline-svg/outlined/check.svg';
+import { ReactComponent as IconCopy } from '@ant-design/icons-svg/inline-svg/outlined/copy.svg';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import 'prismjs/themes/prism.css';
+import React, { useRef, useState } from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import "./index.less";
+/**
+ * define DSL which can be highlighted as similar language
+ */
+
+var SIMILAR_DSL = {
+  acss: 'css',
+  axml: 'markup'
+};
+
+var SourceCode = function SourceCode(_ref) {
+  var children = _ref.children,
+      lang = _ref.lang;
+  var timer = useRef();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isCopied = _useState2[0],
+      setIsCopied = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-source-code"
+  }, /*#__PURE__*/React.createElement(CopyToClipboard, {
+    text: children,
+    onCopy: function onCopy() {
+      setIsCopied(true);
+      clearTimeout(timer.current);
+      timer.current = window.setTimeout(function () {
+        return setIsCopied(false);
+      }, 2000);
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "dumi-default-source-code-copy",
+    "data-copied": isCopied || undefined
+  }, isCopied ? /*#__PURE__*/React.createElement(IconCheck, null) : /*#__PURE__*/React.createElement(IconCopy, null))), /*#__PURE__*/React.createElement(Highlight, _extends({}, defaultProps, {
+    code: children.trim(),
+    language: SIMILAR_DSL[lang] || lang,
+    theme: undefined
+  }), function (_ref2) {
+    var className = _ref2.className,
+        style = _ref2.style,
+        tokens = _ref2.tokens,
+        getLineProps = _ref2.getLineProps,
+        getTokenProps = _ref2.getTokenProps;
+    return /*#__PURE__*/React.createElement("pre", {
+      className: className,
+      style: style
+    }, tokens.map(function (line, i) {
+      return /*#__PURE__*/React.createElement("div", _extends({
+        key: String(i)
+      }, getLineProps({
+        line: line,
+        key: i
+      })), line.map(function (token, key) {
+        return /*#__PURE__*/React.createElement("span", _extends({
+          key: String(i)
+        }, getTokenProps({
+          token: token,
+          key: key
+        })));
+      }));
+    }));
+  }));
+};
+
+export default SourceCode;

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

@@ -0,0 +1,50 @@
+@import (reference) '../../styles/variables.less';
+
+.@{prefix}-source-code {
+  @bg-color: tint(@c-site-bg, 50%);
+
+  position: relative;
+  font-size: 14px;
+  background-color: @bg-color;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+
+  > pre.prism-code {
+    margin: 0;
+    padding-left: 24px;
+    padding-right: 24px;
+    background: transparent;
+  }
+
+  &-copy {
+    position: absolute;
+    top: 9px;
+    right: 12px;
+    display: inline-block;
+    padding: 8px 12px;
+    background-color: fade(@bg-color, 80%);
+    border: 0;
+    border-radius: 2px;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    > svg {
+      width: 16px;
+      fill: darken(@c-border, 20%);
+      transition: fill 0.2s;
+    }
+
+    &:hover > svg {
+      fill: darken(@c-border, 30%);
+    }
+
+    &[data-copied] > svg {
+      fill: rgb(11 174 11);
+    }
+  }
+
+  &:not(:hover) &-copy {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/theme-default/layouts/DocLayout/index.d.ts

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

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

@@ -1,37 +1,38 @@
-import { useOutlet } from 'dumi';
-import { useIntl, useRouteMeta } from 'dumi/theme';
+import { useIntl, useOutlet, useRouteMeta } from 'dumi';
 import Content from 'dumi/theme/slots/Content';
 import Header from 'dumi/theme/slots/Header';
 import Sidebar from 'dumi/theme/slots/Sidebar';
 import React from 'react';
 import Helmet from 'react-helmet';
+import "./index.less";
 
 var DocLayout = function DocLayout() {
   var intl = useIntl();
   var outlet = useOutlet();
-  var meta = useRouteMeta();
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Helmet, null, /*#__PURE__*/React.createElement("html", {
+
+  var _useRouteMeta = useRouteMeta(),
+      fm = _useRouteMeta.frontmatter;
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-doc-layout"
+  }, /*#__PURE__*/React.createElement(Helmet, null, /*#__PURE__*/React.createElement("html", {
     lang: intl.locale.replace(/-.+$/, '')
-  }), meta.title && /*#__PURE__*/React.createElement("title", null, meta.title), meta.title && /*#__PURE__*/React.createElement("meta", {
+  }), fm.title && /*#__PURE__*/React.createElement("title", null, fm.title), fm.title && /*#__PURE__*/React.createElement("meta", {
     property: "og:title",
-    content: meta.title
-  }), meta.description && /*#__PURE__*/React.createElement("meta", {
+    content: fm.title
+  }), fm.description && /*#__PURE__*/React.createElement("meta", {
     name: "description",
-    content: meta.description
-  }), meta.description && /*#__PURE__*/React.createElement("meta", {
+    content: fm.description
+  }), fm.description && /*#__PURE__*/React.createElement("meta", {
     property: "og:description",
-    content: meta.description
-  }), meta.keywords && /*#__PURE__*/React.createElement("meta", {
+    content: fm.description
+  }), fm.keywords && /*#__PURE__*/React.createElement("meta", {
     name: "keywords",
-    content: meta.keywords.join(',')
-  }), meta.keywords && /*#__PURE__*/React.createElement("meta", {
+    content: fm.keywords.join(',')
+  }), fm.keywords && /*#__PURE__*/React.createElement("meta", {
     property: "og:keywords",
-    content: meta.keywords.join(',')
-  })), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement("main", {
-    style: {
-      display: 'flex'
-    }
-  }, /*#__PURE__*/React.createElement(Sidebar, null), /*#__PURE__*/React.createElement(Content, null, outlet)));
+    content: fm.keywords.join(',')
+  })), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(Sidebar, null), /*#__PURE__*/React.createElement(Content, null, outlet)));
 };
 
 export default DocLayout;

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

@@ -0,0 +1,17 @@
+@import (reference) '../../styles/variables.less';
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: @c-site-bg;
+}
+
+.@{prefix}-doc-layout {
+  max-width: @s-content-width;
+  margin: 0 auto;
+  padding: 0 24px;
+
+  > main {
+    display: flex;
+  }
+}