nnbb 0.0.1

package/components/GoogleAdsense.js

@@ -0,0 +1,111 @@
+import BLOG from '@/blog.config';
+import { loadExternalResource } from '@/lib/utils';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+/**
+ * 初始化谷歌广告
+ * @returns
+ */
+export default function GoogleAdsense() {
+  const initGoogleAdsense = () => {
+    loadExternalResource(
+      `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${BLOG.ADSENSE_GOOGLE_ID}`,
+      'js',
+    ).then(() => {
+      setTimeout(() => {
+        const ads = document.getElementsByClassName('adsbygoogle');
+        const adsbygoogle = window.adsbygoogle;
+        if (ads.length > 0) {
+          for (let i = 0; i <= ads.length; i++) {
+            try {
+              adsbygoogle.push(ads[i]);
+            } catch (e) {
+              console.error(e);
+            }
+          }
+        }
+      }, 100);
+    });
+  };
+
+  const router = useRouter();
+  useEffect(() => {
+    // 延迟3秒加载
+    setTimeout(() => {
+      initGoogleAdsense();
+    }, 3000);
+  }, [router]);
+
+  return null;
+}
+
+/**
+ * 文章内嵌广告单元
+ * 请在GoogleAdsense后台配置创建对应广告，并且获取相应代码
+ * 修改下面广告单元中的 data-ad-slot data-ad-format data-ad-layout-key(如果有)
+ * 添加 可以在本地调试
+ */
+const AdSlot = ({ type = 'show' }) => {
+  if (!BLOG.ADSENSE_GOOGLE_ID) {
+    return null;
+  }
+  // 文章内嵌广告
+  if (type === 'in-article') {
+    return (
+      <ins
+        className="adsbygoogle"
+        style={{ display: 'block', textAlign: 'center' }}
+        data-ad-layout="in-article"
+        data-ad-format="fluid"
+        data-adtest={BLOG.ADSENSE_GOOGLE_TEST ? 'on' : 'off'}
+        data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
+        data-ad-slot={BLOG.ADSENSE_GOOGLE_SLOT_IN_ARTICLE}
+      ></ins>
+    );
+  }
+
+  // 信息流广告
+  if (type === 'flow') {
+    return (
+      <ins
+        className="adsbygoogle"
+        data-ad-format="fluid"
+        data-ad-layout-key="-5j+cz+30-f7+bf"
+        style={{ display: 'block' }}
+        data-adtest={BLOG.ADSENSE_GOOGLE_TEST ? 'on' : 'off'}
+        data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
+        data-ad-slot={BLOG.ADSENSE_GOOGLE_SLOT_FLOW}
+      ></ins>
+    );
+  }
+
+  // 原生广告
+  if (type === 'native') {
+    return (
+      <ins
+        className="adsbygoogle"
+        style={{ display: 'block', textAlign: 'center' }}
+        data-ad-format="autorelaxed"
+        data-adtest={BLOG.ADSENSE_GOOGLE_TEST ? 'on' : 'off'}
+        data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
+        data-ad-slot={BLOG.ADSENSE_GOOGLE_SLOT_NATIVE}
+      ></ins>
+    );
+  }
+
+  //  展示广告
+  return (
+    <ins
+      className="adsbygoogle"
+      style={{ display: 'block' }}
+      data-ad-client={BLOG.ADSENSE_GOOGLE_ID}
+      data-adtest={BLOG.ADSENSE_GOOGLE_TEST ? 'on' : 'off'}
+      data-ad-slot={BLOG.ADSENSE_GOOGLE_SLOT_AUTO}
+      data-ad-format="auto"
+      data-full-width-responsive="true"
+    ></ins>
+  );
+};
+
+export { AdSlot };

package/components/Gtag.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+import * as gtag from '@/lib/gtag'
+
+const Gtag = () => {
+  const router = useRouter()
+  useEffect(() => {
+    const gtagRouteChange = url => {
+      gtag.pageview(url)
+    }
+    router.events.on('routeChangeComplete', gtagRouteChange)
+    return () => {
+      router.events.off('routeChangeComplete', gtagRouteChange)
+    }
+  }, [router.events])
+  return null
+}
+export default Gtag

package/components/HeroIcons.tsx

@@ -0,0 +1,321 @@
+/**
+ * @see https://heroicons.com/
+ * @returns
+ */
+
+export const Moon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+      />
+    </svg>
+  );
+};
+
+export const Sun = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+      />
+    </svg>
+  );
+};
+
+export const Home = ({ className = '' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+      />
+    </svg>
+  );
+};
+
+export const User = ({ className = '' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
+      />
+    </svg>
+  );
+};
+
+export const ArrowPath = ({ className = '' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+      />
+    </svg>
+  );
+};
+
+export const ChevronLeft = ({ className = '' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.75 19.5L8.25 12l7.5-7.5"
+      />
+    </svg>
+  );
+};
+
+export const ChevronRight = ({ className = '' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M8.25 4.5l7.5 7.5-7.5 7.5"
+      />
+    </svg>
+  );
+};
+
+export const ChevronDoubleLeft = ({ className = '' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5"
+      />
+    </svg>
+  );
+};
+
+export const ChevronDoubleRight = ({ className = '' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"
+      />
+    </svg>
+  );
+};
+
+export const InformationCircle = ({ className = '' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+      />
+    </svg>
+  );
+};
+
+export const HashTag = ({ className = '' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5"
+      />
+    </svg>
+  );
+};
+
+export const GlobeAlt = ({ className = '' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
+      />
+    </svg>
+  );
+};
+
+export const ArrowRightCircle = ({ className = '' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+  );
+};
+
+export const PlusSmall = ({ className = '' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={className}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
+    </svg>
+  );
+};
+
+export const ArrowSmallRight = ({ className = '' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"
+      />
+    </svg>
+  );
+};
+
+export const ArrowSmallUp = ({ className = '' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75"
+      />
+    </svg>
+  );
+};
+
+export const Language = ({ className = '' }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"
+      />
+    </svg>
+  );
+};

package/components/KatexReact.js

@@ -0,0 +1,53 @@
+import KaTeX from 'katex'
+import React from 'react'
+
+const TeX = ({
+  children,
+  math,
+  block,
+  errorColor,
+  renderError,
+  settings,
+  as: asComponent,
+  ...props
+}) => {
+  const Component = asComponent || (block ? 'div' : 'span')
+  const content = (children ?? math)
+  const [state, setState] = React.useState({ innerHtml: '' })
+
+  React.useEffect(() => {
+    try {
+      const innerHtml = KaTeX.renderToString(content, {
+        displayMode: true,
+        errorColor,
+        throwOnError: !!renderError,
+        ...settings
+      })
+
+      setState({ innerHtml })
+    } catch (error) {
+      if (error instanceof KaTeX.ParseError || error instanceof TypeError) {
+        if (renderError) {
+          setState({ errorElement: renderError(error) })
+        } else {
+          setState({ innerHtml: error.message })
+        }
+      } else {
+        throw error
+      }
+    }
+  }, [block, content, errorColor, renderError, settings])
+
+  if ('errorElement' in state) {
+    return state.errorElement
+  }
+
+  return (
+    <Component
+      {...props}
+      dangerouslySetInnerHTML={{ __html: state.innerHtml }}
+    />
+  )
+}
+
+export default React.memo(TeX)

package/components/LazyImage.js

@@ -0,0 +1,95 @@
+import BLOG from '@/blog.config'
+import Head from 'next/head'
+import React, { useEffect, useRef, useState } from 'react'
+
+/**
+ * 图片懒加载
+ * @param {*} param0
+ * @returns
+ */
+export default function LazyImage({
+  priority,
+  id,
+  src,
+  alt,
+  placeholderSrc = BLOG.IMG_LAZY_LOAD_PLACEHOLDER,
+  className,
+  width,
+  height,
+  title,
+  onLoad,
+  style
+}) {
+  const imageRef = useRef(null)
+  const [imageLoaded, setImageLoaded] = useState(false)
+
+  const handleImageLoad = () => {
+    setImageLoaded(true)
+    if (typeof onLoad === 'function') {
+      onLoad() // 触发传递的onLoad回调函数
+    }
+  }
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const lazyImage = entry.target
+            lazyImage.src = src
+            observer.unobserve(lazyImage)
+          }
+        })
+      },
+      { rootMargin: '50px 0px' } // Adjust the rootMargin as needed to trigger the loading earlier or later
+    )
+
+    if (imageRef.current) {
+      observer.observe(imageRef.current)
+    }
+
+    return () => {
+      if (imageRef.current) {
+        observer.unobserve(imageRef.current)
+      }
+    }
+  }, [src])
+
+  // 动态添加width、height和className属性，仅在它们为有效值时添加
+  const imgProps = {
+    ref: imageRef,
+    src: imageLoaded ? src : placeholderSrc,
+    alt: alt,
+    onLoad: handleImageLoad
+  }
+
+  if (id) {
+    imgProps.id = id
+  }
+
+  if (title) {
+    imgProps.title = title
+  }
+
+  if (width && width !== 'auto') {
+    imgProps.width = width
+  }
+
+  if (height && height !== 'auto') {
+    imgProps.height = height
+  }
+  if (className) {
+    imgProps.className = className
+  }
+  if (style) {
+    imgProps.style = style
+  }
+  return (<>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img {...imgProps} />
+        {/* 预加载 */}
+        {priority && <Head>
+            <link rel='preload' as='image' src={src} />
+        </Head>}
+    </>)
+}

package/components/Live2D.js

@@ -0,0 +1,52 @@
+/* eslint-disable no-undef */
+import BLOG from '@/blog.config';
+import { useGlobal } from '@/lib/global';
+import { loadExternalResource } from '@/lib/utils';
+import { useEffect } from 'react';
+
+export default function Live2D() {
+  const { theme, switchTheme } = useGlobal();
+  const showPet = JSON.parse(BLOG.WIDGET_PET);
+
+  useEffect(() => {
+    if (showPet) {
+      Promise.all([
+        loadExternalResource(
+          'https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js',
+          'js',
+        ),
+      ]).then(() => {
+        if (typeof window?.loadlive2d !== 'undefined') {
+          // https://github.com/xiazeyu/live2d-widget-models
+          try {
+            loadlive2d('live2d', BLOG.WIDGET_PET_LINK);
+          } catch (error) {
+            console.error('读取PET模型', error);
+          }
+        }
+      });
+    }
+  }, [theme]);
+
+  function handleClick() {
+    if (JSON.parse(BLOG.WIDGET_PET_SWITCH_THEME)) {
+      switchTheme();
+    }
+  }
+
+  if (!showPet) {
+    return <></>;
+  }
+
+  return (
+    <canvas
+      id="live2d"
+      width="280"
+      height="250"
+      onClick={handleClick}
+      className="cursor-grab"
+      onMouseDown={(e) => e.target.classList.add('cursor-grabbing')}
+      onMouseUp={(e) => e.target.classList.remove('cursor-grabbing')}
+    />
+  );
+}

package/components/Loading.js

@@ -0,0 +1,20 @@
+/**
+ * 异步文件加载时的占位符
+ * @returns
+ */
+const Loading = () => {
+  return (
+    <div
+      id="loading-container"
+      className="fixed left-0 top-0 -z-10 flex h-screen w-screen items-center justify-center"
+    >
+      <div id="loading-wrapper">
+        <div className="loading">
+          {' '}
+          <i className="fas fa-spinner animate-spin text-3xl " />
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Loading;

package/components/Mark.js

@@ -0,0 +1,28 @@
+import { loadExternalResource } from '@/lib/utils'
+
+/**
+ * 将搜索结果的关键词高亮
+ */
+export default async function replaceSearchResult({ doms, search, target }) {
+  if (!doms || !search || !target) {
+    return
+  }
+
+  try {
+    await loadExternalResource('https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js', 'js')
+    const Mark = window.Mark
+    if (doms instanceof HTMLCollection) {
+      for (const container of doms) {
+        const re = new RegExp(search, 'gim')
+        const instance = new Mark(container)
+        instance.markRegExp(re, target)
+      }
+    } else {
+      const re = new RegExp(search, 'gim')
+      const instance = new Mark(doms)
+      instance.markRegExp(re, target)
+    }
+  } catch (error) {
+    console.error('markjs 加载失败', error)
+  }
+}

package/components/NProgress.ts

@@ -0,0 +1,8 @@
+import NProgress from 'nprogress';
+
+export function initNProgress() {
+  NProgress.configure({ showSpinner: false });
+}
+
+export const progressStart = NProgress.start;
+export const progressDone = NProgress.done;