Making pagination component variables reactive.

src/lib/components/SEO.svelte

@@ -9,7 +9,7 @@
     siteUrl,
   };
 
-	export let title = defaultMetadata.defaultTitle;
+	export let title: string;
 	export let description = defaultMetadata.defaultDescription;
 	export let image = defaultMetadata.defaultImage;
 	export let location: string = '';
@@ -23,7 +23,7 @@
 </script>
 
 <svelte:head>
-	<title>{`${seo.title} - ${defaultMetadata.defaultTitle}`}</title>
+	<title>{`${seo.title} | ${defaultMetadata.defaultTitle}`}</title>
 	<link rel="icon" type="image/gif" href="/b_shell_nut_favicon.gif" />
 	<meta name="description" content={seo.description} />
 	<meta name="og:type" content="website" />

src/lib/components/footer/index.svelte

@@ -16,7 +16,7 @@
 		<a class:active={$page.url.pathname === '/portfolio'} href="/portfolio">Portfolio</a>
 		<a class:active={$page.url.pathname === '/uses'} href="/uses">Uses</a>
 		<a class:active={$page.url.pathname === '/privacy'} href="/privacy">Privacy</a>
-		<a class:active={$page.url.pathname === '/articles'} href="/articles">Favorite Articles</a>
+		<a class:active={$page.url.pathname === '/articles/1'} href="/articles">Favorite Articles</a>
 	</nav>
 	<!-- <p className="center"> -->
 	<p>

src/lib/components/pagination/index.svelte

@@ -7,18 +7,11 @@
   export let base: string;
 
   // make some variables
-  console.log(`Total count: ${totalCount}`);
-  console.log(`Page Size: ${pageSize}`);
-  const totalPages = Math.ceil(totalCount / pageSize);
-  console.log(`Total Pages: ${totalPages}`)
-  console.log(`Current Page: ${currentPage} and type: ${typeof currentPage}`)
-  let prevPage = currentPage - 1;
-  console.log(`PrevPage: ${prevPage}`)
-  console.log(`Pagination current Page: ${currentPage}`)
-  let nextPage = currentPage + 1;
-  let hasNextPage = nextPage <= totalPages;
-  let hasPrevPage = prevPage >= 1;
-  console.log({ nextPage, hasNextPage, hasPrevPage })
+  $: totalPages = Math.ceil(totalCount / pageSize);
+  $: prevPage = currentPage - 1;
+  $: nextPage = currentPage + 1;
+  $: hasNextPage = nextPage <= totalPages;
+  $: hasPrevPage = prevPage >= 1;
 </script>
 
 <div class={`paginationStyles ${additionalClasses}`}>

src/routes/articles/+error.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-	import { page } from "$app/stores";
-	console.log(`error page ${JSON.stringify($page)}`)
-</script>
-
-{#if $page.status === 404}
-	<h1>Sorry page not found! 🤷🏼</h1>
-	<p>You just hit a route that doesn't exist.</p>
-{/if}
-
-{#if $page.status === 500}
-	<h1>Sorry an unexpected error occurred! 😿</h1>
-	<p>Please try again later. </p>
-{/if}

src/routes/articles/+page.svelte

@@ -0,0 +1 @@
+<h1>Articles</h1>

src/routes/articles/+page.ts

@@ -0,0 +1,6 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load = async () => {
+	throw redirect(302, '/articles/1');
+};

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

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

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

@@ -10,23 +10,14 @@
 	export let data: PageData;
 	let articles: Article[];
 	$: ({ articles, currentPage, totalPages, totalArticles, limit } = data);
-	// let currentPage: number;
-	// let perPage: number;
-	// let maxPages: number;
-	// $: ({ currentPage, perPage, maxPages } = $page?.data);
-	// console.log('Articles Page params', $page?.params);
-	// console.log('Articles Page', { currentPage, perPage, maxPages });
-	// console.log(`Page data: ${JSON.stringify(data)}`)
-	// console.log(`Article Page Path Slug ${$page.params.page}`);
-	// console.log(`Article Page Current Page: ${currentPage}`)
-	// $: start = (currentPage - 1) * perPage;
-	// $: skip = currentPage * perPage;
-	// console.log(`Article Store size: ${$articleStore.length}`);
-	
-	// $: articles = $articleStore.slice(start, start + perPage);
+	console.log(`Article +page currentPage: ${currentPage}`);
+	console.log({ articles, currentPage, totalPages, totalArticles, limit });
 </script>
 
-<SEO title={`Tech Articles - Page ${$page?.params?.page}`} />
+<svelte:head>
+	<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>

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

@@ -1,43 +0,0 @@
-import type { PageLoad } from './$types';
-import type { Article } from '$root/lib/types/article';
-
-export const load: PageLoad = async ({ fetch, params }) => {
-	const { page } = params;
-	const resp = await fetch(`/api/articles?page=${page}`);
-	const {
-		articles,
-		currentPage,
-		totalPages,
-		limit,
-		totalArticles
-	}: {
-		articles: Article[];
-		currentPage: number;
-		totalPages: number;
-		limit: number;
-		totalArticles: number;
-	} = await resp.json();
-	return {
-		articles,
-		currentPage,
-		totalPages,
-		limit,
-		totalArticles
-	};
-	// console.log(`Page: ${page}`);
-	// try {
-	// 	if (page && +page <= 5 && +page > 0) {
-	// 		return {
-	// 			currentPage: +page,
-	// 			perPage: parentData?.perPage,
-	// 			maxPages: parentData?.totalPages
-	// 		};
-	// 	} else {
-	// 		console.log('Page load error 404');
-	// 		throw error(404, 'Not found');
-	// 	}
-	// } catch (e) {
-	// 	console.error(e);
-	// 	throw error(500, 'Error');
-	// }
-};