登录-clerk方案

themes/starter/components/NavBar.js

@@ -1,21 +1,24 @@
 /* eslint-disable no-unreachable */
-import throttle from 'lodash.throttle';
+import { siteConfig } from '@/lib/config'
+import { useGlobal } from '@/lib/global'
+import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
+import throttle from 'lodash.throttle'
+import { useRouter } from 'next/router'
 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';
+import CONFIG from '../config'
+import { DarkModeButton } from './DarkModeButton'
+import { Logo } from './Logo'
+import { MenuList } from './MenuList'
 
 /**
  * 顶部导航栏
  */
-export const NavBar = (props) => {
+export const NavBar = props => {
   const router = useRouter()
   const { isDarkMode } = useGlobal()
-  const [buttonTextColor, setColor] = useState(router.route === '/' ? 'text-white' : '')
+  const [buttonTextColor, setColor] = useState(
+    router.route === '/' ? 'text-white' : ''
+  )
   useEffect(() => {
     if (isDarkMode || router.route === '/') {
       setColor('text-white')
@@ -33,59 +36,70 @@ export const NavBar = (props) => {
   const throttleMs = 200
   const navBarScollListener = useCallback(
     throttle(() => {
-    // eslint-disable-next-line camelcase
-      const ud_header = document.querySelector('.ud-header');
-      const scrollY = window.scrollY;
+      // eslint-disable-next-line camelcase
+      const ud_header = document.querySelector('.ud-header')
+      const scrollY = window.scrollY
       // 控制台输出当前滚动位置和 sticky 值
       if (scrollY > 0) {
-        ud_header?.classList?.add('sticky');
+        ud_header?.classList?.add('sticky')
       } else {
-        ud_header?.classList?.remove('sticky');
+        ud_header?.classList?.remove('sticky')
       }
     }, throttleMs)
   )
 
-  return <>
-        {/* <!-- ====== Navbar Section Start --> */}
-        <div className="ud-header absolute left-0 top-0 z-40 flex w-full items-center bg-transparent" >
+  return (
+    <>
+      {/* <!-- ====== Navbar Section Start --> */}
+      <div className='ud-header absolute left-0 top-0 z-40 flex w-full items-center bg-transparent'>
+        <div className='container'>
+          <div className='relative -mx-4 flex items-center justify-between'>
+            {/* Logo */}
+            <Logo />
 
-        <div className="container">
+            <div className='flex w-full items-center justify-between px-4'>
+              {/* 中间菜单 */}
+              <MenuList {...props} />
 
-            <div className="relative -mx-4 flex items-center justify-between">
+              {/* 右侧功能 */}
+              <div className='flex items-center justify-end pr-16 lg:pr-0 space-x-4'>
+                {/* 深色模式切换 */}
+                <DarkModeButton />
 
-                {/* Logo */}
-                <Logo/>
+                {/* 注册登录功能 */}
+                <div className='hidden sm:flex'>
+                  <SignedOut>
+                    <a
+                      href={siteConfig(
+                        'STARTER_NAV_BUTTON_1_URL',
+                        null,
+                        CONFIG
+                      )}
+                      className={`loginBtn ${buttonTextColor}  px-[22px] py-2 text-base font-medium hover:opacity-70`}>
+                      {siteConfig('STARTER_NAV_BUTTON_1_TEXT', null, CONFIG)}
+                    </a>
+                    {/* <button
+                        className={`signUpBtn ${buttonTextColor} rounded-md bg-white bg-opacity-20 px-6 py-2 text-base font-medium duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}>
+                        {siteConfig('STARTER_NAV_BUTTON_1_TEXT', null, CONFIG)}
+                      </button> */}
+                  </SignedOut>
 
-                <div className="flex w-full items-center justify-between px-4">
-
-                    {/* 中间菜单 */}
-                    <MenuList {...props}/>
-
-                    {/* 右侧功能 */}
-                    <div className="flex items-center justify-end pr-16 lg:pr-0">
-                        {/* 深色模式切换 */}
-                        <DarkModeButton/>
-                        {/* 注册登录功能 */}
-                        <div className="hidden sm:flex">
-                            <a
-                            href={siteConfig('STARTER_NAV_BUTTON_1_URL', null, CONFIG)}
-                            className={`loginBtn ${buttonTextColor}  px-[22px] py-2 text-base font-medium hover:opacity-70`}
-                            >
-                           {siteConfig('STARTER_NAV_BUTTON_1_TEXT', null, CONFIG)}
-                            </a>
-                            <a
-                            href={siteConfig('STARTER_NAV_BUTTON_2_URL', null, CONFIG)}
-                            className={`signUpBtn ${buttonTextColor} rounded-md bg-white bg-opacity-20 px-6 py-2 text-base font-medium duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}
-                            >
-                           {siteConfig('STARTER_NAV_BUTTON_2_TEXT', null, CONFIG)}
-                            </a>
-                        </div>
-                    </div>
+                  <SignedIn>
+                    <UserButton />
+                  </SignedIn>
 
+                  {/* <a
+                    href={siteConfig('STARTER_NAV_BUTTON_2_URL', null, CONFIG)}
+                    className={`signUpBtn ${buttonTextColor} rounded-md bg-white bg-opacity-20 px-6 py-2 text-base font-medium duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}>
+                    {siteConfig('STARTER_NAV_BUTTON_2_TEXT', null, CONFIG)}
+                  </a> */}
                 </div>
+              </div>
             </div>
+          </div>
         </div>
-    </div>
-    {/* <!-- ====== Navbar Section End --> */}
+      </div>
+      {/* <!-- ====== Navbar Section End --> */}
     </>
+  )
 }

themes/starter/config.js

@@ -24,10 +24,10 @@ const CONFIG = {
 
   // 顶部右侧导航暗流
   STARTER_NAV_BUTTON_1_TEXT: 'Sign In',
-  STARTER_NAV_BUTTON_1_URL: '/signin',
+  STARTER_NAV_BUTTON_1_URL: '/sign-in',
 
   STARTER_NAV_BUTTON_2_TEXT: 'Sign Up',
-  STARTER_NAV_BUTTON_2_URL: '/signup',
+  STARTER_NAV_BUTTON_2_URL: '/sign-up',
 
   // 特性区块
   STARTER_FEATURE_ENABLE: true, // 特性区块开关

themes/starter/index.js

@@ -33,12 +33,12 @@ import { Style } from './style'
 // import { MadeWithButton } from './components/MadeWithButton'
 import BLOG from '@/blog.config'
 import { loadWowJS } from '@/lib/plugins/wow'
+import { SignIn, SignUp } from '@clerk/nextjs'
 import Link from 'next/link'
 import { Banner } from './components/Banner'
 import { SignInForm } from './components/SignInForm'
 import { SignUpForm } from './components/SignUpForm'
 import { SVG404 } from './components/svg/SVG404'
-
 /**
  * 布局框架
  * Landing-2 主题用作产品落地页展示
@@ -225,6 +225,7 @@ const LayoutTagIndex = props => <></>
  * @returns
  */
 const LayoutSignIn = props => {
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
   return (
     <>
       <div className='grow mt-20'>
@@ -232,7 +233,15 @@ const LayoutSignIn = props => {
           title='登录'
           description='这里是演示页面，NotionNext目前不提供会员登录功能'
         />
-        <SignInForm />
+        {/* clerk预置表单 */}
+        {enableClerk && (
+          <div className='flex justify-center py-6'>
+            <SignIn />
+          </div>
+        )}
+
+        {/* 自定义登录表单 */}
+        {!enableClerk && <SignInForm />}
       </div>
     </>
   )
@@ -243,17 +252,29 @@ const LayoutSignIn = props => {
  * @param {*} props
  * @returns
  */
-const LayoutSignUp = props => (
-  <>
-    <div className='grow mt-20'>
-      <Banner
-        title='注册'
-        description='这里是演示页面，NotionNext目前不提供会员注册功能'
-      />
-      <SignUpForm />
-    </div>
-  </>
-)
+const LayoutSignUp = props => {
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+  return (
+    <>
+      <div className='grow mt-20'>
+        <Banner
+          title='注册'
+          description='这里是演示页面，NotionNext目前不提供会员注册功能'
+        />
+
+        {/* clerk预置表单 */}
+        {enableClerk && (
+          <div className='flex justify-center py-6'>
+            <SignUp />
+          </div>
+        )}
+
+        {/* 自定义登录表单 */}
+        {!enableClerk && <SignUpForm />}
+      </div>
+    </>
+  )
+}
 
 export {
   Layout404,