减少无用package

This commit is contained in:
tangly1024.com
2024-04-09 18:18:48 +08:00
parent 774c03f979
commit 43f03a41e8
3 changed files with 341 additions and 347 deletions

View File

@@ -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 <></>
})}
</>
)
}

View File

@@ -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",

View File

@@ -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"