Make SEO reactive and remove console logs, add types for returns.

src/lib/components/SEO.svelte

@@ -9,12 +9,12 @@
     siteUrl,
   };
 
-	export let title: string;
+	export let title = defaultMetadata.defaultTitle;
 	export let description = defaultMetadata.defaultDescription;
 	export let image = defaultMetadata.defaultImage;
 	export let location: string = '';
 
-  const seo = {
+  $: seo = {
     title,
     description,
     image: `${siteUrl}${image}`,

src/routes/articles/[page]/+page.server.ts

@@ -1,22 +1,19 @@
 import type { PageServerLoad } from './$types';
 import type { Article } from '$root/lib/types/article';
 
+export type ArticlePageLoad = {
+	articles: Article[];
+	currentPage: number;
+	totalPages: number;
+	limit: number;
+	totalArticles: number;
+};
+
 export const load: PageServerLoad = async ({ fetch, params }) => {
 	const { page } = params;
 	const resp = await fetch(`/api/articles?page=${page}`);
-	const {
+	const { articles, currentPage, totalPages, limit, totalArticles }: ArticlePageLoad =
-		articles,
+		await resp.json();
-		currentPage,
-		totalPages,
-		limit,
-		totalArticles
-	}: {
-		articles: Article[];
-		currentPage: number;
-		totalPages: number;
-		limit: number;
-		totalArticles: number;
-	} = await resp.json();
 	return {
 		articles,
 		currentPage,

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

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { page } from "$app/stores";
-	import { articleStore } from "$lib/stores/articleStore";
-	import { ArticleTag } from "$lib/types/articleTag";
 	import Pagination from "$lib/components/pagination/index.svelte";
 	import SEO from "$root/lib/components/SEO.svelte";
 	import type { Article } from "$root/lib/types/article";
@@ -9,15 +6,14 @@
 
 	export let data: PageData;
 	let articles: Article[];
+	let currentPage: number;
+	let totalPages: number;
+	let totalArticles: number;
+	let limit: number;
 	$: ({ articles, currentPage, totalPages, totalArticles, limit } = data);
-	console.log(`Article +page currentPage: ${currentPage}`);
-	console.log({ articles, currentPage, totalPages, totalArticles, limit });
 </script>
 
-<svelte:head>
+<SEO title={`Tech Articles - Page ${currentPage}`} />
-	<title>{`Tech Articles - Page ${currentPage} | Bradley Shellnut`}</title>
-	<meta name="og:site_name" content={`Tech Articles - Page ${currentPage}`} />
-</svelte:head>
 
 <div class="pageStyles">
 	<h1 style="margin-bottom: 2rem">Favorite Tech Articles</h1>
@@ -26,7 +22,7 @@
 		pageSize={limit}
 		totalCount={totalArticles}
 		currentPage={currentPage || 1}
-		skip={page}
+		skip={currentPage}
 		base="/articles"
 	/>
 	<div class="articlesStyles">
@@ -61,7 +57,7 @@
 		pageSize={limit}
 		totalCount={totalPages}
 		currentPage={currentPage || 1}
-		skip={page}
+		skip={currentPage}
 		base="/articles"
 	/>
 </div>