Optimize performance

* set post card image height
* fix copy button issue

components/Footer.tsx

@@ -1,13 +1,15 @@
 import { FC } from 'react';
 import { Flex, Box, Text } from '@chakra-ui/react';
 
+const YEAR = new Date().getFullYear();
+
 const Footer: FC = () => {
   return (
     <>
       <Box h="3px" w="50px" bg="gray.500" rounded="xl" mt="2.5rem" />
       <Flex as="footer" flexFlow="column" py="1.5rem">
         <Text color={'gray.600'} fontWeight="bold" mb="0.5rem">
-          &copy;{new Date().getFullYear()} 小肥羊
+          &copy;{YEAR} 小肥羊
         </Text>
 
         <Text color={'gray.400'} fontSize="small">

components/NavBar.tsx

@@ -154,6 +154,7 @@ const NavBar: FC = () => {
         >
           {/* avatar */}
           <Image
+            boxSize="8rem"
             borderRadius="full"
             src="/images/img/avatar.svg"
             objectFit={'cover'}

components/PostCard.tsx

@@ -53,8 +53,8 @@ const PostCard: FC<Props> = ({ post }) => {
             _focus={{ boxShadow: 'unset' }}
           >
             <Image
-              maxH="18rem"
-              h={['unset', 'unset', '18rem']}
+              maxH="25rem"
+              h={['unset', 'unset', '25rem']}
               src={post.index_img}
               w="100%"
               fit="cover"
@@ -95,13 +95,11 @@ const PostCard: FC<Props> = ({ post }) => {
                 // Mutil tags
                 <Flex alignItems="center" mr="1rem">
                   <Icon as={FiTag} mr="0.5rem" />
-                  {post.tags.map((item) => {
-                    return (
-                      <Text key={item} mr="0.5rem">
-                        {item}
-                      </Text>
-                    );
-                  })}
+                  {post.tags.map((item) => (
+                    <Text key={item} mr="0.5rem">
+                      {item}
+                    </Text>
+                  ))}
                 </Flex>
               ) : (
                 // Signal tags

components/post/CopyButton.tsx

@@ -1,34 +1,33 @@
 import { Button, useClipboard, useColorModeValue } from '@chakra-ui/react';
-import { FC, MouseEventHandler, useEffect, useState } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 
 const CopyButton: FC = ({ children }) => {
   const copyButtonTheme = useColorModeValue('teal', 'pink');
 
+  const preRef = useRef<HTMLPreElement>(null);
+
+  // Set code text content to state.
+  useEffect(() => {
+    const children = preRef.current?.children[1];
+    if (children && children.tagName === 'CODE') {
+      setCodeContent(children.textContent ?? '');
+    }
+  }, []);
+
   // 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);
-  };
-  useEffect(() => {
-    codeContent && onCopy();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [codeContent]);
-
   return (
     <>
-      <pre>
+      <pre ref={preRef}>
         <Button
           size="xs"
           colorScheme={copyButtonTheme}
           position="absolute"
           top="5px"
           right="5px"
-          onClick={copyCode}
+          onClick={onCopy}
         >
           {hasCopied ? 'COPYIED' : 'COPY'}
         </Button>