From c9792ee7494340e2d3103c696ef365773fe8ba9a Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 28 Apr 2022 20:46:25 +0800
Subject: [PATCH 1/2] =?UTF-8?q?notion-=E5=88=86=E5=89=B2=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles/notion.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/styles/notion.css b/styles/notion.css
index b176aed2..76807da7 100644
--- a/styles/notion.css
+++ b/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 {

From 13852a0a737cafc5e6b679d9992c43b8ed2ddeb6 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Thu, 28 Apr 2022 21:11:03 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E7=85=A7=E7=89=87=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/NotionPage.js | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/components/NotionPage.js b/components/NotionPage.js
index f9a58f64..352dfbea 100644
--- a/components/NotionPage.js
+++ b/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