From 670bb07d913347c9b666d8d7e3142c88212996b2 Mon Sep 17 00:00:00 2001 From: Ike Saunders Date: Tue, 14 Jan 2025 17:23:42 -0500 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20prefer=20smallFilename=20for=20?= =?UTF-8?q?data=20insights?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/DataInsightsIndexPageContent.tsx | 9 ++++++--- site/gdocs/DocumentContext.tsx | 8 +++++++- site/gdocs/OwidGdoc.tsx | 4 +++- site/gdocs/components/Image.tsx | 8 ++++++-- site/gdocs/components/LatestDataInsights.tsx | 6 ++++-- site/gdocs/pages/DataInsight.tsx | 4 ++-- 6 files changed, 28 insertions(+), 11 deletions(-) diff --git a/site/DataInsightsIndexPageContent.tsx b/site/DataInsightsIndexPageContent.tsx index 42224b6e43..5065b8682b 100644 --- a/site/DataInsightsIndexPageContent.tsx +++ b/site/DataInsightsIndexPageContent.tsx @@ -7,6 +7,7 @@ import { LinkedAuthor, uniqBy, getPaginationPageNumbers, + OwidGdocType, } from "@ourworldindata/utils" import { DataInsightBody } from "./gdocs/pages/DataInsight.js" import { dataInsightIndexToIdMap } from "./SiteConstants.js" @@ -104,7 +105,9 @@ export const DataInsightsIndexPageContent = ( } ) return ( - +
-

+

Daily Data Insights

-

+

Bite-sized insights on how the world is changing, published every weekday.

diff --git a/site/gdocs/DocumentContext.tsx b/site/gdocs/DocumentContext.tsx index 704c9572ad..2b9a891889 100644 --- a/site/gdocs/DocumentContext.tsx +++ b/site/gdocs/DocumentContext.tsx @@ -1,5 +1,11 @@ +import { OwidGdocType } from "@ourworldindata/types" import { createContext } from "react" -export const DocumentContext = createContext<{ isPreviewing: boolean }>({ +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 index 8c3162a618..8575efda36 100644 --- a/site/gdocs/OwidGdoc.tsx +++ b/site/gdocs/OwidGdoc.tsx @@ -96,7 +96,9 @@ export function OwidGdoc({ linkedChartViews: get(props, "linkedChartViews", {}), }} > - + {content} diff --git a/site/gdocs/components/Image.tsx b/site/gdocs/components/Image.tsx index 8298d18250..e4819c47b9 100644 --- a/site/gdocs/components/Image.tsx +++ b/site/gdocs/components/Image.tsx @@ -2,6 +2,7 @@ import { useCallback, useContext } from "react" import { generateSourceProps, ImageMetadata, + OwidGdocType, triggerDownloadFromBlob, } from "@ourworldindata/utils" import cx from "classnames" @@ -84,11 +85,14 @@ export default function Image(props: { "image--has-outline": hasOutline, }) - const isPreviewing = useContext(DocumentContext).isPreviewing + const { isPreviewing, documentType } = useContext(DocumentContext) + const preferSmallimage = documentType === OwidGdocType.DataInsight const isSmall = useMediaQuery(SMALL_BREAKPOINT_MEDIA_QUERY) const image = useImage(filename) const smallImage = useImage(smallFilename) - const activeImage = isSmall && smallImage ? smallImage : image + const activeImage = + // If we're in a data insight, we always want to use the small image + (isSmall || preferSmallimage) && smallImage ? smallImage : image const renderImageError = (name: string) => ( diff --git a/site/gdocs/pages/DataInsight.tsx b/site/gdocs/pages/DataInsight.tsx index 5ea013fe43..7cbd93802b 100644 --- a/site/gdocs/pages/DataInsight.tsx +++ b/site/gdocs/pages/DataInsight.tsx @@ -109,7 +109,7 @@ export const DataInsightBody = (
-
+
Daily Data Insights {props.content.title} From 9ebf8b20dbfd5e6f8ef52a97e8e11c0b7da1ee46 Mon Sep 17 00:00:00 2001 From: Ike Saunders Date: Tue, 14 Jan 2025 18:51:29 -0500 Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20data=20insight=20CSS=20updates?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/gdocs/pages/DataInsight.scss | 16 ++++++++-------- site/gdocs/pages/DataInsight.tsx | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/site/gdocs/pages/DataInsight.scss b/site/gdocs/pages/DataInsight.scss index dbe779ea18..70e5167353 100644 --- a/site/gdocs/pages/DataInsight.scss +++ b/site/gdocs/pages/DataInsight.scss @@ -41,11 +41,12 @@ .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 { @@ -53,23 +54,22 @@ 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 index 7cbd93802b..9ff8b7920c 100644 --- a/site/gdocs/pages/DataInsight.tsx +++ b/site/gdocs/pages/DataInsight.tsx @@ -54,7 +54,7 @@ const RelatedTopicsList = ({ if (!tags?.length) return null return (
-

Related topic pages:

+

Related topic pages:

    {tags.map((tag) => (
  • From fb5c5daf78c14b287b50860ab4a575808004dbae Mon Sep 17 00:00:00 2001 From: Ike Saunders Date: Wed, 15 Jan 2025 17:30:19 -0500 Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20set=20preferSmallFilename=20in?= =?UTF-8?q?=20OwidGdocPage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../types/src/gdocTypes/ArchieMlComponents.ts | 4 ++++ site/DataInsightsIndexPageContent.tsx | 4 +--- site/gdocs/DocumentContext.tsx | 8 +------ site/gdocs/OwidGdoc.tsx | 4 +--- site/gdocs/OwidGdocPage.tsx | 5 ++++ site/gdocs/components/ArticleBlock.tsx | 1 + site/gdocs/components/Image.tsx | 9 ++++---- site/gdocs/utils.ts | 23 ++++++++++++++++++- 8 files changed, 39 insertions(+), 19 deletions(-) diff --git a/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts b/packages/@ourworldindata/types/src/gdocTypes/ArchieMlComponents.ts index 06c200041d..3d1130ea3e 100644 --- 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 index 5065b8682b..40ba5b1f3d 100644 --- a/site/DataInsightsIndexPageContent.tsx +++ b/site/DataInsightsIndexPageContent.tsx @@ -105,9 +105,7 @@ export const DataInsightsIndexPageContent = ( } ) return ( - + ({ +export const DocumentContext = createContext<{ isPreviewing: boolean }>({ isPreviewing: false, - documentType: undefined, }) diff --git a/site/gdocs/OwidGdoc.tsx b/site/gdocs/OwidGdoc.tsx index 8575efda36..8c3162a618 100644 --- a/site/gdocs/OwidGdoc.tsx +++ b/site/gdocs/OwidGdoc.tsx @@ -96,9 +96,7 @@ export function OwidGdoc({ linkedChartViews: get(props, "linkedChartViews", {}), }} > - + {content} diff --git a/site/gdocs/OwidGdocPage.tsx b/site/gdocs/OwidGdocPage.tsx index ed80dd3699..8ee697f6e5 100644 --- 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 ( {block.caption ? (
    ( { 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 +} From 201535c0cec209c7ad97499e4da6e2053446fc38 Mon Sep 17 00:00:00 2001 From: Ike Saunders Date: Thu, 16 Jan 2025 09:29:38 -0500 Subject: [PATCH 4/5] =?UTF-8?q?=E2=9C=85=20fix=20lint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/DataInsightsIndexPageContent.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/site/DataInsightsIndexPageContent.tsx b/site/DataInsightsIndexPageContent.tsx index 40ba5b1f3d..feed9ebdd0 100644 --- a/site/DataInsightsIndexPageContent.tsx +++ b/site/DataInsightsIndexPageContent.tsx @@ -7,7 +7,6 @@ import { LinkedAuthor, uniqBy, getPaginationPageNumbers, - OwidGdocType, } from "@ourworldindata/utils" import { DataInsightBody } from "./gdocs/pages/DataInsight.js" import { dataInsightIndexToIdMap } from "./SiteConstants.js" From 203beaa3444ef751cb9df8dda114bedbca2f5ae6 Mon Sep 17 00:00:00 2001 From: Ike Saunders Date: Thu, 16 Jan 2025 10:20:29 -0500 Subject: [PATCH 5/5] =?UTF-8?q?=E2=9C=A8=20hide=20DI=20breadcrumbs=20on=20?= =?UTF-8?q?mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/gdocs/pages/DataInsight.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/gdocs/pages/DataInsight.scss b/site/gdocs/pages/DataInsight.scss index 70e5167353..df28885623 100644 --- 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; } }