feat(v2): theme config for Footer (#1461)

* feat(v2): theme config for Footer * fix: dont show footer if themeConfig.footer is undefined * Import fresh docusaurus.config.js for better hot reload
facebook · May 16, 2019 · 110126a · 110126a
1 parent b91a0fd
commit 110126a
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 91 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,77 @@
  */
 
 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;
+
+  if (!footer) {
+    return null;
+  }
+
+  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, i) => (
+              <div key={`linkItem-${i}`} className="col">
+                {linkItem.title != null ? (
+                  <h4 className="footer__title">{linkItem.title}</h4>
+                ) : null}
+                {linkItem.items != null &&
+                Array.isArray(linkItem.items) &&
+                linkItem.items.length > 0 ? (
+                  <ul className="footer__items">
+                    {linkItem.items.map(item => (
+                      <li key={item.href || item.to} 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/packages/docusaurus/src/server/load/config.js b/packages/docusaurus/src/server/load/config.js
@@ -7,6 +7,7 @@
 
 const fs = require('fs-extra');
 const _ = require('lodash');
+const importFresh = require('import-fresh');
 const path = require('path');
 const {CONFIG_FILE_NAME} = require('../../constants');
 
@@ -37,14 +38,11 @@ function formatFields(fields) {
   return fields.map(field => `'${field}'`).join(', ');
 }
 
-function loadConfig(siteDir, deleteCache = true) {
+function loadConfig(siteDir) {
   const configPath = path.resolve(siteDir, CONFIG_FILE_NAME);
-  if (deleteCache) {
-    delete require.cache[configPath];
-  }
   let loadedConfig = {};
   if (fs.existsSync(configPath)) {
-    loadedConfig = require(configPath); // eslint-disable-line
+    loadedConfig = importFresh(configPath);
   }
 
   const missingFields = REQUIRED_FIELDS.filter(

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -25,6 +25,63 @@ 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',
+            },
+            {
+              label: 'Discord',
+              href: 'https://discordapp.com/invite/docusaurus',
+            },
+          ],
+        },
+        {
+          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: [
     [