@antv/dumi-theme-antv 0.1.0

package/src/layout.tsx

@@ -0,0 +1,225 @@
+/* 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);
+  console.log('Context', Context, 'calculate meta', meta);
+  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

@@ -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);
+    }
+  }
+}