feat(www): tagline on plugin library landing page

www/src/components/rotater.js

@@ -0,0 +1,175 @@
+import React, { Component } from "react"
+import Slider from "./Slider"
+import { options } from "../utils/typography"
+import { scale, colors, space, radii } from "../utils/presets"
+import Link from "gatsby-link"
+import MdNavigateBefore from "react-icons/lib/md/navigate-before"
+import MdNavigateNext from "react-icons/lib/md/navigate-next"
+import { srOnly } from "../utils/styles"
+
+const controlButtonStyles = {
+  WebkitAppearance: `none`,
+  color: colors.gray.calm,
+  fontWeight: 700,
+  border: 0,
+  background: `transparent`,
+  position: `absolute`,
+  top: 0,
+  bottom: 0,
+  left: 0,
+  padding: 0,
+  fontSize: scale[5],
+  width: space[8],
+  textAlign: `center`,
+  "&:hover": { cursor: `pointer`, color: colors.gatsby },
+}
+
+class Rotater extends Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = { item: 0, size: {} }
+  }
+
+  decrementItem() {
+    clearInterval(this.state.intervalId)
+    this.setState({
+      intervalId: -1,
+      item:
+        (this.state.item + this.props.items.length - 1) %
+        this.props.items.length,
+    })
+  }
+
+  incrementItemAndClearInterval() {
+    clearInterval(this.state.intervalId)
+    this.incrementItem()
+    this.setState({
+      intervalId: -1,
+    })
+  }
+
+  incrementItem() {
+    this.setState({
+      item: (this.state.item + 1) % this.props.items.length,
+    })
+  }
+
+  componentDidMount() {
+    const intervalId = setInterval(() => this.incrementItem(), 5000)
+    this.setState({ intervalId, size: this.getDimensions() })
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.state.intervalId)
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.item !== this.state.item) {
+      this.setState({ size: this.getDimensions() })
+    }
+  }
+
+  getDimensions() {
+    if (this.wordBox == null) {
+      return {
+        width: `auto`,
+        height: `auto`,
+      }
+    }
+
+    return this.wordBox.getBoundingClientRect()
+  }
+
+  render() {
+    const { text, pluginName } = this.props.items[this.state.item]
+
+    return (
+      <div
+        css={{
+          borderTop: `1px solid ${colors.gray.border}`,
+          borderBottom: `1px solid ${colors.gray.border}`,
+          borderRadius: radii[2],
+          padding: `${space[4]} ${space[9]}`,
+          margin: `${space[6]} 0`,
+          position: `relative`,
+        }}
+      >
+        <p
+          css={{
+            color: colors.gray.copy,
+            marginLeft: space[9],
+            marginRight: space[9],
+            fontSize: scale[4],
+            fontFamily: options.headerFontFamily.join(`,`),
+            textAlign: `center`,
+            marginBottom: 0,
+          }}
+        >
+          <span>Need&nbsp;</span>
+          <span
+            style={{
+              display: `inline-block`,
+              transition: `width 150ms linear`,
+              width: this.state.size.width || `auto`,
+            }}
+          >
+            <span
+              css={{
+                fontWeight: 600,
+                whiteSpace: `nowrap`,
+                display: `inline-block`,
+              }}
+              ref={n => {
+                this.wordBox = n
+              }}
+            >
+              {this.state.intervalId == -1 ? (
+                <>{text}</>
+              ) : (
+                <Slider
+                  items={[text]}
+                  color={`#000`}
+                  getSize={size => this.setState({ size })}
+                />
+              )}
+            </span>
+          </span>
+        </p>
+
+        <p
+          css={{
+            color: colors.gray.calm,
+            margin: 0,
+            fontSize: scale[3],
+            textAlign: `center`,
+          }}
+        >
+          There’s{` `}
+          {pluginName ? (
+            <Link to={`/packages/` + pluginName}>a plugin</Link>
+          ) : (
+            `a plugin`
+          )}
+          {` `}
+          for that.
+        </p>
+        <button
+          css={{ ...controlButtonStyles }}
+          onClick={this.decrementItem.bind(this)}
+        >
+          <MdNavigateBefore aria-hidden="true" />
+          <span css={srOnly}>Previous</span>
+        </button>
+        <button
+          css={{ ...controlButtonStyles, left: `auto`, right: 0 }}
+          onClick={this.incrementItemAndClearInterval.bind(this)}
+        >
+          <MdNavigateNext aria-hidden="true" />
+          <span css={srOnly}>Next</span>
+        </button>
+      </div>
+    )
+  }
+}
+
+export default Rotater

www/src/components/slider.js

@@ -0,0 +1,43 @@
+import React from "react"
+import { keyframes } from "@emotion/core"
+
+export default ({ items, color }) => (
+  <span
+    css={{
+      "& span": {
+        animation: `${topToBottom} 5s linear infinite 0s`,
+        opacity: 0,
+      },
+    }}
+  >
+    {items.map(item => (
+      <span key={item} css={{ color }}>
+        {item}
+      </span>
+    ))}
+  </span>
+)
+
+const topToBottom = keyframes({
+  "0%": {
+    opacity: 0,
+  },
+  "6%": {
+    opacity: 0,
+  },
+  "21%": {
+    opacity: 1,
+  },
+  "69%": {
+    opacity: 1,
+  },
+  "84%": {
+    opacity: 0,
+  },
+  "90%": {
+    opacity: 0,
+  },
+  "100%": {
+    opacity: 0,
+  },
+})

www/src/pages/plugins.js

@@ -1,10 +1,11 @@
 import React, { Component } from "react"
 import Container from "../components/container"
+import Rotater from "../components/rotater"
 import Unbird from "../components/unbird"
 import { Link } from "gatsby"
 import logo from "../monogram.svg"
 import { rhythm } from "../utils/typography"
-import { colors, space, dimensions, scale, fonts } from "../utils/presets"
+import { colors, space, dimensions, scale } from "../utils/presets"
 
 class Plugins extends Component {
   render() {
@@ -28,8 +29,8 @@ class Plugins extends Component {
             src={logo}
             css={{
               display: `inline-block`,
-              height: rhythm(4),
-              width: rhythm(4),
+              height: rhythm(3),
+              width: rhythm(3),
               marginLeft: `auto`,
               marginRight: `auto`,
             }}
@@ -40,18 +41,65 @@ class Plugins extends Component {
               fontSize: scale[6],
               marginLeft: space[5],
               marginRight: space[5],
+              marginBottom: 0,
               textAlign: `center`,
             }}
           >
             Welcome to the Gatsby Plugin Library!
           </h1>
+          <Rotater
+            items={[
+              {
+                text: `SEO?`,
+                pluginName: `gatsby-plugin-react-helmet`,
+              },
+              {
+                text: `responsive images?`,
+                pluginName: `gatsby-image`,
+              },
+              {
+                text: `offline support?`,
+                pluginName: `gatsby-plugin-offline`,
+              },
+              {
+                text: `Sass support?`,
+                pluginName: `gatsby-plugin-sass`,
+              },
+              {
+                text: `a sitemap?`,
+                pluginName: `gatsby-plugin-sitemap`,
+              },
+              {
+                text: `an RSS feed?`,
+                pluginName: `gatsby-plugin-feed`,
+              },
+              {
+                text: `great typography?`,
+                pluginName: `gatsby-plugin-typography`,
+              },
+              {
+                text: `Typescript?`,
+                pluginName: `gatsby-plugin-typescript`,
+              },
+              {
+                text: `Google Analytics?`,
+                pluginName: `gatsby-plugin-google-analytics`,
+              },
+              {
+                text: `Wordpress integration?`,
+                pluginName: `gatsby-source-wordpress`,
+              },
+              {
+                text: `anything?`,
+              },
+            ]}
+            color={colors.lilac}
+          />
+
           <p
             css={{
-              color: colors.gray.calm,
-              marginLeft: space[9],
-              marginRight: space[9],
-              fontSize: scale[4],
-              fontFamily: fonts.header,
+              color: colors.gray.lightCopy,
+              fontSize: scale[2],
               textAlign: `center`,
             }}
           >

www/src/utils/styles.js

@@ -17,6 +17,17 @@ const stripeAnimation = keyframes({
   "100%": { backgroundPosition: `${space[7]} ${space[11]}` },
 })
 
+export const srOnly = {
+  position: `absolute`,
+  width: 1,
+  height: 1,
+  padding: 0,
+  overflow: `hidden`,
+  clip: `rect(0,0,0,0)`,
+  whiteSpace: `nowrap`,
+  border: 0,
+}
+
 export const scrollbarStyles = {
   WebkitOverflowScrolling: `touch`,
   "&::-webkit-scrollbar": {