feat(v2): theme config for Footer (facebook#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
shakcho · May 17, 2019 · 7f1995b · 7f1995b
1 parent 339ef8d
commit 7f1995b
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: [
  [