-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
Page.jsx
106 lines (88 loc) · 2.58 KB
/
Page.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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
// Import External Dependencies
import React from 'react';
// Import Components
import PageLinks from '../PageLinks/PageLinks';
import Markdown from '../Markdown/Markdown';
import Contributors from '../Contributors/Contributors';
import {PlaceholderString} from '../Placeholder/Placeholder';
import Configuration from '../Configuration/Configuration';
// Load Styling
import './Page.scss';
class Page extends React.Component {
constructor(props) {
super(props);
const { content } = props;
const isDynamicContent = content instanceof Promise;
this.state = {
content: isDynamicContent ? PlaceholderString() : content.default || content,
contentLoaded: isDynamicContent ? false : true
};
}
componentDidMount() {
const { content } = this.props;
if (content instanceof Promise) {
content
.then(module =>
this.setState({
content: module.default || module,
contentLoaded: true
})
)
.catch(error =>
this.setState({
content: 'Error loading content.'
})
);
}
}
render() {
const { title, contributors = [], related = [], ...rest } = this.props;
const { contentLoaded } = this.state;
const loadRelated = contentLoaded && related && related.length !== 0;
const loadContributors =
contentLoaded && contributors && contributors.length !== 0;
const { content } = this.state;
let contentRender;
if (typeof content === 'function') {
contentRender = content(Configuration).props.children.slice(4); // Cut frontmatter information
} else {
contentRender = (
<div
dangerouslySetInnerHTML={{
__html: this.state.content
}}
/>
);
}
return (
<section className="page">
<PageLinks page={rest} />
<Markdown>
<h1>{title}</h1>
{contentRender}
{loadRelated && (
<div className="related__section">
<hr />
<h3>Further Reading</h3>
<ul>
{related.map((link, index) => (
<li key={index}>
<a href={link.url}>{link.title}</a>
</li>
))}
</ul>
</div>
)}
{loadContributors && (
<div className="contributors__section">
<hr />
<h3>Contributors</h3>
<Contributors contributors={contributors} />
</div>
)}
</Markdown>
</section>
);
}
}
export default Page;