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

package/src/components/SearchBar.tsx

@@ -1,68 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { useSearch, AnchorLink } from 'dumi/theme';
-import './SearchBar.less';
-
-export const highlight = (key: string, title: string) => {
-  const index = title.toLowerCase().indexOf(key.toLowerCase());
-  const l = key.length;
-  return (
-    <>
-      {title.substring(0, index)}
-      <span className="__dumi-default-search-highlight">{title.substring(index, index + l)}</span>
-      {title.substring(index + l, title.length)}
-    </>
-  );
-};
-
-export default () => {
-  const [keywords, setKeywords] = useState<string>('');
-  const [items, setItems] = useState([]);
-  const input = useRef<HTMLInputElement>();
-  const result = useSearch(keywords);
-
-  const emptySvg = (
-    <svg
-      className="__dumi-default-search-empty"
-      viewBox="0 0 1024 1024"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      p-id="2347"
-      width="32"
-      height="32"
-    >
-      <path d="M855.6 427.2H168.5c-12.7 0-24.4 6.9-30.6 18L4.4 684.7C1.5 689.9 0 695.8 0 701.8v287.1c0 19.4 15.7 35.1 35.1 35.1H989c19.4 0 35.1-15.7 35.1-35.1V701.8c0-6-1.5-11.8-4.4-17.1L886.2 445.2c-6.2-11.1-17.9-18-30.6-18zM673.4 695.6c-16.5 0-30.8 11.5-34.3 27.7-12.7 58.5-64.8 102.3-127.2 102.3s-114.5-43.8-127.2-102.3c-3.5-16.1-17.8-27.7-34.3-27.7H119c-26.4 0-43.3-28-31.1-51.4l81.7-155.8c6.1-11.6 18-18.8 31.1-18.8h622.4c13 0 25 7.2 31.1 18.8l81.7 155.8c12.2 23.4-4.7 51.4-31.1 51.4H673.4zM819.9 209.5c-1-1.8-2.1-3.7-3.2-5.5-9.8-16.6-31.1-22.2-47.8-12.6L648.5 261c-17 9.8-22.7 31.6-12.6 48.4 0.9 1.4 1.7 2.9 2.5 4.4 9.5 17 31.2 22.8 48 13L807 257.3c16.7-9.7 22.4-31 12.9-47.8zM375.4 261.1L255 191.6c-16.7-9.6-38-4-47.8 12.6-1.1 1.8-2.1 3.6-3.2 5.5-9.5 16.8-3.8 38.1 12.9 47.8L337.3 327c16.9 9.7 38.6 4 48-13.1 0.8-1.5 1.7-2.9 2.5-4.4 10.2-16.8 4.5-38.6-12.4-48.4zM512 239.3h2.5c19.5 0.3 35.5-15.5 35.5-35.1v-139c0-19.3-15.6-34.9-34.8-35.1h-6.4C489.6 30.3 474 46 474 65.2v139c0 19.5 15.9 35.4 35.5 35.1h2.5z"></path>
-    </svg>
-  );
-
-  useEffect(() => {
-    if (Array.isArray(result)) {
-      setItems(result);
-    } else if (typeof result === 'function') {
-      result(`.${input.current.className}`);
-    }
-  }, [result]);
-
-  return (
-    <div className="__dumi-default-search">
-      <input
-        className="__dumi-default-search-input"
-        type="search"
-        ref={input}
-        {...(Array.isArray(result)
-          ? { value: keywords, onChange: ev => setKeywords(ev.target.value) }
-          : {})}
-      />
-      <ul>
-        {items.length > 0 && items.map(meta => (
-          <li key={meta.path} onClick={() => setKeywords('')}>
-            <AnchorLink to={meta.path}>
-              {meta.parent?.title && <span>{meta.parent.title}</span>}
-              {highlight(keywords, meta.title)}
-            </AnchorLink>
-          </li>
-        ))}
-        {items.length === 0 && keywords && <li style={{ textAlign: 'center' }}>{emptySvg}</li>}
-      </ul>
-    </div>
-  );
-};

package/src/components/SideMenu.less

@@ -1,379 +0,0 @@
-@import (reference) '../style/variables.less';
-
-.@{prefix}-menu {
-  position: fixed;
-  z-index: 100;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: @s-menu-width;
-  background-color: #f2f5fa;
-  box-sizing: border-box;
-  transition: left 0.3s;
-
-  &[data-hidden] {
-    display: none;
-  }
-
-  @media @mobile {
-    left: -@s-menu-mobile-width;
-    top: @s-mobile-nav-height;
-    display: block !important;
-    width: @s-menu-mobile-width;
-    background-color: #fff;
-
-    &[data-mobile-show] {
-      left: 0;
-    }
-
-    [data-prefers-color=dark] & {
-      background-color: @c-bg-dark;
-    }
-  }
-
-  // shadow
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    display: block;
-    width: 20px;
-    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
-    pointer-events: none;
-
-    // use border on mobile devices
-    @media @mobile {
-      width: 1px;
-      background: @c-border;
-    }
-  }
-
-  &-header {
-    position: relative;
-    padding-top: 40px;
-    text-align: center;
-    border-bottom: 1px solid @c-border;
-
-    [data-prefers-color=dark] & {
-      border-color: @c-border-dark;
-    }
-
-    @media @mobile {
-      display: none;
-    }
-
-    .@{prefix}-menu-logo {
-      display: inline-block;
-      width: 66px;
-      height: 65px;
-      background: url(@img-logo) no-repeat 0 / contain;
-    }
-
-    h1 {
-      margin: 10px 0 0;
-      color: @c-heading;
-      font-weight: 500;
-      line-height: 1.40625;
-    }
-
-    p {
-      margin: 0 0 5px;
-      color: lighten(@c-secondary, 10%);
-
-      // badges
-      > object[data^='https://img.shields.io'] {
-        max-height: 20px;
-      }
-
-      + p {
-        margin-bottom: 10px;
-      }
-    }
-  }
-
-  &-doc-locale {
-    padding: 16px 0;
-    text-align: center;
-    border-bottom: 1px solid @c-border;
-    display: flex;
-    justify-content: space-evenly;
-
-    [data-prefers-color=dark] & {
-      border-color: @c-border-dark;
-    }
-
-    [data-mode=doc][data-mobile-show=true] & {
-      display: grid;
-    }
-
-    &:empty {
-      display: none;
-    }
-  }
-
-  &-inner {
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    overscroll-behavior: contain;
-
-    [data-prefers-color=dark] & {
-      background-color: #262626;
-    }
-
-    // common list styles
-    ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      font-size: 16px;
-
-      li {
-        color: @c-text;
-        a,
-        > span {
-          position: relative;
-          display: block;
-          padding-right: 24px;
-          color: @c-heading;
-          line-height: 2.4;
-          text-decoration: none;
-          outline: none;
-          transition: color 0.3s, background 0.3s;
-
-          [data-prefers-color=dark] & {
-            color: @c-heading-dark;
-          }
-
-          span {
-            display: block;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          }
-
-          &:hover,
-          &.active {
-            color: @c-primary;
-
-            [data-prefers-color=dark] & {
-              color: @c-primary-dark;
-            }
-          }
-
-          &::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: -10px;
-            margin-top: -2.5px;
-            display: inline-block;
-            width: 5px;
-            height: 5px;
-            background-color: @c-primary;
-            border-radius: 50%;
-            opacity: 0;
-            transition: transform 0.2s, opacity 0.2s;
-            transform: scale(0) translateX(-10px);
-          }
-        }
-
-        &.active a,
-        a.active {
-          &::before {
-            opacity: 1;
-            transform: scale(1) translateX(0);
-          }
-        }
-
-        // level larger, offset larger, font size smaller
-        ul {
-          font-size: 0.9em;
-          padding-left: 1em;
-        }
-      }
-    }
-
-    // 1-level list styles
-    > ul {
-      > li > a {
-        line-height: 2.875;
-
-        &:not([href]) {
-          padding-top: 24px;
-          line-height: 1;
-          font-weight: 500;
-          color: @c-heading !important;
-          background: transparent !important;
-          cursor: default;
-
-          [data-prefers-color=dark] & {
-            color: @c-heading-dark !important;
-          }
-        }
-      }
-
-      > li:first-child > a:not([href]) {
-        padding-top: 0;
-      }
-    }
-
-    // n-level list styles
-    > ul ul {
-      a {
-        color: @c-secondary;
-        [data-prefers-color=dark] & {
-          color: @c-secondary-dark;
-        }
-        &.active {
-          color: @c-primary;
-          [data-prefers-color=dark] & {
-            color: @c-primary-dark;
-          }
-        }
-      }
-    }
-
-    .@{prefix}-menu-mobile-area {
-      display: none;
-      padding-bottom: 16px;
-      margin-bottom: 16px;
-      text-align: center;
-      border-bottom: 1px solid @c-border;
-
-      [data-prefers-color=dark] & {
-        border-color: @c-border-dark;
-      }
-
-      @media @mobile {
-        display: block;
-      }
-    }
-
-    // mobile nav list
-    .@{prefix}-menu-nav-list {
-      padding: 16px 0 0 0;
-
-      > li,
-      > li > a {
-        padding-right: 0;
-        line-height: 2.4;
-
-        ul {
-          padding-left: 0;
-
-          a {
-            padding-right: 0;
-            font-size: 90%;
-          }
-        }
-      }
-    }
-
-    // menu list
-    .@{prefix}-menu-list {
-      padding: 8px 0;
-      margin-bottom: 40px;
-
-      > li > a {
-        @c-active-bg: #e8ecf4;
-
-        padding-left: 28px;
-
-        &.active {
-          background: linear-gradient(to left, #e8ecf4, rgba(232, 236, 244, 0));
-
-          [data-prefers-color=dark] & {
-            background: linear-gradient(to left, #3d3d3e, rgba(255, 255, 255, 0.06));
-          }
-        }
-
-        ~ ul {
-          margin-top: 8px;
-          margin-left: 28px;
-        }
-
-        @media @mobile {
-          padding-left: 16px;
-
-          ~ ul {
-            margin-left: 16px;
-          }
-        }
-      }
-    }
-  }
-
-  &[data-mode='site'] {
-    &::after {
-      width: 1px;
-      background: @c-border;
-
-      [data-prefers-color=dark] & {
-        background: @c-border-dark;
-      }
-    }
-
-    .@{prefix}-menu-list {
-      padding: 0;
-
-      > li > a {
-        position: relative;
-
-        &::after {
-          content: '';
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          right: 0;
-          display: block;
-          width: 3px;
-          background-color: @c-primary;
-          visibility: hidden;
-          opacity: 0;
-          transition: all 0.3s;
-          border-radius: 1px;
-        }
-
-        &.active {
-          z-index: 1;
-          background: linear-gradient(to left, #f8faff, rgba(248, 250, 255, 0));
-
-          [data-prefers-color=dark] & {
-            background: linear-gradient(to left, #3d3d3e, rgba(255, 255, 255, 0.06));
-          }
-          &::after {
-            opacity: 1;
-            visibility: visible;
-          }
-        }
-      }
-    }
-
-    @media @desktop {
-      top: @s-nav-height;
-      width: @s-site-menu-width;
-      padding-top: 50px;
-      background: transparent;
-
-      [data-prefers-color=dark] & {
-        background: @c-light-bg-dark;
-      }
-
-      .@{prefix}-menu-nav,
-      .@{prefix}-menu-header {
-        display: none;
-      }
-
-      .@{prefix}-menu-list > li > a {
-        padding-left: 58px;
-
-        ~ ul {
-          margin-left: 58px;
-        }
-      }
-    }
-  }
-}

package/src/components/SideMenu.tsx

@@ -1,148 +0,0 @@
-import type { FC } from 'react';
-import React, { useContext } from 'react';
-import { context, Link, NavLink } from 'dumi/theme';
-import LocaleSelect from './LocaleSelect';
-import SlugList from './SlugList';
-import './SideMenu.less';
-
-interface INavbarProps {
-  mobileMenuCollapsed: boolean;
-  location: any;
-  darkPrefix?: React.ReactNode;
-}
-
-const SideMenu: FC<INavbarProps> = ({ mobileMenuCollapsed, location, darkPrefix }) => {
-  const {
-    config: {
-      logo,
-      title,
-      description,
-      mode,
-      repository: { url: repoUrl },
-    },
-    menu,
-    nav: navItems,
-    base,
-    meta,
-  } = useContext(context);
-  const isHiddenMenus =
-    Boolean((meta.hero || meta.features || meta.gapless) && mode === 'site') ||
-    meta.sidemenu === false ||
-    undefined;
-
-  return (
-    <div
-      className="__dumi-default-menu"
-      data-mode={mode}
-      data-hidden={isHiddenMenus}
-      data-mobile-show={!mobileMenuCollapsed || undefined}
-    >
-      <div className="__dumi-default-menu-inner">
-        <div className="__dumi-default-menu-header">
-          <Link
-            to={base}
-            className="__dumi-default-menu-logo"
-            style={{
-              backgroundImage: logo && `url('${logo}')`,
-            }}
-          />
-          <h1>{title}</h1>
-          <p>{description}</p>
-          {/* github star badge */}
-          {/github\.com/.test(repoUrl) && mode === 'doc' && (
-            <p>
-              <object
-                type="image/svg+xml"
-                data={`https://img.shields.io/github/stars${repoUrl.match(/((\/[^\/]+){2})$/)[1]
-                  }?style=social`}
-              />
-            </p>
-          )}
-        </div>
-        {/* mobile nav list */}
-
-        <div className="__dumi-default-menu-mobile-area">
-          {!!navItems.length && (
-            <ul className="__dumi-default-menu-nav-list">
-              {navItems.map(nav => {
-                const child = Boolean(nav.children?.length) && (
-                  <ul>
-                    {nav.children.map(item => (
-                      <li key={item.path || item.title}>
-                        <NavLink to={item.path}>{item.title}</NavLink>
-                      </li>
-                    ))}
-                  </ul>
-                );
-
-                return (
-                  <li key={nav.path || nav.title}>
-                    {nav.path ? <NavLink to={nav.path}>{nav.title}</NavLink> : nav.title}
-                    {child}
-                  </li>
-                );
-              })}
-            </ul>
-          )}
-          {/* site mode locale select */}
-          <LocaleSelect location={location} />
-          {darkPrefix}
-        </div>
-        {/* menu list */}
-        <ul className="__dumi-default-menu-list">
-          {!isHiddenMenus &&
-            menu.map(item => {
-              // always use meta from routes to reduce menu data size
-              const hasSlugs = Boolean(meta.slugs?.length);
-              const hasChildren = item.children && Boolean(item.children.length);
-              const show1LevelSlugs =
-                meta.toc === 'menu' && !hasChildren && hasSlugs && item.path === location.pathname.replace(/([^^])\/$/, '$1');
-              const menuPaths = hasChildren
-                ? item.children.map(i => i.path)
-                : [
-                    item.path,
-                    // handle menu group which has no index route and no valid children
-                    location.pathname.startsWith(`${item.path}/`) && meta.title === item.title
-                      ? location.pathname
-                      : null,
-                  ];
-
-              return (
-                <li key={item.path || item.title}>
-                  <NavLink
-                    to={item.path}
-                    isActive={() => menuPaths.includes(location.pathname)}
-                  >
-                    {item.title}
-                  </NavLink>
-                  {/* group children */}
-                  {Boolean(item.children && item.children.length) && (
-                    <ul>
-                      {item.children.map(child => (
-                        <li key={child.path}>
-                          <NavLink to={child.path} exact>
-                            <span>{child.title}</span>
-                          </NavLink>
-                          {/* group children slugs */}
-                          {Boolean(
-                            meta.toc === 'menu' &&
-                            typeof window !== 'undefined' &&
-                            child.path === location.pathname &&
-                            hasSlugs,
-                          ) && <SlugList slugs={meta.slugs} />}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                  {/* group slugs */}
-                  {show1LevelSlugs && <SlugList slugs={meta.slugs} />}
-                </li>
-              );
-            })}
-        </ul>
-      </div>
-    </div>
-  );
-};
-
-export default SideMenu;

package/src/components/SlugList.less

@@ -1,18 +0,0 @@
-@import (reference) '../style/variables.less';
-
-ul[role='slug-list'] {
-  &:empty {
-    margin: 0 !important;
-    padding: 0 !important;
-  }
-
-  li {
-    > a.active {
-      color: darken(@c-primary, 2%);
-    }
-
-    &[data-depth='3'] {
-      padding-left: 12px;
-    }
-  }
-}

package/src/components/SlugList.tsx

@@ -1,20 +0,0 @@
-import type { FC } from 'react';
-import React from 'react';
-import { AnchorLink } from 'dumi/theme';
-import './SlugList.less';
-
-const SlugsList: FC<{ slugs: any; className?: string }> = ({ slugs, ...props }) => (
-  <ul role="slug-list" {...props}>
-    {slugs
-      .filter(({ depth }) => depth > 1 && depth < 4)
-      .map(slug => (
-        <li key={slug.heading} title={slug.value} data-depth={slug.depth}>
-          <AnchorLink to={`#${slug.heading}`}>
-            <span>{slug.value}</span>
-          </AnchorLink>
-        </li>
-      ))}
-  </ul>
-);
-
-export default SlugsList;

package/src/declaration.d.ts

@@ -1 +0,0 @@
-declare module "*.module.less";