enhance(source-modal): render source link as markdown

owid · Nov 7, 2023 · 2af26e7 · 2af26e7
1 parent 70c4f3c
commit 2af26e7
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 23 deletions.
diff --git a/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx b/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx
@@ -4,6 +4,7 @@ import {
     dayjs,
     OwidProcessingLevel,
     getPhraseForProcessingLevel,
+    splitSourceTextIntoFragments,
 } from "@ourworldindata/utils"
 import { DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID } from "../SharedDataPageConstants.js"
 import { SimpleMarkdownText } from "../SimpleMarkdownText.js"
@@ -15,7 +16,7 @@ interface IndicatorKeyDataProps {
     nextUpdate?: string
     unit?: string
     owidProcessingLevel?: OwidProcessingLevel
-    links?: string[]
+    link?: string
     unitConversionFactor?: number
     isEmbeddedInADataPage?: boolean // true by default
 
@@ -38,7 +39,9 @@ export const IndicatorKeyData = (props: IndicatorKeyDataProps) => {
 
     const showUnitConversionFactor =
         props.unitConversionFactor && props.unitConversionFactor !== 1
-    const showLinks = props.links && props.links.length > 0
+
+    const linkFragments = splitSourceTextIntoFragments(props.link)
+    const link = linkFragments.join("\n")
 
     const keyDataCount = count(
         props.attribution,
@@ -47,11 +50,11 @@ export const IndicatorKeyData = (props: IndicatorKeyDataProps) => {
         props.dateRange,
         props.unit,
         showUnitConversionFactor,
-        showLinks
+        link
     )
     const hasSingleRow =
         keyDataCount === 1 ||
-        (keyDataCount === 2 && !props.attribution && !showLinks)
+        (keyDataCount === 2 && !props.attribution && !link)
 
     return (
         <div
@@ -175,24 +178,13 @@ export const IndicatorKeyData = (props: IndicatorKeyDataProps) => {
                     </div>
                 </div>
             )}
-            {props.links && showLinks && (
+            {link && (
                 <div className="indicator-key-data-item indicator-key-data-item--span">
                     <div className="indicator-key-data-item__title">
-                        {props.links.length > 1 ? "Links" : "Link"}
+                        {linkFragments.length > 1 ? "Links" : "Link"}
                     </div>
                     <div className="indicator-key-data-item__content">
-                        {props.links.map((link, index, links) => (
-                            <>
-                                <a
-                                    href={link}
-                                    target="_blank"
-                                    rel="nopener noreferrer"
-                                >
-                                    {link}
-                                </a>
-                                {index < links.length - 1 && <br />}
-                            </>
-                        ))}
+                        <SimpleMarkdownText text={link} />
                     </div>
                 </div>
             )}

diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
@@ -265,10 +265,6 @@ export class Source extends React.Component<{
         )
     }
 
-    @computed private get sourceLinks(): string[] {
-        return splitSourceTextIntoFragments(this.def.source?.link)
-    }
-
     @computed private get sourcesForDisplay(): DisplaySource[] {
         return prepareSourcesForDisplay(this.def)
     }
@@ -294,7 +290,7 @@ export class Source extends React.Component<{
                     lastUpdated={this.lastUpdated}
                     nextUpdate={this.nextUpdate}
                     unit={this.unit}
-                    links={this.sourceLinks}
+                    link={this.def.source?.link}
                     unitConversionFactor={
                         this.props.column.unitConversionFactor
                     }

diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx
@@ -273,6 +273,7 @@ export const DataPageV2Content = ({
                                         unitConversionFactor={
                                             datapageData.unitConversionFactor
                                         }
+                                        link={datapageData.source?.link}
                                     />
                                 </div>
                                 <IndicatorDescriptions