feat(v2): bootstrap layout footer (#2635)

* feat(v2): add minor adjustements and footer component

* fix(v2): margin and spacing of footer

* fix(v2): spacings

* fix(v2): remove unrelated links of the bootstrap template

* fix(v2): remove unrelated links of the bootstrap template

packages/docusaurus-theme-bootstrap/src/theme/BlogListPage/index.js

@@ -7,12 +7,13 @@
 
 import React from 'react';
 import BlogPostCard from '@theme/BlogPostItem';
+import Footer from '@theme/Footer';
 
 function BlogListPage(props) {
   const {items} = props;
 
   return (
-    <div className="container-fluid my-5">
+    <div className="container-fluid mt-5">
       <div className="row row-cols-1 row-cols-sm-1">
         {items.map(({content: BlogPostContent}) => (
           <div
@@ -26,6 +27,7 @@ function BlogListPage(props) {
             </BlogPostCard>
           </div>
         ))}
+        <Footer />
       </div>
     </div>
   );

packages/docusaurus-theme-bootstrap/src/theme/BlogPostItem/index.js

@@ -49,7 +49,7 @@ function BlogPostItem(props) {
   const day = parseInt(match[2], 10);
 
   return (
-    <article className="card h-100">
+    <article className="card h-100 shadow">
       <div className="row no-gutters rows-col-2 m-3">
         <div className="col-xs mr-3">
           {authorImageURL && (

packages/docusaurus-theme-bootstrap/src/theme/BlogTagsListPage/index.js

@@ -15,7 +15,7 @@ function BlogTagsListPage(props) {
         <Link
           href={tags[tag].permalink}
           key={tag}
-          className="btn btn-primary m-2">
+          className="btn btn-primary list-inline-item my-2">
           {tags[tag].name}{' '}
           <span className="badge badge-light">{tags[tag].count}</span>
         </Link>
@@ -26,7 +26,7 @@ function BlogTagsListPage(props) {
   return (
     <div className="container my-3 justify-content-center">
       <h1 className="text-primary">Tags</h1>
-      <ul className="my-xl-4">{renderAllTags()}</ul>
+      <ul className="my-xl-4 list-inline">{renderAllTags()}</ul>
     </div>
   );
 }

packages/docusaurus-theme-bootstrap/src/theme/Footer/index.js

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+function FooterLink({to, href, label, ...props}) {
+  const toUrl = useBaseUrl(to);
+
+  return (
+    <Link
+      {...(href
+        ? {
+            target: '_blank',
+            rel: 'noopener noreferrer',
+            href,
+          }
+        : {
+            to: toUrl,
+          })}
+      {...props}>
+      {label}
+    </Link>
+  );
+}
+
+function Footer() {
+  const context = useDocusaurusContext();
+  const {siteConfig = {}} = context;
+  const {themeConfig = {}} = siteConfig;
+  const {footer} = themeConfig;
+
+  const {links} = footer || {};
+
+  return (
+    <footer className="container p-0 m-0">
+      <div className="row bg-light no-gutters justify-content-center">
+        {links && links.length > 0 && (
+          <>
+            {links.map((linkItem, i) => (
+              <div className="col col-xs-1 col-xl-1 mx-4 my-4" key={i}>
+                {linkItem.title != null && <h5>{linkItem.title}</h5>}
+                <ul className="list-unstyled">
+                  {linkItem.items.map((item, key) =>
+                    item.html ? (
+                      <li
+                        key={key}
+                        className="mb-2"
+                        dangerouslySetInnerHTML={{
+                          __html: item.html,
+                        }}
+                      />
+                    ) : (
+                      <li className="mb-1" key={item.href || item.to}>
+                        <FooterLink {...item} />
+                      </li>
+                    ),
+                  )}
+                </ul>
+              </div>
+            ))}
+          </>
+        )}
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;