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;
return (
<div className="container my-5">
<div className="row">
<div className="container-fluid my-5">
<div className="row row-cols-1 row-cols-sm-1">
{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
key={BlogPostContent.metadata.permalink}
frontMatter={BlogPostContent.frontMatter}
metadata={BlogPostContent.metadata}
truncated={BlogPostContent.metadata.truncated}
/>
truncated={BlogPostContent.metadata.truncated}>
<BlogPostContent />
</BlogPostCard>
</div>
))}
</div>

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

@ -23,9 +23,9 @@ const MONTHS = [
];
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 authorURL = frontMatter.author_url || frontMatter.authorURL;
@ -63,21 +63,34 @@ function BlogPostItem(props) {
<div className="card-body">
<h3 className="card-title text-primary">{title}</h3>
<p className="lead">Markdown content</p>
<p className="lead">{children}</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>
<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>
);
}