@antv/dumi-theme-antv 0.1.0

package/src/components/SearchBar.tsx

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,379 @@
+@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

@@ -0,0 +1,148 @@
+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

@@ -0,0 +1,18 @@
+@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

@@ -0,0 +1,20 @@
+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;