Skip to content
This repository was archived by the owner on Jan 20, 2025. It is now read-only.

Commit bd25285

Browse files
authored
Merge branch 'master' into docs/graphql-concepts
2 parents 998253a + cf5ab2a commit bd25285

File tree

117 files changed

+3849
-1194
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

117 files changed

+3849
-1194
lines changed

.github/workflows/lint.yml

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,28 @@
11
name: Lint
22

3-
on: [push, pull_request]
3+
on:
4+
- push
5+
- pull_request
46

57
jobs:
68
textlint:
7-
runs-on: ubuntu-latest
9+
strategy:
10+
matrix:
11+
os:
12+
- ubuntu-latest
13+
node-version:
14+
- 12.x
815

9-
env:
10-
node-version: 12.x
16+
runs-on: ${{ matrix.os }}
1117

1218
steps:
1319
- name: Checkout code
1420
uses: actions/[email protected]
1521

16-
- name: Use Node.js ${{ env.node-version }}
17-
uses: actions/[email protected].0
22+
- name: Use Node.js ${{ matrix.node-version }}
23+
uses: actions/[email protected].1
1824
with:
19-
node-version: ${{ env.node-version }}
25+
node-version: ${{ matrix.node-version }}
2026

2127
- name: Get the number of processors currently available
2228
id: processors
@@ -30,7 +36,7 @@ jobs:
3036
uses: actions/[email protected]
3137
with:
3238
path: ${{ steps.yarn.outputs.dir }}
33-
key: ${{ runner.os }}-yarn-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
39+
key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
3440
restore-keys: |
3541
${{ runner.os }}-yarn-
3642

docs/contributing/blog-and-website-contributions.md renamed to docs/contributing/blog-contributions.md

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,10 @@
11
---
2-
title: Blog & Website Contributions
2+
title: Blog Contributions
33
---
44

5-
We wholeheartedly welcome contributions to the Gatsby blog and website!
5+
If you'd like to contribute a post to the Gatsby blog, please review the process and guidelines outlined below and submit your idea for the post to our [Gatsby blog proposal form](https://airtable.com/shr3449954866i3iF)
66

7-
Here are some things to keep in mind when deciding where to contribute to Gatsby:
8-
9-
- [Blog posts](#contributing-to-the-blog) work best for case studies and time-sensitive storytelling (see the [blog post format](#blog-post-format)).
10-
- [Docs](/contributing/docs-contributions/) are continually relevant and discoverable learning materials that go beyond any one case study or situation.
11-
- [Website changes](#making-changes-to-the-website) that improve either of these are always welcome!
12-
13-
## Contributing to the blog
14-
15-
If you'd like to contribute a post to the Gatsby blog, please review the process and guidelines outlined below and submit your
16-
idea for the post to our [Gatsby blog proposal form](https://airtable.com/shr3449954866i3iF)
17-
18-
### Blog proposal submission process
7+
## Blog proposal submission process
198

209
1. Complete and submit the [Gatsby blog proposal form](https://airtable.com/shr3449954866i3iF).
2110
2. A Gatsby team member will review your proposal and let you know if the proposal has been accepted within the next week or so.
@@ -24,7 +13,7 @@ idea for the post to our [Gatsby blog proposal form](https://airtable.com/shr344
2413

2514
If you have any questions about the process or your submission, please email [[email protected]](mailto:[email protected]).
2615

27-
### Content guidelines for submitting a blog post proposal
16+
## Content guidelines for submitting a blog post proposal
2817

2918
As a Gatsby community member, you have unique insight into the ins and outs of learning Gatsby, building with Gatsby, and contributing to Gatsby’s open source community. Contributing to the Gatsby blog is a great way to share your experiences and insights. Here are some guidelines for what kind of content is and isn’t a good fit for the Gatsby blog.
3019

docs/contributing/code-contributions.md

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ On this page:
1212
- [Contributing example sites](#contributing-example-sites)
1313
- [Using Docker to set up test environments](#using-docker-to-set-up-test-environments)
1414
- [Development tools](#development-tools)
15+
- [Official theme development](#official-theme-development)
1516

1617
## Repo setup
1718

@@ -21,7 +22,7 @@ To start setting up the Gatsby repo on your machine using git, Yarn and Gatsby-C
2122

2223
Alternatively, you can skip the local setup and [use an online dev environment](/contributing/using-an-online-dev-environment/).
2324

24-
To contribute to the blog or Gatsbyjs.org website, check out the setup steps on the [blog and website contributions](/contributing/blog-and-website-contributions/) page. For instructions on contributing to the docs, visit the [docs contributions page](/contributing/docs-contributions/).
25+
To contribute to the blog, check out the setup steps on the [blog contributions](/contributing/blog-contributions/) page. For instructions on contributing to the docs, visit the [docs contributions page](/contributing/docs-contributions/). To contribute to the website, see the [website contributions](/contributing/website-contributions/) page.
2526

2627
## Creating your own plugins and loaders
2728

@@ -119,6 +120,22 @@ Using Docker Compose, you can start and stop a WordPress instance and integrate
119120

120121
Check [Debugging the build process](/docs/debugging-the-build-process/) page to learn how to debug Gatsby.
121122

123+
## Official theme development
124+
125+
This section is for official theme development in Gatsby's monorepo. If you are looking
126+
to build your own theme, see [building themes](/docs/themes/building-themes/).
127+
128+
Before getting started, make sure that you have
129+
[set up your local dev environment](/contributing/setting-up-your-local-dev-environment/)
130+
and that you're on the latest version of `gatsby-dev-cli`.
131+
132+
- In the Gatsby monorepo find the starter in the `/starters` directory that uses the theme you want to work on
133+
- Navigate to that directory, e.g. `cd starters/gatsby-starter-blog-theme`
134+
- Install dependencies: `yarn`
135+
- Run Gatsby Dev CLI to sync theme files, referencing the appropriate theme: `gatsby-dev --packages gatsby-theme-blog`
136+
- In another tab run the starter: `yarn develop`
137+
- Edit the theme files, you'll see changes automatically copied over and update in your starter.
138+
122139
## Feedback
123140

124141
At any point during the contributing process the Gatsby team would love to help! For help with a specific problem you can [open an issue on GitHub](/contributing/how-to-file-an-issue/). Or drop in to [our Discord server](https://gatsby.dev/discord) for general community discussion and support.

docs/contributing/docs-and-website-components.md renamed to docs/contributing/docs-and-blog-components.md

Lines changed: 12 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
2-
title: Docs and Website Components
2+
title: Docs & Blog Components
33
tableOfContentsDepth: 2
44
---
55

66
The Gatsbyjs.org site has a handful of components that have been developed to facilitate writing new content for the blog and the docs. There are also components that help organize and lay out content in various pages across the website.
77

8-
This guide documents what components are available and explains how to use them. You can also refer to the [code for this page on GitHub](https://github.com/gatsbyjs/gatsby/blob/master/docs/contributing/docs-and-website-components.md) to see to how each component can be used, because they are all embedded here!
8+
This guide documents what components are available and explains how to use them. You can also refer to the [code for this page on GitHub](https://github.com/gatsbyjs/gatsby/blob/master/docs/contributing/docs-and-blog-components.md) to see to how each component can be used, because they are all embedded here!
99

10-
Information about authoring in Markdown and styling components on the site is also listed.
10+
Information about authoring in Markdown on the site is also listed.
1111

1212
## Globally available components
1313

@@ -163,7 +163,7 @@ The Horizontal Nav List component takes two props:
163163
- `slug` - which is provided in the props of the page by default
164164
- `items` - an array of strings for items to render and wrap with a `<Link />` to subheadings
165165

166-
The docs on Gatsbyjs.org use the [gatsby-remark-autolink-headers](/packages/gatsby-remark-autolink-headers/) plugin to automatically apply hover links to heading tags across docs pages. Because it automatically creates links to subheadings on pages like the glossary, the Horizontal Nav List can supply matching links (like `"guide-list"` which would align with the automatically created link at `/docs/docs-and-website-components#guide-list`).
166+
The docs on Gatsbyjs.org use the [gatsby-remark-autolink-headers](/packages/gatsby-remark-autolink-headers/) plugin to automatically apply hover links to heading tags across docs pages. Because it automatically creates links to subheadings on pages like the glossary, the Horizontal Nav List can supply matching links (like `"guide-list"` which would align with the automatically created link at `/docs/docs-and-blog-components#guide-list`).
167167

168168
<!-- prettier-ignore -->
169169
```markdown
@@ -188,14 +188,14 @@ The glossary defines key vocabulary...
188188
Rendered, it looks like this:
189189

190190
<HorizontalNavList
191-
items={[
192-
"guide-list",
193-
"egghead-embed",
194-
"pull-quote",
195-
"layer-model",
196-
"horizontal-navigation-list",
197-
]}
198-
slug={props.slug}
191+
items={[
192+
"guide-list",
193+
"egghead-embed",
194+
"pull-quote",
195+
"layer-model",
196+
"horizontal-navigation-list",
197+
]}
198+
slug={props.slug}
199199
/>
200200

201201
---
@@ -271,19 +271,3 @@ plugins: [
271271
```
272272

273273
Line numbers and line highlighting can be added to code blocks as well, and is explained in detail in the [`gatsby-remark-prismjs` README](/packages/gatsby-remark-prismjs/?=remark#optional-add-line-highlighting-styles).
274-
275-
## Styling components on Gatsbyjs.org with Theme-UI
276-
277-
Styles on the site are applied using [Theme-UI](https://theme-ui.com/), which allows for theming across the site based on design tokens (also called variables).
278-
279-
### Design tokens
280-
281-
Design tokens are used to consolidate the number of colors and style attributes that are applied to components throughout the site. By limiting the styles that can be applied, the site stays consistent with the guidelines for color, typography, spacing, etc.
282-
283-
Tables listing design tokens that are used on the site can be found in the [design guidelines](/guidelines/design-tokens/).
284-
285-
### The `sx` prop
286-
287-
The [`sx` prop](https://theme-ui.com/sx-prop) from Theme-UI allows you to access theme values to style elements and components, it should be used wherever possible. The prop is "enabled" by adding `theme-ui`'s [JSX pragma](https://theme-ui.com/jsx-pragma) at the top of a `js` file.
288-
289-
It is still okay to directly import tokens, e.g. `mediaQueries` or `colors` directly from [`www/src/gatsby-plugin-theme-ui`](https://github.com/gatsbyjs/gatsby/blob/master/www/src/gatsby-plugin-theme-ui/index.js) if it helps your specific use case — for example when global CSS is required, when passing theme values to other libraries or plugins, when authoring complex responsive styles, etc.

docs/contributing/docs-contributions.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Docs Contributions
44

55
Gatsby, unsurprisingly, uses Gatsby for its documentation website. Thank you in advance and cheers for contributing to Gatsby documentation! As of February 2019, over 800 people have contributed. It's people like you that make this community great!
66

7-
> _When deciding where to contribute to Gatsby (docs or [blog](/contributing/blog-and-website-contributions/)?), check out the [docs templates](/contributing/docs-templates/) page._
7+
> _When deciding where to contribute to Gatsby (docs or [blog](/contributing/blog-contributions/)?), check out the [docs templates](/contributing/docs-templates/) page._
88
99
## Top priorities
1010

@@ -190,7 +190,7 @@ Sometimes it makes sense to move or rename a file as part of docs restructuring
190190

191191
```yaml:title=www/redirects.yaml
192192
- fromPath: /docs/source-plugin-tutorial/
193-
toPath: /docs/pixabay-source-plugin-tutorial/
193+
toPath: /tutorial/pixabay-source-plugin-tutorial/
194194
```
195195

196196
## Claim your swag
Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
title: Docs Writing Process
3+
---
4+
5+
When a new feature or integration is released that Gatsby developers can take advantage of, documentation should be added to improve the learning experience. Gatsby also needs docs for topic areas that exist in other technologies but are under-documented or under-tooled in the Gatsby ecosystem.
6+
7+
The knowledge of how to work with a technique, source plugin, or varied use case may be known internally to Gatsby team members, but it also may only exist on the web at large. This contributing doc is intended to provide a written process for producing docs without prior information, a critical function of the Gatsby Learning team and open source community.
8+
9+
## Identifying a topic
10+
11+
When identifying a topic, start by:
12+
13+
1. Looking at GitHub issues. Good labels to seek out are [`help wanted`](https://github.com/gatsbyjs/gatsby/issues?utf8=%E2%9C%93&q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22+) and [`good first issue`](https://github.com/gatsbyjs/gatsby/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22).
14+
15+
- This part may be covered if a docs issue is assigned to you, or if you’re signing up voluntarily to take on an issue.
16+
17+
2. Look at the [stub list](/contributing/stub-list/) to find docs that need contributions.
18+
19+
3. Look at the [learning workflow meta issue](https://github.com/gatsbyjs/gatsby/issues/13708) to find active areas looking for docs.
20+
21+
4. Read through the existing Gatsby docs information and find gaps in topic coverage. Is there an area you feel is missing? [File an issue](/contributing/how-to-file-an-issue/) to discuss it. If the team determines it warrants documentation, implement in a PR.
22+
23+
5. Observe common points of confusion or rough edges through user feedback and recommend solutions.
24+
25+
> _Note: It’s required to open a GitHub issue before submitting a PR if one does not already exist._
26+
27+
## Selecting the correct format
28+
29+
A GitHub issue for new learning material should indicate the format. Is it a Reference or Conceptual Guide? A Tutorial? A recipe?
30+
31+
Does docs coverage exist anywhere on `gatsbyjs.org`? If so, would an alternative format help provide information for Gatsby learners of different skill and experience levels? For example, if a tutorial exists but there is no coverage in Reference Guides, adding more content in a different format would benefit users.
32+
33+
### Tutorials vs. recipes vs. guides:
34+
35+
- [**Tutorials**](/tutorial/) are step-by-step learning materials that show a user how to do something without skipping steps. Tutorials must consider a beginner experience, but can be useful for anyone.
36+
- [**Recipes**](/docs/recipes/) are shorter, more concise tutorials that limit their scope to a single task or outcome by using prerequisites and limited steps. Additional resources at the end lead the user to a logical next step. Recipes are for developers of all skill levels.
37+
- [**Guides**](/docs/guides/) are different than tutorials, and the two main sections are Reference Guides and Conceptual Guides. Instead of “steps 1-4”, guides use standalone headings and sections to explain how to accomplish the task. They are often aimed at a more advanced audience due to the subject matter but should be approachable to anyone.
38+
39+
Given the difference in audiences of the three main learning material formats, increasing and overlapping coverage of topics can help support Gatsby learners of different skill and experience levels.
40+
41+
Please follow the [Gatsby blog post guidelines](/contributing/blog-contributions/) and do not suggest blog posts when what is needed is user documentation.
42+
43+
More on the format of documentation and learning materials can be found in the contributing docs:
44+
45+
- [Docs Templates](/contributing/docs-templates/)
46+
- [Gatsby Style Guide](/contributing/gatsby-style-guide/)
47+
48+
## Gathering and validating supporting information
49+
50+
Writing an effective doc that meets the needs of Gatsby users requires gathering information from various sources and applying those concepts to your original writing. You must digest and validate the details you uncover and understand them enough to describe them in a way that users of multiple skill levels can learn.
51+
52+
Here are some tips for gathering information on a given topic within Gatsby:
53+
54+
1. As you prepare a contribution that adds documentation information, carefully read the accompanying GitHub issue for tips and relevant materials, and ask questions there.
55+
56+
2. Search the Gatsby GitHub repo for additional tips, examples, starters, plugins, READMEs, and other information that could help you provide a learning resource that guides users through a particular use case or concept.
57+
58+
3. You can also search the web for additional examples outside of the Gatsby GitHub org or docs site. Be sure to check Gatsby versions and only reference the most current examples unless for a specific purpose.
59+
60+
4. In the event there is no information available to write a greenfield doc after trying all the above steps, such as for a new integration, try interviewing Gatsby core team members to help to produce an outline and content tips. See [Pair Programming program](/contributing/pair-programming/).
61+
62+
5. **For Gatsby inkteam members:** You can also search in the Gatsby Slack internally for related information. It’s possible other team members have discussed the issue, or even compiled trouble points into a doc. Look and ask around as part of your discovery work.
63+
64+
After you’ve collected supporting information, you must produce original writing to be accepted in the Gatsby docs. Copying other blog posts, materials, or Gatsby team member interviews word-for-word without attribution is not acceptable or allowed. Furthermore, direct quotes from interviews are also _almost never_ effective for guides, recipes, or tutorials.
65+
66+
Rather, the best way to write greenfield docs is with new text that explains the concepts and ideas you uncovered. With research and demos supporting your writing, you can speak more legitimately to use cases and common troubleshooting. Phrasing information in alternative ways for different skill levels is a bit like avoiding usage of the same word or phrase in its definition: if a reader didn’t understand it the first time, they may be more likely to understand it with an alternative explanation.
67+
68+
## Producing learning materials
69+
70+
Create demo sites and examples to provide more authoritative material that supports the developer experience. When relevant, **functioning source code is a requirement to writing docs** that truly educate users. Source code examples can also be linked from a doc as an additional resource. Include testing as part of your source code to ensure it is robust and stands the test of time.
71+
72+
Follow the [docs templates](/contributing/docs-templates/) to ensure you’re producing content in the right format for its purpose.
73+
74+
Use the [Markdown syntax doc](/docs/mdx/markdown-syntax/) to understand your options for formatting text with Markdown, and follow [accessibility recommendations](/docs/making-your-site-accessible/#how-to-improve-accessibility) for [heading levels](/contributing/docs-contributions/#headings) and image alt text.
75+
76+
Run the docs site locally to check formatting and functionality. There are instructions in the [contributing docs](/contributing/docs-contributions/).
77+
78+
Refer to the [Gatsby style guide](/contributing/gatsby-style-guide/) to ensure your PR will be accepted.
79+
80+
## Submitting a pull request
81+
82+
Submit a pull request that’s tied to a GitHub issue by following the [How to Open a Pull Request guide](/contributing/how-to-open-a-pull-request/).
83+
84+
Apply feedback from pull request reviews in order for them to be accepted. Further instructions can be found in the How to Open a Pull Request guide.
85+
86+
## Reference links
87+
88+
- [Docs Contributions](/contributing/docs-contributions/)
89+
- [Docs Templates](/contributing/docs-templates/)
90+
- [How to File an Issue](/contributing/how-to-file-an-issue/)
91+
- [Gatsby Style Guide](/contributing/gatsby-style-guide/)
92+
- [Markdown Syntax Doc](/docs/mdx/markdown-syntax/)
93+
- [Pair Programming](/contributing/pair-programming/) for interviewing the core team only
94+
- [Blog Post Guidelines](/contributing/blog-contributions/)
95+
- [Docs site setup instructions](/contributing/docs-contributions/#docs-site-setup-instructions)
96+
- [How to Open a Pull Request](/contributing/how-to-open-a-pull-request/)

0 commit comments

Comments
 (0)