From b777a8ed5cd24767294b7e489133a6ecceb00ea3 Mon Sep 17 00:00:00 2001
From: Brian Miller <mills_77_77@hotmail.com>
Date: Tue, 31 Jul 2018 09:13:14 -0500
Subject: [PATCH 01/13] Added Fallback logic on header not having an image

---
 src/components/Story/Body.jsx       | 11 ++++++++++-
 src/components/Story/Header.jsx     | 27 ++++++++++++++++-----------
 src/components/Story/HeaderText.jsx | 25 +++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Story/HeaderText.jsx

diff --git a/src/components/Story/Body.jsx b/src/components/Story/Body.jsx
index 9220cee..276eacb 100644
--- a/src/components/Story/Body.jsx
+++ b/src/components/Story/Body.jsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Imgix from '../Imgix';
 import { Container } from 'reactstrap';
 
 const Body = (props) => {
   const {
-    body, teaser,
+    body, advertiser, teaser,
   } = props;
 
   const createMarkup = html => ({ __html: html });
@@ -62,6 +63,7 @@ const Body = (props) => {
         }
       `}
       </style>
+      <Imgix src={advertiser.logo.src} title={advertiser.name} fit="clip" w="300" h="50" />
       <Container className="shadow-lg p-3 mb-4 p-lg-5 bg-white rounded">
         <h2 className="mb-4 font-weight-light font-italic teaser">
           {teaser}
@@ -76,10 +78,17 @@ const Body = (props) => {
 
 Body.defaultProps = {
   teaser: '',
+  advertiser: {
+    name: '',
+    logo: {
+      src: '',
+    },
+  },
 };
 
 Body.propTypes = {
   teaser: PropTypes.string,
+  advertiser: PropTypes.object,
   body: PropTypes.string.isRequired,
 };
 
diff --git a/src/components/Story/Header.jsx b/src/components/Story/Header.jsx
index b9c051e..f9eb7bd 100644
--- a/src/components/Story/Header.jsx
+++ b/src/components/Story/Header.jsx
@@ -3,16 +3,28 @@ import PropTypes from 'prop-types';
 import Head from 'next/head';
 import { Row, Col, Container } from 'reactstrap';
 import Imgix from '../Imgix';
+import HeaderText from './HeaderText';
 import HeaderStyle from './HeaderStyle';
 
 const Header = (props) => {
   const {
     title,
+    teaser,
     primaryImgSrc,
     primaryImgCaption,
-    teaser,
   } = props;
 
+  const headerHTML = primaryImgSrc
+    ?
+    <Imgix tag="div" className="d-flex bg-imgIx img-fluid" src={primaryImgSrc} alt={primaryImgCaption} title={title} w="1200" h="600" fit="crop" crop="faces,edges">
+      <HeaderText title={title} />
+    </Imgix>
+    :
+    <div className="d-flex bg-imgIx">
+      <HeaderText title={title} />
+    </div>
+    ;
+
   return (
     <div className="story-header">
       <HeaderStyle />
@@ -20,15 +32,7 @@ const Header = (props) => {
         <title>{title}</title>
         <meta name="description" story={teaser} />
       </Head>
-      <Imgix tag="div" className="d-flex bg-imgIx img-fluid" src={primaryImgSrc} alt={primaryImgCaption} title={title} w="1200" h="600" fit="crop" crop="faces,edges">
-        <Container className="align-self-center">
-          <Row>
-            <Col className="post-heading">
-              <h1 className="p-2 text-white">{title}</h1>
-            </Col>
-          </Row>
-        </Container>
-      </Imgix>
+      {headerHTML}
     </div>
   );
 };
@@ -36,12 +40,13 @@ const Header = (props) => {
 Header.defaultProps = {
   teaser: '',
   primaryImgCaption: '',
+  primaryImgSrc: '',
 };
 
 Header.propTypes = {
   title: PropTypes.string.isRequired,
   teaser: PropTypes.string,
-  primaryImgSrc: PropTypes.string.isRequired,
+  primaryImgSrc: PropTypes.string,
   primaryImgCaption: PropTypes.string,
 };
 
diff --git a/src/components/Story/HeaderText.jsx b/src/components/Story/HeaderText.jsx
new file mode 100644
index 0000000..94be030
--- /dev/null
+++ b/src/components/Story/HeaderText.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col, Container } from 'reactstrap';
+
+const HeaderText = (props) => {
+  const {
+    title,
+  } = props;
+
+  return (
+    <Container className="align-self-center">
+      <Row>
+        <Col className="post-heading">
+          <h1 className="p-2 text-white">{title}</h1>
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+HeaderText.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+
+export default HeaderText;

From c91f85cf6d91ac0a1c1005c0d7a4dabd0f908d39 Mon Sep 17 00:00:00 2001
From: Brian Miller <mills_77_77@hotmail.com>
Date: Tue, 31 Jul 2018 10:17:53 -0500
Subject: [PATCH 02/13] Add Story Provider and Advertiser to Nav

---
 src/components/Navbar.jsx        | 30 ++++++++++++++----
 src/components/NavbarStyle.jsx   |  2 +-
 src/components/Story/Body.jsx    |  1 -
 src/components/StoryProvider.jsx | 32 +++++++++++++++++++
 src/pages/story.jsx              | 53 ++++++++++++--------------------
 5 files changed, 77 insertions(+), 41 deletions(-)
 create mode 100644 src/components/StoryProvider.jsx

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 110da1f..80d5de2 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -2,14 +2,14 @@ import React from 'react';
 import Link from 'next/link';
 import { Navbar, NavbarBrand, Nav } from 'reactstrap';
 import NavbarStyle from './NavbarStyle';
-// import Imgix from './Imgix';
+import { StoryContext } from './StoryProvider';
+import Imgix from './Imgix';
 // import { AccountContext } from './AccountProvider';
 
 export default () => (
   <Navbar expand fixed="top">
     <NavbarStyle />
-    <Link href="/" passHref>
-      <NavbarBrand>
+      <Nav className="position-absolute">
         {/* <AccountContext.Consumer>
           {({ branding }) => {
             return (
@@ -23,9 +23,27 @@ export default () => (
               />
           ) }}
         </AccountContext.Consumer> */}
-      </NavbarBrand>
-    </Link>
-    <Nav className="mr-auto" navbar>
+      </Nav>
+    <Nav className="mx-auto navbar-logo" navbar>
+      <StoryContext.Consumer>
+        {({ story }) => {
+          if (story.advertiser && story.advertiser.logo) {
+            return(
+              <Imgix
+                className="d-flex bg-imgIx img-fluid"
+                src={story.advertiser.logo.src}
+                alt={story.advertiser.name}
+                title={story.advertiser.name}
+                w="300"
+                h="50"
+                fit="clip"
+              />
+            )
+          } else {
+            return;
+          }
+        }}
+      </StoryContext.Consumer>
       {/* <ActiveNavItem href="/" title="Home">Home</ActiveNavItem>
       <ActiveNavItem href="/about" title="About">About</ActiveNavItem> */}
     </Nav>
diff --git a/src/components/NavbarStyle.jsx b/src/components/NavbarStyle.jsx
index d5d213e..1630861 100644
--- a/src/components/NavbarStyle.jsx
+++ b/src/components/NavbarStyle.jsx
@@ -5,7 +5,7 @@ export default () => (
     nav.fixed-top {
       transition: top 0.1s ease-in-out;
       transition: background-color 0.1s ease-in-out;
-      background-color: transparent;
+      background-color: #000;
     }
     .fixed-top.nav-down {
       background-color: rgba(0,0,0,0.75);
diff --git a/src/components/Story/Body.jsx b/src/components/Story/Body.jsx
index 276eacb..f5cac42 100644
--- a/src/components/Story/Body.jsx
+++ b/src/components/Story/Body.jsx
@@ -63,7 +63,6 @@ const Body = (props) => {
         }
       `}
       </style>
-      <Imgix src={advertiser.logo.src} title={advertiser.name} fit="clip" w="300" h="50" />
       <Container className="shadow-lg p-3 mb-4 p-lg-5 bg-white rounded">
         <h2 className="mb-4 font-weight-light font-italic teaser">
           {teaser}
diff --git a/src/components/StoryProvider.jsx b/src/components/StoryProvider.jsx
new file mode 100644
index 0000000..902f369
--- /dev/null
+++ b/src/components/StoryProvider.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Query } from 'react-apollo';
+import PropTypes from 'prop-types';
+import query from '../gql/story.graphql';
+
+export const StoryContext = React.createContext({});
+
+export const StoryProvider = (props) => {
+  const input = { id: props.id };
+  return (
+    <Query query={query} variables={{ input }}>
+      {({ error, data }) => {
+        if (error) return <p><strong>{error.message}</strong></p>;
+        return (
+          <StoryContext.Provider value={data}>
+            {props.children}
+          </StoryContext.Provider>
+        );
+      }}
+    </Query>
+  );
+};
+
+StoryProvider.propTypes = {
+  id: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+
+};
+
diff --git a/src/pages/story.jsx b/src/pages/story.jsx
index af76d6f..2035e8c 100644
--- a/src/pages/story.jsx
+++ b/src/pages/story.jsx
@@ -1,47 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Query } from 'react-apollo';
 import Analytics from '../components/Analytics';
 import PageWrapper from '../components/PageWrapper';
 import Header from '../components/Story/Header';
 import Body from '../components/Story/Body';
 import withApollo from '../apollo/client';
-import gql from '../gql/story.graphql';
 import { AccountContext } from '../components/AccountProvider';
+import { StoryContext, StoryProvider } from '../components/StoryProvider';
 
-const Story = ({ id }) => {
-  const input = { id };
-  return (
+const Story = ({ id }) => (
+  <StoryProvider id={id}>
     <PageWrapper>
-      <Query query={gql} variables={{ input }}>
-        {({ loading, error, data }) => {
-          if (loading) {
-            return (
-              <p>Loading...</p>
-            );
-          }
-          if (error) return <p><strong>{error.message}</strong></p>;
-
-          const { story } = data;
-
-          return (
-            <div className="story-wrapper">
-              <AccountContext.Consumer>
-                {({ account }) => <Analytics accountKey={account.key} storyId={story.id} /> }
-              </AccountContext.Consumer>
-              <Header
-                title={story.title}
-                primaryImgSrc={story.primaryImage.src}
-                primaryImgCaption={story.primaryImage.caption}
-              />
-              <Body teaser={story.teaser} body={story.body} />
-            </div>
-          );
-        }}
-      </Query>
+      <StoryContext.Consumer>
+        {({ story }) => (
+          <div className="story-wrapper">
+            <AccountContext.Consumer>
+              {({ account }) => <Analytics accountKey={account.key} storyId={story.id} /> }
+            </AccountContext.Consumer>
+            <Header
+              title={story.title}
+              primaryImgSrc={story.primaryImage.src}
+              primaryImgCaption={story.primaryImage.caption}
+            />
+            <Body teaser={story.teaser} body={story.body} />
+          </div>
+        )}
+      </StoryContext.Consumer>
     </PageWrapper>
-  );
-};
+  </StoryProvider>
+);
 
 Story.getInitialProps = async ({ query }) => {
   const { id } = query;

From 1aba3690beb3032cf8e41516d29e6d30f10e90e3 Mon Sep 17 00:00:00 2001
From: Brian Miller <mills_77_77@hotmail.com>
Date: Tue, 31 Jul 2018 10:24:15 -0500
Subject: [PATCH 03/13] updated header html component

---
 src/components/Story/Header.jsx     | 17 ++--------
 src/components/Story/HeaderHtml.jsx | 52 +++++++++++++++++++++++++++++
 src/components/Story/HeaderText.jsx | 25 --------------
 3 files changed, 54 insertions(+), 40 deletions(-)
 create mode 100644 src/components/Story/HeaderHtml.jsx
 delete mode 100644 src/components/Story/HeaderText.jsx

diff --git a/src/components/Story/Header.jsx b/src/components/Story/Header.jsx
index f9eb7bd..573d36c 100644
--- a/src/components/Story/Header.jsx
+++ b/src/components/Story/Header.jsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Head from 'next/head';
-import { Row, Col, Container } from 'reactstrap';
-import Imgix from '../Imgix';
-import HeaderText from './HeaderText';
 import HeaderStyle from './HeaderStyle';
+import HeaderHtml from './HeaderHtml';
 
 const Header = (props) => {
   const {
@@ -14,17 +12,6 @@ const Header = (props) => {
     primaryImgCaption,
   } = props;
 
-  const headerHTML = primaryImgSrc
-    ?
-    <Imgix tag="div" className="d-flex bg-imgIx img-fluid" src={primaryImgSrc} alt={primaryImgCaption} title={title} w="1200" h="600" fit="crop" crop="faces,edges">
-      <HeaderText title={title} />
-    </Imgix>
-    :
-    <div className="d-flex bg-imgIx">
-      <HeaderText title={title} />
-    </div>
-    ;
-
   return (
     <div className="story-header">
       <HeaderStyle />
@@ -32,7 +19,7 @@ const Header = (props) => {
         <title>{title}</title>
         <meta name="description" story={teaser} />
       </Head>
-      {headerHTML}
+      <HeaderHtml title={title} primaryImgSrc={primaryImgSrc} primaryImgCaption={primaryImgCaption}/>
     </div>
   );
 };
diff --git a/src/components/Story/HeaderHtml.jsx b/src/components/Story/HeaderHtml.jsx
new file mode 100644
index 0000000..c97546d
--- /dev/null
+++ b/src/components/Story/HeaderHtml.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col, Container } from 'reactstrap';
+import Imgix from '../Imgix';
+
+const HeaderHtml = (props) => {
+  const {
+    title,
+    primaryImgSrc,
+    primaryImgCaption,
+  } = props;
+
+  if (primaryImgSrc) {
+    return (
+      <Imgix tag="div" className="d-flex bg-imgIx img-fluid" src={primaryImgSrc} alt={primaryImgCaption} title={title} w="1200" h="600" fit="crop" crop="faces,edges">
+        <Container className="align-self-center">
+          <Row>
+            <Col className="post-heading">
+              <h1 className="p-2 text-white">{title}</h1>
+            </Col>
+          </Row>
+        </Container>
+      </Imgix>
+    );
+  } else {
+      return (
+        <div className="d-flex bg-imgIx">
+          <Container className="align-self-center">
+            <Row>
+              <Col className="post-heading">
+                <h1 className="p-2 text-white">{title}</h1>
+              </Col>
+            </Row>
+          </Container>
+        </div>
+      );
+    }
+};
+
+HeaderHtml.propTypes = {
+  title: '',
+  primaryImgCaption: '',
+  primaryImgSrc: '',
+};
+
+HeaderHtml.propTypes = {
+  teaser: PropTypes.string,
+  primaryImgSrc: PropTypes.string,
+  primaryImgCaption: PropTypes.string,
+};
+
+export default HeaderHtml;
diff --git a/src/components/Story/HeaderText.jsx b/src/components/Story/HeaderText.jsx
deleted file mode 100644
index 94be030..0000000
--- a/src/components/Story/HeaderText.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Row, Col, Container } from 'reactstrap';
-
-const HeaderText = (props) => {
-  const {
-    title,
-  } = props;
-
-  return (
-    <Container className="align-self-center">
-      <Row>
-        <Col className="post-heading">
-          <h1 className="p-2 text-white">{title}</h1>
-        </Col>
-      </Row>
-    </Container>
-  );
-};
-
-HeaderText.propTypes = {
-  title: PropTypes.string.isRequired,
-};
-
-export default HeaderText;

From c73ed8838260c9f4eac7fabcf68db38b25a41083 Mon Sep 17 00:00:00 2001
From: Brian Miller <mills_77_77@hotmail.com>
Date: Tue, 31 Jul 2018 10:44:21 -0500
Subject: [PATCH 04/13] Fix all the errors

---
 src/components/Navbar.jsx           | 44 +++++++++++++++--------------
 src/components/Story/Body.jsx       | 10 +------
 src/components/Story/Header.jsx     |  6 +++-
 src/components/Story/HeaderHtml.jsx | 29 +++++++++----------
 4 files changed, 43 insertions(+), 46 deletions(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 80d5de2..66f2d41 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import Link from 'next/link';
-import { Navbar, NavbarBrand, Nav } from 'reactstrap';
+import { Navbar, Nav } from 'reactstrap';
 import NavbarStyle from './NavbarStyle';
 import { StoryContext } from './StoryProvider';
 import Imgix from './Imgix';
@@ -9,26 +8,26 @@ import Imgix from './Imgix';
 export default () => (
   <Navbar expand fixed="top">
     <NavbarStyle />
-      <Nav className="position-absolute">
-        {/* <AccountContext.Consumer>
-          {({ branding }) => {
-            return (
-              <Imgix
-                className="d-flex bg-imgIx img-fluid"
-                src={branding.logo.url}
-                alt={branding.name}
-                title={branding.name}
-                w="250"
-                h="45"
-              />
-          ) }}
-        </AccountContext.Consumer> */}
-      </Nav>
+    <Nav className="position-absolute">
+      {/* <AccountContext.Consumer>
+        {({ branding }) => {
+          return (
+            <Imgix
+              className="d-flex bg-imgIx img-fluid"
+              src={branding.logo.url}
+              alt={branding.name}
+              title={branding.name}
+              w="250"
+              h="45"
+            />
+        ) }}
+      </AccountContext.Consumer> */}
+    </Nav>
     <Nav className="mx-auto navbar-logo" navbar>
       <StoryContext.Consumer>
         {({ story }) => {
           if (story.advertiser && story.advertiser.logo) {
-            return(
+            return (
               <Imgix
                 className="d-flex bg-imgIx img-fluid"
                 src={story.advertiser.logo.src}
@@ -38,10 +37,13 @@ export default () => (
                 h="50"
                 fit="clip"
               />
-            )
-          } else {
-            return;
+            );
           }
+          return (
+            {/*
+              figure out what to put instead of advertiser
+            */}
+          );
         }}
       </StoryContext.Consumer>
       {/* <ActiveNavItem href="/" title="Home">Home</ActiveNavItem>
diff --git a/src/components/Story/Body.jsx b/src/components/Story/Body.jsx
index f5cac42..9220cee 100644
--- a/src/components/Story/Body.jsx
+++ b/src/components/Story/Body.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Imgix from '../Imgix';
 import { Container } from 'reactstrap';
 
 const Body = (props) => {
   const {
-    body, advertiser, teaser,
+    body, teaser,
   } = props;
 
   const createMarkup = html => ({ __html: html });
@@ -77,17 +76,10 @@ const Body = (props) => {
 
 Body.defaultProps = {
   teaser: '',
-  advertiser: {
-    name: '',
-    logo: {
-      src: '',
-    },
-  },
 };
 
 Body.propTypes = {
   teaser: PropTypes.string,
-  advertiser: PropTypes.object,
   body: PropTypes.string.isRequired,
 };
 
diff --git a/src/components/Story/Header.jsx b/src/components/Story/Header.jsx
index 573d36c..879e390 100644
--- a/src/components/Story/Header.jsx
+++ b/src/components/Story/Header.jsx
@@ -19,7 +19,11 @@ const Header = (props) => {
         <title>{title}</title>
         <meta name="description" story={teaser} />
       </Head>
-      <HeaderHtml title={title} primaryImgSrc={primaryImgSrc} primaryImgCaption={primaryImgCaption}/>
+      <HeaderHtml
+        title={title}
+        primaryImgSrc={primaryImgSrc}
+        primaryImgCaption={primaryImgCaption}
+      />
     </div>
   );
 };
diff --git a/src/components/Story/HeaderHtml.jsx b/src/components/Story/HeaderHtml.jsx
index c97546d..ba2747d 100644
--- a/src/components/Story/HeaderHtml.jsx
+++ b/src/components/Story/HeaderHtml.jsx
@@ -22,29 +22,28 @@ const HeaderHtml = (props) => {
         </Container>
       </Imgix>
     );
-  } else {
-      return (
-        <div className="d-flex bg-imgIx">
-          <Container className="align-self-center">
-            <Row>
-              <Col className="post-heading">
-                <h1 className="p-2 text-white">{title}</h1>
-              </Col>
-            </Row>
-          </Container>
-        </div>
-      );
-    }
+  }
+  return (
+    <div className="d-flex bg-imgIx">
+      <Container className="align-self-center">
+        <Row>
+          <Col className="post-heading">
+            <h1 className="p-2 text-white">{title}</h1>
+          </Col>
+        </Row>
+      </Container>
+    </div>
+  );
 };
 
-HeaderHtml.propTypes = {
+HeaderHtml.defaultProps = {
   title: '',
   primaryImgCaption: '',
   primaryImgSrc: '',
 };
 
 HeaderHtml.propTypes = {
-  teaser: PropTypes.string,
+  title: PropTypes.string,
   primaryImgSrc: PropTypes.string,
   primaryImgCaption: PropTypes.string,
 };

From 69cf00b14afcdcbe23ae450c39530cf4a79fbe25 Mon Sep 17 00:00:00 2001
From: Brian Miller <mills_77_77@hotmail.com>
Date: Tue, 31 Jul 2018 10:56:21 -0500
Subject: [PATCH 05/13] update header logic

---
 src/components/Story/Header.jsx     | 25 ++++++++++----
 src/components/Story/HeaderHtml.jsx | 51 -----------------------------
 2 files changed, 19 insertions(+), 57 deletions(-)
 delete mode 100644 src/components/Story/HeaderHtml.jsx

diff --git a/src/components/Story/Header.jsx b/src/components/Story/Header.jsx
index 879e390..2fcc91a 100644
--- a/src/components/Story/Header.jsx
+++ b/src/components/Story/Header.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Head from 'next/head';
+import { Row, Col, Container } from 'reactstrap';
 import HeaderStyle from './HeaderStyle';
-import HeaderHtml from './HeaderHtml';
+import Imgix from '../Imgix';
 
 const Header = (props) => {
   const {
@@ -12,6 +13,16 @@ const Header = (props) => {
     primaryImgCaption,
   } = props;
 
+  const contents = (
+    <Container className="align-self-center">
+      <Row>
+        <Col className="post-heading">
+          <h1 className="p-2 text-white">{title}</h1>
+        </Col>
+      </Row>
+    </Container>
+  );
+
   return (
     <div className="story-header">
       <HeaderStyle />
@@ -19,11 +30,13 @@ const Header = (props) => {
         <title>{title}</title>
         <meta name="description" story={teaser} />
       </Head>
-      <HeaderHtml
-        title={title}
-        primaryImgSrc={primaryImgSrc}
-        primaryImgCaption={primaryImgCaption}
-      />
+      {primaryImgSrc ? (
+        <Imgix tag="div" className="d-flex bg-imgIx img-fluid" src={primaryImgSrc} alt={primaryImgCaption} title={title} w="1200" h="600" fit="crop" crop="faces,edges">
+          {contents}
+        </Imgix>
+      ) : (
+        { contents }
+      )};
     </div>
   );
 };
diff --git a/src/components/Story/HeaderHtml.jsx b/src/components/Story/HeaderHtml.jsx
deleted file mode 100644
index ba2747d..0000000
--- a/src/components/Story/HeaderHtml.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Row, Col, Container } from 'reactstrap';
-import Imgix from '../Imgix';
-
-const HeaderHtml = (props) => {
-  const {
-    title,
-    primaryImgSrc,
-    primaryImgCaption,
-  } = props;
-
-  if (primaryImgSrc) {
-    return (
-      <Imgix tag="div" className="d-flex bg-imgIx img-fluid" src={primaryImgSrc} alt={primaryImgCaption} title={title} w="1200" h="600" fit="crop" crop="faces,edges">
-        <Container className="align-self-center">
-          <Row>
-            <Col className="post-heading">
-              <h1 className="p-2 text-white">{title}</h1>
-            </Col>
-          </Row>
-        </Container>
-      </Imgix>
-    );
-  }
-  return (
-    <div className="d-flex bg-imgIx">
-      <Container className="align-self-center">
-        <Row>
-          <Col className="post-heading">
-            <h1 className="p-2 text-white">{title}</h1>
-          </Col>
-        </Row>
-      </Container>
-    </div>
-  );
-};
-
-HeaderHtml.defaultProps = {
-  title: '',
-  primaryImgCaption: '',
-  primaryImgSrc: '',
-};
-
-HeaderHtml.propTypes = {
-  title: PropTypes.string,
-  primaryImgSrc: PropTypes.string,
-  primaryImgCaption: PropTypes.string,
-};
-
-export default HeaderHtml;

From e0b6d61782f9dfc845caa0ab8157e4d2b4a4b36a Mon Sep 17 00:00:00 2001
From: Brian Miller <mills_77_77@hotmail.com>
Date: Thu, 2 Aug 2018 07:54:17 -0500
Subject: [PATCH 06/13] fixed imgix fit params for logo and main image

---
 src/components/Navbar.jsx       | 2 +-
 src/components/Story/Header.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 66f2d41..503e7d2 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -35,7 +35,7 @@ export default () => (
                 title={story.advertiser.name}
                 w="300"
                 h="50"
-                fit="clip"
+                fit="max"
               />
             );
           }
diff --git a/src/components/Story/Header.jsx b/src/components/Story/Header.jsx
index 2fcc91a..aa74682 100644
--- a/src/components/Story/Header.jsx
+++ b/src/components/Story/Header.jsx
@@ -31,7 +31,7 @@ const Header = (props) => {
         <meta name="description" story={teaser} />
       </Head>
       {primaryImgSrc ? (
-        <Imgix tag="div" className="d-flex bg-imgIx img-fluid" src={primaryImgSrc} alt={primaryImgCaption} title={title} w="1200" h="600" fit="crop" crop="faces,edges">
+        <Imgix tag="div" className="d-flex bg-imgIx img-fluid" src={primaryImgSrc} alt={primaryImgCaption} title={title} w="1200" h="600" fit="crop" crop="focal">
           {contents}
         </Imgix>
       ) : (

From 09e4c06aaea05df8945b1848a1256e95f1bd287d Mon Sep 17 00:00:00 2001
From: Brian Miller <mills_77_77@hotmail.com>
Date: Thu, 2 Aug 2018 07:54:47 -0500
Subject: [PATCH 07/13] Adjusted Header to match rest of the user facing looks.

---
 src/components/NavbarStyle.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/NavbarStyle.jsx b/src/components/NavbarStyle.jsx
index 1630861..52514c7 100644
--- a/src/components/NavbarStyle.jsx
+++ b/src/components/NavbarStyle.jsx
@@ -5,7 +5,8 @@ export default () => (
     nav.fixed-top {
       transition: top 0.1s ease-in-out;
       transition: background-color 0.1s ease-in-out;
-      background-color: #000;
+      background-color: #fff;
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.50), 0 2px 10px 0 rgba(0, 0, 0, 0.50);
     }
     .fixed-top.nav-down {
       background-color: rgba(0,0,0,0.75);

From decf7b98be93c41f72469040eba3bfca679562e9 Mon Sep 17 00:00:00 2001
From: Brian Miller <mills_77_77@hotmail.com>
Date: Thu, 2 Aug 2018 08:03:21 -0500
Subject: [PATCH 08/13] fix image fall back error

---
 src/components/Story/Header.jsx | 4 +++-
 src/pages/story.jsx             | 1 -
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Story/Header.jsx b/src/components/Story/Header.jsx
index aa74682..513844f 100644
--- a/src/components/Story/Header.jsx
+++ b/src/components/Story/Header.jsx
@@ -35,7 +35,9 @@ const Header = (props) => {
           {contents}
         </Imgix>
       ) : (
-        { contents }
+        <div className="d-flex bg-imgIx">
+          {contents}
+        </div>
       )};
     </div>
   );
diff --git a/src/pages/story.jsx b/src/pages/story.jsx
index 2035e8c..dfa34a5 100644
--- a/src/pages/story.jsx
+++ b/src/pages/story.jsx
@@ -19,7 +19,6 @@ const Story = ({ id }) => (
             </AccountContext.Consumer>
             <Header
               title={story.title}
-              primaryImgSrc={story.primaryImage.src}
               primaryImgCaption={story.primaryImage.caption}
             />
             <Body teaser={story.teaser} body={story.body} />

From 2a2e8b2e93750a039912c4a0a17089881ccf64e1 Mon Sep 17 00:00:00 2001
From: Brian Miller <mills_77_77@hotmail.com>
Date: Thu, 2 Aug 2018 08:04:56 -0500
Subject: [PATCH 09/13] didnt mean to commit this :(

---
 src/pages/story.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/story.jsx b/src/pages/story.jsx
index dfa34a5..2035e8c 100644
--- a/src/pages/story.jsx
+++ b/src/pages/story.jsx
@@ -19,6 +19,7 @@ const Story = ({ id }) => (
             </AccountContext.Consumer>
             <Header
               title={story.title}
+              primaryImgSrc={story.primaryImage.src}
               primaryImgCaption={story.primaryImage.caption}
             />
             <Body teaser={story.teaser} body={story.body} />

From 12f0d674640cde7425ed502818fe8485539c3afb Mon Sep 17 00:00:00 2001
From: Brian Miller <mills_77_77@hotmail.com>
Date: Thu, 2 Aug 2018 08:14:35 -0500
Subject: [PATCH 10/13] not suppose to be there

---
 src/components/Story/Header.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Story/Header.jsx b/src/components/Story/Header.jsx
index 513844f..770a48c 100644
--- a/src/components/Story/Header.jsx
+++ b/src/components/Story/Header.jsx
@@ -31,14 +31,14 @@ const Header = (props) => {
         <meta name="description" story={teaser} />
       </Head>
       {primaryImgSrc ? (
-        <Imgix tag="div" className="d-flex bg-imgIx img-fluid" src={primaryImgSrc} alt={primaryImgCaption} title={title} w="1200" h="600" fit="crop" crop="focal">
+        <Imgix tag="div" className="d-flex bg-imgIx img-fluid" src={primaryImgSrc} alt={primaryImgCaption} title={title} w="1200" h="600" fit="crop" crop="facial,edge">
           {contents}
         </Imgix>
       ) : (
         <div className="d-flex bg-imgIx">
           {contents}
         </div>
-      )};
+      )}
     </div>
   );
 };

From 725cdd6838318df06f2e8753797ee5cd983fabce Mon Sep 17 00:00:00 2001
From: Brian Miller <mills_77_77@hotmail.com>
Date: Thu, 2 Aug 2018 13:59:37 -0500
Subject: [PATCH 11/13] Added cname link to header

---
 src/components/Navbar.jsx            | 85 +++++++++++++++-------------
 src/components/Story/HeaderStyle.jsx | 33 ++++++++---
 2 files changed, 72 insertions(+), 46 deletions(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 503e7d2..114ddf5 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,53 +1,60 @@
 import React from 'react';
-import { Navbar, Nav } from 'reactstrap';
+import { Navbar, Nav, Container } from 'reactstrap';
 import NavbarStyle from './NavbarStyle';
 import { StoryContext } from './StoryProvider';
 import Imgix from './Imgix';
 // import { AccountContext } from './AccountProvider';
 
 export default () => (
-  <Navbar expand fixed="top">
+  <Container className="fixed-top bg-white px-0" fluid>
     <NavbarStyle />
-    <Nav className="position-absolute">
-      {/* <AccountContext.Consumer>
-        {({ branding }) => {
-          return (
-            <Imgix
-              className="d-flex bg-imgIx img-fluid"
-              src={branding.logo.url}
-              alt={branding.name}
-              title={branding.name}
-              w="250"
-              h="45"
-            />
-        ) }}
-      </AccountContext.Consumer> */}
-    </Nav>
-    <Nav className="mx-auto navbar-logo" navbar>
-      <StoryContext.Consumer>
-        {({ story }) => {
-          if (story.advertiser && story.advertiser.logo) {
+    <Navbar id="publisher-bar" className="small d-flex flex-row justify-content-start bg-dark">
+      <div class="arrow-left align-self-center mr-1"/>
+      <small class="text-uppercase align-self-center mr-1 text-white">[cname].com</small>
+    </Navbar>
+    <Navbar id="branding-bar" expand>
+      <NavbarStyle />
+      <Nav className="position-absolute">
+        {/* <AccountContext.Consumer>
+          {({ branding }) => {
             return (
               <Imgix
                 className="d-flex bg-imgIx img-fluid"
-                src={story.advertiser.logo.src}
-                alt={story.advertiser.name}
-                title={story.advertiser.name}
-                w="300"
-                h="50"
-                fit="max"
+                src={branding.logo.url}
+                alt={branding.name}
+                title={branding.name}
+                w="250"
+                h="45"
               />
+          ) }}
+        </AccountContext.Consumer> */}
+      </Nav>
+      <Nav className="mx-auto navbar-logo" navbar>
+        <StoryContext.Consumer>
+          {({ story }) => {
+            if (story.advertiser && story.advertiser.logo) {
+              return (
+                <Imgix
+                  className="d-flex bg-imgIx img-fluid"
+                  src={story.advertiser.logo.src}
+                  alt={story.advertiser.name}
+                  title={story.advertiser.name}
+                  w="300"
+                  h="50"
+                  fit="max"
+                />
+              );
+            }
+            return (
+              {/*
+                figure out what to put instead of advertiser
+              */}
             );
-          }
-          return (
-            {/*
-              figure out what to put instead of advertiser
-            */}
-          );
-        }}
-      </StoryContext.Consumer>
-      {/* <ActiveNavItem href="/" title="Home">Home</ActiveNavItem>
-      <ActiveNavItem href="/about" title="About">About</ActiveNavItem> */}
-    </Nav>
-  </Navbar>
+          }}
+        </StoryContext.Consumer>
+        {/* <ActiveNavItem href="/" title="Home">Home</ActiveNavItem>
+        <ActiveNavItem href="/about" title="About">About</ActiveNavItem> */}
+      </Nav>
+    </Navbar>
+  </Container>
 );
diff --git a/src/components/Story/HeaderStyle.jsx b/src/components/Story/HeaderStyle.jsx
index a425a2c..7a2dfca 100644
--- a/src/components/Story/HeaderStyle.jsx
+++ b/src/components/Story/HeaderStyle.jsx
@@ -16,7 +16,12 @@ export default () => (
       height: 80vh;
       background: url() center/cover no-repeat fixed;
     }
-
+    #publisher-bar {
+      box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25), 0 2px 5px 0 rgba(0,0,0,0.25)
+    }
+    #branding-bar {
+      box-shadow: 0 16px 28px 0 rgba(0,0,0,0.22), 0 25px 55px 0 rgba(0,0,0,0.21);
+    }
     div.bg-imgIx:before {
       backgound: transparent;
       transition: background 0.5s linear;
@@ -37,6 +42,26 @@ export default () => (
       transition: background 1.5s ease-out;
     }
 
+    .arrow-left {
+      width: 0;
+      height: 0;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+
+      border-right:5px solid #fff;
+    }
+
+    .post-heading h1 {
+      color: #fff;
+      font-size: 5vmax;
+      font-family: 'Ubuntu', sans-serif;
+    }
+    @media screen and (min-width: 1200px) {
+      .post-heading h1 {
+        font-size: 60px;
+      }
+    }
+
     @media screen and (min-width: 1600px) {
       div.bg-imgIx:before {
         background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 300px, rgba(0,0,0,0.25) calc(100% - 300px), rgba(0,0,0,1) 100%); /* FF3.6-15 */
@@ -48,12 +73,6 @@ export default () => (
         margin-right: auto;
       }
     }
-
-    .post-heading h1 {
-      color: #fff;
-      font-size: 5vmax;
-      font-family: 'Ubuntu', sans-serif;
-    }
   `}
   </style>
 );

From 5403e69370bc361aada2314f60869c91f5ff3c44 Mon Sep 17 00:00:00 2001
From: Brian Miller <mills_77_77@hotmail.com>
Date: Thu, 2 Aug 2018 14:02:11 -0500
Subject: [PATCH 12/13] crop focalpoint

---
 src/components/Story/Header.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Story/Header.jsx b/src/components/Story/Header.jsx
index 770a48c..998401a 100644
--- a/src/components/Story/Header.jsx
+++ b/src/components/Story/Header.jsx
@@ -31,7 +31,7 @@ const Header = (props) => {
         <meta name="description" story={teaser} />
       </Head>
       {primaryImgSrc ? (
-        <Imgix tag="div" className="d-flex bg-imgIx img-fluid" src={primaryImgSrc} alt={primaryImgCaption} title={title} w="1200" h="600" fit="crop" crop="facial,edge">
+        <Imgix tag="div" className="d-flex bg-imgIx img-fluid" src={primaryImgSrc} alt={primaryImgCaption} title={title} w="1200" h="600" fit="crop" crop="focalpoint">
           {contents}
         </Imgix>
       ) : (

From f7bfaf459cbee263cf2a2af9d144331d0c947383 Mon Sep 17 00:00:00 2001
From: Brian Miller <mills_77_77@hotmail.com>
Date: Thu, 2 Aug 2018 14:09:06 -0500
Subject: [PATCH 13/13] comment out publisher

---
 src/components/Navbar.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 114ddf5..a7b47c0 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -8,10 +8,10 @@ import Imgix from './Imgix';
 export default () => (
   <Container className="fixed-top bg-white px-0" fluid>
     <NavbarStyle />
-    <Navbar id="publisher-bar" className="small d-flex flex-row justify-content-start bg-dark">
+    {/* <Navbar id="publisher-bar" className="small d-flex flex-row justify-content-start bg-dark">
       <div class="arrow-left align-self-center mr-1"/>
       <small class="text-uppercase align-self-center mr-1 text-white">[cname].com</small>
-    </Navbar>
+    </Navbar> */}
     <Navbar id="branding-bar" expand>
       <NavbarStyle />
       <Nav className="position-absolute">