Merge pull request 'upgraded to svelte 5' (#10) from svelte-5 into main

Reviewed-on: #10

package.json

@@ -10,30 +10,30 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@types/eslint": "^8.56.0",
-		"autoprefixer": "^10.4.19",
-		"eslint": "^8.56.0",
+		"@sveltejs/adapter-auto": "^3.3.1",
+		"@sveltejs/kit": "^2.9.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.1",
+		"@types/eslint": "^9.6.1",
+		"autoprefixer": "^10.4.20",
+		"eslint": "^9.16.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.35.1",
-		"flowbite": "^2.3.0",
-		"flowbite-svelte": "^0.46.1",
-		"flowbite-svelte-icons": "^1.6.1",
-		"postcss": "^8.4.38",
-		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"svelte": "^4.2.7",
-		"tailwindcss": "^3.4.3",
-		"vite": "^5.0.3"
+		"eslint-plugin-svelte": "^2.46.1",
+		"flowbite": "^2.5.2",
+		"flowbite-svelte": "^0.47.4",
+		"flowbite-svelte-icons": "^2.0.2",
+		"postcss": "^8.4.49",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.2",
+		"svelte": "^5.7.1",
+		"tailwindcss": "^3.4.16",
+		"vite": "^6.0.3"
 	},
 	"type": "module",
 	"dependencies": {
-		"@sveltejs/adapter-vercel": "^5.3.0",
-		"@vercel/analytics": "^1.3.1",
-		"geist": "^1.3.0",
+		"@sveltejs/adapter-vercel": "^5.5.0",
+		"@vercel/analytics": "^1.4.1",
+		"geist": "^1.3.1",
 		"moment": "^2.30.1",
-		"pnpm": "^9.1.1"
+		"pnpm": "^9.14.4"
 	}
 }

src/lib/PageHeader.svelte

@@ -1,5 +1,5 @@
 <script>
-	export let title;
+	let { title } = $props();
 </script>
 
 <h1 class="text-center text-4xl">{title}</h1>

src/lib/ProjectCard/Commit.svelte

@@ -1,20 +1,24 @@
 <script>
 	import { AccordionItem } from 'flowbite-svelte';
 	import moment from 'moment';
-	export let index;
-	export let link;
-	export let title;
-	export let description;
-	export let published;
+	let {
+		index,
+		link,
+		title,
+		description,
+		published
+	} = $props();
 	const pubAgo = moment(published).fromNow();
 	const open = index === 0;
 </script>
 
 <AccordionItem borderSharedClass="border-slate-400" {...open ? { open: true } : {}}>
-	<span slot="header" class="flex justify-between items-center w-full">
+	{#snippet header()}
+		<span  class="flex justify-between items-center w-full">
 			<h3>{@html title}</h3>
 			<p class="text-xs mr-2">{pubAgo}</p>
 		</span>
+	{/snippet}
 	<div class="flex flex-col">
 		{#if description}
 			<p>with the message:</p>

src/lib/ProjectCard/ProjectCard.svelte

@@ -5,13 +5,26 @@
 	import ProjectRepo from './ProjectRepo.svelte';
 	import VendorGallery from './VendorGallery.svelte';
 
-	//Props
-	export let title;
-	export let url;
-	export let description;
-	export let repo;
-	export let rss;
-	export let vendors;
+	
+	/**
+	 * @typedef {Object} Props
+	 * @property {any} title - Props
+	 * @property {any} url
+	 * @property {any} description
+	 * @property {any} repo
+	 * @property {any} rss
+	 * @property {any} vendors
+	 */
+
+	/** @type {Props} */
+	let {
+		title,
+		url,
+		description,
+		repo,
+		rss,
+		vendors
+	} = $props();
 </script>
 
 <div class="pt-12">

src/lib/ProjectCard/ProjectDescription.svelte

@@ -1,5 +1,5 @@
 <script>
-	export let description;
+	let { description } = $props();
 </script>
 
 <p>{@html description}</p>

src/lib/ProjectCard/ProjectHeader.svelte

@@ -1,5 +1,5 @@
 <script>
-	export let title;
+	let { title } = $props();
 </script>
 
 <h3 class="text-3xl">{title}</h3>

src/lib/ProjectCard/ProjectLinks.svelte

@@ -1,8 +1,7 @@
 <script>
 
 	import { GithubSolid, GlobeOutline } from "flowbite-svelte-icons";
-    export let url;
-    export let repo;
+	let { url, repo } = $props();
 </script>
 <div class="flex gap-4">
 	<div class="hover:scale-110">

src/lib/ProjectCard/ProjectRepo.svelte

@@ -1,6 +1,6 @@
 <script>
 	import RssContainer from './RssContainer.svelte';
-	export let rss;
+	let { rss } = $props();
 </script>
 
 <RssContainer url={rss} />

src/lib/ProjectCard/RssContainer.svelte

@@ -1,6 +1,6 @@
 <script>
 	import RssFeed from './RssFeed.svelte';
-	export let url;
+	let { url } = $props();
 </script>
 
 <div>

src/lib/ProjectCard/RssFeed.svelte

@@ -4,10 +4,10 @@
 	import Commit from './Commit.svelte';
 	import { Accordion } from 'flowbite-svelte';
 
-	export let url;
+	let { url } = $props();
 
-	let feed = null;
-	let error = null;
+	let feed = $state(null);
+	let error = $state(null);
 
 	async function fetchFeed(url) {
 		try {

src/lib/ProjectCard/VendorGallery.svelte

@@ -1,7 +1,7 @@
 <script>
 	import VendorIcon from './VendorIcon.svelte';
 
-	export let vendors;
+	let { vendors } = $props();
 </script>
 
 <div class="my-4 dark:bg-slate-800 mx-auto md:w-fit rounded-2xl p-2">

src/lib/ProjectCard/VendorIcon.svelte

@@ -1,6 +1,5 @@
 <script>
-	export let name;
-	export let img;
+	let { name, img } = $props();
 </script>
 
 <div class="flex flex-col justify-center h-16 hover:scale-110 text-center items-center">

src/lib/Projects.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { projects } from '$lib/projects.js';
 	import ProjectCard from './ProjectCard/ProjectCard.svelte';
-	export let category;
+	let { category } = $props();
 </script>
 
 {#each projects as project}

src/lib/TopNav.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import {
 		Navbar,
 		NavBrand,
@@ -12,7 +12,7 @@
 	import logo from '$lib/logo.png';
 	import { page } from '$app/stores';
 
-	$: activeUrl = $page.url.pathname;
+	let activeUrl = $derived($page.url.pathname);
 </script>
 
 <Navbar class="bg-transparent">

src/routes/+layout.svelte

@@ -1,21 +1,13 @@
-<script>
+<script lang="ts">
 	import '../app.css';
-	import CloudflareAnalytics from '$lib/CloudflareAnalytics.svelte';
 	import BottomNavigation from '../lib/BottomNavigation.svelte';
 	import TopNav from '../lib/TopNav.svelte';
-	import { inject } from '@vercel/analytics';
-	let activeBtn = 'home';
-	function handleNavItemClick(btnName) {
-		activeBtn = btnName;
-	}
-	$: activeBtn = activeBtn === 'projects';
-	inject();
+	let { children } = $props();
 </script>
 
-<CloudflareAnalytics />
 <TopNav />
 <div class="px-2 sm:px-0 mx-auto max-w-xs sm:max-w-md md:max-w-3xl mb-20 md:mb-0">
-	<slot />
+	{@render children?.()}
 </div>
 <BottomNavigation />
 <footer class="">

src/routes/+page.svelte

@@ -1,8 +1,5 @@
 <script>
-	import VendorMarquee from '$lib/Landing/VendorMarquee.svelte';
-	import VendorCarousel from '../lib/Landing/VendorCarousel.svelte';
 	import { Heading, Mark } from 'flowbite-svelte';
-	import portfolio from '$lib/images/portfolio.png';
 	import hero from '$lib/images/hero.webp';
 </script>
 

src/routes/socials/+page.svelte

@@ -1,3 +0,0 @@
-<div>
-	<img src="$lib/images/portfolio-card.webp" alt="Socials Card" />
-</div>