@antv/dumi-theme-antv 0.1.0

package/es/components/SideMenu.js

@@ -0,0 +1,99 @@
+import React, { useContext } from 'react';
+import { context, Link, NavLink } from 'dumi/theme';
+import LocaleSelect from './LocaleSelect';
+import SlugList from './SlugList';
+import './SideMenu.less';
+
+var SideMenu = function SideMenu(_ref) {
+  var mobileMenuCollapsed = _ref.mobileMenuCollapsed,
+      location = _ref.location,
+      darkPrefix = _ref.darkPrefix;
+
+  var _useContext = useContext(context),
+      _useContext$config = _useContext.config,
+      logo = _useContext$config.logo,
+      title = _useContext$config.title,
+      description = _useContext$config.description,
+      mode = _useContext$config.mode,
+      repoUrl = _useContext$config.repository.url,
+      menu = _useContext.menu,
+      navItems = _useContext.nav,
+      base = _useContext.base,
+      meta = _useContext.meta;
+
+  var isHiddenMenus = Boolean((meta.hero || meta.features || meta.gapless) && mode === 'site') || meta.sidemenu === false || undefined;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-menu",
+    "data-mode": mode,
+    "data-hidden": isHiddenMenus,
+    "data-mobile-show": !mobileMenuCollapsed || undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-menu-inner"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-menu-header"
+  }, /*#__PURE__*/React.createElement(Link, {
+    to: base,
+    className: "__dumi-default-menu-logo",
+    style: {
+      backgroundImage: logo && "url('".concat(logo, "')")
+    }
+  }), /*#__PURE__*/React.createElement("h1", null, title), /*#__PURE__*/React.createElement("p", null, description), /github\.com/.test(repoUrl) && mode === 'doc' && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("object", {
+    type: "image/svg+xml",
+    data: "https://img.shields.io/github/stars".concat(repoUrl.match(/((\/[^\/]+){2})$/)[1], "?style=social")
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-menu-mobile-area"
+  }, !!navItems.length && /*#__PURE__*/React.createElement("ul", {
+    className: "__dumi-default-menu-nav-list"
+  }, navItems.map(function (nav) {
+    var _nav$children;
+
+    var child = Boolean((_nav$children = nav.children) === null || _nav$children === void 0 ? void 0 : _nav$children.length) && /*#__PURE__*/React.createElement("ul", null, nav.children.map(function (item) {
+      return /*#__PURE__*/React.createElement("li", {
+        key: item.path || item.title
+      }, /*#__PURE__*/React.createElement(NavLink, {
+        to: item.path
+      }, item.title));
+    }));
+    return /*#__PURE__*/React.createElement("li", {
+      key: nav.path || nav.title
+    }, nav.path ? /*#__PURE__*/React.createElement(NavLink, {
+      to: nav.path
+    }, nav.title) : nav.title, child);
+  })), /*#__PURE__*/React.createElement(LocaleSelect, {
+    location: location
+  }), darkPrefix), /*#__PURE__*/React.createElement("ul", {
+    className: "__dumi-default-menu-list"
+  }, !isHiddenMenus && menu.map(function (item) {
+    var _meta$slugs;
+
+    // always use meta from routes to reduce menu data size
+    var hasSlugs = Boolean((_meta$slugs = meta.slugs) === null || _meta$slugs === void 0 ? void 0 : _meta$slugs.length);
+    var hasChildren = item.children && Boolean(item.children.length);
+    var show1LevelSlugs = meta.toc === 'menu' && !hasChildren && hasSlugs && item.path === location.pathname.replace(/([^^])\/$/, '$1');
+    var menuPaths = hasChildren ? item.children.map(function (i) {
+      return i.path;
+    }) : [item.path, // handle menu group which has no index route and no valid children
+    location.pathname.startsWith("".concat(item.path, "/")) && meta.title === item.title ? location.pathname : null];
+    return /*#__PURE__*/React.createElement("li", {
+      key: item.path || item.title
+    }, /*#__PURE__*/React.createElement(NavLink, {
+      to: item.path,
+      isActive: function isActive() {
+        return menuPaths.includes(location.pathname);
+      }
+    }, item.title), Boolean(item.children && item.children.length) && /*#__PURE__*/React.createElement("ul", null, item.children.map(function (child) {
+      return /*#__PURE__*/React.createElement("li", {
+        key: child.path
+      }, /*#__PURE__*/React.createElement(NavLink, {
+        to: child.path,
+        exact: true
+      }, /*#__PURE__*/React.createElement("span", null, child.title)), Boolean(meta.toc === 'menu' && typeof window !== 'undefined' && child.path === location.pathname && hasSlugs) && /*#__PURE__*/React.createElement(SlugList, {
+        slugs: meta.slugs
+      }));
+    })), show1LevelSlugs && /*#__PURE__*/React.createElement(SlugList, {
+      slugs: meta.slugs
+    }));
+  }))));
+};
+
+export default SideMenu;

package/es/components/SideMenu.less

@@ -0,0 +1,379 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-menu {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: @s-menu-width;
+  background-color: #f2f5fa;
+  box-sizing: border-box;
+  transition: left 0.3s;
+
+  &[data-hidden] {
+    display: none;
+  }
+
+  @media @mobile {
+    left: -@s-menu-mobile-width;
+    top: @s-mobile-nav-height;
+    display: block !important;
+    width: @s-menu-mobile-width;
+    background-color: #fff;
+
+    &[data-mobile-show] {
+      left: 0;
+    }
+
+    [data-prefers-color=dark] & {
+      background-color: @c-bg-dark;
+    }
+  }
+
+  // shadow
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: block;
+    width: 20px;
+    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
+    pointer-events: none;
+
+    // use border on mobile devices
+    @media @mobile {
+      width: 1px;
+      background: @c-border;
+    }
+  }
+
+  &-header {
+    position: relative;
+    padding-top: 40px;
+    text-align: center;
+    border-bottom: 1px solid @c-border;
+
+    [data-prefers-color=dark] & {
+      border-color: @c-border-dark;
+    }
+
+    @media @mobile {
+      display: none;
+    }
+
+    .@{prefix}-menu-logo {
+      display: inline-block;
+      width: 66px;
+      height: 65px;
+      background: url(@img-logo) no-repeat 0 / contain;
+    }
+
+    h1 {
+      margin: 10px 0 0;
+      color: @c-heading;
+      font-weight: 500;
+      line-height: 1.40625;
+    }
+
+    p {
+      margin: 0 0 5px;
+      color: lighten(@c-secondary, 10%);
+
+      // badges
+      > object[data^='https://img.shields.io'] {
+        max-height: 20px;
+      }
+
+      + p {
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  &-doc-locale {
+    padding: 16px 0;
+    text-align: center;
+    border-bottom: 1px solid @c-border;
+    display: flex;
+    justify-content: space-evenly;
+
+    [data-prefers-color=dark] & {
+      border-color: @c-border-dark;
+    }
+
+    [data-mode=doc][data-mobile-show=true] & {
+      display: grid;
+    }
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &-inner {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    overscroll-behavior: contain;
+
+    [data-prefers-color=dark] & {
+      background-color: #262626;
+    }
+
+    // common list styles
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      font-size: 16px;
+
+      li {
+        color: @c-text;
+        a,
+        > span {
+          position: relative;
+          display: block;
+          padding-right: 24px;
+          color: @c-heading;
+          line-height: 2.4;
+          text-decoration: none;
+          outline: none;
+          transition: color 0.3s, background 0.3s;
+
+          [data-prefers-color=dark] & {
+            color: @c-heading-dark;
+          }
+
+          span {
+            display: block;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          &:hover,
+          &.active {
+            color: @c-primary;
+
+            [data-prefers-color=dark] & {
+              color: @c-primary-dark;
+            }
+          }
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: -10px;
+            margin-top: -2.5px;
+            display: inline-block;
+            width: 5px;
+            height: 5px;
+            background-color: @c-primary;
+            border-radius: 50%;
+            opacity: 0;
+            transition: transform 0.2s, opacity 0.2s;
+            transform: scale(0) translateX(-10px);
+          }
+        }
+
+        &.active a,
+        a.active {
+          &::before {
+            opacity: 1;
+            transform: scale(1) translateX(0);
+          }
+        }
+
+        // level larger, offset larger, font size smaller
+        ul {
+          font-size: 0.9em;
+          padding-left: 1em;
+        }
+      }
+    }
+
+    // 1-level list styles
+    > ul {
+      > li > a {
+        line-height: 2.875;
+
+        &:not([href]) {
+          padding-top: 24px;
+          line-height: 1;
+          font-weight: 500;
+          color: @c-heading !important;
+          background: transparent !important;
+          cursor: default;
+
+          [data-prefers-color=dark] & {
+            color: @c-heading-dark !important;
+          }
+        }
+      }
+
+      > li:first-child > a:not([href]) {
+        padding-top: 0;
+      }
+    }
+
+    // n-level list styles
+    > ul ul {
+      a {
+        color: @c-secondary;
+        [data-prefers-color=dark] & {
+          color: @c-secondary-dark;
+        }
+        &.active {
+          color: @c-primary;
+          [data-prefers-color=dark] & {
+            color: @c-primary-dark;
+          }
+        }
+      }
+    }
+
+    .@{prefix}-menu-mobile-area {
+      display: none;
+      padding-bottom: 16px;
+      margin-bottom: 16px;
+      text-align: center;
+      border-bottom: 1px solid @c-border;
+
+      [data-prefers-color=dark] & {
+        border-color: @c-border-dark;
+      }
+
+      @media @mobile {
+        display: block;
+      }
+    }
+
+    // mobile nav list
+    .@{prefix}-menu-nav-list {
+      padding: 16px 0 0 0;
+
+      > li,
+      > li > a {
+        padding-right: 0;
+        line-height: 2.4;
+
+        ul {
+          padding-left: 0;
+
+          a {
+            padding-right: 0;
+            font-size: 90%;
+          }
+        }
+      }
+    }
+
+    // menu list
+    .@{prefix}-menu-list {
+      padding: 8px 0;
+      margin-bottom: 40px;
+
+      > li > a {
+        @c-active-bg: #e8ecf4;
+
+        padding-left: 28px;
+
+        &.active {
+          background: linear-gradient(to left, #e8ecf4, rgba(232, 236, 244, 0));
+
+          [data-prefers-color=dark] & {
+            background: linear-gradient(to left, #3d3d3e, rgba(255, 255, 255, 0.06));
+          }
+        }
+
+        ~ ul {
+          margin-top: 8px;
+          margin-left: 28px;
+        }
+
+        @media @mobile {
+          padding-left: 16px;
+
+          ~ ul {
+            margin-left: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  &[data-mode='site'] {
+    &::after {
+      width: 1px;
+      background: @c-border;
+
+      [data-prefers-color=dark] & {
+        background: @c-border-dark;
+      }
+    }
+
+    .@{prefix}-menu-list {
+      padding: 0;
+
+      > li > a {
+        position: relative;
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          right: 0;
+          display: block;
+          width: 3px;
+          background-color: @c-primary;
+          visibility: hidden;
+          opacity: 0;
+          transition: all 0.3s;
+          border-radius: 1px;
+        }
+
+        &.active {
+          z-index: 1;
+          background: linear-gradient(to left, #f8faff, rgba(248, 250, 255, 0));
+
+          [data-prefers-color=dark] & {
+            background: linear-gradient(to left, #3d3d3e, rgba(255, 255, 255, 0.06));
+          }
+          &::after {
+            opacity: 1;
+            visibility: visible;
+          }
+        }
+      }
+    }
+
+    @media @desktop {
+      top: @s-nav-height;
+      width: @s-site-menu-width;
+      padding-top: 50px;
+      background: transparent;
+
+      [data-prefers-color=dark] & {
+        background: @c-light-bg-dark;
+      }
+
+      .@{prefix}-menu-nav,
+      .@{prefix}-menu-header {
+        display: none;
+      }
+
+      .@{prefix}-menu-list > li > a {
+        padding-left: 58px;
+
+        ~ ul {
+          margin-left: 58px;
+        }
+      }
+    }
+  }
+}

package/es/components/SlugList.js

@@ -0,0 +1,33 @@
+var _excluded = ["slugs"];
+
+function _extends() { _extends = Object.assign || 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import { AnchorLink } from 'dumi/theme';
+import './SlugList.less';
+
+var SlugsList = function SlugsList(_ref) {
+  var slugs = _ref.slugs,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("ul", _extends({
+    role: "slug-list"
+  }, props), slugs.filter(function (_ref2) {
+    var depth = _ref2.depth;
+    return depth > 1 && depth < 4;
+  }).map(function (slug) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: slug.heading,
+      title: slug.value,
+      "data-depth": slug.depth
+    }, /*#__PURE__*/React.createElement(AnchorLink, {
+      to: "#".concat(slug.heading)
+    }, /*#__PURE__*/React.createElement("span", null, slug.value)));
+  }));
+};
+
+export default SlugsList;

package/es/components/SlugList.less

@@ -0,0 +1,18 @@
+@import (reference) '../style/variables.less';
+
+ul[role='slug-list'] {
+  &:empty {
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  li {
+    > a.active {
+      color: darken(@c-primary, 2%);
+    }
+
+    &[data-depth='3'] {
+      padding-left: 12px;
+    }
+  }
+}