✨ use CF function to update no-JS fallback image on grapher page HTML

baker/formatWordpressPost.tsx

@@ -3,7 +3,7 @@ import urlSlug from "url-slug"
 import React from "react"
 import ReactDOMServer from "react-dom/server.js"
 import { HTTPS_ONLY } from "../settings/serverSettings.js"
-import { FormattingOptions } from "@ourworldindata/types"
+import { FormattingOptions, GRAPHER_PREVIEW_CLASS } from "@ourworldindata/types"
 import { FormattedPost, FullPost, TocHeading, Url } from "@ourworldindata/utils"
 import { parseKeyValueArgs } from "../serverUtils/wordpressUtils.js"
 import { Footnote } from "../site/Footnote.js"
@@ -19,7 +19,6 @@ import {
 import { renderHelp } from "../site/blocks/Help.js"
 import { renderCodeSnippets } from "@ourworldindata/components"
 import { formatUrls, getBodyHtml } from "../site/formatting.js"
-import { GRAPHER_PREVIEW_CLASS } from "../site/SiteConstants.js"
 import { INTERACTIVE_ICON_SVG } from "../site/InteractionNotice.js"
 import { renderProminentLinks } from "./siteRenderers.js"
 import { RELATED_CHARTS_CLASS_NAME } from "../site/blocks/RelatedCharts.js"

functions/grapher/[slug].ts

@@ -1,4 +1,8 @@
 import { Env, extensions, Etag } from "../_common/env.js"
+import {
+    GRAPHER_PREVIEW_CLASS,
+    HIDE_IF_JS_ENABLED_CLASSNAME,
+} from "@ourworldindata/types"
 import {
     fetchCsvForGrapher,
     fetchMetadataForGrapher,
@@ -142,6 +146,9 @@ async function handleHtmlPageRequest(
     // In the case of the redirect, the browser will then request the new URL which will again be handled by this worker.
     if (grapherPageResp.status !== 200) return grapherPageResp
 
+    const thumbnailUrl = `/grapher/${slug}.png?${
+        url.search ? "&" + url.search.slice(1) : ""
+    }`
     const openGraphThumbnailUrl = `/grapher/${slug}.png?imType=og${
         url.search ? "&" + url.search.slice(1) : ""
     }`
@@ -153,8 +160,20 @@ async function handleHtmlPageRequest(
     // If we fail to capture the origin, we end up with relative image URLs, which should also be okay.
     let origin = ""
 
-    // Rewrite the two meta tags that are used for a social media preview image.
+    // Rewrite the fallback image (for no-JS cases) and meta tags that are used for a social media preview image.
     const rewriter = new HTMLRewriter()
+        // Grapher pages
+        .on(`div#fallback.${HIDE_IF_JS_ENABLED_CLASSNAME} img`, {
+            element: (element) => {
+                element.setAttribute("src", thumbnailUrl)
+            },
+        })
+        // Data pages
+        .on(`figure.${GRAPHER_PREVIEW_CLASS} img`, {
+            element: (element) => {
+                element.setAttribute("src", thumbnailUrl)
+            },
+        })
         .on('meta[property="og:url"]', {
             // Replace canonical URL, otherwise the preview image will not include the search parameters.
             element: (element) => {

packages/@ourworldindata/types/src/index.ts

@@ -691,3 +691,9 @@ export type {
     View,
     ViewEnriched,
 } from "./siteTypes/MultiDimDataPage.js"
+
+export {
+    GRAPHER_PREVIEW_CLASS,
+    HIDE_IF_JS_DISABLED_CLASSNAME,
+    HIDE_IF_JS_ENABLED_CLASSNAME,
+} from "./siteTypes/SiteConstants.js"

packages/@ourworldindata/types/src/siteTypes/SiteConstants.ts

@@ -0,0 +1,7 @@
+// Used in GrapherPage.tsx
+export const HIDE_IF_JS_ENABLED_CLASSNAME = "js--hide-if-js-enabled"
+
+export const HIDE_IF_JS_DISABLED_CLASSNAME = "js--hide-if-js-disabled"
+
+// Used in GrapherWithFallback.tsx
+export const GRAPHER_PREVIEW_CLASS = "grapherPreview"

site/GrapherPage.tsx

@@ -16,6 +16,10 @@ import {
     diffGrapherConfigs,
 } from "@ourworldindata/utils"
 import { MarkdownTextWrap } from "@ourworldindata/components"
+import {
+    HIDE_IF_JS_DISABLED_CLASSNAME,
+    HIDE_IF_JS_ENABLED_CLASSNAME,
+} from "@ourworldindata/types"
 import React from "react"
 import urljoin from "url-join"
 import {
@@ -118,12 +122,12 @@ window.Grapher.renderSingleGrapherOnGrapherPage(jsonConfig)`
                 <SiteHeader baseUrl={baseUrl} />
                 <main>
                     <figure
-                        className="js--hide-if-js-disabled"
+                        className={HIDE_IF_JS_DISABLED_CLASSNAME}
                         data-grapher-src={`/grapher/${grapher.slug}`}
                     >
                         <LoadingIndicator />
                     </figure>
-                    <div className="js--hide-if-js-enabled" id="fallback">
+                    <div className={HIDE_IF_JS_ENABLED_CLASSNAME} id="fallback">
                         {grapher.slug && (
                             <GrapherImage
                                 slug={grapher.slug}

site/GrapherWithFallback.tsx

@@ -1,8 +1,8 @@
 import { Grapher } from "@ourworldindata/grapher"
+import { GRAPHER_PREVIEW_CLASS } from "@ourworldindata/types"
 import React from "react"
 import { GrapherFigureView } from "./GrapherFigureView.js"
 import cx from "classnames"
-import { GRAPHER_PREVIEW_CLASS } from "./SiteConstants.js"
 import GrapherImage from "./GrapherImage.js"
 
 export const GrapherWithFallback = ({

site/SiteConstants.ts

@@ -27,8 +27,6 @@ export const POLYFILL_URL: string = `https://cdnjs.cloudflare.com/polyfill/v3/po
 
 export const DEFAULT_LOCAL_BAKE_DIR = "localBake"
 
-export const GRAPHER_PREVIEW_CLASS = "grapherPreview"
-
 export const SMALL_BREAKPOINT_MEDIA_QUERY = "(max-width: 768px)"
 
 export const TOUCH_DEVICE_MEDIA_QUERY =

site/blocks/RelatedCharts.tsx

@@ -1,10 +1,14 @@
 import React, { useState, useRef } from "react"
-import { orderBy, RelatedChart } from "@ourworldindata/utils"
+import {
+    HIDE_IF_JS_ENABLED_CLASSNAME,
+    orderBy,
+    RelatedChart,
+} from "@ourworldindata/utils"
 import { useEmbedChart } from "../hooks.js"
 import { GalleryArrow, GalleryArrowDirection } from "./GalleryArrow.js"
 import { AllChartsListItem } from "./AllChartsListItem.js"
 import { BAKED_BASE_URL } from "../../settings/clientSettings.js"
-import { GRAPHER_PREVIEW_CLASS } from "../SiteConstants.js"
+import { GRAPHER_PREVIEW_CLASS } from "@ourworldindata/types"
 import GrapherImage from "../GrapherImage.js"
 
 export const RELATED_CHARTS_CLASS_NAME = "related-charts"
@@ -53,7 +57,7 @@ export const RelatedCharts = ({
             key={activeChartSlug}
             data-grapher-src={grapherUrl}
         >
-            <div className="js--hide-if-js-enabled">
+            <div className={HIDE_IF_JS_ENABLED_CLASSNAME}>
                 <a href={grapherUrl}>
                     <GrapherImage
                         slug={activeChartSlug}

site/collections/DynamicCollection.tsx

@@ -13,7 +13,7 @@ import {
 import { observer } from "mobx-react"
 import { WindowGraphers } from "./DynamicCollectionPage.js"
 import { Grapher } from "@ourworldindata/grapher"
-import { GRAPHER_PREVIEW_CLASS } from "../SiteConstants.js"
+import { GRAPHER_PREVIEW_CLASS } from "@ourworldindata/types"
 import InteractionNotice from "../InteractionNotice.js"
 import GrapherImage from "../GrapherImage.js"
 

site/collections/StaticCollectionPage.tsx

@@ -1,7 +1,7 @@
 import cx from "classnames"
 import React from "react"
 import { Head } from "../Head.js"
-import { GRAPHER_PREVIEW_CLASS } from "../SiteConstants.js"
+import { GRAPHER_PREVIEW_CLASS } from "@ourworldindata/types"
 import { SiteHeader } from "../SiteHeader.js"
 import { SiteFooter } from "../SiteFooter.js"
 import InteractionNotice from "../InteractionNotice.js"

site/formatting.test.ts

@@ -2,7 +2,7 @@ import cheerio from "cheerio"
 import { WP_ColumnStyle } from "@ourworldindata/utils"
 import { splitContentIntoSectionsAndColumns } from "./formatting.js"
 import { formatAuthors } from "./clientFormatting.js"
-import { GRAPHER_PREVIEW_CLASS } from "./SiteConstants.js"
+import { GRAPHER_PREVIEW_CLASS } from "@ourworldindata/types"
 
 const paragraph = `<p>Some paragraph</p>`
 const chart = `<figure data-grapher-src="https://ourworldindata.org/grapher/pneumococcal-vaccination-averted-deaths" class="${GRAPHER_PREVIEW_CLASS}"></figure>`

site/formatting.tsx

@@ -14,8 +14,7 @@ import { bakeGlobalEntitySelector } from "./bakeGlobalEntitySelector.js"
 import { PROMINENT_LINK_CLASSNAME } from "./blocks/ProminentLink.js"
 import { Byline } from "./Byline.js"
 import { SectionHeading } from "./SectionHeading.js"
-import { FormattingOptions } from "@ourworldindata/types"
-import { GRAPHER_PREVIEW_CLASS } from "./SiteConstants.js"
+import { FormattingOptions, GRAPHER_PREVIEW_CLASS } from "@ourworldindata/types"
 
 export const RESEARCH_AND_WRITING_CLASSNAME = "wp-block-research-and-writing"
 

site/gdocs/components/Chart.tsx

@@ -15,7 +15,7 @@ import {
 } from "@ourworldindata/utils"
 import { renderSpans, useLinkedChart } from "../utils.js"
 import cx from "classnames"
-import { GRAPHER_PREVIEW_CLASS } from "../../SiteConstants.js"
+import { GRAPHER_PREVIEW_CLASS } from "@ourworldindata/types"
 import InteractionNotice from "../../InteractionNotice.js"
 import GrapherImage from "../../GrapherImage.js"
 

site/multiembedder/MultiEmbedder.tsx

@@ -31,7 +31,7 @@ import {
     EMBEDDED_EXPLORER_PARTIAL_GRAPHER_CONFIGS,
     EXPLORER_EMBEDDED_FIGURE_SELECTOR,
 } from "../../explorer/ExplorerConstants.js"
-import { GRAPHER_PREVIEW_CLASS } from "../SiteConstants.js"
+import { GRAPHER_PREVIEW_CLASS } from "@ourworldindata/types"
 import {
     ADMIN_BASE_URL,
     BAKED_GRAPHER_URL,