@antv/dumi-theme-antv 0.1.0

package/es/layout.js

@@ -0,0 +1,276 @@
+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 { context, Link } from 'dumi/theme';
+import i18n from 'i18next';
+import React, { useContext, useState } from 'react';
+import { initReactI18next } from 'react-i18next';
+import NotFoundPage from './antv/404';
+import Banner from './antv/Banner/index';
+import Cases from './antv/Cases/Cases';
+import Ideas from './antv/Features';
+import Footer from './antv/Footer';
+import Navbar from './components/Navbar';
+import SearchBar from './components/SearchBar';
+import SideMenu from './components/SideMenu';
+import SlugList from './components/SlugList';
+import './style/layout.less';
+i18n.use(initReactI18next) // passes i18n down to react-i18next
+.init({
+  initImmediate: false,
+  fallbackLng: 'zh',
+  keySeparator: false,
+  react: {
+    useSuspense: false
+  }
+});
+
+var isEmpty = function isEmpty(obj) {
+  return Object.keys(obj).length === 0;
+};
+
+var processRedirect = function processRedirect(context, location) {
+  var pathname = location.pathname;
+  var meta = context.meta,
+      routes = context.routes;
+  var isEmptyMeta = isEmpty(meta);
+  var matchRoute = {
+    meta: {}
+  };
+  var needRedirectPath = ['/zh', '/zh/', '/zh-CN', '/zh-CN/', '/en', '/en/', '/en-US', '/en-US/'];
+  var isInclude = needRedirectPath.some(function (item) {
+    return item === pathname;
+  });
+
+  if (isEmptyMeta) {
+    if (isInclude) {
+      // 存在重定向需求
+      var isZh = pathname.slice(1, 3) === 'zh';
+      var isEn = pathname.slice(1, 3) === 'en';
+
+      if (isZh) {
+        matchRoute = routes.find(function (item) {
+          return item.path === '/';
+        });
+      }
+
+      if (isEn) {
+        matchRoute = routes.find(function (item) {
+          return item.path === '/en-US';
+        });
+      }
+    }
+  }
+
+  return {
+    meta: isEmptyMeta ? matchRoute.meta : meta,
+    isDirect: isInclude
+  };
+};
+
+var Hero = function Hero(hero) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-layout-hero"
+  }, hero.image && /*#__PURE__*/React.createElement("img", {
+    src: hero.image,
+    alt: "banner"
+  }), /*#__PURE__*/React.createElement("h1", null, hero.title), /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: hero.desc
+    }
+  }), hero.actions && hero.actions.map(function (action) {
+    return /*#__PURE__*/React.createElement(Link, {
+      to: action.link,
+      key: action.text
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button"
+    }, action.text));
+  }));
+};
+
+var BannerPanel = function BannerPanel(banner) {
+  var image = banner.image,
+      title = banner.title,
+      desc = banner.desc,
+      actions = banner.actions,
+      notifications = banner.notifications;
+  var description = /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: desc
+    }
+  });
+  var coverImage = /*#__PURE__*/React.createElement("img", {
+    alt: "graphin",
+    style: {
+      width: '100%',
+      marginTop: '20%'
+    },
+    src: image
+  });
+  return /*#__PURE__*/React.createElement(Banner, {
+    coverImage: coverImage,
+    title: title // @ts-ignore
+    ,
+    description: description,
+    notifications: notifications,
+    buttons: actions,
+    className: "banner"
+  });
+};
+
+var Features = function Features(features) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-layout-features"
+  }, features.map(function (feat) {
+    return /*#__PURE__*/React.createElement("dl", {
+      key: feat.title,
+      style: {
+        backgroundImage: feat.icon ? "url(".concat(feat.icon, ")") : undefined
+      }
+    }, feat.link ? /*#__PURE__*/React.createElement(Link, {
+      to: feat.link
+    }, /*#__PURE__*/React.createElement("dt", null, feat.title)) : /*#__PURE__*/React.createElement("dt", null, feat.title), /*#__PURE__*/React.createElement("dd", {
+      dangerouslySetInnerHTML: {
+        __html: feat.desc
+      }
+    }));
+  }));
+};
+
+var Layout = function Layout(_ref) {
+  var _meta$slugs, _match;
+
+  var children = _ref.children,
+      location = _ref.location;
+  var Context = useContext(context);
+  var _Context$config = Context.config,
+      mode = _Context$config.mode,
+      repository = _Context$config.repository,
+      locale = Context.locale;
+
+  var _processRedirect = processRedirect(Context, location),
+      meta = _processRedirect.meta,
+      isDirect = _processRedirect.isDirect;
+
+  console.log('Context', Context, 'calculate meta', meta);
+  var repoUrl = repository.url,
+      branch = repository.branch,
+      platform = repository.platform;
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      menuCollapsed = _useState2[0],
+      setMenuCollapsed = _useState2[1];
+
+  var isSiteMode = mode === 'site';
+  var showHero = isSiteMode && meta.hero;
+  var showBanner = isSiteMode && meta.banner;
+  var showCases = isSiteMode && meta.cases;
+  var showFeatures = isSiteMode && meta.features;
+  var showIdeas = isSiteMode && meta.ideas;
+  var showSideMenu = meta.sidemenu !== false && !showHero && !showBanner && !showFeatures && !meta.gapless;
+  var showSlugs = !showHero && !showBanner && !showFeatures && Boolean((_meta$slugs = meta.slugs) === null || _meta$slugs === void 0 ? void 0 : _meta$slugs.length) && (meta.toc === 'content' || meta.toc === undefined) && !meta.gapless;
+  var isCN = /^zh|cn$/i.test(locale); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  var updatedTime = new Date(meta.updatedTime).toLocaleString([], {
+    hour12: false
+  });
+  var repoPlatform = {
+    github: 'GitHub',
+    gitlab: 'GitLab'
+  }[((_match = (repoUrl || '').match(/(github|gitlab)/)) === null || _match === void 0 ? void 0 : _match[1]) || 'nothing'] || platform; // 等dumi最新版发布后解决路由匹配问题
+
+  if (isEmpty(meta) && !isDirect) {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '60px'
+      },
+      className: "__dumi-default-layout home",
+      "data-route": location.pathname,
+      "data-show-sidemenu": false,
+      "data-show-slugs": false,
+      "data-site-mode": "site",
+      "data-gapless": String(!!meta.gapless),
+      onClick: function onClick() {
+        if (menuCollapsed) return;
+        setMenuCollapsed(true);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '60px'
+      }
+    }), /*#__PURE__*/React.createElement(Navbar, {
+      location: location,
+      navPrefix: /*#__PURE__*/React.createElement(SearchBar, null),
+      onMobileMenuClick: function onMobileMenuClick(ev) {
+        setMenuCollapsed(function (val) {
+          return !val;
+        });
+        ev.stopPropagation();
+      }
+    }), /*#__PURE__*/React.createElement(NotFoundPage, null), /*#__PURE__*/React.createElement(Footer, {
+      location: window.location,
+      githubUrl: repoUrl,
+      rootDomain: "https://antv.vision"
+    })));
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-layout ".concat(showBanner ? 'home' : ''),
+    "data-route": location.pathname,
+    "data-show-sidemenu": String(showSideMenu),
+    "data-show-slugs": String(showSlugs),
+    "data-site-mode": isSiteMode,
+    "data-gapless": String(!!meta.gapless),
+    onClick: function onClick() {
+      if (menuCollapsed) return;
+      setMenuCollapsed(true);
+    }
+  }, /*#__PURE__*/React.createElement(Navbar, {
+    location: location,
+    navPrefix: /*#__PURE__*/React.createElement(SearchBar, null),
+    onMobileMenuClick: function onMobileMenuClick(ev) {
+      setMenuCollapsed(function (val) {
+        return !val;
+      });
+      ev.stopPropagation();
+    }
+  }), showSideMenu && /*#__PURE__*/React.createElement(SideMenu, {
+    mobileMenuCollapsed: menuCollapsed,
+    location: location
+  }), showSlugs && /*#__PURE__*/React.createElement(SlugList, {
+    slugs: meta.slugs,
+    className: "__dumi-default-layout-toc"
+  }), showBanner && BannerPanel(meta.banner), showHero && Hero(meta.hero), showFeatures && Features(meta.features), showIdeas && /*#__PURE__*/React.createElement(Ideas, {
+    features: meta.ideas,
+    style: {
+      width: '100%'
+    }
+  }), showCases && /*#__PURE__*/React.createElement(Cases, {
+    cases: meta.cases,
+    className: "graph-cases"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-layout-content"
+  }, children, showSideMenu && /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-layout-footer-meta"
+  }, repoPlatform && /*#__PURE__*/React.createElement(Link, {
+    to: "".concat(repoUrl, "/edit/").concat(branch, "/").concat(meta.filePath)
+  }, isCN ? "\u5728 ".concat(repoPlatform, " \u4E0A\u7F16\u8F91\u6B64\u9875") : "Edit this doc on ".concat(repoPlatform)), /*#__PURE__*/React.createElement("span", {
+    "data-updated-text": isCN ? '最后更新时间：' : 'Last update: '
+  }, updatedTime)), !showSideMenu && /*#__PURE__*/React.createElement(Footer, {
+    location: window.location,
+    githubUrl: repoUrl,
+    rootDomain: "https://antv.vision"
+  })));
+};
+
+export default Layout;

package/es/style/layout.less

@@ -0,0 +1,402 @@
+@import "./markdown.less";
+@import "./variables.less";
+
+@s-toc-width: 136px;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
+    Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  font-variant: tabular-nums;
+  font-feature-settings: "tnum";
+  transition: background 0.2s cubic-bezier(0.075, 0.82, 0.165, 1),
+    color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
+
+  [data-prefers-color="dark"] & {
+    color: @c-text-dark;
+    background-color: @c-bg-dark;
+  }
+}
+
+.@{prefix}-layout {
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 16px (@s-content-margin + @s-toc-width) 50px @s-menu-width +
+    @s-content-margin;
+  &.home {
+    padding: 0px !important;
+  }
+  @media @mobile {
+    padding-top: 66px !important;
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+  }
+
+  &[data-gapless="true"] {
+    padding-top: @s-nav-height !important;
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+    padding-bottom: 0;
+
+    @media @mobile {
+      padding-top: @s-mobile-nav-height !important;
+    }
+  }
+
+  &[data-show-sidemenu="false"] {
+    padding-left: @s-content-margin;
+  }
+
+  &[data-show-slugs="false"] {
+    padding-right: @s-content-margin;
+  }
+
+  &[data-site-mode="true"] {
+    padding-top: @s-nav-height + 50px;
+
+    &[data-show-sidemenu="true"] {
+      padding-left: @s-site-menu-width + 50px;
+    }
+
+    &[data-show-slugs="true"] {
+      padding-right: @s-content-margin + @s-toc-width + 14;
+    }
+
+    .@{prefix}-layout-content > .markdown:first-child > *:first-child {
+      margin-top: 0;
+    }
+
+    .@{prefix}-layout-toc {
+      top: 114px;
+      max-height: calc(90vh - 144px);
+    }
+  }
+
+  &-hero {
+    margin: -50px -58px 0;
+    padding: 100px 0;
+    text-align: center;
+    background-color: #f5f6f8;
+
+    [data-prefers-color="dark"] & {
+      background-color: @c-light-bg-dark;
+    }
+
+    @media @mobile {
+      margin: -16px -16px 0;
+      padding: 48px 0;
+    }
+
+    img {
+      max-width: 100%;
+      max-height: 200px;
+      margin-bottom: 1rem;
+    }
+
+    h1 {
+      margin: 0 0 16px;
+      font-size: 48px;
+      font-weight: 600;
+      line-height: 56px;
+      color: #080e29;
+
+      [data-prefers-color="dark"] & {
+        color: @c-heading-dark;
+      }
+
+      + div {
+        margin: 16px 0 32px;
+        opacity: 0.78;
+
+        .markdown {
+          font-size: 16px;
+        }
+      }
+    }
+
+    button {
+      margin-right: 16px;
+      padding: 0 32px;
+      height: 44px;
+      color: @c-primary;
+      font-size: 16px;
+      background: transparent;
+      border: 1px solid @c-primary;
+      border-radius: 22px;
+      box-sizing: border-box;
+      cursor: pointer;
+      outline: none;
+      transition: all 0.3s;
+
+      &:hover {
+        opacity: 0.8;
+      }
+
+      &:active {
+        opacity: 0.9;
+      }
+    }
+
+    a:last-child button {
+      margin-right: 0;
+      color: #fff;
+      background: @c-primary;
+    }
+  }
+
+  &-features {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: 96px;
+    grid-row-gap: 56px;
+    padding: 72px 0;
+
+    > dl {
+      flex: 1;
+      margin: 0;
+      text-align: center;
+      background: no-repeat center top / auto 48px;
+
+      &[style*="background-image"] {
+        padding-top: 64px;
+      }
+
+      dt {
+        margin-bottom: 12px;
+        font-size: 20px;
+        line-height: 1;
+        color: @c-heading;
+        [data-prefers-color="dark"] & {
+          color: @c-text-dark;
+        }
+      }
+
+      a {
+        transition-duration: none;
+      }
+
+      a dt {
+        color: @c-link;
+        transition: opacity 0.2s;
+        &:hover {
+          opacity: 0.7;
+          text-decoration: underline;
+        }
+
+        &:active {
+          opacity: 0.9;
+        }
+      }
+
+      dd {
+        margin: 0;
+
+        .markdown {
+          color: @c-secondary;
+          font-size: 14px;
+          line-height: 22px;
+
+          [data-prefers-color="dark"] & {
+            color: @c-secondary-dark;
+          }
+
+          > p:first-child {
+            margin-top: 0;
+          }
+
+          > p:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+
+    @media @mobile {
+      display: block;
+      padding: 40px 0;
+
+      > dl {
+        text-align: left;
+        background-position: left top;
+
+        &[style*="background-image"] {
+          padding: 0 0 0 60px;
+        }
+
+        + dl {
+          margin-top: 32px;
+        }
+      }
+    }
+  }
+
+  &-features,
+  &-features + &-content,
+  &-hero + &-content {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 960px;
+  }
+
+  &-hero + &-content {
+    margin-top: 60px;
+  }
+
+  &-toc {
+    list-style: none;
+    position: fixed;
+    z-index: 10;
+    top: 50px;
+    right: 0;
+    width: @s-toc-width;
+    max-height: calc(90vh - 80px);
+    margin: 0;
+    padding: 0 24px 0 0;
+    background-color: #fff;
+    box-sizing: content-box;
+    overflow: auto;
+
+    [data-prefers-color="dark"] & {
+      background-color: @c-bg-dark;
+    }
+
+    @media @mobile {
+      display: none;
+    }
+
+    li {
+      position: relative;
+      margin: 0;
+      padding: 4px 0 4px 6px;
+      text-indent: 12px;
+      font-size: 13px;
+      line-height: 1.40625;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      a {
+        color: @c-text;
+        text-decoration: none;
+
+        [data-prefers-color="dark"] & {
+          color: @c-text-dark;
+        }
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          display: inline-block;
+          width: 2px;
+          background: @c-border;
+        }
+
+        &:hover {
+          color: lighten(@c-primary, 5%);
+
+          [data-prefers-color="dark"] & {
+            color: lighten(@c-primary-dark, 5%);
+          }
+        }
+
+        &:active {
+          color: lighten(@c-primary, 3%);
+
+          [data-prefers-color="dark"] & {
+            color: lighten(@c-primary-dark, 3%);
+          }
+        }
+
+        &.active {
+          color: @c-primary;
+
+          [data-prefers-color="dark"] & {
+            color: @c-primary-dark;
+          }
+
+          &::before {
+            background: @c-primary;
+
+            [data-prefers-color="dark"] & {
+              background: @c-primary-dark;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &-footer-meta {
+    margin-top: 40px;
+    padding-top: 24px;
+    display: flex;
+    color: @c-secondary;
+    font-size: 14px;
+    justify-content: space-between;
+    border-top: 1px solid @c-border;
+
+    [data-prefers-color="dark"] & {
+      color: @c-secondary-dark;
+      border-color: @c-border-dark;
+    }
+
+    @media only screen and (max-width: 960px) {
+      display: block;
+    }
+
+    > a {
+      margin-bottom: 4px;
+      display: block;
+      color: @c-primary;
+      transition: opacity 0.2s;
+      text-decoration: none;
+
+      [data-prefers-color="dark"] & {
+        color: @c-primary-dark;
+      }
+
+      &:hover {
+        opacity: 0.7;
+        text-decoration: underline;
+      }
+
+      &:active {
+        opacity: 0.9;
+      }
+    }
+
+    > span:last-child {
+      &::before {
+        content: attr(data-updated-text);
+        color: @c-primary;
+
+        [data-prefers-color="dark"] & {
+          color: @c-primary-dark;
+        }
+      }
+    }
+  }
+}
+
+.__dumi-default-layout-footer {
+  margin: 72px 0 -32px;
+  padding-top: 24px;
+  border-top: 1px solid @c-border;
+  text-align: center;
+
+  [data-prefers-color="dark"] & {
+    border-color: @c-border-dark;
+  }
+
+  .markdown {
+    color: #b0b1ba;
+
+    [data-prefers-color="dark"] & {
+      color: rgba(255, 255, 255, 0.45);
+    }
+  }
+}