feat(www): Add Blog section to Homepage

docs/blog/2018-11-07-gatsby-for-apps/index.md

@@ -8,6 +8,7 @@ tags:
   - applications
   - beyond static
 excerpt: Gatsby is great for not only static sites but also traditional web applications. Using Gatsby enables the benefits of both static and web applications so you don't have to sacrifice the advantages of one approach to reap the benefits of the other.
+cover: images/what-if-i-told-you.jpg
 ---
 
 Gatsby is great for static sites. You probably know this! It’s equally great for web applications. You may not know this. Gatsby is great for building web experiences that leverage the benefits of both so called static sites and web applications -- simultaneously. You don't have to sacrifice the advantages of one approach to reap the benefits of the other.

www/src/assets/ornaments.js

@@ -0,0 +1,3 @@
+import NewsletterFormOrnament from "!raw-loader!./newsletter-form-ornament.svg"
+
+export { NewsletterFormOrnament }

www/src/components/ecosystem/ecosystem-featured-item.js

@@ -4,6 +4,8 @@ import styled from "react-emotion"
 import { Link } from "gatsby"
 import Img from "gatsby-image"
 
+import { HorizontalScrollerItem } from "../shared/horizontal-scroller"
+
 import StarIcon from "react-icons/lib/md/star"
 import ArrowDownwardIcon from "react-icons/lib/md/arrow-downward"
 
@@ -12,17 +14,12 @@ import presets, { colors } from "../../utils/presets"
 
 const MAX_DESCRIPTION_LENGTH = 100
 
-const EcosystemFeaturedItemRoot = styled(`li`)`
-  width: 85vw;
-  margin: 0 2px 0 0;
-  padding: 5px;
-
-  :last-child {
-    margin-right: 0;
-  }
+const EcosystemFeaturedItemRoot = styled(HorizontalScrollerItem)`
+  margin-right: ${rhythm(options.blockMarginBottom)};
 
   ${presets.Tablet} {
     border-bottom: 1px solid ${colors.gray.superLight};
+    box-shadow: none;
     margin: 0;
     padding: 0;
     width: auto;

www/src/components/ecosystem/ecosystem-featured-items.js

@@ -2,18 +2,19 @@ import React from "react"
 import PropTypes from "prop-types"
 import styled from "react-emotion"
 
+import {
+  HorizontalScroller,
+  HorizontalScrollerContent,
+} from "../shared/horizontal-scroller"
+
 import presets, { colors } from "../../utils/presets"
 import { rhythm, options } from "../../utils/typography"
 import { scrollbarStyles } from "../../utils/styles"
 import { SCROLLER_CLASSNAME } from "../../utils/scrollers-observer"
 
-export const EcosystemFeaturedItemsRootBase = styled(`div`)`
-  overflow-x: scroll;
+const EcosystemFeaturedItemsRoot = styled(HorizontalScroller)`
   margin: ${rhythm(0.1)} -${rhythm(options.blockMarginBottom)};
-  -webkit-overflow-scrolling: touch;
-`
 
-const EcosystemFeaturedItemsRoot = styled(EcosystemFeaturedItemsRootBase)`
   ${presets.Tablet} {
     border-top: 1px solid ${colors.gray.superLight};
     margin-top: ${rhythm(0.4)};
@@ -31,7 +32,10 @@ export const ListBase = styled(`ul`)`
   padding: 0 calc(${rhythm(options.blockMarginBottom)} - 5px) 4px;
 `
 
-const List = styled(ListBase)`
+const List = styled(HorizontalScrollerContent)`
+  padding-left: ${rhythm(options.blockMarginBottom)};
+  padding-right: ${rhythm(options.blockMarginBottom)};
+
   ${presets.Tablet} {
     flex-direction: column;
     padding: 0;