nnbb 0.0.1

package/components/Fireworks.js

@@ -0,0 +1,210 @@
+/**
+ * https://codepen.io/juliangarnier/pen/gmOwJX
+ * custom by hexo-theme-yun @YunYouJun
+ */
+import { useEffect } from 'react'
+import anime from 'animejs'
+import BLOG from 'blog.config'
+
+const Fireworks = () => {
+  useEffect(() => {
+    createFireworks({})
+  }, [])
+  return <canvas id='fireworks' className='fireworks'></canvas>
+}
+export default Fireworks
+
+/**
+   * 创建烟花
+   * @param config
+   */
+function createFireworks(config) {
+  const defaultConfig = {
+    colors: BLOG.FIREWORKS_COLOR,
+    numberOfParticules: 20,
+    orbitRadius: {
+      min: 50,
+      max: 100
+    },
+    circleRadius: {
+      min: 10,
+      max: 20
+    },
+    diffuseRadius: {
+      min: 50,
+      max: 100
+    },
+    animeDuration: {
+      min: 900,
+      max: 1500
+    }
+  }
+  config = Object.assign(defaultConfig, config)
+
+  let pointerX = 0
+  let pointerY = 0
+
+  // sky blue
+  const colors = config.colors
+
+  const canvasEl = document.querySelector('.fireworks')
+  const ctx = canvasEl.getContext('2d')
+
+  /**
+     * 设置画布尺寸
+     */
+  function setCanvasSize(canvasEl) {
+    canvasEl.width = window.innerWidth
+    canvasEl.height = window.innerHeight
+    canvasEl.style.width = `${window.innerWidth}px`
+    canvasEl.style.height = `${window.innerHeight}px`
+  }
+
+  /**
+     * update pointer
+     * @param {TouchEvent} e
+     */
+  function updateCoords(e) {
+    pointerX =
+        e.clientX ||
+        (e.touches[0] ? e.touches[0].clientX : e.changedTouches[0].clientX)
+    pointerY =
+        e.clientY ||
+        (e.touches[0] ? e.touches[0].clientY : e.changedTouches[0].clientY)
+  }
+
+  function setParticuleDirection(p) {
+    const angle = (anime.random(0, 360) * Math.PI) / 180
+    const value = anime.random(
+      config.diffuseRadius.min,
+      config.diffuseRadius.max
+    )
+    const radius = [-1, 1][anime.random(0, 1)] * value
+    return {
+      x: p.x + radius * Math.cos(angle),
+      y: p.y + radius * Math.sin(angle)
+    }
+  }
+
+  /**
+     * 在指定位置创建粒子
+     * @param {number} x
+     * @param {number} y
+     * @returns
+     */
+  function createParticule(x, y) {
+    const p = {
+      x,
+      y,
+      color: `rgba(${
+          colors[anime.random(0, colors.length - 1)]
+        },${
+          anime.random(0.2, 0.8)
+        })`,
+      radius: anime.random(config.circleRadius.min, config.circleRadius.max),
+      endPos: null,
+      draw() {}
+    }
+    p.endPos = setParticuleDirection(p)
+    p.draw = function() {
+      ctx.beginPath()
+      ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
+      ctx.fillStyle = p.color
+      ctx.fill()
+    }
+    return p
+  }
+
+  function createCircle(x, y) {
+    const p = {
+      x,
+      y,
+      color: '#000',
+      radius: 0.1,
+      alpha: 0.5,
+      lineWidth: 6,
+      draw() {}
+    }
+    p.draw = function() {
+      ctx.globalAlpha = p.alpha
+      ctx.beginPath()
+      ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
+      ctx.lineWidth = p.lineWidth
+      ctx.strokeStyle = p.color
+      ctx.stroke()
+      ctx.globalAlpha = 1
+    }
+    return p
+  }
+
+  function renderParticule(anim) {
+    for (let i = 0; i < anim.animatables.length; i++) { anim.animatables[i].target.draw() }
+  }
+
+  function animateParticules(x, y) {
+    const circle = createCircle(x, y)
+    const particules = []
+    for (let i = 0; i < config.numberOfParticules; i++) { particules.push(createParticule(x, y)) }
+
+    anime
+      .timeline()
+      .add({
+        targets: particules,
+        x(p) {
+          return p.endPos.x
+        },
+        y(p) {
+          return p.endPos.y
+        },
+        radius: 0.1,
+        duration: anime.random(
+          config.animeDuration.min,
+          config.animeDuration.max
+        ),
+        easing: 'easeOutExpo',
+        update: renderParticule
+      })
+      .add(
+        {
+          targets: circle,
+          radius: anime.random(config.orbitRadius.min, config.orbitRadius.max),
+          lineWidth: 0,
+          alpha: {
+            value: 0,
+            easing: 'linear',
+            duration: anime.random(600, 800)
+          },
+          duration: anime.random(1200, 1800),
+          easing: 'easeOutExpo',
+          update: renderParticule
+        },
+        0
+      )
+  }
+
+  const render = anime({
+    duration: Infinity,
+    update: () => {
+      ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
+    }
+  })
+
+  document.addEventListener(
+    'mousedown',
+    (e) => {
+      render.play()
+      updateCoords(e)
+      animateParticules(pointerX, pointerY)
+    },
+    false
+  )
+
+  setCanvasSize(canvasEl)
+  window.addEventListener(
+    'resize',
+    () => {
+      setCanvasSize(canvasEl)
+    },
+    false
+  )
+}

package/components/FlipCard.js

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+
+/**
+ * 翻转组件
+ * @param {*} props
+ * @returns
+ */
+export default function FlipCard(props) {
+  const [isFlipped, setIsFlipped] = useState(false)
+
+  function handleCardFlip() {
+    setIsFlipped(!isFlipped)
+  }
+
+  return (
+        <div className={`flip-card ${isFlipped ? 'flipped' : ''}`} >
+            <div className={`flip-card-front ${props.className || ''}`} onMouseEnter={handleCardFlip}>
+                {props.frontContent}
+            </div>
+            <div className={`flip-card-back ${props.className || ''}`} onMouseLeave={handleCardFlip}>
+                {props.backContent}
+            </div>
+            <style jsx>{`
+          .flip-card {
+            width: 100%;
+            height: 100%;
+            display: inline-block;
+            position: relative;
+            transform-style: preserve-3d;
+            transition: transform 0.2s;
+          }
+          
+          .flip-card-front,
+          .flip-card-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+          }
+          
+          .flip-card-front {
+            z-index: 2;
+            transform: rotateY(0);
+          }
+          
+          .flip-card-back {
+            transform: rotateY(180deg);
+          }
+          
+          .flip-card.flipped {
+            transform: rotateY(180deg);
+          }
+        `}</style>
+        </div>
+  )
+}

package/components/FlutteringRibbon.js

@@ -0,0 +1,322 @@
+/* eslint-disable */
+import { useEffect } from 'react'
+const  id = 'canvasFlutteringRibbon'
+export const FlutteringRibbon = () => {
+     const destroyRibbon = ()=>{
+    const ribbon = document.getElementById(id)
+      if(ribbon && ribbon.parentNode){
+        ribbon.parentNode.removeChild(ribbon)
+      }
+  }
+  
+  useEffect(() => {
+    createFlutteringRibbon()
+        return () => destroyRibbon()
+
+  }, [])
+    return <></>
+}
+
+export default FlutteringRibbon
+
+
+/**
+ * 创建连接点
+ * @param config
+ */
+function createFlutteringRibbon() {
+  'object' == typeof window &&
+    (window.Ribbons = (function () {
+      const t = window,
+        i = document.body,
+        n = document.documentElement
+      var o = function () {
+        if (1 === arguments.length) {
+          if (Array.isArray(arguments[0])) {
+            const t = Math.round(o(0, arguments[0].length - 1))
+            return arguments[0][t]
+          }
+          return o(0, arguments[0])
+        }
+        return 2 === arguments.length
+          ? Math.random() * (arguments[1] - arguments[0]) + arguments[0]
+          : 0
+      }
+      const s = function (o) {
+          const s = Math.max(
+              0,
+              t.innerWidth || n.clientWidth || i.clientWidth || 0
+            ),
+            e = Math.max(
+              0,
+              t.innerHeight || n.clientHeight || i.clientHeight || 0
+            )
+          return {
+            width: s,
+            height: e,
+            ratio: s / e,
+            centerx: s / 2,
+            centery: e / 2,
+            scrollx:
+              Math.max(0, t.pageXOffset || n.scrollLeft || i.scrollLeft || 0) -
+              (n.clientLeft || 0),
+            scrolly:
+              Math.max(0, t.pageYOffset || n.scrollTop || i.scrollTop || 0) -
+              (n.clientTop || 0)
+          }
+        },
+        e = function (t, i) {
+          ;(this.x = 0), (this.y = 0), this.set(t, i)
+        }
+      e.prototype = {
+        constructor: e,
+        set: function (t, i) {
+          ;(this.x = t || 0), (this.y = i || 0)
+        },
+        copy: function (t) {
+          return (this.x = t.x || 0), (this.y = t.y || 0), this
+        },
+        multiply: function (t, i) {
+          return (this.x *= t || 1), (this.y *= i || 1), this
+        },
+        divide: function (t, i) {
+          return (this.x /= t || 1), (this.y /= i || 1), this
+        },
+        add: function (t, i) {
+          return (this.x += t || 0), (this.y += i || 0), this
+        },
+        subtract: function (t, i) {
+          return (this.x -= t || 0), (this.y -= i || 0), this
+        },
+        clampX: function (t, i) {
+          return (this.x = Math.max(t, Math.min(this.x, i))), this
+        },
+        clampY: function (t, i) {
+          return (this.y = Math.max(t, Math.min(this.y, i))), this
+        },
+        flipX: function () {
+          return (this.x *= -1), this
+        },
+        flipY: function () {
+          return (this.y *= -1), this
+        }
+      }
+      const h = function (t) {
+        ;(this._canvas = null),
+          (this._context = null),
+          (this._sto = null),
+          (this._width = 0),
+          (this._height = 0),
+          (this._scroll = 0),
+          (this._ribbons = []),
+          (this._options = {
+            colorSaturation: '80%',
+            colorBrightness: '60%',
+            colorAlpha: 0.65,
+            colorCycleSpeed: 6,
+            verticalPosition: 'center',
+            horizontalSpeed: 150,
+            ribbonCount: 5,
+            strokeSize: 5,
+            parallaxAmount: -0.5,
+            animateSections: !0
+          }),
+          (this._onDraw = this._onDraw.bind(this)),
+          (this._onResize = this._onResize.bind(this)),
+          (this._onScroll = this._onScroll.bind(this)),
+          this.setOptions(t),
+          this.init()
+      }
+      return (
+        (h.prototype = {
+          constructor: h,
+          setOptions: function (t) {
+            if ('object' == typeof t)
+              for (const i in t)
+                t.hasOwnProperty(i) && (this._options[i] = t[i])
+          },
+          init: function () {
+            try {
+              ;(this._canvas = document.createElement('canvas')),
+                (this._canvas.id = id),
+                (this._canvas.style.display = 'block'),
+                (this._canvas.style.position = 'fixed'),
+                (this._canvas.style.margin = '0'),
+                (this._canvas.style.padding = '0'),
+                (this._canvas.style.border = '0'),
+                (this._canvas.style.outline = '0'),
+                (this._canvas.style.left = '0'),
+                (this._canvas.style.top = '0'),
+                (this._canvas.style.width = '100%'),
+                (this._canvas.style.height = '100%'),
+                (this._canvas.style['z-index'] = '0'),
+                (this._canvas.style['pointer-events'] = 'none'),
+                this._onResize(),
+                (this._context = this._canvas.getContext('2d')),
+                this._context.clearRect(0, 0, this._width, this._height),
+                (this._context.globalAlpha = this._options.colorAlpha),
+                window.addEventListener('resize', this._onResize),
+                window.addEventListener('scroll', this._onScroll),
+                document.body.appendChild(this._canvas)
+            } catch (t) {
+              return void console.warn('Canvas Context Error: ' + t.toString())
+            }
+            this._onDraw()
+          },
+          addRibbon: function () {
+            const t = Math.round(o(1, 9)) > 5 ? 'right' : 'left'
+            let i = 1e3
+            const n = 200,
+              s = 0 - n,
+              h = this._width + n
+            let a = 0,
+              r = 0
+            const l = 'right' === t ? s : h
+            let c = Math.round(o(0, this._height))
+            ;/^(top|min)$/i.test(this._options.verticalPosition)
+              ? (c = 0 + n)
+              : /^(middle|center)$/i.test(this._options.verticalPosition)
+              ? (c = this._height / 2)
+              : /^(bottom|max)$/i.test(this._options.verticalPosition) &&
+                (c = this._height - n)
+            const p = [],
+              _ = new e(l, c),
+              d = new e(l, c)
+            let u = null,
+              b = Math.round(o(0, 360)),
+              f = 0
+            for (; !(i <= 0); ) {
+              if (
+                (i--,
+                (a = Math.round(
+                  (1 * Math.random() - 0.2) * this._options.horizontalSpeed
+                )),
+                (r = Math.round(
+                  (1 * Math.random() - 0.5) * (0.25 * this._height)
+                )),
+                (u = new e()),
+                u.copy(d),
+                'right' === t)
+              ) {
+                if ((u.add(a, r), d.x >= h)) break
+              } else if ('left' === t && (u.subtract(a, r), d.x <= s)) break
+              p.push({
+                point1: new e(_.x, _.y),
+                point2: new e(d.x, d.y),
+                point3: u,
+                color: b,
+                delay: f,
+                dir: t,
+                alpha: 0,
+                phase: 0
+              }),
+                _.copy(d),
+                d.copy(u),
+                (f += 4),
+                (b += this._options.colorCycleSpeed)
+            }
+            this._ribbons.push(p)
+          },
+          _drawRibbonSection: function (t) {
+            if (t) {
+              if (t.phase >= 1 && t.alpha <= 0) return !0
+              if (t.delay <= 0) {
+                if (
+                  ((t.phase += 0.02),
+                  (t.alpha = 1 * Math.sin(t.phase)),
+                  (t.alpha = t.alpha <= 0 ? 0 : t.alpha),
+                  (t.alpha = t.alpha >= 1 ? 1 : t.alpha),
+                  this._options.animateSections)
+                ) {
+                  const i = 0.1 * Math.sin(1 + (t.phase * Math.PI) / 2)
+                  'right' === t.dir
+                    ? (t.point1.add(i, 0),
+                      t.point2.add(i, 0),
+                      t.point3.add(i, 0))
+                    : (t.point1.subtract(i, 0),
+                      t.point2.subtract(i, 0),
+                      t.point3.subtract(i, 0)),
+                    t.point1.add(0, i),
+                    t.point2.add(0, i),
+                    t.point3.add(0, i)
+                }
+              } else t.delay -= 0.5
+              const i = this._options.colorSaturation,
+                n = this._options.colorBrightness,
+                o =
+                  'hsla(' +
+                  t.color +
+                  ', ' +
+                  i +
+                  ', ' +
+                  n +
+                  ', ' +
+                  t.alpha +
+                  ' )'
+              this._context.save(),
+                0 !== this._options.parallaxAmount &&
+                  this._context.translate(
+                    0,
+                    this._scroll * this._options.parallaxAmount
+                  ),
+                this._context.beginPath(),
+                this._context.moveTo(t.point1.x, t.point1.y),
+                this._context.lineTo(t.point2.x, t.point2.y),
+                this._context.lineTo(t.point3.x, t.point3.y),
+                (this._context.fillStyle = o),
+                this._context.fill(),
+                this._options.strokeSize > 0 &&
+                  ((this._context.lineWidth = this._options.strokeSize),
+                  (this._context.strokeStyle = o),
+                  (this._context.lineCap = 'round'),
+                  this._context.stroke()),
+                this._context.restore()
+            }
+            return !1
+          },
+          _onDraw: function () {
+            for (let t = 0, i = this._ribbons.length; t < i; ++t)
+              this._ribbons[t] || this._ribbons.splice(t, 1)
+            this._context.clearRect(0, 0, this._width, this._height)
+            for (let t = 0; t < this._ribbons.length; ++t) {
+              const i = this._ribbons[t],
+                n = i.length
+              let o = 0
+              for (let t = 0; t < n; ++t) this._drawRibbonSection(i[t]) && o++
+              o >= n && (this._ribbons[t] = null)
+            }
+            this._ribbons.length < this._options.ribbonCount &&
+              this.addRibbon(),
+              requestAnimationFrame(this._onDraw)
+          },
+          _onResize: function (t) {
+            const i = s(t)
+            ;(this._width = i.width),
+              (this._height = i.height),
+              this._canvas &&
+                ((this._canvas.width = this._width),
+                (this._canvas.height = this._height),
+                this._context &&
+                  (this._context.globalAlpha = this._options.colorAlpha))
+          },
+          _onScroll: function (t) {
+            const i = s(t)
+            this._scroll = i.scrolly
+          }
+        }),
+        h
+      )
+    })())
+  new Ribbons({
+    colorSaturation: '60%',
+    colorBrightness: '50%',
+    colorAlpha: 0.5,
+    colorCycleSpeed: 5,
+    verticalPosition: 'random',
+    horizontalSpeed: 200,
+    ribbonCount: 3,
+    strokeSize: 0,
+    parallaxAmount: -0.2,
+    animateSections: !0
+  })
+}

package/components/FullScreenButton.js

@@ -0,0 +1,48 @@
+import { isBrowser } from '@/lib/utils'
+import React, { useState } from 'react'
+
+/**
+ * 全屏按钮
+ * @returns
+ */
+const FullScreenButton = () => {
+  const [isFullScreen, setIsFullScreen] = useState(false)
+
+  const handleFullScreenClick = () => {
+    if (!isBrowser) {
+      return
+    }
+    const element = document.documentElement
+    if (!isFullScreen) {
+      if (element.requestFullscreen) {
+        element.requestFullscreen()
+      } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen()
+      } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen()
+      } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen()
+      }
+      setIsFullScreen(true)
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen()
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen()
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen()
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen()
+      }
+      setIsFullScreen(false)
+    }
+  }
+
+  return (
+      <button onClick={handleFullScreenClick} className='dark:text-gray-300'>
+        {isFullScreen ? '退出全屏' : <i className="fa-solid fa-expand"></i>}
+      </button>
+  )
+}
+
+export default FullScreenButton

package/components/Giscus.js

@@ -0,0 +1,33 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import Giscus from '@giscus/react'
+
+/**
+ * Giscus评论 @see https://giscus.app/zh-CN
+ * Contribute by @txs https://github.com/txs/NotionNext/commit/1bf7179d0af21fb433e4c7773504f244998678cb
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+const GiscusComponent = () => {
+  const { isDarkMode } = useGlobal()
+  const theme = isDarkMode ? 'dark' : 'light'
+
+  return (
+    <Giscus
+      repo={BLOG.COMMENT_GISCUS_REPO}
+      repoId={BLOG.COMMENT_GISCUS_REPO_ID}
+      categoryId={BLOG.COMMENT_GISCUS_CATEGORY_ID}
+      mapping={BLOG.COMMENT_GISCUS_MAPPING}
+      reactionsEnabled={BLOG.COMMENT_GISCUS_REACTIONS_ENABLED}
+      emitMetadata={BLOG.COMMENT_GISCUS_EMIT_METADATA}
+      theme={theme}
+      inputPosition={BLOG.COMMENT_GISCUS_INPUT_POSITION}
+      lang={BLOG.COMMENT_GISCUS_LANG}
+      loading={BLOG.COMMENT_GISCUS_LOADING}
+      crossorigin={BLOG.COMMENT_GISCUS_CROSSORIGIN}
+    />
+  )
+}
+
+export default GiscusComponent

package/components/Gitalk.js

@@ -0,0 +1,42 @@
+// import 'gitalk/dist/gitalk.css'
+import BLOG from '@/blog.config'
+import { loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
+// import GitalkComponent from 'gitalk/dist/gitalk-component'
+
+const Gitalk = ({ frontMatter }) => {
+  //   return <GitalkComponent options={{
+  //     id: frontMatter.id,
+  //     title: frontMatter.title,
+  //     clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
+  //     clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
+  //     repo: BLOG.COMMENT_GITALK_REPO,
+  //     owner: BLOG.COMMENT_GITALK_OWNER,
+  //     admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
+  //     distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE)
+  //   }} />
+  const loadGitalk = async() => {
+    await loadExternalResource(BLOG.COMMENT_GITALK_CSS_CDN_URL, 'css')
+    await loadExternalResource(BLOG.COMMENT_GITALK_JS_CDN_URL, 'js')
+    const Gitalk = window.Gitalk
+
+    const gitalk = new Gitalk({
+      clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
+      clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
+      repo: BLOG.COMMENT_GITALK_REPO,
+      owner: BLOG.COMMENT_GITALK_OWNER,
+      admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
+      id: frontMatter.id, // Ensure uniqueness and length less than 50
+      distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE) // Facebook-like distraction free mode
+    })
+
+    gitalk.render('gitalk-container')
+  }
+  useEffect(() => {
+    loadGitalk()
+  }, [])
+
+  return <div id="gitalk-container"></div>
+}
+
+export default Gitalk