@umijs/plugin-docs 4.0.0-beta.18 → 4.0.0-rc.1

package/client/theme-doc/Github.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useThemeContext } from './context';
+// @ts-ignore
+import GithubIcon from './icons/github.svg';
+
+export default () => {
+  const ctx = useThemeContext();
+
+  if (!ctx?.themeConfig.github) {
+    return null;
+  }
+
+  return (
+    <a href={ctx.themeConfig.github}>
+      <img className="dark:invert" src={GithubIcon} alt="Github" />
+    </a>
+  );
+};

package/client/theme-doc/Head.tsx

@@ -0,0 +1,72 @@
+import cx from 'classnames';
+import React from 'react';
+import Github from './Github';
+import LangSwitch from './LangSwitch';
+import Logo from './Logo';
+import NavBar from './NavBar';
+import Search from './Search';
+import ThemeSwitch from './ThemeSwitch';
+
+interface HeadProps {
+  isMenuOpened: boolean;
+  setMenuOpened: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export default (props: HeadProps) => {
+  return (
+    <div
+      className="w-full flex flex-row items-center justify-between
+      border-b-gray-100 border-b-2 pt-4 pb-4 px-8 dark:border-b-gray-800"
+    >
+      <Logo />
+      <div className="flex flex-row items-center">
+        <Search />
+        <HamburgerButton {...props} />
+        <div className="hidden lg:block">
+          <NavBar />
+        </div>
+        <div className="ml-4 hidden lg:block">
+          <LangSwitch />
+        </div>
+        <div className="ml-4 hidden lg:block">
+          <ThemeSwitch />
+        </div>
+        <div className="ml-4 hidden lg:block">
+          <Github />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface HamburgerButtonProps {
+  isMenuOpened: boolean;
+  setMenuOpened: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+function HamburgerButton(props: HamburgerButtonProps) {
+  const barClass =
+    'block absolute h-0.5 w-5 bg-current transform dark:bg-white' +
+    ' transition duration-500 ease-in-out';
+
+  return (
+    <div
+      className="relative py-3 sm:max-w-xl mx-auto mx-5 lg:hidden"
+      onClick={() => props.setMenuOpened((o) => !o)}
+    >
+      <span
+        className={cx(
+          barClass,
+          props.isMenuOpened ? 'rotate-45 ' : '-translate-y-1.5',
+        )}
+      />
+      <span className={cx(barClass, props.isMenuOpened && 'opacity-0')} />
+      <span
+        className={cx(
+          barClass,
+          props.isMenuOpened ? '-rotate-45' : 'translate-y-1.5',
+        )}
+      />
+    </div>
+  );
+}

package/client/theme-doc/LangSwitch.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import useLanguage from './useLanguage';
+
+export default () => {
+  const { currentLanguage, languages, switchLanguage } = useLanguage();
+  const [isExpanded, setExpanded] = useState(false);
+
+  if (!currentLanguage) {
+    return null;
+  }
+
+  function handleClick() {
+    if (!currentLanguage) return;
+    if (languages.length === 2) {
+      switchLanguage(
+        languages[0].locale === currentLanguage.locale
+          ? languages[1].locale
+          : languages[0].locale,
+      );
+      return;
+    }
+    setExpanded((e) => !e);
+  }
+
+  return (
+    <div>
+      <div
+        className="w-24 rounded-lg overflow-hidden cursor-pointer border
+       border-white hover:border-gray-100 dark:border-gray-800"
+        onClick={handleClick}
+      >
+        <p className="px-2 py-1 dark:text-white">{currentLanguage.text}</p>
+      </div>
+      <div
+        className={
+          'absolute transition-all duration-300 bottom-[-12] w-24 rounded-lg' +
+          ' cursor-pointer shadow overflow-hidden ' +
+          (isExpanded ? ` max-h-${(languages.length - 1) * 12}` : ' max-h-0 ')
+        }
+      >
+        {languages
+          .filter((l) => l.locale !== currentLanguage.locale)
+          .map((lang) => (
+            <p
+              onClick={() => switchLanguage(lang.locale)}
+              key={lang.locale}
+              className="p-2 bg-white dark:bg-gray-700 dark:text-white hover:bg-gray-50 transition duration-300"
+            >
+              {lang.text}
+            </p>
+          ))}
+      </div>
+    </div>
+  );
+};

package/client/theme-doc/Layout.tsx

@@ -0,0 +1,79 @@
+import cx from 'classnames';
+import React, { Fragment, useState } from 'react';
+import Announcement from './components/Announcement';
+import { ThemeContext } from './context';
+import Head from './Head';
+import Sidebar from './Sidebar';
+import Toc from './Toc';
+
+export default (props: any) => {
+  const [isMenuOpened, setIsMenuOpened] = useState(false);
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        appData: props.appData,
+        components: props.components,
+        themeConfig: props.themeConfig,
+        location: props.location,
+      }}
+    >
+      <div className="flex flex-col dark:bg-gray-900 min-h-screen transition-all">
+        <div
+          className="z-30 sticky top-0 dark:before:bg-gray-800 before:bg-white before:bg-opacity-[.85]
+           before:backdrop-blur-md before:absolute before:block dark:before:bg-opacity-[.85]
+           before:w-full before:h-full before:z-[-1]"
+        >
+          <Announcement />
+          <Head setMenuOpened={setIsMenuOpened} isMenuOpened={isMenuOpened} />
+        </div>
+
+        {window.location.pathname === '/' ? (
+          <div>{props.children}</div>
+        ) : (
+          <Fragment>
+            <div className="w-full flex flex-row justify-center overflow-x-hidden">
+              <div className="container flex flex-row justify-center">
+                <div className="w-full lg:w-1/2 px-4 lg:px-0 m-8 z-20 lg:py-12">
+                  <article className="flex-1">{props.children}</article>
+                </div>
+              </div>
+            </div>
+
+            <div
+              className="fixed left-0 top-0 w-1/4 flex flex-row
+          justify-center h-screen z-10 pt-20"
+            >
+              <div className="container flex flex-row justify-end">
+                <div className="hidden lg:block">
+                  <Sidebar />
+                </div>
+              </div>
+            </div>
+
+            <div
+              className="fixed right-0 top-0 w-1/4 flex flex-row
+           justify-center h-screen z-10 pt-20 hidden lg:block"
+            >
+              <div className="container flex flex-row justify-start">
+                <div className="w-2/3 top-32">
+                  <Toc />
+                </div>
+              </div>
+            </div>
+          </Fragment>
+        )}
+      </div>
+
+      <div
+        className={cx(
+          'fixed top-12 w-screen bg-white z-20 dark:bg-gray-800',
+          'overflow-hidden transition-all duration-500',
+          isMenuOpened ? 'max-h-screen' : 'max-h-0',
+        )}
+      >
+        <Sidebar setMenuOpened={setIsMenuOpened} />
+      </div>
+    </ThemeContext.Provider>
+  );
+};

package/client/theme-doc/Logo.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useThemeContext } from './context';
+
+export default () => {
+  const { themeConfig } = useThemeContext()!;
+  // @ts-ignore
+  const { logo } = themeConfig;
+  return (
+    <a href="/">
+      <div className="flex flex-row items-center">
+        <img src={logo} className="w-8 h-8" alt="logo" />
+        <div className="text-xl font-extrabold ml-2 dark:text-white">
+          {themeConfig.title}
+        </div>
+      </div>
+    </a>
+  );
+};

package/client/theme-doc/NavBar.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useThemeContext } from './context';
+import useLanguage from './useLanguage';
+
+export default () => {
+  const { components, themeConfig } = useThemeContext()!;
+  const lang = useLanguage();
+  return (
+    <ul className="flex">
+      {themeConfig.navs.map((nav: any) => {
+        return (
+          <li key={nav.path} className="ml-4 dark:text-white">
+            <components.Link
+              to={
+                lang.isFromPath
+                  ? lang.currentLanguage?.locale + nav.path
+                  : nav.path
+              }
+            >
+              {lang.render(nav.title)}
+            </components.Link>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};

package/client/theme-doc/Search.tsx

@@ -0,0 +1,178 @@
+import cx from 'classnames';
+import key from 'keymaster';
+import React, { Fragment, useEffect, useState } from 'react';
+import { useThemeContext } from './context';
+import useLanguage from './useLanguage';
+
+export default () => {
+  const { render } = useLanguage();
+  const [isFocused, setIsFocused] = useState(false);
+  const [keyword, setKeyword] = useState('');
+
+  const { appData, themeConfig } = useThemeContext()!;
+
+  const isMac = /(Mac|iPad)/i.test(navigator.userAgent);
+
+  let searchHotKey = '⌘+k, ctrl+k';
+  let macSearchKey = '⌘+k';
+  let windowsSearchKey = 'ctrl+k';
+
+  if (themeConfig.searchHotKey) {
+    if (typeof themeConfig.searchHotKey === 'string') {
+      searchHotKey = themeConfig.searchHotKey;
+      macSearchKey = themeConfig.searchHotKey;
+      windowsSearchKey = themeConfig.searchHotKey;
+    }
+    if (typeof themeConfig.searchHotKey === 'object') {
+      searchHotKey =
+        themeConfig.searchHotKey.macos +
+        ', ' +
+        themeConfig.searchHotKey.windows;
+      macSearchKey = themeConfig.searchHotKey.macos;
+      windowsSearchKey = themeConfig.searchHotKey.windows;
+    }
+  }
+
+  useEffect(() => {
+    key.filter = () => true;
+
+    // 在页面中按下 ⌘+k 可以打开搜索框
+    key(searchHotKey, (e) => {
+      e.preventDefault();
+      document.getElementById('search-input')?.focus();
+    });
+
+    // 在搜索框中按下 'Escape' 键可以关闭搜索框
+    key('escape', () => {
+      (document.activeElement as HTMLElement).blur();
+    });
+
+    key('up', handleKeyUp);
+    key('down', handleKeyDown);
+
+    return () => {
+      key.unbind(searchHotKey);
+      key.unbind('escape');
+      key.unbind('up');
+      key.unbind('down');
+    };
+  }, []);
+
+  const result = search(appData.routes, keyword);
+
+  return (
+    <Fragment>
+      <div
+        className="rounded-lg w-40 lg:w-64 flex items-center pr-2 flex-row hover:bg-gray-50
+     transition duration-300 bg-gray-100 border border-white focus-within:border-gray-100
+     focus-within:bg-white dark:bg-gray-700 dark:border-gray-700
+     dark:focus-within:border-gray-700 dark:focus-within:bg-gray-800 dark:text-gray-100"
+      >
+        <input
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          value={keyword}
+          onChange={(e) => setKeyword(e.target.value)}
+          id="search-input"
+          className="w-full bg-transparent outline-0 text-sm px-4 py-2 "
+          placeholder={render('Search anything ...')}
+        />
+        <div
+          className="bg-gray-200 rounded px-2 h-6 flex flex-row text-gray-400
+         items-center justify-center border border-gray-300 text-xs"
+        >
+          {isMac ? macSearchKey : windowsSearchKey}
+        </div>
+        <div
+          className={cx(
+            'absolute transition-all duration-500 top-16 w-96 rounded-lg',
+            'cursor-pointer shadow overflow-hidden',
+            result.length > 0 && isFocused ? 'max-h-80' : 'max-h-0',
+          )}
+        >
+          {result.map((r, i) => (
+            <a
+              href={r.href}
+              key={i}
+              className="group outline-none search-result"
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+            >
+              <p
+                className="p-2 bg-white hover:bg-gray-50 transition
+                 duration-300 group-focus:bg-blue-200 dark:bg-gray-700"
+              >
+                {r.path}
+              </p>
+            </a>
+          ))}
+        </div>
+      </div>
+    </Fragment>
+  );
+};
+
+interface SearchResultItem {
+  path: string;
+  href: string;
+}
+
+function search(routes: any, keyword: string): SearchResultItem[] {
+  if (!keyword) return [];
+
+  const result: SearchResultItem[] = [];
+
+  Object.keys(routes).map((path) => {
+    if (path.toLowerCase().includes(keyword.toLowerCase())) {
+      result.push({
+        path: path.split('/').slice(1).join(' > '),
+        href: '/' + path,
+      });
+    }
+
+    const route = routes[path];
+    if (!route.titles) return;
+    route.titles
+      .filter((t: any) => t.level <= 2)
+      .map((title: any) => {
+        if (title.title.toLowerCase().includes(keyword.toLowerCase())) {
+          result.push({
+            path: path.split('/').slice(1).join(' > ') + ' > ' + title.title,
+            href: '/' + path + '#' + title.title,
+          });
+        }
+      });
+  });
+
+  if (result.length > 8) return result.slice(0, 8);
+
+  return result;
+}
+
+function handleKeyDown(e: KeyboardEvent) {
+  if (!document.activeElement) return;
+
+  if (document.activeElement.id === 'search-input') {
+    e.preventDefault();
+    (
+      document.getElementsByClassName('search-result')[0] as
+        | HTMLDivElement
+        | undefined
+    )?.focus();
+    return;
+  }
+
+  if (document.activeElement.className.indexOf('search-result') === -1) return;
+
+  e.preventDefault();
+  (document.activeElement?.nextSibling as HTMLDivElement | undefined)?.focus();
+}
+
+function handleKeyUp(e: KeyboardEvent) {
+  if (!document.activeElement) return;
+  if (document.activeElement.className.indexOf('search-result') === -1) return;
+  e.preventDefault();
+  (
+    document.activeElement?.previousSibling as HTMLDivElement | undefined
+  )?.focus();
+}

package/client/theme-doc/Sidebar.tsx

@@ -0,0 +1,84 @@
+import cx from 'classnames';
+import React from 'react';
+import { useThemeContext } from './context';
+import useLanguage from './useLanguage';
+
+interface SidebarProps {
+  setMenuOpened?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export default (props: SidebarProps) => {
+  const { currentLanguage, isFromPath } = useLanguage();
+  const { appData, components, themeConfig, location } = useThemeContext()!;
+  const matchedNav = themeConfig.navs.filter((nav) =>
+    location.pathname.startsWith(
+      (isFromPath && currentLanguage ? '/' + currentLanguage.locale : '') +
+        nav.path,
+    ),
+  )[0];
+
+  if (!matchedNav) {
+    return null;
+  }
+
+  let locale = currentLanguage?.locale;
+  if (!isFromPath) locale = '';
+
+  return (
+    <ul
+      className={cx(
+        'h-screen lg:h-[calc(100vh-8rem)] overflow-y-scroll',
+        'lg:w-64 p-8 pb-12 fadeout w-full',
+      )}
+    >
+      {(matchedNav.children || []).map((item) => {
+        return (
+          <li key={item.title}>
+            <div>
+              <p className="text-xl font-extrabold my-6 dark:text-white">
+                {item.title}
+              </p>
+              {item.children.map((child: any) => {
+                const to =
+                  (locale ? `/${locale}` : '') + `${matchedNav.path}/${child}`;
+                const id = `${matchedNav.path}/${child}`.slice(1);
+                const route =
+                  appData.routes[id + '.' + locale] || appData.routes[id];
+                const title = route.titles[0]?.title || null;
+
+                if (to === window.location.pathname) {
+                  return (
+                    <div
+                      key={child}
+                      className="my-2 hover:text-blue-400 transition-all
+                       bg-blue-50 text-blue-400 px-4 py-1
+                       rounded-lg cursor-default dark:bg-blue-900 dark:text-blue-200"
+                    >
+                      {title}
+                    </div>
+                  );
+                }
+
+                return (
+                  <components.Link
+                    to={route.path}
+                    onClick={() =>
+                      props.setMenuOpened && props.setMenuOpened((o) => !o)
+                    }
+                  >
+                    <div
+                      key={child}
+                      className="text-gray-700 my-2 hover:text-blue-400 transition-all px-4 py-1 dark:text-blue-200 dark:hover:text-blue-400"
+                    >
+                      {title}
+                    </div>
+                  </components.Link>
+                );
+              })}
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};

package/client/theme-doc/ThemeSwitch.tsx

@@ -0,0 +1,60 @@
+import cx from 'classnames';
+import React, { useEffect, useState } from 'react';
+import MoonIcon from './icons/moon.png';
+import SunIcon from './icons/sun.png';
+
+export default () => {
+  const [toggle, setToggle] = useState<Boolean>();
+
+  useEffect(() => {
+    // 初始化，获取过去曾经设定过的主题，或是系统当前的主题
+    if (toggle === undefined) {
+      if (localStorage.getItem('theme') === 'dark') {
+        setToggle(false);
+        return;
+      }
+      if (localStorage.getItem('theme') === 'light') {
+        setToggle(true);
+        return;
+      }
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        setToggle(false);
+        return;
+      }
+      setToggle(true);
+    }
+
+    if (toggle) {
+      document.body.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    } else {
+      document.body.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    }
+  }, [toggle]);
+
+  return (
+    <div
+      className={cx(
+        'md:w-12 md:h-6 w-12 h-4 flex items-center bg-gray-300 rounded-full ',
+        'py-1 px-1.5  cursor-pointer',
+        toggle ? 'bg-blue-300' : 'bg-gray-700',
+      )}
+      onClick={() => setToggle(!toggle)}
+    >
+      <div
+        className={cx(
+          'md:w-4 md:h-4 h-3 w-3 rounded-full shadow-md ',
+          'transition transform',
+          toggle && 'translate-x-5',
+        )}
+      >
+        <img
+          src={toggle ? SunIcon : MoonIcon}
+          alt="toggle"
+          className="w-full h-full"
+        />
+      </div>
+    </div>
+  );
+};

package/client/theme-doc/Tip.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => {
+  return <div>Tip</div>;
+};

package/client/theme-doc/Toc.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useThemeContext } from './context';
+import useLanguage from './useLanguage';
+
+function getLinkFromTitle(title: string) {
+  return title
+    .toLowerCase()
+    .replace(/\s/g, '-')
+    .replace(/[（）]/g, '');
+}
+
+export default () => {
+  const { location, appData } = useThemeContext()!;
+  const lang = useLanguage();
+  const route =
+    appData.routes[
+      lang.isFromPath
+        ? location.pathname.split('/').slice(2).join('/') +
+          '.' +
+          lang.currentLanguage?.locale
+        : location.pathname.slice(1)
+    ];
+
+  if (!route) {
+    return null;
+  }
+
+  const titles = route.titles.filter((t: any) => t.level > 1);
+  return (
+    <div
+      className="w-full lg:m-12 mb-12 border
+      border-gray-100 p-8 rounded-xl z-20"
+    >
+      <p className="text-lg font-extrabold dark:text-white">
+        {route.titles[0].title}
+      </p>
+      <ul className="max-h-[calc(100vh-360px)] overflow-y-scroll py-2">
+        {titles.map((item: any) => {
+          return (
+            <li
+              style={{ paddingLeft: `${item.level - 2}rem` }}
+              className="mt-3 text-gray-600 cursor-pointer dark:text-gray-400
+              hover:text-blue-500 transition duration-300 dark:hover:text-blue-500"
+            >
+              <a
+                className={item.level > 2 ? 'text-sm' : ''}
+                href={'#' + getLinkFromTitle(item.title)}
+              >
+                {item.title}
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};

package/client/theme-doc/VersionSwitch.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => {
+  return <div>VersionSwitch</div>;
+};