@antv/dumi-theme-antv 0.2.2 → 0.3.0-beta.1

package/src/layout.tsx

@@ -1,225 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable react/no-danger */
-import type { IRouteComponentProps } from '@umijs/types';
-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,
-    },
-  });
-
-
-const isEmpty = obj => {
-  return Object.keys(obj).length === 0;
-};
-
-const processRedirect = (context, location) => {
-  const { pathname } = location;
-  const { meta, routes } = context;
-
-  const isEmptyMeta = isEmpty(meta);
-  let matchRoute = { meta: {} };
-  const needRedirectPath = ['/zh', '/zh/', '/zh-CN', '/zh-CN/', '/en', '/en/', '/en-US', '/en-US/'];
-  const isInclude = needRedirectPath.some(item => item === pathname);
-  if (isEmptyMeta) {
-    if (isInclude) {
-      // 存在重定向需求
-      const isZh = pathname.slice(1, 3) === 'zh';
-      const isEn = pathname.slice(1, 3) === 'en';
-      if (isZh) {
-        matchRoute = routes.find(item => {
-          return item.path === '/';
-        });
-      }
-      if (isEn) {
-        matchRoute = routes.find(item => {
-          return item.path === '/en-US';
-        });
-      }
-    }
-  }
-
-  return {
-    meta: isEmptyMeta ? matchRoute.meta : meta,
-    isDirect: isInclude,
-  };
-};
-
-const Hero = hero => (
-  <div className="__dumi-default-layout-hero">
-    {hero.image && <img src={hero.image} alt="banner" />}
-    <h1>{hero.title}</h1>
-    <div dangerouslySetInnerHTML={{ __html: hero.desc }} />
-    {hero.actions &&
-      hero.actions.map(action => (
-        <Link to={action.link} key={action.text}>
-          <button type="button">{action.text}</button>
-        </Link>
-      ))}
-  </div>
-);
-
-const BannerPanel = banner => {
-  const { image, title, desc, actions, notifications } = banner;
-  const description = <div dangerouslySetInnerHTML={{ __html: desc }} />;
-  const coverImage = <img alt="graphin" style={{ width: '100%', marginTop: '20%' }} src={image} />;
-
-  return (
-    <Banner
-      coverImage={coverImage}
-      title={title}
-      // @ts-ignore
-      description={description}
-      notifications={notifications}
-      buttons={actions}
-      className="banner"
-    />
-  );
-};
-
-const Features = features => (
-  <div className="__dumi-default-layout-features">
-    {features.map(feat => (
-      <dl key={feat.title} style={{ backgroundImage: feat.icon ? `url(${feat.icon})` : undefined }}>
-        {feat.link ? (
-          <Link to={feat.link}>
-            <dt>{feat.title}</dt>
-          </Link>
-        ) : (
-          <dt>{feat.title}</dt>
-        )}
-        <dd dangerouslySetInnerHTML={{ __html: feat.desc }} />
-      </dl>
-    ))}
-  </div>
-);
-
-const Layout: React.FC<IRouteComponentProps> = ({ children, location }) => {
-  const Context = useContext(context);
-  const {
-    config: { mode, repository },
-    locale,
-  } = Context;
-
-  const { meta, isDirect } = processRedirect(Context, location);
-  const { url: repoUrl, branch, platform } = repository;
-  const [menuCollapsed, setMenuCollapsed] = useState<boolean>(true);
-  const isSiteMode = mode === 'site';
-  const showHero = isSiteMode && meta.hero;
-  const showBanner = isSiteMode && meta.banner;
-  const showCases = isSiteMode && meta.cases;
-  const showFeatures = isSiteMode && meta.features;
-  const showIdeas = isSiteMode && meta.ideas;
-  const showSideMenu = meta.sidemenu !== false && !showHero && !showBanner && !showFeatures && !meta.gapless;
-  const showSlugs =
-    !showHero &&
-    !showBanner &&
-    !showFeatures &&
-    Boolean(meta.slugs?.length) &&
-    (meta.toc === 'content' || meta.toc === undefined) &&
-    !meta.gapless;
-  const isCN = /^zh|cn$/i.test(locale);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const updatedTime: any = new Date(meta.updatedTime).toLocaleString([], { hour12: false });
-  const repoPlatform =
-    { github: 'GitHub', gitlab: 'GitLab' }[(repoUrl || '').match(/(github|gitlab)/)?.[1] || 'nothing'] || platform;
-  // 等dumi最新版发布后解决路由匹配问题
-  if (isEmpty(meta) && !isDirect) {
-    return (
-      <div>
-        <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={() => {
-            if (menuCollapsed) return;
-            setMenuCollapsed(true);
-          }}
-        >
-          <div style={{ height: '60px' }} />
-          <Navbar
-            location={location}
-            navPrefix={<SearchBar />}
-            onMobileMenuClick={ev => {
-              setMenuCollapsed(val => !val);
-              ev.stopPropagation();
-            }}
-          />
-          <NotFoundPage />
-      
-          <Footer location={window.location} githubUrl={repoUrl} rootDomain="https://antv.vision" />
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={`__dumi-default-layout ${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={() => {
-        if (menuCollapsed) return;
-        setMenuCollapsed(true);
-      }}
-    >
-      <Navbar
-        location={location}
-        navPrefix={<SearchBar />}
-        onMobileMenuClick={ev => {
-          setMenuCollapsed(val => !val);
-          ev.stopPropagation();
-        }}
-      />
-      {showSideMenu && <SideMenu mobileMenuCollapsed={menuCollapsed} location={location} />}
-      {showSlugs && <SlugList slugs={meta.slugs} className="__dumi-default-layout-toc" />}
-      {showBanner && BannerPanel(meta.banner)}
-      {showHero && Hero(meta.hero)}
-      {showFeatures && Features(meta.features)}
-      {showIdeas && <Ideas features={meta.ideas} style={{ width: '100%' }} />}
-      {showCases && <Cases cases={meta.cases} className="graph-cases" />}
-      <div className="__dumi-default-layout-content">
-        {children}
-        {showSideMenu && (
-          <div className="__dumi-default-layout-footer-meta">
-            {repoPlatform && (
-              <Link to={`${repoUrl}/edit/${branch}/${meta.filePath}`}>
-                {isCN ? `在 ${repoPlatform} 上编辑此页` : `Edit this doc on ${repoPlatform}`}
-              </Link>
-            )}
-            <span data-updated-text={isCN ? '最后更新时间：' : 'Last update: '}>{updatedTime}</span>
-          </div>
-        )}
-        {!showSideMenu && <Footer location={window.location} githubUrl={repoUrl} rootDomain="https://antv.vision" />}
-      </div>
-    </div>
-  );
-};
-
-export default Layout;

package/src/style/layout.less

@@ -1,402 +0,0 @@
-@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);
-    }
-  }
-}