Converted md wrapper to ES6

This commit is contained in:
Gianluca Esposito 2015-09-10 22:22:45 +02:00
parent 43da6b8695
commit 373eae7a53
2 changed files with 51 additions and 48 deletions

View file

@ -1,48 +0,0 @@
React = require 'react'
require '../css/zenburn.css'
moment = require 'moment'
DocumentTitle = require 'react-document-title'
{link} = require 'gatsby-helpers'
ReadNext = require '../components/ReadNext'
module.exports = React.createClass
displayName: "MarkdownWrapper"
render: ->
{rhythm} = @props.typography
post = @props.page.data
<DocumentTitle title="#{post.title} | #{@props.config.blogTitle}">
<div className="markdown">
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{__html: post.body}}/>
<em
style={{
display: 'block'
marginBottom: rhythm(2)
}}
>
Posted {moment(post.date).format('MMMM D, YYYY')}
</em>
<hr
style={{
marginBottom: rhythm(2)
}}
/>
<ReadNext post={post} {...@props}/>
<p>
<img
src={link("/kyle-round-small-pantheon.jpg")}
style={{
float: 'left'
marginRight: rhythm(1/4)
marginBottom: 0
width: rhythm(2)
height: rhythm(2)
}}
/>
<strong>{@props.config.authorName}</strong> lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
</p>
</div>
</DocumentTitle>

51
wrappers/md.jsx Normal file
View file

@ -0,0 +1,51 @@
import React from 'react';
import moment from 'moment';
import DocumentTitle from 'react-document-title';
import { link } from 'gatsby-helpers';
import ReadNext from '../components/ReadNext';
import '../css/zenburn.css';
module.exports = React.createClass({
render: function() {
var post, rhythm;
rhythm = this.props.typography.rhythm;
post = this.props.page.data;
return (
<DocumentTitle title={`post.title | props.config.blogTitle`}>
<div className="markdown">
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{__html: post.body}}/>
<em
style={{
display: 'block',
marginBottom: rhythm(2)
}}
>
Posted {moment(post.date).format('MMMM D, YYYY')}
</em>
<hr
style={{
marginBottom: rhythm(2)
}}
/>
<ReadNext post={post} {...this.props}/>
<p>
<img
src={link("/kyle-round-small-pantheon.jpg")}
style={{
float: 'left',
marginRight: rhythm(1/4),
marginBottom: 0,
width: rhythm(2),
height: rhythm(2)
}}
/>
<strong>{this.props.config.authorName}</strong> lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
</p>
</div>
</DocumentTitle>
);
}
});