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

chore(doc): fix code block languages #20372

Merged
Merged
Show file tree
Hide file tree
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
4 changes: 2 additions & 2 deletions benchmarks/plugin-manifest/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ Benchmarks the current production version of the plugin unless you use `gatsby-d

```shell
# In the root of the Gatsby repository
$ yarn run watch --scope=gatsby-plugin-manifest .
Copy link
Contributor

Choose a reason for hiding this comment

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

This denotes a shell input. Not really a "bug" imo.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

i know - but i tried to unify it, because the most shell commands in docs are without the $, and it is more convenient for copy paste ...

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks for the clarification. Then it makes more sense.

yarn run watch --scope=gatsby-plugin-manifest .
```

```shell
# In ./benchmarks/plugin-manifest
# You'll need 'gatsby-dev' installed and configured globally.
$ gatsby-dev --packages gatsby-plugin-manifest
gatsby-dev --packages gatsby-plugin-manifest
```

You may now switch branches using `git checkout` and edit code on the current branch. Changes will be compiled into the local `node_modules` for the benchmark.
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ where to hold your content, and moved everything else away or removed it.

Here's what that looks like for me:

```
```text
.
├── content
│ ├── _drafts
Expand Down Expand Up @@ -90,7 +90,7 @@ rm -rf temp-gatsby-files # Remove the temp directory
However you get Gatsby initialized in your repository root, afterwards you
should have a file structure that looks something like this:

```
```text
.
├── content
│ └── [ Markdown files ... ]
Expand All @@ -110,7 +110,7 @@ should have a file structure that looks something like this:

Now run the Gatsby dev server to make sure everything works:

```
```bash
npm run develop
```

Expand All @@ -130,7 +130,7 @@ probably want to customize the header and overall layout.

This is pretty simple. Just modify the primary layout file that was generated:

```
```text
src/layouts/index.js
```

Expand All @@ -146,7 +146,7 @@ I talked about in part 1.

Also straightforward, just edit:

```
```text
src/pages/index.js
```

Expand Down Expand Up @@ -180,7 +180,7 @@ If you play around with GraphiQL you'll notice there's not that much there.
Let's fix that. We need to teach Gatsby how to query the file system. Luckily
this is so common it's been done for you. Install the file system source plugin:

```
```bash
npm i --save gatsby-source-filesystem
```

Expand Down Expand Up @@ -229,7 +229,7 @@ Being able to query files is a big win, and if you have a directory of HTML
files this is all you will need. But if you want to render markdown files as
HTML you will need another plugin. Let's add that now:

```
```bash
npm i --save gatsby-transformer-remark
```

Expand Down Expand Up @@ -268,7 +268,7 @@ This query gives you the full HTML for all your markdown files. If you are using
frontmatter you can also access that here. I'm assuming you have a `title` field
in your frontmatter:

```
```graphql
query {
allMarkdownRemark {
edges {
Expand Down Expand Up @@ -460,7 +460,7 @@ export const pageQuery = graphql`
Many existing Gatsby examples use `path` within each markdown file's frontmatter
to designate the url. For example:

```md
```markdown
---
title: My Post
path: my-post
Expand Down
2 changes: 1 addition & 1 deletion docs/blog/2017-10-17-building-i18n-with-gatsby/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ we create a JSON file for each component we want to translate.
For our site we're currently supporting English and Welsh, so our locales folder
looks like this.

```
```text
- src
- locales
- en
Expand Down
4 changes: 2 additions & 2 deletions docs/blog/2017-11-06-migrate-hugo-gatsby/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ Steps were:
Add `gatsby-plugin-typography` and `typography-theme-moraga` (for example) and
"enable" the plugin in the `gatsby-config.js` file:

```javascript=
```javascript
{
resolve: `gatsby-plugin-typography`,
options: {
Expand All @@ -183,7 +183,7 @@ Add `gatsby-plugin-typography` and `typography-theme-moraga` (for example) and

In `src/utils/typograhy` add:

```javascript=
```javascript
import Typography from "typography"
import theme from "typography-theme-moraga"

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ need to extract the date from the file name.

The slug in my case is generated with this (default in Jekyll) structure:

```
```text
https://blog.singuerinc.com/[n-categories]/YYYY/MM/DD/dashed-title/

// Given this data:
Expand Down
2 changes: 1 addition & 1 deletion docs/blog/2017-12-07-taking-gatsby-for-a-spin/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Gatsby definitely delivers on speed. The whole PRPL pattern thing seems to work

Data from anywhere with static output. That's sort of the holy grail isn't it? Right now the data I use in this site comes from markdown files, but I can already see that switching to another content source is going to be a breeze with GraphQL. The queries are clean and readable and the Graph*i*QL IDE is the perfect helper. In a way, GraphQL allows you to separate your frontend from the type of data source.

```es6
```javascript
export const query = graphql`
query BlogPostQuery($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
Expand Down
28 changes: 14 additions & 14 deletions docs/blog/2018-04-11-trying-out-gatsby-at-work-and-co/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ Figuring out how to set this up in GraphQL took some trial and error, but we set

The GraphQL looks like this:

```
```graphql
ContentfulContentPage {
headline
slug
Expand Down Expand Up @@ -127,7 +127,7 @@ Building off of Gatsby’s Contentful example, we were able to easily support dy

This worked so well that at first I was sure we wouldn’t even need to create any pages with static urls, but these wound up coming in handy for development and testing. We settled on a structure like this:

```
```text
|-pages/
|-dev/
|-article-components.js
Expand Down Expand Up @@ -155,7 +155,7 @@ That same validation page also served as a site status page, containing the time

Capturing this information was easy and only took a few additional lines in our `createPages` hook. Netlify exposes a lot of interesting [environment variables](https://www.netlify.com/docs/continuous-deployment/#build-environment-variables) (including some I hope to play with more on a future project, like `WEBHOOK_TITLE`, which can help you deduce the origin of the current build). In order to display these variables on the frontend, we needed to rename them to begin with `GATSBY_`:

```
```javascript
exports.createPages = () => {
['COMMIT_REF', ‘BRANCH’]].forEach((variableName) => {
// only variables beginning with GATSBY_ are available client-side
Expand All @@ -166,21 +166,21 @@ exports.createPages = () => {

After that, we just added one more variable to store the current time:

```
process.env.GATSBY_BUILD_TIME = Date.now();
```javascript
process.env.GATSBY_BUILD_TIME = Date.now()
```

#### Covering our tracks

We filtered out our dev pages in production by adding a simple `onCreatePage` hook to our `gatsby-node` file:

```
```javascript
exports.onCreatePage = ({ page, boundActionCreators }) => {
if (process.env.GATSBY_ENV === ENV.PRODUCTION) {
const { deletePage } = boundActionCreators;
if (/^\/dev\//.test(page.path)) deletePage(page);
const { deletePage } = boundActionCreators
if (/^\/dev\//.test(page.path)) deletePage(page)
}
};
}
```

### Staging
Expand Down Expand Up @@ -213,21 +213,21 @@ Backing up a second, let’s review why we selected the preview URLs `mystagingu

Here’s why: Contentful’s Content Preview dashboard doesn’t give you that kind of flexibility. To get around this, we opted to build special paths just for the staging environment. Here’s how we set it up in `gatsby-node.js`:

```
```javascript
// Always create a page at the regular path
createPage({
component: contentPageTemplate,
context,
path: `${language}/${slugs.join('/')}/`,
});
path: `${language}/${slugs.join("/")}/`,
})

// On staging, recreate the page with a path corresponding to its ID
if (process.env.GATSBY_ENV === ENV.STAGING) {
createPage({
component: contentPageTemplate,
context,
path: `${language}/${id}/`,
});
})
}
```

Expand Down Expand Up @@ -277,7 +277,7 @@ As I said, I was impressed by the Gatsby team’s quick turnaround time with PR

Of course, this is something developers do all the time. They push their fork to Git and link to it in their project’s `package.json`:

```
```json
“dependencies”: {
"some-library": "git+ssh://git@github.com:workco/some-library.git#cool-feature"
}
Expand Down
2 changes: 1 addition & 1 deletion docs/blog/2018-06-08-life-after-layouts/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ For a full list of what's new, check out our [V2 migration guide](/docs/migratin

- You can get started using Gatsby V2 right now by installing our V2 default starter:

```
```shell
gatsby new my-gatsby-v2-site https://github.com/gatsbyjs/gatsby-starter-default
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ Gatsby uses [GraphQL](https://graphql.org/learn/) to share data across pages. Yo

## Gatsby project folder structure

```shell
```text
├── LICENSE
├── README.md
├── gatsby-config.js
Expand All @@ -66,15 +66,15 @@ There are two types of routes:

Let's assume you have the following static routes in your `create-react-app` project:

```js
```jsx
<Route exact path='/' component={Home} />
<Route path='/blog' component={Blog} />
<Route path='/contact' component={Contact} />
```

Gatsby will create these routes automatically based on files you create in your `pages` folder. The good news is you've already created the React components so it's a matter of copying them to the right place. The exception is the home page which should be named `index.js`.  You will end up with something like this:

```shell
```text
├── LICENSE
├── README.md
├── gatsby-config.js
Expand All @@ -98,13 +98,13 @@ I will take an example of blog posts in this case loaded from Contentful. Every

In a normal React app the route will look something like this.

```js
```jsx
<Route path="/blog/:slug" component={BlogPost} />
```

And your `BlogPost` component will look something like this:

```js
```jsx
// a function that requests a blog post from Contentful's API
import { getBlogPost } from "./contentful-service"
import marked from "marked"
Expand Down Expand Up @@ -188,7 +188,7 @@ Since you already have the `BlogPost` component from your React project move it

Your Gatsby project will look like this:

```shell
```text
├── LICENSE
├── README.md
├── gatsby-config.js
Expand All @@ -211,7 +211,7 @@ You need to make some slight modifications to your `BlogPost` component.

`src/templates/blog-post.js`:

```js
```jsx
import React from "react"
import { graphql } from "gatsby"

Expand Down
14 changes: 7 additions & 7 deletions docs/blog/2018-1-18-strapi-and-gatsby/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ cd blog

Start the server:

```
```bash
gatsby develop
```

Expand All @@ -255,7 +255,7 @@ In this example, we are using Strapi. Obviously, we are going to need a source p

Let's install it:

```
```bash
npm install --save gatsby-source-strapi
```

Expand Down Expand Up @@ -330,7 +330,7 @@ _Important links from Video:_

First, we want to display the list of articles. To do so, add the following content in the existing home page file:

```js:title=/blog/src/pages/index.js
```jsx:title=/blog/src/pages/index.js
import React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
Expand Down Expand Up @@ -387,7 +387,7 @@ Gatsby includes a useful GraphiQL interface. It makes GraphQL queries developmen

To add images, we will need to import `Img` from package `gatsby-image` installed by default. Replace the content of `blog/src/pages/index.js` with the following :

```js:title=/blog/src/pages/index.js
```jsx:title=/blog/src/pages/index.js
import React from "react"
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"
Expand Down Expand Up @@ -455,7 +455,7 @@ Let's create the template, containing a specific GraphQL request and defining th

In order to do this, first create a folder called `templates` in your `src` directory. Then within `templates` create a file called `article.js`.

```js:title=/blog/src/templates/article.js
```jsx:title=/blog/src/templates/article.js
import React from "react"
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"
Expand Down Expand Up @@ -502,7 +502,7 @@ That looks fine, but at this point, Gatsby does not know when this template shou

First, we are going to code a new function called `makeRequest` to execute the GraphQL request. Then, we export a function named `createPages` in which we get the list of articles and create a page for each of them. Here is the result:

```js:title=/blog/gatsby-node.js
```jsx:title=/blog/gatsby-node.js
const path = require(`path`)

const makeRequest = (graphql, request) =>
Expand Down Expand Up @@ -577,7 +577,7 @@ Articles are written by authors. They deserve a dedicated page.

The processes for creating author views and article pages are very similar. First, create a new file in our `templates` folder called, `author.js`. Add the code below to this file.

```js:title=/blog/src/templates/author.js
```jsx:title=/blog/src/templates/author.js
import React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ As far as pushing data out to my site goes, I didn't know which API or token I n

Gatsby-config.js file:

```jsx
```js
module.exports = {
siteMetadata: {
title: `Taking Care of Watson`,
Expand Down
Loading