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

Merge branch 'main' into feature_facebook_messenger_customer_chat_plugin

Browse Source
This commit is contained in:
tangly1024
2022-04-06 16:22:06 +08:00
committed by GitHub
parent 7569b7124d 37c0b071e6
commit 3b6dc46fc2
25 changed files with 413 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/CommonHead.js
View File

@@ -12,6 +12,8 @@ const CommonHead = ({ meta, children }) => {
const description = meta?.description || BLOG.DESCRIPTION
const type = meta?.type || 'website'
const keywords = meta?.tags || BLOG.KEYWORDS
const lang = BLOG.LANG.replace('-', '_') // Facebook OpenGraph 要 zh_CN 這樣的格式才抓得到語言
const category = meta?.category || BLOG.KEYWORDS || '軟體科技' // section 主要是像是 category 這樣的分類，Facebook 用這個來抓連結的分類
return (
<Head>
@@ -31,11 +33,12 @@ const CommonHead = ({ meta, children }) => {
)}
<meta name="keywords" content={keywords} />
<meta name="description" content={description} />
<meta property="og:locale" content={BLOG.LANG} />
<meta property="og:locale" content={lang} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={url} />
<meta property="og:image" content={image} />
<meta property="og:site_name" content={BLOG.TITLE} />
<meta property="og:type" content={type} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content={description} />
@@ -50,6 +53,8 @@ const CommonHead = ({ meta, children }) => {
content={meta.date || meta.createdTime}
/>
<meta property="article:author" content={BLOG.AUTHOR} />
<meta property="article:section" content={category} />
<meta property="article:publisher" content={BLOG.FACEBOOK_PAGE} />
</>
)}
{children}

91
components/NotionPage.js Normal file
View File

@@ -0,0 +1,91 @@
import 'prismjs'
import 'prismjs/components/prism-bash'
import 'prismjs/components/prism-javascript'
import 'prismjs/components/prism-markup'
import 'prismjs/components/prism-python'
import 'prismjs/components/prism-typescript'
import 'prismjs/components/prism-java'
import { NotionRenderer } from 'react-notion-x'
import mediumZoom from 'medium-zoom'
import { useEffect, useRef } from 'react'
import dynamic from 'next/dynamic'
const Code = dynamic(() =>
import('react-notion-x/build/third-party/code').then((m) => m.Code)
)
const Collection = dynamic(() =>
import('react-notion-x/build/third-party/collection').then(
(m) => m.Collection
)
)
const Equation = dynamic(() =>
import('react-notion-x/build/third-party/equation').then((m) => m.Equation)
)
const Pdf = dynamic(
() => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf),
{
ssr: false
}
)
const Modal = dynamic(
() => import('react-notion-x/build/third-party/modal').then((m) => m.Modal),
{
ssr: false
}
)
const NotionPage = ({ post }) => {
const zoom = typeof window !== 'undefined' && mediumZoom({
container: '.notion-viewport',
background: 'rgba(0, 0, 0, 0.2)',
margin: getMediumZoomMargin()
})
const zoomRef = useRef(zoom ? zoom.clone() : null)
useEffect(() => {
// 将所有container下的所有图片添加medium-zoom
const container = document?.getElementById('container')
const imgList = container?.getElementsByTagName('img')
if (imgList && zoomRef.current) {
for (let i = 0; i < imgList.length; i++) {
(zoomRef.current).attach(imgList[i])
}
}
})
return <NotionRenderer
recordMap={post.blockMap}
mapPageUrl={mapPageUrl}
components={{
Code,
Collection,
Equation,
Modal,
Pdf
}} />
}
const mapPageUrl = id => {
return 'https://www.notion.so/' + id.replace(/-/g, '')
}
function getMediumZoomMargin() {
const width = window.innerWidth
if (width < 500) {
return 8
} else if (width < 800) {
return 20
} else if (width < 1280) {
return 30
} else if (width < 1600) {
return 40
} else if (width < 1920) {
return 48
} else {
return 72
}
}
export default NotionPage