enhance: also handle old-style grapher pages

Author: marcelgerber

baker/GrapherBaker.tsx

@@ -121,7 +121,7 @@ export const renderDataPageOrGrapherPage = async (
         runtimeAssetMap,
     })
     if (datapage) return datapage
-    return renderGrapherPage(grapher, knex)
+    return renderGrapherPage(grapher, knex, { staticAssetMap, runtimeAssetMap })
 }
 
 export async function renderDataPageV2(
@@ -261,7 +261,14 @@ export const renderPreviewDataPageOrGrapherPage = async (
 
 const renderGrapherPage = async (
     grapher: GrapherInterface,
-    knex: db.KnexReadonlyTransaction
+    knex: db.KnexReadonlyTransaction,
+    {
+        staticAssetMap,
+        runtimeAssetMap,
+    }: {
+        staticAssetMap?: AssetMap
+        runtimeAssetMap?: AssetMap
+    } = {}
 ) => {
     const postSlug = urlToSlug(grapher.originUrl || "") as string | undefined
     // TODO: update this to use gdocs posts
@@ -282,6 +289,8 @@ const renderGrapherPage = async (
             relatedArticles={relatedArticles}
             baseUrl={BAKED_BASE_URL}
             baseGrapherUrl={BAKED_GRAPHER_URL}
+            staticAssetMap={staticAssetMap}
+            runtimeAssetMap={runtimeAssetMap}
         />
     )
 }

baker/buildLocalArchivalBake.ts

@@ -188,31 +188,35 @@ const bakeDomainToFolder = async (
 
     console.log(`Baking site locally with baseUrl '${baseUrl}' to dir '${dir}'`)
 
-    const SLUG = "life-expectancy"
+    const SLUGS = ["life-expectancy", "environmental-footprint-milks"]
 
     const commonRuntimeFiles = await bakeDods()
 
     await db.knexReadonlyTransaction(async (trx) => {
         const imageMetadataDictionary = await getAllImages(trx).then((images) =>
             keyBy(images, "filename")
         )
-        const chart = await getChartConfigBySlug(trx, SLUG)
 
-        const runtimeFiles = { ...commonRuntimeFiles }
+        for (const chartSlug of SLUGS) {
+            const chart = await getChartConfigBySlug(trx, chartSlug)
 
-        for (const dim of chart.config.dimensions ?? []) {
-            if (dim.variableId) {
-                const variableId = dim.variableId
-                const variableFiles = await bakeVariableDataFiles(variableId)
-                Object.assign(runtimeFiles, variableFiles)
+            const runtimeFiles = { ...commonRuntimeFiles }
+
+            for (const dim of chart.config.dimensions ?? []) {
+                if (dim.variableId) {
+                    const variableId = dim.variableId
+                    const variableFiles =
+                        await bakeVariableDataFiles(variableId)
+                    Object.assign(runtimeFiles, variableFiles)
+                }
             }
-        }
 
-        await bakeSingleGrapherPageForArchival(dir, chart.config, trx, {
-            imageMetadataDictionary,
-            staticAssetMap,
-            runtimeAssetMap: runtimeFiles,
-        })
+            await bakeSingleGrapherPageForArchival(dir, chart.config, trx, {
+                imageMetadataDictionary,
+                staticAssetMap,
+                runtimeAssetMap: runtimeFiles,
+            })
+        }
     }, db.TransactionCloseMode.Close)
 
     if (copyToLatestDir) {

packages/@ourworldindata/grapher/src/core/Grapher.tsx

@@ -2435,7 +2435,8 @@ export class Grapher
     }
 
     static renderSingleGrapherOnGrapherPage(
-        jsonConfig: GrapherInterface
+        jsonConfig: GrapherInterface,
+        { runtimeAssetMap }: { runtimeAssetMap?: AssetMap } = {}
     ): void {
         const container = document.getElementsByTagName("figure")[0]
         try {
@@ -2445,6 +2446,7 @@ export class Grapher
                     bindUrlToWindow: true,
                     enableKeyboardShortcuts: true,
                     queryStr: window.location.search,
+                    runtimeAssetMap,
                 },
                 container
             )

site/GrapherPage.tsx

@@ -15,6 +15,7 @@ import {
 } from "@ourworldindata/utils"
 import { MarkdownTextWrap } from "@ourworldindata/components"
 import {
+    AssetMap,
     HIDE_IF_JS_DISABLED_CLASSNAME,
     HIDE_IF_JS_ENABLED_CLASSNAME,
 } from "@ourworldindata/types"
@@ -39,6 +40,8 @@ export const GrapherPage = (props: {
     relatedArticles?: PostReference[]
     baseUrl: string
     baseGrapherUrl: string
+    staticAssetMap?: AssetMap
+    runtimeAssetMap?: AssetMap
 }) => {
     const { grapher, relatedCharts, relatedArticles, baseGrapherUrl, baseUrl } =
         props
@@ -73,7 +76,8 @@ export const GrapherPage = (props: {
         bakedGrapherURL: BAKED_GRAPHER_URL,
         dataApiUrl: DATA_API_URL,
     })}
-window.Grapher.renderSingleGrapherOnGrapherPage(jsonConfig)`
+const runtimeAssetMap = (typeof window !== "undefined" && window._OWID_RUNTIME_ASSET_MAP) || undefined;
+window.Grapher.renderSingleGrapherOnGrapherPage(jsonConfig, { runtimeAssetMap: runtimeAssetMap })`
 
     const variableIds = uniq(grapher.dimensions!.map((d) => d.variableId))
 
@@ -85,15 +89,24 @@ window.Grapher.renderSingleGrapherOnGrapherPage(jsonConfig)`
                 pageDesc={pageDesc}
                 imageUrl={imageUrl}
                 baseUrl={baseUrl}
+                staticAssetMap={props.staticAssetMap}
             >
                 <meta property="og:image:width" content={imageWidth} />
                 <meta property="og:image:height" content={imageHeight} />
                 <IFrameDetector />
                 <link rel="preconnect" href={dataApiOrigin} />
                 {variableIds.flatMap((variableId) =>
                     [
-                        getVariableDataRoute(DATA_API_URL, variableId),
-                        getVariableMetadataRoute(DATA_API_URL, variableId),
+                        getVariableDataRoute(
+                            DATA_API_URL,
+                            variableId,
+                            props.runtimeAssetMap
+                        ),
+                        getVariableMetadataRoute(
+                            DATA_API_URL,
+                            variableId,
+                            props.runtimeAssetMap
+                        ),
                     ].map((href) => (
                         <link
                             key={href}
@@ -167,6 +180,8 @@ window.Grapher.renderSingleGrapherOnGrapherPage(jsonConfig)`
                 <SiteFooter
                     baseUrl={baseUrl}
                     context={SiteFooterContext.grapherPage}
+                    staticAssetMap={props.staticAssetMap}
+                    runtimeAssetMap={props.runtimeAssetMap}
                 />
                 <script
                     type="module"