From a258021f924e0939c3c5d60f66a9a5c8ca95601f Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Fri, 31 Dec 2021 14:34:02 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20meduim-zoom=20=E9=81=AE=E7=BD=A9?=
 =?UTF-8?q?=E5=8A=A0=E6=AF=9B=E7=8E=BB=E7=92=83=EF=BC=8C=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A6=96=E5=9B=BE=E5=8A=A0zoom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ArticleDetail.js | 48 +++++++++++++++++++++++++++++--------
 styles/notion.css           |  2 ++
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js
index 0e91dc34..2a86de3f 100644
--- a/components/ArticleDetail.js
+++ b/components/ArticleDetail.js
@@ -19,11 +19,12 @@ 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'
 import WordCount from './WordCount'
+import mediumZoom from 'medium-zoom'
 
 /**
  *
@@ -37,6 +38,19 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
   const { locale } = useGlobal()
   const date = formatDate(post?.date?.start_date || post.createdTime, locale.LOCALE)
 
+  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)
+  function attachZoom (image) {
+    if (zoomRef.current) {
+      (zoomRef.current).attach(image)
+    }
+  }
+  const attachZoomRef = attachZoom
+
   return (<>
       <div id="article-wrapper" ref={targetRef} className="overflow-x-auto flex-grow max-w-5xl mx-auto w-screen md:w-full ">
           <article itemScope itemType="https://schema.org/Movie"
@@ -45,16 +59,12 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
 
             <header className='animate__slideInDown animate__animated'>
                 {post.type && !post.type.includes('Page') && post?.page_cover && (
-                          <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 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' />
+                  </div>
                 )}
+
                 {/* 文章Title */}
                 <div className="font-bold text-3xl text-black dark:text-white font-serif pt-10">
                   {post.title}
@@ -176,3 +186,21 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + 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
+  }
+}
diff --git a/styles/notion.css b/styles/notion.css
index 1efb0d33..c9fcca5c 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -196,6 +196,8 @@
 
 .medium-zoom-overlay {
   z-index: 300;
+  -webkit-backdrop-filter: blur(5px);    
+  backdrop-filter: blur(5px);   
 }
 
 .medium-zoom-image {