react-static-plugin-markdown
A plugin for React Static that parses Markdown files to pages in your React Static app.
Installation
npm install react-static-plugin-markdown
Usage
There are three steps to complete before being able to use this plugin.
First, create a component that will render the Markdown file's page. It can use the ContentPage
component from this package to render the actual content, as long as you pass it the route data. At its bare minimum, the following would be sufficient:
// src/containers/ContentPage;; ContentPage;
Then, add the plugin to your static.config.js
, passing the path to the above render component as an option:
plugins: 'react-static-plugin-markdown' renderComponent: 'src/containers/ContentPage' ;
Finally, write your Markdown files in the /content
directory. For example, /content/some-page.md
will be visible on your website at the path /some-page/
.
Options
Options can be passed by using an array.
renderComponent: string
Required.
Path to the component that will render the Markdown file. See The render component for more details.
contentDir: string
Default value: content
Folder in which your Markdown pages are located.
The render component
Because plugins cannot access route data, you will manually have to pass that to the render component. At the bare minimum, it looks as follows:
;; ContentPage;
However, this also provides you with the opportunity to integrate that Markdown page in additional HTML. Just make sure to pass the route data on to the <ContentPage>
element:
;; <article> <h1>propsmarkdownfilename</h1> <ContentPage ...props/> </article>;
You can also use this to replace the default remark-based Markdown renderer by a different renderer, simply by replacing the default <ContentPage>
element with a different element:
;; <ReactCommonmark source=propsmarkdowncontent/>;
For a full list of the properties available to the render component, see Route data.
Route data
The render component, when wrapped in withRouteData
, receives a markdown
prop that provides the following data:
content: string
The original, unparsed Markdown.
filename: string
The filename of the original Markdown file, e.g. some-file.md
.
data: object
Any YAML front matter included at the top of your Markdown file, parsed into a Javascript object by gray-matter. For example, given the following Markdown file:
---title: Computing Machinery and Intelligence---# The Imitation GameI propose to consider the question, 'Can Machines Think?' This should...
Its data could be used by the render component as follows:
;; <article> <h1>propsmarkdowndatatitle</h1> <ContentPage ...props/> </article>;
License
MIT © Vincent Tunru