@umijs/plugin-docs 4.0.0-rc.8 → 4.0.1

package/client/theme-doc/Head.tsx

@@ -1,5 +1,6 @@
 import cx from 'classnames';
 import React from 'react';
+import { useThemeContext } from './context';
 import Github from './Github';
 import LangSwitch from './LangSwitch';
 import Logo from './Logo';
@@ -13,27 +14,41 @@ interface HeadProps {
 }
 
 export default (props: HeadProps) => {
+  const { themeConfig } = useThemeContext()!;
   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"
+      border-b-gray-100 border-b-2 pt-4 pb-4 px-4 lg:px-12 dark:border-b-gray-800"
     >
-      <Logo />
+      <div className="flex flex-row items-center">
+        <Logo />
+        {themeConfig.extraNavLeft && <themeConfig.extraNavLeft />}
+      </div>
       <div className="flex flex-row items-center">
         <Search />
-        <HamburgerButton {...props} />
+        {/* 小屏幕显示打开菜单的按钮 */}
+        <div
+          className="block lg:hidden ml-2 cursor-pointer"
+          onClick={() => props.setMenuOpened((o) => !o)}
+        >
+          <HamburgerButton {...props} />
+        </div>
+        {/* 大屏幕显示完整的操作按钮 */}
         <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>
+        {themeConfig.themeSwitch && (
+          <div className="ml-4 hidden lg:block">
+            <ThemeSwitch />
+          </div>
+        )}
         <div className="ml-4 hidden lg:block">
           <Github />
         </div>
+        {themeConfig.extraNavRight && <themeConfig.extraNavRight />}
       </div>
     </div>
   );
@@ -41,30 +56,27 @@ export default (props: HeadProps) => {
 
 interface HamburgerButtonProps {
   isMenuOpened: boolean;
-  setMenuOpened: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 function HamburgerButton(props: HamburgerButtonProps) {
+  const { isMenuOpened } = props;
   const barClass =
-    'block absolute h-0.5 w-5 bg-current transform dark:bg-white' +
-    ' transition duration-500 ease-in-out';
+    'absolute h-0.5 w-5 -translate-x-2.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)}
-    >
+    <div className="p-4">
       <span
         className={cx(
           barClass,
-          props.isMenuOpened ? 'rotate-45 ' : '-translate-y-1.5',
+          isMenuOpened ? 'rotate-45 ' : '-translate-y-1.5',
         )}
       />
-      <span className={cx(barClass, props.isMenuOpened && 'opacity-0')} />
+      <span className={cx(barClass, isMenuOpened && 'opacity-0')} />
       <span
         className={cx(
           barClass,
-          props.isMenuOpened ? '-rotate-45' : 'translate-y-1.5',
+          isMenuOpened ? '-rotate-45' : 'translate-y-1.5',
         )}
       />
     </div>

package/client/theme-doc/LangSwitch.tsx

@@ -17,7 +17,7 @@ export default () => {
   }
 
   function handleClick() {
-    if (!currentLanguage) return;
+    if (!currentLanguage || languages.length === 1) return;
     if (languages.length === 2) {
       switchLanguage(
         languages[0].locale === currentLanguage.locale
@@ -29,6 +29,8 @@ export default () => {
     setExpanded((e) => !e);
   }
 
+  if (!currentLanguage || languages.length === 1) return null;
+
   return (
     <div>
       <div

package/client/theme-doc/Layout.tsx

@@ -20,7 +20,8 @@ export default (props: any) => {
 
     function updateBlur() {
       if (!offset || !blur) return;
-      blur.backgroundPosition = `0px ` + `${-window.scrollY + 100}px`;
+      blur.backgroundPosition =
+        `0px ` + `calc(var(--anchor-offset) + ${-window.scrollY + 64}px)`;
     }
 
     document.addEventListener('scroll', updateBlur, false), updateBlur();
@@ -42,9 +43,13 @@ export default (props: any) => {
         components: props.components,
         themeConfig: props.themeConfig,
         location: props.location,
+        history: props.history,
       }}
     >
-      <div className="flex flex-col dark:bg-gray-900 min-h-screen transition-all">
+      <div
+        className="flex flex-col dark:bg-gray-900 min-h-screen transition-all"
+        id={isHomePage ? 'home-page' : 'doc-page'}
+      >
         <div
           id="head-container"
           className="z-30 sticky top-0 dark:before:bg-gray-800 before:bg-white before:bg-opacity-[.85]
@@ -60,6 +65,7 @@ export default (props: any) => {
 
         {isHomePage ? (
           <div id="article-body">
+            {/* @ts-ignore */}
             <Helmet>
               <title>
                 {title}
@@ -74,31 +80,32 @@ export default (props: any) => {
               id="article-body"
               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-2 m-8 z-20 lg:py-12">
-                  <article className="flex-1">{props.children}</article>
+              {/* 左侧菜单 */}
+              <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>
-
-            <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 className="container flex flex-row justify-center">
+                <div className="w-full lg:w-1/2 px-4 lg:px-2 m-8 z-20 lg:pb-12 lg:pt-6">
+                  <article className="flex-1">{props.children}</article>
                 </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 />
+              {/* 右侧 Toc */}
+              <div
+                className="fixed right-0 top-0 w-1/4 hidden lg:block flex-row
+justify-center h-screen z-10 pt-20"
+              >
+                <div className="container flex flex-row justify-start">
+                  <div className="w-2/3 top-32">
+                    <Toc />
+                  </div>
                 </div>
               </div>
             </div>
@@ -109,7 +116,7 @@ export default (props: any) => {
       <div
         className={cx(
           'fixed top-12 w-screen bg-white z-20 dark:bg-gray-800',
-          'overflow-hidden transition-all duration-500',
+          'overflow-hidden transition-all duration-500 lg:hidden',
           isMenuOpened ? 'max-h-screen' : 'max-h-0',
         )}
       >

package/client/theme-doc/Logo.tsx

@@ -5,15 +5,19 @@ import useLanguage from './useLanguage';
 export default () => {
   const { themeConfig, components } = useThemeContext()!;
   const { isFromPath, currentLanguage } = useLanguage();
-
-  // @ts-ignore
-  const { logo } = themeConfig;
+  const Logo = themeConfig.logo;
 
   return (
     <components.Link to={isFromPath ? '/' + currentLanguage?.locale : '/'}>
       <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">
+        {typeof Logo === 'string' && (
+          <img src={Logo} className="w-8 h-8" alt="logo" />
+        )}
+        {typeof Logo === 'function' && <Logo />}
+        <div
+          id="header-title"
+          className="text-xl font-extrabold ml-2 dark:text-white"
+        >
           {themeConfig.title}
         </div>
       </div>

package/client/theme-doc/NavBar.tsx

@@ -1,27 +1,106 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useThemeContext } from './context';
+import ExternalLink from './icons/link.svg';
 import useLanguage from './useLanguage';
 
 export default () => {
-  const { components, themeConfig } = useThemeContext()!;
-  const lang = useLanguage();
+  const { themeConfig } = useThemeContext()!;
   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>
-        );
-      })}
+      {themeConfig.navs.map((nav: any) => (
+        <NavItem nav={nav} key={nav.path} />
+      ))}
     </ul>
   );
 };
+
+interface NavItemProps {
+  nav: {
+    path: string;
+    title: string;
+    type?: 'nav' | 'link';
+    dropdown?: {
+      title: string;
+      path: string;
+    }[];
+  };
+}
+
+function NavItem(props: NavItemProps) {
+  const { components } = useThemeContext()!;
+  const { nav } = props;
+  const lang = useLanguage();
+  const [isExpanded, setExpanded] = useState(false);
+
+  const isExternalLink = (n: NavItemProps['nav']) => {
+    return (
+      n.type === 'link' && /(https|http):\/\/([\w.]+\/?)\S*/.test(nav.path)
+    );
+  };
+
+  return (
+    <li
+      className="ml-8 dark:text-white relative"
+      onMouseEnter={() => nav.dropdown && setExpanded(true)}
+      onMouseLeave={() => nav.dropdown && setExpanded(false)}
+    >
+      {isExternalLink(nav) ? (
+        <a href={nav.path} target="_blank">
+          <span className="flex">
+            {nav.title}
+            <img src={ExternalLink} alt="ExternalLink" />
+          </span>
+        </a>
+      ) : (
+        <components.Link
+          to={
+            lang.isFromPath ? lang.currentLanguage?.locale + nav.path : nav.path
+          }
+        >
+          {lang.render(nav.title)}
+        </components.Link>
+      )}
+      {nav.dropdown && (
+        <div
+          style={{ maxHeight: isExpanded ? nav.dropdown.length * 48 : 0 }}
+          className="absolute transition-all duration-300 w-32 rounded-lg
+       cursor-pointer shadow overflow-hidden top-8"
+        >
+          {nav.dropdown.map((n) => (
+            <>
+              {isExternalLink(n) ? (
+                <a href={n.path} target="_blank">
+                  <span className="flex">
+                    <span
+                      className="p-2 bg-white dark:bg-gray-700 dark:text-white
+            hover:bg-gray-50 transition duration-300"
+                    >
+                      {nav.title}
+                    </span>
+                    <img src={ExternalLink} alt="ExternalLink" />
+                  </span>
+                </a>
+              ) : (
+                <components.Link
+                  key={n.path}
+                  to={
+                    lang.isFromPath
+                      ? lang.currentLanguage?.locale + n.path
+                      : n.path
+                  }
+                >
+                  <p
+                    className="p-2 bg-white dark:bg-gray-700 dark:text-white
+            hover:bg-gray-50 transition duration-300"
+                  >
+                    {n.title}
+                  </p>
+                </components.Link>
+              )}
+            </>
+          ))}
+        </div>
+      )}
+    </li>
+  );
+}

package/client/theme-doc/Search.tsx

@@ -3,9 +3,11 @@ import key from 'keymaster';
 import React, { Fragment, useEffect, useState } from 'react';
 import { useThemeContext } from './context';
 import useLanguage from './useLanguage';
+import getLinkFromTitle from './utils/getLinkFromTitle';
 
 export default () => {
-  const { render } = useLanguage();
+  const { components } = useThemeContext()!;
+  const { isFromPath, currentLanguage, render } = useLanguage();
   const [isFocused, setIsFocused] = useState(false);
   const [keyword, setKeyword] = useState('');
 
@@ -34,6 +36,7 @@ export default () => {
   }
 
   useEffect(() => {
+    if (!themeConfig.searchHotKey) return;
     key.filter = () => true;
 
     // 在页面中按下 ⌘+k 可以打开搜索框
@@ -63,6 +66,7 @@ export default () => {
   return (
     <Fragment>
       <div
+        id="search-input-wrapper"
         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 relative
@@ -72,28 +76,43 @@ export default () => {
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
           value={keyword}
+          autoComplete="off"
           onChange={(e) => setKeyword(e.target.value)}
           id="search-input"
-          className="w-full bg-transparent outline-none text-sm px-4 py-2 "
+          className="w-full bg-transparent outline-none 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
+        {themeConfig.searchHotKey && (
+          <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>
+          >
+            {isMac ? macSearchKey : windowsSearchKey}
+          </div>
+        )}
         <div
+          id="search-results-wrapper"
           className={cx(
             'absolute transition-all duration-500 top-12 w-96 rounded-lg',
             'cursor-pointer shadow overflow-hidden',
-            result.length > 0 && isFocused ? 'max-h-80' : 'max-h-0',
+            keyword && isFocused ? 'max-h-80' : 'max-h-0',
           )}
         >
+          {keyword && result.length === 0 && (
+            <div>
+              <p
+                className="p-2 bg-white hover:bg-gray-50 transition
+                 duration-300 group-focus:bg-blue-200 dark:bg-gray-700"
+              >
+                {render('No result for')} "{keyword}"
+              </p>
+            </div>
+          )}
           {result.map((r, i) => (
-            <a
-              href={r.href}
+            <components.Link
+              to={(isFromPath ? currentLanguage?.locale : '') + r.href}
               key={i}
+              onClick={() => (document.activeElement as HTMLElement)?.blur()}
               className="group outline-none search-result"
               onFocus={() => setIsFocused(true)}
               onBlur={() => setIsFocused(false)}
@@ -104,7 +123,7 @@ export default () => {
               >
                 {r.path}
               </p>
-            </a>
+            </components.Link>
           ))}
         </div>
       </div>
@@ -122,9 +141,15 @@ function search(routes: any, keyword: string): SearchResultItem[] {
 
   const result: SearchResultItem[] = [];
 
+  function addResult(newResult: { path: string; href: string }) {
+    const { path, href } = newResult;
+    if (result.find((r) => r.path === path)) return;
+    result.push({ path, href });
+  }
+
   Object.keys(routes).map((path) => {
     if (path.toLowerCase().includes(keyword.toLowerCase())) {
-      result.push({
+      addResult({
         path: path.split('/').slice(1).join(' > '),
         href: '/' + path,
       });
@@ -132,16 +157,21 @@ function search(routes: any, keyword: string): SearchResultItem[] {
 
     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,
-          });
-        }
-      });
+    route.titles.map((title: any) => {
+      if (title.title.toLowerCase().includes(keyword.toLowerCase())) {
+        addResult({
+          path:
+            path
+              .split('/')
+              .map((s) => s.replace(/\.[a-z]{2}-[A-Z]{2}\/?/g, ''))
+              .slice(1)
+              .join(' > ') +
+            ' > ' +
+            title.title,
+          href: '/' + path + '#' + getLinkFromTitle(title.title),
+        });
+      }
+    });
   });
 
   if (result.length > 8) return result.slice(0, 8);

package/client/theme-doc/Sidebar.tsx

@@ -28,7 +28,7 @@ export default (props: SidebarProps) => {
     <ul
       className={cx(
         'h-screen lg:h-[calc(100vh-8rem)] overflow-y-scroll',
-        'lg:w-64 p-8 pb-12 fadeout w-full',
+        'lg:w-64 px-8 pt-12 lg:pt-8 pb-36 fadeout w-full',
       )}
     >
       {(matchedNav.children || []).map((item) => {
@@ -49,7 +49,8 @@ export default (props: SidebarProps) => {
                 if (to === window.location.pathname) {
                   return (
                     <div
-                      key={child}
+                      id="active-nav-item"
+                      key={route.path}
                       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"
@@ -61,7 +62,9 @@ export default (props: SidebarProps) => {
 
                 return (
                   <components.Link
-                    to={route.path}
+                    key={route.path}
+                    to={to.startsWith('/') ? to : `/${to}`}
+                    prefetch
                     onClick={() =>
                       props.setMenuOpened && props.setMenuOpened((o) => !o)
                     }

package/client/theme-doc/ThemeSwitch.tsx

@@ -1,12 +1,20 @@
 import cx from 'classnames';
 import React, { useEffect, useState } from 'react';
+import { useThemeContext } from './context';
 import MoonIcon from './icons/moon.png';
 import SunIcon from './icons/sun.png';
 
 export default () => {
   const [toggle, setToggle] = useState<Boolean>();
+  const { themeConfig } = useThemeContext()!;
 
   useEffect(() => {
+    // If themeConfig disabled the themeSwitch, just set to light theme
+    if (!themeConfig.themeSwitch) {
+      document.body.classList.remove('dark');
+      return;
+    }
+
     // 初始化，获取过去曾经设定过的主题，或是系统当前的主题
     if (toggle === undefined) {
       if (localStorage.getItem('theme') === 'dark') {
@@ -27,9 +35,17 @@ export default () => {
     if (toggle) {
       document.body.classList.remove('dark');
       localStorage.setItem('theme', 'light');
+      window.document.documentElement.style.setProperty(
+        '--color-scheme',
+        'light',
+      );
     } else {
       document.body.classList.add('dark');
       localStorage.setItem('theme', 'dark');
+      window.document.documentElement.style.setProperty(
+        '--color-scheme',
+        'dark',
+      );
     }
   }, [toggle]);
 

package/client/theme-doc/Toc.tsx

@@ -2,13 +2,8 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { useThemeContext } from './context';
 import useLanguage from './useLanguage';
-
-function getLinkFromTitle(title: string) {
-  return title
-    .toLowerCase()
-    .replace(/\s/g, '-')
-    .replace(/[（）]/g, '');
-}
+import getLinkFromTitle from './utils/getLinkFromTitle';
+import getTocTitle from './utils/getTocTitle';
 
 export default () => {
   const { location, appData, themeConfig } = useThemeContext()!;
@@ -30,29 +25,32 @@ export default () => {
   return (
     <div
       className="w-full lg:m-12 mb-12 border
-      border-gray-100 p-8 rounded-xl z-20"
+      border-gray-200 dark:border-neutral-700 py-4 rounded-lg z-20"
     >
+      {/* @ts-ignore */}
       <Helmet>
         <title>
           {route.titles[0].title} | {themeConfig.title}
         </title>
       </Helmet>
-      <p className="text-lg font-extrabold dark:text-white">
-        {route.titles[0].title}
+      <p className="text-lg font-extrabold text-gray-800 dark:text-neutral-50 pb-2 border-b border-gray-200 dark:border-neutral-700">
+        <span className="px-4">{route.titles[0].title}</span>
       </p>
-      <ul className="max-h-[calc(100vh-360px)] overflow-y-auto py-2">
+      <ul className="max-h-[calc(100vh-360px)] overflow-y-auto px-4">
         {titles.map((item: any) => {
           return (
             <li
               style={{ paddingLeft: `${item.level - 2}rem` }}
-              className="mt-3 text-gray-600 cursor-pointer dark:text-gray-400
+              className="mt-3 text-gray-600 cursor-pointer dark:text-neutral-400
               hover:text-blue-500 transition duration-300 dark:hover:text-blue-500"
             >
               <a
-                className={item.level > 2 ? 'text-sm' : ''}
+                className={`${
+                  item.level > 2 ? 'text-sm' : 'text-base'
+                } break-all 2xl:break-words`}
                 href={'#' + getLinkFromTitle(item.title)}
               >
-                {item.title}
+                {getTocTitle(item.title)}
               </a>
             </li>
           );

package/client/theme-doc/components/Announcement.tsx

@@ -6,6 +6,7 @@ function Announcement() {
   const { themeConfig } = useThemeContext()!;
 
   if (!themeConfig.announcement) {
+    document.documentElement.style.setProperty('--anchor-offset', '0px');
     return null;
   }
 

package/client/theme-doc/components/Features.tsx

@@ -8,7 +8,7 @@ function Features(
   props: PropsWithChildren<{ title?: string; subtitle?: string }>,
 ) {
   return (
-    <div className="w-screen py-36 features dark:features-dark min-h-screen">
+    <div className="w-full py-36 features dark:features-dark min-h-screen">
       {(props.title || props.subtitle) && (
         <div className="mb-24 px-4">
           {props.title && (