@umijs/plugin-docs 4.0.0-canary.20220418.2 → 4.0.0-canary.20220422.2

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/Layout.tsx

@@ -75,31 +75,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>
@@ -110,7 +111,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,14 +5,15 @@ 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" />
+        {typeof Logo === 'string' && (
+          <img src={Logo} className="w-8 h-8" alt="logo" />
+        )}
+        {typeof Logo === 'function' && <Logo />}
         <div className="text-xl font-extrabold ml-2 dark:text-white">
           {themeConfig.title}
         </div>

package/client/theme-doc/NavBar.tsx

@@ -1,27 +1,70 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useThemeContext } from './context';
 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">
+      {themeConfig.navs.map((nav: any) => (
+        <NavItem nav={nav} key={nav.path} />
+      ))}
+    </ul>
+  );
+};
+
+interface NavItemProps {
+  nav: {
+    path: string;
+    title: string;
+    dropdown?: {
+      title: string;
+      path: string;
+    }[];
+  };
+}
+
+function NavItem(props: NavItemProps) {
+  const { components } = useThemeContext()!;
+  const { nav } = props;
+  const lang = useLanguage();
+  const [isExpanded, setExpanded] = useState(false);
+  return (
+    <li
+      className="ml-8 dark:text-white relative"
+      onMouseEnter={() => nav.dropdown && setExpanded(true)}
+      onMouseLeave={() => nav.dropdown && setExpanded(false)}
+    >
+      <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) => (
             <components.Link
+              key={n.path}
               to={
-                lang.isFromPath
-                  ? lang.currentLanguage?.locale + nav.path
-                  : nav.path
+                lang.isFromPath ? lang.currentLanguage?.locale + n.path : n.path
               }
             >
-              {lang.render(nav.title)}
+              <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>
-          </li>
-        );
-      })}
-    </ul>
+          ))}
+        </div>
+      )}
+    </li>
   );
-};
+}

package/client/theme-doc/Search.tsx

@@ -74,7 +74,7 @@ export default () => {
           value={keyword}
           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

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) => {

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') {

package/client/theme-doc/Toc.tsx

@@ -7,7 +7,7 @@ function getLinkFromTitle(title: string) {
   return title
     .toLowerCase()
     .replace(/\s/g, '-')
-    .replace(/[（）]/g, '');
+    .replace(/[（）()\\{},]/g, '');
 }
 
 export default () => {
@@ -30,7 +30,7 @@ export default () => {
   return (
     <div
       className="w-full lg:m-12 mb-12 border
-      border-gray-100 p-8 rounded-xl z-20"
+      border-gray-100 p-4 rounded-xl z-20"
     >
       {/* @ts-ignore */}
       <Helmet>
@@ -53,7 +53,7 @@ export default () => {
                 className={item.level > 2 ? 'text-sm' : ''}
                 href={'#' + getLinkFromTitle(item.title)}
               >
-                {item.title}
+                {item.title.replace(/\\{/g, '{').replace(/\\}/g, '}')}
               </a>
             </li>
           );

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

@@ -9,11 +9,14 @@ enum MessageType {
 
 interface MessageProps {
   type?: MessageType;
-  emoji?: string;
+  emoji?: string | boolean;
+  title?: string;
 }
 
 function Message(props: PropsWithChildren<MessageProps>) {
-  const messageType = props.type || 'info';
+  const messageType = props.type || MessageType.Info;
+  const messageTitle = props.title;
+  const propsChildren = props.children;
 
   let messageClass: string;
   switch (messageType) {
@@ -30,26 +33,35 @@ function Message(props: PropsWithChildren<MessageProps>) {
       messageClass = 'mdx-message-info';
   }
 
-  const messageText =
-    typeof props.children === 'string'
-      ? props.children
-      : (props.children as React.ReactElement).props.children;
+  let messageEmoji = props.emoji;
+  if (!messageEmoji && messageEmoji !== false) {
+    switch (messageType) {
+      case MessageType.Success:
+        messageEmoji = '🏆︎';
+        break;
+      case MessageType.Warning:
+        messageEmoji = '🛎️';
+        break;
+      case MessageType.Error:
+        messageEmoji = '⚠️';
+        break;
+      default:
+        messageEmoji = '💡';
+    }
+  }
 
   return (
-    <>
-      <div
-        className={`w-full py-3 px-4 rounded-lg my-4 mdx-message ${messageClass}`}
-      >
-        <p>
-          {props.emoji && (
-            <span role="img" className="mr-3 inline">
-              {props.emoji}
-            </span>
-          )}
-          {messageText}
-        </p>
+    <div
+      className={`flex w-full py-5 px-4 rounded-lg my-4 mdx-message ${messageClass}`}
+    >
+      <span role="img" className="mr-3 dark:text-white">
+        {messageEmoji}
+      </span>
+      <div className="flex-grow">
+        {messageTitle && <h5 className="mt-0 mb-3">{messageTitle}</h5>}
+        <div className="mdx-message-text">{propsChildren}</div>
       </div>
-    </>
+    </div>
   );
 }
 

package/client/theme-doc/context.ts

@@ -9,21 +9,27 @@ interface IContext {
     github: string;
     // 键盘搜索的快捷键，参考 https://github.com/madrobby/keymaster
     searchHotKey?: string | { macos: string; windows: string };
-    logo: string;
+    logo: string | React.ComponentType;
     // 在设置文件中声明该项目的国际化功能支持的语言
     i18n?: { locale: string; text: string }[];
     // 插件会从 docs/locales 内将所有 json 文件注入到 themeConfig 中
     // 供 useLanguage 使用
     locales: { [locale: string]: { [key: string]: string } };
+    // 顶部导航栏右侧自定义组件
+    extraNavRight?: React.ComponentType;
+    // 底部导航栏左侧自定义组件
+    extraNavLeft?: React.ComponentType;
     navs: {
       path: string;
       title: string;
+      dropdown?: { title: string; path: string }[];
       children: any[];
     }[];
     announcement?: {
       title: string;
       link?: string;
     };
+    themeSwitch?: {};
   };
   location: {
     pathname: string;

package/client/theme-doc/tailwind.css

@@ -36,7 +36,7 @@ article ul {
 }
 
 article li {
-  @apply mt-2 dark:text-white;
+  @apply text-base mt-2 leading-7 text-gray-700 dark:text-white;
 }
 
 article ol {
@@ -51,63 +51,127 @@ article h2 a {
   @apply no-underline dark:text-white;
 }
 
+/* 行内代码 */
 article code {
-  @apply bg-black bg-opacity-5 border border-black border-opacity-5 rounded-md dark:text-white;
+  @apply text-sky-600 dark:text-sky-300 bg-slate-800 bg-opacity-5 dark:bg-opacity-100 border border-black border-opacity-5 rounded-md;
   font-size: 0.9em;
   padding: 2px 0.25em;
   box-decoration-break: clone;
   font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;
 }
 
-article inlinecode {
-  @apply bg-black bg-opacity-5 border border-black border-opacity-5 rounded-md px-1.5 py-0.5 text-xs dark:text-white dark:bg-gray-700;
+/* 行内高亮代码 */
+article span[data-rehype-pretty-code-fragment] code {
+  @apply bg-zinc-900 dark:bg-zinc-900;
 }
 
+/* 代码块 */
 article pre {
-  /* content-visibility: auto; */
   contain: paint;
-  @apply p-4 bg-slate-100 dark:bg-slate-800 rounded-xl my-8 overflow-x-auto font-medium subpixel-antialiased dark:text-white;
+  @apply my-4 bg-zinc-900 dark:bg-zinc-900 text-neutral-300 dark:text-neutral-300 rounded-md font-medium subpixel-antialiased transition;
+}
+article pre > code {
+  @apply grid leading-relaxed p-4 text-sm text-neutral-300 dark:text-neutral-300 bg-transparent dark:bg-transparent rounded-none border-none min-w-full overflow-x-auto;
+}
+article div[data-rehype-pretty-code-fragment] {
+  @apply my-4;
 }
 
-article pre code {
-  line-height: 1.25rem;
-  @apply relative p-0 text-sm text-current bg-transparent rounded-none border-none inline-block min-w-full dark:text-white;
+/* 代码块的标题部分 */
+article div[data-rehype-pretty-code-fragment] > div[data-rehype-pretty-code-title] {
+  @apply pb-1 text-sm text-zinc-400 dark:text-neutral-400 text-center;
+}
+
+/* 代码块的代码部分 */
+article div[data-rehype-pretty-code-fragment] > pre {
+  @apply pt-6 my-0;
+}
+article div[data-rehype-pretty-code-fragment] > pre > code {
+  @apply my-0 pt-0 px-0;
 }
 
-article pre code .line.highlighted {
-  @apply before:block before:absolute before:h-5 before:bg-gray-500 before:bg-opacity-10 before:-inset-x-4 before:pointer-events-none before:select-none dark:text-white;
+/* 代码块的使用语言 */
+article div[data-rehype-pretty-code-fragment] > pre::before {
+  @apply fixed top-0 right-0 px-2 text-sm uppercase bg-neutral-300 text-zinc-900 bg-opacity-80 dark:bg-opacity-60 rounded-sm;
+  content: attr(data-language);
 }
 
-article a code {
-  @apply text-current no-underline dark:text-white;
+/* 代码块的代码行 */
+article div[data-rehype-pretty-code-fragment] > pre > code .line {
+  @apply pl-3 pr-4;
 }
 
+/* 代码块的行内高亮文字 */
+article div[data-rehype-pretty-code-fragment] > pre > code .line .word {
+  @apply px-1.5 inline-block bg-neutral-300 bg-opacity-20 rounded-sm;
+}
+
+/* 代码块的行号 */
+article div[data-rehype-pretty-code-fragment] > pre > code {
+  counter-reset: line;
+}
+article div[data-rehype-pretty-code-fragment] > pre > code > .line::before {
+  @apply text-neutral-600 w-4 mr-4 inline-block text-right;
+  counter-increment: line;
+  content: counter(line);
+}
+
+/* 代码块的高亮行 */
+article div[data-rehype-pretty-code-fragment] pre > code > .line {
+  @apply border-l-2 border-transparent;
+}
+article div[data-rehype-pretty-code-fragment] pre > code > .line.highlighted {
+  @apply bg-neutral-100 dark:bg-neutral-300 bg-opacity-10 dark:bg-opacity-10 border-l-blue-400 dark:border-l-sky-600;
+}
+
+/* 链接 */
 article a {
-  @apply text-blue-600 mx-1 hover:text-blue-300 transition dark:text-blue-400;
+  @apply mx-1 text-cyan-600 dark:text-fuchsia-200 hover:text-cyan-900 dark:hover:text-fuchsia-400 transition;
+  background-image: linear-gradient(
+    transparent 60%,
+    rgba(130, 199, 255, 0.28) 55%
+  );
+}
+.dark article a {
+  background-image: linear-gradient(
+    transparent 60%,
+    rgba(238, 157, 234, 0.28) 55%
+  );
+}
+
+/* 行内代码块链接 */
+article a > code {
+  @apply text-cyan-600 dark:text-fuchsia-200 hover:text-cyan-900 dark:hover:text-fuchsia-400 transition;
   background-image: linear-gradient(
     transparent 60%,
     rgba(130, 199, 255, 0.28) 55%
   );
 }
+.dark article a > code {
+  background-image: linear-gradient(
+    transparent 60%,
+    rgba(238, 157, 234, 0.28) 55%
+  );
+}
 
 article table {
-  @apply table-auto w-full shadow rounded-xl text-left overflow-hidden dark:shadow-gray-800 my-8
+  @apply table-auto w-full shadow rounded-xl text-left overflow-hidden dark:shadow-gray-800 my-8;
 }
 
 article table thead {
-  @apply bg-blue-100 dark:bg-gray-800
+  @apply bg-blue-100 dark:bg-gray-800;
 }
 
 article table thead th {
-  @apply py-3 px-4 text-gray-700 dark:text-white
+  @apply py-3 px-4 text-gray-700 dark:text-white;
 }
 
 article table tbody tr {
-  @apply border-b border-b-zinc-100 dark:border-b-gray-600
+  @apply border-b border-b-zinc-100 dark:border-b-gray-600;
 }
 
 article table tbody td {
-  @apply py-2 px-4 text-gray-700 dark:text-white
+  @apply py-2 px-4 text-gray-700 dark:text-white;
 }
 
 .link-with-underline {
@@ -181,39 +245,51 @@ h6 {
     @apply border-l-8;
   }
 
-  .mdx-message > p {
+  .mdx-message code {
+    @apply dark:bg-opacity-50;
+  }
+
+  .mdx-message-text :first-child {
     @apply mt-0;
   }
 
+  .mdx-message-text img {
+    @apply rounded-md;
+  }
+
+  .mdx-message-text pre {
+    @apply my-2;
+  }
+
   .mdx-message-info {
-    @apply bg-blue-50 border-blue-300 dark:bg-blue-100 dark:border-blue-500;
+    @apply bg-blue-50 border-blue-300 dark:bg-blue-900 dark:border-blue-500;
   }
 
-  .mdx-message-info > p {
-    @apply text-blue-900 dark:text-blue-900;
+  .mdx-message-info code {
+    @apply text-blue-800 dark:text-blue-200;
   }
 
   .mdx-message-success {
-    @apply bg-green-50 border-green-300 dark:bg-green-100 dark:border-green-500;
+    @apply bg-green-50 border-green-300 dark:bg-green-700 dark:border-green-500;
   }
 
-  .mdx-message-success > p {
-    @apply text-green-900 dark:text-green-900;
+  .mdx-message-success code {
+    @apply text-green-800 dark:text-green-200;
   }
 
   .mdx-message-warning {
-    @apply bg-orange-50 border-orange-300 dark:bg-orange-100 dark:border-orange-500;
+    @apply bg-orange-50 border-orange-300 dark:bg-orange-700 dark:border-orange-500;
   }
 
-  .mdx-message-warning > p {
-    @apply text-orange-900 dark:text-orange-900;
+  .mdx-message-warning code {
+    @apply text-orange-700 dark:text-orange-100;
   }
 
   .mdx-message-error {
-    @apply bg-red-50 border-red-300 dark:bg-red-100 dark:border-red-500;
+    @apply bg-red-50 border-red-300 dark:bg-rose-700 dark:border-rose-500;
   }
 
-  .mdx-message-error > p {
-    @apply text-red-900 dark:text-red-900;
+  .mdx-message-error code {
+    @apply text-red-700 dark:text-rose-100;
   }
 }