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"
|
"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": {
|
"@hashicorp/react-product-downloader": {
|
||||||
"version": "4.0.2",
|
"version": "4.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/@hashicorp/react-product-downloader/-/react-product-downloader-4.0.2.tgz",
|
"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-docs-page": "^10.0.1",
|
||||||
"@hashicorp/react-hashi-stack-menu": "^1.0.10",
|
"@hashicorp/react-hashi-stack-menu": "^1.0.10",
|
||||||
"@hashicorp/react-head": "1.1.6",
|
"@hashicorp/react-head": "1.1.6",
|
||||||
|
"@hashicorp/react-markdown-page": "^0.1.0",
|
||||||
"@hashicorp/react-product-downloader": "4.0.2",
|
"@hashicorp/react-product-downloader": "4.0.2",
|
||||||
"@hashicorp/react-search": "^2.1.3",
|
"@hashicorp/react-search": "^2.1.3",
|
||||||
"@hashicorp/react-section-header": "3.0.1",
|
"@hashicorp/react-section-header": "3.0.1",
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import MarkdownPage from 'components/_temporary-markdown-page'
|
import MarkdownPage from '@hashicorp/react-markdown-page'
|
||||||
import generateStaticProps from 'components/_temporary-markdown-page/server'
|
import generateStaticProps from '@hashicorp/react-markdown-page/server'
|
||||||
|
|
||||||
export default function CommunityToolsPage({ staticProps }) {
|
export default function CommunityToolsPage(staticProps) {
|
||||||
return <MarkdownPage {...staticProps} />
|
return <MarkdownPage {...staticProps} />
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import MarkdownPage from 'components/_temporary-markdown-page'
|
import MarkdownPage from '@hashicorp/react-markdown-page'
|
||||||
import generateStaticProps from 'components/_temporary-markdown-page/server'
|
import generateStaticProps from '@hashicorp/react-markdown-page/server'
|
||||||
|
|
||||||
export default function CommunityToolsPage({ staticProps }) {
|
export default function CommunityToolsPage(staticProps) {
|
||||||
return <MarkdownPage {...staticProps} />
|
return <MarkdownPage {...staticProps} />
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import MarkdownPage from 'components/_temporary-markdown-page'
|
import MarkdownPage from '@hashicorp/react-markdown-page'
|
||||||
import generateStaticProps from 'components/_temporary-markdown-page/server'
|
import generateStaticProps from '@hashicorp/react-markdown-page/server'
|
||||||
|
|
||||||
export default function CommunityToolsPage({ staticProps }) {
|
export default function CommunityToolsPage(staticProps) {
|
||||||
return <MarkdownPage {...staticProps} />
|
return <MarkdownPage {...staticProps} />
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue