d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-28 15:10:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

合并notionData 接口

Browse Source
This commit is contained in:
tangly1024
2022-01-07 14:27:21 +08:00
parent a8a8df0209
commit f98dc6a937
19 changed files with 330 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
components/BlogPostListPage.js
View File

@@ -1,8 +1,6 @@
import BlogPostCard from '@/components/BlogPostCard'
import PaginationNumber from './PaginationNumber'
import BLOG from '@/blog.config'
import { useRouter } from 'next/router'
import BlogPostListEmpty from '@/components/BlogPostListEmpty'
/**
@@ -13,40 +11,20 @@ import BlogPostListEmpty from '@/components/BlogPostListEmpty'
* @returns {JSX.Element}
* @constructor
*/
const BlogPostListPage = ({ page = 1, posts = [] }) => {
let filteredBlogPosts = posts
const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
const totalPage = Math.ceil(postCount / BLOG.postsPerPage)
// 处理查询过滤 支持标签、关键词过滤
let currentSearch = ''
const router = useRouter()
if (router.query && router.query.s) {
currentSearch = router.query.s
filteredBlogPosts = posts.filter(post => {
const tagContent = post.tags ? post.tags.join(' ') : ''
const searchContent = post.title + post.summary + tagContent + post.slug
return searchContent.toLowerCase().includes(currentSearch.toLowerCase())
})
}
// 处理分页
const totalPage = Math.ceil(filteredBlogPosts.length / BLOG.postsPerPage)
const postsToShow = filteredBlogPosts.slice(
BLOG.postsPerPage * (page - 1),
BLOG.postsPerPage * page
)
if (!postsToShow || postsToShow.length === 0) {
if (!posts || posts.length === 0) {
return <BlogPostListEmpty />
} else {
return (
<div id="container" className='mt-10'>
{/* 文章列表 */}
<div className="flex flex-wrap space-y-8 mx-5 md:mx-0">
{postsToShow.map(post => (
{posts.map(post => (
<BlogPostCard key={post.id} post={post} />
))}
</div>
<PaginationNumber page={page} totalPage={totalPage} />
</div>
)

31
components/LatestPostsGroup.js
View File

@@ -1,5 +1,6 @@
import BLOG from '@/blog.config'
import { faFileAlt } from '@fortawesome/free-solid-svg-icons'
import { useGlobal } from '@/lib/global'
import { faArchive, faFileAlt } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Link from 'next/link'
import { useRouter } from 'next/router'
@@ -10,25 +11,19 @@ import { useRouter } from 'next/router'
* @param sliceCount 截取展示的数量 默认6
* @constructor
*/
const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
// 深拷贝
let postsSortByDate = Object.create(posts)
// 时间排序
postsSortByDate.sort((a, b) => {
const dateA = new Date(a?.lastEditedTime || a.createdTime)
const dateB = new Date(b?.lastEditedTime || b.createdTime)
return dateB - dateA
})
// 只取前五
postsSortByDate = postsSortByDate.slice(0, sliceCount)
const LatestPostsGroup = ({ posts }) => {
if (!posts) {
return <></>
}
// 获取当前路径
const currentPath = useRouter().asPath
const { locale } = useGlobal()
return <>
{postsSortByDate.map(post => {
return <section className='mt-8'>
<div className='text-sm pb-4 px-5 flex flex-nowrap justify-between'>
<div className='font-light text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-2' />{locale.COMMON.LATEST_POSTS}</div>
</div>
{posts.map(post => {
const selected = currentPath === `${BLOG.path}/article/${post.slug}`
return (
<Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
@@ -42,6 +37,6 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
</Link>
)
})}
</>
</section>
}
export default LatestPostsGroup

5
components/SideAreaLeft.js
View File

@@ -21,10 +21,9 @@ import Logo from './Logo'
* @returns {JSX.Element}
* @constructor
*/
const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, currentCategory, currentSearch, targetRef }) => {
const SideAreaLeft = ({ title, tags, currentTag, post, postCount, categories, currentCategory, currentSearch, targetRef }) => {
const { locale } = useGlobal()
const showToc = post && post.toc && post.toc.length > 1
const postCount = posts?.length || 0
return <aside id='left' className='hidden lg:block flex-col w-60 mr-4'>
<section className='w-60'>
@@ -48,7 +47,7 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
)}
<div key={locale.NAV.ABOUT} className='mb-5 bg-white dark:bg-gray-800 duration-200 py-6'>
<InfoCard postCount={postCount} />
<InfoCard />
<Analytics postCount={postCount}/>
</div>
</Tabs>

19
components/SideAreaRight.js
View File

@@ -1,7 +1,6 @@
import BLOG from '@/blog.config'
import LatestPostsGroup from '@/components/LatestPostsGroup'
import { useGlobal } from '@/lib/global'
import { faAngleDoubleRight, faAngleRight, faArchive, faTags, faThList } from '@fortawesome/free-solid-svg-icons'
import { faAngleDoubleRight, faAngleRight, faTags, faThList } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Link from 'next/link'
import React from 'react'
@@ -25,7 +24,7 @@ const SideAreaRight = ({
tags,
currentTag,
post,
posts,
slot,
categories,
currentCategory,
currentSearch,
@@ -69,19 +68,7 @@ const SideAreaRight = ({
</section>
)}
{/* 最新文章 */}
{widget?.showLatestPost && posts && (
<section className="shadow py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
<div className="text-sm pb-2 px-5 flex flex-nowrap justify-between">
<div className="font-light text-gray-600 dark:text-gray-300">
<FontAwesomeIcon icon={faArchive} className="mr-2" />
{locale.COMMON.LATEST_POSTS}
<span className='text-red-500 text-xs ml-1'>NEW</span>
</div>
</div>
<LatestPostsGroup posts={posts} />
</section>
)}
{slot}
{widget?.showTagList && tags && (
<section className="shadow py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">

16
components/SideBar.js
View File

@@ -1,9 +1,8 @@
import CategoryGroup from '@/components/CategoryGroup'
import InfoCard from '@/components/InfoCard'
import LatestPostsGroup from '@/components/LatestPostsGroup'
import TagGroups from '@/components/TagGroups'
import { useGlobal } from '@/lib/global'
import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/free-solid-svg-icons'
import { faAngleDoubleRight, faTags, faThList } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Link from 'next/link'
import React from 'react'
@@ -21,7 +20,7 @@ import Logo from './Logo'
* @returns {JSX.Element}
* @constructor
*/
const SideBar = ({ title, tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
const SideBar = ({ title, tags, currentTag, post, slot, categories, currentCategory, currentSearch }) => {
const { locale } = useGlobal()
return <aside id='sidebar' className='bg-white dark:bg-gray-900 w-80 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
@@ -64,15 +63,8 @@ const SideBar = ({ title, tags, currentTag, post, posts, categories, currentCate
</section>
)}
{/* 最新文章 */}
{posts && (
<section className='mt-8'>
<div className='text-sm pb-4 px-5 flex flex-nowrap justify-between'>
<div className='font-light text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-2' />{locale.COMMON.LATEST_POSTS}</div>
</div>
<LatestPostsGroup posts={posts} />
</section>
)}
{slot}
</div>
<section className='bg-white dark:bg-gray-900'>

4
components/SideBarDrawer.js
View File

@@ -7,7 +7,7 @@ import React, { useEffect, useImperativeHandle } from 'react'
* @returns {JSX.Element}
* @constructor
*/
const SideBarDrawer = ({ post, currentTag, cRef, tags, posts, categories, currentCategory }) => {
const SideBarDrawer = ({ post, currentTag, cRef, tags, slot, categories, currentCategory }) => {
// 暴露给父组件 通过cRef.current.handleMenuClick 调用
useImperativeHandle(cRef, () => {
return {
@@ -49,7 +49,7 @@ const SideBarDrawer = ({ post, currentTag, cRef, tags, posts, categories, curren
return <div id='sidebar-wrapper' className='hidden'>
<div id='sidebar-drawer' className='-ml-80 bg-white dark:bg-gray-900 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-50 shadow-2xl'>
<SideBar tags={tags} post={post} posts={posts} categories={categories} currentCategory={currentCategory} />
<SideBar tags={tags} post={post} slot={slot} categories={categories} currentCategory={currentCategory} />
</div>
{/* 背景蒙版 */}
<div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }} className='hidden animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-30 w-full h-full glassmorphism'/>

4
components/TopNav.js
View File

@@ -15,7 +15,7 @@ let windowTop = 0
* @param {*} param0
* @returns
*/
const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, autoHide = true }) => {
const TopNav = ({ tags, currentTag, post, slot, categories, currentCategory, autoHide = true }) => {
const drawer = useRef()
const { locale } = useGlobal()
const searchDrawer = useRef()
@@ -45,7 +45,7 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, au
}, [])
return (<div id='top-nav' className='sticky top-0 z-40 block lg:hidden'>
{/* 侧面抽屉 */}
<SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>
<SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} slot={slot} categories={categories} currentCategory={currentCategory}/>
<SearchDrawer cRef={searchDrawer}/>
{/* 导航栏 */}