src/lib/api/git.ts

@@ -1,6 +1,7 @@
 import type { GitRepo } from "../types";
 
 const API_BASE_URL = "https://git.luke-else.co.uk/api/v1";
+export const IMAGE_URL_SUFFIX = "/raw/branch/main/assets/images/main.png";
 
 
 export async function fetchRepos(): Promise<GitRepo[]> {
@@ -47,3 +48,20 @@ export function timeSince(inputDate: Date | string): string {
     if (diffInMonths < 12) return `${diffInMonths} month${diffInMonths > 1 ? 's' : ''} ago`;
     return `${diffInYears} year${diffInYears > 1 ? 's' : ''} ago`;
 }
+
+export async function checkImage(repo: GitRepo): Promise<boolean> {
+    try {
+        const URL = repo.html_url + IMAGE_URL_SUFFIX;
+        console.log("Checking image:", URL);
+        const response = await fetch(URL);
+        if (response.ok) {
+            console.log("Image found!");
+            return true;
+        } else {
+            console.log("Image not found!");
+            return false;
+        }
+    } catch (error) {
+        return false;
+    }
+}

src/routes/repos/+page.svelte

@@ -2,8 +2,9 @@
     import { onMount } from "svelte";
     import { Toast, ToastType } from "$lib/toast";
     import { repos, loadRepos, addToast } from "$lib/stores";
-    import { timeSince } from "$lib/api/git";
+    import { timeSince, checkImage, IMAGE_URL_SUFFIX } from "$lib/api/git";
     import Card from "$lib/components/Cards/Card.svelte";
+    import SlidingCard from "$lib/components/Cards/SlidingCard.svelte";
     import Loading from "$lib/components/Loading.svelte";
 
     onMount(loadRepos);
@@ -17,6 +18,28 @@
         <div style="display: none;">{addToast(new Toast("See a snapshot of my latest work.", ToastType.Info, true, 8_000))}</div>
         <div class="cards">
             {#each $repos as repo}
+                {#await checkImage(repo)}
+                    <Loading />
+                {:then hasImage}
+                    {#if hasImage}
+                        <SlidingCard>
+                            <div slot="header">
+                                <h2>{repo.name}</h2>
+                                {repo.language}
+                            </div>
+                            <div slot="content">
+                                <p class="not-required">{@html repo.description}</p>
+                            </div>
+                            <div slot="sliding-content">
+                                <img width="100%" src="{repo.html_url}{IMAGE_URL_SUFFIX}" alt="{repo.name}" />
+                            </div>
+                            <div slot="footer">
+                                <!-- svelte-ignore a11y-invalid-attribute -->
+                                <a href="{repo.html_url}">{repo.name}</a>
+                                {timeSince(repo.updated_at)}
+                            </div>
+                        </SlidingCard>
+                    {:else}
                         <Card>
                             <div slot="header">
                                 <h2>{repo.name}</h2>
@@ -31,6 +54,8 @@
                                 {timeSince(repo.updated_at)}
                             </div>
                         </Card>
+                    {/if}
+                {/await}
             {/each}
         </div>
     {:else}