d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-01 07:26:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into theme-medium

Browse Source 
# Conflicts:
#	themes/index.js
This commit is contained in:
tangly1024
2022-03-03 16:34:50 +08:00
parent 1fd6c85c10 cd4c230861
commit b5a437de10
40 changed files with 211 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/Medium/components/Catalog.js
View File

@@ -62,7 +62,7 @@ const Catalog = ({ toc }) => {
<a
key={id}
href={`#${id}`}
className={`notion-table-of-contents-item duration-300 transform font-light
className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
>
<span

4
themes/Medium/components/InfoCard.js
View File

@@ -17,8 +17,8 @@ const InfoCard = () => {
className='rounded-full'
/>
</div>
<div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center'>{BLOG.AUTHOR}</div>
<div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center'>{BLOG.BIO}</div>
<div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{BLOG.AUTHOR}</div>
<div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</div>
<SocialButton/>
</div>
</div>

2
themes/Medium/components/LogoBar.js
View File

@@ -5,7 +5,7 @@ export default function LogoBar () {
return <div id='top-wrapper' className='w-full max-w-5xl justify-center mx-auto font-sans'>
<div className='w-full'>
<Link href='/'>
<a className='text-2xl'>{BLOG.TITLE}</a>
<a className='text-2xl dark:text-gray-200'>{BLOG.TITLE}</a>
</Link>
</div>
</div>

50
themes/Medium/components/SearchInput.js
View File

@@ -1,8 +1,9 @@
import { useRouter } from 'next/router'
import { useImperativeHandle, useRef, useState } from 'react'
let lock = false
const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
const [searchKey, setSearchKey] = useState(currentSearch || getSearchKey() || '')
// const [searchKey, setSearchKey] = useState(currentSearch || getSearchKey() || '')
const [onLoading, setLoadingState] = useState(false)
const router = useRouter()
const searchInputRef = useRef()
@@ -14,12 +15,15 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
}
})
const handleSearch = (key) => {
const handleSearch = () => {
const key = searchInputRef.current.value
if (key && key !== '') {
setLoadingState(true)
router.push({ pathname: '/search', query: { s: key } }).then(r => {
setLoadingState(false)
})
// router.push({ pathname: '/search/' + key }).then(r => {
// setLoadingState(false)
// })
location.href = '/search/' + key
} else {
router.push({ pathname: '/' }).then(r => {
})
@@ -34,13 +38,19 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
}
const cleanSearch = () => {
searchInputRef.current.value = ''
setSearchKey('')
}
let lock = false
const [showClean, setShowClean] = useState(false)
const updateSearchKey = (val) => {
if (!lock) {
setSearchKey(val)
if (lock) {
return
}
searchInputRef.current.value = val
if (val) {
setShowClean(true)
} else {
setShowClean(false)
}
}
function lockSearchInput () {
@@ -61,28 +71,20 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
onCompositionUpdate={lockSearchInput}
onCompositionEnd={unLockSearchInput}
onChange={e => updateSearchKey(e.target.value)}
defaultValue={searchKey}
defaultValue={currentSearch}
/>
<div className='-ml-8 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'
onClick={() => { handleSearch(searchKey) }}>
<i className={`hover:text-black transform duration-200 text-gray-500 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'} `} />
<div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'
onClick={handleSearch}>
<i className={`hover:text-black transform duration-200 text-gray-500 dark:hover:text-gray-300 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'} `} />
</div>
{(searchKey && searchKey.length &&
<div className='-ml-12 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
<i className='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer' onClick={cleanSearch} />
{(showClean &&
<div className='-ml-12 cursor-pointer float-right items-center justify-center py-2'>
<i className='fas fa-times hover:text-black transform duration-200 text-gray-400 cursor-pointer dark:hover:text-gray-300' onClick={cleanSearch} />
</div>
)}
</div>
}
function getSearchKey () {
const router = useRouter()
if (router.query && router.query.s) {
return router.query.s
}
return null
}
export default SearchInput

6
themes/Medium/components/TopNavBar.js
View File

@@ -12,7 +12,7 @@ export default function TopNavBar (props) {
const router = useRouter()
return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-50 ' + className}>
<div className='flex w-full h-12 shadow bg-white px-5 items-between'>
<div className='flex w-full h-12 shadow bg-white dark:bg-gray-900 px-5 items-between'>
<LogoBar />
{/* 顶部菜单 */}
@@ -21,8 +21,8 @@ export default function TopNavBar (props) {
if (link.show) {
const selected = (router.pathname === link.to) || (router.asPath === link.to)
return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >
<a className={'px-5 duration-300 text-base justify-between hover:underline cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600 ')} >
<a className={'px-5 duration-300 text-base justify-between dark:text-gray-300 hover:underline cursor-pointer flex flex-nowrap items-center ' +
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')} >
<div className='items-center justify-center flex '>
<i className={link.icon} />
<div className='ml-4 whitespace-nowrap'>{link.name}</div>