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

China-MY · Jun 1, 2024 · c567fb2 · c567fb2
2 parents 336e970 + 0541bb0
commit c567fb2
Show file tree

Hide file tree

Showing 14 changed files with 284 additions and 211 deletions.
diff --git a/.env.local b/.env.local
@@ -1,5 +1,5 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.5.3
+NEXT_PUBLIC_VERSION=4.5.4
 
 
 # 可在此添加环境变量，去掉最左边的（# ）注释即可

diff --git a/components/Comment.js b/components/Comment.js
@@ -121,6 +121,11 @@ const Comment = ({ frontMatter, className }) => {
     return null
   }
 
+  // 特定文章关闭评论区
+  if (frontMatter?.comment === 'Hide') {
+    return null
+  }
+
   return (
     <div
       key={frontMatter?.id}

diff --git a/components/LazyImage.js b/components/LazyImage.js
@@ -1,6 +1,7 @@
 import { siteConfig } from '@/lib/config'
 import Head from 'next/head'
 import { useEffect, useRef, useState } from 'react'
+
 /**
  * 图片懒加载
  * @param {*} param0
@@ -21,20 +22,21 @@ export default function LazyImage({
 }) {
   const maxWidth = siteConfig('IMAGE_COMPRESS_WIDTH')
   const defaultPlaceholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
-
   const imageRef = useRef(null)
-  const [adjustedSrc, setAdjustedSrc] = useState(
-    placeholderSrc || siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
+  const [currentSrc, setCurrentSrc] = useState(
+    placeholderSrc || defaultPlaceholderSrc
   )
 
-  if (!placeholderSrc) {
-    placeholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
-  }
-
   /**
-   * 图片加载成功回调
+   * 占位图加载成功
    */
-  const handleImageLoad = () => {
+  const handleThumbnailLoaded = () => {
+    if (typeof onLoad === 'function') {
+      // onLoad() // 触发传递的onLoad回调函数
+    }
+  }
+  // 原图加载完成
+  const handleImageLoaded = img => {
     if (typeof onLoad === 'function') {
       onLoad() // 触发传递的onLoad回调函数
     }
@@ -44,13 +46,27 @@ export default function LazyImage({
    */
   const handleImageError = () => {
     if (imageRef.current) {
-      imageRef.current.src = defaultPlaceholderSrc
+      // 尝试加载 placeholderSrc，如果失败则加载 defaultPlaceholderSrc
+      if (imageRef.current.src !== placeholderSrc && placeholderSrc) {
+        imageRef.current.src = placeholderSrc
+      } else {
+        imageRef.current.src = defaultPlaceholderSrc
+      }
     }
   }
 
   useEffect(() => {
-    const adjustedImageSrc = adjustImgSize(src, maxWidth)
-    setAdjustedSrc(adjustedImageSrc)
+    const adjustedImageSrc =
+      adjustImgSize(src, maxWidth) || defaultPlaceholderSrc
+
+    // 加载原图
+    const img = new Image()
+    img.src = adjustedImageSrc
+    img.onload = () => {
+      setCurrentSrc(adjustedImageSrc)
+      handleImageLoaded(adjustedImageSrc)
+    }
+    img.onerror = handleImageError
 
     const observer = new IntersectionObserver(
       entries => {
@@ -79,9 +95,9 @@ export default function LazyImage({
   // 动态添加width、height和className属性，仅在它们为有效值时添加
   const imgProps = {
     ref: imageRef,
-    src: priority ? adjustedSrc : placeholderSrc,
+    src: currentSrc,
     alt: alt,
-    onLoad: handleImageLoad,
+    onLoad: handleThumbnailLoaded, // 缩略图加载完成
     onError: handleImageError // 添加onError处理函数
   }
 
@@ -106,31 +122,33 @@ export default function LazyImage({
   if (style) {
     imgProps.style = style
   }
+
   return (
     <>
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img {...imgProps} />
       {/* 预加载 */}
       {priority && (
         <Head>
-          <link rel='preload' as='image' href={adjustedSrc} />
+          <link rel='preload' as='image' href={adjustImgSize(src, maxWidth)} />
         </Head>
       )}
     </>
   )
 }
+
 /**
  * 根据窗口尺寸决定压缩图片宽度
  * @param {*} src
  * @param {*} maxWidth
  * @returns
  */
-
 const adjustImgSize = (src, maxWidth) => {
   if (!src) {
-    return siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
+    return null
   }
-  const screenWidth = window.screen.width
+  const screenWidth =
+    (typeof window !== 'undefined' && window?.screen?.width) || maxWidth
 
   // 屏幕尺寸大于默认图片尺寸，没必要再压缩
   if (screenWidth > maxWidth) {

diff --git a/components/Notification.js b/components/Notification.js
@@ -1,5 +1,9 @@
 import { useState } from 'react'
 
+/**
+ * 弹框通知
+ * @returns
+ */
 const useNotification = () => {
   const [message, setMessage] = useState('')
   const [isVisible, setIsVisible] = useState(false)
@@ -8,12 +12,13 @@ const useNotification = () => {
     setMessage(msg)
     setIsVisible(true)
     setTimeout(() => {
-      setIsVisible(false)
+      closeNotification()
     }, 3000)
   }
 
   const closeNotification = () => {
     setIsVisible(false)
+    setMessage('')
   }
 
   // 测试通知效果
@@ -33,11 +38,10 @@ const useNotification = () => {
    */
   const Notification = () => {
     return (
-      <div
-        className={`notification fixed left-0 w-full px-2 z-50 transform transition-all duration-300 ${
-          isVisible ? 'bottom-20 animate__animated animate__fadeIn' : ''
-        }  `}>
-        <div className='max-w-3xl mx-auto  bg-green-500 flex items-center justify-between px-4 py-2 text-white rounded-lg shadow-lg'>
+      <div className={`notification fixed left-0 w-full px-2 z-20 bottom-14`}>
+        <div
+          className={` ${isVisible && message ? 'opacity-100 ' : 'invisible opacity-0 bottom-0'} transition-opacity duration-200 
+           max-w-3xl mx-auto bg-green-500 flex items-center justify-between px-4 py-2 text-white rounded-lg shadow-lg`}>
           {message}
           <button
             onClick={closeNotification}

diff --git a/lib/notion/getPageProperties.js b/lib/notion/getPageProperties.js
@@ -94,6 +94,7 @@ export default async function getPageProperties(
   properties.type = properties.type?.[0] || ''
   properties.status = properties.status?.[0] || ''
   properties.category = properties.category?.[0] || ''
+  properties.comment = properties.comment?.[0] || ''
 
   // 映射值：用户个性化type和status字段的下拉框选项，在此映射回代码的英文标识
   mapProperties(properties)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "4.5.3",
+  "version": "4.5.4",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {

diff --git a/themes/heo/components/Catalog.js b/themes/heo/components/Catalog.js
@@ -63,14 +63,14 @@ const Catalog = ({ toc }) => {
     <div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
     <div className='overflow-y-auto max-h-36 lg:max-h-96 overscroll-none scroll-hidden' ref={tRef}>
       <nav className='h-full'>
-        {toc.map((tocItem) => {
+        {toc?.map((tocItem) => {
           const id = uuidToId(tocItem.id)
           tocIds.push(id)
           return (
             <a
               key={id}
               href={`#${id}`}
-              className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-200
+              className={`notion-table-of-contents-item duration-300 transform dark:text-gray-200
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}

diff --git a/themes/heo/components/Hero.js b/themes/heo/components/Hero.js
@@ -247,6 +247,7 @@ function TopGroup(props) {
           )
         })}
       </div>
+      {/* 一个大的跳转文章卡片 */}
       <TodayCard cRef={todayCardRef} siteInfo={siteInfo} />
     </div>
   )
@@ -322,10 +323,10 @@ function TodayCard({ cRef, siteInfo }) {
   })
 
   /**
-   * 点击更多
+   * 查看更多
    * @param {*} e
    */
-  function handleClickMore(e) {
+  function handleClickShowMore(e) {
     e.stopPropagation()
     setIsCoverUp(false)
   }
@@ -351,10 +352,11 @@ function TodayCard({ cRef, siteInfo }) {
           isCoverUp
             ? 'opacity-100 cursor-pointer'
             : 'opacity-0 transform scale-110 pointer-events-none'
-        } shadow transition-all duration-200 today-card h-full bg-[#0E57D5] dark:bg-yellow-500 rounded-xl relative overflow-hidden flex items-end`}>
+        } shadow transition-all duration-200 today-card h-full bg-black rounded-xl relative overflow-hidden flex items-end`}>
+        {/* 卡片文字信息 */}
         <div
           id='today-card-info'
-          className='z-10 flex justify-between w-full relative text-white p-10 items-end'>
+          className='flex justify-between w-full relative text-white p-10 items-end'>
           <div className='flex flex-col'>
             <div className='text-xs font-light'>
               {siteConfig('HEO_HERO_TITLE_4', null, CONFIG)}
@@ -363,29 +365,31 @@ function TodayCard({ cRef, siteInfo }) {
               {siteConfig('HEO_HERO_TITLE_5', null, CONFIG)}
             </div>
           </div>
+          {/* 查看更多的按钮 */}
           <div
-            onClick={handleClickMore}
-            className={`'${
-              isCoverUp ? '' : 'hidden pointer-events-none '
-            } flex items-center px-3 h-10 justify-center bg-[#425aef] hover:bg-[#4259efcb] dark:bg-yellow-500 dark:hover:bg-yellow-600 transition-colors duration-100 rounded-3xl`}>
+            onClick={handleClickShowMore}
+            className={`'${isCoverUp ? '' : 'hidden pointer-events-none'} z-10 group flex items-center px-3 h-10 justify-center  rounded-3xl
+            glassmorphism transition-colors duration-100 `}>
             <PlusSmall
               className={
-                'w-6 h-6 mr-2 bg-white rounded-full stroke-indigo-400 dark:stroke-yellow-400'
+                'group-hover:rotate-180 duration-500 transition-all w-6 h-6 mr-2 bg-white rounded-full stroke-black'
               }
             />
             <div id='more' className='select-none'>
               {locale.COMMON.MORE}
             </div>
           </div>
         </div>
-        <div
+
+        {/* 封面图 */}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={siteInfo?.pageCover}
           id='today-card-cover'
           className={`${
             isCoverUp ? '' : ' pointer-events-none'
-          } cursor-pointer today-card-cover absolute w-full h-full top-0`}
-          style={{
-            background: `url('${siteInfo?.pageCover}') no-repeat center /cover`
-          }}></div>
+          } hover:scale-110 duration-1000 object-cover cursor-pointer today-card-cover absolute w-full h-full top-0`}
+        />
       </div>
     </div>
   )