luke-else/luke-else.co.uk
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

#10 Added sliding card element for image stored in /assets/images/main.png
All checks were successful
Build and Push Development Docker Image / build-and-push (push) Successful in 1m4s
Details

Browse Source
This commit is contained in:
Luke Else 2025-03-12 15:05:00 +00:00
parent e1160b3462
commit ce38e88885
3 changed files with 58 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/main.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

18
src/lib/api/git.ts
View File

@ -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;
}
}

55
src/routes/repos/+page.svelte
View File

@ -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>
<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>
{#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>
{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}