feat: add announcement

package.json

@@ -40,6 +40,7 @@
     "react": "^17.0.0",
     "react-contexify": "^5.0.0",
     "react-dom": "^17.0.0",
+    "react-hot-toast": "^2.2.0",
     "react-i18next": "^11.15.5",
     "react-icons": "^4.3.1",
     "react-jinke-music-player": "^4.24.2",

src/App.tsx

@@ -4,10 +4,12 @@ import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
 const Index = lazy(() => import("./pages/list"));
 const Manage = lazy(() => import("./pages/manage"));
 import { ClimbingBoxLoader } from "react-spinners";
+import { Toaster } from 'react-hot-toast';
 
 function App() {
   return (
     <div className="App">
+      <div><Toaster/></div>
       <Router>
         <Suspense
           fallback={

src/components/markdown.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import rehypeHighlight from "rehype-highlight";
+import { Box } from "@chakra-ui/react";
+import "./github-markdown.css";
+
+const Markdown = (props: { children: string }) => {
+  return (
+    <Box className="markdown-body">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeRaw, [rehypeHighlight, { ignoreMissing: true }]]}
+      >
+        {props.children}
+      </ReactMarkdown>
+    </Box>
+  );
+};
+
+export default Markdown;

src/pages/list/context.tsx

@@ -1,4 +1,4 @@
-import { Center, Spinner, useToast } from "@chakra-ui/react";
+import { Center, Spinner, useColorModeValue, useToast } from "@chakra-ui/react";
 import React, {
   createContext,
   useState,
@@ -11,6 +11,8 @@ import request from "../../utils/public";
 import admin from "../../utils/admin";
 import useLocalStorage from "../../hooks/useLocalStorage";
 import { ClimbingBoxLoader } from "react-spinners";
+import htoast from "react-hot-toast";
+import Markdown from "~/components/markdown";
 
 export interface File {
   name: string;
@@ -166,6 +168,7 @@ const IContextProvider = (props: any) => {
   });
 
   const [hideFiles, setHideFiles] = React.useState<RegExp[]>([]);
+  const darkMode = useColorModeValue(false, true);
 
   const initialSettings = useCallback(() => {
     request
@@ -190,6 +193,18 @@ const IContextProvider = (props: any) => {
             link.href = getSetting("favicon");
             document.getElementsByTagName("head")[0].appendChild(link);
           }
+          if (getSetting("announcement")) {
+            htoast((t) => <Markdown>{getSetting("announcement")}</Markdown>, {
+              position: "top-right",
+              style: darkMode
+                ? {
+                    borderRadius: "10px",
+                    background: "#333",
+                    color: "#fff",
+                  }
+                : undefined,
+            });
+          }
           if (getSetting("hide files")) {
             let hideFiles = getSetting("hide files")
               .split(/\n/g)

src/pages/list/preview/markdown.tsx

@@ -5,18 +5,14 @@ import { Spinner, useColorModeValue } from "@chakra-ui/react";
 import { Box, Center } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import useFileUrl from "../../../hooks/useFileUrl";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import rehypeRaw from "rehype-raw";
-import rehypeHighlight from "rehype-highlight";
-import "../styles/github-markdown.css";
-import { chakra, FormControl, FormLabel, Switch } from "@chakra-ui/react";
+import { FormControl, FormLabel, Switch } from "@chakra-ui/react";
+import Markdown from "~/components/markdown";
 // import jschardet from "jschardet";
 
 export const type = 5;
 export const exts = [];
 
-const Markdown = ({ file, readme }: FileProps) => {
+const MarkdownPreview = ({ file, readme }: FileProps) => {
   const theme = useColorModeValue("light", "dark");
   const [content, setContent] = React.useState("");
   const [srcDoc, setSrcDoc] = React.useState("");
@@ -57,7 +53,7 @@ const Markdown = ({ file, readme }: FileProps) => {
           setContent(res);
         } else {
           setContent(
-            "```" + file.name.split(".").pop() + "\n" + res + "\n" + "```",
+            "```" + file.name.split(".").pop() + "\n" + res + "\n" + "```"
           );
         }
       });
@@ -97,15 +93,7 @@ const Markdown = ({ file, readme }: FileProps) => {
           ></iframe>
         ) : (
           <Box className="markdown-body">
-            <ReactMarkdown
-              remarkPlugins={[remarkGfm]}
-              rehypePlugins={[
-                rehypeRaw,
-                [rehypeHighlight, { ignoreMissing: true }],
-              ]}
-            >
-              {content}
-            </ReactMarkdown>
+            <Markdown>{content}</Markdown>
           </Box>
         )}
       </Box>
@@ -119,4 +107,4 @@ const Markdown = ({ file, readme }: FileProps) => {
   }
 };
 
-export default Markdown;
+export default MarkdownPreview;

yarn.lock

@@ -1055,6 +1055,11 @@
   resolved "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
+"@types/node@^17.0.21":
+  version "17.0.21"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.21.tgz#864b987c0c68d07b4345845c3e63b75edd143644"
+  integrity sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -1707,6 +1712,11 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
+goober@^2.1.1:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.8.tgz#e592c04d093cb38f77b38cfcb012b7811c85765e"
+  integrity sha512-S0C85gCzcfFCMSdjD/CxyQMt1rbf2qEg6hmDzxk2FfD7+7Ogk55m8ZFUMtqNaZM4VVX/qaU9AzSORG+Gf4ZpAQ==
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -2739,6 +2749,13 @@ [email protected]:
     use-callback-ref "^1.2.5"
     use-sidecar "^1.0.5"
 
+react-hot-toast@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.2.0.tgz#ab6f4caed4214b9534f94bb8cfaaf21b051e62b9"
+  integrity sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==
+  dependencies:
+    goober "^2.1.1"
+
 react-i18next@^11.15.5:
   version "11.15.5"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.15.5.tgz#3de940a1c5a27956d8265663ca67494881f385e8"