feat(www): tagline on plugin library landing page

www/src/components/rotater.js

@@ -0,0 +1,112 @@
+import React, { Component } from "react";
+import Slider from "./Slider";
+import { rhythm, options } from "../utils/typography"
+import presets, { colors, space } from "../utils/presets"
+import Link from "gatsby-link"
+
+class Search extends Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = { item: 0 }
+  }
+
+  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 })
+  }
+
+  componentWillUnmount() {
+     clearInterval(this.state.intervalId);
+  }
+  render() {
+    const { text, pluginName } = this.props.items[this.state.item]
+    return (
+    <>
+    <p       
+      css={{
+        color: colors.gray.calm,
+        marginLeft: rhythm(space[9]),
+        marginRight: rhythm(space[9]),
+        fontSize: presets.scale[5],
+        fontFamily: options.headerFontFamily.join(`,`),
+        textAlign: `center`,
+      }}
+    >
+      <span
+        css={{
+          [presets.Tablet]: {
+            marginRight: rhythm(1 / 8),
+          },
+        }}
+      >
+        Need&nbsp;
+      </span>
+      <span
+        css={{
+          fontWeight: 600
+        }}>
+        {
+          this.state.intervalId == -1 ?
+            <span css={{
+            }}>{text}</span> :
+            <span>
+              <Slider
+                items={[text]}
+                color={colors.gray.calm}
+              />
+            </span>
+        }
+      </span>
+      <br/>
+      <span 
+          css={{ 
+            fontWeight: 700,
+            "&:hover": {
+              cusor: "pointer"
+            }
+          }} 
+          onClick={this.decrementItem.bind(this)}>&lt;&nbsp;
+        </span>
+      &nbsp;&nbsp;&nbsp;There's {pluginName ?
+            <Link 
+              to={"/packages/"+pluginName}
+            >a plugin</Link> :`a plugin`} for that.
+      <span>&nbsp;&nbsp;&nbsp;
+        <span 
+          css={{ 
+            fontWeight: 700,
+            "&:hover": {
+              cusor: "pointer"
+            }
+          }} 
+          onClick={this.incrementItemAndClearInterval.bind(this)}>
+          &nbsp;&gt;
+        </span>
+      </span>
+    </p>
+    </>
+    )
+  }
+}
+
+export default Search;

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,5 +1,6 @@
 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"
@@ -45,6 +46,55 @@ class Plugins extends Component {
           >
             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,