feat(v2): implement blog (#1062)

* feat(v2): implement blog

* expect flat blog structure

* \n

* blogpage can import many posts
This commit is contained in:
Endilie Yacop Sucipto 2018-10-25 14:23:29 +08:00 committed by GitHub
parent a2d3f26722
commit 12fd204840
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 736 additions and 16 deletions

View file

@ -0,0 +1,88 @@
/* eslint-disable */
import React from 'react';
import {Link} from 'react-router-dom';
import Helmet from 'react-helmet';
import classnames from 'classnames';
import Layout from '@theme/Layout'; // eslint-disable-line
import styles from './styles.css';
export default class BlogPost extends React.Component {
renderPostHeader() {
const {metadata, siteConfig} = this.props;
const {baseUrl} = siteConfig;
const {
date,
author,
authorURL,
authorTitle,
authorFBID,
permalink,
title,
} = metadata;
const blogPostDate = new Date(date);
const month = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
const authorImageURL = authorFBID
? `https://graph.facebook.com/${authorFBID}/picture/?height=200&width=200`
: metadata.authorImageURL;
return (
<header className={styles.postHeader}>
<h1 className={styles.postHeaderTitle}>
<Link to={permalink}>{title}</Link>
</h1>
<p className={styles.postMeta}>
{month[blogPostDate.getMonth()]} {blogPostDate.getDay()},{' '}
{blogPostDate.getFullYear()}
</p>
<div className={styles.authorBlock}>
{author ? (
<p className={styles.authorName}>
<a href={authorURL} target="_blank" rel="noreferrer noopener">
{author}
</a>
{authorTitle}
</p>
) : null}
{authorImageURL && (
<div
className={classnames(styles.authorPhoto, {
[styles.authorPhotoBig]: author && authorTitle,
})}>
<a href={authorURL} target="_blank" rel="noreferrer noopener">
<img src={authorImageURL} alt={author} />
</a>
</div>
)}{' '}
</div>
</header>
);
}
render() {
const {metadata, children, siteConfig} = this.props;
const {language} = metadata;
return (
<Layout {...this.props}>
<Helmet defaultTitle={siteConfig.title}>
{language && <html lang={language} />}
</Helmet>
{this.renderPostHeader()}
{children}
</Layout>
);
}
}