feat: upgrade sveltekit

package.json

@@ -14,40 +14,40 @@
 		"format": "prettier --write --plugin-search-dir=. ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "next",
-		"@sveltejs/adapter-node": "^1.0.0-next.83",
-		"@sveltejs/kit": "next",
+		"@sveltejs/adapter-auto": "^1.0.0",
+		"@sveltejs/adapter-node": "^1.0.0",
+		"@sveltejs/kit": "^1.0.1",
 		"@types/fitvids": "^2.1.1",
 		"@types/tryghost__content-api": "^1.3.11",
-		"@typescript-eslint/eslint-plugin": "^5.30.7",
-		"@typescript-eslint/parser": "^5.30.7",
-		"dayjs": "^1.11.4",
-		"eslint": "^8.20.0",
+		"@typescript-eslint/eslint-plugin": "^5.46.1",
+		"@typescript-eslint/parser": "^5.46.1",
+		"dayjs": "^1.11.7",
+		"eslint": "^8.30.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"hast-util-from-selector": "^2.0.0",
-		"prettier": "^2.7.1",
-		"prettier-plugin-svelte": "^2.7.0",
+		"prettier": "^2.8.1",
+		"prettier-plugin-svelte": "^2.9.0",
 		"rehype-parse": "^8.0.4",
 		"rehype-stringify": "^9.0.3",
-		"sass": "^1.54.0",
-		"svelte": "^3.49.0",
-		"svelte-check": "^2.8.0",
+		"sass": "^1.57.0",
+		"svelte": "^3.55.0",
+		"svelte-check": "^2.10.2",
 		"svelte-infinite-scroll": "^2.0.1",
 		"svelte-preprocess": "^4.10.7",
-		"svelte2tsx": "^0.5.12",
-		"tslib": "^2.4.0",
-		"typescript": "^4.7.4",
+		"svelte2tsx": "^0.5.22",
+		"tslib": "^2.4.1",
+		"typescript": "^4.9.4",
 		"unified": "^10.1.2",
-		"unist-util-visit": "^4.1.0",
-		"vite": "^3.0.3"
+		"unist-util-visit": "^4.1.1",
+		"vite": "^4.0.1"
 	},
 	"type": "module",
 	"dependencies": {
-		"@damillora/plachta": "^1.8.3",
-		"@tryghost/content-api": "^1.11.0",
+		"@damillora/plachta": "^2.0.2",
+		"@tryghost/content-api": "^1.11.5",
 		"fitvids": "^2.1.1",
-		"svelte-material-icons": "^2.0.2",
+		"svelte-material-icons": "^2.0.4",
 		"svelte-themes": "^0.0.98"
 	}
 }

src/routes/+layout.svelte

@@ -1,16 +1,3 @@
-<script lang="ts" context="module">
-	export const load: Load = async () => {
-		const settings = await browseSettings();
-
-		return {
-			props: {
-				header: settings.codeinjection_head,
-				footer: settings.codeinjection_foot
-			}
-		};
-	};
-</script>
-
 <script lang="ts">
 	import { navigating } from '$app/stores';
 	import { goto } from '$app/navigation';
@@ -33,14 +20,14 @@
 		}
 	};
 
-	export let header = '';
-	export let footer = '';
+	export let data;
+
 	let loading = true;
 	navigating.subscribe((x) => (loading = x != null));
 </script>
 
 <svelte:head>
-	{@html header}
+	{@html data.header}
 </svelte:head>
 <Base>
 	<Header>
@@ -55,9 +42,9 @@
 	</Header>
 
 	<slot />
-	{@html footer}
+	{@html data.footer}
 	<Footer>
-		<p>Copyright (c) 2021 Damillora</p>
+		<p>Copyright (c) 2023 Damillora</p>
 	</Footer>
 </Base>
 

src/routes/+layout.ts

@@ -0,0 +1,11 @@
+import type { LayoutLoad } from "./$types";
+import { browseSettings } from "$lib/content/contentApi";
+
+export const load: LayoutLoad = async () => {
+	const settings = await browseSettings();
+
+	return {
+		header: settings.codeinjection_head,
+		footer: settings.codeinjection_foot
+	};
+};

src/routes/+page.svelte

@@ -1,19 +1,7 @@
-<script lang="ts" context="module">
-	import { browsePost } from '$lib/content/contentApi';
 
-	export async function load() {
-		const posts = await browsePost();
-
-		return {
-			props: {
-				posts: posts
-			}
-		};
-	}
-</script>
 
 <script lang="ts">
-	import { browser } from '$app/env';
+	import { browser } from '$app/environment';
 	import dayjs from 'dayjs';
 
 	import Container from '@damillora/plachta/components/Container/Container.svelte';
@@ -22,8 +10,10 @@
 	import PostCard from '@damillora/plachta/components/PostCard/PostCard.svelte';
 	import { onMount } from 'svelte';
 	import IndexSeo from '$lib/components/SEO/IndexSEO.svelte';
+	import {browsePost} from '$lib/content/contentApi';
+	export let data;
+	let { posts } = data;
 
-	export let posts: any[] = [];
 	let newPosts: any[] = [];
 	let page = 1;
 	$: posts = [...posts, ...newPosts];

src/routes/+page.ts

@@ -0,0 +1,9 @@
+import { browsePost } from '$lib/content/contentApi';
+
+export async function load() {
+	const posts = await browsePost();
+
+	return {
+		posts: posts
+	};
+}

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

@@ -1,25 +1,3 @@
-<script lang="ts" context="module">
-	export const load: Load = async ({ params }) => {
-		const tagSlug = params.tag;
-			const tagObj = await readTag(tagSlug);
-		if (!tagObj) {
-			return {
-				status: 404,
-				error: new Error('Tag not found')
-			};
-		}
-		
-			const posts = await browsePostWithTag(tagSlug);
-
-			return {
-				props: {
-					tag: tagObj,
-					posts: posts
-				}
-			};
-	};
-</script>
-
 <script lang="ts">
 	import Hero from '@damillora/plachta/components/Hero/Hero.svelte';
 	import PostCard from '@damillora/plachta/components/PostCard/PostCard.svelte';
@@ -30,18 +8,19 @@
 	import { browsePostWithTag, readTag } from '$lib/content/contentApi';
 	import type { Load } from '@sveltejs/kit';
 	import { onMount } from 'svelte';
-	import { browser } from '$app/env';
+	import { browser } from '$app/environment';
 	import dayjs from 'dayjs';
 	import TagSeo from '$lib/components/SEO/TagSEO.svelte';
 
-	export let tag: any;
-	export let posts: any[];
+	export let data;
+	let { posts } = data;
+
 	let newPosts: any[] = [];
 	let page = 1;
 	$: posts = [...posts, ...newPosts];
 
 	async function loadPage() {
-		const posts = await browsePostWithTag(tag.slug, page);
+		const posts = await browsePostWithTag(data.tag.slug, page);
 		newPosts = posts;
 	}
 
@@ -64,16 +43,16 @@
 </script>
 
 <svelte:head>
-	<title>Tag: {tag.name} - Damillora's Virtual Memoir</title>
+	<title>Tag: {data.tag.name} - Damillora's Virtual Memoir</title>
 </svelte:head>
 
-<TagSeo {tag} />
+<TagSeo tag={data.tag} />
 
-<Hero background={tag.feature_image ?? `/images/default-feature.jpg`} />
+<Hero background={data.tag.feature_image ?? `/images/default-feature.jpg`} />
 
 <Container>
 	<Post>
-		<TagHeader accent_color={tag.accent_color} name={tag.name} description={tag.description} />
+		<TagHeader accent_color={data.tag.accent_color} name={data.tag.name} description={data.tag.description} />
 	</Post>
 
 	<Index>

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

@@ -0,0 +1,18 @@
+import { error } from '@sveltejs/kit';
+import { readTag, browsePostWithTag } from '$lib/content/contentApi';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+	const tagSlug = params.tag;
+		const tagObj = await readTag(tagSlug);
+	if (!tagObj) {
+		throw error(404, 'Tag not found');
+	}
+	
+		const posts = await browsePostWithTag(tagSlug);
+
+		return {
+			tag: tagObj,
+			posts: posts
+		};
+};

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

@@ -1,29 +1,3 @@
-<script lang="ts" context="module">
-	export const load: Load = async ({ params }) => {
-		const postSlug = params.slug;
-		const post = await readPost(postSlug);
-		if (!post) {
-			return {
-				status: 404,
-				error: new Error('Post not found')
-			};
-		}
-		const newHtml = await processPostHtml(post.html);
-		post.html = newHtml;
-		const prevPost = await browsePrevPost(post);
-		const nextPost = await browseNextPost(post);
-		const relatedPost = await browseRelatedPost(post.primary_tag?.slug, post.id);
-		return {
-			props: {
-				post: post,
-				prevPost: prevPost,
-				nextPost: nextPost,
-				relatedPost: relatedPost
-			}
-		};
-	};
-</script>
-
 <script lang="ts">
 	import dayjs from 'dayjs';
 
@@ -45,52 +19,49 @@
 		browseRelatedPost,
 		readPost
 	} from '$lib/content/contentApi';
-	import { browser } from '$app/env';
+	import { browser } from '$app/environment';
 	import PostSeo from '$lib/components/SEO/PostSEO.svelte';
 	import { onMount } from 'svelte';
 	import { afterNavigate } from '$app/navigation';
 	import ResponsiveHero from '$lib/components/ResponsiveHero.svelte';
 
-	export let post: any;
-	export let prevPost: any;
-	export let nextPost: any;
-	export let relatedPost: any[];
+	export let data;
 </script>
 
 <svelte:head>
-	<title>{post.title}</title>
+	<title>{data.post.title}</title>
 </svelte:head>
 
-<PostSeo {post} />
+<PostSeo post={data.post} />
 
-<ResponsiveHero background={post.feature_image} />
+<ResponsiveHero background={data.post.feature_image} />
 
 <Container>
 	<Post>
 		<PostHeader
-			title={post.title}
-			authors={post.authors}
-			primary_tag={post.primary_tag}
-			date={dayjs(post.published_at).format('DD MMM YYYY')}
-			reading_time={`${post.reading_time} min read`}
+			title={data.post.title}
+			authors={data.post.authors}
+			primary_tag={data.post.primary_tag}
+			date={dayjs(data.post.published_at).format('DD MMM YYYY')}
+			reading_time={`${data.post.reading_time} min read`}
 		/>
 		<PostMain>
 			<GhostStyle>
-				{@html post.html}
+				{@html data.post.html}
 				
 				<br/>
 			</GhostStyle>
 			<svelte:fragment slot="comments" />
 		</PostMain>
-		<PostNavigator prev_post={prevPost} next_post={nextPost} />
+		<PostNavigator prev_post={data.prevPost} next_post={data.nextPost} />
 	</Post>
 
 	<PostRelated
-		name={post.primary_tag.name}
-		url={post.primary_tag.utl}
-		accent_color={post.primary_tag.accent_color}
+		name={data.post.primary_tag.name}
+		url={data.post.primary_tag.url}
+		accent_color={data.post.primary_tag.accent_color}
 	>
-		{#each relatedPost as post}
+		{#each data.relatedPost as post}
 			<PostCard
 				title={post.title}
 				authors={post.authors}

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

@@ -0,0 +1,23 @@
+import { browseNextPost, browsePrevPost, browseRelatedPost, readPost } from '$lib/content/contentApi';
+import { processPostHtml } from '$lib/content/postProcessor';
+import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+	const postSlug = params.slug;
+	const post = await readPost(postSlug);
+	if (!post) {
+		throw error(404, 'Post not found');
+	}
+	const newHtml = await processPostHtml(post.html);
+	post.html = newHtml;
+	const prevPost = await browsePrevPost(post);
+	const nextPost = await browseNextPost(post);
+	const relatedPost = await browseRelatedPost(post.primary_tag?.slug, post.id);
+	return {
+		post: post,
+		prevPost: prevPost,
+		nextPost: nextPost,
+		relatedPost: relatedPost
+	};
+};

src/routes/[tag]/[slug]/amp/+server.ts

@@ -1,11 +1,11 @@
 import type { RequestHandler } from "@sveltejs/kit";
 
 export const GET: RequestHandler = async ({ params }) => {
-	return {
+	return new Response(undefined, {
 		status: 301,
 		headers: {
 			"Location": `/${params.tag}/${params.slug}`
-		},
-	};
+		}
+	});
 };
 

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

@@ -1,26 +1,3 @@
-<script lang="ts" context="module">
-	export const load: Load = async ({ params }) => {
-		const authorSlug = params.author;
-		const authorObj = await readAuthor(authorSlug);
-
-		if (!authorObj) {
-			return {
-				status: 404,
-				error: new Error('Author not found')
-			};
-		}
-		
-		const posts = await browsePostWithAuthor(authorSlug);
-
-		return {
-			props: {
-				author: authorObj,
-				posts: posts
-			}
-		};
-	};
-</script>
-
 <script lang="ts">
 	import PostCard from '@damillora/plachta/components/PostCard/PostCard.svelte';
 	import Index from '@damillora/plachta/components/PageTypes/Index.svelte';
@@ -30,20 +7,21 @@
 	import type { Load } from '@sveltejs/kit';
 	import { browsePostWithAuthor, readAuthor } from '$lib/content/contentApi';
 	import { onMount } from 'svelte';
-	import { browser } from '$app/env';
+	import { browser } from '$app/environment';
 	import dayjs from 'dayjs';
 	import AuthorSeo from '$lib/components/SEO/AuthorSEO.svelte';
 	import Hero from '@damillora/plachta/components/Hero/Hero.svelte';
 
 	export let author: any;
 
-	export let posts: any[];
+    export let data;
+    let { posts } = data;
 	let newPosts: any[] = [];
 	let page = 1;
 	$: posts = [...posts, ...newPosts];
 
 	async function loadPage() {
-		const posts = await browsePostWithAuthor(author.slug, page);
+		const posts = await browsePostWithAuthor(data.author.slug, page);
 		newPosts = posts;
 	}
 
@@ -66,22 +44,22 @@
 </script>
 
 <svelte:head>
-	<title>Author: {author.name} - Damillora's Virtual Memoir</title>
+	<title>Author: {data.author.name} - Damillora's Virtual Memoir</title>
 </svelte:head>
 
-<Hero background={author.cover_image ?? `/images/default-feature.jpg`} />
+<Hero background={data.author.cover_image ?? `/images/default-feature.jpg`} />
 
-<AuthorSeo {author} />
+<AuthorSeo author={data.author} />
 
 <Container>
 	<Post>
 		<AuthorHeader
-			profile_image={author.profile_image}
-			name={author.name}
-			bio={author.bio}
-			website={author.website}
-			facebook={author.facebook}
-			twitter={author.twitter}
+			profile_image={data.author.profile_image}
+			name={data.author.name}
+			bio={data.author.bio}
+			website={data.author.website}
+			facebook={data.author.facebook}
+			twitter={data.author.twitter}
 		/>
 	</Post>
 

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

@@ -0,0 +1,19 @@
+import { readAuthor, browsePostWithAuthor } from '$lib/content/contentApi';
+import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+	const authorSlug = params.author;
+	const authorObj = await readAuthor(authorSlug);
+
+	if (!authorObj) {
+		throw error(404, 'Author not found');
+	}
+	
+	const posts = await browsePostWithAuthor(authorSlug);
+
+	return {
+		author: authorObj,
+		posts: posts
+	};
+};

src/routes/search/+page.svelte

@@ -1,29 +1,5 @@
-<script lang="ts" context="module">
-	export const load: Load = 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 {
-			props: {
-				query: q,
-				posts: result.result
-			}
-		};
-	};
-</script>
-
 <script lang="ts">
-	import { browser } from '$app/env';
+	import { browser } from '$app/environment';
 	import dayjs from 'dayjs';
 
 	import Container from '@damillora/plachta/components/Container/Container.svelte';
@@ -33,16 +9,17 @@
 	import { onMount } from 'svelte';
 	import { search } from '$lib/content/searchApi';
 	import type { Load } from '@sveltejs/kit';
-	export let query = '';
-	export let posts: any[] = [];
+	export let data;
+	let posts: any[] = [];
+
 	let newPosts: any[] = [];
 	let page = 1;
-	$: posts = [...posts, ...newPosts];
+	$: posts = [...data.posts, ...newPosts];
 
 	async function loadPage() {
-		const posts = await search(query, page);
+		const posts = await search(data.query, page);
 
-		newPosts = posts.result;
+		newPosts = posts.result ?? [];
 	}
 
 	let footer: HTMLElement;

src/routes/search/+page.ts

@@ -0,0 +1,21 @@
+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
+	};
+};

src/routes/sitemap.xml/+server.ts

@@ -1,3 +1,4 @@
+import { json } from '@sveltejs/kit';
 import { browseAllPost } from "$lib/content/contentApi";
 
 export async function GET() {
@@ -28,12 +29,16 @@ export async function GET() {
         return xml;
 
     }
-    const xml =  createSitemap();
-    return {
-        status: 200,
+    const xmlSitemap =  createSitemap();
+    // Suggestion (check for correctness before using):
+    // return json(xml, {
+    //     headers: {
+    //         'access-control-allow-origin': '*'
+    //     }
+    // });
+    return new Response(xmlSitemap, {
         headers: {
             'access-control-allow-origin': '*'
         },
-        body: xml,
-    };
+    });
 }