feat:add dumi-theme-graphin

packages/dumi-theme-graphin/src/components/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;
+  }
+}

packages/dumi-theme-graphin/src/components/Banner/Notification.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+// @ts-ignore
+import styles from './Notification.module.less';
+
+export interface NotificationProps {
+  index?: number;
+  type: string;
+  title: string;
+  date: string;
+  link: string;
+}
+
+const numberImages = [
+  'https://gw.alipayobjects.com/zos/antfincdn/IqREAm36K7/1.png',
+  'https://gw.alipayobjects.com/zos/antfincdn/3fG1Iqjfnz/2.png',
+];
+
+const Notification: React.FC<NotificationProps> = ({ index = 0, type, title, date, link = '' }) => {
+  const children = (
+    <div className={styles.container}>
+      <img className={styles.number} src={numberImages[index]} alt={index.toString()} />
+      <div className={styles.content}>
+        <p className={styles.description}>
+          {type} ‧ {title}
+        </p>
+        <p className={styles.date}>{date}</p>
+      </div>
+    </div>
+  );
+  if (link.startsWith('http')) {
+    return (
+      <a href={link} target="_blank" rel="noopener noreferrer" className={styles.notification}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <Link to={link} className={styles.notification}>
+      {children}
+    </Link>
+  );
+};
+
+export default Notification;

packages/dumi-theme-graphin/src/components/Banner/index.tsx

@@ -0,0 +1,116 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+
+import GitHubButton from 'react-github-button';
+import gh from 'parse-github-url';
+import classNames from 'classnames';
+
+import 'video-react/dist/video-react.css';
+// @ts-ignore
+import styles from './Banner.module.less';
+import Notification, { NotificationProps } from './Notification';
+
+type BannerButtonShape = 'round' | 'square';
+
+interface BannerButton {
+  text: string;
+  link: string;
+  style?: React.CSSProperties;
+  type?: string;
+  shape?: BannerButtonShape;
+}
+
+interface BannerProps {
+  coverImage?: React.ReactNode;
+  title: string;
+  description: string;
+  notifications?: NotificationProps[];
+  style?: React.CSSProperties;
+  className?: string;
+  video?: string;
+  showGithubStars?: boolean;
+  buttons?: BannerButton[];
+  onCloseVideo?: () => void;
+  onPlayVideo?: () => void;
+}
+
+const backLeftBottom = 'https://gw.alipayobjects.com/zos/basement_prod/441d5eaf-e623-47cd-b9b9-2a581d9ce1e3.svg';
+
+const Banner: React.FC<BannerProps> = ({
+  coverImage,
+  title,
+  description,
+  notifications,
+  style = {},
+  className,
+  showGithubStars = true,
+  buttons = [],
+}) => {
+  const githubUrl = '';
+
+  const notificationsNode = notifications
+    .slice(0, 2)
+    .map((notification, i) => <Notification index={i} key={i} {...notification} />);
+
+  const renderButtons = buttons.map((button: BannerButton, i) => {
+    const ButtonLink = 'a';
+    const buttonProps = {} as any;
+    if (button.link.startsWith('http')) {
+      buttonProps.target = '_blank';
+      buttonProps.rel = 'noopener noreferrer';
+    }
+    if (ButtonLink === 'a') {
+      buttonProps.href = button.link;
+    } else {
+      buttonProps.to = button.link;
+    }
+    const { shape = 'round' } = button;
+    return (
+      <ButtonLink
+        {...buttonProps}
+        className={classNames(
+          styles.buttonLink,
+          styles[button.type || ''],
+          button.type === 'primary' ? 'primary-button' : 'common-button',
+        )}
+        key={i}
+        style={{
+          borderRadius: shape === 'round' ? '1000px' : '4px',
+          ...button.style,
+        }}
+      >
+        <span className={styles.button}>{button.text}</span>
+      </ButtonLink>
+    );
+  });
+
+  if (showGithubStars) {
+    const githubObj = gh(githubUrl);
+    if (githubObj && githubObj.owner && githubObj.name) {
+      renderButtons.push(
+        <div key="github" className={styles.githubWrapper}>
+          <GitHubButton type="stargazers" size="large" namespace={githubObj.owner} repo={githubObj.name} />
+        </div>,
+      );
+    }
+  }
+
+  return (
+    <section className={classNames(styles.wrapper, className)} style={style}>
+      <div className={styles.content}>
+        <div className={styles.text}>
+          <div className={classNames(styles.title, 'banner-title')}>{title}</div>
+          <p className={classNames(styles.description, 'banner-description')}>{description}</p>
+          <div className={classNames(styles.buttons, 'banner-buttons')}>{renderButtons}</div>
+        </div>
+        <div className={classNames(styles.notifications, 'notifications')}>{notificationsNode}</div>
+        <div className={classNames(styles.teaser, 'teaser')}>
+          <div className={classNames(styles.teaserimg, 'teaser-img')}>{coverImage}</div>
+        </div>
+        <img className={styles.backLeftBottom} src={backLeftBottom} alt="back" />
+      </div>
+    </section>
+  );
+};
+
+export default Banner;