Migrate to page endpoints

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "svelte-kit dev",
+    "dev:debug": "node --inspect node_modules/@sveltejs/kit/dist/cli.js dev",
     "prebuild": "npm run svgstore",
     "build": "svelte-kit build --verbose",
     "preview": "svelte-kit preview",
@@ -16,37 +17,37 @@
   },
   "dependencies": {
     "@vanilla-extract/css": "^1.6.8",
-    "@vanilla-extract/sprinkles": "^1.3.3",
-    "@vanilla-extract/vite-plugin": "^3.1.0",
+    "@vanilla-extract/sprinkles": "^1.4.0",
+    "@vanilla-extract/vite-plugin": "^3.1.4",
     "classnames": "^2.3.1",
-    "date-fns": "^2.27.0",
+    "date-fns": "^2.28.0",
     "feed": "^4.2.2",
     "front-matter": "^4.0.2",
-    "marked": "^3.0.4",
+    "marked": "^3.0.8",
     "modern-normalize": "^1.1.0",
-    "polished": "^4.1.3",
-    "prismjs": "^1.25.0",
-    "ramda": "^0.27.1"
+    "polished": "^4.1.4",
+    "prismjs": "^1.27.0",
+    "ramda": "^0.28.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "^1.0.0-next.22",
-    "@sveltejs/kit": "^1.0.0-next.202",
+    "@sveltejs/adapter-static": "^1.0.0-next.29",
+    "@sveltejs/kit": "^1.0.0-next.302",
     "@tsconfig/svelte": "^2.0.1",
     "@types/classnames": "^2.3.1",
-    "@types/node": "^16.11.12",
-    "@types/ramda": "^0.27.60",
-    "@typescript-eslint/eslint-plugin": "^5.6.0",
-    "@typescript-eslint/parser": "^5.6.0",
-    "eslint": "^8.4.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^3.2.1",
-    "prettier": "~2.5.1",
-    "prettier-plugin-svelte": "^2.5.1",
-    "svelte": "^3.44.2",
-    "svelte-preprocess": "^4.10.0",
+    "@types/node": "^16.11.26",
+    "@types/ramda": "^0.28.1",
+    "@typescript-eslint/eslint-plugin": "^5.16.0",
+    "@typescript-eslint/parser": "^5.16.0",
+    "eslint": "^8.11.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte3": "^3.4.1",
+    "prettier": "~2.6.0",
+    "prettier-plugin-svelte": "^2.6.0",
+    "svelte": "^3.46.4",
+    "svelte-preprocess": "^4.10.4",
     "svgstore-cli": "^2.0.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.3",
-    "vite": "^2.7.2"
+    "typescript": "^4.6.2",
+    "vite": "^2.8.6"
   }
 }

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) => {
+  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, posts),
-            segment: page.path,
+        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,
-  }
-}

tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "./.svelte-kit/tsconfig.json",
   "compilerOptions": {
     "moduleResolution": "node",
     "module": "es2020",