feat(v2): bootstrap blog post page and card (#2584)

* feat(v2): init the blog post card

* feat(v2): Update card design

* chore(v2): remove unused dependency

* feat(v2): add post list

* feat(v2): improve html tags

* chore(v2): run prettier

* feat(v2): remove old tag

* feat(v2): apply suggestions
This commit is contained in:
Fanny 2020-04-12 11:41:34 -03:00 committed by GitHub
parent 9c1abcddab
commit f61b92d86a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 189 additions and 2 deletions

View file

@ -0,0 +1,32 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import BlogPostCard from '@theme/BlogPostItem';
function BlogListPage(props) {
const {items} = props;
return (
<div className="container my-5">
<div className="row">
{items.map(({content: BlogPostContent}) => (
<div className="col col-8 offset-2 mb-5">
<BlogPostCard
key={BlogPostContent.metadata.permalink}
frontMatter={BlogPostContent.frontMatter}
metadata={BlogPostContent.metadata}
truncated={BlogPostContent.metadata.truncated}
/>
</div>
))}
</div>
</div>
);
}
export default BlogListPage;

View file

@ -0,0 +1,85 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
const MONTHS = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
function BlogPostItem(props) {
const {frontMatter, metadata, truncated} = props;
const {date, readingTime} = metadata;
const {author, title} = frontMatter;
const authorURL = frontMatter.author_url || frontMatter.authorURL;
const authorImageURL =
frontMatter.author_image_url || frontMatter.authorImageURL;
const match = date.substring(0, 10).split('-');
const year = match[0];
const month = MONTHS[parseInt(match[1], 10) - 1];
const day = parseInt(match[2], 10);
return (
<article className="card h-100">
<div className="row no-gutters rows-col-2 m-3">
<div className="col-xs mr-3">
{authorImageURL && (
<img style={{width: '50px'}} src={authorImageURL} alt={author} />
)}
</div>
<div className="col">
{author && (
<h5>
<a href={authorURL} alt={author}>
{author}
</a>
</h5>
)}
<time
className="card-subtitle mb-md-4 font-weight-light"
dateTime={date}>
{month} {day}, {year}{' '}
</time>
</div>
</div>
<div className="card-body">
<h3 className="card-title text-primary">{title}</h3>
<p className="lead">Markdown content</p>
</div>
<div className="text-right m-3">
{readingTime && (
<small className={truncated ? 'mx-3' : ''}>
{Math.ceil(readingTime)} min read
</small>
)}
{truncated && (
<a href="https://github.com/" className="stretched-link">
Read more
</a>
)}
</div>
</article>
);
}
export default BlogPostItem;

View file

@ -0,0 +1,8 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
export default () => {};

View file

@ -0,0 +1,8 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
export default () => {};

View file

@ -0,0 +1,8 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
export default () => {};