fix: 💫 migrate components to Svelte 5

src/lib/components/BannerImage.svelte

@@ -3,7 +3,7 @@
 	import { browser } from '$app/environment';
 	import Image from '$lib/components/Image.svelte';
 
-	export let imageData;
+	let { imageData } = $props();
 
 	onMount(() => {
 		if (browser) {

src/lib/components/BlogPostSummary.svelte

@@ -3,10 +3,7 @@
 	import { H_ELLIPSIS_ENTITY } from '$lib/constants/entities';
 	import { goto } from '$app/navigation';
 
-	export let postTitle;
-	export let datePublished;
-	export let seoMetaDescription;
-	export let slug;
+	let { postTitle, datePublished, seoMetaDescription, slug } = $props();
 
 	/**
 	 * @param event {MouseEvent} - click
@@ -36,9 +33,9 @@
 <div
 	role="presentation"
 	class="container"
-	on:mouseenter={handleMouseEnter}
-	on:mouseleave={handleMouseLeave}
-	on:mousedown={handleMouseDown}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
+	onmousedown={handleMouseDown}
 >
 	<div class="content" data-sveltekit-preload-data="hover">
 		<h3>

src/lib/components/BlogRoll.svelte

@@ -2,12 +2,11 @@
 	import BlogPostSummary from '$lib/components/BlogPostSummary.svelte';
 	import { H_ELLIPSIS_ENTITY } from '$lib/constants/entities';
 
-	export let initialPosts = 4;
-	export let posts;
+	let { initialPosts = 4, posts } = $props();
 
 	const postCount = posts.length;
-	$: showPosts = initialPosts;
-	$: displayPosts = posts.slice(0, showPosts);
+	let showPosts = $state(initialPosts);
+	let displayPosts = $derived(posts.slice(0, showPosts));
 
 	const handleClick = () => {
 		showPosts += initialPosts;
@@ -29,6 +28,6 @@
 		<p>No posts yet!</p>
 	{/each}
 	{#if showPosts < postCount}
-		<button type="submit" on:click={handleClick}>See more {H_ELLIPSIS_ENTITY}</button>
+		<button type="submit" onclick={handleClick}>See more {H_ELLIPSIS_ENTITY}</button>
 	{/if}
 </section>

src/lib/components/Card.svelte

@@ -1,10 +1,12 @@
 <script>
 	import '$lib/styles/index.scss';
+
+	let { children } = $props();
 </script>
 
 <section class="container">
 	<div class="content">
-		<slot />
+		{@render children?.()}
 	</div>
 </section>
 

src/lib/components/ExternalLink.svelte

@@ -1,8 +1,11 @@
 <script>
-	export let rel = 'nofollow noopener noreferrer';
-	export let target = '_blank';
-	export let href;
-	export let ariaLabel;
+	let {
+		children,
+		rel = 'nofollow noopener noreferrer',
+		target = '_blank',
+		href,
+		ariaLabel,
+	} = $props();
 </script>
 
-<a aria-label={ariaLabel} {href} {rel} {target}><slot /></a>
+<a aria-label={ariaLabel} {href} {rel} {target}>{@render children?.()}</a>

src/lib/components/Icons/Camera.svelte

@@ -2,10 +2,7 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Camera icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let { label = 'Camera icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
 
 	addCollection(
 		{

src/lib/components/Icons/Email.svelte

@@ -2,10 +2,7 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Email icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let { label = 'Email icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
 
 	addCollection(
 		{

src/lib/components/Icons/Facebook.svelte

@@ -2,10 +2,7 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Facebook icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let { label = 'Facebook icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
 
 	addCollection(
 		{

src/lib/components/Icons/GitHub.svelte

@@ -2,10 +2,7 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Git hub icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let { label = 'Git hub icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
 
 	addCollection(
 		{

src/lib/components/Icons/LinkedIn.svelte

@@ -2,10 +2,7 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Linked in icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let { label = 'Linked in icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
 
 	addCollection(
 		{

src/lib/components/Icons/Telegram.svelte

@@ -2,10 +2,12 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Telegram app icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let {
+		label = 'Telegram app icon',
+		colour = 'inherit',
+		ariaHidden = false,
+		width = 24,
+	} = $props();
 
 	addCollection(
 		{

src/lib/components/Icons/Tiktok.svelte

@@ -2,10 +2,7 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Tik tok icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let { label = 'Tik tok icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
 
 	addCollection(
 		{

src/lib/components/Icons/Twitter.svelte

@@ -2,10 +2,7 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Twitter icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let { label = 'Twitter icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
 
 	addCollection(
 		{

src/lib/components/Icons/Wire.svelte

@@ -2,10 +2,7 @@
 	import 'iconify-icon';
 	import { addCollection } from 'iconify-icon';
 
-	export let label = 'Wire app icon';
-	export let colour = 'inherit';
-	export let ariaHidden = false;
-	export let width = 24;
+	let { label = 'Wire app icon', colour = 'inherit', ariaHidden = false, width = 24 } = $props();
 
 	addCollection(
 		{

src/lib/components/Image.svelte

@@ -1,15 +1,17 @@
 <script>
-	export let alt;
-	export let height; // needed to reduce CLS
-	export let src;
-	export let sources;
-	export let placeholder;
-	export let width; // needed to reduce CLS
-	export let maxWidth = '1280px';
-	export let sizes = `(max-width: ${maxWidth}) 100vw, ${maxWidth}}`;
-	export let importance = undefined;
-	export let loading = 'lazy';
-	export let style = '';
+	let {
+		alt,
+		height, // needed to reduce CLS
+		src,
+		sources,
+		placeholder,
+		width, // needed to reduce CLS
+		maxWidth = '1280px',
+		sizes = `(max-width: ${maxWidth}) 100vw, ${maxWidth}}`,
+		importance = undefined,
+		loading = 'lazy',
+		style = '',
+	} = $props();
 </script>
 
 <picture>

src/lib/components/Link.svelte

@@ -1,8 +1,5 @@
 <script>
-	export let rel = '';
-	export let target = '';
-	export let href;
-	export let ariaLabel;
+	let { children, rel = '', target = '', href, ariaLabel } = $props();
 </script>
 
-<a aria-label={ariaLabel} {href} {rel} {target}><slot /></a>
+<a aria-label={ariaLabel} {href} {rel} {target}> {@render children?.()}</a>

src/lib/components/SEO/OpenGraph.svelte

@@ -1,16 +1,18 @@
 <script>
-	export let article = false;
-	export let datePublished;
-	export let lastUpdated;
-	export let facebookAuthorPage = '';
-	export let facebookPage = '';
-	export let image;
-	export let squareImage;
-	export let metadescription;
-	export let ogLanguage;
-	export let pageTitle;
-	export let siteTitle;
-	export let url;
+	let {
+		article = false,
+		datePublished,
+		lastUpdated,
+		facebookAuthorPage = '',
+		facebookPage = '',
+		image,
+		squareImage,
+		metadescription,
+		ogLanguage,
+		pageTitle,
+		siteTitle,
+		url,
+	} = $props();
 </script>
 
 <svelte:head>

src/lib/components/SEO/SchemaOrg.svelte

@@ -1,35 +1,29 @@
 <script>
 	import hash from 'object-hash';
-	export let article = false;
-	export let author;
 
-	/**
-	 * @type {{ name: string; slug: string }[]}
-	 */
-	export let breadcrumbs;
-
-	export let datePublished;
-	export let entity;
-	export let lastUpdated;
-	export let featuredImage;
-	export let metadescription;
-	export let siteLanguage;
-	export let siteTitle;
-	export let siteTitleAlt;
-	export let siteUrl;
-	export let title;
-	export let url;
-	export let facebookPage;
-	export let githubPage;
-	export let linkedinProfile;
-	export let telegramUsername;
-	export let tiktokUsername;
-	export let twitterUsername;
-
-	/**
-	 * @type {{ url: string; faviconWidth: number; faviconHeight: number } | null}
-	 */
-	export let entityMeta = null;
+	let {
+		article = false,
+		author,
+		breadcrumbs,
+		datePublished,
+		entity,
+		lastUpdated,
+		featuredImage,
+		metadescription,
+		siteLanguage,
+		siteTitle,
+		siteTitleAlt,
+		siteUrl,
+		title,
+		url,
+		facebookPage,
+		githubPage,
+		linkedinProfile,
+		telegramUsername,
+		tiktokUsername,
+		twitterUsername,
+		entityMeta = null,
+	} = $props();
 
 	const entityHash = hash({ author }, { algorithm: 'md5' });
 

src/lib/components/SEO/Twitter.svelte

@@ -1,9 +1,5 @@
 <script>
-	export let article = false;
-	export let author;
-	export let twitterUsername;
-	export let image;
-	export let timeToRead = 0;
+	let { article = false, author, twitterUsername, image, timeToRead = 0 } = $props();
 
 	/*
 	 * When there is an equivalent og tag present, Twitter takes that so check OpenGraph before