Luke Else
ce38e88885
All checks were successful
Build and Push Development Docker Image / build-and-push (push) Successful in 1m4s
65 lines
2.8 KiB
Svelte
65 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import { Toast, ToastType } from "$lib/toast";
|
|
import { repos, loadRepos, addToast } from "$lib/stores";
|
|
import { timeSince, checkImage, IMAGE_URL_SUFFIX } from "$lib/api/git";
|
|
import Card from "$lib/components/Cards/Card.svelte";
|
|
import SlidingCard from "$lib/components/Cards/SlidingCard.svelte";
|
|
import Loading from "$lib/components/Loading.svelte";
|
|
|
|
onMount(loadRepos);
|
|
</script>
|
|
|
|
<h1>My Projects</h1>
|
|
<p>This here is a list of my most recently worked on projects. Note this does not show any private repositories. For more in depth information <a href="https://git.luke-else.co.uk">Click Here</a>.</p>
|
|
|
|
<div class="container">
|
|
{#if $repos.length > 0}
|
|
<div style="display: none;">{addToast(new Toast("See a snapshot of my latest work.", ToastType.Info, true, 8_000))}</div>
|
|
<div class="cards">
|
|
{#each $repos as repo}
|
|
{#await checkImage(repo)}
|
|
<Loading />
|
|
{:then hasImage}
|
|
{#if hasImage}
|
|
<SlidingCard>
|
|
<div slot="header">
|
|
<h2>{repo.name}</h2>
|
|
{repo.language}
|
|
</div>
|
|
<div slot="content">
|
|
<p class="not-required">{@html repo.description}</p>
|
|
</div>
|
|
<div slot="sliding-content">
|
|
<img width="100%" src="{repo.html_url}{IMAGE_URL_SUFFIX}" alt="{repo.name}" />
|
|
</div>
|
|
<div slot="footer">
|
|
<!-- svelte-ignore a11y-invalid-attribute -->
|
|
<a href="{repo.html_url}">{repo.name}</a>
|
|
{timeSince(repo.updated_at)}
|
|
</div>
|
|
</SlidingCard>
|
|
{:else}
|
|
<Card>
|
|
<div slot="header">
|
|
<h2>{repo.name}</h2>
|
|
{repo.language}
|
|
</div>
|
|
<div slot="content">
|
|
<p class="not-required">{@html repo.description}</p>
|
|
</div>
|
|
<div slot="footer">
|
|
<!-- svelte-ignore a11y-invalid-attribute -->
|
|
<a href="{repo.html_url}">{repo.name}</a>
|
|
{timeSince(repo.updated_at)}
|
|
</div>
|
|
</Card>
|
|
{/if}
|
|
{/await}
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<Loading />
|
|
{/if}
|
|
</div>
|