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

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;

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

@@ -0,0 +1,81 @@
+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 { useIntl, useLocale, useLocation, useSiteData } from 'dumi';
+import React, { useEffect, useState } from 'react';
+import "./index.less";
+
+function getTargetLocalePath(_ref) {
+  var pathname = _ref.pathname,
+      current = _ref.current,
+      target = _ref.target;
+  var clearPath = 'base' in current ? pathname.replace(current.base.replace(/\/$/, ''), '') : pathname.replace(new RegExp("".concat(current.suffix, "$")), '');
+  return 'base' in target ? "".concat(target.base).concat(clearPath).replace(/^\/\//, '/') : "".concat(clearPath).concat(target.suffix);
+}
+
+var SingleSwitch = function SingleSwitch(_ref2) {
+  var locale = _ref2.locale;
+
+  var _useLocation = useLocation(),
+      pathname = _useLocation.pathname;
+
+  var current = useLocale();
+
+  var _useState = useState(function () {
+    return getTargetLocalePath({
+      pathname: pathname,
+      current: current,
+      target: locale
+    });
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      path = _useState2[0],
+      setPath = _useState2[1];
+
+  useEffect(function () {
+    setPath(getTargetLocalePath({
+      pathname: pathname,
+      current: current,
+      target: locale
+    }));
+  }, [pathname, current.id, locale.id]); // TODO: use Link (without page refresh)
+
+  return /*#__PURE__*/React.createElement("a", {
+    className: "dumi-default-lang-switch",
+    href: path
+  }, locale.name);
+};
+
+var LangSwitch = function LangSwitch() {
+  var _useSiteData = useSiteData(),
+      locales = _useSiteData.locales;
+
+  var _useIntl = useIntl(),
+      locale = _useIntl.locale; // do not render in single language
+
+
+  if (locales.length <= 1) return null;
+  return locales.length > 2 ?
+  /*#__PURE__*/
+  // TODO: multiple languages select
+  React.createElement(React.Fragment, null, "WIP") :
+  /*#__PURE__*/
+  // single language switch
+  React.createElement(SingleSwitch, {
+    locale: locales.find(function (_ref3) {
+      var id = _ref3.id;
+      return id !== locale;
+    })
+  });
+};
+
+export default LangSwitch;

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

@@ -0,0 +1,13 @@
+@import (reference) '../../styles/variables.less';
+
+.@{prefix}-lang-switch {
+  color: @c-text-secondary;
+  font-size: 14px;
+  line-height: 1;
+  text-decoration: none;
+  transition: all 0.3s;
+
+  &:hover {
+    color: @c-primary;
+  }
+}

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

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

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

@@ -1,7 +1,19 @@
+import { Link, useLocale, useSiteData } from 'dumi';
 import React from 'react';
+import "./index.less";
 
 var Logo = function Logo() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, "LOGO");
+  var _useSiteData = useSiteData(),
+      themeConfig = _useSiteData.themeConfig;
+
+  var locale = useLocale();
+  return /*#__PURE__*/React.createElement(Link, {
+    className: "dumi-default-logo",
+    to: 'base' in locale ? locale.base : '/'
+  }, /*#__PURE__*/React.createElement("img", {
+    src: themeConfig.logo || 'data:image/png;base64,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',
+    alt: themeConfig.name
+  }), themeConfig.name);
 };
 
 export default Logo;

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

@@ -0,0 +1,16 @@
+@import (reference) '../../styles/variables.less';
+
+.@{prefix}-logo {
+  display: flex;
+  align-items: center;
+  color: @c-text;
+  font-size: 22px;
+  line-height: 1;
+  font-weight: 500;
+  text-decoration: none;
+
+  img {
+    margin-right: 10px;
+    height: 40px;
+  }
+}

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

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

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

@@ -1,7 +1,26 @@
+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 { Link, useLocation, useNavData } from 'dumi';
 import React from 'react';
+import "./index.less";
 
 var Navbar = function Navbar() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, "Navbar area");
+  var nav = useNavData();
+
+  var _useLocation = useLocation(),
+      pathname = _useLocation.pathname;
+
+  return /*#__PURE__*/React.createElement("ul", {
+    className: "dumi-default-navbar"
+  }, nav.map(function (item) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: item.link
+    }, /*#__PURE__*/React.createElement(Link, _extends({
+      to: item.link
+    }, pathname.startsWith(item.activePath || item.link) ? {
+      className: 'active'
+    } : {}), item.title));
+  }));
 };
 
 export default Navbar;

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

@@ -0,0 +1,33 @@
+@import (reference) '../../styles/variables.less';
+
+.@{prefix}-navbar {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+
+  > li {
+    font-size: 18px;
+    line-height: 1;
+
+    > a {
+      color: @c-text-secondary;
+      text-decoration: none;
+      transition: all 0.3s;
+
+      &:hover {
+        color: @c-primary;
+      }
+
+      &.active {
+        color: @c-text;
+        font-weight: 500;
+      }
+    }
+
+    &:not(:last-child) {
+      margin-right: 48px;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,20 @@
+import { Link, useIntl, useLocale } from 'dumi';
+import React from 'react';
+import "./index.less";
+
+var Page404 = function Page404() {
+  var intl = useIntl();
+  var locale = useLocale();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-not-found"
+  }, /*#__PURE__*/React.createElement("h1", null, intl.formatMessage({
+    id: '404.title'
+  })), /*#__PURE__*/React.createElement(Link, {
+    to: 'base' in locale ? locale.base : '/',
+    replace: true
+  }, intl.formatMessage({
+    id: '404.back'
+  }), " \u2192"));
+};
+
+export default Page404;

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

@@ -0,0 +1,26 @@
+@import (reference) '../../styles/variables.less';
+
+.@{prefix}-not-found {
+  display: flex;
+  flex-direction: column;
+  height: 65vh;
+  align-items: center;
+  justify-content: center;
+
+  > h1 {
+    position: relative;
+    margin: 24px 0;
+    color: @c-border-light;
+    font-size: 78px;
+    font-weight: 700;
+    text-shadow: -1px -1px 0 @c-border;
+  }
+
+  > a {
+    color: @c-primary;
+
+    &:not(:hover) {
+      text-decoration: none;
+    }
+  }
+}

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

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

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

@@ -1,9 +1,37 @@
-import React from 'react';
+import { ReactComponent as IconSearch } from '@ant-design/icons-svg/inline-svg/outlined/search.svg';
+import { useIntl } from 'dumi';
+import React, { useEffect, useRef } from 'react';
+import "./index.less";
+var isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(navigator.platform);
 
 var SearchBar = function SearchBar() {
-  return /*#__PURE__*/React.createElement("input", {
-    placeholder: "SearchBar"
-  });
+  var intl = useIntl();
+  var input = useRef(null);
+  var symbol = isAppleDevice ? '⌘' : 'Ctrl';
+  useEffect(function () {
+    var handler = function handler(ev) {
+      if ((isAppleDevice ? ev.metaKey : ev.ctrlKey) && (ev.keyCode === 75 || ev.code === 'KeyK')) {
+        var _input$current;
+
+        (_input$current = input.current) === null || _input$current === void 0 ? void 0 : _input$current.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handler);
+    return function () {
+      return document.removeEventListener('keydown', handler);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-search-bar"
+  }, /*#__PURE__*/React.createElement(IconSearch, null), /*#__PURE__*/React.createElement("input", {
+    placeholder: intl.formatMessage({
+      id: 'header.search.placeholder'
+    }),
+    ref: input
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "dumi-default-search-shortcut"
+  }, symbol, " K"));
 };
 
 export default SearchBar;

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

@@ -0,0 +1,61 @@
+@import (reference) '../../styles/variables.less';
+
+.@{prefix}-search-bar {
+  position: relative;
+
+  &:not(:last-child) {
+    margin-right: 28px;
+  }
+
+  > svg {
+    position: absolute;
+    top: 50%;
+    margin-top: 1px;
+    left: 16px;
+    width: 16px;
+    fill: @c-text-note;
+    transform: translateY(-50%);
+  }
+
+  input {
+    width: 280px;
+    height: 40px;
+    padding: 0 12px 0 40px;
+    color: @c-text;
+    font-size: 14px;
+    border: 1px solid @c-border;
+    border-radius: 20px;
+    box-sizing: border-box;
+    outline: none;
+    transition: all 0.3s;
+    background-color: transparent;
+
+    &:focus {
+      border-color: fade(@c-primary, 50%);
+      background-color: #fff;
+      box-shadow: 0 0 0 3px fade(@c-primary, 10%);
+
+      + .@{prefix}-search-shortcut {
+        opacity: 0;
+      }
+    }
+  }
+
+  .@{prefix}-search-shortcut {
+    position: absolute;
+    top: 50%;
+    right: 11px;
+    display: inline-block;
+    padding: 4px 8px;
+    color: @c-text-note;
+    font-size: 12px;
+    line-height: 1;
+    white-space: nowrap;
+    background-color: fade(#fff, 80%);
+    border-radius: 11px;
+    border: 1px solid @c-border;
+    transform: translateY(-50%);
+    transition: all 0.3s;
+    pointer-events: none;
+  }
+}

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

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

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

@@ -1,14 +1,29 @@
+import { NavLink, useLocation, useSidebarData } from 'dumi';
+import Toc from 'dumi/theme/slots/Toc';
 import React from 'react';
+import "./index.less";
 
 var Sidebar = function Sidebar() {
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      borderRight: '1px solid #eee',
-      width: 240,
-      minHeight: '100vh',
-      paddingTop: 16
-    }
-  }, "Sidebar Area");
+  var _useLocation = useLocation(),
+      pathname = _useLocation.pathname;
+
+  var sidebar = useSidebarData();
+  return sidebar && /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-sidebar"
+  }, sidebar.map(function (item, i) {
+    return /*#__PURE__*/React.createElement("dl", {
+      className: "dumi-default-sidebar-group",
+      key: String(i)
+    }, item.title && /*#__PURE__*/React.createElement("dt", null, item.title), item.children.map(function (child) {
+      return /*#__PURE__*/React.createElement("dd", {
+        key: child.link
+      }, /*#__PURE__*/React.createElement(NavLink, {
+        to: child.link,
+        title: child.title,
+        end: true
+      }, child.title), child.link === pathname && /*#__PURE__*/React.createElement(Toc, null));
+    }));
+  }));
 };
 
 export default Sidebar;

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

@@ -0,0 +1,57 @@
+@import (reference) '../../styles/variables.less';
+
+.@{prefix}-sidebar {
+  width: @s-sidebar-width;
+  min-height: 100vh;
+  padding: 20px 32px 24px 8px;
+  box-sizing: border-box;
+
+  > dl {
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+
+    > dt {
+      margin: 8px 0;
+      color: @c-text;
+      font-size: 14px;
+      font-weight: 500;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-transform: uppercase;
+    }
+
+    > dd {
+      margin: 0;
+      padding: 10px 0;
+
+      > a {
+        display: block;
+        color: @c-text-secondary;
+        font-size: 16px;
+        text-decoration: none;
+        transition: all 0.3s;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &:hover {
+          color: @c-primary;
+        }
+
+        &.active {
+          color: @c-primary;
+          font-weight: 500;
+        }
+      }
+    }
+
+    // divider line & gap
+    + dl {
+      margin-top: 16px;
+      padding-top: 16px;
+      border-top: 1px solid @c-border;
+    }
+  }
+}

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

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