d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

分页模式加载文章预览

Browse Source
This commit is contained in:
tangly1024
2022-01-07 17:49:51 +08:00
parent c89048178e
commit f84409e97f
21 changed files with 143 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/BlogPostCard.js
View File

@@ -3,24 +3,25 @@ import Link from 'next/link'
import React from 'react'
import Image from 'next/image'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFolder } from '@fortawesome/free-solid-svg-icons'
import { faAngleDoubleRight, faFolder } from '@fortawesome/free-solid-svg-icons'
import TagItemMini from './TagItemMini'
import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
import { useGlobal } from '@/lib/global'
const BlogPostCard = ({ post }) => {
const BlogPostCard = ({ post, showSummary }) => {
const { locale } = useGlobal()
return (
<div key={post.id} className='shadow animate__animated animate__fadeIn flex xl:flex-row flex-col-reverse justify-between md:hover:shadow-xl duration-300
<div key={post.id} className='shadow border animate__animated animate__fadeIn flex flex-col-reverse justify-between md:hover:shadow-xl duration-300
w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600'>
<div className='p-8 flex flex-col justify-between w-full'>
<div className='lg:p-8 p-4 flex flex-col justify-between w-full'>
<Link href={`${BLOG.path}/article/${post.slug}`} passHref>
<a className='cursor-pointer text-xl xl:text-2xl leading-tight text-black dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'>
<a className='cursor-pointer font-bold text-3xl text-center leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'>
{post.title}
</a>
</Link>
<p className='my-8 text-gray-700 dark:text-gray-300 text-md font-light leading-7'>{post.summary}</p>
<div className='flex items-center justify-between flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 '>
<div className='flex mt-2 items-center justify-center flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 '>
<div>
<Link href={`/category/${post.category}`} passHref>
<a className='cursor-pointer font-light text-sm hover:underline transform'>
@@ -37,11 +38,36 @@ const BlogPostCard = ({ post }) => {
</div>
</div>
{showSummary && <p className='mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7'>
{post.summary}
</p>}
{BLOG.home?.showPreview && post?.blockMap && <div className='max-h-screen overflow-hidden truncate max-w-full'>
<NotionRenderer
recordMap={post.blockMap}
mapPageUrl={mapPageUrl}
components={{
equation: Equation,
code: Code,
collectionRow: CollectionRow,
collection: Collection
}}
/>
</div> }
<div className='border-b-2 w-full border-dashed py-2'></div>
<Link href={`${BLOG.path}/article/${post.slug}`} passHref>
<div className='flex items-center cursor-pointer pt-6 justify-end leading-tight'>
<a className='bg-black p-2 text-white'>{locale.COMMON.ARTICLE_DETAIL}
<FontAwesomeIcon icon={faAngleDoubleRight} /></a>
</div>
</Link>
</div>
{post?.page_cover && (
{BLOG.home?.showPostCover && post?.page_cover && (
<Link href={`${BLOG.path}/article/${post.slug}`} passHref>
<div className='h-60 w-full xl:max-w-xs relative xl:h-full duration-200 cursor-pointer transform overflow-hidden'>
<div className='h-72 w-full relative duration-200 cursor-pointer transform overflow-hidden'>
<Image className='hover:scale-105 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
</div>
</Link>
@@ -50,4 +76,8 @@ const BlogPostCard = ({ post }) => {
)
}
const mapPageUrl = id => {
return 'https://www.notion.so/' + id.replace(/-/g, '')
}
export default BlogPostCard