content updates, migrate to static page data from session

.gitignore

@@ -8,4 +8,5 @@ node_modules
 /build
 .vercel
 
-/support/db/store.db
+
+/store.db

package.json

@@ -14,22 +14,52 @@
     "svelte-themer": "next"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.1",
-    "@babel/preset-env": "^7.13.5",
+    "@babel/core": "^7.13.14",
+    "@babel/preset-env": "^7.13.12",
     "@sveltejs/adapter-static": "next",
     "@sveltejs/adapter-vercel": "next",
     "@sveltejs/kit": "next",
-    "autoprefixer": "^10.2.4",
+    "autoprefixer": "^10.2.5",
+    "eslint": "^7.23.0",
+    "eslint-plugin-svelte3": "^3.1.2",
+    "eslint-config-prettier": "^8.1.0",
     "graphql-request": "^3.4.0",
-    "postcss": "^8.2.6",
-    "postcss-import": "^14.0.0",
-    "prettier": "^2.1.2",
-    "prettier-plugin-svelte": "^1.4.0",
+    "postcss": "^8.2.9",
+    "postcss-import": "^14.0.1",
+    "prettier": "^2.2.1",
+    "prettier-plugin-svelte": "^2.2.0",
     "support": "./support",
     "svelte": "^3.29.0",
     "svelte-preprocess": "^4.6.6",
     "vercel": "^21.3.3",
-    "vite": "^2.1.0"
+    "vite": "^2.1.5"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "eslint:recommended",
+      "prettier"
+    ],
+    "plugins": [
+      "svelte3"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "*.svelte"
+        ],
+        "processor": "svelte3/svelte3"
+      }
+    ],
+    "parserOptions": {
+      "sourceType": "module",
+      "ecmaVersion": 2019
+    },
+    "env": {
+      "browser": true,
+      "es2017": true,
+      "node": true
+    }
   },
   "prettier": {
     "printWidth": 100,

src/hooks.js

@@ -0,0 +1,55 @@
+import fetch from 'node-fetch'
+// import { browser as isBrowser } from '$app/env'
+
+async function useGraphQL(query, variables) {
+  const port = 3000
+  // const endpoint = isBrowser ? `/graphql` : `http://localhost:${port}/___graphql`
+  const endpoint = `http://localhost:${port}/___graphql`
+  const response = await fetch(endpoint, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ query, variables }),
+  })
+  const parsed = await response.json()
+  return parsed
+}
+
+/** @type {import('@sveltejs/kit').GetSession} */
+export async function getSession({ context }) {
+  const postsQuery = `
+    query ALL_POSTS {
+      allPosts(data:{}) {
+        _id
+        slug
+        frontmatter {
+          title
+          date
+          published
+          tags
+        }
+        html
+      }
+    }
+  `
+
+  const pagesQuery = `
+    query ALL_PAGES {
+      allPages {
+        _id
+        slug
+        frontmatter {
+          title
+          date
+          published
+          tags
+        }
+        html
+      }
+    }
+  `
+
+  return {
+    posts: (await useGraphQL(postsQuery))?.data?.allPosts || [],
+    pages: (await useGraphQL(pagesQuery))?.data?.allPages || [],
+  }
+}

src/pages/$layout.svelte

@@ -94,13 +94,18 @@
 
   :global(body) {
     min-height: 100%;
+    display: flex;
   }
 
   :global(html, body) {
     color: var(--theme-text);
     background-color: var(--theme-bg);
   }
 
+  :global(#svelte) {
+    flex: 1 1 auto;
+  }
+
   :global(*) {
     transition-property: background-color;
     transition-duration: 200ms;

src/pages/[page].svelte

@@ -1,8 +1,26 @@
 <script context="module">
-  export async function load({ page, fetch }) {
-    const res = await fetch(`${page.path}.json`)
-    const { page: _page } = await res.json()
-    return { props: { page: _page } }
+  export const prerender = true
+
+  /**
+   * @type { RouteLoad }
+   */
+  export async function load({ page: _page, fetch, session }) {
+    const { pages } = session || {}
+    if (pages?.length) {
+      const page = pages.find(({ slug }) => slug === _page.path)
+      if (page) {
+        return {
+          props: {
+            page,
+          },
+        }
+      } else {
+        return {
+          status: 404,
+          error: new Error('Not found'),
+        }
+      }
+    }
   }
 </script>
 

src/pages/api/spotify/currently-playing.json.js

@@ -24,9 +24,10 @@ export async function get(req) {
   const albumImageUrl = song.item.album.images[0].url
   const songUrl = song.item.external_urls.spotify
 
-  // res.setHeader('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=30')
-
   return {
+    headers: {
+      'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=30',
+    },
     body: {
       album,
       albumImageUrl,

src/pages/api/spotify/top-tracks.json.js

@@ -0,0 +1,28 @@
+import { getTopTracks } from './_'
+
+/**
+ * @param {import('@sveltejs/kit').Request} request
+ * @param {any} context
+ * @returns {import('@sveltejs/kit').Response}
+ */
+export async function get(req) {
+  const response = await getTopTracks()
+  const { items } = await response.json()
+
+  const tracks = items.slice(0, 10).map(track => ({
+    artist: track.artists.map(_artist => _artist.name).join(', '),
+    songUrl: track.external_urls.spotify,
+    title: track.name,
+  }))
+
+  // res.setHeader('Cache-Control', 'public, s-maxage=86400, stale-while-revalidate=43200')
+
+  return {
+    headers: {
+      'Cache-Control': 'public, s-maxage=86400, stale-while-revalidate=43200',
+    },
+    body: {
+      tracks,
+    },
+  }
+}

src/pages/index.svelte

@@ -7,7 +7,8 @@
 
 <style>
   div {
-    margin: 3rem auto;
+    margin: auto;
+    margin-bottom: 3rem;
 
     text-align: center;
     font-style: italic;

src/pages/posts/[slug].svelte

@@ -1,10 +1,26 @@
 <script context="module">
-  export const hydrate = false
   export const prerender = true
-  export async function load({ page, fetch, context }) {
-    const res = await fetch(`${page.path}.json`)
-    const { post } = await res.json()
-    return { props: { post } }
+
+  /**
+   * @type { RouteLoad }
+   */
+  export async function load({ page, fetch, session }) {
+    const { posts } = session || {}
+    if (posts?.length) {
+      const post = posts.find(({ slug }) => slug === page.path)
+      if (post) {
+        return {
+          props: {
+            post,
+          },
+        }
+      } else {
+        return {
+          status: 404,
+          error: new Error('Not found'),
+        }
+      }
+    }
   }
 </script>
 

support/scripts/build.js

@@ -13,6 +13,7 @@ const [subcommand] = process.argv.slice(2)
 async function main() {
   if (exists(outdir)) await rmdir(outdir, { recursive: true })
   const entryPoints = await recursiveReadDir(srcdir, { only: ['js'] })
+
   try {
     await build({
       entryPoints,

support/src/db/store.js

@@ -1,7 +1,8 @@
-const { join } = require('path')
+const { existsSync: exists, rmSync: rm } = require('fs')
+const { resolve } = require('path')
 const Datastore = require('nedb')
 // todo: use a store for caching, store last updated date and check against current for updating records
-// const filename = join(__dirname, 'store.db')
+// const filename = resolve('store.db')
 // const store = new Datastore({ filename, autoload: true })
 const store = new Datastore()
 

support/src/graphql/generatePostData.js

@@ -17,10 +17,8 @@ module.exports = async function generatePostData(basePath, postPath) {
   // add formatted JS date
   if (frontmatter.date) frontmatter.date = new Date(`${frontmatter.date}`).toString()
 
-  // content zone (i.e. /content/blog -> "blog")
-  const zone = (await fs.lstat(path.dirname(postPath))).isDirectory()
-    ? path.basename(path.dirname(postPath))
-    : null
+  // content zone (i.e. /content/posts -> "posts")
+  const zone = path.basename(path.dirname(postPath))
 
   const html = await markdown(content)
 

support/src/graphql/resolvers/allPages.js

@@ -0,0 +1,5 @@
+const { find } = require('../../db')
+
+module.exports = async function queryAllPages(parent, args, ctx, info) {
+  return await find({ zone: 'content' })
+}

support/src/graphql/resolvers/index.js

@@ -1,5 +1,6 @@
 const meta = require('./meta')
 const allPosts = require('./allPosts')
+const allPages = require('./allPages')
 const post = require('./post')
 const page = require('./page')
 
@@ -8,4 +9,5 @@ module.exports = {
   post,
   page,
   allPosts,
+  allPages,
 }