add copy button to gist code

update old post
This commit is contained in:
DefectingCat
2023-12-26 11:21:11 +08:00
parent cf0c91edb6
commit 4f00c9c2d3
4 changed files with 16 additions and 9 deletions

View File

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

View File

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

View File

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

View File

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