Partner program blog post 1st draft (#6907) (#6975)

* Partner program blog post 1st draft (#6907) * Partner program blog post 1st draft @calcsam this is the first draft of the partner program blog post! * Added myself to authors file * Added SFDC campaign to form * Updated author file * Minor edits, incorporated Sam comments * Implement Hubspot form component for blog * Update index.md * Update index.md * Update hubspot-form.js * Update index.md * Add some style to hubspot form (#6977) * Add some style to hubspot form * Width
gatsbyjs · Aug 2, 2018 · b7d8d24 · b7d8d24
1 parent 24dd8d6
commit b7d8d24
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 31 deletions.
diff --git a/docs/blog/2018-08-01-partner-program/index.md b/docs/blog/2018-08-01-partner-program/index.md
@@ -0,0 +1,38 @@
+---
+title: Grow with Gatsby- Announcing the new Gatsby Partner Program!
+date: 2018-08-01
+author: Linda Watkins
+tags: ["partner program", "launch", "agency"]
+---
+
+In the business of building websites or web apps for clients? Get the support you need and the visibility you deserve. Gatsby’s Partner Program is here! 
+
+## Grow with Gatsby
+Gatsby is growing like gangbusters due to the contributions of this great open source community—thank you! We’ve been hearing from more and more agencies and website development shops about how they’re embracing Gatsby to build blazing-fast websites and web apps for their clients. We want to support these efforts and help you get the word out about your amazing work. 
+
+## Gatsby Partner Program
+With that in mind, we’re happy to announce Gatsby’s Partner Program. Partner with Gatsby to get your agency or client websites highlighted on the [Gatsby Site Showcase](https://next.gatsbyjs.org/showcase/) to generate more visibility to your work. We’ll also be building out the partner program in the coming months to add more benefits like training for developers, joint case studies, free swag, and more. To show interest in the program, there are a few simple steps to get started.
+
+## Steps to get started:
+Step 1: Build a client (or agency) website with Gatsby.
+
+Step 2: Submit your Gatsby client or agency website to the [Site Showcase](https://next.gatsbyjs.org/docs/site-showcase-submissions/).
+
+Step 3: Fill out the form below to let us know you’re interested in learning more about future developments to Gatsby’s Partner Program. 
+
+So what’s next for partners?
+
+We’ll have a lot more features and benefits coming soon. Future additions to the program will include:
+
+* Lead capture form on your agency’s [Site Showcase](https://next.gatsbyjs.org/showcase/) page so people can get in touch with you directly
+* Live training for developers (in-person or virtual)
+* Joint case studies that are highlighted on the Gatsby blog, website, and other channels
+* Dedicated pages on [Gatsbyjs.org](https://github.com/gatsbyjs/rfcs/blob/8bb84d8a4ed495678ae76645f940a03ad562a7d1/text/0008--individual-agency-company-pages.md#agency-pages) highlighting partners & showcasing the sites they've built with Gatsby
+* Free swag! Exclusive partner swag coming soon.
+
+Fill out the form below to let us know your interest in the Gatsby Partner Program!
+
+<hubspot-form portal-id="4731712" form-id="bbad5044-d31d-4473-bd57-62cb64fdc811" sfdc-campaign-id="701f4000000VDrYAAW"></hubspot-form>
+
+
+
diff --git a/docs/blog/author.yaml b/docs/blog/author.yaml
@@ -156,4 +156,4 @@
 - id: Khaled Garbaya
   bio: Software developer and full-time opensourcerer at @contentful. He speaks multiple languages and is often overheard saying "Bonjour" in HTML.
   avatar: avatars/khaled-garbaya.jpg
-  twitter: "@khaled_garbaya"
+  twitter: "@khaled_garbaya"
diff --git a/www/package.json b/www/package.json
@@ -48,8 +48,10 @@
     "parse-filepath": "^1.0.2",
     "prismjs": "^1.15.0",
     "react-helmet": "^5.2.0",
+    "react-hubspot-form": "^1.3.3",
     "react-icons": "^2.2.7",
     "react-instantsearch": "^4.5.1",
+    "rehype-react": "^3.0.3",
     "slash": "^1.0.0",
     "typeface-space-mono": "^0.0.54",
     "typeface-spectral": "^0.0.54",

diff --git a/www/src/components/email-capture-form.js b/www/src/components/email-capture-form.js
@@ -1,7 +1,8 @@
 import React from "react"
 import { rhythm, options } from "../utils/typography"
 import presets, { colors } from "../utils/presets"
-import { css } from "glamor"
+import { formInput } from "../utils/form-styles"
+import { css, merge } from "glamor"
 import hex2rgba from "hex2rgba"
 import addToMailchimp from "gatsby-plugin-mailchimp"
 
@@ -10,22 +11,6 @@ let stripeAnimation = css.keyframes({
   "100%": { backgroundPosition: `30px 60px` },
 })
 
-const formInputDefaultStyles = {
-  backgroundColor: `#fff`,
-  border: `1px solid ${colors.ui.bright}`,
-  borderRadius: presets.radius,
-  color: colors.brand,
-  fontFamily: options.headerFontFamily.join(`,`),
-  padding: rhythm(1 / 2),
-  verticalAlign: `middle`,
-  transition: `all ${presets.animation.speedDefault} ${
-    presets.animation.curveDefault
-  }`,
-  "::placeholder": {
-    color: colors.lilac,
-    opacity: 1,
-  },
-}
 
 class EmailCaptureForm extends React.Component {
   constructor() {
@@ -113,21 +98,19 @@ class EmailCaptureForm extends React.Component {
                   name="email"
                   placeholder="you@email.com"
                   onChange={this._handleEmailChange}
-                  css={{
-                    ...formInputDefaultStyles,
+                  css={merge(formInput, {
                     width: `250px`,
                     ":focus": {
                       borderColor: colors.gatsby,
                       outline: 0,
                       boxShadow: `0 0 0 0.2rem ${hex2rgba(colors.lilac, 0.25)}`,
                     },
-                  }}
+                  })}
                 />
                 <button
                   type="submit"
                   onClick={this._handleFormSubmit}
-                  css={{
-                    ...formInputDefaultStyles,
+                  css={merge(formInput, {
                     borderColor: colors.gatsby,
                     color: colors.gatsby,
                     cursor: `pointer`,
@@ -144,7 +127,7 @@ class EmailCaptureForm extends React.Component {
                       outline: 0,
                       boxShadow: `0 0 0 0.2rem ${hex2rgba(colors.lilac, 0.25)}`,
                     },
-                  }}
+                  })}
                 >
                   Subscribe
                 </button>

diff --git a/www/src/components/hubspot-form.js b/www/src/components/hubspot-form.js
@@ -0,0 +1,80 @@
+import React, { Component } from "react"
+import HubspotForm from "react-hubspot-form"
+import { css } from "glamor"
+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` },
+})
+
+export default class GatsbyHubspotForm extends Component {
+  render() {
+    const { portalId, formId, sfdcCampaignId } = this.props
+
+    // See https://designers.hubspot.com/docs/cos/hubspot-form-markup#styling-forms for information on how to style the form
+    return (
+      <div
+        css={{
+          backgroundColor: colors.ui.light,
+          color: colors.gatsby,
+          fontFamily: options.headerFontFamily.join(`,`),
+          padding: `15px`,
+            "& .hs-form fieldset": {
+              maxWidth: 'none',
+              width: '100%',
+            },
+          "& .hs-form-field": {
+            paddingBottom: `20px`,
+          },
+          "& ul.hs-error-msgs": {
+            listStyleType: `none`,
+            margin: 0,
+            color: colors.warning,
+            fontSize: rhythm(1 / 2),
+          },
+          "& .hs-form-required": {
+            color: colors.warning,
+          },
+          "& .hs-form input": formInput,
+          '& .hs-form input[type="text"], .hs-form input[type="email"], .hs-form input[type="number"]': {
+            width: `100% !important`,
+            ":focus": {
+              borderColor: colors.gatsby,
+              outline: 0,
+              boxShadow: `0 0 0 0.2rem ${hex2rgba(colors.lilac, 0.25)}`,
+            },
+          },
+          "& .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)}`,
+            },
+          },
+        }}
+      >
+        <HubspotForm
+          portalId={portalId}
+          formId={formId}
+          sfdcCampaignId={sfdcCampaignId}
+          loading="Loading..."
+          css=""
+        />
+      </div>
+    )
+  }
+}
diff --git a/www/src/templates/template-blog-post.js b/www/src/templates/template-blog-post.js
@@ -1,6 +1,7 @@
 import React from "react"
 import Helmet from "react-helmet"
 import Link from "gatsby-link"
+import rehypeReact from "rehype-react"
 import ArrowForwardIcon from "react-icons/lib/md/arrow-forward"
 import ArrowBackIcon from "react-icons/lib/md/arrow-back"
 import Img from "gatsby-image"
@@ -11,6 +12,12 @@ import typography, { rhythm, scale, options } from "../utils/typography"
 import Container from "../components/container"
 import EmailCaptureForm from "../components/email-capture-form"
 import TagsSection from "../components/tags-section"
+import HubspotForm from "../components/hubspot-form"
+
+const renderAst = new rehypeReact({
+  createElement: React.createElement,
+  components: { "hubspot-form": HubspotForm },
+}).Compiler
 
 class BlogPostTemplate extends React.Component {
   render() {
@@ -210,12 +217,9 @@ class BlogPostTemplate extends React.Component {
                   )}
               </div>
             )}
-          <div
-            className="post-body"
-            dangerouslySetInnerHTML={{
-              __html: this.props.data.markdownRemark.html,
-            }}
-          />
+          <div className="post-body">
+            {renderAst(this.props.data.markdownRemark.htmlAst)}
+          </div>
           <TagsSection tags={this.props.data.markdownRemark.frontmatter.tags} />
           <EmailCaptureForm />
         </Container>
@@ -298,7 +302,7 @@ export default BlogPostTemplate
 export const pageQuery = graphql`
   query TemplateBlogPost($slug: String!) {
     markdownRemark(fields: { slug: { eq: $slug } }) {
-      html
+      htmlAst
       excerpt
       timeToRead
       fields {

diff --git a/www/src/utils/form-styles.js b/www/src/utils/form-styles.js
@@ -0,0 +1,20 @@
+import presets, { colors } from "../utils/presets"
+import { style } from "glamor"
+import { rhythm, options } from "../utils/typography"
+
+export const formInput = {
+    backgroundColor: `#fff`,
+    border: `1px solid ${colors.ui.bright}`,
+    borderRadius: presets.radius,
+    color: colors.brand,
+    fontFamily: options.headerFontFamily.join(`,`),
+    padding: rhythm(1 / 2),
+    verticalAlign: `middle`,
+    transition: `all ${presets.animation.speedDefault} ${
+          presets.animation.curveDefault
+        }`,
+    "::placeholder": {
+          color: colors.lilac,
+          opacity: 1,
+        },
+}