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

package/client/theme-doc/LangSwitch.tsx

@@ -25,7 +25,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/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;
 }
@@ -905,6 +1005,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 +1089,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 +1109,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 +1284,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;
 }
@@ -1626,7 +1685,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 +1714,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 +1749,7 @@ article hr {
 }
 
 html {
-  scroll-behavior: smooth
+  scroll-behavior: smooth;
 }
 
 :root {
@@ -1693,7 +1758,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 +2057,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 {
@@ -36,19 +38,19 @@ function useLanguage(): useLanguageResult {
       let p = location.pathname.split('/');
       p.shift();
       p.shift();
-      window.location.pathname = p.join('/');
+      history.push('/' + p.join('/'));
       return;
     }
 
     // 当前在默认语言，切换到其他语言
     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/dist/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -25,6 +29,20 @@ const fs_1 = __importStar(require("fs"));
 const path_1 = require("path");
 const markdown_1 = require("./markdown");
 exports.default = (api) => {
+    // 把用户当前有设置在 docs/locales 下的语系放到变量 locales 中，方便后续使用
+    const locales = {};
+    const localesPath = (0, path_1.join)(api.cwd, 'docs/locales');
+    if ((0, fs_1.existsSync)(localesPath)) {
+        fs_1.default.readdirSync(localesPath).forEach((file) => {
+            if (file.endsWith('.json')) {
+                const filePath = (0, path_1.join)(localesPath, file);
+                const content = fs_1.default.readFileSync(filePath).toString();
+                const json = JSON.parse(content);
+                const localeName = file.replace('.json', '');
+                locales[localeName] = json;
+            }
+        });
+    }
     api.modifyDefaultConfig((memo) => {
         memo.conventionRoutes = Object.assign(Object.assign({}, memo.conventionRoutes), { base: (0, path_1.join)(api.cwd, 'docs') });
         memo.mdx = {
@@ -56,6 +74,22 @@ exports.default = (api) => {
             }
         }
     });
+    // 检查路由是否存在其他语言，没有的话做 fallback 处理
+    api.modifyRoutes((r) => {
+        if (!locales)
+            return r;
+        for (const route in r) {
+            if (r[route].path.match(/^[a-z]{2}-[A-Z]{2}\/.*/))
+                continue;
+            const defaultLangFile = r[route].file.replace(/(.[a-z]{2}-[A-Z]{2})?.md$/, '');
+            Object.keys(locales).map((l) => {
+                if (r[defaultLangFile] && !r[defaultLangFile + '.' + l]) {
+                    r[defaultLangFile + '.' + l] = Object.assign(Object.assign({}, r[defaultLangFile]), { path: `/${l}/${r[defaultLangFile].path}` });
+                }
+            });
+        }
+        return r;
+    });
     api.onGenerateFiles(() => {
         var _a;
         // theme path
@@ -67,20 +101,7 @@ exports.default = (api) => {
         const themeConfigPath = (0, path_1.join)(api.cwd, 'theme.config.ts');
         const themeExists = (0, fs_1.existsSync)(themeConfigPath);
         // 将 docs/locales 目录下的 json 文件注入到 themeConfig.locales 中
-        let injectLocale = 'themeConfig.locales = {};';
-        const localesPath = (0, path_1.join)(api.cwd, 'docs/locales');
-        if ((0, fs_1.existsSync)(localesPath)) {
-            fs_1.default.readdirSync(localesPath).forEach((file) => {
-                if (file.endsWith('.json')) {
-                    const filePath = (0, path_1.join)(localesPath, file);
-                    const content = fs_1.default.readFileSync(filePath).toString();
-                    const json = JSON.parse(content);
-                    const localeName = file.replace('.json', '');
-                    injectLocale += `themeConfig.locales['${localeName}'] = ${JSON.stringify(json)};
-`;
-                }
-            });
-        }
+        let injectLocale = `themeConfig.locales = ${JSON.stringify(locales)};`;
         // exports don't start with $ will be MDX Component
         const [_, exports] = (0, bundler_utils_1.parseModuleSync)({
             content: (0, fs_1.readFileSync)(theme, 'utf-8'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/plugin-docs",
-  "version": "4.0.0-rc.3",
+  "version": "4.0.0-rc.4",
   "description": "@umijs/plugin-docs",
   "homepage": "https://github.com/umijs/umi-next/tree/master/packages/plugin-docs#readme",
   "bugs": "https://github.com/umijs/umi-next/issues",
@@ -33,7 +33,7 @@
     "classnames": "^2.3.1",
     "rehype-slug": "5.0.1",
     "tailwindcss": "^3.0.23",
-    "umi": "4.0.0-rc.3"
+    "umi": "4.0.0-rc.4"
   },
   "publishConfig": {
     "access": "public"