Merge branch 'tangly1024:main' into main

.env.local

@@ -1,2 +1,2 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=3.6.8
+NEXT_PUBLIC_VERSION=3.7.0

components/Live2D.js

@@ -8,9 +8,11 @@ export default function Live2D() {
   const { switchTheme } = useGlobal()
 
   React.useEffect(() => {
-    window.addEventListener('scroll', initLive2D)
-    return () => {
-      window.removeEventListener('scroll', initLive2D)
+    if (BLOG.WIDGET_PET) {
+      window.addEventListener('scroll', initLive2D)
+      return () => {
+        window.removeEventListener('scroll', initLive2D)
+      }
     }
   }, [])
 
@@ -34,14 +36,14 @@ function initLive2D() {
   window.removeEventListener('scroll', initLive2D)
   setTimeout(() => {
     // 加载 waifu.css live2d.min.js waifu-tips.js
-    if (screen.width >= 768) {
-      Promise.all([
-        // loadExternalResource('https://cdn.zhangxinxu.com/sp/demo/live2d/live2d/js/live2d.js', 'js')
-        loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js')
-      ]).then((e) => {
-        // https://github.com/xiazeyu/live2d-widget-models
-        loadlive2d('live2d', BLOG.WIDGET_PET_LINK)
-      })
-    }
+    // if (screen.width >= 768) {
+    Promise.all([
+      // loadExternalResource('https://cdn.zhangxinxu.com/sp/demo/live2d/live2d/js/live2d.js', 'js')
+      loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js')
+    ]).then((e) => {
+      // https://github.com/xiazeyu/live2d-widget-models
+      loadlive2d('live2d', BLOG.WIDGET_PET_LINK)
+    })
+    // }
   }, 300)
 }

components/NotionPage.js

@@ -7,6 +7,8 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { Code } from 'react-notion-x/build/third-party/code'
 
+import 'katex/dist/katex.min.css'
+
 const Equation = dynamic(() =>
   import('react-notion-x/build/third-party/equation').then(async (m) => {
     // 化学方程式

components/PrismMac.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import Prism from 'prismjs'
 import 'prismjs/plugins/toolbar/prism-toolbar'
+import 'prismjs/plugins/toolbar/prism-toolbar.min.css'
 import 'prismjs/plugins/show-language/prism-show-language'
 import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard'
 import 'prismjs/plugins/line-numbers/prism-line-numbers'
@@ -70,7 +71,6 @@ const renderMermaid = async() => {
 
 function renderPrismMac() {
   const container = document?.getElementById('container-inner')
-  const codeToolBars = container?.getElementsByClassName('code-toolbar')
 
   // Add line numbers
   const codeBlocks = container?.getElementsByTagName('pre')
@@ -93,6 +93,7 @@ function renderPrismMac() {
     console.log('代码渲染', err)
   }
 
+  const codeToolBars = container?.getElementsByClassName('code-toolbar')
   // Add pre-mac element for Mac Style UI
   if (codeToolBars) {
     Array.from(codeToolBars).forEach(item => {

components/SideBarDrawer.js

@@ -9,10 +9,6 @@ import React from 'react'
 const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
   const router = useRouter()
   React.useEffect(() => {
-    // 页面渲染后删除hidden属性
-    // const sideBarWrapperElement = document.getElementById('sidebar-wrapper')
-    // sideBarWrapperElement?.classList?.remove('hidden')
-
     const sideBarDrawerRouteListener = () => {
       switchSideDrawerVisible(false)
     }
@@ -25,29 +21,30 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
   // 点击按钮更改侧边抽屉状态
   const switchSideDrawerVisible = (showStatus) => {
     if (showStatus) {
-      onOpen()
+      onOpen && onOpen()
     } else {
-      onClose()
+      onClose && onClose()
     }
     const sideBarDrawer = window.document.getElementById('sidebar-drawer')
     const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
 
     if (showStatus) {
-      sideBarDrawer.classList.replace('-ml-80', 'ml-0')
+      sideBarDrawer.classList.replace('-ml-56', 'ml-0')
       sideBarDrawerBackground.classList.replace('hidden', 'block')
     } else {
-      sideBarDrawer.classList.replace('ml-0', '-ml-80')
+      sideBarDrawer.classList.replace('ml-0', '-ml-56')
       sideBarDrawerBackground.classList.replace('block', 'hidden')
     }
   }
 
-  return <div id='sidebar-wrapper' className={' ' + className}>
-    <div id='sidebar-drawer' className={`${isOpen ? 'ml-0' : '-ml-80'} bg-white dark:bg-gray-900 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-40`}>
+  return <div id='sidebar-wrapper' className={' ' + className }>
+    <div id='sidebar-drawer' className={`${isOpen ? 'ml-0 w-56' : '-ml-56'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
       {children}
     </div>
+
     {/* 背景蒙版 */}
     <div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }}
-         className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-30 w-full h-full glassmorphism`}/>
+         className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}/>
   </div>
 }
 export default SideBarDrawer

components/ThemeSwitch.js

@@ -13,7 +13,8 @@ export function ThemeSwitch() {
             <div id="draggableBox" style={{ left: '10px', top: '90vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
                 <div className="p-2 flex items-center">
                     <i className="fas fa-palette mr-1 cursor-move" />
-                    <div className='uppercase font-sans whitespace-nowrap' >{theme} <i className='fas fa-sync cursor-pointer border-l pl-2' title='click to change theme' alt='click to change theme' onClick={switchTheme} /></div>
+                    <div className='uppercase font-sans whitespace-nowrap cursor-pointer ' onClick={switchTheme}> {theme}</div>
+                    <i className='fas fa-arrows cursor-move pl-2' title='click to change theme' alt='click to change theme' />
                 </div>
             </div>
         </Draggable>

components/WalineComponent.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { init } from '@waline/client'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
+import '@waline/client/dist/waline.css'
 
 const path = ''
 let waline = null

lib/notion/getPageProperties.js

@@ -3,7 +3,7 @@ import { NotionAPI } from 'notion-client'
 import BLOG from '@/blog.config'
 import formatDate from '../formatDate'
 import { defaultMapImageUrl } from 'react-notion-x'
-import md5 from 'js-md5'
+import { createHash } from 'crypto'
 
 export default async function getPageProperties(id, block, schema, authToken, tagOptions, siteInfo) {
   const rawProperties = Object.entries(block?.[id]?.value?.properties || [])
@@ -90,7 +90,11 @@ export default async function getPageProperties(id, block, schema, authToken, ta
   properties.pageIcon = getImageUrl(block[id].value?.format?.page_icon, block[id].value) ?? ''
   properties.page_cover = getImageUrl(block[id].value?.format?.page_cover, block[id].value) ?? siteInfo?.pageCover
   properties.content = value.content ?? []
-  properties.password = properties.password ? md5(properties.slug + properties.password) : ''
+  properties.password = properties.password
+    ? createHash('md5')
+      .update(properties.slug + properties.password)
+      .digest('hex').trim().toLowerCase()
+    : ''
   properties.tagItems = properties?.tags?.map(tag => {
     return { name: tag, color: tagOptions?.find(t => t.value === tag)?.color || 'gray' }
   }) || []

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "3.6.8",
+  "version": "3.7.0",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {
@@ -25,12 +25,12 @@
     "@popperjs/core": "^2.9.3",
     "animate.css": "^4.1.1",
     "animejs": "^3.2.1",
+    "aos": "^3.0.0-beta.6",
     "axios": ">=0.21.1",
     "copy-to-clipboard": "^3.3.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "feed": "^4.2.2",
     "gitalk": "^1.7.2",
-    "js-md5": "^0.7.3",
     "localStorage": "^1.0.4",
     "lodash.throttle": "^4.1.1",
     "mark.js": "^8.11.1",
@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@waline/client": "^2.5.1",
-    "autoprefixer": "^10.2.5",
+    "autoprefixer": "^10.4.13",
     "eslint": "^7.26.0",
     "eslint-config-next": "^11.0.0",
     "eslint-config-standard": "^16.0.2",
@@ -68,8 +68,8 @@
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-react": "^7.23.2",
     "next-sitemap": "^1.6.203",
-    "postcss": "^8.2.15",
-    "tailwindcss": "^2.1.2",
+    "postcss": "^8.4.20",
+    "tailwindcss": "^3.2.4",
     "webpack-bundle-analyzer": "^4.5.0"
   },
   "resolutions": {

pages/[...slug].js

@@ -8,8 +8,8 @@ import { idToUuid } from 'notion-utils'
 import Router from 'next/router'
 import { isBrowser } from '@/lib/utils'
 import { getNotion } from '@/lib/notion/getNotion'
-import md5 from 'js-md5'
 import { getPageTableOfContents } from '@/lib/notion/getPageTableOfContents'
+import { createHash } from 'crypto'
 
 /**
  * 根据notion的slug访问页面
@@ -59,7 +59,10 @@ const Slug = props => {
    * @param {*} result
    */
   const validPassword = passInput => {
-    if (passInput && md5(post.slug + passInput) === post.password) {
+    const encrypt = createHash('md5')
+      .update(post.slug + passInput)
+      .digest('hex').trim().toLowerCase()
+    if (passInput && encrypt === post.password) {
       setLock(false)
       return true
     }

pages/_app.js

@@ -1,29 +1,23 @@
 import BLOG from 'blog.config'
+import React from 'react'
+import dynamic from 'next/dynamic'
+
 import 'animate.css'
 import '@/styles/globals.css'
-// custom
+
 // core styles shared by all of react-notion-x (required)
 import 'react-notion-x/src/styles.css'
 import '@/styles/notion.css' //  重写部分样式
 
-// used for collection views (optional)
-// import 'rc-dropdown/assets/index.css'
-// import 'prismjs/themes/prism-tomorrow.min.css'
-import 'prism-themes/themes/prism-one-dark.css'
-import '@/styles/prism-mac-style.css' //  將 Prism 加入 mac 視窗樣式
+// 代码样式  更多样式参考： https://github.com/PrismJS/prism-themes
+import 'prism-themes/themes/prism-material-light.css'
 
-// import 'react-notion-x/build/third-party/equation.css'
-import 'katex/dist/katex.min.css'
+// import '@/styles/prism-mac-style.css' // code 左上角显示mac的红黄绿图标
 
-// waline 评论插件
-import '@waline/client/dist/waline.css'
-
-import dynamic from 'next/dynamic'
 import { GlobalContextProvider } from '@/lib/global'
 import { DebugPanel } from '@/components/DebugPanel'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { Fireworks } from '@/components/Fireworks'
-import React from 'react'
 import { loadExternalResource } from '@/lib/utils'
 
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })

styles/globals.css

@@ -197,4 +197,12 @@ nav {
 	-webkit-box-orient: vertical;
 	word-wrap: break-word;
 	word-break: break-all;
-}
+}
+
+.nobelium{
+    @apply flex flex-col justify-between
+}
+
+.nobelium .notion-code{
+    @apply max-w-2xl;
+}