Fix external link badge display for tools hosted under the same domain

app/scripts/components/common/card/index.tsx

@@ -2,14 +2,14 @@
 import styled, { css } from 'styled-components';
 import { format } from 'date-fns';
 import { CollecticonExpandTopRight } from '@devseed-ui/collecticons';
-const SmartLink = lazy(() => import('../smart-link'));
 import {
  glsp,
  media,
  multiply,
  themeVal,
  listReset,
 } from '@devseed-ui/theme-provider';
+const SmartLink = lazy(() => import('../smart-link'));
 
 import { CardBody, CardBlank, CardHeader, CardHeadline, CardTitle, CardOverline } from './styles';
 import HorizontalInfoCard, { HorizontalCardStyles } from './horizontal-info-card';
@@ -220,13 +220,14 @@
 }
 
 export interface LinkProperties {
  LinkElement: string | ComponentType<any> | undefined;
  pathAttributeKeyName: string;
  onLinkClick?: MouseEventHandler;
 }
 
 export interface LinkWithPathProperties extends LinkProperties {
  linkTo: string;
+ isLinkExternal?: boolean;
 }
 
 export interface CardComponentBaseProps {
@@ -250,6 +251,7 @@
 export interface CardComponentPropsDeprecated extends CardComponentBaseProps {
  linkTo: string;
  onLinkClick?: MouseEventHandler;
+ isLinkExternal?: boolean;
 }
 export interface CardComponentProps extends CardComponentBaseProps {
  linkProperties: LinkWithPathProperties;
@@ -287,16 +289,17 @@
  const { linkProperties: linkPropertiesProps } = props;
  linkProperties = linkPropertiesProps;
  } else {
- const { linkTo, onLinkClick, } = props;
+ const { linkTo, onLinkClick, isLinkExternal } = props;
  linkProperties = {
  linkTo,
  onLinkClick,
  pathAttributeKeyName: 'to',
- LinkElement: SmartLink
+ LinkElement: SmartLink,
+ isLinkExternal
  };
  }
 
- const isExternalLink = /^https?:\/\//.test(linkProperties.linkTo);
+ const isExternalLink = linkProperties.isLinkExternal ?? /^https?:\/\//.test(linkProperties.linkTo);
 
  return (
  <ElementInteractive

app/scripts/components/common/featured-slider-section.tsx

@@ -110,7 +110,8 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) {
  linkProperties={{
  linkTo: `${d.asLink?.url ?? getItemPath(d)}`,
  pathAttributeKeyName: 'to',
- LinkElement: SmartLink
+ LinkElement: SmartLink,
+ isLinkExternal: d.isLinkExternal
  }}
  title={d.name}
  overline={

app/scripts/components/common/related-content.tsx

@@ -52,6 +52,7 @@ interface FormatBlock {
  date: string;
  link: string;
  asLink?: LinkContentData;
+ isLinkExternal?: boolean;
  parentLink: string;
  media: Media;
  parent: RelatedContentData['type'];
@@ -151,7 +152,8 @@ export default function RelatedContent(props: RelatedContentProps) {
  linkProperties={{
  linkTo: `${t.asLink?.url ?? t.link}`,
  LinkElement: SmartLink,
- pathAttributeKeyName: 'to'
+ pathAttributeKeyName: 'to',
+ isLinkExternal: t.isLinkExternal
  }}
  title={t.name}
  date={

app/scripts/components/common/smart-link.tsx

@@ -5,6 +5,7 @@ import { getLinkProps } from '$utils/url';
 
 interface SmartLinkProps {
  to: string;
+ isLinkExternal?: boolean;
  onLinkClick?: ()=> void;
  children?: ReactNode;
 }
@@ -13,9 +14,9 @@ interface SmartLinkProps {
  * Switches between a `a` and a `Link` depending on the url.
  */
 export default function SmartLink(props: SmartLinkProps) {
- const { to, onLinkClick, children, ...rest } = props;
- const isExternalLink = /^https?:\/\//.test(to);
- const linkProps = getLinkProps(to, undefined, onLinkClick);
+ const { to, isLinkExternal, onLinkClick, children, ...rest } = props;
+ const isExternalLink = isLinkExternal ?? /^https?:\/\//.test(to);
+ const linkProps = getLinkProps(to, isLinkExternal, undefined, onLinkClick);
 
  return isExternalLink ? (
  <a {...linkProps} {...rest}> {children} </a>

app/scripts/components/home/featured-stories.tsx

@@ -82,7 +82,8 @@ function FeaturedStories() {
  linkProperties={{
  linkTo: `${d.asLink?.url ?? getStoryPath(d)}`,
  LinkElement: SmartLink,
- pathAttributeKeyName: 'to'
+ pathAttributeKeyName: 'to',
+ isLinkExternal: d.isLinkExternal
  }}
  title={d.name}
  tagLabels={[getString('stories').one]}

app/scripts/components/sandbox/cards/index.js

@@ -13,6 +13,7 @@ function SandboxCards() {
  <Card
  linkLabel='View more'
  linkTo='/'
+ isLinkExternal={false}
  title='Cities Experiencing Clearer Air During Lockdowns'
  description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius erat in vulputate.'
  date={new Date('2021-10-26')}
@@ -28,6 +29,7 @@ function SandboxCards() {
  cardType='cover'
  linkLabel='View more'
  linkTo='/'
+ isLinkExternal={false}
  title='Nitrogen Dioxide (NO₂)'
  description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius erat in vulputate.'
  tagLabels={['Dataset']}

app/scripts/components/stories/hub/hub-content.tsx

@@ -168,7 +168,8 @@ export default function HubContent(props:HubContentProps) {
  linkProperties={{
  linkTo: `${d.asLink?.url ?? d.path}`,
  LinkElement,
- pathAttributeKeyName
+ pathAttributeKeyName,
+ isLinkExternal: d.isLinkExternal
  }}
  title={
  <TextHighlight

app/scripts/types/veda.ts

@@ -206,6 +206,7 @@ export interface StoryData {
  taxonomy: Taxonomy[];
  related?: RelatedContentData[];
  asLink?: LinkContentData;
+ isLinkExternal?: boolean;
  isHidden?: boolean;
 }
 

app/scripts/utils/url.ts

@@ -1,24 +1,30 @@
 import React, { MouseEventHandler } from 'react';
 import { LinkProps } from 'react-router-dom';
 
+export function isExternalLink(link: string): boolean {
+ return /^https?:\/\//.test(link) && !link.includes(window.location.hostname);
+}
 
 export const getLinkProps = (
- linkTo: string,
- as?: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>,
- onClick?: (() => void) | MouseEventHandler
- ) => {
- // Open the link in a new tab when link is external
- const isExternalLink = /^https?:\/\//.test(linkTo);
- return isExternalLink
+ linkTo: string,
+ isLinkExternal?: boolean,
+ as?: React.ForwardRefExoticComponent<
+ LinkProps & React.RefAttributes<HTMLAnchorElement>
+ >,
+ onClick?: (() => void) | MouseEventHandler
+) => {
+ // Open the link in a new tab when link is external
+ const isExternalLink = isLinkExternal ?? /^https?:\/\//.test(linkTo);
+ return isExternalLink
  ? {
  href: linkTo,
  to: linkTo,
- ...{target: '_blank', rel: 'noopener noreferrer'},
- ...(onClick ? {onClick: onClick} : {})
+ ...{ target: '_blank', rel: 'noopener noreferrer' },
+ ...(onClick ? { onClick: onClick } : {})
  }
  : {
- ...(as ? {as: as} : {}),
+ ...(as ? { as: as } : {}),
  to: linkTo,
- ...(onClick ? {onClick: onClick} : {})
+ ...(onClick ? { onClick: onClick } : {})
  };
- };
+};

mock/stories/external-link-example.stories.mdx

@@ -1,7 +1,7 @@
 ---
 featured: true
 id: 'external-link-test'
-name: External Link Test 
+name: External Link Test
 description: Story to test external link
 media:
  src: ::file ./img-placeholder-6.jpg
@@ -24,4 +24,5 @@ related:
  id: air-quality-and-covid-19
 asLink:
  url: 'https://developmentseed.org'
+isLinkExternal: true
 ---

parcel-resolver-veda/index.d.ts

@@ -207,6 +207,7 @@ declare module 'veda' {
  taxonomy: Taxonomy[];
  related?: RelatedContentData[];
  asLink?: LinkContentData;
+ isLinkExternal?: boolean;
  isHidden?: boolean;
  }
 
@@ -339,7 +340,9 @@ declare module 'veda' {
  export const getBoolean: (variable: string) => boolean;
 
  export const getBannerFromVedaConfig: () => BannerData | undefined;
- export const getCookieConsentFromVedaConfig: () => CookieConsentData| undefined;
+ export const getCookieConsentFromVedaConfig: () =>
+ | CookieConsentData
+ | undefined;
 
  export const getNavItemsFromVedaConfig: () =>
  | {