From 964513b1e91eff356d0151c873f9286d44a9323d Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Tue, 24 Sep 2024 18:19:48 +0800 Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E7=BB=93=E5=90=88OpenWrite?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/OpenWrite.js | 28 ++++++++---- lib/global.js | 14 ++++++ lib/lang/en-US.js | 2 + lib/lang/zh-CN.js | 2 + next.config.js | 2 + package.json | 1 + pages/_app.js | 12 ++++- pages/sign-in/[[...index]].js | 1 - themes/gitbook/components/ArticleInfo.js | 3 +- themes/gitbook/components/Header.js | 16 +++++++ themes/gitbook/index.js | 57 +++++++++++++++++++++++- themes/magzine/components/Catalog.js | 3 -- themes/magzine/components/Header.js | 21 ++++++++- themes/magzine/index.js | 55 +++++++++++++++++++++++ themes/starter/components/Header.js | 28 +++++++++--- themes/theme.js | 6 ++- tsconfig.json | 3 ++ yarn.lock | 14 ++++++ 18 files changed, 244 insertions(+), 24 deletions(-) diff --git a/components/OpenWrite.js b/components/OpenWrite.js index 92d8c1ef..ab0d9a2a 100644 --- a/components/OpenWrite.js +++ b/components/OpenWrite.js @@ -1,4 +1,5 @@ import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' import { isBrowser, loadExternalResource } from '@/lib/utils' import { useRouter } from 'next/router' import { useEffect } from 'react' @@ -24,14 +25,10 @@ const OpenWrite = () => { // 白名单 const whiteList = siteConfig('OPEN_WRITE_WHITE_LIST', '') + // 登录信息 + const { isLoaded, isSignedIn } = useGlobal() + const loadOpenWrite = async () => { - const existWhite = existedWhiteList(router.asPath, whiteList) - - // 如果当前页面在白名单中，则屏蔽加锁 - if (existWhite) { - return - } - try { await loadExternalResource( 'https://readmore.openwrite.cn/js/readmore-2.0.js', @@ -74,11 +71,24 @@ const OpenWrite = () => { } } useEffect(() => { + const existWhite = existedWhiteList(router.asPath, whiteList) + // 白名单中，免检 + if (existWhite) { + return + } + if (isSignedIn) { + // 用户已登录免检 + console.log('用户已登录') + return + } + + // 开发环境免检 if (process.env.NODE_ENV === 'development') { console.log('开发环境:屏蔽OpenWrite') return } - if (isBrowser && blogId) { + + if (isBrowser && blogId && !isSignedIn) { toggleTocItems(true) // 禁止目录项的点击 // Check if the element with id 'read-more-wrap' already exists @@ -89,7 +99,7 @@ const OpenWrite = () => { loadOpenWrite() } } - }) + }, [isLoaded, router]) // 启动一个监听器，当页面上存在#read-more-wrap对象时，所有的 a .notion-table-of-contents-item 对象都禁止点击 diff --git a/lib/global.js b/lib/global.js index dbf6f080..da2232ca 100644 --- a/lib/global.js +++ b/lib/global.js @@ -5,6 +5,7 @@ import { initDarkMode, saveDarkModeToLocalStorage } from '@/themes/theme' +import { useUser } from '@clerk/nextjs' import { useRouter } from 'next/router' import { createContext, useContext, useEffect, useState } from 'react' import { @@ -13,6 +14,10 @@ import { redirectUserLang, saveLangToLocalStorage } from './lang' + +/** + * 全局上下文 + */ const GlobalContext = createContext() export function GlobalContextProvider(props) { @@ -37,6 +42,12 @@ export function GlobalContextProvider(props) { const [onLoading, setOnLoading] = useState(true) // 抓取文章数据 const router = useRouter() + // 登录验证相关 + const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY + const { isLoaded, isSignedIn, user } = enableClerk + ? useUser() + : { isLoaded: true, isSignedIn: false, user: false } + // 是否全屏 const fullWidth = post?.fullWidth ?? false @@ -119,6 +130,9 @@ export function GlobalContextProvider(props) { return ( { // 动态主题：添加 resolve.alias 配置，将动态路径映射到实际路径 + config.resolve.alias['@'] = path.resolve(__dirname) + if (!isServer) { console.log('[默认主题]', path.resolve(__dirname, 'themes', THEME)) } diff --git a/package.json b/package.json index 2dddd68e..64f77211 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "build-all-in-dev": "cross-env VERCEL_ENV=production next build" }, "dependencies": { + "@clerk/localizations": "^3.0.4", "@clerk/nextjs": "^5.1.5", "@headlessui/react": "^1.7.15", "@next/bundle-analyzer": "^12.1.1", diff --git a/pages/_app.js b/pages/_app.js index b29b8022..6dc16305 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -17,8 +17,8 @@ import { getQueryParam } from '../lib/utils' import BLOG from '@/blog.config' import ExternalPlugins from '@/components/ExternalPlugins' import GlobalHead from '@/components/GlobalHead' +import { zhCN } from '@clerk/localizations' import { ClerkProvider } from '@clerk/nextjs' - /** * App挂载DOM 入口文件 * @param {*} param0 @@ -57,7 +57,15 @@ const MyApp = ({ Component, pageProps }) => { ) - return <>{enableClerk ? {content} : content} + return ( + <> + {enableClerk ? ( + {content} + ) : ( + content + )} + + ) } export default MyApp diff --git a/pages/sign-in/[[...index]].js b/pages/sign-in/[[...index]].js index 1347c6f7..53192768 100644 --- a/pages/sign-in/[[...index]].js +++ b/pages/sign-in/[[...index]].js @@ -1,4 +1,3 @@ -// import BLOG from '@/blog.config' import BLOG from '@/blog.config' import { siteConfig } from '@/lib/config' import { getGlobalData } from '@/lib/db/getSiteData' diff --git a/themes/gitbook/components/ArticleInfo.js b/themes/gitbook/components/ArticleInfo.js index d559a90d..7df8a63a 100644 --- a/themes/gitbook/components/ArticleInfo.js +++ b/themes/gitbook/components/ArticleInfo.js @@ -10,7 +10,8 @@ export default function ArticleInfo({ post }) { return (
- Last update: {post.date?.start_date} + Last update:{' '} + {post.date?.start_date || post?.publishDay || post?.lastEditedDay}
) } diff --git a/themes/gitbook/components/Header.js b/themes/gitbook/components/Header.js index 21974adf..195921cd 100644 --- a/themes/gitbook/components/Header.js +++ b/themes/gitbook/components/Header.js @@ -2,6 +2,7 @@ import Collapse from '@/components/Collapse' import DarkModeButton from '@/components/DarkModeButton' import { siteConfig } from '@/lib/config' import { useGlobal } from '@/lib/global' +import { SignInButton, SignedOut, UserButton } from '@clerk/nextjs' import { useRef, useState } from 'react' import CONFIG from '../config' import LogoBar from './LogoBar' @@ -59,6 +60,8 @@ export default function Header(props) { links = customMenu } + const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY + return (
{/* PC端菜单 */} @@ -79,6 +82,19 @@ export default function Header(props) { {/* 右侧 */}
+ {/* 登录相关 */} + {enableClerk && ( + <> + + + + + + + + )} {/* 折叠按钮、仅移动端显示 */} diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js index 96b3b49a..2fbd5265 100644 --- a/themes/gitbook/index.js +++ b/themes/gitbook/index.js @@ -11,6 +11,7 @@ import { siteConfig } from '@/lib/config' import { useGlobal } from '@/lib/global' import { isBrowser } from '@/lib/utils' import { getShortId } from '@/lib/utils/pageId' +import { SignIn, SignUp } from '@clerk/nextjs' import dynamic from 'next/dynamic' import Link from 'next/link' import { useRouter } from 'next/router' @@ -164,7 +165,7 @@ const LayoutBase = props => { {/* 中间内容区域 */}
+ className='flex flex-col justify-between w-full relative z-10 pt-14 min-h-screen'>
@@ -473,6 +474,58 @@ const LayoutTagIndex = props => { ) } +/** + * 登录页面 + * @param {*} props + * @returns + */ +const LayoutSignIn = props => { + const { post } = props + const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY + + return ( + <> +
+ {/* clerk预置表单 */} + {enableClerk && ( +
+ +
+ )} +
+ +
+
+ + ) +} + +/** + * 注册页面 + * @param {*} props + * @returns + */ +const LayoutSignUp = props => { + const { post } = props + const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY + + return ( + <> +
+ {/* clerk预置表单 */} + {enableClerk && ( +
+ +
+ )} +
+ +
+
+ + ) +} + export { Layout404, LayoutArchive, @@ -481,6 +534,8 @@ export { LayoutIndex, LayoutPostList, LayoutSearch, + LayoutSignIn, + LayoutSignUp, LayoutSlug, LayoutTagIndex, CONFIG as THEME_CONFIG diff --git a/themes/magzine/components/Catalog.js b/themes/magzine/components/Catalog.js index 5383d740..0c5412d2 100644 --- a/themes/magzine/components/Catalog.js +++ b/themes/magzine/components/Catalog.js @@ -23,9 +23,6 @@ const Catalog = ({ post, toc, className }) => { actionSectionScrollSpy() window.addEventListener('scroll', actionSectionScrollSpy) } - setTimeout(() => { - console.log('目录', post, toc) - }, 1000) return () => { window.removeEventListener('scroll', actionSectionScrollSpy) } diff --git a/themes/magzine/components/Header.js b/themes/magzine/components/Header.js index f67ced1f..d9896d3d 100644 --- a/themes/magzine/components/Header.js +++ b/themes/magzine/components/Header.js @@ -1,6 +1,7 @@ import Collapse from '@/components/Collapse' import { siteConfig } from '@/lib/config' import { useGlobal } from '@/lib/global' +import { SignInButton, SignedOut, UserButton } from '@clerk/nextjs' import throttle from 'lodash.throttle' import { useRouter } from 'next/router' import { useEffect, useRef, useState } from 'react' @@ -112,6 +113,8 @@ export default function Header(props) { return null } + const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY + return (
)} - {/* 右侧移动端折叠按钮 */} + {/* 右侧按钮 */}
{/* 搜索按钮 */}
+ + {/* 移动端显示开关 */}
{isOpen ? ( @@ -176,6 +181,20 @@ export default function Header(props) { )}
+ + {/* 登录相关 */} + {enableClerk && ( + <> + + + + + + + + )}
diff --git a/themes/magzine/index.js b/themes/magzine/index.js index ca93126a..bcb72840 100644 --- a/themes/magzine/index.js +++ b/themes/magzine/index.js @@ -9,6 +9,7 @@ import WWAds from '@/components/WWAds' import { siteConfig } from '@/lib/config' import { useGlobal } from '@/lib/global' import { isBrowser } from '@/lib/utils' +import { SignIn, SignUp } from '@clerk/nextjs' import Link from 'next/link' import { useRouter } from 'next/router' import { createContext, useContext, useEffect, useRef, useState } from 'react' @@ -440,6 +441,58 @@ const LayoutTagIndex = props => { ) } +/** + * 登录页面 + * @param {*} props + * @returns + */ +const LayoutSignIn = props => { + const { post } = props + const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY + + return ( + <> +
+ {/* clerk预置表单 */} + {enableClerk && ( +
+ +
+ )} +
+ +
+
+ + ) +} + +/** + * 注册页面 + * @param {*} props + * @returns + */ +const LayoutSignUp = props => { + const { post } = props + const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY + + return ( + <> +
+ {/* clerk预置表单 */} + {enableClerk && ( +
+ +
+ )} +
+ +
+
+ + ) +} + export { Layout404, LayoutArchive, @@ -448,6 +501,8 @@ export { LayoutIndex, LayoutPostList, LayoutSearch, + LayoutSignIn, + LayoutSignUp, LayoutSlug, LayoutTagIndex, CONFIG as THEME_CONFIG diff --git a/themes/starter/components/Header.js b/themes/starter/components/Header.js index 14648ebe..44a0d5e6 100644 --- a/themes/starter/components/Header.js +++ b/themes/starter/components/Header.js @@ -68,7 +68,28 @@ export const Header = props => { {/* 深色模式切换 */} {/* 注册登录功能 */} - + {enableClerk && ( + <> + + + + + + + + )} + {!enableClerk && ( - - - - + )}
diff --git a/themes/theme.js b/themes/theme.js index 5840977e..aa5c07e5 100644 --- a/themes/theme.js +++ b/themes/theme.js @@ -99,7 +99,11 @@ const checkThemeDOM = () => { elements[elements.length - 1].scrollIntoView() // 删除前面的元素，只保留最后一个元素 for (let i = 0; i < elements.length - 1; i++) { - if (elements[i] && elements[i].parentNode && elements[i].parentNode.contains(elements[i])) { + if ( + elements[i] && + elements[i].parentNode && + elements[i].parentNode.contains(elements[i]) + ) { elements[i].parentNode.removeChild(elements[i]) } } diff --git a/tsconfig.json b/tsconfig.json index 594fc410..5d04ae0f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,8 +2,11 @@ "compilerOptions": { "baseUrl": ".", "paths": { + "@/blog.config": ["./blog.config"], "@/components/*": ["components/*"], + "@/hooks/*": ["hooks/*"], "@/themes/*": ["themes/*"], + "@/pages/*": ["pages/*"], "@/data/*": ["data/*"], "@/lib/*": ["lib/*"], "@/styles/*": ["styles/*"] diff --git a/yarn.lock b/yarn.lock index 3fcf8073..db36330e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -143,6 +143,13 @@ "@clerk/types" "4.6.0" tslib "2.4.1" +"@clerk/localizations@^3.0.4": + version "3.0.4" + resolved "https://registry.npmjs.org/@clerk/localizations/-/localizations-3.0.4.tgz#6f9e807f31c675b197179582fca711521b83ba22" + integrity sha512-cOvkGXpWbVXU5F0CRedGKVIAaEUQSikBtD+HpsfSxFW9HshTA4DQdkhiQUlpJAyf8WYDJE11V9Dw5cS6ZPlhBg== + dependencies: + "@clerk/types" "4.21.0" + "@clerk/nextjs@^5.1.5": version "5.1.5" resolved "https://r.cnpmjs.org/@clerk/nextjs/-/nextjs-5.1.5.tgz#559473a0e61af61d43e4e4a3242794db65b0ebfc" @@ -167,6 +174,13 @@ std-env "^3.7.0" swr "^2.2.0" +"@clerk/types@4.21.0": + version "4.21.0" + resolved "https://registry.npmjs.org/@clerk/types/-/types-4.21.0.tgz#0ef79321d72983ef6e8c4a945617fe1f7d657c92" + integrity sha512-yyPNF4agzub9zXOht9Bk8HG+OkHfLKIpsQuTCiZJszehcKNUqKvJZRxUwdRREBYnBdMl632PKCwbckZsChVxVQ== + dependencies: + csstype "3.1.1" + "@clerk/types@4.6.0": version "4.6.0" resolved "https://r.cnpmjs.org/@clerk/types/-/types-4.6.0.tgz#2dd88a3ee603f4577606ad8ad1a46ae8c70401ec"