feat(v2): theme config for Footer

facebook · May 16, 2019 · d03ff70 · d03ff70
1 parent b91a0fd
commit d03ff70
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 86 deletions.
diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json
@@ -8,6 +8,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "classnames": "^2.2.6",
     "docsearch.js": "^2.5.2"
   },
   "peerDependencies": {

diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/index.js b/packages/docusaurus-theme-classic/src/theme/Footer/index.js
@@ -6,98 +6,71 @@
  */
 
 import React from 'react';
+import classnames from 'classnames';
+
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 function Footer() {
+  const context = useDocusaurusContext();
+  const {siteConfig = {}} = context;
+
+  const {
+    baseUrl,
+    themeConfig: {footer},
+  } = siteConfig;
+
+  const {copyright, links = [], logo} = footer;
+
   return (
-    <footer className="footer">
+    <footer
+      className={classnames('footer', {
+        'footer--dark': footer.style === 'dark',
+      })}>
       <div className="container">
-        <div className="row footer__links">
-          <div className="col">
-            <h4 className="footer__title">Docs</h4>
-            <ul className="footer__items">
-              <li className="footer__item">
-                <a className="footer__link-item" href="/">
-                  Getting Started
-                </a>
-              </li>
-              <li className="footer__item">
-                <a className="footer__link-item" href="/">
-                  API
-                </a>
-              </li>
-              <li className="footer__item">
-                <a className="footer__link-item" href="/">
-                  FAQ
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div className="col">
-            <h4 className="footer__title">Community</h4>
-            <ul className="footer__items">
-              <li className="footer__item">
-                <a className="footer__link-item" href="/">
-                  Users
-                </a>
-              </li>
-              <li className="footer__item">
-                <a className="footer__link-item" href="/">
-                  Contribute
-                </a>
-              </li>
-              <li className="footer__item">
-                <a className="footer__link-item" href="/">
-                  Stack Overflow
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div className="col">
-            <h4 className="footer__title">Social</h4>
-            <ul className="footer__items">
-              <li className="footer__item">
-                <a className="footer__link-item" href="/">
-                  GitHub
-                </a>
-              </li>
-              <li className="footer__item">
-                <a className="footer__link-item" href="/">
-                  Facebook
-                </a>
-              </li>
-              <li className="footer__item">
-                <a className="footer__link-item" href="/">
-                  Twitter
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div className="col">
-            <h4 className="footer__title">More</h4>
-            <ul className="footer__items">
-              <li className="footer__item">
-                <a className="footer__link-item" href="/">
-                  Tutorial
-                </a>
-              </li>
-              <li className="footer__item">
-                <a className="footer__link-item" href="/">
-                  Blog
-                </a>
-              </li>
-            </ul>
+        {links && links.length > 0 && (
+          <div className="row footer__links">
+            {links.map(linkItem => (
+              <div className="col">
+                {linkItem.title != null ? (
+                  <h4 className="footer__title">{linkItem.title}</h4>
+                ) : null}
+                {linkItem.items != null && linkItem.items.length > 0 ? (
+                  <ul className="footer__items">
+                    {linkItem.items.map(item => (
+                      <li className="footer__item">
+                        <Link
+                          className="footer__link-item"
+                          {...item}
+                          {...(item.href
+                            ? {
+                                target: '_blank',
+                                rel: 'noopener noreferrer',
+                                href: item.href,
+                              }
+                            : {
+                                to: `${baseUrl}${item.to}`,
+                              })}>
+                          {item.label}
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                ) : null}
+              </div>
+            ))}
           </div>
-        </div>
-        <div className="text--center">
-          <div className="margin-bottom--sm">
-            <img
-              className="footer__logo"
-              alt="Facebook Open Source Logo"
-              src="https://docusaurus.io/img/oss_logo.png"
-            />
+        )}
+        {(logo || copyright) && (
+          <div className="text--center">
+            {logo && logo.src && (
+              <div className="margin-bottom--sm">
+                <img className="footer__logo" alt={logo.alt} src={logo.src} />
+              </div>
+            )}
+            {copyright}
           </div>
-          Copyright © 2019 Facebook, Inc.
-        </div>
+        )}
       </div>
     </footer>
   );

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -25,6 +25,59 @@ module.exports = {
       {url: 'blog', label: 'Blog'},
       {url: 'feedback/', label: 'Feedback'},
     ],
+    footer: {
+      style: 'dark',
+      links: [
+        {
+          title: 'Docs',
+          items: [
+            {
+              label: 'Introduction',
+              to: 'docs/introduction',
+            },
+            {
+              label: 'Themes',
+              to: 'docs/themes',
+            },
+          ],
+        },
+        {
+          title: 'Community',
+          items: [
+            {
+              label: 'Stack Overflow',
+              href: 'https://stackoverflow.com/questions/tagged/docusaurus',
+            },
+            {
+              label: 'Feedback',
+              to: 'feedback',
+            },
+          ],
+        },
+        {
+          title: 'Social',
+          items: [
+            {
+              label: 'Blog',
+              to: 'blog',
+            },
+            {
+              label: 'GitHub',
+              href: 'https://github.com/facebook/docusaurus',
+            },
+            {
+              label: 'Twitter',
+              href: 'https://twitter.com/docusaurus',
+            },
+          ],
+        },
+      ],
+      logo: {
+        alt: 'Facebook Open Source Logo',
+        src: 'https://docusaurus.io/img/oss_logo.png',
+      },
+      copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`,
+    },
   },
   presets: [
     [