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

group theme files - example

Browse Source
This commit is contained in:
tangly1024.com
2023-07-04 15:07:54 +08:00
parent b126072a14
commit 9853929eb6
25 changed files with 330 additions and 797 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
themes/example/Layout404.js
View File

@@ -1,9 +0,0 @@
import LayoutBase from './LayoutBase'
export const Layout404 = (props) => {
return <LayoutBase {...props}>
404 Not found.
</LayoutBase>
}
export default Layout404

47
themes/example/LayoutArchive.js
View File

@@ -1,47 +0,0 @@
import BLOG from '@/blog.config'
import Link from 'next/link'
import LayoutBase from './LayoutBase'
export const LayoutArchive = props => {
const { archivePosts } = props
return (
<LayoutBase {...props}>
<div className="mb-10 pb-20 md:py-12 p-3 min-h-screen w-full">
{Object.keys(archivePosts).map(archiveTitle => (
<div key={archiveTitle}>
<div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
{archiveTitle}
</div>
<ul>
{archivePosts[archiveTitle].map(post => (
<li
key={post.id}
className="border-l-2 p-1 text-xs md:text-base items-center hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
>
<div id={post?.publishTime}>
<span className="text-gray-400">
{post.date?.start_date}
</span>{' '}
&nbsp;
<Link
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className="dark:text-gray-400 dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
{post.title}
</Link>
</div>
</li>
))}
</ul>
</div>
))}
</div>
</LayoutBase>
)
}
export default LayoutArchive

60
themes/example/LayoutBase.js
View File

@@ -1,60 +0,0 @@
import CommonHead from '@/components/CommonHead'
import React from 'react'
import { Header } from './components/Header'
import { Nav } from './components/Nav'
import { Footer } from './components/Footer'
import { Title } from './components/Title'
import { SideBar } from './components/SideBar'
import JumpToTopButton from './components/JumpToTopButton'
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
/**
* 基础布局 采用左右两侧布局，移动端使用顶部导航栏
* @returns {JSX.Element}
* @constructor
*/
const LayoutBase = props => {
const { children, meta } = props
const { onLoading } = useGlobal()
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 (
<div id='theme-example' className='dark:text-gray-300 bg-white dark:bg-black'>
<CommonHead meta={meta} />
{/* 顶栏LOGO */}
<Header {...props} />
{/* 菜单 */}
<Nav {...props} />
{/* 主体 */}
<div id='container-inner' className="w-full relative z-10">
<Title {...props} />
<div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative container mx-auto justify-center md:flex items-start py-8 px-2'}>
<div className='w-full max-w-3xl xl:px-14 lg:px-4 '> {onLoading ? LoadingCover : children}</div>
<SideBar {...props} />
</div>
</div>
<Footer {...props} />
<div className='fixed right-4 bottom-4 z-10'>
<JumpToTopButton />
</div>
</div>
)
}
export default LayoutBase

12
themes/example/LayoutCategory.js
View File

@@ -1,12 +0,0 @@
import BLOG from '@/blog.config'
import { BlogListPage } from './components/BlogListPage'
import { BlogListScroll } from './components/BlogListScroll'
import LayoutBase from './LayoutBase'
export const LayoutCategory = props => {
return <LayoutBase {...props}>
{BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
</LayoutBase >
}
export default LayoutCategory

28
themes/example/LayoutCategoryIndex.js
View File

@@ -1,28 +0,0 @@
import Link from 'next/link'
import LayoutBase from './LayoutBase'
export const LayoutCategoryIndex = props => {
const { categoryOptions } = props
return (
<LayoutBase {...props}>
<div id='category-list' className='duration-200 flex flex-wrap'>
{categoryOptions?.map(category => {
return (
<Link
key={category.name}
href={`/category/${category.name}`}
passHref
legacyBehavior>
<div
className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
<i className='mr-4 fas fa-folder' />{category.name}({category.count})
</div>
</Link>
)
})}
</div>
</LayoutBase>
)
}
export default LayoutCategoryIndex

15
themes/example/LayoutIndex.js
View File

@@ -1,15 +0,0 @@
import BLOG from '@/blog.config'
import { BlogListPage } from './components/BlogListPage'
import { BlogListScroll } from './components/BlogListScroll'
import LayoutBase from './LayoutBase'
export const LayoutIndex = props => {
return (
<LayoutBase {...props}>
{BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
</LayoutBase>
)
}
export default LayoutIndex

12
themes/example/LayoutPage.js
View File

@@ -1,12 +0,0 @@
import { BlogListPage } from './components/BlogListPage'
import LayoutBase from './LayoutBase'
export const LayoutPage = props => {
return (
<LayoutBase {...props}>
<BlogListPage {...props} />
</LayoutBase>
)
}
export default LayoutPage

56
themes/example/LayoutSearch.js
View File

@@ -1,56 +0,0 @@
import BLOG from '@/blog.config'
import { BlogListPage } from './components/BlogListPage'
import { BlogListScroll } from './components/BlogListScroll'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import SearchInput from './components/SearchInput'
import Mark from 'mark.js'
import LayoutBase from './LayoutBase'
import { isBrowser } from '@/lib/utils'
const LayoutSearch = props => {
const { keyword } = props
const router = useRouter()
useEffect(() => {
setTimeout(() => {
const container = isBrowser() && document.getElementById('posts-wrapper')
if (container && container.innerHTML) {
const re = new RegExp(keyword, 'gim')
const instance = new Mark(container)
instance.markRegExp(re, {
element: 'span',
className: 'text-red-500 border-b border-dashed'
})
}
}, 100)
}, [router.events])
useEffect(() => {
setTimeout(() => {
if (keyword) {
const targets = document.getElementsByClassName('replace')
for (const container of targets) {
if (container && container.innerHTML) {
const re = new RegExp(`${keyword}`, 'gim')
container.innerHTML = container.innerHTML.replace(
re,
`<span class='text-red-500 border-b border-dashed'>${keyword}</span>`
)
}
}
}
}, 100)
}, [])
return <LayoutBase {...props}>
<div className='pb-12'>
<SearchInput {...props} />
</div>
{BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
</LayoutBase>
}
export default LayoutSearch

33
themes/example/LayoutSlug.js
View File

@@ -1,33 +0,0 @@
import LayoutBase from './LayoutBase'
import { ArticleLock } from './components/ArticleLock'
import NotionPage from '@/components/NotionPage'
import { ArticleInfo } from './components/ArticleInfo'
import Comment from '@/components/Comment'
import ShareBar from '@/components/ShareBar'
export const LayoutSlug = props => {
const { post, lock, validPassword } = props
if (!post) {
return <LayoutBase {...props} />
}
return (
<LayoutBase {...props}>
{lock && <ArticleLock validPassword={validPassword} />}
{!lock && <div id="article-wrapper" className="px-2">
{post && <>
<ArticleInfo post={post} />
<NotionPage post={post} />
<ShareBar post={post} />
<Comment frontMatter={post}/>
</>}
</div>}
</LayoutBase>
)
}
export default LayoutSlug

12
themes/example/LayoutTag.js
View File

@@ -1,12 +0,0 @@
import BLOG from '@/blog.config'
import { BlogListPage } from './components/BlogListPage'
import { BlogListScroll } from './components/BlogListScroll'
import LayoutBase from './LayoutBase'
export const LayoutTag = props => {
return <LayoutBase {...props}>
{BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
</LayoutBase >
}
export default LayoutTag

31
themes/example/LayoutTagIndex.js
View File

@@ -1,31 +0,0 @@
import Link from 'next/link'
import LayoutBase from './LayoutBase'
export const LayoutTagIndex = (props) => {
const { tagOptions } = props
return (
<LayoutBase {...props}>
<div>
<div id='tags-list' className='duration-200 flex flex-wrap'>
{tagOptions.map(tag => {
return (
<div key={tag.name} className='p-2'>
<Link
key={tag}
href={`/tag/${encodeURIComponent(tag.name)}`}
passHref
className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200
mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}>
<div className='font-light dark:text-gray-400'><i className='mr-1 fas fa-tag' /> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
</Link>
</div>
)
})}
</div>
</div> </LayoutBase>
)
}
export default LayoutTagIndex

2
themes/example/components/Announcement.js
View File

@@ -5,7 +5,7 @@ const NotionPage = dynamic(() => import('@/components/NotionPage'))
const Announcement = ({ post, className }) => {
const { locale } = useGlobal()
if (!post) {
if (!post || Object.keys(post).length === 0) {
return <></>
}
return <aside className="rounded shadow overflow-hidden mb-6">

6
themes/example/components/ArticleInfo.js
View File

@@ -11,12 +11,12 @@ export const ArticleInfo = (props) => {
<div>
{post?.type !== 'Page' && <>
<Link
href={`/category/${post.category}`}
href={`/category/${post?.category}`}
passHref
className="cursor-pointer text-md mr-2 hover:text-black dark:hover:text-white border-b dark:border-gray-500 border-dashed">
<i className="mr-1 fas fa-folder-open" />
{post.category}
{post?.category}
</Link>
<span className='mr-2'>|</span>
@@ -33,7 +33,7 @@ export const ArticleInfo = (props) => {
</Link>
<span className='mr-2'>|</span>
<span className='mx-2 text-gray-400 dark:text-gray-500'>
{locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
{locale.COMMON.LAST_EDITED_TIME}: {post?.lastEditedTime}
</span>
<span className='mr-2'>|</span>
<span className="hidden busuanzi_container_page_pv font-light mr-2">

39
themes/example/components/BlogListGroupByDate.js Normal file
View File

@@ -0,0 +1,39 @@
import BLOG, { LINK } from '@/blog.config'
/**
* 按照日期将文章分组
* 归档页面用到
* @param {*} param0
* @returns
*/
export default function BlogListGroupByDate({ archiveTitle, archivePosts }) {
return <div key={archiveTitle}>
<div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
{archiveTitle}
</div>
<ul>
{archivePosts[archiveTitle].map(post => (
<li
key={post.id}
className="border-l-2 p-1 text-xs md:text-base items-center hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
>
<div id={post?.publishTime}>
<span className="text-gray-400">
{post.date?.start_date}
</span>{' '}
&nbsp;
<LINK
href={`${BLOG.SUB_PATH}/${post.slug}`}
passHref
className="dark:text-gray-400 dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
{post.title}
</LINK>
</div>
</li>
))}
</ul>
</div>
}

2
themes/example/components/BlogListPage.js
View File

@@ -20,7 +20,7 @@ export const BlogListPage = props => {
const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
return (
<div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`}>
<div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'} mb-12`}>
<div id="posts-wrapper">
{posts?.map(post => (

14
themes/example/components/BlogPostCard.js
View File

@@ -6,13 +6,13 @@ import TwikooCommentCount from '@/components/TwikooCommentCount'
const BlogPostCard = ({ post }) => {
const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
return <article className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
return <article className={`${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''} replace mb-12 `}>
<div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
<h2 className="mb-4">
<Link
href={`/${post.slug}`}
className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
{post.title}
{post?.title}
</Link>
</h2>
@@ -25,14 +25,14 @@ const BlogPostCard = ({ post }) => {
{/* <a href="#" className="text-gray-700">2 Comments</a> */}
</div>
<p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
{!post.results && <p className="line-clamp-3 text-gray-700 dark:text-gray-400 leading-normal">
{post.summary}
</p>
</p>}
{/* 搜索结果 */}
{post.results && (
<p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.results.map(r => (
<span key={r}>{r}</span>
<p className="line-clamp-3 mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.results.map((r, index) => (
<span key={index}>{r}</span>
))}
</p>
)}

20
themes/example/components/CategoryItem.js Normal file
View File

@@ -0,0 +1,20 @@
import Link from 'next/link'
/**
* 文章分类
* @param {*} param0
* @returns
*/
export default function CategoryItem({ category }) {
return (
<Link
key={category.name}
href={`/category/${category.name}`}
passHref
legacyBehavior>
<div className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
<i className='mr-4 fas fa-folder' />{category.name}({category.count})
</div>
</Link>
)
}

8
themes/example/components/LoadingCover.js Normal file
View File

@@ -0,0 +1,8 @@
export default function LoadingCover() {
return <div id='cover-loading' className={'z-50 opacity-50 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>
}

4
themes/example/components/SearchInput.js
View File

@@ -4,7 +4,7 @@ import { useImperativeHandle, useRef, useState } from 'react'
let lock = false
const SearchInput = ({ currentTag, currentSearch, cRef }) => {
const SearchInput = ({ currentTag, keyword, cRef }) => {
const { locale } = useGlobal()
const router = useRouter()
const searchInputRef = useRef(null)
@@ -68,7 +68,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
onCompositionUpdate={lockSearchInput}
onCompositionEnd={unLockSearchInput}
onChange={e => updateSearchKey(e.target.value)}
defaultValue={currentSearch || ''}
defaultValue={keyword || ''}
/>
<div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'

18
themes/example/components/TagItem.js Normal file
View File

@@ -0,0 +1,18 @@
import Link from 'next/link'
/**
* 标签
* @param {*} param0
* @returns
*/
export default function TagItem({ tag }) {
return <div key={tag.name} className='p-2'>
<Link
key={tag}
href={`/tag/${encodeURIComponent(tag.name)}`}
passHref
className={`cursor-pointer inline-block rounded hover:bg-gray-500 hover:text-white duration-200 mr-2 py-1 px-2 text-xs whitespace-nowrap dark:hover:text-white text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}>
<div className='font-light dark:text-gray-400'><i className='mr-1 fas fa-tag' /> {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
</Link>
</div>
}

235
themes/example/index.js
View File

@@ -1,25 +1,234 @@
'use client'
import BLOG from '@/blog.config'
import CONFIG_EXAMPLE from './config_example'
import LayoutIndex from './LayoutIndex'
import LayoutSearch from './LayoutSearch'
import LayoutArchive from './LayoutArchive'
import LayoutSlug from './LayoutSlug'
import Layout404 from './Layout404'
import LayoutCategory from './LayoutCategory'
import LayoutCategoryIndex from './LayoutCategoryIndex'
import LayoutPage from './LayoutPage'
import LayoutTag from './LayoutTag'
import LayoutTagIndex from './LayoutTagIndex'
import CommonHead from '@/components/CommonHead'
import { useEffect } from 'react'
import { Header } from './components/Header'
import { Nav } from './components/Nav'
import { Footer } from './components/Footer'
import { Title } from './components/Title'
import { SideBar } from './components/SideBar'
import { BlogListPage } from './components/BlogListPage'
import { BlogListScroll } from './components/BlogListScroll'
import { useGlobal } from '@/lib/global'
import { ArticleLock } from './components/ArticleLock'
import { ArticleInfo } from './components/ArticleInfo'
import JumpToTopButton from './components/JumpToTopButton'
import NotionPage from '@/components/NotionPage'
import Comment from '@/components/Comment'
import ShareBar from '@/components/ShareBar'
import SearchInput from './components/SearchInput'
import Mark from 'mark.js'
import { isBrowser } from '@/lib/utils'
import LoadingCover from './components/LoadingCover'
import BlogListGroupByDate from './components/BlogListGroupByDate'
import CategoryItem from './components/CategoryItem'
import TagItem from './components/TagItem'
import { useRouter } from 'next/router'
/**
* 基础布局框架
* 1.其它页面都嵌入在LayoutBase中
* 2.采用左右两侧布局，移动端使用顶部导航栏
* @returns {JSX.Element}
* @constructor
*/
const LayoutBase = props => {
const { children, meta, slotTop } = props
const { onLoading } = useGlobal()
return (
<div id='theme-example' className='dark:text-gray-300 bg-white dark:bg-black'>
<CommonHead meta={meta} />
{/* 页头 */}
<Header {...props} />
{/* 菜单 */}
<Nav {...props} />
{/* 主体 */}
<div id='container-inner' className="w-full relative z-10">
{/* 标题栏 */}
<Title {...props} />
<div id='container-wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative container mx-auto justify-center md:flex items-start py-8 px-2'}>
{/* 内容 */}
<div className='w-full max-w-3xl xl:px-14 lg:px-4 '>
{/* 嵌入模块 */}
{slotTop}
{onLoading ? <LoadingCover /> : children}
</div>
{/* 侧边栏 */}
<SideBar {...props} />
</div>
</div>
{/* 页脚 */}
<Footer {...props} />
{/* 回顶按钮 */}
<div className='fixed right-4 bottom-4 z-10'>
<JumpToTopButton />
</div>
</div>
)
}
/**
* 首页
* @param {*} props
* @returns 此主题首页就是列表
*/
const LayoutIndex = props => {
return <LayoutPostList {...props} />
}
/**
* 文章列表
* @param {*} props
* @returns
*/
const LayoutPostList = props => {
const { category, tag } = props
let slotTop = null
if (category) {
slotTop = <div className='pb-12'><i className="mr-1 fas fa-folder-open" />{category}</div>
} else if (tag) {
slotTop = <div className='pb-12'>#{tag}</div>
}
return (
<LayoutBase {...props} slotTop={slotTop}>
{BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
</LayoutBase>
)
}
/**
* 文章详情页
* @param {*} props
* @returns
*/
const LayoutSlug = props => {
const { post, lock, validPassword } = props
return (
<LayoutBase {...props}>
{lock
? <ArticleLock validPassword={validPassword} />
: <div id="article-wrapper" className="px-2">
<ArticleInfo post={post} />
<NotionPage post={post} />
<ShareBar post={post} />
<Comment frontMatter={post} />
</div>}
</LayoutBase>
)
}
/**
* 404页
* @param {*} props
* @returns
*/
const Layout404 = (props) => {
return <LayoutBase {...props}>404 Not found.</LayoutBase>
}
/**
* 搜索页
* @param {*} props
* @returns
*/
const LayoutSearch = props => {
const { keyword } = props
// 嵌入一个搜索框在顶部
const slotTop = <div className='pb-12'><SearchInput {...props} /></div>
const router = useRouter()
useEffect(() => {
setTimeout(() => {
if (isBrowser()) {
// 高亮搜索到的结果
const container = document.getElementById('posts-wrapper')
console.log('container', container, keyword)
if (keyword && container) {
const re = new RegExp(keyword, 'gim')
const instance = new Mark(container)
instance.markRegExp(re, {
element: 'span',
className: 'text-red-500 border-b border-dashed'
})
}
}
}, 500)
}, [router])
return <LayoutPostList slotTop={slotTop} {...props} />
}
/**
* 归档列表
* @param {*} props
* @returns 按照日期将文章分组排序
*/
const LayoutArchive = props => {
const { archivePosts } = props
return (
<LayoutBase {...props}>
<div className="mb-10 pb-20 md:py-12 p-3 min-h-screen w-full">
{Object.keys(archivePosts).map(archiveTitle => (
<BlogListGroupByDate key={archiveTitle} archiveTitle={archiveTitle} archivePosts={archivePosts} />
))}
</div>
</LayoutBase>
)
}
/**
* 分类列表
* @param {*} props
* @returns
*/
const LayoutCategoryIndex = props => {
const { categoryOptions } = props
return (
<LayoutBase {...props}>
<div id='category-list' className='duration-200 flex flex-wrap'>
{categoryOptions?.map(category => <CategoryItem key={category.name} category={category} />)}
</div>
</LayoutBase>
)
}
/**
* 标签列表
* @param {*} props
* @returns
*/
const LayoutTagIndex = (props) => {
const { tagOptions } = props
return (
<LayoutBase {...props}>
<div id='tags-list' className='duration-200 flex flex-wrap'>
{tagOptions.map(tag => <TagItem key={tag.name} tag={tag} />)}
</div>
</LayoutBase>
)
}
export {
CONFIG_EXAMPLE as THEME_CONFIG,
LayoutIndex,
LayoutPostList,
LayoutSearch,
LayoutArchive,
LayoutSlug,
Layout404,
LayoutCategory,
LayoutCategoryIndex,
LayoutPage,
LayoutTag,
LayoutTagIndex
}