Svelte kit transition

src/routes/$layout.svelte

@@ -1,11 +1,11 @@
 <script context="module" lang="typescript">
   import { take } from 'ramda'
 
-  export function preload({ params, query }) {
-    return this.fetch(`blog.json`)
+  export function load({ fetch }) {
+    return fetch(`/blog.json`)
       .then((r) => r.json())
       .then((posts) => {
-        return { latestPosts: take(5, posts) }
+        return { props: { latestPosts: take(5, posts) }}
       })
   }
 </script>

src/routes/_error.svelte

@@ -1,41 +0,0 @@
-<script lang="typescript">
-  export let status
-  export let error
-
-  const dev = process.env.NODE_ENV === 'development'
-</script>
-
-<style>
-  h1,
-  p {
-    margin: 0 auto;
-  }
-
-  h1 {
-    font-size: 2.8em;
-    font-weight: 700;
-    margin: 0 0 0.5em 0;
-  }
-
-  p {
-    margin: 1em auto;
-  }
-
-  @media (min-width: 480px) {
-    h1 {
-      font-size: 4em;
-    }
-  }
-</style>
-
-<svelte:head>
-  <title>{status}</title>
-</svelte:head>
-
-<h1>{status}</h1>
-
-<p>{error.message}</p>
-
-{#if dev && error.stack}
-  <pre>{error.stack}</pre>
-{/if}

src/routes/blog/[slug].json.ts

@@ -8,23 +8,25 @@ export interface SinglePost {
   body: string
 }
 
-export async function get(req, res, next) {
+export async function get({ params }) {
   // the `slug` parameter is available because
   // this file is called [slug].json.js
-  const { slug } = req.params
+  const { slug } = params
 
   let postSource: string
   try {
     postSource = await promisify(readFile)(`_posts/blog/${slug}.md`, 'utf-8')
   } catch (e) {
     if (e.code === 'ENOENT') {
-      res.statusCode = 404
-      res.end('Post not found \n' + e.toString())
-      return
+      return {
+        status: 404,
+        body: 'Post not found \n' + e.toString(),
+      }
+    }
+    return {
+      status: 500,
+      body: 'Error loading post source file. \n' + e.toString(),
     }
-    res.statusCode = 500
-    res.end('Error loading post source file. \n' + e.toString())
-    return
   }
 
   const parsedPost = fm<PostAttributes>(postSource)
@@ -34,6 +36,7 @@ export async function get(req, res, next) {
     body: parsedPost.body,
   })
 
-  res.setHeader('Content-Type', 'application/json')
-  res.end(JSON.stringify(response))
+  return {
+    body: response,
+  }
 }

src/routes/blog/[slug].svelte

@@ -1,25 +1,37 @@
-<script context="module">
-  export async function preload({ params, query }) {
-    const res = await this.fetch(`blog/${params.slug}.json`)
-    const data = await res.json()
-
-    if (res.status === 200) {
-      return { post: data }
-    } else {
-      this.error(res.status, data.message)
+<script context="module" lang="typescript">
+  /**
+	 * @type {import('@sveltejs/kit').Load}
+	 */
+  export async function load({ fetch, page: { params }}) {
+    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>
+<script lang="typescript">
   import { onMount } from 'svelte'
   import ArticleFooter from '../../components/blog/article-footer.svelte'
-  import Prism from '../../../static/prism.js'
+  // import Prism from '../../../static/prism.js'
 
   export let post
 
   onMount(() => {
-    Prism.highlightAll()
+    // Prism.highlightAll()
   })
 </script>
 
@@ -44,7 +56,6 @@
 		so we have to use the :global(...) modifier to target
 		all elements inside .content
 	*/
-
   .content :global(pre) {
     background-color: #f9f9f9;
     box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.05);

src/routes/blog/index.json.ts

@@ -1,10 +1,10 @@
 import { getBlogListing } from './_content'
 
-export async function get(req, res) {
-  const { tag } = req.query
+export async function get({ query }) {
+  const { tag } = query
   const filteredContents = await getBlogListing(tag)
-  res.writeHead(200, {
-    'Content-Type': 'application/json',
-  })
-  res.end(JSON.stringify(filteredContents))
+  return {
+    status: 200,
+    body: filteredContents,
+  }
 }

src/routes/blog/index.svelte

@@ -1,15 +1,18 @@
 <script context="module" lang="typescript">
-  export function preload({ params, query }) {
+  /**
+	 * @type {import('@sveltejs/kit').Load}
+	 */
+  export function load({ fetch, page: { params, query }}) {
     const blogQuery = query
       ? '?' +
         Object.entries(query)
           .map(q => q.join('='))
           .join('&')
       : ''
-    return this.fetch(`blog.json${blogQuery}`)
+    return fetch(`blog.json${blogQuery}`)
       .then(r => r.json())
       .then(posts => {
-        return { posts, query }
+        return {props: { posts, query }}
       })
   }
 </script>

src/routes/feed/index.json.ts

@@ -1,10 +1,10 @@
 import { getFeed } from './_feed'
 
-export async function get(req, res) {
+export async function get() {
   const feed = await getFeed()
 
-  res.writeHead(200, {
-    'Content-Type': 'application/json',
-  })
-  res.end(feed.json1())
+  return {
+    status: 200,
+    body: feed.json1(),
+  }
 }

src/routes/feed/index.xml.ts

@@ -3,8 +3,11 @@ import { getFeed } from './_feed'
 export async function get(req, res) {
   const feed = await getFeed()
 
-  res.writeHead(200, {
-    'Content-Type': 'application/xml',
-  })
-  res.end(feed.rss2())
+  return {
+    status: 200,
+    headers: {
+      'Content-Type': 'application/xml',
+    },
+    body: feed.rss2(),
+  }
 }

src/routes/index.svelte

@@ -1,9 +1,3 @@
-<script context="module">
-  // export async function preload() {
-  //   return this.redirect(302, 'portfolio')
-  // }
-</script>
-
 <svelte:head>
   <title>Introduction @michalvankodev</title>
 </svelte:head>

src/routes/portfolio/index.json.ts

@@ -22,14 +22,15 @@ export interface PortfolioAttributes {
   education: RecordAttributes[]
 }
 
-export async function get(req, res, next) {
+export async function get() {
   let pageSource: string
   try {
     pageSource = await promisify(readFile)('_pages/portfolio.md', 'utf-8')
   } catch (e) {
-    res.statusCode = 500
-    res.end('Error loading portfolio source file. \n' + e.toString())
-    return
+    return {
+      status: 500,
+      body: 'Error loading portfolio source file. \n' + e.toString(),
+    }
   }
 
   const parsed = fm<PortfolioAttributes>(pageSource)
@@ -52,6 +53,8 @@ export async function get(req, res, next) {
     education,
   }
 
-  res.setHeader('Content-Type', 'application/json')
-  res.end(JSON.stringify(response))
+  return {
+    status: 200,
+    body: response,
+  }
 }

src/routes/portfolio/index.svelte

@@ -1,9 +1,14 @@
 <script context="module">
-  export async function preload() {
-    const res = await this.fetch('portfolio.json')
+  /**
+	 * @type {import('@sveltejs/kit').Load}
+	 */
+  export async function load({ fetch }) {
+    const res = await fetch('portfolio.json')
     const content = await res.json()
     return {
-      content,
+      props: {
+        content,
+      }
     }
   }
 </script>