Merge pull request #907 from tangly1024/feat/database-open

Feat/database open

components/NotionPage.js

@@ -1,7 +1,7 @@
 import { NotionRenderer } from 'react-notion-x'
 import dynamic from 'next/dynamic'
-import mediumZoom from '@fisch0920/medium-zoom'
+// import mediumZoom from '@fisch0920/medium-zoom'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { isBrowser } from '@/lib/utils'
 import { Code } from 'react-notion-x/build/third-party/code'
 import TweetEmbed from 'react-tweet-embed'
@@ -42,16 +42,16 @@ const Tweet = ({ id }) => {
 }
 
 const NotionPage = ({ post, className }) => {
-  const zoom = isBrowser() && mediumZoom({
+//   const zoom = isBrowser() && mediumZoom({
-    container: '.notion-viewport',
+//     container: '.notion-viewport',
-    background: 'rgba(0, 0, 0, 0.2)',
+//     background: 'rgba(0, 0, 0, 0.2)',
-    scrollOffset: 200,
+//     scrollOffset: 200,
-    margin: getMediumZoomMargin()
+//     margin: getMediumZoomMargin()
-  })
+//   })
 
-  const zoomRef = React.useRef(zoom ? zoom.clone() : null)
+  //   const zoomRef = React.useRef(zoom ? zoom.clone() : null)
 
-  React.useEffect(() => {
+  useEffect(() => {
     setTimeout(() => {
       if (window.location.hash) {
         const tocNode = document.getElementById(window.location.hash.substring(1))
@@ -64,18 +64,18 @@ const NotionPage = ({ post, className }) => {
     setTimeout(() => {
       if (isBrowser()) {
         // 将相册gallery下的图片加入放大功能
-        const imgList = document.querySelectorAll('.notion-collection-card-cover img')
+        // const imgList = document.querySelectorAll('.notion-collection-card-cover img')
-        if (imgList && zoomRef.current) {
+        // if (imgList && zoomRef.current) {
-          for (let i = 0; i < imgList.length; i++) {
+        //   for (let i = 0; i < imgList.length; i++) {
-            (zoomRef.current).attach(imgList[i])
+        //     (zoomRef.current).attach(imgList[i])
-          }
+        //   }
-        }
+        // }
 
-        // 相册图片点击不跳转
+        // 相册图片禁止跳转页面，改为放大图片功能功能
-        const cards = document.getElementsByClassName('notion-collection-card')
+        // const cards = document.getElementsByClassName('notion-collection-card')
-        for (const e of cards) {
+        // for (const e of cards) {
-          e.removeAttribute('href')
+        //   e.removeAttribute('href')
-        }
+        // }
       }
     }, 800)
   }, [])
@@ -113,22 +113,22 @@ const mapPageUrl = id => {
   return '/' + id.replace(/-/g, '')
 }
 
-function getMediumZoomMargin() {
+// function getMediumZoomMargin() {
-  const width = window.innerWidth
+//   const width = window.innerWidth
 
-  if (width < 500) {
+//   if (width < 500) {
-    return 8
+//     return 8
-  } else if (width < 800) {
+//   } else if (width < 800) {
-    return 20
+//     return 20
-  } else if (width < 1280) {
+//   } else if (width < 1280) {
-    return 30
+//     return 30
-  } else if (width < 1600) {
+//   } else if (width < 1600) {
-    return 40
+//     return 40
-  } else if (width < 1920) {
+//   } else if (width < 1920) {
-    return 48
+//     return 48
-  } else {
+//   } else {
-    return 72
+//     return 72
-  }
+//   }
-}
+// }
 
 export default NotionPage

styles/notion.css

@@ -584,12 +584,12 @@ summary > .notion-h {
 .notion-page-link {
   display: flex;
   color: var(--fg-color);
-  text-decoration: none;
+  text-decoration: underline;
   width: 100%;
   height: 30px;
   margin: 1px 0;
   transition: background 120ms ease-in 0s;
-  pointer-events: none;
+  /* pointer-events: none; */
 }
 
 .notion-page-link:hover {
@@ -1408,7 +1408,7 @@ code[class*='language-'] {
 }
 
 .notion-collection-card{
-  cursor: default !important;
+  /* cursor: default !important; */
 }
 
 .notion-collection-card-property .notion-link {
@@ -1623,6 +1623,7 @@ code[class*='language-'] {
 
 .notion-collection-card-cover .lazy-image-wrapper {
   padding: 0 !important;
+  z-index: 20;
   height: 100%;
 }