expoli
diff --git a/‎blog.config.js
Lines changed: 39 additions & 534 deletions b/‎blog.config.js
Lines changed: 39 additions & 534 deletions
diff --git a/‎components/AISummary.js
Lines changed: 98 additions & 0 deletions b/‎components/AISummary.js
Lines changed: 98 additions & 0 deletions
diff --git a/‎components/AISummary.module.css
Lines changed: 53 additions & 0 deletions b/‎components/AISummary.module.css
Lines changed: 53 additions & 0 deletions
diff --git a/‎components/Artalk.js
Lines changed: 24 additions & 10 deletions b/‎components/Artalk.js
Lines changed: 24 additions & 10 deletions
diff --git a/‎components/GoogleAdsense.js
Lines changed: 20 additions & 21 deletions b/‎components/GoogleAdsense.js
Lines changed: 20 additions & 21 deletions
diff --git a/‎components/NotionPage.js
Lines changed: 21 additions & 5 deletions b/‎components/NotionPage.js
Lines changed: 21 additions & 5 deletions
diff --git a/‎components/Player.js
Lines changed: 2 additions & 3 deletions b/‎components/Player.js
Lines changed: 2 additions & 3 deletions
@@ -0,0 +1,98 @@
+import styles from './AISummary.module.css'
+import { useEffect, useState } from 'react'
+import { useGlobal } from '@/lib/global'
+
+const AISummary = ({ aiSummary }) => {
+  const { locale } = useGlobal()
+  const [summary, setSummary] = useState(aiSummary)
+
+  useEffect(() => {
+    showAiSummaryAnimation(aiSummary, setSummary)
+  }, [])
+
+  return (
+    aiSummary && (
+      <div className={styles['post-ai']}>
+        <div className={styles['ai-container']}>
+          <div className={styles['ai-header']}>
+            <div className={styles['ai-icon']}>
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                viewBox='0 0 24 24'
+                width='24'
+                height='24'>
+                <path
+                  fill='#ffffff'
+                  d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6M12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8Z'
+                />
+              </svg>
+            </div>
+            <div className={styles['ai-title']}>{locale.AI_SUMMARY.NAME}</div>
+            <div className={styles['ai-tag']}>GPT</div>
+          </div>
+          <div className={styles['ai-content']}>
+            <div className={styles['ai-explanation']}>
+              {summary}
+              {summary !== aiSummary && (
+                <span className={styles['blinking-cursor']}></span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  )
+}
+
+const showAiSummaryAnimation = (rawSummary, setSummary) => {
+  if (!rawSummary) return
+  let currentIndex = 0
+  const typingDelay = 20
+  const punctuationDelayMultiplier = 6
+  let animationRunning = true
+  let lastUpdateTime = performance.now()
+  const animate = () => {
+    if (currentIndex < rawSummary.length && animationRunning) {
+      const currentTime = performance.now()
+      const timeDiff = currentTime - lastUpdateTime
+
+      const letter = rawSummary.slice(currentIndex, currentIndex + 1)
+      const isPunctuation = /[，。！、？,.!?]/.test(letter)
+      const delay = isPunctuation
+        ? typingDelay * punctuationDelayMultiplier
+        : typingDelay
+
+      if (timeDiff >= delay) {
+        setSummary(rawSummary.slice(0, currentIndex + 1))
+        lastUpdateTime = currentTime
+        currentIndex++
+
+        if (currentIndex < rawSummary.length) {
+          setSummary(rawSummary.slice(0, currentIndex))
+        } else {
+          setSummary(rawSummary)
+          observer.disconnect()
+        }
+      }
+      requestAnimationFrame(animate)
+    }
+  }
+  animate(rawSummary)
+  const observer = new IntersectionObserver(
+    entries => {
+      animationRunning = entries[0].isIntersecting
+      if (animationRunning && currentIndex === 0) {
+        setTimeout(() => {
+          requestAnimationFrame(animate)
+        }, 200)
+      }
+    },
+    { threshold: 0 }
+  )
+  let post_ai = document.querySelector('.post-ai')
+  if (post_ai) {
+    observer.observe(post_ai)
+  }
+}
+
+export default AISummary
@@ -0,0 +1,53 @@
+.post-ai {
+    font-family: 'Noto Sans SC', sans-serif;
+    margin-bottom: 20px;
+}
+.ai-container {
+    background: linear-gradient(135deg, #f9f9f9 0%, #f5f5f5 100%);
+    border: 1px solid #e8e8e8;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+}
+.ai-header {
+    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
+    color: white;
+    padding: 12px 20px;
+    display: flex;
+    align-items: center;
+}
+.ai-icon {
+    margin-right: 10px;
+}
+.ai-title {
+    font-size: 18px;
+    font-weight: bold;
+    flex-grow: 1;
+}
+.ai-tag {
+    background-color: rgba(255, 255, 255, 0.2);
+    padding: 3px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+}
+.ai-content {
+    padding: 20px;
+}
+.ai-explanation {
+    font-size: 16px;
+    line-height: 1.6;
+    color: #333;
+}
+.blinking-cursor {
+    display: inline-block;
+    width: 2px;
+    height: 20px;
+    background-color: #333;
+    animation: blink 0.7s infinite;
+    margin-left: 5px;
+}
+@keyframes blink {
+    0% { opacity: 0; }
+    50% { opacity: 1; }
+    100% { opacity: 0; }
+}
@@ -20,18 +20,32 @@ const Artalk = ({ siteInfo }) => {
 
   const initArtalk = async () => {
     await loadExternalResource(artalkCss, 'css')
-    window?.Artalk?.init({
-      server: artalkServer, // 后端地址
-      el: '#artalk', // 容器元素
+    const artalk = window?.Artalk?.init({
+      server: artalkServer,
+      el: '#artalk',
       locale: artalkLocale,
-      //   pageKey: '/post/1', // 固定链接 (留空自动获取)
-      //   pageTitle: '关于引入 Artalk 的这档子事', // 页面标题 (留空自动获取)
-      site: site // 你的站点名
+      site: site,
+      darkMode: document.documentElement.classList.contains('dark')
     })
+
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === 'class') {
+          const isDark = document.documentElement.classList.contains('dark')
+          artalk?.setDarkMode(isDark)
+        }
+      })
+    })
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    })
+
+    return () => observer.disconnect()
   }
-  return (
-        <div id="artalk"></div>
-  )
+
+  return <div id="artalk"></div>
 }
 
-export default Artalk
+export default Artalk
@@ -39,12 +39,10 @@ function requestAd(ads) {
 // 获取节点或其子节点中包含 adsbygoogle 类的节点
 function getNodesWithAdsByGoogleClass(node) {
   const adsNodes = []
+
   // 检查节点及其子节点是否包含 adsbygoogle 类
   function checkNodeForAds(node) {
-    if (
-      node.nodeType === Node.ELEMENT_NODE &&
-      node.classList.contains('adsbygoogle')
-    ) {
+    if (node.tagName === 'INS' && node.classList.contains('adsbygoogle')) {
       adsNodes.push(node)
     } else {
       // 递归检查子节点
@@ -53,6 +51,7 @@ function getNodesWithAdsByGoogleClass(node) {
       }
     }
   }
+
   checkNodeForAds(node)
   return adsNodes
 }
@@ -69,7 +68,7 @@ export const initGoogleAdsense = async ADSENSE_GOOGLE_ID => {
   ).then(url => {
     setTimeout(() => {
       // 页面加载完成后加载一次广告
-      const ads = document.getElementsByClassName('adsbygoogle')
+      const ads = document.querySelectorAll('ins.adsbygoogle')
       if (window.adsbygoogle && ads.length > 0) {
         requestAd(Array.from(ads))
       }
@@ -97,7 +96,11 @@ export const initGoogleAdsense = async ADSENSE_GOOGLE_ID => {
       }
 
       // 启动 MutationObserver
-      observer.observe(document.body, observerConfig)
+      observer.observe(
+        document.querySelector('#article-wrapper #notion-article') ||
+          document.body,
+        observerConfig
+      )
     }, 100)
   })
 }
@@ -174,43 +177,39 @@ const AdSlot = ({ type = 'show' }) => {
  * @param {*} props
  */
 const AdEmbed = () => {
+  const ADSENSE_GOOGLE_ID = siteConfig('ADSENSE_GOOGLE_ID')
+  const ADSENSE_GOOGLE_TEST = siteConfig('ADSENSE_GOOGLE_TEST')
+  const ADSENSE_GOOGLE_SLOT_AUTO = siteConfig('ADSENSE_GOOGLE_SLOT_AUTO')
   useEffect(() => {
     setTimeout(() => {
       // 找到所有 class 为 notion-text 且内容为 '<ins/>' 的 div 元素
-      const notionTextElements = document.querySelectorAll('div.notion-text')
-
+      const notionTextElements = document.querySelectorAll(
+        '#article-wrapper #notion-article div.notion-text'
+      )
       // 遍历找到的元素
       notionTextElements?.forEach(element => {
         // 检查元素的内容是否为 '<ins/>'
-        if (element.innerHTML.trim() === '&lt;ins/&gt;') {
+        if (element.textContent.trim() === '<ins/>') {
           // 创建新的 <ins> 元素
           const newInsElement = document.createElement('ins')
           newInsElement.className = 'adsbygoogle w-full py-1'
           newInsElement.style.display = 'block'
-          newInsElement.setAttribute(
-            'data-ad-client',
-            siteConfig('ADSENSE_GOOGLE_ID')
-          )
+          newInsElement.setAttribute('data-ad-client', ADSENSE_GOOGLE_ID)
           newInsElement.setAttribute(
             'data-adtest',
-            siteConfig('ADSENSE_GOOGLE_TEST') ? 'on' : 'off'
-          )
-          newInsElement.setAttribute(
-            'data-ad-slot',
-            siteConfig('ADSENSE_GOOGLE_SLOT_AUTO')
+            ADSENSE_GOOGLE_TEST ? 'on' : 'off'
           )
+          newInsElement.setAttribute('data-ad-slot', ADSENSE_GOOGLE_SLOT_AUTO)
           newInsElement.setAttribute('data-ad-format', 'auto')
           newInsElement.setAttribute('data-full-width-responsive', 'true')
 
           // 用新创建的 <ins> 元素替换掉原来的 div 元素
           element?.parentNode?.replaceChild(newInsElement, element)
         }
       })
-
-      requestAd()
     }, 1000)
   }, [])
   return <></>
 }
 
-export { AdEmbed, AdSlot }
+export { AdEmbed, AdSlot }
@@ -1,6 +1,6 @@
 import { siteConfig } from '@/lib/config'
 import { compressImage, mapImgUrl } from '@/lib/notion/mapImage'
-import { isBrowser } from '@/lib/utils'
+import { isBrowser, loadExternalResource } from '@/lib/utils'
 import mediumZoom from '@fisch0920/medium-zoom'
 import 'katex/dist/katex.min.css'
 import dynamic from 'next/dynamic'
@@ -17,6 +17,7 @@ const NotionPage = ({ post, className }) => {
   // 是否关闭数据库和画册的点击跳转
   const POST_DISABLE_GALLERY_CLICK = siteConfig('POST_DISABLE_GALLERY_CLICK')
   const POST_DISABLE_DATABASE_CLICK = siteConfig('POST_DISABLE_DATABASE_CLICK')
+  const SPOILER_TEXT_TAG = siteConfig('SPOILER_TEXT_TAG')
 
   const zoom =
     isBrowser &&
@@ -27,7 +28,7 @@ const NotionPage = ({ post, className }) => {
     })
 
   const zoomRef = useRef(zoom ? zoom.clone() : null)
-
+  const IMAGE_ZOOM_IN_WIDTH = siteConfig('IMAGE_ZOOM_IN_WIDTH', 1200)
   // 页面首次打开时执行的勾子
   useEffect(() => {
     // 检测当前的url并自动滚动到对应目标
@@ -64,7 +65,7 @@ const NotionPage = ({ post, className }) => {
               //   替换为更高清的图像
               mutation?.target?.setAttribute(
                 'src',
-                compressImage(src, siteConfig('IMAGE_ZOOM_IN_WIDTH', 1200))
+                compressImage(src, IMAGE_ZOOM_IN_WIDTH)
               )
             }, 800)
           }
@@ -84,6 +85,21 @@ const NotionPage = ({ post, className }) => {
     }
   }, [post])
 
+  useEffect(() => {
+    // Spoiler文本功能
+    if (SPOILER_TEXT_TAG) {
+      import('lodash/escapeRegExp').then(escapeRegExp => {
+        Promise.all([
+          loadExternalResource('/js/spoilerText.js', 'js'),
+          loadExternalResource('/css/spoiler-text.css', 'css')
+        ]).then(() => {
+          window.textToSpoiler &&
+            window.textToSpoiler(escapeRegExp.default(SPOILER_TEXT_TAG))
+        })
+      })
+    }
+  }, [post])
+
   return (
     <div
       id='notion-article'
@@ -150,7 +166,7 @@ const autoScrollToHash = () => {
   setTimeout(() => {
     // 跳转到指定标题
     const hash = window?.location?.hash
-    const needToJumpToTitle = hash && hash > 0
+    const needToJumpToTitle = hash && hash.length > 0
     if (needToJumpToTitle) {
       console.log('jump to hash', hash)
       const tocNode = document.getElementById(hash.substring(1))
@@ -263,4 +279,4 @@ const Tweet = ({ id }) => {
   return <TweetEmbed tweetId={id} />
 }
 
-export default NotionPage
+export default NotionPage
@@ -71,10 +71,9 @@ const Player = () => {
           fixed='true'
           type='playlist'
           preload='auto'
-          lrc-type={siteConfig('MUSIC_PLAYER_METING_LRC_TYPE')}
           api={siteConfig(
             'MUSIC_PLAYER_METING_API',
-            'https://api.i-meto.com/meting/api'
+            'https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r'
           )}
           autoplay={autoPlay}
           order={siteConfig('MUSIC_PLAYER_ORDER')}
@@ -88,4 +87,4 @@ const Player = () => {
   )
 }
 
-export default Player
+export default Player