add series navigator STILL WRITE TESTS

package.json

@@ -34,6 +34,7 @@
   "devDependencies": {
     "@cypress/snapshot": "^2.1.7",
     "@rollup/plugin-commonjs": "^12.0.0",
+    "@rollup/plugin-dynamic-import-vars": "^1.1.1",
     "@rollup/plugin-node-resolve": "^8.0.0",
     "@rollup/plugin-replace": "^2.2.0",
     "color-contrast-table-svelte": "^3.0.8",

rollup.config.js

@@ -6,6 +6,7 @@ import { terser } from 'rollup-plugin-terser'
 import config from 'sapper/config/rollup.js'
 import pkg from './package.json'
 import { mdsvex } from 'mdsvex'
+import dynamicImportVars from '@rollup/plugin-dynamic-import-vars'
 import svelteSVG from 'rollup-plugin-svelte-svg'
 import { globalStyle, scss } from 'svelte-preprocess'
 import copy from 'rollup-plugin-copy'
@@ -43,6 +44,10 @@ const envVars = {
 	exclude: 'src/routes/**/*.md'
 }
 
+const dynamicImportVarsOptions = {
+	include: `src/routes/**/*.svelte`
+}
+
 const preprocess = [
 	mdsvex({
 		extension: '.md',
@@ -104,6 +109,7 @@ export default {
 				dedupe: ['svelte']
 			}),
 			commonjs(),
+			dynamicImportVars(dynamicImportVarsOptions),
 			svelteSVG({ dev }),
 			copy({
 				targets: [
@@ -139,6 +145,7 @@ export default {
 				dedupe: ['svelte']
 			}),
 			commonjs(),
+			dynamicImportVars(dynamicImportVarsOptions),
 			svelteSVG({ generate: 'ssr', dev }),
 			copy({
 				targets: [

src/components/blog/series-navigator.svelte

@@ -0,0 +1,86 @@
+<script>
+  import { getContext  } from 'svelte'
+  const series = getContext('series')
+  let postIndex
+  let previous
+  let next
+
+  $: if (series) {
+    postIndex = series.posts.findIndex(post => post.title === $$props.title)
+    if (series.posts[postIndex - 1]) {
+      previous = series.posts[postIndex - 1]
+    }
+    if (series.posts[postIndex + 1]) {
+      next = series.posts[postIndex + 1]
+    }
+  }
+</script>
+
+<style global type='text/scss'>
+  .series-navigator {
+    &__title {
+      color: var(--colorWhite);
+      background: var(--colorHighlight);
+      text-align: center;
+      padding: var(--padding);
+      a {
+        color: inherit;
+        &:not(:hover) {
+          text-decoration: none;
+        }
+      }
+    }
+    &__buttons {
+      background: var(--colorHighlight);
+      display: flex;
+    }
+    &__previous,
+    &__next {
+      flex-wrap: wrap;
+      width: 50%;
+      &:before {
+        font-size: .8em;
+        margin-bottom: calc(.5 * var(--padding));
+        display: block;
+      }
+    }
+    &__previous {
+      text-align: right;
+      margin-right: auto;
+      &:before {
+        content: '« previous';
+      }
+    }
+    &__next {
+      text-align: left;
+      margin-left: auto;
+      &:before {
+        content: 'next »';
+      }
+    }
+  }
+</style>
+
+{#if series}  
+  <aside class='series-navigator__title'>
+    This is post {postIndex + 1} of {series.posts.length} in the <a href={series.slug}>{series.title}</a> series.
+  </aside>
+
+  <slot />
+
+  <aside class='series-navigator__buttons'>
+    {#if previous}
+      <a href={previous.slug} class='series-navigator__previous button'>
+        {previous.title}
+      </a>
+    {/if}
+    {#if next}
+      <a href={next.slug} class='series-navigator__next button'>
+        {next.title}
+      </a>
+    {/if}
+  </aside>
+
+{:else}
+  <slot />
+{/if}

src/components/layout/seo.svelte

@@ -60,7 +60,7 @@
       imageCredit: banner.attribution ? banner.attribution : '',
       url: pageUrl.replace('https://www.', '')
     })
-    local && console.log('imageFunctionUrl', `${host}/.netlify/functions/generate-image?${imageParams}`)
+    // local && console.log('imageFunctionUrl', `${host}/.netlify/functions/generate-image?${imageParams}`)
     socialImageUrl = `https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD}/image/upload/social-images/${slugify(title)}.png`
   }
 </script>

src/helpers/get-pages.js

@@ -52,7 +52,8 @@ const getPosts = ({
 
 			return ({
 				...frontmatter,
-				slug: `${directory}/${post}`,
+				// TODO remove _content from this helper method all together
+				slug: `/${directory.replace('/_content', '')}/${post}`,
 				html: html
 			})
 		})

src/layouts/blog.svelte

@@ -1,10 +1,13 @@
 <script>
   import Page from './page.svelte'
   import Markdown from '../components/layout/markdown.svelte'
+  import SeriesNavigator from '../components/blog/series-navigator.svelte'
 </script>
 
 <Page {...$$props} >
-  <Markdown>
-    <slot />
-  </Markdown>
+  <SeriesNavigator {...$$props}>
+    <Markdown>
+      <slot />
+    </Markdown>
+  </SeriesNavigator>
 </Page>

src/layouts/page.svelte

@@ -34,7 +34,10 @@
   #content {
     grid-area: content;
     width: 100%;
-    max-height: 100%;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
   }
 
   #site-footer {

src/routes/blog/[slug].svelte

@@ -0,0 +1,32 @@
+<script context='module'>
+  export async function preload(page) {
+
+    const { slug } = page.params
+
+    const component = await import(`./_content/${slug}/index.md`)
+
+    const series = await this.fetch(`/blog/series.json`)
+      .then(response => response.json())
+      .then(allSeries => allSeries.find(series => {
+        const postSlugs = series.posts.map(series => series.slug.replace('/blog/', ''))
+        if (postSlugs.includes(slug)) {
+          return series
+        }
+      }))
+
+    return {
+      page: component.default,
+      metadata: component.metadata,
+      series: series
+    }
+  }
+</script>
+
+<script>
+  export let page
+  export let series
+  import { setContext } from 'svelte'
+  setContext('series', series)
+</script>
+
+<svelte:component this={page} />

src/routes/blog/index.json.js

@@ -5,5 +5,5 @@ export function get(_req, res) {
 		'Content-Type': 'application/json'
 	})
 
-	res.end(JSON.stringify(getPages({directory: 'blog'})))
+	res.end(JSON.stringify(getPages({directory: 'blog/_content'})))
 } 

src/routes/blog/series/[slug].json.js

@@ -0,0 +1,16 @@
+
+import fetch from 'node-fetch'
+
+export async function get(req, res) {
+	res.writeHead(200, {
+		'Content-Type': 'application/json'
+  })
+
+  const slug = req.path.match(/(.*)\.json/)[1]
+
+	const series = await fetch('http://localhost:3000/blog/series.json')
+    .then(response => response.json())
+    .then(series => series.find(series => series.slug === slug))
+
+  res.end(JSON.stringify(series))
+}

src/routes/blog/series/[slug].svelte

@@ -1,6 +1,6 @@
 <script context='module'>
 	export function preload({ params, query }) {
-		return this.fetch(`/blog/series.json`)
+		return this.fetch(`/blog/series/${params.slug}.json`)
 		.then(response => response.json())
 		.then(series => {
       return { series }
@@ -10,10 +10,6 @@
 
 <script>
 	export let series
-	import { stores } from '@sapper/app'
-	const { page } = stores()
-	
-	series = series.filter(series => series.slug = $page.params.slug)[0]
 	const preview = {...series, title: ''}
   
   import Page from '../../../layouts/page.svelte'
@@ -23,4 +19,4 @@
 
 <Page {...series}>
 	<SeriesPreview {...preview} />
-</Page>
+</Page>

src/routes/blog/series/index.json.js

@@ -1,6 +1,7 @@
 import fetch from 'node-fetch'
 import series from './_series.js'
 import { slugify } from '../../../helpers'
+import { compareAsc, compareDesc } from 'date-fns'
 
 export async function get(_req, res) {
 	res.writeHead(200, {
@@ -10,17 +11,17 @@ export async function get(_req, res) {
   let list = {}
   // create a list of keys that can have posts pushed to them
   series.map(series => {
-    series.slug = `blog/series/${slugify(series.title)}`
+    series.slug = `/blog/series/${slugify(series.title)}`
     list[series.title] = series
   })
 
 	await fetch('http://localhost:3000/blog.json')
     .then(response => response.json())
     // get only the posts that have series
-    .then(posts => posts.filter(post => !!post.meta.series && Object.keys(list).includes(post.meta.series)))
+    .then(posts => posts.filter(post => !!post.series && Object.keys(list).includes(post.series)))
     // format the series with the posts
     .then(posts => posts.map(post => {
-      const seriesTitle = post.meta.series
+      const seriesTitle = post.series
       const postTitle = post.title
       if(list[seriesTitle].posts) {
         // stop duplication that's happening for some reason
@@ -35,14 +36,14 @@ export async function get(_req, res) {
   // get rid of keys, make an array
   list = Object.values(list)
 
-  if (list.length > 1) {
+  if (list.length) {
     // sort the posts with oldest first
-    list.forEach(item => item.posts.sort((a, b) => (a.meta.date < b.meta.date) ? -1 : 1))
+    list.forEach(item => item.posts.sort((a, b) => compareAsc(new Date(a.meta.date), new Date(b.meta.date))))
 
     // sort the series with most recent last post first
     const getLast = array => array[array.length - 1]
-    list.sort((a, b) => (getLast(a.posts).meta.date < getLast(b.posts).meta.date) ? 1 : -1)
+    list.sort((a, b) => compareDesc(new Date(getLast(a.posts).meta.date), new Date(getLast(b.posts).meta.date)))
   }
 
   res.end(JSON.stringify(list))
-}
+}

src/routes/blog/series/index.svelte

@@ -10,14 +10,10 @@
 
 <script>
 	export let series
-	
-	import { setContext } from 'svelte'
 
   import Page from '../../../layouts/page.svelte'
 	import List from  '../../../components/content/list.svelte'
 	import SeriesPreview from '../../../components/blog/series-preview.svelte'
-
-	setContext('segment', 'series')
 </script>
 
 <Page>