Separate content and code

• Modularize each page into partials

  Each section of your page becomes a markdown file with front-matter. The content can be written in YAML or markdown. A layout is nominated per partial.

  - - -
  layout: cta
  link: Buy our product now
  url: http://your-product.com
  - - -
  
  # Look at our range of products
  
  We have **many** of them.
  

• Write your layout in react

  The layout is written in JSX as a react component. Each variable in your front-matter becomes a prop of the layout.

  import React, { Fragment } from 'react';
  import PropTypes from 'prop-types';
  
  /**
   * The Cta component
   */
  const Cta = ({ link, url, _body }) => (
    <section className="cta">
      { _body }
      
      <a className="btn" href={ url }>{ link }</a>
    </section>
  );
  
  export default Cta;