diff --git a/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx b/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx index 6850018d793..eae6ba63347 100644 --- a/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx +++ b/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx @@ -87,18 +87,30 @@ export const makeUnitConversionFactor = ({ export const makeLinks = ({ link }: { link?: string }): React.ReactNode => { if (!link) return null const linkFragments = splitSourceTextIntoFragments(link) - return ( - <> - {linkFragments.map((text, index) => ( - <> - - - - {index < linkFragments.length - 1 &&
} - - ))} - - ) + return linkFragments.map((urlOrText, index) => { + const isUrl = urlOrText.startsWith("http") && !urlOrText.match(/\s/) + return ( + + + {isUrl ? ( + + {urlOrText} + + ) : ( + + )} + + {index < linkFragments.length - 1 &&
} +
+ ) + }) } const getDateRange = (dateRange: string): string | null => { diff --git a/packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.tsx b/packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.tsx index 2f213eb7ba0..c632cf301de 100644 --- a/packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.tsx +++ b/packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.tsx @@ -5,6 +5,7 @@ import { DisplaySource, uniqBy, formatSourceDate } from "@ourworldindata/utils" import { SimpleMarkdownText } from "../SimpleMarkdownText.js" import { CodeSnippet } from "../CodeSnippet/CodeSnippet.js" import { REUSE_THIS_WORK_SECTION_ID } from "../SharedDataPageConstants.js" +import { makeLinks } from "../IndicatorKeyData/IndicatorKeyData.js" export interface IndicatorSourcesProps { sources: DisplaySource[] @@ -128,10 +129,7 @@ const SourceContent = (props: { Retrieved from
- + {makeLinks({ link: source.retrievedFrom })}
)}