add series navigator

 - move blog content into _content director, refactor how mdsvex page components are loaded
 - add dynamic import plugin
 - add series navigator component
 - add [slug].svelte, series/[slug].svelte, series/[slug].json pages
 - uncomment series component on homepage
 - tests
 - random small bug fixes

Author: ryanfiller

cypress/integration/components/blog/series-navigator.spec.js

@@ -0,0 +1,45 @@
+describe('<SeriesNavigator /> component', () => {
+  context('when it should not exist', () => {
+    beforeEach(() => {
+      cy.visit('/blog/fighting-with-git-lfs')
+    })
+
+    it('does not render', () => {
+      cy.get('.series-navigator__title').should('not.exist')
+      cy.get('.series-navigator__buttons').should('not.exist')
+    })
+  })
+
+  context('when it should exist', () => {
+    beforeEach(() => {
+      cy.visit('/blog/series')
+      // navigate to the first post
+      cy.get('.post-preview-list').find('a').eq(0).click()
+      cy.injectAxe()
+    })
+
+    it('renders correctly', () => {
+      cy.get('.series-navigator__title').contains('This is post 1 of')
+      cy.get('.series-navigator__buttons').within(() => {
+        cy.get('.series-navigator__previous').should('not.exist')
+        cy.get('.series-navigator__next').should('exist')
+      })
+      // cy.checkA11y('.series-navigator__title')
+      // cy.checkA11y('.series-navigator__buttons')
+    })
+  
+    it('navigates forward and backwards', () => {
+      cy.get('.series-navigator__buttons').within(() => {
+        cy.get('.series-navigator__next').click()
+      })
+      cy.reload() // why???
+      cy.get('.series-navigator__title').contains('This is post 2 of')
+      cy.get('.series-navigator__buttons').within(() => {
+        cy.get('.series-navigator__previous').should('exist')
+        cy.get('.series-navigator__previous').click()
+      })
+      cy.reload() // why???
+      cy.get('.series-navigator__title').contains('This is post 1 of')
+    })
+  })
+})

cypress/integration/routes/blog-series-json.spec.js

@@ -21,7 +21,7 @@ describe('/blog/series.json route', () => {
         if (index > 0) {
           date = new Date(date).getTime()
           const previousDate = new Date(dates[index - 1]).getTime()
-          expect(date < previousDate).to.be.true
+          expect(date > previousDate).to.be.true
         }
       })
     })

cypress/integration/routes/generate-image.spec.js

@@ -4,7 +4,7 @@ describe('/generate-image route', () => {
 
   const params =  objectToParams({
     title: 'test title',
-    excerpt: 'short expcert',
+    excerpt: 'short excerpt',
     categories: ['one fish', 'two fish'],
     tags: ['red fish', 'blue fish'],
     imageSrc: '/images/site-assets/_placeholder.jpg',

cypress/integration/routes/rss.spec.js

@@ -38,7 +38,9 @@ describe('/blog/rss.xml', () => {
       ]
       cy.request('/blog/rss.xml')
         .then(({body}) => {
+          console.log('body', body)
           const items = body.match(/<item>(.|\n)*?<\/item>/g)
+          console.log('items', items)
           expect(items).to.have.length.of.at.most(12)
           items.map(item => {
             itemTags.map(tag => {

cypress/snapshots/All Specs/__diff_output__/ColorChart component -- correctly shows all colors.diff.png

@@ -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",

cypress/snapshots/All Specs/__diff_output__/generate-image route -- renders correctly.diff.png

@@ -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: [