Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/master' into deltaskelta-iss#5…
Browse files Browse the repository at this point in the history
…044-develop-custom-ssl-cert
  • Loading branch information
pieh committed May 4, 2018
2 parents c7e61de + c6fbd72 commit c664a68
Show file tree
Hide file tree
Showing 148 changed files with 4,197 additions and 479 deletions.
2 changes: 1 addition & 1 deletion .eslintrc → .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
{
"files": [
"packages/**/gatsby-browser.js",
"pacakges/gatsby/cache-dir/**/*"
"packages/gatsby/cache-dir/**/*"
],
"env": {
"browser": true
Expand Down
158 changes: 2 additions & 156 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,157 +1,3 @@
---
title: How to Contribute
---
## How to Contribute

## Contributing

We want contributing to Gatsby to be fun, enjoyable, and educational for anyone and everyone. Contributions go far beyond pull requests and commits; we are thrilled to receive a variety of other contributions including the following:

* Blogging, speaking about, or creating tutorials about one of Gatsby's many features. Mention @gatsbyjs on Twitter and/or email shannon [at] gatsbyjs [dot] com so we can give pointers and tips (if you want them :) and help you spread the word. Please add your blog posts and videos of talks to our [Awesome Gatsby](/docs/awesome-gatsby/) page.
* [Submit new feature ideas through an RFC](/blog/2018-04-06-introducing-gatsby-rfc-process/)
* Submitting new documentation; titles in _italics_ on gatsbyjs.org are stubs and need contributions
* Tweeting about things you build with @gatsbyjs (make sure to @ mention us!)
* Submitting documentation updates, enhancements, designs, or bugfixes
* Submitting spelling or grammar fixes
* Adding unit or functional tests
* Triaging [GitHub issues](https://github.com/gatsbyjs/gatsby/issues) -- especially determining whether an issue still persists or is reproducible
* [Reporting bugs or issues](/docs/how-to-file-an-issue/)
* Searching for Gatsby on Discord or Spectrum and helping someone else who needs help
* Teaching others how to contribute to Gatsby's repo!

If you are worried or don't know where to start, you can always reach out to Shannon Soper(@shannonb_ux) on Twitter or simply submit an issue and a maintainer can help give you guidance!

Looking to speak about Gatsby? We'd love to review your talk abstract/CFP! You can email it to shannon [at] gatsbyjs [dot] com, and we can give pointers or tips!!!

### Creating your own plugins and loaders

If you create a loader or plugin, we would <3 for you to open source it and put it on npm. For more information on creating custom plugins, please see the documentation for [plugins](/docs/plugins/) and the [API specification](/docs/api-specification/).

### Contributing to the repo

Gatsby uses a "monorepo" pattern to manage its many dependencies and relies on
lerna and yarn to configure the repository for active development.

You can install the latest version of Gatsby by following these steps:

* Clone the repo, navigate to its directory.
* ensure you have the latest version of yarn installed (>= 1.0.2)
https://yarnpkg.com/en/docs/install
* Install dependencies using `yarn run bootstrap` in the root of the repo.

The usual contributing steps are:

* Fork the [official repository](https://github.com/gatsbyjs/gatsby).
* Clone your fork: git clone `[email protected]:<your-username>/gatsby.git`
* Setup up repo and install dependencies: `yarn run bootstrap`
* Make sure tests are passing for you: `yarn test`
* Create a topic branch: `git checkout -b topics/new-feature-name`
* Run `npm run watch` from the root of the repo to watch for changes to packages' source code and compile these changes on-the-fly as you work. Note that the watch command can be resource intensive. To limit it to the packages you're working on, add a scope flag, like `npm run watch -- --scope={gatsby,gatsby-cli}`. To watch just one package, run `npm run watch -- --scope=gatsby`.
* Install [gatsby-dev-cli](/packages/gatsby-dev-cli/) globally: `yarn global add gatsby-dev-cli`
* Run `yarn install` in each of the sites you're testing.
* For each of your Gatsby test sites, run the `gatsby-dev` command there to copy
the built files from your cloned copy of Gatsby. It'll watch for your changes
to Gatsby packages and copy them into the site. For more detailed instructions
see the [gatsby-dev-cli README](/packages/gatsby-dev-cli/)
* Add tests and code for your changes.
* Once you're done, make sure all tests still pass: `yarn test`
* Commit with a ["Signed-off-by"](#developer-certificate-of-origin) line appended
to your commit message and push to your fork.
* Create a pull request from your branch.

### Contributing to the documentation.

Gatsby, unsurprisingly, uses Gatsby for its documentation website.

If you want to add/modify any Gatsby documentation, go to the
[docs folder on GitHub](https://github.com/gatsbyjs/gatsby/tree/master/docs) and
use the file editor to edit and then preview your changes. GitHub then allows
you to commit the change and raise a PR right in the UI. This is the _easiest_
way you can contribute to the project!

However, if you want to make more changes to the website, that is, change
layouts, add sections/pages, follow the steps below. You can then spin up your
own instance of the Gatsby website and make/preview your changes before raising
a pull request.

* Clone the repo and navigate to `/www`
* Run `yarn` to install all of the website's dependencies.
* Run `gatsby develop` to preview the website in `http://localhost:8000`
* The Markdown files for the documentation live in `/docs` folder. Make
additions or modifications here.
* Make sure to double check your grammar and capitalise correctly.
* Commit with a ["Signed-off-by"](#developer-certificate-of-origin) line appended
to your commit message and push to your fork.
* Create a pull request from your branch.

### Developer Certificate of Origin

The Gatsby repository enforces the
[Developer Certificate of Origin](https://developercertificate.org/) (DCO) on
Pull Requests. It requires all commit messages to contain the `Signed-off-by`
line with an email address that matches the commit author.

Git has a `-s` (or longer `--signoff`) command line option to append this
automatically to your commit message:

```shell
$ git commit -s -m 'This is my commit message'
```

If you've already created a Pull Request and notice that the DCO check is failing, you
can use this command to append a signoff message to your commits:

```shell
$ git rebase --signoff
```

or amend your last commit if you have a single commit in your Pull Request:

```shell
$ git commit --amend -s
```

## Development tools

### Redux devtools

Gatsby uses Redux for managing state during development and building. It's often
helpful to see the flow of actions and built-up state for a site you're working
on or if adding new functionality to core. We leverage
[Remote Redux Devtools](https://github.com/zalmoxisus/remote-redux-devtools) and
[RemoteDev Server](https://github.com/zalmoxisus/remotedev-server) to give you use the Redux
devtools extension for debugging Gatsby.

To use this, first install
[redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension)
in your browser. Then in your Gatsby repo, run `npm run remotedev`. Then in your
site directory run `REDUX_DEVTOOLS=true gatsby develop`. Depending on your
operating system and shell, you may need to modify how you set the
`REDUX_DEVTOOLS` environment variable.

At this point, your site will be sending Redux actions and state to the remote
server.

To connect to this, you need to setup the devtools extension to talk to the
remote server.

First open the remote devtools.

![how to open the redux remote devtools extension](./images/open-remote-dev-tools.png)

Then click settings along the bottom menu and set the host and port.

![how to set the host/port for the remote devtools extension to connect to Gatsby](./images/remote-dev-settings.png)

After this, the devtools extension _should_ connect to the remote server and
you'll see actions start showing up.

![gatsby redux remote devtools](./images/running-redux-devtools.png)

**Warning!! Lots of buginess**. While having this available is extremely
helpful, this setup is very buggy and fragile. There is a memory leak in the
extension that's triggered it seems every time you restart the Gatsby
development server. Also the extension often, for no apparent reason, just won't
show any actions from the remote server. It'll also often freeze up. The best
solution seems to just be turning everything off and on again. Fixing up these
tools would be very helpful for us and many others using these tools if someone
wants to take this on!
For information related to contributing to Gatsby, please check out the [How to Contribute](https://www.gatsbyjs.org/docs/how-to-contribute/) section of the documentation at the Gatsby site.
12 changes: 10 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ Websites built with Gatsby:
* [The freeCodeCamp Guide](https://guide.freecodecamp.org)
([source](https://github.com/freeCodeCamp/guides))
* [Storybook](https://storybook.js.org) ([source](https://github.com/storybooks/storybook))
* [Learn Storybook](https://learnstorybook.com) ([source](https://github.com/hichroma/learnstorybook.com))
* [FloydHub's Blog](https://blog.floydhub.com)
* [mParticle's Documentation](https://docs.mparticle.com)
* [Segment's Blog](https://segment.com/blog/)
Expand Down Expand Up @@ -194,8 +195,6 @@ Websites built with Gatsby:
* [WebGazer](https://www.webgazer.io)
* [Joe Seifi's Blog](http://seifi.org)
* [Bartosz Dominiak Blog/Portfolio](http://www.bartoszdominiak.com/) ([source](https://github.com/bartdominiak/blog))
* [HBTU MUN 2018](https://hbtumun18.netlify.com/)
([source](https://github.com/HaoZeke/hbtuMun18))
* [The Audacious Project](https://audaciousproject.org/)
* [upGizmo](https://www.upgizmo.com/)
* [The Bastion Bot](https://bastionbot.org/ "The Bastion Bot")
Expand All @@ -204,6 +203,15 @@ Websites built with Gatsby:
* [F1 Vision](https://f1vision.com/)
* [GraphQL College](https://graphql.college) ([source](https://github.com/GraphQLCollege/graphql-college))
* [Hyunwoo Kim - Blog/Portfolio](https://devhalloween.com) ([source](https://github.com/khw1031/dev-blog))
* [Abinav Seelan - Personal Website](https://abinavseelan.com) ([source](https://github.com/abinavseelan/abinavseelan.com))
* [Dovetail](https://dovetailapp.com)
* [Bart van der Waerden Blog](http://bartvanderwaerden.com/) ([source](https://github.com/BartvdWaerden/BartvdWaerden.github.io))
* [Canella Riccardo - Portfolio](https://canellariccardo.it) ([source](https://github.com/thecreazy/canellariccardo.it))
* [Eviction Free NYC!](https://www.evictionfreenyc.org/) ([source](https://github.com/JustFixNYC/eviction-free-nyc))
* [Rafael Belliard's Portfolio](https://rafael.do) ([source](https://github.com/rebelliard/rebelliard.github.io))
* [Tinder Interracial Couple Emoji Project](https://emoji.tinder.com/)
* [aQuICK](https://aquick.review/)
([source](https://github.com/aQuICK-Review/aQuick))

## Docs

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ From October 2017 to February 2018, I conducted over 60 interviews with Gatsby u

## Jobs to be done

After compiling data from the interviews, I drew what’s called an “empathy map” to put myself in the shoes of Gatsby users. This map describes what a Gatsby users usually experienced when searching for plugins.
After compiling data from the interviews, I drew what’s called an “empathy map” to put myself in the shoes of Gatsby users. This map describes what Gatsby users usually experienced when searching for plugins.

![Empathy map](empathy-map.png)

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
---
title: How Gatsby Changes Teams' Website Development Workflow
date: "2018-04-25"
author: "Sam Bhagwat"
excerpt: Gatsby is more than just a new website framework -- it changes the way your team works together.
tags: ["collaboration"]
---

Gatsby is more than just a new website framework -- creating websites in Gatsby is a fundamentally different paradigm than in a CMS-specific framework.

Website teams adopting Gatsby report improved collaboration at each stage -- from architecture and user research, to design and development, to testing and launch. Many of these derive from Gatsby features: faster development cycles, easy compatibility with React component libraries, a CMS-agnostic development environment, the ability to easily deploy static build artifacts.

To fully take advantage of new, Gatsby-enabled workflows, consider adopting some of these techniques:

### Architecture

_Take advantage of extended evaluation periods to build a component library_

Larger companies considering adopting Gatsby often plan in terms of migrating multiple sites (or internationalized versions of sites) over a timeframe of a few months to two years. These projects can have long preparation times before active development starts.

One high-leverage activity during these time windows is to focus development on a React component library. Then, when development begins the team is able to quickly assemble Gatsby React pages from these pre-built components. Consider designating senior UI developers as "component architects" in this process.

_Consider a less-expensive CMS or multi-modal architecture_

Choosing Gatsby frees your CMS from doing a lot of the heavy lifting, such as scaling to meet peak load and having a rich, modern web development experience. If you're using an expensive enterprise CMS, Gatsby can help your project stay within budget by allowing you to choose a simpler, cheaper option, such as a hosted Drupal instance, or a content management SaaS like Contentful.

Another consideration is that not all of your content _has_ to live in one system. Often, you can save time and money by create a multi-modal content architecture with best-in-class solutions for each of the different workflows & capabilities you require. You might choose to manage your e-commerce product catalog in Shopify, company-specific marketing pages in Contentful, and form-based event data in Google Sheets & Forms. Gatsby offers plugins to pull data from multiple sources, while building with one stack.

### User Research

_Utilize developers to prototype faster_

In order to do user testing, usually user researchers work with designers to construct pixel perfect prototypes of various options, either static or clickable. Constructing and iterating on these artifacts can take days or weeks.

Gatsby makes another option possible. Some Gatsby users report [setting up a production site](https://www.gatsbyjs.org/blog/2018-01-18-how-boston-gov-used-gatsby-to-be-selected-as-an-amazon-hq2-candidate-city/) with live UI that is building and deploying in under an hour.

Especially if your organization already uses a React or HTML-based component library, your team may consider bringing in a developer to construct live wireframe-level prototypes. This may enable you to accelerate the user research process, start the development process with a working prototype rather than from scratch, and ultimately let you arrive at a better version of your site.

### Development

_Make progress without access to the client CMS_

Sometimes website development teams don't gain access to the client's CMS until development has already started. This can happen for a variety of reasons -- internal client policies, the need to onboard content editors, and so forth. Typically this is a difficult situation where development can be blocked or delayed, and can lead to timeline slippage, crunch time at the end of the project, and so on.

With Gatsby, the CMS-agnostic development workflow gives teams tools to continue to make progress even without access to client content. One common approach is to develop and prototype UIs pulling placeholder content from markdown files stored in the repo. When the team gains access, it only takes a few lines of code to reconfigure the site to pull content from the CMS.

## QA and Testing

Gatsby's extensible system of API hooks, tight integration with static hosts like Netlify, and use of React's modular component architecture, allow website teams to enable more effective QA <-> Development workflows.

_Use development pages to communicate project status & collaborate with designers_

One option some teams have found powerful is to create static page components within Gatsby to [handle necessary parts of the development/QA workflow](https://www.gatsbyjs.org/blog/2018-04-11-trying-out-gatsby-at-work-and-co/#1-pre-integration-qa).

This could include:
* Checking UI implementation of various components to ensure behavior is intended
* Enabling QA visibility into desired site-specific page-level validations, such as "don't end a page in a carousel"
* Communicating build history and last build status

_Use branch and pull request-based artifacts to collaborate on specific pieces of work_

Using the [branch and pull request-based artifacts](https://www.gatsbyjs.org/blog/2018-04-11-trying-out-gatsby-at-work-and-co/#building-staging-urls
) automatically created by a service like Netlify for collaboration between developers, designers, and QA. Because generated artifacts are static, pull request collaboration workflows are resilient to underlying content schema changes, such as field deletion, that might break a typical CMS development environment.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit c664a68

Please sign in to comment.