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

feature:

Browse Source 
样式调整
This commit is contained in:
tangly1024
2021-12-14 17:48:00 +08:00
parent f1724dbe1a
commit 3796b0f64a
15 changed files with 71 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
blog.config.js
View File

@@ -9,7 +9,7 @@ const BLOG = {
notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
defaultImgCover: 'https://avatars.githubusercontent.com/u/15920488', // default image cover
appearance: 'auto', // ['light', 'dark', 'auto'],
font: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
font: 'font-sans tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
lightBackground: '#ffffff', // use hex value, don't forget '#' e.g #fffefc
darkBackground: '#111827', // use hex value, don't forget '#'
path: '', // leave this empty unless you want to deploy in a folder

2
components/BlogPostListScroll.js
View File

@@ -64,7 +64,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
<div onClick={() => {
handleGetMore()
}}
className='w-full my-4 py-4 bg-gray-300 text-center cursor-pointer dark:bg-gray-700 dark:text-gray-200'
className='w-full my-4 py-4 bg-gray-200 text-center cursor-pointer dark:bg-gray-700 dark:text-gray-200'
> {hasMore ? '继续加载' : '加载完了😰'} </div>
</div>
</div>

2
components/DarkModeButton.js
View File

@@ -11,7 +11,7 @@ const DarkModeButton = () => {
saveTheme(newTheme)
changeTheme(newTheme)
}
return <div className='z-10 duration-200 text-xl cursor-pointer'>
return <div className='z-10 duration-200 text-lg cursor-pointer'>
<FontAwesomeIcon icon={userTheme === 'dark' ? faSun : faMoon} id='darkModeButton' className='mx-2 my-2 hover:scale-125 transform duration-200'
onClick={handleChangeDarkMode} />
</div>

10
components/JumpToTopButton.js
View File

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
import { useGlobal } from '@/lib/global'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowUp } from '@fortawesome/free-solid-svg-icons'
let windowTop = 0
/**
* 跳转到网页顶部
@@ -22,7 +23,8 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
const fullHeight = clientHeight - window.outerHeight
let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
if (per > 100) per = 100
const shouldShow = scrollY > 100 && per > 0
const shouldShow = scrollY > 100 && per > 0 && scrollY < windowTop
windowTop = scrollY
if (shouldShow !== show) {
switchShow(shouldShow)
@@ -34,11 +36,11 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [show])
return (<div id='jump-to-top' className='right-1 fixed flex bottom-36 duration-500 z-20'>
return (<div id='jump-to-top' className='right-5 fixed flex bottom-36 duration-500 z-20'>
<div onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
className={(show ? 'animate__fadeInRight' : 'animate__fadeOutRight') + ' shadow-card bg-white dark:bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-2xl'}>
className={(show ? '' : 'hidden') + ' animate__fadeInRight rounded-full glassmorphism p-2 cursor-pointer animate__animated animate__faster shadow-card'}>
<div className='text-center'>
<div className='w-10 text-xl dark:text-gray-100 transform hover:scale-125 duration-200' title={locale.POST.TOP} >
<div className='w-10 dark:text-gray-100 transform hover:scale-125 duration-200' title={locale.POST.TOP} >
<FontAwesomeIcon icon={faArrowUp} />
</div>
{showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}

7
components/Progress.js
View File

@@ -1,5 +1,4 @@
import React, { useCallback, useEffect, useState } from 'react'
import throttle from 'lodash.throttle'
import React, { useEffect, useState } from 'react'
/**
* 顶部页面阅读进度条
@@ -24,8 +23,8 @@ const Progress = ({ targetRef }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [percent])
return (<div className='h-1.5 fixed left-0 top-0 w-full shadow-2xl z-40'>
<div className='h-1 bg-blue-500 fixed left-0 top-0 duration-200 rounded' style={{ width: `${percent}%` }}/>
return (<div className='h-1 fixed left-0 top-0 w-full shadow-2xl z-40 bg-blue-200'>
<div className='h-1 bg-blue-600 fixed left-0 top-0 duration-200 rounded' style={{ width: `${percent}%` }}/>
</div>)
}

2
components/StickyBar.js
View File

@@ -8,7 +8,7 @@
const StickyBar = ({ children }) => {
if (!children) return <></>
return (
<div id='sticky-bar' className='fixed lg:top-0 top-14 duration-500 z-10 w-full border-b dark:border-gray-600 shadow-xl'>
<div id='sticky-bar' className='fixed lg:top-0 top-14 duration-500 z-10 w-full border-b dark:border-gray-600 shadow-inner'>
<div className='bg-white dark:bg-gray-800 flex overflow-x-auto'>
<div className='z-30 sticky left-0 flex'>
<div className='pr-2 bg-white dark:bg-gray-800'/>

2
components/TocDrawer.js
View File

@@ -10,7 +10,7 @@ import { useGlobal } from '@/lib/global'
* @constructor
*/
const TocDrawer = ({ post, cRef }) => {
// 暴露给父组件 通过cRef.current.handleMenuClick 调用
// 暴露给父组件 通过cRef.current.handleMenuClick 调用
useImperativeHandle(cRef, () => {
return {
handleSwitchVisible: () => switchVisible()

26
components/TocDrawerButton.js
View File

@@ -1,8 +1,9 @@
import React from 'react'
import React, { useEffect, useState } from 'react'
import { useGlobal } from '@/lib/global'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faListOl } from '@fortawesome/free-solid-svg-icons'
let windowTop = 0
/**
* 点击召唤目录抽屉
* 当屏幕下滑500像素后会出现该控件
@@ -12,13 +13,28 @@ import { faListOl } from '@fortawesome/free-solid-svg-icons'
*/
const TocDrawerButton = (props) => {
const { locale } = useGlobal()
const [show, switchShow] = useState(false)
const scrollListener = () => {
const scrollY = window.pageYOffset
const shouldShow = scrollY > 100 && scrollY < windowTop
console.log('目录', shouldShow, scrollY, windowTop)
windowTop = scrollY
if (shouldShow !== show) {
switchShow(shouldShow)
}
}
useEffect(() => {
document.addEventListener('scroll', scrollListener)
return () => document.removeEventListener('scroll', scrollListener)
})
return (
<div id='toc-drawer-button' className='right-1 fixed flex bottom-52 duration-500 z-40 hidden' onClick={props.onClick}>
<div className='transform hover:scale-105 duration-200 '>
<div className='animate__fadeInRight animate__animated bg-white dark:bg-gray-700 px-1 py-2.5 cursor-pointer shadow-card'>
<div id='toc-drawer-button' className='right-5 fixed bottom-56 duration-500 z-40' onClick={props.onClick}>
<div className='transform hover:scale-105 duration-200'>
<div className={(show ? 'animate__fadeInRight' : 'hidden') + ' px-2 py-4 animate__animated glassmorphism rounded-full cursor-pointer shadow-card' }>
<div className='text-center dark:text-gray-100'>
<div className='w-10 text-xl' title={locale.COMMON.TABLE_OF_CONTENTS} ><FontAwesomeIcon icon={faListOl} /> </div>
<div className='w-10 text-md' title={locale.COMMON.TABLE_OF_CONTENTS} ><FontAwesomeIcon icon={faListOl} /> </div>
</div>
</div>
</div>

4
components/TopNav.js
View File

@@ -14,7 +14,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
<SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>
{/* 导航栏 */}
<div id='sticky-nav' className='fixed w-full top-0 z-20 transform duration-500 bg-white dark:bg-gray-700 opacity-90'>
<div id='sticky-nav' className='fixed w-full top-0 z-20 transform duration-500 glassmorphism'>
<div className='text-sm m-auto w-full flex flex-row justify-between items-center px-4 py-2 shadow-xl '>
{/* 左侧LOGO */}
<div className='flex ml-12'>
@@ -31,7 +31,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
</div>
{/* 右侧功能 */}
<div className='flex flex-nowrap space-x-1 ml-2 dark:text-gray-200'>
<div className='flex flex-nowrap space-x-1 ml-2 pt-1 dark:text-gray-200'>
<DarkModeButton />
</div>
</div>

21
layouts/BaseLayout.js
View File

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types'
import React, { useCallback, useEffect, useRef } from 'react'
import CommonHead from '@/components/CommonHead'
import throttle from 'lodash.throttle'
import BLOG from '@/blog.config'
import TopNav from '@/components/TopNav'
import Footer from '@/components/Footer'
import SideBar from '@/components/SideBar'
@@ -74,13 +73,13 @@ const BaseLayout = ({
{/* Middle Wrapper */}
<div className='flex dark:bg-black'>
<div className='hidden lg:block z-10'>
<div className='hidden shadow 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 min-h-screen' ref={targetRef}>
{onLoading
? <LoadingCover/>
: <div className='flex-grow bg-gray-50 dark:bg-black shadow-inner'>
: <div className='flex-grow bg-gray-100 dark:bg-black shadow-inner'>
{children}
</div>
}
@@ -90,7 +89,7 @@ const BaseLayout = ({
<Footer />
<JumpToTopButton targetRef={targetRef} showPercent={true} />
<div className='hidden lg:block fixed right-1 bottom-52 py-1 px-1.5
<div className='hidden lg:block fixed right-5 bottom-52 py-2 px-2.5 rounded-full
bg-white text-black shadow-card dark:border-gray-500 dark:bg-gray-700 dark:text-white'>
<DarkModeButton />
</div>
@@ -112,11 +111,6 @@ const handleScrollDown = () => {
const tocDrawerButton = document.querySelector('#toc-drawer-button')
tocDrawerButton && tocDrawerButton.classList.replace('hidden', 'block')
// const sidebar = document.querySelector('#sidebar')
// sidebar && sidebar.classList.replace('top-20', 'top-2')
// const rightToc = document.querySelector('#right-toc')
// rightToc && rightToc.classList.replace('top-16', 'top-0')
}
}
@@ -131,15 +125,6 @@ const handleScrollUp = () => {
const stickyBar = document.querySelector('#sticky-bar')
stickyBar && stickyBar.classList.replace('top-0', 'top-14')
// const tocDrawerButton = document.querySelector('#toc-drawer-button')
// tocDrawerButton && tocDrawerButton.classList.replace('block', 'hidden')
// const sidebar = document.querySelector('#sidebar')
// sidebar && sidebar.classList.replace('top-2', 'top-20')
// const rightToc = document.querySelector('#right-toc')
// rightToc && rightToc.classList.replace('top-0', 'top-16')
}
}

13
package.json
View File

@@ -33,17 +33,16 @@
"localStorage": "^1.0.4",
"lodash.throttle": "^4.1.1",
"memory-cache": "^0.2.0",
"next": "10.2.0",
"notion-client": "4.10.0",
"notion-utils": "4.10.0",
"preact": "^10.5.13",
"qrcode.react": "^1.0.1",
"next": "^12.0.5",
"notion-client": "^4.10.0",
"notion-utils": "^4.10.0",
"react-notion-x": "^4.11.0",
"preact": "^10.5.15",
"react": "17.0.2",
"react-cookies": "^0.1.1",
"react-cusdis": "^2.0.1",
"react-dom": "17.0.2",
"react-notion-x": "4.6.5",
"styled-components": "^5.3.3",
"qrcode.react": "^1.0.1",
"use-ackee": "^3.0.0"
},
"devDependencies": {

4
pages/_app.js
View File

@@ -1,8 +1,8 @@
import '@/styles/notion.css'
import 'rc-dropdown/assets/index.css'
import 'katex/dist/katex.min.css'
import '@/styles/globals.css'
import 'animate.css'
import '@/styles/notion.css'
import '@/styles/globals.css'
import BLOG from 'blog.config'
import dynamic from 'next/dynamic'
import { GlobalContextProvider } from '@/lib/global'

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

@@ -56,14 +56,14 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
<div className='max-w-5xl mx-auto mt-16 xl:mt-32 w-screen md:w-full'>
<article itemScope itemType="https://schema.org/Movie" className='duration-300 hover:shadow-2xl pt-10 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'>
<article itemScope itemType="https://schema.org/Movie" className='duration-300 hover:shadow-2xl pt-10 animate__fadeIn animate__animated subpixel-antialiased lg:pt-32 lg:px-52 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
{post.type && !post.type.includes('Page') && (<>
<header className='w-full h-60 lg:h-96 transform duration-200 md:flex-shrink-0 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>
</>)}
{/* 文章Title */}
<h2 className='font-bold text-3xl text-black dark:text-white font-serif pt-10'> {post.title}</h2>
<h2 className='font-bold text-2xl text-black dark:text-white font-serif pt-10'> {post.title}</h2>
<hr className='mt-4' />
<section className='flex-nowrap flex mt-1 dark:text-white font-light'>
<Link href={`/category/${post.category}`} passHref>
@@ -85,7 +85,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
</div>
</section>
<section className='px-1 py-2 my-1 text-sm font-light italic bg-gray-50 text-gray-600 dark:bg-gray-700 dark:text-gray-400'>
<section className='px-1 py-2 my-1 text-sm font-light bg-gray-50 text-gray-600 dark:bg-gray-700 dark:text-gray-400'>
{post.summary}
</section>

20
styles/globals.css
View File

@@ -98,7 +98,7 @@ nav {
}
.shadow-card{
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.gt-meta{
@@ -148,3 +148,21 @@ nav {
background: -moz-linear-gradient(left, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* Firefox 3.6 - 15 */
background: linear-gradient(to left, rgba(31, 41, 55,0), rgb(31, 41, 55)); /* 标准的语法（必须放在最后） */
}
.glassmorphism{
background: rgba(255, 255, 255, .7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.dark .glassmorphism{
background: rgba(0, 0, 0, .7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.glassmorphism{
background: rgba(255, 255, 255, .7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}

2
styles/notion.css
View File

@@ -1580,7 +1580,7 @@ svg.notion-page-icon {
/* NOTION CSS OVERRIDE */
.notion {
@apply text-gray-900 dark:text-gray-300;
@apply text-gray-600 dark:text-gray-300;
overflow-wrap: break-word;
}
.notion,