feat: add dynamic git projects

README.md

@@ -1,4 +1,5 @@
 ![Portfolio demo](https://github.com/knowankit/knowankit.com/blob/develop/demo.gif)
+
 <p align="center">
   <a href="https://twitter.com/knowankit">
     <img alt="Twitter: Ankit Kumar" src="https://img.shields.io/twitter/follow/knowankit.svg?style=social" target="_blank" />

components/homepage/index.tsx

@@ -4,10 +4,10 @@ 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 { getAllGithubStars } from '@/lib/get-all-github-stars';
 import { AiOutlineGithub } from 'react-icons/ai';
 import projects from '@/data/projects';
-import router, { useRouter } from 'next/router';
+import router from 'next/router';
 
 const Profile = ({ posts }) => {
   useEffect(() => {

components/projects/project-card.tsx

@@ -1,12 +1,13 @@
 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 }) => {
+  if (project.fork) return <></>;
+
   return (
-    <Link href={project.github}>
+    <Link href={project['html_url'] || ''}>
       <Box
         maxW={'350px'}
         w={'full'}
@@ -33,18 +34,6 @@ const ProjectCard = ({ project }) => {
             {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>

components/projects/search-project.tsx

@@ -1,13 +1,25 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import ProjectCard from '@/components/projects/project-card';
 import { Box, InputGroup, InputRightElement, Input } from '@chakra-ui/react';
 import projects from '@/data/projects';
+import { getRepos } from '@/lib/get-all-github-stars';
 import { AiOutlineSearch } from 'react-icons/ai';
 
 const SearchProject = () => {
   const [filteredList, setFilteredList] = useState(projects);
   const [searchText, setSearchText] = useState('');
 
+  useEffect(() => {
+    async function fetchMyAPI() {
+      const data = await getRepos();
+
+      const sortedData = data.sort((a, b) => b['stargazers_count'] - a['stargazers_count']);
+      setFilteredList(sortedData);
+    }
+
+    fetchMyAPI();
+  }, []);
+
   const handleChange = (e) => {
     const inputValue = e.target.value;
     setSearchText(inputValue);

lib/get-all-github-stars.ts

@@ -12,4 +12,12 @@ const getAllGithubStars = async () => {
   return stars;
 };
 
-export default getAllGithubStars;
+const getRepos = async () => {
+  const URL = 'https://api.github.com/users/knowankit/repos';
+  const response = await fetch(URL);
+  const data = await response.json();
+
+  return data;
+};
+
+export { getAllGithubStars, getRepos };

lib/mdx.ts

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import fs from 'fs';
 import matter from 'gray-matter';
 import path from 'path';

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "baseUrl": ".",
     "paths": {
       "@/src/*": ["src/*"],
@@ -29,12 +25,6 @@
     "isolatedModules": true,
     "jsx": "preserve"
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }