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

chore/tailwind-conversion #38

Merged
luke-else merged 2 commits from chore/tailwind-conversion into development 2025-05-24 21:36:16 +00:00
Conversation 0 Commits 2 Files Changed 8 +52 -33
2 changed files with 52 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b55538345f - Show all commits

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 var(--fg);
border-bottom: 3px solid gray;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid var(--fg);
border-right: 3px solid gray;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid var(--fg);
border-top: 3px solid gray;
}
@keyframes rotate-one {

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

@@ -1,9 +1,11 @@
<script lang="ts">
import { loadRepos, repos } from '$lib/stores'; import { onMount } from 'svelte';
import { loadRepos, repos } from '$lib/stores';
import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
import { toasts } from 'svelte-toasts';
import GridGallery from '$lib/components/GridGallery.svelte';
import Card from '$lib/components/Cards/Card.svelte';
import Loading from '$lib/components/Loading.svelte';
let repoImages: Record<string, string | null> = {};
@@ -18,35 +20,52 @@
}
})();
}
onMount(loadRepos);
</script>
<GridGallery>
{#each $repos as repo}
<Card
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"
>
<h2 slot="headerLeft">{repo.name}</h2>
<h2 slot="headerRight" class="text-sm text-gray-500">
{repo.language}
</h2>
<div slot="content">
<div class="relative z-0">
{repo.description}
{#await loadRepos()}
<Loading />
{:then _}
{#if $repos.length == 0}
{console.log('No Repos')}
<div style="display: none;">
{toasts.add({
title: 'Error',
description: 'Failed to load repositories',
duration: 5000,
type: 'error',
placement: 'bottom-center',
showProgress: true
})}
</div>
{/if}
<!-- Repositories loaded successfully -->
<GridGallery>
{#each $repos as repo}
<!-- <Loading /> -->
<Card
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"
>
<h2 slot="headerLeft">{repo.name}</h2>
<h2 slot="headerRight" class="text-sm text-gray-500">
{repo.language}
</h2>
<div slot="content">
<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}
</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}
</div>
<h3 slot="footerLeft">
Last Updated: {timeSince(repo.updated_at)}
</h3>
</Card>
{/each}
</GridGallery>
<h3 slot="footerLeft">
Last Updated: {timeSince(repo.updated_at)}
</h3>
</Card>
{/each}
</GridGallery>
{/await}