From eef844bcd0042710cee70815592856f958e73248 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Fri, 28 Jan 2022 14:36:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E7=BC=A9=E6=94=BE=EF=BC=8C40?=
 =?UTF-8?q?4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/Medium/Layout404.js  |  9 +++++----
 themes/Medium/LayoutSlug.js | 38 +++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/themes/Medium/Layout404.js b/themes/Medium/Layout404.js
index cd28a607..1212e8e4 100644
--- a/themes/Medium/Layout404.js
+++ b/themes/Medium/Layout404.js
@@ -1,6 +1,7 @@
+import LayoutBase from './LayoutBase'
 
-export const Layout404 = () => {
-  return <div>
-   404 Not found.
-  </div>
+export const Layout404 = (props) => {
+  return <LayoutBase {...props}>
+   <div className='w-full h-96 py-80 flex justify-center items-center'>404 Not found.</div>
+  </LayoutBase>
 }
diff --git a/themes/Medium/LayoutSlug.js b/themes/Medium/LayoutSlug.js
index cd2a349d..79ac1dc3 100644
--- a/themes/Medium/LayoutSlug.js
+++ b/themes/Medium/LayoutSlug.js
@@ -13,6 +13,8 @@ import Image from 'next/image'
 import { useGlobal } from '@/lib/global'
 import formatDate from '@/lib/formatDate'
 import Link from 'next/link'
+import mediumZoom from 'medium-zoom'
+import { useEffect, useRef } from 'react'
 
 const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -34,6 +36,24 @@ export const LayoutSlug = (props) => {
   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)
+
+  useEffect(() => {
+    // 将所有container下的所有图片添加medium-zoom
+    const container = document.getElementById('notion-article')
+    const imgList = container?.getElementsByTagName('img')
+    if (imgList && zoomRef.current) {
+      for (let i = 0; i < imgList.length; i++) {
+        (zoomRef.current).attach(imgList[i])
+      }
+    }
+  })
+
   return <LayoutBase {...props} meta={meta} showInfoCard={false}>
     <h1 className='text-4xl mt-12 font-sans'>{post?.title}</h1>
     <Link href='/about' passHref>
@@ -71,3 +91,21 @@ export const LayoutSlug = (props) => {
     </div>
   </LayoutBase>
 }
+
+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
+  }
+}