[www] Cards for Blog index (#2017)

* First shot at cards for >="Tablet" Refine light purple and sidebar colors. Explicitly set excerpt for (two) blog articles along the way. * Properly hide blog index headline * D'oh fix build, make things a little more concise, rm console.log * Make whole BlogPostPreviewItem component clickable Currently done by overlaying the newly added "Read more" link over the entire card and pushing the link to the author's page up via `z-index`. Has the drawback of the text not being user-selectable anymore. Changed BlogPostPreviewItem root HTML element from `<div>` to `<article>` along the way.
gatsbyjs · Sep 5, 2017 · b7e9d06 · b7e9d06
1 parent ca543dd
commit b7e9d06
Show file tree

Hide file tree

Showing 10 changed files with 157 additions and 25 deletions.
diff --git a/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md b/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md
@@ -8,7 +8,7 @@ imageAuthorLink: "https://flic.kr/p/oSmRd6"
 imageTitle: "Old typewriter"
 canonicalLink: "https://objectpartners.com/2017/07/19/creating-a-static-blog-with-gatsby/"
 publishedAt: "Object Partners, Inc."
-excerpt: "Gatsby is an incredible static site generator that lets you build a static site that still has all the benefits expected from a modern web application…"
+excerpt: "In this post, we'll take a deep dive into Gatsby and some of the new 1.0 features by creating a static blog. Let's get on it!"
 ---
 Gatsby is an incredible static site generator that allows for React to be used as the underlying rendering engine to scaffold out a static site that truly has all the benefits expected in a modern web application. It does this by rendering dynamic React components into static HTML content via [server side rendering][react-dom-server] at build time. This means that your users get all the benefits of a static site such as the ability to work without JavaScript, search engine friendliness, speedy load times, etc. without losing the dynamism and interactivity that is expected of the modern web. Once rendered to static HTML, client-site React/JavaScript _can_ take over (if creating stateful components or logic in `componentDidMount`) and add dynamism to the statically generated content.
 

diff --git a/docs/blog/gatsby-v1.md b/docs/blog/gatsby-v1.md
@@ -4,6 +4,7 @@ date: "2017-07-06"
 author: "Kyle Mathews"
 image: 'images/container-ship-leaving.jpg'
 showImageInArticle: false
+excerpt: Gatsby is your friendly, blazing fast static site generator for React. And after nearly a year of research, prototyping, and testing, Gatsby v1 is ready for action.
 ---
 Gatsby is your friendly, blazing fast static site generator for React. And after nearly a year of research, prototyping, and testing, Gatsby v1 is ready for action.
 

diff --git a/www/src/components/blog-post-preview-item.js b/www/src/components/blog-post-preview-item.js
@@ -11,14 +11,20 @@ class BlogPostPreviewItem extends React.Component {
       post.frontmatter.author.avatar.childImageSharp.responsiveResolution
 
     return (
-      <div css={{ marginBottom: rhythm(2) }}>
+      <article className={this.props.className} css={{ position: `relative` }}>
         <Link to={post.fields.slug}>
           <h2>{post.frontmatter.title}</h2>
           <p css={{ fontWeight: `normal` }}>
             {post.frontmatter.excerpt ? post.frontmatter.excerpt : post.excerpt}
           </p>
         </Link>
-        <div css={{ display: `flex`, alignItems: `center` }}>
+        <div
+          css={{
+            display: `flex`,
+            alignItems: `center`,
+            marginBottom: rhythm(2),
+          }}
+        >
           <img
             alt={`Avatar for ${post.frontmatter.author.id}`}
             src={avatar.src}
@@ -53,6 +59,8 @@ class BlogPostPreviewItem extends React.Component {
                 css={{
                   boxShadow: `none !important`,
                   borderBottom: `0 !important`,
+                  position: `relative`,
+                  zIndex: 1,
                   "&&": {
                     fontWeight: `normal`,
                     ":hover": {
@@ -71,7 +79,30 @@ class BlogPostPreviewItem extends React.Component {
             </div>
           </div>
         </div>
-      </div>
+        <Link
+          to={post.fields.slug}
+          css={{
+            position: `absolute`,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            overflow: `hidden`,
+            textIndent: `-100%`,
+            whiteSpace: `nowrap`,
+            zIndex: 0,
+            "&&": {
+              border: 0,
+              boxShadow: `none`,
+              "&:hover": {
+                background: `none`,
+              },
+            },
+          }}
+        >
+          Read more
+        </Link>
+      </article>
     )
   }
 }

diff --git a/www/src/components/navigation.js b/www/src/components/navigation.js
@@ -39,7 +39,24 @@ const NavItem = ({ linkTo, children }) => (
   </li>
 )
 
-export default ({ isHomepage }) => {
+export default ({ pathname }) => {
+  const isHomepage = pathname == `/`
+  const isBlog = pathname == `/blog/`
+  let styles = {}
+  if (isHomepage) {
+    styles.backgroundColor = `rgba(255,255,255,0)`
+    styles.borderBottomColor = `transparent`
+    styles[presets.Tablet] = {
+      position: isHomepage || isBlog ? `absolute` : `fixed`,
+    }
+  } else if (isBlog) {
+    styles.backgroundColor = `#fff`
+    styles[presets.Tablet] = {
+      borderBottomColor: `transparent`,
+      position: isHomepage || isBlog ? `absolute` : `fixed`,
+      backgroundColor: presets.sidebar,
+    }
+  }
   const socialIconsStyles = {
     color: presets.brandLight,
     [presets.Phablet]: {
@@ -70,20 +87,16 @@ export default ({ isHomepage }) => {
     <div
       css={{
         borderBottom: `1px solid ${presets.veryLightPurple}`,
-        borderBottomColor: isHomepage
-          ? `transparent`
-          : `${presets.veryLightPurple}`,
-        backgroundColor: isHomepage
-          ? `rgba(255,255,255,0)`
-          : `rgba(255,255,255,0.975)`,
+        backgroundColor: `rgba(255,255,255,0.975)`,
         position: isHomepage ? `absolute` : false,
         height: presets.headerHeight,
         zIndex: `1`,
         left: 0,
         right: 0,
         [presets.Tablet]: {
-          position: isHomepage ? `absolute` : `fixed`,
+          position: isHomepage || isBlog ? `absolute` : `fixed`,
         },
+        ...styles,
       }}
     >
       <div

diff --git a/www/src/gatsby-calm.svg b/www/src/gatsby-calm.svg
diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js
@@ -52,7 +52,7 @@ module.exports = React.createClass({
         background: presets.lightPurple,
       },
       "::-webkit-scrollbar-track": {
-        background: presets.veryLightPurple,
+        background: presets.brandLighter,
       },
     }
 
@@ -63,7 +63,7 @@ module.exports = React.createClass({
           <meta name="og:type" content="website" />
           <meta name="og:site_name" content="GatsbyJS" />
         </Helmet>
-        <Navigation isHomepage={isHomepage} />
+        <Navigation pathname={this.props.location.pathname} />
         <div
           className={hasSidebar ? `main-body has-sidebar` : `main-body`}
           css={{

diff --git a/www/src/pages/blog/index.js b/www/src/pages/blog/index.js
@@ -2,17 +2,84 @@ import React from "react"
 import Container from "../../components/container"
 import BlogPostPreviewItem from "../../components/blog-post-preview-item"
 
+import presets from "../../utils/presets"
+import { rhythm, scale, options } from "../../utils/typography"
+import footerLogo from "../../gatsby-calm.svg"
+
 class BlogPostsIndex extends React.Component {
   render() {
     const { allMarkdownRemark } = this.props.data
 
     return (
-      <Container>
-        <h1 css={{ marginTop: 0 }}>Blog</h1>
-        {allMarkdownRemark.edges.map(({ node }) => (
-          <BlogPostPreviewItem post={node} key={node.fields.slug} />
-        ))}
-      </Container>
+      <div
+        css={{
+          [presets.Tablet]: {
+            background: presets.sidebar,
+            paddingBottom: rhythm(options.blockMarginBottom * 4),
+          },
+        }}
+      >
+        <Container
+          css={{
+            [presets.Tablet]: {
+              background: `url(${footerLogo})`,
+              paddingBottom: `${rhythm(
+                options.blockMarginBottom * 4
+              )} !important`,
+              backgroundSize: `30px 30px`,
+              backgroundRepeat: `no-repeat`,
+              backgroundPosition: `bottom center`,
+            },
+          }}
+        >
+          <h1
+            css={{
+              marginTop: 0,
+              position: `absolute`,
+              width: 1,
+              height: 1,
+              padding: 0,
+              overflow: `hidden`,
+              clip: `rect(0,0,0,0)`,
+              whiteSpace: `nowrap`,
+              clipPath: `inset(50%)`,
+            }}
+          >
+            Blog
+          </h1>
+          {allMarkdownRemark.edges.map(({ node }) => (
+            <BlogPostPreviewItem
+              post={node}
+              key={node.fields.slug}
+              css={{
+                marginBottom: rhythm(options.blockMarginBottom),
+                [presets.Tablet]: {
+                  background: `#fff`,
+                  borderRadius: presets.radiusLg,
+                  boxShadow: `0 3px 10px rgba(25, 17, 34, 0.05)`,
+                  padding: rhythm(options.blockMarginBottom * 2),
+                  paddingLeft: rhythm(options.blockMarginBottom * 3),
+                  paddingRight: rhythm(options.blockMarginBottom * 3),
+                  marginLeft: rhythm(-options.blockMarginBottom * 2),
+                  marginRight: rhythm(-options.blockMarginBottom * 2),
+                  transition: `transform ${presets.animation
+                    .speedDefault} ${presets.animation
+                    .curveDefault},  box-shadow ${presets.animation
+                    .speedDefault} ${presets.animation
+                    .curveDefault}, padding ${presets.animation
+                    .speedDefault} ${presets.animation.curveDefault}`,
+                  "&:hover": {
+                    transform: `translateY(-4px)`,
+                    boxShadow: `0 10px 42px rgba(25, 17, 34, 0.1)`,
+                  },
+                },
+                [presets.Desktop]: {},
+                [presets.Hd]: {},
+              }}
+            />
+          ))}
+        </Container>
+      </div>
     )
   }
 }

diff --git a/www/src/pages/index.js b/www/src/pages/index.js
@@ -172,7 +172,11 @@ const IndexRoute = React.createClass({
                     Latest from the Gatsby blog
                   </h2>
                   {blogPosts.edges.map(({ node }) => (
-                    <BlogPostPreviewItem post={node} key={node.fields.slug} />
+                    <BlogPostPreviewItem
+                      post={node}
+                      key={node.fields.slug}
+                      css={{ marginBottom: rhythm(2) }}
+                    />
                   ))}
                 </Container>
               </div>

diff --git a/www/src/templates/template-contributor-page.js b/www/src/templates/template-contributor-page.js
@@ -62,7 +62,11 @@ const ContributorPageTemplate = React.createClass({
             if (node.frontmatter.author) {
               if (node.frontmatter.author.id === contributor.id) {
                 return (
-                  <BlogPostPreviewItem post={node} key={node.fields.slug} />
+                  <BlogPostPreviewItem
+                    post={node}
+                    key={node.fields.slug}
+                    css={{ marginBottom: rhythm(2) }}
+                  />
                 )
               }
             }

diff --git a/www/src/utils/presets.js b/www/src/utils/presets.js
@@ -15,10 +15,9 @@ module.exports = {
   VVHd: `@media (min-width: 1650px)`,
   maxWidth: 35,
   maxWidthWithSidebar: 26,
-  lightPurple: colors.b[2],
-  veryLightPurple: colors.b[0],
+  lightPurple: `#e0d6eb`,
   veryLightPurple: `#f6f2f8`,
-  sidebar: `#fcfaff`,
+  sidebar: `#fbfafc`,
   calm: `rgba(38, 32, 44, .5)`,
   // palette by @SachaG
   // @see https://www.figma.com/file/J6IYJEtdRmwJQOrcZ2DfvxDD/Gatsby