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

package/client/theme-doc/Toc.tsx

@@ -0,0 +1,63 @@
+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, '');
+}
+
+export default () => {
+  const { location, appData, themeConfig } = 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"
+    >
+      <Helmet>
+        <title>
+          {route.titles[0].title} | {themeConfig.title}
+        </title>
+      </Helmet>
+      <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>;
+};

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

@@ -0,0 +1,62 @@
+import cx from 'classnames';
+import React, { useEffect, useState } from 'react';
+import { useThemeContext } from '../context';
+
+function Announcement() {
+  const { themeConfig } = useThemeContext()!;
+
+  if (!themeConfig.announcement) {
+    return null;
+  }
+
+  const [closed, setClosed] = useState(false);
+
+  useEffect(() => {
+    if (!themeConfig.announcement) return;
+    const item = localStorage.getItem('closed_announcements');
+    const closed: string[] = item ? JSON.parse(item) : [];
+    if (closed.includes(themeConfig.announcement.title)) {
+      setClosed(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.style.setProperty(
+      '--anchor-offset',
+      (closed ? 0 : 28) + 'px',
+    );
+  }, [closed]);
+
+  function close(e: React.MouseEvent) {
+    e.preventDefault();
+    if (!themeConfig.announcement) return;
+    const item = localStorage.getItem('closed_announcements');
+    const closed: string[] = item ? JSON.parse(item) : [];
+    closed.push(themeConfig.announcement.title);
+    localStorage.setItem('closed_announcements', JSON.stringify(closed));
+    setClosed(true);
+  }
+
+  if (closed) return null;
+
+  return (
+    <div className="w-full py-1 bg-blue-200 dark:bg-blue-900 animate-pulse">
+      <p
+        className={cx(
+          'text-center dark:text-white text-sm font-bold ',
+          themeConfig.announcement.link && 'cursor-pointer',
+        )}
+        onClick={() => {
+          window.open(themeConfig.announcement?.link, '_blank');
+        }}
+      >
+        {themeConfig.announcement.title}
+      </p>
+      <button className="absolute right-2 top-0 px-8" onClick={close}>
+        x
+      </button>
+    </div>
+  );
+}
+
+export default Announcement;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+
+interface Feature {
+  icon: string;
+  title: string;
+  description: string;
+  link?: string;
+}
+
+/**
+ * Feature Item 组件是文档首页第二个 Feature 区块中的一个 Item，
+ * 从 docs/README.md 中使用 MDX 语法调用，必须被包含在 <Features /> 组件内
+ * */
+function FeatureItem(props: Feature) {
+  return (
+    <div className="w-full md:w-1/2 lg:w-1/3 flex flex-row items-center justify-center mb-8 lg:mb-16">
+      <div
+        className="flex flex-col w-5/6 lg:w-3/4 items-center
+      bg-white dark:bg-gray-800 py-12 px-6 justify-center
+      border-gray-300 dark:border-gray-500 border transition-all hover:scale-105
+      rounded-xl shadow-lg hover:shadow-2xl h-72 lg:h-96 dark:shadow-gray-700"
+      >
+        <img src={props.icon} className="w-8 h-8" alt="feature-icon" />
+        <p
+          className="text-3xl font-extrabold
+         mt-4 mb-8 text-gray-900 dark:text-gray-200"
+        >
+          {props.title}
+        </p>
+        <p className="text-center text-gray-600 text-sm lg:text-base dark:text-gray-400">
+          {props.description}
+        </p>
+        {props.link && (
+          <a
+            href={props.link}
+            target="_blank"
+            rel="noreferrer"
+            className="mt-8 link-with-underline"
+          >
+            深入了解
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default FeatureItem;

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

@@ -0,0 +1,44 @@
+import React, { PropsWithChildren } from 'react';
+
+/**
+ * Features 组件是文档首页第二个 Feature 区块的容器，
+ * 从 docs/README.md 中使用 MDX 语法调用，可在内部传入 <FeatureItem /> 组件
+ * */
+function Features(
+  props: PropsWithChildren<{ title?: string; subtitle?: string }>,
+) {
+  return (
+    <div className="w-screen py-36 features dark:features-dark min-h-screen">
+      {(props.title || props.subtitle) && (
+        <div className="mb-24 px-4">
+          {props.title && (
+            <p
+              className="text-4xl lg:text-5xl font-extrabold mb-4 text-center
+          text-gray-700 dark:text-gray-300"
+            >
+              {props.title}
+            </p>
+          )}
+          {props.subtitle && (
+            <p
+              className="text-lg lg:text-xl text-center
+          text-gray-500 dark:text-gray-400"
+            >
+              {props.subtitle}
+            </p>
+          )}
+        </div>
+      )}
+      <div className="w-full flex flex-row justify-center">
+        <div
+          className="w-full flex flex-row flex-wrap
+       features pb-12 dark:features-dark container"
+        >
+          {props.children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Features;

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

@@ -0,0 +1,152 @@
+import cx from 'classnames';
+import React, { useEffect, useState } from 'react';
+import { useThemeContext } from '../context';
+import Github from '../icons/github.svg';
+import HeroBackground from '../icons/hero-bg.svg';
+import Star from '../icons/star.png';
+
+interface HeroProps {
+  title?: string | string[];
+  description?: string;
+  githubRepo?: string;
+  buttons?: {
+    label: string;
+    href: string;
+  }[];
+}
+
+function Hero(props: HeroProps) {
+  const { components } = useThemeContext()!;
+  return (
+    <div
+      className="w-full h-[calc(100vh-60px)] bg-[rgb(16,37,62)] flex
+              flex-row items-center justify-center overflow-hidden"
+    >
+      <img
+        src={HeroBackground}
+        className="w-full h-full absolute top-0 left-0
+           z-10 object-cover blur-xl"
+        alt=""
+      />
+
+      <div className="px-8 container lg:px-32 xl:px-64 z-20">
+        <div className="flex flex-col items-center">
+          {typeof props.title === 'string' && (
+            <h1 className="text-white text-xl lg:text-7xl font-extrabold text-center">
+              {props.title}
+            </h1>
+          )}
+
+          {props.title instanceof Array &&
+            props.title.map((t, i) => (
+              <h1
+                className="text-white text-xl lg:text-7xl
+                  font-extrabold text-center"
+                key={i}
+              >
+                {t}
+              </h1>
+            ))}
+
+          {!props.title && <DefaultTitle />}
+
+          <p
+            className="text-white text-center my-12
+               opacity-70 text-lg text-center"
+          >
+            {props.description}
+          </p>
+
+          <div className="flex flex-row items-center">
+            {props.buttons?.map((button, i) => (
+              <components.Link to={button.href}>
+                <button
+                  key={i}
+                  className="text-white text-lg bg-blue-600 py-2 min-w-36 mx-4 px-4 rounded-xl shadow-xl
+                  shadow-blue-900 hover:shadow-blue-700 transition-all"
+                >
+                  {button.label}
+                </button>
+              </components.Link>
+            ))}
+
+            {props.githubRepo && <GithubStars repo={props.githubRepo} />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DefaultTitle() {
+  const [isPlugged, setPlugged] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setPlugged(true);
+    }, 100);
+  }, []);
+
+  return (
+    <>
+      <div className="flex flex-row mb-4">
+        <h1
+          className="text-white text-5xl lg:text-7xl
+              font-extrabold text-center"
+        >
+          一款
+        </h1>
+        <h1
+          className={cx(
+            'text-blue-300 text-5xl lg:text-7xl font-extrabold mx-1',
+            'transition-all duration-700 delay-100 text-center',
+            !isPlugged && 'translate-y-[-5rem]',
+          )}
+        >
+          插件化
+        </h1>
+        <h1
+          className="text-center text-white text-5xl
+              lg:text-7xl font-extrabold"
+        >
+          的
+        </h1>
+      </div>
+      <h1
+        className="text-center text-white text-3xl
+            lg:text-7xl font-extrabold"
+      >
+        企业级前端应用框架
+      </h1>
+    </>
+  );
+}
+
+function GithubStars(props: { repo: string }) {
+  const [stars, setStars] = useState<number>();
+
+  useEffect(() => {
+    refresh();
+  }, []);
+
+  async function refresh() {
+    try {
+      const res = await fetch('https://api.github.com/repos/' + props.repo);
+      setStars((await res.json()).stargazers_count);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  if (!stars) return null;
+
+  return (
+    <div className="flex flex-row items-center">
+      <img src={Github} className="w-4 h-4 mr-2 invert" alt="" />
+      <p className="text-white">{stars}</p>
+      <img src={Star} className="w-4 h-4 ml-2 invert" alt="" />
+    </div>
+  );
+}
+
+export default Hero;

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

@@ -0,0 +1,57 @@
+import React, { PropsWithChildren } from 'react';
+
+enum MessageType {
+  Info = 'info',
+  Success = 'success',
+  Warning = 'warning',
+  Error = 'error',
+}
+
+interface MessageProps {
+  type?: MessageType;
+  emoji?: string;
+}
+
+function Message(props: PropsWithChildren<MessageProps>) {
+  let bgColor = 'bg-blue-50';
+  let textColor = 'text-blue-900';
+
+  switch (props.type) {
+    case MessageType.Success:
+      bgColor = 'bg-green-50';
+      textColor = 'text-green-900';
+      break;
+    case MessageType.Warning:
+      bgColor = 'bg-orange-50';
+      textColor = 'text-orange-900';
+      break;
+    case MessageType.Error:
+      bgColor = 'bg-red-50';
+      textColor = 'text-red-900';
+      break;
+  }
+
+  const messageText =
+    typeof props.children === 'string'
+      ? props.children
+      : (props.children as React.ReactElement).props.children;
+
+  return (
+    <>
+      <div
+        className={`w-full py-3 px-4 ${bgColor} ${textColor} rounded-lg my-4 mdx-message`}
+      >
+        <p>
+          {props.emoji && (
+            <span role="img" className="mr-3 inline">
+              {props.emoji}
+            </span>
+          )}
+          {messageText}
+        </p>
+      </div>
+    </>
+  );
+}
+
+export default Message;

package/client/theme-doc/context.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+
+interface IContext {
+  appData: any;
+  components: any;
+  themeConfig: {
+    title: string;
+    description?: string;
+    github: string;
+    // 键盘搜索的快捷键，参考 https://github.com/madrobby/keymaster
+    searchHotKey?: string | { macos: string; windows: string };
+    logo: string;
+    // 在设置文件中声明该项目的国际化功能支持的语言
+    i18n?: { locale: string; text: string }[];
+    // 插件会从 docs/locales 内将所有 json 文件注入到 themeConfig 中
+    // 供 useLanguage 使用
+    locales: { [locale: string]: { [key: string]: string } };
+    navs: {
+      path: string;
+      title: string;
+      children: any[];
+    }[];
+    announcement?: {
+      title: string;
+      link?: string;
+    };
+  };
+  location: {
+    pathname: string;
+    search: string;
+    hash: string;
+    key: string;
+  };
+}
+
+export const ThemeContext = React.createContext<IContext | null>(null);
+
+export function useThemeContext(): IContext | null {
+  return React.useContext(ThemeContext);
+}

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

@@ -0,0 +1,31 @@
+/**
+  FireFox CSS backdrop-filter polyfill
+  https://www.cnblogs.com/coco1s/p/14953143.html
+*/
+
+.g-glossy-firefox, .g-glossy-firefox-cover {
+  display: none;
+}
+
+@supports (background: -moz-element(#article-body)) {
+  .g-glossy-firefox-cover {
+    display: block;
+    position: fixed;
+    top: var(--anchor-offset);
+    width: 100%;
+    height: 72px;
+    z-index: 22;
+    background-color: white;
+  }
+
+  .g-glossy-firefox {
+    display: block;
+    position: fixed;
+    width: 100%;
+    top: var(--anchor-offset);
+    height: 72px;
+    z-index: 24;
+    background: -moz-element(#article-body) no-repeat top;
+    filter: blur(10px);
+  }
+}

package/client/theme-doc/icons/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>

package/client/theme-doc/icons/hero-bg.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='560' preserveAspectRatio='none'><g mask='url(&quot;#SvgjsMask1023&quot;)' fill='none'><path fill='#0e2a47' d='M0 0h1440v560H0z'/><path d='M413.428 557.952c56.349 2.363 117.478-15.272 143.791-65.157 25.203-47.779-1.647-102.82-31.406-147.903-26.052-39.466-65.158-67.501-112.385-69.928-52.104-2.678-107.444 12.546-134.345 57.249-27.571 45.818-17.319 103.386 10.029 149.338 26.661 44.798 72.231 74.217 124.316 76.401' fill='rgba(28, 83, 142, 0.4)' class='triangle-float1'/><path d='M1204.349 663.806c45.235-2.564 80.474-33.126 104.879-71.299 27.068-42.339 51.742-93.018 28.733-137.693-24.374-47.325-80.512-69.705-133.612-65.947-47.494 3.362-80.266 41.77-104.43 82.795-24.665 41.876-46.487 91.325-23.279 134.026 23.938 44.044 77.66 60.954 127.709 58.118' fill='rgba(28, 83, 142, 0.4)' class='triangle-float3'/><path d='M800.877 606.466l107.73-1.88-56.685-160.657zM495.21 345.445l-129.014-20.434-20.434 129.015 129.015 20.434z' fill='rgba(28, 83, 142, 0.4)' class='triangle-float1'/><path d='M1062.305 445.605c37.402.243 75.242-11.039 95.762-42.31 22.551-34.366 27.947-79.249 7.345-114.817-20.56-35.494-62.158-52.911-103.107-50.508-37.151 2.18-65.637 29.169-84.081 61.492-18.245 31.976-27.911 70.692-9.552 102.603 18.397 31.976 56.743 43.301 93.633 43.54' fill='rgba(28, 83, 142, 0.4)' class='triangle-float2'/><path d='M1130.596 71.094L993.43 21.169l-49.925 137.167 137.168 49.925z' fill='rgba(28, 83, 142, 0.4)' class='triangle-float3'/><path d='M806.872 135.494c15.365-.225 23.819-16.184 31.095-29.72 6.744-12.546 12.843-26.879 6.061-39.405-7.025-12.975-22.411-17.487-37.156-18.03-16.009-.589-34.387 1.132-42.219 15.107-7.736 13.804 1.506 29.608 9.506 43.261 7.871 13.432 17.147 29.015 32.713 28.787' fill='rgba(28, 83, 142, 0.4)' class='triangle-float2'/><path d='M-23.83 365.43l114.888 39.56 39.558-114.888L15.73 250.544z' fill='rgba(28, 83, 142, 0.4)' class='triangle-float3'/></g><defs><style>@keyframes float1{0%,to{transform:translate(0,0)}50%{transform:translate(-10px,0)}}@keyframes float2{0%,to{transform:translate(0,0)}50%{transform:translate(-5px,-5px)}}@keyframes float3{0%,to{transform:translate(0,0)}50%{transform:translate(0,-10px)}}.triangle-float1{animation:float1 5s infinite}.triangle-float2{animation:float2 4s infinite}.triangle-float3{animation:float3 6s infinite}</style><mask id='SvgjsMask1023'><path fill='#fff' d='M0 0h1440v560H0z'/></mask></defs></svg>

package/client/theme-doc/index.ts

@@ -0,0 +1,8 @@
+import './firefox-polyfill.css';
+import './tailwind.out.css';
+// Components
+export { default as FeatureItem } from './components/FeatureItem';
+export { default as Features } from './components/Features';
+export { default as Hero } from './components/Hero';
+export { default as Message } from './components/Message';
+export { default as $Layout } from './Layout';

package/client/theme-doc/tailwind.css

@@ -0,0 +1,153 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+article h1 {
+  @apply text-4xl font-bold tracking-tight mt-2 my-4 dark:text-white;
+}
+
+article h2 {
+  @apply text-3xl font-semibold tracking-tight mt-10 dark:text-white;
+  @apply pb-1 border-b;
+}
+
+article h3 {
+  @apply text-2xl font-semibold tracking-tight mt-8 dark:text-white;
+}
+
+article h4 {
+  @apply text-xl font-semibold tracking-tight mt-8 dark:text-white;
+}
+
+article h5 {
+  @apply text-lg font-semibold tracking-tight mt-8 dark:text-white;
+}
+
+article h6 {
+  @apply text-base font-semibold tracking-tight mt-8 dark:text-white;
+}
+
+article p {
+  @apply text-base leading-8 mt-4 text-gray-700 dark:text-white;
+}
+
+article ul {
+  @apply list-disc ml-6 mt-6 dark:text-white;
+}
+
+article li {
+  @apply mt-2 dark:text-white;
+}
+
+article ol {
+  @apply list-decimal ml-6 mt-6 dark:text-white;
+}
+
+article blockquote {
+  @apply italic pl-6 border-l-2 border-gray-300 text-gray-700 dark:text-white;
+}
+
+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;
+  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 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;
+}
+
+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 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 a code {
+  @apply text-current no-underline dark:text-white;
+}
+
+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%);
+}
+
+.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%);
+}
+
+/*article pre {*/
+/*  @apply pt-12;*/
+/*}*/
+
+article hr {
+  @apply my-8;
+}
+
+.fadeout {
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 10%,
+    black 80%,
+    transparent 100%
+  );
+}
+
+html {
+  scroll-behavior: smooth
+}
+
+:root {
+  --anchor-offset: 28px;
+}
+
+/** Anchor with offset for headings */
+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%);
+    background-size: 6px 6px;
+    width: 100%;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .features {
+    background-image: radial-gradient(#f8f8f5 20%, transparent 20%);
+    background-color: white;
+    background-size: 6px 6px;
+    width: 100%;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .features::-webkit-scrollbar {
+    display: none;
+  }
+
+  .mdx-message > p {
+    @apply mt-0;
+  }
+}