@umijs/plugin-docs 4.0.0-rc.3 → 4.0.0-rc.6

package/client/theme-doc/LangSwitch.tsx

@@ -1,10 +1,17 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import useLanguage from './useLanguage';
 
 export default () => {
-  const { currentLanguage, languages, switchLanguage } = useLanguage();
+  const { currentLanguage, languages, switchLanguage, isFromPath } =
+    useLanguage();
   const [isExpanded, setExpanded] = useState(false);
 
+  // 首次加载时，根据 localstorage 记录的上次语言自动切换
+  useEffect(() => {
+    const locale = window.localStorage.getItem('umi_locale');
+    if (locale && !isFromPath) switchLanguage(locale);
+  }, []);
+
   if (!currentLanguage) {
     return null;
   }
@@ -25,7 +32,7 @@ export default () => {
   return (
     <div>
       <div
-        className="w-24 rounded-lg overflow-hidden cursor-pointer border
+        className="w-24 rounded-lg overflow-hidden cursor-pointer border text-center
        border-white hover:border-gray-100 dark:border-gray-800"
         onClick={handleClick}
       >

package/client/theme-doc/Layout.tsx

@@ -31,6 +31,10 @@ export default (props: any) => {
 
   const { title, description } = props.themeConfig;
 
+  const isHomePage =
+    window.location.pathname === '/' ||
+    window.location.pathname.replace(/[a-z]{2}-[A-Z]{2}\/?/, '') === '/';
+
   return (
     <ThemeContext.Provider
       value={{
@@ -54,7 +58,7 @@ export default (props: any) => {
         <div className="g-glossy-firefox-cover" />
         <div className="g-glossy-firefox" id="firefox-head-bg" />
 
-        {window.location.pathname === '/' ? (
+        {isHomePage ? (
           <div id="article-body">
             <Helmet>
               <title>
@@ -71,7 +75,7 @@ export default (props: any) => {
               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">
+                <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>
               </div>

package/client/theme-doc/Logo.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 import { useThemeContext } from './context';
+import useLanguage from './useLanguage';
 
 export default () => {
   const { themeConfig, components } = useThemeContext()!;
+  const { isFromPath, currentLanguage } = useLanguage();
+
   // @ts-ignore
   const { logo } = themeConfig;
+
   return (
-    <components.Link to="/">
+    <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">

package/client/theme-doc/Search.tsx

@@ -65,7 +65,7 @@ export default () => {
       <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
+     focus-within:bg-white dark:bg-gray-700 dark:border-gray-700 relative
      dark:focus-within:border-gray-700 dark:focus-within:bg-gray-800 dark:text-gray-100"
       >
         <input
@@ -74,7 +74,7 @@ export default () => {
           value={keyword}
           onChange={(e) => setKeyword(e.target.value)}
           id="search-input"
-          className="w-full bg-transparent outline-0 text-sm px-4 py-2 "
+          className="w-full bg-transparent outline-none text-sm px-4 py-2 "
           placeholder={render('Search anything ...')}
         />
         <div
@@ -85,7 +85,7 @@ export default () => {
         </div>
         <div
           className={cx(
-            'absolute transition-all duration-500 top-16 w-96 rounded-lg',
+            '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',
           )}

package/client/theme-doc/ThemeSwitch.tsx

@@ -36,9 +36,9 @@ export default () => {
   return (
     <div
       className={cx(
-        'md:w-12 md:h-6 w-12 h-4 flex items-center bg-gray-300 rounded-full ',
+        'md:w-12 md:h-6 w-12 h-4 flex items-center rounded-full ',
         'py-1 px-1.5  cursor-pointer',
-        toggle ? 'bg-blue-300' : 'bg-gray-700',
+        toggle ? 'bg-gray-100' : 'bg-gray-700',
       )}
       onClick={() => setToggle(!toggle)}
     >

package/client/theme-doc/Toc.tsx

@@ -40,7 +40,7 @@ export default () => {
       <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">
+      <ul className="max-h-[calc(100vh-360px)] overflow-y-auto py-2">
         {titles.map((item: any) => {
           return (
             <li

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

@@ -13,22 +13,21 @@ interface MessageProps {
 }
 
 function Message(props: PropsWithChildren<MessageProps>) {
-  let bgColor = 'bg-blue-50';
-  let textColor = 'text-blue-900';
+  const messageType = props.type || 'info';
 
-  switch (props.type) {
+  let messageClass: string;
+  switch (messageType) {
     case MessageType.Success:
-      bgColor = 'bg-green-50';
-      textColor = 'text-green-900';
+      messageClass = 'mdx-message-success';
       break;
     case MessageType.Warning:
-      bgColor = 'bg-orange-50';
-      textColor = 'text-orange-900';
+      messageClass = 'mdx-message-warning';
       break;
     case MessageType.Error:
-      bgColor = 'bg-red-50';
-      textColor = 'text-red-900';
+      messageClass = 'mdx-message-error';
       break;
+    default:
+      messageClass = 'mdx-message-info';
   }
 
   const messageText =
@@ -39,7 +38,7 @@ function Message(props: PropsWithChildren<MessageProps>) {
   return (
     <>
       <div
-        className={`w-full py-3 px-4 ${bgColor} ${textColor} rounded-lg my-4 mdx-message`}
+        className={`w-full py-3 px-4 rounded-lg my-4 mdx-message ${messageClass}`}
       >
         <p>
           {props.emoji && (

package/client/theme-doc/firefox-polyfill.css

@@ -3,7 +3,8 @@
   https://www.cnblogs.com/coco1s/p/14953143.html
 */
 
-.g-glossy-firefox, .g-glossy-firefox-cover {
+.g-glossy-firefox,
+.g-glossy-firefox-cover {
   display: none;
 }
 

package/client/theme-doc/tailwind.css

@@ -84,12 +84,18 @@ article a code {
 
 article a {
   @apply text-blue-600 mx-1 hover:text-blue-300 transition dark:text-blue-400;
-  background-image: linear-gradient(transparent 60%, rgba(130, 199, 255, 0.28) 55%);
+  background-image: linear-gradient(
+    transparent 60%,
+    rgba(130, 199, 255, 0.28) 55%
+  );
 }
 
 .link-with-underline {
   @apply text-blue-600 mx-1 hover:text-blue-300 transition dark:text-blue-400;
-  background-image: linear-gradient(transparent 60%, rgba(130, 199, 255, 0.28) 55%);
+  background-image: linear-gradient(
+    transparent 60%,
+    rgba(130, 199, 255, 0.28) 55%
+  );
 }
 
 /*article pre {*/
@@ -111,7 +117,7 @@ article hr {
 }
 
 html {
-  scroll-behavior: smooth
+  scroll-behavior: smooth;
 }
 
 :root {
@@ -119,12 +125,16 @@ html {
 }
 
 /** Anchor with offset for headings */
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   scroll-margin-top: calc(var(--anchor-offset) + 88px);
 }
 
 @layer components {
-
   .features-dark {
     @apply bg-gray-900;
     background-image: radial-gradient(#2a2a2a 20%, transparent 20%);
@@ -147,7 +157,43 @@ h1, h2, h3, h4, h5, h6 {
     display: none;
   }
 
+  .mdx-message {
+    @apply border-l-8;
+  }
+
   .mdx-message > p {
     @apply mt-0;
   }
+
+  .mdx-message-info {
+    @apply bg-blue-50 border-blue-300 dark:bg-blue-100 dark:border-blue-500;
+  }
+
+  .mdx-message-info > p {
+    @apply text-blue-900 dark:text-blue-900;
+  }
+
+  .mdx-message-success {
+    @apply bg-green-50 border-green-300 dark:bg-green-100 dark:border-green-500;
+  }
+
+  .mdx-message-success > p {
+    @apply text-green-900 dark:text-green-900;
+  }
+
+  .mdx-message-warning {
+    @apply bg-orange-50 border-orange-300 dark:bg-orange-100 dark:border-orange-500;
+  }
+
+  .mdx-message-warning > p {
+    @apply text-orange-900 dark:text-orange-900;
+  }
+
+  .mdx-message-error {
+    @apply bg-red-50 border-red-300 dark:bg-red-100 dark:border-red-500;
+  }
+
+  .mdx-message-error > p {
+    @apply text-red-900 dark:text-red-900;
+  }
 }

package/client/theme-doc/tailwind.out.css

@@ -515,10 +515,110 @@ Ensure the default browser behavior of the `hidden` attribute.
   display: none;
 }
 
+.mdx-message {
+  border-left-width: 8px;
+}
+
 .mdx-message > p {
   margin-top: 0px;
 }
 
+.mdx-message-info {
+  --tw-border-opacity: 1;
+  border-color: rgb(147 197 253 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
+}
+
+.dark .mdx-message-info {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
+.mdx-message-info > p {
+  --tw-text-opacity: 1;
+  color: rgb(30 58 138 / var(--tw-text-opacity));
+}
+
+.dark .mdx-message-info > p {
+  --tw-text-opacity: 1;
+  color: rgb(30 58 138 / var(--tw-text-opacity));
+}
+
+.mdx-message-success {
+  --tw-border-opacity: 1;
+  border-color: rgb(134 239 172 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
+}
+
+.dark .mdx-message-success {
+  --tw-border-opacity: 1;
+  border-color: rgb(34 197 94 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+}
+
+.mdx-message-success > p {
+  --tw-text-opacity: 1;
+  color: rgb(20 83 45 / var(--tw-text-opacity));
+}
+
+.dark .mdx-message-success > p {
+  --tw-text-opacity: 1;
+  color: rgb(20 83 45 / var(--tw-text-opacity));
+}
+
+.mdx-message-warning {
+  --tw-border-opacity: 1;
+  border-color: rgb(253 186 116 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 247 237 / var(--tw-bg-opacity));
+}
+
+.dark .mdx-message-warning {
+  --tw-border-opacity: 1;
+  border-color: rgb(249 115 22 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
+}
+
+.mdx-message-warning > p {
+  --tw-text-opacity: 1;
+  color: rgb(124 45 18 / var(--tw-text-opacity));
+}
+
+.dark .mdx-message-warning > p {
+  --tw-text-opacity: 1;
+  color: rgb(124 45 18 / var(--tw-text-opacity));
+}
+
+.mdx-message-error {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 165 165 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+}
+
+.dark .mdx-message-error {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
+.mdx-message-error > p {
+  --tw-text-opacity: 1;
+  color: rgb(127 29 29 / var(--tw-text-opacity));
+}
+
+.dark .mdx-message-error > p {
+  --tw-text-opacity: 1;
+  color: rgb(127 29 29 / var(--tw-text-opacity));
+}
+
 .fixed {
   position: fixed;
 }
@@ -560,10 +660,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   top: 3rem;
 }
 
-.top-16 {
-  top: 4rem;
-}
-
 .right-2 {
   right: 0.5rem;
 }
@@ -905,6 +1001,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   overflow: hidden;
 }
 
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
 .overflow-x-hidden {
   overflow-x: hidden;
 }
@@ -985,16 +1085,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(239 246 255 / var(--tw-bg-opacity));
 }
 
-.bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
-.bg-blue-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
-}
-
 .bg-gray-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -1015,21 +1105,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
-.bg-green-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
-}
-
-.bg-orange-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 247 237 / var(--tw-bg-opacity));
-}
-
-.bg-red-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1205,26 +1280,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(147 197 253 / var(--tw-text-opacity));
 }
 
-.text-blue-900 {
-  --tw-text-opacity: 1;
-  color: rgb(30 58 138 / var(--tw-text-opacity));
-}
-
-.text-green-900 {
-  --tw-text-opacity: 1;
-  color: rgb(20 83 45 / var(--tw-text-opacity));
-}
-
-.text-orange-900 {
-  --tw-text-opacity: 1;
-  color: rgb(124 45 18 / var(--tw-text-opacity));
-}
-
-.text-red-900 {
-  --tw-text-opacity: 1;
-  color: rgb(127 29 29 / var(--tw-text-opacity));
-}
-
 .opacity-0 {
   opacity: 0;
 }
@@ -1267,10 +1322,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   outline-offset: 2px;
 }
 
-.outline-0 {
-  outline-width: 0px;
-}
-
 .blur {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1626,7 +1677,10 @@ article a:hover {
 }
 
 article a {
-  background-image: linear-gradient(transparent 60%, rgba(130, 199, 255, 0.28) 55%);
+  background-image: linear-gradient(
+    transparent 60%,
+    rgba(130, 199, 255, 0.28) 55%
+  );
 }
 
 .link-with-underline {
@@ -1652,7 +1706,10 @@ article a {
 }
 
 .link-with-underline {
-  background-image: linear-gradient(transparent 60%, rgba(130, 199, 255, 0.28) 55%);
+  background-image: linear-gradient(
+    transparent 60%,
+    rgba(130, 199, 255, 0.28) 55%
+  );
 }
 
 /*article pre {*/
@@ -1684,7 +1741,7 @@ article hr {
 }
 
 html {
-  scroll-behavior: smooth
+  scroll-behavior: smooth;
 }
 
 :root {
@@ -1693,7 +1750,12 @@ html {
 
 /** Anchor with offset for headings */
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   scroll-margin-top: calc(var(--anchor-offset) + 88px);
 }
 
@@ -1987,9 +2049,9 @@ h1, h2, h3, h4, h5, h6 {
     width: 75%;
   }
 
-  .lg\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
+  .lg\:px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
   }
 
   .lg\:py-12 {

package/client/theme-doc/useLanguage.ts

@@ -1,3 +1,5 @@
+// @ts-ignore
+import { history } from 'umi';
 import { useThemeContext } from './context';
 
 interface useLanguageResult {
@@ -33,22 +35,25 @@ function useLanguage(): useLanguageResult {
 
     // 切换到默认语言
     if (locale === languages[0].locale && isFromPath) {
+      window.localStorage.removeItem('umi_locale');
       let p = location.pathname.split('/');
       p.shift();
       p.shift();
-      window.location.pathname = p.join('/');
+      history.push('/' + p.join('/'));
       return;
     }
 
+    window.localStorage.setItem('umi_locale', locale);
+
     // 当前在默认语言，切换到其他语言
     if (!isFromPath) {
-      window.location.pathname = locale + location.pathname;
+      history.push('/' + locale + location.pathname);
       return;
     }
 
     let p = location.pathname.split('/');
     p[1] = locale;
-    window.location.pathname = p.join('/');
+    history.push('/' + p.join('/'));
   }
 
   function render(key: string) {

package/compiled/@mdx-js/mdx/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Compositor, Inc. and Vercel, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.