From 43f03a41e82198fb90904420ad13e8769dae31a6 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Tue, 9 Apr 2024 18:18:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=87=8F=E5=B0=91=E6=97=A0=E7=94=A8package?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ShareButtons.js | 674 +++++++++++++++++++------------------
 package.json               |   4 -
 yarn.lock                  |  10 -
 3 files changed, 341 insertions(+), 347 deletions(-)

diff --git a/components/ShareButtons.js b/components/ShareButtons.js
index e3714b79..853aa3a4 100644
--- a/components/ShareButtons.js
+++ b/components/ShareButtons.js
@@ -1,53 +1,52 @@
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
-import copy from 'copy-to-clipboard'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import {
-  FacebookShareButton,
-  FacebookIcon,
-  FacebookMessengerShareButton,
-  FacebookMessengerIcon,
-  RedditShareButton,
-  RedditIcon,
-  LineShareButton,
-  LineIcon,
-  EmailShareButton,
   EmailIcon,
-  TwitterShareButton,
-  TwitterIcon,
-  TelegramShareButton,
-  TelegramIcon,
-  WhatsappShareButton,
-  WhatsappIcon,
-  LinkedinShareButton,
+  EmailShareButton,
+  FacebookIcon,
+  FacebookMessengerIcon,
+  FacebookMessengerShareButton,
+  FacebookShareButton,
+  HatenaIcon,
+  HatenaShareButton,
+  InstapaperIcon,
+  InstapaperShareButton,
+  LineIcon,
+  LineShareButton,
   LinkedinIcon,
-  PinterestShareButton,
-  PinterestIcon,
-  VKIcon,
-  VKShareButton,
-  OKShareButton,
-  OKIcon,
-  TumblrShareButton,
-  TumblrIcon,
+  LinkedinShareButton,
   LivejournalIcon,
   LivejournalShareButton,
-  MailruShareButton,
   MailruIcon,
+  MailruShareButton,
+  OKIcon,
+  OKShareButton,
+  PinterestIcon,
+  PinterestShareButton,
+  PocketIcon,
+  PocketShareButton,
+  RedditIcon,
+  RedditShareButton,
+  TelegramIcon,
+  TelegramShareButton,
+  TumblrIcon,
+  TumblrShareButton,
+  TwitterIcon,
+  TwitterShareButton,
+  VKIcon,
+  VKShareButton,
   ViberIcon,
   ViberShareButton,
-  WorkplaceShareButton,
-  WorkplaceIcon,
-  WeiboShareButton,
   WeiboIcon,
-  PocketShareButton,
-  PocketIcon,
-  InstapaperShareButton,
-  InstapaperIcon,
-  HatenaShareButton,
-  HatenaIcon
+  WeiboShareButton,
+  WhatsappIcon,
+  WhatsappShareButton,
+  WorkplaceIcon,
+  WorkplaceShareButton
 } from 'react-share'
 
 const QrCode = dynamic(() => import('@/components/QrCode'), { ssr: false })
@@ -59,10 +58,11 @@ const QrCode = dynamic(() => import('@/components/QrCode'), { ssr: false })
  */
 const ShareButtons = ({ post }) => {
   const router = useRouter()
-  const shareUrl = siteConfig('LINK') + router.asPath
+  const [shareUrl, setShareUrl] = useState(siteConfig('LINK') + router.asPath)
   const title = post.title || siteConfig('TITLE')
   const image = post.pageCover
-  const body = post?.title + ' | ' + title + ' ' + shareUrl + ' ' + post?.summary
+  const body =
+    post?.title + ' | ' + title + ' ' + shareUrl + ' ' + post?.summary
 
   const services = siteConfig('POSTS_SHARE_SERVICES').split(',')
   const titleWithSiteInfo = title + ' | ' + siteConfig('TITLE')
@@ -70,8 +70,8 @@ const ShareButtons = ({ post }) => {
   const [qrCodeShow, setQrCodeShow] = useState(false)
 
   const copyUrl = () => {
-    copy(shareUrl)
-    alert(locale.COMMON.URL_COPIED)
+    navigator?.clipboard?.writeText(shareUrl)
+    alert(locale.COMMON.URL_COPIED + ' \n' + shareUrl)
   }
 
   const openPopover = () => {
@@ -81,300 +81,308 @@ const ShareButtons = ({ post }) => {
     setQrCodeShow(false)
   }
 
+  useEffect(() => {
+    setShareUrl(window.location.href)
+  }, [])
+
   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={siteConfig('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='cursor-pointer bg-blue-600 text-white rounded-full mx-1'>
-                        <a target='_blank' rel='noreferrer' aria-label="Share by QQ" 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='cursor-pointer bg-green-600 text-white rounded-full mx-1'>
-                        <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') + ' z-40 absolute bottom-10 -left-10 bg-white shadow-xl transition-all duration-200 text-center'}>
-                                <div className='p-2 mt-1 w-28 h-28'>
-                                    { qrCodeShow && <QrCode value={shareUrl}/> }
-                                </div>
-                                <span className='text-black font-semibold p-1 rounded-t-lg text-sm mx-auto mb-1'>
-                                    {locale.COMMON.SCAN_QR_CODE}
-                                </span>
-                        </div>
-                        </div>
-                    </button>
-              }
-              if (singleService === 'link') {
-                return <button aria-label={singleService} key={singleService} className='cursor-pointer bg-yellow-500 text-white rounded-full mx-1'>
-                        <div alt={locale.COMMON.URL_COPIED} onClick={copyUrl} >
-                            <i className='fas fa-link w-8' />
-                        </div>
-                    </button>
-              }
-              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={siteConfig('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='cursor-pointer bg-blue-600 text-white rounded-full mx-1'>
+              <a
+                target='_blank'
+                rel='noreferrer'
+                aria-label='Share by QQ'
+                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='cursor-pointer bg-green-600 text-white rounded-full mx-1'>
+              <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') +
+                    ' z-40 absolute bottom-10 -left-10 bg-white shadow-xl transition-all duration-200 text-center'
+                  }>
+                  <div className='p-2 mt-1 w-28 h-28'>
+                    {qrCodeShow && <QrCode value={shareUrl} />}
+                  </div>
+                  <span className='text-black font-semibold p-1 rounded-t-lg text-sm mx-auto mb-1'>
+                    {locale.COMMON.SCAN_QR_CODE}
+                  </span>
+                </div>
+              </div>
+            </button>
+          )
+        }
+        if (singleService === 'link') {
+          return (
+            <button
+              aria-label={singleService}
+              key={singleService}
+              className='cursor-pointer bg-yellow-500 text-white rounded-full mx-1'>
+              <div alt={locale.COMMON.URL_COPIED} onClick={copyUrl}>
+                <i className='fas fa-link w-8' />
+              </div>
+            </button>
+          )
+        }
+        return <></>
+      })}
+    </>
   )
 }
 
diff --git a/package.json b/package.json
index 5a4a8cce..c17bd829 100644
--- a/package.json
+++ b/package.json
@@ -28,8 +28,6 @@
         "algoliasearch": "^4.18.0",
         "animejs": "^3.2.1",
         "aos": "^2.3.4",
-        "axios": ">=0.21.1",
-        "copy-to-clipboard": "^3.3.1",
         "feed": "^4.2.2",
         "js-md5": "^0.7.3",
         "localStorage": "^1.0.4",
@@ -40,8 +38,6 @@
         "notion-client": "6.15.6",
         "notion-utils": "6.15.6",
         "nprogress": "^0.2.0",
-        "preact": "^10.5.15",
-        "prism-themes": "1.9.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-facebook": "^8.1.4",
diff --git a/yarn.lock b/yarn.lock
index 8e4cfd52..c5711de7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4146,11 +4146,6 @@ postcss@^8.4.23, postcss@^8.4.31, postcss@^8.4.33:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-preact@^10.5.15:
-  version "10.19.3"
-  resolved "https://registry.yarnpkg.com/preact/-/preact-10.19.3.tgz#7a7107ed2598a60676c943709ea3efb8aaafa899"
-  integrity sha512-nHHTeFVBTHRGxJXKkKu5hT8C/YWBkPso4/Gad6xuj5dbptt9iF9NZr9pHbPhBrnT2klheu7mHTxTZ/LjwJiEiQ==
-
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -4168,11 +4163,6 @@ prettier@3.2.5:
   resolved "https://r.cnpmjs.org/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
   integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
 
-prism-themes@1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/prism-themes/-/prism-themes-1.9.0.tgz#19c034f3205f1e28d75d89728e54ccd745f7e3dd"
-  integrity sha512-tX2AYsehKDw1EORwBps+WhBFKc2kxfoFpQAjxBndbZKr4fRmMkv47XN0BghC/K1qwodB1otbe4oF23vUTFDokw==
-
 prismjs@^1.27.0:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"