From 34fe8f01f3004df0541b38b238680bc119875fa7 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Thu, 22 Feb 2024 19:21:55 +0800 Subject: [PATCH] signin / signup --- blog.config.js | 4 +- pages/signin.js | 29 ++++ pages/signup.js | 29 ++++ themes/example/index.js | 19 +-- themes/fukasawa/index.js | 19 +-- themes/gitbook/index.js | 19 +-- themes/heo/index.js | 19 +-- themes/hexo/index.js | 19 +-- themes/landing/index.js | 19 +-- themes/matery/index.js | 19 +-- themes/medium/index.js | 19 +-- themes/nav/index.js | 19 +-- themes/next/index.js | 19 +-- themes/nobelium/index.js | 19 +-- themes/plog/index.js | 19 +-- themes/simple/index.js | 19 +-- themes/starter/components/Banner.js | 53 ++++++ themes/starter/components/Footer.js | 5 +- themes/starter/components/Logo.js | 63 +++---- themes/starter/components/NavBar.js | 16 +- themes/starter/components/SignInForm.js | 97 +++++++++++ themes/starter/components/SignUpForm.js | 160 ++++++++++++++++++ themes/starter/components/svg/SVGCircleBG2.js | 35 ++++ themes/starter/components/svg/SVGCircleBG3.js | 24 +++ themes/starter/components/svg/SVGFacebook.js | 4 +- themes/starter/components/svg/SVGGoogle.js | 14 ++ themes/starter/components/svg/SVGTwitter.js | 4 +- themes/starter/index.js | 53 ++++-- themes/theme.js | 28 ++- 29 files changed, 566 insertions(+), 299 deletions(-) create mode 100644 pages/signin.js create mode 100644 pages/signup.js create mode 100644 themes/starter/components/Banner.js create mode 100644 themes/starter/components/SignInForm.js create mode 100644 themes/starter/components/SignUpForm.js create mode 100644 themes/starter/components/svg/SVGCircleBG2.js create mode 100644 themes/starter/components/svg/SVGCircleBG3.js create mode 100644 themes/starter/components/svg/SVGGoogle.js diff --git a/blog.config.js b/blog.config.js index 5c189b9b..b3c84657 100644 --- a/blog.config.js +++ b/blog.config.js @@ -110,7 +110,9 @@ const BLOG = { '/category': 'LayoutCategoryIndex', '/[prefix]': 'LayoutSlug', '/[prefix]/[slug]': 'LayoutSlug', - '/[prefix]/[slug]/[...suffix]': 'LayoutSlug' + '/[prefix]/[slug]/[...suffix]': 'LayoutSlug', + '/signin': 'LayoutSignIn', + '/signup': 'LayoutSignUp' }, CAN_COPY: process.env.NEXT_PUBLIC_CAN_COPY || true, // 是否允许复制页面内容 默认允许，如果设置为false、则全栈禁止复制内容。 diff --git a/pages/signin.js b/pages/signin.js new file mode 100644 index 00000000..9abfb1f8 --- /dev/null +++ b/pages/signin.js @@ -0,0 +1,29 @@ +import BLOG from '@/blog.config' +import { getGlobalData } from '@/lib/notion/getNotionData' +import { useRouter } from 'next/router' +import { getLayoutByTheme } from '@/themes/theme' +import { siteConfig } from '@/lib/config' + +/** + * 登录 + * @param {*} props + * @returns + */ +const SignIn = props => { + // 根据页面路径加载不同Layout文件 + const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() }) + return +} + +export async function getStaticProps() { + const from = 'SignIn' + const props = await getGlobalData({ from }) + + delete props.allPages + return { + props, + revalidate: parseInt(BLOG.NEXT_REVALIDATE_SECOND) + } +} + +export default SignIn diff --git a/pages/signup.js b/pages/signup.js new file mode 100644 index 00000000..d570d46b --- /dev/null +++ b/pages/signup.js @@ -0,0 +1,29 @@ +import BLOG from '@/blog.config' +import { getGlobalData } from '@/lib/notion/getNotionData' +import { useRouter } from 'next/router' +import { getLayoutByTheme } from '@/themes/theme' +import { siteConfig } from '@/lib/config' + +/** + * 注册 + * @param {*} props + * @returns + */ +const SignUp = props => { + // 根据页面路径加载不同Layout文件 + const Layout = getLayoutByTheme({ theme: siteConfig('THEME'), router: useRouter() }) + return +} + +export async function getStaticProps() { + const from = 'SignIn' + const props = await getGlobalData({ from }) + + delete props.allPages + return { + props, + revalidate: parseInt(BLOG.NEXT_REVALIDATE_SECOND) + } +} + +export default SignUp diff --git a/themes/example/index.js b/themes/example/index.js index 4cc14163..2bb24981 100644 --- a/themes/example/index.js +++ b/themes/example/index.js @@ -26,7 +26,6 @@ import { useRouter } from 'next/router' import { Transition } from '@headlessui/react' import { Style } from './style' import { siteConfig } from '@/lib/config' -import { LAYOUT_MAPPINGS } from '@/blog.config' /** * 基础布局框架 @@ -262,21 +261,6 @@ const LayoutTagIndex = (props) => { ) } -/** - * 根据路径 获取对应的layout - * @param {*} path - * @returns - */ -const getLayoutNameByPath = (path) => { - // 检查特殊处理的路径 - if (LAYOUT_MAPPINGS[path]) { - return LAYOUT_MAPPINGS[path]; - } else { - // 没有特殊处理的路径返回默认layout名称 - return 'LayoutSlug'; - } -} - export { CONFIG as THEME_CONFIG, LayoutBase, @@ -287,6 +271,5 @@ export { Layout404, LayoutPostList, LayoutCategoryIndex, - LayoutTagIndex, - getLayoutNameByPath + LayoutTagIndex } diff --git a/themes/fukasawa/index.js b/themes/fukasawa/index.js index 42e32b3f..70b367fb 100644 --- a/themes/fukasawa/index.js +++ b/themes/fukasawa/index.js @@ -21,7 +21,6 @@ import { Style } from './style' import replaceSearchResult from '@/components/Mark' import { siteConfig } from '@/lib/config' import WWAds from '@/components/WWAds' -import { LAYOUT_MAPPINGS } from '@/blog.config' const Live2D = dynamic(() => import('@/components/Live2D')) @@ -250,21 +249,6 @@ const LayoutTagIndex = (props) => { } -/** - * 根据路径 获取对应的layout - * @param {*} path - * @returns - */ -const getLayoutNameByPath = (path) => { - // 检查特殊处理的路径 - if (LAYOUT_MAPPINGS[path]) { - return LAYOUT_MAPPINGS[path]; - } else { - // 没有特殊处理的路径返回默认layout名称 - return 'LayoutSlug'; - } -} - export { CONFIG as THEME_CONFIG, LayoutBase, @@ -275,6 +259,5 @@ export { Layout404, LayoutPostList, LayoutCategoryIndex, - LayoutTagIndex, - getLayoutNameByPath + LayoutTagIndex } diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js index ad9ee1d9..73ea61d8 100644 --- a/themes/gitbook/index.js +++ b/themes/gitbook/index.js @@ -34,7 +34,6 @@ import Link from 'next/link' import dynamic from 'next/dynamic' import { siteConfig } from '@/lib/config' import NotionIcon from '@/components/NotionIcon' -import { LAYOUT_MAPPINGS } from '@/blog.config' import AlgoliaSearchModal from '@/components/AlgoliaSearchModal' const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false }) @@ -362,21 +361,6 @@ const LayoutTagIndex = (props) => { } -/** - * 根据路径 获取对应的layout - * @param {*} path - * @returns - */ -const getLayoutNameByPath = (path) => { - // 检查特殊处理的路径 - if (LAYOUT_MAPPINGS[path]) { - return LAYOUT_MAPPINGS[path]; - } else { - // 没有特殊处理的路径返回默认layout名称 - return 'LayoutSlug'; - } -} - export { CONFIG as THEME_CONFIG, LayoutBase, @@ -387,6 +371,5 @@ export { Layout404, LayoutPostList, LayoutCategoryIndex, - LayoutTagIndex, - getLayoutNameByPath + LayoutTagIndex } diff --git a/themes/heo/index.js b/themes/heo/index.js index 8def285d..f10be1a2 100644 --- a/themes/heo/index.js +++ b/themes/heo/index.js @@ -39,7 +39,6 @@ import LazyImage from '@/components/LazyImage' import WWAds from '@/components/WWAds' import { AdSlot } from '@/components/GoogleAdsense' import { siteConfig } from '@/lib/config' -import { LAYOUT_MAPPINGS } from '@/blog.config' import { isBrowser } from '@/lib/utils' /** @@ -499,21 +498,6 @@ const LayoutTagIndex = props => { ) } -/** - * 根据路径 获取对应的layout - * @param {*} path - * @returns - */ -const getLayoutNameByPath = (path) => { - // 检查特殊处理的路径 - if (LAYOUT_MAPPINGS[path]) { - return LAYOUT_MAPPINGS[path]; - } else { - // 没有特殊处理的路径返回默认layout名称 - return 'LayoutSlug'; - } -} - export { CONFIG as THEME_CONFIG, LayoutBase, @@ -524,6 +508,5 @@ export { Layout404, LayoutPostList, LayoutCategoryIndex, - LayoutTagIndex, - getLayoutNameByPath + LayoutTagIndex } diff --git a/themes/hexo/index.js b/themes/hexo/index.js index b0ec998c..add49e0a 100644 --- a/themes/hexo/index.js +++ b/themes/hexo/index.js @@ -32,7 +32,6 @@ import { Style } from './style' import replaceSearchResult from '@/components/Mark' import { siteConfig } from '@/lib/config' import AlgoliaSearchModal from '@/components/AlgoliaSearchModal' -import { LAYOUT_MAPPINGS } from '@/blog.config' // 主题全局状态 const ThemeGlobalHexo = createContext() @@ -365,21 +364,6 @@ const LayoutTagIndex = props => { ) } -/** - * 根据路径 获取对应的layout - * @param {*} path - * @returns - */ -const getLayoutNameByPath = (path) => { - // 检查特殊处理的路径 - if (LAYOUT_MAPPINGS[path]) { - return LAYOUT_MAPPINGS[path]; - } else { - // 没有特殊处理的路径返回默认layout名称 - return 'LayoutSlug'; - } -} - export { CONFIG as THEME_CONFIG, LayoutBase, @@ -390,6 +374,5 @@ export { Layout404, LayoutCategoryIndex, LayoutPostList, - LayoutTagIndex, - getLayoutNameByPath + LayoutTagIndex } diff --git a/themes/landing/index.js b/themes/landing/index.js index 405d246c..d7301d4c 100644 --- a/themes/landing/index.js +++ b/themes/landing/index.js @@ -21,7 +21,6 @@ import Loading from '@/components/Loading' import { isBrowser } from '@/lib/utils' import { siteConfig } from '@/lib/config' import { Pricing } from './components/Pricing' -import { LAYOUT_MAPPINGS } from '@/blog.config' import { useEffect } from 'react' /** @@ -114,21 +113,6 @@ const LayoutCategoryIndex = (props) => <> const LayoutPostList = (props) => <> const LayoutTagIndex = (props) => <> -/** - * 根据路径 获取对应的layout - * @param {*} path - * @returns - */ -const getLayoutNameByPath = (path) => { - // 检查特殊处理的路径 - if (LAYOUT_MAPPINGS[path]) { - return LAYOUT_MAPPINGS[path]; - } else { - // 没有特殊处理的路径返回默认layout名称 - return 'LayoutSlug'; - } -} - export { CONFIG as THEME_CONFIG, LayoutBase, @@ -139,6 +123,5 @@ export { Layout404, LayoutPostList, LayoutCategoryIndex, - LayoutTagIndex, - getLayoutNameByPath + LayoutTagIndex } diff --git a/themes/matery/index.js b/themes/matery/index.js index 453335ba..6adc6e05 100644 --- a/themes/matery/index.js +++ b/themes/matery/index.js @@ -30,7 +30,6 @@ import { Transition } from '@headlessui/react' import { Style } from './style' import replaceSearchResult from '@/components/Mark' import { siteConfig } from '@/lib/config' -import { LAYOUT_MAPPINGS } from '@/blog.config' import { isBrowser } from '@/lib/utils' /** @@ -379,21 +378,6 @@ const LayoutTagIndex = props => { ) } -/** - * 根据路径 获取对应的layout - * @param {*} path - * @returns - */ -const getLayoutNameByPath = (path) => { - // 检查特殊处理的路径 - if (LAYOUT_MAPPINGS[path]) { - return LAYOUT_MAPPINGS[path]; - } else { - // 没有特殊处理的路径返回默认layout名称 - return 'LayoutSlug'; - } -} - export { CONFIG as THEME_CONFIG, LayoutBase, @@ -404,6 +388,5 @@ export { LayoutSlug, Layout404, LayoutCategoryIndex, - LayoutTagIndex, - getLayoutNameByPath + LayoutTagIndex } diff --git a/themes/medium/index.js b/themes/medium/index.js index d150b813..b4d56abd 100644 --- a/themes/medium/index.js +++ b/themes/medium/index.js @@ -34,7 +34,6 @@ import { Style } from './style' import replaceSearchResult from '@/components/Mark' import ArticleInfo from './components/ArticleInfo' import { siteConfig } from '@/lib/config' -import { LAYOUT_MAPPINGS } from '@/blog.config' // 主题全局状态 const ThemeGlobalMedium = createContext() @@ -347,21 +346,6 @@ const LayoutTagIndex = props => { ) } -/** - * 根据路径 获取对应的layout - * @param {*} path - * @returns - */ -const getLayoutNameByPath = (path) => { - // 检查特殊处理的路径 - if (LAYOUT_MAPPINGS[path]) { - return LAYOUT_MAPPINGS[path]; - } else { - // 没有特殊处理的路径返回默认layout名称 - return 'LayoutSlug'; - } -} - export { CONFIG as THEME_CONFIG, LayoutBase, @@ -372,6 +356,5 @@ export { LayoutSlug, Layout404, LayoutCategoryIndex, - LayoutTagIndex, - getLayoutNameByPath + LayoutTagIndex } diff --git a/themes/nav/index.js b/themes/nav/index.js index 1ec389e3..2b2e4973 100755 --- a/themes/nav/index.js +++ b/themes/nav/index.js @@ -34,7 +34,6 @@ import { siteConfig } from '@/lib/config' import Live2D from '@/components/Live2D' import BlogArchiveItem from './components/BlogArchiveItem' import NotionIcon from '@/components/NotionIcon' -import { LAYOUT_MAPPINGS } from '@/blog.config' import { useRouter } from 'next/router' import { isBrowser } from '@/lib/utils' @@ -346,21 +345,6 @@ const LayoutTagIndex = (props) => { return <> } -/** - * 根据路径 获取对应的layout - * @param {*} path - * @returns - */ -const getLayoutNameByPath = (path) => { - // 检查特殊处理的路径 - if (LAYOUT_MAPPINGS[path]) { - return LAYOUT_MAPPINGS[path]; - } else { - // 没有特殊处理的路径返回默认layout名称 - return 'LayoutSlug'; - } -} - export { CONFIG as THEME_CONFIG, LayoutBase, @@ -371,6 +355,5 @@ export { Layout404, LayoutCategoryIndex, LayoutPostList, - LayoutTagIndex, - getLayoutNameByPath + LayoutTagIndex } diff --git a/themes/next/index.js b/themes/next/index.js index c20dda4c..e0ee29f7 100644 --- a/themes/next/index.js +++ b/themes/next/index.js @@ -27,7 +27,6 @@ import { siteConfig } from '@/lib/config' import AlgoliaSearchModal from '@/components/AlgoliaSearchModal' import Announcement from './components/Announcement' import Card from './components/Card' -import { LAYOUT_MAPPINGS } from '@/blog.config' // 主题全局状态 const ThemeGlobalNext = createContext() @@ -360,21 +359,6 @@ const LayoutTagIndex = (props) => { } -/** - * 根据路径 获取对应的layout - * @param {*} path - * @returns - */ -const getLayoutNameByPath = (path) => { - // 检查特殊处理的路径 - if (LAYOUT_MAPPINGS[path]) { - return LAYOUT_MAPPINGS[path]; - } else { - // 没有特殊处理的路径返回默认layout名称 - return 'LayoutSlug'; - } -} - export { CONFIG as THEME_CONFIG, LayoutBase, @@ -385,6 +369,5 @@ export { Layout404, LayoutCategoryIndex, LayoutPostList, - LayoutTagIndex, - getLayoutNameByPath + LayoutTagIndex } diff --git a/themes/nobelium/index.js b/themes/nobelium/index.js index 33815164..85e6faa5 100644 --- a/themes/nobelium/index.js +++ b/themes/nobelium/index.js @@ -24,7 +24,6 @@ import { Style } from './style' import replaceSearchResult from '@/components/Mark' import AlgoliaSearchModal from '@/components/AlgoliaSearchModal' import { siteConfig } from '@/lib/config' -import { LAYOUT_MAPPINGS } from '@/blog.config' import { useRouter } from 'next/router' // 主题全局状态 @@ -303,21 +302,6 @@ const LayoutTagIndex = (props) => { ) } -/** - * 根据路径 获取对应的layout - * @param {*} path - * @returns - */ -const getLayoutNameByPath = (path) => { - // 检查特殊处理的路径 - if (LAYOUT_MAPPINGS[path]) { - return LAYOUT_MAPPINGS[path]; - } else { - // 没有特殊处理的路径返回默认layout名称 - return 'LayoutSlug'; - } -} - export { CONFIG as THEME_CONFIG, LayoutBase, @@ -328,6 +312,5 @@ export { Layout404, LayoutPostList, LayoutCategoryIndex, - LayoutTagIndex, - getLayoutNameByPath + LayoutTagIndex } diff --git a/themes/plog/index.js b/themes/plog/index.js index 92e77c58..2bb9b610 100644 --- a/themes/plog/index.js +++ b/themes/plog/index.js @@ -21,7 +21,6 @@ import Modal from './components/Modal' import { Style } from './style' import replaceSearchResult from '@/components/Mark' import { useRouter } from 'next/router' -import { LAYOUT_MAPPINGS } from '@/blog.config' // 主题全局状态 const ThemeGlobalPlog = createContext() @@ -268,21 +267,6 @@ const LayoutTagIndex = (props) => { ) } -/** - * 根据路径 获取对应的layout - * @param {*} path - * @returns - */ -const getLayoutNameByPath = (path) => { - // 检查特殊处理的路径 - if (LAYOUT_MAPPINGS[path]) { - return LAYOUT_MAPPINGS[path]; - } else { - // 没有特殊处理的路径返回默认layout名称 - return 'LayoutSlug'; - } -} - export { CONFIG as THEME_CONFIG, LayoutBase, @@ -293,6 +277,5 @@ export { Layout404, LayoutPostList, LayoutCategoryIndex, - LayoutTagIndex, - getLayoutNameByPath + LayoutTagIndex } diff --git a/themes/simple/index.js b/themes/simple/index.js index b907391d..cf15cb1c 100644 --- a/themes/simple/index.js +++ b/themes/simple/index.js @@ -11,7 +11,6 @@ import replaceSearchResult from '@/components/Mark' import dynamic from 'next/dynamic' import NotionPage from '@/components/NotionPage' import AlgoliaSearchModal from '@/components/AlgoliaSearchModal' -import { LAYOUT_MAPPINGS } from '@/blog.config' import { useRouter } from 'next/router' // 主题组件 @@ -297,21 +296,6 @@ const LayoutTagIndex = (props) => { ) } -/** - * 根据路径 获取对应的layout - * @param {*} path - * @returns - */ -const getLayoutNameByPath = (path) => { - // 检查特殊处理的路径 - if (LAYOUT_MAPPINGS[path]) { - return LAYOUT_MAPPINGS[path]; - } else { - // 没有特殊处理的路径返回默认layout名称 - return 'LayoutSlug'; - } -} - export { CONFIG as THEME_CONFIG, LayoutBase, @@ -322,6 +306,5 @@ export { Layout404, LayoutCategoryIndex, LayoutPostList, - LayoutTagIndex, - getLayoutNameByPath + LayoutTagIndex } diff --git a/themes/starter/components/Banner.js b/themes/starter/components/Banner.js new file mode 100644 index 00000000..220633ce --- /dev/null +++ b/themes/starter/components/Banner.js @@ -0,0 +1,53 @@ +/** + * 详情页面顶部条 + * @returns + */ +export const Banner = ({ title, description }) => { + return <> + {/* */} +
+
+
+
+
+
+

+ {title} +

+

+ {description} +

+ + {/* */} +
+
+
+
+
+ {/* */} + +} diff --git a/themes/starter/components/Footer.js b/themes/starter/components/Footer.js index 9724123b..46fcee62 100644 --- a/themes/starter/components/Footer.js +++ b/themes/starter/components/Footer.js @@ -7,7 +7,6 @@ import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils' /* eslint-disable @next/next/no-img-element */ export const Footer = (props) => { - console.log('prop', props) const latestPosts = props?.latestPosts ? props?.latestPosts.slice(0, 2) : [] return <> @@ -72,7 +71,7 @@ export const Footer = (props) => { href={url} className="group flex items-center gap-[22px]" > -
+
{item.title} { - {item.summary} + {item.title} })} diff --git a/themes/starter/components/Logo.js b/themes/starter/components/Logo.js index f2492f52..56d8268f 100644 --- a/themes/starter/components/Logo.js +++ b/themes/starter/components/Logo.js @@ -1,7 +1,7 @@ +/* eslint-disable @next/next/no-html-link-for-pages */ import { siteConfig } from '@/lib/config'; import { useGlobal } from '@/lib/global'; import throttle from 'lodash.throttle'; -import Link from 'next/link' import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; import CONFIG from '../config'; @@ -18,41 +18,42 @@ export const Logo = ({ white }) => { const [logoTextColor, setLogoTextColor] = useState('text-white') useEffect(() => { + // 滚动监听 + const throttleMs = 200 + const navBarScrollListener = throttle(() => { + const scrollY = window.scrollY; + // 何时显示浅色或白底的logo + if (white || isDarkMode || (!isDarkMode && router.route === '/' && scrollY < 1)) { + setLogo(siteConfig('STARTER_LOGO_WHITE', null, CONFIG)) + setLogoTextColor('text-white') + } else { + setLogo(siteConfig('STARTER_LOGO', null, CONFIG)) + setLogoTextColor('text-black') + } + }, throttleMs) + navBarScrollListener() window.addEventListener('scroll', navBarScrollListener) return () => { window.removeEventListener('scroll', navBarScrollListener) } - }) + }, []) - // 滚动监听 - const throttleMs = 200 - const navBarScrollListener = throttle(() => { - const scrollY = window.scrollY; - // 何时显示浅色或白底的logo - if (white || isDarkMode || (!isDarkMode && router.route === '/' && scrollY < 1)) { - setLogo(siteConfig('STARTER_LOGO_WHITE', null, CONFIG)) - setLogoTextColor('text-white') - } else { - setLogo(siteConfig('STARTER_LOGO', null, CONFIG)) - setLogoTextColor('text-black') - } - }, throttleMs) - - return <> -
- - <> - {/* eslint-disable-next-line @next/next/no-img-element */} - {logo && logo} - {/* logo文字 */} - {siteConfig('TITLE')} - - + return
+
+ {/* eslint-disable-next-line @next/next/no-img-element */} + {logo && { + router.push('/') + }} + src={logo} + alt="logo" + className="header-logo w-full" + />} + {/* logo文字 */} + { router.push('/') }} className={`${logoTextColor} dark:text-white py-1.5 header-logo-text whitespace-nowrap text-2xl font-semibold`}> + {siteConfig('TITLE')} + +
- } diff --git a/themes/starter/components/NavBar.js b/themes/starter/components/NavBar.js index 3d5ee672..603313a5 100644 --- a/themes/starter/components/NavBar.js +++ b/themes/starter/components/NavBar.js @@ -1,25 +1,33 @@ /* eslint-disable no-unreachable */ import throttle from 'lodash.throttle'; -import { useCallback, useEffect } from 'react' +import { useCallback, useEffect, useState } from 'react' import { MenuList } from './MenuList'; import { DarkModeButton } from './DarkModeButton'; import { Logo } from './Logo'; import { useRouter } from 'next/router'; import { siteConfig } from '@/lib/config'; import CONFIG from '../config'; +import { useGlobal } from '@/lib/global'; /** * 顶部导航栏 */ export const NavBar = (props) => { const router = useRouter() + const { isDarkMode } = useGlobal() + const [buttonTextColor, setColor] = useState(router.route === '/' ? 'text-white' : '') useEffect(() => { + if (isDarkMode) { + setColor('text-white') + } else { + setColor(router.route === '/' ? 'text-white' : '') + } // ======= Sticky window.addEventListener('scroll', navBarScollListener) return () => { window.removeEventListener('scroll', navBarScollListener) } - }, []) + }, [isDarkMode]) // 滚动监听 const throttleMs = 200 @@ -61,13 +69,13 @@ export const NavBar = (props) => {
{siteConfig('STARTER_NAV_BUTTON_1_TEXT', null, CONFIG)} {siteConfig('STARTER_NAV_BUTTON_2_TEXT', null, CONFIG)} diff --git a/themes/starter/components/SignInForm.js b/themes/starter/components/SignInForm.js new file mode 100644 index 00000000..88781171 --- /dev/null +++ b/themes/starter/components/SignInForm.js @@ -0,0 +1,97 @@ +/* eslint-disable @next/next/no-img-element */ + +import { Logo } from './Logo' +import { SVGCircleBg2 } from './svg/SVGCircleBG2' +import { SVGCircleBG3 } from './svg/SVGCircleBG3' +import { SVGFacebook } from './svg/SVGFacebook' +import { SVGGoogle } from './svg/SVGGoogle' +import { SVGTwitter } from './svg/SVGTwitter' + +/** + * 登录 + * @returns + */ +export const SignInForm = () => { + return <> + {/* */} +
+
+
+
+
+
+
+ +
+
+ + {/* 表单内容 */} +
+
+ +
+
+ +
+
+ +
+
+ + + + Connect With + + + {/* 社交平台 */} + + + Forget Password? + +

+ Not a member yet? + + Sign Up + +

+ +
+ + + + + + +
+
+
+
+
+
+ {/* */} + +} diff --git a/themes/starter/components/SignUpForm.js b/themes/starter/components/SignUpForm.js new file mode 100644 index 00000000..eb26e6aa --- /dev/null +++ b/themes/starter/components/SignUpForm.js @@ -0,0 +1,160 @@ +import { Logo } from './Logo' + +/** + * 注册 + * @returns + */ +export const SignUpForm = () => { + return <> + {/* */} +
+
+
+
+
+
+ + + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + Connect With + + + +

+ By creating an account you are agree with our + + Privacy + + and + + Policy + +

+ +

+ Already have an account? + + Sign In + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+ {/* */} + +} diff --git a/themes/starter/components/svg/SVGCircleBG2.js b/themes/starter/components/svg/SVGCircleBG2.js new file mode 100644 index 00000000..842d2a5e --- /dev/null +++ b/themes/starter/components/svg/SVGCircleBG2.js @@ -0,0 +1,35 @@ +/** + * 圆点背景图 + */ +export const SVGCircleBg2 = () => { + return + + + + + + + + + + + + + + + + + +} diff --git a/themes/starter/components/svg/SVGCircleBG3.js b/themes/starter/components/svg/SVGCircleBG3.js new file mode 100644 index 00000000..0390998d --- /dev/null +++ b/themes/starter/components/svg/SVGCircleBG3.js @@ -0,0 +1,24 @@ +export const SVGCircleBG3 = () => { + return + + + + + + + + + + + + + +} diff --git a/themes/starter/components/svg/SVGFacebook.js b/themes/starter/components/svg/SVGFacebook.js index d5104d31..3d9836e3 100644 --- a/themes/starter/components/svg/SVGFacebook.js +++ b/themes/starter/components/svg/SVGFacebook.js @@ -1,11 +1,11 @@ -export const SVGFacebook = () => { +export const SVGFacebook = ({ className }) => { return { + return + + +} diff --git a/themes/starter/components/svg/SVGTwitter.js b/themes/starter/components/svg/SVGTwitter.js index cfdc63ad..dcef95fc 100644 --- a/themes/starter/components/svg/SVGTwitter.js +++ b/themes/starter/components/svg/SVGTwitter.js @@ -1,11 +1,11 @@ -export const SVGTwitter = () => { +export const SVGTwitter = ({ className }) => { return { loadExternal() }, []) - return
+ return