Localhost urls (#21047)

* Mark localhost URLs as code snippets * Mark localhost URLs as code snippets * mark all localhost URL references as code highlighted strings instead of links * Update docs/contributing/gatsby-style-guide.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/pixabay-source-plugin-tutorial.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * chore: format Co-authored-by: Brittney Ball <brittney@gatsbyjs.com> Co-authored-by: Marcy Sutton <marcy@gatsbyjs.com> Co-authored-by: GatsbyJS Bot <mathews.kyle+gatsbybot@gmail.com>
gatsbyjs · Jan 30, 2020 · 7edd54f · 7edd54f
1 parent 7fcfba5
commit 7edd54f
Show file tree

Hide file tree

Showing 23 changed files with 37 additions and 33 deletions.
diff --git a/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md b/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md
@@ -165,7 +165,7 @@ testing out GraphQL queries in any GraphQL project. Gatsby ships with it enabled
 by default, thank goodness. GraphQL can actually be oddly opaque without this
 excellent tool.
 
-Visit <http://localhost:8000/___graphql> in the browser and you'll be greeted
+Visit `http://localhost:8000/___graphql` in the browser and you'll be greeted
 with this lovely dev tool:
 
 ![Gatsby Graphiql](https://dropsinn.s3.amazonaws.com/Screen%20Shot%202017-08-26%20at%201.31.08%20PM.png)

diff --git a/docs/contributing/gatsby-style-guide.md b/docs/contributing/gatsby-style-guide.md
@@ -135,6 +135,10 @@ Hyperlinks should contain the clearest words to indicate where the link will lea
 
 In tutorials that are meant for beginners, use as few hyperlinks as possible to minimize distractions. In docs, it's ok to include as many hyperlinks as necessary to provide relevant and interesting information and resources.
 
+### Mark localhost URLs as code strings
+
+Unless you're running `gatsby develop` or `gatsby build` locally, localhost links will not work. Therefore it's recommended to list these URL references as code blocks so there aren't invalid links throughout the docs on Gatsbyjs.org.
+
 ### Indicate when something is optional
 
 When a paragraph or sentence offers an optional path, the beginning of the first sentence should indicate that it's optional. For example, "if you'd like to learn more about xyz, see our reference guide" is clearer than "Go to the reference guide if you'd like to learn more about xyz."

diff --git a/docs/docs/adding-an-rss-feed.md b/docs/docs/adding-an-rss-feed.md
@@ -132,7 +132,7 @@ The `output` field in your feed object allows you to customize the filename for
 
 By default, feed is referenced in every page. You can customize this behavior by providing an extra field `match` of type `string`. This string will be used to build a `RegExp`, and this regular expression will be used to test the `pathname` of current page. Only pages that satisfied the regular expression will have feed reference included.
 
-To see your feed in action, run `gatsby build && gatsby serve` and you can then inspect the content and URLs in your RSS file at <http://localhost:9000/rss.xml>.
+To see your feed in action, run `gatsby build && gatsby serve` and you can then inspect the content and URLs in your RSS file at `http://localhost:9000/rss.xml`.
 
 > NOTE: if your blog has custom permalinks, such as links with or without dates in them, you may need to [customize `gatsby-node.js`](https://github.com/gatsbyjs/gatsby-starter-blog/blob/master/gatsby-node.js#L57) to output the correct URLs in your RSS feed. [Get in touch with us](/contributing/how-to-contribute/) if you need any help!
 

diff --git a/docs/docs/adding-search-with-js-search.md b/docs/docs/adding-search-with-js-search.md
@@ -253,7 +253,7 @@ Breaking down the code into smaller parts:
 In order to get it working in your site, you would only need to import the newly created component to a page.
 As you can see [in the example site](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-js-search/src/pages/index.js).
 
-Run `gatsby develop` and if all went well, open your browser of choice and enter the url <http://localhost:8000> - you'll have a fully functional search at your disposal.
+Run `gatsby develop` and if all went well, open your browser of choice and enter the url `http://localhost:8000` - you'll have a fully functional search at your disposal.
 
 ## JS-Search with a big dataset
 
@@ -571,7 +571,7 @@ Once again to get it to work on your site you would only need to copy over [the
 
 And both the [template](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-js-search/src/templates/ClientSearchTemplate.js) and the [search component](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-js-search/src/components/ClientSearch.js).
 
-Issuing `gatsby develop` again, and if all went without any issues one more time, open your browser of choice and enter the url <http://localhost:8000/search>, you'll have a fully functional search at your disposal coupled with Gatsby API.
+Issuing `gatsby develop` again, and if all went without any issues one more time, open your browser of choice and enter the url `http://localhost:8000/search`, you'll have a fully functional search at your disposal coupled with Gatsby API.
 
 Hopefully this rather extensive guide has shed some insights on how to implement client search using js-search.
 

diff --git a/docs/docs/building-an-ecommerce-site-with-shopify.md b/docs/docs/building-an-ecommerce-site-with-shopify.md
@@ -44,7 +44,7 @@ plugins: [
 
 ## Querying Shopify data and listing products
 
-Open the Gatsby GraphiQL interface by visiting <http://localhost:8000/___graphql>. With at least one example product added into Shopify you should see several new types of nodes in the Explorer tab, like `allShopifyProduct`. To query all products in your store sorted by title, try running the query:
+Open the Gatsby GraphiQL interface by visiting `http://localhost:8000/___graphql`. With at least one example product added into Shopify you should see several new types of nodes in the Explorer tab, like `allShopifyProduct`. To query all products in your store sorted by title, try running the query:
 
 ```graphql
 {

diff --git a/docs/docs/creating-dynamic-navigation.md b/docs/docs/creating-dynamic-navigation.md
@@ -42,7 +42,7 @@ module.exports = {
 
 GraphQL can be used to query for information contained in the `siteMetadata` object located in your project's `gatsby-config.js`. In order to test this out, you can start the `default-starter-project` in development mode by running `npm run develop`.
 
-Navigate to <http://localhost:8000/___graphql> in your browser to view the GraphiQL editor, which enables you to test GraphQL queries on the underlying APIs. Using the documentation explorer you can view the current GraphQL schema for your project, which is an invaluable resource during development.
+Navigate to `http://localhost:8000/___graphql` in your browser to view the GraphiQL editor, which enables you to test GraphQL queries on the underlying APIs. Using the documentation explorer you can view the current GraphQL schema for your project, which is an invaluable resource during development.
 
 Examining the available types in GraphQL you will notice that you can query `site`. This GraphQL type further returns the `siteMetadata` which needs to be accessed to create the dynamic navigation. At this point, it is useful if you know a little GraphQL in order to extract the menu links. If you are unfamiliar with GraphQL, there is some excellent documentation available at GraphQL's official website found [here](https://graphql.org/learn/) that you can use to brush up on your skills! The query below will return the menu links.
 
@@ -263,7 +263,7 @@ Header.defaultProps = {
 export default Header
 ```
 
-Starting the development server by running `npm run develop` and navigating to <http://localhost:8000> you should now see some dynamically generated menu links on your page.
+Starting the development server by running `npm run develop` and navigating to `http://localhost:8000` you should now see some dynamically generated menu links on your page.
 
 If you have made it this far, good job! You can now add new site links to your website dynamically by adding entries to the `gatsby-config.js` file.
 

diff --git a/docs/docs/graphql-api.md b/docs/docs/graphql-api.md
@@ -12,7 +12,7 @@ This doc serves as a reference for GraphQL features built into Gatsby, including
 
 ## Getting started with GraphQL
 
-GraphQL is available in Gatsby without a special install: a schema is automatically inferred and created when you run `gatsby develop` or `gatsby build`. When the site compiles, the data layer can be [explored](/docs/running-queries-with-graphiql/) at: <http://localhost:8000/___graphql>
+GraphQL is available in Gatsby without a special install: a schema is automatically inferred and created when you run `gatsby develop` or `gatsby build`. When the site compiles, the data layer can be [explored](/docs/running-queries-with-graphiql/) at: `http://localhost:8000/___graphql`
 
 ## Sourcing data
 

diff --git a/docs/docs/mdx/programmatically-creating-pages.md b/docs/docs/mdx/programmatically-creating-pages.md
@@ -147,7 +147,7 @@ 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
-> in your browser at <http://localhost:8000/___graphql>
+> in your browser at `http://localhost:8000/___graphql`
 
 ```graphql
 query {

diff --git a/docs/docs/running-queries-with-graphiql.md b/docs/docs/running-queries-with-graphiql.md
@@ -10,11 +10,11 @@ GraphiQL is the GraphQL integrated development environment (IDE). It's a powerfu
 you'll use often while building Gatsby websites.
 
 You can access it when your site's development server is running--normally at
-<http://localhost:8000/___graphql>.
+`http://localhost:8000/___graphql`.
 
 ## Example of using GraphiQL
 
-When you have <http://localhost:8000/___graphql> open, it will look something like what this video shows. In the video below, watch someone poke around the built-in `Site` "type" and see what fields are available
+When you have `http://localhost:8000/___graphql` open, it will look something like what this video shows. In the video below, watch someone poke around the built-in `Site` "type" and see what fields are available
 on it—including the `siteMetadata` object.
 
 <video controls="controls" autoplay="true" loop="true">
@@ -24,7 +24,7 @@ on it—including the `siteMetadata` object.
 
 ## How to use GraphiQL
 
-When the development server is running for one of your Gatsby sites, open GraphiQL at <http://localhost:8000/___graphql> and play with your data! Press <kbd>Ctrl + Space</kbd> (or use <kbd>Shift + Space</kbd> as an alternate keyboard shortcut) to bring up the autocomplete window and <kbd>Ctrl + Enter</kbd> to run the GraphQL query.
+When the development server is running for one of your Gatsby sites, open GraphiQL at `http://localhost:8000/___graphql` and play with your data! Press <kbd>Ctrl + Space</kbd> (or use <kbd>Shift + Space</kbd> as an alternate keyboard shortcut) to bring up the autocomplete window and <kbd>Ctrl + Enter</kbd> to run the GraphQL query.
 
 Make sure to check out the GraphiQL docs in the upper right-hand corner of the IDE. It's easy to miss them, but they're worth visiting!
 

diff --git a/docs/docs/schema-customization.md b/docs/docs/schema-customization.md
@@ -111,7 +111,7 @@ type AuthorJson implements Node {
 
 > A quick way to inspect the schema generated by Gatsby is the GraphQL Playground.
 > Start your project with `GATSBY_GRAPHQL_IDE=playground gatsby develop`, open the
-> playground at <http://localhost:8000/___graphql> and inspect the `Schema` tab on
+> playground at `http://localhost:8000/___graphql` and inspect the `Schema` tab on
 > the right.
 
 ### Automatic type inference

diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md
@@ -293,7 +293,7 @@ After parsing a YAML file into data and configuring Gatsby to produce pages with
     - gatsby-node.js
 ```
 
-Running `gatsby develop` in the terminal and opening a browser window to <http://localhost:8000/page1> you'll see a page with content that was sourced from a YAML file used to generate your site.
+Running `gatsby develop` in the terminal and opening a browser window to `http://localhost:8000/page1` you'll see a page with content that was sourced from a YAML file used to generate your site.
 
 To make this work on your existing Gatsby site, you would need to:
 

diff --git a/docs/docs/sourcing-from-contentstack.md b/docs/docs/sourcing-from-contentstack.md
@@ -51,7 +51,7 @@ Navigate to your root directory and run the following command:
 
 `gatsby develop`
 
-After running this, you will be able to view your site at <http://localhost:8000/>. You can run the GraphiQL IDE at <http://localhost:8000/___graphql>. The GraphiQL IDE will help you explore the app's data, including the Contentstack APIs.
+After running this, you will be able to view your site at `http://localhost:8000/`. You can run the GraphiQL IDE at `http://localhost:8000/___graphql`. The GraphiQL IDE will help you explore the app's data, including the Contentstack APIs.
 
 Now, you will able to query Contentstack data. Try the query below to get the 'Home' content type data:
 
@@ -89,7 +89,7 @@ export const pageQuery = graphql`
 `
 ```
 
-This will display the title of your home page on <http://localhost:8000/home>. Likewise, you can query additional fields in your entry.
+This will display the title of your home page on `http://localhost:8000/home`. Likewise, you can query additional fields in your entry.
 
 ## Closing note
 

diff --git a/docs/docs/sourcing-from-gentics-mesh.md b/docs/docs/sourcing-from-gentics-mesh.md
@@ -20,7 +20,7 @@ Gentics Mesh is a self-hosted CMS. You can run it for example via [Docker](https
 docker run -p 8080:8080 -d gentics/mesh-demo
 ```
 
-The demo Gentics server that gets setup has a UI that can be accessed on <http://localhost:8080/mesh-ui/> with default login (username: admin, password: admin). It allows you to view the content stored on the CMS and add new content.
+The demo Gentics server that gets setup has a UI that can be accessed on `http://localhost:8080/mesh-ui/` with default login (username: admin, password: admin). It allows you to view the content stored on the CMS and add new content.
 
 ### Install the boilerplate
 
@@ -67,7 +67,7 @@ If everything works correctly, you should now have your Gentics Mesh API added t
 
 From the root of your project, run the development environment with `gatsby develop`. Once the server has started, you should be able to open the following URL in your browser:
 
-<http://localhost:8000/___graphql>
+`http://localhost:8000/___graphql`
 
 This will show you an interface where you can test your new content GraphQL API.
 
@@ -180,7 +180,7 @@ const IndexPage = () => (
 export default IndexPage
 ```
 
-Once saved you can access the page via <http://localhost:8000>
+Once saved you can access the page via `http://localhost:8000`
 
 You now have:
 

diff --git a/docs/docs/sourcing-from-graphcms.md b/docs/docs/sourcing-from-graphcms.md
@@ -58,7 +58,7 @@ If everything works correctly, you should now have your GraphCMS data added to t
 
 From the root of your project, run the development environment with `gatsby develop`. Once the server has started and is error free, you should be able to open the following URL in your browser:
 
-<http://localhost:8000/___graphql>
+`http://localhost:8000/___graphql`
 
 This will show you an interface where you can test your new content API.
 

diff --git a/docs/docs/sourcing-from-kentico-kontent.md b/docs/docs/sourcing-from-kentico-kontent.md
@@ -68,9 +68,9 @@ And that's enough for you to be able to access content from Kentico Kontent in y
 gatsby develop
 ```
 
-To see all the content that's available from Kentico Kontent, you can test out GraphQL queries in GraphiQL at <http://localhost:8000/___graphql>. Nodes from Kentico Kontent will be prefixed with `kontent` (for single nodes) or `allKontent` (for all examples of a given type). Then each node has `Item` or `Type`, depending on what it is, and lastly you can add the codename of a specific type you are looking for. Feel free to explore the responses in GraphiQL.
+To see all the content that's available from Kentico Kontent, you can test out GraphQL queries in GraphiQL at `http://localhost:8000/___graphql`. Nodes from Kentico Kontent will be prefixed with `kontent` (for single nodes) or `allKontent` (for all examples of a given type). Then each node has `Item` or `Type`, depending on what it is, and lastly you can add the codename of a specific type you are looking for. Feel free to explore the responses in GraphiQL.
 
-To see how to put that data into your site, first go to <http://localhost:8000/>. Notice that the default title for the site is "Gatsby Default Starter". You can change that by pulling the title for your site from Kentico Kontent.
+To see how to put that data into your site, first go to `http://localhost:8000/`. Notice that the default title for the site is "Gatsby Default Starter". You can change that by pulling the title for your site from Kentico Kontent.
 
 The title here is generated in the layout from the site metadata. By default, the Kentico Kontent Sample Project has a single item named "Home" that is the only item of the Home type. So you can change the layout component to query the metadata of that item and then use that data to populate your title.
 
@@ -95,7 +95,7 @@ const Layout = ({ children }) => (
 ...
 ```
 
-If you look at <http://localhost:8000/>, you'll notice the title is now "Dancing Goat–Freshest coffee on the block!". You can easily change this title in Kentico Kontent to whatever you want and rerun `gatsby develop` to rebuild the site ([see below about automatic builds](#continuous-deployment)).
+If you look at `http://localhost:8000/`, you'll notice the title is now "Dancing Goat–Freshest coffee on the block!". You can easily change this title in Kentico Kontent to whatever you want and rerun `gatsby develop` to rebuild the site ([see below about automatic builds](#continuous-deployment)).
 
 So you've seen how to add content to existing pages in Gatsby using Kentico Kontent. Next, you will start creating new pages of your own.
 
@@ -205,7 +205,7 @@ export const query = graphql`
 `
 ```
 
-When you rerun `gatsby develop`, you'll be able to see each article as a page with content pulled from Kentico Kontent. To see a list of all pages, visit <http://localhost:8000/asdf> (or any other url that generates a 404).
+When you rerun `gatsby develop`, you'll be able to see each article as a page with content pulled from Kentico Kontent. To see a list of all pages, visit `http://localhost:8000/asdf` (or any other url that generates a 404).
 
 The body copy for this article comes from a rich text element in Kentico Kontent. Links and inline linked items (e.g., embedded videos) are not resolved by default for rich text elements. If you want to resolve them, you can use the [embedded JS SDK resolution](https://github.com/Kentico/gatsby-source-kontent#embedded-js-sdk-resolution) or query the required data in structured form for resolution and create your own React components for [inline content items and components](https://github.com/Kentico/gatsby-source-kontent#content-items-and-components-in-rich-text-elements), [links](https://github.com/Kentico/gatsby-source-kontent#links-in-rich-text-elements), and [images](https://github.com/Kentico/gatsby-source-kontent#images-in-rich-text-elements).
 

diff --git a/docs/docs/sourcing-from-prismic.md b/docs/docs/sourcing-from-prismic.md
@@ -79,7 +79,7 @@ module.exports = {
 }
 ```
 
-The best way to create your queries now is to first develop them in _GraphiQL_ at <http://localhost:8000/___graphql> and then paste them into your files. Start the local development server and experiment a bit with the available queries. You should be able to get this query:
+The best way to create your queries now is to first develop them in _GraphiQL_ at `http://localhost:8000/___graphql` and then paste them into your files. Start the local development server and experiment a bit with the available queries. You should be able to get this query:
 
 ![Prismic Index Query](./images/prismic-index-query.jpg)
 

diff --git a/docs/docs/sourcing-from-sanity.md b/docs/docs/sourcing-from-sanity.md
@@ -38,7 +38,7 @@ module.exports = {
 
 At this point you can choose to (and probably should) [set up a GraphQL API](https://www.sanity.io/help/graphql-beta) for your Sanity dataset, if you have not done so already. This will help the plugin in knowing which types and fields exists, so you can query for them even without them being present in any current documents.
 
-Go through <http://localhost:8000/___graphql> after running `gatsby develop` to understand the created data. Create a new query and check available collections and fields by using the autocomplete (`CTRL + SPACE`).
+Go through `http://localhost:8000/___graphql` after running `gatsby develop` to understand the created data. Create a new query and check available collections and fields by using the autocomplete (`CTRL + SPACE`).
 
 ## Options
 
@@ -212,7 +212,7 @@ The above query will fetch all projects that have a `slug.current` field set, an
 
 Most [Gatsby starters](/starters/?v=2) have some example of building pages, which you should be able to modify to your needs.
 
-Remember to use the GraphiQL interface to help write the queries you need - it's usually running at <http://localhost:8000/___graphql> while running `gatsby develop`.
+Remember to use the GraphiQL interface to help write the queries you need - it's usually running at `http://localhost:8000/___graphql` while running `gatsby develop`.
 
 ## "Raw" fields
 

diff --git a/docs/docs/typography-js.md b/docs/docs/typography-js.md
@@ -92,7 +92,7 @@ const typography = new Typography(
 export default typography;
 ```
 
-After completing the above steps, you can start the development server using the command `gatsby develop` and navigate to the local website <http://localhost:8000>. If all went well you should see the text on your website using the Funston typographic theme.
+After completing the above steps, you can start the development server using the command `gatsby develop` and navigate to the local website `http://localhost:8000`. If all went well you should see the text on your website using the Funston typographic theme.
 
 **Note**: If your fonts remains unchanged, remove all `font-family` calls in your CSS and check again.