51 lines
1.8 KiB
Svelte
51 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
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>
|
|
|
|
<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>
|