feat(docs): add examples to site (#31540)

* add examples to site * add tree/master/ * add more tree/master/ * Apply suggestions from code review Co-authored-by: Kyle Mathews <mathews.kyle@gmail.com> Co-authored-by: Kyle Mathews <mathews.kyle@gmail.com>
gatsbyjs · May 21, 2021 · 21567d4 · 21567d4
1 parent 968db84
commit 21567d4
Show file tree

Hide file tree

Showing 28 changed files with 89 additions and 5 deletions.
diff --git a/docs/docs/adding-search-with-js-search.md b/docs/docs/adding-search-with-js-search.md
@@ -1,5 +1,8 @@
 ---
 title: Adding Search with JS Search
+examples:
+  - label: Using js-search
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-js-search"
 ---
 
 ## Prerequisites

diff --git a/docs/docs/building-an-ecommerce-site-with-shopify.md b/docs/docs/building-an-ecommerce-site-with-shopify.md
@@ -1,5 +1,8 @@
 ---
 title: Building an E-commerce site with Shopify
+examples:
+  - label: Gatsby Shopify Starter
+    href: "https://github.com/gatsbyjs/gatsby-starter-shopify"
 ---
 
 In this tutorial, you will setup a new Gatsby website that fetches product data from [Shopify](https://www.shopify.com). The site displays a list of all products on a product listing page, and a page for every product in the store.
@@ -190,8 +193,3 @@ exports.createPages = async ({ graphql, actions }) => {
   })
 }
 ```
-
-## Additional Resources
-
-- [Gatsby Shopify Starter](/starters/AlexanderProd/gatsby-shopify-starter/)
-- [Gatsby Shopify Hello World](/starters/ohduran/gatsby-starter-hello-world-shopify/)
diff --git a/docs/docs/conceptual/making-your-site-accessible.md b/docs/docs/conceptual/making-your-site-accessible.md
@@ -1,5 +1,8 @@
 ---
 title: Making Your Site Accessible
+examples:
+  - label: Using react-skip-nav
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-reach-skip-nav"
 ---
 
 The Gatsby team is passionate about helping you create websites that work for everyone, with helpful defaults that bake in web accessibility as well as performance optimizations. By making your website accessible to people with disabilities, you can make more inclusive sites that reach and remove barriers for more people on the Internet.

diff --git a/docs/docs/creating-a-local-plugin.md b/docs/docs/creating-a-local-plugin.md
@@ -1,5 +1,10 @@
 ---
 title: Creating a Local Plugin
+examples:
+  - label: Using Local Plugins
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-local-plugins"
+  - label: Using Multiple Local Plugins
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-multiple-local-plugins"
 ---
 
 If a plugin is only relevant to your specific use-case, or if you’re developing a plugin and want a simpler workflow, a locally defined plugin is a convenient way to create and manage your plugin code.

diff --git a/docs/docs/how-to/adding-common-features/adding-an-rss-feed.md b/docs/docs/how-to/adding-common-features/adding-an-rss-feed.md
@@ -1,5 +1,8 @@
 ---
 title: Adding an RSS Feed
+examples:
+  - label: Using RSS Feed
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/feed"
 ---
 
 ## What is an RSS feed?

diff --git a/...o/adding-common-features/adding-page-transitions-with-plugin-transition-link.md b/...o/adding-common-features/adding-page-transitions-with-plugin-transition-link.md
@@ -1,5 +1,8 @@
 ---
 title: Adding Page Transitions with gatsby-plugin-transition-link
+examples:
+  - label: Using page-transitions
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-page-transitions"
 ---
 
 This guide will cover how to use `gatsby-plugin-transition-link` to animate transitions between pages on your Gatsby site.

diff --git a/docs/docs/how-to/adding-common-features/creating-a-sitemap.md b/docs/docs/how-to/adding-common-features/creating-a-sitemap.md
@@ -1,5 +1,8 @@
 ---
 title: Creating a Sitemap
+examples:
+  - label: Using gatsby-plugin-sitemap
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/sitemap"
 ---
 
 ## What is a sitemap?

diff --git a/docs/docs/how-to/adding-common-features/localization-i18n.md b/docs/docs/how-to/adding-common-features/localization-i18n.md
@@ -1,5 +1,8 @@
 ---
 title: Localization and Internationalization with Gatsby (i18n)
+examples:
+  - label: Using-i18n
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-i18n"
 ---
 
 Serving users content in a way that is adapted to their language & culture is part of a great user experience. When you make an effort to adapt web content to a user's location, that practice is called internationalization (i18n).

diff --git a/docs/docs/how-to/adding-common-features/processing-payments-with-stripe.md b/docs/docs/how-to/adding-common-features/processing-payments-with-stripe.md
@@ -1,5 +1,8 @@
 ---
 title: Processing Payments with Stripe
+examples:
+  - label: Using Stripe
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/ecommerce-tutorial-with-stripe"
 ---
 
 ## Why Stripe and Gatsby?

diff --git a/docs/docs/how-to/custom-configuration/typescript.md b/docs/docs/how-to/custom-configuration/typescript.md
@@ -1,5 +1,8 @@
 ---
 title: TypeScript and Gatsby
+examples:
+  - label: Using Typescript
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-typescript"
 ---
 
 ## Introductory paragraph

diff --git a/docs/docs/how-to/images-and-media/using-gatsby-plugin-image.md b/docs/docs/how-to/images-and-media/using-gatsby-plugin-image.md
@@ -3,6 +3,8 @@ title: Using the Gatsby Image plugin
 examples:
   - label: Using Gatsby Image
     href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-gatsby-image"
+  - label: GatsbyGram
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/gatsbygram"
 ---
 
 _If you're looking for a guide on using the deprecated `gatsby-image` package, it can be found in the [How to use Gatsby Image](/docs/how-to/images-and-media/using-gatsby-image) doc._

diff --git a/docs/docs/how-to/images-and-media/working-with-video.md b/docs/docs/how-to/images-and-media/working-with-video.md
@@ -1,5 +1,8 @@
 ---
 title: Working with Video
+examples:
+  - label: Using video
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-video"
 ---
 
 ## Sourcing video from a host

diff --git a/docs/docs/how-to/plugins-and-themes/configuring-usage-with-plugin-options.md b/docs/docs/how-to/plugins-and-themes/configuring-usage-with-plugin-options.md
@@ -1,5 +1,8 @@
 ---
 title: Configuring Plugin Usage with Plugin Options
+examples:
+  - label: Using plugin options
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-plugin-options"
 ---
 
 Plugins loaded into a Gatsby site can have options passed in to customize how a plugin operates.

diff --git a/docs/docs/how-to/previews-deploys-hosting/path-prefix.md b/docs/docs/how-to/previews-deploys-hosting/path-prefix.md
@@ -1,5 +1,8 @@
 ---
 title: Adding a Path Prefix
+examples:
+  - label: Using path-prefix
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-path-prefix"
 ---
 
 Many applications are hosted at something other than the root (`/`) of their domain.

diff --git a/docs/docs/how-to/querying-data/using-gatsby-without-graphql.md b/docs/docs/how-to/querying-data/using-gatsby-without-graphql.md
@@ -1,5 +1,8 @@
 ---
 title: Gatsby without GraphQL
+examples:
+  - label: Using Gatsby without GraphQL
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-gatsby-without-graphql"
 ---
 
 Most examples in the Gatsby docs and on the web at large focus on leveraging source plugins to manage your data in Gatsby sites. However, source plugins (or even Gatsby nodes) aren't strictly necessary to pull data into a Gatsby site! It's also possible to use an “unstructured data” approach in Gatsby sites, no GraphQL required.

diff --git a/docs/docs/how-to/routing/adding-markdown-pages.md b/docs/docs/how-to/routing/adding-markdown-pages.md
@@ -1,5 +1,8 @@
 ---
 title: Adding Markdown Pages
+examples:
+  - label: Using gatsby-transformer-remark
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark"
 ---
 
 Gatsby can use Markdown files to create pages in your site.

diff --git a/docs/docs/how-to/routing/client-only-routes-and-user-authentication.md b/docs/docs/how-to/routing/client-only-routes-and-user-authentication.md
@@ -1,5 +1,10 @@
 ---
 title: Client-only Routes & User Authentication
+examples:
+  - label: Client-only Paths
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/client-only-paths"
+  - label: Simple Authentication
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/simple-auth"
 ---
 
 Often you want to create a site with client-only portions, which allows you to gate them by authentication or load different content based on URL parameters.

diff --git a/docs/docs/how-to/routing/creating-routes.md b/docs/docs/how-to/routing/creating-routes.md
@@ -1,5 +1,8 @@
 ---
 title: Creating Routes
+examples:
+  - label: Using Collection Routing
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/route-api"
 ---
 
 There are multiple ways to create routes in Gatsby.

diff --git a/docs/docs/how-to/routing/mdx.md b/docs/docs/how-to/routing/mdx.md
@@ -1,5 +1,8 @@
 ---
 title: Add components to content using MDX
+examples:
+  - label: Using MDX
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-MDX"
 ---
 
 ## Introduction

diff --git a/docs/docs/how-to/sourcing-data/sourcing-from-contentful.md b/docs/docs/how-to/sourcing-data/sourcing-from-contentful.md
@@ -1,5 +1,8 @@
 ---
 title: Sourcing from Contentful
+examples:
+  - label: Using Contentful
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful"
 ---
 
 ## What is Contentful? Why choose it?

diff --git a/docs/docs/how-to/sourcing-data/sourcing-from-drupal.md b/docs/docs/how-to/sourcing-data/sourcing-from-drupal.md
@@ -1,5 +1,8 @@
 ---
 title: Sourcing from Drupal
+examples:
+  - label: Using Drupal
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-drupal"
 ---
 
 ## Why use Drupal + Gatsby together?

diff --git a/docs/docs/how-to/sourcing-data/sourcing-from-wordpress.md b/docs/docs/how-to/sourcing-data/sourcing-from-wordpress.md
@@ -1,5 +1,10 @@
 ---
 title: Sourcing from WordPress
+examples:
+  - label: Using WordPress
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-wordpress"
+  - label: Using WordPress with ACF
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-wordpress-with-acf"
 ---
 
 This guide will walk you through the process of using Gatsby with WordPress and [WPGraphQL](https://www.wpgraphql.com/).

diff --git a/docs/docs/how-to/styling/css-modules.md b/docs/docs/how-to/styling/css-modules.md
@@ -1,5 +1,8 @@
 ---
 title: Component-Scoped Styles with CSS Modules
+examples:
+  - label: Using CSS Modules
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-css-modules"
 ---
 
 Component-scoped CSS allows you to write traditional, portable CSS with minimal side-effects: gone are the worries of selector name collisions or affecting other components' styles.

diff --git a/docs/docs/how-to/styling/emotion.md b/docs/docs/how-to/styling/emotion.md
@@ -1,5 +1,8 @@
 ---
 title: Emotion
+examples:
+  - label: Using Emotion
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-emotion"
 ---
 
 In this guide, you will learn how to set up a site with the CSS-in-JS library [Emotion](https://emotion.sh).

diff --git a/docs/docs/how-to/styling/sass.md b/docs/docs/how-to/styling/sass.md
@@ -1,5 +1,8 @@
 ---
 title: Using Sass in Gatsby
+examples:
+  - label: Using Sass
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-sass"
 ---
 
 [Sass](https://sass-lang.com) is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. In Gatsby, Sass code can be translated to well-formatted, standard CSS using a plugin.

diff --git a/docs/docs/how-to/styling/styled-components.md b/docs/docs/how-to/styling/styled-components.md
@@ -1,5 +1,8 @@
 ---
 title: Styled Components
+examples:
+  - label: Using Styled Components
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-styled-components"
 ---
 
 In this guide, you will learn how to set up a site with the CSS-in-JS library [Styled Components](https://styled-components.com/).

diff --git a/docs/docs/how-to/testing/end-to-end-testing.md b/docs/docs/how-to/testing/end-to-end-testing.md
@@ -1,5 +1,8 @@
 ---
 title: End-to-End Testing
+examples:
+  - label: Using Cypress
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-cypress"
 ---
 
 [Cypress](https://www.cypress.io/) is one of the options when it comes to end-to-end (E2E) testing. Cypress is an all-in-one testing framework focused on E2E testing, meaning that you don't have to install 10 different things to get your test suite set up. You can write your first passing test in minutes without any configuration with the help of Cypress' API, which is easy to read and understand. It runs tests as fast as your browser can render content, which also makes test-driven development possible. You'll also profit from the time travel feature or the extensive debugging capabilities with Chrome DevTools. You can also use it with Gatsby, and this guide will explain how.

diff --git a/docs/docs/how-to/testing/unit-testing.md b/docs/docs/how-to/testing/unit-testing.md
@@ -1,5 +1,8 @@
 ---
 title: Unit Testing
+examples:
+  - label: Using Jest
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-jest"
 ---
 
 Unit testing is a great way to protect against errors in your code before you