Added 'most popular repo' section to landing page

package.json

@@ -19,6 +19,7 @@
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"spectre.css": "^0.5.9",
+		"timeago.js": "^4.0.2",
 		"zod": "^3.20.6"
 	},
 	"devDependencies": {

src/components/BestRepository.tsx

@@ -3,6 +3,8 @@ import Link from "next/link";
 import { FC } from "react";
 import z from "zod";
 
+import { format as formatTimeAgo } from "timeago.js";
+
 import { RepositoryResponse } from "@models/responses";
 
 const BestRepository: FC<{ repository: z.infer<typeof RepositoryResponse> }> =
@@ -14,7 +16,7 @@ const BestRepository: FC<{ repository: z.infer<typeof RepositoryResponse> }> =
 						<div className="column col-8 col-md-12 col-mx-auto">
 							<h3 className="text-secondary">My most popular project:</h3>
 							<h1>{repository.full_name}</h1>
-							<h3 className="text-secondary">{repository.size} byes</h3>
+
 							<h5>{repository.description}</h5>
 							<p className="text-secondary">
 								Written in {repository.language}, has{" "}
@@ -34,8 +36,7 @@ const BestRepository: FC<{ repository: z.infer<typeof RepositoryResponse> }> =
 							</p>
 
 							<h5 className="text-secondary">
-								Last commit on{" "}
+								Last updated {formatTimeAgo(repository.updated_at, "en_US")}
-								{new Date(repository.updated_at).toLocaleDateString()}
 							</h5>
 						</div>
 					</div>

src/components/FeaturedRepositories.tsx

@@ -1,6 +1,8 @@
 import z from "zod";
 import { FC } from "react";
 
+import { format as formatTimeAgo } from "timeago.js";
+
 import Link from "next/link";
 
 import multipleClassNames from "@utils/multipleClassNames";
@@ -40,13 +42,14 @@ const FeaturedRepositories: FC<{
 												{repository.full_name}
 											</div>
 											<div className="card-subtitle text-gray">
-												{repository.size} bytes
+												{(repository.size / 1024).toPrecision(2)} MB - Last
+												updated {formatTimeAgo(repository.updated_at, "en_US")}
 											</div>
 										</div>
 										<div className="card-body">{repository.description}</div>
 										<div className="card-footer">
 											<Link href={repository.html_url}>
-												<a className="btn btn-primary">Github</a>
+												<a className="btn btn-primary">Git</a>
 											</Link>
 
 											{repository.website && (

src/models/responses.ts

@@ -9,6 +9,7 @@ export const RepositoryResponse = z.object({
 	updated_at: z.string(),
 	forks_count: z.number(),
 	open_issues_count: z.number(),
+	stars_count: z.number(),
 	description: z.string(),
 	size: z.number()
 });

src/pages/index.tsx

@@ -1,3 +1,5 @@
+import z from "zod";
+
 import { NextSeo } from "next-seo";
 
 import { GetStaticProps, InferGetStaticPropsType, NextPage } from "next";
@@ -7,6 +9,8 @@ import Layout from "@components/Layout";
 import FeaturedRepositories from "@components/FeaturedRepositories";
 import BestRepository from "@components/BestRepository";
 
+import { RepositoryResponse } from "@models/responses";
+
 import { fetchAvailability, fetchRepositories, fetchUser } from "@utils/fetch";
 import { giteaUsername } from "@utils/config";
 
@@ -17,10 +21,15 @@ export const getStaticProps: GetStaticProps = async () => {
 
 	const repositories = await fetchRepositories(user.id);
 
+	const bestRepository: z.infer<typeof RepositoryResponse> | undefined =
+		repositories.reduce((prev, current) =>
+			prev.stars_count > current.stars_count ? prev : current
+		);
 	return {
 		props: {
 			isAvailable,
 			user,
+			bestRepository,
 			repositories
 		},
 		revalidate: 60 * 5
@@ -30,14 +39,14 @@ export const getStaticProps: GetStaticProps = async () => {
 const Index: NextPage = ({
 	repositories,
 	user,
+	bestRepository,
 	isAvailable
-}: // bestRepository
+}: InferGetStaticPropsType<typeof getStaticProps>) => (
-InferGetStaticPropsType<typeof getStaticProps>) => (
 	<Layout>
 		<NextSeo title="Home" />
 		<User isAvailable={isAvailable} user={user} />
 		<FeaturedRepositories repositories={repositories} />
-		{/* <BestRepository repository={bestRepository} /> */}
+		<BestRepository repository={bestRepository} />
 	</Layout>
 );
 

src/utils/fetch.ts

@@ -40,7 +40,8 @@ export const fetchRepositories = async (
 			params: {
 				topic: true,
 				q: "on-portfolio",
-				id: giteaUserUid
+				id: giteaUserUid,
+				limit: 6
 			}
 		}
 	);