Merge branch 'main' of https://github.com/tangly1024/NotionNext

Flyingpen · Nov 22, 2024 · a6bf7e0 · a6bf7e0
2 parents 71f7ea8 + a07b128
commit a6bf7e0
Show file tree

Hide file tree

Showing 28 changed files with 324 additions and 393 deletions.
diff --git a/components/Comment.js b/components/Comment.js
@@ -6,56 +6,6 @@ import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
 import Artalk from './Artalk'
 
-const WalineComponent = dynamic(
-  () => {
-    return import('@/components/WalineComponent')
-  },
-  { ssr: false }
-)
-
-const CusdisComponent = dynamic(
-  () => {
-    return import('@/components/CusdisComponent')
-  },
-  { ssr: false }
-)
-
-const TwikooCompenent = dynamic(
-  () => {
-    return import('@/components/Twikoo')
-  },
-  { ssr: false }
-)
-
-const GitalkComponent = dynamic(
-  () => {
-    return import('@/components/Gitalk')
-  },
-  { ssr: false }
-)
-const UtterancesComponent = dynamic(
-  () => {
-    return import('@/components/Utterances')
-  },
-  { ssr: false }
-)
-const GiscusComponent = dynamic(
-  () => {
-    return import('@/components/Giscus')
-  },
-  { ssr: false }
-)
-const WebMentionComponent = dynamic(
-  () => {
-    return import('@/components/WebMention')
-  },
-  { ssr: false }
-)
-
-const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
-  ssr: false
-})
-
 /**
  * 评论组件
  * 只有当前组件在浏览器可见范围内才会加载内容
@@ -114,10 +64,10 @@ const Comment = ({ frontMatter, className }) => {
   }
 
   if (!frontMatter) {
-    return <>Loading...</>
+    return null
   }
 
-  if (isSearchEngineBot()) {
+  if (isSearchEngineBot) {
     return null
   }
 
@@ -204,4 +154,54 @@ const Comment = ({ frontMatter, className }) => {
   )
 }
 
+const WalineComponent = dynamic(
+  () => {
+    return import('@/components/WalineComponent')
+  },
+  { ssr: false }
+)
+
+const CusdisComponent = dynamic(
+  () => {
+    return import('@/components/CusdisComponent')
+  },
+  { ssr: false }
+)
+
+const TwikooCompenent = dynamic(
+  () => {
+    return import('@/components/Twikoo')
+  },
+  { ssr: false }
+)
+
+const GitalkComponent = dynamic(
+  () => {
+    return import('@/components/Gitalk')
+  },
+  { ssr: false }
+)
+const UtterancesComponent = dynamic(
+  () => {
+    return import('@/components/Utterances')
+  },
+  { ssr: false }
+)
+const GiscusComponent = dynamic(
+  () => {
+    return import('@/components/Giscus')
+  },
+  { ssr: false }
+)
+const WebMentionComponent = dynamic(
+  () => {
+    return import('@/components/WebMention')
+  },
+  { ssr: false }
+)
+
+const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
+  ssr: false
+})
+
 export default Comment
diff --git a/components/LazyImage.js b/components/LazyImage.js
@@ -41,6 +41,10 @@ export default function LazyImage({
     if (typeof onLoad === 'function') {
       onLoad() // 触发传递的onLoad回调函数
     }
+    // 移除占位符类名
+    if (imageRef.current) {
+      imageRef.current.classList.remove('lazy-image-placeholder')
+    }
   }
   /**
    * 图片加载失败回调
@@ -53,13 +57,13 @@ export default function LazyImage({
       } else {
         imageRef.current.src = defaultPlaceholderSrc
       }
+      imageRef.current.classList.remove('lazy-image-placeholder')
     }
   }
 
   useEffect(() => {
     const adjustedImageSrc =
       adjustImgSize(src, maxWidth) || defaultPlaceholderSrc
-
     // 加载原图
     const img = new Image()
     img.src = adjustedImageSrc
@@ -68,7 +72,6 @@ export default function LazyImage({
       handleImageLoaded(adjustedImageSrc)
     }
     img.onerror = handleImageError
-
     const observer = new IntersectionObserver(
       entries => {
         entries.forEach(entry => {
@@ -81,11 +84,9 @@ export default function LazyImage({
       },
       { rootMargin: '50px 0px' } // Adjust the rootMargin as needed to trigger the loading earlier or later
     )
-
     if (imageRef.current) {
       observer.observe(imageRef.current)
     }
-
     return () => {
       if (imageRef.current) {
         observer.unobserve(imageRef.current)
@@ -97,6 +98,7 @@ export default function LazyImage({
   const imgProps = {
     ref: imageRef,
     src: currentSrc,
+    'data-src': src,
     alt: alt,
     onLoad: handleThumbnailLoaded, // 缩略图加载完成
     onError: handleImageError // 添加onError处理函数
@@ -118,14 +120,19 @@ export default function LazyImage({
     imgProps.height = height
   }
   if (className) {
-    imgProps.className = className
+    imgProps.className = className + ' lazy-image-placeholder'
   }
   if (style) {
     imgProps.style = style
   }
   if (onClick) {
     imgProps.onClick = onClick
   }
+
+  if (!src) {
+    return null
+  }
+
   return (
     <>
       {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -136,6 +143,20 @@ export default function LazyImage({
           <link rel='preload' as='image' href={adjustImgSize(src, maxWidth)} />
         </Head>
       )}
+      <style>
+        {` 
+        .lazy-image-placeholder{
+            background: 
+                linear-gradient(90deg,#0001 33%,#0005 50%,#0001 66%)
+                #f2f2f2;
+            background-size:300% 100%;
+            animation: l1 1s infinite linear;
+            }
+            @keyframes l1 {
+            0% {background-position: right}
+        }
+        `}
+      </style>
     </>
   )
 }

diff --git a/components/LoadingCover.js b/components/LoadingCover.js
@@ -1,3 +1,4 @@
+'user client'
 import { useGlobal } from '@/lib/global'
 import { useEffect, useState } from 'react'
 /**

diff --git a/components/GlobalHead.js → components/SEO.js b/components/GlobalHead.js → components/SEO.js
@@ -10,7 +10,7 @@ import { useEffect } from 'react'
  * @param {*} param0
  * @returns
  */
-const GlobalHead = props => {
+const SEO = props => {
   const { children, siteInfo, post, NOTION_CONFIG } = props
   let url = siteConfig('PATH')?.length
     ? `${siteConfig('LINK')}/${siteConfig('SUB_PATH', '')}`
@@ -275,4 +275,4 @@ const getSEOMeta = (props, router, locale) => {
   }
 }
 
-export default GlobalHead
+export default SEO
diff --git a/components/ui/dashboard/DashboardBody.js b/components/ui/dashboard/DashboardBody.js
@@ -1,7 +1,7 @@
 'use client'
-import { UserProfile } from '@clerk/nextjs'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
+import DashboardUser from './DashboardUser'
 
 const DashboardMenuList = dynamic(() => import('./DashboardMenuList'))
 const DashboardItemMembership = dynamic(
@@ -25,21 +25,11 @@ export default function DashboardBody() {
       <div className='side-tabs w-full md:w-72'>
         <DashboardMenuList />
       </div>
+      {/* 控制台右侧内容 */}
       <div className='main-content-wrapper w-full'>
         {basePath === '/dashboard' && <DashboardItemHome />}
-        {(basePath === '/dashboard/user-profile' ||
-          basePath === '/dashboard/user-profile/security') && (
-          <UserProfile
-            appearance={{
-              elements: {
-                cardBox: 'w-full',
-                rootBox: 'w-full'
-              }
-            }}
-            className='bg-blue-300'
-            routing='path'
-            path='/dashboard/user-profile'
-          />
+        {basePath?.indexOf('/dashboard/user-profile') === 0 && (
+          <DashboardUser />
         )}
         {basePath === '/dashboard/balance' && <DashboardItemBalance />}
         {basePath === '/dashboard/membership' && <DashboardItemMembership />}

diff --git a/components/ui/dashboard/DashboardHeader.js b/components/ui/dashboard/DashboardHeader.js
@@ -1,8 +1,9 @@
 import LazyImage from '@/components/LazyImage'
 import { useGlobal } from '@/lib/global'
 import formatDate from '@/lib/utils/formatDate'
-import { SignOutButton } from '@clerk/nextjs'
 import Link from 'next/link'
+import DashboardSignOutButton from './DashboardSignOutButton'
+
 /**
  * 仪表盘页头
  * @returns
@@ -39,13 +40,7 @@ export default function DashboardHeader() {
 
         {/* 登出按钮 */}
         <div className='flex items-center'>
-          <SignOutButton redirectUrl='/'>
-            <button className='text-white bg-gray-800 hover:bg-gray-900 hover:ring-4 hover:ring-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700'>
-              <span className='text-nowrap'>
-                <i className='fas fa-right-from-bracket' /> Sign Out
-              </span>
-            </button>
-          </SignOutButton>
+          <DashboardSignOutButton />
         </div>
       </div>
     </>

diff --git a/components/ui/dashboard/DashboardSignOutButton.js b/components/ui/dashboard/DashboardSignOutButton.js
@@ -0,0 +1,20 @@
+import { SignOutButton } from '@clerk/nextjs'
+/**
+ * 控制台登出按钮
+ * @returns
+ */
+export default function DashboardSignOutButton() {
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+  if (!enableClerk) {
+    return null
+  }
+  return (
+    <SignOutButton redirectUrl='/'>
+      <button className='text-white bg-gray-800 hover:bg-gray-900 hover:ring-4 hover:ring-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700'>
+        <span className='text-nowrap'>
+          <i className='fas fa-right-from-bracket' /> Sign Out
+        </span>
+      </button>
+    </SignOutButton>
+  )
+}
diff --git a/components/ui/dashboard/DashboardUser.js b/components/ui/dashboard/DashboardUser.js
@@ -0,0 +1,24 @@
+import { UserProfile } from '@clerk/nextjs'
+/**
+ * 控制台用户账号面板
+ * @returns
+ */
+export default function DashboardUser() {
+  const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+  if (!enableClerk) {
+    return null
+  }
+  return (
+    <UserProfile
+      appearance={{
+        elements: {
+          cardBox: 'w-full',
+          rootBox: 'w-full'
+        }
+      }}
+      className='bg-blue-300'
+      routing='path'
+      path='/dashboard/user-profile'
+    />
+  )
+}
diff --git a/lib/cache/cache_manager.js b/lib/cache/cache_manager.js
@@ -10,10 +10,11 @@ import MemoryCache from './memory_cache'
 export async function getDataFromCache(key, force) {
   if (BLOG.ENABLE_CACHE || force) {
     const dataFromCache = await getApi().getCache(key)
-    if (JSON.stringify(dataFromCache) === '[]') {
+    if (!dataFromCache || JSON.stringify(dataFromCache) === '[]') {
       return null
     }
-    return getApi().getCache(key)
+    // console.trace('[API-->>缓存]:', key, dataFromCache)
+    return dataFromCache
   } else {
     return null
   }
@@ -23,6 +24,7 @@ export async function setDataToCache(key, data) {
   if (!data) {
     return
   }
+  //   console.trace('[API-->>缓存写入]:', key)
   await getApi().setCache(key, data)
 }
 

diff --git a/lib/global.js b/lib/global.js
@@ -39,7 +39,7 @@ export function GlobalContextProvider(props) {
 
   const defaultDarkMode = NOTION_CONFIG?.APPEARANCE || APPEARANCE
   const [isDarkMode, updateDarkMode] = useState(defaultDarkMode === 'dark') // 默认深色模式
-  const [onLoading, setOnLoading] = useState(true) // 抓取文章数据
+  const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
   const router = useRouter()
 
   // 登录验证相关