FEAT: Added in git repos page
This commit is contained in:
parent
206c5665a2
commit
a46ac458dc
@ -1,18 +1,50 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { loadRepos } from '$lib/stores';
|
import { loadRepos, repos } from '$lib/stores';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { toasts } from 'svelte-toasts';
|
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);
|
onMount(loadRepos);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div style="display: none;">
|
<FlexGallery>
|
||||||
{toasts.add({
|
{#each $repos as repo}
|
||||||
title: 'Warning',
|
<Card
|
||||||
description: 'This page is under construction',
|
headerLeft={repo.name}
|
||||||
duration: 0,
|
headerRight={repo.language}
|
||||||
type: 'warning',
|
footer={timeSince(repo.updated_at)}
|
||||||
placement: 'center-center',
|
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"
|
||||||
showProgress: true
|
>
|
||||||
})}
|
<div class="relative z-0">
|
||||||
</div>
|
{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