FEAT: Added in git repos page

This commit is contained in:
Luke Else 2025-05-23 22:26:42 +01:00
parent 206c5665a2
commit a46ac458dc
Signed by: luke-else
GPG Key ID: B44FAF5CD3964A56
3 changed files with 43 additions and 47 deletions

View File

@ -1,18 +1,50 @@
<script lang="ts">
import { loadRepos } from '$lib/stores';
import { loadRepos, repos } from '$lib/stores';
import { onMount } from 'svelte';
import { toasts } from 'svelte-toasts';
import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
import FlexGallery from '$lib/components/FlexGallery.svelte';
import Card from '$lib/components/Cards/Card.svelte';
import { onDestroy } from 'svelte';
let repoImages: Record<string, string | null> = {};
// When repos load, check for images
$: if ($repos.length) {
(async () => {
for (const repo of $repos) {
if (repoImages[repo.name] === undefined) {
const url = repo.html_url + IMAGE_URL_SUFFIX;
repoImages[repo.name] = (await checkImage(repo)) ? url : null;
}
}
})();
}
onMount(loadRepos);
</script>
<div style="display: none;">
{toasts.add({
title: 'Warning',
description: 'This page is under construction',
duration: 0,
type: 'warning',
placement: 'center-center',
showProgress: true
})}
</div>
<FlexGallery>
{#each $repos as repo}
<Card
headerLeft={repo.name}
headerRight={repo.language}
footer={timeSince(repo.updated_at)}
containerStyle="group relative flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300 overflow-hidden"
>
<div class="relative z-0">
{repo.description}
</div>
{#if repoImages[repo.name]}
<!-- svelte-ignore a11y_img_redundant_alt -->
<img
src={repoImages[repo.name]}
alt="repo image"
class="absolute left-0 bottom-0 h-full w-full object-cover rounded-2xl transition-transform duration-500 translate-y-full group-hover:translate-y-0 z-10 pointer-events-none"
/>
{/if}
</Card>
{/each}
</FlexGallery>

View File

@ -1,18 +0,0 @@
:root {
--bg: #282c34;
--bg-secondary: #3e434b;
--accent: #59616d;
--header: #E06C75;
--fg: #9eaac0;
--input: #2b3136;
--link: #98C379;
--glow: #C678DD;
--hover: #56B6C2;
--green: #98C379;
--red: #E06C75;
--blue: #79aec3;
}

View File

@ -1,18 +0,0 @@
:root {
--bg: #f5f5f5; /* Slightly deeper light grey for subtle contrast */
--bg-secondary: #d9dddf; /* More defined soft grey */
--accent: #8ea29b; /* Stronger muted sage green */
--header: #4a5a56; /* Darker desaturated green-grey for better contrast */
--fg: #2f3739; /* Richer dark grey for improved readability */
--input: #e4e7e8; /* Slightly deeper soft grey input background */
--link: #5f8480; /* Darker muted teal for contrast */
--glow: #b0bdb9; /* More noticeable but soft glow */
--hover: #85a29c; /* Stronger pastel hover effect */
--green: #6fa984; /* More vibrant pastel green */
--red: #e8858f; /* Slightly deeper pastel red for contrast */
--blue: #6fa9a4; /* Same as accent */
}