Merge branch 'main' into webmention

components/Collapse.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useImperativeHandle } from 'react'
 
 /**
  * 折叠面板组件，支持水平折叠、垂直折叠
@@ -6,12 +6,27 @@ import React from 'react'
  * @returns
  */
 const Collapse = props => {
-  const collapseRef = React.useRef(null)
+  const { collapseRef } = props
+  const ref = React.useRef(null)
   const type = props.type || 'vertical'
+
+  useImperativeHandle(collapseRef, () => {
+    return {
+      /**
+       * 当子元素高度变化时，可调用此方法更新折叠组件的高度
+       * @param {*} param0
+       */
+      updateCollapseHeight: ({ height, increase }) => {
+        ref.current.style.height = ref.current.scrollHeight
+        ref.current.style.height = 'auto'
+      }
+    }
+  })
+
   /**
-   * 折叠
-   * @param {*} element
-   */
+     * 折叠
+     * @param {*} element
+     */
   const collapseSection = element => {
     const sectionHeight = element.scrollHeight
     const sectionWidth = element.scrollWidth
@@ -34,9 +49,9 @@ const Collapse = props => {
   }
 
   /**
-   * 展开
-   * @param {*} element
-   */
+     * 展开
+     * @param {*} element
+     */
   const expandSection = element => {
     const sectionHeight = element.scrollHeight
     const sectionWidth = element.scrollWidth
@@ -58,22 +73,20 @@ const Collapse = props => {
     clearTimeout(clearTime)
   }
 
-  const updateHeight = () => {
-    collapseRef.current.style.height = 'auto'
-  }
-
-  React.useEffect(() => {
+  useEffect(() => {
     if (props.isOpen) {
-      expandSection(collapseRef.current)
+      expandSection(ref.current)
     } else {
-      collapseSection(collapseRef.current)
+      collapseSection(ref.current)
     }
+    // 通知父组件高度变化
+    props?.onHeightChange && props.onHeightChange({ height: ref.current.scrollHeight, increase: props.isOpen })
   }, [props.isOpen])
 
   return (
-    <div ref={collapseRef} onClick={updateHeight} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }} className={'overflow-hidden duration-200 ' + props.className }>
-      {props.children}
-    </div>
+        <div ref={ref} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }} className={'overflow-hidden duration-200 ' + props.className}>
+            {props.children}
+        </div>
   )
 }
 Collapse.defaultProps = { isOpen: false }

components/DarkModeButton.js

@@ -13,7 +13,7 @@ const DarkModeButton = (props) => {
     htmlElement.classList?.add(newStatus ? 'dark' : 'light')
   }
 
-  return <div className={'text-white z-10 duration-200 text-xl py-2 ' + props.className}>
+  return <div className={'dark:text-gray-200 z-10 duration-200 text-xl py-2 ' + props.className}>
     <i id='darkModeButton' className={`hover:scale-125 cursor-pointer transform duration-200 fas ${isDarkMode ? 'fa-sun' : 'fa-moon'}`}
        onClick={handleChangeDarkMode} />
   </div>

components/FlutteringRibbon.js

@@ -1,10 +1,21 @@
 /* eslint-disable */
 import React from 'react'
-
+const  id = 'canvasFlutteringRibbon'
 export const FlutteringRibbon = () => {
+     const destroyRibbon = ()=>{
+    const ribbon = document.getElementById(id)
+      if(ribbon && ribbon.parentNode){
+        ribbon.parentNode.removeChild(ribbon)
+      }
+  }
+  
   React.useEffect(() => {
     createFlutteringRibbon()
+        return () => destroyRibbon()
+
   }, [])
+    return <></>
+
 }
 
 /**
@@ -125,6 +136,7 @@ function createFlutteringRibbon() {
           init: function () {
             try {
               ;(this._canvas = document.createElement('canvas')),
+                (this._canvas.id = id),
                 (this._canvas.style.display = 'block'),
                 (this._canvas.style.position = 'fixed'),
                 (this._canvas.style.margin = '0'),

components/Nest.js

@@ -1,10 +1,19 @@
 /* eslint-disable */
-import React from 'react'
-
+import { useEffect } from 'react'
+const id = 'canvasNestCreated'
 export const Nest = () => {
-  React.useEffect(() => {
+  const destroyNest = ()=>{
+      const nest = document.getElementById(id)
+      if(nest && nest.parentNode){
+        nest.parentNode.removeChild(nest)
+      }
+  }
+
+  useEffect(() => {
     createNest()
+    return () => destroyNest()
   }, [])
+  return <></>
 }
 
 /**
@@ -65,7 +74,7 @@ function createNest() {
       m(o)
   }
   var i = document.createElement('canvas')
-  i.id = 'canvasNestCreated'
+  i.id = id
   var a = (function () {
       const t = e
       return {

components/NotionPage.js

@@ -1,7 +1,7 @@
 import { NotionRenderer } from 'react-notion-x'
 import dynamic from 'next/dynamic'
-import mediumZoom from '@fisch0920/medium-zoom'
-import React from 'react'
+// import mediumZoom from '@fisch0920/medium-zoom'
+import React, { useEffect } from 'react'
 import { isBrowser } from '@/lib/utils'
 import { Code } from 'react-notion-x/build/third-party/code'
 import TweetEmbed from 'react-tweet-embed'
@@ -42,16 +42,16 @@ const Tweet = ({ id }) => {
 }
 
 const NotionPage = ({ post, className }) => {
-  const zoom = isBrowser() && mediumZoom({
-    container: '.notion-viewport',
-    background: 'rgba(0, 0, 0, 0.2)',
-    scrollOffset: 200,
-    margin: getMediumZoomMargin()
-  })
+//   const zoom = isBrowser() && mediumZoom({
+//     container: '.notion-viewport',
+//     background: 'rgba(0, 0, 0, 0.2)',
+//     scrollOffset: 200,
+//     margin: getMediumZoomMargin()
+//   })
 
-  const zoomRef = React.useRef(zoom ? zoom.clone() : null)
+  //   const zoomRef = React.useRef(zoom ? zoom.clone() : null)
 
-  React.useEffect(() => {
+  useEffect(() => {
     setTimeout(() => {
       if (window.location.hash) {
         const tocNode = document.getElementById(window.location.hash.substring(1))
@@ -64,18 +64,18 @@ const NotionPage = ({ post, className }) => {
     setTimeout(() => {
       if (isBrowser()) {
         // 将相册gallery下的图片加入放大功能
-        const imgList = document.querySelectorAll('.notion-collection-card-cover img')
-        if (imgList && zoomRef.current) {
-          for (let i = 0; i < imgList.length; i++) {
-            (zoomRef.current).attach(imgList[i])
-          }
-        }
+        // const imgList = document.querySelectorAll('.notion-collection-card-cover img')
+        // if (imgList && zoomRef.current) {
+        //   for (let i = 0; i < imgList.length; i++) {
+        //     (zoomRef.current).attach(imgList[i])
+        //   }
+        // }
 
-        // 相册图片点击不跳转
-        const cards = document.getElementsByClassName('notion-collection-card')
-        for (const e of cards) {
-          e.removeAttribute('href')
-        }
+        // 相册图片禁止跳转页面，改为放大图片功能功能
+        // const cards = document.getElementsByClassName('notion-collection-card')
+        // for (const e of cards) {
+        //   e.removeAttribute('href')
+        // }
       }
     }, 800)
   }, [])
@@ -84,7 +84,7 @@ const NotionPage = ({ post, className }) => {
     return <>{post?.summary || ''}</>
   }
 
-  return <div id='container' className={`font-medium mx-auto ${className}`}>
+  return <div id='container' className={`mx-auto ${className}`}>
     <NotionRenderer
       recordMap={post.blockMap}
       mapPageUrl={mapPageUrl}
@@ -113,22 +113,22 @@ const mapPageUrl = id => {
   return '/' + id.replace(/-/g, '')
 }
 
-function getMediumZoomMargin() {
-  const width = window.innerWidth
+// 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
-  }
-}
+//   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

components/Player.js

@@ -5,7 +5,7 @@ const Player = () => {
   const [player, setPlayer] = React.useState()
   const ref = React.useRef(null)
 
-  const showLrc = JSON.parse(BLOG.MUSIC_PLAYER_SHOW_LRC)
+  const lrcType = JSON.parse(BLOG.MUSIC_PLAYER_LRC_TYPE)
   const playerVisible = JSON.parse(BLOG.MUSIC_PLAYER_VISIBLE)
   const autoPlay = JSON.parse(BLOG.MUSIC_PLAYER_AUTO_PLAY)
 
@@ -16,7 +16,7 @@ const Player = () => {
       setPlayer(new window.APlayer({
         container: ref.current,
         fixed: true,
-        showlrc: showLrc,
+        lrcType: lrcType,
         autoplay: autoPlay,
         order: BLOG.MUSIC_PLAYER_ORDER,
         audio: BLOG.MUSIC_PLAYER_AUDIO_LIST

components/Ribbon.js

@@ -1,10 +1,20 @@
 /* eslint-disable */
-import React from 'react'
+import { useEffect } from 'react'
+const id = 'canvasRibbon'
 
 export const Ribbon = () => {
-  React.useEffect(() => {
+ const destroyRibbon = ()=>{
+    const ribbon = document.getElementById(id)
+      if(ribbon && ribbon.parentNode){
+        ribbon.parentNode.removeChild(ribbon)
+      }
+  }
+  
+  useEffect(() => {
     createRibbon()
+    return () => destroyRibbon()
   }, [])
+  return <></>
 }
 
 /**
@@ -29,6 +39,7 @@ function createRibbon() {
       a = window.innerWidth,
       l = window.innerHeight,
       d = e.s
+    i.id= id
     let r, s
     const u = Math
     let h = 0

components/Sakura.js

@@ -1,10 +1,19 @@
 /* eslint-disable */
-import React from 'react'
-
+import { useEffect } from 'react'
+const id = 'canvas_sakura'
 export const Sakura = () => {
-  React.useEffect(() => {
+  const destroySakura = ()=>{
+    const sakura = document.getElementById(id)
+    if(sakura && sakura.parentNode){
+      sakura.parentNode.removeChild(sakura)
+    }
+  }
+      
+  useEffect(() => {
     createSakura({})
+    return () => destroySakura()
   }, [])
+  return <></>
 }
 
 /**
@@ -129,7 +138,7 @@ function createSakura() {
       'style',
       'position: fixed;left: 0;top: 0;pointer-events: none;'
     )
-    canvas.setAttribute('id', 'canvas_sakura')
+    canvas.setAttribute('id', id)
     document.getElementsByTagName('body')[0].appendChild(canvas)
     cxt = canvas.getContext('2d')
     var sakuraList = new SakuraList()
@@ -165,15 +174,12 @@ function createSakura() {
       stop = requestAnimationFrame(asd)
     }
   }
-  window.onresize = function () {
-    var canvasSnow = document.getElementById('canvas_snow')
-  }
   img.onload = function () {
     startSakura()
   }
   function stopp() {
     if (staticx) {
-      var child = document.getElementById('canvas_sakura')
+      var child = document.getElementById(id)
       child.parentNode.removeChild(child)
       window.cancelAnimationFrame(stop)
       staticx = false

components/SideBarDrawer.js

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import React from 'react'
+import { useEffect } from 'react'
 
 /**
  * 侧边栏抽屉面板，可以从侧面拉出
@@ -8,7 +8,7 @@ import React from 'react'
  */
 const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
   const router = useRouter()
-  React.useEffect(() => {
+  useEffect(() => {
     const sideBarDrawerRouteListener = () => {
       switchSideDrawerVisible(false)
     }
@@ -37,8 +37,8 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
     }
   }
 
-  return <div id='sidebar-wrapper' className={' block md:hidden ' + className }>
-    <div id='sidebar-drawer' className={`${isOpen ? 'ml-0 w-56' : '-ml-60 max-w-side'} 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`}>
+  return <div id='sidebar-wrapper' className={' block md:hidden top-0 ' + className }>
+    <div id="sidebar-drawer" className={`${isOpen ? 'ml-0 w-60 visible' : '-ml-60 max-w-side invisible'} 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>
 

components/StarrySky.js

@@ -7,7 +7,7 @@ export const StarrySky = () => {
   }, [])
   return (
     <div className="relative">
-      <canvas id="starry-sky-vixcity" className="fixed pointer-events-none"></canvas>
+      <canvas id="starry-sky-vixcity" style={{zIndex:1}} className="top-0 fixed pointer-events-none"></canvas>
     </div>
   )
 }

components/ThemeSwitch.js

@@ -16,7 +16,7 @@ export function ThemeSwitch() {
   return (<>
         <Draggable>
             <div id="draggableBox" style={{ left: '10px', top: '85vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
-                <div className="p-2 flex items-center">
+                <div className="py-2 flex items-center text-sm">
                     <i className='fas fa-arrows cursor-move px-2' />
                     {/* <div className='uppercase font-sans whitespace-nowrap cursor-pointer ' onClick={switchTheme}> {theme}</div> */}
                     <select value={theme} onChange={onSelectChange} name="cars" className='text-white bg-black uppercase cursor-pointer'>