nnbb 0.0.1

package/components/Nest.js

@@ -0,0 +1,124 @@
+/* eslint-disable */
+import { useEffect } from 'react'
+const id = 'canvasNestCreated'
+const Nest = () => {
+  const destroyNest = ()=>{
+      const nest = document.getElementById(id)
+      if(nest && nest.parentNode){
+        nest.parentNode.removeChild(nest)
+      }
+  }
+
+  useEffect(() => {
+    createNest()
+    return () => destroyNest()
+  }, [])
+  return <></>
+}
+
+export default Nest
+
+/**
+ * 创建连接点
+ * @param config
+ */
+function createNest() {
+  const e = document.getElementById('__next')
+  if(!e) return
+  function n(e, n, t) {
+    return e.getAttribute(n) || t
+  }
+  function t() {
+    ;(u = i.width =
+      window.innerWidth ||
+      document.documentElement.clientWidth ||
+      document.body.clientWidth),
+      (d = i.height =
+        window.innerHeight ||
+        document.documentElement.clientHeight ||
+        document.body.clientHeight)
+  }
+  function o() {
+    c.clearRect(0, 0, u, d)
+    const e = [s].concat(x)
+    let n, t, i, l, r, w
+    x.forEach(function (o) {
+      for (
+        o.x += o.xa,
+          o.y += o.ya,
+          o.xa *= o.x > u || o.x < 0 ? -1 : 1,
+          o.ya *= o.y > d || o.y < 0 ? -1 : 1,
+          c.fillRect(o.x - 0.5, o.y - 0.5, 1, 1),
+          t = 0;
+        t < e.length;
+        t++
+      )
+        (n = e[t]),
+          o !== n &&
+            null !== n.x &&
+            null !== n.y &&
+            ((l = o.x - n.x),
+            (r = o.y - n.y),
+            (w = l * l + r * r),
+            w < n.max &&
+              (n === s &&
+                w >= n.max / 2 &&
+                ((o.x -= 0.03 * l), (o.y -= 0.03 * r)),
+              (i = (n.max - w) / n.max),
+              c.beginPath(),
+              (c.lineWidth = i / 2),
+              (c.strokeStyle = 'rgba(' + a.c + ',' + (i + 0.2) + ')'),
+              c.moveTo(o.x, o.y),
+              c.lineTo(n.x, n.y),
+              c.stroke()))
+      e.splice(e.indexOf(o), 1)
+    }),
+      m(o)
+  }
+  var i = document.createElement('canvas')
+  i.id = id
+  var a = (function () {
+      const t = e
+      return {
+        z: n(t, 'zIndex', 0),
+        o: n(t, 'opacity', 0.7),
+        c: n(t, 'color', '0,0,0'),
+        n: n(t, 'count', 99)
+      }
+    })(),
+    c = i.getContext('2d')
+  let u, d
+  var m =
+    window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.oRequestAnimationFrame ||
+    window.msRequestAnimationFrame ||
+    function (e) {
+      window.setTimeout(e, 1e3 / 45)
+    }
+  const l = Math.random
+  var r,
+    s = { x: null, y: null, max: 2e4 }
+  ;(i.style.cssText =
+    'position:fixed;top:0;left:0;pointer-events:none;z-index:' + a.z + ';opacity:' + a.o),
+    (r = 'body'), e.appendChild(i),
+    t(),
+    (window.onresize = t),
+    (window.onmousemove = function (e) {
+      ;(e = e || window.event), (s.x = e.clientX), (s.y = e.clientY)
+    }),
+    (window.onmouseout = function () {
+      ;(s.x = null), (s.y = null)
+    })
+  for (var x = [], w = 0; a.n > w; w++) {
+    const e = l() * u,
+      n = l() * d,
+      t = 2 * l() - 1,
+      o = 2 * l() - 1
+    x.push({ x: e, y: n, xa: t, ya: o, max: 6e3 })
+  }
+  setTimeout(function () {
+    o()
+  }, 100)
+}

package/components/NotionIcon.js

@@ -0,0 +1,20 @@
+import LazyImage from './LazyImage'
+
+/**
+ * notion的图标icon
+ * 可能是emoji 可能是 svg 也可能是 图片
+ * @returns
+ */
+const NotionIcon = ({ icon }) => {
+  if (!icon) {
+    return <></>
+  }
+
+  if (icon.startsWith('http') || icon.startsWith('data:')) {
+    return <LazyImage src={icon} className='w-8 h-8 my-auto inline mr-1'/>
+  }
+
+  return <span className='mr-1'>{icon}</span>
+}
+
+export default NotionIcon

package/components/NotionPage.tsx

@@ -0,0 +1,206 @@
+import { NotionRenderer } from 'react-notion-x';
+import dynamic from 'next/dynamic';
+import mediumZoom from 'medium-zoom';
+import React, { type FC, useEffect, useRef } from 'react';
+// import { Code } from 'react-notion-x/build/third-party/code'
+import TweetEmbed from 'react-tweet-embed';
+
+import BLOG from '@/blog.config';
+import 'katex/dist/katex.min.css';
+import { mapImgUrl } from '@/lib/notion/mapImage';
+import { isBrowser } from '@/lib/utils';
+
+import type { PageInfo } from '@/lib/notion/types';
+
+const Code = dynamic(
+  () =>
+    import('react-notion-x/build/third-party/code').then(async (m) => {
+      return m.Code;
+    }),
+  { ssr: false },
+);
+
+const Equation = dynamic(
+  () =>
+    import('@/components/Equation').then(async (m) => {
+      // 化学方程式
+      await import('@/lib/mhchem');
+      return m.Equation;
+    }),
+  { ssr: false },
+);
+
+const Pdf = dynamic(
+  () => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf),
+  {
+    ssr: false,
+  },
+);
+
+// https://github.com/txs
+// import PrismMac from '@/components/PrismMac'
+const PrismMac = dynamic(() => import('@/components/PrismMac'), {
+  ssr: false,
+});
+
+const Collection = dynamic(
+  () =>
+    import('react-notion-x/build/third-party/collection').then(
+      (m) => m.Collection,
+    ),
+  { ssr: true },
+);
+
+const Modal = dynamic(
+  () => import('react-notion-x/build/third-party/modal').then((m) => m.Modal),
+  { ssr: false },
+);
+
+const Tweet: FC<{
+  id: string;
+}> = ({ id }) => {
+  return <TweetEmbed tweetId={id} />;
+};
+
+const NotionPage: FC<{
+  post: PageInfo;
+  className?: string;
+}> = ({ post, className = '' }) => {
+  useEffect(() => {
+    autoScrollToTarget();
+  }, []);
+
+  const zoom =
+    typeof window !== 'undefined' &&
+    mediumZoom({
+      container: '.notion-viewport',
+      background: 'rgba(0, 0, 0, 0.2)',
+      margin: getMediumZoomMargin(),
+    });
+  const zoomRef = useRef(zoom ? zoom.clone() : null);
+
+  useEffect(() => {
+    // 将相册gallery下的图片加入放大功能
+    if (BLOG.POST_DISABLE_GALLERY_CLICK) {
+      setTimeout(() => {
+        if (isBrowser) {
+          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] as HTMLElement);
+            }
+          }
+
+          const cards = document.getElementsByClassName(
+            'notion-collection-card',
+          );
+          for (const e of cards) {
+            e.removeAttribute('href');
+          }
+        }
+      }, 800);
+    }
+
+    /**
+     * 处理页面内连接跳转
+     * 如果链接就是当前网站，则不打开新窗口访问
+     */
+    if (isBrowser) {
+      const currentURL = window.location.origin + window.location.pathname;
+      const allAnchorTags = document.getElementsByTagName('a'); // 或者使用 document.querySelectorAll('a') 获取 NodeList
+      for (const anchorTag of allAnchorTags) {
+        if (anchorTag?.target === '_blank') {
+          const hrefWithoutQueryHash = anchorTag.href
+            .split('?')[0]
+            .split('#')[0];
+          const hrefWithRelativeHash =
+            currentURL.split('#')[0] + anchorTag.href.split('#')[1];
+
+          if (
+            currentURL === hrefWithoutQueryHash ||
+            currentURL === hrefWithRelativeHash
+          ) {
+            anchorTag.target = '_self';
+          }
+        }
+      }
+    }
+  }, []);
+
+  if (!post || !post.blockMap) {
+    return <>{post?.summary || ''}</>;
+  }
+
+  return (
+    <div id="notion-article" className={`mx-auto overflow-hidden ${className}`}>
+      <NotionRenderer
+        recordMap={post.blockMap}
+        mapPageUrl={mapPageUrl}
+        mapImageUrl={mapImgUrl}
+        components={{
+          Code,
+          Collection,
+          Equation,
+          Modal,
+          Pdf,
+          Tweet,
+        }}
+      />
+
+      <PrismMac />
+    </div>
+  );
+};
+
+/**
+ * 根据url参数自动滚动到指定区域
+ */
+const autoScrollToTarget = () => {
+  setTimeout(() => {
+    // 跳转到指定标题
+    const needToJumpToTitle = window.location.hash;
+    if (needToJumpToTitle) {
+      const tocNode = document.getElementById(
+        window.location.hash.substring(1),
+      );
+      if (tocNode && tocNode?.className?.indexOf('notion') > -1) {
+        tocNode.scrollIntoView({ block: 'start', behavior: 'smooth' });
+      }
+    }
+  }, 180);
+};
+
+/**
+ * 将id映射成博文内部链接。
+ * @param {*} id
+ * @returns
+ */
+const mapPageUrl = (id: string) => {
+  // return 'https://www.notion.so/' + id.replace(/-/g, '')
+  return '/' + id.replace(/-/g, '');
+};
+
+/**
+ * 缩放
+ * @returns
+ */
+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;

package/components/Player.js

@@ -0,0 +1,54 @@
+import BLOG from '@/blog.config'
+import { useEffect, useRef, useState } from 'react'
+
+const Player = () => {
+  const [player, setPlayer] = useState()
+  const ref = useRef(null)
+
+  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)
+
+  const meting = JSON.parse(BLOG.MUSIC_PLAYER_METING)
+
+  useEffect(() => {
+    if (!meting && window.APlayer) {
+      setPlayer(new window.APlayer({
+        container: ref.current,
+        fixed: true,
+        lrcType: lrcType,
+        autoplay: autoPlay,
+        order: BLOG.MUSIC_PLAYER_ORDER,
+        audio: BLOG.MUSIC_PLAYER_AUDIO_LIST
+      }))
+    }
+    return () => {
+      setPlayer(undefined)
+    }
+  }, [])
+
+  return (
+    <div className={playerVisible ? 'visible' : 'invisible'}>
+      <link
+        rel="stylesheet"
+        type="text/css"
+        href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css"
+      />
+      {meting
+        ? <meting-js
+            fixed="true"
+            type="playlist"
+            preload="auto"
+            lrc-type={BLOG.MUSIC_PLAYER_METING_LRC_TYPE}
+            autoplay={autoPlay}
+            order={BLOG.MUSIC_PLAYER_ORDER}
+            server={BLOG.MUSIC_PLAYER_METING_SERVER}
+            id={BLOG.MUSIC_PLAYER_METING_ID}
+          />
+        : <div ref={ref} data-player={player} />
+      }
+    </div>
+  )
+}
+
+export default Player

package/components/PrismMac.js

@@ -0,0 +1,236 @@
+import { useEffect } from 'react';
+import Prism from 'prismjs';
+// 所有语言的prismjs 使用autoloader引入
+// import 'prismjs/plugins/autoloader/prism-autoloader'
+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';
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
+
+// mermaid图
+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(() => {
+    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(() => {
+      if (window?.Prism?.plugins?.autoloader) {
+        window.Prism.plugins.autoloader.languages_path = BLOG.PRISM_JS_PATH;
+      }
+
+      renderPrismMac();
+      renderMermaid();
+      renderCollapseCode();
+    });
+  }, [router, isDarkMode]);
+
+  return <></>;
+};
+
+/**
+ * 加载样式
+ */
+const loadPrismThemeCSS = (isDarkMode) => {
+  let PRISM_THEME;
+  let PRISM_PREVIOUS;
+  if (JSON.parse(BLOG.PRISM_THEME_SWITCH)) {
+    if (isDarkMode) {
+      PRISM_THEME = BLOG.PRISM_THEME_DARK_PATH;
+      PRISM_PREVIOUS = BLOG.PRISM_THEME_LIGHT_PATH;
+    } 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);
+    }
+    loadExternalResource(PRISM_THEME, 'css');
+  } else {
+    loadExternalResource(BLOG.PRISM_THEME_PREFIX_PATH, 'css');
+  }
+};
+
+/*
+ * 将代码块转为可折叠对象
+ */
+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语言 渲染成图片
+ */
+const renderMermaid = async () => {
+  const observer = new MutationObserver(async (mutationsList) => {
+    for (const m of mutationsList) {
+      if (m.target.className === 'notion-code language-mermaid') {
+        const chart = m.target.querySelector('code').textContent;
+        if (chart && !m.target.querySelector('.mermaid')) {
+          const mermaidChart = document.createElement('div');
+          mermaidChart.className = 'mermaid';
+          mermaidChart.innerHTML = chart;
+          m.target.appendChild(mermaidChart);
+        }
+
+        const mermaidsSvg = document.querySelectorAll('.mermaid');
+        if (mermaidsSvg) {
+          let needLoad = false;
+          for (const e of mermaidsSvg) {
+            if (e?.firstChild?.nodeName !== 'svg') {
+              needLoad = true;
+            }
+          }
+          if (needLoad) {
+            loadExternalResource(BLOG.MERMAID_CDN, 'js').then(() => {
+              setTimeout(() => {
+                const mermaid = window.mermaid;
+                mermaid?.contentLoaded();
+              }, 100);
+            });
+          }
+        }
+      }
+    }
+  });
+  if (document.querySelector('#notion-article')) {
+    observer.observe(document.querySelector('#notion-article'), {
+      attributes: true,
+      subtree: true,
+    });
+  }
+};
+
+function renderPrismMac() {
+  const container = document?.getElementById('notion-article');
+
+  // Add line numbers
+  if (JSON.parse(BLOG.CODE_LINE_NUMBERS)) {
+    const codeBlocks = container?.getElementsByTagName('pre');
+    if (codeBlocks) {
+      Array.from(codeBlocks).forEach((item) => {
+        if (!item.classList.contains('line-numbers')) {
+          item.classList.add('line-numbers');
+          item.style.whiteSpace = 'pre-wrap';
+        }
+      });
+    }
+  }
+  // 重新渲染之前检查所有的多余text
+
+  try {
+    Prism.highlightAll();
+  } catch (err) {
+    console.log('代码渲染', err);
+  }
+
+  const codeToolBars = container?.getElementsByClassName('code-toolbar');
+  // Add pre-mac element for Mac Style UI
+  if (codeToolBars) {
+    Array.from(codeToolBars).forEach((item) => {
+      const existPreMac = item.getElementsByClassName('pre-mac');
+      if (existPreMac.length < codeToolBars.length) {
+        const preMac = document.createElement('div');
+        preMac.classList.add('pre-mac');
+        preMac.innerHTML = '<span></span><span></span><span></span>';
+        item?.appendChild(preMac, item);
+      }
+    });
+  }
+
+  // 折叠代码行号bug
+  if (JSON.parse(BLOG.CODE_LINE_NUMBERS)) {
+    fixCodeLineStyle();
+  }
+}
+
+/**
+ * 行号样式在首次渲染或被detail折叠后行高判断错误
+ * 在此手动resize计算
+ */
+const fixCodeLineStyle = () => {
+  const observer = new MutationObserver((mutationsList) => {
+    for (const m of mutationsList) {
+      if (m.target.nodeName === 'DETAILS') {
+        const preCodes = m.target.querySelectorAll('pre.notion-code');
+        for (const preCode of preCodes) {
+          Prism.plugins.lineNumbers.resize(preCode);
+        }
+      }
+    }
+  });
+  observer.observe(document.querySelector('#notion-article'), {
+    attributes: true,
+    subtree: true,
+  });
+  setTimeout(() => {
+    const preCodes = document.querySelectorAll('pre.notion-code');
+    for (const preCode of preCodes) {
+      Prism.plugins.lineNumbers.resize(preCode);
+    }
+  }, 10);
+};
+
+export default PrismMac;

package/components/QrCode.js

@@ -0,0 +1,34 @@
+import BLOG from '@/blog.config';
+import { loadExternalResource } from '@/lib/utils';
+import { useEffect } from 'react';
+
+/**
+ * 二维码生成
+ */
+export default function QrCode({ value }) {
+  useEffect(() => {
+    let qrcode;
+    if (!value) {
+      return;
+    }
+    loadExternalResource(BLOG.QR_CODE_CDN, 'js').then(() => {
+      const QRCode = window.QRCode;
+      qrcode = new QRCode(document.getElementById('qrcode'), {
+        text: value,
+        width: 256,
+        height: 256,
+        colorDark: '#000000',
+        colorLight: '#ffffff',
+        correctLevel: QRCode.CorrectLevel.H,
+      });
+      //   console.log('二维码', qrcode, value)
+    });
+    return () => {
+      if (qrcode) {
+        qrcode.clear(); // clear the code.
+      }
+    };
+  }, []);
+
+  return <div id="qrcode"></div>;
+}