3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-25 15:07:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): add tags for bootstrap theme blog post (#2587)

Browse source 
* 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
This commit is contained in:
Fanny 2020-04-12 15:01:40 -03:00 • committed by GitHub
parent 354c1d3338
commit f6267dc52c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

14
packages/docusaurus-theme-bootstrap/src/theme/BlogListPage/index.js
View file

@ -12,16 +12,18 @@ function BlogListPage(props) {
const {items} = props; const {items} = props;
return ( return (
<div className="container my-5"> <div className="container-fluid my-5">
<div className="row"> <div className="row row-cols-1 row-cols-sm-1">
{items.map(({content: BlogPostContent}) => ( {items.map(({content: BlogPostContent}) => (
<div className="col col-8 offset-2 mb-5"> <div
<BlogPostCard
key={BlogPostContent.metadata.permalink} key={BlogPostContent.metadata.permalink}
className="col col-md-4 offset-md-4 col-xs-6 mb-5">
<BlogPostCard
frontMatter={BlogPostContent.frontMatter} frontMatter={BlogPostContent.frontMatter}
metadata={BlogPostContent.metadata} metadata={BlogPostContent.metadata}
truncated={BlogPostContent.metadata.truncated} truncated={BlogPostContent.metadata.truncated}>
/> <BlogPostContent />
</BlogPostCard>
</div> </div>
))} ))}
</div> </div>

23
packages/docusaurus-theme-bootstrap/src/theme/BlogPostItem/index.js
View file

@ -23,9 +23,9 @@ const MONTHS = [
]; ];
function BlogPostItem(props) { function BlogPostItem(props) {
const {frontMatter, metadata, truncated} = props; const {children, frontMatter, metadata, truncated} = props;
const {date, readingTime} = metadata; const {date, readingTime, tags} = metadata;
const {author, title} = frontMatter; const {author, title} = frontMatter;
const authorURL = frontMatter.author_url || frontMatter.authorURL; const authorURL = frontMatter.author_url || frontMatter.authorURL;
@ -63,12 +63,24 @@ function BlogPostItem(props) {
<div className="card-body"> <div className="card-body">
<h3 className="card-title text-primary">{title}</h3> <h3 className="card-title text-primary">{title}</h3>
<p className="lead">Markdown content</p> <p className="lead">{children}</p>
</div> </div>
<div className="text-right m-3"> <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 && ( {readingTime && (
<small className={truncated ? 'mx-3' : ''}> <small className={truncated ? 'mr-2' : ''}>
{Math.ceil(readingTime)} min read {Math.ceil(readingTime)} min read
</small> </small>
)} )}
@ -78,6 +90,7 @@ function BlogPostItem(props) {
</a> </a>
)} )}
</div> </div>
</footer>
</article> </article>
); );
} }