chore(www): Make components used in MDX globally available (#20685)

gatsbyjs · Jan 22, 2020 · 930cd31 · 930cd31
1 parent 0a066b9
commit 930cd31
Show file tree

Hide file tree

Showing 9 changed files with 15 additions and 25 deletions.
diff --git a/docs/contributing/docs-and-website-components.md b/docs/contributing/docs-and-website-components.md
@@ -3,8 +3,6 @@ title: Docs and Website Components
 tableOfContentsDepth: 2
 ---
 
-import LayerModel from "../../www/src/components/layer-model"
-import HorizontalNavList from "../../www/src/components/horizontal-nav-list"
 import Breadcrumb from "../../www/src/components/docs-breadcrumb"
 import { itemListContributing } from "../../www/src/utils/sidebar/item-list"
 import TableOfContents from "../../www/src/components/docs-table-of-contents"
@@ -130,14 +128,6 @@ Rendered, the component looks like this:
   To improve is to change, so to be perfect is to have changed often.
 </Pullquote>
 
----
-
-## Other available components
-
-Other less commonly used components aren't globally available, but can imported at the top of a Markdown file and used in other docs.
-
----
-
 ### Layer Model
 
 The `<LayerModel />` was made to help explain concepts of how Gatsby works at a high level. It conceptually breaks Gatsby into different layers and shows how data is pulled, aggregated, and eventually rendered as an app. It's used on docs pages to help explain how Gatsby works at different levels.
@@ -168,7 +158,7 @@ When used, it looks like this:
 
 ### Horizontal Navigation List
 
-The `<HorizontalNavList />` was made for the [Glossary](/docs/glossary/), and renders a list of links to alphabetical subheadings on the page in a horizontal format. Because of its specific use case, it isn't made globally available but can be imported if needed on other pages.
+The `<HorizontalNavList />` was made for the [Glossary](/docs/glossary/), and renders a list of links to alphabetical subheadings on the page in a horizontal format.
 
 #### Usage
 
@@ -212,6 +202,14 @@ items={[
 slug={props.slug}
 />
 
+---
+
+## Other available components
+
+Other less commonly used components aren't globally available, but can imported at the top of a Markdown file and used in other docs.
+
+---
+
 ### Breadcrumb
 
 The `<Breadcrumb />` component is used in layout files to display the hierarchy of pages a user is currently browsing on.

diff --git a/docs/contributing/index.mdx b/docs/contributing/index.mdx
@@ -3,8 +3,6 @@ title: Contributing to Gatsby.js
 disableTableOfContents: true
 ---
 
-import EmailCaptureForm from "../../www/src/components/email-capture-form"
-
 Thanks for being interested in contributing! We're so glad you want to help!
 
 Below you'll find guides on the Gatsby.js community, code of conduct, and how to get started contributing:

diff --git a/docs/docs/building-with-components.md b/docs/docs/building-with-components.md
@@ -2,8 +2,6 @@
 title: Building with Components
 ---
 
-import LayerModel from "../../www/src/components/layer-model"
-
 To use Gatsby, you will need a basic understanding of React components.
 
 The [official tutorial](https://reactjs.org/tutorial/tutorial.html)

diff --git a/docs/docs/gatsby-lifecycle-apis.md b/docs/docs/gatsby-lifecycle-apis.md
@@ -2,8 +2,6 @@
 title: Gatsby Lifecycle APIs
 ---
 
-import LayerModel from "../../www/src/components/layer-model"
-
 Gatsby provides a rich set of lifecycle APIs to hook into its bootstrap,
 build, and client runtime operations.
 

diff --git a/docs/docs/glossary.md b/docs/docs/glossary.md
@@ -3,8 +3,6 @@ title: Glossary
 disableTableOfContents: true
 ---
 
-import HorizontalNavList from "../../www/src/components/horizontal-nav-list.js"
-
 When you're new to Gatsby there can be a lot of words to learn. This glossary aims to give you a 10,000-foot overview of common terms and what they mean for Gatsby sites.
 
 <HorizontalNavList

diff --git a/docs/docs/graphql-concepts.md b/docs/docs/graphql-concepts.md
@@ -2,8 +2,6 @@
 title: GraphQL Concepts
 ---
 
-import LayerModel from "../../www/src/components/layer-model"
-
 There are many options for loading data into React components. One of the most
 popular and powerful of these is a technology called
 [GraphQL](http://graphql.org/).

diff --git a/docs/docs/index.md b/docs/docs/index.md
@@ -3,8 +3,6 @@ title: Gatsby.js Documentation
 disableTableOfContents: true
 ---
 
-import EmailCaptureForm from "../../www/src/components/email-capture-form"
-
 Gatsby is a blazing fast modern site generator for React.
 
 ## Get Started

diff --git a/docs/docs/overview-of-the-gatsby-build-process.md b/docs/docs/overview-of-the-gatsby-build-process.md
@@ -2,8 +2,6 @@
 title: Overview of the Gatsby Build Process
 ---
 
-import LayerModel from "../../www/src/components/layer-model"
-
 <!-- written at the time of commit e85278c to bootstrap/index.js and commit f8cae16 to build.js -->
 
 _This is a high-level overview about the steps in the Gatsby build process. For more detailed information about specific steps, check out the [Gatsby Internals](/docs/gatsby-internals) section of the docs._

diff --git a/www/src/gatsby-plugin-theme-ui/components.js b/www/src/gatsby-plugin-theme-ui/components.js
@@ -5,6 +5,9 @@ import HubspotForm from "../components/hubspot-form"
 import Pullquote from "../components/shared/pullquote"
 import EggheadEmbed from "../components/shared/egghead-embed"
 import DateChart from "../components/chart"
+import LayerModel from "../components/layer-model"
+import EmailCaptureForm from "../components/email-capture-form"
+import HorizontalNavList from "../components/horizontal-nav-list"
 import CodeBlock from "../components/code-block"
 
 export default {
@@ -13,5 +16,8 @@ export default {
   DateChart,
   Pullquote,
   EggheadEmbed,
+  LayerModel,
+  EmailCaptureForm,
+  HorizontalNavList,
   pre: ({ children }) => <CodeBlock>{children}</CodeBlock>,
 }