From f0cefd305b1c131ad72ce27a52b2aa9e9c4537a1 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Mon, 23 Sep 2024 17:35:46 +0800
Subject: [PATCH] =?UTF-8?q?clerk=20=E7=9B=B8=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/{NavBar.js => Header.js}       | 37 ++++++++++------
 themes/starter/index.js                       | 43 +++++++++++++------
 tsconfig.json                                 |  6 +--
 3 files changed, 57 insertions(+), 29 deletions(-)
 rename themes/starter/components/{NavBar.js => Header.js} (65%)

diff --git a/themes/starter/components/NavBar.js b/themes/starter/components/Header.js
similarity index 65%
rename from themes/starter/components/NavBar.js
rename to themes/starter/components/Header.js
index b11b3cb5..14648ebe 100644
--- a/themes/starter/components/NavBar.js
+++ b/themes/starter/components/Header.js
@@ -1,6 +1,7 @@
 /* eslint-disable no-unreachable */
 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'
@@ -11,12 +12,15 @@ import { MenuList } from './MenuList'
 /**
  * 顶部导航栏
  */
-export const NavBar = props => {
+export const Header = props => {
   const router = useRouter()
   const { isDarkMode } = useGlobal()
   const [buttonTextColor, setColor] = useState(
     router.route === '/' ? 'text-white' : ''
   )
+
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
   useEffect(() => {
     if (isDarkMode || router.route === '/') {
       setColor('text-white')
@@ -60,22 +64,27 @@ export const NavBar = props => {
               <MenuList {...props} />
 
               {/* 右侧功能 */}
-              <div className='flex items-center justify-end pr-16 lg:pr-0'>
+              <div className='flex items-center gap-4 justify-end pr-16 lg:pr-0'>
                 {/* 深色模式切换 */}
                 <DarkModeButton />
                 {/* 注册登录功能 */}
-                <div className='hidden sm:flex'>
-                  <a
-                    href={siteConfig('STARTER_NAV_BUTTON_1_URL')}
-                    className={`loginBtn ${buttonTextColor}  px-[22px] py-2 text-base font-medium hover:opacity-70`}>
-                    {siteConfig('STARTER_NAV_BUTTON_1_TEXT')}
-                  </a>
-                  <a
-                    href={siteConfig('STARTER_NAV_BUTTON_2_URL')}
-                    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')}
-                  </a>
-                </div>
+                <SignedOut>
+                  <div className='hidden sm:flex gap-4'>
+                    <a
+                      href={siteConfig('STARTER_NAV_BUTTON_1_URL')}
+                      className={`loginBtn ${buttonTextColor} p-2 text-base font-medium hover:opacity-70`}>
+                      {siteConfig('STARTER_NAV_BUTTON_1_TEXT')}
+                    </a>
+                    <a
+                      href={siteConfig('STARTER_NAV_BUTTON_2_URL')}
+                      className={`signUpBtn ${buttonTextColor} p-2 rounded-md bg-white bg-opacity-20 py-2 text-base font-medium duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark`}>
+                      {siteConfig('STARTER_NAV_BUTTON_2_TEXT')}
+                    </a>
+                  </div>
+                </SignedOut>
+                <SignedIn>
+                  <UserButton />
+                </SignedIn>
               </div>
             </div>
           </div>
diff --git a/themes/starter/index.js b/themes/starter/index.js
index 766b3f60..b2c0232d 100644
--- a/themes/starter/index.js
+++ b/themes/starter/index.js
@@ -2,13 +2,6 @@
 /* eslint-disable @next/next/no-img-element */
 
 'use client'
-
-/**
- * 这是一个空白主题，方便您用作创建新主题时的模板，从而开发出您自己喜欢的主题
- * 1. 禁用了代码质量检查功能，提高了代码的宽容度；您可以使用标准的html写法
- * 2. 内容大部分是在此文件中写死，notion数据从props参数中传进来
- * 3. 您可在此网站找到更多喜欢的组件 https://www.tailwind-kit.com/
- */
 import Loading from '@/components/Loading'
 import NotionPage from '@/components/NotionPage'
 import { siteConfig } from '@/lib/config'
@@ -23,8 +16,8 @@ import { Contact } from './components/Contact'
 import { FAQ } from './components/FAQ'
 import { Features } from './components/Features'
 import { Footer } from './components/Footer'
+import { Header } from './components/Header'
 import { Hero } from './components/Hero'
-import { NavBar } from './components/NavBar'
 import { Pricing } from './components/Pricing'
 import { Team } from './components/Team'
 import { Testimonials } from './components/Testimonials'
@@ -32,11 +25,13 @@ import CONFIG from './config'
 import { Style } from './style'
 // import { MadeWithButton } from './components/MadeWithButton'
 import { loadWowJS } from '@/lib/plugins/wow'
+import { SignIn, SignUp } from '@clerk/nextjs'
 import Link from 'next/link'
 import { Banner } from './components/Banner'
 import { CTA } from './components/CTA'
 import { SignInForm } from './components/SignInForm'
 import { SVG404 } from './components/svg/SVG404'
+
 /**
  * 布局框架
  * Landing-2 主题用作产品落地页展示
@@ -58,14 +53,17 @@ const LayoutBase = props => {
       id='theme-starter'
       className={`${siteConfig('FONT_STYLE')} min-h-screen flex flex-col dark:bg-[#212b36] scroll-smooth`}>
       <Style />
-      <NavBar {...props} />
+      {/* 页头 */}
+      <Header {...props} />
 
       {children}
 
+      {/* 页脚 */}
       <Footer {...props} />
 
       {/* 悬浮按钮 */}
       <BackToTopButton />
+
       {/* <MadeWithButton/> */}
     </div>
   )
@@ -101,7 +99,8 @@ const LayoutIndex = props => {
       {siteConfig('STARTER_CONTACT_ENABLE') && <Contact />}
       {/* 合作伙伴 */}
       {siteConfig('STARTER_BRANDS_ENABLE') && <Brand />}
-      <CTA />
+      {/* 行动呼吁 */}
+      {siteConfig('STARTER_CTA_ENABLE') && <CTA />}
     </>
   )
 }
@@ -220,6 +219,7 @@ const LayoutTagIndex = props => <></>
  * @returns
  */
 const LayoutSignIn = props => {
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
   const title = siteConfig('STARTER_SIGNIN', '登录')
   const description = siteConfig(
     'STARTER_SIGNIN_DESCRITION',
@@ -229,7 +229,15 @@ const LayoutSignIn = props => {
     <>
       <div className='grow mt-20'>
         <Banner title={title} description={description} />
-        <SignInForm />
+        {/* clerk预置表单 */}
+        {enableClerk && (
+          <div className='flex justify-center py-6'>
+            <SignIn />
+          </div>
+        )}
+
+        {/* 自定义登录表单 */}
+        {!enableClerk && <SignInForm />}
       </div>
     </>
   )
@@ -241,6 +249,8 @@ const LayoutSignIn = props => {
  * @returns
  */
 const LayoutSignUp = props => {
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
   const title = siteConfig('STARTER_SIGNIN', '注册')
   const description = siteConfig(
     'STARTER_SIGNIN_DESCRITION',
@@ -250,7 +260,16 @@ const LayoutSignUp = props => {
     <>
       <div className='grow mt-20'>
         <Banner title={title} description={description} />
-        <SignInForm />
+
+        {/* clerk预置表单 */}
+        {enableClerk && (
+          <div className='flex justify-center py-6'>
+            <SignUp />
+          </div>
+        )}
+
+        {/* 自定义登录表单 */}
+        {!enableClerk && <SignUpForm />}
       </div>
     </>
   )
diff --git a/tsconfig.json b/tsconfig.json
index 31e1df1f..c882f101 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "noEmit": true,
     "incremental": true,
     "target": "es6",
@@ -21,12 +21,12 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve"
   },
   "include": [
     "next-env.d.ts",
     "**/*.json",
-    "**/*.js",
+    // "**/*.js",
     "**/*.ts",
     "**/*.tsx",
     "**/*.jsx"