Skip to content

Commit

Permalink
feat(v2): allow specifying custom target for logo link (#2344)
Browse files Browse the repository at this point in the history
* feat(v2): allow specify custom target for logo link

* refactor: use isInternalUrl
  • Loading branch information
lex111 authored Feb 29, 2020
1 parent 3616377 commit c171609
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 8 deletions.
19 changes: 12 additions & 7 deletions packages/docusaurus-theme-classic/src/theme/Navbar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import React, {useCallback, useState} from 'react';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import isInternalUrl from '@docusaurus/isInternalUrl';

import SearchBar from '@theme/SearchBar';
import Toggle from '@theme/Toggle';
Expand Down Expand Up @@ -77,13 +78,17 @@ function Navbar() {
);

const logoLink = logo.href || baseUrl;
const isExternalLogoLink = /http/.test(logoLink);
const logoLinkProps = isExternalLogoLink
? {
rel: 'noopener noreferrer',
target: '_blank',
}
: null;
let logoLinkProps = {};

if (logo.target) {
logoLinkProps = {target: logo.target};
} else if (!isInternalUrl(logoLink)) {
logoLinkProps = {
rel: 'noopener noreferrer',
target: '_blank',
};
}

const logoSrc = logo.srcDark && isDarkTheme ? logo.srcDark : logo.src;
const logoImageUrl = useBaseUrl(logoSrc);

Expand Down
5 changes: 4 additions & 1 deletion website/docs/theme-classic.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,9 @@ module.exports = {

### Navbar Title & Logo

You can add a logo and title to the navbar via `themeConfig.navbar`. Logo can be placed in [static folder](static-assets.md). Logo URL is set to base URL of your site by default. Although you can specify your own URL for the logo, if it is an external link, it will open in a new tab. You can also set a different logo for dark mode.
You can add a logo and title to the navbar via `themeConfig.navbar`. Logo can be placed in [static folder](static-assets.md). Logo URL is set to base URL of your site by default. Although you can specify your own URL for the logo, if it is an external link, it will open in a new tab. In addition, you can override a value for the target attribute of logo link, it can come in handy if you are hosting docs website in a subdirectory of your main website, and in which case you probably do not need a link in the logo to the main website will open in a new tab.

To improve dark mode support, you can also set a different logo for this mode.

```js {6-12}
// docusaurus.config.js
Expand All @@ -61,6 +63,7 @@ module.exports = {
src: 'img/logo.svg',
srcDark: 'img/logo_dark.svg', // default to logo.src
href: 'https://v2.docusaurus.io/', // default to siteConfig.baseUrl
target: '_self', // by default, this value is calculated based on the `href` attribute (the external link will open in a new tab, all others in the current one)
},
},
...
Expand Down

0 comments on commit c171609

Please sign in to comment.