Move things around for a neater project structure

.storybook/config.js

@@ -2,7 +2,7 @@ import { configure, addDecorator, addParameters } from '@storybook/react'
 import React from 'react'
 import {createRenderer} from 'fela'
 import {RendererProvider} from 'react-fela'
-import {cssReset} from '../components/global_css'
+import {cssReset} from '../app/components/global_css'
 
 // Setup Fela client runtime
 const renderer = createRenderer({devMode: true})
@@ -18,5 +18,5 @@ addParameters({
 })
 
 configure([
-  require.context('../components', true, /.stories.js$/)
+  require.context('../app/components', true, /.stories.js$/)
 ], module)

components/welcome_banner/welcome_banner.js → app/components/welcome_banner/welcome_banner.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useFela } from 'react-fela'
 import island from '../../images/island.jpg'
-import {asIsland} from '../../lib/isomorphic_helpers'
+import {asIsland} from '../../isomorphic_helpers'
 
 const styles = {
   root: {

app/entry.client.js

@@ -0,0 +1,34 @@
+/*
+This is the JS file loaded in the browser by all static pages.
+
+⚠️ Client-side JS is totally optional in San Blas! ⚠️
+You can delete everything in here if you don't need it.
+
+Or you can run whatever client-side JS you do need:
+Analytics snippets, ReactDOM.render(), fancy graphs, etc...
+*/
+
+/*
+⚛️ Optional:
+Rehydrate prerendered React/Fela components using San Blas isomorphic helpers.
+
+If you use asIsland() to render components in your pages, the following code
+will rehydrate those components with the same props.
+
+If you remove this code, the prerendered component HTML won't be rehydrated.
+*/ 
+
+import { createRenderer } from 'fela'
+import { rehydrate } from 'fela-dom'
+import { rehydrateIslands } from './isomorphic_helpers'
+
+// Rehydrate Fela styles
+const felaRenderer = createRenderer()
+rehydrate(felaRenderer)
+
+// Rehydrate San Blas islands
+import WelcomeBanner from './components/welcome_banner/welcome_banner'
+
+rehydrateIslands({
+  WelcomeBanner
+}, felaRenderer)

lib/entry.prerender.js → app/entry.prerender.js

@@ -20,17 +20,17 @@ import { createRenderer } from 'fela'
 import { RendererProvider } from 'react-fela'
 import { renderToMarkup } from 'fela-dom'
 import { Helmet } from 'react-helmet'
-import { cssReset } from '../components/global_css'
-import documentTemplate from '../layouts/document_template'
-import DefaultLayout from '../layouts/default_layout'
+import { cssReset } from './components/global_css'
+import documentTemplate from './layouts/document_template'
+import DefaultLayout from './layouts/default_layout'
 
 export default function prerender (manifest, mode) {
   /*
   1. Require every JS and MDX file in the `pages` directory and create a useful collection of 'page' objects.
   (uses Webpack's context module API, see https://webpack.js.org/guides/dependency-management/)
   */
   const pages = []
-  const req = require.context('../pages', true, /^(?!.*\/_).*(js|mdx)$/)
+  const req = require.context('./pages', true, /^(?!.*\/_).*(js|mdx)$/)
   req.keys().forEach(sourceFilePath => {
     const pageModule = req(sourceFilePath)
     const sourceFile = path.parse(sourceFilePath)

package.json

@@ -2,8 +2,8 @@
   "name": "sanblas",
   "version": "2.0.1",
   "scripts": {
-    "start": "concurrently \"node ./lib/build.js development\" \"serve\" --kill-others --prefix-colors=yellow.dim,cyan.dim",
-    "build": "node ./lib/build.js production",
+    "start": "concurrently \"node ./app/build.js development\" \"serve\" --kill-others --prefix-colors=yellow.dim,cyan.dim",
+    "build": "node ./app/build.js production",
     "storybook": "start-storybook --port 9000"
   },
   "license": "MIT",