Merge pull request #4452 from owid/single-image-data-insights

✨ prefer smallFilename for data insights
owid · Jan 16, 2025 · 5e8a4c1 · 5e8a4c1
2 parents 5d3fb41 + 203beaa
commit 5e8a4c1
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 19 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
@@ -117,10 +117,10 @@ export const DataInsightsIndexPageContent = (
                 }}
             >
                 <header className="data-insights-index-page__header grid grid-cols-12-full-width span-cols-14">
-                    <h2 className="span-cols-8 col-start-4 col-md-start-3 span-md-cols-10 col-sm-start-2 span-sm-cols-12 display-2-semibold ">
+                    <h2 className="span-cols-6 col-start-5 col-md-start-4 span-md-cols-10 col-sm-start-2 span-sm-cols-12 display-2-semibold ">
                         Daily Data Insights
                     </h2>
-                    <p className="span-cols-8 col-start-4 col-md-start-3 span-md-cols-10 col-sm-start-2 span-sm-cols-12 body-1-regular">
+                    <p className="span-cols-6 col-start-5 col-md-start-4 span-md-cols-8 col-sm-start-2 span-sm-cols-12 body-1-regular">
                         Bite-sized insights on how the world is changing,
                         published every weekday.
                     </p>

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
@@ -71,24 +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 = useContext(DocumentContext).isPreviewing
+    const { isPreviewing } = useContext(DocumentContext)
     const isSmall = useMediaQuery(SMALL_BREAKPOINT_MEDIA_QUERY)
     const image = useImage(filename)
     const smallImage = useImage(smallFilename)
-    const activeImage = isSmall && smallImage ? smallImage : image
+    const activeImage =
+        (isSmall || preferSmallFilename) && smallImage ? smallImage : image
 
     const renderImageError = (name: string) => (
         <BlockErrorFallback

diff --git a/site/gdocs/components/LatestDataInsights.tsx b/site/gdocs/components/LatestDataInsights.tsx
@@ -161,8 +161,10 @@ const DataInsightCard = memo(function DataInsightCard({
             {firstImageBlock && (
                 <Image
                     className="latest-data-insights__card-left"
-                    filename={firstImageBlock.filename}
-                    smallFilename={firstImageBlock.smallFilename}
+                    filename={
+                        firstImageBlock.smallFilename ||
+                        firstImageBlock.filename
+                    }
                     containerType="span-5"
                     shouldLightbox={false}
                 />

diff --git a/site/gdocs/pages/DataInsight.scss b/site/gdocs/pages/DataInsight.scss
@@ -30,7 +30,7 @@
     }
 
     @include sm-only {
-        margin: 16px 0 20px 0;
+        display: none;
     }
 }
 
@@ -41,35 +41,35 @@
 .data-insight-body {
     background-color: #fff;
     padding: 24px;
-    margin-bottom: 48px;
+    margin-bottom: 30px;
 
     h1 {
         margin-top: 0;
-        margin-bottom: 12px;
+        margin-bottom: 8px;
+        font-size: 1.875rem;
     }
 
     .article-block__image {
         outline: 1px solid $blue-10;
         margin-top: 24px;
     }
 
+    .article-block__text {
+        font-size: 1rem;
+    }
+
     @include md-down {
         padding: 16px;
         margin-bottom: 24px;
 
         h1 {
-            font-size: 1.625rem;
-            margin-bottom: 12px;
+            font-size: 1.375rem;
         }
 
         .article-block__image {
             margin-top: 16px;
             margin-bottom: 24px;
         }
-
-        .article-block__text {
-            font-size: 1rem;
-        }
     }
 }
 

diff --git a/site/gdocs/pages/DataInsight.tsx b/site/gdocs/pages/DataInsight.tsx
@@ -54,7 +54,7 @@ const RelatedTopicsList = ({
     if (!tags?.length) return null
     return (
         <div className={cx(className, "data-insights-related-topics")}>
-            <p className="body-2-semibold">Related topic pages:</p>
+            <p className="body-3-regular">Related topic pages:</p>
             <ul>
                 {tags.map((tag) => (
                     <li key={tag.name}>
@@ -109,7 +109,7 @@ export const DataInsightBody = (
             <div
                 id={props.anchor}
                 className={cx(
-                    "span-cols-8 col-start-4 span-md-cols-10 col-md-start-3 span-sm-cols-14 col-sm-start-1 data-insight-body",
+                    "span-cols-6 col-start-5 span-md-cols-8 col-md-start-4 span-sm-cols-14 col-sm-start-1 data-insight-body",
                     {
                         "data-insight-body--has-tags": !!props.tags?.length,
                     }
@@ -163,7 +163,7 @@ export const DataInsightPage = (
 
     return (
         <div className="grid grid-cols-12-full-width data-insight-page">
-            <div className="span-cols-8 col-start-4 span-md-cols-10 col-md-start-3 col-sm-start-2 span-sm-cols-12 data-insight-breadcrumbs">
+            <div className="span-cols-6 col-start-5 span-md-cols-8 col-md-start-4 col-sm-start-2 span-sm-cols-12 data-insight-breadcrumbs">
                 <a href="/data-insights">Daily Data Insights</a>
                 <FontAwesomeIcon icon={faChevronRight} />
                 <span>{props.content.title}</span>

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 filenames were always 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
+}