Merge pull request #1 from gesposito/master
Converted CoffeeScript and CJSX to ES6 and JSX
This commit is contained in:
Kyle Mathews
commit
2e5167eb08
14 changed files with 318 additions and 278 deletions
|
|
@ -1,9 +0,0 @@
|
|||
exports.loadContext = (callback) ->
|
||||
context = require.context './pages', true
|
||||
if module.hot
|
||||
module.hot.accept(context.id, ->
|
||||
context = require.context './pages', true
|
||||
callback context
|
||||
)
|
||||
|
||||
callback context
|
||||
11
app.js
Normal file
11
app.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
exports.loadContext = function(callback) {
|
||||
var context;
|
||||
context = require.context('./pages', true);
|
||||
if (module.hot) {
|
||||
module.hot.accept(context.id, function() {
|
||||
context = require.context('./pages', true);
|
||||
return callback(context);
|
||||
});
|
||||
}
|
||||
return callback(context);
|
||||
};
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
React = require 'react'
|
||||
Router = require 'react-router'
|
||||
{Link} = Router
|
||||
prune = require 'underscore.string/prune'
|
||||
includes = require 'underscore.string/include'
|
||||
find = require 'lodash/collection/find'
|
||||
|
||||
module.exports = React.createClass
|
||||
|
||||
render: ->
|
||||
{rhythm, fontSizeToMS} = @props.typography
|
||||
readNext = @props.post.readNext
|
||||
if readNext?
|
||||
nextPost = find @props.pages, (page) -> includes page.path, readNext.slice(1, -1)
|
||||
unless nextPost
|
||||
<noscript />
|
||||
else
|
||||
nextPost = find @props.pages, (page) -> includes page.path, readNext.slice(1, -1)
|
||||
|
||||
# Create prunned version of the body.
|
||||
html = nextPost.data.body
|
||||
body = prune(html.replace(/<[^>]*>/g, ''), 200)
|
||||
|
||||
<div>
|
||||
<h6
|
||||
style={{
|
||||
margin: 0
|
||||
fontSize: fontSizeToMS(-1).fontSize
|
||||
lineHeight: fontSizeToMS(-1).lineHeight
|
||||
letterSpacing: -0.5
|
||||
}}
|
||||
>
|
||||
READ THIS NEXT:
|
||||
</h6>
|
||||
<h3
|
||||
style={{
|
||||
marginBottom: rhythm(1/4)
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
to={nextPost.path}
|
||||
query={{readNext: true}}
|
||||
>
|
||||
{nextPost.data.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<p>{body}</p>
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
56
components/ReadNext.jsx
Normal file
56
components/ReadNext.jsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { prune, include as includes } from 'underscore.string';
|
||||
import find from 'lodash/collection/find';
|
||||
|
||||
module.exports = React.createClass({
|
||||
render: function() {
|
||||
var body, fontSizeToMS, html, nextPost, readNext, ref, rhythm;
|
||||
ref = this.props.typography, rhythm = ref.rhythm, fontSizeToMS = ref.fontSizeToMS;
|
||||
readNext = this.props.post.readNext;
|
||||
if (readNext != null) {
|
||||
nextPost = find(this.props.pages, function(page) {
|
||||
return includes(page.path, readNext.slice(1, -1));
|
||||
});
|
||||
}
|
||||
if (!nextPost) {
|
||||
return React.createElement("noscript", null);
|
||||
} else {
|
||||
nextPost = find(this.props.pages, function(page) {
|
||||
return includes(page.path, readNext.slice(1, -1));
|
||||
});
|
||||
// Create pruned version of the body.
|
||||
html = nextPost.data.body;
|
||||
body = prune(html.replace(/<[^>]*>/g, ''), 200);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h6
|
||||
style={{
|
||||
margin: 0,
|
||||
fontSize: fontSizeToMS(-1).fontSize,
|
||||
lineHeight: fontSizeToMS(-1).lineHeight,
|
||||
letterSpacing: -0.5
|
||||
}}
|
||||
>
|
||||
READ THIS NEXT:
|
||||
</h6>
|
||||
<h3
|
||||
style={{
|
||||
marginBottom: rhythm(1/4)
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
to={nextPost.path}
|
||||
query={{readNext: true}}
|
||||
>
|
||||
{nextPost.data.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<p>{body}</p>
|
||||
<hr />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
49
html.cjsx
49
html.cjsx
|
|
@ -1,49 +0,0 @@
|
|||
React = require 'react'
|
||||
Typography = require 'typography'
|
||||
DocumentTitle = require 'react-document-title'
|
||||
|
||||
typography = new Typography()
|
||||
{TypographyStyle} = typography
|
||||
|
||||
module.exports = React.createClass
|
||||
getDefaultProps: ->
|
||||
body: ""
|
||||
|
||||
render: ->
|
||||
title = DocumentTitle.rewind()
|
||||
if @props.title then title = @props.title
|
||||
|
||||
if __GH_PAGES__? and __GH_PAGES__
|
||||
urlPrefix = @props.config.ghPagesURLPrefix
|
||||
else
|
||||
urlPrefix = ""
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8"/>
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<meta name='viewport' content='user-scalable=no width=device-width, initial-scale=1.0 maximum-scale=1.0'/>
|
||||
<title>{@props.title}</title>
|
||||
<link rel="shortcut icon" href={@props.favicon}/>
|
||||
<TypographyStyle/>
|
||||
<style dangerouslySetInnerHTML={{__html: """
|
||||
body {
|
||||
color: rgb(66,66,66);
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: rgb(44,44,44);
|
||||
}
|
||||
a {
|
||||
color: rgb(42,93,173);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
"""}}/>
|
||||
</head>
|
||||
<body className="landing-page">
|
||||
<div id="react-mount" dangerouslySetInnerHTML={{__html: @props.body}} />
|
||||
<script src={urlPrefix + "/bundle.js"}/>
|
||||
</body>
|
||||
</html>
|
||||
61
html.jsx
Normal file
61
html.jsx
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
import React from 'react';
|
||||
import Typography from 'typography';
|
||||
import DocumentTitle from 'react-document-title';
|
||||
|
||||
var TypographyStyle = new Typography().TypographyStyle;
|
||||
|
||||
module.exports = React.createClass({
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
body: ""
|
||||
};
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var title, urlPrefix;
|
||||
title = DocumentTitle.rewind();
|
||||
if (this.props.title) {
|
||||
title = this.props.title;
|
||||
}
|
||||
if ((typeof __GH_PAGES__ !== "undefined" && __GH_PAGES__ !== null) && __GH_PAGES__) {
|
||||
urlPrefix = this.props.config.ghPagesURLPrefix;
|
||||
} else {
|
||||
urlPrefix = "";
|
||||
}
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8"/>
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<meta name='viewport' content='user-scalable=no width=device-width, initial-scale=1.0 maximum-scale=1.0'/>
|
||||
<title>{this.props.title}</title>
|
||||
<link rel="shortcut icon" href={this.props.favicon}/>
|
||||
<TypographyStyle/>
|
||||
<style dangerouslySetInnerHTML={{__html:
|
||||
`
|
||||
body {
|
||||
color: rgb(66,66,66);
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: rgb(44,44,44);
|
||||
}
|
||||
a {
|
||||
color: rgb(42,93,173);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
`
|
||||
}}/>
|
||||
</head>
|
||||
<body className="landing-page">
|
||||
<div id="react-mount" dangerouslySetInnerHTML={{__html: this.props.body}} />
|
||||
<script src={urlPrefix + "/bundle.js"}/>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
}
|
||||
});
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
React = require 'react'
|
||||
Router = require 'react-router'
|
||||
{RouteHandler, Link} = Router
|
||||
{Container, Grid, Breakpoint, Span} = require 'react-responsive-grid'
|
||||
Typography = require 'typography'
|
||||
require '../css/styles.css'
|
||||
{link} = require 'gatsby-helpers'
|
||||
|
||||
typography = Typography()
|
||||
{rhythm, fontSizeToMS} = typography
|
||||
|
||||
module.exports = React.createClass
|
||||
render: ->
|
||||
if @props.state.path is link('/')
|
||||
header = (
|
||||
<h1
|
||||
style={{
|
||||
fontSize: fontSizeToMS(2.5).fontSize
|
||||
lineHeight: fontSizeToMS(2.5).lineHeight
|
||||
marginBottom: rhythm(1.5)
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
style={{
|
||||
textDecoration: 'none'
|
||||
color: 'inherit'
|
||||
}}
|
||||
to={link('/')}
|
||||
>
|
||||
{@props.config.blogTitle}
|
||||
</Link>
|
||||
</h1>
|
||||
)
|
||||
else
|
||||
header = (
|
||||
<h3>
|
||||
<Link
|
||||
style={{
|
||||
textDecoration: 'none'
|
||||
color: 'inherit'
|
||||
}}
|
||||
to={link('/')}
|
||||
>
|
||||
{@props.config.blogTitle}
|
||||
</Link>
|
||||
</h3>
|
||||
)
|
||||
|
||||
<Container
|
||||
style={{
|
||||
maxWidth: rhythm(24)
|
||||
padding: "#{rhythm(2)} #{rhythm(1/2)}"
|
||||
}}
|
||||
>
|
||||
{header}
|
||||
<RouteHandler typography={typography} {...@props}/>
|
||||
</Container>
|
||||
|
||||
62
pages/_template.jsx
Normal file
62
pages/_template.jsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import React from 'react';
|
||||
import { RouteHandler, Link } from 'react-router';
|
||||
import { Container, Grid, Breakpoint, Span } from 'react-responsive-grid';
|
||||
import Typography from 'typography';
|
||||
import { link } from 'gatsby-helpers';
|
||||
|
||||
var typography = new Typography();
|
||||
var rhythm = typography.rhythm, fontSizeToMS = typography.fontSizeToMS;
|
||||
|
||||
import '../css/styles.css';
|
||||
|
||||
module.exports = React.createClass({
|
||||
render: function() {
|
||||
var header;
|
||||
if (this.props.state.path === link('/')) {
|
||||
header = (
|
||||
<h1
|
||||
style={{
|
||||
fontSize: fontSizeToMS(2.5).fontSize,
|
||||
lineHeight: fontSizeToMS(2.5).lineHeight,
|
||||
marginBottom: rhythm(1.5)
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
color: 'inherit'
|
||||
}}
|
||||
to={link('/')}
|
||||
>
|
||||
{this.props.config.blogTitle}
|
||||
</Link>
|
||||
</h1>
|
||||
);
|
||||
} else {
|
||||
header = (
|
||||
<h3>
|
||||
<Link
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
color: 'inherit'
|
||||
}}
|
||||
to={link('/')}
|
||||
>
|
||||
{this.props.config.blogTitle}
|
||||
</Link>
|
||||
</h3>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Container
|
||||
style={{
|
||||
maxWidth: rhythm(24),
|
||||
padding: `${rhythm(2)} ${rhythm(1/2)}`
|
||||
}}
|
||||
>
|
||||
{header}
|
||||
<RouteHandler typography={typography} {...this.props}/>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
React = require 'react'
|
||||
Router = require 'react-router'
|
||||
{RouteHandler, Link} = Router
|
||||
sortBy = require 'lodash/collection/sortBy'
|
||||
DocumentTitle = require 'react-document-title'
|
||||
{link} = require 'gatsby-helpers'
|
||||
|
||||
module.exports = React.createClass
|
||||
statics:
|
||||
data: ->
|
||||
yo: true
|
||||
|
||||
render: ->
|
||||
{rhythm} = @props.typography
|
||||
pageLinks = []
|
||||
for page in sortBy(@props.pages, (page) -> page.data?.date).reverse()
|
||||
title = page.data?.title || page.path
|
||||
if page.path isnt link("/") and not page.data?.draft
|
||||
pageLinks.push (
|
||||
<li
|
||||
key={page.path}
|
||||
style={{
|
||||
marginBottom: rhythm(1/4)
|
||||
}}
|
||||
>
|
||||
<Link to={page.path}>{title}</Link>
|
||||
</li>
|
||||
)
|
||||
|
||||
<DocumentTitle title="#{@props.config.blogTitle}">
|
||||
<div>
|
||||
<p
|
||||
style={{
|
||||
marginBottom: rhythm(2.5)
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="./kyle-round-small-pantheon.jpg"
|
||||
style={{
|
||||
float: 'left'
|
||||
marginRight: rhythm(1/4)
|
||||
marginBottom: 0
|
||||
width: rhythm(2)
|
||||
height: rhythm(2)
|
||||
}}
|
||||
/>
|
||||
Written by <strong>{@props.config.authorName}</strong> who lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
|
||||
</p>
|
||||
<ul>
|
||||
{pageLinks}
|
||||
</ul>
|
||||
</div>
|
||||
</DocumentTitle>
|
||||
66
pages/index.jsx
Normal file
66
pages/index.jsx
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import React from 'react';
|
||||
import { RouteHandler, Link } from 'react-router';
|
||||
import sortBy from 'lodash/collection/sortBy';
|
||||
import DocumentTitle from 'react-document-title';
|
||||
import { link } from 'gatsby-helpers';
|
||||
|
||||
module.exports = React.createClass({
|
||||
statics: {
|
||||
data: function() {
|
||||
return {
|
||||
yo: true
|
||||
};
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
var i, len, page, pageLinks, ref, ref1, ref2, rhythm, title;
|
||||
rhythm = this.props.typography.rhythm;
|
||||
pageLinks = [];
|
||||
ref = sortBy(this.props.pages, function(page) {
|
||||
var ref;
|
||||
return (ref = page.data) != null ? ref.date : void 0;
|
||||
}).reverse();
|
||||
for (i = 0, len = ref.length; i < len; i++) {
|
||||
page = ref[i];
|
||||
title = ((ref1 = page.data) != null ? ref1.title : void 0) || page.path;
|
||||
if (page.path !== link("/") && !((ref2 = page.data) != null ? ref2.draft : void 0)) {
|
||||
pageLinks.push(
|
||||
<li
|
||||
key={page.path}
|
||||
style={{
|
||||
marginBottom: rhythm(1/4)
|
||||
}}
|
||||
>
|
||||
<Link to={page.path}>{title}</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<DocumentTitle title={this.props.config.blogTitle}>
|
||||
<div>
|
||||
<p
|
||||
style={{
|
||||
marginBottom: rhythm(2.5)
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="./kyle-round-small-pantheon.jpg"
|
||||
style={{
|
||||
float: 'left',
|
||||
marginRight: rhythm(1/4),
|
||||
marginBottom: 0,
|
||||
width: rhythm(2),
|
||||
height: rhythm(2)
|
||||
}}
|
||||
/>
|
||||
Written by <strong>{this.props.config.authorName}</strong> who lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
|
||||
</p>
|
||||
<ul>
|
||||
{pageLinks}
|
||||
</ul>
|
||||
</div>
|
||||
</DocumentTitle>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
React = require 'react'
|
||||
|
||||
module.exports = React.createClass
|
||||
displayName: "HTMLWrapper"
|
||||
|
||||
render: ->
|
||||
#html = require "../" + @props.page.requirePath
|
||||
console.log @props
|
||||
html = "<div>fix me</div>"
|
||||
<div dangerouslySetInnerHTML={{__html: html}}/>
|
||||
|
||||
11
wrappers/html.jsx
Normal file
11
wrappers/html.jsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
|
||||
module.exports = React.createClass({
|
||||
render: function() {
|
||||
var html;
|
||||
html = "<div>fix me</div>";
|
||||
return (
|
||||
<div dangerouslySetInnerHTML={{__html: html}}/>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -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
51
wrappers/md.jsx
Normal 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} | ${this.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>
|
||||
);
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue