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

feature:

Browse Source 
调整字体，重新排版
This commit is contained in:
tangly1024
2021-12-08 17:21:07 +08:00
parent 04ec195520
commit bca046cf03
21 changed files with 67 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/BlogPostCard.js
View File

@@ -8,34 +8,34 @@ import { faFolder } from '@fortawesome/free-solid-svg-icons'
const BlogPostCard = ({ post, tags }) => {
return (
<div key={post.id} className='md:grid md:grid-cols-5 animate__animated animate__fadeIn animate__faster shadow-lg rounded border dark:border-gray-600 mb-6
<div key={post.id} className='hover:shadow-2xl shadow-md mb-14 duration-300 md:grid md:grid-cols-5 rounded-xl dark:border-gray-600 animate__animated animate__fadeIn animate__faster
w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700'>
<Link href={`${BLOG.path}/article/${post.slug}`} passHref>
<div className='w-full h-60 hover:scale-105 duration-200 cursor-pointer transform col-span-2 border-r border-dashed'>
<Image src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
<div className='w-full h-60 duration-200 cursor-pointer transform col-span-2 overflow-hidden rounded-l-2xl'>
<Image className='hover:scale-105 transform duration-500' src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
</div>
</Link>
<div className='px-4 py-4 col-span-3'>
<div className='p-8 col-span-3'>
<div>
<Link href={`/category/${post.category}`} passHref>
<span className='cursor-pointer dark:text-gray-200 text-gray-400 text-sm hover:underline hover:text-blue-500 dark:hover:text-blue-400 transform'>
<span className='cursor-pointer dark:text-gray-200 font-light text-gray-500 text-sm hover:underline hover:text-blue-500 dark:hover:text-blue-400 transform'>
<FontAwesomeIcon icon={faFolder} size='sm' className='mr-1 w-5 text-sm' />{post.category}
</span>
</Link>
<span className='mx-1 dark:text-gray-400'>|</span>
<span className='mx-2 dark:text-gray-400 text-gray-500'>|</span>
<Link href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} passHref>
<span className='mt-2 mx-2 text-gray-400 hover:text-blue-400 hover:underline cursor-pointer dark:text-gray-300 dark:hover:text-blue-400 text-sm leading-4'>{post.date.start_date}</span>
<span className='mt-2 font-light text-gray-500 hover:text-blue-400 hover:underline cursor-pointer dark:text-gray-300 dark:hover:text-blue-400 text-sm leading-4'>{post.date.start_date}</span>
</Link>
</div>
<Link href={`${BLOG.path}/article/${post.slug}`} passHref>
<p className='cursor-pointer my-3 text-lg leading-tight font-bold text-black dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 hover:underline'>
<p className='cursor-pointer my-3 text-2xl leading-tight text-black dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'>
{post.title}
</p>
</Link>
<p className='mt-2 text-gray-400 dark:text-gray-400 text-sm'>{post.summary}</p>
<p className='mt-2 text-gray-600 dark:text-gray-300 text-sm font-light'>{post.summary}</p>
<div className='flex md:flex-nowrap flex-wrap md:justify-start justify-between pt-5'>
<div> {post.tagItems.map(tag => (<TagItemMini key={tag.name} tag={tag} />))}</div>

2
components/BlogPostListScroll.js
View File

@@ -51,7 +51,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
if (!postsToShow || postsToShow.length === 0) {
return <BlogPostListEmpty currentSearch={currentSearch} />
} else {
return <div id='post-list-wrapper' className='mt-20 mx-2 lg:mx-20' ref={targetRef}>
return <div id='post-list-wrapper' className='mt-20 mx-2 lg:mx-20 xl:mx-52' ref={targetRef}>
{/* 文章列表 */}
<div className='flex flex-wrap'>

4
components/CategoryGroup.js
View File

@@ -4,7 +4,7 @@ import Link from 'next/link'
import React from 'react'
const CategoryGroup = ({ currentCategory, categories }) => {
return <div>
return <div className='mt-3'>
<div id='category-list' className='dark:border-gray-600 dark:bg-gray-900'>
{Object.keys(categories).map(category => {
const selected = currentCategory === category
@@ -12,7 +12,7 @@ const CategoryGroup = ({ currentCategory, categories }) => {
<div className={(selected
? 'bg-gray-200 dark:bg-black text-black dark:text-white'
: 'dark:text-gray-400 text-gray-500') +
' duration-300 hover:text-blue-500 dark:hover:text-blue-400 hover:underline px-5 cursor-pointer py-2'}>
' duration-300 hover:text-blue-500 dark:hover:text-blue-400 hover:underline px-5 cursor-pointer pt-2 font-serif'}>
<FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={`${selected ? 'text-black dark:text-white' : 'text-gray-400'} mr-2 w-5`} />{category}({categories[category]})</div>
</Link>
})}

10
components/InfoCard.js
View File

@@ -5,18 +5,18 @@ import Router from 'next/router'
const InfoCard = () => {
return <>
<div className='flex text-center pb-3 pl-4 cursor-pointer' onClick={ () => { Router.push('/') }}>
<div className='hover:rotate-45 hover:scale-125 transform duration-200'>
<div className='flex flex-col align-middle justify-center cursor-pointer' onClick={ () => { Router.push('/') }}>
<div className='hover:rotate-45 hover:scale-125 transform duration-200 mx-auto'>
<Image
alt={BLOG.title}
width={60}
height={60}
width={120}
height={120}
loading='lazy'
src='/avatar.svg'
className='rounded-full border-black'
/>
</div>
<div className='text-3xl dark:text-white ml-5 py-3 hover:scale-105 transform duration-200'>{BLOG.title}</div>
<div className='text-3xl font-serif dark:text-white mx-auto py-4 hover:scale-105 transform duration-200'>{BLOG.title}</div>
</div>
</>
}

19
components/LatestPostsGroup.js
View File

@@ -26,26 +26,25 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
// 获取当前路径
const currentPath = useRouter().asPath
return <div>
return <>
{postsSortByDate.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>
<div className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' leading-5 py-1 px-5 flex'}>
<div className='mr-2 text-gray-500 text-xs leading-5'>
{formatDateFmt(post.lastEditedTime, 'MM/dd')}
</div>
<div
className={
(selected ? 'dark:text-white text-black ' : 'text-gray-500') +
' text-sm flex w-50 overflow-x-hidden whitespace-nowrap hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer hover:underline'
<div className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' my-1 px-5 flex justify-between'}>
<div className={ ' text-xs py-1 flex w-44 overflow-x-hidden whitespace-nowrap overflow-hidden pt-1 ' +
'hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer hover:underline' +
(selected ? 'dark:text-white text-black ' : 'text-gray-500 dark:text-gray-300')
}>
{post.title}
</div>
<div className='mr-2 text-gray-500 text-xs py-1'>
{formatDateFmt(post.lastEditedTime, 'yyyy/MM/dd')}
</div>
</div>
</Link>
)
})}
</div>
</>
}
export default LatestPostsGroup

4
components/MenuButtonGroup.js
View File

@@ -27,8 +27,8 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
if (link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return <Link key={link.id + link.icon} title={link.to} href={link.to} >
<a className={'py-2 px-5 hover:text-white hover:bg-blue-500 cursor-pointer duration-100 flex flex-nowrap align-middle ' +
(selected ? 'font-bold bg-gray-200 dark:bg-black dark:text-white text-black ' : '')} >
<a className={'py-2 px-5 text-lg hover:bg-blue-400 hover:text-white cursor-pointer duration-100 flex flex-nowrap align-middle ' +
(selected ? 'bg-blue-500 text-white ' : ' ')} >
<div className='my-auto w-5 justify-center flex'>
<FontAwesomeIcon icon={link.icon} />
</div>

4
components/SearchInput.js
View File

@@ -42,12 +42,12 @@ const SearchInput = ({ currentTag, currentSearch }) => {
ref={searchInputRef}
type='text'
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
className={'w-full pl-2 transition leading-10 border-gray-300 bg-white text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
className={'w-full pl-2 transition leading-10 border-gray-300 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
onKeyUp={handleKeyUp}
onChange={e => updateSearchKey(e.target.value)}
defaultValue={currentSearch}
/>
{(searchKey && searchKey.length && <FontAwesomeIcon icon={faTimes} className='text-gray-300 float-right m-4 cursor-pointer' onClick={cleanSearch} />)}
{(searchKey && searchKey.length && <FontAwesomeIcon icon={faTimes} className='text-gray-300 float-right m-3 cursor-pointer' onClick={cleanSearch} />)}
<div className='p-3 text-xl bg-gray-50 flex border-l dark:border-gray-700 dark:hover:bg-gray-800 dark:bg-gray-600 justify-center align-middle cursor-pointer'
onClick={() => { handleSearch(searchKey) }}>

31
components/SideBar.js
View File

@@ -27,21 +27,22 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
const { locale } = useGlobal()
return <aside id='sidebar' className='pt-5 bg-white dark:bg-gray-900 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
<InfoCard />
<hr className='dark:border-gray-700 mt-6 py-1' />
<div className={(!post ? 'sticky top-0' : '') + ' bg-white dark:bg-gray-900 pb-4'}>
{/* <hr className='dark:border-gray-700' /> */}
<MenuButtonGroup allowCollapse={true} />
<section className='p-5'>
<SearchInput currentTag={currentTag} currentSearch={currentSearch} />
</section>
<hr className='dark:border-gray-700' />
{/* <hr className='dark:border-gray-700' /> */}
<MenuButtonGroup allowCollapse={true} />
<section className='p-5'>
<SearchInput currentTag={currentTag} currentSearch={currentSearch} />
</section>
{/* 最新文章 */}
{posts && (
<section className='mt-4'>
<div className='text-sm py-2 px-5 flex flex-nowrap justify-between'>
<div className='font-bold text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-4 w-5' />{locale.COMMON.LATEST_POSTS}</div>
<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 w-5' />{locale.COMMON.LATEST_POSTS}</div>
</div>
<LatestPostsGroup posts={posts} />
</section>
@@ -50,8 +51,8 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{/* 分类 */}
{categories && (
<section className='mt-8'>
<div className='text-sm py-2 px-5 flex flex-nowrap justify-between'>
<div className='font-bold text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-4 w-5' />{locale.COMMON.CATEGORY}</div>
<div className='text-sm px-5 flex flex-nowrap justify-between font-light'>
<div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2 w-5' />{locale.COMMON.CATEGORY}</div>
<Link href='/category' passHref>
<div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
@@ -65,15 +66,15 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
{/* 标签云 */}
{tags && (
<section className='mt-8'>
<div className='text-sm py-2 px-5 flex flex-nowrap justify-between'>
<div className='text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-4 w-5'/>{locale.COMMON.TAGS}</div>
<div className='text-sm py-2 px-5 flex flex-nowrap justify-between font-light dark:text-gray-200'>
<div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-2 w-5'/>{locale.COMMON.TAGS}</div>
<Link href='/tag' passHref>
<div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
<div className='text-gray-400 hover:text-black dark:hover:text-white hover:underline cursor-pointer'>
{locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
</div>
</Link>
</div>
<div className='px-5'>
<div className='px-5 pt-2'>
<TagGroups tags={tags} currentTag={currentTag} />
</div>
</section>
@@ -81,7 +82,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
</div>
{post && (
<section id='left-toc' className='sticky pb-20 top-0 bg-white dark:bg-gray-800'>
<section id='left-toc' className='sticky pb-20 top-0 bg-white dark:bg-gray-900'>
<div className='border-b text-2xl bg-white font-bold text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
{locale.COMMON.TABLE_OF_CONTENTS}
</div>

6
components/Toc.js
View File

@@ -50,8 +50,8 @@ const Toc = ({ toc }) => {
setActiveSection(currentSectionId)
}, throttleMs))
return <div className='dark:bg-gray-900 bg-white'>
<nav className='text-gray-500 dark:text-gray-400 overflow-y-auto scroll-hidden p-2'>
return <>
<nav className=' dark:text-gray-400 dark:bg-gray-900 overflow-y-auto scroll-hidden p-2'>
{toc.map((tocItem) => {
const id = uuidToId(tocItem.id)
return (
@@ -74,7 +74,7 @@ const Toc = ({ toc }) => {
)
})}
</nav>
</div>
</>
}
export default Toc

2
components/TocDrawer.js
View File

@@ -29,7 +29,7 @@ const TocDrawer = ({ post, cRef }) => {
' dark:border-gray-800 bg-white dark:bg-gray-700 shadow-xl animate__animated animate__faster max-h-96 ' +
' w-60 duration-200 fixed right-4 top-16 rounded overflow-y-auto'}>
{post && <>
<div className='border-b text-xl font-bold text-black dark:text-white py-3 px-6'>
<div className='text-xl font-bold text-black bg-gray-50 dark:text-white py-3 px-6'>
{locale.COMMON.TABLE_OF_CONTENTS}
</div>
<Toc toc={post.toc}/>

2
components/TopNav.js
View File

@@ -29,7 +29,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
<div className='w-96'>
<Link href='/' passHref>
<div className='cursor-pointer'>
<h1 className='text-lg dark:text-gray-200 whitespace-nowrap overflow-x-hidden'>{BLOG.title }</h1>
<h1 className='text-lg font-serif dark:text-gray-200 whitespace-nowrap overflow-x-hidden'>{BLOG.title }</h1>
</div>
</Link>
</div>