提交

.env.local

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

components/Collapse.js

@@ -1,17 +1,32 @@
-import React from 'react'
+import React, { useEffect, useImperativeHandle } from 'react'
 
 /**
  * 折叠面板组件，支持水平折叠、垂直折叠
  * @param {type:['horizontal','vertical'],isOpen} props
  * @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/Comment.js

@@ -43,6 +43,12 @@ const GiscusComponent = dynamic(
   },
   { ssr: false }
 )
+const WebMentionComponent = dynamic(
+  () => {
+    return import('@/components/WebMention')
+  },
+  { ssr: false }
+)
 
 const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
   ssr: false
@@ -100,6 +106,10 @@ const Comment = ({ frontMatter }) => {
         {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
           <GitalkComponent frontMatter={frontMatter}/>
         </div>)}
+
+        {BLOG.COMMENT_WEBMENTION.ENABLE && (<div key='WebMention'>
+          <WebMentionComponent frontMatter={frontMatter} className="px-2" />
+        </div>)}
       </Tabs>
     </div>
   )

components/CommonHead.js

@@ -44,6 +44,16 @@ const CommonHead = ({ meta, children }) => {
       <meta name="twitter:description" content={description} />
       <meta name="twitter:title" content={title} />
 
+      {BLOG.COMMENT_WEBMENTION.ENABLE && (
+        <>
+          <link rel="webmention" href={`https://webmention.io/${BLOG.COMMENT_WEBMENTION.HOSTNAME}/webmention`} />
+          <link rel="pingback" href={`https://webmention.io/${BLOG.COMMENT_WEBMENTION.HOSTNAME}/xmlrpc`} />
+        </>
+      )}
+      {BLOG.COMMENT_WEBMENTION.ENABLE && BLOG.COMMENT_WEBMENTION.AUTH !== '' && (
+        <link href={BLOG.COMMENT_WEBMENTION.AUTH} rel="me" />
+      )}
+
       {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <meta name="referrer" content="no-referrer-when-downgrade" />}
       {meta?.type === 'Post' && (
         <>

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/NotionIcon.js

@@ -8,10 +8,10 @@ const NotionIcon = ({ icon }) => {
     return <></>
   }
 
-  if (icon.startsWith('http')) {
+  if (icon.startsWith('http') || icon.startsWith('data:')) {
     //   return <Image src={icon} width={30} height={30}/>
     //   eslint-disable-next-line @next/next/no-img-element
-    return <img src={icon} className='w-8 float-left mr-1'/>
+    return <img src={icon} className='w-8 inline mr-1'/>
   }
 
   return <span className='mr-1'>{icon}</span>

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 cards = document.getElementsByClassName('notion-collection-card')
-        for (const e of cards) {
-          e.removeAttribute('href')
-        }
+        // 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')
+        // }
       }
     }, 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
-
-  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
-  }
-}
+// 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

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