Merge branch 'main' into feat/new-theme-landing

themes/fukasawa/components/ArticleDetail.js

@@ -19,7 +19,7 @@ export default function ArticleDetail(props) {
   if (!post) {
     return <></>
   }
-  const date = formatDate(post?.publishTime || post?.createdTime, locale.LOCALE)
+  const date = formatDate(post?.publishTime, locale.LOCALE)
   return (
     <div id="container" className="max-w-5xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
       {post?.type && !post?.type !== 'Page' && post?.pageCover && (

themes/gitbook/LayoutBase.js

@@ -0,0 +1,138 @@
+import CommonHead from '@/components/CommonHead'
+import { useState, createContext, useContext, useEffect } from 'react'
+import Footer from './components/Footer'
+import InfoCard from './components/InfoCard'
+import RevolverMaps from './components/RevolverMaps'
+import CONFIG_GITBOOK from './config_gitbook'
+import TopNavBar from './components/TopNavBar'
+import SearchInput from './components/SearchInput'
+import { useGlobal } from '@/lib/global'
+import Live2D from '@/components/Live2D'
+import BLOG from '@/blog.config'
+import NavPostList from './components/NavPostList'
+import ArticleInfo from './components/ArticleInfo'
+import Catalog from './components/Catalog'
+import { useRouter } from 'next/router'
+import Announcement from './components/Announcement'
+import PageNavDrawer from './components/PageNavDrawer'
+import FloatTocButton from './components/FloatTocButton'
+import { AdSlot } from '@/components/GoogleAdsense'
+import JumpToTopButton from './components/JumpToTopButton'
+const ThemeGlobalMedium = createContext()
+
+/**
+ * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
+
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = (props) => {
+  const { children, meta, post, allNavPages, slotLeft, slotRight, slotTop } = props
+  const [tocVisible, changeTocVisible] = useState(false)
+  const [pageNavVisible, changePageNavVisible] = useState(false)
+  const [filterPosts, setFilterPosts] = useState(allNavPages)
+  const { onLoading } = useGlobal()
+  const router = useRouter()
+
+  const showTocButton = post?.toc?.length > 1
+
+  useEffect(() => {
+    setFilterPosts(allNavPages)
+  }, [post])
+
+  const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
+        <div className='w-full h-screen flex justify-center items-center'>
+            <i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin">  </i>
+        </div>
+    </div>
+
+  return (
+        <ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible, filterPosts, setFilterPosts, allNavPages, pageNavVisible, changePageNavVisible }}>
+            <CommonHead meta={meta} />
+
+            <div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
+                {/* 顶部导航栏 */}
+                <TopNavBar {...props} />
+
+                <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
+
+                    {/* 左侧推拉抽屉 */}
+                    <div style={{ width: '32rem' }} className={'font-sans hidden md:block border-r dark:border-transparent relative z-10 '}>
+                        <div className='pt-14 pb-4 px-6 sticky top-0 overflow-y-scroll h-screen flex flex-col justify-between'>
+                            {slotLeft}
+
+                            <SearchInput className='my-3 rounded-md' />
+
+                            {/* 所有文章列表 */}
+                            <NavPostList posts={filterPosts} />
+
+                            <div className='mt-2'>
+                                <Footer {...props} />
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <div id='center-wrapper' className='flex flex-col justify-between w-full relative z-10 pt-12 min-h-screen'>
+
+                        <div id='container-inner' className='w-full px-7 max-w-3xl justify-center mx-auto'>
+                            {slotTop}
+
+                            <AdSlot type='in-article' />
+
+                            {onLoading ? LoadingCover : children}
+
+                            <AdSlot type='in-article' />
+
+                            {/* 回顶按钮 */}
+                            <JumpToTopButton />
+                        </div>
+
+                        {/* 底部 */}
+                        <div className='md:hidden'>
+                          <Footer {...props}/>
+                        </div>
+                        <div className='text-center'>
+                            <AdSlot type='native' />
+                        </div>
+                    </div>
+
+                    {/*  右侧侧推拉抽屉 */}
+                    <div style={{ width: '32rem' }} className={'hidden xl:block dark:border-transparent relative z-10 '}>
+                        <div className='py-14 px-6 sticky top-0'>
+                            <ArticleInfo post={props?.post ? props?.post : props.notice} />
+
+                            <div className='py-6'>
+                                <Catalog {...props} />
+                                {slotRight}
+                                {router.route === '/' && <>
+                                    <InfoCard {...props} />
+                                    {CONFIG_GITBOOK.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
+                                    <Live2D />
+                                </>}
+                                {/* gitbook主题首页只显示公告 */}
+                                <Announcement {...props} />
+                            </div>
+
+                            <Live2D />
+
+                        </div>
+                    </div>
+
+                </main>
+
+                {showTocButton && !tocVisible && <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-gray-800 rounded'>
+                    <FloatTocButton {...props} />
+                </div>}
+
+                <PageNavDrawer {...props} />
+
+                {/* 移动端底部导航栏 */}
+                {/* <BottomMenuBar {...props} className='block md:hidden' /> */}
+            </div>
+        </ThemeGlobalMedium.Provider>
+  )
+}
+
+export default LayoutBase
+export const useGitBookGlobal = () => useContext(ThemeGlobalMedium)

themes/gitbook/components/Footer.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import BLOG from '@/blog.config'
 
-const Footer = ({ title }) => {
+const Footer = ({ siteInfo }) => {
   const d = new Date()
   const currentYear = d.getFullYear()
   const copyrightDate = (function () {
@@ -13,23 +13,24 @@ const Footer = ({ title }) => {
 
   return (
         <footer
-            className='max-w-3xl z-10 dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center mx-auto w-full leading-6 text-sm px-6 pb-6 relative'
+            className='z-10 bg:white dark:bg-hexo-black-gray justify-center text-center w-full text-sm relative'
         >
-            <hr />
+            <hr className='py-2' />
 
-            <div className='flex justify-between'>
-                <div className='flex'>© {`${copyrightDate}`} <div><i className='mx-1 animate-pulse fas fa-heart' /> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br /></div></div>
-                <div className='text-xs font-serif'><a href='https://github.com/tangly1024/NotionNext' className='underline text-gray-500 dark:text-gray-300'>NotionNext {BLOG.VERSION}</a></div>
+            <div className='flex justify-center'>
+                <div><i className='mx-1 animate-pulse fas fa-heart' /> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br /></div>
+                © {`${copyrightDate}`}
             </div>
 
+            <div className='text-xs font-serif'>Powered By <a href='https://github.com/tangly1024/NotionNext' className='underline text-gray-500 dark:text-gray-300'>NotionNext</a></div>
+
             {BLOG.BEI_AN && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br /></>}
 
             <span className='hidden busuanzi_container_site_pv'>
                 <i className='fas fa-eye' /><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
             <span className='pl-2 hidden busuanzi_container_site_uv'>
                 <i className='fas fa-users' /> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
-            <br />
-            <h1>{title}</h1>
+            <h1 className='pt-1'>{siteInfo?.title}</h1>
 
         </footer>
   )

themes/gitbook/components/NavPostList.js

@@ -36,7 +36,7 @@ const NavPostList = (props) => {
   if (!filteredPosts || filteredPosts.length === 0) {
     return <NavPostListEmpty currentSearch={currentSearch} />
   } else {
-    return <div id='posts-wrapper' className='w-full'>
+    return <div id='posts-wrapper' className='w-full flex-grow'>
             {/* 文章列表 */}
             {filteredPosts?.map((group, index) => <NavPostItem key={index} group={group} onHeightChange={props.onHeightChange}/>)}
         </div>

themes/hexo/components/BlogPostCardInfo.js

@@ -10,7 +10,7 @@ import BLOG from '@/blog.config'
  * @returns
  */
 export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary }) => {
-  return <div className={`flex flex-col justify-between lg:p-6 p-4  ${showPageCover && !showPreview ? 'md:w-7/12 w-full h-56 md:max-h-60 ' : 'w-full '}`}>
+  return <div className={`flex flex-col justify-between lg:p-6 p-4  ${showPageCover && !showPreview ? 'md:w-7/12 w-full md:max-h-60' : 'w-full'}`}>
        <div>
          {/* 标题 */}
          <Link

themes/hexo/components/HeaderArticle.js

@@ -14,7 +14,7 @@ export default function HeaderArticle({ post, siteInfo }) {
   const headerImage = post?.pageCover ? `url("${post.pageCover}")` : `url("${siteInfo?.pageCover}")`
 
   const date = formatDate(
-    post?.publishTime || post?.createdTime,
+    post?.publishTime,
     locale.LOCALE
   )
 

themes/matery/components/ArticleInfo.js

@@ -8,7 +8,7 @@ export const ArticleInfo = (props) => {
   const { post } = props
 
   const { locale } = useGlobal()
-  const date = formatDate(post?.publishTime || post?.createdTime, locale.LOCALE)
+  const date = formatDate(post?.publishTime, locale.LOCALE)
 
   return (
       <section className='mb-3 dark:text-gray-200'>

themes/medium/LayoutSlug.js

@@ -0,0 +1,96 @@
+import LayoutBase from './LayoutBase'
+import { useGlobal } from '@/lib/global'
+import React from 'react'
+import Catalog from './components/Catalog'
+import { ArticleLock } from './components/ArticleLock'
+import formatDate from '@/lib/formatDate'
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+import NotionPage from '@/components/NotionPage'
+import CONFIG_MEDIUM from './config_medium'
+import Comment from '@/components/Comment'
+import ArticleAround from './components/ArticleAround'
+import TocDrawer from './components/TocDrawer'
+import CategoryItem from './components/CategoryItem'
+import TagItemMini from './components/TagItemMini'
+import ShareBar from '@/components/ShareBar'
+
+export const LayoutSlug = props => {
+  const { post, prev, next, siteInfo, lock, validPassword } = props
+  const { locale } = useGlobal()
+
+  const date = formatDate(
+    post?.publishTime || post?.createdTime,
+    locale.LOCALE
+  )
+  if (!post) {
+    return <LayoutBase {...props} showInfoCard={true} />
+  }
+
+  const slotRight = post?.toc && post?.toc?.length >= 3 && (
+      <div key={locale.COMMON.TABLE_OF_CONTENTS} >
+            <Catalog toc={post.toc} />
+            {/* <JumpToTopButton className='text-gray-400 hover:text-green-500 hover:bg-gray-100 py-1 duration-200' /> */}
+        </div>
+  )
+
+  return (
+        <LayoutBase showInfoCard={true} slotRight={slotRight} {...props} >
+            {/* 文章锁 */}
+            {lock && <ArticleLock validPassword={validPassword} />}
+
+            {!lock && <div id='container'>
+
+                {/* title */}
+                <h1 className="text-3xl pt-12  dark:text-gray-300">{post?.title}</h1>
+
+                {/* meta */}
+                <section className="py-2 items-center text-sm  px-1">
+                    <div className='flex flex-wrap text-gray-500 py-1 dark:text-gray-600'>
+                        <span className='whitespace-nowrap'> <i className='far fa-calendar mr-2' />{date}</span>
+                        <span className='mx-1'>|</span>
+                        <span className='whitespace-nowrap mr-2'><i className='far fa-calendar-check mr-2' />{post.lastEditedTime}</span>
+                        <div className="hidden busuanzi_container_page_pv font-light mr-2 whitespace-nowrap">
+                            <i className="mr-1 fas fa-eye" /><span className="busuanzi_value_page_pv" />
+                        </div>
+                    </div>
+                    <Link href="/about" passHref legacyBehavior>
+                        <div className='flex pt-2'>
+                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={22} alt={BLOG.AUTHOR} />
+
+                            <div className="mr-3 ml-2 my-auto text-green-500 cursor-pointer">
+                                {BLOG.AUTHOR}
+                            </div>
+                        </div>
+                    </Link>
+                </section>
+
+                {/* Notion文章主体 */}
+                <section id="notion-article" className="px-1 max-w-4xl">
+                    {post && (<NotionPage post={post} />)}
+                </section>
+
+                <section>
+
+                    {/* 分享 */}
+                    <ShareBar post={post} />
+                    {/* 文章分类和标签信息 */}
+                    <div className='flex justify-between'>
+                        {CONFIG_MEDIUM.POST_DETAIL_CATEGORY && post.category && <CategoryItem category={post.category} />}
+                        <div>
+                            {CONFIG_MEDIUM.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+                        </div>
+                    </div>
+
+                    {post.type === 'Post' && <ArticleAround prev={prev} next={next} />}
+                    <Comment frontMatter={post} />
+                </section>
+
+                <TocDrawer {...props} />
+            </div>}
+        </LayoutBase>
+  )
+}
+
+export default LayoutSlug