Merge branch 'main' into pr/jxpeng98/1257

2026-06-02 23:16:51 +00:00 · 2023-07-26 18:43:34 +08:00
parent fcd4a69289 7d8e4c4fc5
commit 5cf74fcf11
238 changed files with 7817 additions and 1027 deletions
--- a/components/PrismMac.js
+++ b/components/PrismMac.js
@@ -13,68 +13,55 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 import BLOG from '@/blog.config'
 import { loadExternalResource } from '@/lib/utils'
 import { useRouter } from 'next/navigation'
+import { useGlobal } from '@/lib/global'

 /**
+ * 代码美化相关
 * @author https://github.com/txs/
 * @returns
 */
 const PrismMac = () => {
  const router = useRouter()
+  const { isDarkMode } = useGlobal()
+
  useEffect(() => {
-    const handleDarkModeChange = () => {
-      // 加载prism样式
-      loadPrismThemeCSS()
-      if (JSON.parse(BLOG.CODE_MAC_BAR)) {
-        loadExternalResource('/css/prism-mac-style.css', 'css')
+    if (JSON.parse(BLOG.CODE_MAC_BAR)) {
+      loadExternalResource('/css/prism-mac-style.css', 'css')
+    }
+    // 加载prism样式
+    loadPrismThemeCSS(isDarkMode)
+    // 折叠代码
+    loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => {
+      if (window?.Prism?.plugins?.autoloader) {
+        window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
      }
-      loadExternalResource(BLOG.PRISM_JS_AUTO_LOADER, 'js').then((url) => {
-        if (window?.Prism?.plugins?.autoloader) {
-          window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH
-        }
-        renderPrismMac()
-        renderMermaid()
-      })
-    }
-    handleDarkModeChange()

-    const handleDarkModeToggle = () => {
-      const currentTheme = document.documentElement.className
-      handleDarkModeChange()
-      document.documentElement.className = currentTheme === 'light' ? 'dark' : 'light'
-    }
+      renderPrismMac()
+      renderMermaid()
+      renderCollapseCode()
+    })
+  }, [router, isDarkMode])

-    const darkModeSwitchButton = document.getElementById('darkModeButton')
-    darkModeSwitchButton.addEventListener('click', handleDarkModeToggle)
-
-    return () => {
-      darkModeSwitchButton.removeEventListener('click', handleDarkModeToggle)
-    }
-  }, [router])
  return <></>
 }

 /**
 * 加载样式
 */
-const loadPrismThemeCSS = () => {
+const loadPrismThemeCSS = (isDarkMode) => {
  let PRISM_THEME
  let PRISM_PREVIOUS
-  const themeClass = document.documentElement.className
  if (JSON.parse(BLOG.PRISM_THEME_SWITCH)) {
-    if (themeClass === 'dark') {
+    if (isDarkMode) {
      PRISM_THEME = BLOG.PRISM_THEME_DARK_PATH
      PRISM_PREVIOUS = BLOG.PRISM_THEME_LIGHT_PATH
-      const previousTheme = document.querySelector(`link[href="${PRISM_PREVIOUS}"]`)
-      if (previousTheme) {
-        previousTheme.parentNode.removeChild(previousTheme)
-      }
    } else {
      PRISM_THEME = BLOG.PRISM_THEME_LIGHT_PATH
      PRISM_PREVIOUS = BLOG.PRISM_THEME_DARK_PATH
-      const previousTheme = document.querySelector(`link[href="${PRISM_PREVIOUS}"]`)
-      if (previousTheme) {
-        previousTheme.parentNode.removeChild(previousTheme)
-      }
+    }
+    const previousTheme = document.querySelector(`link[href="${PRISM_PREVIOUS}"]`)
+    if (previousTheme) {
+      previousTheme.parentNode.removeChild(previousTheme)
    }
    loadExternalResource(PRISM_THEME, 'css')
  } else {
@@ -82,6 +69,52 @@ const loadPrismThemeCSS = () => {
  }
 }

+/*
+ * 将代码块转为可折叠对象
+ */
+const renderCollapseCode = () => {
+  if (!JSON.parse(BLOG.CODE_COLLAPSE)) {
+    return
+  }
+  const codeBlocks = document.querySelectorAll('.code-toolbar')
+  for (const codeBlock of codeBlocks) {
+    // 判断当前元素是否被包裹
+    if (codeBlock.closest('.collapse-wrapper')) {
+      continue // 如果被包裹了，跳过当前循环
+    }
+
+    const code = codeBlock.querySelector('code')
+    const language = code.getAttribute('class').match(/language-(\w+)/)[1]
+
+    const collapseWrapper = document.createElement('div')
+    collapseWrapper.className = 'collapse-wrapper w-full py-2'
+    const panelWrapper = document.createElement('div')
+    panelWrapper.className = 'border dark:border-gray-600 rounded-md hover:border-indigo-500 duration-200 transition-colors'
+
+    const header = document.createElement('div')
+    header.className = 'flex justify-between items-center px-4 py-2 cursor-pointer select-none'
+    header.innerHTML = `<h3 class="text-lg font-medium">${language}</h3><svg class="transition-all duration-200 w-5 h-5 transform rotate-0" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6.293 6.293a1 1 0 0 1 1.414 0L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z" clip-rule="evenodd"/></svg>`
+
+    const panel = document.createElement('div')
+    panel.className = 'invisible h-0 transition-transform duration-200 border-t border-gray-300'
+
+    panelWrapper.appendChild(header)
+    panelWrapper.appendChild(panel)
+    collapseWrapper.appendChild(panelWrapper)
+
+    codeBlock.parentNode.insertBefore(collapseWrapper, codeBlock)
+    panel.appendChild(codeBlock)
+
+    header.addEventListener('click', () => {
+      panel.classList.toggle('invisible')
+      panel.classList.toggle('h-0')
+      panel.classList.toggle('h-auto')
+      header.querySelector('svg').classList.toggle('rotate-180')
+      panelWrapper.classList.toggle('border-gray-300')
+    })
+  }
+}
+
 /**
 * 将mermaid语言 渲染成图片
 */
@@ -116,13 +149,13 @@ const renderMermaid = async() => {
      }
    }
  })
-  if (document.querySelector('#container-inner')) {
-    observer.observe(document.querySelector('#container-inner'), { attributes: true, subtree: true })
+  if (document.querySelector('#notion-article')) {
+    observer.observe(document.querySelector('#notion-article'), { attributes: true, subtree: true })
  }
 }

 function renderPrismMac() {
-  const container = document?.getElementById('container-inner')
+  const container = document?.getElementById('notion-article')

  // Add line numbers
  if (BLOG.CODE_LINE_NUMBERS === 'true') {
@@ -179,11 +212,11 @@ const fixCodeLineStyle = () => {
      }
    }
  })
-  observer.observe(document.querySelector('#container'), { attributes: true, subtree: true })
+  observer.observe(document.querySelector('#notion-article'), { attributes: true, subtree: true })
  setTimeout(() => {
    const preCodes = document.querySelectorAll('pre.notion-code')
    for (const preCode of preCodes) {
-      console.log('code', preCode)
+    //   console.log('code', preCode)
      Prism.plugins.lineNumbers.resize(preCode)
    }
  }, 10)