From abe6720572efe54b049074ccc57c4a414435a723 Mon Sep 17 00:00:00 2001 From: Ben Smithett Date: Sun, 5 Jul 2020 21:42:54 +1000 Subject: [PATCH 1/2] Move things around for a neater project structure --- {lib => app}/build.js | 0 {components => app/components}/global_css.js | 0 .../components}/post_list/post_list.js | 0 .../post_list/post_list.stories.js | 0 .../welcome_banner/welcome_banner.js | 2 +- .../welcome_banner/welcome_banner.stories.js | 0 app/entry.client.js | 34 ++++++++++++++++++ {lib => app}/entry.prerender.js | 8 ++--- {images => app/images}/favicon.png | Bin {images => app/images}/island.jpg | Bin {lib => app}/isomorphic_helpers.js | 0 {layouts => app/layouts}/default_layout.js | 0 {layouts => app/layouts}/document_template.js | 0 {pages => app/pages}/example-post.mdx | 0 {pages => app/pages}/index.js | 0 lib/entry.client.js | 30 ---------------- package.json | 4 +-- 17 files changed, 41 insertions(+), 37 deletions(-) rename {lib => app}/build.js (100%) rename {components => app/components}/global_css.js (100%) rename {components => app/components}/post_list/post_list.js (100%) rename {components => app/components}/post_list/post_list.stories.js (100%) rename {components => app/components}/welcome_banner/welcome_banner.js (95%) rename {components => app/components}/welcome_banner/welcome_banner.stories.js (100%) create mode 100644 app/entry.client.js rename {lib => app}/entry.prerender.js (95%) rename {images => app/images}/favicon.png (100%) rename {images => app/images}/island.jpg (100%) rename {lib => app}/isomorphic_helpers.js (100%) rename {layouts => app/layouts}/default_layout.js (100%) rename {layouts => app/layouts}/document_template.js (100%) rename {pages => app/pages}/example-post.mdx (100%) rename {pages => app/pages}/index.js (100%) delete mode 100644 lib/entry.client.js diff --git a/lib/build.js b/app/build.js similarity index 100% rename from lib/build.js rename to app/build.js diff --git a/components/global_css.js b/app/components/global_css.js similarity index 100% rename from components/global_css.js rename to app/components/global_css.js diff --git a/components/post_list/post_list.js b/app/components/post_list/post_list.js similarity index 100% rename from components/post_list/post_list.js rename to app/components/post_list/post_list.js diff --git a/components/post_list/post_list.stories.js b/app/components/post_list/post_list.stories.js similarity index 100% rename from components/post_list/post_list.stories.js rename to app/components/post_list/post_list.stories.js diff --git a/components/welcome_banner/welcome_banner.js b/app/components/welcome_banner/welcome_banner.js similarity index 95% rename from components/welcome_banner/welcome_banner.js rename to app/components/welcome_banner/welcome_banner.js index 2e274d5..93bda4c 100644 --- a/components/welcome_banner/welcome_banner.js +++ b/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: { diff --git a/components/welcome_banner/welcome_banner.stories.js b/app/components/welcome_banner/welcome_banner.stories.js similarity index 100% rename from components/welcome_banner/welcome_banner.stories.js rename to app/components/welcome_banner/welcome_banner.stories.js diff --git a/app/entry.client.js b/app/entry.client.js new file mode 100644 index 0000000..c15a4e6 --- /dev/null +++ b/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) diff --git a/lib/entry.prerender.js b/app/entry.prerender.js similarity index 95% rename from lib/entry.prerender.js rename to app/entry.prerender.js index 42f463a..d4373d4 100644 --- a/lib/entry.prerender.js +++ b/app/entry.prerender.js @@ -20,9 +20,9 @@ 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) { /* @@ -30,7 +30,7 @@ export default function prerender (manifest, mode) { (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) diff --git a/images/favicon.png b/app/images/favicon.png similarity index 100% rename from images/favicon.png rename to app/images/favicon.png diff --git a/images/island.jpg b/app/images/island.jpg similarity index 100% rename from images/island.jpg rename to app/images/island.jpg diff --git a/lib/isomorphic_helpers.js b/app/isomorphic_helpers.js similarity index 100% rename from lib/isomorphic_helpers.js rename to app/isomorphic_helpers.js diff --git a/layouts/default_layout.js b/app/layouts/default_layout.js similarity index 100% rename from layouts/default_layout.js rename to app/layouts/default_layout.js diff --git a/layouts/document_template.js b/app/layouts/document_template.js similarity index 100% rename from layouts/document_template.js rename to app/layouts/document_template.js diff --git a/pages/example-post.mdx b/app/pages/example-post.mdx similarity index 100% rename from pages/example-post.mdx rename to app/pages/example-post.mdx diff --git a/pages/index.js b/app/pages/index.js similarity index 100% rename from pages/index.js rename to app/pages/index.js diff --git a/lib/entry.client.js b/lib/entry.client.js deleted file mode 100644 index 3ad38ab..0000000 --- a/lib/entry.client.js +++ /dev/null @@ -1,30 +0,0 @@ -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) - -/* -You may wish to mount, manually rehydrate or setup other client side components here, e.g. - -document.querySelectorAll('[data-footnote]') - .forEach((el) => fancyFootnote(el)) - -ReactDOM.render( - - - , - document.querySelector('#chat-box') -) - -$('.carousel').fancyCarousel() -*/ diff --git a/package.json b/package.json index a05f2bb..9d36dd3 100644 --- a/package.json +++ b/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", From a88e48c9ba232c154aa38c863abada87c4dde98d Mon Sep 17 00:00:00 2001 From: Ben Smithett Date: Mon, 6 Jul 2020 09:09:30 +1000 Subject: [PATCH 2/2] Update storybook config --- .storybook/config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.storybook/config.js b/.storybook/config.js index 9684644..2cdcd7e 100644 --- a/.storybook/config.js +++ b/.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)