@antv/dumi-theme-antv 0.1.0

package/README.md

@@ -0,0 +1,9 @@
+# dumi-theme-antv
+
+dumi theme for antv site
+
+## install
+
+```
+yarn add @antv/dumi-theme-antv --save-dev
+```

package/es/antv/404/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { HomeOutlined } from '@ant-design/icons';
+import { Result, Button } from 'antd';
+import { Link } from 'dumi/theme';
+
+var NotFoundPage = function NotFoundPage() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Result // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  , {
+    status: '404',
+    title: "404",
+    subTitle: "Sorry, the page you visited does not exist.",
+    extra: /*#__PURE__*/React.createElement(Link, {
+      to: "/"
+    }, /*#__PURE__*/React.createElement(Button, {
+      type: "primary"
+    }, /*#__PURE__*/React.createElement(HomeOutlined, null), "Back Home"))
+  }));
+};
+
+export default NotFoundPage;

package/es/antv/Banner/Banner.module.less

@@ -0,0 +1,412 @@
+@import '../mixins';
+.container1440() {
+  width: 1440px;
+  max-width: calc(100% - 80px);
+  margin-left: auto;
+  margin-right: auto;
+
+  @media only screen and (max-width: 931.99px) {
+    & {
+      max-width: calc(100% - 60px);
+    }
+  }
+
+  @media only screen and (max-width: 767.99px) {
+    & {
+      max-width: calc(100% - 32px);
+    }
+  }
+}
+
+.wrapper {
+  min-height: 650px;
+  max-height: 803px;
+  background: linear-gradient(225deg, #ffffff, #f0f5ff);
+  height: calc(94vh);
+  position: relative;
+  overflow: hidden;
+  .content {
+    .container1440;
+    height: 100%;
+    position: relative;
+  }
+  .text {
+    position: relative;
+    top: 26%;
+    z-index: 1;
+    margin-left: 4.5%;
+    .title {
+      font-size: 3.4em; //2.875em;
+      font-weight: 800;
+      color: rgba(0, 0, 0, 1);
+      position: relative;
+    }
+    .description {
+      margin-top: 0.83%; //12px;
+      margin-bottom: 0px;
+      color: rgba(106, 123, 140, 1);
+      font-size: 1.14em;
+      font-weight: 200;
+      position: relative;
+      width: 40%;
+      max-width: 700px;
+    }
+    .buttons {
+      display: flex;
+      margin-top: 5.56%;
+
+      .buttonLink + .buttonLink {
+        margin-left: 16px;
+      }
+
+      .buttonLink {
+        cursor: pointer;
+        border-radius: 50px;
+        min-width: 134px;
+        padding-left: 15px;
+        padding-right: 15px;
+        height: 40px;
+        z-index: 10;
+        position: relative;
+        transition: all 0.3s;
+        border: 1px solid @primary-color;
+        color: @primary-color;
+        background: transparent;
+        text-align: center;
+        font-size: 1.14em;
+        line-height: 40px;
+
+        &:hover {
+          color: tint(@primary-color, 25%);
+          border: 1px solid tint(@primary-color, 25%);
+          background-color: fade(@primary-color, 3%);
+        }
+
+        &.primary {
+          border: none;
+          outline: none;
+          color: #fff;
+          background: linear-gradient(60deg, fade(@primary-color, 70%), shade(@primary-color, 20%));
+          opacity: 0.8;
+          box-shadow: 0 8px 10px fade(@primary-color, 20%);
+
+          &:hover {
+            opacity: 1;
+          }
+        }
+      }
+      .videoButtonWrapper {
+        margin-left: 16px;
+        width: fit-content;
+        height: fit-content;
+        .videoButton {
+          width: 40px;
+          height: 40px;
+          background-size: contain;
+          border: 1px solid @primary-color;
+          border-radius: 20px;
+          transition: all 0.15s;
+          display: flex;
+          cursor: pointer;
+          overflow: hidden;
+          .videoButtonIcon {
+            margin-left: 12px;
+            font-size: 16px;
+            color: @primary-color;
+            line-height: 44px;
+          }
+          .videoButtonText {
+            line-height: 40px;
+            margin-left: 10px;
+            color: @primary-color;
+          }
+          &:hover {
+            width: 134px;
+          }
+        }
+      }
+      .githubWrapper {
+        margin-left: 16px;
+        display: flex;
+        :global {
+          .gh-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 20px;
+            padding: 9px;
+            border: 1px solid #ced4d9;
+            background: transparent;
+            text-decoration: none;
+            white-space: nowrap;
+            display: flex;
+            cursor: pointer;
+            float: left;
+            transition: all 0.15s;
+            &:hover {
+              background: #f2f4f5;
+            }
+            .gh-ico {
+              width: 16px;
+              height: 16px;
+              margin-left: 2px;
+              margin-top: 2px;
+              background-image: url(https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Nk9mQ48ZoZMAAAAAAAAAAABkARQnAQ);
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+              box-sizing: border-box;
+              cursor: pointer;
+              color: #333;
+            }
+            .gh-text {
+              display: none;
+            }
+          }
+          .gh-count {
+            position: relative;
+            display: none;
+            /* hidden to start */
+            margin-left: 52px;
+            margin-top: 7px;
+            border: 1px solid #d4d4d4;
+            padding: 2px 10px;
+            font-weight: 700;
+            height: 65%;
+            border-radius: 5px;
+            color: rgb(49, 70, 89);
+            &:hover {
+              background: #f2f4f5;
+              transition: all 0.15s;
+            }
+          }
+          .gh-count:hover,
+          .gh-count:focus {
+            color: #4183c4;
+          }
+          .gh-count:before,
+          .gh-count:after {
+            content: '';
+            position: absolute;
+            display: inline-block;
+            width: 0;
+            height: 0;
+            border-color: transparent;
+            border-style: solid;
+          }
+          .gh-count:before {
+            top: 50%;
+            left: -3px;
+            margin-top: -5px;
+            border-width: 4px 4px 4px 0;
+            border-right-color: #fafafa;
+          }
+          .gh-count:after {
+            top: 50%;
+            border-width: 5px 5px 5px 0;
+            border-right-color: #d4d4d4;
+            left: -5px;
+            z-index: -1;
+            margin-top: -6px;
+          }
+        }
+      }
+    }
+  }
+  .notifications {
+    width: 80%;
+    display: flex;
+    bottom: 40px;
+    position: absolute;
+    z-index: 3;
+    margin-left: 4.5%;
+  }
+  .teaser {
+    display: flex;
+    position: absolute;
+    right: 0;
+    margin-top: -300px;
+    width: 52%;
+    max-width: 598px;
+    height: 324px;
+    margin: auto;
+    margin-top: 0;
+    top: 0;
+    bottom: 0;
+    .teaserimg {
+      width: 100%;
+      height: auto;
+      position: relative;
+    }
+  }
+  .backLeftBottom {
+    position: absolute;
+    left: -8%;
+    bottom: -20px;
+  }
+}
+.videoModal {
+  :global {
+    .video-react-big-play-button {
+      display: none !important;
+    }
+    .video-react-control-bar {
+      border-radius: 0 0 4px 4px;
+    }
+    .video-react {
+      border-radius: 4px;
+      .video-react-video {
+        border-radius: 4px;
+      }
+    }
+    .ant-modal-close {
+      right: -50px;
+      top: -12px;
+      color: #fff;
+    }
+    .anticon-info-circle {
+      display: none !important;
+    }
+    .ant-modal-confirm-btns {
+      display: none !important;
+    }
+    .ant-modal-confirm-title {
+      display: none !important;
+    }
+    .ant-modal-close {
+      display: block !important;
+    }
+    .ant-modal-body {
+      padding: 0 !important;
+      .ant-modal-confirm-content {
+        margin: 0 !important;
+      }
+    }
+  }
+}
+
+@media (max-width: 1144px) {
+  .wrapper {
+    .teaser {
+      transition: 0.3s all;
+      margin: auto;
+      margin-top: 0;
+      top: 0;
+      bottom: 0;
+    }
+  }
+}
+
+@media (max-width: 900px) {
+  .wrapper {
+    .content {
+      width: 91.46%;
+      margin-left: 4.27%;
+      margin-bottom: 5%;
+      position: relative;
+    }
+    .text {
+      top: 16.7%;
+      text-align: center;
+      margin-left: 0;
+      .title {
+        font-size: 2.857em;
+        margin-left: 0;
+      }
+      .description {
+        width: 100%;
+        max-width: 100%;
+        margin-left: 0;
+        font-size: 1em;
+      }
+      .buttons {
+        display: inline-flex;
+        .more {
+          font-size: 1em;
+        }
+        .githubIframe {
+          height: 40px;
+        }
+        .videoButtonWrapper {
+          width: fit-content;
+          height: fit-content;
+        }
+      }
+    }
+    .notifications {
+      width: 100%;
+      display: block;
+      bottom: 20px;
+      height: 44px;
+      overflow: hidden;
+    }
+    .teaser {
+      width: 100%;
+      max-width: 1200px;
+      margin-top: auto;
+      margin-left: unset;
+      margin-right: unset;
+      right: unset;
+      top: 30%;
+      display: flex;
+      justify-content: center;
+      .teaserimg {
+        width: 40%;
+        margin-left: unset;
+        margin-right: unset;
+      }
+    }
+  }
+}
+
+@media (max-width: 786px) {
+  .wrapper {
+    .text {
+      .buttons {
+        .videoButtonWrapper {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 510px) {
+  .wrapper {
+    .text {
+      .buttons {
+        margin-top: 70%;
+        .githubWrapper {
+          display: none;
+        }
+      }
+    }
+    .teaser {
+      width: 100%;
+      top: 5%;
+      .teaserimg {
+        width: 100%;
+      }
+    }
+    .backLeftBottom {
+      display: none;
+    }
+  }
+}
+@media (max-width: 480px) {
+  .wrapper {
+    .text {
+      height: 70%;
+      .buttons {
+        bottom: 10px;
+        margin-top: unset;
+        z-index: 1;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        justify-content: center;
+      }
+    }
+    .teaser {
+      top: 14%;
+    }
+  }
+}

package/es/antv/Banner/Notification.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Link } from 'react-router-dom'; // @ts-ignore
+
+import styles from './Notification.module.less';
+var numberImages = ['https://gw.alipayobjects.com/zos/antfincdn/IqREAm36K7/1.png', 'https://gw.alipayobjects.com/zos/antfincdn/3fG1Iqjfnz/2.png'];
+
+var Notification = function Notification(_ref) {
+  var _ref$index = _ref.index,
+      index = _ref$index === void 0 ? 0 : _ref$index,
+      type = _ref.type,
+      title = _ref.title,
+      date = _ref.date,
+      _ref$link = _ref.link,
+      link = _ref$link === void 0 ? '' : _ref$link;
+  var children = /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement("img", {
+    className: styles.number,
+    src: numberImages[index],
+    alt: index.toString()
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement("p", {
+    className: styles.description
+  }, type, " \u2027 ", title), /*#__PURE__*/React.createElement("p", {
+    className: styles.date
+  }, date)));
+
+  if (link.startsWith('http')) {
+    return /*#__PURE__*/React.createElement("a", {
+      href: link,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: styles.notification
+    }, children);
+  }
+
+  return /*#__PURE__*/React.createElement(Link, {
+    to: link,
+    className: styles.notification
+  }, children);
+};
+
+export default Notification;

package/es/antv/Banner/Notification.module.less

@@ -0,0 +1,108 @@
+.notification {
+  width: 50%;
+  margin-right: 2%;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  .container {
+    height: 44px;
+    display: flex;
+    .number {
+      height: 100%;
+      width: 44px;
+    }
+    .content {
+      padding-left: 20px;
+      color: rgba(49, 70, 89, 1);
+      text-align: left;
+      .description {
+        top: 0;
+        font-size: 1.14em;
+        margin-bottom: 0;
+        transition: all 0.3s;
+      }
+      .date {
+        color: rgba(216, 203, 249, 1);
+        bottom: 0;
+        font-size: 1em;
+        margin-top: 4px;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &:hover .description {
+    color: rgba(89, 126, 247, 1);
+  }
+}
+
+@media (max-width: 900px) {
+  .notification {
+    position: absolute;
+    width: 100%;
+
+    &:nth-child(1) {
+      animation: showAndHide0 6s infinite;
+    }
+
+    &:nth-child(2) {
+      top: 44px;
+      animation: showAndHide1 6s infinite;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .notification {
+    width: 100%;
+  }
+}
+
+@keyframes showAndHide0 {
+  0% {
+    opacity: 1;
+    top: 0px;
+  }
+  33.3% {
+    opacity: 1;
+    top: 0px;
+  }
+  50% {
+    opacity: 0;
+    top: -30px;
+  }
+  83.3% {
+    opacity: 0;
+    top: 30px;
+  }
+  100% {
+    opacity: 1;
+    top: 0px;
+  }
+}
+
+/* Standard syntax */
+@keyframes showAndHide1 {
+  0% {
+    opacity: 0;
+    top: 30px;
+  }
+  33.3% {
+    opacity: 0;
+    top: 30px;
+  }
+  50% {
+    opacity: 1;
+    top: 0px;
+  }
+  83.3% {
+    opacity: 1;
+    top: 0px;
+  }
+  100% {
+    opacity: 0;
+    top: -30px;
+  }
+}

package/es/antv/Banner/index.js

@@ -0,0 +1,115 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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); }
+
+/* eslint-disable react/no-array-index-key */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useContext } from 'react';
+import GitHubButton from 'react-github-button';
+import gh from 'parse-github-url';
+import classNames from 'classnames';
+import { context } from 'dumi/theme'; // @ts-ignore
+
+import styles from './Banner.module.less';
+import Notification from './Notification';
+var backLeftBottom = 'https://gw.alipayobjects.com/zos/basement_prod/441d5eaf-e623-47cd-b9b9-2a581d9ce1e3.svg';
+
+var Banner = function Banner(_ref) {
+  var coverImage = _ref.coverImage,
+      title = _ref.title,
+      description = _ref.description,
+      notifications = _ref.notifications,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {} : _ref$style,
+      className = _ref.className,
+      _ref$showGithubStars = _ref.showGithubStars,
+      showGithubStars = _ref$showGithubStars === void 0 ? true : _ref$showGithubStars,
+      _ref$buttons = _ref.buttons,
+      buttons = _ref$buttons === void 0 ? [] : _ref$buttons;
+
+  var _useContext = useContext(context),
+      repository = _useContext.config.repository;
+
+  var githubUrl = repository.url;
+  var notificationsNode = notifications.slice(0, 2).map(function (notification, i) {
+    return /*#__PURE__*/React.createElement(Notification, _extends({
+      index: i,
+      key: i
+    }, notification));
+  });
+  var renderButtons = buttons.map(function (button, i) {
+    var ButtonLink = 'a';
+    var buttonProps = {};
+
+    if (button.link.startsWith('http')) {
+      buttonProps.target = '_blank';
+      buttonProps.rel = 'noopener noreferrer';
+    }
+
+    if (ButtonLink === 'a') {
+      buttonProps.href = button.link;
+    } else {
+      buttonProps.to = button.link;
+    }
+
+    var _button$shape = button.shape,
+        shape = _button$shape === void 0 ? 'round' : _button$shape;
+    return /*#__PURE__*/React.createElement(ButtonLink, _extends({}, buttonProps, {
+      className: classNames(styles.buttonLink, styles[button.type || ''], button.type === 'primary' ? 'primary-button' : 'common-button'),
+      key: i,
+      style: _objectSpread({
+        borderRadius: shape === 'round' ? '1000px' : '4px'
+      }, button.style)
+    }), /*#__PURE__*/React.createElement("span", {
+      className: styles.button
+    }, button.text));
+  });
+
+  if (showGithubStars) {
+    var githubObj = gh(githubUrl);
+
+    if (githubObj && githubObj.owner && githubObj.name) {
+      renderButtons.push( /*#__PURE__*/React.createElement("div", {
+        key: "github",
+        className: styles.githubWrapper
+      }, /*#__PURE__*/React.createElement(GitHubButton, {
+        type: "stargazers",
+        size: "large",
+        namespace: githubObj.owner,
+        repo: githubObj.name
+      })));
+    }
+  }
+
+  return /*#__PURE__*/React.createElement("section", {
+    className: classNames(styles.wrapper, className),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.text
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.title, 'banner-title')
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.description, 'banner-description')
+  }, description), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.buttons, 'banner-buttons')
+  }, renderButtons)), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.notifications, 'notifications')
+  }, notificationsNode), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.teaser, 'teaser')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.teaserimg, 'teaser-img')
+  }, coverImage)), /*#__PURE__*/React.createElement("img", {
+    className: styles.backLeftBottom,
+    src: backLeftBottom,
+    alt: "back"
+  })));
+};
+
+export default Banner;