feat(plugin-docs): Added announcement (#326)

umijs · Jun 23, 2022 · c276bcc · c276bcc
1 parent 35cb033
commit c276bcc
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 0 deletions.
diff --git a/packages/plugin-docs/client/theme-doc/Layout.tsx b/packages/plugin-docs/client/theme-doc/Layout.tsx
@@ -1,5 +1,6 @@
 import cx from 'classnames';
 import React, { Fragment, useState } from 'react';
+import Announcement from './components/Announcement';
 import { ThemeContext } from './context';
 import Head from './Head';
 import Sidebar from './Sidebar';
@@ -23,6 +24,7 @@ export default (props: any) => {
            before:backdrop-blur-md before:absolute before:block dark:before:bg-opacity-[.85]
            before:w-full before:h-full before:z-[-1]"
         >
+          <Announcement />
           <Head setMenuOpened={setIsMenuOpened} isMenuOpened={isMenuOpened} />
         </div>
 

diff --git a/packages/plugin-docs/client/theme-doc/components/Announcement.tsx b/packages/plugin-docs/client/theme-doc/components/Announcement.tsx
@@ -0,0 +1,55 @@
+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);
+    }
+  }, []);
+
+  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;
diff --git a/packages/plugin-docs/client/theme-doc/context.ts b/packages/plugin-docs/client/theme-doc/context.ts
@@ -19,6 +19,10 @@ interface IContext {
       title: string;
       children: any[];
     }[];
+    announcement?: {
+      title: string;
+      link?: string;
+    };
   };
   location: {
     pathname: string;

diff --git a/theme.config.ts b/theme.config.ts
@@ -99,4 +99,8 @@ export default {
       ],
     },
   ],
+  announcement: {
+    title: 'Umi4 即将推出!!!',
+    link: 'https://github.com/umijs/umi-next',
+  },
 };