Migration to Svelte 5 - Post-auto-migrate

This commit is contained in:
Nick Bland 2024-10-23 14:11:33 +10:00
parent 2017ca50f1
commit 941eacfb3f
Signed by: NickBland
GPG Key ID: 31CADD9E5FDD798C
8 changed files with 44 additions and 26 deletions

BIN
bun.lockb

Binary file not shown.

View File

@ -21,7 +21,7 @@
"daisyui": "^4.12.13",
"eslint": "^9.12.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.44.1",
"eslint-plugin-svelte": "^2.45.1",
"globals": "^15.11.0",
"postcss": "^8.4.47",
"prettier": "^3.3.3",

View File

@ -1,21 +1,21 @@
<script lang="ts">
import { onMount } from "svelte";
let w: number = 0; // Width of the screen, using the svelte binding
let w: number = $state(0); // Width of the screen, using the svelte binding
const GRADUATION = new Date(1753797600000).valueOf();
const FORMATTED = new Date(1753797600000).toDateString();
let interval: ReturnType<typeof setInterval>;
let timeTo = Math.abs(GRADUATION - Date.now().valueOf()) / 1000;
let timeTo = $state(Math.abs(GRADUATION - Date.now().valueOf()) / 1000);
// Calculate time remaining from milliseconds to graduation (30 Jul, 2025)
$: years = Math.floor(timeTo / 31556926);
$: months = Math.floor(timeTo / 2629743) % 12;
$: days = Math.floor(timeTo / 86400) % 30;
$: hours = Math.floor(timeTo / 3600) % 24;
$: minutes = Math.floor(timeTo / 60) % 60;
$: seconds = Math.floor(timeTo % 60);
let years = $derived(Math.floor(timeTo / 31556926));
let months = $derived(Math.floor(timeTo / 2629743) % 12);
let days = $derived(Math.floor(timeTo / 86400) % 30);
let hours = $derived(Math.floor(timeTo / 3600) % 24);
let minutes = $derived(Math.floor(timeTo / 60) % 60);
let seconds = $derived(Math.floor(timeTo % 60));
// Update the timeTo variable every 1000 milliseconds
// Don't go past 0 though! Stop the updates afterwards

View File

@ -1,9 +1,13 @@
<script lang="ts">
import { onMount } from "svelte";
export let src: string;
export let altText: string = "";
interface Props {
src: string;
altText?: string;
}
let loaded = false;
let { src, altText = "" }: Props = $props();
let loaded = $state(false);
onMount(() => {
const img = new Image();
@ -18,5 +22,5 @@
{#if loaded}
<img {src} class="w-48 h-64 shadow-2xl max-w-sm rounded-2xl" alt={altText} />
{:else}
<div class="skeleton w-48 h-64 shadow-2xl max-w-sm rounded-2xl" />
<div class="skeleton w-48 h-64 shadow-2xl max-w-sm rounded-2xl"></div>
{/if}

View File

@ -2,8 +2,12 @@
import Star from "lucide-svelte/icons/star";
import HalfStar from "lucide-svelte/icons/star-half";
export let count: number = 5;
export let half: boolean = false;
interface Props {
count?: number;
half?: boolean;
}
let { count = 5, half = false }: Props = $props();
</script>
<div class="flex">

View File

@ -1,6 +1,11 @@
<script lang="ts">
export let middle: boolean = false;
export let classes: string = ""; // Further classes to pass through
interface Props {
middle?: boolean;
classes?: string;
children?: import('svelte').Snippet;
}
let { middle = false, classes = "", children }: Props = $props();
</script>
<!-- If the text is between some other text, adjust padding to not seperate it out too much -->
@ -9,11 +14,11 @@
<div>
{#if middle}
<p class="px-5 mx-auto text-xl max-w-3xl {classes}">
<slot />
{@render children?.()}
</p>
{:else}
<p class="p-5 mx-auto text-xl max-w-3xl {classes}">
<slot />
{@render children?.()}
</p>
{/if}
</div>

View File

@ -12,7 +12,7 @@
<time class="font-mono" datetime="2020-3">Mar 2020 - Jul 2020</time>
<div class="text-xl">Villanova College</div>
<div class="text-sm">Information Technology Officer</div>
<div class="divider my-1" />
<div class="divider my-1"></div>
Help Desk Role:
<ul class="list-disc list-inside mt-2">
<li>Performed repairs and troubleshooting for both students and teachers.</li>
@ -29,7 +29,7 @@
configuration throughout school.
</li>
</ul>
<div class="divider my-1" />
<div class="divider my-1"></div>
Key Experiences and Takeaways:
<ul class="list-disc list-inside mt-2">
<li>Became more comfortable and confident in an end-user facing role.</li>
@ -56,7 +56,7 @@
<div class="text-xl">St Pauls School</div>
<div class="text-sm pb-2">Information Technology Officer</div>
</div>
<div class="divider my-1" />
<div class="divider my-1"></div>
Help Desk Role:
<ul class="list-disc list-inside mt-2">
<li>
@ -71,7 +71,7 @@
Gained more experience in Azure ecosystem, SCCM deployment, and networking.
</li>
</ul>
<div class="divider my-1" />
<div class="divider my-1"></div>
Key Experiences and Takeaways:
<ul class="list-disc list-inside mt-2">
<li>Working in a larger group to cover more ground</li>
@ -96,7 +96,7 @@
<time class="font-mono" datetime="2022-10">Oct 2022 - Feb 2023</time>
<div class="text-xl">St Pauls School</div>
<div class="text-sm pb-2">System Administrator</div>
<div class="divider my-1" />
<div class="divider my-1"></div>
System Administrator Role:
<ul class="list-disc list-inside mt-2">
<li>
@ -112,7 +112,7 @@
importing new users into TASS and AD.
</li>
</ul>
<div class="divider my-1" />
<div class="divider my-1"></div>
Key Experiences and Takeaways:
<ul class="list-disc list-inside mt-2">
<li>There is always something to be improved upon if you look hard enough.</li>

View File

@ -2,10 +2,15 @@
import "../app.css";
import Navbar from "$lib/components/navbar/navbar.svelte";
import Footer from "$lib/components/footer.svelte";
interface Props {
children?: import('svelte').Snippet;
}
let { children }: Props = $props();
</script>
<Navbar />
<slot />
{@render children?.()}
<Footer />