-
Notifications
You must be signed in to change notification settings - Fork 2.6k
/
ReadNext.jsx
56 lines (54 loc) · 1.55 KB
/
ReadNext.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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>
);
}
}
});