From b5eb004c056ff812ed845128edd402d34a7cb1f2 Mon Sep 17 00:00:00 2001 From: Xhofe Date: Sat, 12 Mar 2022 21:09:12 +0800 Subject: [PATCH] feat: add announcement --- package.json | 1 + src/App.tsx | 2 ++ .../styles => components}/github-markdown.css | 0 src/components/markdown.tsx | 22 +++++++++++++++++ src/pages/list/context.tsx | 17 ++++++++++++- src/pages/list/preview/markdown.tsx | 24 +++++-------------- yarn.lock | 17 +++++++++++++ 7 files changed, 64 insertions(+), 19 deletions(-) rename src/{pages/list/styles => components}/github-markdown.css (100%) create mode 100644 src/components/markdown.tsx diff --git a/package.json b/package.json index 6d110cb..f59d932 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index 834a8bc..f2335ed 100644 --- a/src/App.tsx +++ b/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 (
+
{ + return ( + + + {props.children} + + + ); +}; + +export default Markdown; diff --git a/src/pages/list/context.tsx b/src/pages/list/context.tsx index 466132d..9917adc 100644 --- a/src/pages/list/context.tsx +++ b/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([]); + 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) => {getSetting("announcement")}, { + position: "top-right", + style: darkMode + ? { + borderRadius: "10px", + background: "#333", + color: "#fff", + } + : undefined, + }); + } if (getSetting("hide files")) { let hideFiles = getSetting("hide files") .split(/\n/g) diff --git a/src/pages/list/preview/markdown.tsx b/src/pages/list/preview/markdown.tsx index 49b99d2..3378040 100644 --- a/src/pages/list/preview/markdown.tsx +++ b/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) => { > ) : ( - - {content} - + {content} )} @@ -119,4 +107,4 @@ const Markdown = ({ file, readme }: FileProps) => { } }; -export default Markdown; +export default MarkdownPreview; diff --git a/yarn.lock b/yarn.lock index 55c80bc..92a5b82 100644 --- a/yarn.lock +++ b/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 @@ react-focus-lock@2.5.2: 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"