#5 Repos are now displayed on the webpage - Additional stlying required.

.dockerignore

@@ -6,6 +6,7 @@ node_modules
 
 .git
 .gitattributes
+.gitea
 
 .eslintignore
 .eslintrc.cjs

src/app.html

@@ -95,6 +95,21 @@
 				box-shadow: .3em .3em .3em var(--header);    
 			}
 
+			.container {
+				padding-top: 3em;
+				max-width: 90%;
+				margin: auto;
+			}
+
+			.cards {
+				display: flex;
+				flex-wrap: wrap;
+				flex-direction: row;
+				gap: 3em 3em;
+				padding: 2em 0em 2em 0em;
+				transition: all 0.2s;
+			}
+
 			@keyframes animationName {
 				0%   { opacity:0; }
 				50%  { opacity:1; }

src/lib/api/git.ts

@@ -1,12 +1,12 @@
 import type { GitRepo } from "../types";
 
 const API_BASE_URL = "https://git.luke-else.co.uk/api/v1";
-// const ACCESS_TOKEN = import.meta.env.VITE_GITEA_TOKEN;
+
 
 export async function fetchRepos(): Promise<GitRepo[]> {
     try {
         console.log("Fetching repos...");
-        const response = await fetch(`${API_BASE_URL}/repos/search`, {
+        const response = await fetch(`${API_BASE_URL}/repos/search?sort=updated&order=desc&limit=12`, {
             headers: {
                 // "Authorization": `token ${ACCESS_TOKEN}`,
                 "Content-Type": "application/json"

src/lib/types.ts

@@ -1,8 +1,9 @@
 export interface GitRepo {
-    id: number;
     name: string;
-    full_name: string;
     description: string;
+    language: string;
+    size: number;
+    updated_at: Date;
     html_url: string;
     private: boolean;
     fork: boolean;

src/main.svelte

@@ -61,22 +61,6 @@
         font-size: 1.5em;
     }
 
-    /* Skills Cards CSS */
-    .container {
-        padding-top: 3em;
-        max-width: 90%;
-        margin: auto;
-    }
-
-    .cards {
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: row;
-        gap: 3em 3em;
-        padding: 2em 0em 2em 0em;
-        transition: all 0.2s;
-    }
-
 </style>
 
 {#await getJson('/json/me.json')}

src/routes/repos/+page.svelte

@@ -1,20 +1,35 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { repos, loadRepos } from "$lib/stores";
+    import Card from "$lib/components/Cards/Card.svelte";
 
     onMount(loadRepos);
 </script>
 
 <h1>My Projects</h1>
 
-{#if $repos.length > 0}
-    <ul>
-        {#each $repos as repo}
-            <li>
-                <a href="{repo.html_url}" target="_blank">{repo.name}</a> - {repo.description}
-            </li>
-        {/each}
-    </ul>
-{:else}
-    <p>Loading repositories...</p>
-{/if}
+<div class="container">
+    {#if $repos.length > 0}
+        <div class="cards">
+            {#each $repos as repo}
+                <Card>
+                    <div slot="header">
+                        <h2>{repo.name}</h2>
+                        {repo.language}
+                    </div>
+                    <div slot="content">
+                        <p class="not-required">{@html repo.description}</p>
+                    </div>
+                    <div slot="footer">
+                        <!-- svelte-ignore a11y-invalid-attribute -->
+                        <a href="{repo.html_url}">{repo.name}</a>
+                        {repo.size}KiB
+                        {repo.updated_at}
+                    </div>
+                </Card>
+            {/each}
+        </div>
+    {:else}
+        <p>Loading repositories...</p>
+    {/if}
+</div>