✨ set preferSmallFilename in OwidGdocPage

owid · Jan 15, 2025 · 09c6bcf · 09c6bcf
1 parent c75e7ce
commit 09c6bcf
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 16 deletions.
diff --git a/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts b/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts
@@ -245,6 +245,10 @@ export type EnrichedBlockImage = {
     originalWidth?: number
     size: BlockImageSize
     hasOutline: boolean
+    // Not a real ArchieML prop - we set this to true for Data Insights, as a way to migrate
+    // first generation data insights to only use their small image
+    // See https://github.com/owid/owid-grapher/issues/4416
+    preferSmallFilename?: boolean
 } & EnrichedBlockWithParseErrors
 
 export type RawBlockVideo = {

diff --git a/site/DataInsightsIndexPageContent.tsx b/site/DataInsightsIndexPageContent.tsx
@@ -105,9 +105,7 @@ export const DataInsightsIndexPageContent = (
             }
         )
     return (
-        <DocumentContext.Provider
-            value={{ isPreviewing, documentType: OwidGdocType.DataInsight }}
-        >
+        <DocumentContext.Provider value={{ isPreviewing }}>
             <AttachmentsContext.Provider
                 value={{
                     imageMetadata,

diff --git a/site/gdocs/DocumentContext.tsx b/site/gdocs/DocumentContext.tsx
@@ -1,11 +1,7 @@
-import { OwidGdocType } from "@ourworldindata/types"
 import { createContext } from "react"
 
 export const DocumentContext = createContext<{
     isPreviewing: boolean
-    // Currently used in Image.tsx to always use smallFilename when viewing a data insight
-    documentType?: OwidGdocType
 }>({
     isPreviewing: false,
-    documentType: undefined,
 })
diff --git a/site/gdocs/OwidGdoc.tsx b/site/gdocs/OwidGdoc.tsx
@@ -96,9 +96,7 @@ export function OwidGdoc({
                 linkedChartViews: get(props, "linkedChartViews", {}),
             }}
         >
-            <DocumentContext.Provider
-                value={{ isPreviewing, documentType: props.content.type }}
-            >
+            <DocumentContext.Provider value={{ isPreviewing }}>
                 <AdminLinks />
                 {content}
             </DocumentContext.Provider>

diff --git a/site/gdocs/OwidGdocPage.tsx b/site/gdocs/OwidGdocPage.tsx
@@ -21,6 +21,7 @@ import {
 import { DATA_INSIGHT_ATOM_FEED_PROPS } from "../SiteConstants.js"
 import { Html } from "../Html.js"
 import { CLOUDFLARE_IMAGES_URL } from "../../settings/clientSettings.js"
+import { addPreferSmallFilenameToDataInsightImages } from "../gdocs/utils.js"
 
 declare global {
     interface Window {
@@ -111,6 +112,10 @@ export default function OwidGdocPage({
         }
     }
 
+    if (gdoc.content.type === OwidGdocType.DataInsight) {
+        addPreferSmallFilenameToDataInsightImages(gdoc.content)
+    }
+
     return (
         <Html>
             <Head

diff --git a/site/gdocs/components/ArticleBlock.tsx b/site/gdocs/components/ArticleBlock.tsx
@@ -156,6 +156,7 @@ export default function ArticleBlock({
                     alt={block.alt}
                     hasOutline={block.hasOutline}
                     containerType={containerType as ImageParentContainer}
+                    preferSmallFilename={block.preferSmallFilename}
                 />
                 {block.caption ? (
                     <figcaption

diff --git a/site/gdocs/components/Image.tsx b/site/gdocs/components/Image.tsx
@@ -2,7 +2,6 @@ import { useCallback, useContext } from "react"
 import {
     generateSourceProps,
     ImageMetadata,
-    OwidGdocType,
     triggerDownloadFromBlob,
 } from "@ourworldindata/utils"
 import cx from "classnames"
@@ -72,27 +71,27 @@ export default function Image(props: {
     className?: string
     containerType?: ImageParentContainer
     shouldLightbox?: boolean
+    preferSmallFilename?: boolean
 }) {
     const {
         filename,
         smallFilename,
         hasOutline,
         containerType = "default",
         shouldLightbox = true,
+        preferSmallFilename,
     } = props
 
     const className = cx("image", props.className, {
         "image--has-outline": hasOutline,
     })
 
-    const { isPreviewing, documentType } = useContext(DocumentContext)
-    const preferSmallimage = documentType === OwidGdocType.DataInsight
+    const { isPreviewing } = useContext(DocumentContext)
     const isSmall = useMediaQuery(SMALL_BREAKPOINT_MEDIA_QUERY)
     const image = useImage(filename)
     const smallImage = useImage(smallFilename)
     const activeImage =
-        // If we're in a data insight, we always want to use the small image
-        (isSmall || preferSmallimage) && smallImage ? smallImage : image
+        (isSmall || preferSmallFilename) && smallImage ? smallImage : image
 
     const renderImageError = (name: string) => (
         <BlockErrorFallback

diff --git a/site/gdocs/utils.ts b/site/gdocs/utils.ts
@@ -11,8 +11,13 @@ import {
     CategoryWithEntries,
     EntryMeta,
     SubNavId,
+    OwidGdocDataInsightContent,
 } from "@ourworldindata/types"
-import { formatAuthors, Url } from "@ourworldindata/utils"
+import {
+    formatAuthors,
+    traverseEnrichedBlock,
+    Url,
+} from "@ourworldindata/utils"
 import { AttachmentsContext } from "./AttachmentsContext.js"
 import { SiteNavigationStatic, SubnavItem, subnavs } from "../SiteConstants.js"
 
@@ -201,3 +206,19 @@ export const getTopSubnavigationParentItem = (
 ): SubnavItem | undefined => {
     return subnavs[subnavId]?.[0]
 }
+
+// Always use the smallFilename for old data insights, where two were provided
+// Doing this in code was simpler than migrating all the DI gdocs themselves
+// See https://github.com/owid/owid-grapher/issues/4416
+export function addPreferSmallFilenameToDataInsightImages(
+    content: OwidGdocDataInsightContent
+): OwidGdocDataInsightContent {
+    content.body.forEach((node) =>
+        traverseEnrichedBlock(node, (block) => {
+            if (block.type === "image") {
+                block.preferSmallFilename = true
+            }
+        })
+    )
+    return content
+}