From 3598dc40cdc7332de721099938a1b567bdfc9a3f Mon Sep 17 00:00:00 2001 From: Berkan Unal Date: Sun, 27 Oct 2019 23:48:01 +0300 Subject: [PATCH] chore(docs): Fix unclickable links --- docs/docs/adding-an-rss-feed.md | 2 +- docs/docs/adding-search-with-js-search.md | 4 +-- ...building-an-ecommerce-site-with-shopify.md | 2 +- .../centralizing-your-sites-navigation.md | 4 +-- docs/docs/graphql-api.md | 2 +- docs/docs/recipes.md | 30 +++++++++---------- docs/docs/schema-customization.md | 2 +- .../sourcing-content-from-json-or-yaml.md | 2 +- docs/docs/sourcing-from-contentstack.md | 4 +-- docs/docs/sourcing-from-gentics-mesh.md | 6 ++-- docs/docs/sourcing-from-graphcms.md | 2 +- docs/docs/sourcing-from-kentico-cloud.md | 8 ++--- docs/docs/sourcing-from-prismic.md | 4 +-- docs/docs/sourcing-from-sanity.md | 4 +-- docs/docs/typography-js.md | 2 +- docs/docs/using-graphql-playground.md | 2 +- docs/docs/visual-testing-with-storybook.md | 2 +- 17 files changed, 41 insertions(+), 41 deletions(-) diff --git a/docs/docs/adding-an-rss-feed.md b/docs/docs/adding-an-rss-feed.md index 053d9f500902e..e3f2a078d751f 100644 --- 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 . > 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 index 72b2b6c6714d4..61ffa7671b8e4 100644 --- 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 - 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 , 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 index 2611b6c5afb92..f55cbbac51a91 100644 --- 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 . 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/centralizing-your-sites-navigation.md b/docs/docs/centralizing-your-sites-navigation.md index 4b3066d4d4937..50d0c51af75a5 100644 --- a/docs/docs/centralizing-your-sites-navigation.md +++ b/docs/docs/centralizing-your-sites-navigation.md @@ -44,7 +44,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 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. @@ -265,7 +265,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 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 index c472440251b5b..daecedd2dce4e 100644 --- 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: ## Sourcing data diff --git a/docs/docs/recipes.md b/docs/docs/recipes.md index 328c150e770f3..18bb8285c9752 100644 --- a/docs/docs/recipes.md +++ b/docs/docs/recipes.md @@ -94,7 +94,7 @@ export default AboutPage ``` 3. Run `gatsby develop` to start the development server. -4. Visit your new page in the browser: `http://localhost:8000/about` +4. Visit your new page in the browser: #### Additional resources @@ -253,7 +253,7 @@ export default ({ pageContext: { dog } }) => ( ) ``` -5. Run `gatsby develop` and navigate to the path of one of the pages you created (like at `http://localhost:8000/Fido`) to see the data you passed it displayed on the page +5. Run `gatsby develop` and navigate to the path of one of the pages you created (like at ) to see the data you passed it displayed on the page #### Additional resources @@ -883,7 +883,7 @@ path: /my-first-post This is my first Gatsby post written in Markdown! ``` -3. Start up the development server with `gatsby develop`, navigate to the GraphiQL explorer at `http://localhost:8000/___graphql`, and write a query to get all markdown data: +3. Start up the development server with `gatsby develop`, navigate to the GraphiQL explorer at , and write a query to get all markdown data: ```graphql { @@ -975,7 +975,7 @@ export const pageQuery = graphql` ` ``` -6. Run `gatsby develop` to restart the development server. View your post in the browser: `http://localhost:8000/my-first-post` +6. Run `gatsby develop` to restart the development server. View your post in the browser: #### Additional resources @@ -1178,7 +1178,7 @@ plugins: [ 7. Run `gatsby develop` and make sure the site compiled successfully. -8. Query data with the [GraphiQL editor](/docs/introducing-graphiql/) at `https://localhost:8000/___graphql`. The Contentful plugin adds several new node types to your site, including every content type in your Contentful website. Your example space with a "Blog Post" content type produces a `allContentfulBlogPost` node type in GraphQL. +8. Query data with the [GraphiQL editor](/docs/introducing-graphiql/) at . The Contentful plugin adds several new node types to your site, including every content type in your Contentful website. Your example space with a "Blog Post" content type produces a `allContentfulBlogPost` node type in GraphQL. ![the graphql interface, with a sample query outlined below](./images/recipe-sourcing-contentful-graphql.png) @@ -1304,7 +1304,7 @@ export default ({ pageContext: { allPokemon } }) => ( ``` 3. Run `gatsby develop` to fetch the data, build pages, and start the development server. -4. View your homepage in a browser: `http://localhost:8000` +4. View your homepage in a browser: #### Additional resources @@ -1344,7 +1344,7 @@ module.exports = { } ``` -3. Start the development server with `gatsby develop`, and open the GraphiQL explorer at `http://localhost:8000/___graphql`. Under the Explorer tab, you should see new node types, such as `allBlockBlock` for Drupal blocks, and one for every content type in your Drupal site. For example, if you have a "Page" content type, it will be available as `allNodePage`. To query all "Page" nodes for their title and body, use a query like: +3. Start the development server with `gatsby develop`, and open the GraphiQL explorer at . Under the Explorer tab, you should see new node types, such as `allBlockBlock` for Drupal blocks, and one for every content type in your Drupal site. For example, if you have a "Page" content type, it will be available as `allNodePage`. To query all "Page" nodes for their title and body, use a query like: ```graphql { @@ -1402,7 +1402,7 @@ export const query = graphql` } ``` -5. With the development server running, you can view the new page by visiting `http://localhost:8000/drupal`. +5. With the development server running, you can view the new page by visiting . #### Additional Resources @@ -1567,7 +1567,7 @@ To limit data, you'll need a Gatsby site with some nodes in the GraphQL data lay #### Directions 1. Run `gatsby develop` to start the development server. -2. Open a tab in your browser at: `http://localhost:8000/___graphql`. +2. Open a tab in your browser at: . 3. Add a query in the editor with the following fields on `allSitePage` to start off: ```graphql @@ -1627,7 +1627,7 @@ For this recipe, you'll need a Gatsby site with a collection of nodes to sort in #### Directions 1. Run `gatsby develop` to start the development server. -2. Open the GraphiQL explorer in a browser tab at: `http://localhost:8000/___graphql` +2. Open the GraphiQL explorer in a browser tab at: 3. Add a query in the editor with the following fields on `allSitePage` to start off: ```graphql @@ -1688,7 +1688,7 @@ For this recipe, you'll need a Gatsby site with a collection of nodes to filter #### Directions 1. Run `gatsby develop` to start the development server. -2. Open the GraphiQL explorer in a browser tab at: `http://localhost:8000/___graphql` +2. Open the GraphiQL explorer in a browser tab at: 3. Add a query in the editor using a field prefixed by 'all', like `allMarkdownRemark` (meaning that it will return a list of nodes) ```graphql @@ -1748,7 +1748,7 @@ If you would like to run two queries on the same datasource, you can use an alia #### Directions 1. Run `gatsby develop` to start the development server. -2. Open the GraphiQL explorer in a browser tab at: `http://localhost:8000/___graphql` +2. Open the GraphiQL explorer in a browser tab at: 3. Add a query in the editor using two fields of the same name like `allFile` ```graphql @@ -1878,7 +1878,7 @@ export default () => ( ``` 3. Run `gatsby develop` to start the development server. -4. View your image in the browser: `http://localhost:8000/` +4. View your image in the browser: #### Additional resources @@ -1925,7 +1925,7 @@ export default () => ( ``` 3. Run `gatsby develop` to start the development server. -4. View your image in the browser: `http://localhost:8000/` +4. View your image in the browser: #### Additional resources @@ -2279,7 +2279,7 @@ export const query = graphql` ` ``` -3. Restart the development server and open GraphiQL at `http://localhost:8000/___graphql`. Explore the fields available on the `MarkdownRemark` node. +3. Restart the development server and open GraphiQL at . Explore the fields available on the `MarkdownRemark` node. #### Additional resources diff --git a/docs/docs/schema-customization.md b/docs/docs/schema-customization.md index 946a049db3210..55d47f7653e7e 100644 --- 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 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 index 4e906984bb760..4dedbb63e36fb 100644 --- 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 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 index c6ca0443885fc..916c1fc2569fc 100644 --- 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 . You can run the GraphiQL IDE at . 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 . 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 index cc7a7a4773989..9b1188fa2be51 100644 --- 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 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` + 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 You now have: diff --git a/docs/docs/sourcing-from-graphcms.md b/docs/docs/sourcing-from-graphcms.md index 9400953141f26..b05e926cef6c8 100644 --- 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` + This will show you an interface where you can test your new content API. diff --git a/docs/docs/sourcing-from-kentico-cloud.md b/docs/docs/sourcing-from-kentico-cloud.md index 9b59775e2d103..ff8f31a7019d7 100644 --- a/docs/docs/sourcing-from-kentico-cloud.md +++ b/docs/docs/sourcing-from-kentico-cloud.md @@ -68,9 +68,9 @@ And that's enough for you to be able to access content from Kentico Cloud in you gatsby develop ``` -To see all the content that's available from Kentico Cloud, you can test out GraphQL queries in GraphiQL at `http://localhost:8000/___graphql`. Nodes from Kentico Cloud will be prefixed with `kenticoCloud` (for single nodes) or `allKenticoCloud` (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 Cloud, you can test out GraphQL queries in GraphiQL at . Nodes from Kentico Cloud will be prefixed with `kenticoCloud` (for single nodes) or `allKenticoCloud` (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 Cloud. +To see how to put that data into your site, first go to . 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 Cloud. The title here is generated in the layout from the site metadata. By default, the Kentico Cloud 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 Cloud to whatever you want and rerun `gatsby develop` to rebuild the site ([see below about automatic builds](#continuous-deployment)). +If you look at , you'll notice the title is now "Dancing Goat–Freshest coffee on the block!". You can easily change this title in Kentico Cloud 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 Cloud. 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 Cloud. 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 Cloud. To see a list of all pages, visit (or any other url that generates a 404). The body copy for this article comes from a rich text element in Kentico Cloud. 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-kentico-cloud#embedded-js-sdk-resolution) or query the required data in structured form for resolution and create your own React components for [inline content items](https://github.com/Kentico/gatsby-source-kentico-cloud#content-items-in-rich-text-elements), [links](https://github.com/Kentico/gatsby-source-kentico-cloud#links-in-rich-text-elements), and [images](https://github.com/Kentico/gatsby-source-kentico-cloud#images-in-rich-text-elements). diff --git a/docs/docs/sourcing-from-prismic.md b/docs/docs/sourcing-from-prismic.md index 62847c248c97d..63c51a6c37ba9 100644 --- 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 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) @@ -159,7 +159,7 @@ Earlier you defined an `API_KEY` environment variable for the source plugin. Net Netlify is able to automatically start builds on pushes to a repository and accepts [webhooks](https://www.netlify.com/docs/webhooks/) to do so. Fortunately, Prismic can [trigger webhook](https://user-guides.prismic.io/webhooks/webhooks) URLs when publishing content. With those features set up, new content will automatically appear on your Netlify site. -Setup your Netlify project and afterwards go to the `Build hooks` setting at `Settings → Build & deploy`. You'll receive a URL of the format `https://api.netlify.com/build_hooks/-randomstring-` after clicking `Add build hook`. On your Prismic project, visit the `Webhooks` setting and insert the copied URL into the respective field. Confirm with `Add this webhook`. Every time you publish a new document, Netlify will re-build your site. +Setup your Netlify project and afterwards go to the `Build hooks` setting at `Settings → Build & deploy`. You'll receive a URL of the format after clicking `Add build hook`. On your Prismic project, visit the `Webhooks` setting and insert the copied URL into the respective field. Confirm with `Add this webhook`. Every time you publish a new document, Netlify will re-build your site. ## Adding more features diff --git a/docs/docs/sourcing-from-sanity.md b/docs/docs/sourcing-from-sanity.md index c05923b99bf32..bbcef49cb81d5 100644 --- 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 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 while running `gatsby develop`. ## "Raw" fields diff --git a/docs/docs/typography-js.md b/docs/docs/typography-js.md index 8037753e4c8d4..1703d179ce0d1 100644 --- 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 . 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. diff --git a/docs/docs/using-graphql-playground.md b/docs/docs/using-graphql-playground.md index 7055e7a7bb75f..bc1ec6e44f199 100644 --- a/docs/docs/using-graphql-playground.md +++ b/docs/docs/using-graphql-playground.md @@ -18,7 +18,7 @@ To access this experimental feature utilizing GraphQL Playground with Gatsby, ad "develop": "GATSBY_GRAPHQL_IDE=playground gatsby develop", ``` -Use `npm run develop` instead of `gatsby develop` and access it when the development server is running on `https://localhost:8000/___graphql` +Use `npm run develop` instead of `gatsby develop` and access it when the development server is running on To still be able to use `gatsby develop` you would require the dotenv package to your gatsby-config.js file and add an [environment variable](/docs/environment-variables/) file, typically called `.env.development`. Finally, add `GATSBY_GRAPHQL_IDE=playground` to the `.env.development` file. diff --git a/docs/docs/visual-testing-with-storybook.md b/docs/docs/visual-testing-with-storybook.md index 3ef595934410f..7eb6839a2d156 100644 --- a/docs/docs/visual-testing-with-storybook.md +++ b/docs/docs/visual-testing-with-storybook.md @@ -154,7 +154,7 @@ Once you have this configured you should run Storybook to ensure it can start up npm run storybook ``` -Storybook CLI adds this command to your `package.json` for you so you shouldn't have to anything other than run the command. If Storybook builds successfully you should be able to navigate to `http://localhost:6006` and see the default stories supplied by the Storybook CLI. +Storybook CLI adds this command to your `package.json` for you so you shouldn't have to anything other than run the command. If Storybook builds successfully you should be able to navigate to and see the default stories supplied by the Storybook CLI. However, if you use `StaticQuery` or `useStaticQuery` in your project Storybook needs to be run with the `NODE_ENV` set to `production` (as Storybook sets this by default to `development`). Otherwise `babel-plugin-remove-graphql-queries` won't be run. Moreover Storybook needs to know about [static files](https://storybook.js.org/docs/configurations/serving-static-files/#2-via-a-directory) generated by Gatsby's `StaticQuery`. Your scripts should look like: