🎉 Incorporate GRAPHER_PREVIEW_URL into prominent links

owid · Nov 3, 2023 · ffa7baa · ffa7baa
1 parent a78dab6
commit ffa7baa
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/db/model/Gdoc/Gdoc.ts b/db/model/Gdoc/Gdoc.ts
@@ -43,6 +43,7 @@ import {
     GDOCS_CLIENT_ID,
     GDOCS_DETAILS_ON_DEMAND_ID,
     GDOCS_PRIVATE_KEY,
+    GRAPHER_PREVIEW_URL,
 } from "../../../settings/serverSettings.js"
 import { google, Auth, docs_v1 } from "googleapis"
 import { gdocToArchie } from "./gdocToArchie.js"
@@ -53,7 +54,6 @@ import { Chart } from "../Chart.js"
 import {
     ADMIN_BASE_URL,
     BAKED_BASE_URL,
-    BAKED_GRAPHER_EXPORTS_BASE_URL,
 } from "../../../settings/clientSettings.js"
 import { EXPLORERS_ROUTE_FOLDER } from "../../../explorer/ExplorerConstants.js"
 import { parseDetails, parseFaqs } from "./rawToEnriched.js"
@@ -346,7 +346,7 @@ export class Gdoc extends BaseEntity implements OwidGdocInterface {
                         originalSlug,
                         title: resolvedTitle,
                         resolvedUrl: `${BAKED_GRAPHER_URL}/${resolvedSlug}`,
-                        thumbnail: `${BAKED_GRAPHER_EXPORTS_BASE_URL}/${resolvedSlug}.svg`,
+                        thumbnail: `${GRAPHER_PREVIEW_URL}/${resolvedSlug}.png`,
                     }
                     return linkedChart
                 }

diff --git a/site/gdocs/ProminentLink.tsx b/site/gdocs/ProminentLink.tsx
@@ -6,6 +6,7 @@ import Image from "./Image.js"
 import { useLinkedChart, useLinkedDocument } from "./utils.js"
 import { DocumentContext } from "./OwidGdoc.js"
 import { BlockErrorFallback } from "./BlockErrorBoundary.js"
+import { GRAPHER_PREVIEW_URL } from "../../settings/clientSettings.js"
 
 export const ProminentLink = (props: {
     url: string
@@ -15,10 +16,12 @@ export const ProminentLink = (props: {
     thumbnail?: string
 }) => {
     const linkType = getLinkType(props.url)
+    console.log("linkType", linkType)
     const { linkedDocument, errorMessage: linkedDocumentErrorMessage } =
         useLinkedDocument(props.url)
     const { linkedChart, errorMessage: linkedChartErrorMessage } =
         useLinkedChart(props.url)
+    console.log("linkedChart", linkedChart)
     const errorMessage = linkedDocumentErrorMessage || linkedChartErrorMessage
     const { isPreviewing } = useContext(DocumentContext)
 
@@ -61,6 +64,17 @@ export const ProminentLink = (props: {
                 : ""
     }
 
+    const Thumbnail = ({ thumbnail }: { thumbnail: string }) => {
+        if (
+            thumbnail.startsWith(GRAPHER_PREVIEW_URL) ||
+            thumbnail.endsWith("default-thumbnail.jpg")
+        ) {
+            return <img src={thumbnail} />
+        } else {
+            return <Image filename={thumbnail} containerType="thumbnail" />
+        }
+    }
+
     const anchorTagProps =
         linkType === "url"
             ? { target: "_blank", rel: "noopener noreferrer" }
@@ -78,7 +92,7 @@ export const ProminentLink = (props: {
         >
             {thumbnail ? (
                 <div className="prominent-link__image span-sm-cols-3 span-md-cols-2">
-                    <Image filename={thumbnail} containerType="thumbnail" />
+                    <Thumbnail thumbnail={thumbnail} />
                 </div>
             ) : null}
             <div className={textContainerClassName}>