mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-23 05:57:05 +02:00
feat(v2): implement blog (#1062)
* feat(v2): implement blog * expect flat blog structure * \n * blogpage can import many posts
This commit is contained in:
parent
a2d3f26722
commit
12fd204840
22 changed files with 736 additions and 16 deletions
88
v2/lib/theme/BlogPost/index.js
Normal file
88
v2/lib/theme/BlogPost/index.js
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue