mirror of
https://github.com/facebook/docusaurus.git
synced 2025-12-31 07:14:18 +00:00
f6267dc52c
* 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 * feat(v2): add tags for blog post * feat(v2): add post content
99 lines
2.5 KiB
JavaScript
99 lines
2.5 KiB
JavaScript
/**
|
|
* 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 {children, frontMatter, metadata, truncated} = props;
|
|
|
|
const {date, readingTime, tags} = 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">{children}</p>
|
|
</div>
|
|
|
|
<footer className="row no-gutters m-3 justify-content-between">
|
|
<div className="col col-xs">
|
|
{tags.length > 0 && (
|
|
<>
|
|
{tags.map(({label}) => (
|
|
<span key={label} className="badge badge-primary m-1">
|
|
{label}
|
|
</span>
|
|
))}
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="col align-self-center text-right">
|
|
{readingTime && (
|
|
<small className={truncated ? 'mr-2' : ''}>
|
|
{Math.ceil(readingTime)} min read
|
|
</small>
|
|
)}
|
|
{truncated && (
|
|
<a href="https://github.com/" className="stretched-link">
|
|
Read more
|
|
</a>
|
|
)}
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
export default BlogPostItem;
|