fix img url expire

components/NotionPage.js

@@ -3,11 +3,10 @@ import dynamic from 'next/dynamic'
 import mediumZoom from '@fisch0920/medium-zoom'
 import React from 'react'
 import { isBrowser } from '@/lib/utils'
-import Image from 'next/image'
-import Link from 'next/link'
 import { Code } from 'react-notion-x/build/third-party/code'
 
 import 'katex/dist/katex.min.css'
+import { mapImgUrl } from '@/lib/notion/mapImage'
 
 const Equation = dynamic(() =>
   import('@/components/Equation').then(async (m) => {
@@ -84,14 +83,13 @@ const NotionPage = ({ post, className }) => {
     <NotionRenderer
       recordMap={post.blockMap}
       mapPageUrl={mapPageUrl}
+      mapImageUrl={mapImgUrl}
       components={{
         Code,
         Collection,
         Equation,
         Modal,
-        Pdf,
-        nextImage: Image,
-        nextLink: Link
+        Pdf
       }} />
 
       <PrismMac />

lib/notion/getNotionData.js

@@ -2,12 +2,12 @@ import BLOG from '@/blog.config'
 import { getDataFromCache, setDataToCache } from '@/lib/cache/cache_manager'
 import { getPostBlocks } from '@/lib/notion/getPostBlocks'
 import { idToUuid } from 'notion-utils'
-import { defaultMapImageUrl } from 'react-notion-x'
 import { deepClone } from '../utils'
 import { getAllCategories } from './getAllCategories'
 import getAllPageIds from './getAllPageIds'
 import { getAllTags } from './getAllTags'
 import getPageProperties from './getPageProperties'
+import { mapImgUrl } from './mapImage'
 
 /**
  * 获取博客数据
@@ -129,46 +129,15 @@ function getBlogInfo({ collection, block }) {
   const title = collection?.name?.[0][0] || BLOG.TITLE
   const description = collection?.description ? Object.assign(collection).description[0][0] : BLOG.DESCRIPTION
   const pageCover = collection?.cover ? (mapImgUrl(collection?.cover, block[idToUuid(BLOG.NOTION_PAGE_ID)]?.value)) : BLOG.HOME_BANNER_IMAGE
-  const icon = collection?.icon ? (mapCollectionImg(collection?.icon, collection)) : BLOG.AVATAR
+  let icon = collection?.icon ? (mapImgUrl(collection?.icon, collection)) : BLOG.AVATAR
+  // 站点图标不能是emoji情
+  const emojiPattern = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g
+  if (emojiPattern.test(icon)) {
+    icon = BLOG.AVATAR
+  }
   return { title, description, pageCover, icon }
 }
 
-/**
- * Notion图片映射
- * @param pageCover
- * @returns {string}
- */
-const mapImgUrl = (img, value) => {
-  if (img) {
-    if (img.startsWith('/')) return 'https://www.notion.so' + img
-    if (img.startsWith('http')) return defaultMapImageUrl(img, value)
-  }
-}
-
-/**
- * collection 图片映射
- * @param {*} img
- * @param {*} value
- * @returns
- */
-const mapCollectionImg = (img, value) => {
-  if (img) {
-    if (img.startsWith('/')) return 'https://www.notion.so' + img
-    if (img.startsWith('http')) {
-      return 'https://www.notion.so/image/' + encodeURIComponent(img) + '?table=collection&id=' + value.id
-    }
-    // 判断是否含有emoji表情
-    const emojiPattern = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g
-    if (emojiPattern.test(img)) {
-      console.error('请不要使用emoji作为站点图标', img)
-      return BLOG.AVATAR
-    }
-
-    console.error('非法的站点图标', img)
-    return BLOG.AVATAR
-  }
-}
-
 async function getNotice(post) {
   if (!post) {
     return null

lib/notion/mapImage.js

@@ -0,0 +1,35 @@
+import { defaultMapImageUrl } from 'react-notion-x'
+
+/**
+ * Notion图片映射处理有emjji的图标
+ * @param {*} img
+ * @param {*} value
+ * @returns
+ */
+const mapImgUrl = (img, block) => {
+  let ret = null
+  if (!img) {
+    return ret
+  }
+  // 相对目录，则视为notion的自带图片
+  if (img.startsWith('/')) ret = 'https://www.notion.so' + img
+
+  // 书签的地址本身就是永久链接，无需处理
+  if (!ret && block?.type === 'bookmark') {
+    ret = img
+  }
+
+  // notion永久图床地址
+  if (!ret && img.indexOf('secure.notion-static.com') > 0) {
+    ret = 'https://www.notion.so/image/' + encodeURIComponent(img) + '?table=block&id=' + block.id
+  }
+
+  // 剩余的是第三方图片url或emoji
+  if (!ret) {
+    ret = img
+  }
+
+  return ret
+}
+
+export { mapImgUrl }