fix(v2): remove empty containers when no data in blog pages

facebook · Nov 12, 2019 · 97a114c · 97a114c
1 parent b027db1
commit 97a114c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 16 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.js b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.js
@@ -89,10 +89,10 @@ function BlogPostItem(props) {
       <article className="markdown">
         <MDXProvider components={MDXComponents}>{children}</MDXProvider>
       </article>
-      <div className="row margin-vert--lg">
-        <div className="col">
+      {(tags.length > 0 || truncated) && (
+        <div className="row margin-vert--lg">
           {tags.length > 0 && (
-            <>
+            <div className="col">
               <strong>Tags:</strong>
               {tags.map(({label, permalink: tagPermalink}) => (
                 <Link
@@ -102,17 +102,17 @@ function BlogPostItem(props) {
                   {label}
                 </Link>
               ))}
-            </>
+            </div>
           )}
-        </div>
-        <div className="col text--right">
           {truncated && (
-            <Link to={metadata.permalink}>
-              <strong>Read More</strong>
-            </Link>
+            <div className="col text--right">
+              <Link to={metadata.permalink}>
+                <strong>Read More</strong>
+              </Link>
+            </div>
           )}
         </div>
-      </div>
+      )}
     </div>
   );
 }

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.js b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.js
@@ -23,12 +23,14 @@ function BlogPostPage(props) {
               <BlogPostItem frontMatter={frontMatter} metadata={metadata}>
                 <BlogPostContents />
               </BlogPostItem>
-              <div className="margin-vert--xl">
-                <BlogPostPaginator
-                  nextItem={metadata.nextItem}
-                  prevItem={metadata.prevItem}
-                />
-              </div>
+              {(metadata.nextItem || metadata.prevItem) && (
+                <div className="margin-vert--xl">
+                  <BlogPostPaginator
+                    nextItem={metadata.nextItem}
+                    prevItem={metadata.prevItem}
+                  />
+                </div>
+              )}
             </div>
           </div>
         </div>