From aaad57fc4dd24957cb66a68be077aaeee28baa2d Mon Sep 17 00:00:00 2001 From: DefectingCat Date: Sun, 21 Nov 2021 22:16:35 +0800 Subject: [PATCH] Add dark mode * add dark mode switch button * modify footer * fix nav menu opening issue * add paging number * remove post card a link focus shadow * add _document * remove archive card border on last child * add post image zoom margin on desktop * add post index image * remove TOC scroll bar on firefox --- .eslintrc.json | 6 +- Chakra.tsx | 38 ++++++ assets/css/rua.css | 55 +++++---- components/ArchiveCard.tsx | 20 ++- components/Footer.tsx | 2 +- components/NavBar.tsx | 45 +++++-- components/Paging.tsx | 11 +- components/PostCard.tsx | 21 +++- components/post/CopyButton.tsx | 6 +- layouts/HomeLayout.tsx | 5 +- lib/hooks/useGetColors.ts | 35 ++++++ lib/theme.ts | 42 +++++++ pages/_app.tsx | 22 +--- pages/_document.tsx | 19 +++ pages/about.tsx | 5 +- pages/archive.module.css | 3 + pages/archive.tsx | 7 +- pages/posts/[slug].tsx | 15 ++- .../为React造一个迷你路由器/react-router.svg | 116 ++++++++++++++++++ ...端的Web应用路由-为React打造一个迷你路由器.md | 1 + styles/globals.css | 4 - 21 files changed, 397 insertions(+), 81 deletions(-) create mode 100644 Chakra.tsx create mode 100644 lib/hooks/useGetColors.ts create mode 100644 lib/theme.ts create mode 100644 pages/_document.tsx create mode 100644 pages/archive.module.css create mode 100644 public/images/为React造一个迷你路由器/react-router.svg diff --git a/.eslintrc.json b/.eslintrc.json index dafcc05..d98e2ac 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,6 +1,10 @@ { "extends": ["next", "prettier"], "rules": { - "react-hooks/rules-of-hooks": "off" + "react-hooks/rules-of-hooks": "off", + "no-unused-vars": [ + "warn", + { "vars": "all", "args": "after-used", "ignoreRestSiblings": false } + ] } } diff --git a/Chakra.tsx b/Chakra.tsx new file mode 100644 index 0000000..e5417e6 --- /dev/null +++ b/Chakra.tsx @@ -0,0 +1,38 @@ +import { + ChakraProvider, + cookieStorageManager, + localStorageManager, +} from '@chakra-ui/react'; +import { GetServerSidePropsContext } from 'next'; +import { ReactNode } from 'react'; +import theme from './lib/theme'; + +interface ChakraProps { + cookies?: string; + children: ReactNode; +} + +export const Chakra = ({ children, cookies }: ChakraProps) => { + return ( + + {children} + + ); +}; + +export type ServerSideProps = { props: T } | Promise<{ props: T }>; + +export function getServerSideProps({ + req, +}: GetServerSidePropsContext): ServerSideProps<{ cookies?: string }> { + return { + props: { + cookies: req.headers.cookie ?? '', + }, + }; +} diff --git a/assets/css/rua.css b/assets/css/rua.css index b28ebf7..50843fa 100644 --- a/assets/css/rua.css +++ b/assets/css/rua.css @@ -1,23 +1,24 @@ :root { - --blcqd-bg-color: #f8f8f8; + --text-color: var(--chakra-colors-gray-600); + --heading-color: #464b1f; + --block-bg: linear-gradient(#fbebef, #dff0f5); + --block-bg-color: #f8f8f8; + --code-bg: var(--chakra-colors-gray-100); + --code-border-color: #e7eaed; + --shadow-color: #c3c5c7; --checkbox-color: #f8a9b5; --checked-font-color: #eee; --bg-color: #ffffff; /*改变背景色*/ - --text-color: #333333; /*改变文字颜色*/ --md-char-color: #c7c5c5; /*改变元字符的颜色，例如 markdown 中的“*”*/ --meta-content-color: #c7c5c5; /*改变元内容的颜色，例如 markdown 中的图像文本和链接地址*/ - --primary-color: #428bca; /*主按钮的颜色*/ --primary-btn-border-color: #285e8e; --primary-btn-text-color: #fff; - --window-border: 1px solid #eee; /*边栏等的边框*/ - --active-file-bg-color: #eee; /*文件树或文件列表中当前项的背景色*/ --active-file-text-color: inherit; --active-file-border-color: #777; - --side-bar-bg-color: var(--bg-color); /*改变边栏颜色*/ --item-hover-bg-color: rgba( 229, @@ -29,6 +30,16 @@ --monospace: monospace; /*代码的等宽字体*/ } +/* With Chakra dark mode */ +body.chakra-ui-dark { + --text-color: var(--chakra-colors-whiteAlpha-800); + --heading-color: var(--chakra-colors-whiteAlpha-800); + --block-bg: linear-gradient(#c395a1, #8e9fa3); + --block-bg-color: #888888; + --code-bg: var(--chakra-colors-gray-500); + --code-border-color: #919191; +} + ::selection { color: unset; background: rgba(33, 150, 243, 0.2); @@ -46,7 +57,6 @@ src: url('ava-diana/Quicksand/Quicksand-Bold.ttf'); } */ -html， body, #write { /* font-family: "Quicksand",'Arial Hebrew Scholar'; */ font-size: 16px; @@ -68,7 +78,7 @@ html， body, margin: 16px; max-height: 40rem; overflow: auto; - scrollbar-width: 0; + scrollbar-width: none; } #table-of-contents + ul li { list-style-type: none; @@ -137,7 +147,7 @@ html， body, text-transform: uppercase; margin-top: 4rem; margin-bottom: 4rem; - color: #464b1f; + color: var(--heading-color); } #write h2 { @@ -147,7 +157,7 @@ html， body, line-height: 2rem; margin: 1.5rem 0; /*text-transform: uppercase;*/ - color: #464b1f; + color: var(--heading-color); } #write h3 { @@ -157,7 +167,7 @@ html， body, line-height: 3rem; /*text-transform: uppercase;*/ /* margin-left: 1rem; */ - color: #464b1f; + color: var(--heading-color); } #write h4 { @@ -168,13 +178,13 @@ html， body, /*text-transform: uppercase;*/ margin-top: 1rem; /* margin-left: 3rem; */ - color: #464b1f; + color: var(--heading-color); } #write h5 { font-size: 1.15rem; /*text-transform: uppercase;*/ - color: #464b1f; + color: var(--heading-color); /* margin-left: 3.5rem; */ } @@ -182,7 +192,7 @@ html， body, font-size: 1rem; /*text-transform: uppercase;*/ /* margin-left: 4rem; */ - color: #464b1f; + color: var(--heading-color); } #write p { @@ -199,7 +209,7 @@ html， body, width: calc(0.1rem + 2.43px); height: 100%; transform: translateX(calc(-0.05rem - 1.215px)); - background-image: linear-gradient(#fbebef, #dff0f5); + background-image: var(--block-bg); border-radius: calc(0.5rem + 0.25%) 0 0 calc(0.5rem + 0.25%); z-index: 1; } @@ -217,7 +227,7 @@ html， body, padding: 1rem calc(0.5rem + 5.13px); /*border-left: solid .5rem var(--select-text-bg-color);*/ /*border-radius: .5rem 1rem 1rem .5rem;*/ - background-color: var(--blcqd-bg-color); + background-color: var(--block-bg-color); line-height: 1.6; /*box-shadow: 3px 3px 3px 1px var(--shadow-color);*/ border-radius: 0 calc(0.5rem + 0.25%) calc(0.5rem + 0.25%) 0; @@ -529,24 +539,17 @@ div.cm-s-inner span.CodeMirror-matchingbracket { #write pre code { padding: 6px 10px; - background-color: var(--chakra-colors-gray-100); + background-color: var(--code-bg); } .md-fences, #write code, #write tt { - border: 1px solid #e7eaed; + border: 1px solid var(--code-border-color); border-radius: 6px; padding: 0 4px; font-size: 0.9em; - background-color: var(--chakra-colors-gray-200); -} - -.md-fences { - margin-bottom: 15px; - margin-top: 15px; - padding-top: 8px; - padding-bottom: 6px; + background-color: var(--code-bg); } /*mathjax-block*/ diff --git a/components/ArchiveCard.tsx b/components/ArchiveCard.tsx index 1a39016..703056e 100644 --- a/components/ArchiveCard.tsx +++ b/components/ArchiveCard.tsx @@ -5,6 +5,7 @@ import Date from './DateFormater'; import { useDispatch } from 'react-redux'; import { setFromPath } from '../features/router/routerSlice'; import { useRouter } from 'next/router'; +import useGetColors from '../lib/hooks/useGetColors'; interface Props { post: AllPostsData; @@ -14,6 +15,8 @@ const ArchiveCard: FC = ({ post }) => { const dispatch = useDispatch(); const router = useRouter(); + const { borderColor, headingColor } = useGetColors(); + const goToPost: MouseEventHandler = (e) => { e.preventDefault(); dispatch(setFromPath(location.pathname)); @@ -22,18 +25,25 @@ const ArchiveCard: FC = ({ post }) => { return ( <> - - + + - + {post.title} diff --git a/components/Footer.tsx b/components/Footer.tsx index 0990d05..4cd7668 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -10,7 +10,7 @@ const Footer: FC = () => { ©{new Date().getFullYear()} 小肥羊 - Powered by Next.js ❤️ + Powered by Next.js ❤️ Chakra UI diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 874f2df..66c6c82 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -9,11 +9,14 @@ import { useDisclosure, Collapse, useMediaQuery, + useColorMode, + Button, } from '@chakra-ui/react'; import UseAnimations from 'react-useanimations'; import menu2 from 'react-useanimations/lib/menu2'; -import { FiHome, FiArchive, FiUser } from 'react-icons/fi'; +import { FiHome, FiArchive, FiUser, FiSun, FiMoon } from 'react-icons/fi'; import Link from 'next/link'; +import useGetColors from '../lib/hooks/useGetColors'; const menu = [ { @@ -38,17 +41,21 @@ const menu = [ const NavBar: FC = () => { const [isLargerThan768] = useMediaQuery('(min-width: 768px)'); - const { isOpen, onToggle } = useDisclosure(); + const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: false }); + + const { colorMode, toggleColorMode } = useColorMode(); + + const { boxBg, bioColor, textColor, headingColor } = useGetColors(); useEffect(() => { - isLargerThan768 ? onToggle() : void 0; + if (!isOpen && isLargerThan768) onToggle(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [isLargerThan768]); return ( <> { bottom={0} right={0} rounded={'full'} - bg="white" + bg={boxBg} h="40px" w="40px" justify="center" @@ -82,21 +89,36 @@ const NavBar: FC = () => { - - 肥羊 - - This is bio. + + + 肥羊 + + + + + 一条咸鱼. {/* Menu */} {menu.map((item) => { @@ -107,7 +129,6 @@ const NavBar: FC = () => { alignItems="center" justifyContent={['unset', null, 'space-between']} fontSize={['18', null, '22']} - color="gray.600" my={['0.5rem', null, '0.5rem']} cursor="pointer" > diff --git a/components/Paging.tsx b/components/Paging.tsx index 06fd621..cb6b42b 100644 --- a/components/Paging.tsx +++ b/components/Paging.tsx @@ -1,6 +1,7 @@ import { useRouter } from 'next/router'; import { FC } from 'react'; -import { Button, Flex } from '@chakra-ui/react'; +import { Button, Flex, Text } from '@chakra-ui/react'; +import useGetColors from '../lib/hooks/useGetColors'; interface Props { allPages: number; @@ -11,6 +12,8 @@ const paging: FC = ({ allPages, num }) => { const router = useRouter(); const startIndex = Number(num); + const { textColor } = useGetColors(); + const goPrev = () => { startIndex == 2 ? router.push('/') : router.push(`/page/${startIndex - 1}`); }; @@ -20,7 +23,7 @@ const paging: FC = ({ allPages, num }) => { return ( <> - + {startIndex > 1 ? (