jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update new features post

Browse Source
This commit is contained in:
Timothy Lin 2021-07-22 21:36:17 +08:00
parent b5079a9471
commit e4e8ab9450
1 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
data/blog/new-features-in-v1.mdx
View File

@ -123,23 +123,28 @@ The `DEFAULT_LAYOUT` for blog posts page is set to `PostLayout`.
### Extend
The layout mapping is handled by the `MDXLayoutRenderer` component.
It's a glue component which imports the specified layout, processes the MDX content before passing it back to the layout component as children.
`layout` is mapped to wrapper which wraps the entire MDX content.
```js
export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
const LayoutComponent = require(`../layouts/${layout}`).default
export const MDXComponents = {
Image,
a: CustomLink,
pre: Pre,
wrapper: ({ components, layout, ...rest }) => {
const Layout = require(`../layouts/${layout}`).default
return <Layout {...rest} />
},
}
return (
<LayoutComponent {...rest}>
<MDXRemote {...mdxSource} components={MDXComponents} />
</LayoutComponent>
)
export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
const MDXLayout = useMemo(() => getMDXComponent(mdxSource), [mdxSource])
return <MDXLayout layout={layout} components={MDXComponents} {...rest} />
}
```
Use the component is a page where you want to accept a layout name to map to the desired layout.
You need to pass the layout name from the layout folder (it has to be an exact match) and the mdxSource content which is an output of the `seralize` function from the `next-mdx-remote` library.
Use the `MDXLayoutRenderer` component in a page where you want to accept a layout name to map to the desired layout.
You need to pass the layout name from the layout folder (it has to be an exact match).
## Blog comments system