<DocsPage> Component

We have a lot of docs sites, all of which render content in exactly the same way. This component is a minimal abstraction of that rendering, and is intended to be used entirely as a template for all documentation content.

Share
Code Editor

Where it's used

0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...
3.x.x
Loading 3.x.x releases...
4.x.x
Loading 4.x.x releases...
5.x.x
Loading 5.x.x releases...
6.x.x
Loading 6.x.x releases...
7.x.x
Loading 7.x.x releases...
8.x.x
Loading 8.x.x releases...
9.x.x
Loading 9.x.x releases...
10.x.x
Loading 10.x.x releases...
11.x.x
Loading 11.x.x releases...
12.x.x
Loading 12.x.x releases...
13.x.x
Loading 13.x.x releases...
14.x.x
Loading 14.x.x releases...

Props

NameDescription
product*
string
The name and slug of the product this page is being rendered for. The slug is used for the Edit this page link.
Object contains nested props, see below:
product.name*
string
Human-readable proper case product name. Used for the page <title /> and og:site_name.
product.slug
string
A lower-case product identifier to pull in respective theme colors. The default is hashicorp blue.
Options: "hashicorp", "boundary", "consul", "nomad", "packer", "terraform", "vault", "vagrant", "waypoint"
baseRoute*
string
The path this page is rendering under, for example "docs" or "api-docs". Passed directly to the baseRoute prop of @hashicorp/react-docs-sidenav.
showEditPage
boolean
If true, an Edit this page link will appear on the bottom right of each page.
showVersionedDocs
boolean
If true, a version select option will be displayed. Defaults to process.env.ENABLE_VERSIONED_DOCS
additionalComponents
object
Object containing additional components to be made available within mdx pages. Uses the format { [key]: Component }, for example, { TestComponent: () => <p>hello world</p> }
staticProps*
object
Directly pass the return value of server/generateStaticProps in here.
Object contains nested props, see below:
staticProps.githubFileUrl
string
A link to the page's associated .mdx file on GitHub. Used for the Edit this page link.
staticProps.mdxSource*
object
Data returned from running next-mdx-remote/serialize on the page's .mdx file contents.
staticProps.frontMatter*
object
Frontmatter object parsed from the page's .mdx file.
Object contains nested props, see below:
staticProps.frontMatter.canonical_url
string
Optional canonical URL. Passed directly to @hashicorp/react-head.
staticProps.frontMatter.description*
string
Used for the <meta name="description" />. Passed directly to @hashicorp/react-head.
staticProps.frontMatter.page_title*
string
Used to construct the meta <title /> tag, then passed to @hashicorp/react-head.
staticProps.currentPath
string
Path to the current page, relative to the baseRoute. Used to highlight the current page.
staticProps.navData*
object
Tree of navigation data to render. See docs-sidenav/types.js for details.
staticProps.versions*
Array
Array of version options
Array members must be of the type below:
staticProps.versions[x]
object
Object contains nested props, see below:
staticProps.versions[x].name
string
A version’s programmatic value
staticProps.versions[x].label
string
A version’s human-friendly display value