diff --git a/src/components/PageLayout/RelatedContent.js b/src/components/PageLayout/RelatedContent.js index 5b680f9e5..820981ad5 100644 --- a/src/components/PageLayout/RelatedContent.js +++ b/src/components/PageLayout/RelatedContent.js @@ -1,12 +1,18 @@ import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/core'; -import { graphql, useStaticQuery } from 'gatsby'; +import { graphql, useStaticQuery, Link } from 'gatsby'; import { Button, ExternalLink, Icon } from '@newrelic/gatsby-theme-newrelic'; import usePageContext from '../../hooks/usePageContext'; import styled from '@emotion/styled'; import Tag from '../Tag'; +const SITE_TAGS = { + developer: 'https://developer.newrelic.com', + 'open source': 'https://opensource.newrelic.com', + docs: 'https://docs.newrelic.com', +}; + const Section = styled.section` &:not(:last-child) { margin-bottom: 1rem; @@ -93,25 +99,38 @@ const RelatedContent = ({ page }) => { padding: 0; `} > - {resources.map((resource) => ( -
  • - { + const tag = Object.keys(SITE_TAGS).find((tag) => + resource.url.startsWith(SITE_TAGS[tag]) + ); + + const url = new URL(resource.url); + const LinkElement = tag === 'developer' ? Link : ExternalLink; + const props = + tag === 'developer' + ? { to: url.pathname } + : { href: resource.url }; + + return ( +
  • - {resource.title} - - developer -
  • - ))} + + {resource.title} + + {tag} + + ); + })}