forked from tangly1024/NotionNext
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1feba5b
commit 7c68d1a
Showing
16 changed files
with
308 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,61 @@ | ||
import BLOG from '@/blog.config' | ||
import { useGlobal } from '@/lib/global' | ||
import { useEffect } from 'react' | ||
import BlogArchiveItem from './components/BlogPostArchive' | ||
import LayoutBase from './LayoutBase' | ||
|
||
export const LayoutArchive = (props) => { | ||
return <LayoutBase {...props}> | ||
Archive Page | ||
const { locale } = useGlobal() | ||
const { posts } = props | ||
// 深拷贝 | ||
const postsSortByDate = Object.create(posts) | ||
|
||
// 时间排序 | ||
postsSortByDate.sort((a, b) => { | ||
const dateA = new Date(a?.date.start_date || a.createdTime) | ||
const dateB = new Date(b?.date.start_date || b.createdTime) | ||
return dateB - dateA | ||
}) | ||
|
||
const meta = { | ||
title: `${locale.NAV.ARCHIVE} | ${BLOG.title}`, | ||
description: BLOG.description, | ||
type: 'website' | ||
} | ||
|
||
const archivePosts = {} | ||
|
||
postsSortByDate.forEach(post => { | ||
const date = post.date.start_date.slice(0, 7) | ||
if (archivePosts[date]) { | ||
archivePosts[date].push(post) | ||
} else { | ||
archivePosts[date] = [post] | ||
} | ||
}) | ||
|
||
useEffect(() => { | ||
if (window) { | ||
const anchor = window.location.hash | ||
if (anchor) { | ||
setTimeout(() => { | ||
const anchorElement = document.getElementById(anchor.substring(1)) | ||
if (anchorElement) { | ||
anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' }) | ||
} | ||
}, 300) | ||
} | ||
} | ||
}, []) | ||
return <LayoutBase {...props} meta={meta}> | ||
<div className="mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-gray-800 shadow-md min-h-full"> | ||
{Object.keys(archivePosts).map(archiveTitle => ( | ||
<BlogArchiveItem | ||
key={archiveTitle} | ||
posts={archivePosts[archiveTitle]} | ||
archiveTitle={archiveTitle} | ||
/> | ||
))} | ||
</div> | ||
</LayoutBase> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,8 @@ | ||
import BlogListPage from './components/BlogListPage' | ||
import LayoutBase from './LayoutBase' | ||
|
||
export const LayoutCategory = (props) => { | ||
return <LayoutBase {...props}> | ||
Category | ||
<BlogListPage page={props.page} posts={props.posts} postCount={props.postCount} /> | ||
</LayoutBase> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,32 @@ | ||
import BLOG from '@/blog.config' | ||
import { useGlobal } from '@/lib/global' | ||
import { faFolder, faTh } from '@fortawesome/free-solid-svg-icons' | ||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' | ||
import Link from 'next/link' | ||
import LayoutBase from './LayoutBase' | ||
|
||
export const LayoutCategoryIndex = (props) => { | ||
return <LayoutBase {...props}> | ||
Category | ||
</LayoutBase> | ||
const { locale } = useGlobal() | ||
const { categories } = props | ||
const meta = { | ||
title: `${locale.COMMON.CATEGORY} | ${BLOG.title}`, | ||
description: BLOG.description, | ||
type: 'website' | ||
} | ||
return <LayoutBase {...props} meta={meta}> | ||
<div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'> | ||
<div className='dark:text-gray-200 mb-5'> | ||
<FontAwesomeIcon icon={faTh} className='mr-4' />{locale.COMMON.CATEGORY}: | ||
</div> | ||
<div id='category-list' className='duration-200 flex flex-wrap'> | ||
{Object.keys(categories).map(category => { | ||
return <Link key={category} href={`/category/${category}`} passHref> | ||
<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'}> | ||
<FontAwesomeIcon icon={faFolder} className='mr-4' />{category}({categories[category]}) | ||
</div> | ||
</Link> | ||
})} | ||
</div> | ||
</div> </LayoutBase> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,8 @@ | ||
import BlogListPage from './components/BlogListPage' | ||
import LayoutBase from './LayoutBase' | ||
|
||
export const LayoutTag = (props) => { | ||
return <LayoutBase {...props}> | ||
Tag - {props.tag} | ||
<BlogListPage {...props} /> | ||
</LayoutBase> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,27 @@ | ||
import BLOG from '@/blog.config' | ||
import { useGlobal } from '@/lib/global' | ||
import { faTag } from '@fortawesome/free-solid-svg-icons' | ||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' | ||
import TagItem from './components/TagItem' | ||
import LayoutBase from './LayoutBase' | ||
|
||
export const LayoutTagIndex = (props) => { | ||
return <LayoutBase {...props}> | ||
Tag - {props.tag} | ||
const { locale } = useGlobal() | ||
const { tags } = props | ||
const meta = { | ||
title: `${locale.COMMON.TAGS} | ${BLOG.title}`, | ||
description: BLOG.description, | ||
type: 'website' | ||
} | ||
|
||
return <LayoutBase {...props} meta={meta}> | ||
<div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'> | ||
<div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faTag} className='mr-4'/>{locale.COMMON.TAGS}:</div> | ||
<div id='tags-list' className='duration-200 flex flex-wrap'> | ||
{ tags.map(tag => { | ||
return <div key={tag.name} className='p-2'><TagItem key={tag.name} tag={tag} /></div> | ||
}) } | ||
</div> | ||
</div> | ||
</LayoutBase> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import React from 'react' | ||
import Link from 'next/link' | ||
import BLOG from '@/blog.config' | ||
/** | ||
* 博客归档 | ||
* @param posts 所有文章 | ||
* @param archiveTitle 归档标题 | ||
* @returns {JSX.Element} | ||
* @constructor | ||
*/ | ||
const BlogArchiveItem = ({ posts = [], archiveTitle }) => { | ||
if (!posts || posts.length === 0) { | ||
return <></> | ||
} else { | ||
return <div> | ||
<div className='pt-16 pb-4 text-3xl dark:text-gray-300' id={archiveTitle}>{archiveTitle}</div> | ||
<ul> | ||
{posts.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 name={post?.date?.start_date}><span className='text-gray-400'>{post.date.start_date}</span> | ||
<Link href={`${BLOG.path}/article/${post.slug}`} passHref> | ||
<a className='dark:text-gray-400 dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600'>{post.title}</a> | ||
</Link> | ||
</div> | ||
</li> | ||
))} | ||
</ul> | ||
</div> | ||
} | ||
} | ||
|
||
export default BlogArchiveItem |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import React, { useEffect, useRef } from 'react' | ||
|
||
const Collapse = props => { | ||
const collapseRef = useRef(null) | ||
const collapseSection = element => { | ||
const sectionHeight = element.scrollHeight | ||
requestAnimationFrame(function () { | ||
element.style.height = sectionHeight + 'px' | ||
requestAnimationFrame(function () { | ||
element.style.height = 0 + 'px' | ||
}) | ||
}) | ||
} | ||
const expandSection = element => { | ||
const sectionHeight = element.scrollHeight | ||
element.style.height = sectionHeight + 'px' | ||
const clearTime = setTimeout(() => { | ||
element.style.height = 'auto' | ||
}, 400) | ||
clearTimeout(clearTime) | ||
} | ||
useEffect(() => { | ||
const element = collapseRef.current | ||
if (props.isOpen) { | ||
expandSection(element) | ||
} else { | ||
collapseSection(element) | ||
} | ||
}, [props.isOpen]) | ||
return ( | ||
<div ref={collapseRef} style={{ height: '0px' }} className='overflow-hidden duration-200'> | ||
{props.children} | ||
</div> | ||
) | ||
} | ||
Collapse.defaultProps = { isOpen: false } | ||
|
||
export default Collapse |
Oops, something went wrong.