feat: major update to svelte 5

src/lib/components/ResponsivePageHeaderImage.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-	import { run } from 'svelte/legacy';
-
-	import { generateSizesString, generateSrcsetString } from '$lib/content/srcset';
-
-	import { Hero } from '@damillora/plachta';
-
-	interface Props {
-		background?: string | null;
-		alt?: string;
-	}
-
-	let { background = null, alt = '' }: Props = $props();
-	let srcset: string | null = $state(null);
-	let sizes: string | null = $state(null);
-	run(() => {
-		if (background != null) {
-			srcset = generateSrcsetString(background);
-			sizes = '100vw';
-		} else {
-			srcset = null;
-			sizes = null;
-		}
-	});
-</script>
-
-{#if background}
-	<Hero {background} {alt} {srcset} {sizes} />
-{:else}
-	<Hero background="/images/default-feature.jpg" {alt} />
-{/if}

src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { navigating } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { browseSettings } from '$lib/content/contentApi';
 
@@ -8,13 +9,16 @@
 
 	const doSearch = (e: any) => {
 		if (e.detail.query) {
-			goto('/search?q=' + e.detail.query, { replaceState: true, keepFocus: true });
+			goto('/search?q=' + e.detail.query, { replaceState: true, keepFocus: true } );
 		} else {
 			goto('/', { replaceState: true, keepFocus: true });
 		}
 	};
 
 	let { data, children } = $props();
+
+	let loading = $state(true);
+	navigating.subscribe((x) => (loading = x != null));
 </script>
 
 <svelte:head>
@@ -43,6 +47,8 @@
 	</Footer>
 </Base>
 
+<NavigationLoading {loading}/>
+
 <style lang="scss">
 	// Responsive embeds
 	:global(.fluid-width-video-wrapper) {

src/routes/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { browser } from '$app/environment';
 	import dayjs from 'dayjs';
 
@@ -9,18 +7,16 @@
 	import { onMount } from 'svelte';
 	import IndexSeo from '$lib/components/SEO/IndexSEO.svelte';
 	import { browsePost } from '$lib/content/contentApi';
+	import type { PostsOrPages } from '@tryghost/content-api';
+
 	let { data } = $props();
-	let { posts } = $state(data);
+	let posts: PostsOrPages = $state(data.posts);
 
 	let newPosts: any[] = $state([]);
-	let page = 1;
+	let pageNum = 1;
-	run(() => {
-		posts = [...posts, ...newPosts];
-	});
-
 	async function loadPage() {
-		const posts = await browsePost(page);
+		const loadedPosts = await browsePost(pageNum);
-		newPosts = posts;
+		posts =  [...posts, ...loadedPosts];
 	}
 
 	let footer: HTMLElement = $state();
@@ -30,7 +26,7 @@
 			const handleIntersect: IntersectionObserverCallback = (entries, observer) => {
 				const first = entries[0];
 				if (first.isIntersecting) {
-					page++;
+					pageNum++;
 					loadPage();
 				}
 			};

src/routes/[tag]/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { Hero, PostCard, Index, TagHeader, Post, Container } from '@damillora/plachta';
 
 	import { browsePostWithTag, readTag } from '$lib/content/contentApi';
@@ -9,19 +7,15 @@
 	import { browser } from '$app/environment';
 	import dayjs from 'dayjs';
 	import TagSeo from '$lib/components/SEO/TagSEO.svelte';
+	import type { PostsOrPages } from '@tryghost/content-api';
 
 	let { data } = $props();
-	let { posts } = $state(data);
+	let posts: PostsOrPages = $state(data.posts);
-
+	let pageNum = 1;
-	let newPosts: any[] = $state([]);
-	let page = 1;
-	run(() => {
-		posts = [...posts, ...newPosts];
-	});
 
 	async function loadPage() {
-		const posts = await browsePostWithTag(data.tag.slug, page);
+		const loadedPosts = await browsePostWithTag(data.tag.slug, pageNum);
-		newPosts = posts;
+		posts = [...posts, ...loadedPosts]
 	}
 
 	let footer: HTMLElement = $state();
@@ -31,7 +25,7 @@
 			const handleIntersect: IntersectionObserverCallback = (entries, observer) => {
 				const first = entries[0];
 				if (first.isIntersecting) {
-					page++;
+					pageNum++;
 					loadPage();
 				}
 			};

src/routes/[tag]/[slug]/+page.svelte

@@ -52,9 +52,6 @@
 
 				<br />
 			</GhostStyle>
-			{#snippet comments()}
-						<svelte:fragment  />
-					{/snippet}
 		</PostMain>
 		<PostNavigator prev_post={data.prevPost} next_post={data.nextPost} />
 	</Post>

src/routes/author/[author]/+page.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { Hero, PostCard, Index, Post, AuthorHeader, Container } from '@damillora/plachta';
 
 	import type { Load } from '@sveltejs/kit';
 	import { browsePostWithAuthor, readAuthor } from '$lib/content/contentApi';
-	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import dayjs from 'dayjs';
 	import AuthorSeo from '$lib/components/SEO/AuthorSEO.svelte';
+	import type { PostsOrPages } from '@tryghost/content-api';
+	import { onMount } from 'svelte';
 
 
 	interface Props {
@@ -16,17 +15,13 @@
 		data: any;
 	}
 
-	let { author, data }: Props = $props();
+	let { data }: Props = $props();
-	let { posts } = $state(data);
+	let posts: PostsOrPages = $state(data.posts);
-	let newPosts: any[] = $state([]);
+	let pageNum = 1;
-	let page = 1;
-	run(() => {
-		posts = [...posts, ...newPosts];
-	});
 
 	async function loadPage() {
-		const posts = await browsePostWithAuthor(data.author.slug, page);
+		const loadedPosts = await browsePostWithAuthor(data.author.slug, pageNum);
-		newPosts = posts;
+		posts = [...posts, ...loadedPosts]
 	}
 
 	let footer: HTMLElement = $state();
@@ -36,7 +31,7 @@
 			const handleIntersect: IntersectionObserverCallback = (entries, observer) => {
 				const first = entries[0];
 				if (first.isIntersecting) {
-					page++;
+					pageNum++;
 					loadPage();
 				}
 			};

src/routes/search/+page.svelte

@@ -1,27 +1,40 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
+	import { page } from '$app/stores';
-
 	import { browser } from '$app/environment';
-	import dayjs from 'dayjs';
 
 	import { Container, Hero, Index, SearchCard } from '@damillora/plachta';
 
 	import { onMount } from 'svelte';
 	import { search } from '$lib/content/searchApi';
-	import type { Load } from '@sveltejs/kit';
+	import { afterNavigate } from '$app/navigation';
+
 	let { data } = $props();
 	let posts: any[] = $state([]);
+	let url = $derived($page.url);
+	let pageNum = $state(url.searchParams.get('page') ?? 1);
 
-	let newPosts: any[] = $state([]);
+	async function loadPage(firstLoad: boolean) {
-	let page = 1;
+		if (firstLoad) {
-	run(() => {
+			// let url = $page.url;
-		posts = [...data.posts, ...newPosts];
+			let q = url.searchParams.get('q') ?? '';
-	});
 
-	async function loadPage() {
+			const loadedPosts = await search(q, pageNum);
-		const posts = await search(data.query, page);
+			if(loadedPosts.result)
+			{	
+				posts = [...loadedPosts.result]
+			}
+			return;
+		}
+		// let url = $page.url;
+		let q = url.searchParams.get('q') ?? '';
 
-		newPosts = posts.result ?? [];
+		const loadedPosts = await search(q, pageNum + 1);
+
+		if(loadedPosts.result)
+		{	
+			pageNum++;
+			posts = [...posts, ...loadedPosts.result]
+		}
 	}
 
 	let footer: HTMLElement = $state();
@@ -31,8 +44,7 @@
 			const handleIntersect: IntersectionObserverCallback = (entries, observer) => {
 				const first = entries[0];
 				if (first.isIntersecting) {
-					page++;
+					loadPage(false);
-					loadPage();
 				}
 			};
 			const options = { threshold: 0.125, rootMargin: '-100% 0% 100%' };
@@ -40,6 +52,8 @@
 			observer.observe(footer);
 		}
 	});
+
+	afterNavigate(() => loadPage(true));
 </script>
 
 <svelte:head>

src/routes/search/+page.ts

@@ -1,21 +0,0 @@
-import type { PageLoad } from "./$types";
-
-export const load: PageLoad = async ({ url, fetch }) => {
-	const yurikoEndpoint = 'https://search.blog.nanao.moe';
-	const apiEndpoint = '/api/article/search?';
-	const queryString = 'q=';
-	const pageString = '&page=';
-
-	const q = url.searchParams.get('q') ?? '';
-	const page = url.searchParams.get('page') ?? 1;
-
-	const search = await fetch(
-		`${yurikoEndpoint}${apiEndpoint}${queryString}${q}${pageString}${page}`
-	);
-	const result = await search.json();
-
-	return {
-		query: q,
-		posts: result.result
-	};
-};