nnbb 0.0.1

package/components/ShareButtons.js

@@ -0,0 +1,403 @@
+import BLOG from '@/blog.config';
+import copy from 'copy-to-clipboard';
+import dynamic from 'next/dynamic';
+import { useState } from 'react';
+
+import {
+  FacebookShareButton,
+  FacebookIcon,
+  FacebookMessengerShareButton,
+  FacebookMessengerIcon,
+  RedditShareButton,
+  RedditIcon,
+  LineShareButton,
+  LineIcon,
+  EmailShareButton,
+  EmailIcon,
+  TwitterShareButton,
+  TwitterIcon,
+  TelegramShareButton,
+  TelegramIcon,
+  WhatsappShareButton,
+  WhatsappIcon,
+  LinkedinShareButton,
+  LinkedinIcon,
+  PinterestShareButton,
+  PinterestIcon,
+  VKIcon,
+  VKShareButton,
+  OKShareButton,
+  OKIcon,
+  TumblrShareButton,
+  TumblrIcon,
+  LivejournalIcon,
+  LivejournalShareButton,
+  MailruShareButton,
+  MailruIcon,
+  ViberIcon,
+  ViberShareButton,
+  WorkplaceShareButton,
+  WorkplaceIcon,
+  WeiboShareButton,
+  WeiboIcon,
+  PocketShareButton,
+  PocketIcon,
+  InstapaperShareButton,
+  InstapaperIcon,
+  HatenaShareButton,
+  HatenaIcon,
+} from 'react-share';
+import { useTranslation } from 'next-i18next';
+
+const QrCode = dynamic(() => import('@/components/QrCode'), { ssr: false });
+
+/**
+ * @author https://github.com/txs
+ * @param {*} param0
+ * @returns
+ */
+const ShareButtons = ({ shareUrl, title, body, image }) => {
+  const services = BLOG.POSTS_SHARE_SERVICES.split(',');
+  const titleWithSiteInfo = title + ' | ' + BLOG.TITLE;
+  const [qrCodeShow, setQrCodeShow] = useState(false);
+  const { t } = useTranslation('common');
+
+  const copyUrl = () => {
+    copy(shareUrl);
+    alert(t('url-copied'));
+  };
+
+  const openPopover = () => {
+    setQrCodeShow(true);
+  };
+  const closePopover = () => {
+    setQrCodeShow(false);
+  };
+
+  return (
+    <>
+      {services.map((singleService) => {
+        if (singleService === 'facebook') {
+          return (
+            <FacebookShareButton
+              key={singleService}
+              url={shareUrl}
+              className="mx-1"
+            >
+              <FacebookIcon size={32} round />
+            </FacebookShareButton>
+          );
+        }
+        if (singleService === 'messenger') {
+          return (
+            <FacebookMessengerShareButton
+              key={singleService}
+              url={shareUrl}
+              appId={BLOG.FACEBOOK_APP_ID}
+              className="mx-1"
+            >
+              <FacebookMessengerIcon size={32} round />
+            </FacebookMessengerShareButton>
+          );
+        }
+        if (singleService === 'line') {
+          return (
+            <LineShareButton
+              key={singleService}
+              url={shareUrl}
+              className="mx-1"
+            >
+              <LineIcon size={32} round />
+            </LineShareButton>
+          );
+        }
+        if (singleService === 'reddit') {
+          return (
+            <RedditShareButton
+              key={singleService}
+              url={shareUrl}
+              title={titleWithSiteInfo}
+              windowWidth={660}
+              windowHeight={460}
+              className="mx-1"
+            >
+              <RedditIcon size={32} round />
+            </RedditShareButton>
+          );
+        }
+        if (singleService === 'email') {
+          return (
+            <EmailShareButton
+              key={singleService}
+              url={shareUrl}
+              subject={titleWithSiteInfo}
+              body={body}
+              className="mx-1"
+            >
+              <EmailIcon size={32} round />
+            </EmailShareButton>
+          );
+        }
+        if (singleService === 'twitter') {
+          return (
+            <TwitterShareButton
+              key={singleService}
+              url={shareUrl}
+              title={titleWithSiteInfo}
+              className="mx-1"
+            >
+              <TwitterIcon size={32} round />
+            </TwitterShareButton>
+          );
+        }
+        if (singleService === 'telegram') {
+          return (
+            <TelegramShareButton
+              key={singleService}
+              url={shareUrl}
+              title={titleWithSiteInfo}
+              className="mx-1"
+            >
+              <TelegramIcon size={32} round />
+            </TelegramShareButton>
+          );
+        }
+        if (singleService === 'whatsapp') {
+          return (
+            <WhatsappShareButton
+              key={singleService}
+              url={shareUrl}
+              title={titleWithSiteInfo}
+              separator=":: "
+              className="mx-1"
+            >
+              <WhatsappIcon size={32} round />
+            </WhatsappShareButton>
+          );
+        }
+        if (singleService === 'linkedin') {
+          return (
+            <LinkedinShareButton
+              key={singleService}
+              url={shareUrl}
+              className="mx-1"
+            >
+              <LinkedinIcon size={32} round />
+            </LinkedinShareButton>
+          );
+        }
+        if (singleService === 'pinterest') {
+          return (
+            <PinterestShareButton
+              key={singleService}
+              url={shareUrl}
+              media={image}
+              className="mx-1"
+            >
+              <PinterestIcon size={32} round />
+            </PinterestShareButton>
+          );
+        }
+        if (singleService === 'vkshare') {
+          return (
+            <VKShareButton
+              key={singleService}
+              url={shareUrl}
+              image={image}
+              className="mx-1"
+            >
+              <VKIcon size={32} round />
+            </VKShareButton>
+          );
+        }
+        if (singleService === 'okshare') {
+          return (
+            <OKShareButton
+              key={singleService}
+              url={shareUrl}
+              image={image}
+              className="mx-1"
+            >
+              <OKIcon size={32} round />
+            </OKShareButton>
+          );
+        }
+        if (singleService === 'tumblr') {
+          return (
+            <TumblrShareButton
+              key={singleService}
+              url={shareUrl}
+              title={titleWithSiteInfo}
+              className="mx-1"
+            >
+              <TumblrIcon size={32} round />
+            </TumblrShareButton>
+          );
+        }
+        if (singleService === 'livejournal') {
+          return (
+            <LivejournalShareButton
+              key={singleService}
+              url={shareUrl}
+              title={titleWithSiteInfo}
+              description={shareUrl}
+              className="mx-1"
+            >
+              <LivejournalIcon size={32} round />
+            </LivejournalShareButton>
+          );
+        }
+        if (singleService === 'mailru') {
+          return (
+            <MailruShareButton
+              key={singleService}
+              url={shareUrl}
+              title={titleWithSiteInfo}
+              className="mx-1"
+            >
+              <MailruIcon size={32} round />
+            </MailruShareButton>
+          );
+        }
+        if (singleService === 'viber') {
+          return (
+            <ViberShareButton
+              key={singleService}
+              url={shareUrl}
+              title={titleWithSiteInfo}
+              className="mx-1"
+            >
+              <ViberIcon size={32} round />
+            </ViberShareButton>
+          );
+        }
+        if (singleService === 'workplace') {
+          return (
+            <WorkplaceShareButton
+              key={singleService}
+              url={shareUrl}
+              quote={titleWithSiteInfo}
+              className="mx-1"
+            >
+              <WorkplaceIcon size={32} round />
+            </WorkplaceShareButton>
+          );
+        }
+        if (singleService === 'weibo') {
+          return (
+            <WeiboShareButton
+              key={singleService}
+              url={shareUrl}
+              title={titleWithSiteInfo}
+              image={image}
+              className="mx-1"
+            >
+              <WeiboIcon size={32} round />
+            </WeiboShareButton>
+          );
+        }
+        if (singleService === 'pocket') {
+          return (
+            <PocketShareButton
+              key={singleService}
+              url={shareUrl}
+              title={titleWithSiteInfo}
+              className="mx-1"
+            >
+              <PocketIcon size={32} round />
+            </PocketShareButton>
+          );
+        }
+        if (singleService === 'instapaper') {
+          return (
+            <InstapaperShareButton
+              key={singleService}
+              url={shareUrl}
+              title={titleWithSiteInfo}
+              className="mx-1"
+            >
+              <InstapaperIcon size={32} round />
+            </InstapaperShareButton>
+          );
+        }
+        if (singleService === 'hatena') {
+          return (
+            <HatenaShareButton
+              key={singleService}
+              url={shareUrl}
+              title={titleWithSiteInfo}
+              windowWidth={660}
+              windowHeight={460}
+              className="mx-1"
+            >
+              <HatenaIcon size={32} round />
+            </HatenaShareButton>
+          );
+        }
+        if (singleService === 'qq') {
+          return (
+            <button
+              key={singleService}
+              className="mx-1 cursor-pointer rounded-full bg-blue-600 text-white"
+            >
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${title}&desc=${body}`}
+              >
+                <i className="fab fa-qq w-8" />
+              </a>
+            </button>
+          );
+        }
+        if (singleService === 'wechat') {
+          return (
+            <button
+              onMouseEnter={openPopover}
+              onMouseLeave={closePopover}
+              aria-label={singleService}
+              key={singleService}
+              className="mx-1 cursor-pointer rounded-full bg-green-600 text-white"
+            >
+              <div id="wechat-button">
+                <i className="fab fa-weixin w-8" />
+              </div>
+              <div className="absolute">
+                <div
+                  id="pop"
+                  className={
+                    (qrCodeShow ? 'opacity-100 ' : ' invisible opacity-0') +
+                    ' absolute -left-10 bottom-10 z-40 bg-white text-center shadow-xl transition-all duration-200'
+                  }
+                >
+                  <div className="mt-1 h-28 w-28 p-2">
+                    <QrCode value={shareUrl} />
+                  </div>
+                  <span className="mx-auto mb-1 rounded-t-lg p-1 text-sm font-semibold text-black">
+                    {t('scan-qr-code')}
+                  </span>
+                </div>
+              </div>
+            </button>
+          );
+        }
+        if (singleService === 'link') {
+          return (
+            <button
+              aria-label={singleService}
+              key={singleService}
+              className="mx-1 cursor-pointer rounded-full bg-yellow-500 text-white"
+            >
+              <div alt={t('url-copied')} onClick={copyUrl}>
+                <i className="fas fa-link w-8" />
+              </div>
+            </button>
+          );
+        }
+        return <></>;
+      })}
+    </>
+  );
+};
+
+export default ShareButtons;

package/components/SideBarDrawer.js

@@ -0,0 +1,50 @@
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+/**
+ * 侧边栏抽屉面板，可以从侧面拉出
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
+  const router = useRouter()
+  useEffect(() => {
+    const sideBarDrawerRouteListener = () => {
+      switchSideDrawerVisible(false)
+    }
+    router.events.on('routeChangeComplete', sideBarDrawerRouteListener)
+    return () => {
+      router.events.off('routeChangeComplete', sideBarDrawerRouteListener)
+    }
+  }, [router.events])
+
+  // 点击按钮更改侧边抽屉状态
+  const switchSideDrawerVisible = (showStatus) => {
+    if (showStatus) {
+      onOpen && onOpen()
+    } else {
+      onClose && onClose()
+    }
+    const sideBarDrawer = window.document.getElementById('sidebar-drawer')
+    const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
+
+    if (showStatus) {
+      sideBarDrawer?.classList.replace('-ml-60', 'ml-0')
+      sideBarDrawerBackground?.classList.replace('hidden', 'block')
+    } else {
+      sideBarDrawer?.classList.replace('ml-0', '-ml-60')
+      sideBarDrawerBackground?.classList.replace('block', 'hidden')
+    }
+  }
+
+  return <div id='sidebar-wrapper' className={' block lg:hidden top-0 ' + className }>
+    <div id="sidebar-drawer" className={`${isOpen ? 'ml-0 w-60 visible' : '-ml-60 max-w-side invisible'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
+      {children}
+    </div>
+
+    {/* 背景蒙版 */}
+    <div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }}
+      className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}/>
+  </div>
+}
+export default SideBarDrawer

package/components/StarrySky.js

@@ -0,0 +1,130 @@
+/* eslint-disable */
+import React from 'react'
+
+const StarrySky = () => {
+  React.useEffect(() => {
+    dark()
+  }, [])
+  return (
+    <div className="relative">
+      <canvas id="starry-sky-vixcity" style={{zIndex:1}} className="top-0 fixed pointer-events-none"></canvas>
+    </div>
+  )
+}
+
+export default StarrySky
+/**
+ * 创建星空雨
+ * @param config
+ */
+function dark() {
+  window.requestAnimationFrame =
+    window.requestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.msRequestAnimationFrame
+  var n,
+    e,
+    i,
+    h,
+    t = 0.05,
+    s = document.getElementById('starry-sky-vixcity'),
+    o = !0,
+    a = '180,184,240',
+    r = '226,225,142',
+    d = '226,225,224',
+    c = []
+  function f() {
+    ;(n = window.innerWidth),
+      (e = window.innerHeight),
+      (i = 0.216 * n),
+      s.setAttribute('width', n),
+      s.setAttribute('height', e)
+  }
+  function u() {
+    h.clearRect(0, 0, n, e)
+    for (var t = c.length, i = 0; i < t; i++) {
+      var s = c[i]
+      s.move(), s.fadeIn(), s.fadeOut(), s.draw()
+    }
+  }
+  function y() {
+    ;(this.reset = function () {
+      ;(this.giant = m(3)),
+        (this.comet = !this.giant && !o && m(10)),
+        (this.x = l(0, n - 10)),
+        (this.y = l(0, e)),
+        (this.r = l(1.1, 2.6)),
+        (this.dx = l(t, 6 * t) + (this.comet + 1 - 1) * t * l(50, 120) + 2 * t),
+        (this.dy = -l(t, 6 * t) - (this.comet + 1 - 1) * t * l(50, 120)),
+        (this.fadingOut = null),
+        (this.fadingIn = !0),
+        (this.opacity = 0),
+        (this.opacityTresh = l(0.2, 1 - 0.4 * (this.comet + 1 - 1))),
+        (this.do = l(5e-4, 0.002) + 0.001 * (this.comet + 1 - 1))
+    }),
+      (this.fadeIn = function () {
+        this.fadingIn &&
+          ((this.fadingIn = !(this.opacity > this.opacityTresh)),
+          (this.opacity += this.do))
+      }),
+      (this.fadeOut = function () {
+        this.fadingOut &&
+          ((this.fadingOut = !(this.opacity < 0)),
+          (this.opacity -= this.do / 2),
+          (this.x > n || this.y < 0) && ((this.fadingOut = !1), this.reset()))
+      }),
+      (this.draw = function () {
+        if ((h.beginPath(), this.giant))
+          (h.fillStyle = 'rgba(' + a + ',' + this.opacity + ')'),
+            h.arc(this.x, this.y, 2, 0, 2 * Math.PI, !1)
+        else if (this.comet) {
+          ;(h.fillStyle = 'rgba(' + d + ',' + this.opacity + ')'),
+            h.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, !1)
+          for (var t = 0; t < 30; t++)
+            (h.fillStyle =
+              'rgba(' +
+              d +
+              ',' +
+              (this.opacity - (this.opacity / 20) * t) +
+              ')'),
+              h.rect(
+                this.x - (this.dx / 4) * t,
+                this.y - (this.dy / 4) * t - 2,
+                2,
+                2
+              ),
+              h.fill()
+        } else
+          (h.fillStyle = 'rgba(' + r + ',' + this.opacity + ')'),
+            h.rect(this.x, this.y, this.r, this.r)
+        h.closePath(), h.fill()
+      }),
+      (this.move = function () {
+        ;(this.x += this.dx),
+          (this.y += this.dy),
+          !1 === this.fadingOut && this.reset(),
+          (this.x > n - n / 4 || this.y < 0) && (this.fadingOut = !0)
+      }),
+      setTimeout(function () {
+        o = !1
+      }, 50)
+  }
+  function m(t) {
+    return Math.floor(1e3 * Math.random()) + 1 < 10 * t
+  }
+  function l(t, i) {
+    return Math.random() * (i - t) + t
+  }
+  f(),
+    window.addEventListener('resize', f, !1),
+    (function () {
+      h = s.getContext('2d')
+      for (var t = 0; t < i; t++) (c[t] = new y()), c[t].reset()
+      u()
+    })(),
+    (function t() {
+      document.getElementsByTagName('html')[0].className == 'dark' && u(),
+        window.requestAnimationFrame(t)
+    })()
+}

package/components/Tabs.js

@@ -0,0 +1,64 @@
+import React, { useState } from 'react'
+
+/**
+ * Tabs切换标签
+ * @param {*} param0
+ * @returns
+ */
+const Tabs = ({ className, children }) => {
+  const [currentTab, setCurrentTab] = useState(0)
+
+  if (!children) {
+    return <></>
+  }
+
+  children = children.filter(c => c !== '')
+
+  let count = 0
+  children.forEach(e => {
+    if (e) {
+      count++
+    }
+  })
+
+  if (count === 0) {
+    return <></>
+  }
+
+  if (count === 1) {
+    return <section className={'duration-200 ' + className}>
+            {children}
+        </section>
+  }
+
+  function tabClickHandle(i) {
+    setCurrentTab(i)
+  }
+
+  return <div className={'mb-5 duration-200 ' + className}>
+        <ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600 overflow-auto'>
+            {children.map((item, index) => {
+              return <li key={index}
+                    className={(currentTab === index ? 'font-black border-b-2 border-red-400 text-red-400 animate__animated animate__jello ' : 'font-extralight cursor-pointer') + ' text-sm font-sans '}
+                    onClick={() => {
+                      tabClickHandle(index)
+                    }}>
+                    {item?.key}
+                </li>
+            })}
+        </ul>
+        <div>
+            {children.map((item, index) => {
+              return <section key={index}
+                    data-aos="fade-up"
+                    data-aos-duration="300"
+                    data-aos-once="true"
+                    data-aos-anchor-placement="top-bottom">
+                    {currentTab === index && item}
+                </section>
+            })}
+        </div>
+    </div>
+}
+
+export default Tabs