nnbb 0.0.1

package/components/Draggable.js

@@ -0,0 +1,167 @@
+import { useRef, useEffect, useState } from 'react';
+/**
+ * 可拖拽组件
+ */
+
+export const Draggable = (props) => {
+  const { children } = props;
+  const draggableRef = useRef(null);
+  const rafRef = useRef(null);
+  const [moving, setMoving] = useState(false);
+  let currentObj, offsetX, offsetY;
+
+  useEffect(() => {
+    const draggableElements = document.getElementsByClassName('draggable');
+
+    // 标准化鼠标事件对象
+    function e(event) {
+      // 定义事件对象标准化函数
+      if (!event) {
+        // 兼容IE浏览器
+        event = window.event;
+        event.target = event.srcElement;
+        event.layerX = event.offsetX;
+        event.layerY = event.offsetY;
+      }
+      // 移动端
+      if (event.type === 'touchstart' || event.type === 'touchmove') {
+        event.clientX = event.touches[0].clientX;
+        event.clientY = event.touches[0].clientY;
+      }
+
+      event.mx = event.pageX || event.clientX + document.body.scrollLeft;
+      // 计算鼠标指针的x轴距离
+      event.my = event.pageY || event.clientY + document.body.scrollTop;
+      // 计算鼠标指针的y轴距离
+
+      return event; // 返回标准化的事件对象
+    }
+
+    // 定义鼠标事件处理函数
+    // document.pointerdown = start
+    document.onmousedown = start;
+    document.ontouchstart = start;
+
+    function start(event) {
+      // 按下鼠标时，初始化处理
+      if (!draggableElements) return;
+      event = e(event); // 获取标准事件对象
+
+      for (const drag of draggableElements) {
+        // 判断鼠标点击的区域是否是拖拽框内
+        if (inDragBox(event, drag)) {
+          currentObj = drag.firstElementChild;
+        }
+      }
+      if (currentObj) {
+        if (event.type === 'touchstart') {
+          event.preventDefault(); // 阻止默认的滚动行为
+          document.documentElement.style.overflow = 'hidden'; // 防止页面一起滚动
+        }
+
+        setMoving(true);
+        offsetX = event.mx - currentObj.offsetLeft;
+        offsetY = event.my - currentObj.offsetTop;
+
+        document.onmousemove = move; // 注册鼠标移动事件处理函数
+        document.ontouchmove = move;
+        document.onmouseup = stop; // 注册松开鼠标事件处理函数
+        document.ontouchend = stop;
+      }
+    }
+
+    function move(event) {
+      // 鼠标移动处理函数
+      event = e(event);
+      rafRef.current = requestAnimationFrame(() => updatePosition(event));
+    }
+
+    const stop = () => {
+      document.documentElement.style.overflow = 'auto'; // 恢复默认的滚动行为
+      cancelAnimationFrame(rafRef.current);
+      setMoving(false);
+      currentObj =
+        document.ontouchmove =
+        document.ontouchend =
+        document.onmousemove =
+        document.onmouseup =
+          null;
+    };
+
+    const updatePosition = (event) => {
+      if (currentObj) {
+        const left = event.mx - offsetX;
+        const top = event.my - offsetY;
+        currentObj.style.left = left + 'px';
+        currentObj.style.top = top + 'px';
+        checkInWindow();
+      }
+    };
+
+    /**
+     * 鼠标是否在可拖拽区域内
+     * @param {*} event
+     * @returns
+     */
+    function inDragBox(event, drag) {
+      const { clientX, clientY } = event; // 鼠标位置
+      const { offsetHeight, offsetWidth, offsetTop, offsetLeft } =
+        drag.firstElementChild; // 窗口位置
+      const horizontal =
+        clientX > offsetLeft && clientX < offsetLeft + offsetWidth;
+      const vertical =
+        clientY > offsetTop && clientY < offsetTop + offsetHeight;
+
+      if (horizontal && vertical) {
+        return true;
+      }
+
+      return false;
+    }
+
+    /**
+     * 若超出窗口则吸附。
+     */
+    function checkInWindow() {
+      // 检查是否悬浮在窗口内
+      for (const drag of draggableElements) {
+        // 判断鼠标点击的区域是否是拖拽框内
+        const { offsetHeight, offsetWidth, offsetTop, offsetLeft } =
+          drag.firstElementChild;
+        const { clientHeight, clientWidth } = document.documentElement;
+        if (offsetTop < 0) {
+          drag.firstElementChild.style.top = 0;
+        }
+        if (offsetTop > clientHeight - offsetHeight) {
+          drag.firstElementChild.style.top = clientHeight - offsetHeight + 'px';
+        }
+        if (offsetLeft < 0) {
+          drag.firstElementChild.style.left = 0;
+        }
+        if (offsetLeft > clientWidth - offsetWidth) {
+          drag.firstElementChild.style.left = clientWidth - offsetWidth + 'px';
+        }
+      }
+    }
+
+    window.addEventListener('resize', checkInWindow);
+
+    return () => {
+      return () => {
+        window.removeEventListener('resize', checkInWindow);
+        cancelAnimationFrame(rafRef.current);
+      };
+    };
+  }, []);
+
+  return (
+    <div
+      className={`draggable ${moving ? 'cursor-grabbing' : 'cursor-grab'} select-none`}
+      ref={draggableRef}
+    >
+      {children}
+    </div>
+  );
+};
+
+Draggable.defaultProps = { left: 0, top: 0 };

package/components/Equation.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import Katex from '@/components/KatexReact';
+import { getBlockTitle } from 'notion-utils';
+
+const katexSettings = {
+  throwOnError: false,
+  strict: false,
+};
+
+export const Equation = ({
+  block,
+  math,
+  inline = false,
+  className,
+  ...rest
+}) => {
+  //   const { recordMap } = useNotionContext()
+  math = math || getBlockTitle(block, null);
+  if (!math) return null;
+
+  return (
+    <span
+      role="button"
+      tabIndex={0}
+      className={`notion-equation ${inline ? 'notion-equation-inline' : 'notion-equation-block'} ${className}`}
+    >
+      <Katex math={math} settings={katexSettings} {...rest} />
+    </span>
+  );
+};

package/components/ExternalPlugins.js

@@ -0,0 +1,75 @@
+import BLOG from 'blog.config';
+import dynamic from 'next/dynamic';
+import WebWhiz from './Webwhiz';
+
+// import TwikooCommentCounter from '@/components/TwikooCommentCounter'
+// import { DebugPanel } from '@/components/DebugPanel'
+// import { ThemeSwitch } from '@/components/ThemeSwitch'
+// import { Fireworks } from '@/components/Fireworks'
+// import { Nest } from '@/components/Nest'
+// import { FlutteringRibbon } from '@/components/FlutteringRibbon'
+// import { Ribbon } from '@/components/Ribbon'
+// import { Sakura } from '@/components/Sakura'
+// import { StarrySky } from '@/components/StarrySky'
+// import { Analytics } from '@vercel/analytics/react'
+
+const TwikooCommentCounter = dynamic(() => import('@/components/TwikooCommentCounter'), { ssr: false });
+const DebugPanel = dynamic(() => import('@/components/DebugPanel'), { ssr: false });
+const ThemeSwitch = dynamic(() => import('@/components/ThemeSwitch'), { ssr: false });
+const Fireworks = dynamic(() => import('@/components/Fireworks'), { ssr: false });
+const Nest = dynamic(() => import('@/components/Nest'), { ssr: false });
+const FlutteringRibbon = dynamic(() => import('@/components/FlutteringRibbon'), { ssr: false });
+const Ribbon = dynamic(() => import('@/components/Ribbon'), { ssr: false });
+const Sakura = dynamic(() => import('@/components/Sakura'), { ssr: false });
+const StarrySky = dynamic(() => import('@/components/StarrySky'), { ssr: false });
+const Analytics = dynamic(
+  () =>
+    import('@vercel/analytics/react').then(async (m) => {
+      return m.Analytics;
+    }),
+  { ssr: false },
+);
+const MusicPlayer = dynamic(() => import('@/components/Player'), { ssr: false });
+const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false });
+const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false });
+const Busuanzi = dynamic(() => import('@/components/Busuanzi'), { ssr: false });
+const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr: false });
+const Messenger = dynamic(() => import('@/components/FacebookMessenger'), { ssr: false });
+const VConsole = dynamic(() => import('@/components/VConsole'), { ssr: false });
+const CustomContextMenu = dynamic(() => import('@/components/CustomContextMenu'), { ssr: false });
+const DisableCopy = dynamic(() => import('@/components/DisableCopy'), { ssr: false });
+const AdBlockDetect = dynamic(() => import('@/components/AdBlockDetect'), { ssr: false });
+/**
+ * 各种第三方组件
+ * @param {*} props
+ * @returns
+ */
+const ExternalPlugin = (props) => {
+  return (
+    <>
+      {JSON.parse(BLOG.THEME_SWITCH) && <ThemeSwitch />}
+      {JSON.parse(BLOG.DEBUG) && <DebugPanel />}
+      {BLOG.ANALYTICS_ACKEE_TRACKER && <Ackee />}
+      {BLOG.ANALYTICS_GOOGLE_ID && <Gtag />}
+      {BLOG.ANALYTICS_VERCEL && <Analytics />}
+      {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <Busuanzi />}
+      {BLOG.ADSENSE_GOOGLE_ID && <GoogleAdsense />}
+      {BLOG.FACEBOOK_APP_ID && BLOG.FACEBOOK_PAGE_ID && <Messenger />}
+      {JSON.parse(BLOG.FIREWORKS) && <Fireworks />}
+      {JSON.parse(BLOG.SAKURA) && <Sakura />}
+      {JSON.parse(BLOG.STARRY_SKY) && <StarrySky />}
+      {JSON.parse(BLOG.MUSIC_PLAYER) && <MusicPlayer />}
+      {JSON.parse(BLOG.NEST) && <Nest />}
+      {JSON.parse(BLOG.FLUTTERINGRIBBON) && <FlutteringRibbon />}
+      {JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE) && <TwikooCommentCounter {...props} />}
+      {JSON.parse(BLOG.RIBBON) && <Ribbon />}
+      {JSON.parse(BLOG.CUSTOM_RIGHT_CLICK_CONTEXT_MENU) && <CustomContextMenu {...props} />}
+      {!JSON.parse(BLOG.CAN_COPY) && <DisableCopy />}
+      {JSON.parse(BLOG.WEB_WHIZ_ENABLED) && <WebWhiz />}
+      {JSON.parse(BLOG.AD_WWADS_BLOCK_DETECT) && <AdBlockDetect />}
+      <VConsole />
+    </>
+  );
+};
+
+export default ExternalPlugin;

package/components/ExternalScript.js

@@ -0,0 +1,29 @@
+'use client'
+
+import { isBrowser } from '@/lib/utils'
+
+/**
+ * 自定义外部 script
+ * 传入参数将转为 <script>标签。
+ * @returns
+ */
+const ExternalScript = (props) => {
+  const { src } = props
+  if (!isBrowser || !src) {
+    return null
+  }
+
+  const element = document.querySelector(`script[src="${src}"]`)
+  if (element) {
+    return null
+  }
+  const script = document.createElement('script')
+  Object.entries(props).forEach(([key, value]) => {
+    script.setAttribute(key, value)
+  })
+  document.head.appendChild(script)
+  console.log('加载外部脚本', props, script)
+  return null
+}
+
+export default ExternalScript

package/components/FacebookMessenger.js

@@ -0,0 +1,255 @@
+import BLOG from '@/blog.config'
+import { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default function Messenger() {
+  return <MessengerCustomerChat
+    pageId={BLOG.FACEBOOK_PAGE_ID}
+    appId={BLOG.FACEBOOK_APP_ID}
+    language={BLOG.LANG.replace('-', '_')}
+    shouldShowDialog={true}
+  />
+}
+
+/**
+ * @see https://github.com/Yoctol/react-messenger-customer-chat
+ */
+class MessengerCustomerChat extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      fbLoaded: false,
+      shouldShowDialog: undefined
+    }
+  }
+
+  /**
+   * 初始化
+   */
+  componentDidMount() {
+    this.setFbAsyncInit()
+    this.reloadSDKAsynchronously()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.pageId !== this.props.pageId ||
+      prevProps.appId !== this.props.appId ||
+      prevProps.shouldShowDialog !== this.props.shouldShowDialog ||
+      prevProps.htmlRef !== this.props.htmlRef ||
+      prevProps.minimized !== this.props.minimized ||
+      prevProps.themeColor !== this.props.themeColor ||
+      prevProps.loggedInGreeting !== this.props.loggedInGreeting ||
+      prevProps.loggedOutGreeting !== this.props.loggedOutGreeting ||
+      prevProps.greetingDialogDisplay !== this.props.greetingDialogDisplay ||
+      prevProps.greetingDialogDelay !== this.props.greetingDialogDelay ||
+      prevProps.autoLogAppEvents !== this.props.autoLogAppEvents ||
+      prevProps.xfbml !== this.props.xfbml ||
+      prevProps.version !== this.props.version ||
+      prevProps.language !== this.props.language
+    ) {
+      this.setFbAsyncInit()
+      this.reloadSDKAsynchronously()
+    }
+  }
+
+  componentWillUnmount() {
+    if (window.FB !== undefined) {
+      window.FB.CustomerChat.hide()
+    }
+  }
+
+  /**
+   * 初始化
+   */
+  setFbAsyncInit() {
+    const { appId, autoLogAppEvents, xfbml, version } = this.props
+
+    window.fbAsyncInit = () => {
+      window.FB.init({
+        appId,
+        autoLogAppEvents,
+        xfbml,
+        version: `v${version}`
+      })
+
+      this.setState({ fbLoaded: true })
+    }
+  }
+
+  loadSDKAsynchronously() {
+    const { language } = this.props;
+    /* eslint-disable */
+    (function (d, s, id) {
+      var js,
+        fjs = d.getElementsByTagName(s)[0];
+      if (d.getElementById(id)) {
+        return;
+      }
+      js = d.createElement(s);
+      js.id = id;
+      js.src = `https://connect.facebook.net/${language}/sdk/xfbml.customerchat.js`;
+      fjs.parentNode.insertBefore(js, fjs);
+    })(document, 'script', 'facebook-jssdk');
+    /* eslint-enable */
+  }
+
+  removeFacebookSDK() {
+    removeElementByIds(['facebook-jssdk', 'fb-root'])
+
+    delete window.FB
+  }
+
+  reloadSDKAsynchronously() {
+    this.removeFacebookSDK()
+    this.loadSDKAsynchronously()
+  }
+
+  controlPlugin() {
+    const { shouldShowDialog } = this.props
+
+    if (shouldShowDialog) {
+      window.FB.CustomerChat.showDialog()
+    } else {
+      window.FB.CustomerChat.hideDialog()
+    }
+  }
+
+  subscribeEvents() {
+    const { onCustomerChatDialogShow, onCustomerChatDialogHide } = this.props
+
+    if (onCustomerChatDialogShow) {
+      window.FB.Event.subscribe(
+        'customerchat.dialogShow',
+        onCustomerChatDialogShow
+      )
+    }
+
+    if (onCustomerChatDialogHide) {
+      window.FB.Event.subscribe(
+        'customerchat.dialogHide',
+        onCustomerChatDialogHide
+      )
+    }
+  }
+
+  createMarkup() {
+    const {
+      pageId,
+      htmlRef,
+      minimized,
+      themeColor,
+      loggedInGreeting,
+      loggedOutGreeting,
+      greetingDialogDisplay,
+      greetingDialogDelay
+    } = this.props
+
+    const refAttribute = htmlRef !== undefined ? `ref="${htmlRef}"` : ''
+    const minimizedAttribute =
+      minimized !== undefined ? `minimized="${minimized}"` : ''
+    const themeColorAttribute =
+      themeColor !== undefined ? `theme_color="${themeColor}"` : ''
+    const loggedInGreetingAttribute =
+      loggedInGreeting !== undefined
+        ? `logged_in_greeting="${loggedInGreeting}"`
+        : ''
+    const loggedOutGreetingAttribute =
+      loggedOutGreeting !== undefined
+        ? `logged_out_greeting="${loggedOutGreeting}"`
+        : ''
+    const greetingDialogDisplayAttribute =
+      greetingDialogDisplay !== undefined
+        ? `greeting_dialog_display="${greetingDialogDisplay}"`
+        : ''
+    const greetingDialogDelayAttribute =
+      greetingDialogDelay !== undefined
+        ? `greeting_dialog_delay="${greetingDialogDelay}"`
+        : ''
+
+    return {
+      __html: `<div
+        class="fb-customerchat"
+        page_id="${pageId}"
+        ${refAttribute}
+        ${minimizedAttribute}
+        ${themeColorAttribute}
+        ${loggedInGreetingAttribute}
+        ${loggedOutGreetingAttribute}
+        ${greetingDialogDisplayAttribute}
+        ${greetingDialogDelayAttribute}
+      ></div>`
+    }
+  }
+
+  render() {
+    const { fbLoaded, shouldShowDialog } = this.state
+
+    if (fbLoaded && shouldShowDialog !== this.props.shouldShowDialog) {
+      document.addEventListener(
+        'DOMNodeInserted',
+        (event) => {
+          const element = event.target
+          if (
+            element.className &&
+            typeof element.className === 'string' &&
+            element.className.includes('fb_dialog')
+          ) {
+            this.controlPlugin()
+          }
+        },
+        false
+      )
+      this.subscribeEvents()
+    }
+    // Add a random key to rerender. Reference:
+    // https://stackoverflow.com/questions/30242530/dangerouslysetinnerhtml-doesnt-update-during-render
+    return <div key={Date()} dangerouslySetInnerHTML={this.createMarkup()} />
+  }
+}
+
+const removeElementByIds = (ids) => {
+  ids.forEach((id) => {
+    const element = document.getElementById(id)
+    if (element && element.parentNode) {
+      element.parentNode.removeChild(element)
+    }
+  })
+}
+
+MessengerCustomerChat.propTypes = {
+  pageId: PropTypes.string.isRequired,
+  appId: PropTypes.string,
+  shouldShowDialog: PropTypes.bool,
+  htmlRef: PropTypes.string,
+  minimized: PropTypes.bool,
+  themeColor: PropTypes.string,
+  loggedInGreeting: PropTypes.string,
+  loggedOutGreeting: PropTypes.string,
+  greetingDialogDisplay: PropTypes.oneOf(['show', 'hide', 'fade']),
+  greetingDialogDelay: PropTypes.number,
+  autoLogAppEvents: PropTypes.bool,
+  xfbml: PropTypes.bool,
+  version: PropTypes.string,
+  language: PropTypes.string,
+  onCustomerChatDialogShow: PropTypes.func,
+  onCustomerChatDialogHide: PropTypes.func
+}
+
+MessengerCustomerChat.defaultProps = {
+  appId: null,
+  shouldShowDialog: false,
+  htmlRef: undefined,
+  minimized: undefined,
+  themeColor: undefined,
+  loggedInGreeting: undefined,
+  loggedOutGreeting: undefined,
+  greetingDialogDisplay: undefined,
+  greetingDialogDelay: undefined,
+  autoLogAppEvents: true,
+  xfbml: true,
+  version: '11.0',
+  language: 'en_US',
+  onCustomerChatDialogShow: undefined,
+  onCustomerChatDialogHide: undefined
+}

package/components/FacebookPage.js

@@ -0,0 +1,34 @@
+import BLOG from '@/blog.config'
+import { FacebookProvider, Page } from 'react-facebook'
+import { FacebookIcon } from 'react-share'
+
+/**
+ * facebook个人主页
+ * @returns
+ */
+const FacebookPage = () => {
+  if (!BLOG.FACEBOOK_APP_ID || !BLOG.FACEBOOK_PAGE) {
+    return <></>
+  }
+  return <div className="shadow-md hover:shadow-xl dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100 justify-center">
+    {BLOG.FACEBOOK_PAGE && (
+      <div className="flex items-center pb-2">
+        <a
+          href={BLOG.FACEBOOK_PAGE}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="p-1 pr-2 pt-0"
+        >
+          <FacebookIcon size={28} round />
+        </a>
+        <a href={BLOG.FACEBOOK_PAGE} rel="noopener noreferrer" target="_blank">
+          {BLOG.FACEBOOK_PAGE_TITLE}
+        </a>
+      </div>
+    )}
+    {BLOG.FACEBOOK_APP_ID && <FacebookProvider appId={BLOG.FACEBOOK_APP_ID}>
+      <Page href={BLOG.FACEBOOK_PAGE} tabs="timeline" />
+    </FacebookProvider>}
+  </div>
+}
+export default FacebookPage