From 538d9593c2ada2eeb0f2f51d4c928180b07c9dff Mon Sep 17 00:00:00 2001 From: Luke Else Date: Fri, 23 May 2025 16:04:35 +0100 Subject: [PATCH] Made components more re-usable. Added section component --- src/lib/components/Cards/Card.svelte | 42 +++++++++++++--------------- src/lib/components/Section.svelte | 26 +++++++++++++++++ src/lib/stores.ts | 33 +--------------------- src/lib/toast.ts | 26 ----------------- src/lib/types.ts | 4 +-- src/main.svelte | 32 ++++++++++----------- static/json/me.json | 1 + 7 files changed, 65 insertions(+), 99 deletions(-) create mode 100644 src/lib/components/Section.svelte delete mode 100644 src/lib/toast.ts diff --git a/src/lib/components/Cards/Card.svelte b/src/lib/components/Cards/Card.svelte index be1b904..0955917 100644 --- a/src/lib/components/Cards/Card.svelte +++ b/src/lib/components/Cards/Card.svelte @@ -1,28 +1,26 @@ - - -
-
- +
+
+

{headerLeft}

+ + {#if headerRight} +

{@html headerRight}

+ {/if}
-
-
- -
-
- \ No newline at end of file diff --git a/src/lib/components/Section.svelte b/src/lib/components/Section.svelte new file mode 100644 index 0000000..5a1d9f9 --- /dev/null +++ b/src/lib/components/Section.svelte @@ -0,0 +1,26 @@ + + +
+ + + +
+ +
+ {label} +
+
+
+ +
+
+
\ No newline at end of file diff --git a/src/lib/stores.ts b/src/lib/stores.ts index 41f1da4..c0888fb 100644 --- a/src/lib/stores.ts +++ b/src/lib/stores.ts @@ -1,38 +1,7 @@ -import { ToastType, type Toast } from "$lib/toast"; -import { writable, type Writable } from "svelte/store"; +import { writable } from "svelte/store"; import type { GitRepo } from "./types"; import { fetchRepos } from "./api/git"; - -//////////////////////////////////////// -// Toast Stores -//////////////////////////////////////// -export const toasts: Writable = writable([]); - -export const addToast = (toast: Toast) => { - // Create a unique ID so we can easily find/remove it - // if it is dismissible/has a timeout. - toast.id = Math.floor(Math.random() * 10000); - - // Setup some sensible defaults for a toast. - const defaults = { - id: toast.id, - type: ToastType.Info, - dismissible: true, - timeout: 3000, - }; - - // Push the toast to the top of the list of toasts - toasts.update((all) => [{ ...defaults, ...toast }, ...all]); - - // If toast is dismissible, dismiss it after "timeout" amount of time. - if (toast.timeout) setTimeout(() => dismissToast(toast.id), toast.timeout); -}; - -export const dismissToast = (id: number) => { - toasts.update((all) => all.filter((t) => t.id !== id)); -}; - //////////////////////////////////////// // Git Repo Stores //////////////////////////////////////// diff --git a/src/lib/toast.ts b/src/lib/toast.ts deleted file mode 100644 index abbfccc..0000000 --- a/src/lib/toast.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @enum Used to refer to the type of toast being displayed - */ -export enum ToastType { - Info = "info", - Success = "success", - Error = "error" -} - -/** - * @class Toast Notification - */ -export class Toast { - constructor(text: String, type: ToastType, dismissable: boolean, timeout: number ) { - this.text = text; - this.type = type; - this.dismissable = dismissable; - this.timeout = timeout; - } - - id: number = 0; - text: String; - type: ToastType; - dismissable: Boolean; - timeout: number; -} \ No newline at end of file diff --git a/src/lib/types.ts b/src/lib/types.ts index 348acd3..92a7c3c 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -3,7 +3,7 @@ export type TimelinePosition = 'right' | 'left' | 'alternate'; export type ParentPosition = 'right' | 'left'; export type TimelineConfig = { - rootPosition: TimelinePosition; + rootPosition: TimelinePosition; }; export interface GitRepo { @@ -19,4 +19,4 @@ export interface GitRepo { login: string; avatar_url: string; }; -} \ No newline at end of file +} diff --git a/src/main.svelte b/src/main.svelte index 222a87f..381554d 100644 --- a/src/main.svelte +++ b/src/main.svelte @@ -3,6 +3,8 @@ import { toasts } from 'svelte-toasts'; import Loading from '$lib/components/Loading.svelte'; + import Section from '$lib/components/Section.svelte'; + import Card from '$lib/components/Cards/Card.svelte'; {#await getJson('/json/me.json')} @@ -18,23 +20,19 @@ })}
-
-
-

- {info.name} -

-

{info.job_title}

-
-
-
- Avatar -

{@html info.about}

-
-
+ +
+ +
+ Avatar +

{@html info.about}

+
+
+
{:catch}
{toasts.add({ diff --git a/static/json/me.json b/static/json/me.json index df11f9d..4d06247 100644 --- a/static/json/me.json +++ b/static/json/me.json @@ -1,6 +1,7 @@ { "name": "Luke Else", "job_title": "Software Engineer", + "location": "Crawley, Sussex
UK", "profile_photo": "/profile.jpg", "skills": [ {