FEAT: Added in git repos page
This commit is contained in:
parent
206c5665a2
commit
a46ac458dc
@ -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>
|
||||
|
@ -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;
|
||||
}
|
@ -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 */
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user