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

Merge pull request #16 from tangly1024/theme-Next

Browse Source 
feature: 悬浮按钮调整；
This commit is contained in:
tangly1024
2022-01-12 17:45:57 +08:00
committed by GitHub
parent b4dfc9667b 111b71a13f
commit 6988de56b9
13 changed files with 39 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
blog.config.js
View File

@@ -56,13 +56,13 @@ const BLOG = {
telegram: 'https://t.me/tangly_1024'
},
comment: { // 评论插件，支持 gitalk, utterances, cusdis
provider: '', // 不需要则留空白
provider: 'gitalk', // 不需要则留空白
gitalkConfig: {
repo: 'NotionNext', // The repository of store comments
owner: 'tangly1024',
admin: ['tangly1024'],
clientID: 'be7864a16b693e256f8f',
clientSecret: 'dbd0f6d9ceea8940f6ed20936b415274b8fe66a2',
clientID: process.env.GITALK_ID || 'be7864a16b693e256f8f',
clientSecret: process.env.GITALK_SECRET || 'dbd0f6d9ceea8940f6ed20936b415274b8fe66a2',
distractionFreeMode: false
},
cusdisConfig: {

2
components/ArticleDetail.js
View File

@@ -172,7 +172,7 @@ export default function ArticleDetail ({ post, recommendPosts, prev, next }) {
</article>
{/* 评论互动 */}
<div className="lg:px-40 md:hover:shadow-2xl duration-200 shadow w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-800">
<div className="duration-200 shadow w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-800">
<Comment frontMatter={post} />
</div>
</div>)

1
components/Comment.js
View File

@@ -2,6 +2,7 @@ import BLOG from '@/blog.config'
import dynamic from 'next/dynamic'
import { useRouter } from 'next/router'
import { useGlobal } from '@/lib/global'
import 'gitalk/dist/gitalk.css'
const GitalkComponent = dynamic(
() => {

2
components/FloatDarkModeButton.js
View File

@@ -24,7 +24,7 @@ export default function FloatDarkModeButton () {
return (
<div
onClick={handleChangeDarkMode}
className={ ' text-black dark:border-gray-500 flex justify-center items-center w-8 h-8 dark:text-gray-200'
className={ ' text-black dark:border-gray-500 flex justify-center items-center dark:text-gray-200 py-2 px-3'
}
>
<FontAwesomeIcon

4
components/JumpToBottomButton.js
View File

@@ -45,11 +45,11 @@ const JumpToBottomButton = ({ showPercent = false }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [show])
return (<div className='flex space-x-1 transform hover:scale-105 text-xs duration-200 py-2 px-3' onClick={scrollToBottom} >
return (<div className='flex space-x-1 transform hover:scale-105 duration-200 py-2 px-3' onClick={scrollToBottom} >
<div className='dark:text-gray-200' >
<FontAwesomeIcon icon={faArrowDown} />
</div>
{showPercent && (<div className='text-xs dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
{showPercent && (<div className='dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
</div>)
}

2
components/JumpToTopButton.js
View File

@@ -17,7 +17,7 @@ const JumpToTopButton = ({ showPercent = true, percent }) => {
return <></>
}
const { locale } = useGlobal()
return (<div className='flex space-x-1 transform hover:scale-105 text-xs duration-200 py-2 px-3' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
return (<div className='flex space-x-1 items-center transform hover:scale-105 duration-200 py-2 px-3' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
<div className='dark:text-gray-200' title={locale.POST.TOP} >
<FontAwesomeIcon icon={faArrowUp} />
</div>

22
components/Progress.js
View File

@@ -9,11 +9,12 @@ const Progress = ({ targetRef, showPercent = true }) => {
const currentRef = targetRef?.current || targetRef
const [percent, changePercent] = useState(0)
const scrollListener = () => {
if (currentRef) {
const clientHeight = currentRef ? (currentRef.clientHeight) : 0
const target = currentRef || document.getElementById('container')
if (target) {
const clientHeight = target.clientHeight
const scrollY = window.pageYOffset
const fullHeight = clientHeight - window.outerHeight
let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
if (per > 100) per = 100
if (per < 0) per = 0
changePercent(per)
@@ -25,11 +26,18 @@ const Progress = ({ targetRef, showPercent = true }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [percent])
return (<div className='h-4 w-full shadow-2xl bg-gray-400 font-sans'>
<div className='h-4 bg-gray-600 duration-200' style={{ width: `${percent}%` }}>
{showPercent && <div className='text-right text-white text-xs'>{percent}%</div>}
return (
<div className="h-4 w-full shadow-2xl bg-gray-400 font-sans">
<div
className="h-4 bg-gray-600 duration-200"
style={{ width: `${percent}%` }}
>
{showPercent && (
<div className="text-right text-white text-xs">{percent}%</div>
)}
</div>
</div>)
</div>
)
}
export default Progress

2
components/SideAreaLeft.js
View File

@@ -44,7 +44,7 @@ const SideAreaLeft = ({ title, tags, currentTag, post, postCount, categories, cu
<Tabs>
{showToc && (
<div key={locale.COMMON.TABLE_OF_CONTENTS} className='dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800 duration-200'>
<Toc toc={post.toc} targetRef={targetRef} />
<Toc toc={post.toc}/>
</div>
)}

4
components/Toc.js
View File

@@ -10,7 +10,7 @@ import Progress from './Progress'
* @returns {JSX.Element}
* @constructor
*/
const Toc = ({ toc, targetRef }) => {
const Toc = ({ toc }) => {
// 无目录就直接返回空
if (!toc || toc.length < 1) {
return <></>
@@ -54,7 +54,7 @@ const Toc = ({ toc, targetRef }) => {
return <>
<div className='w-full'>
<Progress targetRef={targetRef}/>
<Progress/>
</div>
<nav className='font-sans overflow-y-auto scroll-hidden'>
{toc.map((tocItem) => {

4
components/TocDrawer.js
View File

@@ -9,7 +9,7 @@ import { useGlobal } from '@/lib/global'
* @returns {JSX.Element}
* @constructor
*/
const TocDrawer = ({ post, cRef, targetRef }) => {
const TocDrawer = ({ post, cRef }) => {
// 暴露给父组件 通过cRef.current.handleMenuClick 调用
useImperativeHandle(cRef, () => {
return {
@@ -33,7 +33,7 @@ const TocDrawer = ({ post, cRef, targetRef }) => {
{locale.COMMON.TABLE_OF_CONTENTS}
</div>
<div className='p-6 dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800'>
<Toc toc={post.toc} targetRef={targetRef}/>
<Toc toc={post.toc}/>
</div>
</>
}

2
components/TocDrawerButton.js
View File

@@ -16,7 +16,7 @@ const TocDrawerButton = (props) => {
return <></>
}
const { locale } = useGlobal()
return (<div onClick={props.onClick} className='px-3 py-2 cursor-pointer dark:text-gray-200 text-center transform hover:scale-150 duration-200 text-xs flex justify-center items-center' title={locale.POST.TOP} >
return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer dark:text-gray-200 text-center transform hover:scale-150 duration-200 flex justify-center items-center' title={locale.POST.TOP} >
<FontAwesomeIcon icon={faListOl}/>
</div>)
}

15
layouts/BaseLayout.js
View File

@@ -96,15 +96,16 @@ const BaseLayout = ({
<SideAreaRight targetRef={targetRef} post={post} slot={rightAreaSlot} postCount={postCount} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
</main>
<div className='right-4 lg:right-2 bottom-2 fixed justify-end z-20 rounded font-sans'>
<div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp glassmorphism justify-center duration-500 animate__faster flex space-x-2 items-center cursor-pointer '}>
<JumpToTopButton percent={percent}/>
<JumpToBottomButton />
<FloatDarkModeButton/>
{floatSlot}
{/* 右下角悬浮 */}
<div className='right-8 bottom-10 lg:right-2 lg:bottom-2 fixed justify-end z-20 font-sans'>
<div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp rounded-md glassmorphism justify-center duration-500 animate__faster flex space-x-2 items-center cursor-pointer '}>
<JumpToTopButton percent={percent}/>
<JumpToBottomButton />
<FloatDarkModeButton/>
{floatSlot}
</div>
</div>
</div>
<Footer title={meta.title}/>
</>
)

2
pages/archive/index.js
View File

@@ -9,7 +9,7 @@ import React, { useEffect } from 'react'
export async function getStaticProps () {
const from = 'index'
const { allPosts, categories, tags, postCount } =
await getGlobalNotionData({ from, includePage: true })
await getGlobalNotionData({ from })
return {
props: {