Merge pull request #10 from tangly1024/theme-Next

Theme next

components/ArticleDetail.js

@@ -19,7 +19,7 @@ import 'prismjs/components/prism-javascript'
 import 'prismjs/components/prism-markup'
 import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-typescript'
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
 import ArticleCopyright from './ArticleCopyright'
 import Live2D from './Live2D'
@@ -43,26 +43,40 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
     margin: getMediumZoomMargin()
   })
   const zoomRef = useRef(zoom ? zoom.clone() : null)
-  function attachZoom (image) {
-    if (zoomRef.current) {
-      (zoomRef.current).attach(image)
+
+  useEffect(() => {
+    // 将所有container下的所有图片添加medium-zoom
+    const container = document.getElementById('container')
+    const imgList = container.getElementsByTagName('img')
+    if (imgList && zoomRef.current) {
+      for (let i = 0; i < imgList.length; i++) {
+        (zoomRef.current).attach(imgList[i])
+      }
     }
-  }
-  const attachZoomRef = attachZoom
+  })
 
   return (<>
-      <div id="container" ref={targetRef} className="shadow md:hover:shadow-2xl duration-300 overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
+      <div id="container" ref={targetRef} className="shadow md:hover:shadow-2xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
           <article itemScope itemType="https://schema.org/Movie"
             className="subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24  dark:border-gray-700 bg-white dark:bg-gray-800"
           >
 
             <header className='animate__slideInDown animate__animated'>
-                {post.type && !post.type.includes('Page') && post?.page_cover && (
+              {post.type && !post.type.includes('Page') && post?.page_cover && (
                   <div className="w-full relative md:flex-shrink-0 overflow-hidden">
                     {/* eslint-disable-next-line @next/next/no-img-element */}
-                    <img alt={post.title} ref={attachZoomRef}src={post?.page_cover} className='object-center w-full' />
+                    <img alt={post.title} src={post?.page_cover} className='object-center w-full' />
+                    {/* <div className="w-full h-60 relative lg:h-96 transform duration-200 md:flex-shrink-0 overflow-hidden">
+                      <Image
+                        src={post?.page_cover}
+                        loading="eager"
+                        objectFit="cover"
+                        layout="fill"
+                        alt={post.title}
+                      />
+                    </div> */}
                   </div>
-                )}
+              )}
 
                 {/* 文章Title */}
                 <div className="font-bold text-3xl text-black dark:text-white font-serif pt-10">

lib/notion/getAllPageIds.js

@@ -15,7 +15,7 @@ export default function getAllPageIds (collectionQuery, viewId) {
   } else {
     const pageSet = new Set()
     Object.values(views).forEach(view => {
-      view?.blockIds?.forEach(id => pageSet.add(id))
+      view?.collection_group_results?.blockIds?.forEach(id => pageSet.add(id))
     })
     pageIds = [...pageSet]
   }

package.json

@@ -33,7 +33,7 @@
     "lodash.throttle": "^4.1.1",
     "memory-cache": "^0.2.0",
     "next": "^12.0.5",
-    "notion-client": "4.12.0",
+    "notion-client": "4.13.0",
     "notion-utils": "4.12.0",
     "preact": "^10.5.15",
     "qrcode.react": "^1.0.1",
@@ -41,7 +41,7 @@
     "react-cookies": "^0.1.1",
     "react-cusdis": "^2.0.1",
     "react-dom": "17.0.2",
-    "react-notion-x": "4.6.5",
+    "react-notion-x": "4.13.0",
     "smoothscroll-polyfill": "^0.4.4",
     "typed.js": "^2.0.12",
     "use-ackee": "^3.0.0"

styles/globals.css

@@ -159,4 +159,8 @@ nav {
   background: rgba(31, 41, 55, .75);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
+}
+
+.medium-zoom-overlay{
+  background: none !important;
 }