From 967a225b2065193bef77151a616fd4a35249675a Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Fri, 29 Nov 2019 22:00:13 +0900 Subject: [PATCH 1/2] Open external links in new window --- src/Documentation/Markdown/Markdown.js | 37 ++++++++++++++++++++++++++ static/img/external-link.svg | 1 + 2 files changed, 38 insertions(+) create mode 100644 static/img/external-link.svg diff --git a/src/Documentation/Markdown/Markdown.js b/src/Documentation/Markdown/Markdown.js index 257ec8e028..5a1b2d11ed 100644 --- a/src/Documentation/Markdown/Markdown.js +++ b/src/Documentation/Markdown/Markdown.js @@ -104,6 +104,27 @@ CodeBlock.propTypes = { value: PropTypes.node.isRequired } +const Link = ({ children, ...props }) => { + const externalLink = props.href.match(/^(\/\/|http(s)?:\/\/)/) + const showIcon = + externalLink && children && typeof children[0].props.children === 'string' + + const modifiedProps = externalLink + ? { ...props, target: '_blank', rel: 'noopener nofollow' } + : props + + if (showIcon) { + return {children} + } + + return {children} +} + +Link.propTypes = { + children: PropTypes.node.isRequired, + href: PropTypes.string.isRequired +} + export default class Markdown extends React.PureComponent { constructor() { super() @@ -167,6 +188,7 @@ export default class Markdown extends React.PureComponent { escapeHtml={false} source={markdown} renderers={{ + link: Link, code: CodeBlock, heading: HeadingRenderer, virtualHtml: HtmlRenderer @@ -366,3 +388,18 @@ export const GithubLink = styled(LightButton)` background-image: url(/static/img/github_icon.svg); } ` + +const ExternalLink = styled.a` + position: relative; + padding-right: 21px; + + &:after { + position: absolute; + top: 2px; + right: 0; + width: 16px; + height: 16px; + /* Icon source https://www.iconfinder.com/icons/2561428/external_link_icon */ + content: url(/static/img/external-link.svg); + } +` diff --git a/static/img/external-link.svg b/static/img/external-link.svg new file mode 100644 index 0000000000..7ef6e983c7 --- /dev/null +++ b/static/img/external-link.svg @@ -0,0 +1 @@ + \ No newline at end of file From dd4cd8afecb1567ef438462a844a07892405333e Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Mon, 2 Dec 2019 19:58:33 +0900 Subject: [PATCH 2/2] Update expternal link icon --- src/Documentation/Markdown/Markdown.js | 14 ++++++-------- static/img/external-link.svg | 7 ++++++- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/Documentation/Markdown/Markdown.js b/src/Documentation/Markdown/Markdown.js index 5a1b2d11ed..2aefb55169 100644 --- a/src/Documentation/Markdown/Markdown.js +++ b/src/Documentation/Markdown/Markdown.js @@ -390,16 +390,14 @@ export const GithubLink = styled(LightButton)` ` const ExternalLink = styled.a` - position: relative; - padding-right: 21px; - &:after { - position: absolute; - top: 2px; + position: relative; + top: 1px; right: 0; - width: 16px; - height: 16px; - /* Icon source https://www.iconfinder.com/icons/2561428/external_link_icon */ + width: 12px; + height: 12px; + margin-left: 1px; + /* Icon source https://en.wikipedia.org/w/skins/Vector/images/external-link-ltr-icon.svg */ content: url(/static/img/external-link.svg); } ` diff --git a/static/img/external-link.svg b/static/img/external-link.svg index 7ef6e983c7..12c3cc92f1 100644 --- a/static/img/external-link.svg +++ b/static/img/external-link.svg @@ -1 +1,6 @@ - \ No newline at end of file + + + + + + \ No newline at end of file