[www] A bunch of mostly "Creator"-related UI updates (#8390)

* Use thumbnail component for creators index view cards

* let creators index grid fill the whole viewport width, adopting what we do for site and starter showcase, switching from fixed to fluid gatsby-image
* link index view card GitHub icon
* DRY: add `shared/empty-grid-items`

* No search for now

* Add key

* One <Button> to rule them all

Refactor (and rename Cta)Button component so that we can re-use it in
other places. Aaaaamazing!

- expand Button component to render as either gatsby-link (default),
  `href` or `button` (`<Button tag=„href“ />`)
- add `<Button small />`
- use `<Button>` to render
  - „Submit“ links in Site, Starter, and Creators Showcase
  - „Load More“ links Site and Starter Showcase
- use the shared button styles to style the Hubspot newsletter
  form button

* Bonus round: Consolidate a couple showcase sidebar filter styles

www/src/components/button.js

@@ -0,0 +1,47 @@
+import React from "react"
+import { Link } from "gatsby"
+import { buttonStyles } from "../utils/styles"
+
+const components = {
+  link: Link,
+  href: ({ children, ...rest }) => <a {...rest}>{children}</a>,
+  button: ({ children, ...rest }) => <button {...rest}>{children}</button>,
+}
+
+const Button = ({
+  to,
+  overrideCSS,
+  icon,
+  children,
+  tag,
+  large,
+  small,
+  secondary,
+  ...rest
+}) => {
+  const Tag = components[tag || `link`]
+
+  const props = {
+    to: !tag ? to : undefined,
+    href: tag === `href` ? to : undefined,
+    css: {
+      "&&": {
+        ...buttonStyles.default,
+        ...overrideCSS,
+        ...(secondary && { ...buttonStyles.secondary }),
+        ...(large && { ...buttonStyles.large }),
+        ...(small && { ...buttonStyles.small }),
+      },
+    },
+    ...rest,
+  }
+
+  return (
+    <Tag {...props}>
+      {children}
+      {icon && <>{icon}</>}
+    </Tag>
+  )
+}
+
+export default Button

www/src/components/creator-data.js

@@ -10,8 +10,8 @@ export const creatorDataFragment = graphql`
     github
     image {
       childImageSharp {
-        fixed(width: 240, height: 240) {
-          ...GatsbyImageSharpFixed
+        fluid(maxWidth: 240, maxHeight: 240) {
+          ...GatsbyImageSharpFluid
         }
       }
     }

www/src/components/hubspot-form.js

@@ -1,15 +1,10 @@
 import React, { Component } from "react"
 import HubspotForm from "react-hubspot-form"
-import { css } from "glamor"
-import { colors } from "../utils/presets"
+import presets, { colors } from "../utils/presets"
 import { rhythm, options } from "../utils/typography"
 import hex2rgba from "hex2rgba"
 import { formInput } from "../utils/form-styles"
-
-let stripeAnimation = css.keyframes({
-  "0%": { backgroundPosition: `0 0` },
-  "100%": { backgroundPosition: `30px 60px` },
-})
+import { buttonStyles } from "../utils/styles"
 
 export default class GatsbyHubspotForm extends Component {
   render() {
@@ -23,6 +18,7 @@ export default class GatsbyHubspotForm extends Component {
       <div
         css={{
           backgroundColor: colors.ui.light,
+          borderRadius: presets.radius,
           color: colors.gatsby,
           fontFamily: options.headerFontFamily.join(`,`),
           padding: `15px`,
@@ -52,21 +48,7 @@ export default class GatsbyHubspotForm extends Component {
             },
           },
           "& .hs-button.primary": {
-            borderColor: colors.gatsby,
-            color: colors.gatsby,
-            cursor: `pointer`,
-            fontWeight: `bold`,
-            ":hover, &:focus": {
-              backgroundSize: `30px 30px`,
-              backgroundColor: colors.gatsby,
-              backgroundImage: `linear-gradient(45deg, rgba(0,0,0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.1) 75%, transparent 75%, transparent)`,
-              color: `#fff`,
-              animation: `${stripeAnimation} 2.8s linear infinite`,
-            },
-            ":focus": {
-              outline: 0,
-              boxShadow: `0 0 0 0.2rem ${hex2rgba(colors.lilac, 0.25)}`,
-            },
+            ...buttonStyles.default,
           },
         }}
       >

www/src/components/masthead.js

@@ -3,7 +3,7 @@ import ArrowForwardIcon from "react-icons/lib/md/arrow-forward"
 
 import { rhythm, scale } from "../utils/typography"
 import presets, { colors } from "../utils/presets"
-import CtaButton from "./cta-button"
+import Button from "./button"
 import { vP, vPHd, vPVHd, vPVVHd } from "../components/gutters"
 import Slider from "./slider"
 
@@ -100,13 +100,9 @@ const MastheadContent = () => (
         </span>
         websites with React
       </h1>
-      <CtaButton to="/docs/">
-        <span css={{ verticalAlign: `middle` }}>Get Started</span>
-        {` `}
-        <ArrowForwardIcon
-          css={{ verticalAlign: `baseline`, marginLeft: `.2em` }}
-        />
-      </CtaButton>
+      <Button large to="/docs/" icon={<ArrowForwardIcon />}>
+        Get Started
+      </Button>
     </div>
   </div>
 )

www/src/components/navigation.js

@@ -135,17 +135,15 @@ const Navigation = ({ pathname }) => {
           <NavItem linkTo="/features/">Features</NavItem>
           <NavItem linkTo="/blog/">Blog</NavItem>
           <NavItem linkTo="/showcase/">Showcase</NavItem>
-          {false ? (
-            <li css={styles.li}>
+          {/* <li css={styles.li}>
               <Link
                 to="/community/"
                 css={styles.navItem}
                 state={{ filter: `` }}
               >
                 Community
               </Link>
-            </li>
-          ) : null}
+            </li> */}
         </ul>
         <div css={styles.searchAndSocialContainer}>
           <SearchForm
@@ -231,6 +229,7 @@ const styles = {
     color: `inherit`,
     display: `block`,
     letterSpacing: `0.03em`,
+    WebkitFontSmoothing: `antialiased`,
     lineHeight: `calc(${presets.headerHeight} - ${navItemTopOffset})`,
     position: `relative`,
     textDecoration: `none`,

www/src/pages/index.js

@@ -16,7 +16,7 @@ import CardHeadline from "../components/card-headline"
 import Diagram from "../components/diagram"
 import BlogPostPreviewItem from "../components/blog-post-preview-item"
 import FuturaParagraph from "../components/futura-paragraph"
-import CtaButton from "../components/cta-button"
+import Button from "../components/button"
 import TechWithIcon from "../components/tech-with-icon"
 
 class IndexRoute extends React.Component {
@@ -25,7 +25,10 @@ class IndexRoute extends React.Component {
     return (
       <Layout location={this.props.location}>
         <Helmet>
-          <meta name="Description" content="Blazing fast modern site generator for React. Go beyond static sites: build blogs, ecommerce sites, full-blown apps, and more with Gatsby." />
+          <meta
+            name="Description"
+            content="Blazing fast modern site generator for React. Go beyond static sites: build blogs, ecommerce sites, full-blown apps, and more with Gatsby."
+          />
         </Helmet>
         <div css={{ position: `relative` }}>
           <MastheadBg />
@@ -146,12 +149,13 @@ class IndexRoute extends React.Component {
                         <FuturaParagraph>
                           It only takes a few minutes to get up and running!
                         </FuturaParagraph>
-                        <CtaButton
+                        <Button
+                          secondary
                           to="/docs/"
                           overrideCSS={{ marginTop: `1rem` }}
                         >
                           Get Started
-                        </CtaButton>
+                        </Button>
                       </div>
                     </Container>
                   </div>
@@ -191,14 +195,15 @@ class IndexRoute extends React.Component {
                           css={{ marginBottom: rhythm(2) }}
                         />
                       ))}
-                      <CtaButton
+                      <Button
+                        secondary
                         to="/blog/"
                         overrideCSS={{
                           marginBottom: rhythm(options.blockMarginBottom * 2),
                         }}
                       >
                         Read More
-                      </CtaButton>
+                      </Button>
                     </Container>
                   </div>
                 </Cards>

www/src/utils/styles.js

@@ -1,4 +1,13 @@
-import { colors } from "./presets"
+import hex2rgba from "hex2rgba"
+import { css } from "glamor"
+
+import presets, { colors } from "./presets"
+import { rhythm, scale, options } from "./typography"
+
+const stripeAnimation = css.keyframes({
+  "0%": { backgroundPosition: `0 0` },
+  "100%": { backgroundPosition: `30px 60px` },
+})
 
 export const scrollbarStyles = {
   WebkitOverflowScrolling: `touch`,
@@ -16,3 +25,83 @@ export const scrollbarStyles = {
     background: colors.ui.light,
   },
 }
+
+export const buttonStyles = {
+  default: {
+    alignItems: `center`,
+    backgroundColor: colors.gatsby,
+    borderRadius: presets.radius,
+    borderWidth: 1,
+    borderStyle: `solid`,
+    borderColor: colors.gatsby,
+    boxShadow: `none`,
+    color: `#fff`,
+    cursor: `pointer`,
+    display: `inline-flex`,
+    fontFamily: options.headerFontFamily.join(`,`),
+    fontWeight: `bold`,
+    flexShrink: 0,
+    lineHeight: 1,
+    WebkitFontSmoothing: `antialiased`,
+    whiteSpace: `nowrap`,
+    padding: `${rhythm(2 / 5)} ${rhythm(1 / 2)}`,
+    backgroundSize: `30px 30px`,
+    transition: `all ${presets.animation.speedDefault} ${
+      presets.animation.curveDefault
+    }`,
+    ":hover, &:focus": {
+      backgroundSize: `30px 30px`,
+      backgroundColor: colors.gatsby,
+      backgroundImage: `linear-gradient(45deg, rgba(0,0,0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.1) 75%, transparent 75%, transparent)`,
+      color: `#fff`,
+      animation: `${stripeAnimation} 2.8s linear infinite`,
+    },
+    ":focus": {
+      outline: 0,
+      boxShadow: `0 0 0 0.2rem ${hex2rgba(colors.lilac, 0.25)}`,
+    },
+    ":after": {
+      content: ``,
+      display: `block`,
+    },
+    "& svg": {
+      marginLeft: `.2em`,
+    },
+    [presets.Tablet]: {
+      ...scale(1 / 5),
+      padding: `${rhythm(2 / 6)} ${rhythm(3 / 5)}`,
+    },
+    [presets.VHd]: {
+      padding: `${rhythm(1 / 2)} ${rhythm(1)}`,
+    },
+  },
+  secondary: {
+    backgroundColor: `transparent`,
+    color: colors.gatsby,
+    fontWeight: `normal`,
+  },
+  large: {
+    // borderRadius: presets.radiusLg,
+    fontSize: scale(1 / 5).fontSize,
+    padding: `${rhythm(2 / 5)} ${rhythm(1 / 2)}`,
+    [presets.Tablet]: {
+      fontSize: scale(2 / 5).fontSize,
+      padding: `${rhythm(2 / 4)} ${rhythm(3 / 5)}`,
+    },
+    [presets.VHd]: {
+      padding: `${rhythm(1 / 2)} ${rhythm(1)}`,
+    },
+  },
+  small: {
+    fontSize: scale(-1 / 3).fontSize,
+    padding: `${rhythm(2 / 5)} ${rhythm(1 / 2)}`,
+    [presets.Tablet]: {
+      fontSize: scale(-1 / 6).fontSize,
+      padding: `${rhythm(2 / 5)} ${rhythm(1 / 2)}`,
+    },
+    [presets.VHd]: {
+      fontSize: scale(-1 / 6).fontSize,
+      padding: `${rhythm(2 / 5)} ${rhythm(1 / 2)}`,
+    },
+  },
+}