#5 Started on creating page to handle API requests to https://git.luke-else.co.uk

src/lib/api/git.ts

@@ -0,0 +1,26 @@
+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`, {
+            headers: {
+                // "Authorization": `token ${ACCESS_TOKEN}`,
+                "Content-Type": "application/json"
+            }
+        });
+
+        if (!response.ok) {
+            throw new Error(`Error: ${response.statusText}`);
+        }
+
+        const data: { data: GitRepo[] } = await response.json();
+        return data.data; // Extract the list of repositories
+    } catch (error) {
+        console.error("Failed to fetch repos:", error);
+        return [];
+    }
+}

src/lib/components/Toasts/Toasts.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Toast from "./Toast.svelte";
 
-  import { dismissToast, toasts } from "$lib/store";
+  import { dismissToast, toasts } from "$lib/stores";
 </script>
 
 {#if $toasts}

src/lib/stores.ts

@@ -1,6 +1,12 @@
 import { ToastType, type Toast } from "$lib/toast";
 import { writable, type Writable } from "svelte/store";
+import type { GitRepo } from "./types";
+import { fetchRepos } from "./api/git";
 
+
+////////////////////////////////////////
+// Toast Stores
+////////////////////////////////////////
 export const toasts: Writable<Toast[]> = writable([]);
 
 export const addToast = (toast: Toast) => {
@@ -26,3 +32,12 @@ export const addToast = (toast: Toast) => {
 export const dismissToast = (id: number) => {
   toasts.update((all) => all.filter((t) => t.id !== id));
 };
+
+////////////////////////////////////////
+// Git Repo Stores
+////////////////////////////////////////
+export const repos = writable<GitRepo[]>([]);
+
+export async function loadRepos() {
+    repos.set(await fetchRepos());
+}

src/lib/types.ts

@@ -0,0 +1,13 @@
+export interface GitRepo {
+    id: number;
+    name: string;
+    full_name: string;
+    description: string;
+    html_url: string;
+    private: boolean;
+    fork: boolean;
+    owner: {
+        login: string;
+        avatar_url: string;
+    };
+}

src/main.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { getJson } from "$lib/data";
 	import { Toast, ToastType } from "$lib/toast";
-    import { addToast } from "$lib/store";
+    import { addToast } from "$lib/stores";
 
     import Skills from './skills.svelte';
 

src/routes/contact/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import Card from '$lib/components/Cards/Card.svelte';
     import { Toast, ToastType } from "$lib/toast";
-    import { addToast } from "$lib/store";
+    import { addToast } from "$lib/stores";
 
     import { page } from '$app/stores';
     const sent = $page.url.searchParams.get('sent');

src/routes/repos/+page.svelte

@@ -1,3 +1,20 @@
-<h1>Repos</h1>
+<script lang="ts">
-<p>Stay tuned! This is still in development.</p>
+    import { onMount } from "svelte";
-<p>Come back later to find out what projects I'm currently working on!</p>
+    import { repos, loadRepos } from "$lib/stores";
+
+    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}