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

Author: actions-user

.env.local

@@ -1,5 +1,5 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.4.4
+NEXT_PUBLIC_VERSION=4.4.5
 
 
 # 可在此添加环境变量，去掉最左边的（# ）注释即可

components/Comment.js

@@ -1,9 +1,10 @@
-import dynamic from 'next/dynamic'
 import Tabs from '@/components/Tabs'
+import { siteConfig } from '@/lib/config'
 import { isBrowser, isSearchEngineBot } from '@/lib/utils'
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
+import { useEffect, useRef, useState } from 'react'
 import Artalk from './Artalk'
-import { siteConfig } from '@/lib/config'
 
 const WalineComponent = dynamic(
   () => {
@@ -57,11 +58,14 @@ const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
 
 /**
  * 评论组件
+ * 只有当前组件在浏览器可见范围内才会加载内容
  * @param {*} param0
  * @returns
  */
-const Comment = ({ siteInfo, frontMatter, className }) => {
+const Comment = ({ frontMatter, className }) => {
   const router = useRouter()
+  const [shouldLoad, setShouldLoad] = useState(false)
+  const commentRef = useRef(null)
 
   const COMMENT_ARTALK_SERVER = siteConfig('COMMENT_ARTALK_SERVER')
   const COMMENT_TWIKOO_ENV_ID = siteConfig('COMMENT_TWIKOO_ENV_ID')
@@ -73,65 +77,125 @@ const Comment = ({ siteInfo, frontMatter, className }) => {
   const COMMENT_GITALK_CLIENT_ID = siteConfig('COMMENT_GITALK_CLIENT_ID')
   const COMMENT_WEBMENTION_ENABLE = siteConfig('COMMENT_WEBMENTION_ENABLE')
 
-  if (isSearchEngineBot()) {
-    return null
-  }
+  useEffect(() => {
+    // Check if the component is visible in the viewport
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          setShouldLoad(true)
+          observer.unobserve(entry.target)
+        }
+      })
+    })
+
+    if (commentRef.current) {
+      observer.observe(commentRef.current)
+    }
+
+    return () => {
+      if (commentRef.current) {
+        observer.unobserve(commentRef.current)
+      }
+    }
+  }, [frontMatter])
 
   // 当连接中有特殊参数时跳转到评论区
-  if (isBrowser && ('giscus' in router.query || router.query.target === 'comment')) {
+  if (
+    isBrowser &&
+    ('giscus' in router.query || router.query.target === 'comment')
+  ) {
     setTimeout(() => {
       const url = router.asPath.replace('?target=comment', '')
       history.replaceState({}, '', url)
-      document?.getElementById('comment')?.scrollIntoView({ block: 'start', behavior: 'smooth' })
+      document
+        ?.getElementById('comment')
+        ?.scrollIntoView({ block: 'start', behavior: 'smooth' })
     }, 1000)
   }
 
   if (!frontMatter) {
     return <>Loading...</>
   }
 
+  if (isSearchEngineBot()) {
+    return null
+  }
+
   return (
-        <div key={frontMatter?.id} id='comment' className={`comment mt-5 text-gray-800 dark:text-gray-300 ${className || ''}`}>
-            <Tabs>
-                {COMMENT_ARTALK_SERVER && (<div key='Artalk'>
-                    <Artalk />
-                </div>)}
-
-                {COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>
-                    <TwikooCompenent />
-                </div>)}
-
-                {COMMENT_WALINE_SERVER_URL && (<div key='Waline'>
-                    <WalineComponent />
-                </div>)}
-
-                {COMMENT_VALINE_APP_ID && (<div key='Valine' name='reply'>
-                    <ValineComponent path={frontMatter.id} />
-                </div>)}
-
-                {COMMENT_GISCUS_REPO && (
-                    <div key="Giscus">
-                        <GiscusComponent className="px-2" />
-                    </div>
-                )}
-
-                {COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
-                    <CusdisComponent frontMatter={frontMatter} />
-                </div>)}
-
-                {COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
-                    <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
-                </div>)}
-
-                {COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
-                    <GitalkComponent frontMatter={frontMatter} />
-                </div>)}
-
-                {COMMENT_WEBMENTION_ENABLE && (<div key='WebMention'>
-                    <WebMentionComponent frontMatter={frontMatter} className="px-2" />
-                </div>)}
-            </Tabs>
+    <div
+      key={frontMatter?.id}
+      id='comment'
+      ref={commentRef}
+      className={`comment mt-5 text-gray-800 dark:text-gray-300 ${className || ''}`}>
+      {/* 延迟加载评论区 */}
+      {!shouldLoad && (
+        <div className='text-center'>
+          Loading...
+          <i className='fas fa-spinner animate-spin text-3xl ' />
         </div>
+      )}
+
+      {shouldLoad && (
+        <Tabs>
+          {COMMENT_ARTALK_SERVER && (
+            <div key='Artalk'>
+              <Artalk />
+            </div>
+          )}
+
+          {COMMENT_TWIKOO_ENV_ID && (
+            <div key='Twikoo'>
+              <TwikooCompenent />
+            </div>
+          )}
+
+          {COMMENT_WALINE_SERVER_URL && (
+            <div key='Waline'>
+              <WalineComponent />
+            </div>
+          )}
+
+          {COMMENT_VALINE_APP_ID && (
+            <div key='Valine' name='reply'>
+              <ValineComponent path={frontMatter.id} />
+            </div>
+          )}
+
+          {COMMENT_GISCUS_REPO && (
+            <div key='Giscus'>
+              <GiscusComponent className='px-2' />
+            </div>
+          )}
+
+          {COMMENT_CUSDIS_APP_ID && (
+            <div key='Cusdis'>
+              <CusdisComponent frontMatter={frontMatter} />
+            </div>
+          )}
+
+          {COMMENT_UTTERRANCES_REPO && (
+            <div key='Utterance'>
+              <UtterancesComponent
+                issueTerm={frontMatter.id}
+                className='px-2'
+              />
+            </div>
+          )}
+
+          {COMMENT_GITALK_CLIENT_ID && (
+            <div key='GitTalk'>
+              <GitalkComponent frontMatter={frontMatter} />
+            </div>
+          )}
+
+          {COMMENT_WEBMENTION_ENABLE && (
+            <div key='WebMention'>
+              <WebMentionComponent frontMatter={frontMatter} className='px-2' />
+            </div>
+          )}
+        </Tabs>
+      )}
+    </div>
   )
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "4.4.4",
+  "version": "4.4.5",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {

themes/commerce/components/Catalog.js

@@ -79,7 +79,7 @@ const Catalog = ({ toc }) => {
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-red-600'}`}
+                className={`truncate ${activeSection === id ? 'font-bold text-red-600': ''}`}
               >
                 {tocItem.text}
               </span>

themes/fukasawa/components/Catalog.js

@@ -71,7 +71,7 @@ const Catalog = ({ toc }) => {
               notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
           >
             <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-              className={`${activeSection === id && ' font-bold text-red-400 underline'}`}
+              className={`truncate ${activeSection === id ? 'font-bold text-red-400 underline' : ''}`}
               title={tocItem.text}
             >
               {tocItem.text}

themes/gitbook/components/BlogPostListPage.js

@@ -74,7 +74,7 @@ const Catalog = ({ post }) => {
               notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-gray-500 underline'}`}
+                className={`truncate ${activeSection === id ? 'font-bold text-gray-500 underline' : ''}`}
               >
                 {tocItem.text}
               </span>

themes/gitbook/components/Catalog.js

@@ -1,9 +1,8 @@
-import BlogPostCard from './BlogPostCard'
-import { useState } from 'react'
-import Collapse from '@/components/Collapse'
 import Badge from '@/components/Badge'
+import Collapse from '@/components/Collapse'
 import { siteConfig } from '@/lib/config'
 import CONFIG from '../config'
+import BlogPostCard from './BlogPostCard'
 
 /**
  * 导航列表
@@ -12,36 +11,53 @@ import CONFIG from '../config'
  * @returns {JSX.Element}
  * @constructor
  */
-const NavPostItem = (props) => {
-  const { group } = props
-  const [isOpen, changeIsOpen] = useState(group?.selected)
+const NavPostItem = props => {
+  const { group, expanded, toggleItem } = props // 接收传递的展开状态和切换函数
+  // const [isOpen, setIsOpen] = useState(expanded) // 使用展开状态作为组件内部状态
 
+  // 当展开状态改变时触发切换函数，并根据传入的展开状态更新内部状态
   const toggleOpenSubMenu = () => {
-    changeIsOpen(!isOpen)
+    toggleItem() // 调用父组件传递的切换函数
+    // setIsOpen(!expanded) // 更新内部状态为传入的展开状态的相反值
   }
 
   const groupHasLatest = group?.items?.some(post => post.isLatest)
 
   if (group?.category) {
-    return <>
-            <div onClick={toggleOpenSubMenu}
-                className='select-none relative flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600' key={group?.category}>
-                <span>{group?.category}</span>
-                <div className='inline-flex items-center select-none pointer-events-none '><i className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
-                {groupHasLatest && siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && !isOpen && <Badge/>}
+    return (
+      <>
+        <div
+          onClick={toggleOpenSubMenu}
+          className='select-none relative flex justify-between text-sm cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600'
+          key={group?.category}>
+          <span>{group?.category}</span>
+          <div className='inline-flex items-center select-none pointer-events-none '>
+            <i
+              className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-200 ${expanded ? '-rotate-90' : ''}`}></i>
+          </div>
+          {groupHasLatest &&
+            siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) &&
+            !expanded && <Badge />}
+        </div>
+        <Collapse isOpen={expanded} onHeightChange={props.onHeightChange}>
+          {group?.items?.map(post => (
+            <div key={post.id} className='ml-3 border-l'>
+              <BlogPostCard className='text-sm ml-3' post={post} />
             </div>
-            <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-                {group?.items?.map(post => (<div key={post.id} className='ml-3 border-l'>
-                    <BlogPostCard className='text-sm ml-3' post={post} /></div>))
-                }
-            </Collapse>
-        </>
+          ))}
+        </Collapse>
+      </>
+    )
   } else {
-    return <>
-            {group?.items?.map(post => (<div key={post.id} >
-                <BlogPostCard className='text-sm py-2' post={post} /></div>))
-            }
-        </>
+    return (
+      <>
+        {group?.items?.map(post => (
+          <div key={post.id}>
+            <BlogPostCard className='text-sm py-2' post={post} />
+          </div>
+        ))}
+      </>
+    )
   }
 }