feat: show toast after copy to clipboard

ether-lnk · May 20, 2024 · 6aadea0 · 6aadea0
1 parent a352aca
commit 6aadea0
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-toastify": "^10.0.5",
     "reading-time": "^1.5.0",
     "remark-directive": "^3.0.0",
     "tailwindcss": "^3.4.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/fonts/iconfont.ttf b/public/fonts/iconfont.ttf
diff --git a/public/fonts/iconfont.woff b/public/fonts/iconfont.woff
diff --git a/public/fonts/iconfont.woff2 b/public/fonts/iconfont.woff2
diff --git a/src/components/ToastContainer.tsx b/src/components/ToastContainer.tsx
@@ -0,0 +1,14 @@
+import { ToastContainer as ReactToastContainer } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css';
+
+export function ToastContainer() {
+  return <ReactToastContainer position='bottom-right' autoClose={3000} hideProgressBar closeButton={CloseButton}
+    toastClassName="!bg-primary !text-primary text-sm border border-primary"
+  />
+}
+
+function CloseButton({ closeToast }: { closeToast: (event: React.MouseEvent<HTMLElement>) => void }) {
+  return <button type="button" aria-label='Close Toast' className='text-lg opacity-50 hover:opacity-100' onClick={closeToast}>
+    <i className='iconfont icon-close'></i>
+  </button>
+}
diff --git a/src/components/post/ActionAside.tsx b/src/components/post/ActionAside.tsx
@@ -6,6 +6,7 @@ import * as QR from 'qrcode.react'
 import { useAtomValue } from 'jotai'
 import { metaSlugAtom, metaTitleAtom } from '@/store/metaInfo'
 import clsx from 'clsx'
+import { toast } from 'react-toastify'
 
 const contentZIndex = 900
 const overlayZIndex = contentZIndex - 1
@@ -30,6 +31,7 @@ const shareList = [
     icon: 'icon-link',
     onClick: (data: ShareData) => {
       navigator.clipboard.writeText(data.url)
+      toast.success('已复制到剪贴板')
     },
   },
 ]

diff --git a/src/components/post/PostCopyright.tsx b/src/components/post/PostCopyright.tsx
@@ -2,6 +2,7 @@ import { author, site } from '@/config.json'
 import { getFormattedDateTime } from '@/utils/date'
 import { AnimatedSignature } from '../AnimatedSignature'
 import { useEffect, useState } from 'react'
+import { toast } from "react-toastify";
 
 function getPostUrl(slug: string) {
   return new URL(slug, site.url).href
@@ -21,6 +22,7 @@ export function PostCopyright({
 
   function handleCopyUrl() {
     navigator.clipboard.writeText(url)
+    toast.success('已复制文章链接')
   }
 
   useEffect(() => {

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -5,6 +5,7 @@ import ThemeLoader from '@/components/ThemeLoader.astro'
 import { ViewTransitions } from 'astro:transitions'
 import { site } from '@/config.json'
 import '@/styles/global.css'
+import { ToastContainer } from '@/components/ToastContainer'
 
 interface Props {
   title?: string
@@ -24,15 +25,15 @@ const { title, description, image } = Astro.props
     <AccentColorInjector />
     <script>
       import { version } from '../../package.json'
-
       console.log(
         `%c Gyoza ${version} %c https://gyoza.lxchapu.com `,
         'color: #fff; margin: 1em 0; padding: 5px 0; background: #ef8f99;',
-        'margin: 1em 0; padding: 5px 0; background: #efefef;',
+        'margin: 1em 0; padding: 5px 0; background: #efefef;'
       )
     </script>
   </head>
   <body>
     <slot />
+    <ToastContainer client:only="react" />
   </body>
 </html>
diff --git a/src/styles/iconfont.css b/src/styles/iconfont.css
@@ -1,9 +1,10 @@
 @font-face {
-  font-family: 'iconfont'; /* Project id 4528205 */
+  font-family: 'iconfont';
+  /* Project id 4528205 */
   src:
-    url('/fonts/iconfont.woff2?t=1715047888381') format('woff2'),
-    url('/fonts/iconfont.woff?t=1715047888381') format('woff'),
-    url('/fonts/iconfont.ttf?t=1715047888381') format('truetype');
+    url('/fonts/iconfont.woff2?t=1716210197380') format('woff2'),
+    url('/fonts/iconfont.woff?t=1716210197380') format('woff'),
+    url('/fonts/iconfont.ttf?t=1716210197380') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +14,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-alert:before {
+  content: '\e83a';
+}
+
+.icon-check:before {
+  content: '\e847';
+}
+
+.icon-error:before {
+  content: '\e854';
+}
+
+.icon-info:before {
+  content: '\e85f';
+}
+
+.icon-close:before {
+  content: '\e84a';
+}
+
 .icon-user-heart:before {
   content: '\e88c';
 }