d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-13 23:16:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

降级notion-client兼容medium-zoom,标签颜色,封装抽屉，调整抽屉目录，封装搜索框，封装菜单

Browse Source
This commit is contained in:
tangly1024
2021-10-12 16:19:56 +08:00
parent f0c6fff698
commit 5493104d92
16 changed files with 197 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
components/Drawer.js Normal file
View File

@@ -0,0 +1,61 @@
import Link from 'next/link'
import BLOG from '@/blog.config'
import SearchInput from '@/components/SearchInput'
import MenuButtonGroup from '@/components/MenuButtonGroup'
import TocBar from '@/components/TocBar'
import React, { useState } from 'react'
/**
* 抽屉面板，可以从侧面拉出
* @returns {JSX.Element}
* @constructor
*/
const Drawer = ({ post, currentTag }) => {
const [showDrawer, switchShowDrawer] = useState(false)
// 点击按钮更改侧边抽屉状态
const handleMenuClick = () => {
switchShowDrawer(!showDrawer)
}
return <div>
{/* 触发抽屉按钮 */}
<div onClick={handleMenuClick}
className='fixed top-1 left-0 z-30 py-1 px-5 duration-200 bg-white dark:bg-gray-600 text-gray-600 text-2xl cursor-pointer dark:text-gray-300'>
<i className='fa hover:scale-125 transform duration-200 fa-bars '
/>
</div>
<div className='fixed top-0 left-0 z-30 h-full'>
<div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' overflow-y-auto duration-200 w-72 h-full bg-white dark:bg-gray-800 border-r dark:border-gray-600'}>
{/* LOGO */}
<div className='sticky top-0 z-20 bg-white w-72 flex space-x-4 px-5 py-1 dark:border-gray-500 border-b dark:bg-gray-600 '>
<div className='z-10 p-1 duration-200 mr-2 bg-white dark:bg-gray-600 text-gray-600 text-xl cursor-pointer dark:text-gray-300'>
<i className='fa hover:scale-125 transform duration-200 fa-bars ' onClick={handleMenuClick}/>
</div>
<Link href='/'>
<a
className='flex text-lg justify-center font-bold font-semibold hover:bg-gray-800 hover:text-white px-2 py-1 duration-200
dark:text-gray-300
'>{BLOG.title}</a>
</Link>
</div>
</div>
{/* 侧边菜单 */}
<div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' w-72 duration-200 h-full fixed left-0 top-12 overflow-y-auto'}>
<div className='z-20'>
<div className='px-5 my-3 block md:hidden'>
<SearchInput currentTag={currentTag}/>
</div>
{/* 菜单 */}
<MenuButtonGroup allowCollapse={false}/>
{post && (
<div className='sticky top-24'>
<TocBar toc={post.toc} />
</div>
)}
</div>
</div>
</div>
{/* 背景蒙版 */}
<div className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-20 w-full h-full bg-black bg-opacity-40' } onClick={handleMenuClick}/>
</div>
}
export default Drawer

6
components/Footer.js
View File

@@ -14,13 +14,13 @@ const Footer = ({ fullWidth = true }) => {
<br />
<span id='busuanzi_container_site_pv' className=''>
<a id='busuanzi_container_site_pv' target='_blank' className='fa fa-eye' rel='noreferrer'
href='https://www.cnzz.com/stat/website.php?web_id=1279970751'> <span
id='busuanzi_value_site_pv' className='px-1'>99999</span> pv</a>
href='https://www.cnzz.com/stat/website.php?web_id=1279970751'><span
id='busuanzi_value_site_pv' className='px-1'>99999</span>pv</a>
</span>
<span id='busuanzi_container_site_uv' className='pl-2'>
<a className='fa fa-user' rel='noreferrer' target='_blank'
href='http://tongji.baidu.com/web/10000363165/overview/index?siteId=16809429'>
<span id='busuanzi_value_site_uv' className='px-1'>99999</span> uv</a>
<span id='busuanzi_value_site_uv' className='px-1'>99999</span>uv</a>
</span>
</footer>
)

41
components/MenuButtonGroup.js Normal file
View File

@@ -0,0 +1,41 @@
import React from 'react'
import { useLocale } from '@/lib/locale'
import Link from 'next/link'
const MenuButtonGroup = ({ allowCollapse = false }) => {
const locale = useLocale()
const links = [
{ id: 0, icon: 'fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true },
{ id: 1, icon: 'fa-info-circle', name: locale.NAV.ABOUT, to: '/article/about', show: true },
{ id: 2, icon: 'fa-rss-square', name: locale.NAV.RSS, to: '/feed', show: true },
{ id: 3, icon: 'fa-compass', name: '发现', to: 'https://search.tangly1024.com/', show: true },
{ id: 4, icon: 'fa-envelope', name: locale.NAV.MAIL, to: 'mailto:tlyong1992@hotmail.com', show: true },
{ id: 5, icon: 'fa-weibo', name: '微博', to: 'https://weibo.com/tangly1024', show: true },
{ id: 6, icon: 'fa-map-marker', name: 'Fuzhou', to: '#', show: true },
{ id: 7, icon: 'fa-github', name: 'Github', to: 'https://github.com/tangly1024', show: true },
{ id: 8, icon: 'fa-twitter', name: 'Twitter', to: 'https://twitter.com/troy1024_1', show: true },
{ id: 9, icon: 'fa-telegram', name: 'Telegram', to: 'https://t.me/tangly_1024', show: true }
]
return <nav className='max-w-sm'>
<ul className='leading-8 text-gray-700 dark:text-gray-400'>
{links.map(
link =>
link.show && (
<Link href={link.to}>
<li
key={link.id}
title={link.to}
className='py-3 px-5 hover:bg-gray-100 cursor-pointer dark:hover:bg-black duration-100 flex flex-nowrap align-middle'
>
<div className='my-auto w-5 text-2xl justify-center flex'>
<i className={'fa ' + link.icon} />
</div>
<div className={(allowCollapse ? 'hidden xl:block' : '') + ' ml-4 w-32'}>{link.name}</div>
</li>
</Link>
)
)}
</ul>
</nav>
}
export default MenuButtonGroup

42
components/SearchInput.js Normal file
View File

@@ -0,0 +1,42 @@
import React, { useState } from 'react'
import { useLocale } from '@/lib/locale'
import Router, { useRouter } from 'next/router'
const SearchInput = ({ currentTag }) => {
const locale = useLocale()
const router = useRouter()
const [searchValue, setSearchValue] = useState('')
const handleSearch = () => {
if (searchValue && searchValue !== '') {
Router.push({ pathname: '/', query: { s: searchValue } }).then(r => {
console.log(r)
})
} else {
Router.push({ pathname: '/' }).then(r => {
console.log(r)
})
}
}
const handleKeyUp = (e) => {
if (e.keyCode === 13) {
handleSearch()
}
}
return <div className='flex border dark:border-gray-600 w-full'>
<input
type='text'
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
className={'pl-2 w-full transition duration-200 leading-10 border-gray-300 bg-white text-black dark:bg-gray-800 dark:text-white'}
onKeyUp={handleKeyUp}
onChange={e => setSearchValue(e.target.value)}
defaultValue={router.query.s ?? ''}
/>
<div className='py-3 px-5 bg-gray-50 flex border-l dark:border-gray-700 dark:bg-gray-500 justify-center align-middle cursor-pointer'
onClick={handleSearch}>
<i className='fa fa-search text-black absolute cursor-pointer' />
</div>
</div>
}
export default SearchInput

22
components/SideBar.js Normal file
View File

@@ -0,0 +1,22 @@
import React from 'react'
import TocBar from '@/components/TocBar'
import MenuButtonGroup from '@/components/MenuButtonGroup'
const SideBar = ({ tags, currentTag, post }) => {
return <aside className='z-10 bg-white dark:border-gray-500 border-gray-200 mt-12 hidden lg:block'>
<div className='dark:bg-gray-800 border-r dark:border-gray-700 h-full scroll-hidden left-0 duration-500 ease-in-out min-h-screen'>
<div className='hidden md:block sticky top-12'>
<div className={post ? 'hidden xl:block' : 'block'}>
<MenuButtonGroup allowCollapse={true}/>
</div>
</div>
{post && (
<div className='sticky top-12'>
<TocBar toc={post.toc} />
</div>
)}
</div>
</aside>
}
export default SideBar

66
components/SideBarEmbed.js
View File

@@ -1,66 +0,0 @@
import React from 'react'
import Footer from '@/components/Footer'
import TocBar from '@/components/TocBar'
import SocialButton from '@/components/SocialButton'
const SideBarEmbed = ({ tags, currentTag, post }) => {
return <aside className='z-30 bg-white dark:border-gray-500 border-gray-200'>
<div
className='dark:bg-gray-800 scroll-hidden left-0 duration-500 ease-in-out '>
{/* wrapper */}
<div className='sticky top-12'>
{/* 菜单 */}
<nav>
<ul className='leading-8 text-gray-700 dark:text-gray-400'>
<li className='hover:bg-gray-100 dark:hover:bg-black duration-100 p-2'>
<a className='fa fa-home w-full px-4' href='/' id='home'>
<span className='ml-2'>主页</span>
</a>
</li>
<li className='hover:bg-gray-100 dark:hover:bg-black duration-100 p-2'>
<a className='fa fa-info-circle w-full px-4' href='/article/about' id='about'>
<span className='ml-2'>关于本站</span>
</a>
</li>
<li className='hover:bg-gray-100 dark:hover:bg-black duration-100 p-2'>
<a className='fa fa-rss-square w-full px-4' href='/feed' target='_blank' id='feed'>
<span className='ml-2'>RSS订阅</span>
</a>
</li>
</ul>
</nav>
<hr className='dark:border-gray-600'/>
{/* 联系 */}
<section className='mt-6 mb-6 '>
<strong className='text-gray-600 dark:text-gray-400 px-6'>联系我</strong>
<div>
<i className='fa fa-map-marker text-sm dark:text-gray-300 px-6 mt-3' >&nbsp;Fuzhou, China</i>
</div>
<div>
<SocialButton />
</div>
</section>
{/* 站点信息 */}
<section className='my-3 xl:block'>
<hr className='dark:border-gray-600'/>
</section>
</div>
{post && (
<div className='sticky top-12'>
<TocBar toc={post.toc} />
</div>
)}
</div>
</aside>
}
export default SideBarEmbed

66
components/SideBarResponsive.js
View File

@@ -1,66 +0,0 @@
import React from 'react'
import Footer from '@/components/Footer'
import TocBar from '@/components/TocBar'
import SocialButton from '@/components/SocialButton'
const SideBarResponsive = ({ tags, currentTag, post }) => {
return <aside className='z-10 bg-white dark:border-gray-500 border-gray-200 mt-12 hidden lg:block'>
<div
className='dark:bg-gray-800 border-r dark:border-gray-700 h-full scroll-hidden left-0 duration-500 ease-in-out min-h-screen'>
{/* wrapper */}
<div className='hidden md:block sticky top-12'>
{/* 菜单 */}
<nav>
<ul className='leading-8 text-gray-700 dark:text-gray-400'>
<li className='hover:bg-gray-100 dark:hover:bg-black duration-100 p-2'>
<a className='fa fa-home w-full px-4' href='/' id='home'>
<span className='ml-2 hidden xl:inline-block'>主页</span>
</a>
</li>
<li className='hover:bg-gray-100 dark:hover:bg-black duration-100 p-2'>
<a className='fa fa-info-circle w-full px-4' href='/article/about' id='about'>
<span className='ml-2 hidden xl:inline-block'>关于本站</span>
</a>
</li>
<li className='hover:bg-gray-100 dark:hover:bg-black duration-100 p-2'>
<a className='fa fa-rss-square w-full px-4' href='/feed' target='_blank' id='feed'>
<span className='ml-2 hidden xl:inline-block'>RSS订阅</span>
</a>
</li>
</ul>
</nav>
<hr className='dark:border-gray-600'/>
{/* 联系 */}
<section className='mt-6 mb-6 hidden xl:inline-block'>
<strong className='text-gray-600 dark:text-gray-400 px-6'>联系我</strong>
<div className='text-sm text-gray-600'>
<i className='fa fa-map-marker dark:text-gray-300 px-6 my-2' >&nbsp;Fuzhou, China</i>
</div>
<div>
<SocialButton />
</div>
</section>
{/* 站点信息 */}
<section className='my-3 hidden xl:block'>
<hr className='dark:border-gray-600'/>
</section>
</div>
{post && (
<div className='sticky top-12'>
<TocBar toc={post.toc} />
</div>
)}
</div>
</aside>
}
export default SideBarResponsive

1
components/SocialButton.js
View File

@@ -23,7 +23,6 @@ const SocialButton = () => {
href={'https://weibo.com/tangly1024'} >
<div className='fa fa-weibo transform hover:scale-125 duration-150'/>
</a>
</div>
</div>
}

2
components/TagItem.js
View File

@@ -3,7 +3,7 @@ import Link from 'next/link'
const TagItem = ({ tag }) => (
<Link href={`/tag/${encodeURIComponent(tag)}`}>
<a>
<p className="hover:shadow hover:scale-105 hover:bg-gray-500 bg-gray-200 hover:text-white duration-200 mr-1 p-2 leading-none text-sm
<p className="hover:shadow rounded-lg dark:border-gray-500 border hover:scale-105 hover:bg-gray-500 bg-gray-100 hover:text-white duration-200 mr-1 p-2 leading-none text-sm
dark:bg-gray-500 dark:text-gray-100 dark:hover:bg-black">
{tag}
</p>

2
components/Tags.js
View File

@@ -11,7 +11,7 @@ const Tags = ({ tags, currentTag }) => {
if (!tags) return <></>
return (<div className='bg-white dark:bg-gray-800 flex overflow-x-auto'>
<ul id='tag-container' className='px-10 flex py-1 space-x-3'>
<li className='w-10 py-2'>标签:</li>
<li className='w-10 py-2 dark:text-gray-200'>标签:</li>
{Object.keys(tags).map(key => {
const selected = key === currentTag
return (

2
components/TocBar.js
View File

@@ -50,7 +50,7 @@ const TocBar = ({ toc }) => {
setActiveSection(currentSectionId)
}, throttleMs)
return <div className='bg-white dark:bg-gray-800 pb-10 hidden md:block min-h-screen'>
return <div className='bg-white dark:bg-gray-800 pb-10 min-h-screen'>
<div className='border-t dark:border-gray-600 border-b text-2xl bg-gray-100 font-bold text-black dark:bg-black dark:text-white py-6 px-6'>
文章目录
</div>

78
components/TopNav.js
View File

@@ -1,96 +1,40 @@
import Link from 'next/link'
import BLOG from '@/blog.config'
import React, { useState } from 'react'
import { useLocale } from '@/lib/locale'
import Router, { useRouter } from 'next/router'
import React from 'react'
import DarkModeButton from '@/components/DarkModeButton'
import Image from 'next/image'
import SideBarEmbed from '@/components/SideBarEmbed'
import SearchInput from '@/components/SearchInput'
import Drawer from '@/components/Drawer'
const TopNav = ({ tags, currentTag, post }) => {
const locale = useLocale()
const [showDrawer, switchShowDrawer] = useState(false)
// 点击按钮更改侧边抽屉状态
const handleMenuClick = () => {
switchShowDrawer(!showDrawer)
}
const router = useRouter()
const [searchValue, setSearchValue] = useState('')
const handleSearch = () => {
if (searchValue && searchValue !== '') {
Router.push({ pathname: '/', query: { s: searchValue } }).then(r => {
console.log(r)
})
}
}
const handleKeyUp = (e) => {
if (e.keyCode === 13) {
handleSearch()
}
}
return (
<div className='bg-white dark:bg-gray-600 border-b dark:border-gray-700 '>
<div className='fixed top-0 left-0 z-30 h-full'>
<div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' duration-200 w-72 h-full bg-white dark:bg-gray-800 border-r dark:border-gray-600'}>
<div className='flex space-x-4 px-5 py-1 dark:border-gray-500 border-b dark:bg-gray-600'>
<div
className='z-10 p-1 duration-200 mr-2 bg-white dark:bg-gray-600 text-gray-600 text-xl cursor-pointer dark:text-gray-300'>
<i className='fa hover:scale-125 transform duration-200 fa-bars ' onClick={handleMenuClick}/>
</div>
<Link href='/'>
<a
className='flex justify-center font-bold font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200
dark:text-gray-300
'>{BLOG.title}</a>
</Link>
</div>
<SideBarEmbed post={post}/>
</div>
</div>
<div className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-20 w-full h-full bg-black bg-opacity-40' } onClick={handleMenuClick}/>
{/* 侧面抽屉 */}
<Drawer post={post} currentTag={currentTag} />
{/* 导航栏 */}
<div
id='sticky-nav'
className='text-sm m-auto w-full flex flex-row justify-between items-center px-5'
className='text-sm m-auto w-full flex flex-row justify-between items-center px-2 md:px-4'
>
<div className='flex space-x-4'>
<div
className='z-10 p-1 duration-200 mr-2 bg-white dark:bg-gray-600 text-gray-600 text-xl cursor-pointer dark:text-gray-300'>
<i className='fa hover:scale-125 transform duration-200 fa-bars '
onClick={handleMenuClick} />
</div>
<div className='flex ml-12'>
<Link href='/'>
<a
className='hidden md:block flex justify-center font-bold font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200
className='flex text-xl p-1 justify-center align-middle my-auto font-bold font-semibold hover:bg-gray-800 hover:text-white duration-200
dark:text-gray-300
'>{BLOG.title}</a>
</Link>
</div>
<div>
<div className='hidden sm:block w-96'>
{/* 搜索框 */}
<div className='flex border dark:border-gray-600'>
<input
type='text'
placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
className={'md:w-80 w-32 transition duration-200 leading-10 pl-2 block border-gray-300 bg-white text-black dark:bg-gray-800 dark:text-white'}
onKeyUp={handleKeyUp}
onChange={e => setSearchValue(e.target.value)}
defaultValue={router.query.s ?? ''}
/>
<div className='py-3 px-5 bg-gray-50 flex border-l dark:border-gray-700 dark:bg-gray-500 justify-center align-middle cursor-pointer'
onClick={handleSearch}>
<i className='fa fa-search text-black absolute cursor-pointer' />
</div>
</div>
<SearchInput currentTag={currentTag} />
</div>
<div className='flex flex-nowrap space-x-1'>
<DarkModeButton />
<div className='flex align-middle cursor-pointer' >
<div className='flex align-middle cursor-pointer'>
<Image
alt={BLOG.author}
width={28}

4
layouts/ArticleLayout.js
View File

@@ -15,7 +15,7 @@ import ShareButton from '@/components/ShareButton'
import JumpToTop from '@/components/JumpToTop'
import CommonHead from '@/components/CommonHead'
import TopNav from '@/components/TopNav'
import SideBarResponsive from '@/components/SideBarResponsive'
import SideBar from '@/components/SideBar'
const mapPageUrl = id => {
return 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -55,7 +55,7 @@ const ArticleLayout = ({
{/* Wrapper */}
<div className='flex justify-between bg-gray-100 dark:bg-black'>
<SideBarResponsive tags={tags} post={frontMatter} />
<SideBar tags={tags} post={frontMatter} />
{/* 主体区块 */}
<main className='bg-gray-100 dark:bg-black w-full'>

4
layouts/DefaultLayout.js
View File

@@ -7,7 +7,7 @@ import { useTheme } from '@/lib/theme'
import CommonHead from '@/components/CommonHead'
import TopNav from '@/components/TopNav'
import Tags from '@/components/Tags'
import SideBarResponsive from '@/components/SideBarResponsive'
import SideBar from '@/components/SideBar'
import Footer from '@/components/Footer'
const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
@@ -56,7 +56,7 @@ const DefaultLayout = ({ tags, posts, page, currentTag, ...customMeta }) => {
<div className={`${BLOG.font} flex justify-between bg-gray-100 dark:bg-black min-h-screen`}>
{/* 侧边菜单 */}
<SideBarResponsive />
<SideBar />
<div className='flex-grow'>
<div className='fixed top-12 z-10 w-full border-b dark:border-gray-600'>

12
lib/lang.js
View File

@@ -5,7 +5,8 @@ const lang = {
RSS: 'RSS',
SEARCH: 'Search',
ABOUT: 'About',
NAVGATION: 'NAVGATION'
NAVIGATOR: 'Navigator',
MAIL: 'E-Mail'
},
PAGINATION: {
PREV: 'Prev',
@@ -26,7 +27,8 @@ const lang = {
RSS: '订阅',
SEARCH: '搜索',
ABOUT: '关于',
NAVGATION: '导航'
NAVGATION: '导航',
MAIL: '邮箱'
},
PAGINATION: {
PREV: '上一页',
@@ -47,7 +49,8 @@ const lang = {
RSS: '訂閱',
SEARCH: '搜尋',
ABOUT: '關於',
NAVGATION: '導航'
NAVGATION: '導航',
MAIL: '電郵'
},
PAGINATION: {
PREV: '上一頁',
@@ -68,7 +71,8 @@ const lang = {
RSS: '訂閱',
SEARCH: '搜尋',
ABOUT: '關於',
NAVGATION: '導航'
NAVGATION: '導航',
MAIL: '電郵'
},
PAGINATION: {
PREV: '上一頁',

4
package.json
View File

@@ -29,14 +29,14 @@
"lodash.throttle": "^4.1.1",
"memory-cache": "^0.2.0",
"next": "10.2.0",
"notion-client": "^4.9.3",
"notion-client": "4.8.6",
"notion-utils": "4.8.6",
"preact": "^10.5.13",
"qrcode.react": "^1.0.1",
"react": "17.0.2",
"react-cusdis": "^2.0.1",
"react-dom": "17.0.2",
"react-notion-x": "^4.9.1",
"react-notion-x": "^4.6.5",
"use-ackee": "^3.0.0"
},
"devDependencies": {