Front matter

This commit is contained in:
LordMathis 2019-03-26 22:08:51 +01:00
parent e6d2c55c1f
commit c17a5728a3
2 changed files with 13 additions and 6 deletions

View File

@ -20,7 +20,10 @@ export default class Blog extends Component {
) )
} }
let posts = this.props.posts.map((post) => let posts = this.props.posts.sort((a, b) => {
return a.data - b.date
})
let postsHTML = posts.map((post) =>
<tr className={styles.postListItem} key={post.title}> <tr className={styles.postListItem} key={post.title}>
<td> <td>
<span className={styles.postDate}>{post.published}</span> <span className={styles.postDate}>{post.published}</span>
@ -38,7 +41,7 @@ export default class Blog extends Component {
<div className={contentStyle.content}> <div className={contentStyle.content}>
<table> <table>
<tbody className={styles.postsWrapper}> <tbody className={styles.postsWrapper}>
{posts} {postsHTML}
</tbody> </tbody>
</table> </table>
</div> </div>

View File

@ -5,6 +5,7 @@ import '../static/stylesheets/globals.scss'
import contentStyle from '../static/stylesheets/content.scss' import contentStyle from '../static/stylesheets/content.scss'
import styles from './Post.scss' import styles from './Post.scss'
import MarkdownIt from 'markdown-it' import MarkdownIt from 'markdown-it'
import fm from 'front-matter'
export default class Post extends Component { export default class Post extends Component {
static propTypes = { static propTypes = {
@ -14,7 +15,10 @@ export default class Post extends Component {
render () { render () {
const md = MarkdownIt() const md = MarkdownIt()
const result = md.render(this.props.post) 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) { if (this.props.isLoading) {
return ( return (
@ -28,12 +32,12 @@ export default class Post extends Component {
<div> <div>
<Navbar /> <Navbar />
<div className={contentStyle.contentWrapper}> <div className={contentStyle.contentWrapper}>
<Header header={this.props.post.title} /> <Header header={title} />
<div className={contentStyle.content}> <div className={contentStyle.content}>
<div className={styles.postDate}> <div className={styles.postDate}>
<h3>{this.props.post.published}</h3> <h3>{date}</h3>
</div> </div>
<div className={styles.postContent} dangerouslySetInnerHTML={{ __html: result }}> <div className={styles.postContent} dangerouslySetInnerHTML={{ __html: body }}>
</div> </div>
</div> </div>
</div> </div>