From 31da992952f751a5641da96847748315384680b5 Mon Sep 17 00:00:00 2001 From: Chocolate1999 <2816778271@qq.com> Date: Sun, 11 Sep 2022 14:49:34 +0800 Subject: [PATCH 1/2] feat: add new nav --- src/components/layout/Footer.tsx | 34 ++-- src/components/layout/Header.tsx | 16 +- .../{hader-nav/index.tsx => HeaderNav.tsx} | 4 +- src/components/layout/Icon.tsx | 27 ++++ src/components/layout/Layout.tsx | 13 +- .../layout/hader-nav/style.module.scss | 28 ---- src/components/layout/header-button/index.tsx | 20 --- .../layout/header-button/style.module.scss | 20 --- src/components/layout/style.module.css | 14 ++ src/pages/index.tsx | 150 +++++++++--------- src/pages/style.module.scss | 17 -- src/store/index.tsx | 12 -- src/styles/globals.css | 19 +-- 13 files changed, 162 insertions(+), 212 deletions(-) rename src/components/layout/{hader-nav/index.tsx => HeaderNav.tsx} (89%) create mode 100644 src/components/layout/Icon.tsx delete mode 100644 src/components/layout/hader-nav/style.module.scss delete mode 100644 src/components/layout/header-button/index.tsx delete mode 100644 src/components/layout/header-button/style.module.scss create mode 100644 src/components/layout/style.module.css delete mode 100644 src/pages/style.module.scss diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index ad2537a..71f69f1 100644 --- a/src/components/layout/Footer.tsx +++ b/src/components/layout/Footer.tsx @@ -1,15 +1,29 @@ export default function Footer() { return ( - <footer className='relative bottom-2 flex w-full justify-center text-gray-700 dark:text-gray-200'> - © {new Date().getFullYear()} By{' '} - <a - href='https://github.com/Chocolate1999' - target='_blank' - className='pl-1' - rel='noreferrer' - > - Chocolate - </a> + <footer className='mt-16 text-right text-[#b3b3b3] dark:text-gray-200'> + <section className='flex flex-col'> + <div> + <a + href='https://creativecommons.org/licenses/by-nc-sa/4.0/' + rel='noreferrer' + target='_blank' + > + CC BY-NC-SA 4.0 + </a>{' '} + {new Date().getFullYear()} + <a + href='https://github.com/Chocolate1999' + target='_blank' + className='pl-1' + rel='noreferrer' + > + © Chocolate + </a> + </div> + <a href='https://beian.miit.gov.cn/' rel='noreferrer' target='_blank'> + 湘ICP备20002952号 + </a> + </section> </footer> ); } diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index ccdb66e..97573ee 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -3,8 +3,8 @@ import { useMemo } from 'react'; import clsxm from '@/lib/clsxm'; -import HeaderNav from '@/components/layout/hader-nav'; -import HeaderButton from '@/components/layout/header-button'; +import HeaderNav from '@/components/layout/HeaderNav'; +import Icon from '@/components/layout/Icon'; export default function Header() { const docScroll = useScroll(); @@ -16,16 +16,18 @@ export default function Header() { return ( <header className={clsxm( - 'fixed top-0 z-50 w-full bg-transparent', + 'sticky top-0 z-50 w-full bg-transparent', isDocHover && 'solid border-b border-black border-opacity-[0.12] bg-white bg-opacity-[98] backdrop-blur-[40px]', 'dark:border-b dark:border-black dark:bg-[#060807]' )} > - <div className='layout flex h-[60px] items-center justify-between leading-[60px]'> - <HeaderNav /> - <HeaderButton /> - </div> + <section className='layout'> + <div className='mx-8 flex h-[60px] items-center justify-between leading-[60px]'> + <HeaderNav /> + <Icon /> + </div> + </section> </header> ); } diff --git a/src/components/layout/hader-nav/index.tsx b/src/components/layout/HeaderNav.tsx similarity index 89% rename from src/components/layout/hader-nav/index.tsx rename to src/components/layout/HeaderNav.tsx index 8e3f911..151c435 100644 --- a/src/components/layout/hader-nav/index.tsx +++ b/src/components/layout/HeaderNav.tsx @@ -8,10 +8,10 @@ const HeaderNav = () => { const navVal = useRecoilValue(navAtom); return ( - <div className='flex h-full w-auto flex-row items-center justify-center'> + <div className='flex h-full w-auto flex-row items-center justify-center gap-[24px]'> {navVal.map((item) => { return ( - <div className='pr-[32px]' key={item.name}> + <div key={item.name}> <UnstyledLink href={item.link}> <span className='hover:text-[#0066ff] dark:text-gray-100'> {item.name} diff --git a/src/components/layout/Icon.tsx b/src/components/layout/Icon.tsx new file mode 100644 index 0000000..abb91ce --- /dev/null +++ b/src/components/layout/Icon.tsx @@ -0,0 +1,27 @@ +import { BsGithub } from 'react-icons/bs'; +import { FiSun } from 'react-icons/fi'; +import { SiBilibili } from 'react-icons/si'; + +const Logo = () => { + return ( + <div className='flex cursor-pointer gap-[24px] text-[22px]'> + <a + href='https://github.com/Chocolate1999' + rel='noreferrer' + target='_blank' + > + <BsGithub /> + </a> + <a + href='https://space.bilibili.com/351534170' + rel='noreferrer' + target='_blank' + > + <SiBilibili /> + </a> + <FiSun /> + </div> + ); +}; + +export default Logo; diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index 328abad..cd9b47d 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -4,12 +4,15 @@ import Footer from '@/components/layout/Footer'; import Header from '@/components/layout/Header'; export default function Layout({ children }: { children: React.ReactNode }) { - // Put Header or Footer Here return ( - <div className='next-container'> + <> <Header /> - {children} - <Footer /> - </div> + <div className='layout'> + <div className='mx-8'> + {children} + <Footer /> + </div> + </div> + </> ); } diff --git a/src/components/layout/hader-nav/style.module.scss b/src/components/layout/hader-nav/style.module.scss deleted file mode 100644 index 7fefa07..0000000 --- a/src/components/layout/hader-nav/style.module.scss +++ /dev/null @@ -1,28 +0,0 @@ -@keyframes fade-up-header { - 0% { - opacity: 0; - transform: translateY(10%); - } - - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.navDropDownContainer { - animation-name: fade-up-header; - animation-duration: 0.3s; - animation-timing-function: ease; - animation-fill-mode: forwards; - box-shadow: 0px 3px 10px 0px rgb(0 0 0 / 10%); -} - -.itemContainer { - display: flex; - flex-direction: column; - align-content: flex-start; - height: inherit; - flex-wrap: wrap; - margin-bottom: 65px; -} diff --git a/src/components/layout/header-button/index.tsx b/src/components/layout/header-button/index.tsx deleted file mode 100644 index 16316ce..0000000 --- a/src/components/layout/header-button/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import styles from './style.module.scss'; - -import clsxm from '@/lib/clsxm'; - -const HeaderButton = () => { - return ( - <div className='flex flex-row items-center justify-end'> - <div - className={clsxm( - 'cursor-pointe inline-block cursor-pointer', - styles.startButton - )} - > - Started - </div> - </div> - ); -}; - -export default HeaderButton; diff --git a/src/components/layout/header-button/style.module.scss b/src/components/layout/header-button/style.module.scss deleted file mode 100644 index 638db3b..0000000 --- a/src/components/layout/header-button/style.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -.startButton { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - padding: 8px 22px; - gap: 10px; - color: #ffffff; - width: 108px; - height: 40px; - - background: linear-gradient( - 101.26deg, - #2d61fc 1.01%, - #9362ed 45.41%, - #f06195 97.11%, - #fca1ad 136.14% - ); - border-radius: 6px; -} diff --git a/src/components/layout/style.module.css b/src/components/layout/style.module.css new file mode 100644 index 0000000..49fde0e --- /dev/null +++ b/src/components/layout/style.module.css @@ -0,0 +1,14 @@ +@keyframes fade-up-header { + 0% { + opacity: 0; + transform: translateY(10%); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.logo_name { +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5d53f6f..25cb96c 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -18,82 +18,84 @@ export default function HomePage() { <Layout> <Seo /> <main> - <section className={clsxm('min-h-screen', isLoaded && 'fade-in-start')}> - <div className='flex min-h-screen flex-col justify-center text-center'> - <article className=' layout flex flex-col items-start'> - <h2 className='text-2x dark:text-gray-100' data-fade='1'> - Hi! - </h2> - <h1 className=' mt-1 text-3xl dark:text-gray-100' data-fade='2'> - You can call me Chocolate - </h1> - <p - className={clsxm( - ' mt-6 max-w-2xl text-gray-700 dark:text-gray-300', - '2xl:text-xl text-left text-lg' - )} - data-fade='3' - > - JS, TS, LeetCode, Vue, React, algorithm lovers.The 21st - front-end development, currently moving bricks in a large - factory. - </p> - <p - className={clsxm( - ' mt-2 max-w-2xl text-gray-700 dark:text-gray-300', - '2xl:text-xl text-left text-lg' - )} - data-fade='4' - > - Motto: Learning is like sailing against the current, if you - don't advance, you will retreat! - </p> - <div data-fade='5' className='mt-4 flex'> - <CustomLink href='/blog'>To Blog</CustomLink> - <CustomLink href='/about' className='ml-6'> - Learn more about me - </CustomLink> - </div> - <div className='flex'> - <Tooltip content={<p>Chocolate1999</p>}> - <div - data-fade='6' - className='mt-8 flex flex-wrap gap-4 gap-y-2' - > - <UnstyledLink - href='https://github.com/Chocolate1999' - className={clsxm( - 'inline-flex items-center gap-1 text-base font-medium', - 'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white', - 'focus:outline-none focus-visible:ring focus-visible:ring-primary-300', - 'transition-colors' - )} - onClick={() => { - trackEvent('Social Link: Github', 'link'); - }} + <section className={clsxm(isLoaded && 'fade-in-start')}> + <div className='mt-[120px] text-center'> + <article className='layout '> + <div className='flex flex-col items-start'> + <h2 className='text-2x dark:text-gray-100' data-fade='1'> + Hi! + </h2> + <h1 className=' mt-1 text-3xl dark:text-gray-100' data-fade='2'> + You can call me Chocolate + </h1> + <p + className={clsxm( + ' mt-6 max-w-2xl text-gray-700 dark:text-gray-300', + '2xl:text-xl text-left text-lg' + )} + data-fade='3' + > + JS, TS, LeetCode, Vue, React, algorithm lovers.The 21st + front-end development, currently moving bricks in a large + factory. + </p> + <p + className={clsxm( + ' mt-2 max-w-2xl text-gray-700 dark:text-gray-300', + '2xl:text-xl text-left text-lg' + )} + data-fade='4' + > + Motto: Learning is like sailing against the current, if you + don't advance, you will retreat! + </p> + <div data-fade='5' className='mt-4 flex'> + <CustomLink href='/blog'>To Blog</CustomLink> + <CustomLink href='/about' className='ml-6'> + Learn more about me + </CustomLink> + </div> + <div className='flex'> + <Tooltip content={<p>Chocolate1999</p>}> + <div + data-fade='6' + className='mt-8 flex flex-wrap gap-4 gap-y-2' > - <SiGithub className='shrink-0' /> - </UnstyledLink> - </div> - </Tooltip> - <Tooltip content={<p>小狮子前端</p>}> - <div - data-fade='6' - className='mt-8 ml-4 flex flex-wrap gap-4 gap-y-2' - > - <UnstyledLink - href='https://github.com/Chocolate1999' - className={clsxm( - 'inline-flex items-center gap-1 text-base font-medium', - 'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white', - 'focus:outline-none focus-visible:ring focus-visible:ring-primary-300', - 'transition-colors' - )} + <UnstyledLink + href='https://github.com/Chocolate1999' + className={clsxm( + 'inline-flex items-center gap-1 text-base font-medium', + 'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white', + 'focus:outline-none focus-visible:ring focus-visible:ring-primary-300', + 'transition-colors' + )} + onClick={() => { + trackEvent('Social Link: Github', 'link'); + }} + > + <SiGithub className='shrink-0' /> + </UnstyledLink> + </div> + </Tooltip> + <Tooltip content={<p>小狮子前端</p>}> + <div + data-fade='6' + className='mt-8 ml-4 flex flex-wrap gap-4 gap-y-2' > - <SiWechat className='shrink-0' /> - </UnstyledLink> - </div> - </Tooltip> + <UnstyledLink + href='https://github.com/Chocolate1999' + className={clsxm( + 'inline-flex items-center gap-1 text-base font-medium', + 'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white', + 'focus:outline-none focus-visible:ring focus-visible:ring-primary-300', + 'transition-colors' + )} + > + <SiWechat className='shrink-0' /> + </UnstyledLink> + </div> + </Tooltip> + </div> </div> </article> </div> diff --git a/src/pages/style.module.scss b/src/pages/style.module.scss deleted file mode 100644 index 2d5e863..0000000 --- a/src/pages/style.module.scss +++ /dev/null @@ -1,17 +0,0 @@ -.container { - background: linear-gradient( - 90deg, - rgba(247, 149, 51, 0.1), - rgba(243, 112, 85, 0.1) 15%, - rgba(239, 78, 123, 0.1) 30%, - rgba(161, 102, 171, 0.1) 44%, - rgba(80, 115, 184, 0.1) 58%, - rgba(16, 152, 173, 0.1) 72%, - rgba(7, 179, 155, 0.1) 86%, - rgba(109, 186, 130, 0.1) - ); -} - -.blogButton { - box-shadow: 2px 7px 15px 0px rgba(218, 222, 226, 0.59); -} diff --git a/src/store/index.tsx b/src/store/index.tsx index 9db4359..bb576db 100644 --- a/src/store/index.tsx +++ b/src/store/index.tsx @@ -15,17 +15,5 @@ export const navAtom = atom({ name: 'Projects', link: '/projects', }, - { - name: 'Collection', - link: '/collection', - }, - { - name: 'Talks', - link: '/talks', - }, - { - name: 'Links', - link: '/links', - }, ], }); diff --git a/src/styles/globals.css b/src/styles/globals.css index ec460e0..af5159d 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -71,24 +71,9 @@ } /* #endregion /**======== Default Typography =========== */ - .next-container { - background: linear-gradient( - 90deg, - rgba(247, 149, 51, 0.1), - rgba(243, 112, 85, 0.1) 15%, - rgba(239, 78, 123, 0.1) 30%, - rgba(161, 102, 171, 0.1) 44%, - rgba(80, 115, 184, 0.1) 58%, - rgba(16, 152, 173, 0.1) 72%, - rgba(7, 179, 155, 0.1) 86%, - rgba(109, 186, 130, 0.1) - ); - @apply dark:bg-[#222] dark:bg-none; - } - .layout { - max-width: 1200px; - @apply mx-auto w-11/12; + max-width: 1400px; + @apply mx-auto w-full; } .bg-dark a.custom-link { From e0117a7a480af96359b4710b1e8d5f24626aaffa Mon Sep 17 00:00:00 2001 From: Chocolate1999 <2816778271@qq.com> Date: Sun, 11 Sep 2022 15:36:53 +0800 Subject: [PATCH 2/2] feat: add dark mode --- src/components/buttons/ThemeButton.tsx | 23 +++++++++++++ src/components/layout/Footer.tsx | 10 +++--- src/components/layout/Icon.tsx | 5 +-- src/pages/_app.tsx | 5 ++- src/pages/index.tsx | 45 -------------------------- 5 files changed, 36 insertions(+), 52 deletions(-) create mode 100644 src/components/buttons/ThemeButton.tsx diff --git a/src/components/buttons/ThemeButton.tsx b/src/components/buttons/ThemeButton.tsx new file mode 100644 index 0000000..9002335 --- /dev/null +++ b/src/components/buttons/ThemeButton.tsx @@ -0,0 +1,23 @@ +import clsx from 'clsx'; +import { useTheme } from 'next-themes'; +import * as React from 'react'; +import { FiMoon, FiSun } from 'react-icons/fi'; + +import useLoaded from '@/hooks/useLoaded'; + +type ThemeButtonProps = React.ComponentPropsWithoutRef<'button'>; + +export default function ThemeButton({ className, ...rest }: ThemeButtonProps) { + const { theme, setTheme } = useTheme(); + const isLoaded = useLoaded(); + + return ( + <button + className={clsx(className)} + {...rest} + onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} + > + {theme === 'light' && isLoaded ? <FiMoon /> : <FiSun />} + </button> + ); +} diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index 71f69f1..648476b 100644 --- a/src/components/layout/Footer.tsx +++ b/src/components/layout/Footer.tsx @@ -1,7 +1,9 @@ +import UnderlineLink from '@/components/links/UnderlineLink'; + export default function Footer() { return ( <footer className='mt-16 text-right text-[#b3b3b3] dark:text-gray-200'> - <section className='flex flex-col'> + <section className='flex flex-col items-end'> <div> <a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' @@ -17,12 +19,12 @@ export default function Footer() { className='pl-1' rel='noreferrer' > - © Chocolate + © Yang Chao Yi </a> </div> - <a href='https://beian.miit.gov.cn/' rel='noreferrer' target='_blank'> + <UnderlineLink href='https://beian.miit.gov.cn/'> 湘ICP备20002952号 - </a> + </UnderlineLink> </section> </footer> ); diff --git a/src/components/layout/Icon.tsx b/src/components/layout/Icon.tsx index abb91ce..644e889 100644 --- a/src/components/layout/Icon.tsx +++ b/src/components/layout/Icon.tsx @@ -1,7 +1,8 @@ import { BsGithub } from 'react-icons/bs'; -import { FiSun } from 'react-icons/fi'; import { SiBilibili } from 'react-icons/si'; +import ThemeButton from '@/components/buttons/ThemeButton'; + const Logo = () => { return ( <div className='flex cursor-pointer gap-[24px] text-[22px]'> @@ -19,7 +20,7 @@ const Logo = () => { > <SiBilibili /> </a> - <FiSun /> + <ThemeButton /> </div> ); }; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 788cf13..25b8655 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,5 +1,6 @@ import { AppProps } from 'next/app'; import Router from 'next/router'; +import { ThemeProvider } from 'next-themes'; import nProgress from 'nprogress'; import { RecoilRoot } from 'recoil'; @@ -21,7 +22,9 @@ Router.events.on('routeChangeComplete', nProgress.done); function MyApp({ Component, pageProps }: AppProps) { return ( <RecoilRoot> - <Component {...pageProps} /> + <ThemeProvider attribute='class' enableSystem={false}> + <Component {...pageProps} /> + </ThemeProvider> </RecoilRoot> ); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 25cb96c..df46ae9 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,15 +1,11 @@ import * as React from 'react'; -import { SiGithub, SiWechat } from 'react-icons/si'; -import { trackEvent } from '@/lib/analytics'; import clsxm from '@/lib/clsxm'; import useLoaded from '@/hooks/useLoaded'; import Layout from '@/components/layout/Layout'; import CustomLink from '@/components/links/CustomLink'; -import UnstyledLink from '@/components/links/UnstyledLink'; import Seo from '@/components/Seo'; -import Tooltip from '@/components/Tooltip'; export default function HomePage() { const isLoaded = useLoaded(); @@ -55,47 +51,6 @@ export default function HomePage() { Learn more about me </CustomLink> </div> - <div className='flex'> - <Tooltip content={<p>Chocolate1999</p>}> - <div - data-fade='6' - className='mt-8 flex flex-wrap gap-4 gap-y-2' - > - <UnstyledLink - href='https://github.com/Chocolate1999' - className={clsxm( - 'inline-flex items-center gap-1 text-base font-medium', - 'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white', - 'focus:outline-none focus-visible:ring focus-visible:ring-primary-300', - 'transition-colors' - )} - onClick={() => { - trackEvent('Social Link: Github', 'link'); - }} - > - <SiGithub className='shrink-0' /> - </UnstyledLink> - </div> - </Tooltip> - <Tooltip content={<p>小狮子前端</p>}> - <div - data-fade='6' - className='mt-8 ml-4 flex flex-wrap gap-4 gap-y-2' - > - <UnstyledLink - href='https://github.com/Chocolate1999' - className={clsxm( - 'inline-flex items-center gap-1 text-base font-medium', - 'text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white', - 'focus:outline-none focus-visible:ring focus-visible:ring-primary-300', - 'transition-colors' - )} - > - <SiWechat className='shrink-0' /> - </UnstyledLink> - </div> - </Tooltip> - </div> </div> </article> </div>