#10 Added sliding card element for image stored in /assets/images/main.png

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[]> {
@@ -46,4 +47,21 @@ export function timeSince(inputDate: Date | string): string {
     if (diffInDays < 30) return `${Math.floor(diffInDays / 7)} week${diffInDays >= 14 ? 's' : ''} ago`;
     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,20 +18,44 @@
         <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}
-                <Card>
+                {#await checkImage(repo)}
-                    <div slot="header">
+                    <Loading />
-                        <h2>{repo.name}</h2>
+                {:then hasImage}
-                        {repo.language}
+                    {#if hasImage}
-                    </div>
+                        <SlidingCard>
-                    <div slot="content">
+                            <div slot="header">
-                        <p class="not-required">{@html repo.description}</p>
+                                <h2>{repo.name}</h2>
-                    </div>
+                                {repo.language}
-                    <div slot="footer">
+                            </div>
-                        <!-- svelte-ignore a11y-invalid-attribute -->
+                            <div slot="content">
-                        <a href="{repo.html_url}">{repo.name}</a>
+                                <p class="not-required">{@html repo.description}</p>
-                        {timeSince(repo.updated_at)}
+                            </div>
-                    </div>
+                            <div slot="sliding-content">
-                </Card>
+                                <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>
+                                {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>
+                                {timeSince(repo.updated_at)}
+                            </div>
+                        </Card>
+                    {/if}
+                {/await}
             {/each}
         </div>
     {:else}