48 lines
1.3 KiB
JavaScript
48 lines
1.3 KiB
JavaScript
import React, { Component } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { Spinner, Header, Navbar } from '.'
|
|
import '../static/stylesheets/globals.scss'
|
|
import contentStyle from '../static/stylesheets/content.scss'
|
|
import styles from './Post.scss'
|
|
import MarkdownIt from 'markdown-it'
|
|
import fm from 'front-matter'
|
|
|
|
export default class Post extends Component {
|
|
static propTypes = {
|
|
isLoading: PropTypes.bool.isRequired,
|
|
post: PropTypes.object.isRequired
|
|
}
|
|
|
|
render () {
|
|
const md = MarkdownIt()
|
|
const content = fm(this.props.post)
|
|
const title = content.attributes.title
|
|
const date = content.attributes.date
|
|
const body = md.render(content.body)
|
|
|
|
if (this.props.isLoading) {
|
|
return (
|
|
<div className={contentStyle.contentWrapper}>
|
|
<Spinner/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Navbar />
|
|
<div className={contentStyle.contentWrapper}>
|
|
<Header header={title} />
|
|
<div className={contentStyle.content}>
|
|
<div className={styles.postDate}>
|
|
<h3>{date}</h3>
|
|
</div>
|
|
<div className={styles.postContent} dangerouslySetInnerHTML={{ __html: body }}>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|