Markdown to React page layout - Demos

MarkdownPage.jsx

import PropTypes from "prop-types";
import React from "react";

import MarkdownElement from "MarkdownElement";

class MarkdownPage extends React.Component {
  static propTypes = {
    path: PropTypes.string.isRequired,
    req: PropTypes.func.isRequired,
    reqSource: PropTypes.func
  };

  getSections(markdown) {
    return markdown
      .filter(section => !/^\s*$/.test(section)); // Remove empty lines
  }

  render() {
    const { path, req, reqSource } = this.props;

    const demos = {};

    let markdown;

    // Parse markdown and JSX files
    req.keys().forEach(filename => {
      if (filename.indexOf(".md") !== -1) {
        markdown = req(filename).default;
      } else if (filename.indexOf(".jsx") !== -1) {
        const demoName = `${path}/${filename
          .replace(/\.\//g, "")
          .replace(/\.jsx/g, ".js")}`;

        demos[demoName] = {
          name: demoName,
          jsx: req(filename).default,
          rawJS: reqSource(filename).default
        };
      }
    });

    const sections = getSections(markdown);

    return (
      <div>
        <div className="content">
          {sections.map((section, index) => {
            if (/^"demo": "(.*)"/.test(section)) {
              let options;

              try {
                options = JSON.parse(`{${section}}`);
              } catch (err) {
                console.error(err);
                return null;
              }

              const name = options.demo;

              return (
                <Demo key={index} demo={demos[name]} />
              );
            }

            return <MarkdownElement key={index} text={section} />;
          })}
        </div>
      </div>
    );
  }
}

export default MarkdownPage;