Merge branch 'main' into deploy/tangly1024.com

README.md

@@ -111,7 +111,7 @@ yarn run start # 本地启动NextJS服务
   
   <td align="center"><a href="https://github.com/haixin1225"><img src="https://avatars.githubusercontent.com/u/28828438" width="64px;"  alt="haixin1225"/><br/><sub><b>haixin1225</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=haixin1225" title="haixin1225" >🔧 🐛</a></td>
 
-  <td align="center"><a href="https://github.com/mouyase"><img src="https://avatars.githubusercontent.com/u/7844572" width="64px;"  alt="mouyase"/><br/><sub><b>haixin1225</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=mouyase" title="mouyase" >🔧 🐛</a></td>
+  <td align="center"><a href="https://github.com/mouyase"><img src="https://avatars.githubusercontent.com/u/7844572" width="64px;"  alt="mouyase"/><br/><sub><b>mouyase</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=mouyase" title="mouyase" >🔧 🐛</a></td>
   
 
 </tr>

components/NotionPage.js

@@ -77,7 +77,7 @@ const NotionPage = ({ post }) => {
     addWatch4Dom()
   }, [])
 
-  return <div id='container' className='max-w-4xl mx-auto'>
+  return <div id='container' className='max-w-5xl overflow-x-hidden mx-auto'>
     <NotionRenderer
       recordMap={post.blockMap}
       mapPageUrl={mapPageUrl}

lib/notion/getNotionData.js

@@ -257,7 +257,7 @@ async function getPageRecordMapByNotionAPI({ pageId, from }) {
   let postCount = 0
 
   const allPages = collectionData.filter(post => {
-    if (post.type === 'Post' && (post.status === 'Published' || post.status === 'Invisible')) {
+    if (post.type === 'Post' && post.status === 'Published') {
       postCount++
     }
 

pages/[...slug].js

@@ -98,7 +98,7 @@ export async function getStaticProps({ params: { slug } }) {
   // slug 是个数组
   const fullSlug = slug.join('/')
   const from = `slug-props-${fullSlug}`
-  const props = await getGlobalNotionData({ from, pageType: ['Post'] })
+  const props = await getGlobalNotionData({ from })
   props.post = props.allPages.find((p) => {
     return p.slug === fullSlug || p.id === idToUuid(fullSlug)
   })

pages/archive/index.js

@@ -21,7 +21,7 @@ const ArchiveIndex = props => {
 export async function getStaticProps() {
   const props = await getGlobalNotionData({ from: 'archive-index' })
   const { allPages } = props
-  const allPosts = allPages.filter(page => page.type === 'Post')
+  const allPosts = allPages.filter(page => page.type === 'Post' && page.status === 'Published')
   // 处理分页
   props.posts = allPosts
   return {

pages/category/[category].js

@@ -27,7 +27,7 @@ export async function getStaticProps({ params: { category } }) {
   const from = 'category-props'
   let props = await getGlobalNotionData({ from })
   const { allPages } = props
-  const allPosts = allPages.filter(page => page.type === 'Post')
+  const allPosts = allPages.filter(page => page.type === 'Post' && page.status === 'Published')
   const posts = allPosts.filter(
     post => post && post.category && post.category.includes(category)
   )

pages/index.js

@@ -13,7 +13,7 @@ export async function getStaticProps() {
   const from = 'index'
   const props = await getGlobalNotionData({ from })
   const { allPages, siteInfo } = props
-  const allPosts = allPages.filter(page => page.type === 'Post')
+  const allPosts = allPages.filter(page => page.type === 'Post' && page.status === 'Published')
   const meta = {
     title: `${siteInfo?.title} | ${siteInfo?.description}`,
     description: siteInfo?.description,

pages/page/[page].js

@@ -39,7 +39,7 @@ export async function getStaticProps({ params: { page } }) {
   const props = await getGlobalNotionData({ from })
   props.page = page
   const { allPages } = props
-  const allPosts = allPages.filter(page => page.type === 'Post')
+  const allPosts = allPages.filter(page => page.type === 'Post' && page.status === 'Published')
   // 处理分页
   props.posts = allPosts.slice(
     BLOG.POSTS_PER_PAGE * (page - 1),

pages/search/[keyword].js

@@ -36,7 +36,7 @@ export async function getStaticProps({ params: { keyword } }) {
     pageType: ['Post']
   })
   const { allPages } = props
-  const allPosts = allPages.filter(page => page.type === 'Post')
+  const allPosts = allPages.filter(page => page.type === 'Post' && page.status === 'Published')
   props.posts = await filterByMemCache(allPosts, keyword)
   props.keyword = keyword
   return {

pages/search/index.js

@@ -53,7 +53,7 @@ export async function getStaticProps() {
     pageType: ['Post']
   })
   const { allPages } = props
-  const allPosts = allPages.filter(page => page.type === 'Post')
+  const allPosts = allPages.filter(page => page.type === 'Post' && page.status === 'Published')
   props.posts = allPosts
   return {
     props,

pages/tag/[tag].js

@@ -29,7 +29,7 @@ export async function getStaticProps({ params: { tag } }) {
     tagsCount: 0
   })
   const { allPages } = props
-  const allPosts = allPages.filter(page => page.type === 'Post')
+  const allPosts = allPages.filter(page => page.type === 'Post' && page.status === 'Published')
   props.posts = allPosts.filter(
     post => post && post.tags && post.tags.includes(tag)
   )

styles/notion.css

@@ -179,6 +179,10 @@
   color: var(--select-color-2) !important;
 }
 
+.notion-simple-table {
+  @apply whitespace-nowrap overflow-x-scroll block
+}
+
 .notion-app {
   position: relative;
   background: var(--bg-color);
@@ -197,8 +201,8 @@
 
 .medium-zoom-overlay {
   z-index: 300;
-  -webkit-backdrop-filter: blur(5px);    
-  backdrop-filter: blur(5px);   
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
 }
 
 .medium-zoom-image {
@@ -657,6 +661,10 @@ svg.notion-page-icon {
  list-style-type: lower-alpha;
 }
 
+.notion-list-numbered > .notion-list-numbered > .notion-list-numbered {
+    list-style-type: lower-roman;
+   }
+
 .notion-list-disc li {
   padding-left: 0.1em;
 }

themes/next/LayoutBase.js

@@ -9,7 +9,7 @@ import SideAreaRight from './components/SideAreaRight'
 import TopNav from './components/TopNav'
 import { useGlobal } from '@/lib/global'
 import PropTypes from 'prop-types'
-import React, { useEffect, useRef, useState } from 'react'
+import React from 'react'
 import smoothscroll from 'smoothscroll-polyfill'
 import CONFIG_NEXT from './config_next'
 import Live2D from '@/components/Live2D'
@@ -22,11 +22,12 @@ import Live2D from '@/components/Live2D'
 const LayoutBase = (props) => {
   const { children, headerSlot, meta, sideBarSlot, floatSlot, rightAreaSlot, siteInfo } = props
   const { onLoading } = useGlobal()
-  const targetRef = useRef(null)
+  const targetRef = React.useRef(null)
+  const floatButtonGroup = React.useRef(null)
   const leftAreaSlot = <Live2D/>
 
-  const [show, switchShow] = useState(false)
-  const [percent, changePercent] = useState(0) // 页面阅读百分比
+  const [show, switchShow] = React.useState(false)
+  const [percent, changePercent] = React.useState(0) // 页面阅读百分比
   const scrollListener = () => {
     const targetRef = document.getElementById('wrapper')
     const clientHeight = targetRef?.clientHeight
@@ -41,8 +42,18 @@ const LayoutBase = (props) => {
     }
     changePercent(per)
   }
-  useEffect(() => {
+
+  React.useEffect(() => {
     smoothscroll.polyfill()
+
+    // facebook messenger 插件需要调整右下角悬浮按钮的高度
+    const fb = document.getElementsByClassName('fb-customerchat')
+    if (fb.length === 0) {
+      floatButtonGroup?.current?.classList.replace('bottom-24', 'bottom-12')
+    } else {
+      floatButtonGroup?.current?.classList.replace('bottom-12', 'bottom-24')
+    }
+
     document.addEventListener('scroll', scrollListener)
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
@@ -62,11 +73,12 @@ const LayoutBase = (props) => {
           <section id='center' className={`${CONFIG_NEXT.NAV_TYPE !== 'normal' ? 'mt-40' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full`} ref={targetRef}>
             {onLoading ? <LoadingCover/> : <> {children}</> }
           </section>
-          <SideAreaRight targetRef={targetRef} slot={rightAreaSlot} {...props}/>
+          {/* 右侧栏样式 */}
+          { CONFIG_NEXT.RIGHT_BAR && <SideAreaRight targetRef={targetRef} slot={rightAreaSlot} {...props}/> }
       </main>
 
       {/* 右下角悬浮 */}
-      <div className='right-8 bottom-12 lg:right-2 fixed justify-end z-20 font-sans'>
+      <div ref={floatButtonGroup} className='right-8 bottom-12 bottom-24 lg:right-2 fixed justify-end z-20 font-sans'>
         <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp rounded-md glassmorphism justify-center duration-500  animate__faster flex space-x-2 items-center cursor-pointer '}>
           <JumpToTopButton percent={percent}/>
           <JumpToBottomButton />

themes/next/components/SideAreaRight.js

@@ -22,9 +22,6 @@ import BLOG from '@/blog.config'
 const SideAreaRight = (props) => {
   const { tags, currentTag, slot, categories, currentCategory } = props
   const { locale } = useGlobal()
-  if (!CONFIG_NEXT.RIGHT_BAR) {
-    return <></>
-  }
   const router = useRouter()
   return (<aside id='right' className='hidden 2xl:block flex-col w-60 ml-4'>