Fix broken links in sources modal (#3050)

* 🐛 (sources) fix broken link * 🐛 (sources) fix broken link in IndicatorSources
owid · Dec 29, 2023 · 7b4ef74 · 7b4ef74
1 parent 135d69e
commit 7b4ef74
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git 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 => {

diff --git 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>
                         )}