Migrate to page endpoints

src/params/blogPage.ts

@@ -0,0 +1,5 @@
+/** @type {import('@sveltejs/kit').ParamMatcher} */
+export function match(param: string) {
+  console.log('parma', param)
+  return !['tags', 'page'].some((keyword) => param.startsWith(keyword))
+}

src/routes/__layout.svelte

@@ -2,17 +2,18 @@
   import { take } from 'ramda'
   import type { LoadInput, LoadOutput } from '@sveltejs/kit/types/page'
 
-  export function load({ fetch, page }: LoadInput): Promise<LoadOutput> {
-    return fetch(`/blog.json`)
-      .then((r) => r.json())
-      .then((posts) => {
-        return {
-          props: {
-            latestPosts: take(5, posts),
-            segment: page.path,
-          },
-        }
-      })
+  export async function load({ fetch, url }: LoadInput): Promise<LoadOutput> {
+    const blogPostsResponse = await fetch(`/blog`, {
+      headers: { accept: 'application/json' },
+    })
+    const blogPostsContent = await blogPostsResponse.json()
+    return {
+      props: {
+        latestPosts: take(5, blogPostsContent.posts),
+        // TODO Check if not bugged
+        segment: '',
+      },
+    }
   }
 </script>
 

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

@@ -1,34 +1,10 @@
-<script context="module" lang="ts">
-  /**
-   * @type {import('@sveltejs/kit').Load}
-   */
-  export function load({ fetch }) {
-    return fetch(`blog.json`)
-      .then((r) => r.json())
-      .then((posts) => {
-        return { props: { posts } }
-      })
-  }
-</script>
-
 <script lang="ts">
   import ArticleFooter from '../../components/blog/ArticleFooter.svelte'
   import { postListClass, seeAllClass } from './index.css'
   import type { PostContent } from './_content'
 
   export let posts: PostContent[]
-  export let displayedPosts: PostContent[]
   export let tagQuery: string
-
-  $: {
-    if (typeof window !== 'undefined') {
-      let params = new URLSearchParams(window.location.search)
-      tagQuery = params.get('tag')
-      displayedPosts = posts.filter((post) => post.tags.includes(tagQuery))
-    } else {
-      displayedPosts = posts
-    }
-  }
 </script>
 
 <svelte:head>
@@ -53,10 +29,6 @@
 {/if}
 <ul class="post-list {postListClass}">
   {#each posts as post}
-    <!-- we're using the non-standard `rel=prefetch` attribute to
-				tell Sapper to load the data for the page as soon as
-				the user hovers over the link or taps it, instead of
-				waiting for the 'click' event -->
     <li>
       <article>
         <header>

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

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

src/routes/blog/[slug=blogPage].svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import ArticleFooter from '../../components/blog/ArticleFooter.svelte'
+  import { contentClass } from './blog.css'
+
+  export let post
+</script>
+
+<svelte:head>
+  <title>{post.title}</title>
+</svelte:head>
+
+<h1>{post.title}</h1>
+
+<div class="content {contentClass}">
+  {@html post.body}
+</div>
+<ArticleFooter {post} />

src/routes/blog/[slug=blogPage].ts

@@ -9,10 +9,9 @@ export interface SinglePost {
   body: string
 }
 
-export async function get({ params }: Request): Promise<Response> {
+export async function get({ params: { slug } }: Request): Promise<Response> {
   // the `slug` parameter is available because
   // this file is called [slug].json.js
-  const { slug } = params
 
   let postSource: string
   try {
@@ -34,12 +33,12 @@ export async function get({ params }: Request): Promise<Response> {
 
   const parsedPost = fm<PostAttributes>(postSource)
 
-  const response = parseField<SinglePost>('body')({
+  const post = parseField<SinglePost>('body')({
     ...parsedPost.attributes,
     body: parsedPost.body,
   })
 
   return {
-    body: response,
+    body: { post },
   }
 }

src/routes/blog/[slug].svelte

@@ -1,44 +0,0 @@
-<script context="module" lang="ts">
-  import type { LoadInput, LoadOutput } from '@sveltejs/kit/types/page'
-
-  export async function load({
-    fetch,
-    page: { params },
-  }: LoadInput): Promise<LoadOutput> {
-    try {
-      const res = await fetch(`${params.slug}.json`)
-      const data = await res.json()
-
-      if (res.ok) {
-        return { props: { post: data } }
-      }
-      return {
-        status: res.status,
-        error: new Error(`Could not load ${params.slug} post`),
-      }
-    } catch (e) {
-      return {
-        status: 500,
-        error: e,
-      }
-    }
-  }
-</script>
-
-<script lang="ts">
-  import ArticleFooter from '../../components/blog/ArticleFooter.svelte'
-  import { contentClass } from './blog.css'
-
-  export let post
-</script>
-
-<svelte:head>
-  <title>{post.title}</title>
-</svelte:head>
-
-<h1>{post.title}</h1>
-
-<div class="content {contentClass}">
-  {@html post.body}
-</div>
-<ArticleFooter {post} />

src/routes/blog/index.json.ts

@@ -1,10 +0,0 @@
-import { getBlogListing } from './_content'
-
-export async function get({ query }) {
-  const tag = query.get('tag')
-  const filteredContents = await getBlogListing(tag)
-  return {
-    status: 200,
-    body: filteredContents,
-  }
-}