mirror of
https://github.com/facebook/docusaurus.git
synced 2025-08-06 10:20:09 +02:00
refactor(v2): use Link component for external links (#4242)
This commit is contained in:
parent
936d6620cf
commit
2df5a3bd5d
5 changed files with 14 additions and 39 deletions
|
@ -70,21 +70,15 @@ function BlogPostItem(props: Props): JSX.Element {
|
||||||
</div>
|
</div>
|
||||||
<div className="avatar margin-vert--md">
|
<div className="avatar margin-vert--md">
|
||||||
{authorImageURL && (
|
{authorImageURL && (
|
||||||
<a
|
<Link className="avatar__photo-link avatar__photo" href={authorURL}>
|
||||||
className="avatar__photo-link avatar__photo"
|
|
||||||
href={authorURL}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer noopener">
|
|
||||||
<img src={authorImageURL} alt={author} />
|
<img src={authorImageURL} alt={author} />
|
||||||
</a>
|
</Link>
|
||||||
)}
|
)}
|
||||||
<div className="avatar__intro">
|
<div className="avatar__intro">
|
||||||
{author && (
|
{author && (
|
||||||
<>
|
<>
|
||||||
<h4 className="avatar__name">
|
<h4 className="avatar__name">
|
||||||
<a href={authorURL} target="_blank" rel="noreferrer noopener">
|
<Link href={authorURL}>{author}</Link>
|
||||||
{author}
|
|
||||||
</a>
|
|
||||||
</h4>
|
</h4>
|
||||||
<small className="avatar__subtitle">{authorTitle}</small>
|
<small className="avatar__subtitle">{authorTitle}</small>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -159,15 +159,10 @@ function DocSidebarItemLink({
|
||||||
'menu__link--active': isActive,
|
'menu__link--active': isActive,
|
||||||
})}
|
})}
|
||||||
to={href}
|
to={href}
|
||||||
{...(isInternalUrl(href)
|
{...(isInternalUrl(href) && {
|
||||||
? {
|
|
||||||
isNavLink: true,
|
isNavLink: true,
|
||||||
exact: true,
|
exact: true,
|
||||||
onClick: onItemClick,
|
onClick: onItemClick,
|
||||||
}
|
|
||||||
: {
|
|
||||||
target: '_blank',
|
|
||||||
rel: 'noreferrer noopener',
|
|
||||||
})}
|
})}
|
||||||
{...props}>
|
{...props}>
|
||||||
{label}
|
{label}
|
||||||
|
|
|
@ -23,8 +23,6 @@ function FooterLink({to, href, label, prependBaseUrlToHref, ...props}: any) {
|
||||||
className="footer__link-item"
|
className="footer__link-item"
|
||||||
{...(href
|
{...(href
|
||||||
? {
|
? {
|
||||||
target: '_blank',
|
|
||||||
rel: 'noopener noreferrer',
|
|
||||||
href: prependBaseUrlToHref ? normalizedHref : href,
|
href: prependBaseUrlToHref ? normalizedHref : href,
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
|
@ -98,13 +96,9 @@ function Footer(): JSX.Element | null {
|
||||||
{logo && (logo.src || logo.srcDark) && (
|
{logo && (logo.src || logo.srcDark) && (
|
||||||
<div className="margin-bottom--sm">
|
<div className="margin-bottom--sm">
|
||||||
{logo.href ? (
|
{logo.href ? (
|
||||||
<a
|
<Link href={logo.href} className={styles.footerLogoLink}>
|
||||||
href={logo.href}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className={styles.footerLogoLink}>
|
|
||||||
<FooterLogo alt={logo.alt} sources={sources} />
|
<FooterLogo alt={logo.alt} sources={sources} />
|
||||||
</a>
|
</Link>
|
||||||
) : (
|
) : (
|
||||||
<FooterLogo alt={logo.alt} sources={sources} />
|
<FooterLogo alt={logo.alt} sources={sources} />
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -13,7 +13,6 @@ import ThemedImage from '@theme/ThemedImage';
|
||||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||||
import isInternalUrl from '@docusaurus/isInternalUrl';
|
|
||||||
|
|
||||||
const Logo = (props: Props): JSX.Element => {
|
const Logo = (props: Props): JSX.Element => {
|
||||||
const {isClient} = useDocusaurusContext();
|
const {isClient} = useDocusaurusContext();
|
||||||
|
@ -23,21 +22,16 @@ const Logo = (props: Props): JSX.Element => {
|
||||||
|
|
||||||
const {imageClassName, titleClassName, ...propsRest} = props;
|
const {imageClassName, titleClassName, ...propsRest} = props;
|
||||||
const logoLink = useBaseUrl(logo.href || '/');
|
const logoLink = useBaseUrl(logo.href || '/');
|
||||||
const logoLinkProps = logo.target
|
|
||||||
? {target: logo.target}
|
|
||||||
: !isInternalUrl(logoLink)
|
|
||||||
? {
|
|
||||||
rel: 'noopener noreferrer',
|
|
||||||
target: '_blank',
|
|
||||||
}
|
|
||||||
: {};
|
|
||||||
const sources = {
|
const sources = {
|
||||||
light: useBaseUrl(logo.src),
|
light: useBaseUrl(logo.src),
|
||||||
dark: useBaseUrl(logo.srcDark || logo.src),
|
dark: useBaseUrl(logo.srcDark || logo.src),
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link to={logoLink} {...propsRest} {...logoLinkProps}>
|
<Link
|
||||||
|
to={logoLink}
|
||||||
|
{...propsRest}
|
||||||
|
{...(logo.target && {target: logo.target})}>
|
||||||
{logo.src && (
|
{logo.src && (
|
||||||
<ThemedImage
|
<ThemedImage
|
||||||
key={isClient}
|
key={isClient}
|
||||||
|
|
|
@ -37,8 +37,6 @@ function NavLink({
|
||||||
<Link
|
<Link
|
||||||
{...(href
|
{...(href
|
||||||
? {
|
? {
|
||||||
target: '_blank',
|
|
||||||
rel: 'noopener noreferrer',
|
|
||||||
href: prependBaseUrlToHref ? normalizedHref : href,
|
href: prependBaseUrlToHref ? normalizedHref : href,
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue