gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add rel=nofollow for resource links

Browse Source
This commit is contained in:
Kamran Ahmed
2021-12-10 14:39:47 +01:00
parent 77a9c31c6b
commit 220efadfaa
3 changed files with 76 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/md-renderer/mdx-components/a.tsx
View File

@ -3,8 +3,8 @@ import styled from 'styled-components';
type EnrichedLinkProps = {
href: string;
children: React.ReactNode
}
children: React.ReactNode;
};
const Link = styled.a`
font-weight: 600;
@ -13,14 +13,25 @@ const Link = styled.a`
const EnrichedLink = (props: EnrichedLinkProps) => {
// Is external URL or is a media URL
const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(props.href);
const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(
props.href
);
const linkProps: Record<string, string> = {
target: '_self',
...(isExternalUrl
? {
rel: 'nofollow',
target: '_blank',
}
: {}),
};
return (
<Link href={props.href} target={isExternalUrl ? '_blank' : '_self'}>
<Link href={props.href} {...linkProps}>
{props.children}
</Link>
);
};
export default EnrichedLink;

38
components/md-renderer/mdx-components/badge-link.tsx
View File

@ -6,16 +6,46 @@ type BadgeLinkType = {
badgeText: string;
href: string;
colorScheme?: string;
children: React.ReactNode
children: React.ReactNode;
};
export function BadgeLink(props: BadgeLinkType) {
const { target = '_blank', colorScheme='purple', badgeText, href, children } = props;
const {
target = '_blank',
colorScheme = 'purple',
badgeText,
href,
children,
} = props;
// Is external URL or is a media URL
const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(
props.href
);
const linkProps: Record<string, string> = {
...(isExternalUrl
? {
rel: 'nofollow',
}
: {}),
};
return (
<Text mb={'0px'}>
<Link fontSize='14px' color='blue.700' fontWeight={500} textDecoration='none' href={href} target={target} _hover={{ textDecoration: 'none', color: 'purple.400' }}>
<Badge fontSize='11px' mr='7px' colorScheme={colorScheme}>{badgeText}</Badge>
<Link
fontSize="14px"
color="blue.700"
fontWeight={500}
textDecoration="none"
href={href}
target={target}
_hover={{ textDecoration: 'none', color: 'purple.400' }}
{...linkProps}
>
<Badge fontSize="11px" mr="7px" colorScheme={colorScheme}>
{badgeText}
</Badge>
{children}
</Link>
</Text>