`<MarkdownPage>` Component

This component is intended to take in a local markdown file and render it as a single page. It ships with a server file that exposes a getStaticProps generator.

<MarkdownPage
    // pass in the results of executing the 'generateStaticProps' function from '@hashicorp/react-markdown-page/server'
    staticProps={staticPropsResult}
/>

Props

Name	Description
`components` object	An object in which the key is the name of a react component, and the value is the actual component. Identical objects should be passed to `generateStaticProps` and `<MarkdownPage />` if used.
`staticProps*` object	the return value from the `generateStaticProps` function from `@hashicorp/react-markdown-page/server`. See docs for details.

Usage with `getStaticProps`

The code sample above shows the component as rendered - this one shows how it would be used in conjuction with generateStaticProps:

import MarkdownPage from '@hashicorp/react-markdown-page'
import generateStaticProps from '@hashicorp/react-markdown-page/server'
 
export default function MyPage(staticProps) {
  return <MarkdownPage {...staticProps} />
}
 
export const getStaticProps = generateStaticProps({
  pagePath: 'content/test-page.mdx', // resolved from project root
})

Usage with Custom Components

If you would like to use markdown components within the page, you can pass a components argument to both generateStaticProps and <MarkdownPage />, as such:

import MarkdownPage from '@hashicorp/react-markdown-page'
import generateStaticProps from '@hashicorp/react-markdown-page/server'
import TestComponent from './test-component'
 
const components = { TestComponent }
 
export default function MyPage(staticProps) {
  return <MarkdownPage {...staticProps} components={components} />
}
 
export const getStaticProps = generateStaticProps({
  pagePath: 'content/test-page.mdx', // resolved from project root
  components,
})
}