Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jan 22, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 9 additions & 11 deletions docs/contributing/docs-and-website-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -212,6 +202,14 @@ items={[
slug={props.slug}
/>

---

## Other available components
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if we should get rid of this section entirely. The remaining components here (Breadcrumb and TableOfContents) aren't really things that you'd import -- they're automatically added to pages in the site layout.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah they may not make the most sense in this file compared to other components, but I think someone had pointed out it being good to document what those 2 components were doing since edits to the doc-links.yaml and frontmatter that contributors often touch has a tableOfContentsDepth and a breadcrumbTitle. Recording it here was probably just the best place I found 🤷‍♂️


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.
Expand Down
2 changes: 0 additions & 2 deletions docs/contributing/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
2 changes: 0 additions & 2 deletions docs/docs/building-with-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 0 additions & 2 deletions docs/docs/gatsby-lifecycle-apis.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 0 additions & 2 deletions docs/docs/glossary.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 0 additions & 2 deletions docs/docs/graphql-concepts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/).
Expand Down
2 changes: 0 additions & 2 deletions docs/docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 0 additions & 2 deletions docs/docs/overview-of-the-gatsby-build-process.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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._
Expand Down
6 changes: 6 additions & 0 deletions www/src/gatsby-plugin-theme-ui/components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -13,5 +16,8 @@ export default {
DateChart,
Pullquote,
EggheadEmbed,
LayerModel,
EmailCaptureForm,
HorizontalNavList,
pre: ({ children }) => <CodeBlock>{children}</CodeBlock>,
}