d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-18 23:16:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

升级react-notion-x，封装NotionPage

Browse Source
This commit is contained in:
tangly1024
2022-04-06 14:26:44 +08:00
parent 6de1102bfb
commit fdb1dcb622
14 changed files with 276 additions and 589 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
themes/next/components/BlogPostCard.js
View File

@@ -3,16 +3,10 @@ import { useGlobal } from '@/lib/global'
import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
import {
Code,
Collection,
CollectionRow,
Equation,
NotionRenderer
} from 'react-notion-x'
import Card from './Card'
import TagItemMini from './TagItemMini'
import CONFIG_NEXT from '../config_next'
import NotionPage from '@/components/NotionPage'
const BlogPostCard = ({ post, showSummary }) => {
const { locale } = useGlobal()
@@ -26,18 +20,16 @@ const BlogPostCard = ({ post, showSummary }) => {
<div className="lg:p-8 p-4 flex flex-col w-full">
<Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
<a
className={`cursor-pointer font-bold hover:underline text-3xl ${
showPreview ? 'text-center' : ''
} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}
className={`cursor-pointer font-bold hover:underline text-3xl ${showPreview ? 'text-center' : ''
} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}
>
{post.title}
</a>
</Link>
<div
className={`flex mt-2 items-center ${
showPreview ? 'justify-center' : 'justify-start'
} flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 `}
className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'
} flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 `}
>
<div>
{post.category && (
@@ -87,17 +79,7 @@ const BlogPostCard = ({ post, showSummary }) => {
{showPreview && post?.blockMap && (
<div className="overflow-ellipsis truncate">
<NotionRenderer
bodyClassName="max-h-full"
recordMap={post.blockMap}
mapPageUrl={mapPageUrl}
components={{
equation: Equation,
code: Code,
collectionRow: CollectionRow,
collection: Collection
}}
/>
<NotionPage post={post} />
</div>
)}
@@ -130,8 +112,4 @@ const BlogPostCard = ({ post, showSummary }) => {
)
}
const mapPageUrl = id => {
return 'https://www.notion.so/' + id.replace(/-/g, '')
}
export default BlogPostCard