Merge pull request #773 from tangly1024/fix_img

3.10.1 Fix img

.env.local

@@ -1,2 +1,2 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=3.10.0
+NEXT_PUBLIC_VERSION=3.10.1

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,33 @@
+/**
+ * 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 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "3.10.0",
+  "version": "3.10.1",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {

themes/example/components/Announcement.js

@@ -0,0 +1,20 @@
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ post, className }) => {
+  if (!post) {
+    return <></>
+  }
+  return <aside className="rounded shadow overflow-hidden mb-6">
+
+           <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">
+                <i className="mr-2 fas fa-bullhorn" />
+           公告</h3>
+
+        {post && (<div id="announcement-content">
+            <NotionPage post={post} className='text-center ' />
+        </div>)}
+</aside>
+}
+export default Announcement

themes/example/components/SideBar.js

@@ -3,11 +3,12 @@ import Live2D from '@/components/Live2D'
 import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
+import Announcement from './Announcement'
 const ExampleRecentComments = dynamic(() => import('./ExampleRecentComments'))
 
 export const SideBar = (props) => {
   const { locale } = useGlobal()
-  const { latestPosts, categoryOptions } = props
+  const { latestPosts, categoryOptions, notice } = props
   return (
       <div className="w-full md:w-64 sticky top-8">
 
@@ -48,6 +49,8 @@ export const SideBar = (props) => {
                 </div>
             </aside>
 
+            <Announcement post={notice}/>
+
             {BLOG.COMMENT_WALINE_SERVER_URL && BLOG.COMMENT_WALINE_RECENT && <aside className="rounded shadow overflow-hidden mb-6">
                 <h3 className="text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b">{locale.COMMON.RECENT_COMMENTS}</h3>
 

themes/medium/components/TagItemMini.js

@@ -15,7 +15,7 @@ const TagItemMini = ({ tag, selected = false }) => {
       <div className='font-light dark:text-gray-400'>{selected && <i className='mr-1 fas fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
 
     </Link>
-  );
+  )
 }
 
 export default TagItemMini