升级react-notion-x，封装NotionPage

themes/medium/LayoutSlug.js

@@ -2,8 +2,7 @@ import { getPageTableOfContents } from 'notion-utils'
 
 import LayoutBase from './LayoutBase'
 import { useGlobal } from '@/lib/global'
-import mediumZoom from 'medium-zoom'
-import React, { useEffect, useRef } from 'react'
+import React from 'react'
 import Catalog from './components/Catalog'
 import { ArticleDetail } from './components/ArticleDetail'
 import { ArticleLock } from './components/ArticleLock'
@@ -17,26 +16,6 @@ export const LayoutSlug = props => {
   }
   const { locale } = useGlobal()
 
-  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])
-      }
-    }
-  })
-
   const slotRight = post?.toc && post?.toc?.length > 3 && (
     <div key={locale.COMMON.TABLE_OF_CONTENTS} >
       <Catalog toc={post.toc} />
@@ -50,27 +29,9 @@ export const LayoutSlug = props => {
       slotRight={slotRight}
     >
 
-    {!lock && <ArticleDetail {...props} />}
+      {!lock && <ArticleDetail {...props} />}
 
-    {lock && <ArticleLock password={post.password} validPassword={validPassword} />}
+      {lock && <ArticleLock password={post.password} validPassword={validPassword} />}
     </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
-  }
-}

themes/medium/components/ArticleDetail.js

@@ -1,10 +1,3 @@
-import {
-  Code,
-  Collection,
-  CollectionRow,
-  Equation,
-  NotionRenderer
-} from 'react-notion-x'
 import Comment from '@/components/Comment'
 import Image from 'next/image'
 import Link from 'next/link'
@@ -14,18 +7,8 @@ import TagItemMini from './TagItemMini'
 import CONFIG_MEDIUM from '../config_medium'
 import formatDate from '@/lib/formatDate'
 import { useGlobal } from '@/lib/global'
-
-import 'prismjs'
-import 'prismjs/components/prism-bash'
-import 'prismjs/components/prism-javascript'
-import 'prismjs/components/prism-markup'
-import 'prismjs/components/prism-python'
-import 'prismjs/components/prism-typescript'
 import BLOG from '@/blog.config'
-
-const mapPageUrl = id => {
-  return 'https://www.notion.so/' + id.replace(/-/g, '')
-}
+import NotionPage from '@/components/NotionPage'
 
 export const ArticleDetail = props => {
   const { post, prev, next } = props
@@ -62,18 +45,7 @@ export const ArticleDetail = props => {
     </section>
     {/* Notion文章主体 */}
     <section id="notion-article" className="px-1 max-w-5xl">
-      {post.blockMap && (
-        <NotionRenderer
-          recordMap={post.blockMap}
-          mapPageUrl={mapPageUrl}
-          components={{
-            equation: Equation,
-            code: Code,
-            collectionRow: CollectionRow,
-            collection: Collection
-          }}
-        />
-      )}
+      {post.blockMap && (<NotionPage post={post} />)}
     </section>
 
     <section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600  dark:text-gray-400">
@@ -90,10 +62,10 @@ export const ArticleDetail = props => {
     </section>
     <section>
       <div className='flex justify-between'>
-      { CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && <CategoryItem category={post.category}/>}
-      <div>
-      { CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
-      </div>
+        {CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && <CategoryItem category={post.category} />}
+        <div>
+          {CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+        </div>
       </div>
       <ArticleAround prev={prev} next={next} />
       <Comment frontMatter={post} />

themes/medium/components/BlogPostCard.js

@@ -1,8 +1,8 @@
 import BLOG from '@/blog.config'
+import NotionPage from '@/components/NotionPage'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import React from 'react'
-import { Code, Collection, Equation, NotionRenderer } from 'react-notion-x'
 import CONFIG_MEDIUM from '../config_medium'
 import CategoryItem from './CategoryItem'
 import TagItemMini from './TagItemMini'
@@ -51,16 +51,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
         {showPreview && (
           <div className="overflow-ellipsis truncate">
-            <NotionRenderer
-              bodyClassName="max-h-full"
-              recordMap={post.blockMap}
-              mapPageUrl={mapPageUrl}
-              components={{
-                equation: Equation,
-                code: Code,
-                collection: Collection
-              }}
-            />
+            <NotionPage post={post} />
             <div className="pointer-events-none border-t pt-8 border-dashed">
               <div className="w-full justify-start flex">
                 <Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
@@ -78,8 +69,4 @@ const BlogPostCard = ({ post, showSummary }) => {
   )
 }
 
-const mapPageUrl = id => {
-  return 'https://www.notion.so/' + id.replace(/-/g, '')
-}
-
 export default BlogPostCard