diff --git a/docs/docs/mdx/markdown-syntax.md b/docs/docs/mdx/markdown-syntax.md index bdd59715ea6ad..280787d5e7502 100644 --- a/docs/docs/mdx/markdown-syntax.md +++ b/docs/docs/mdx/markdown-syntax.md @@ -92,7 +92,7 @@ How unordered lists are rendered in HTML: 1. Two 1. Three -## Links and Images +## Links and images ### Link @@ -145,14 +145,14 @@ This pattern is appropriate for [decorative or repetitive images](https://www.w3 > > more quotes -## Code Comments +## Code comments ### Inline - Enclose the text in backticks \`code\` - Inline `code` looks like this sentence -### Code Blocks +### Code blocks - Indent a block by four spaces @@ -180,7 +180,7 @@ This pattern is appropriate for [decorative or repetitive images](https://www.w3 --- ``` -## Frontmatter + MDX Example +## Frontmatter + MDX example ``` --- @@ -196,7 +196,7 @@ The chart is rendered inside our MDX document. ``` -## Helpful Resources +## Helpful resources - https://daringfireball.net/projects/markdown/syntax - https://www.markdownguide.org/basic-syntax diff --git a/docs/docs/mdx/plugins.md b/docs/docs/mdx/plugins.md index b844fa2998d9a..c506ade801b5b 100644 --- a/docs/docs/mdx/plugins.md +++ b/docs/docs/mdx/plugins.md @@ -58,7 +58,7 @@ by Gatsby image processing. ![my image](./my-awesome-image.png) ``` -## remark plugins +## Remark plugins You can use [remark plugins](https://github.com/remarkjs/remark/blob/master/doc/plugins.md) directly if there are transformations you'd like to make on your diff --git a/docs/docs/mdx/programmatically-creating-pages.md b/docs/docs/mdx/programmatically-creating-pages.md index 4ea1db9e26fbb..6d0b77fc7407e 100644 --- a/docs/docs/mdx/programmatically-creating-pages.md +++ b/docs/docs/mdx/programmatically-creating-pages.md @@ -22,7 +22,7 @@ You'll need to use `gatsby-source-filesystem` and tell it to source "posts" from a folder called `content/posts` located in the project's root. -> **NOTE**: `gatsby-plugin-mdx` uses `.mdx` by default as a file extension to +> **Note**: `gatsby-plugin-mdx` uses `.mdx` by default as a file extension to > recognize which files to use. You can also [use `.md` as a file > extension](/packages/gatsby-plugin-mdx#extensions) if you want. @@ -49,7 +49,7 @@ You can read about [`gatsby-source-filesystem`](/packages/gatsby-source-filesystem) if you'd like to learn more. -## Add MDX Files +## Add MDX files Before you can write any GraphQL queries and programmatically create pages, you need to add some content. @@ -64,20 +64,20 @@ mkdir -p content/posts touch content/posts/blog-{1,2}.mdx ``` -> **NOTE**: +> **Note**: > `mkdir -p path/to/a/directory` will create every folder in the path if > it does not exist. > -> _`touch ` will create an empty file named ``. The +> `touch ` will create an empty file named ``. The > brackets (`{}`) are [an > expansion](https://twitter.com/kentcdodds/status/1083399683932868609?s=19) -> which means you can create multiple files in one command._ +> which means you can create multiple files in one command. Open up each of the files you just created and add some content. ```md:title=blog-1.mdx --- -title: "Blog Post 1" +title: Blog Post 1 --- Trying out MDX @@ -85,7 +85,7 @@ Trying out MDX ```md:title=blog-2.mdx --- -title: "Blog Post 2" +title: Blog Post 2 --- Gatsby is the best @@ -138,7 +138,7 @@ paths to usable URLs. [`onCreateNode`](https://www.gatsbyjs.org/docs/node-apis/#onCreateNode) is a Gatsby lifecycle method that gets called whenever a new node is -created. In this case only `Mdx` nodes are touched. +created. In this case only `MDX` nodes are touched. ## Create pages from sourced MDX files @@ -146,7 +146,7 @@ In order to create pages from the sourced MDX files, you need to construct a query that finds all MDX nodes and pulls out the `slug` field added earlier. -> **NOTE**: You can open up a GraphiQL console for query testing +> **Note**: You can open up a GraphiQL console for query testing > in your browser at ```graphql @@ -219,7 +219,7 @@ API. ## Make a template for your posts -Make a file called `posts-page-layout.js` in `src/components`. This component +You can create a file called `posts-page-layout.js` in `src/components` - this component will be rendered as the template for all posts. There's a component, `MDXRenderer` which is used by `gatsby-plugin-mdx` that will be used to render any programmatically accessed MDX content. @@ -294,10 +294,10 @@ That's it, you're done. Run `gatsby develop` and enjoy your new MDX powers. Now you have all the pieces you need to programmatically create pages -with Gatsby and `gatsby-plugin-mdx`. Check out our other guides to find out +with Gatsby and `gatsby-plugin-mdx`. You can check out our other guides to find out more about all of the cool stuff you can do with `gatsby-plugin-mdx`. -## Bonus: Make a Blog Index +## Bonus: Make a blog index ```javascript:title=src/pages/index.js import React from "react" diff --git a/docs/docs/mdx/writing-pages.md b/docs/docs/mdx/writing-pages.md index 250136dd2ed14..d6e93c1094c8b 100644 --- a/docs/docs/mdx/writing-pages.md +++ b/docs/docs/mdx/writing-pages.md @@ -46,7 +46,7 @@ query { } ``` -> **Note:** To query `Mdx` content, it must be included in the node system using a +> **Note:** To query `MDX` content, it must be included in the node system using a > source like the `gatsby-source-filesystem` plugin first. Instructions for sourcing > content from somewhere like your `/src/pages` directory can be found on the [plugin's README](/packages/gatsby-source-filesystem/). @@ -94,12 +94,12 @@ file might look something like this: ### Why Gatsby? -Gatsby delivers faster, more secure sites and apps from a variety of data +Gatsby delivers faster, more secure sites and apps from a variety of data sources ### Where do I start? -The documentation offers guides for all different skill levels, you can +The documentation offers guides for all different skill levels, you can find more info at the Gatsby's [Quick Start page](https://www.gatsbyjs.org/docs/quick-start) @@ -152,7 +152,7 @@ export const metadata = { path: "/world", }; -# Hello, +# Hello, The span above will read: "Hello, World". @@ -210,7 +210,7 @@ const PurpleBorder = ({ children }) => ( export default PurpleBorder ``` -## GraphQL Queries +## GraphQL queries You can fetch data to use in your MDX file by exporting a `pageQuery` in the same way you would for a `.js` page. The queried data is passed