dumi 2.0.0-alpha.2 → 2.0.0-alpha.4

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,16 +1,38 @@
-import { useOutlet } from 'dumi';
+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();
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement("main", {
-    style: {
-      display: 'flex'
-    }
-  }, /*#__PURE__*/React.createElement(Sidebar, null), /*#__PURE__*/React.createElement(Content, null, outlet)));
+
+  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(/-.+$/, '')
+  }), fm.title && /*#__PURE__*/React.createElement("title", null, fm.title), fm.title && /*#__PURE__*/React.createElement("meta", {
+    property: "og:title",
+    content: fm.title
+  }), fm.description && /*#__PURE__*/React.createElement("meta", {
+    name: "description",
+    content: fm.description
+  }), fm.description && /*#__PURE__*/React.createElement("meta", {
+    property: "og:description",
+    content: fm.description
+  }), fm.keywords && /*#__PURE__*/React.createElement("meta", {
+    name: "keywords",
+    content: fm.keywords.join(',')
+  }), fm.keywords && /*#__PURE__*/React.createElement("meta", {
+    property: "og:keywords",
+    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;
+  }
+}

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

@@ -1,3 +1,11 @@
 {
-  "a": "A"
+  "a": "A",
+  "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.codepen": "Open in CodePen (Not implemented)",
+  "previewer.actions.separate": "Open in separate page",
+  "404.title": "PAGE NOT FOUND",
+  "404.back": "Back to homepage"
 }

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

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

package/theme-default/slots/Content/heti.scss

@@ -0,0 +1,3 @@
+// override .heti root-selector
+$root-selector: '.markdown';
+@import 'heti/lib/heti.scss';

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

@@ -1,4 +1,6 @@
 import { type FC, type ReactNode } from 'react';
+import './heti.scss';
+import './index.less';
 declare const Content: FC<{
     children: ReactNode;
 }>;

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

@@ -1,12 +1,13 @@
+import { useSidebarData } from 'dumi';
 import React from 'react';
+import "./heti.scss";
+import "./index.less";
 
 var Content = function Content(props) {
+  var sidebar = useSidebarData();
   return /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: 1,
-      overflow: 'hidden',
-      padding: 24
-    }
+    className: "dumi-default-content",
+    "data-no-sidebar": !sidebar || undefined
   }, props.children);
 };
 

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

@@ -0,0 +1,31 @@
+@import (reference) '../../styles/variables.less';
+
+.markdown {
+  color: @c-text;
+
+  // hyperlink
+  a {
+    color: @c-primary;
+  }
+
+  // inline code
+  *:not(pre) code {
+    padding: 2px 5px;
+    color: #d56161;
+    background: darken(@c-site-bg, 2%);
+    border-radius: 2px;
+  }
+}
+
+.@{prefix}-content {
+  flex: 1;
+  max-width: 100%;
+
+  &:not([data-no-sidebar]) {
+    padding: 48px;
+    background-color: #fff;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    box-shadow: 0 4px 24px 0 rgb(0 0 0 / 5%);
+  }
+}

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

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

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

@@ -1,17 +1,20 @@
+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 "./index.less";
 
 var Header = function Header() {
   return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      borderBottom: '1px solid #eee',
-      padding: '22px 0'
-    }
-  }, /*#__PURE__*/React.createElement(Logo, null), "\xA0Header Area\xA0", /*#__PURE__*/React.createElement(Navbar, null), /*#__PURE__*/React.createElement(SearchBar, null));
+    className: "dumi-default-header"
+  }, /*#__PURE__*/React.createElement("section", {
+    className: "dumi-default-header-left"
+  }, /*#__PURE__*/React.createElement(Logo, null)), /*#__PURE__*/React.createElement("section", {
+    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))));
 };
 
 export default Header;

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

@@ -0,0 +1,22 @@
+@import (reference) '../../styles/variables.less';
+
+.@{prefix}-header {
+  display: flex;
+  align-items: center;
+  height: 86px;
+
+  &-left {
+    width: @s-sidebar-width;
+  }
+
+  &-right {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+
+    &-aside {
+      display: flex;
+      align-items: center;
+    }
+  }
+}

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

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