From daada71365c271278826c74249aa2a457fdba734 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Wed, 4 Dec 2024 09:37:49 -0800
Subject: [PATCH] Ran svelte 5 upgrade script.

---
 src/lib/components/ExternalLink.svelte     | 32 ++++++++----
 src/lib/components/LazyImage.svelte        | 26 +++++++---
 src/lib/components/Link.svelte             | 21 ++++++--
 src/lib/components/Pagination.svelte       | 58 +++++++++++++---------
 src/lib/components/SEO.svelte              | 21 +++++---
 src/lib/components/Tag.svelte              |  6 ++-
 src/lib/components/contactHub/index.svelte | 34 +++++++++----
 src/lib/components/socialImageCard.svelte  | 26 +++++++---
 src/routes/+layout.svelte                  | 17 +++++--
 src/routes/about/CourseCard.svelte         |  6 ++-
 src/routes/about/TechListItem.svelte       | 22 +++++---
 src/routes/articles/[page]/+page.svelte    | 24 ++++++---
 12 files changed, 203 insertions(+), 90 deletions(-)

diff --git a/src/lib/components/ExternalLink.svelte b/src/lib/components/ExternalLink.svelte
index 4e7703e..18639e4 100644
--- a/src/lib/components/ExternalLink.svelte
+++ b/src/lib/components/ExternalLink.svelte
@@ -1,20 +1,34 @@
 <script lang="ts">
 	import OpenInNew from '@iconify-icons/mdi/open-in-new';
 	import type { IconifyIcon } from 'iconify-icon';
-	export let rel = 'noreferrer';
-	export let target = '_blank';
-	export let href: string;
-	export let ariaLabel: string;
-	export let showIcon: boolean = false;
-	export let clazz = "";
-	export let icon: IconifyIcon = OpenInNew;
+	interface Props {
+		rel?: string;
+		target?: string;
+		href: string;
+		ariaLabel: string;
+		showIcon?: boolean;
+		clazz?: string;
+		icon?: IconifyIcon;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		rel = 'noreferrer',
+		target = '_blank',
+		href,
+		ariaLabel,
+		showIcon = false,
+		clazz = "",
+		icon = OpenInNew,
+		children
+	}: Props = $props();
 </script>
 
 
 <a class:show-icon={showIcon} class={clazz} aria-label={`Open ${ariaLabel} externally`} title={`Open ${ariaLabel} externally`} {href} {rel} {target}>
-	<slot />
+	{@render children?.()}
 	{#if showIcon}
-		<iconify-icon {icon} width="24" height="24" role="img" title={`Open ${ariaLabel} Externally`} />
+		<iconify-icon {icon} width="24" height="24" role="img" title={`Open ${ariaLabel} Externally`}></iconify-icon>
 	{/if}
 </a>
 
diff --git a/src/lib/components/LazyImage.svelte b/src/lib/components/LazyImage.svelte
index 9d8c36b..218df67 100644
--- a/src/lib/components/LazyImage.svelte
+++ b/src/lib/components/LazyImage.svelte
@@ -3,14 +3,24 @@
 	import Img from '@zerodevx/svelte-img';
 	import type { ExternalImageSource } from '../types/album';
 
-	export let clazz = "";
-	export let src: Record<string, any> | ExternalImageSource[] | undefined;
-	export let alt: string;
-	export let style = "";
-	export let loading: "lazy" | "eager" = "lazy";
+	interface Props {
+		clazz?: string;
+		src: Record<string, any> | ExternalImageSource[] | undefined;
+		alt: string;
+		style?: string;
+		loading?: "lazy" | "eager";
+	}
 
-	let ref: any;
-	let loaded: boolean;
+	let {
+		clazz = "",
+		src,
+		alt,
+		style = "",
+		loading = "lazy"
+	}: Props = $props();
+
+	let ref: any = $state();
+	let loaded: boolean = $state();
 
 	onMount(() => {
 		if (ref.complete)	{
@@ -21,7 +31,7 @@
 
 <div class="wrap">
 	<Img class={clazz} {style} {src} {alt} {loading} bind:ref on:load={() => (loaded = true)} />
-	<div class:blur={loaded} class:loaded />
+	<div class:blur={loaded} class:loaded></div>
 </div>
 
 <style lang="postcss">
diff --git a/src/lib/components/Link.svelte b/src/lib/components/Link.svelte
index 8457da3..5c600f3 100644
--- a/src/lib/components/Link.svelte
+++ b/src/lib/components/Link.svelte
@@ -1,10 +1,21 @@
 <script lang="ts">
-	export let rel = '';
-	export let target = '';
-	export let href: string;
-	export let ariaLabel: string;
+	interface Props {
+		rel?: string;
+		target?: string;
+		href: string;
+		ariaLabel: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		rel = '',
+		target = '',
+		href,
+		ariaLabel,
+		children
+	}: Props = $props();
 </script>
 
 <a aria-label={ariaLabel} {href} {rel} {target}>
-	<slot />
+	{@render children?.()}
 </a>
\ No newline at end of file
diff --git a/src/lib/components/Pagination.svelte b/src/lib/components/Pagination.svelte
index a3389b2..3d2c5da 100644
--- a/src/lib/components/Pagination.svelte
+++ b/src/lib/components/Pagination.svelte
@@ -3,32 +3,44 @@
   import { Pagination } from "bits-ui";
   import { ChevronLeft, ChevronRight } from 'lucide-svelte';
 
-  export let additionalClasses: string;
-  export let pageSize: number;
-  export let totalCount: number;
-  export let currentPage: number;
-  export let base: string;
+  interface Props {
+    additionalClasses: string;
+    pageSize: number;
+    totalCount: number;
+    currentPage: number;
+    base: string;
+  }
+
+  let {
+    additionalClasses,
+    pageSize,
+    totalCount,
+    currentPage,
+    base
+  }: Props = $props();
 </script>
 
-<Pagination.Root let:pages count={totalCount} perPage={pageSize} page={currentPage || 1} class={`${additionalClasses}`}
+<Pagination.Root  count={totalCount} perPage={pageSize} page={currentPage || 1} class={`${additionalClasses}`}
   onPageChange={(page) => goto(`${base}/${page}`)}>
-  <Pagination.PrevButton>
-    <ChevronLeft />
-  </Pagination.PrevButton>
-  {#each pages as page (page.key)}
-    {#if page.type === "ellipsis"}
-      <div class="ellipsis text-[15px] font-medium text-foreground-alt">...</div>
-    {:else}
-      <Pagination.Page {page}>
-        <a href={`${base}/${page.value}`}>
-          {page.value}
-        </a>
-      </Pagination.Page>
-    {/if}
-  {/each}
-  <Pagination.NextButton>
-    <ChevronRight />
-  </Pagination.NextButton>
+  {#snippet children({ pages })}
+    <Pagination.PrevButton>
+      <ChevronLeft />
+    </Pagination.PrevButton>
+    {#each pages as page (page.key)}
+      {#if page.type === "ellipsis"}
+        <div class="ellipsis text-[15px] font-medium text-foreground-alt">...</div>
+      {:else}
+        <Pagination.Page {page}>
+          <a href={`${base}/${page.value}`}>
+            {page.value}
+          </a>
+        </Pagination.Page>
+      {/if}
+    {/each}
+    <Pagination.NextButton>
+      <ChevronRight />
+    </Pagination.NextButton>
+  {/snippet}
 </Pagination.Root>
 
 <style lang="postcss">
diff --git a/src/lib/components/SEO.svelte b/src/lib/components/SEO.svelte
index 74ec8a7..fc1fd36 100644
--- a/src/lib/components/SEO.svelte
+++ b/src/lib/components/SEO.svelte
@@ -9,17 +9,26 @@
     siteUrl,
   };
 
-	export let title = defaultMetadata.defaultTitle;
-	export let description = defaultMetadata.defaultDescription;
-	export let image = defaultMetadata.defaultImage;
-	export let location: string = '';
+	interface Props {
+		title?: any;
+		description?: any;
+		image?: any;
+		location?: string;
+	}
 
-  $: seo = {
+	let {
+		title = defaultMetadata.defaultTitle,
+		description = defaultMetadata.defaultDescription,
+		image = defaultMetadata.defaultImage,
+		location = ''
+	}: Props = $props();
+
+  let seo = $derived({
     title,
     description,
     image: `${siteUrl}${image}`,
     url: `${siteUrl}${location || ``}`,
-  };
+  });
 </script>
 
 <svelte:head>
diff --git a/src/lib/components/Tag.svelte b/src/lib/components/Tag.svelte
index 2c1353a..2262aa8 100644
--- a/src/lib/components/Tag.svelte
+++ b/src/lib/components/Tag.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let name: string;
+	interface Props {
+		name: string;
+	}
+
+	let { name }: Props = $props();
 </script>
 
 <span>{name}</span>
diff --git a/src/lib/components/contactHub/index.svelte b/src/lib/components/contactHub/index.svelte
index a7c182b..7b46db5 100644
--- a/src/lib/components/contactHub/index.svelte
+++ b/src/lib/components/contactHub/index.svelte
@@ -4,13 +4,25 @@
 	import linkedin from '@iconify-icons/radix-icons/linkedin-logo';
 	import twitter from '@iconify-icons/radix-icons/twitter-logo';
 
-	export let showGithub: boolean = false;
-	export let showTwitter: boolean = false;
-	export let showLinkedIn: boolean = false;
-	export let showEmail: boolean = false;
-	export let userNames: Record<string, string>;
-	export let showText: boolean = false;
-	export let justify: boolean = false;
+	interface Props {
+		showGithub?: boolean;
+		showTwitter?: boolean;
+		showLinkedIn?: boolean;
+		showEmail?: boolean;
+		userNames: Record<string, string>;
+		showText?: boolean;
+		justify?: boolean;
+	}
+
+	let {
+		showGithub = false,
+		showTwitter = false,
+		showLinkedIn = false,
+		showEmail = false,
+		userNames,
+		showText = false,
+		justify = false
+	}: Props = $props();
 </script>
 
 {#if showText}
@@ -26,7 +38,7 @@
 				aria-label="Contact through Twitter"
 				rel="noreferrer"
 			>
-				<iconify-icon icon={twitter} class="twitter-contact" width="24" height="24" />
+				<iconify-icon icon={twitter} class="twitter-contact" width="24" height="24"></iconify-icon>
 			</a>
 		</span>
 	{/if}
@@ -39,7 +51,7 @@
 				aria-label="Contact through LinkedIn"
 				rel="noreferrer"
 			>
-				<iconify-icon icon={linkedin} class="linkedin-contact" width="24" height="24" />
+				<iconify-icon icon={linkedin} class="linkedin-contact" width="24" height="24"></iconify-icon>
 			</a>
 		</span>
   {/if}
@@ -52,7 +64,7 @@
 				aria-label="View Github"
 				rel="noreferrer"
 			>
-			<iconify-icon icon={github} class="github-contact" width="24" height="24" />
+			<iconify-icon icon={github} class="github-contact" width="24" height="24"></iconify-icon>
 			</a>
 		</span>
   {/if}
@@ -65,7 +77,7 @@
 				aria-label="Contact by email"
 				rel="noreferrer"
 			>
-				<iconify-icon icon={email} class="email-contact" width="24" height="24" />
+				<iconify-icon icon={email} class="email-contact" width="24" height="24"></iconify-icon>
 			</a>
 		</span>
   {/if}
diff --git a/src/lib/components/socialImageCard.svelte b/src/lib/components/socialImageCard.svelte
index 772ceef..64662b9 100644
--- a/src/lib/components/socialImageCard.svelte
+++ b/src/lib/components/socialImageCard.svelte
@@ -1,11 +1,23 @@
 <script lang="ts">
-	export let header: string;
-	export let page: string;
-	export let image: string;
-	export let content: string;
-	export let width = 1200;
-	export let height = 630;
-	export let url: string;
+	interface Props {
+		header: string;
+		page: string;
+		image: string;
+		content: string;
+		width?: number;
+		height?: number;
+		url: string;
+	}
+
+	let {
+		header,
+		page,
+		image,
+		content,
+		width = 1200,
+		height = 630,
+		url
+	}: Props = $props();
 </script>
 
 <div class="social-card" style={`width: ${width}px; height: ${height}px;`}>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 800eb30..8104f31 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { MetaTags } from 'svelte-meta-tags';
 	import NProgress from "nprogress";
 	import 'iconify-icon';
@@ -10,6 +12,11 @@
 	import Header from '$lib/components/header/index.svelte';
 	import Footer from '$lib/components/footer/index.svelte';
 	import Analytics from '$lib/components/analytics/index.svelte';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
 
 	NProgress.configure({
 			// Full list: https://github.com/rstacruz/nprogress#configuration
@@ -19,15 +26,15 @@
 	const dev = process.env.NODE_ENV !== 'production';
 	const siteUrl = PUBLIC_SITE_URL || 'https://bradleyshellnut.com/';
 
-	$: {
-		if (browser && $navigating) {
+
+	if (browser && $navigating) {
 			NProgress.start();
 		} else {
 			NProgress.done();
 		}
 	}
 
-	$: metaTags = {
+	let metaTags = $derived({
 		titleTemplate: '%s | Bradley Shellnut',
 		additionalMetaTags: [
 			{
@@ -36,7 +43,7 @@
 			}
 		],
 		...$page.data.metaTagsChild
-	}
+	})
 </script>
 
 {#if !dev}
@@ -48,7 +55,7 @@
 <div class="wrapper">
 	<Header />
 	<main>
-		<slot />
+		{@render children?.()}
 	</main>
 	<Footer />
 </div>
diff --git a/src/routes/about/CourseCard.svelte b/src/routes/about/CourseCard.svelte
index d64d9e4..b526be9 100644
--- a/src/routes/about/CourseCard.svelte
+++ b/src/routes/about/CourseCard.svelte
@@ -3,7 +3,11 @@
 	import Tag from "$lib/components/Tag.svelte";
 	import type { Course } from "$lib/types/courses";
 
-	export let course: Course;
+	interface Props {
+		course: Course;
+	}
+
+	let { course }: Props = $props();
 	const { externalLinks, tags } = course;
 </script>
 
diff --git a/src/routes/about/TechListItem.svelte b/src/routes/about/TechListItem.svelte
index dbbbb13..9818bfa 100644
--- a/src/routes/about/TechListItem.svelte
+++ b/src/routes/about/TechListItem.svelte
@@ -1,11 +1,21 @@
 <script lang="ts">
 	import type { IconifyIcon } from "iconify-icon/dist/iconify-icon.js";
 
-	export let ariaLabel: string;
-	export let href: string;
-	export let clazz = "";
-	export let itemText: string;
-	export let icon: IconifyIcon;
+	interface Props {
+		ariaLabel: string;
+		href: string;
+		clazz?: string;
+		itemText: string;
+		icon: IconifyIcon;
+	}
+
+	let {
+		ariaLabel,
+		href,
+		clazz = "",
+		itemText,
+		icon
+	}: Props = $props();
 </script>
 
 <a
@@ -15,7 +25,7 @@
 	{href}
 	class={clazz}
 >
-	<iconify-icon {icon} width="24" height="24" role="img" title={itemText} />
+	<iconify-icon {icon} width="24" height="24" role="img" title={itemText}></iconify-icon>
 	<p>{itemText}</p>
 </a>
 
diff --git a/src/routes/articles/[page]/+page.svelte b/src/routes/articles/[page]/+page.svelte
index 6f61095..272e347 100644
--- a/src/routes/articles/[page]/+page.svelte
+++ b/src/routes/articles/[page]/+page.svelte
@@ -1,18 +1,26 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import Pagination from '$lib/components/Pagination.svelte';
 	import type { Article } from '$lib/types/article';
 	import Articles from '$lib/components/Articles.svelte';
 	import type { PageData } from './$types';
 
-	export let data: PageData;
-	let articles: Article[];
-	let currentPage: number;
-	let totalArticles: number;
-	let limit: number;
-
-	$: if (data) {
-		({ articles, currentPage, totalArticles, limit } = data);
+	interface Props {
+		data: PageData;
 	}
+
+	let { data }: Props = $props();
+	let articles: Article[] = $state();
+	let currentPage: number = $state();
+	let totalArticles: number = $state();
+	let limit: number = $state();
+
+	run(() => {
+		if (data) {
+			({ articles, currentPage, totalArticles, limit } = data);
+		}
+	});
 </script>
 
 <h1 style:margin-bottom={"2rem"}>Favorite Tech Articles</h1>