Style paginator component

src/routes/blog/[...params].svelte

@@ -1,28 +1,47 @@
 <script lang="ts" context="module">
-  import { getPaginationSearchParams } from '$lib/pagination/searchParams'
+  import {
+    getPaginationSearchParams,
+    parseParams,
+  } from '$lib/pagination/searchParams'
+
+  const pageSize = 7
+
   /**
    * @type {import('@sveltejs/kit').Load}
    */
   export async function load({ fetch, params }) {
     console.log('params', params)
-    const searchParams = getPaginationSearchParams(7, params.params)
+    const { page = 1, ...filters } = parseParams(params.params)
+    const searchParams = getPaginationSearchParams({ pageSize, page, filters })
     console.log('searchpprsm', searchParams)
     const articleResponse = await fetch(
       `/blog/articles?${searchParams.toString()}`
     ).then((r) => r.json())
 
-    return { props: { posts: articleResponse.posts } }
+    return {
+      props: {
+        posts: articleResponse.posts,
+        page: Number(page),
+        pageSize,
+        filters,
+      },
+    }
   }
 </script>
 
 <script lang="ts">
   import ArticleFooter from '../../components/blog/ArticleFooter.svelte'
+  import Paginator from '../../components/paginator/Paginator.svelte'
   import { postListClass, seeAllClass } from './index.css'
   import type { PostContent } from './_content'
   import type { PaginationResult } from '$lib/pagination/pagination'
 
   export let posts: PaginationResult<PostContent>
-  export let tagQuery: string
+  export let filters: Record<string, string>
+  export let page: number
+  export let pageSize: number
+  let totalPages = Math.ceil(posts.totalCount / pageSize)
+  // TODO display filter name
 </script>
 
 <svelte:head>
@@ -33,18 +52,28 @@
   <p class="no-posts">You've found void in the space.</p>
 {:else}
   <h1>
-    Recent
-    {#if tagQuery}
-      <em>{tagQuery}</em>
+    {#if filters.tags}
+      <em>{filters.tags}</em>
+    {:else}
+      Blog
     {/if}
     posts
   </h1>
-  {#if tagQuery}
+  {#if filters.tags}
     <div class={seeAllClass}>
       <a href="/blog">See all posts</a>
     </div>
   {/if}
 {/if}
+<header>
+  <Paginator
+    href="blog"
+    {page}
+    {pageSize}
+    {filters}
+    totalCount={posts.totalCount}
+  />
+</header>
 <ul class="post-list {postListClass}">
   {#each posts.items as post}
     <li>
@@ -60,3 +89,12 @@
     </li>
   {/each}
 </ul>
+<footer>
+  <Paginator
+    href="blog"
+    {page}
+    {pageSize}
+    {filters}
+    totalCount={posts.totalCount}
+  />
+</footer>

src/routes/feed/_feed.ts

@@ -24,8 +24,8 @@ export async function getFeed() {
     },
   })
 
-  const blogListing = await getBlogListing()
-  blogListing.forEach((post) => {
+  const blogListing = await getBlogListing({})
+  blogListing.items.forEach((post) => {
     feed.addItem({
       title: post.title,
       id: `https://michalvanko.dev/blog/${post.slug}`,