d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +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>

6
layouts/BaseLayout.js
View File

@@ -76,8 +76,10 @@ const BaseLayout = ({
<div className='hidden lg:block z-10'>
<SideBar post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory} />
</div>
<div className='flex flex-grow' ref={targetRef}>
{children}
<div className='flex flex-grow min-h-screen' ref={targetRef}>
<div className='flex-grow bg-gray-50 dark:bg-black shadow-inner'>
{children}
</div>
</div>
</div>

2
pages/archive/index.js
View File

@@ -57,7 +57,7 @@ const Index = ({ allPosts, tags, categories }) => {
return (
<BaseLayout meta={meta} tags={tags} categories={categories}>
<div className='flex-grow bg-gray-200 dark:bg-black shadow-inner pt-16 '>
<div className=' pt-16 '>
<StickyBar>
<div className='py-2.5 text-lg lg:mx-14 dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-4'/>{locale.NAV.ARCHIVE}</div>
</StickyBar>

10
pages/article/[slug].js
View File

@@ -51,20 +51,20 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
return <BaseLayout meta={meta} tags={tags} post={post} totalPosts={allPosts} categories={categories}>
<Progress targetRef={targetRef} />
<div id='article-wrapper' ref={targetRef} className='flex-grow dark:bg-black bg-gray-200'>
<div id='article-wrapper' ref={targetRef} className='flex-grow'>
<div className='max-w-5xl mx-auto mt-16 xl:mt-32 w-screen md:w-full '>
<div className='max-w-5xl mx-auto mt-16 xl:mt-32 w-screen md:w-full hover:shadow-2xl'>
{post.type && !post.type.includes('Page') && (<>
<header className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0'>
<header className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 rounded-t-2xl overflow-hidden'>
<Image src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} loading='eager' objectFit='cover' layout='fill' alt={post.title} />
</header>
</>)}
<article itemScope itemType="https://schema.org/Movie" className='animate__fadeIn animate__animated subpixel-antialiased lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
{/* 文章Title */}
<h2 className='font-bold text-3xl pt-5 text-black dark:text-white italic'> {post.title}</h2>
<h2 className='font-bold text-3xl pt-5 text-black dark:text-white font-serif'> {post.title}</h2>
<hr className='mt-4' />
<section className='flex-nowrap flex mt-1 dark:text-white'>
<section className='flex-nowrap flex mt-1 dark:text-white font-light'>
<Link href={`/category/${post.category}`} passHref>
<div className='cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white'>
<FontAwesomeIcon icon={faFolderOpen} className='mr-1' />{post.category}

2
pages/category/[category].js
View File

@@ -14,7 +14,7 @@ export default function Category ({ tags, allPosts, filteredPosts, category, cat
type: 'website'
}
return <BaseLayout meta={meta} tags={tags} currentCategory={category} totalPosts={allPosts} categories={categories}>
<div className='flex-grow bg-gray-200 dark:bg-black shadow-inner pt-16'>
<div className=' pt-16'>
<StickyBar>
<CategoryList currentCategory={category} categories={categories} />
</StickyBar>

2
pages/category/index.js
View File

@@ -16,7 +16,7 @@ export default function Category ({ tags, allPosts, categories }) {
type: 'website'
}
return <BaseLayout meta={meta} totalPosts={allPosts} tags={tags}>
<div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-2 lg:px-14'>
<div className=' p-2 lg:px-14'>
<div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
<div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}:</div>
<div id='category-list' className='duration-200 flex flex-wrap'>

2
pages/index.js
View File

@@ -30,7 +30,7 @@ export async function getStaticProps () {
const Index = ({ allPosts, tags, meta, categories }) => {
return (
<BaseLayout meta={meta} tags={tags} totalPosts={allPosts} categories={categories}>
<div className='flex-grow bg-gray-200 dark:bg-black shadow-inner'>
<div className=''>
<BlogPostListScroll posts={allPosts} tags={tags} />
</div>
</BaseLayout>

2
pages/search.js
View File

@@ -46,7 +46,7 @@ const Search = ({ allPosts, tags, categories }) => {
}
return (
<BaseLayout meta={meta} tags={tags} totalPosts={allPosts} currentSearch={searchKey} categories={categories}>
<div className='flex-grow bg-gray-200 dark:bg-black shadow-inner'>
<div className=''>
<StickyBar>
<div className='p-4 dark:text-gray-200'><FontAwesomeIcon icon={faSearch} className='mr-1'/> 搜索词： {searchKey}</div>
</StickyBar>

2
pages/tag/[tag].js
View File

@@ -13,7 +13,7 @@ export default function Tag ({ tags, allPosts, filteredPosts, currentTag, catego
type: 'website'
}
return <BaseLayout meta={meta} tags={tags} currentTag={currentTag} categories={categories} totalPosts={allPosts}>
<div className='flex-grow bg-gray-200 dark:bg-black shadow-inner pt-16'>
<div className=' pt-16'>
<StickyBar>
<TagList tags={tags} currentTag={currentTag}/>
</StickyBar>

2
pages/tag/index.js
View File

@@ -16,7 +16,7 @@ export default function Tag ({ tags, allPosts, categories }) {
type: 'website'
}
return <BaseLayout meta={meta} categories={categories} totalPosts={allPosts}>
<div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-2 lg:px-14'>
<div className=' p-2 lg:px-14'>
<div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
<div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faTags} className='mr-4'/>{locale.COMMON.TAGS}:</div>
<div id='tags-list' className='duration-200 flex flex-wrap'>

20
tailwind.config.js
View File

@@ -1,12 +1,4 @@
const BLOG = require('./blog.config')
const { fontFamily } = require('tailwindcss/defaultTheme')
const CJK = require('./lib/cjk')
const fontSansCJK = !CJK()
? []
: [`"Noto Sans CJK ${CJK()}"`, `"Noto Sans ${CJK()}"`]
const fontSerifCJK = !CJK()
? []
: [`"Noto Serif CJK ${CJK()}"`, `"Noto Serif ${CJK()}"`]
module.exports = {
purge: ['./pages/**/*.js', './components/**/*.js', './layouts/**/*.js'],
@@ -20,18 +12,6 @@ module.exports = {
night: {
DEFAULT: BLOG.darkBackground || '#111827'
}
},
fontFamily: {
sans: ['"IBM Plex Sans"', ...fontSansCJK, ...fontFamily.sans],
serif: ['"Source Serif"', ...fontSerifCJK, ...fontFamily.serif],
noEmoji: [
'"IBM Plex Sans"',
'ui-sans-serif',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'sans-serif'
]
}
}
},