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
key={BlogPostContent.metadata.permalink}
className="col col-md-4 offset-md-4 col-xs-6 mb-5">
<BlogPostCard <BlogPostCard
key={BlogPostContent.metadata.permalink}
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>

43
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,21 +63,34 @@ 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">
{readingTime && ( <div className="col col-xs">
<small className={truncated ? 'mx-3' : ''}> {tags.length > 0 && (
{Math.ceil(readingTime)} min read <>
</small> {tags.map(({label}) => (
)} <span key={label} className="badge badge-primary m-1">
{truncated && ( {label}
<a href="https://github.com/" className="stretched-link"> </span>
Read more ))}
</a> </>
)} )}
</div> </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> </article>
); );
} }