CHORE: Starting to get to work with changing some of the old formatting over to tailwind config
This commit is contained in:
@@ -1,64 +1,18 @@
|
||||
<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";
|
||||
import { loadRepos } from '$lib/stores';
|
||||
import { onMount } from 'svelte';
|
||||
import { toasts } from 'svelte-toasts';
|
||||
|
||||
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 style="display: none;">
|
||||
{toasts.add({
|
||||
title: 'Warning',
|
||||
description: 'This page is under construction',
|
||||
duration: 0,
|
||||
type: 'warning',
|
||||
placement: 'center-center',
|
||||
showProgress: true
|
||||
})}
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user