Conversion from svelte params to pagination query to search params

src/routes/__layout.svelte

@@ -3,11 +3,11 @@
   import type { LoadInput, LoadOutput } from '@sveltejs/kit/types/page'
 
   export async function load({ fetch, url }: LoadInput): Promise<LoadOutput> {
-    const blogPostsResponse = await fetch(`/blog/articles`)
+    const blogPostsResponse = await fetch(`/blog/articles?limit=5`)
     const blogPostsContent = await blogPostsResponse.json()
     return {
       props: {
-        latestPosts: take(5, blogPostsContent.posts),
+        latestPosts: blogPostsContent.posts.items,
         // TODO Check if not bugged FIXME
         segment: '',
       },

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

@@ -1,10 +1,15 @@
 <script lang="ts" context="module">
+  import { getPaginationSearchParams } from '$lib/pagination/searchParams'
   /**
    * @type {import('@sveltejs/kit').Load}
    */
-  export async function load({ fetch }) {
-    const articleResponse = await fetch(`/blog/articles`)
-      .then((r) => r.json())
+  export async function load({ fetch, params }) {
+    console.log('params', params)
+    const searchParams = getPaginationSearchParams(7, params.params)
+    console.log('searchpprsm', searchParams)
+    const articleResponse = await fetch(
+      `/blog/articles?${searchParams.toString()}`
+    ).then((r) => r.json())
 
     return { props: { posts: articleResponse.posts } }
   }
@@ -14,8 +19,9 @@
   import ArticleFooter from '../../components/blog/ArticleFooter.svelte'
   import { postListClass, seeAllClass } from './index.css'
   import type { PostContent } from './_content'
+  import type { PaginationResult } from '$lib/pagination/pagination'
 
-  export let posts: PostContent[]
+  export let posts: PaginationResult<PostContent>
   export let tagQuery: string
 </script>
 
@@ -23,7 +29,7 @@
   <title>My blog @michalvankodev</title>
 </svelte:head>
 
-{#if posts.length === 0}
+{#if posts.items.length === 0}
   <p class="no-posts">You've found void in the space.</p>
 {:else}
   <h1>
@@ -40,7 +46,7 @@
   {/if}
 {/if}
 <ul class="post-list {postListClass}">
-  {#each posts as post}
+  {#each posts.items as post}
     <li>
       <article>
         <header>

src/routes/blog/_content.ts

@@ -1,11 +1,18 @@
 import { readdir, readFile } from 'fs'
 import { promisify } from 'util'
 import { basename } from 'path'
-import { pipe, partial, prop, sortBy, reverse, filter } from 'ramda'
+import { pipe, prop, sortBy, reverse, filter } from 'ramda'
 import fm from 'front-matter'
 import marked from 'marked'
+import {
+  filterAndCount,
+  type PaginationQuery,
+} from '$lib/pagination/pagination'
 
 const { NODE_ENV } = process.env
+// TODO remove ramda and migrate to ts-belt
+// TODO Pagination component for routing
+// TODO Tag filtering visualization
 
 export interface PostAttributes {
   layout: string
@@ -22,7 +29,7 @@ export interface PostContent extends PostAttributes {
   published: boolean
 }
 
-export async function getBlogListing(tag?: string) {
+export async function getBlogListing(paginationQuery: PaginationQuery) {
   const files = await promisify(readdir)(`_posts/blog/`, 'utf-8')
   const filteredFiles = filterDevelopmentFiles(files)
 
@@ -48,17 +55,11 @@ export async function getBlogListing(tag?: string) {
       }
     })
   )
-  const filteredContents = pipe<
-    PostContent[],
-    PostContent[],
-    PostContent[],
-    PostContent[],
-    PostContent[]
-  >(
-    sortBy(prop('date')),
-    reverse,
+  const filteredContents = pipe(
+    sortBy<PostContent>(prop('date')),
+    (items) => reverse(items),
     filter<typeof contents[0]>((article) => article.published),
-    partial(filterByTag, [tag])
+    filterAndCount(paginationQuery)
   )(contents)
 
   return filteredContents
@@ -69,9 +70,3 @@ function filterDevelopmentFiles(files: string[]) {
     ? files
     : files.filter((file) => !file.startsWith('dev-'))
 }
-
-function filterByTag(tag: string | undefined, contents: PostContent[]) {
-  return tag
-    ? contents.filter((content) => content.tags.includes(tag))
-    : contents
-}

src/routes/blog/articles.ts

@@ -1,11 +1,10 @@
+import { getPaginationQueryFromSearchParams } from '$lib/pagination/searchParams'
 import { getBlogListing } from './_content'
 
 export async function get({ url: { searchParams } }) {
-  console.log('bloglistingparams', searchParams)
+  const paginationQuery = getPaginationQueryFromSearchParams(searchParams)
+  const filteredContents = await getBlogListing(paginationQuery)
 
-  //Regexp for getting an optional tag and a page from the params
-  const tag = undefined
-  const filteredContents = await getBlogListing(tag)
   return {
     status: 200,
     body: {