Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(docs): tutorial source-plugin -> fix code block language, add title #24579

Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/tutorial/source-plugin-tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ _You can include the plugin by using its name if you are using [npm link or yarn

You can now navigate into the `example-site` folder and run `gatsby develop`. You should see a line in the output in the terminal that shows your plugin loaded:

```shell
```shell:title=example-site
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if this can be done for every shell command on the Gatsby website? I think not. I would rather leave a shell tag without a title because the text before it implies running it in the example-site directory.

Suggested change
```shell:title=example-site
```shell

Copy link
Contributor Author

@muescha muescha May 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

```shell:title=source-plugin

```shell:title=example-site

if you look into the full tutorial text: the shell commands in this tutorial use this title to mark the directory if it is in a subdirectory - only this 2 places was not.

to be consistent in one doc there are 2 solutions:

  1. remove it from the other shell, or
  2. add it here.

i would add it here because that helps a little the reader - i liked here that also the js code examples had the subdirs are in the title :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think kyle was trying to be more specific because it wasn't implied in the two places the :title=example-site tag was used with shell. The other 4 places were implied.

Copy link
Contributor Author

@muescha muescha May 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Start by installing `gatsby-source-filesystem` in the `source-plugin` project:
```shell:title=source-plugin

Install `gatsby-plugin-sharp` and `gatsby-transformer-sharp` in the `example-site` (_not_ the plugin):
```shell:title=example-site

in the other 2 cases it is noted also the line before.

but i think, more easy for the reader is if he reads a second time in the title in which directory he should execute the commands...

$ gatsby develop
success open and validate gatsby-configs - 0.033s
success load plugins - 0.074s
Expand Down Expand Up @@ -200,7 +200,7 @@ You can query data from any location to source at build time using functions and

You'll use several modules from npm to making fetching data with GraphQL easier. Install them in the `source-plugin` project with:

```shell
```shell:title=source-plugin
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
```shell:title=source-plugin
```shell

npm install apollo-cache-inmemory apollo-client apollo-link apollo-link-http apollo-link-ws apollo-utilities graphql graphql-tag node-fetch ws subscriptions-transport-ws
```

Expand Down Expand Up @@ -642,7 +642,7 @@ Add a file at `example-site/src/pages/index.js` and copy the following code into

Ensure you have `gatsby-image` installed in the site by running `npm install gatsby-image`. It provides a component that can take the optimized image data and render it.

```javascript:title=example-site/src/pages/index.js
```jsx:title=example-site/src/pages/index.js
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me.

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
Expand Down