Updated example to use new approach

Author: Wildhoney

.babelrc

@@ -0,0 +1,11 @@
+{
+    "plugins": [
+        [
+            "@babel/plugin-transform-runtime",
+            {
+                "regenerator": true,                
+            }
+        ]
+    ],
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

.eslintrc

@@ -16,4 +16,4 @@
             "version": "detect"
         }
     }
-}
+}

.gitignore

@@ -7,4 +7,4 @@ dist/
 example/js/build.js
 
 # coverage
-.nyc_output/
+.nyc_output/

example/css/default.css

@@ -6,7 +6,32 @@
 
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <script type="text/javascript" src="js/build.js"></script>
-        <link rel="stylesheet" type="text/css" href="css/default.css" />
+
+        <style type="text/css">
+            * {
+                margin: 0;
+                padding: 0;
+                overflow: hidden;
+            }
+
+            body {
+                background-color: rgba(0, 0, 0, 0.05);
+            }
+
+            section.container {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            section.weather {
+                transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            }
+        </style>
+
         <link
             href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic"
             rel="stylesheet"

example/index.html

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavLink, withRouter } from 'react-router-dom';
+import * as utils from '../../utils';
+
+function Countries({ list }) {
+    return (
+        <ul>
+            <li className="title">Weather for:</li>
+
+            {list.map(name => {
+                return (
+                    <li key={name}>
+                        <NavLink
+                            to={`/${utils.toSlug(name)}.html`}
+                            activeClassName="active"
+                        >
+                            {name}
+                        </NavLink>
+                    </li>
+                );
+            })}
+        </ul>
+    );
+}
+
+Countries.propTypes = {
+    list: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+};
+
+export default withRouter(Countries);

example/js/actions.js

@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import DocumentTitle from 'react-document-title';
+import * as duck from '../../duck';
+import * as utils from '../../utils';
+import Countries from '../Countries';
+
+function Country({ weather, country, countries, fetch }) {
+    const { title, label, fahrenheit } = utils.getWeather(weather, country);
+    useEffect(() => void fetch(country), [country]);
+
+    return (
+        <DocumentTitle title={`Weather for ${country}`}>
+            <span>
+                <main>
+                    <img src={utils.getFilename(country)} alt={country} />
+                    <h1>{title}</h1>
+                    <h2 title={fahrenheit}>{label}</h2>
+                    <Countries list={countries} />
+                </main>
+            </span>
+        </DocumentTitle>
+    );
+}
+
+Country.propTypes = {
+    weather: PropTypes.array.isRequired,
+    country: PropTypes.string.isRequired,
+    countries: PropTypes.array.isRequired,
+    fetch: PropTypes.func.isRequired,
+};
+
+Country.defaultProps = { weather: null };
+
+function mapStateToProps(state) {
+    return state;
+}
+
+function mapDispatchToProps(dispatch) {
+    return bindActionCreators(duck.actions, dispatch);
+}
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(Country);

example/js/components/Countries/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { BrowserRouter, Route } from 'react-router-dom';
+import root from 'react-shadow';
+import * as utils from '../../utils';
+import Country from '../Country';
+import styles from './styles.css';
+
+function Layout(props) {
+    return (
+        <BrowserRouter>
+            <root.section className="weather">
+                <style tyle="text/css">{styles}</style>
+                <Route
+                    exact
+                    path="/"
+                    render={() => (
+                        <Country country={utils.pickRandom(props.countries)} />
+                    )}
+                />
+                <Route
+                    exact
+                    path="/:country.html"
+                    render={({ match }) => (
+                        <Country country={match.params.country} />
+                    )}
+                />
+            </root.section>
+        </BrowserRouter>
+    );
+}
+
+Layout.propTypes = {
+    countries: PropTypes.array.isRequired,
+};
+
+function mapStateToProps(state) {
+    return state;
+}
+
+export default connect(mapStateToProps)(Layout);