Add new projects with total star counts from github

components/about/index.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
 import Navbar from '@/components/navbar';
 import Introduction from '@/components/about/introduction';
 import { Box } from '@chakra-ui/react';
 import Footer from '@/components/footer';
 
-const About = () => {
+const About = (): JSX.Element => {
   return (
     <Box minHeight="100vh" id="about">
       <Navbar />

components/about/introduction.tsx

@@ -1,8 +1,7 @@
 import { Box } from '@chakra-ui/react';
-import React from 'react';
 import SocialIcons from '@/components/homepage/social-icons';
 
-const Introduction = () => {
+const Introduction = (): JSX.Element => {
   return (
     <Box
       id="introduction"

components/blogs/card.tsx

@@ -1,44 +1,13 @@
-import React from 'react';
-import {
-  Box,
-  Heading,
-  Stack,
-  Image,
-  Text,
-  HStack,
-  Avatar,
-  // Tag,
-  // SpaceProps,
-  useColorModeValue
-} from '@chakra-ui/react';
+import { Box, Heading, Stack, Image, Text, HStack, useColorModeValue } from '@chakra-ui/react';
 import Link from 'next/link';
 import { parseISO, format } from 'date-fns';
 
-// interface IBlogTags {
-//   tags: Array<string>;
-//   marginTop?: SpaceProps['marginTop'];
-// }
-
-// const BlogTags: React.FC<IBlogTags> = (props) => {
-//   return (
-//     <HStack spacing={2} marginTop={props.marginTop}>
-//       {props.tags.map((tag) => {
-//         return (
-//           <Tag size={'md'} variant="solid" colorScheme="orange" key={tag}>
-//             {tag}
-//           </Tag>
-//         );
-//       })}
-//     </HStack>
-//   );
-// };
-
 interface BlogAuthorProps {
   date: Date;
   name: string;
 }
 
-export const BlogAuthor: React.FC<BlogAuthorProps> = (props): JSX.Element => {
+export const BlogAuthor = (props: BlogAuthorProps): JSX.Element => {
   return (
     <HStack marginTop="2" spacing="2" display="flex" alignItems="center" color="black">
       <Image

components/blogs/dev.to.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  Box,
+  Heading,
+  Stack,
+  Image,
+  Text,
+  HStack,
+  useColorModeValue,
+  Link
+} from '@chakra-ui/react';
+import { parseISO, format } from 'date-fns';
+
+interface BlogAuthorProps {
+  date: Date;
+  name: string;
+}
+
+export const BlogAuthor: React.FC<BlogAuthorProps> = (props): JSX.Element => {
+  return (
+    <HStack marginTop="2" spacing="2" display="flex" alignItems="center" color="black">
+      <Image
+        borderRadius="full"
+        boxSize="40px"
+        src="https://100k-faces.glitch.me/random-image"
+        alt={`Avatar of ${props.name}`}
+      />
+      <Text fontWeight="medium">{props.name}</Text>
+      <Text>—</Text>
+      <Text>{props.date.toLocaleDateString()}</Text>
+    </HStack>
+  );
+};
+
+const DevTo = ({ post }): JSX.Element => {
+  return (
+    <Link href={post.slug} textDecoration="none !important" target="_blank">
+      <Box
+        cursor="pointer"
+        minW={'250px'}
+        w={['full', '32rem', '32rem', '50vw']}
+        bg={useColorModeValue('white', 'gray.900')}
+        boxShadow={'md'}
+        rounded={'md'}
+        mx="auto"
+        mb="1rem"
+        p={6}
+        overflow={'hidden'}>
+        <Stack>
+          <Text
+            color="blog"
+            textTransform={'uppercase'}
+            fontWeight={800}
+            fontSize={'sm'}
+            letterSpacing={1.1}>
+            Blog
+          </Text>
+          <Heading
+            color={useColorModeValue('gray.700', 'white')}
+            fontSize={'2xl'}
+            fontFamily={'body'}>
+            {post.title}
+          </Heading>
+          <Text color={'gray.500'}>{post.summary}</Text>
+        </Stack>
+        <Stack direction={'row'} spacing={4} align={'center'}>
+          <Stack direction={'column'} spacing={0} fontSize={'sm'}>
+            <Text fontWeight={600} color={useColorModeValue('gray.700', 'white')}>
+              Ankit Kumar
+            </Text>
+            <Text color={'gray.500'}>
+              {format(parseISO(post.publishedAt), 'MMMM dd, yyyy')} ·{' '}
+              {post.frontMatter?.readingTime.text}
+            </Text>
+          </Stack>
+        </Stack>
+      </Box>
+    </Link>
+  );
+};
+
+export default DevTo;

components/blogs/index.tsx

@@ -4,15 +4,29 @@ import { Box } from '@chakra-ui/react';
 import ArticleCard from '@/components/blogs/card';
 import { Posts } from '@/types/blog';
 import Footer from '@/components/footer';
+import DevTo from '@/components/blogs/dev.to';
 
 const Blog: FC<Posts> = (props): JSX.Element => {
+  const dev = [
+    {
+      title: 'How to setup ESLint and Prettier in react app?',
+      description: 'Learn and implement linting in your app to make it clean',
+      publishedAt: '2021-09-25',
+      slug: 'https://dev.to/knowankit/setup-eslint-and-prettier-in-react-app-357b'
+    }
+  ];
+
   return (
     <Box height="100vh" id="profile">
       <Navbar />
       <Box color="textColor" minHeight="90vh" height="100%" p="2rem">
         {props.posts.map((post, index) => (
           <ArticleCard key={index} post={post} />
         ))}
+
+        {dev.map((post, index) => (
+          <DevTo post={post} key={index} />
+        ))}
         <Footer />
       </Box>
     </Box>

components/homepage/index.tsx

@@ -1,41 +1,54 @@
-import React from 'react';
-import { Box, Heading } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+import { Box, Heading, Button } from '@chakra-ui/react';
 import Navbar from '@/components/navbar';
 import RecentBlog from '@/components/homepage/recent-blog-card';
 import RecentProject from '@/components/homepage/recent-project-card';
 import Footer from '@/components/footer';
+import getAllGithubStars from '@/lib/get-all-github-stars';
+import { AiOutlineGithub } from 'react-icons/ai';
 
-const Profile = () => {
-  const recentPosts = [
-    {
-      title: 'Hydrate redux store in Next.js',
-      summary: 'Learn how to create store in the server side and use the same store on the client',
-      publishedAt: '2021-07-26',
-      slug: 'hydrate-redux-state-in-nextjs',
-      frontMatter: {
-        readingTime: {
-          text: '5 mins'
-        }
+const recentPosts = [
+  {
+    title: 'Hydrate redux store in Next.js',
+    summary: 'Learn how to create store in the server side and use the same store on the client',
+    publishedAt: '2021-07-26',
+    slug: 'hydrate-redux-state-in-nextjs',
+    frontMatter: {
+      readingTime: {
+        text: '5 mins'
       }
     }
-  ];
+  }
+];
+
+const recentProjects = [
+  {
+    name: 'React smart carousel',
+    github: 'https://github.com/knowankit/react-smart-carousel',
+    description:
+      'Built with reactjs, typescript. This is a smart and func carousel which remembers how you slid the images',
+    demo: 'knowankit.github.io/react-smart-carousel/'
+  },
+  {
+    name: 'Trello Clone - Built with Nextjs framework',
+    github: 'https://github.com/knowankit/trello-clone',
+    description:
+      'Built with Nextjs framework with Typescript and Chakra UI library with support from MongoDB',
+    demo: 'trello-clone-one.vercel.app'
+  }
+];
 
-  const recentProjects = [
-    {
-      name: 'React smart carousel',
-      github: 'https://github.com/knowankit/react-smart-carousel',
-      description:
-        'Built with reactjs, typescript. This is a smart and func carousel which remembers how you slid the images',
-      demo: 'https://knowankit.github.io/react-smart-carousel/'
-    },
-    {
-      name: 'Trello Clone - Built with Nextjs framework',
-      github: 'https://github.com/knowankit/trello-clone',
-      description:
-        'Built with Nextjs framework with Typescript and Chakra UI library with support from MongoDB',
-      demo: 'trello-clone-one.vercel.app'
+const Profile = () => {
+  useEffect(() => {
+    async function fetchMyAPI() {
+      const count = await getAllGithubStars();
+      setStars(count);
     }
-  ];
+
+    fetchMyAPI();
+  }, []);
+
+  const [stars, setStars] = useState(0);
 
   const loadRecentProjectsAndBlogs = () => {
     return (
@@ -105,6 +118,11 @@ const Profile = () => {
             <p>I code beautifully simple things and I love what I do</p>
             <p>And of-course a love for egyptian bracket</p>
           </Box>
+          <Box>
+            <Button variant="ghost">
+              <AiOutlineGithub /> &nbsp; {stars} stars
+            </Button>
+          </Box>
         </Box>
         {loadRecentProjectsAndBlogs()}
       </Box>

data/projects.ts

@@ -1,4 +1,21 @@
 export default [
+  {
+    name: 'React bubble effect button',
+    github: 'https://github.com/knowankit/react-bubbly-effect-button',
+    description: '🧼 Bubble animation on button',
+    demo: 'https://knowankit.github.io/react-bubbly-effect-button/'
+  },
+  {
+    name: 'Build React npm',
+    github: 'https://github.com/knowankit/build-react-npm',
+    description: '⚡️ A CLI tool for building reusable react npm packages.'
+  },
+  {
+    name: 'Video calling app',
+    github: 'https://github.com/knowankit/video-calling-app',
+    description: '🎥 One-to-one video calling app built using react, node and socket.io',
+    demo: 'https://video-calling-app-git.netlify.app/'
+  },
   {
     name: 'React smart carousel',
     github: 'https://github.com/knowankit/react-smart-carousel',

lib/get-all-github-stars.ts

@@ -0,0 +1,15 @@
+const getAllGithubStars = async () => {
+  const URL = 'https://api.github.com/users/knowankit/repos';
+  const response = await fetch(URL);
+  const data = await response.json();
+
+  let stars = 0;
+
+  for (let i = 0; i < data.length; i++) {
+    stars += data[i]['stargazers_count'];
+  }
+
+  return stars;
+};
+
+export default getAllGithubStars;

next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.