cache data

package.json

@@ -1,9 +1,8 @@
 {
   "scripts": {
     "dev": "sapper dev",
-    "build": "sapper build",
     "export": "sapper export",
-    "start": "node __sapper__/build"
+    "start": "serve __sapper__/export"
   },
   "dependencies": {
     "axios": "^0.20.0",

src/lib/wp.js

@@ -49,3 +49,8 @@ export function sortByAndMapDate(data, format = 'MMM YY') {
       date: dj(work.date * 1000).format(format),
     }))
 }
+
+export function respond(res, body) {
+  res.setHeader('Content-Type', 'application/json')
+  res.end(JSON.stringify(body))
+}

src/routes/about.svelte

@@ -1,9 +1,6 @@
 <script context="module">
-  import { getOne } from '../lib/wp'
-
   export async function preload() {
-    const data = await getOne('pages', { slug: 'about' })
+    return this.fetch('/api/pages/about.json').then((res) => res.json())
-    return { data }
   }
 </script>
 

src/routes/api/[...slug].json.js

@@ -0,0 +1,13 @@
+import { respond, getAll, getOne, sortByAndMapDate } from '../../lib/wp'
+
+export async function get(req, res) {
+  const [type, slug] = req.params.slug
+
+  if (slug) {
+    const data = await getOne(type, { slug })
+    respond(res, { data })
+  } else {
+    const data = await getAll(type)
+    respond(res, { data: sortByAndMapDate(data) })
+  }
+}

src/routes/blog/[slug].svelte

@@ -1,9 +1,6 @@
 <script context="module">
-  import { getOne } from '../../lib/wp'
   export async function preload({ params }) {
-    const { slug } = params
+    return this.fetch(`/api/posts/${params.slug}.json`).then((res) => res.json())
-    const post = await getOne('posts', { slug })
-    return { post }
   }
 </script>
 
@@ -12,10 +9,10 @@
   import WPAdapter from '../../components/WPAdapter.svelte'
   import PostAttributes from '../../components/PostAttributes.svelte'
 
-  export let post
+  export let data
 </script>
 
-<SimplePage title={post.title} expanded={false} readable>
+<SimplePage title={data.title} expanded={false} readable>
-  <PostAttributes {post} full />
+  <PostAttributes post={data} full />
-  <WPAdapter content={post.content} />
+  <WPAdapter content={data.content} />
 </SimplePage>

src/routes/blog/index.svelte

@@ -1,9 +1,6 @@
 <script context="module">
-  import { getAll } from '../../lib/wp'
-
   export async function preload() {
-    const data = await getAll('posts')
+    return this.fetch('/api/posts.json').then((res) => res.json())
-    return { data }
   }
 </script>
 

src/routes/privacy.svelte

@@ -1,9 +1,6 @@
 <script context="module">
-  import { getOne } from '../lib/wp'
-
   export async function preload() {
-    const data = await getOne('pages', { slug: 'privacy' })
+    return this.fetch('/api/pages/privacy.json').then((res) => res.json())
-    return { data }
   }
 </script>
 

src/routes/projects.json.js

@@ -1,25 +0,0 @@
-export async function get(req, res, next) {
-  const data = [
-    {
-      name: 'Unbrew',
-      link: 'https://github.com/cupcakearmy/unbrew',
-      title: 'Manage unused dependecies for brew',
-      date: '2020',
-      body:
-        'Well... anyone that has been using brew in macOS for some time will have encountered the issue of doing a simple brew list and discovering loads of packages they have never heard of. Often this is the result of installing some packages that bring dependecies, but since brew does not uninstall them when you delete the package they came with, they will hang around for ever basically.',
-    },
-    {
-      name: 'Autorestic',
-      link: 'https://cupcakearmy.github.io/autorestic/',
-      title: 'High level backup level CLI utility for restic.',
-      date: '2019',
-      body:
-        'Autorestic is a wrapper around the amazing restic. While being amazing the restic cli can be a bit overwhelming and difficoult to manage if you have many different location that you want to backup to multiple locations. This utility is aimed at making this easier.',
-    },
-  ]
-
-  res.writeHead(200, {
-    'Content-Type': 'application/json',
-  })
-  res.end(JSON.stringify(data))
-}

src/routes/projects.svelte

@@ -1,9 +1,6 @@
 <script context="module">
-  import { getAll, sortByAndMapDate } from '../lib/wp'
-
   export async function preload() {
-    const data = await getAll('projects')
+    return this.fetch('/api/projects.json').then((res) => res.json())
-    return { data: sortByAndMapDate(data) }
   }
 </script>
 

src/routes/works.svelte

@@ -1,9 +1,6 @@
 <script context="module">
-  import { getAll, sortByAndMapDate } from '../lib/wp'
-
   export async function preload() {
-    const data = await getAll('works')
+    return this.fetch('/api/works.json').then((res) => res.json())
-    return { data: sortByAndMapDate(data) }
   }
 </script>