From f6267dc52cc56d2cc365ebb14e384b1df351480f Mon Sep 17 00:00:00 2001
From: Fanny <fanny.vieira@ccc.ufcg.edu.br>
Date: Sun, 12 Apr 2020 15:01:40 -0300
Subject: [PATCH] feat(v2): add tags for bootstrap theme blog post (#2587)

* 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
---
 .../src/theme/BlogListPage/index.js           | 14 +++---
 .../src/theme/BlogPostItem/index.js           | 43 ++++++++++++-------
 2 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/packages/docusaurus-theme-bootstrap/src/theme/BlogListPage/index.js b/packages/docusaurus-theme-bootstrap/src/theme/BlogListPage/index.js
index 5f194f4867..ad5fb2d145 100644
--- a/packages/docusaurus-theme-bootstrap/src/theme/BlogListPage/index.js
+++ b/packages/docusaurus-theme-bootstrap/src/theme/BlogListPage/index.js
@@ -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>
diff --git a/packages/docusaurus-theme-bootstrap/src/theme/BlogPostItem/index.js b/packages/docusaurus-theme-bootstrap/src/theme/BlogPostItem/index.js
index a0eb3bda8b..113f146e0c 100644
--- a/packages/docusaurus-theme-bootstrap/src/theme/BlogPostItem/index.js
+++ b/packages/docusaurus-theme-bootstrap/src/theme/BlogPostItem/index.js
@@ -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>
   );
 }