Merge pull request #4 from stifskere/dev

Improved responsiveness and removed caching

src/app/github/route.ts

@@ -3,11 +3,6 @@ import {GithubRepository, GithubRepositoryFromSource} from "@/app/github/github-
 
 export const revalidate = 3600;
 
-interface ExpiringRepoCache {
-	expiration: Date;
-	repos?: GithubRepositoryFromSource[];
-}
-
 const githubRequestInit: RequestInit = {
 	headers: {
 		Accept: "application/vnd.github+json",
@@ -16,49 +11,37 @@ const githubRequestInit: RequestInit = {
 	}
 }
 
-const repoCache: ExpiringRepoCache = {
-	expiration: new Date()
-};
-
 export async function GET(): Promise<NextResponse<GithubRepository[] | null>> {
-	const currentDate: Date = new Date();
-
-	if (repoCache.expiration.getTime() < currentDate.getTime()
-		|| repoCache.repos === undefined) {
-
-		// I've got to change this some time.
-		repoCache.expiration = new Date(currentDate.getTime() * 10800000);
-		const repositoryResponse: Response
-			= await fetch("https://api.github.com/users/stifskere/repos?per_page=100&cache_bust=0", githubRequestInit);
+	const repositoryResponse: Response
+		= await fetch("https://api.github.com/users/stifskere/repos?per_page=100&cache_bust=0", githubRequestInit);
 
-		if (!repositoryResponse.ok)
-			return new NextResponse(null, { status: 500 });
+	if (!repositoryResponse.ok)
+		return new NextResponse(null, { status: 500 });
 
-		repoCache.repos = await repositoryResponse.json() satisfies GithubRepositoryFromSource[];
+	const repos: GithubRepositoryFromSource[] = await repositoryResponse.json();
 
-		for (const repository of repoCache.repos!) {
-			const commitsResponse: Response
-				= await fetch(repository.commits_url.replace("{/sha}", ""), githubRequestInit);
+	for (const repository of repos) {
+		const commitsResponse: Response
+			= await fetch(repository.commits_url.replace("{/sha}", ""), githubRequestInit);
 
-			repository.commit_count = commitsResponse.ok
-				? ((await commitsResponse.json()) as unknown[]).length
-				: 0;
+		repository.commit_count = commitsResponse.ok
+			? ((await commitsResponse.json()) as unknown[]).length
+			: 0;
 
-			if (!repository.fork)
-				continue;
+		if (!repository.fork)
+			continue;
 
-			const forkResponse: Response
-				= await fetch(repository.url!, githubRequestInit);
+		const forkResponse: Response
+			= await fetch(repository.url!, githubRequestInit);
 
-			if (forkResponse.ok) {
-				const currentRespository: GithubRepositoryFromSource
-					= (await forkResponse.json() satisfies GithubRepositoryFromSource);
+		if (forkResponse.ok) {
+			const currentRespository: GithubRepositoryFromSource
+				= (await forkResponse.json() satisfies GithubRepositoryFromSource);
 
-				if (currentRespository.parent !== undefined)
-					repository.parent = currentRespository.parent;
-			}
+			if (currentRespository.parent !== undefined)
+				repository.parent = currentRespository.parent;
 		}
 	}
 
-	return NextResponse.json(<GithubRepository[] | null>(repoCache.repos ?? null));
+	return NextResponse.json(<GithubRepository[] | null>(repos ?? null));
 }

src/app/page.css

@@ -87,6 +87,8 @@ body {
 
     height: 60vh;
 
+    margin: 10vh 0;
+
     @media (orientation: portrait) {
         height: 100vh;
     }
@@ -108,10 +110,17 @@ body {
 
     color: white;
 
-    padding: 25px 25px;
+    padding: 23px 23px;
 
     font-weight: bold;
 
+    width: calc(50vw - 23px);
+    max-width: 1000px;
+
+    @media (orientation: landscape) {
+        min-width: 650px;
+    }
+
     @media (orientation: portrait) {
         width: 80vw;
     }
@@ -233,6 +242,11 @@ body {
 
 .repositories > div {
     width: 50vw;
+    max-width: 1000px;
+
+    @media (orientation: landscape) {
+        min-width: 650px;
+    }
 
     @media (orientation: portrait) {
         width: 85vw;
@@ -245,7 +259,7 @@ body {
 
 /*footer section*/
 footer {
-    height: 30vh;
+    height: 40vh;
 
     @media (orientation: portrait) {
         height: 130vh;
@@ -262,13 +276,14 @@ footer {
         transparent 100%
     );
 
-    padding-bottom: 10vh;
+
 }
 
 .footer-content {
     position: absolute;
 
-    width: 60%;
+    width: 100%;
+    max-width: 1000px;
 
     top: 65%;
     left: 50%;
@@ -288,8 +303,11 @@ footer {
 }
 
 .footer-content > img {
-    height: 230px;
-    width: 230px;
+    height: 20vw;
+    width: 20vw;
+
+    max-width: 230px;
+    max-height: 230px;
 
     @media (orientation: portrait) {
         height: 150px;

src/app/page.tsx

@@ -45,7 +45,6 @@ export default function Home(): ReactElement {
 			const element: HTMLHeadingElement
 				= document.querySelector(".presentation-container > h1 > span") as HTMLHeadingElement;
 
-
 			element.innerText = smiling ? ":D" : ";)";
 		};
 	}

src/components/repository/index.css

@@ -19,6 +19,10 @@
 
     cursor: pointer;
 
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
     @media (orientation: portrait) {
         font-size: 1em;
     }
@@ -71,6 +75,10 @@
     }
 }
 
+.repository-name > h1 {
+    margin-right: 30px;
+}
+
 .repository-fork {
     display: flex;
 
@@ -79,6 +87,10 @@
     justify-content: center;
     align-items: center;
 
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
     @media (orientation: portrait) {
         font-size: 0.9em;
     }
@@ -100,6 +112,9 @@
     text-decoration: none;
 }
 
+.repository > p {
+    margin-right: 50px;
+}
 
 .repository-data,
 .repository-data > div {