use global markdownpage component
This commit is contained in:
Jeff Escalante
parent
5f68414ce0
commit
9d4ffb6cbd
|
|
@ -1,22 +0,0 @@
|
|||
# `<MarkdownPage />`
|
||||
|
||||
This component renders a single page built from a separate markdown file.
|
||||
|
||||
## Usage
|
||||
|
||||
```jsx
|
||||
import MarkdownPage from '@hashicorp/react-markdown-page'
|
||||
import generateStaticProps from '@hashicorp/react-markdown-page/server'
|
||||
|
||||
export default function MyPage({ staticProps }) {
|
||||
return <MarkdownPage {...staticProps} />
|
||||
}
|
||||
|
||||
export function getStaticProps() {
|
||||
return generateStaticProps({
|
||||
pagePath: 'content/test-page.mdx', // resolved from project root
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
If the specified page contains front matter, the `page_title` and `description` keys will be added as the title and description to the `<head>` of the page.
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import s from './style.module.css'
|
||||
import hydrate from 'next-mdx-remote/hydrate'
|
||||
import Head from 'next/head'
|
||||
import HashiHead from '@hashicorp/react-head'
|
||||
import Content from '@hashicorp/react-content'
|
||||
|
||||
export default function MarkdownPage({ head, mdxSource }) {
|
||||
const content = hydrate(mdxSource)
|
||||
return (
|
||||
<>
|
||||
<HashiHead is={Head} {...head} />
|
||||
<main className={s.root}>
|
||||
<Content content={content} />
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
import renderToString from 'next-mdx-remote/render-to-string'
|
||||
import markdownDefaults from '@hashicorp/nextjs-scripts/markdown'
|
||||
import matter from 'gray-matter'
|
||||
|
||||
export default function generateGetStaticProps({
|
||||
pagePath,
|
||||
includesRoot = path.join(process.cwd(), 'content/partials'),
|
||||
}) {
|
||||
return async function getStaticProps() {
|
||||
const filePath = path.join(process.cwd(), pagePath)
|
||||
const fileContent = fs.readFileSync(filePath, 'utf8')
|
||||
const { data, content } = matter(fileContent)
|
||||
const mdxSource = await renderToString(content, {
|
||||
mdxOptions: markdownDefaults({ resolveIncludes: includesRoot }),
|
||||
})
|
||||
return {
|
||||
props: {
|
||||
staticProps: {
|
||||
mdxSource,
|
||||
head: { title: data.page_title, description: data.description },
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
.root {
|
||||
composes: g-grid-container from global;
|
||||
margin-top: 75px;
|
||||
margin-bottom: 75px;
|
||||
|
||||
& article {
|
||||
padding-left: 0;
|
||||
max-width: 875px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -3109,6 +3109,16 @@
|
|||
"is-absolute-url": "^3.0.3"
|
||||
}
|
||||
},
|
||||
"@hashicorp/react-markdown-page": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@hashicorp/react-markdown-page/-/react-markdown-page-0.1.0.tgz",
|
||||
"integrity": "sha512-N/4BnlEv2oclmlVjpXnwAcgZn3qcp3F3Uz4SLBdiZG32OPDjaTXNGpfRIRqkTz9rtPNd8LVQ/R1gXC2lMw8bHQ==",
|
||||
"requires": {
|
||||
"@hashicorp/react-content": "^6.0.0",
|
||||
"@hashicorp/react-head": "^1.1.6",
|
||||
"gray-matter": "4.0.2"
|
||||
}
|
||||
},
|
||||
"@hashicorp/react-product-downloader": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@hashicorp/react-product-downloader/-/react-product-downloader-4.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
"@hashicorp/react-docs-page": "^10.0.1",
|
||||
"@hashicorp/react-hashi-stack-menu": "^1.0.10",
|
||||
"@hashicorp/react-head": "1.1.6",
|
||||
"@hashicorp/react-markdown-page": "^0.1.0",
|
||||
"@hashicorp/react-product-downloader": "4.0.2",
|
||||
"@hashicorp/react-search": "^2.1.3",
|
||||
"@hashicorp/react-section-header": "3.0.1",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import MarkdownPage from 'components/_temporary-markdown-page'
|
||||
import generateStaticProps from 'components/_temporary-markdown-page/server'
|
||||
import MarkdownPage from '@hashicorp/react-markdown-page'
|
||||
import generateStaticProps from '@hashicorp/react-markdown-page/server'
|
||||
|
||||
export default function CommunityToolsPage({ staticProps }) {
|
||||
export default function CommunityToolsPage(staticProps) {
|
||||
return <MarkdownPage {...staticProps} />
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import MarkdownPage from 'components/_temporary-markdown-page'
|
||||
import generateStaticProps from 'components/_temporary-markdown-page/server'
|
||||
import MarkdownPage from '@hashicorp/react-markdown-page'
|
||||
import generateStaticProps from '@hashicorp/react-markdown-page/server'
|
||||
|
||||
export default function CommunityToolsPage({ staticProps }) {
|
||||
export default function CommunityToolsPage(staticProps) {
|
||||
return <MarkdownPage {...staticProps} />
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import MarkdownPage from 'components/_temporary-markdown-page'
|
||||
import generateStaticProps from 'components/_temporary-markdown-page/server'
|
||||
import MarkdownPage from '@hashicorp/react-markdown-page'
|
||||
import generateStaticProps from '@hashicorp/react-markdown-page/server'
|
||||
|
||||
export default function CommunityToolsPage({ staticProps }) {
|
||||
export default function CommunityToolsPage(staticProps) {
|
||||
return <MarkdownPage {...staticProps} />
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue