xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 09:11:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add code poay

Browse Source 
* Add Footer on post page
This commit is contained in:
DefectingCat
2021-11-18 18:06:19 +08:00
parent 45d259067e
commit 341b5ce896
4 changed files with 90 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/css/rua.css
View File

@ -523,6 +523,7 @@ div.cm-s-inner span.CodeMirror-matchingbracket {
}
#write pre {
position: relative;
margin: 10px 0;
}

1
package.json
View File

@ -13,6 +13,7 @@
"@chakra-ui/react": "^1.6.10",
"@emotion/react": "^11",
"@emotion/styled": "^11",
"@giscus/react": "^1.0.1",
"antd": "^4.16.13",
"autoprefixer": "^10.3.7",
"date-fns": "^2.25.0",

100
pages/posts/[slug].tsx
View File

@ -9,7 +9,7 @@ import remarkRehype from 'remark-rehype';
import remarkParse from 'remark-parse';
import rehypeHighlight from 'rehype-highlight';
import { unified } from 'unified';
import { createElement, Fragment } from 'react';
import { createElement, Fragment, MouseEventHandler, useState } from 'react';
import {
Box,
Image,
@ -18,6 +18,7 @@ import {
Icon,
Link,
Button,
useClipboard,
} from '@chakra-ui/react';
import 'highlight.js/styles/github.css';
import xml from 'highlight.js/lib/languages/xml';
@ -27,6 +28,7 @@ import Zoom from 'react-medium-image-zoom';
import 'react-medium-image-zoom/dist/styles.css';
import { FiCalendar } from 'react-icons/fi';
import { useRouter } from 'next/router';
import Footer from '../../components/Footer';
export async function getStaticPaths() {
const paths = getAllPostSlugs();
@ -48,6 +50,17 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
const Post = ({ postData }: InferGetStaticPropsType<typeof getStaticProps>) => {
const router = useRouter();
// Copy code
const [codeContent, setCodeContent] = useState('');
const { hasCopied, onCopy } = useClipboard(codeContent);
const copyCode: MouseEventHandler<HTMLButtonElement> = (e) => {
const target = e.target as HTMLButtonElement;
// Button is sibling with Code tag
const codeToCopy = target.nextElementSibling?.textContent;
codeToCopy && setCodeContent(codeToCopy);
onCopy();
};
const processedContent = unified()
.use(remarkParse)
.use(remarkToc, {
@ -80,6 +93,23 @@ const Post = ({ postData }: InferGetStaticPropsType<typeof getStaticProps>) => {
</Box>
);
},
pre: (props: any) => {
return (
<pre {...props}>
<Button
size="xs"
colorScheme="teal"
position="absolute"
top="0.5rem"
right="0.5rem"
onClick={copyCode}
>
{hasCopied ? 'COPYIED' : 'COPY'}
</Button>
{props.children}
</pre>
);
},
},
Fragment,
});
@ -122,43 +152,49 @@ const Post = ({ postData }: InferGetStaticPropsType<typeof getStaticProps>) => {
BACK
</Button>
<Box
<Flex
w={['full', 'full', '55rem']}
borderRadius="10px"
mt={['1rem', '1rem', '3rem']}
shadow="lg"
bg="white"
mx={['unset', 'unset', '1.5rem']}
overflow="hidden"
flex="1"
maxW="55rem"
flexFlow="column"
px={['unset', 'unset', '1.5rem']}
>
{postData.index_img && (
<Image
src={postData.index_img}
w="100%"
fallback={<></>}
fit="cover"
alt="Head image"
/>
)}
<Box as="article" p={['1rem', '1rem', '2rem']}>
<Box as="header">
<Heading as="h1" mb="1rem">
{postData.title}
</Heading>
<Box
borderRadius="10px"
mt={['1rem', '1rem', '3rem']}
shadow="lg"
bg="white"
overflow="hidden"
flex="1"
maxW="55rem"
>
{postData.index_img && (
<Image
src={postData.index_img}
w="100%"
fallback={<></>}
fit="cover"
alt="Head image"
/>
)}
<Box as="article" p={['1rem', '1rem', '2rem']}>
<Box as="header">
<Heading as="h1" mb="1rem">
{postData.title}
</Heading>
<Flex alignItems="center" color="gray.600">
<Icon as={FiCalendar} mr="0.5rem" />
<Date dateString={postData.date} />
</Flex>
</Box>
<Flex alignItems="center" color="gray.600">
<Icon as={FiCalendar} mr="0.5rem" />
<Date dateString={postData.date} />
</Flex>
</Box>
<Box as="section" id="write" mt="2rem">
{postContent}
<Box as="section" id="write" mt="2rem">
{postContent}
</Box>
</Box>
</Box>
</Box>
<Footer />
</Flex>
{toc && (
<Box

20
yarn.lock
View File

@ -816,6 +816,13 @@
minimatch "^3.0.4"
strip-json-comments "^3.1.1"
"@giscus/react@^1.0.1":
version "1.0.1"
resolved "https://registry.npmmirror.com/@giscus/react/download/@giscus/react-1.0.1.tgz#3fae2b5e00912a76cb136679f6229d3d6ea28898"
integrity sha512-vViRGjfmDy9xvRIx+6+hocL3iAipbKx4gxtSpQBzOksDwnZS0QbB+r19bYQ08vw8CfHRwE6ws8AOO9yEUrzUyQ==
dependencies:
iframe-resizer-react "^1.1.0"
"@hapi/accept@5.0.2":
version "5.0.2"
resolved "https://registry.npm.taobao.org/@hapi/accept/download/@hapi/accept-5.0.2.tgz#ab7043b037e68b722f93f376afb05e85c0699523"
@ -2935,6 +2942,19 @@ ieee754@^1.1.4:
resolved "https://registry.nlark.com/ieee754/download/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
integrity sha1-jrehCmP/8l0VpXsAFYbRd9Gw01I=
iframe-resizer-react@^1.1.0:
version "1.1.0"
resolved "https://registry.nlark.com/iframe-resizer-react/download/iframe-resizer-react-1.1.0.tgz#5009e019b7a5c7f1c009bff5bcdf0dbf33557465"
integrity sha1-UAngGbelx/HACb/1vN8NvzNVdGU=
dependencies:
iframe-resizer "^4.3.0"
warning "^4.0.3"
iframe-resizer@^4.3.0:
version "4.3.2"
resolved "https://registry.nlark.com/iframe-resizer/download/iframe-resizer-4.3.2.tgz#42dd88345d18b9e377b6044dddb98c664ab0ce6b"
integrity sha1-Qt2INF0YueN3tgRN3bmMZkqwzms=
ignore@^4.0.6:
version "4.0.6"
resolved "https://registry.npmmirror.com/ignore/download/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"