feat(v2): add ability specify link in footer logo (#1965)

* feat(v2): add ability specify link in footer logo

* Refactor according review
This commit is contained in:
Alexey Pyltsyn 2019-11-12 12:25:06 +03:00 committed by Endi
parent 3df601c2fa
commit 6546c194fb
3 changed files with 34 additions and 4 deletions

View file

@ -11,6 +11,7 @@ import classnames from 'classnames';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';
function FooterLink({item}) { function FooterLink({item}) {
const toUrl = useBaseUrl(item.to); const toUrl = useBaseUrl(item.to);
@ -32,6 +33,10 @@ function FooterLink({item}) {
); );
} }
const FooterLogo = ({url, alt}) => (
<img className="footer__logo" alt={alt} src={url} />
);
function Footer() { function Footer() {
const context = useDocusaurusContext(); const context = useDocusaurusContext();
const {siteConfig = {}} = context; const {siteConfig = {}} = context;
@ -86,7 +91,17 @@ function Footer() {
<div className="text--center"> <div className="text--center">
{logo && logo.src && ( {logo && logo.src && (
<div className="margin-bottom--sm"> <div className="margin-bottom--sm">
<img className="footer__logo" alt={logo.alt} src={logoUrl} /> {logo.href ? (
<a
href={logo.href}
target="_blank"
rel="noopener noreferrer"
className={styles.footerLogoLink}>
<FooterLogo alt={logo.alt} url={logoUrl} />
</a>
) : (
<FooterLogo alt={logo.alt} url={logoUrl} />
)}
</div> </div>
)} )}
{copyright} {copyright}

View file

@ -0,0 +1,15 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.footerLogoLink {
opacity: 0.5;
transition: opacity 0.15s ease-in-out;
}
.footerLogoLink:hover {
opacity: 1;
}

View file

@ -175,6 +175,7 @@ module.exports = {
logo: { logo: {
alt: 'Facebook Open Source Logo', alt: 'Facebook Open Source Logo',
src: 'https://docusaurus.io/img/oss_logo.png', src: 'https://docusaurus.io/img/oss_logo.png',
href: 'https://opensource.facebook.com/',
}, },
copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`,
}, },
@ -274,7 +275,7 @@ Deprecated. Create a `CNAME` file in your `static` folder instead with your cust
#### `customDocsPath`, `docsUrl`, `editUrl`, `enableUpdateBy`, `enableUpdateTime` #### `customDocsPath`, `docsUrl`, `editUrl`, `enableUpdateBy`, `enableUpdateTime`
**BREAKING**: `editUrl` should point to (website) docusaurus project instead of `docs` directory. **BREAKING**: `editUrl` should point to (website) docusaurus project instead of `docs` directory.
Deprecated. Pass it as an option to `@docusaurus/preset-classic` docs instead: Deprecated. Pass it as an option to `@docusaurus/preset-classic` docs instead:
@ -290,8 +291,7 @@ module.exports = {
// Equivalent to `customDocsPath`. // Equivalent to `customDocsPath`.
path: 'docs', path: 'docs',
// Equivalent to `editUrl` but should point to `website` dir instead of `website/docs` // Equivalent to `editUrl` but should point to `website` dir instead of `website/docs`
editUrl: editUrl: 'https://github.com/facebook/docusaurus/edit/master/website',
'https://github.com/facebook/docusaurus/edit/master/website',
// Equivalent to `docsUrl`. // Equivalent to `docsUrl`.
routeBasePath: 'docs', routeBasePath: 'docs',
// Remark and Rehype plugins passed to MDX. Replaces `markdownOptions` and `markdownPlugins`. // Remark and Rehype plugins passed to MDX. Replaces `markdownOptions` and `markdownPlugins`.