feat(www): add Ecosystem section to Homepage (#9783)

* feat(www): add Ecosystem section to Homepage

feat(www): homepage WIP

wip

feat(www): finish sections style for mobile

feat(www): add Ecosystsem featured items to Hompage

feat(www): homepage ecosystem section styling WIP

feat(www): add arrow to action button

* fix(www): fix code formating

* fix(www): fix code formating and eslint errors

* fix(www): fix hovering effect on Featured Item

* fix(www): fix hovering effect sequel

* fix(www): fix hover bug

* fix(www): update texts (intro & link labels)

* feat(www): add scroller observer to Home page

* refactor(www): use imported scrollers observer

* fix(www): change link labes on Ecosystem page

* fix(www): fix some small style issues

* refactor(www): refator combineEcosystemFeaturedItems and reorder some css properties

* refactor(www): remove width setting from scroller container

* fix(www): update featured starters

* fix(www): update featured starters

* refactor(www): add starter/plugins colors to the palette

* fix(www): remove unused props

* fix(www): fix color value in the palette

Author: greglobinski

www/gatsby-node.js

@@ -620,7 +620,7 @@ exports.onCreateNode = ({ node, actions, getNode, reporter }) => {
 
 exports.onCreatePage = ({ page, actions }) => {
   // add lists of featured items to Ecosystem page
-  if (page.path === `/ecosystem/`) {
+  if (page.path === `/ecosystem/` || page.path === `/`) {
     const { createPage, deletePage } = actions
     const oldPage = Object.assign({}, page)
 

www/src/assets/ecosystem.svg

@@ -18,6 +18,7 @@ const Button = ({
   small,
   tiny,
   secondary,
+  ondark,
   ...rest
 }) => {
   const Tag = components[tag || `link`]
@@ -36,6 +37,7 @@ const Button = ({
       ...(large && buttonStyles.large),
       ...(small && buttonStyles.small),
       ...(tiny && buttonStyles.tiny),
+      ...(ondark && buttonStyles.ondark),
     },
   }
 

www/src/components/button.js

@@ -11,6 +11,7 @@ const Cards = ({ children }) => (
       borderRadius: presets.radiusLg,
       boxShadow: `0 5px 20px rgba(25, 17, 34, 0.1)`,
       transform: `translateZ(0)`,
+      width: `100%`,
     }}
   >
     {children}

www/src/components/cards.js

@@ -5,6 +5,10 @@ import styled from "react-emotion"
 import EcosystemSection from "./ecosystem-section"
 
 import presets from "../../utils/presets"
+import {
+  setupScrollersObserver,
+  unobserveScrollers,
+} from "../../utils/scrollers-observer"
 
 const EcosystemBoardRoot = styled(`div`)`
   display: flex;
@@ -21,68 +25,12 @@ const EcosystemBoardRoot = styled(`div`)`
 `
 
 class EcosystemBoard extends Component {
-  observer
-  observerTargets = []
-
   componentDidMount() {
-    if (typeof window.IntersectionObserver !== `undefined`) {
-      this.setupObserver()
-    }
+    setupScrollersObserver()
   }
 
   componentWillUnmount() {
-    if (typeof window.IntersectionObserver !== `undefined`) {
-      this.observerTargets.forEach(target => this.observer.unobserve(target))
-    }
-  }
-
-  setupObserver = () => {
-    const options = { rootMargin: `0px`, threshold: [1] }
-    this.observer = new IntersectionObserver(this.handleIntersect, options)
-    this.observerTargets = Array.from(
-      document.querySelectorAll(`.featuredItems`)
-    )
-
-    this.observerTargets.forEach(target => this.observer.observe(target))
-  }
-
-  handleIntersect = (entries, observer) => {
-    entries.forEach(entry => {
-      const target = entry.target
-
-      if (entry.intersectionRatio > 0) {
-        setTimeout(
-          () => this.turnOnLeadScroll({ target, duration: 1000, distance: 20 }),
-          250
-        )
-        this.observer.unobserve(target)
-      }
-    })
-  }
-
-  turnOnLeadScroll = ({ target, duration, distance }) => {
-    let startTime = null
-
-    function animation(currentTime) {
-      if (startTime === null) {
-        startTime = currentTime
-      }
-
-      const timeElapsed = currentTime - startTime
-      const getDistanceToScroll = ease(timeElapsed, 0, distance, duration)
-
-      target.scroll({ top: 0, left: getDistanceToScroll })
-
-      if (timeElapsed < duration) {
-        requestAnimationFrame(animation)
-      }
-    }
-
-    function ease(t, b, c, d) {
-      return -c * (t /= d) * (t - 2) + b
-    }
-
-    requestAnimationFrame(animation)
+    unobserveScrollers()
   }
 
   render() {
@@ -102,11 +50,11 @@ class EcosystemBoard extends Component {
           links={[
             { label: `Browse Plugins`, to: `/plugins/` },
             {
-              label: `Plugin Authoring`,
+              label: `Creating Plugins`,
               to: `/docs/plugin-authoring/`,
               secondary: true,
             },
-            { label: `Plugin Docs`, to: `/docs/plugins/`, secondary: true },
+            { label: `Using Plugins`, to: `/docs/plugins/`, secondary: true },
           ]}
           featuredItems={plugins}
         />
@@ -117,7 +65,7 @@ class EcosystemBoard extends Component {
           icon={StartersIcon}
           links={[
             { label: `Browse Starters`, to: `/starters/` },
-            { label: `Starter Docs`, to: `/docs/starters/`, secondary: true },
+            { label: `Using Starters`, to: `/docs/starters/`, secondary: true },
           ]}
           featuredItems={starters}
         />

www/src/components/ecosystem/ecosystem-board.js

@@ -13,20 +13,26 @@ import presets, { colors } from "../../utils/presets"
 const MAX_DESCRIPTION_LENGTH = 100
 
 const EcosystemFeaturedItemRoot = styled(`li`)`
-  flex-basis: ${props => `calc(100% / ${props.numberOfItems})`};
-  float: left;
+  width: 85vw;
   margin: 0 2px 0 0;
   padding: 5px;
 
+  :last-child {
+    margin-right: 0;
+  }
+
   ${presets.Tablet} {
-    padding: 0;
     border-bottom: 1px solid ${colors.gray.superLight};
+    margin: 0;
+    padding: 0;
+    width: auto;
   }
 `
 
-const BlockLink = styled(Link)`
+export const BlockLink = styled(Link)`
+  background: #fff;
   border-radius: ${presets.radiusLg}px;
-  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -37,28 +43,33 @@ const BlockLink = styled(Link)`
     box-shadow: none;
     transition: all ${presets.animation.speedDefault}
       ${presets.animation.curveDefault};
+  }
 
+  ${presets.Desktop} {
     :hover {
       background: ${colors.ui.whisper};
     }
   }
 `
 
 const Header = styled(`header`)`
+  align-items: flex-start;
   display: flex;
   justify-content: space-between;
+
   h3 {
     color: ${colors.gatsbyDark};
     font-size: 1rem;
     margin: 0;
   }
 
   span {
+    align-items: center;
     color: ${colors.lilac};
     display: flex;
-    align-items: center;
     font-size: 0.8125rem;
     font-family: ${options.systemFontFamily.join(`,`)};
+    padding-left: 5px;
 
     svg {
       fill: ${colors.gray.light};
@@ -72,16 +83,15 @@ const Header = styled(`header`)`
 const Digest = styled(`div`)`
   display: flex;
   flex-grow: 1;
-  justify-content: space-between;
-  height: 100%;
   font-family: ${options.systemFontFamily.join(`,`)};
+  justify-content: space-between;
   padding: ${rhythm(0.5)} 0 0;
 `
 
 const Thumbnail = styled(`div`)`
+  height: 64px;
   padding-right: ${rhythm(2 / 3)};
   margin-top: ${rhythm(1 / 12)};
-  height: 64px;
 
   img {
     border: 1px solid ${colors.gray.superLight};
@@ -95,7 +105,7 @@ const Description = styled(`p`)`
   margin: 0;
 `
 
-const EcosystemFeaturedItem = ({ item, numberOfItems }) => {
+const EcosystemFeaturedItem = ({ item, className }) => {
   const {
     slug,
     name,
@@ -114,7 +124,7 @@ const EcosystemFeaturedItem = ({ item, numberOfItems }) => {
   }
 
   return (
-    <EcosystemFeaturedItemRoot numberOfItems={numberOfItems}>
+    <EcosystemFeaturedItemRoot className={className}>
       <BlockLink to={slug}>
         <Header>
           <h3>{name}</h3>
@@ -145,7 +155,7 @@ const EcosystemFeaturedItem = ({ item, numberOfItems }) => {
 
 EcosystemFeaturedItem.propTypes = {
   item: PropTypes.object.isRequired,
-  numberOfItems: PropTypes.number.isRequired,
+  className: PropTypes.string,
 }
 
 export default EcosystemFeaturedItem

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

@@ -2,17 +2,18 @@ import React from "react"
 import PropTypes from "prop-types"
 import styled from "react-emotion"
 
-import EcosystemFeaturedItem from "./ecosystem-featured-item"
-
 import presets, { colors } from "../../utils/presets"
 import { rhythm, options } from "../../utils/typography"
 import { scrollbarStyles } from "../../utils/styles"
+import { SCROLLER_CLASSNAME } from "../../utils/scrollers-observer"
 
-const EcosystemFeaturedItemsRoot = styled(`div`)`
+export const EcosystemFeaturedItemsRootBase = styled(`div`)`
   overflow-x: scroll;
   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)};
@@ -23,39 +24,40 @@ const EcosystemFeaturedItemsRoot = styled(`div`)`
   }
 `
 
-const List = styled(`ul`)`
-  display: flex;
+export const ListBase = styled(`ul`)`
+  display: inline-flex;
   list-style: none;
   margin: 0;
   padding: 0 calc(${rhythm(options.blockMarginBottom)} - 5px) 4px;
-  width: ${props => `calc(80vw * ${props.numberOfItems})`};
+`
 
+const List = styled(ListBase)`
   ${presets.Tablet} {
     flex-direction: column;
     padding: 0;
     width: 100%;
   }
 `
 
-const EcosystemFeaturedItems = ({ items }) => (
-  <EcosystemFeaturedItemsRoot className="featuredItems">
-    <List numberOfItems={items.length}>
+const EcosystemFeaturedItems = ({
+  items,
+  itemComponent: Item,
+  className = ``,
+}) => (
+  <EcosystemFeaturedItemsRoot className={`${SCROLLER_CLASSNAME} ${className}`}>
+    <List>
       {items.map(item => {
         const { slug } = item
-        return (
-          <EcosystemFeaturedItem
-            key={slug}
-            item={item}
-            numberOfItems={items.length}
-          />
-        )
+        return <Item key={slug} item={item} />
       })}
     </List>
   </EcosystemFeaturedItemsRoot>
 )
 
 EcosystemFeaturedItems.propTypes = {
-  items: PropTypes.array,
+  items: PropTypes.array.isRequired,
+  itemComponent: PropTypes.func.isRequired,
+  className: PropTypes.string,
 }
 
 export default EcosystemFeaturedItems