feat(plugin-docs): Added announcement
MODIFY
packages/plugin-docs/client/theme-doc/Layout.tsx
packages/plugin-docs/client/theme-doc/Layout.tsx
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>

ADD
packages/plugin-docs/client/theme-doc/components/Announcement.tsx
+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;

MODIFY
packages/plugin-docs/client/theme-doc/context.ts
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;

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