Adds email capture to bottom of blog #3333

benjaminhoffman · 2017-12-24T23:27:47Z

Here is first attempt at adding an email capture form to the blog posts. Apologies for any code that isn't inline with gatsby code style! Feedback is welcome of course and I'll update the PR accordingly.

For Mailchimp integration... maybe I should build a MC plugin to go along with this PR. That would be cool. Thoughts?

To Do:

code cleanup & feedback
mailchimp integration
setup GA conversion tracking

closes #3332 (comment)

gatsbybot · 2017-12-24T23:34:15Z

Deploy preview for gatsbygram ready!

Built with commit 00b2fd8

https://deploy-preview-3333--gatsbygram.netlify.com

calcsam · 2017-12-26T20:28:59Z

This is great. The mailchimp address you'll want to hit with form collection is: https://gatsbyjs.us17.list-manage.com/subscribe/post?u=1dc33f19eb115f7ebe4afe5ee&id=f366064ba7

In terms of extending this more broadly, that would be awesome! There are really two form use-cases right now in Gatsby that badly need official support -- email collection forms and general form contacts.

What we'd want is probably not a gatsby-plugin-mailchimp per se, since storing credentials isn't the hard part of this problem. Rather, it's having an official form component with sensible defaults for various use cases, that can be dropped into various pages and customized with a few props. Something like a gatsby-collection-form component.

Right now, existing React form libraries (primarily react-final-form and formik) tend towards infinite customizability with few defaults. This is well suited for business workflow apps with dedicated teams, project managers and strong opinions on UI & validation rules. Works less well with websites where people will want to drop in a ready-made email collection component that fits one of several use cases (pop-up-block-when-reaching-bottom-of-page, inline-block-at-bottom-of-post, slim-version-for-use-in-header-or-footer).

benjaminhoffman · 2017-12-27T01:26:57Z

@calcsam sounds cool. Just a couple questions. Are you suggesting we create a module that others can import into their own project? Would this be a node module or an official gatsby plugin?

If the former, then it can be built in vanilla JS (no gatsby needed), right?

If the latter, what's your thoughts on doing something like gatsby-plugin-forms, where the first export I create is two components: form wrapper, input field (with ability to change the type) for example.... and in the long run it exports all types of form fields with minimal CSS but loaded with state management, fetch, validation, etc so the end user doesn't need to bother with that.

Want to make sure I follow 100% before diving in. An example would speak volumes. Do you have something I can reference that's similar to what you'd like to build?

ps - I'm hoping to start small. Just get the email capture out the door and slowly build on top of that, esp bc we have an immediate need for that.

KyleAMathews · 2017-12-27T08:27:31Z

This PR is not the right time to build a generic Form component or even a generic MC component — build something specific now and get it out quickly and later we can refactor this work to use a generic <Form /> component and/or MC component.

PRs work best when you don't try to accomplish too much in each PR :-)

@calcsam could you create an issue with your form thinking so we can start fleshing that out there?

benjaminhoffman · 2017-12-27T19:01:36Z

@KyleAMathews fantastic. Will continue hacking today.

@calcsam I think your idea/suggestion is great. I'm going to get this PR across the finish line but KMP about your <Form />.

benjaminhoffman · 2017-12-27T20:37:17Z

getting a CORS error. from their docs & the internets... We do not support client-side javascript API access. You’ll need to route your requests through a server you control. Further, MailChimp does not support client-side implementation of our API using CORS requests due to the potential security risk of exposing account API keys.

KyleAMathews · 2017-12-27T21:17:21Z

Use the method here perhaps? https://github.com/revolunet/react-mailchimp-subscribe/blob/master/README.md

calcsam · 2017-12-28T02:41:10Z

@KyleAMathews yep, I'll create an issue with that thinking. Agree 💯 on keeping this small -- should probably have been more clear about that in initial comment. Let's get this merged in!

… emailcapture

benjaminhoffman · 2017-12-28T20:09:13Z

Updated PR with MC functionality! Couple things:

please scrupulously review my code, as this is my first PR and not sure how much this matches our code style
We need to make MC config updates (happy to do it if you can share access). Specifically, we need to add a PATHNAME field to the list and uncheck the visible setting. (Knowing the URL the subscriber was on when they signed up is super helpful for list targeting and page optimizations later down the road).
Add'l updates: we should take this as an opportunity to make sure our MC settings are correct. ie, is the confirmation email branded correctly, is our address clean and up to date, do we want double opt-in or not, did we add a logo and brand colors, etc. As people start signing up, they will be receiving auto-generated emails and may see the forms.

Testing -- I didn't add tests. If you are testing at home, you may want to try at least the following:

correct email address (did you get a double-opt in email)
an invalid email address
the same email address twice (use your real email address for this one)
test@test.com

Conversion Tracking:

We should be tracking conversions in Google Analytics. I added an #email-capture ID to make this easier to setup. But we'd have to use Google Tag Manager. I'd love to open a PR to add GTM to www. @KyleAMathews thoughts?
If we have GTM, I'd also love to use it as a way to track how many people are clicking external links. It would be great to know how much traffic we are "losing" and where they are navigating to.

benjaminhoffman · 2017-12-28T20:57:47Z

www/src/components/email-capture-form.js

+// From: https://us17.admin.mailchimp.com/lists/integration/embeddedcode?id=XXXXXX
+// Where `XXXXXX` is the MC list ID
+// Note: we change `/post` to `/post-json`
+const MAILCHIMP_URL = `https://gatsbyjs.us17.list-manage.com/subscribe/post-json?u=1dc33f19eb115f7ebe4afe5ee&amp;id=f366064ba7`


should i make these env vars?

ideally this should be a prop passed into the component named mailChimpUrl

thought about that too but after getting this merged, I was thinking of adding the form on other non-blog pages. then each parent component will need to pass the MAILCHIMP_URL as a prop, which gets super messy.

thoughts on env var? or just keeping this URL in this component? imagine having this component in a bunch of different templates in the future.

I'd just leave it hard-coded. It's not really a secret nor are we trying to make this component reusable for multiple lists atm. It's trivial to refactor later.

calcsam · 2017-12-29T08:34:14Z

www/src/components/email-capture-form.js

+class EmailCaptureForm extends React.Component {
+  state = {
+    email: ``,
+  }


should be set in the constructor eg https://github.com/gatsbyjs/gatsby/blob/master/www/src/components/markdown-page-footer.js#L27-L30

Although React docs do say to initialize state within the constructor, I've been reading a lot about how that's not necessary if you don't have props, like here. https://stackoverflow.com/a/37788410 and this post touches on this concept as well: https://babeljs.io/blog/2015/06/07/react-on-es6-plus

But happy to refactor using the constructor. Just thought I'd share anyway.

calcsam · 2017-12-29T08:36:29Z

www/src/components/email-capture-form.js

+                status: `error`,
+                msg: err,
+              })
+            } else if (data.result !== `success`) {


what does this state represent?

(just curious, might be useful to comment)

calcsam · 2017-12-29T08:38:23Z

www/src/components/email-capture-form.js

+        status: `sending`,
+      },
+      // setState callback (jsonp)
+      () =>


could we extract & name this function, eg const postEmailToMailchimp?

calcsam · 2017-12-29T09:32:59Z

www/src/components/email-capture-form.js

+                      borderRadius: `2px`,
+                      border: `2px solid ${presets.brand}`,
+                      backgroundColor: presets.brand,
+                      color: `black`,


may want a lighter color

calcsam · 2017-12-29T09:42:04Z

This is awesome. Great that you have context on a lot of these details. The PR itself looks good --
made some suggestions, any additional stuff we can always tweak post-merge.

I've added you to the mailchimp stuff so you can handle the config changes. Our mailchimp settings currently haven't been set up (no branded email, no email template, no double-opt-in) so that will be the next project :) They don't get any auto-generated emails as of yet though so we can do that next rather than that being a blocker for this.

Re: using Google Tag Manager, that sounds like a great idea and we'd love to get more fine-grained analytics on those questions. Let me go set it up, give you access, and then fire away on PRs there.

benjaminhoffman · 2017-12-29T20:31:15Z

@calcsam made some updates to Mailchimp

created a new list called "Internal" that includes you, me, Kyle, and Shannon. Made it a private list that we can use for testing email campaigns and other signup forms
updated the list you created with the following:
- list name changed to "Gatsby Blog Subscribers" from simply "Gatsby"
- confirmed that double opt in is off; welcome email is off
- added an invisiblepathname field so we can keep track
- changed your email from .com to .org
- made birthday field invisible
- changed the "from" attributes from you to Kyle Matthews, as I think for now most subscribers will have a stronger association with Kyle/Gatsby === higher open rates. Feel free to change back if you disagree!

To Do:

verify the gatsby.org email address (@KyleAMathews to do... email sent from MC, check your inbox!)
manually upload a scrubbed/cleaned list of email subscribers we already have stored somewhere
style/brand any signup forms and auto-generated emails
update this PR, deploy, check that it's working

KyleAMathews · 2017-12-29T22:11:21Z

@benjaminhoffman just setup email forwarding for gatsbyjs.org 😅 wonder what other emails we'd missed. Could you resend the verification email?

benjaminhoffman · 2017-12-29T22:32:21Z

Just tried. Error message: We're having some trouble delivering to kyle@gatsbyjs.org. Looks like the verification email might've bounced. [Learn more].

here is the direct link: https://us17.admin.mailchimp.com/lists/settings/defaults?id=63439

here is the troubleshoot link: https://kb.mailchimp.com/accounts/email-authentication/verify-a-domain#Troubleshoot-Domain-Verification

another option is to setup ben@ or other address and I can handle all these steps. totally your call.

Ben

KyleAMathews · 2017-12-29T22:36:53Z

I got the email from mailchimp but I don't have a mailchimp account so not really sure where to verify it.

benjaminhoffman · 2017-12-29T23:37:17Z

@KyleAMathews ah! invite sent to kyle@

KyleAMathews · 2017-12-30T19:52:38Z

Mailchimp should be ready to go to send emails from kyle@gatsbyjs.org — though, thinking about this again, why not just send from my normal gmail account?

KyleAMathews

Looking good!

KyleAMathews · 2018-01-02T18:04:23Z

www/src/components/email-capture-form.js

+// From: https://us17.admin.mailchimp.com/lists/integration/embeddedcode?id=XXXXXX
+// Where `XXXXXX` is the MC list ID
+// Note: we change `/post` to `/post-json`
+const MAILCHIMP_URL = `https://gatsbyjs.us17.list-manage.com/subscribe/post-json?u=1dc33f19eb115f7ebe4afe5ee&amp;id=f366064ba7`


I'd just leave it hard-coded. It's not really a secret nor are we trying to make this component reusable for multiple lists atm. It's trivial to refactor later.

KyleAMathews · 2018-01-02T18:07:43Z

www/src/components/email-capture-form.js

+  // - not an empty string,
+  // - greater than 5 characters,
+  // - includes both `@` and `.`
+  _isValidEmailAddress = email =>


It's better to off-load common algorithms like this to an NPM module e.g. https://github.com/Sembiance/email-validator

KyleAMathews · 2018-01-02T18:09:11Z

www/src/components/email-capture-form.js

+    return (
+      <div
+        css={{
+          border: `2px solid ${presets.brand}`,


Please use the "rhythm" function for spacings

KyleAMathews · 2018-01-02T18:10:21Z

www/src/components/email-capture-form.js

+                  placeholder="you@email.com"
+                  onChange={this._handleEmailChange}
+                  css={{
+                    marginTop: rhythm(0.3),


Use divisions of 2 for rhythm units e.g. 1/4, 1/2, 1, 2, etc.

benjaminhoffman · 2018-01-04T04:38:57Z

@KyleAMathews updated PR as per your comments. Do we have any documentation on rhythm? I'm not quite sure when and when not to use it + the proper way to do so.

Hope this PR is up to par! Looking forward to getting it in. If you're happy with the code, give it a test and let's start collecting emails! :) 👍

KyleAMathews · 2018-01-10T13:23:51Z

Rhythm function is documented here: https://github.com/KyleAMathews/typography.js/blob/master/docs/what.md#base-all-other-spacings-off-the-rhythm-unit

KyleAMathews · 2018-01-10T13:25:19Z

Rhythm should be used whenever you're adding "spacing" e.g. margin or padding.

KyleAMathews · 2018-01-10T13:26:28Z

A bit of other feedback — please use the same button component used on the front page. Looking good though!

live preview https://deploy-preview-3333--gatsbyjs.netlify.com/blog/2017-12-20-introducing-the-gatsby-ux-research-program/

benjaminhoffman · 2018-01-14T17:25:00Z

@KyleAMathews spent some time today fiddling with the <CtaButton> component in order to use the same button component as on the front page. Ran into a couple issues:

component button css defaults has too much padding (see below). So I need to override it but the position of the overrideCSS prop comes first so it doesn't really override anything. I can move it down but...
even when moved, the specificity of [presets.Tablet] and [presets.VHd] is still greater so moving ...overrideCSS doesn't do much for those viewports
[MAYBE FIXED] the component proptypes say to prop is required, yet we don't use that here. Easy fix would be to make that prop optional if that's cool with you?
[MAYBE FIXED] component doesn't have an onClick prop. Easy fix is to simply add that prop.

Solutions could include refactoring this CtaButton component or simply building a new one, but wanted to check with you before starting down either road.

KyleAMathews · 2018-01-15T16:57:37Z

Fiddled with the styles a bit. Agree the button couldn't be imported directly as is so I copied in the animation styles directly.

Thanks for the great work here!

benjaminhoffman · 2018-01-15T22:26:59Z

@KyleAMathews lol, the styling in Chrome, Safari, and Firefox respectively:

I really liked the outline border bc it brought more attention to the signup box.... but I guess this is good for now.

Also, confirmed the form works in all three browsers. Will keep an eye on signups and once we hit 50 or so, we can discuss setting up some email campaigns.

fk · 2018-01-15T23:15:45Z

Ayayay, I guess this is my bad :-/ 🙏 Will take care of the cross browser styling issues tomorrow!

…

Am 15.01.2018 um 23:27 schrieb Benjamin Hoffman ***@***.***>: @KyleAMathews lol, the styling in Chrome, Safari, and Firefox respectively: I really liked the outline border bc it brought more attention to the signup box.... but I guess this is good for now. Also, confirmed the form works in all three browsers. Will keep an eye on signups and once we hit 50 or so, we can discuss setting up some email campaigns. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

KyleAMathews · 2018-01-16T01:03:40Z

@fk this isn't your button — I copied over some styles because the existing button had some assumptions that didn't work here. Appreciate you taking a look at it!

@benjaminhoffman I thought it was a bit much :-) we'll see how fast people sign up — perhaps we can make the form a bit more prominent.

* Adds email capture to bottom of blog * Adds email capture to bottom of blog * Adds Mailchimp functionality * Refactors postEmailToMailchimp method, updates cc * updates rhythm css, installs & uses validator module * Fiddle with design

@kylemathews

* Support URLs that end in SemVer ranges (#3305) Fixes #3164. * page path defaults to '/' (#3325) * page path defaults to '/' * Add test * Use graymatter excerpt in gatsby-transformer-remark (#2883) * Check for graymatter excerpt Checks to see if there is a gray-matter excerpt before returning a pruned character count * Fix test Remove a variable that wasn't being used * Create page to describe excerpts * Update using-remark example * Remove package-lock.json * Remove console.log statements * Update copy Updates copy to be a bit more descriptive * Update header for example page * Begin stubbing out extend-node.js tests Created a basic framework for creating a markdown node via the onCreateNode function. This should be expanded to factor in the changes that occur in the setFieldsOnGraphQLNodeType function. * Add query test Adds a test that uses graphql to query a node with its excerpt * Regroup tests Regroups tests so that graphql queries and node tests are in their own groups * Fix linting errors Fixes linting errors that were causing issues on travisCI * Format * handles integer with valida date format correctly (#3461) * Upgrade style-loader to fix CSS modules issue (#3283) * Upgrade style-loader to 0.19.0 to fix webpack-contrib/style-loader#182 * Update to last version * format/bootstrap * Publish - gatsby-link@1.6.34 - gatsby-source-faker@1.0.0 - gatsby-transformer-remark@1.7.27 - gatsby@1.9.151 * Updated links for Glamor and Styled Components (#3462) * Updated links for Glamor and Styled Components * Update index.md * Update tutorial.js * Add link to the using-remark website * Don't create pages for test files (#3464) * Don't generate pages for test files * Use parsedPath.base instead of path * Add gatsby-source-behance to plugins list (#3465) * activated mergeLinkHeaders (#3463) * Add cache-control examples to caching docs page (#3468) * Publish - gatsby-plugin-netlify@1.0.13 - gatsby-transformer-remark@1.7.28 - gatsby@1.9.152 * Revert "Upgrade style-loader to fix CSS modules issue (#3283)" This reverts commit 834dcb8. A number of people were reporting that this broke the default starter in node 8 e.g. https://twitter.com/Lehanism/status/951397594953076737 * Publish - gatsby@1.9.153 * Fix Links Redirection (#3471) * Fix Links Redirection * Fix Glamor Link Redirection * Fix typo (#3470) * Update tutorial-links.yml * Cleanup Glamor / Styled Component mini-tutorials (#3474) * Cleanup Glamor / Styled Component mini-tutorials * Tweaks * Fix typo in building with components section (#3476) reusabilty => reusability * Fix typo (#3477) * Update Deploy Gatsby page - Gitlab Pages (#3482) * Update Deploy Gatsby page - Gitlab Pages Have made a few edits, mainly to include the Path Prefix plugin, which is needed when using Gitlab pages without a custom domain. This has basically been shamelessly copied from the Github pages example... Also did a bit of formatting. * fix typo * correct key behavior (#3483) * correct key behavior * remove trailing slash logic * remove adding new variable * Publish - gatsby-plugin-create-client-paths@1.0.2 - gatsby-react-router-scroll@1.0.8 - gatsby@1.9.154 * Add Strata starter (#3488) Add Strata starter to the list. * Use `_.isPlainObject` to prevent false Array positives (#3490) * Publish - gatsby-source-wordpress@2.0.43 * update styled-jsx dep in gatsby-plugin-styled-jsx (#3493) * update styled-jsx dep in gatsby-plugin-styled-jsx * move styled-jsx to peerDependencies in gatsby-plugin-styled-jsx * Publish - gatsby-plugin-styled-jsx@2.0.1 * gatsby-image docs (#3500) * Update CONTRIBUTING.md small typo * Update README.md typo fixes and additional section * Update awesome-gatsby.md * Update README.md * Easy edits based off of observing Eden go thru tutorials (#3501) A few typo corrections and clarified wording. There are more big changes to address later. * [gatsby] don't run service-workers outside of https or localhost (#3502) * [gatsby] don't run service-workers outside of https or localhost see: #3385 * add detail around running local changes to CONTRIBUTING.md * Update CONTRIBUTING.md * format * format * Publish - gatsby-image@1.0.32 - gatsby@1.9.155 * Properly use `withPrefix` in adding-images-fonts-files docs (#3503) I came across this while browsing through the documentation. The `withPrefix` import was left unused in the "escape hatch" example, which I'm pretty sure is not intentional. * Create new npm keyword for gatsby components (#3507) * Publish - gatsby-image@1.0.33 * Fix typo in docs (#3511) * Add Netlify CMS plugin, related docs (#3509) * add Netlify CMS plugin * add Netlify CMS guide * add Netlify to deploy docs * Update deploy-gatsby.md * Publish - gatsby-plugin-netlify-cms@1.0.1 * Fix clone instructions (#3514) * Publish - gatsby-plugin-netlify-cms@1.0.1 * Fix instructions for cloning the docs * Search and replace the hostname in URLs. (#3498) * Search and replace the hostname in URLs. #3450 * Fixed code styling issues * Missed backticks for the timers requirement * Updated readme with search and replace options * Removed async, wrapped json parse in a try catch and updated blacklist function * Updated search and replace api and updated documentation * Added logging for invalid search and replace option * make option more explicit, updated default value & removed redundant logging * Updated the variable name making it clearer * Add documentation on adding list of blog posts (#3510) * Add documentation on adding list of blog posts * Update adding-a-list-of-markdown-blog-posts.md * Import the component * [DOCS] Adding Markdown pages: Remove useless fields (#3517) * [DOCS] Adding Markdown pages: Remove useless fields * Update adding-markdown-pages.md * [DOCS] Links: Remove emphasis from implem stubs (#3518) * [DOCS] Links: Remove emphasis from implem stubs Some docs have been implemented but are still marked as stubs in the navigation drawer * Update doc-links.yaml * fix link (#3513) * Add missing comma in sitemap example (#3520) * Move inlined webpack manifest to the end of body element (#3519) * Adds email capture to bottom of blog (#3333) * Adds email capture to bottom of blog * Adds email capture to bottom of blog * Adds Mailchimp functionality * Refactors postEmailToMailchimp method, updates cc * updates rhythm css, installs & uses validator module * Fiddle with design * Fix `gatsby-plugin-nprogress` default options param (#3533) * Fix default `pluginOptions` parameter This PR fixes #3484 Correctly merge `defaultOptions` with `pluginOptions` * Indent `styles` template string correctly * Change default * Format * Publish - gatsby-plugin-netlify-cms@1.0.2 - gatsby-plugin-nprogress@1.0.10 - gatsby-plugin-sitemap@1.2.10 - gatsby-source-wordpress@2.0.44 - gatsby@1.9.156 * Don't use internal name when reporting there's an error in gatsby-node.js fixes #2945 (#3536) * Don't use internal name when reporting there's an error in gatsby-node.js fixes #2945 * Move var initialization into tighter scope * can I code??? * Publish - gatsby@1.9.157 * Add Developer Ecosystem to websites (#3540) * Removes words like 'simple' & 'easy' from docs/www (#3523) * Removes words like 'simple' & 'easy' from docs/www * Additional optimizations * Update gatsby-v1.md * Update add-404-page.md * Update gatsby-style-guide.md * Update styled-components.md * Update index.md * Update index.md * cpinnix/verious starter (#3543) * Added verious-boilerplate to gatsby starters documentation. * Added Charles Pinnix Website and Verious to Showcase. * gatsby-plugin-sharp: Remove warning for resolutions when requested width and image width are equal (#3537) * Add to instructions that you need gatsby-plugin-sharp fixes #3545 (#3547) * Update katex package to 0.8.3 (#3548) * add unique titles to docs, tutorial, blog (#3550) * Fix typo in KaTeX usage example (#3549) * format * Publish - gatsby-plugin-netlify@1.0.14 - gatsby-plugin-sharp@1.6.25 - gatsby-remark-embed-snippet@1.0.6 - gatsby-remark-images@1.5.37 - gatsby-remark-katex@1.0.9 - gatsby-remark-prismjs@1.2.12 * [www] Fix <link rel=„author“> href (#3555) * [www] Fix email-capture-form cross browser issues (#3553) * pull shared <input>/<button> styles into constant * add default background color * add placeholder styles * use Futura instead of Spectral for form inputs* help Safari rendering <button> and <input> at equal height (tested in v11.0.2) * add focus styles * add focus styles to CtaButton * Add docs page with overview of Gatsby's usage of GraphQL (#3557) * Add docs page with overview of Gatsby's usage of GraphQL * Add missing word * Debugging HTML Builds - fix copy&paste error (#3565) the point of the code-demo is that if we wrap the module it does not fail * Update outdated snapshot (#3566) * Update readme with demo link (#3573) * Move script loader after webpack manifest (#3569) This should ensure that when any external scripts are loaded using script loader, the webpack manifest is already present. * Publish - gatsby-remark-katex@1.0.10 - gatsby@1.9.158 * Added 'Steve Meredith's Portfolio' to 'Showcase' (#3576) * City of Boston case study blog post (#3583) * boston blog post * blog v2 * Add Put.io landing page to showcase (#3580) * Allow arrays with more than one file path & ignore empty strings (#3577) * Publish - gatsby@1.9.159 * Add search form to site (#3421) * Add search form to site header * Prevent sidebar from overlapping search results * Override default search result styles * Reduce size of mask image * Prettier * Add a class name for the DocSearch crawlers As mentioned in the DocSearch signup message: #3097 (comment) * Disable DocSearch's debug mode * Capture default navigation events, replace with client-side navigation * Add a second identifier class for DocSearch * Improve mobile styles * Improve styling - Increase specificity so styles work in production build - Tidy up layout at medium and small breakpoints - Prettier * Load external CSS after document body * Some minor edits (#3586) * Some minor edits I also think it could be cool to explain just a few use cases that answer this question: "Why is GraphQL so cool?" I also expected to see code examples for image stuff. Also, a random thing about colons that I learned last year is this: a full sentence must precede the colon :) * Tweak * Add sample code showing off gatsby-image + image processing to query with GraphQL page (#3589) * Add sample code showing off gatsby-image + image processing to query with GraphQL page * Update querying-with-graphql.md * Update README.md * Improve documentation for createParentChildLink (#3594) * Improve documentation for createParentChildLink * Format * edit * Some updates to the awesome gatsby page (#3595) * Add Ryan Wiemer's Portfolio to the showcase (#3578) * Updated Plugins.md (#3593) Added Gatsby Directus Source Plugin * [www] Add gatsby-plugin-postcss-sass (#3590) * [www] Improve docsearch UI for small devices (#3597) * [www] Improve docsearch for small devices * ditch css.global(…) and instead use css.insert() for all CSS overriding/building upon the stock docsearch.css – couldn’t figure out any advantages in using css.global over css.insert() * full-width result list items and calmer subcategory titles for small devices * „purpelize“ UI and replace a few more stock colors with equivalents from utils/presets * slightly wider result dropdown for desktop and above * remove result dropdown outer padding and fiddle with whitespace * debug:false * Add section why GraphQL is *cool* (#3606) * [www] Increase navigation z-index (#3599) Prevent the author link on blog post cards from showing above the new docsearch dropdown. * Added `gatsby-plugin-bugherd` to community plugins (#3605) * [gatsby-source-contentful] Delete original link regardless of ID validity (#3592) * wip * [gatsby-source-contentful] Delete original link regardless of presence of resolvable ID * Publish - gatsby-image@1.0.34 - gatsby-source-contentful@1.3.32 - gatsby@1.9.160 * Create new page docs/creating-hybrid-pages-with-static-and-dynamic-components.md (#3579) * Update docs/creating-and-modifying-pages.md to expand on the use of client-only routes to create a hybrid or "app-shell" Gatsby app * + Split hybrid page docs into its own page and update linked pages * Update creating-and-modifying-pages.md * Update and rename creating-hybrid-pages-with-static-and-dynamic-components.md to building-apps-with-gatsby * Update creating-and-modifying-pages.md * Rename building-apps-with-gatsby to building-apps-with-gatsby.md * Update README.md * Update building-apps-with-gatsby.md * Add link to new docs page * Enable filtering on linked nodes (#3600) Add support to filter on linked nodes. Close #3190 * Update comment * Publish - gatsby-plugin-create-client-paths@1.0.3 - gatsby@1.9.161 * Bundle Netlify CMS styles (#3611) * define webpack loader.exclude with array for extensibility * generate separate CSS bundle for Netlify CMS plugin * Fix images disappearing from rendered markdown files (#3612) * Fix images disappearing from rendered markdown files Fixes #3608 * Revert invalid indentation changes * Revert "Enable filtering on linked nodes" (#3613) * Revert "Fix images disappearing from rendered markdown files (#3612)" This reverts commit 01022ab. * Revert "Bundle Netlify CMS styles (#3611)" This reverts commit d19ec31. * Revert "Publish" This reverts commit 53f66a4. * Revert "Update comment" This reverts commit 2b22c2c. * Revert "Enable filtering on linked nodes (#3600)" This reverts commit 7120e5a. * Publish - gatsby-plugin-netlify-cms@1.0.3 - gatsby-remark-images@1.5.38 - gatsby@1.9.162 * Add yerevancoder (#3598) * Fix gatsby-remark-image (#3620) * Publish - gatsby-plugin-netlify-cms@1.0.4 - gatsby-remark-images@1.5.39 - gatsby@1.9.163 * WordPress Media Download Basic Auth Fix (#3614) * WordPress Media Download Basic Auth Fix * format * Publish - gatsby-source-drupal@2.0.13 - gatsby-source-filesystem@1.5.12 - gatsby-source-wordpress@2.0.45 * Set default auth object * Publish - gatsby-source-drupal@2.0.14 - gatsby-source-filesystem@1.5.13 - gatsby-source-wordpress@2.0.46 * Improve checks on authentication so have wiggle room in future * Publish - gatsby-source-drupal@2.0.15 - gatsby-source-filesystem@1.5.14 - gatsby-source-wordpress@2.0.47 * Fix passing auth info to createRemoteFileNode (#3628) * Fix copying "dev-404-page.js" to the cache folder on Windows (#3627) * Fix images disappearing from rendered markdown files Fixes #3608 * Revert invalid indentation changes * Fix copying "dev-404-page.js" to the cache folder on Windows Fixes #2819 * Fix snapshot tests * Revert invalid improper snapshot test modification * Publish - gatsby-source-wordpress@2.0.48 * Publish - gatsby-source-wordpress@2.0.49 - gatsby@1.9.164 * Tweak copy on the new building apps with gatsby docs page (#3631) * Added gatsby-starter-lumen * Add link to Gentics Mesh source community plugin (#3629) * Add section about deploying with now to the docs (#3641) * Add section to the deploy docs page for deploying to now * Add section to the deploy docs page for deploying to now * Add install code snippet * Update deploy-gatsby.md * docs: gatsby config options (#3095) (#3646) * index.md (#3638) * index.md I am not the only one who got this problem. I think some other junior leaner will do the same. My English is poor.If the idea is good, please change it to correct spelling and grammar. here is the question link: #1739 * Update index.md * All the author info for Pierre (#3651) I'm pretty sure I need to update the actual blog post. It's not in master branch on my computer yet, so will just edit it via web * Strapi blog post content (#3618) * Strapi blog post content Avatar and bio still coming, will make those edits and edit yaml later * Updated author info Also I just realized that the images in here might not work if we don't have original files in the directory. Is this true, @kylemathews? * Add tutorial series links to docs (#3634) * Add tutorial series links to docs * Update awesome-gatsby.md * [WIP] Update Gatsbygram to make it work with current (unofficial) JSON API. (#3349) * Update Gatsbygram to make it work with current (unofficial) JSON API. * Revert back to previous data structure; add case study URL to README. * Contributing (#3619) * Contributing Not sure if "adding unit or functional tests" makes sense. Took it from webpack example. Also added your hierarchy of helpfulness under ### special note on issues. Don't know if the sentence introducing them is the best advice... Also check the plugin naming convention. Hope I'm getting the header levels right here. There is some overlap here with the Gatsby style guide. I've got it on a to-do list to think through division of information between the two docs * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * [gatsby-transformer-remark] Add `htmlAst` field (#3596) This implements a GraphQL field that presents the rehype AST as JSON, allowing for this information to be consumed from a page template and presented dynamically. * Publish - gatsby-transformer-remark@1.7.29 * Update building-apps-with-gatsby.md (#3653) * fix extract-text--webpack-plugin instance reuse errors (#3652) * Publish - gatsby@1.9.165 * Minor change to tutorial part four index.md (#3649) * Minor change to tutorial part four index.md Changed one liner 2 steps to <ol> style. More readable. * Update index.md * Added deploy task to gh-pages in Org pages (#3642) Added the task to deploy to Github Pages in Organizations pages like organization.github.io * Added community plugin: gatsby-plugin-pathdata (#3644) * Add gatsby-starter-strict (#3645) * blog: add getting started with gatsby and wordpress (#3647) * blog: add getting started with gatsby and wordpress * Make links local to gatsbyjs.org + a few other tweaks * [www] Search shortcut (#3654) * Add keyboard shortcut for focussing the search input * Blur input on result selection * Remove note about their being more parts to the tutorial (#3655) * Remove note about their being more parts to the tutorial We'll ship more stuff when we do. No reason to make it sound less than useful as it is. * format * Add images in Strapi tutorial (#3660) * Add images in Strapi tutorial * Remove package-lock.json files * added gatsby ^1.0.0 as a peer dependency for all plugins (#3637) * README showcase update (#3661) * updated README with two of my gatsbyjs projects. I hope this alright, if not I totally understand * Updated README fix space issue * Add gatsby-starter-portfolio-emilia (#3664) Also grouped both starters into one bulletpoint (as talked about on Discord) and changed some minor stuff. * [gatsby-source-medium] fetch users and publications (#3623) * Add support for fetching a users payload along with publications from Medium * Update gatsby-source-medium readme, add note for @ for usernames * Undo any changes to `links` variable * Publish - gatsby-plugin-aphrodite@1.0.6 - gatsby-plugin-canonical-urls@1.0.12 - gatsby-plugin-catch-links@1.0.15 - gatsby-plugin-coffeescript@1.4.9 - gatsby-plugin-create-client-paths@1.0.4 - gatsby-plugin-cxs@1.0.6 - gatsby-plugin-emotion@1.1.11 - gatsby-plugin-feed@1.3.16 - gatsby-plugin-glamor@1.6.11 - gatsby-plugin-glamorous@1.0.6 - gatsby-plugin-google-analytics@1.0.16 - gatsby-plugin-google-tagmanager@1.0.13 - gatsby-plugin-jss@1.5.10 - gatsby-plugin-less@1.0.9 - gatsby-plugin-lodash@1.0.8 - gatsby-plugin-manifest@1.0.13 - gatsby-plugin-netlify-cms@1.0.5 - gatsby-plugin-netlify@1.0.15 - gatsby-plugin-nprogress@1.0.11 - gatsby-plugin-offline@1.0.13 - gatsby-plugin-postcss-sass@1.0.16 - gatsby-plugin-preact@1.0.15 - gatsby-plugin-react-css-modules@1.0.12 - gatsby-plugin-react-helmet@2.0.4 - gatsby-plugin-react-next@1.0.8 - gatsby-plugin-remove-trailing-slashes@1.0.4 - gatsby-plugin-sass@1.0.16 - gatsby-plugin-sharp@1.6.26 - gatsby-plugin-sitemap@1.2.11 - gatsby-plugin-styled-components@2.0.5 - gatsby-plugin-styled-jsx@2.0.2 - gatsby-plugin-styletron@1.0.11 - gatsby-plugin-stylus@1.1.14 - gatsby-plugin-twitter@1.0.15 - gatsby-plugin-typescript@1.4.13 - gatsby-plugin-typography@1.7.11 - gatsby-remark-images@1.5.40 - gatsby-source-medium@1.0.10 * [gatsby-source-contentful] Make base64 query to field-level to speed up asset queries (#3617) * [gatsby-source-contentful] Add withBase64 option to speed up image queries * Revert "[gatsby-source-contentful] Add withBase64 option to speed up image queries" This reverts commit bb080f7. * remove base64 from resolveResponsiveResolution * create base64 resolver * update sizes, reset resize to original state * update tests * update resize and tests * Publish - gatsby-source-contentful@1.3.33 * show help and recommend when the command is wrong (#3668) * Fix gatsby-starter-portfolio-emilia PR (#3667) Seems like "Features" or something other is messing up the indentation and therefore messing up the whole idea of two sub-entries. So I just did two separate entries now. * Add Flooring Factories Outlets to Showcase (#3666) Added a website made for a client... built with gatsby / netlify :) * Publish - gatsby-cli@1.1.29 - gatsby@1.9.166 * Add a podcast website/player to the showcase (#3672) * [www] Update/consolidate palette, monogram and logo, favicons (#3639) * #744c9e/116,76,158 -> #9966cc/102, 51, 153 (rebeccapurple) * [WIP] Consolidate palette * Ditch B100 in favor of B200 * Neutral diagram stripe color at least for now * Fussing around with saturation * Adjustting hues (still WIP ;-)) * Roll back all palette colors but brand/„B700“ * Throw in chroma.js, output presets.B*, chroma.js palette at /colors * B200 -> B100 * B300 -> B200 * colors.b[0] -> B100 * components/diagram „box“ border * layouts/index sidebar border-right * Grab chroma-js from npm now that 1.3.6 is published * Add redrawn monogram and logo (monogram + wordmark) * remove gatsby-calm.svg for now – was only used on the blog page, where we’re for now using the regular monogram * remove gatsby-negative.png, not in use – will regenerate the favicons that were probably based on this and add them ASAP * remove gatsby-positive.svg, unused * rename gatsby-negative.svg to monogram.svg, update it with the redrawn version * replace logo and <h1> wordmark in components/navigation with the newly added logo.svg * Update favicons * fix apple-touch-icon.png, which had a transparent background which iOS resolves to black which looks 😒 * fix non-anti-aliased edges in all favicons * add a white background for the „G and chopped edge“ shape of the favicon which was transparent before * fix Safari pinned tab color * Add hex2rgba, remove presets.shadowColor (matches presets.B500) * Inherit text color * Move colors from presets to colors * Remove orange logo * Bump favicon.ico * Optimize favicons, update Windows tile icons * Update manifest theme/background_color * Remove some leftover anchors; invert logo for iOS, Windows tile * Add Windows tile browserconfig.xml * Oops * Remove chroma (…), back to descriptive color names * Make presets.calm pass WCAG AA * Fix icon colors * Remove presets.brandDark * Add colors.gray * :D * Make presets.calm pass WCAG AA again * rebeccapurple links in blog articles * Fix logo offset * Ditch colors.brand, add colors.ui, don’t litter colors in presets 🙄 * rename `brand` to `gatsby` * expose `utils/colors` at `presets.colors` * move UI colors to `colors.ui` * add colors.success, colors.warning * Update logo wordmark, optimize SVGs * Update building-apps-with-gatsby.md * Add plugins.js and searchbar-body.js for searching and displaying gatsby plugins * Remove unneccesary css * Removed package-lock.json and renamed plugins.js to packages.js * Add algolia-npm search and url syncing * Add background color when plugin selected * Fix doubling-up layout bug, add border to hits component, add margin to text in packages * Remove unnecessary dependencies from package.json * Remove withUrlSync.js * Change Algolia link from Link to a tag * Add gatsby-component as keyword search, change searchbox placeholder * Add email-validator to package.json to merge with updated site * Add source plugin to pull in npm package info, add metadata to cards and package detail page * Remove results display when no results * Remove multiple div * Remove startes and filters from packages description * Update searchbar styles * Remove searchbar scroll * Update packages.js * Empty commit * Empty commit * Add plugins.js and searchbar-body.js for searching and displaying gatsby plugins * Remove unneccesary css * Removed package-lock.json and renamed plugins.js to packages.js * Add algolia-npm search and url syncing * Add background color when plugin selected * Fix doubling-up layout bug, add border to hits component, add margin to text in packages * Remove unnecessary dependencies from package.json * Remove withUrlSync.js * Change Algolia link from Link to a tag * Add gatsby-component as keyword search, change searchbox placeholder * Add email-validator to package.json to merge with updated site * Add source plugin to pull in npm package info, add metadata to cards and package detail page * Remove results display when no results * Remove multiple div * Remove startes and filters from packages description * Add plugins.js and searchbar-body.js for searching and displaying gatsby plugins * Remove unneccesary css * Removed package-lock.json and renamed plugins.js to packages.js * Add algolia-npm search and url syncing * Add background color when plugin selected * Fix doubling-up layout bug, add border to hits component, add margin to text in packages * Remove unnecessary dependencies from package.json * Remove withUrlSync.js * Change Algolia link from Link to a tag * Add email-validator to package.json to merge with updated site * Add source plugin to pull in npm package info, add metadata to cards and package detail page * Remove results display when no results * Remove multiple div * Remove startes and filters from packages description * Update searchbar styles * Remove searchbar scroll * Update packages.js * Empty commit * Update template-docs to account for both local and remote packages * Remove duplicate code * Remove commented out code * linting fixes to run tests * removed package-lock * minor fixes to html head, package.json description, TODO notes * minor fixes across files in prep for merge react-icons instead of svgs, updated gitignores for gatsby-node files removed obsolete gatsby-source-npm that was refactored and renamed gatsby-source-npm-package-search shortened css file * removed unused icons * removed unused gatsby-browser.js, used createNodeId on readmes * conditional rendering for packages that aren't found, UI tweaks to search bar on wide screens * plugin library mobile layout * 2nd implementation of mobile ui * Fix getting access to createNodeId createNodeId is a utility library that's passed in and not an NPM package * css deletions overhaul * separate components for template doc packages * using package readme component on template doc packages * added missing dependencies (date-fns and react-instant-search) to package.json * keeping undefined objects from being accessed with default values, conditional rendering of specific metadata not pulled by every package * fix loadNodeContent error, remove old comments * added infinite scroll for plugins * highlighting results list with pagination fix * refactor create page logic to make sure all packages have pages created, and added PropTypes and not found data so undefined errors don't break package readme template components

Adds email capture to bottom of blog

253e3be

ghost assigned benjaminhoffman Dec 24, 2017

ghost added the review label Dec 24, 2017

benjaminhoffman mentioned this pull request Dec 24, 2017

Add email capture form to blog posts #3332

Closed

Adds email capture to bottom of blog

19c6d10

calcsam mentioned this pull request Dec 28, 2017

Add default form plugin for easy plugin to Gatsby #3351

Closed

benjaminhoffman added 3 commits December 28, 2017 11:52

Adds Mailchimp functionality

dd77175

Merge branch 'emailcapture' of github.com:benjaminhoffman/gatsby into…

b1c4eaf

… emailcapture

Merge remote-tracking branch 'upstream/master' into emailcapture

78f3c4b

benjaminhoffman commented Dec 28, 2017

View reviewed changes

calcsam reviewed Dec 29, 2017

View reviewed changes

benjaminhoffman added 2 commits December 30, 2017 15:58

Merge remote-tracking branch 'upstream/master' into emailcapture

a860856

Refactors postEmailToMailchimp method, updates cc

3066ff5

KyleAMathews suggested changes Jan 2, 2018

View reviewed changes

benjaminhoffman added 2 commits January 3, 2018 20:36

updates rhythm css, installs & uses validator module

0d6f9f9

Merge branch 'master' into emailcapture

9d1df14

Fiddle with design

00b2fd8

ghost assigned KyleAMathews Jan 15, 2018

KyleAMathews approved these changes Jan 15, 2018

View reviewed changes

KyleAMathews merged commit bdb5a00 into gatsbyjs:master Jan 15, 2018

ghost removed the review label Jan 15, 2018

benjaminhoffman deleted the emailcapture branch January 15, 2018 22:27

fk mentioned this pull request Jan 16, 2018

[www] Fix email-capture-form cross browser issues #3553

Merged

monizb mentioned this pull request Feb 16, 2023

[Snyk] Fix for 30 vulnerabilities monizb/gatsby#1

Merged

0xSebin mentioned this pull request Feb 28, 2023

[Snyk] Fix for 20 vulnerabilities 0xSebin/gatsby#2036

Open

Adds email capture to bottom of blog #3333

Adds email capture to bottom of blog #3333

Conversation

benjaminhoffman commented Dec 24, 2017 • edited Loading

gatsbybot commented Dec 24, 2017 • edited Loading

calcsam commented Dec 26, 2017

benjaminhoffman commented Dec 27, 2017 • edited Loading

KyleAMathews commented Dec 27, 2017

benjaminhoffman commented Dec 27, 2017

benjaminhoffman commented Dec 27, 2017

KyleAMathews commented Dec 27, 2017

calcsam commented Dec 28, 2017

benjaminhoffman commented Dec 28, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

calcsam commented Dec 29, 2017

benjaminhoffman commented Dec 29, 2017 • edited Loading

KyleAMathews commented Dec 29, 2017

benjaminhoffman commented Dec 29, 2017

KyleAMathews commented Dec 29, 2017

benjaminhoffman commented Dec 29, 2017

KyleAMathews commented Dec 30, 2017

KyleAMathews left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benjaminhoffman commented Jan 4, 2018

KyleAMathews commented Jan 10, 2018

KyleAMathews commented Jan 10, 2018

KyleAMathews commented Jan 10, 2018

benjaminhoffman commented Jan 14, 2018

KyleAMathews commented Jan 15, 2018

benjaminhoffman commented Jan 15, 2018

fk commented Jan 15, 2018 via email

KyleAMathews commented Jan 16, 2018

benjaminhoffman commented Dec 24, 2017 •

edited

Loading

gatsbybot commented Dec 24, 2017 •

edited

Loading

benjaminhoffman commented Dec 27, 2017 •

edited

Loading

benjaminhoffman commented Dec 28, 2017 •

edited

Loading

benjaminhoffman commented Dec 29, 2017 •

edited

Loading