From 3da67bb9fe3078352c4f89e1757d78b745132cec Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Fri, 29 Dec 2023 10:25:59 +0000
Subject: [PATCH 1/2] :bug: (sources) fix broken link

---
 .../src/IndicatorKeyData/IndicatorKeyData.tsx | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

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) => (
-                <>
-                    <span>
-                        <SimpleMarkdownText text={text} useParagraphs={false} />
-                    </span>
-                    {index < linkFragments.length - 1 && <br />}
-                </>
-            ))}
-        </>
-    )
+    return linkFragments.map((urlOrText, index) => {
+        const isUrl = urlOrText.startsWith("http") && !urlOrText.match(/\s/)
+        return (
+            <React.Fragment key={urlOrText}>
+                <span>
+                    {isUrl ? (
+                        <a
+                            href={urlOrText}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            {urlOrText}
+                        </a>
+                    ) : (
+                        <SimpleMarkdownText
+                            text={urlOrText}
+                            useParagraphs={false}
+                        />
+                    )}
+                </span>
+                {index < linkFragments.length - 1 && <br />}
+            </React.Fragment>
+        )
+    })
 }
 
 const getDateRange = (dateRange: string): string | null => {

From 1afbb75502cdb0ba4b7081e996b5866324a5efc7 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Fri, 29 Dec 2023 10:50:02 +0000
Subject: [PATCH 2/2] :bug: (sources) fix broken link in IndicatorSources

---
 .../components/src/IndicatorSources/IndicatorSources.tsx    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

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
                                 </div>
                                 <div className="source-key-data__content">
-                                    <SimpleMarkdownText
-                                        text={source.retrievedFrom}
-                                        useParagraphs={false}
-                                    />
+                                    {makeLinks({ link: source.retrievedFrom })}
                                 </div>
                             </div>
                         )}