From 528138eb3aed7b008ced25e55432e9d225cc158d Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Mon, 10 Jul 2023 17:11:21 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=BB=E5=86=8C=E8=A7=86=E5=9B=BE=E5=85=81?=
 =?UTF-8?q?=E8=AE=B8=E5=85=B3=E9=97=AD=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog.config.js           |  2 ++
 components/NotionPage.js | 56 ++++++++++++++++++++++++++++++++++++++--
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/blog.config.js b/blog.config.js
index c48719ab..7b6ea955 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -126,6 +126,8 @@ const BLOG = {
   PREVIEW_CATEGORY_COUNT: 16, // 首页最多展示的分类数量，0为不限制
   PREVIEW_TAG_COUNT: 16, // 首页最多展示的标签数量，0为不限制
 
+  POST_DISABLE_GALLERY_CLICK: process.env.NEXT_PUBLIC_POST_SORT_BY || false, // 画册视图禁止点击，方便在友链页面的画册插入链接
+
   // 鼠标点击烟花特效
   FIREWORKS: process.env.NEXT_PUBLIC_FIREWORKS || false, // 开关
   // 烟花色彩，感谢 https://github.com/Vixcity 提交的色彩
diff --git a/components/NotionPage.js b/components/NotionPage.js
index 6e6d8e6a..e559bdbb 100644
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -1,12 +1,14 @@
 import { NotionRenderer } from 'react-notion-x'
 import dynamic from 'next/dynamic'
-// import mediumZoom from '@fisch0920/medium-zoom'
-import React, { useEffect } from 'react'
+import mediumZoom from '@fisch0920/medium-zoom'
+import React, { useEffect, useRef } from 'react'
 // import { Code } from 'react-notion-x/build/third-party/code'
 import TweetEmbed from 'react-tweet-embed'
 
 import 'katex/dist/katex.min.css'
 import { mapImgUrl } from '@/lib/notion/mapImage'
+import BLOG from '@/blog.config'
+import { isBrowser } from '@/lib/utils'
 
 const Code = dynamic(() =>
   import('react-notion-x/build/third-party/code').then(async (m) => {
@@ -21,6 +23,7 @@ const Equation = dynamic(() =>
     return m.Equation
   }), { ssr: false }
 )
+
 const Pdf = dynamic(
   () => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf),
   {
@@ -51,6 +54,34 @@ const NotionPage = ({ post, className }) => {
     autoScrollToTarget()
   }, [])
 
+  const zoom = typeof window !== 'undefined' && mediumZoom({
+    container: '.notion-viewport',
+    background: 'rgba(0, 0, 0, 0.2)',
+    margin: getMediumZoomMargin()
+  })
+  const zoomRef = useRef(zoom ? zoom.clone() : null)
+
+  useEffect(() => {
+    // 将相册gallery下的图片加入放大功能
+    if (JSON.parse(BLOG.POST_DISABLE_GALLERY_CLICK)) {
+      setTimeout(() => {
+        if (isBrowser()) {
+          const imgList = document?.querySelectorAll('.notion-collection-card-cover 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')
+          }
+        }
+      }, 800)
+    }
+  }, [])
+
   if (!post || !post.blockMap) {
     return <>{post?.summary || ''}</>
   }
@@ -100,4 +131,25 @@ const mapPageUrl = id => {
   return '/' + id.replace(/-/g, '')
 }
 
+/**
+ * 缩放
+ * @returns
+ */
+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