Merge pull request #30 from knowankit/feat/ui-improvement

UI enhancement

components/comments/index.tsx

@@ -0,0 +1,31 @@
+import { Box, useColorMode } from '@chakra-ui/react';
+import React, { useRef, useEffect } from 'react';
+
+const Comments = () => {
+  const commentBox = useRef(null);
+  const { colorMode } = useColorMode();
+
+  useEffect(() => {
+    const commentScript = document.createElement('script');
+    const theme = colorMode === 'light' ? 'github-light' : 'github-dark';
+
+    commentScript.setAttribute('src', 'https://utteranc.es/client.js');
+    commentScript.setAttribute('repo', 'knowankit/knowankit.com');
+    commentScript.setAttribute('theme', theme);
+    commentScript.setAttribute('crossorigin', 'anonymous');
+    commentScript.setAttribute('async', 'true');
+    commentScript.setAttribute('issue-term', 'pathname');
+
+    if (commentBox && commentBox.current) {
+      commentBox.current.appendChild(commentScript);
+    }
+  }, []);
+
+  return (
+    <Box>
+      <Box ref={commentBox}></Box>
+    </Box>
+  );
+};
+
+export default Comments;

components/homepage/recent-project-card.tsx

@@ -2,50 +2,54 @@ import React from 'react';
 
 import { Box, Heading, Text, Stack, Avatar, useColorModeValue } from '@chakra-ui/react';
 import { AiFillGithub } from 'react-icons/ai';
+import Link from 'next/link';
 
 const ProjectCard = ({ project }) => {
   return (
-    <Box
-      w={['full', '32rem', '32rem', '50vw']}
-      minW={'250px'}
-      bg={useColorModeValue('white', 'gray.900')}
-      boxShadow={'md'}
-      rounded={'md'}
-      p={6}
-      mx="auto"
-      overflow={'hidden'}>
-      <Stack>
-        <Text
-          color="project"
-          textTransform={'uppercase'}
-          fontWeight={800}
-          fontSize={['xs', 'xs', 'sm', 'sm']}
-          letterSpacing={1.1}>
-          Project
-        </Text>
-        <Heading
-          color={useColorModeValue('gray.700', 'white')}
-          fontSize={['md', 'xl', '2xl', '2xl']}
-          fontFamily={'body'}>
-          {project.name}
-        </Heading>
-        {/* <Text color={'gray.500'} fontSize={['sm', 'sm', 'xl', 'xl']}>
+    <Link href={project.github}>
+      <Box
+        w={['full', '32rem', '32rem', '50vw']}
+        minW={'250px'}
+        bg={useColorModeValue('white', 'gray.900')}
+        boxShadow={'md'}
+        rounded={'md'}
+        cursor="pointer"
+        p={6}
+        mx="auto"
+        overflow={'hidden'}>
+        <Stack>
+          <Text
+            color="project"
+            textTransform={'uppercase'}
+            fontWeight={800}
+            fontSize={['xs', 'xs', 'sm', 'sm']}
+            letterSpacing={1.1}>
+            Project
+          </Text>
+          <Heading
+            color={useColorModeValue('gray.700', 'white')}
+            fontSize={['md', 'xl', '2xl', '2xl']}
+            fontFamily={'body'}>
+            {project.name}
+          </Heading>
+          {/* <Text color={'gray.500'} fontSize={['sm', 'sm', 'xl', 'xl']}>
           {project.description}
         </Text> */}
-        <Box display="flex">
-          {project.demo && (
-            <Box as="a" href={`https://${project.demo}`} mr="1rem" fontSize={'sm'}>
-              Preview
-            </Box>
-          )}
-          {project.github && (
-            <Box as="a" href={project.github} fontSize="1.2rem">
-              <AiFillGithub />
-            </Box>
-          )}
-        </Box>
-      </Stack>
-    </Box>
+          <Box display="flex">
+            {project.demo && (
+              <Box as="a" href={`https://${project.demo}`} mr="1rem" fontSize={'sm'}>
+                Preview
+              </Box>
+            )}
+            {project.github && (
+              <Box as="a" href={project.github} fontSize="1.2rem">
+                <AiFillGithub />
+              </Box>
+            )}
+          </Box>
+        </Stack>
+      </Box>
+    </Link>
   );
 };
 

components/mdx/index.tsx

@@ -9,6 +9,7 @@ const SocialShare = dynamic(
     ssr: false
   }
 );
+
 const CustomLink = (props) => {
   const href = props.href;
   const isInternalLink = href && (href.startsWith('/') || href.startsWith('#'));

components/projects/project-card.tsx

@@ -2,48 +2,52 @@ import React from 'react';
 
 import { Box, Heading, Text, Stack, useColorModeValue } from '@chakra-ui/react';
 import { AiFillGithub } from 'react-icons/ai';
+import Link from 'next/link';
 
 const ProjectCard = ({ project }) => {
   return (
-    <Box
-      maxW={'350px'}
-      w={'full'}
-      bg={useColorModeValue('white', 'gray.900')}
-      boxShadow={'md'}
-      rounded={'md'}
-      p={6}
-      m="1rem"
-      overflow={'hidden'}>
-      <Stack>
-        <Text
-          color="project"
-          textTransform={'uppercase'}
-          fontWeight={800}
-          fontSize={'sm'}
-          letterSpacing={1.1}>
-          Project
-        </Text>
-        <Heading
-          color={useColorModeValue('gray.700', 'white')}
-          fontSize={'2xl'}
-          fontFamily={'body'}>
-          {project.name}
-        </Heading>
-        <Text color={'gray.500'}>{project.description}</Text>
-        <Box display="flex">
-          {project.demo && (
-            <Box as="a" href={`https://${project.demo}`} mr="1rem">
-              Preview
-            </Box>
-          )}
-          {project.github && (
-            <Box as="a" href={project.github} fontSize="1.6rem">
-              <AiFillGithub />
-            </Box>
-          )}
-        </Box>
-      </Stack>
-    </Box>
+    <Link href={project.github}>
+      <Box
+        maxW={'350px'}
+        w={'full'}
+        bg={useColorModeValue('white', 'gray.900')}
+        boxShadow={'md'}
+        rounded={'md'}
+        p={6}
+        m="1rem"
+        cursor="pointer"
+        overflow={'hidden'}>
+        <Stack>
+          <Text
+            color="project"
+            textTransform={'uppercase'}
+            fontWeight={800}
+            fontSize={'sm'}
+            letterSpacing={1.1}>
+            Project
+          </Text>
+          <Heading
+            color={useColorModeValue('gray.700', 'white')}
+            fontSize={'2xl'}
+            fontFamily={'body'}>
+            {project.name}
+          </Heading>
+          <Text color={'gray.500'}>{project.description}</Text>
+          <Box display="flex">
+            {project.demo && (
+              <Box as="a" href={`https://${project.demo}`} mr="1rem">
+                Preview
+              </Box>
+            )}
+            {project.github && (
+              <Box as="a" href={project.github} fontSize="1.6rem">
+                <AiFillGithub />
+              </Box>
+            )}
+          </Box>
+        </Stack>
+      </Box>
+    </Link>
   );
 };
 

data/blog/hydrate-redux-state-in-nextjs.mdx

@@ -170,3 +170,5 @@ Do check it out.
 <br />
 
 Thank You! 👋🏻
+
+---

layouts/blog-layout.tsx

@@ -6,6 +6,11 @@ import { prismDarkTheme } from '@/styles/style';
 import FrontMatter from '@/components/front-matter';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import dynamic from 'next/dynamic';
+
+const Comments = dynamic(import(/* webpackChunkName: "SocialShare" */ 'components/comments'), {
+  ssr: false
+});
 
 type Props = {
   children: JSX.Element;
@@ -52,6 +57,7 @@ const BlogLayout: FC<Props> = ({ children, frontMatter }) => {
           flexDirection="column">
           <FrontMatter matter={frontMatter} />
           {children}
+          <Comments />
         </Box>
       </Box>
     </>