From e2e1da17bd1713cbf3f5c91e38fdb60d5519f3c6 Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Wed, 31 Mar 2021 15:05:45 -0500
Subject: [PATCH] begin to migrate to sk endpoints, vercel adapter

---
 package.json                                  | 14 ++---
 src/pages/$layout.svelte                      | 34 +++++++----
 src/pages/api/spotify/_.js                    | 49 +++++++++++++++
 .../api/spotify/currently-playing.json.js     | 39 ++++++++++++
 src/pages/posts/[slug].svelte                 |  2 +
 support/package.json                          |  1 +
 support/yarn.lock                             | 60 ++++++++++---------
 svelte.config.cjs                             |  4 +-
 8 files changed, 152 insertions(+), 51 deletions(-)
 create mode 100644 src/pages/api/spotify/_.js
 create mode 100644 src/pages/api/spotify/currently-playing.json.js

diff --git a/package.json b/package.json
index 3c77d6a..773b24f 100644
--- a/package.json
+++ b/package.json
@@ -5,11 +5,14 @@
   "type": "module",
   "scripts": {
     "dev": "svelte-kit dev",
-    "vercel-dev": "yarn dev -p $PORT",
     "build": "node scripts/build.cjs",
     "start": "svelte-kit start"
   },
-  "dependencies": {},
+  "dependencies": {
+    "node-fetch": "^2.6.1",
+    "querystring": "^0.2.1",
+    "svelte-themer": "next"
+  },
   "devDependencies": {
     "@babel/core": "^7.13.1",
     "@babel/preset-env": "^7.13.5",
@@ -17,13 +20,7 @@
     "@sveltejs/adapter-vercel": "next",
     "@sveltejs/kit": "next",
     "autoprefixer": "^10.2.4",
-    "express": "^4.17.1",
-    "express-graphql": "^0.12.0",
-    "front-matter": "^4.0.2",
-    "graphql": "^15.5.0",
     "graphql-request": "^3.4.0",
-    "graphql-tools": "^7.0.4",
-    "node-fetch": "^2.6.1",
     "postcss": "^8.2.6",
     "postcss-import": "^14.0.0",
     "prettier": "^2.1.2",
@@ -31,7 +28,6 @@
     "support": "./support",
     "svelte": "^3.29.0",
     "svelte-preprocess": "^4.6.6",
-    "svelte-themer": "next",
     "vercel": "^21.3.3",
     "vite": "^2.1.0"
   },
diff --git a/src/pages/$layout.svelte b/src/pages/$layout.svelte
index a950084..7cffb5e 100644
--- a/src/pages/$layout.svelte
+++ b/src/pages/$layout.svelte
@@ -1,5 +1,15 @@
 <script context="module">
   const STORAGE_KEY = '__josefdev_theme'
+
+  export async function load({ fetch }) {
+    let response
+    try {
+      response = await fetch('/api/spotify/currently-playing.json')
+    } catch (error) {
+      console.error('there was an issue fetching')
+    }
+    return { props: { currentlyPlaying: await response.json() } }
+  }
 </script>
 
 <script>
@@ -21,18 +31,18 @@
   $: songUrl = currentlyPlaying.songUrl
   $: title = currentlyPlaying.title
 
-  async function getSpotifyCurrentlyPlaying() {
-    const res = await fetch(`/api/spotify/currently-playing`)
-    if (res.ok) {
-      return await res.json()
-    } else {
-      throw new Error('Unable to fetch')
-    }
-  }
-
-  onMount(async () => {
-    currentlyPlaying = await getSpotifyCurrentlyPlaying()
-  })
+  // async function getSpotifyCurrentlyPlaying() {
+  //   const res = await fetch(`/api/spotify/currently-playing`)
+  //   if (res.ok) {
+  //     return await res.json()
+  //   } else {
+  //     throw new Error('Unable to fetch')
+  //   }
+  // }
+
+  // onMount(async () => {
+  //   currentlyPlaying = await getSpotifyCurrentlyPlaying()
+  // })
 
   import '$styles/normalize.css'
   import '$styles/global.css'
diff --git a/src/pages/api/spotify/_.js b/src/pages/api/spotify/_.js
new file mode 100644
index 0000000..583604a
--- /dev/null
+++ b/src/pages/api/spotify/_.js
@@ -0,0 +1,49 @@
+import fetch from 'node-fetch'
+import querystring from 'querystring'
+
+const {
+  VITE_SPOTIFY_CLIENT_ID: client_id,
+  VITE_SPOTIFY_CLIENT_SECRET: client_secret,
+  VITE_SPOTIFY_TOKEN: refresh_token,
+} = import.meta.env
+
+const basic = Buffer.from(`${client_id}:${client_secret}`).toString('base64')
+const NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-playing`
+const TOP_TRACKS_ENDPOINT = `https://api.spotify.com/v1/me/top/tracks`
+const TOKEN_ENDPOINT = `https://accounts.spotify.com/api/token`
+
+async function getAccessToken() {
+  const response = await fetch(TOKEN_ENDPOINT, {
+    method: 'POST',
+    headers: {
+      Authorization: `Basic ${basic}`,
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    body: querystring.stringify({
+      grant_type: 'refresh_token',
+      refresh_token,
+    }),
+  })
+
+  return response.json()
+}
+
+export async function getNowPlaying() {
+  const { access_token } = await getAccessToken()
+
+  return fetch(NOW_PLAYING_ENDPOINT, {
+    headers: {
+      Authorization: `Bearer ${access_token}`,
+    },
+  })
+}
+
+export async function getTopTracks() {
+  const { access_token } = await getAccessToken()
+
+  return fetch(TOP_TRACKS_ENDPOINT, {
+    headers: {
+      Authorization: `Bearer ${access_token}`,
+    },
+  })
+}
diff --git a/src/pages/api/spotify/currently-playing.json.js b/src/pages/api/spotify/currently-playing.json.js
new file mode 100644
index 0000000..5e2a807
--- /dev/null
+++ b/src/pages/api/spotify/currently-playing.json.js
@@ -0,0 +1,39 @@
+import { getNowPlaying } from './_'
+
+/**
+ * @param {import('@sveltejs/kit').Request} request
+ * @param {any} context
+ * @returns {import('@sveltejs/kit').Response}
+ */
+export async function get(req) {
+  const response = await getNowPlaying()
+
+  if (response.status === 204 || response.status > 400) {
+    return {
+      body: {
+        isPlaying: false,
+      },
+    }
+  }
+
+  const song = await response.json()
+  const isPlaying = song.is_playing
+  const title = song.item.name
+  const artist = song.item.artists.map(_artist => _artist.name).join(', ')
+  const album = song.item.album.name
+  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 {
+    body: {
+      album,
+      albumImageUrl,
+      artist,
+      isPlaying,
+      songUrl,
+      title,
+    },
+  }
+}
diff --git a/src/pages/posts/[slug].svelte b/src/pages/posts/[slug].svelte
index 3118073..ab724b5 100644
--- a/src/pages/posts/[slug].svelte
+++ b/src/pages/posts/[slug].svelte
@@ -1,4 +1,6 @@
 <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()
diff --git a/support/package.json b/support/package.json
index 6ff761f..c36bfc0 100644
--- a/support/package.json
+++ b/support/package.json
@@ -14,6 +14,7 @@
     "deepmerge": "^4.2.2",
     "express": "^4.17.1",
     "express-graphql": "^0.12.0",
+    "front-matter": "^4.0.2",
     "graphql": "^15.5.0",
     "graphql-tools": "^7.0.4",
     "nedb": "^1.8.0",
diff --git a/support/yarn.lock b/support/yarn.lock
index b21050e..64e9e9f 100644
--- a/support/yarn.lock
+++ b/support/yarn.lock
@@ -880,6 +880,13 @@ apollo-upload-client@14.1.3:
     "@babel/runtime" "^7.12.5"
     extract-files "^9.0.0"
 
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -1374,6 +1381,11 @@ escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+esprima@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
 etag@~1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
@@ -1538,6 +1550,13 @@ fresh@0.5.2:
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
 
+front-matter@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-4.0.2.tgz#b14e54dc745cfd7293484f3210d15ea4edd7f4d5"
+  integrity sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==
+  dependencies:
+    js-yaml "^3.13.1"
+
 fs-capacitor@^6.1.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/fs-capacitor/-/fs-capacitor-6.2.0.tgz#fa79ac6576629163cb84561995602d8999afb7f5"
@@ -1964,6 +1983,14 @@ isomorphic-ws@4.0.1:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
+js-yaml@^3.13.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -2850,6 +2877,11 @@ space-separated-tokens@^1.0.0:
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
   integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
 
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
+
 sse-z@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/sse-z/-/sse-z-0.3.0.tgz#e215db7c303d6c4a4199d80cb63811cc28fa55b9"
@@ -2890,34 +2922,6 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
-support@./:
-  version "0.0.1"
-  dependencies:
-    acorn "^8.1.0"
-    acorn-walk "^8.0.2"
-    deepmerge "^4.2.2"
-    express "^4.17.1"
-    express-graphql "^0.12.0"
-    nedb "^1.8.0"
-    rehype-document "^5.1.0"
-    rehype-format "^3.1.0"
-    rehype-local-image-to-cloudinary "^1.0.4"
-    rehype-slug "^4.0.1"
-    rehype-stringify "^8.0.0"
-    remark-autolink-headings "^6.0.1"
-    remark-parse "^9.0.0"
-    remark-rehype "^8.0.0"
-    remark-retext "^4.0.0"
-    remark-slug "^6.0.0"
-    retext "^7.0.1"
-    retext-emoji "^7.0.2"
-    retext-english "^3.0.4"
-    retext-profanities "^6.1.0"
-    retext-smartypants "^4.0.0"
-    support "./"
-    unified "^9.2.1"
-    unist-util-visit "^2.0.3"
-
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
diff --git a/svelte.config.cjs b/svelte.config.cjs
index 9bdba49..b4ac052 100644
--- a/svelte.config.cjs
+++ b/svelte.config.cjs
@@ -1,5 +1,5 @@
 const { resolve } = require('path')
-const adapter = require('@sveltejs/adapter-static')
+const adapter = require('@sveltejs/adapter-vercel')
 const { GraphQLLayerPlugin, preprocessGraphQL, VercelLayerPlugin } = require('support')
 const app = require('./app.config.cjs')
 const pkg = require('./package.json')
@@ -20,7 +20,7 @@ module.exports = {
     },
 
     vite: {
-      plugins: [GraphQLLayerPlugin({ app }), VercelLayerPlugin()],
+      plugins: [GraphQLLayerPlugin({ app })],
       ssr: {
         noExternal: Object.keys(pkg.dependencies || {}),
       },