init

Author: tb

.eslintrc

@@ -0,0 +1,19 @@
+{
+  "extends": [
+    "react-app",
+    "prettier"
+  ],
+  "plugins": [
+    "prettier"
+  ],
+  "rules": {
+    "jsx-a11y/anchor-has-content": "off",
+    "prettier/prettier": ["error", {
+      "singleQuote": true,
+      "trailingComma": "all",
+      "bracketSpacing": false,
+      "jsxBracketSameLine": true,
+      "parser": "flow"
+    }]
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.idea

README.md

@@ -1,2 +1,67 @@
-# react-static-markdown
-Markdown files utils for react-static
+# [react-static-markdown](https://github.com/tb/react-static-markdown)
+
+Markdown files utils for [react-static](https://github.com/nozzle/react-static)
+
+## Install
+
+    yarn add -D globby gray-matter mdxc mdx-loader
+    yarn add react react-static-markdown 
+
+## Example usage with mdx-loader
+
+static.config.js
+
+    webpack: (config, {defaultLoaders, stage}) => {
+      config.resolve.extensions.push('.md');
+      config.module.rules = [
+        {
+          oneOf: [
+            {
+              test: /\.md$/,
+              use: ['mdx-loader'],
+            },
+            defaultLoaders.cssLoader,
+            defaultLoaders.jsLoader,
+            defaultLoaders.fileLoader,
+          ],
+        },
+      ];
+      return config;
+    },
+
+Usage
+
+    import About from 'content/pages/about.md';
+    
+    ...
+
+    <About />
+
+## Example usage without mdx-loader
+
+Markdown is transformed to mdx during `getRoutes` and then evaluated to component.
+
+static.config.js
+
+    const getFiles = require('react-static-mdx/getFilesWithMdx');
+    
+    ...
+    
+    const pages = await getFiles('content/pages/*.md');
+
+Usage
+
+    import mdxToComponent from 'react-static-mdx/mdxToComponent';
+    
+    ...
+    
+    const Page = mdxToComponent(page.contentmdx);
+    
+    ...
+    
+    <Page {...props} />
+
+## License
+
+React Static uses the MIT license. For more information on this license, [click here](https://github.com/tb/react-static-markdown/blob/master/LICENSE).
+ 

getFiles.js

@@ -0,0 +1,9 @@
+const fs = require('fs');
+const globby = require('globby');
+const matter = require('gray-matter');
+
+module.exports = async patterns =>
+  (await globby(patterns)).map(filepath => {
+    const {data, content} = matter(fs.readFileSync(filepath, 'utf8'));
+    return Object.assign({content}, data);
+  });

getFilesWithMdx.js

@@ -0,0 +1,7 @@
+const getFiles = require('./getFiles');
+const renderMdx = require('./renderMdx');
+
+module.exports = async patterns =>
+  (await getFiles(patterns)).map(data =>
+    Object.assign({contentmdx: renderMdx(data.content)}, data),
+  );

index.js

@@ -0,0 +1,6 @@
+module.exports = {
+  getFiles: require('./getFiles'),
+  getFilesWithMdx: require('./getFilesWithMdx'),
+  mdxToComponent: require('./mdxToComponent'),
+  renderMdx: require('./renderMdx'),
+};

mdxToComponent.js

@@ -0,0 +1,8 @@
+const React = require('react');
+
+module.exports = (code, factories = {}) => {
+  const module = {exports: null};
+  const {createFactory, createElement} = React;
+  eval(code); /* eslint no-eval: 0 */
+  return module.exports;
+};