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

development #25

Merged
luke-else merged 2 commits from development into main 2025-03-12 15:15:39 +00:00
Conversation 0 Commits 2 Files Changed 4 +61 -18
4 changed files with 61 additions and 18 deletions
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;
}
}

6
src/lib/components/Loading.svelte
View File

@@ -21,21 +21,21 @@
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid #efeffa;
border-bottom: 3px solid var(--fg);
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid #efeffa;
border-right: 3px solid var(--fg);
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid #efeffa;
border-top: 3px solid var(--fg);
}
@keyframes rotate-one {

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}