Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/tangly1024/NotionNext
Browse files Browse the repository at this point in the history
  • Loading branch information
@actions-user
actions-user committed May 28, 2024
2 parents fbe26ff + 3ae85e5 commit 02ae96d
Show file tree
Hide file tree
Showing 14 changed files with 997 additions and 817 deletions.
276 changes: 169 additions & 107 deletions components/AlgoliaSearchModal.js
View file

Large diffs are not rendered by default.

240 changes: 147 additions & 93 deletions components/CustomContextMenu.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect, useState, useRef, useLayoutEffect } from 'react'
import { useGlobal } from '@/lib/global'
import { saveDarkModeToLocalStorage, THEMES } from '@/themes/theme'
import useWindowSize from '@/hooks/useWindowSize'
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import { THEMES, saveDarkModeToLocalStorage } from '@/themes/theme'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect, useLayoutEffect, useRef, useState } from 'react'

/**
* 自定义右键菜单
Expand All @@ -20,14 +20,14 @@ export default function CustomContextMenu(props) {
const [width, setWidth] = useState(0)
const [height, setHeight] = useState(0)

const { latestPosts } = props
const { allNavPages } = props
const router = useRouter()
/**
* 随机跳转文章
*/
function handleJumpToRandomPost() {
const randomIndex = Math.floor(Math.random() * latestPosts.length)
const randomPost = latestPosts[randomIndex]
const randomIndex = Math.floor(Math.random() * allNavPages.length)
const randomPost = allNavPages[randomIndex]
router.push(`${siteConfig('SUB_PATH', '')}/${randomPost?.slug}`)
}

Expand All @@ -37,16 +37,26 @@ export default function CustomContextMenu(props) {
}, [])

useEffect(() => {
const handleContextMenu = (event) => {
setShow(false)
}, [router])

useEffect(() => {
const handleContextMenu = event => {
event.preventDefault()
// 计算点击位置加菜单宽高是否超出屏幕，如果超出则贴边弹出
const x = (event.clientX < windowSize.width - width) ? event.clientX : windowSize.width - width
const y = (event.clientY < windowSize.height - height) ? event.clientY : windowSize.height - height
const x =
event.clientX < windowSize.width - width
? event.clientX
: windowSize.width - width
const y =
event.clientY < windowSize.height - height
? event.clientY
: windowSize.height - height
setPosition({ y: `${y}px`, x: `${x}px` })
setShow(true)
}

const handleClick = (event) => {
const handleClick = event => {
if (menuRef.current && !menuRef.current.contains(event.target)) {
setShow(false)
}
Expand Down Expand Up @@ -80,19 +90,20 @@ export default function CustomContextMenu(props) {

function handleCopyLink() {
const url = window.location.href
navigator.clipboard.writeText(url)
navigator.clipboard
.writeText(url)
.then(() => {
console.log('页面地址已复制')
})
.catch((error) => {
.catch(error => {
console.error('复制页面地址失败:', error)
})
setShow(false)
}

/**
* 切换主题
*/
* 切换主题
*/
function handleChangeTheme() {
const randomTheme = THEMES[Math.floor(Math.random() * THEMES.length)] // 从THEMES数组中 随机取一个主题
const query = router.query
Expand All @@ -104,14 +115,14 @@ export default function CustomContextMenu(props) {
* 复制内容
*/
function handleCopy() {
const selectedText = document.getSelection().toString();
const selectedText = document.getSelection().toString()
if (selectedText) {
const tempInput = document.createElement('input');
tempInput.value = selectedText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
const tempInput = document.createElement('input')
tempInput.value = selectedText
document.body.appendChild(tempInput)
tempInput.select()
document.execCommand('copy')
document.body.removeChild(tempInput)
// alert("Text copied: " + selectedText);
} else {
// alert("Please select some text first.");
Expand All @@ -130,76 +141,119 @@ export default function CustomContextMenu(props) {
}

return (
<div
ref={menuRef}
style={{ top: position.y, left: position.x }}
className={`${show ? '' : 'invisible opacity-0'} select-none transition-opacity duration-200 fixed z-50`}
>

{/* 菜单内容 */}
<div className='rounded-xl w-52 dark:hover:border-yellow-600 bg-white dark:bg-[#040404] dark:text-gray-200 dark:border-gray-600 p-3 border drop-shadow-lg flex-col duration-300 transition-colors'>
{/* 顶部导航按钮 */}
<div className='flex justify-between'>
<i onClick={handleBack} className="hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-left"></i>
<i onClick={handleForward} className="hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-right"></i>
<i onClick={handleRefresh} className="hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-rotate-right"></i>
<i onClick={handleScrollTop} className="hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-up"></i>
</div>

<hr className='my-2 border-dashed' />

{/* 跳转导航按钮 */}
<div className='w-full px-2'>

{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_RANDOM_POST') && <div onClick={handleJumpToRandomPost} title={locale.MENU.WALK_AROUND} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
<i className="fa-solid fa-podcast mr-2" />
<div className='whitespace-nowrap'>{locale.MENU.WALK_AROUND}</div>
</div>}

{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_CATEGORY') && <Link href='/category' title={locale.MENU.CATEGORY} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
<i className="fa-solid fa-square-minus mr-2" />
<div className='whitespace-nowrap'>{locale.MENU.CATEGORY}</div>
</Link>}

{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_TAG') && <Link href='/tag' title={locale.MENU.TAGS} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
<i className="fa-solid fa-tag mr-2" />
<div className='whitespace-nowrap'>{locale.MENU.TAGS}</div>
</Link>}

</div>

<hr className='my-2 border-dashed' />

{/* 功能按钮 */}
<div className='w-full px-2'>

{siteConfig('CAN_COPY') && (
<div onClick={handleCopy} title={locale.MENU.COPY} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
<i className="fa-solid fa-copy mr-2" />
<div className='whitespace-nowrap'>{locale.MENU.COPY}</div>
</div>
)}

{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_SHARE_LINK') && <div onClick={handleCopyLink} title={locale.MENU.SHARE_URL} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
<i className="fa-solid fa-arrow-up-right-from-square mr-2" />
<div className='whitespace-nowrap'>{locale.MENU.SHARE_URL}</div>
</div>}

{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_DARK_MODE') && <div onClick={handleChangeDarkMode} title={isDarkMode ? locale.MENU.LIGHT_MODE : locale.MENU.DARK_MODE} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
{isDarkMode ? <i className="fa-regular fa-sun mr-2" /> : <i className="fa-regular fa-moon mr-2" />}
<div className='whitespace-nowrap'> {isDarkMode ? locale.MENU.LIGHT_MODE : locale.MENU.DARK_MODE}</div>
</div>}

{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH') && (
<div onClick={handleChangeTheme} title={locale.MENU.THEME_SWITCH} className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
<i className="fa-solid fa-palette mr-2" />
<div className='whitespace-nowrap'>{locale.MENU.THEME_SWITCH}</div>
</div>
)}

</div>

<div
ref={menuRef}
style={{ top: position.y, left: position.x }}
className={`${show ? '' : 'invisible opacity-0'} select-none transition-opacity duration-200 fixed z-50`}>
{/* 菜单内容 */}
<div className='rounded-xl w-52 dark:hover:border-yellow-600 bg-white dark:bg-[#040404] dark:text-gray-200 dark:border-gray-600 p-3 border drop-shadow-lg flex-col duration-300 transition-colors'>
{/* 顶部导航按钮 */}
<div className='flex justify-between'>
<i
onClick={handleBack}
className='hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-left'></i>
<i
onClick={handleForward}
className='hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-right'></i>
<i
onClick={handleRefresh}
className='hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-rotate-right'></i>
<i
onClick={handleScrollTop}
className='hover:bg-blue-600 hover:text-white px-2 py-2 text-center w-8 rounded cursor-pointer fa-solid fa-arrow-up'></i>
</div>

<hr className='my-2 border-dashed' />

{/* 跳转导航按钮 */}
<div className='w-full px-2'>
{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_RANDOM_POST') && (
<div
onClick={handleJumpToRandomPost}
title={locale.MENU.WALK_AROUND}
className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
<i className='fa-solid fa-podcast mr-2' />
<div className='whitespace-nowrap'>{locale.MENU.WALK_AROUND}</div>
</div>
)}

{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_CATEGORY') && (
<Link
href='/category'
title={locale.MENU.CATEGORY}
className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
<i className='fa-solid fa-square-minus mr-2' />
<div className='whitespace-nowrap'>{locale.MENU.CATEGORY}</div>
</Link>
)}

{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_TAG') && (
<Link
href='/tag'
title={locale.MENU.TAGS}
className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
<i className='fa-solid fa-tag mr-2' />
<div className='whitespace-nowrap'>{locale.MENU.TAGS}</div>
</Link>
)}
</div>

<hr className='my-2 border-dashed' />

{/* 功能按钮 */}
<div className='w-full px-2'>
{siteConfig('CAN_COPY') && (
<div
onClick={handleCopy}
title={locale.MENU.COPY}
className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
<i className='fa-solid fa-copy mr-2' />
<div className='whitespace-nowrap'>{locale.MENU.COPY}</div>
</div>
)}

{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_SHARE_LINK') && (
<div
onClick={handleCopyLink}
title={locale.MENU.SHARE_URL}
className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
<i className='fa-solid fa-arrow-up-right-from-square mr-2' />
<div className='whitespace-nowrap'>{locale.MENU.SHARE_URL}</div>
</div>
)}

{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_DARK_MODE') && (
<div
onClick={handleChangeDarkMode}
title={
isDarkMode ? locale.MENU.LIGHT_MODE : locale.MENU.DARK_MODE
}
className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
{isDarkMode ? (
<i className='fa-regular fa-sun mr-2' />
) : (
<i className='fa-regular fa-moon mr-2' />
)}
<div className='whitespace-nowrap'>
{' '}
{isDarkMode ? locale.MENU.LIGHT_MODE : locale.MENU.DARK_MODE}
</div>
</div>
)}

{siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU_THEME_SWITCH') && (
<div
onClick={handleChangeTheme}
title={locale.MENU.THEME_SWITCH}
className='w-full px-2 h-10 flex justify-start items-center flex-nowrap cursor-pointer hover:bg-blue-600 hover:text-white rounded-lg duration-200 transition-all'>
<i className='fa-solid fa-palette mr-2' />
<div className='whitespace-nowrap'>
{locale.MENU.THEME_SWITCH}
</div>
</div>
</div >
)}
</div>
</div>
</div>
)
}
20 changes: 12 additions & 8 deletions lib/plugins/algolia.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import algoliasearch from 'algoliasearch'
* 生成全文索引
* @param {*} allPages
*/
const generateAlgoliaSearch = async({ allPages, force = false }) => {
const generateAlgoliaSearch = async ({ allPages, force = false }) => {
allPages?.forEach(p => {
// 判断这篇文章是否需要重新创建索引
if (p && !p.password) {
Expand All @@ -19,7 +19,7 @@ const generateAlgoliaSearch = async({ allPages, force = false }) => {
* 上传数据
* 根据上次修改文章日期和上次更新索引数据判断是否需要更新algolia索引
*/
const uploadDataToAlgolia = async(post) => {
const uploadDataToAlgolia = async post => {
// Connect and authenticate with your Algolia app
const client = algoliasearch(BLOG.ALGOLIA_APP_ID, BLOG.ALGOLIA_ADMIN_APP_KEY)

Expand Down Expand Up @@ -61,14 +61,18 @@ const uploadDataToAlgolia = async(post) => {
summary: post.summary,
lastEditedDate: post.lastEditedDate, // 更新文章时间
lastIndexDate: new Date(), // 更新索引时间
content: truncate(getPageContentText(post, post.blockMap), 9000) // 索引9000个字节，因为api限制总请求内容上限1万个字节
content: truncate(getPageContentText(post, post.blockMap), 8192) // 索引8192个字符，API限制总请求内容上限1万个字节
}
// console.log('更新Algolia索引', record)
index.saveObject(record).wait().then(r => {
console.log('Algolia索引更新', r)
}).catch(err => {
console.log('Algolia异常', err)
})
index
.saveObject(record)
.wait()
.then(r => {
console.log('Algolia索引更新', r)
})
.catch(err => {
console.log('Algolia异常', err)
})
}
}

Expand Down
6 changes: 4 additions & 2 deletions styles/notion.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -523,8 +523,10 @@ summary > .notion-h {
.notion-page {
/* width: var(--notion-max-width); */
width: 100% !important;
padding-left: calc(min(12px, 8vw));
padding-right: calc(min(12px, 8vw));
padding-left: 0px !important;
padding-right: 0px !important;
/* padding-left: calc(min(12px, 8vw)); */
/* padding-right: calc(min(12px, 8vw)); */
}

.notion-full-width {
Expand Down
Loading

0 comments on commit 02ae96d

Please sign in to comment.