refactor images, change heading colors on scroll

packages/microcosm-www-next/src/components/browser-graphic.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { cat } from '../images'
+
+const BrowserGraphic = () => (
+  <div className="browser-graphic">
+    <header>
+      <p>Quizzfeed</p>
+    </header>
+    <main>
+      <div className="content">
+        <ol className="content__list">
+          <li>Cool</li>
+          <li>Curious</li>
+          <li>Calm</li>
+          <li>Cautious</li>
+        </ol>
+      </div>
+      <div className="graphic">
+        <img src={cat} className="graphic__img" alt="TODO" />
+      </div>
+    </main>
+  </div>
+)
+
+export default BrowserGraphic

packages/microcosm-www-next/src/components/graphic.js

@@ -1,13 +1,22 @@
 import React from 'react'
+import BrowserGraphic from './browser-graphic'
 
-const Graphic = ({ section, graphicUrl }) => (
+const Graphic = ({ section, microcosmView }) => (
   <figure
     id={'graphic-' + section}
     className="section__graphic__figure"
     data-module="ObserveGraphic"
     data-section={section}
   >
-    <img src={graphicUrl} alt="TODO" />
+    {microcosmView || section === 0 || section == 9 ? (
+      <img
+        src={`/${section}-microcosm.png`}
+        className="microcosm-graphic"
+        alt="TODO"
+      />
+    ) : (
+      <BrowserGraphic />
+    )}
   </figure>
 )
 

packages/microcosm-www-next/src/components/index.js

@@ -0,0 +1,5 @@
+import Graphic from './graphic'
+import SideNav from './side-nav'
+import ToggleContainer from './toggle-container'
+
+export { Graphic, SideNav, ToggleContainer }

packages/microcosm-www-next/src/components/side-nav.js

@@ -13,14 +13,14 @@ const SideNav = ({ graphics, currentSection }) => {
   }
 
   return (
-    <aside className="section-nav">
+    <aside className="side-nav">
       <nav>
-        <ol className="section-nav__list">
+        <ol className="side-nav__list">
           {graphics.map(({ num, elem }) => (
             <li
               key={num}
               className={
-                'section-nav__list__link' +
+                'side-nav__list__link' +
                 (num === currentSection ? ' -active' : '')
               }
             >

packages/microcosm-www-next/src/components/toggle-container.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { BrowserIcon, PlanetIcon } from '../images'
+
+const ToggleContainer = ({ typeClass, microcosmView, switchView }) => (
+  <div className={'toggle-container ' + typeClass}>
+    <h3 className="section__content__subheading">
+      Meanwhile, in {microcosmView ? 'the browser' : 'Microcosm'}
+    </h3>
+    <button onClick={switchView} className="section__toggle-btn">
+      {microcosmView ? <BrowserIcon /> : <PlanetIcon />}
+      {microcosmView ? 'Browser View' : 'Microcosm View'}
+    </button>
+  </div>
+)
+
+export default ToggleContainer

packages/microcosm-www-next/src/data/index.json

@@ -1,27 +1,65 @@
 {
+  "0": {
+    "num": "Introduction",
+    "heading": "Welcome to Microcosm",
+    "microcosmText": "Intro lorem ipsum",
+    "browserText": "Intro lorem ipsum",
+    "bookend": true
+  },
   "1": {
     "num": "01.",
     "heading": "Rendering a View",
     "microcosmText": "The <a href='TODO'>Domains</a> are in charge of keeping state organized, and provide whatever data is necessary to the Presenter. A Presenter at its core is a React Component, so it uses the data it pulls from the Domains to render the appropriate view.",
-    "browserText": "A user fires up the browser to take a quiz.",
-    "microcosmUrl": "../static/images/v.png",
-    "browserUrl": "http://via.placeholder.com/400x400"
+    "browserText": "A user fires up the browser to take a quiz."
   },
   "2": {
     "num": "02.",
     "heading": "Creating an Action",
     "microcosmText": "The <a href='TODO'>Presenter</a> creates a new <a href='TODO'>Action</a> in response to the user's click. This particular Action's job will be to fetch some data from an external API on cats. Cool cats.",
-    "browserText": "A user selects an option from the quiz list.",
-    "microcosmUrl": "http://via.placeholder.com/500x500",
-    "browserUrl": "http://via.placeholder.com/300x300"
+    "browserText": "A user selects an option from the quiz list."
   },
   "3": {
     "num": "03.",
     "heading": "The Repository",
     "microcosmText": "The Repository (typically called the Repo) oversees everything that has to do with actions, history, and state. The Repo knows which domains care about what actions, and also has access to the History of actions. Let's see what that looks like... ",
-    "browserText": "Lorem Ipsum.",
-    "microcosmUrl": "http://via.placeholder.com/400x400",
-    "browserUrl": "http://via.placeholder.com/200x200"
+    "browserText": "Lorem Ipsum."
+  },
+  "4": {
+    "num": "04.",
+    "heading": "The Action Begins",
+    "microcosmText": "The Repository (typically called the Repo) oversees everything that has to do with actions, history, and state. The Repo knows which domains care about what actions, and also has access to the History of actions. Let's see what that looks like... ",
+    "browserText": "Lorem Ipsum."
+  },
+  "5": {
+    "num": "05.",
+    "heading": "History's Job",
+    "microcosmText": "The Repository (typically called the Repo) oversees everything that has to do with actions, history, and state. The Repo knows which domains care about what actions, and also has access to the History of actions. Let's see what that looks like... ",
+    "browserText": "Lorem Ipsum."
+  },
+  "6": {
+    "num": "06.",
+    "heading": "Domains Update the State",
+    "microcosmText": "As guardians of the application data, Domains are in charge of updating their state whenever an Action changes status. Here, they're alerted that the Cool Cat Action is now Open. The Modal Domain reacts by updating their state to specify that the modal is open but in a loading state. The Cat’s Domain doesn't care so they just sit there.",
+    "browserText": "The modal opens!"
+  },
+  "7": {
+    "num": "07.",
+    "heading": "Needs a Name",
+    "microcosmText": "The Repository (typically called the Repo) oversees everything that has to do with actions, history, and state. The Repo knows which domains care about what actions, and also has access to the History of actions. Let's see what that looks like... ",
+    "browserText": "Lorem Ipsum."
+  },
+  "8": {
+    "num": "08.",
+    "heading": "History Keeps Track of the Actions",
+    "microcosmText": "Clicking the 'X' triggers the action process all over again. The Presenter sends a new Action up to the Repo. The Action is immediately appended to History and gets to work on it's task. This time however, it doesn't have a slow API to work with like our Cool Cat Action (which is still waiting), it just has a simple message: 'Close the Modal!'. Since the Action is so straightforward, it skips the open step and jumps it's status straight to resolve. The Domains are alerted of the new activity - Close Modal Action is Resolved, and the Modal Domain adjusts it's state accordingly. Yet again, the Cats Domain doesn't care.",
+    "browserText": "Lorem Ipsum."
+  },
+  "9": {
+    "num": "Conclusion",
+    "heading": "Conclusion",
+    "microcosmText": "So that's a quick recap of Microcosm's players and how they work together. How Presenters push Actions up the hierarchy, how History watches over the Actions as they move through their status lifecycle, how Repos/Domains respond to keep state up to date, and how Presenters (completing the cycle) consume that state.<br>This is one of the simplest explanations of the functionality available when using Microcosm. Check out the documentation for examples and explanations of some of the more powerful features.<br>Under the hood there are loads of performance optimizations to ensure duplicate calculations are kept to a minimum, helping your application run as quickly as possible, leaving you to worry about the business logic. We have big plans for the future of Microcosm along these lines, aiming to maintain a strong balance between hyper-optimized and easy-to-use.",
+    "browserText": "So that's a quick recap of Microcosm's players and how they work together. How Presenters push Actions up the hierarchy, how History watches over the Actions as they move through their status lifecycle, how Repos/Domains respond to keep state up to date, and how Presenters (completing the cycle) consume that state.<br>This is one of the simplest explanations of the functionality available when using Microcosm. Check out the documentation for examples and explanations of some of the more powerful features.<br>Under the hood there are loads of performance optimizations to ensure duplicate calculations are kept to a minimum, helping your application run as quickly as possible, leaving you to worry about the business logic. We have big plans for the future of Microcosm along these lines, aiming to maintain a strong balance between hyper-optimized and easy-to-use.",
+    "bookend": true
   }
 }
 

packages/microcosm-www-next/src/images/browser-icon.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const BrowserIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    style={{ marginRight: '10px' }}
+    preserveAspectRatio
+  >
+    <path d="M22,3.2C22,2.5,21.5,2,20.8,2H3.2C2.5,2,2,2.5,2,3.2V15h20C22,15,22,3.2,22,3.2z M20,13H4V4h16V13z M22,16H2c-0.2,0.4-2,4.6-2,5c0,0.5,0.4,1,1,1h22c0.6,0,1-0.5,1-1C24,20.6,22.2,16.4,22,16z M9.8,21l0.5-1h3.5l0.5,1H9.8z" />
+  </svg>
+)
+
+export default BrowserIcon

packages/microcosm-www-next/src/images/index.js

@@ -0,0 +1,8 @@
+import menu from './menu.png'
+import cat from './cat.png'
+import VigetLogo from './viget-logo.js'
+import microcosmLogo from './microcosm-logo.png'
+import BrowserIcon from './browser-icon.js'
+import PlanetIcon from './planet-icon.js'
+
+export { menu, cat, VigetLogo, microcosmLogo, BrowserIcon, PlanetIcon }

packages/microcosm-www-next/src/images/planet-icon.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+const PlanetIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 69.7 69.4"
+    style={{ marginRight: '10px' }}
+    preserveAspectRatio
+  >
+    <g>
+      <path d="M59.5,15.3C56.7,22.1,50.7,31.3,41,41c-7.8,7.8-16.1,14-23.4,17.5c-0.8,0.4-1.6,0.7-2.3,1c-3.8-2.5-7-5.7-9.4-9.4c-1.4-2.1-2.5-4.5-3.4-6.9c-1.2-3.3-1.8-6.8-1.8-10.5c0-17.7,14.3-32,32-32c3.7,0,7.2,0.6,10.5,1.8c2.4,0.9,4.8,2,6.9,3.4C53.8,8.3,57.1,11.5,59.5,15.3z" />
+      <path d="M69.7,36.7c0,17.7-14.3,32-32,32c-3.7,0-7.2-0.6-10.5-1.8c7.4-3.9,15.5-10.1,23.1-17.7c7.6-7.6,13.8-15.7,17.7-23.1C69.1,29.5,69.7,33,69.7,36.7z" />
+    </g>
+    <g>
+      <path d="M65.9,22.2c-0.3,0.6-0.6,1.3-1,1.9C61,31.6,54.8,39.7,47.2,47.2C39.7,54.8,31.6,61,24.2,64.9c-0.6,0.4-1.3,0.7-1.9,1C17,68.4,13,69.4,9.9,69.4c-3.6,0-5.8-1.2-7.2-2.7C0,64-2,58.5,3.5,47.1c0.3-0.6,0.6-1.3,1-1.9c0.8,2.5,2,4.8,3.4,6.9C5.7,57.3,5.5,61,6.9,62.5c1.2,1.2,4.5,1.5,10.4-0.9c0.7-0.3,1.5-0.6,2.3-1C26.9,57,35.2,50.8,43,43c9.7-9.7,15.7-18.9,18.5-25.7c2.1-5.1,2.4-8.9,0.9-10.3c-0.5-0.5-1.5-0.9-3-0.9c-1.8,0-4.2,0.5-7.3,1.8c-2.1-1.4-4.4-2.5-6.9-3.4c0.6-0.4,1.3-0.7,1.9-1C58.5-2,64,0,66.7,2.7C69.4,5.3,71.4,10.9,65.9,22.2z" />
+    </g>
+  </svg>
+)
+
+export default PlanetIcon

packages/microcosm-www-next/src/layouts/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
 import Helmet from 'react-helmet'
-import VigetLogo from '../components/viget-logo'
+import { menu, VigetLogo, microcosmLogo } from '../images'
 import '../stylesheets/app.scss'
 
 const isBrowser = typeof window !== 'undefined'
@@ -17,10 +17,10 @@ const Navigation = () => (
     <div className="wrapper">
       <h1>
         <span className="screenreader-only">Microcosm</span>
-        <img src="./static/images/microcosm-logo.png" alt="" />
+        <img src={microcosmLogo} alt="" />
       </h1>
 
-      <img src="./static/images/menu.png" alt="menu" />
+      <img src={menu} alt="menu" />
     </div>
   </nav>
 )

packages/microcosm-www-next/src/pages/index.js

@@ -1,13 +1,12 @@
 import React from 'react'
 import data from '../data/index.json'
-import SideNav from '../components/side-nav'
-import Graphic from '../components/graphic'
+import { Graphic, SideNav, ToggleContainer } from '../components'
 
 export default class IndexPage extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      currentSection: 1,
+      currentSection: 0,
       graphicsMap: [],
       microcosmView: true,
       numSections: Object.keys(data)
@@ -81,10 +80,11 @@ export default class IndexPage extends React.Component {
   render() {
     let microcosmView = this.state.microcosmView
     let sectionData = data[this.state.currentSection]
+    let bookend = sectionData.bookend
+    let bookendClass = bookend ? '-end' : ''
     let text = microcosmView
       ? sectionData.microcosmText
       : sectionData.browserText
-    let browserClass = !microcosmView ? ' -browserView' : ''
 
     return (
       <div className="wrapper">
@@ -94,58 +94,45 @@ export default class IndexPage extends React.Component {
         />
 
         <section className="section">
-          <div className="toggle-container -mobile">
-            <h3
-              className={'section__content__subheading -bottom' + browserClass}
-            >
-              Meanwhile, in
-            </h3>
-            <button
-              onClick={this.switchView}
-              className={'section__toggle-btn' + browserClass}
+          {!bookend ? (
+            <ToggleContainer
+              typeClass="-mobile"
+              microcosmView={microcosmView}
+              switchView={this.switchView}
             />
-          </div>
-
+          ) : null}
           <div className="section__content">
             <div className="text-container">
               <h2 className="section__content__heading">
-                <span>{sectionData.num}</span>
+                <span className={bookendClass}>{sectionData.num}</span>
                 {sectionData.heading}
               </h2>
-              <h3
-                className={'section__content__subheading -top' + browserClass}
-              >
-                In
-              </h3>
+              {!bookend ? (
+                <h3 className="section__content__subheading">
+                  In {microcosmView ? 'Microcosm' : 'the browser'}
+                </h3>
+              ) : null}
               <p
-                className="section__content__text"
+                className={'section__content__text ' + bookendClass}
                 dangerouslySetInnerHTML={{ __html: text }}
               />
             </div>
 
-            <div className="toggle-container -desktop">
-              <h3
-                className={
-                  'section__content__subheading -bottom' + browserClass
-                }
-              >
-                Meanwhile, in
-              </h3>
-              <button
-                onClick={this.switchView}
-                className={'section__toggle-btn' + browserClass}
+            {!bookend ? (
+              <ToggleContainer
+                typeClass="-desktop"
+                microcosmView={microcosmView}
+                switchView={this.switchView}
               />
-            </div>
+            ) : null}
           </div>
 
           <div className="section__graphic">
             {this.state.numSections.map(num => (
               <Graphic
                 key={num}
-                section={num}
-                graphicUrl={
-                  microcosmView ? data[num].microcosmUrl : data[num].browserUrl
-                }
+                section={parseInt(num)}
+                microcosmView={microcosmView}
               />
             ))}
           </div>

packages/microcosm-www-next/src/stylesheets/app.scss

@@ -21,8 +21,9 @@
 @import 'structure/body';
 @import 'structure/nav';
 @import 'structure/section';
-@import 'structure/aside';
 @import 'structure/footer';
 
 // components (page level blocks and components)
-// @import 'components/*';
+@import 'components/browser-graphic';
+@import 'components/side-nav';
+@import 'components/toggle-container';

packages/microcosm-www-next/src/stylesheets/base/_elements.scss

@@ -9,7 +9,6 @@
 }
 
 body {
-  color: color(text);
   @include font-family-regular;
   letter-spacing: 0.02em;
 }