-
Notifications
You must be signed in to change notification settings - Fork 10.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'upstream/master' into deltaskelta-iss#5…
…044-develop-custom-ssl-cert
- Loading branch information
Showing
148 changed files
with
4,197 additions
and
479 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
64 changes: 64 additions & 0 deletions
64
.../blog/2018-04-25-how-gatsby-changes-teams-website-development-workflow/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. | ||
|
Binary file added
BIN
+386 KB
...-27-building-eviction-free-nyc-with-gatsbyjs-and-contentful/design-mapping.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+246 KB
...ilding-eviction-free-nyc-with-gatsbyjs-and-contentful/housing-court-example.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.