升级react-notion-x，封装NotionPage

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