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: [
  [