nnbb 0.0.1

package/components/AlgoliaSearchModal.js

@@ -0,0 +1,250 @@
+import { useState, useImperativeHandle, useRef } from 'react';
+import BLOG from '@/blog.config';
+import algoliasearch from 'algoliasearch';
+import replaceSearchResult from '@/components/Mark';
+import Link from 'next/link';
+import { useGlobal } from '@/lib/global';
+import throttle from 'lodash/throttle';
+
+/**
+ * 结合 Algolia 实现的弹出式搜索框
+ * 打开方式 cRef.current.openSearch()
+ * https://www.algolia.com/doc/api-reference/search-api-parameters/
+ */
+export default function AlgoliaSearchModal({ cRef }) {
+  const [searchResults, setSearchResults] = useState([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [page, setPage] = useState(0);
+  const [keyword, setKeyword] = useState(null);
+  const [totalPage, setTotalPage] = useState(0);
+  const [totalHit, setTotalHit] = useState(0);
+  const [useTime, setUseTime] = useState(0);
+
+  /**
+   * 对外暴露方法
+   */
+  useImperativeHandle(cRef, () => {
+    return {
+      openSearch: () => {
+        setIsModalOpen(true);
+      },
+    };
+  });
+
+  const client = algoliasearch(
+    BLOG.ALGOLIA_APP_ID || '',
+    BLOG.ALGOLIA_SEARCH_ONLY_APP_KEY || '',
+  );
+  const index = client.initIndex(BLOG.ALGOLIA_INDEX);
+
+  /**
+   * 搜索
+   * @param {*} query
+   */
+  const handleSearch = async (query, page) => {
+    setKeyword(query);
+    setPage(page);
+    setSearchResults([]);
+    setUseTime(0);
+    setTotalPage(0);
+    setTotalHit(0);
+    if (!query || query === '') {
+      return;
+    }
+
+    try {
+      const res = await index.search(query, { page, hitsPerPage: 10 });
+      const { hits, nbHits, nbPages, processingTimeMS } = res;
+      setUseTime(processingTimeMS);
+      setTotalPage(nbPages);
+      setTotalHit(nbHits);
+      setSearchResults(hits);
+
+      const doms = document
+        .getElementById('search-wrapper')
+        .getElementsByClassName('replace');
+
+      setTimeout(() => {
+        replaceSearchResult({
+          doms,
+          search: query,
+          target: {
+            element: 'span',
+            className: 'text-blue-600 border-b border-dashed',
+          },
+        });
+      }, 150);
+    } catch (error) {
+      console.error('Algolia search error:', error);
+    }
+  };
+
+  const throttledHandleSearch = useRef(throttle(handleSearch, 300)); // 设置节流延迟时间
+
+  // 修改input的onChange事件处理函数
+  const handleInputChange = (e) => {
+    const query = e.target.value;
+    throttledHandleSearch.current(query, 0);
+  };
+
+  /**
+   * 切换页码
+   * @param {*} page
+   */
+  const switchPage = (page) => {
+    throttledHandleSearch.current(keyword, page);
+  };
+
+  /**
+   * 关闭弹窗
+   */
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  if (!BLOG.ALGOLIA_APP_ID) {
+    return <></>;
+  }
+
+  return (
+    <div
+      id="search-wrapper"
+      className={`${isModalOpen ? 'opacity-100' : 'pointer-events-none invisible opacity-0'} fixed left-0 top-0 z-30 mt-12 flex h-screen w-screen items-start justify-center`}
+    >
+      {/* 模态框 */}
+      <div
+        className={`${isModalOpen ? 'opacity-100' : 'invisible translate-y-10 opacity-0'} dark:bg- z-50 flex min-h-[10rem] w-full max-w-xl flex-col justify-between rounded-lg border bg-white p-5 shadow transition-all duration-300 hover:border-blue-600 dark:border-gray-800 dark:bg-hexo-black-gray `}
+      >
+        <div className="flex items-center justify-between">
+          <div className="text-2xl font-bold text-blue-600">搜索</div>
+          <div>
+            <i
+              className="fa-solid fa-xmark cursor-pointer p-1 text-gray-600 hover:text-blue-600"
+              onClick={closeModal}
+            ></i>
+          </div>
+        </div>
+
+        <input
+          type="text"
+          placeholder="在这里输入搜索关键词..."
+          onChange={(e) => handleInputChange(e)}
+          className="my-2 mb-4 w-full rounded-md border bg-gray-50 px-4 py-1 text-black outline-blue-500 dark:bg-gray-600 dark:text-gray-200"
+        />
+
+        {/* 标签组 */}
+        <div className="mb-4">
+          <TagGroups />
+        </div>
+
+        <ul>
+          {searchResults.map((result) => (
+            <li key={result.objectID} className="replace my-2">
+              <a
+                href={`${BLOG.SUB_PATH}/${result.slug}`}
+                className="font-bold text-black hover:text-blue-600 dark:text-gray-200"
+              >
+                {result.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+
+        <Pagination totalPage={totalPage} page={page} switchPage={switchPage} />
+        <div>
+          {totalHit > 0 && (
+            <div>
+              共搜索到 {totalHit} 条结果，用时 {useTime} 毫秒
+            </div>
+          )}
+        </div>
+        <div className="mt-2 text-gray-600">
+          <span>
+            <i className="fa-brands fa-algolia"></i> Algolia 提供搜索服务
+          </span>{' '}
+        </div>
+      </div>
+
+      {/* 遮罩 */}
+      <div
+        onClick={closeModal}
+        className="glassmorphism fixed left-0 top-0 z-30 flex h-full w-full items-center justify-center"
+      />
+    </div>
+  );
+}
+
+/**
+ * 标签组
+ */
+function TagGroups() {
+  const { tagOptions } = useGlobal();
+  //  获取tagOptions数组前十个
+  const firstTenTags = tagOptions?.slice(0, 10);
+
+  return (
+    <div id="tags-group" className="space-y-2 dark:border-gray-700">
+      {firstTenTags?.map((tag, index) => {
+        return (
+          <Link
+            passHref
+            key={index}
+            href={`/tag/${encodeURIComponent(tag.name)}`}
+            className={'inline-block cursor-pointer whitespace-nowrap'}
+          >
+            <div
+              className={
+                ' flex items-center rounded-lg px-2 py-0.5 text-black transition-all duration-150 hover:scale-110 hover:bg-blue-600 hover:text-white dark:text-gray-300 dark:hover:bg-yellow-600'
+              }
+            >
+              <div className="text-lg">{tag.name} </div>
+              {tag.count ? (
+                <sup className="relative ml-1">{tag.count}</sup>
+              ) : (
+                <></>
+              )}
+            </div>
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * 分页
+ * @param {*} param0
+ */
+function Pagination(props) {
+  const { totalPage, page, switchPage } = props;
+  if (totalPage <= 0) {
+    return <></>;
+  }
+  const pagesElement = [];
+
+  for (let i = 0; i < totalPage; i++) {
+    const selected = page === i;
+    pagesElement.push(getPageElement(i, selected, switchPage));
+  }
+  return (
+    <div className="flex w-full justify-center space-x-1 py-1">
+      {pagesElement.map((p) => p)}
+    </div>
+  );
+}
+
+/**
+ * 获取分页按钮
+ * @param {*} i
+ * @param {*} selected
+ */
+function getPageElement(i, selected, switchPage) {
+  return (
+    <div
+      onClick={() => switchPage(i)}
+      className={`${selected ? 'rounded bg-blue-600 font-bold text-white' : 'hover:font-bold hover:text-blue-600'} h-6 w-6  cursor-pointer text-center `}
+    >
+      {i + 1}
+    </div>
+  );
+}

package/components/Artalk.js

@@ -0,0 +1,30 @@
+import BLOG from '@/blog.config'
+import { loadExternalResource } from '@/lib/utils'
+// import { loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
+
+/**
+ * Giscus评论 @see https://giscus.app/zh-CN
+ * Contribute by @txs https://github.com/txs/NotionNext/commit/1bf7179d0af21fb433e4c7773504f244998678cb
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+const Artalk = ({ siteInfo }) => {
+  useEffect(() => {
+    loadExternalResource(BLOG.COMMENT_ARTALK_CSS, 'css')
+    window?.Artalk?.init({
+      server: BLOG.COMMENT_ARTALK_SERVER, // 后端地址
+      el: '#artalk', // 容器元素
+      locale: BLOG.LANG,
+      //   pageKey: '/post/1', // 固定链接 (留空自动获取)
+      //   pageTitle: '关于引入 Artalk 的这档子事', // 页面标题 (留空自动获取)
+      site: siteInfo?.title // 你的站点名
+    })
+  }, [])
+  return (
+        <div id="artalk"></div>
+  )
+}
+
+export default Artalk

package/components/Busuanzi.js

@@ -0,0 +1,26 @@
+import busuanzi from '@/lib/busuanzi';
+import { useRouter } from 'next/router';
+import { useGlobal } from '@/lib/global';
+// import { useRouter } from 'next/router'
+import React from 'react';
+
+let path = '';
+
+export default function Busuanzi() {
+  const { theme } = useGlobal();
+  const Router = useRouter();
+  Router.events.on('routeChangeComplete', (url) => {
+    if (url !== path) {
+      path = url;
+      busuanzi.fetch();
+    }
+  });
+
+  // 更换主题时更新
+  React.useEffect(() => {
+    if (theme) {
+      busuanzi.fetch();
+    }
+  }, [theme]);
+  return null;
+}

package/components/ChatBase.js

@@ -0,0 +1,19 @@
+import BLOG from '@/blog.config'
+
+/**
+ * 这是一个嵌入组件，可以在任意位置全屏显示您的chat-base对话框
+ * 暂时没有页面引用
+ * 因为您可以直接用内嵌网页的方式放入您的notion中 https://www.chatbase.co/chatbot-iframe/${BLOG.CHATBASE_ID}
+ */
+export default function ChatBase() {
+  if (!BLOG.CHATBASE_ID) {
+    return <></>
+  }
+
+  return <iframe
+        src={`https://www.chatbase.co/chatbot-iframe/${BLOG.CHATBASE_ID}`}
+        width="100%"
+        style={{ height: '100%', minHeight: '700px' }}
+        frameborder="0"
+    ></iframe>
+}

package/components/Collapse.tsx

@@ -0,0 +1,134 @@
+import React, { useRef, useEffect, useImperativeHandle } from 'react';
+import type { FC, ForwardedRef, ReactNode } from 'react';
+
+const VerticalStyle = { height: '0px', willChange: 'height' };
+const horizontalStyle = { width: '0px', willChange: 'width' };
+
+export interface CollapseHandle {
+  updateCollapseHeight: () => void;
+}
+
+export interface CollapseProps {
+  type?: 'horizontal' | 'vertical';
+  isOpen: boolean;
+  className?: string;
+  onHeightChange?: (param: {
+    height: number;
+    width: number;
+    increase: boolean;
+  }) => void;
+  collapseRef?: ForwardedRef<CollapseHandle>;
+  children: ReactNode;
+}
+
+/**
+ * 折叠面板组件，支持水平折叠、垂直折叠
+ * @param {type:['horizontal','vertical'],isOpen} props
+ * @returns
+ */
+const Collapse: FC<CollapseProps> = (props) => {
+  const {
+    collapseRef,
+    type = 'vertical',
+    onHeightChange,
+    isOpen = false,
+    className,
+    children,
+  } = props;
+  const ref = useRef<HTMLDivElement>(null);
+
+  useImperativeHandle(collapseRef, () => {
+    return {
+      /**
+       * 当子元素高度变化时，可调用此方法更新折叠组件的高度
+       * @param {*} param0
+       */
+      updateCollapseHeight: () => {
+        const style = ref.current?.style;
+        if (style) {
+          style.height = 'auto';
+          style.width = 'auto';
+        }
+        // ref.current.style.height = ref.current.scrollHeight;
+        // ref.current.style.height = 'auto';
+      },
+    };
+  });
+
+  /**
+   * 折叠
+   * @param {*} element
+   */
+  const collapseSection = (element: HTMLDivElement) => {
+    const sectionHeight = element.scrollHeight;
+    const sectionWidth = element.scrollWidth;
+
+    requestAnimationFrame(function () {
+      switch (type) {
+        case 'horizontal':
+          element.style.width = sectionWidth + 'px';
+          requestAnimationFrame(function () {
+            element.style.width = 0 + 'px';
+          });
+          break;
+        case 'vertical':
+          element.style.height = sectionHeight + 'px';
+          requestAnimationFrame(function () {
+            element.style.height = 0 + 'px';
+          });
+      }
+    });
+  };
+
+  /**
+   * 展开
+   * @param {*} element
+   */
+  const expandSection = (element: HTMLDivElement) => {
+    const sectionHeight = element.scrollHeight;
+    const sectionWidth = element.scrollWidth;
+    let clearTime: NodeJS.Timeout;
+    switch (type) {
+      case 'horizontal':
+        element.style.width = sectionWidth + 'px';
+        clearTime = setTimeout(() => {
+          element.style.width = 'auto';
+        }, 400);
+        break;
+      case 'vertical':
+        element.style.height = sectionHeight + 'px';
+        clearTime = setTimeout(() => {
+          element.style.height = 'auto';
+        }, 400);
+    }
+
+    clearTimeout(clearTime);
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      if (ref.current) expandSection(ref.current);
+    } else {
+      if (ref.current) collapseSection(ref.current);
+    }
+    // 通知父组件高度变化
+    onHeightChange &&
+      onHeightChange({
+        height: ref.current?.scrollHeight || 0,
+        width: ref.current?.scrollWidth || 0,
+        increase: isOpen,
+      });
+  }, [isOpen]);
+
+  return (
+    <div
+      ref={ref}
+      style={type === 'vertical' ? VerticalStyle : horizontalStyle}
+      className={`${className || ''} overflow-hidden duration-200 `}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Collapse;

package/components/Comment.js

@@ -0,0 +1,161 @@
+import BLOG from '@/blog.config';
+import dynamic from 'next/dynamic';
+import Tabs from '@/components/Tabs';
+import { isBrowser } from '@/lib/utils';
+import { useRouter } from 'next/router';
+import Artalk from './Artalk';
+
+const WalineComponent = dynamic(
+  () => {
+    return import('@/components/WalineComponent');
+  },
+  { ssr: false },
+);
+
+const CusdisComponent = dynamic(
+  () => {
+    return import('@/components/CusdisComponent');
+  },
+  { ssr: false },
+);
+
+const TwikooCompenent = dynamic(
+  () => {
+    return import('@/components/Twikoo');
+  },
+  { ssr: false },
+);
+
+const GitalkComponent = dynamic(
+  () => {
+    return import('@/components/Gitalk');
+  },
+  { ssr: false },
+);
+const UtterancesComponent = dynamic(
+  () => {
+    return import('@/components/Utterances');
+  },
+  { ssr: false },
+);
+const GiscusComponent = dynamic(
+  () => {
+    return import('@/components/Giscus');
+  },
+  { ssr: false },
+);
+const WebMentionComponent = dynamic(
+  () => {
+    return import('@/components/WebMention');
+  },
+  { ssr: false },
+);
+
+const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
+  ssr: false,
+});
+
+/**
+ * 是否有评论
+ */
+export const commentEnable =
+  BLOG.COMMENT_TWIKOO_ENV_ID ||
+  BLOG.COMMENT_WALINE_SERVER_URL ||
+  BLOG.COMMENT_VALINE_APP_ID ||
+  BLOG.COMMENT_GISCUS_REPO ||
+  BLOG.COMMENT_CUSDIS_APP_ID ||
+  BLOG.COMMENT_UTTERRANCES_REPO ||
+  BLOG.COMMENT_GITALK_CLIENT_ID ||
+  BLOG.COMMENT_WEBMENTION.ENABLE;
+
+/**
+ * 评论组件
+ * @param {*} param0
+ * @returns
+ */
+const Comment = ({ siteInfo, frontMatter, className }) => {
+  const router = useRouter();
+
+  if (
+    isBrowser &&
+    ('giscus' in router.query || router.query.target === 'comment')
+  ) {
+    setTimeout(() => {
+      const url = router.asPath.replace('?target=comment', '');
+      history.replaceState({}, '', url);
+      document
+        ?.getElementById('comment')
+        ?.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    }, 1000);
+  }
+
+  if (!frontMatter) {
+    return <>Loading...</>;
+  }
+
+  return (
+    <div
+      key={frontMatter?.id}
+      id="comment"
+      className={`comment mt-5 text-gray-800 dark:text-gray-300 ${className || ''}`}
+    >
+      <Tabs>
+        {BLOG.COMMENT_ARTALK_SERVER && (
+          <div key="Artalk">
+            <Artalk siteInfo={siteInfo} />
+          </div>
+        )}
+
+        {BLOG.COMMENT_TWIKOO_ENV_ID && (
+          <div key="Twikoo">
+            <TwikooCompenent />
+          </div>
+        )}
+
+        {BLOG.COMMENT_WALINE_SERVER_URL && (
+          <div key="Waline">
+            <WalineComponent />
+          </div>
+        )}
+
+        {BLOG.COMMENT_VALINE_APP_ID && (
+          <div key="Valine" name="reply">
+            <ValineComponent path={frontMatter.id} />
+          </div>
+        )}
+
+        {BLOG.COMMENT_GISCUS_REPO && (
+          <div key="Giscus">
+            <GiscusComponent className="px-2" />
+          </div>
+        )}
+
+        {BLOG.COMMENT_CUSDIS_APP_ID && (
+          <div key="Cusdis">
+            <CusdisComponent frontMatter={frontMatter} />
+          </div>
+        )}
+
+        {BLOG.COMMENT_UTTERRANCES_REPO && (
+          <div key="Utterance">
+            <UtterancesComponent issueTerm={frontMatter.id} className="px-2" />
+          </div>
+        )}
+
+        {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>
+  );
+};
+
+export default Comment;