Merge branch 'fix-gallery' into preview

tpush:# the commit.

components/NotionPage.js

@@ -1,5 +1,7 @@
 import { NotionRenderer } from 'react-notion-x'
 import dynamic from 'next/dynamic'
+import mediumZoom from 'medium-zoom'
+import React from 'react'
 
 const Code = dynamic(() =>
   import('react-notion-x/build/third-party/code').then((m) => m.Code), { ssr: false }
@@ -24,6 +26,13 @@ const NotionPage = ({ post }) => {
     return <>{post?.summary || ''}</>
   }
 
+  const zoom = typeof window !== 'undefined' && mediumZoom({
+    container: '.notion-viewport',
+    background: 'rgba(0, 0, 0, 0.2)',
+    margin: getMediumZoomMargin()
+  })
+  const zoomRef = React.useRef(zoom ? zoom.clone() : null)
+
   setTimeout(() => {
     if (typeof document === 'undefined') {
       return
@@ -32,6 +41,18 @@ const NotionPage = ({ post }) => {
     for (const e of buttons) {
       e.addEventListener('click', fixCopy)
     }
+    // 将所有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 cards = document.getElementsByClassName('notion-collection-card')
+    for (const e of cards) {
+      e.removeAttribute('href')
+    }
   }, 500)
 
   /**
@@ -71,4 +92,22 @@ const mapPageUrl = id => {
   return '/article/' + id.replace(/-/g, '')
 }
 
+function getMediumZoomMargin() {
+  const width = window.innerWidth
+
+  if (width < 500) {
+    return 8
+  } else if (width < 800) {
+    return 20
+  } else if (width < 1280) {
+    return 30
+  } else if (width < 1600) {
+    return 40
+  } else if (width < 1920) {
+    return 48
+  } else {
+    return 72
+  }
+}
+
 export default NotionPage

styles/notion.css

@@ -530,8 +530,7 @@
   width: 100%;
   margin: 6px 0;
   padding: 0;
-  border-top: none;
-  border-color: var(--fg-color-0);
+  border-bottom-width: 1px;
 }
 
 .notion-link {