add copy button to gist code

update old post

app/p/[slug]/page.tsx

@@ -1,3 +1,4 @@
+import '@catppuccin/highlightjs/sass/catppuccin.variables.scss';
 import clsx from 'clsx';
 import components from 'components/mdx/components';
 import data from 'content/mdx-data';
@@ -6,11 +7,10 @@ import { SingleToc, generateToc } from 'lib/utils';
 import { compileMDX } from 'next-mdx-remote/rsc';
 import dynamic from 'next/dynamic';
 import { notFound } from 'next/navigation';
+import rehypeHighlight from 'rehype-highlight';
 import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
-import rehypeHighlight from 'rehype-highlight';
 import { Post } from 'types';
-import '@catppuccin/highlightjs/sass/catppuccin.variables.scss';
 
 const PostToc = dynamic(() => import('components/post/post-toc'));
 const PostCommnetLine = dynamic(

components/pages/gists/gists-code.tsx

@@ -1,14 +1,15 @@
+import '@catppuccin/highlightjs/sass/catppuccin.variables.scss';
 import clsx from 'clsx';
+import CopyCode from 'components/post/copy-code';
 import { createElement, Fragment, memo } from 'react';
+import rehypeHighlight from 'rehype-highlight';
 import rehypeReact from 'rehype-react';
 import remarkGfm from 'remark-gfm';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
-import rehypeHighlight from 'rehype-highlight';
 import { GistsFile } from 'types';
 import { unified } from 'unified';
 import styles from './gists-code.module.css';
-import '@catppuccin/highlightjs/sass/catppuccin.variables.scss';
 
 interface Props {
   file: GistsFile;
@@ -77,10 +78,16 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
             </div>
           </div>
 
-          <div>{code}</div>
+          <div className={'relative group'}>
+            {code}
+            <CopyCode />
+          </div>
         </div>
       ) : (
-        <div>{code}</div>
+        <div className={'relative group'}>
+          {code}
+          <CopyCode />
+        </div>
       )}
     </>
   );

components/post/copy-button.tsx

@@ -25,8 +25,8 @@ const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
           className={clsx(
             'flex items-center justify-center',
             'border rounded-md',
-            'p-[6px] invisible',
+            'p-[6px] opacity-0',
-            'group-hover:visible',
+            'group-hover:opacity-100',
             'transition-opacity dark:border-gray-700',
             'duration-300',
             className,

content/posts/public-key-cryptgraphy.mdx

@@ -155,7 +155,7 @@ trust
 
 如果有小伙伴想和我扮演 Tom and Jerry 的话，或者想校验我的签名的文件的话。欢迎使用下述公钥
 
-[我的公钥 🔒！](https://1drv.ms/u/s!ArC4gW7Dc7wWhd5PD8R_o6Mmhp2LxA?e=Ivpa8X)
+<GistCode id="d76be64d0da465e026eb7f17e126df39" />
 
 ## 参考