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 branch 'feat-gallery-links' into release_3.4.0

Browse Source
This commit is contained in:
tlyong1992
2022-06-08 09:53:06 +08:00
parent c8ddc788f9 b101944732
commit a45085e496
17 changed files with 112 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/NotionPage.js
View File

@@ -3,6 +3,8 @@ import dynamic from 'next/dynamic'
import mediumZoom from 'medium-zoom'
import React from 'react'
import { isBrowser } from '@/lib/utils'
import Image from 'next/image'
import Link from 'next/link'
const Code = dynamic(() =>
import('react-notion-x/build/third-party/code').then((m) => m.Code), { ssr: false }
@@ -59,12 +61,20 @@ const NotionPage = ({ post }) => {
const cards = document.getElementsByClassName('notion-collection-card')
for (const e of cards) {
e.removeAttribute('href')
const links = e.querySelectorAll('.notion-link')
if (links && links.length > 0) {
for (const l of links) {
l.onclick = function() {
window.open('http://' + l.innerText)
}
}
}
}
}
}, 800)
addWatch4Dom()
}, [])
})
return <div id='container' className='max-w-4xl mx-auto'>
<NotionRenderer
@@ -75,7 +85,9 @@ const NotionPage = ({ post }) => {
Collection,
Equation,
Modal,
Pdf
Pdf,
nextImage: Image,
nextLink: Link
}} />
</div>
}
@@ -101,7 +113,12 @@ function addWatch4Dom(element) {
switch (type) {
case 'childList':
if (mutation.target.className === 'notion-code-copy') {
fixCopy(mutation)
fixCopy(mutation.target)
} else if (mutation.target.className?.indexOf('language-') > -1) {
const copyCode = mutation.target.parentElement?.firstElementChild
if (copyCode) {
fixCopy(copyCode)
}
}
// console.log('A child node has been added or removed.')
break
@@ -128,12 +145,11 @@ function addWatch4Dom(element) {
}
/**
* 复制代码后，会重复 @see https://github.com/tangly1024/NotionNext/issues/165
* @param {*} e
*/
function fixCopy(e) {
const codeE = e.target.parentElement.lastElementChild
// console.log('2', codeE)
* 复制代码后，会重复 @see https://github.com/tangly1024/NotionNext/issues/165
* @param {*} e
*/
function fixCopy(codeCopy) {
const codeE = codeCopy.parentElement.lastElementChild
const codeEnd = codeE.lastChild
if (codeEnd.nodeName === '#text' && codeE.childNodes.length > 1) {
codeEnd.nodeValue = null

7
lib/cache/cache_manager.js vendored
View File

@@ -1,9 +1,12 @@
import MemoryCache from './memory_cache'
import FileCache from './local_file_cache'
import MongoCache from './mongo_db_cache'
const enableCache = true
let api
if (process.env.ENABLE_FILE_CACHE) {
if (process.env.MONGO_DB_URL && process.env.MONGO_DB_NAME) {
api = MongoCache
} else if (process.env.ENABLE_FILE_CACHE) {
api = FileCache
} else {
api = MemoryCache
@@ -22,7 +25,7 @@ export async function getDataFromCache(key) {
if (JSON.stringify(dataFromCache) === '[]') {
return null
}
return dataFromCache
return MongoCache.getCache(key)
}
export async function setDataToCache(key, data) {

49
lib/cache/mongo_db_cache.js vendored Normal file
View File

@@ -0,0 +1,49 @@
const MongoClient = require('mongodb').MongoClient
const DB_URL = process.env.MONGO_DB_URL // e.g. mongodb+srv://mongo_user:[password]@xxx.mongodb.net//?retryWrites=true&w=majority
const DB_NAME = process.env.MONGO_DB_NAME // e.g. tangly1024
const DB_COLLECTION = 'posts'
export async function getCache (key) {
const client = await MongoClient.connect(DB_URL).catch(err => { console.error(err) })
const dbo = client.db(DB_NAME)
const query = { block_id: key }
const res = await dbo.collection('posts').findOne(query).catch(err => { console.error(err) })
await client.close()
return res
}
/**
* 并发请求写文件异常； Vercel生产环境不支持写文件。
* @param key
* @param data
* @returns {Promise<null>}
*/
export async function setCache (key, data) {
const client = await MongoClient.connect(DB_URL).catch(err => { console.error(err) })
const dbo = client.db(DB_NAME)
data.block_id = key
const query = { block_id: key }
const jsonObj = JSON.parse(JSON.stringify(data))
const updRes = await dbo.collection(DB_COLLECTION).updateOne(query, { $set: jsonObj }).catch(err => { console.error(err) })
console.log('更新结果', key, updRes)
if (updRes.matchedCount === 0) {
const insertRes = await dbo.collection(DB_COLLECTION).insertOne(jsonObj).catch(err => { console.error(err) })
console.log('插入结果', key, insertRes)
}
await client.close()
return data
}
export async function delCache (key, data) {
const client = await MongoClient.connect(DB_URL).catch(err => { console.error(err) })
const dbo = client.db(DB_NAME)
const query = { block_id: key }
const res = await dbo.collection('posts').deleteOne(query).catch(err => { console.error(err) })
console.log('删除结果', key, res)
await client.close()
return null
}
export default { getCache, setCache, delCache }

1
package.json
View File

@@ -32,6 +32,7 @@
"localStorage": "^1.0.4",
"lodash.throttle": "^4.1.1",
"memory-cache": "^0.2.0",
"mongodb": "^4.6.0",
"next": "^12.0.5",
"notion-client": "6.12.9",
"notion-utils": "6.10.0",

3
styles/globals.css
View File

@@ -137,6 +137,7 @@ nav {
.medium-zoom-overlay{
background: none !important;
/* background: rgba(0, 0, 0, 0.01) none repeat scroll 0% 0% !important; */
}
.shadow-text{
@@ -156,7 +157,7 @@ nav {
}
.medium-zoom-image--opened{
width: auto !important;
/* width: auto !important; */
}
[data-waline] p {

9
styles/notion.css
View File

@@ -537,7 +537,7 @@
color: inherit;
word-break: break-word;
text-decoration: inherit;
border-bottom: 0.05em solid;
border-bottom: .05em solid !important;
border-color: var(--fg-color-2);
opacity: 0.7;
transition: border-color 100ms ease-in, opacity 100ms ease-in;
@@ -673,7 +673,7 @@ svg.notion-page-icon {
.notion-asset-wrapper img {
width: 100%;
height: 100%;
/* height: 100%; */
max-height: 100%;
}
@@ -1352,8 +1352,13 @@ svg.notion-page-icon {
margin-right: 6px;
}
.notion-collection-card{
cursor: default !important;
}
.notion-collection-card-property .notion-link {
border-bottom: 0 none;
cursor: pointer
}
.notion-collection-card-property .notion-page-title {

8
themes/example/LayoutArchive.js
View File

@@ -7,15 +7,15 @@ export const LayoutArchive = props => {
const postsSortByDate = Object.create(posts)
postsSortByDate.sort((a, b) => {
const dateA = new Date(a?.date.start_date || a.createdTime)
const dateB = new Date(b?.date.start_date || b.createdTime)
const dateA = new Date(a?.date?.start_date || a.createdTime)
const dateB = new Date(b?.date?.start_date || b.createdTime)
return dateB - dateA
})
const archivePosts = {}
postsSortByDate.forEach(post => {
const date = post.date.start_date.slice(0, 7)
const date = post.date?.start_date.slice(0, 7)
if (archivePosts[date]) {
archivePosts[date].push(post)
} else {
@@ -39,7 +39,7 @@ export const LayoutArchive = props => {
>
<div id={post?.date?.start_date}>
<span className="text-gray-400">
{post.date.start_date}
{post.date?.start_date}
</span>{' '}
&nbsp;
<Link

6
themes/fukasawa/LayoutArchive.js
View File

@@ -9,14 +9,14 @@ export const LayoutArchive = (props) => {
// 时间排序
postsSortByDate.sort((a, b) => {
const dateA = new Date(a?.date.start_date || a.createdTime)
const dateB = new Date(b?.date.start_date || b.createdTime)
const dateA = new Date(a?.date?.start_date || a.createdTime)
const dateB = new Date(b?.date?.start_date || b.createdTime)
return dateB - dateA
})
const archivePosts = {}
postsSortByDate.forEach(post => {
const date = post.date.start_date.slice(0, 7)
const date = post.date?.start_date.slice(0, 7)
if (archivePosts[date]) {
archivePosts[date].push(post)
} else {

2
themes/fukasawa/components/BlogPostArchive.js
View File

@@ -27,7 +27,7 @@ const BlogArchiveItem = ({ posts = [], archiveTitle }) => {
className="border-l-2 p-1 text-xs md:text-base items-center hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
>
<div id={post?.date?.start_date}>
<span className="text-gray-400">{post.date.start_date}</span>{' '}
<span className="text-gray-400">{post.date?.start_date}</span>{' '}
&nbsp;
<Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
<a className="dark:text-gray-400 dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">

6
themes/hexo/LayoutArchive.js
View File

@@ -10,15 +10,15 @@ export const LayoutArchive = (props) => {
// 时间排序
postsSortByDate.sort((a, b) => {
const dateA = new Date(a?.date.start_date || a.createdTime)
const dateB = new Date(b?.date.start_date || b.createdTime)
const dateA = new Date(a?.date?.start_date || a.createdTime)
const dateB = new Date(b?.date?.start_date || b.createdTime)
return dateB - dateA
})
const archivePosts = {}
postsSortByDate.forEach(post => {
const date = post.date.start_date.slice(0, 7)
const date = post.date?.start_date.slice(0, 7)
if (archivePosts[date]) {
archivePosts[date].push(post)
} else {

2
themes/hexo/components/BlogPostArchive.js
View File

@@ -27,7 +27,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
className="border-l-2 p-1 text-xs md:text-base items-center hover:scale-x-105 hover:border-indigo-500 dark:hover:border-indigo-300 dark:border-indigo-400 transform duration-500"
>
<div id={post?.date?.start_date}>
<span className="text-gray-400">{post.date.start_date}</span>{' '}
<span className="text-gray-400">{post.date?.start_date}</span>{' '}
&nbsp;
<Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
<a className="dark:text-gray-400 dark:hover:text-indigo-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">

2
themes/hexo/components/BlogPostCard.js
View File

@@ -33,7 +33,7 @@ const BlogPostCard = ({ post, showSummary }) => {
>
<a className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
<i className="far fa-calendar-alt mr-1" />
{post.date.start_date}
{post.date?.start_date || post.lastEditedTime}
</a>
</Link>
</div>

8
themes/medium/LayoutArchive.js
View File

@@ -7,15 +7,15 @@ export const LayoutArchive = props => {
const postsSortByDate = Object.create(posts)
postsSortByDate.sort((a, b) => {
const dateA = new Date(a?.date.start_date || a.createdTime)
const dateB = new Date(b?.date.start_date || b.createdTime)
const dateA = new Date(a?.date?.start_date || a.createdTime)
const dateB = new Date(b?.date?.start_date || b.createdTime)
return dateB - dateA
})
const archivePosts = {}
postsSortByDate.forEach(post => {
const date = post.date.start_date.slice(0, 7)
const date = post.date?.start_date.slice(0, 7)
if (archivePosts[date]) {
archivePosts[date].push(post)
} else {
@@ -41,7 +41,7 @@ export const LayoutArchive = props => {
>
<div id={post?.date?.start_date}>
<span className="text-gray-400">
{post.date.start_date}
{post.date?.start_date}
</span>{' '}
&nbsp;
<Link

2
themes/medium/components/BlogPostCard.js
View File

@@ -31,7 +31,7 @@ const BlogPostCard = ({ post, showSummary }) => {
'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'
}
>
<div className="text-sm py-1">{post.date.start_date}</div>
<div className="text-sm py-1">{post.date?.start_date}</div>
{CONFIG_MEDIUM.POST_LIST_CATEGORY && (
<CategoryItem category={post.category} />
)}

6
themes/next/LayoutArchive.js
View File

@@ -9,15 +9,15 @@ export const LayoutArchive = (props) => {
// 时间排序
postsSortByDate.sort((a, b) => {
const dateA = new Date(a?.date.start_date || a.createdTime)
const dateB = new Date(b?.date.start_date || b.createdTime)
const dateA = new Date(a?.date?.start_date || a.createdTime)
const dateB = new Date(b?.date?.start_date || b.createdTime)
return dateB - dateA
})
const archivePosts = {}
postsSortByDate.forEach(post => {
const date = post.date.start_date.slice(0, 7)
const date = post.date?.start_date.slice(0, 7)
if (archivePosts[date]) {
archivePosts[date].push(post)
} else {

2
themes/next/components/BlogPostArchive.js
View File

@@ -27,7 +27,7 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
className="border-l-2 p-1 text-xs md:text-base items-center hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
>
<div id={post?.date?.start_date}>
<span className="text-gray-400">{post.date.start_date}</span>{' '}
<span className="text-gray-400">{post.date?.start_date}</span>{' '}
&nbsp;
<Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
<a className="dark:text-gray-400 dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">

2
themes/next/components/BlogPostCard.js
View File

@@ -48,7 +48,7 @@ const BlogPostCard = ({ post, showSummary }) => {
passHref
>
<a className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
{post.date.start_date}
{post.date?.start_date}
</a>
</Link>
</div>