From 616ed35399de8b56f16431fb47ae0ab83758531c Mon Sep 17 00:00:00 2001
From: Ike Saunders <11844404+ikesau@users.noreply.github.com>
Date: Fri, 20 Dec 2024 09:28:12 -0500
Subject: [PATCH 01/29] Merge pull request #4342 from owid/persist-alt-text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ persist alt text between image revisions
---
 adminSiteClient/ImagesIndexPage.tsx | 80 ++++++++++++++++++++---------
 adminSiteServer/apiRouter.ts        |  2 +
 2 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/adminSiteClient/ImagesIndexPage.tsx b/adminSiteClient/ImagesIndexPage.tsx
index 24ba88b42c..ecd8a452f9 100644
--- a/adminSiteClient/ImagesIndexPage.tsx
+++ b/adminSiteClient/ImagesIndexPage.tsx
@@ -14,6 +14,7 @@ import {
     Popover,
     Table,
     Upload,
+    notification,
 } from "antd"
 import { AdminLayout } from "./AdminLayout.js"
 import { AdminAppContext } from "./AdminAppContext.js"
@@ -31,6 +32,7 @@ import { RcFile } from "antd/es/upload/interface.js"
 import { CLOUDFLARE_IMAGES_URL } from "../settings/clientSettings.js"
 import { Dictionary, keyBy } from "lodash"
 import cx from "classnames"
+import { NotificationInstance } from "antd/es/notification/interface.js"
 
 type ImageMap = Record<string, DbEnrichedImageWithUserId>
 
@@ -237,10 +239,12 @@ function createColumns({
     api,
     users,
     usage,
+    notificationApi,
 }: {
     api: ImageEditorApi
     users: UserMap
     usage: Dictionary<UsageInfo[]>
+    notificationApi: NotificationInstance
 }): ColumnsType<DbEnrichedImageWithUserId> {
     return [
         {
@@ -376,7 +380,11 @@ function createColumns({
                 return (
                     <Flex vertical>
                         <UsageViewer usage={usage && usage[image.id]} />
-                        <PutImageButton putImage={api.putImage} id={image.id} />
+                        <PutImageButton
+                            putImage={api.putImage}
+                            notificationApi={notificationApi}
+                            id={image.id}
+                        />
                         <Popconfirm
                             title="Are you sure?"
                             description="This will delete the image being used in production."
@@ -459,31 +467,48 @@ function PostImageButton({
 function PutImageButton({
     putImage,
     id,
+    notificationApi,
 }: {
     putImage: ImageEditorApi["putImage"]
     id: number
+    notificationApi: NotificationInstance
 }) {
     async function uploadImage({ file }: { file: File }) {
         const result = await fileToBase64(file)
         if (result) {
-            putImage(id, result)
+            await putImage(id, result)
+            notificationApi.info({
+                message: "Image replaced!",
+                description:
+                    "Make sure you update the alt text if your revision has substantive changes",
+                placement: "bottomRight",
+            })
         }
     }
     return (
-        <Upload
-            accept="image/*"
-            showUploadList={false}
-            customRequest={uploadImage}
-        >
-            <Button className="ImageIndexPage__update-image-button" type="text">
-                Upload new version
-            </Button>
-        </Upload>
+        <>
+            <Upload
+                accept="image/*"
+                showUploadList={false}
+                customRequest={uploadImage}
+            >
+                <Button
+                    className="ImageIndexPage__update-image-button"
+                    type="text"
+                >
+                    Upload new version
+                </Button>
+            </Upload>
+        </>
     )
 }
 
+const NotificationContext = React.createContext(null)
+
 export function ImageIndexPage() {
     const { admin } = useContext(AdminAppContext)
+    const [notificationApi, notificationContextHolder] =
+        notification.useNotification()
     const [images, setImages] = useState<ImageMap>({})
     const [users, setUsers] = useState<UserMap>({})
     const [usage, setUsage] = useState<Dictionary<UsageInfo[]>>({})
@@ -605,8 +630,8 @@ export function ImageIndexPage() {
     )
 
     const columns = useMemo(
-        () => createColumns({ api, users, usage }),
-        [api, users, usage]
+        () => createColumns({ api, users, usage, notificationApi }),
+        [api, users, usage, notificationApi]
     )
 
     useEffect(() => {
@@ -617,18 +642,23 @@ export function ImageIndexPage() {
 
     return (
         <AdminLayout title="Images">
-            <main className="ImageIndexPage">
-                <Flex justify="space-between">
-                    <Input
-                        placeholder="Search by filename"
-                        value={filenameSearchValue}
-                        onChange={(e) => setFilenameSearchValue(e.target.value)}
-                        style={{ width: 500, marginBottom: 20 }}
-                    />
-                    <PostImageButton postImage={api.postImage} />
-                </Flex>
-                <Table columns={columns} dataSource={filteredImages} />
-            </main>
+            <NotificationContext.Provider value={null}>
+                {notificationContextHolder}
+                <main className="ImageIndexPage">
+                    <Flex justify="space-between">
+                        <Input
+                            placeholder="Search by filename"
+                            value={filenameSearchValue}
+                            onChange={(e) =>
+                                setFilenameSearchValue(e.target.value)
+                            }
+                            style={{ width: 500, marginBottom: 20 }}
+                        />
+                        <PostImageButton postImage={api.postImage} />
+                    </Flex>
+                    <Table columns={columns} dataSource={filteredImages} />
+                </main>
+            </NotificationContext.Provider>
         </AdminLayout>
     )
 }
diff --git a/adminSiteServer/apiRouter.ts b/adminSiteServer/apiRouter.ts
index 945d6b6670..5cf0e042bc 100644
--- a/adminSiteServer/apiRouter.ts
+++ b/adminSiteServer/apiRouter.ts
@@ -3241,6 +3241,7 @@ putRouteWithRWTransaction(apiRouter, "/images/:id", async (req, res, trx) => {
 
     const originalCloudflareId = image.cloudflareId
     const originalFilename = image.filename
+    const originalAltText = image.defaultAlt
 
     if (!originalCloudflareId) {
         throw new JsonError(
@@ -3262,6 +3263,7 @@ putRouteWithRWTransaction(apiRouter, "/images/:id", async (req, res, trx) => {
         cloudflareId: newCloudflareId,
         updatedAt: new Date().getTime(),
         userId: res.locals.user.id,
+        defaultAlt: originalAltText,
         hash,
         version: image.version + 1,
     })

From 83f62eae736a2ac040d7f451afa7c926805279eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <rakyi@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:53:59 +0100
Subject: [PATCH 02/29] Add Bluesky to donation sharing options (#4347)

---
 site/ThankYouPage.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/site/ThankYouPage.tsx b/site/ThankYouPage.tsx
index 6e05a7452a..9098aafdf7 100644
--- a/site/ThankYouPage.tsx
+++ b/site/ThankYouPage.tsx
@@ -3,7 +3,11 @@ import { Head } from "./Head.js"
 import { SiteHeader } from "./SiteHeader.js"
 import { SiteFooter } from "./SiteFooter.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import { faFacebook, faXTwitter } from "@fortawesome/free-brands-svg-icons"
+import {
+    faBluesky,
+    faFacebook,
+    faXTwitter,
+} from "@fortawesome/free-brands-svg-icons"
 import { Html } from "./Html.js"
 
 const shareMessage =
@@ -54,6 +58,16 @@ export const ThankYouPage = (props: { baseUrl: string }) => (
                         <div className="share-message__content">
                             “{shareMessage} <a href="/donate">{donateLink}</a>”
                             <div className="share-message__buttons">
+                                <a
+                                    href={`https://bsky.app/intent/compose?text=${encodeURIComponent(
+                                        shareMessage + " " + donateLink
+                                    )}`}
+                                    className="share-message__button"
+                                    target="_blank"
+                                    rel="noopener"
+                                >
+                                    <FontAwesomeIcon icon={faBluesky} />
+                                </a>
                                 <a
                                     href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
                                         shareMessage

From d425fa0f8d5e08e196ec86d4e9f84c8843aa68a6 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Fri, 20 Dec 2024 17:13:38 +0100
Subject: [PATCH 03/29] =?UTF-8?q?=F0=9F=90=9B=20(facet)=20show=20swatch=20?=
 =?UTF-8?q?colour=20on=20hovering=20(#4348)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/horizontalColorLegend/HorizontalColorLegends.tsx       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
index d53b679238..37ed032586 100644
--- a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
+++ b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
@@ -854,6 +854,7 @@ export class HorizontalCategoricalColorLegend extends HorizontalColorLegend {
             <g id={makeIdForHumanConsumption("swatches")}>
                 {marks.map((mark, index) => {
                     const isActive = activeColors?.includes(mark.bin.color)
+                    const isHovered = hoverColors.includes(mark.bin.color)
                     const isNotHovered =
                         hoverColors.length > 0 &&
                         !hoverColors.includes(mark.bin.color)
@@ -863,7 +864,7 @@ export class HorizontalCategoricalColorLegend extends HorizontalColorLegend {
                         : mark.bin.color
 
                     const fill =
-                        isActive || activeColors === undefined
+                        isHovered || isActive || activeColors === undefined
                             ? color
                             : OWID_NON_FOCUSED_GRAY
 

From 6079a947146723ebc5338df24a0762daf01fde05 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Fri, 20 Dec 2024 17:27:36 +0100
Subject: [PATCH 04/29] =?UTF-8?q?=F0=9F=90=9B=20(scatter)=20left-align=20n?=
 =?UTF-8?q?o=20data=20section=20(#4349)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/scatterCharts/NoDataSection.tsx            | 7 +++++--
 .../@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx | 2 ++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx
index a5862b3172..9041e4ee8f 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { Bounds } from "@ourworldindata/utils"
+import { Bounds, HorizontalAlign } from "@ourworldindata/utils"
 import {
     GRAPHER_FONT_SCALE_11,
     GRAPHER_FONT_SCALE_12,
@@ -9,10 +9,12 @@ import { GRAPHER_LIGHT_TEXT } from "../color/ColorConstants"
 export function NoDataSection({
     seriesNames,
     bounds,
+    align = HorizontalAlign.left,
     baseFontSize = 16,
 }: {
     seriesNames: string[]
     bounds: Bounds
+    align?: HorizontalAlign
     baseFontSize?: number
 }): React.ReactElement {
     {
@@ -30,7 +32,8 @@ export function NoDataSection({
                 className="NoDataSection"
                 {...bounds.toProps()}
                 style={{
-                    textAlign: "right",
+                    textAlign:
+                        align === HorizontalAlign.right ? "right" : "left",
                     color: GRAPHER_LIGHT_TEXT,
                 }}
             >
diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
index 3d01ce3607..b713209ebf 100644
--- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
+++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -35,6 +35,7 @@ import {
     VerticalAlign,
     FacetStrategy,
     InteractionState,
+    HorizontalAlign,
 } from "@ourworldindata/types"
 import { ChartInterface } from "../chart/ChartInterface"
 import { ChartManager } from "../chart/ChartManager"
@@ -1127,6 +1128,7 @@ export class SlopeChart
             <NoDataSection
                 seriesNames={seriesNames}
                 bounds={bounds}
+                align={HorizontalAlign.right}
                 baseFontSize={this.fontSize}
             />
         )

From d1bd40b646cd93eed689180ea8f2c4c839be04d9 Mon Sep 17 00:00:00 2001
From: Fiona Spooner <spoonerfiona@gmail.com>
Date: Mon, 23 Dec 2024 09:56:16 +0000
Subject: [PATCH 05/29] Merge pull request #4353 from
 owid/add-antibiotics-topic-list

Update SiteNavigation.tsx
---
 site/SiteNavigation.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/site/SiteNavigation.tsx b/site/SiteNavigation.tsx
index 1d19b2acbc..b9d1b000d8 100644
--- a/site/SiteNavigation.tsx
+++ b/site/SiteNavigation.tsx
@@ -477,6 +477,10 @@ export const SiteNavigationStatic: { categories: CategoryWithEntries[] } = {
                             slug: "vaccination",
                             title: "Vaccination",
                         },
+                        {
+                            slug: "antibiotics",
+                            title: "Antibiotics & Antibiotic Resistance",
+                        },
                         {
                             slug: "financing-healthcare",
                             title: "Healthcare Spending",

From 58e75de88f0961fb9361d00d17e8b62a31de0430 Mon Sep 17 00:00:00 2001
From: Fiona Spooner <spoonerfiona@gmail.com>
Date: Mon, 23 Dec 2024 10:37:15 +0000
Subject: [PATCH 06/29] Merge pull request #4354 from owid/spoonerf-patch-1

Update SiteNavigation.tsx
---
 site/SiteNavigation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/SiteNavigation.tsx b/site/SiteNavigation.tsx
index b9d1b000d8..7d357c46c8 100644
--- a/site/SiteNavigation.tsx
+++ b/site/SiteNavigation.tsx
@@ -479,7 +479,7 @@ export const SiteNavigationStatic: { categories: CategoryWithEntries[] } = {
                         },
                         {
                             slug: "antibiotics",
-                            title: "Antibiotics & Antibiotic Resistance",
+                            title: "Antibiotics and Antibiotic Resistance",
                         },
                         {
                             slug: "financing-healthcare",

From a6c11e1fb079895cdb5c415de2028392eebd4719 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Thu, 2 Jan 2025 13:35:41 +0100
Subject: [PATCH 07/29] =?UTF-8?q?=F0=9F=90=9B=20(explorer)=20dismiss=20foc?=
 =?UTF-8?q?us=20state=20after=20unselecting=20an=20entity=20(#4365)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/@ourworldindata/explorer/src/Explorer.tsx     |  3 +++
 .../grapher/src/controls/entityPicker/EntityPicker.tsx | 10 ++++++++--
 .../src/controls/entityPicker/EntityPickerConstants.ts |  2 ++
 packages/@ourworldindata/grapher/src/core/Grapher.tsx  |  3 ++-
 packages/@ourworldindata/grapher/src/index.ts          |  1 +
 5 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/@ourworldindata/explorer/src/Explorer.tsx b/packages/@ourworldindata/explorer/src/Explorer.tsx
index da070a9e21..8a9b232f4b 100644
--- a/packages/@ourworldindata/explorer/src/Explorer.tsx
+++ b/packages/@ourworldindata/explorer/src/Explorer.tsx
@@ -27,6 +27,7 @@ import {
     SlideShowManager,
     DEFAULT_GRAPHER_ENTITY_TYPE,
     GrapherAnalytics,
+    FocusArray,
 } from "@ourworldindata/grapher"
 import {
     Bounds,
@@ -277,6 +278,8 @@ export class Explorer
         ? this.props.selection
         : new SelectionArray(this.explorerProgram.selection)
 
+    focusArray = new FocusArray()
+
     entityType = this.explorerProgram.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE
 
     @observable.ref grapher?: Grapher
diff --git a/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx b/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx
index 754584323a..0f8a7fae88 100644
--- a/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx
@@ -95,6 +95,11 @@ export class EntityPicker extends React.Component<{
     ): void {
         this.manager.selection.toggleSelection(name)
 
+        // Remove focus from an entity that has been removed from the selection
+        if (!this.manager.selection.selectedSet.has(name)) {
+            this.manager.focusArray?.remove(name)
+        }
+
         // Clear search input
         this.searchInput = ""
         this.manager.analytics?.logEntityPickerEvent(
@@ -644,9 +649,10 @@ export class EntityPicker extends React.Component<{
                                     title={selectedDebugMessage}
                                     className="ClearSelectionButton"
                                     data-track-note="entity_picker_clear_selection"
-                                    onClick={(): void =>
+                                    onClick={(): void => {
                                         selection.clearSelection()
-                                    }
+                                        this.manager.focusArray?.clear()
+                                    }}
                                 >
                                     <FontAwesomeIcon icon={faTimes} /> Clear
                                     selection
diff --git a/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPickerConstants.ts b/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPickerConstants.ts
index 2370530d87..cdd1d2e6ce 100644
--- a/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPickerConstants.ts
+++ b/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPickerConstants.ts
@@ -3,6 +3,7 @@ import { GrapherAnalytics } from "../../core/GrapherAnalytics"
 import { OwidTable } from "@ourworldindata/core-table"
 import { CoreColumnDef, SortOrder } from "@ourworldindata/types"
 import { SelectionArray } from "../../selection/SelectionArray"
+import { FocusArray } from "../../focus/FocusArray"
 
 export interface EntityPickerManager {
     entityPickerMetric?: ColumnSlug
@@ -19,4 +20,5 @@ export interface EntityPickerManager {
     selection: SelectionArray
     entityType?: string
     analytics?: GrapherAnalytics
+    focusArray?: FocusArray
 }
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
index 8cbd4e22d1..9ac3eaf20e 100644
--- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx
+++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -341,6 +341,7 @@ export interface GrapherManager {
     embedDialogUrl?: string
     embedDialogAdditionalElements?: React.ReactElement
     selection?: SelectionArray
+    focusArray?: FocusArray
     editUrl?: string
 }
 
@@ -512,7 +513,7 @@ export class Grapher
             this.props.table?.availableEntities ?? []
         )
 
-    focusArray = new FocusArray()
+    focusArray = this.manager?.focusArray ?? new FocusArray()
 
     /**
      * todo: factor this out and make more RAII.
diff --git a/packages/@ourworldindata/grapher/src/index.ts b/packages/@ourworldindata/grapher/src/index.ts
index b9b100cdf1..8d52675e86 100644
--- a/packages/@ourworldindata/grapher/src/index.ts
+++ b/packages/@ourworldindata/grapher/src/index.ts
@@ -72,6 +72,7 @@ export {
     MapProjectionGeos,
 } from "./mapCharts/MapProjections"
 export { SelectionArray } from "./selection/SelectionArray"
+export { FocusArray } from "./focus/FocusArray"
 export {
     setSelectedEntityNamesParam,
     migrateSelectedEntityNamesParam,

From 7bee7dbdca2fcb9b9e731f5795868d751a8f9cd9 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Thu, 2 Jan 2025 14:15:42 +0100
Subject: [PATCH 08/29] =?UTF-8?q?=F0=9F=90=9B=20clear=20focus=20when=20cle?=
 =?UTF-8?q?aring=20query=20params=20(#4366)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

clear focus
---
 .../grapher/src/core/Grapher.tsx              | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
index 9ac3eaf20e..a7d8a97493 100644
--- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx
+++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -1210,6 +1210,11 @@ export class Grapher
             this.selection.setSelectedEntities(this.selectedEntityNames)
     }
 
+    @action.bound private applyOriginalFocusAsAuthored(): void {
+        if (this.focusedSeriesNames?.length)
+            this.focusArray.clearAllAndAdd(...this.focusedSeriesNames)
+    }
+
     @computed get hasData(): boolean {
         return this.dimensions.length > 0 || this.newSlugs.length > 0
     }
@@ -2641,10 +2646,14 @@ export class Grapher
             },
             {
                 combo: "a",
-                fn: (): void | SelectionArray =>
-                    this.selection.hasSelection
-                        ? this.selection.clearSelection()
-                        : this.selection.selectAll(),
+                fn: (): void => {
+                    if (this.selection.hasSelection) {
+                        this.selection.clearSelection()
+                        this.focusArray.clear()
+                    } else {
+                        this.selection.selectAll()
+                    }
+                },
                 title: this.selection.hasSelection
                     ? `Select None`
                     : `Select All`,
@@ -3354,6 +3363,11 @@ export class Grapher
         this.applyOriginalSelectionAsAuthored()
     }
 
+    @action.bound clearFocus(): void {
+        this.focusArray.clear()
+        this.applyOriginalFocusAsAuthored()
+    }
+
     @action.bound clearQueryParams(): void {
         const { authorsVersion } = this
         this.tab = authorsVersion.tab
@@ -3370,6 +3384,7 @@ export class Grapher
             authorsVersion.showSelectionOnlyInDataTable
         this.showNoDataArea = authorsVersion.showNoDataArea
         this.clearSelection()
+        this.clearFocus()
     }
 
     // Todo: come up with a more general pattern?
@@ -3388,6 +3403,7 @@ export class Grapher
         this.sizeSlug = grapher.sizeSlug
 
         this.selection.clearSelection()
+        this.focusArray.clear()
     }
 
     debounceMode = false

From efc276ced3af243b5399d83e20ad472b4c5b6178 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Thu, 2 Jan 2025 15:40:05 +0100
Subject: [PATCH 09/29] =?UTF-8?q?=F0=9F=A7=AA=20fix=20flaky=20test=20(#436?=
 =?UTF-8?q?7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

One test in the Marimekko test suite is flaky and (sometimes) fails. It seems to be a rounding issue. Instead of rounding the values ourselves, I use jest's `toBeCloseTo` that compares floating point values allowing for imprecision.
---
 .../MarimekkoChart.jsdom.test.tsx              | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.jsdom.test.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.jsdom.test.tsx
index c20ed644b8..899997644b 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.jsdom.test.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.jsdom.test.tsx
@@ -1,6 +1,6 @@
 #! /usr/bin/env jest
 
-import { Bounds, ColumnTypeNames } from "@ourworldindata/utils"
+import { Bounds, ColumnTypeNames, omit } from "@ourworldindata/utils"
 import { OwidTable } from "@ourworldindata/core-table"
 import { DefaultColorScheme } from "../color/CustomSchemes"
 import { Grapher } from "../core/Grapher"
@@ -408,8 +408,15 @@ it("can deal with y columns with missing values", () => {
     expect(chart.series[0].points).toEqual(expectedYPoints1)
     expect(chart.series[1].points).toEqual(expectedYPoints2)
     expect(chart.xSeries!.points).toEqual(expectedXPoints)
+
+    const placedItemsWithoutXPosition = chart.placedItems.map((placedItem) =>
+        omit(placedItem, "xPosition")
+    )
+    const xPositions = chart.placedItems.map(
+        (placedItem) => placedItem.xPosition
+    )
     // placedItems should be in default sort order
-    expect(chart.placedItems.map(roundXPosition)).toEqual([
+    expect(placedItemsWithoutXPosition).toEqual([
         {
             entityName: "medium",
             entityColor: undefined,
@@ -428,7 +435,6 @@ it("can deal with y columns with missing values", () => {
                 },
             ],
             xPoint: expectedXPoints[0],
-            xPosition: 0,
         },
         {
             entityName: "small",
@@ -448,7 +454,6 @@ it("can deal with y columns with missing values", () => {
                 },
             ],
             xPoint: expectedXPoints[2],
-            xPosition: Math.round(xAxisRange * 0.4),
         },
         {
             entityName: "big",
@@ -462,9 +467,12 @@ it("can deal with y columns with missing values", () => {
                 },
             ],
             xPoint: expectedXPoints[1],
-            xPosition: Math.round(xAxisRange * 0.5),
         },
     ])
+
+    expect(xPositions[0]).toEqual(0)
+    expect(xPositions[1]).toBeCloseTo(xAxisRange * 0.4, 0)
+    expect(xPositions[2]).toBeCloseTo(xAxisRange * 0.5, 0)
 })
 
 function roundXPosition(item: PlacedItem): PlacedItem {

From 6b4305da88864ece69921399c1fb0dc997c302a8 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Thu, 2 Jan 2025 16:56:38 +0100
Subject: [PATCH 10/29] =?UTF-8?q?=F0=9F=90=9B=20(facet)=20make=20legend=20?=
 =?UTF-8?q?clickable=20for=20line=20and=20slope=20charts=20only=20(#4370)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/facetChart/FacetChart.tsx              | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
index ef091fb911..e66b7faa5b 100644
--- a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
+++ b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
@@ -799,7 +799,8 @@ export class FacetChart
     }
 
     @action.bound onLegendClick(bin: ColorScaleBin): void {
-        if (!this.manager.focusArray) return
+        if (!this.manager.focusArray || !this.isFocusModeSupported) return
+
         // find all series (of all facets) that are contained in the bin
         const seriesNames = uniq(
             this.intermediateChartInstances.flatMap((chartInstance) =>
@@ -817,6 +818,13 @@ export class FacetChart
         return new this.LegendClass({ manager: this })
     }
 
+    @computed private get isFocusModeSupported(): boolean {
+        return (
+            this.chartTypeName === GRAPHER_CHART_TYPES.LineChart ||
+            this.chartTypeName === GRAPHER_CHART_TYPES.SlopeChart
+        )
+    }
+
     /**
      * In order to display a potentially long facet label in the potentially tight space, we
      * shrink and shorten the label as follows to prevent overlap between neighbouring labels:

From 58b0348aeec1c183f0503063265ccbb85b976eda Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Fri, 3 Jan 2025 13:32:56 +0100
Subject: [PATCH 11/29] =?UTF-8?q?=E2=9C=A8=20(discrete=20bar)=20hide=20hor?=
 =?UTF-8?q?izontal=20axis=20(#4371)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ (discrete bar) hide horizontal axis

* 🔨 remove relative mode from discrete bar chart configs

* 🤖 style: prettify code
---
 ...RemoveRelativeModeFromDiscreteBarCharts.ts | 21 ++++++++++++++
 .../src/barCharts/DiscreteBarChart.tsx        | 29 ++-----------------
 2 files changed, 23 insertions(+), 27 deletions(-)
 create mode 100644 db/migration/1735896576517-RemoveRelativeModeFromDiscreteBarCharts.ts

diff --git a/db/migration/1735896576517-RemoveRelativeModeFromDiscreteBarCharts.ts b/db/migration/1735896576517-RemoveRelativeModeFromDiscreteBarCharts.ts
new file mode 100644
index 0000000000..b2aff926b0
--- /dev/null
+++ b/db/migration/1735896576517-RemoveRelativeModeFromDiscreteBarCharts.ts
@@ -0,0 +1,21 @@
+import { MigrationInterface, QueryRunner } from "typeorm"
+
+export class RemoveRelativeModeFromDiscreteBarCharts1735896576517
+    implements MigrationInterface
+{
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`
+            -- sql
+            update chart_configs
+            set
+                patch = json_remove(patch, '$.stackMode'),
+                full = json_remove(full, '$.stackMode')
+            where
+                chartType = 'DiscreteBar'
+                and full ->> '$.stackMode' = 'relative';
+        `)
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    public async down(): Promise<void> {}
+}
diff --git a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
index 3f79cc7bde..e83be28e48 100644
--- a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
@@ -37,11 +37,7 @@ import {
     GRAPHER_AREA_OPACITY_DEFAULT,
     GRAPHER_FONT_SCALE_12,
 } from "../core/GrapherConstants"
-import {
-    HorizontalAxisComponent,
-    HorizontalAxisGridLines,
-    HorizontalAxisZeroLine,
-} from "../axis/AxisViews"
+import { HorizontalAxisZeroLine } from "../axis/AxisViews"
 import { NoDataModal } from "../noDataModal/NoDataModal"
 import { AxisConfig, AxisManager } from "../axis/AxisConfig"
 import { ColorSchemes } from "../color/ColorSchemes"
@@ -305,7 +301,6 @@ export class DiscreteBarChart
     @computed private get innerBounds(): Bounds {
         return this.boundsWithoutColorLegend
             .padLeft(Math.max(this.seriesLegendWidth, this.leftValueLabelWidth))
-            .padBottom(this.showHorizontalAxis ? this.yAxis.height : 0)
             .padRight(this.rightValueLabelWidth)
     }
 
@@ -350,10 +345,6 @@ export class DiscreteBarChart
         return this.barPlacements.map((b) => b.width)
     }
 
-    @computed private get showHorizontalAxis(): boolean | undefined {
-        return this.manager.isRelativeMode
-    }
-
     private d3Bars(): Selection<
         BaseType,
         unknown,
@@ -504,7 +495,7 @@ export class DiscreteBarChart
     }
 
     renderChartArea(): React.ReactElement {
-        const { manager, boundsWithoutColorLegend, yAxis, innerBounds } = this
+        const { manager, yAxis, innerBounds } = this
 
         const axisLineWidth = manager.isStaticAndSmall
             ? GRAPHER_AXIS_LINE_WIDTH_THICK
@@ -516,22 +507,6 @@ export class DiscreteBarChart
                 {this.showColorLegend && (
                     <HorizontalNumericColorLegend manager={this} />
                 )}
-                {this.showHorizontalAxis && (
-                    <>
-                        <HorizontalAxisComponent
-                            bounds={boundsWithoutColorLegend}
-                            axis={yAxis}
-                            preferredAxisPosition={innerBounds.bottom}
-                            labelColor={manager.secondaryColorInStaticCharts}
-                            tickMarkWidth={axisLineWidth}
-                        />
-                        <HorizontalAxisGridLines
-                            horizontalAxis={yAxis}
-                            bounds={innerBounds}
-                            strokeWidth={axisLineWidth}
-                        />
-                    </>
-                )}
                 {!this.isLogScale && (
                     <HorizontalAxisZeroLine
                         horizontalAxis={yAxis}

From 5afe857a1eecd36a68b2de28762bc07f0ccdc8e3 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Fri, 3 Jan 2025 15:15:36 +0100
Subject: [PATCH 12/29] =?UTF-8?q?=E2=9C=A8=20(discrete=20bar)=20thin=20zer?=
 =?UTF-8?q?o=20line=20(#4372)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/barCharts/DiscreteBarChart.tsx       | 12 ++++++++++--
 .../src/stackedCharts/StackedDiscreteBarChart.tsx    |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
index e83be28e48..4b0857a882 100644
--- a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
@@ -498,8 +498,8 @@ export class DiscreteBarChart
         const { manager, yAxis, innerBounds } = this
 
         const axisLineWidth = manager.isStaticAndSmall
-            ? GRAPHER_AXIS_LINE_WIDTH_THICK
-            : GRAPHER_AXIS_LINE_WIDTH_DEFAULT
+            ? 0.5 * GRAPHER_AXIS_LINE_WIDTH_THICK
+            : 0.5 * GRAPHER_AXIS_LINE_WIDTH_DEFAULT
 
         return (
             <>
@@ -512,6 +512,14 @@ export class DiscreteBarChart
                         horizontalAxis={yAxis}
                         bounds={innerBounds}
                         strokeWidth={axisLineWidth}
+                        // if the chart doesn't have negative values, then we
+                        // move the zero line a little to the left to avoid
+                        // overlap with the bars
+                        align={
+                            this.hasNegative
+                                ? HorizontalAlign.center
+                                : HorizontalAlign.right
+                        }
                     />
                 )}
                 {this.renderBars()}
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
index b298d2ae16..63317a0eae 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
@@ -713,7 +713,7 @@ export class StackedDiscreteBarChart
                 <HorizontalAxisZeroLine
                     horizontalAxis={yAxis}
                     bounds={innerBounds}
-                    strokeWidth={axisLineWidth}
+                    strokeWidth={0.5 * axisLineWidth}
                     // moves the zero line a little to the left to avoid
                     // overlap with the bars
                     align={HorizontalAlign.right}

From 59228f18ae3d9ca05b2a172e257b3f2fa19f27d7 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Mon, 6 Jan 2025 11:48:05 +0100
Subject: [PATCH 13/29] =?UTF-8?q?=E2=9C=A8=20(discrete=20bar)=20add=20more?=
 =?UTF-8?q?=20whitespace=20between=20bars=20(#4373)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/barCharts/DiscreteBarChart.tsx        | 29 ++++++++++++++-----
 .../stackedCharts/StackedDiscreteBarChart.tsx | 27 ++++++++++++-----
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
index 4b0857a882..614f65a8ae 100644
--- a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
@@ -86,6 +86,8 @@ const DEFAULT_PROJECTED_DATA_COLOR_IN_LEGEND = "#787878"
 // if an entity name exceeds this width, we use the short name instead (if available)
 const SOFT_MAX_LABEL_WIDTH = 90
 
+const BAR_SPACING_FACTOR = 0.35
+
 export interface Label {
     valueString: string
     timeString: string
@@ -312,18 +314,29 @@ export class DiscreteBarChart
         return this.series.length
     }
 
-    @computed private get barHeight(): number {
-        return (0.8 * this.innerBounds.height) / this.barCount
+    /** The total height of the series, i.e. the height of the bar + the white space around it */
+    @computed private get seriesHeight(): number {
+        return this.innerBounds.height / this.barCount
     }
 
-    // useful if `this.barHeight` can't be used due to a cyclic dependency
-    // keep in mind though that this is not exactly the same as `this.barHeight`
-    @computed private get approximateBarHeight(): number {
-        return (0.8 * this.boundsWithoutColorLegend.height) / this.barCount
+    @computed private get barSpacing(): number {
+        return this.seriesHeight * BAR_SPACING_FACTOR
     }
 
-    @computed private get barSpacing(): number {
-        return this.innerBounds.height / this.barCount - this.barHeight
+    @computed private get barHeight(): number {
+        const totalWhiteSpace = this.barCount * this.barSpacing
+        return (this.innerBounds.height - totalWhiteSpace) / this.barCount
+    }
+
+    // useful if `barHeight` can't be used due to a cyclic dependency
+    // keep in mind though that this is not exactly the same as `barHeight`
+    @computed private get approximateBarHeight(): number {
+        const { height } = this.boundsWithoutColorLegend
+        const approximateMaxBarHeight = height / this.barCount
+        const approximateBarSpacing =
+            approximateMaxBarHeight * BAR_SPACING_FACTOR
+        const totalWhiteSpace = this.barCount * approximateBarSpacing
+        return (height - totalWhiteSpace) / this.barCount
     }
 
     @computed private get barPlacements(): { x: number; width: number }[] {
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
index 63317a0eae..493cba5fca 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
@@ -84,6 +84,8 @@ import { TextWrap } from "@ourworldindata/components"
 // if an entity name exceeds this width, we use the short name instead (if available)
 const SOFT_MAX_LABEL_WIDTH = 90
 
+const BAR_SPACING_FACTOR = 0.35
+
 const labelToBarPadding = 5
 
 export interface StackedDiscreteBarChartManager extends ChartManager {
@@ -470,18 +472,29 @@ export class StackedDiscreteBarChart
         }))
     }
 
-    // useful if `this.barHeight` can't be used due to a cyclic dependency
-    // keep in mind though that this is not exactly the same as `this.barHeight`
-    @computed private get approximateBarHeight(): number {
-        return (0.8 * this.boundsWithoutLegend.height) / this.barCount
+    /** The total height of the series, i.e. the height of the bar + the white space around it */
+    @computed private get seriesHeight(): number {
+        return this.innerBounds.height / this.barCount
+    }
+
+    @computed private get barSpacing(): number {
+        return this.seriesHeight * BAR_SPACING_FACTOR
     }
 
     @computed private get barHeight(): number {
-        return (0.8 * this.innerBounds.height) / this.barCount
+        const totalWhiteSpace = this.barCount * this.barSpacing
+        return (this.innerBounds.height - totalWhiteSpace) / this.barCount
     }
 
-    @computed private get barSpacing(): number {
-        return this.innerBounds.height / this.barCount - this.barHeight
+    // useful if `barHeight` can't be used due to a cyclic dependency
+    // keep in mind though that this is not exactly the same as `barHeight`
+    @computed private get approximateBarHeight(): number {
+        const { height } = this.boundsWithoutLegend
+        const approximateMaxBarHeight = height / this.barCount
+        const approximateBarSpacing =
+            approximateMaxBarHeight * BAR_SPACING_FACTOR
+        const totalWhiteSpace = this.barCount * approximateBarSpacing
+        return (height - totalWhiteSpace) / this.barCount
     }
 
     // legend props

From 1118d02f9c7bd08e3a74a7a390beec6d37d89f0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Rod=C3=A9s-Guirao?=
 <lucasrodes@users.noreply.github.com>
Date: Mon, 6 Jan 2025 13:01:21 +0100
Subject: [PATCH 14/29] Merge pull request #4356 from
 owid/enhance-archive-dataset-ui
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ "Archive" label in dataset, link to Dataset preview in Wizard
---
 adminSiteClient/DatasetEditPage.tsx  | 128 ++++---
 adminSiteClient/VariableEditPage.tsx |   1 +
 package.json                         |   2 +-
 yarn.lock                            | 481 +++++++++++++++------------
 4 files changed, 349 insertions(+), 263 deletions(-)

diff --git a/adminSiteClient/DatasetEditPage.tsx b/adminSiteClient/DatasetEditPage.tsx
index ca076d3271..143f0261fe 100644
--- a/adminSiteClient/DatasetEditPage.tsx
+++ b/adminSiteClient/DatasetEditPage.tsx
@@ -17,9 +17,10 @@ import { SourceList } from "./SourceList.js"
 import { VariableList, VariableListItem } from "./VariableList.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import { faDownload } from "@fortawesome/free-solid-svg-icons"
+import { faDownload, faHatWizard } from "@fortawesome/free-solid-svg-icons"
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
-
+import { ETL_WIZARD_URL } from "../settings/clientSettings.js"
+import { Button } from "antd"
 interface DatasetPageData {
     id: number
     name: string
@@ -28,6 +29,7 @@ interface DatasetPageData {
     shortName: string
     version: string
     isPrivate: boolean
+    isArchived: boolean
     nonRedistributable: boolean
     updatePeriodDays: number
 
@@ -212,15 +214,23 @@ class DatasetEditor extends React.Component<{ dataset: DatasetPageData }> {
         const { dataset } = this.props
         const { newDataset } = this
         const isBulkImport = dataset.namespace !== "owid"
-
         return (
             <main className="DatasetEditPage">
                 <Prompt
                     when={this.isModified}
                     message="Are you sure you want to leave? Unsaved changes will be lost."
                 />
+
+                {/* HEADER */}
                 <section>
-                    <h1>{dataset.name}</h1>
+                    {dataset.isArchived ? (
+                        <h1>
+                            <span style={{ color: "red" }}>Archived:</span>{" "}
+                            {dataset.name}
+                        </h1>
+                    ) : (
+                        <h1>{dataset.name}</h1>
+                    )}
                     {dataset.shortName && (
                         <h4 style={{ color: "gray" }}>
                             {dataset.namespace}/{dataset.version}/
@@ -234,6 +244,7 @@ class DatasetEditor extends React.Component<{ dataset: DatasetPageData }> {
                             by={dataset.dataEditedByUserName}
                         />
                     </p>
+
                     <Link
                         native
                         to={`/datasets/${dataset.id}.csv`}
@@ -241,6 +252,21 @@ class DatasetEditor extends React.Component<{ dataset: DatasetPageData }> {
                     >
                         <FontAwesomeIcon icon={faDownload} /> Download CSV
                     </Link>
+                    {/* Link to Wizard dataset preview */}
+                    <a
+                        href={`${ETL_WIZARD_URL}datasets?datasetId=${dataset.id}`}
+                        target="_blank"
+                        className="btn btn-tertiary"
+                        rel="noopener"
+                    >
+                        <Button
+                            type="default"
+                            icon={<FontAwesomeIcon icon={faHatWizard} />}
+                        >
+                            Explore in Wizard
+                        </Button>
+                    </a>
+                    {/* View on GitHub link (old) */}
                     {!isBulkImport && !dataset.isPrivate && (
                         <a
                             href={this.gitHistoryUrl}
@@ -251,6 +277,7 @@ class DatasetEditor extends React.Component<{ dataset: DatasetPageData }> {
                             <FontAwesomeIcon icon={faGithub} /> View on GitHub
                         </a>
                     )}
+                    {/* Download additional content (old) */}
                     {dataset.zipFile && (
                         <Link
                             native
@@ -262,6 +289,8 @@ class DatasetEditor extends React.Component<{ dataset: DatasetPageData }> {
                         </Link>
                     )}
                 </section>
+
+                {/* DATASET METADATA */}
                 <section>
                     <h3>Dataset metadata</h3>
                     <form
@@ -334,10 +363,14 @@ class DatasetEditor extends React.Component<{ dataset: DatasetPageData }> {
                         />
                     </form>
                 </section>
+
+                {/* ORIGINS */}
                 <section>
                     <h3>Origins</h3>
                     <OriginList origins={dataset.origins || []} />
                 </section>
+
+                {/* SOURCES */}
                 {dataset.variableSources &&
                     dataset.variableSources.length > 0 && (
                         <section>
@@ -345,10 +378,14 @@ class DatasetEditor extends React.Component<{ dataset: DatasetPageData }> {
                             <SourceList sources={dataset.variableSources} />
                         </section>
                     )}
+
+                {/* INDICATORS */}
                 <section>
                     <h3>Indicators</h3>
                     <VariableList variables={dataset.variables} fields={[]} />
                 </section>
+
+                {/* CHARTS */}
                 <section>
                     <button
                         className="btn btn-primary float-right"
@@ -359,46 +396,53 @@ class DatasetEditor extends React.Component<{ dataset: DatasetPageData }> {
                     <h3>Charts</h3>
                     <ChartList charts={dataset.charts} />
                 </section>
-                <section>
-                    <h3>Archive</h3>
-                    <p>
-                        Archive this grapher dataset to remove it from the main
-                        list of active datasets.
-                    </p>
-                    {dataset.charts && dataset.charts.length > 0 ? (
-                        <p>
-                            <strong>
-                                This dataset cannot be archived because it
-                                contains charts.
-                            </strong>
-                        </p>
-                    ) : (
+
+                {/* ARCHIVE DATASET */}
+                {!dataset.isArchived && (
+                    <section>
+                        <h3>Archive</h3>
                         <p>
-                            <strong>Before archiving, ensure that:</strong>
-                            <ul>
-                                <li>
-                                    The corresponding ETL grapher step has been
-                                    archived:{" "}
-                                    <code>
-                                        grapher/{dataset.namespace}/
-                                        {dataset.version}/{dataset.shortName}
-                                    </code>
-                                </li>
-                                <li>
-                                    The dataset is not used in any
-                                    indicator-based explorers.
-                                </li>
-                            </ul>
+                            Archive this grapher dataset to remove it from the
+                            main list of active datasets.
                         </p>
-                    )}
-                    <button
-                        className="btn btn-outline-danger"
-                        onClick={() => this.archive()}
-                        disabled={dataset.charts && dataset.charts.length > 0}
-                    >
-                        Archive dataset
-                    </button>
-                </section>
+                        {dataset.charts && dataset.charts.length > 0 ? (
+                            <p>
+                                <strong>
+                                    This dataset cannot be archived because it
+                                    contains charts.
+                                </strong>
+                            </p>
+                        ) : (
+                            <p>
+                                <strong>Before archiving, ensure that:</strong>
+                                <ul>
+                                    <li>
+                                        The corresponding ETL grapher step has
+                                        been archived:{" "}
+                                        <code>
+                                            grapher/{dataset.namespace}/
+                                            {dataset.version}/
+                                            {dataset.shortName}
+                                        </code>
+                                    </li>
+                                    <li>
+                                        The dataset is not used in any
+                                        indicator-based explorers.
+                                    </li>
+                                </ul>
+                            </p>
+                        )}
+                        <button
+                            className="btn btn-outline-danger"
+                            onClick={() => this.archive()}
+                            disabled={
+                                dataset.charts && dataset.charts.length > 0
+                            }
+                        >
+                            Archive dataset
+                        </button>
+                    </section>
+                )}
             </main>
         )
     }
diff --git a/adminSiteClient/VariableEditPage.tsx b/adminSiteClient/VariableEditPage.tsx
index c819d0d973..3632ce1b58 100644
--- a/adminSiteClient/VariableEditPage.tsx
+++ b/adminSiteClient/VariableEditPage.tsx
@@ -212,6 +212,7 @@ class VariableEditor extends React.Component<{
                                         target="_blank"
                                         rel="noopener"
                                     >
+                                        {" "}
                                         garden level
                                     </a>
                                     ,{" "}
diff --git a/package.json b/package.json
index 4ff3b57944..02d066479a 100644
--- a/package.json
+++ b/package.json
@@ -152,7 +152,7 @@
         "s-expression": "^3.1.1",
         "safe-stable-stringify": "^2.4.1",
         "search-insights": "^2.14.0",
-        "sharp": "^0.32.5",
+        "sharp": "^0.33.5",
         "shell-quote": "^1.7.3",
         "shelljs": "^0.8.5",
         "simple-git": "^3.16.1",
diff --git a/yarn.lock b/yarn.lock
index ed079a8f19..fd5bece4c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1674,6 +1674,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emnapi/runtime@npm:^1.2.0":
+  version: 1.3.1
+  resolution: "@emnapi/runtime@npm:1.3.1"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10/619915ee44682356f77f60455025e667b0b04ad3c95ced36c03782aea9ebc066fa73e86c4a59d221177eba5e5533d40b3a6dbff4e58ee5d81db4270185c21e22
+  languageName: node
+  linkType: hard
+
 "@emotion/babel-plugin@npm:^11.10.0, @emotion/babel-plugin@npm:^11.11.0":
   version: 11.11.0
   resolution: "@emotion/babel-plugin@npm:11.11.0"
@@ -2325,6 +2334,181 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@img/sharp-darwin-arm64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-darwin-arm64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-darwin-arm64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-darwin-arm64":
+      optional: true
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-darwin-x64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-darwin-x64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-darwin-x64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-darwin-x64":
+      optional: true
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-darwin-arm64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.4"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-darwin-x64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.4"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-arm64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.4"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-arm@npm:1.0.5":
+  version: 1.0.5
+  resolution: "@img/sharp-libvips-linux-arm@npm:1.0.5"
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-s390x@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.4"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-x64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linux-x64@npm:1.0.4"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.4"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linuxmusl-x64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.4"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-arm64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linux-arm64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linux-arm64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-arm64":
+      optional: true
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-arm@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linux-arm@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linux-arm": "npm:1.0.5"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-arm":
+      optional: true
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-s390x@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linux-s390x@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linux-s390x": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-s390x":
+      optional: true
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-x64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linux-x64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linux-x64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-x64":
+      optional: true
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linuxmusl-arm64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linuxmusl-arm64":
+      optional: true
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linuxmusl-x64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linuxmusl-x64@npm:0.33.5"
+  dependencies:
+    "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linuxmusl-x64":
+      optional: true
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@img/sharp-wasm32@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-wasm32@npm:0.33.5"
+  dependencies:
+    "@emnapi/runtime": "npm:^1.2.0"
+  conditions: cpu=wasm32
+  languageName: node
+  linkType: hard
+
+"@img/sharp-win32-ia32@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-win32-ia32@npm:0.33.5"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@img/sharp-win32-x64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-win32-x64@npm:0.33.5"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@isaacs/cliui@npm:^8.0.2":
   version: 8.0.2
   resolution: "@isaacs/cliui@npm:8.0.2"
@@ -6672,13 +6856,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"b4a@npm:^1.6.4":
-  version: 1.6.4
-  resolution: "b4a@npm:1.6.4"
-  checksum: 10/223158e626a7e024a8d945ce85e7d8871c0689c0375c5b0df5880eedcb5683a12eeb3557591ff5ccd515f3ee8d1664e370c6ff7917fa257405571b81b946604a
-  languageName: node
-  linkType: hard
-
 "babel-jest@npm:^29.7.0":
   version: 29.7.0
   resolution: "babel-jest@npm:29.7.0"
@@ -7339,13 +7516,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chownr@npm:^1.1.1":
-  version: 1.1.4
-  resolution: "chownr@npm:1.1.4"
-  checksum: 10/115648f8eb38bac5e41c3857f3e663f9c39ed6480d1349977c4d96c95a47266fcacc5a5aabf3cb6c481e22d72f41992827db47301851766c4fd77ac21a4f081d
-  languageName: node
-  linkType: hard
-
 "chownr@npm:^2.0.0":
   version: 2.0.0
   resolution: "chownr@npm:2.0.0"
@@ -8670,15 +8840,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"decompress-response@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "decompress-response@npm:6.0.0"
-  dependencies:
-    mimic-response: "npm:^3.1.0"
-  checksum: 10/d377cf47e02d805e283866c3f50d3d21578b779731e8c5072d6ce8c13cc31493db1c2f6784da9d1d5250822120cefa44f1deab112d5981015f2e17444b763812
-  languageName: node
-  linkType: hard
-
 "dedent@npm:1.5.3, dedent@npm:^1.0.0":
   version: 1.5.3
   resolution: "dedent@npm:1.5.3"
@@ -8691,13 +8852,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deep-extend@npm:^0.6.0":
-  version: 0.6.0
-  resolution: "deep-extend@npm:0.6.0"
-  checksum: 10/7be7e5a8d468d6b10e6a67c3de828f55001b6eb515d014f7aeb9066ce36bd5717161eb47d6a0f7bed8a9083935b465bc163ee2581c8b128d29bf61092fdf57a7
-  languageName: node
-  linkType: hard
-
 "deep-is@npm:^0.1.3":
   version: 0.1.3
   resolution: "deep-is@npm:0.1.3"
@@ -8813,13 +8967,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-libc@npm:^2.0.0, detect-libc@npm:^2.0.2":
+"detect-libc@npm:^2.0.0":
   version: 2.0.2
   resolution: "detect-libc@npm:2.0.2"
   checksum: 10/6118f30c0c425b1e56b9d2609f29bec50d35a6af0b762b6ad127271478f3bbfda7319ce869230cf1a351f2b219f39332cde290858553336d652c77b970f15de8
   languageName: node
   linkType: hard
 
+"detect-libc@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "detect-libc@npm:2.0.3"
+  checksum: 10/b4ea018d623e077bd395f168a9e81db77370dde36a5b01d067f2ad7989924a81d31cb547ff764acb2aa25d50bb7fdde0b0a93bec02212b0cb430621623246d39
+  languageName: node
+  linkType: hard
+
 "detect-newline@npm:^3.0.0":
   version: 3.1.0
   resolution: "detect-newline@npm:3.1.0"
@@ -9985,13 +10146,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expand-template@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "expand-template@npm:2.0.3"
-  checksum: 10/588c19847216421ed92befb521767b7018dc88f88b0576df98cb242f20961425e96a92cbece525ef28cc5becceae5d544ae0f5b9b5e2aa05acb13716ca5b3099
-  languageName: node
-  linkType: hard
-
 "expect@npm:^29.0.0, expect@npm:^29.7.0":
   version: 29.7.0
   resolution: "expect@npm:29.7.0"
@@ -10130,13 +10284,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-fifo@npm:^1.1.0, fast-fifo@npm:^1.2.0":
-  version: 1.3.2
-  resolution: "fast-fifo@npm:1.3.2"
-  checksum: 10/6bfcba3e4df5af7be3332703b69a7898a8ed7020837ec4395bb341bd96cc3a6d86c3f6071dd98da289618cf2234c70d84b2a6f09a33dd6f988b1ff60d8e54275
-  languageName: node
-  linkType: hard
-
 "fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
@@ -10821,13 +10968,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"github-from-package@npm:0.0.0":
-  version: 0.0.0
-  resolution: "github-from-package@npm:0.0.0"
-  checksum: 10/2a091ba07fbce22205642543b4ea8aaf068397e1433c00ae0f9de36a3607baf5bcc14da97fbb798cfca6393b3c402031fca06d8b491a44206d6efef391c58537
-  languageName: node
-  linkType: hard
-
 "glob-parent@npm:6.0.2, glob-parent@npm:^6.0.2":
   version: 6.0.2
   resolution: "glob-parent@npm:6.0.2"
@@ -11205,7 +11345,7 @@ __metadata:
     safe-stable-stringify: "npm:^2.4.1"
     sass: "npm:^1.77.8"
     search-insights: "npm:^2.14.0"
-    sharp: "npm:^0.32.5"
+    sharp: "npm:^0.33.5"
     shell-quote: "npm:^1.7.3"
     shelljs: "npm:^0.8.5"
     simple-git: "npm:^3.16.1"
@@ -11804,7 +11944,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ini@npm:^1.3.2, ini@npm:^1.3.8, ini@npm:~1.3.0":
+"ini@npm:^1.3.2, ini@npm:^1.3.8":
   version: 1.3.8
   resolution: "ini@npm:1.3.8"
   checksum: 10/314ae176e8d4deb3def56106da8002b462221c174ddb7ce0c49ee72c8cd1f9044f7b10cc555a7d8850982c3b9ca96fc212122749f5234bc2b6fb05fb942ed566
@@ -14252,13 +14392,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mimic-response@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "mimic-response@npm:3.1.0"
-  checksum: 10/7e719047612411fe071332a7498cf0448bbe43c485c0d780046c76633a771b223ff49bd00267be122cedebb897037fdb527df72335d0d0f74724604ca70b37ad
-  languageName: node
-  linkType: hard
-
 "min-indent@npm:^1.0.0":
   version: 1.0.1
   resolution: "min-indent@npm:1.0.1"
@@ -14366,7 +14499,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.2.0, minimist@npm:^1.2.3, minimist@npm:^1.2.5, minimist@npm:^1.2.6":
+"minimist@npm:^1.2.0, minimist@npm:^1.2.5, minimist@npm:^1.2.6":
   version: 1.2.8
   resolution: "minimist@npm:1.2.8"
   checksum: 10/908491b6cc15a6c440ba5b22780a0ba89b9810e1aea684e253e43c4e3b8d56ec1dcdd7ea96dde119c29df59c936cde16062159eae4225c691e19c70b432b6e6f
@@ -14464,13 +14597,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mkdirp-classic@npm:^0.5.2, mkdirp-classic@npm:^0.5.3":
-  version: 0.5.3
-  resolution: "mkdirp-classic@npm:0.5.3"
-  checksum: 10/3f4e088208270bbcc148d53b73e9a5bd9eef05ad2cbf3b3d0ff8795278d50dd1d11a8ef1875ff5aea3fa888931f95bfcb2ad5b7c1061cfefd6284d199e6776ac
-  languageName: node
-  linkType: hard
-
 "mkdirp@npm:0.3.0":
   version: 0.3.0
   resolution: "mkdirp@npm:0.3.0"
@@ -14673,13 +14799,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"napi-build-utils@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "napi-build-utils@npm:1.0.1"
-  checksum: 10/34fdb8d5b16d59eb4f22af3ab2411241157c5a639d8d8ad25102e8ecc877f1b4e42c68b87cb7eb8b1955adf5b6f2381b9ffcbc2e7b4d3c704908a48add52dd47
-  languageName: node
-  linkType: hard
-
 "natural-compare@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare@npm:1.4.0"
@@ -14718,15 +14837,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-abi@npm:^3.3.0":
-  version: 3.8.0
-  resolution: "node-abi@npm:3.8.0"
-  dependencies:
-    semver: "npm:^7.3.5"
-  checksum: 10/3b1c02aa2e5fa9c5e4d3c7c0bb33b6b5b7f3d6af42903a05de73c0a810d1015fd05486e3e66962f8d8a524e5e42946a4c50cb1a0d2624212b5b36b7fff18a8b9
-  languageName: node
-  linkType: hard
-
 "node-addon-api@npm:^5.0.0":
   version: 5.1.0
   resolution: "node-addon-api@npm:5.1.0"
@@ -14736,15 +14846,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-addon-api@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "node-addon-api@npm:6.1.0"
-  dependencies:
-    node-gyp: "npm:latest"
-  checksum: 10/8eea1d4d965930a177a0508695beb0d89b4c1d80bf330646a035357a1e8fc31e0d09686e2374996e96e757b947a7ece319f98ede3146683f162597c0bcb4df90
-  languageName: node
-  linkType: hard
-
 "node-domexception@npm:1.0.0":
   version: 1.0.0
   resolution: "node-domexception@npm:1.0.0"
@@ -16027,28 +16128,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prebuild-install@npm:^7.1.1":
-  version: 7.1.1
-  resolution: "prebuild-install@npm:7.1.1"
-  dependencies:
-    detect-libc: "npm:^2.0.0"
-    expand-template: "npm:^2.0.3"
-    github-from-package: "npm:0.0.0"
-    minimist: "npm:^1.2.3"
-    mkdirp-classic: "npm:^0.5.3"
-    napi-build-utils: "npm:^1.0.1"
-    node-abi: "npm:^3.3.0"
-    pump: "npm:^3.0.0"
-    rc: "npm:^1.2.7"
-    simple-get: "npm:^4.0.0"
-    tar-fs: "npm:^2.0.0"
-    tunnel-agent: "npm:^0.6.0"
-  bin:
-    prebuild-install: bin.js
-  checksum: 10/6c70a2f82fbda8903497c560a761b000d861a3e772322c8bed012be0f0a084b5aaca4438a3fad1bd3a24210765f4fae06ddd89ea04dc4c034dde693cc0d9d5f4
-  languageName: node
-  linkType: hard
-
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"
@@ -16323,13 +16402,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"queue-tick@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "queue-tick@npm:1.0.1"
-  checksum: 10/f447926c513b64a857906f017a3b350f7d11277e3c8d2a21a42b7998fa1a613d7a829091e12d142bb668905c8f68d8103416c7197856efb0c72fa835b8e254b5
-  languageName: node
-  linkType: hard
-
 "quick-lru@npm:^4.0.1":
   version: 4.0.1
   resolution: "quick-lru@npm:4.0.1"
@@ -16941,20 +17013,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc@npm:^1.2.7":
-  version: 1.2.8
-  resolution: "rc@npm:1.2.8"
-  dependencies:
-    deep-extend: "npm:^0.6.0"
-    ini: "npm:~1.3.0"
-    minimist: "npm:^1.2.0"
-    strip-json-comments: "npm:~2.0.1"
-  bin:
-    rc: ./cli.js
-  checksum: 10/5c4d72ae7eec44357171585938c85ce066da8ca79146b5635baf3d55d74584c92575fa4e2c9eac03efbed3b46a0b2e7c30634c012b4b4fa40d654353d3c163eb
-  languageName: node
-  linkType: hard
-
 "react-animate-height@npm:^3.1.1":
   version: 3.1.1
   resolution: "react-animate-height@npm:3.1.1"
@@ -18244,20 +18302,72 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sharp@npm:^0.32.5":
-  version: 0.32.6
-  resolution: "sharp@npm:0.32.6"
-  dependencies:
+"sharp@npm:^0.33.5":
+  version: 0.33.5
+  resolution: "sharp@npm:0.33.5"
+  dependencies:
+    "@img/sharp-darwin-arm64": "npm:0.33.5"
+    "@img/sharp-darwin-x64": "npm:0.33.5"
+    "@img/sharp-libvips-darwin-arm64": "npm:1.0.4"
+    "@img/sharp-libvips-darwin-x64": "npm:1.0.4"
+    "@img/sharp-libvips-linux-arm": "npm:1.0.5"
+    "@img/sharp-libvips-linux-arm64": "npm:1.0.4"
+    "@img/sharp-libvips-linux-s390x": "npm:1.0.4"
+    "@img/sharp-libvips-linux-x64": "npm:1.0.4"
+    "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.4"
+    "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.4"
+    "@img/sharp-linux-arm": "npm:0.33.5"
+    "@img/sharp-linux-arm64": "npm:0.33.5"
+    "@img/sharp-linux-s390x": "npm:0.33.5"
+    "@img/sharp-linux-x64": "npm:0.33.5"
+    "@img/sharp-linuxmusl-arm64": "npm:0.33.5"
+    "@img/sharp-linuxmusl-x64": "npm:0.33.5"
+    "@img/sharp-wasm32": "npm:0.33.5"
+    "@img/sharp-win32-ia32": "npm:0.33.5"
+    "@img/sharp-win32-x64": "npm:0.33.5"
     color: "npm:^4.2.3"
-    detect-libc: "npm:^2.0.2"
-    node-addon-api: "npm:^6.1.0"
-    node-gyp: "npm:latest"
-    prebuild-install: "npm:^7.1.1"
-    semver: "npm:^7.5.4"
-    simple-get: "npm:^4.0.1"
-    tar-fs: "npm:^3.0.4"
-    tunnel-agent: "npm:^0.6.0"
-  checksum: 10/f0e4a86881e590f86b05ea463229f62cd29afc2dca08b3f597889f872f118c2c456f382bf2c3e90e934b7a1d30f109cf5ed584cf5a23e79d6b6403a8dc0ebe32
+    detect-libc: "npm:^2.0.3"
+    semver: "npm:^7.6.3"
+  dependenciesMeta:
+    "@img/sharp-darwin-arm64":
+      optional: true
+    "@img/sharp-darwin-x64":
+      optional: true
+    "@img/sharp-libvips-darwin-arm64":
+      optional: true
+    "@img/sharp-libvips-darwin-x64":
+      optional: true
+    "@img/sharp-libvips-linux-arm":
+      optional: true
+    "@img/sharp-libvips-linux-arm64":
+      optional: true
+    "@img/sharp-libvips-linux-s390x":
+      optional: true
+    "@img/sharp-libvips-linux-x64":
+      optional: true
+    "@img/sharp-libvips-linuxmusl-arm64":
+      optional: true
+    "@img/sharp-libvips-linuxmusl-x64":
+      optional: true
+    "@img/sharp-linux-arm":
+      optional: true
+    "@img/sharp-linux-arm64":
+      optional: true
+    "@img/sharp-linux-s390x":
+      optional: true
+    "@img/sharp-linux-x64":
+      optional: true
+    "@img/sharp-linuxmusl-arm64":
+      optional: true
+    "@img/sharp-linuxmusl-x64":
+      optional: true
+    "@img/sharp-wasm32":
+      optional: true
+    "@img/sharp-win32-ia32":
+      optional: true
+    "@img/sharp-win32-x64":
+      optional: true
+  checksum: 10/9f153578cb02735359cbcc874f52b56b8074ed997498c35255c7099d4f4f506f6ddf83a437a55242c7ad4f979336660504b6c78e29d6933f4981dedbdae5ce09
   languageName: node
   linkType: hard
 
@@ -18337,24 +18447,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"simple-concat@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "simple-concat@npm:1.0.1"
-  checksum: 10/4d211042cc3d73a718c21ac6c4e7d7a0363e184be6a5ad25c8a1502e49df6d0a0253979e3d50dbdd3f60ef6c6c58d756b5d66ac1e05cda9cacd2e9fc59e3876a
-  languageName: node
-  linkType: hard
-
-"simple-get@npm:^4.0.0, simple-get@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "simple-get@npm:4.0.1"
-  dependencies:
-    decompress-response: "npm:^6.0.0"
-    once: "npm:^1.3.1"
-    simple-concat: "npm:^1.0.0"
-  checksum: 10/93f1b32319782f78f2f2234e9ce34891b7ab6b990d19d8afefaa44423f5235ce2676aae42d6743fecac6c8dfff4b808d4c24fe5265be813d04769917a9a44f36
-  languageName: node
-  linkType: hard
-
 "simple-git@npm:^3.16.1":
   version: 3.16.1
   resolution: "simple-git@npm:3.16.1"
@@ -18697,16 +18789,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"streamx@npm:^2.15.0":
-  version: 2.15.1
-  resolution: "streamx@npm:2.15.1"
-  dependencies:
-    fast-fifo: "npm:^1.1.0"
-    queue-tick: "npm:^1.0.1"
-  checksum: 10/5c5143d832b4d4c2cba09d3e77dcc099f62bfc44bffac38e7b196cdd7f17dcd46bc2012c614fad934c0d706712c2e9455e485435810504cf748906b2f1746837
-  languageName: node
-  linkType: hard
-
 "string-argv@npm:~0.3.2":
   version: 0.3.2
   resolution: "string-argv@npm:0.3.2"
@@ -18917,13 +18999,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-json-comments@npm:~2.0.1":
-  version: 2.0.1
-  resolution: "strip-json-comments@npm:2.0.1"
-  checksum: 10/1074ccb63270d32ca28edfb0a281c96b94dc679077828135141f27d52a5a398ef5e78bcf22809d23cadc2b81dfbe345eb5fd8699b385c8b1128907dec4a7d1e1
-  languageName: node
-  linkType: hard
-
 "strip-outer@npm:^1.0.1":
   version: 1.0.1
   resolution: "strip-outer@npm:1.0.1"
@@ -19074,30 +19149,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tar-fs@npm:^2.0.0":
-  version: 2.1.1
-  resolution: "tar-fs@npm:2.1.1"
-  dependencies:
-    chownr: "npm:^1.1.1"
-    mkdirp-classic: "npm:^0.5.2"
-    pump: "npm:^3.0.0"
-    tar-stream: "npm:^2.1.4"
-  checksum: 10/526deae025453e825f87650808969662fbb12eb0461d033e9b447de60ec951c6c4607d0afe7ce057defe9d4e45cf80399dd74bc15f9d9e0773d5e990a78ce4ac
-  languageName: node
-  linkType: hard
-
-"tar-fs@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "tar-fs@npm:3.0.4"
-  dependencies:
-    mkdirp-classic: "npm:^0.5.2"
-    pump: "npm:^3.0.0"
-    tar-stream: "npm:^3.1.5"
-  checksum: 10/070f35bdde283dbcb05cd22abd5fc1b6df2f190688b8a82d62eadb1fd873e4602586218e88e722b3f292441a651dfb27a9b8e7ef8db6ba5601f93a57a540856a
-  languageName: node
-  linkType: hard
-
-"tar-stream@npm:^2.1.4, tar-stream@npm:~2.2.0":
+"tar-stream@npm:~2.2.0":
   version: 2.2.0
   resolution: "tar-stream@npm:2.2.0"
   dependencies:
@@ -19110,17 +19162,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tar-stream@npm:^3.1.5":
-  version: 3.1.6
-  resolution: "tar-stream@npm:3.1.6"
-  dependencies:
-    b4a: "npm:^1.6.4"
-    fast-fifo: "npm:^1.2.0"
-    streamx: "npm:^2.15.0"
-  checksum: 10/2c32e0d57de778ae415357bfb126a512a384e9bfb8e234920455ad65282181a3765515bbd80392ab8e7e630158376ec7de46b18ab86a33d256a7dcc43b0648b7
-  languageName: node
-  linkType: hard
-
 "tar@npm:6.2.1, tar@npm:^6.1.11, tar@npm:^6.1.2":
   version: 6.2.1
   resolution: "tar@npm:6.2.1"

From 747b80f62299ea096c68b82110ed10d07c7a5205 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Rod=C3=A9s-Guirao?=
 <lucasrodes@users.noreply.github.com>
Date: Mon, 6 Jan 2025 19:10:31 +0100
Subject: [PATCH 15/29] new table for chart (and possibly other objects)
 revisions (#4387)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* init

* init

* 🤖 style: prettify code
---
 ...6177572560-HousekeepingSuggestedReviews.ts | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 db/migration/1736177572560-HousekeepingSuggestedReviews.ts

diff --git a/db/migration/1736177572560-HousekeepingSuggestedReviews.ts b/db/migration/1736177572560-HousekeepingSuggestedReviews.ts
new file mode 100644
index 0000000000..9a1a07d308
--- /dev/null
+++ b/db/migration/1736177572560-HousekeepingSuggestedReviews.ts
@@ -0,0 +1,20 @@
+import { MigrationInterface, QueryRunner } from "typeorm"
+
+export class HousekeepingSuggestedReviews1736177572560
+    implements MigrationInterface
+{
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`-- sql
+            CREATE TABLE housekeeping_suggested_reviews (
+                id INTEGER NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT "Identifier of the review",
+                suggestedAt TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT "Date where the review was suggested",
+                objectType VARCHAR(255) NOT NULL UNIQUE COMMENT "Type of the object to review (e.g. 'chart', 'dataset', etc.)",
+                objectId CHAR(36) NOT NULL COMMENT "ID of the object to review"
+            )
+        `)
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`DROP TABLE housekeeping_suggested_reviews`)
+    }
+}

From 0652855d6eb2fdf0243773d1d569fd1ab395ca56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Rod=C3=A9s-Guirao?=
 <lucasrodes@users.noreply.github.com>
Date: Mon, 6 Jan 2025 20:46:49 +0100
Subject: [PATCH 16/29] Update db table types (#4388)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* change db table type

* 🤖 style: prettify code
---
 ...8395813-UpdateHousekeepingSuggestedReviews.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 db/migration/1736188395813-UpdateHousekeepingSuggestedReviews.ts

diff --git a/db/migration/1736188395813-UpdateHousekeepingSuggestedReviews.ts b/db/migration/1736188395813-UpdateHousekeepingSuggestedReviews.ts
new file mode 100644
index 0000000000..6ce84a20a4
--- /dev/null
+++ b/db/migration/1736188395813-UpdateHousekeepingSuggestedReviews.ts
@@ -0,0 +1,16 @@
+import { MigrationInterface, QueryRunner } from "typeorm"
+
+export class HousekeepingSuggestedReviews1736188395813
+    implements MigrationInterface
+{
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`-- sql
+            ALTER TABLE housekeeping_suggested_reviews
+            MODIFY COLUMN objectId INTEGER NOT NULL;
+        `)
+    }
+
+    public async down(): Promise<void> {}
+}
+
+// ALTER TABLE employees

From 997a3c463ce4eb75759fd94b9f9225a9605754b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Rod=C3=A9s-Guirao?=
 <lucasrodes@users.noreply.github.com>
Date: Tue, 7 Jan 2025 01:23:31 +0100
Subject: [PATCH 17/29] edit migration further (#4389)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* migration

* 🤖 style: prettify code

* add annotation
---
 ...188395813-UpdateHousekeepingSuggestedReviews.ts |  3 +--
 ...06740420-UpdateHousekeepingSuggestedReviews2.ts | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 db/migration/1736206740420-UpdateHousekeepingSuggestedReviews2.ts

diff --git a/db/migration/1736188395813-UpdateHousekeepingSuggestedReviews.ts b/db/migration/1736188395813-UpdateHousekeepingSuggestedReviews.ts
index 6ce84a20a4..09bd3832f5 100644
--- a/db/migration/1736188395813-UpdateHousekeepingSuggestedReviews.ts
+++ b/db/migration/1736188395813-UpdateHousekeepingSuggestedReviews.ts
@@ -10,7 +10,6 @@ export class HousekeepingSuggestedReviews1736188395813
         `)
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     public async down(): Promise<void> {}
 }
-
-// ALTER TABLE employees
diff --git a/db/migration/1736206740420-UpdateHousekeepingSuggestedReviews2.ts b/db/migration/1736206740420-UpdateHousekeepingSuggestedReviews2.ts
new file mode 100644
index 0000000000..19ed46a466
--- /dev/null
+++ b/db/migration/1736206740420-UpdateHousekeepingSuggestedReviews2.ts
@@ -0,0 +1,14 @@
+import { MigrationInterface, QueryRunner } from "typeorm"
+
+export class UpdateHousekeepingSuggestedReviews21736206740420
+    implements MigrationInterface
+{
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`-- sql
+            ALTER TABLE housekeeping_suggested_reviews DROP INDEX objectType;
+        `)
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    public async down(): Promise<void> {}
+}

From d29a33f11abe5f3a8e91349d076425a319d9ceea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Rod=C3=A9s-Guirao?=
 <lucasrodes@users.noreply.github.com>
Date: Tue, 7 Jan 2025 02:46:39 +0100
Subject: [PATCH 18/29] housekeeper: this pr fixes all previous migrations
 (#4390)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix all migrations

* 🤖 style: prettify code

* create if not exists
---
 ...36177572560-HousekeepingSuggestedReviews.ts |  2 +-
 ...59039-RemoveHousekeepingSuggestedReviews.ts | 16 ++++++++++++++++
 .../1736209905900-CreateHousekeeper.ts         | 18 ++++++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 db/migration/1736209759039-RemoveHousekeepingSuggestedReviews.ts
 create mode 100644 db/migration/1736209905900-CreateHousekeeper.ts

diff --git a/db/migration/1736177572560-HousekeepingSuggestedReviews.ts b/db/migration/1736177572560-HousekeepingSuggestedReviews.ts
index 9a1a07d308..297a8bffd9 100644
--- a/db/migration/1736177572560-HousekeepingSuggestedReviews.ts
+++ b/db/migration/1736177572560-HousekeepingSuggestedReviews.ts
@@ -5,7 +5,7 @@ export class HousekeepingSuggestedReviews1736177572560
 {
     public async up(queryRunner: QueryRunner): Promise<void> {
         await queryRunner.query(`-- sql
-            CREATE TABLE housekeeping_suggested_reviews (
+            CREATE TABLE IF NOT EXISTS housekeeping_suggested_reviews (
                 id INTEGER NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT "Identifier of the review",
                 suggestedAt TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT "Date where the review was suggested",
                 objectType VARCHAR(255) NOT NULL UNIQUE COMMENT "Type of the object to review (e.g. 'chart', 'dataset', etc.)",
diff --git a/db/migration/1736209759039-RemoveHousekeepingSuggestedReviews.ts b/db/migration/1736209759039-RemoveHousekeepingSuggestedReviews.ts
new file mode 100644
index 0000000000..ad69c8ca05
--- /dev/null
+++ b/db/migration/1736209759039-RemoveHousekeepingSuggestedReviews.ts
@@ -0,0 +1,16 @@
+import { MigrationInterface, QueryRunner } from "typeorm"
+
+export class RemoveHousekeepingSuggestedReviews1736209759039
+    implements MigrationInterface
+{
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(
+            `DROP TABLE IF EXISTS housekeeping_suggested_reviews`
+        )
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    public async down(_queryRunner: QueryRunner): Promise<void> {
+        return
+    }
+}
diff --git a/db/migration/1736209905900-CreateHousekeeper.ts b/db/migration/1736209905900-CreateHousekeeper.ts
new file mode 100644
index 0000000000..20f35a2c6e
--- /dev/null
+++ b/db/migration/1736209905900-CreateHousekeeper.ts
@@ -0,0 +1,18 @@
+import { MigrationInterface, QueryRunner } from "typeorm"
+
+export class CreateHousekeeper1736209905900 implements MigrationInterface {
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`-- sql
+            CREATE TABLE housekeeper_reviews (
+                id INTEGER NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT "Identifier of the review",
+                suggestedAt TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT "Date where the review was suggested",
+                objectType VARCHAR(255) NOT NULL COMMENT "Type of the object to review (e.g. 'chart', 'dataset', etc.)",
+                objectId INTEGER NOT NULL COMMENT "ID of the object to review"
+            )
+        `)
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`DROP TABLE housekeeper_reviews`)
+    }
+}

From ebc85637f2e49c16ceebef4b772ce01bfd27896e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <martin.racak@ourworldindata.org>
Date: Mon, 23 Dec 2024 15:17:52 +0100
Subject: [PATCH 19/29] Run `npx react-codemod update-react-imports`

Since React 17 we no longer need to import React for JSX transforms.
Running this codemod:

* Removes all unused React imports as a result of upgrading to the new
  JSX transform.
* Changes all default React imports (i.e. import React from "react") to
  destructured named imports (ex. import { useState } from "react") which
  is the preferred style going into the future.

These cannot be separated, even though we now only needed to remove the
unused imports.
---
 adminShared/search.tsx                        |  2 +-
 adminSiteClient/Admin.tsx                     |  1 -
 adminSiteClient/AdminApp.tsx                  |  2 +-
 adminSiteClient/AdminAppContext.ts            |  2 +-
 adminSiteClient/AdminLayout.tsx               |  2 +-
 adminSiteClient/AdminSidebar.tsx              |  2 +-
 adminSiteClient/BulkDownloadPage.tsx          |  6 +++---
 adminSiteClient/BulkGrapherConfigEditor.tsx   |  4 ++--
 adminSiteClient/ChartEditorView.tsx           |  2 +-
 adminSiteClient/ChartIndexPage.tsx            |  4 ++--
 adminSiteClient/ChartList.tsx                 |  2 +-
 adminSiteClient/ChartRow.tsx                  |  2 +-
 adminSiteClient/ChartViewIndexPage.tsx        |  3 ++-
 adminSiteClient/ColorSchemeDropdown.tsx       |  4 ++--
 adminSiteClient/Colorpicker.tsx               |  8 ++++----
 adminSiteClient/DatasetEditPage.tsx           |  8 ++++----
 adminSiteClient/DatasetList.tsx               |  2 +-
 adminSiteClient/DatasetsIndexPage.tsx         |  4 ++--
 adminSiteClient/DeployStatusPage.tsx          |  4 ++--
 adminSiteClient/DimensionCard.tsx             |  8 ++++----
 adminSiteClient/EditTags.tsx                  |  6 +++---
 adminSiteClient/EditableTags.tsx              |  2 +-
 adminSiteClient/EditorBasicTab.tsx            |  2 +-
 adminSiteClient/EditorColorScaleSection.tsx   | 20 +++++++++----------
 adminSiteClient/EditorCustomizeTab.tsx        |  2 +-
 adminSiteClient/EditorDataTab.tsx             |  2 +-
 adminSiteClient/EditorDebugTab.tsx            | 10 +++++-----
 adminSiteClient/EditorExportTab.tsx           |  4 ++--
 adminSiteClient/EditorFAQ.tsx                 |  4 ++--
 adminSiteClient/EditorHistoryTab.tsx          |  6 +++---
 adminSiteClient/EditorMapTab.tsx              | 14 ++++++-------
 adminSiteClient/EditorMarimekkoTab.tsx        |  4 ++--
 adminSiteClient/EditorReferencesTab.tsx       | 16 +++++++--------
 adminSiteClient/EditorScatterTab.tsx          |  4 ++--
 adminSiteClient/EditorTextTab.tsx             |  4 ++--
 adminSiteClient/ExplorerTagsPage.tsx          |  4 ++--
 adminSiteClient/Forms.tsx                     |  2 +-
 adminSiteClient/GdocsAdd.tsx                  |  2 +-
 adminSiteClient/GdocsBreadcrumbsInput.tsx     |  1 -
 adminSiteClient/GdocsDateline.tsx             |  1 -
 adminSiteClient/GdocsDiff.tsx                 |  1 -
 adminSiteClient/GdocsDiffButton.tsx           |  1 -
 adminSiteClient/GdocsEditLink.tsx             |  2 +-
 adminSiteClient/GdocsErrorHelp.tsx            |  1 -
 adminSiteClient/GdocsIndexPage.tsx            |  2 +-
 adminSiteClient/GdocsMoreMenu.tsx             |  1 -
 adminSiteClient/GdocsPreviewPage.tsx          |  9 ++-------
 adminSiteClient/GdocsPublicationContext.tsx   |  1 -
 adminSiteClient/GdocsSaveButtons.tsx          |  1 -
 adminSiteClient/GdocsSettingsContentField.tsx |  2 +-
 adminSiteClient/GdocsSettingsForms.tsx        |  1 -
 adminSiteClient/GdocsSlug.tsx                 |  2 +-
 adminSiteClient/GdocsStore.tsx                |  3 ++-
 adminSiteClient/GrapherConfigGridEditor.tsx   |  2 +-
 .../GrapherConfigGridEditorTypesAndUtils.tsx  |  1 -
 adminSiteClient/IconBadge.tsx                 |  2 +-
 adminSiteClient/ImagesIndexPage.tsx           |  5 +++--
 adminSiteClient/Link.tsx                      |  2 +-
 adminSiteClient/NotFoundPage.tsx              |  4 ++--
 adminSiteClient/OriginList.tsx                |  4 ++--
 adminSiteClient/PostEditorPage.tsx            |  6 +++---
 adminSiteClient/PostsIndexPage.tsx            |  6 +++---
 adminSiteClient/RedirectsIndexPage.tsx        |  6 +++---
 adminSiteClient/SaveButtons.tsx               | 12 +++++------
 adminSiteClient/SiteRedirectsIndexPage.tsx    |  2 +-
 adminSiteClient/SourceEditPage.tsx            |  6 +++---
 adminSiteClient/SourceList.tsx                |  4 ++--
 adminSiteClient/TagBadge.tsx                  |  2 +-
 adminSiteClient/TagBucketSortingIcon.tsx      |  1 -
 adminSiteClient/TagEditPage.tsx               |  6 +++---
 adminSiteClient/TagGraphPage.tsx              |  2 +-
 adminSiteClient/TagsIndexPage.tsx             |  4 ++--
 adminSiteClient/TestIndexPage.tsx             |  4 ++--
 adminSiteClient/UserEditPage.tsx              |  4 ++--
 adminSiteClient/UsersIndexPage.tsx            |  2 +-
 adminSiteClient/VariableEditPage.tsx          |  6 +++---
 adminSiteClient/VariableList.tsx              |  2 +-
 adminSiteClient/VariableSelector.tsx          |  2 +-
 adminSiteClient/VariablesAnnotationPage.tsx   |  4 ++--
 adminSiteClient/VariablesIndexPage.tsx        |  4 ++--
 adminSiteClient/VisionDeficiencies.tsx        |  4 ++--
 adminSiteClient/gdocsNotifications.tsx        |  2 +-
 adminSiteServer/IndexPage.tsx                 |  1 -
 adminSiteServer/LoginPage.tsx                 |  2 --
 adminSiteServer/adminRouter.tsx               |  2 +-
 adminSiteServer/appClass.tsx                  |  1 -
 adminSiteServer/testPageRouter.tsx            |  1 -
 baker/GrapherBaker.tsx                        |  1 -
 baker/MultiDimBaker.tsx                       |  1 -
 baker/algolia/utils/pages.ts                  |  6 +++---
 baker/countryProfiles.tsx                     |  1 -
 baker/formatWordpressPost.tsx                 |  1 -
 baker/siteRenderers.tsx                       |  1 -
 .../ExplorerCreatePage.jsdom.test.tsx         |  5 +----
 explorerAdminClient/ExplorerCreatePage.tsx    | 12 +++++------
 explorerAdminClient/ExplorersListPage.tsx     |  8 ++++----
 .../components/src/Button/Button.tsx          |  1 -
 .../components/src/Checkbox.tsx               |  2 +-
 .../src/CodeSnippet/CodeSnippet.stories.tsx   |  2 +-
 .../src/CodeSnippet/CodeSnippet.tsx           |  2 +-
 .../src/DataCitation/DataCitation.tsx         |  1 -
 .../src/ExpandableToggle/ExpandableToggle.tsx |  3 ++-
 .../components/src/Halo/Halo.tsx              |  2 +-
 .../src/IndicatorKeyData/IndicatorKeyData.tsx |  2 +-
 .../IndicatorProcessing.tsx                   |  1 -
 .../src/IndicatorSources/IndicatorSources.tsx |  2 +-
 .../src/LabeledSwitch/LabeledSwitch.tsx       |  2 +-
 .../MarkdownTextWrap.stories.tsx              |  3 ++-
 .../src/MarkdownTextWrap/MarkdownTextWrap.tsx |  3 ++-
 .../components/src/OverlayHeader.tsx          |  2 +-
 .../components/src/RadioButton.tsx            |  2 +-
 .../components/src/SimpleMarkdownText.tsx     |  2 +-
 .../src/TextWrap/TextWrap.stories.tsx         |  2 +-
 .../components/src/TextWrap/TextWrap.tsx      |  2 +-
 .../components/src/TextWrap/TextWrapGroup.tsx |  2 +-
 .../src/closeButton/CloseButton.tsx           |  2 +-
 .../explorer/src/Explorer.sample.tsx          |  1 -
 .../src/ExplorerControls.jsdom.test.tsx       |  5 +----
 .../explorer/src/ExplorerControls.tsx         |  6 +++---
 .../grapher/src/axis/AxisViews.jsdom.test.tsx |  5 +----
 .../grapher/src/axis/AxisViews.tsx            |  2 +-
 .../barCharts/DiscreteBarChart.stories.tsx    |  2 +-
 .../grapher/src/bodyDiv/BodyDiv.tsx           |  2 +-
 .../captionedChart/CaptionedChart.stories.tsx |  2 +-
 .../src/captionedChart/CaptionedChart.tsx     |  2 +-
 .../grapher/src/captionedChart/Logos.tsx      |  2 +-
 .../grapher/src/chart/ChartManager.ts         |  2 +-
 .../grapher/src/chart/ChartTypeSwitcher.tsx   |  2 +-
 .../grapher/src/chart/ChartUtils.tsx          |  2 +-
 .../grapher/src/controls/ActionButtons.tsx    |  3 ++-
 .../grapher/src/controls/ChartIcons.tsx       |  2 +-
 .../src/controls/CommandPalette.stories.tsx   |  2 +-
 .../grapher/src/controls/CommandPalette.tsx   |  2 +-
 .../grapher/src/controls/ContentSwitchers.tsx |  2 +-
 .../grapher/src/controls/Dropdown.tsx         |  2 +-
 .../src/controls/EntitySelectionToggle.tsx    |  2 +-
 .../src/controls/MapProjectionMenu.tsx        |  2 +-
 .../grapher/src/controls/SettingsMenu.tsx     |  2 +-
 .../grapher/src/controls/ShareMenu.tsx        |  2 +-
 .../grapher/src/controls/SortIcon.tsx         |  2 +-
 .../src/controls/VerticalScrollContainer.tsx  |  4 +++-
 .../src/controls/controlsRow/ControlsRow.tsx  |  4 ++--
 .../controls/entityPicker/EntityPicker.tsx    |  2 +-
 .../GlobalEntitySelector.jsdom.test.tsx       |  6 +-----
 .../GlobalEntitySelector.stories.tsx          |  2 +-
 .../GlobalEntitySelector.tsx                  |  2 +-
 .../src/controls/settings/AbsRelToggle.tsx    |  2 +-
 .../src/controls/settings/AxisScaleToggle.tsx |  2 +-
 .../settings/FacetStrategySelector.tsx        |  2 +-
 .../controls/settings/FacetYDomainToggle.tsx  |  2 +-
 .../controls/settings/NoDataAreaToggle.tsx    |  2 +-
 .../controls/settings/TableFilterToggle.tsx   |  2 +-
 .../src/controls/settings/ZoomToggle.tsx      |  2 +-
 .../grapher/src/core/Grapher.stories.tsx      |  2 +-
 .../src/dataTable/DataTable.jsdom.test.tsx    |  6 +-----
 .../src/dataTable/DataTable.stories.tsx       |  2 +-
 .../grapher/src/dataTable/DataTable.tsx       |  2 +-
 .../src/entitySelector/EntitySelector.tsx     |  2 +-
 .../src/facetChart/FacetChart.stories.tsx     |  2 +-
 .../grapher/src/footer/Footer.stories.tsx     |  2 +-
 .../grapher/src/footer/Footer.tsx             |  2 +-
 .../grapher/src/fullScreen/FullScreen.tsx     |  2 +-
 .../grapher/src/header/Header.stories.tsx     |  2 +-
 .../grapher/src/header/Header.tsx             |  2 +-
 .../HorizontalColorLegends.tsx                |  2 +-
 .../src/lineCharts/LineChart.stories.tsx      |  2 +-
 .../src/lineLegend/LineLegend.stories.tsx     |  2 +-
 .../grapher/src/lineLegend/LineLegend.tsx     |  2 +-
 .../LoadingIndicator.stories.tsx              |  2 +-
 .../src/loadingIndicator/LoadingIndicator.tsx |  2 +-
 .../src/mapCharts/MapChart.stories.tsx        |  2 +-
 .../grapher/src/mapCharts/MapSparkline.tsx    |  2 +-
 .../src/mapCharts/MapTooltip.jsdom.test.tsx   |  5 +----
 .../src/mapCharts/MapTooltip.stories.tsx      |  2 +-
 .../grapher/src/modal/DownloadIcons.tsx       |  2 --
 .../src/modal/DownloadModal.stories.tsx       |  2 +-
 .../grapher/src/modal/DownloadModal.tsx       |  3 ++-
 .../grapher/src/modal/EmbedModal.tsx          |  2 +-
 .../grapher/src/modal/EntitySelectorModal.tsx |  2 +-
 .../grapher/src/modal/Modal.tsx               |  2 +-
 .../grapher/src/modal/ModalHeader.tsx         |  1 -
 .../grapher/src/modal/SourcesDescriptions.tsx |  1 -
 .../grapher/src/modal/SourcesKeyDataTable.tsx |  6 +++---
 .../src/modal/SourcesModal.stories.tsx        |  2 +-
 .../grapher/src/modal/SourcesModal.tsx        |  2 +-
 .../src/noDataModal/NoDataModal.stories.tsx   |  2 +-
 .../grapher/src/noDataModal/NoDataModal.tsx   |  2 +-
 .../src/scatterCharts/ComparisonLine.tsx      |  2 +-
 .../scatterCharts/ConnectedScatterLegend.tsx  |  2 +-
 .../src/scatterCharts/MultiColorPolyline.tsx  |  2 +-
 .../src/scatterCharts/NoDataSection.tsx       |  2 +-
 .../ScatterPlotChart.stories.tsx              |  2 +-
 .../src/scatterCharts/ScatterPoints.tsx       |  2 +-
 .../scatterCharts/ScatterPointsWithLabels.tsx |  2 +-
 .../src/scatterCharts/ScatterSizeLegend.tsx   |  2 +-
 .../grapher/src/scatterCharts/Triangle.tsx    |  2 +-
 .../grapher/src/sidePanel/SidePanel.tsx       |  2 +-
 .../src/slideInDrawer/SlideInDrawer.tsx       |  2 +-
 .../src/slopeCharts/SlopeChart.stories.tsx    |  1 -
 .../StackedAreaChart.stories.tsx              |  2 +-
 .../src/stackedCharts/StackedAreaChart.tsx    |  2 +-
 .../stackedCharts/StackedBarChart.stories.tsx |  2 +-
 .../src/stackedCharts/StackedBarChart.tsx     |  2 +-
 .../StackedDiscreteBarChart.stories.tsx       |  2 +-
 .../grapher/src/tabs/ExpandableTabs.tsx       |  2 +-
 .../@ourworldindata/grapher/src/tabs/Tabs.tsx |  3 ++-
 .../timeline/TimelineComponent.stories.tsx    |  2 +-
 .../src/timeline/TimelineComponent.tsx        |  2 +-
 .../grapher/src/tooltip/Tooltip.tsx           |  2 +-
 .../grapher/src/tooltip/TooltipContents.tsx   |  2 +-
 .../grapher/src/tooltip/TooltipProps.ts       |  2 +-
 .../VerticalColorLegend.stories.tsx           |  2 +-
 .../VerticalColorLegend.tsx                   |  2 +-
 packages/@ourworldindata/utils/src/Tippy.tsx  |  2 +-
 packages/@ourworldindata/utils/src/Util.ts    |  2 +-
 site/AboutThisData.tsx                        |  1 -
 site/AlertBanner.tsx                          |  2 --
 site/BackToTopic.tsx                          |  2 +-
 site/BlogIndexPage.tsx                        |  1 -
 site/Breadcrumb/Breadcrumb.tsx                |  6 +++---
 site/Byline.tsx                               |  1 -
 site/ChartListItemVariant.tsx                 |  1 -
 site/CitationMeta.tsx                         |  6 +++---
 site/CookieNotice.tsx                         |  2 +-
 site/CookiePreferencesManager.tsx             |  2 +-
 site/CountriesIndexPage.tsx                   |  1 -
 site/CountryProfilePage.tsx                   |  1 -
 site/DataCatalog/DataCatalog.tsx              |  3 ++-
 site/DataCatalog/DataCatalogPage.tsx          |  1 -
 site/DataCatalog/DataCatalogSkeletons.tsx     |  1 -
 site/DataInsightsIndexPage.tsx                |  1 -
 site/DataInsightsIndexPageContent.tsx         |  1 -
 site/DataInsightsNewsletterBanner.tsx         |  1 -
 site/DataPageV2.tsx                           |  1 -
 site/DataPageV2Content.tsx                    |  4 ++--
 site/DataToken.tsx                            |  1 -
 site/DonateForm.tsx                           |  2 +-
 site/DonatePage.tsx                           |  1 -
 site/ExplorerIndex.tsx                        |  4 ++--
 site/ExplorerIndexPage.tsx                    |  1 -
 site/ExplorerPage.tsx                         |  1 -
 site/Feedback.stories.tsx                     |  1 -
 site/Feedback.tsx                             |  2 +-
 site/FeedbackPage.tsx                         |  4 ++--
 site/Footnote.tsx                             |  1 -
 site/GrapherFigureView.tsx                    |  2 +-
 site/GrapherImage.tsx                         |  2 --
 site/GrapherPage.jsdom.test.tsx               |  5 +----
 site/GrapherPage.tsx                          |  1 -
 site/GrapherWithFallback.tsx                  |  1 -
 site/Head.tsx                                 |  1 -
 site/Html.tsx                                 |  2 +-
 site/IframeDetector.tsx                       |  1 -
 site/InteractionNotice.tsx                    |  4 ----
 site/KeyDataTable.tsx                         |  2 --
 site/Lightbox.tsx                             |  2 +-
 site/LongFormPage.tsx                         |  6 +++---
 site/MetadataSection.tsx                      |  1 -
 site/NewsletterSubscription.tsx               |  3 ++-
 site/NoJSDetector.tsx                         | 18 -----------------
 site/NotFoundPage.tsx                         |  1 -
 site/NotFoundPageForm.tsx                     |  1 -
 site/NotFoundPageIcon.tsx                     |  2 --
 site/NotFoundPageMain.tsx                     |  1 -
 site/PageInfo.tsx                             |  2 --
 site/PostCard/PostCard.tsx                    |  1 -
 site/RelatedArticles/RelatedArticles.tsx      |  1 -
 site/SearchCountry.tsx                        |  2 +-
 site/SectionHeading.tsx                       |  1 -
 site/SiteAbout.tsx                            |  2 --
 site/SiteFooter.tsx                           |  1 -
 site/SiteHeader.tsx                           |  1 -
 site/SiteLogos.tsx                            |  2 --
 site/SiteMobileCategory.tsx                   |  2 +-
 site/SiteMobileMenu.tsx                       |  2 +-
 site/SiteNavigation.tsx                       |  6 +++---
 site/SiteNavigationToggle.tsx                 |  2 +-
 site/SiteNavigationTopic.tsx                  |  1 -
 site/SiteNavigationTopics.tsx                 | 12 ++---------
 site/SiteResources.tsx                        |  2 --
 site/SiteSearchNavigation.tsx                 |  1 -
 site/SiteSubnavigation.tsx                    |  1 -
 site/SiteTools.tsx                            |  1 -
 site/TableOfContents.tsx                      |  2 +-
 site/Tablepress.tsx                           |  1 -
 site/ThankYouPage.tsx                         |  1 -
 site/TombstonePage.tsx                        |  1 -
 site/TopicTags.tsx                            |  2 --
 site/bakeGlobalEntitySelector.tsx             |  1 -
 site/blocks/AdditionalInformation.tsx         |  2 +-
 site/blocks/AllChartsListItem.tsx             |  2 +-
 site/blocks/CookiePreferences.tsx             |  3 ++-
 site/blocks/ExpandableParagraph.stories.tsx   |  2 +-
 site/blocks/ExpandableParagraph.tsx           |  3 ++-
 site/blocks/GalleryArrow.tsx                  |  1 -
 site/blocks/Help.tsx                          |  1 -
 site/blocks/ProminentLink.tsx                 |  4 ++--
 site/blocks/RelatedCharts.jsdom.test.tsx      |  5 +----
 site/blocks/RelatedCharts.tsx                 |  3 ++-
 site/blocks/StickyNav.tsx                     |  4 ++--
 site/collections/DynamicCollection.tsx        |  2 +-
 site/collections/DynamicCollectionPage.tsx    |  1 -
 site/collections/StaticCollectionPage.tsx     |  1 -
 site/covid/FullWidthRawHtml.tsx               |  2 +-
 site/covid/LastUpdated.tsx                    |  2 +-
 site/detailsOnDemand.tsx                      |  1 -
 site/formatting.tsx                           |  1 -
 site/gdocs/DebugContext.tsx                   |  3 ++-
 site/gdocs/OwidGdoc.tsx                       |  3 ++-
 site/gdocs/OwidGdocPage.tsx                   |  1 -
 site/gdocs/components/AdditionalCharts.tsx    |  1 -
 site/gdocs/components/AllCharts.tsx           |  2 +-
 site/gdocs/components/ArticleBlock.tsx        |  1 -
 site/gdocs/components/ArticleBlocks.tsx       |  1 -
 site/gdocs/components/AtomArticleBlocks.tsx   |  1 -
 site/gdocs/components/BlockErrorBoundary.tsx  |  2 +-
 site/gdocs/components/Byline.tsx              |  6 +++---
 site/gdocs/components/Callout.tsx             |  1 -
 site/gdocs/components/Chart.tsx               |  2 +-
 site/gdocs/components/ChartStory.tsx          |  2 +-
 site/gdocs/components/DataInsightDateline.tsx |  1 -
 .../components/DataInsightsNewsletter.tsx     |  1 -
 site/gdocs/components/Donors.tsx              |  1 -
 site/gdocs/components/ExplorerTiles.tsx       |  2 +-
 site/gdocs/components/Footnotes.tsx           |  1 -
 site/gdocs/components/HomepageIntro.tsx       |  2 +-
 site/gdocs/components/HomepageSearch.tsx      |  2 +-
 site/gdocs/components/Image.tsx               |  2 +-
 site/gdocs/components/KeyIndicator.tsx        |  1 -
 .../components/KeyIndicatorCollection.tsx     |  3 ++-
 .../components/KeyInsights.jsdom.test.tsx     |  5 +----
 site/gdocs/components/KeyInsights.tsx         |  3 ++-
 site/gdocs/components/LatestDataInsights.tsx  |  1 -
 .../components/LatestDataInsightsBlock.tsx    |  2 +-
 site/gdocs/components/LinkedAuthor.tsx        |  1 -
 site/gdocs/components/List.tsx                |  1 -
 site/gdocs/components/MissingData.tsx         |  1 -
 site/gdocs/components/NumberedList.tsx        |  1 -
 site/gdocs/components/OwidGdocHeader.tsx      |  1 -
 site/gdocs/components/Paragraph.tsx           |  1 -
 site/gdocs/components/Person.tsx              |  1 -
 site/gdocs/components/PillRow.tsx             |  2 +-
 site/gdocs/components/ProminentLink.tsx       |  2 +-
 site/gdocs/components/PullQuote.tsx           |  1 -
 site/gdocs/components/Recirc.tsx              |  1 -
 site/gdocs/components/ResearchAndWriting.tsx  |  2 +-
 site/gdocs/components/SDGGrid.tsx             |  2 +-
 site/gdocs/components/Scroller.tsx            |  2 +-
 site/gdocs/components/Socials.tsx             |  1 -
 site/gdocs/components/Table.tsx               |  2 +-
 site/gdocs/components/TableOfContents.tsx     |  2 +-
 site/gdocs/components/TopicPageIntro.tsx      |  2 +-
 site/gdocs/components/Video.tsx               |  1 -
 site/gdocs/pages/AboutPage.tsx                |  1 -
 site/gdocs/pages/Author.tsx                   |  2 +-
 site/gdocs/pages/DataInsight.tsx              |  3 ++-
 site/gdocs/pages/Fragment.tsx                 |  2 +-
 site/gdocs/pages/GdocPost.tsx                 |  1 -
 site/gdocs/pages/Homepage.tsx                 |  2 +-
 site/gdocs/utils.tsx                          |  3 ++-
 site/multiDim/MultiDimDataPage.tsx            |  1 -
 site/multiDim/MultiDimDataPageContent.tsx     |  2 +-
 .../MultiDimDataPageSettingsPanel.tsx         |  2 +-
 site/multiembedder/MultiEmbedder.tsx          |  1 -
 site/multiembedder/MultiEmbedderTestPage.tsx  |  1 -
 site/runDataTokens.tsx                        |  2 +-
 site/search/Autocomplete.tsx                  |  3 ++-
 site/search/ChartHit.tsx                      |  2 +-
 site/search/SearchPage.tsx                    |  1 -
 site/search/SearchPanel.tsx                   |  3 ++-
 site/typography.stories.tsx                   |  3 ++-
 site/viteUtils.tsx                            |  2 +-
 372 files changed, 392 insertions(+), 558 deletions(-)

diff --git a/adminShared/search.tsx b/adminShared/search.tsx
index 1b03dd543a..6eba551ab9 100644
--- a/adminShared/search.tsx
+++ b/adminShared/search.tsx
@@ -1,5 +1,5 @@
 import { drop, escapeRegExp, sortBy } from "@ourworldindata/utils"
-import React from "react"
+import * as React from "react"
 
 export interface SearchWord {
     regex: RegExp
diff --git a/adminSiteClient/Admin.tsx b/adminSiteClient/Admin.tsx
index 80ec3802c9..307513c79e 100644
--- a/adminSiteClient/Admin.tsx
+++ b/adminSiteClient/Admin.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import ReactDOM from "react-dom"
 import * as lodash from "lodash"
 import { observable, computed, action } from "mobx"
diff --git a/adminSiteClient/AdminApp.tsx b/adminSiteClient/AdminApp.tsx
index 04adf0d387..72560499ae 100644
--- a/adminSiteClient/AdminApp.tsx
+++ b/adminSiteClient/AdminApp.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Admin } from "./Admin.js"
 import { ChartEditorPage } from "./ChartEditorPage.js"
 import { action } from "mobx"
diff --git a/adminSiteClient/AdminAppContext.ts b/adminSiteClient/AdminAppContext.ts
index 902d8cb85c..63ec79bb07 100644
--- a/adminSiteClient/AdminAppContext.ts
+++ b/adminSiteClient/AdminAppContext.ts
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Admin } from "./Admin.js"
 
 export interface AdminAppContextType {
diff --git a/adminSiteClient/AdminLayout.tsx b/adminSiteClient/AdminLayout.tsx
index 6b6eaadde5..b7c02067a3 100644
--- a/adminSiteClient/AdminLayout.tsx
+++ b/adminSiteClient/AdminLayout.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observable, action, computed } from "mobx"
 import { observer } from "mobx-react"
 
diff --git a/adminSiteClient/AdminSidebar.tsx b/adminSiteClient/AdminSidebar.tsx
index cb5e5eecf5..3b7ad4c2d0 100644
--- a/adminSiteClient/AdminSidebar.tsx
+++ b/adminSiteClient/AdminSidebar.tsx
@@ -1,5 +1,5 @@
 import { Link } from "./Link.js"
-import React from "react"
+import * as React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import {
     faChartBar,
diff --git a/adminSiteClient/BulkDownloadPage.tsx b/adminSiteClient/BulkDownloadPage.tsx
index 128837fc31..78e83e1bfc 100644
--- a/adminSiteClient/BulkDownloadPage.tsx
+++ b/adminSiteClient/BulkDownloadPage.tsx
@@ -1,10 +1,10 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { AdminLayout } from "./AdminLayout.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 
 @observer
-export class BulkDownloadPage extends React.Component {
+export class BulkDownloadPage extends Component {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
@@ -20,7 +20,7 @@ export class BulkDownloadPage extends React.Component {
     }
 }
 
-export class DownloadChartsSection extends React.Component {
+export class DownloadChartsSection extends Component {
     render() {
         return (
             <section>
diff --git a/adminSiteClient/BulkGrapherConfigEditor.tsx b/adminSiteClient/BulkGrapherConfigEditor.tsx
index 378d00998c..ff5214a52c 100644
--- a/adminSiteClient/BulkGrapherConfigEditor.tsx
+++ b/adminSiteClient/BulkGrapherConfigEditor.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import {
     chartBulkUpdateAllowedColumnNamesAndTypes,
     WHITELISTED_SQL_COLUMN_NAMES,
@@ -130,7 +130,7 @@ const config: GrapherConfigGridEditorConfig = {
     finalVariableLayerModificationFn: () => ({}),
 }
 
-export class BulkGrapherConfigEditorPage extends React.Component {
+export class BulkGrapherConfigEditorPage extends Component {
     render() {
         return (
             <AdminLayout title="Bulk chart editor">
diff --git a/adminSiteClient/ChartEditorView.tsx b/adminSiteClient/ChartEditorView.tsx
index 2cd3005e10..3c6fb4312a 100644
--- a/adminSiteClient/ChartEditorView.tsx
+++ b/adminSiteClient/ChartEditorView.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import {
     observable,
diff --git a/adminSiteClient/ChartIndexPage.tsx b/adminSiteClient/ChartIndexPage.tsx
index eb2eb4722c..7018047982 100644
--- a/adminSiteClient/ChartIndexPage.tsx
+++ b/adminSiteClient/ChartIndexPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { observable, computed, action, runInAction } from "mobx"
 
@@ -15,7 +15,7 @@ import {
 import { sortNumeric, SortOrder } from "@ourworldindata/utils"
 
 @observer
-export class ChartIndexPage extends React.Component {
+export class ChartIndexPage extends Component {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
diff --git a/adminSiteClient/ChartList.tsx b/adminSiteClient/ChartList.tsx
index 8236bdbc74..6c51c0fc56 100644
--- a/adminSiteClient/ChartList.tsx
+++ b/adminSiteClient/ChartList.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import { runInAction, observable } from "mobx"
 import { bind } from "decko"
diff --git a/adminSiteClient/ChartRow.tsx b/adminSiteClient/ChartRow.tsx
index 18677f5563..f9564fd62d 100644
--- a/adminSiteClient/ChartRow.tsx
+++ b/adminSiteClient/ChartRow.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import { action, runInAction } from "mobx"
 import * as lodash from "lodash"
diff --git a/adminSiteClient/ChartViewIndexPage.tsx b/adminSiteClient/ChartViewIndexPage.tsx
index fca45f0728..4211ba1d15 100644
--- a/adminSiteClient/ChartViewIndexPage.tsx
+++ b/adminSiteClient/ChartViewIndexPage.tsx
@@ -1,4 +1,5 @@
-import React, { useContext, useEffect, useMemo, useState } from "react"
+import { useContext, useEffect, useMemo, useState } from "react"
+import * as React from "react"
 import { Button, Flex, Input, Space, Table } from "antd"
 
 import { AdminLayout } from "./AdminLayout.js"
diff --git a/adminSiteClient/ColorSchemeDropdown.tsx b/adminSiteClient/ColorSchemeDropdown.tsx
index b4f0b0df57..5b0ecf238e 100644
--- a/adminSiteClient/ColorSchemeDropdown.tsx
+++ b/adminSiteClient/ColorSchemeDropdown.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { computed, action } from "mobx"
 import Select from "react-select"
 import { GrapherChartOrMapType } from "@ourworldindata/types"
@@ -27,7 +27,7 @@ interface ColorSchemeDropdownProps {
 }
 
 @observer
-export class ColorSchemeDropdown extends React.Component<ColorSchemeDropdownProps> {
+export class ColorSchemeDropdown extends Component<ColorSchemeDropdownProps> {
     static defaultProps = {
         additionalOptions: [],
         gradientColorCount: 6,
diff --git a/adminSiteClient/Colorpicker.tsx b/adminSiteClient/Colorpicker.tsx
index c14536d145..0f4cc772c4 100644
--- a/adminSiteClient/Colorpicker.tsx
+++ b/adminSiteClient/Colorpicker.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component, Fragment } from "react"
 import { action } from "mobx"
 import { observer } from "mobx-react"
 import { SketchPicker } from "react-color"
@@ -16,7 +16,7 @@ interface ColorpickerProps {
 }
 
 @observer
-export class Colorpicker extends React.Component<ColorpickerProps> {
+export class Colorpicker extends Component<ColorpickerProps> {
     @action.bound onColor(color: string) {
         if (color === "") {
             this.props.onColor(undefined)
@@ -39,7 +39,7 @@ export class Colorpicker extends React.Component<ColorpickerProps> {
         }
 
         return (
-            <React.Fragment>
+            <Fragment>
                 <SketchPicker
                     disableAlpha
                     presetColors={availableColors.map((color) => ({
@@ -49,7 +49,7 @@ export class Colorpicker extends React.Component<ColorpickerProps> {
                     color={this.props.color}
                     onChange={(color) => this.onColor(color.hex)}
                 />
-            </React.Fragment>
+            </Fragment>
         )
     }
 }
diff --git a/adminSiteClient/DatasetEditPage.tsx b/adminSiteClient/DatasetEditPage.tsx
index 143f0261fe..e02d1f58cc 100644
--- a/adminSiteClient/DatasetEditPage.tsx
+++ b/adminSiteClient/DatasetEditPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { observable, computed, runInAction, action } from "mobx"
 import * as lodash from "lodash"
@@ -81,7 +81,7 @@ class DatasetEditable {
 }
 
 @observer
-class DatasetTagEditor extends React.Component<{
+class DatasetTagEditor extends Component<{
     newDataset: DatasetEditable
     availableTags: { id: number; name: string; parentName: string }[]
 }> {
@@ -106,7 +106,7 @@ class DatasetTagEditor extends React.Component<{
 }
 
 @observer
-class DatasetEditor extends React.Component<{ dataset: DatasetPageData }> {
+class DatasetEditor extends Component<{ dataset: DatasetPageData }> {
     static contextType = AdminAppContext
     context!: AdminAppContextType
     @observable newDataset!: DatasetEditable
@@ -449,7 +449,7 @@ class DatasetEditor extends React.Component<{ dataset: DatasetPageData }> {
 }
 
 @observer
-export class DatasetEditPage extends React.Component<{ datasetId: number }> {
+export class DatasetEditPage extends Component<{ datasetId: number }> {
     static contextType = AdminAppContext
     context!: AdminAppContextType
     @observable dataset?: DatasetPageData
diff --git a/adminSiteClient/DatasetList.tsx b/adminSiteClient/DatasetList.tsx
index f05b59040b..67c073d480 100644
--- a/adminSiteClient/DatasetList.tsx
+++ b/adminSiteClient/DatasetList.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observable, action } from "mobx"
 import { observer } from "mobx-react"
 import * as lodash from "lodash"
diff --git a/adminSiteClient/DatasetsIndexPage.tsx b/adminSiteClient/DatasetsIndexPage.tsx
index dcc8fcad4f..f99feac167 100644
--- a/adminSiteClient/DatasetsIndexPage.tsx
+++ b/adminSiteClient/DatasetsIndexPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { observable, computed, action, runInAction } from "mobx"
 import * as lodash from "lodash"
@@ -15,7 +15,7 @@ import {
 } from "../adminShared/search.js"
 
 @observer
-export class DatasetsIndexPage extends React.Component {
+export class DatasetsIndexPage extends Component {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
diff --git a/adminSiteClient/DeployStatusPage.tsx b/adminSiteClient/DeployStatusPage.tsx
index 9bbb107011..d9541f2ca1 100644
--- a/adminSiteClient/DeployStatusPage.tsx
+++ b/adminSiteClient/DeployStatusPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { action, observable, runInAction } from "mobx"
 
@@ -16,7 +16,7 @@ const statusLabel: Record<DeployStatus, string> = {
 }
 
 @observer
-export class DeployStatusPage extends React.Component {
+export class DeployStatusPage extends Component {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
diff --git a/adminSiteClient/DimensionCard.tsx b/adminSiteClient/DimensionCard.tsx
index 4053be981d..db3d094a02 100644
--- a/adminSiteClient/DimensionCard.tsx
+++ b/adminSiteClient/DimensionCard.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component, Fragment } from "react"
 import { observable, computed, action } from "mobx"
 import { observer } from "mobx-react"
 import { ChartDimension } from "@ourworldindata/grapher"
@@ -27,7 +27,7 @@ import { AbstractChartEditor } from "./AbstractChartEditor.js"
 @observer
 export class DimensionCard<
     Editor extends AbstractChartEditor,
-> extends React.Component<{
+> extends Component<{
     dimension: ChartDimension
     editor: Editor
     isDndEnabled?: boolean
@@ -70,7 +70,7 @@ export class DimensionCard<
     private get tableDisplaySettings() {
         const { tableDisplay = {} } = this.props.dimension.display
         return (
-            <React.Fragment>
+            <Fragment>
                 <hr className="ui divider" />
                 Table:
                 <Toggle
@@ -96,7 +96,7 @@ export class DimensionCard<
                     }}
                 />
                 <hr className="ui divider" />
-            </React.Fragment>
+            </Fragment>
         )
     }
 
diff --git a/adminSiteClient/EditTags.tsx b/adminSiteClient/EditTags.tsx
index 11ebfd074d..e031090289 100644
--- a/adminSiteClient/EditTags.tsx
+++ b/adminSiteClient/EditTags.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { createRef, Component } from "react"
 import { action } from "mobx"
 import { observer } from "mobx-react"
 import { DbChartTagJoin } from "@ourworldindata/utils"
@@ -9,7 +9,7 @@ import {
 } from "react-tag-autocomplete"
 
 @observer
-export class EditTags extends React.Component<{
+export class EditTags extends Component<{
     tags: DbChartTagJoin[]
     suggestions: DbChartTagJoin[]
     onDelete: (index: number) => void
@@ -17,7 +17,7 @@ export class EditTags extends React.Component<{
     onSave: () => void
 }> {
     dismissable: boolean = true
-    reactTagsApi = React.createRef<ReactTagsAPI>()
+    reactTagsApi = createRef<ReactTagsAPI>()
 
     @action.bound onClickSomewhere() {
         if (this.dismissable) this.props.onSave()
diff --git a/adminSiteClient/EditableTags.tsx b/adminSiteClient/EditableTags.tsx
index 1d3fab38a3..a9194f3ac7 100644
--- a/adminSiteClient/EditableTags.tsx
+++ b/adminSiteClient/EditableTags.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import * as lodash from "lodash"
 import { observable, action } from "mobx"
 import { observer } from "mobx-react"
diff --git a/adminSiteClient/EditorBasicTab.tsx b/adminSiteClient/EditorBasicTab.tsx
index f3ebebb0ee..9b89b12bbf 100644
--- a/adminSiteClient/EditorBasicTab.tsx
+++ b/adminSiteClient/EditorBasicTab.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import {
     observable,
     action,
diff --git a/adminSiteClient/EditorColorScaleSection.tsx b/adminSiteClient/EditorColorScaleSection.tsx
index fe6753d127..bfd1511f16 100644
--- a/adminSiteClient/EditorColorScaleSection.tsx
+++ b/adminSiteClient/EditorColorScaleSection.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component, Fragment } from "react"
 import { action, computed, runInAction } from "mobx"
 import { observer } from "mobx-react"
 import Select from "react-select"
@@ -41,7 +41,7 @@ interface EditorColorScaleSectionFeatures {
 }
 
 @observer
-export class EditorColorScaleSection extends React.Component<{
+export class EditorColorScaleSection extends Component<{
     scale: ColorScale
     chartType: GrapherChartOrMapType
     features: EditorColorScaleSectionFeatures
@@ -50,7 +50,7 @@ export class EditorColorScaleSection extends React.Component<{
 }> {
     render() {
         return (
-            <React.Fragment>
+            <Fragment>
                 <ColorsSection
                     scale={this.props.scale}
                     onChange={this.props.onChange}
@@ -62,13 +62,13 @@ export class EditorColorScaleSection extends React.Component<{
                     features={this.props.features}
                     onChange={this.props.onChange}
                 />
-            </React.Fragment>
+            </Fragment>
         )
     }
 }
 
 @observer
-class ColorLegendSection extends React.Component<{
+class ColorLegendSection extends Component<{
     scale: ColorScale
     features: EditorColorScaleSectionFeatures
     onChange?: () => void
@@ -130,7 +130,7 @@ class ColorLegendSection extends React.Component<{
 }
 
 @observer
-class ColorsSection extends React.Component<{
+class ColorsSection extends Component<{
     scale: ColorScale
     chartType: GrapherChartOrMapType
     showLineChartColors: boolean
@@ -275,7 +275,7 @@ class ColorsSection extends React.Component<{
 }
 
 @observer
-class ColorSchemeEditor extends React.Component<{
+class ColorSchemeEditor extends Component<{
     scale: ColorScale
     showLineChartColors: boolean
     onChange?: () => void
@@ -319,7 +319,7 @@ class ColorSchemeEditor extends React.Component<{
 }
 
 @observer
-class BinLabelView extends React.Component<{
+class BinLabelView extends Component<{
     scale: ColorScale
     bin: ColorScaleBin
     index: number
@@ -385,7 +385,7 @@ function populateManualBinValuesIfAutomatic(scale: ColorScale) {
 }
 
 @observer
-class NumericBinView extends React.Component<{
+class NumericBinView extends Component<{
     scale: ColorScale
     bin: NumericBin
     index: number
@@ -492,7 +492,7 @@ class NumericBinView extends React.Component<{
 }
 
 @observer
-class CategoricalBinView extends React.Component<{
+class CategoricalBinView extends Component<{
     scale: ColorScale
     bin: CategoricalBin
     showLineChartColors: boolean
diff --git a/adminSiteClient/EditorCustomizeTab.tsx b/adminSiteClient/EditorCustomizeTab.tsx
index 7f92dd1fb0..9a72f56549 100644
--- a/adminSiteClient/EditorCustomizeTab.tsx
+++ b/adminSiteClient/EditorCustomizeTab.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observable, computed, action } from "mobx"
 import { observer } from "mobx-react"
 import {
diff --git a/adminSiteClient/EditorDataTab.tsx b/adminSiteClient/EditorDataTab.tsx
index 84c15f868b..82ba1dc802 100644
--- a/adminSiteClient/EditorDataTab.tsx
+++ b/adminSiteClient/EditorDataTab.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import {
     differenceOfSets,
     moveArrayItemToIndex,
diff --git a/adminSiteClient/EditorDebugTab.tsx b/adminSiteClient/EditorDebugTab.tsx
index 566f5087de..ba5ffbc2dd 100644
--- a/adminSiteClient/EditorDebugTab.tsx
+++ b/adminSiteClient/EditorDebugTab.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { Section, Toggle } from "./Forms.js"
 import { ChartEditor, isChartEditorInstance } from "./ChartEditor.js"
@@ -26,7 +26,7 @@ import { stringify } from "safe-stable-stringify"
 @observer
 export class EditorDebugTab<
     Editor extends AbstractChartEditor,
-> extends React.Component<{
+> extends Component<{
     editor: Editor
 }> {
     render() {
@@ -42,7 +42,7 @@ export class EditorDebugTab<
 }
 
 @observer
-class EditorDebugTabForChart extends React.Component<{
+class EditorDebugTabForChart extends Component<{
     editor: ChartEditor
 }> {
     @action.bound copyYamlToClipboard() {
@@ -200,7 +200,7 @@ class EditorDebugTabForChart extends React.Component<{
 }
 
 @observer
-class EditorDebugTabForChartView extends React.Component<{
+class EditorDebugTabForChartView extends Component<{
     editor: ChartViewEditor
 }> {
     @action.bound copyYamlToClipboard() {
@@ -340,7 +340,7 @@ class EditorDebugTabForChartView extends React.Component<{
 }
 
 @observer
-class EditorDebugTabForIndicatorChart extends React.Component<{
+class EditorDebugTabForIndicatorChart extends Component<{
     editor: IndicatorChartEditor
 }> {
     render() {
diff --git a/adminSiteClient/EditorExportTab.tsx b/adminSiteClient/EditorExportTab.tsx
index 84fa7bac40..ccbd59d7f3 100644
--- a/adminSiteClient/EditorExportTab.tsx
+++ b/adminSiteClient/EditorExportTab.tsx
@@ -1,6 +1,6 @@
 import { IReactionDisposer, action, autorun, computed, observable } from "mobx"
 import { observer } from "mobx-react"
-import React from "react"
+import { Component } from "react"
 import { Section, Toggle } from "./Forms.js"
 import { Grapher } from "@ourworldindata/grapher"
 import {
@@ -59,7 +59,7 @@ interface EditorExportTabProps<Editor> {
 @observer
 export class EditorExportTab<
     Editor extends AbstractChartEditor,
-> extends React.Component<EditorExportTabProps<Editor>> {
+> extends Component<EditorExportTabProps<Editor>> {
     @observable private settings = DEFAULT_SETTINGS
     private originalSettings: Partial<ExportSettings> = DEFAULT_SETTINGS
     private originalGrapher: OriginalGrapher
diff --git a/adminSiteClient/EditorFAQ.tsx b/adminSiteClient/EditorFAQ.tsx
index 7b3b2e660c..7abee1f4d6 100644
--- a/adminSiteClient/EditorFAQ.tsx
+++ b/adminSiteClient/EditorFAQ.tsx
@@ -1,9 +1,9 @@
-import React from "react"
+import { Component } from "react"
 import { Modal } from "./Forms.js"
 import { faLink, faUnlink } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 
-export class EditorFAQ extends React.Component<{ onClose: () => void }> {
+export class EditorFAQ extends Component<{ onClose: () => void }> {
     render() {
         return (
             <Modal onClose={this.props.onClose} className="EditorFAQ">
diff --git a/adminSiteClient/EditorHistoryTab.tsx b/adminSiteClient/EditorHistoryTab.tsx
index 99c3cbf00c..8eed5f62d4 100644
--- a/adminSiteClient/EditorHistoryTab.tsx
+++ b/adminSiteClient/EditorHistoryTab.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { ChartEditor, Log } from "./ChartEditor.js"
 import { Timeago } from "./Forms.js"
@@ -51,7 +51,7 @@ function LogCompareModal({
 }
 
 @observer
-class LogRenderer extends React.Component<{
+class LogRenderer extends Component<{
     log: Log
     previousLog: Log | undefined
 }> {
@@ -102,7 +102,7 @@ class LogRenderer extends React.Component<{
 }
 
 @observer
-export class EditorHistoryTab extends React.Component<{ editor: ChartEditor }> {
+export class EditorHistoryTab extends Component<{ editor: ChartEditor }> {
     @computed get logs() {
         return this.props.editor.logs || []
     }
diff --git a/adminSiteClient/EditorMapTab.tsx b/adminSiteClient/EditorMapTab.tsx
index 51d5b2b689..a5a7a462bf 100644
--- a/adminSiteClient/EditorMapTab.tsx
+++ b/adminSiteClient/EditorMapTab.tsx
@@ -12,13 +12,13 @@ import {
 import { ColumnSlug, isEmpty, ToleranceStrategy } from "@ourworldindata/utils"
 import { action, computed } from "mobx"
 import { observer } from "mobx-react"
-import React from "react"
+import { Component, Fragment } from "react"
 import { EditorColorScaleSection } from "./EditorColorScaleSection.js"
 import { NumberField, Section, SelectField, Toggle } from "./Forms.js"
 import { AbstractChartEditor } from "./AbstractChartEditor.js"
 
 @observer
-class VariableSection extends React.Component<{
+class VariableSection extends Component<{
     mapConfig: MapConfig
     filledDimensions: ChartDimension[]
     parentConfig?: GrapherInterface
@@ -77,7 +77,7 @@ class VariableSection extends React.Component<{
 }
 
 @observer
-class TimelineSection extends React.Component<{ mapConfig: MapConfig }> {
+class TimelineSection extends Component<{ mapConfig: MapConfig }> {
     @action.bound onToggleHideTimeline(value: boolean) {
         this.props.mapConfig.hideTimeline = value || undefined
     }
@@ -150,7 +150,7 @@ class TimelineSection extends React.Component<{ mapConfig: MapConfig }> {
 }
 
 @observer
-class TooltipSection extends React.Component<{ mapConfig: MapConfig }> {
+class TooltipSection extends Component<{ mapConfig: MapConfig }> {
     @action.bound onTooltipUseCustomLabels(tooltipUseCustomLabels: boolean) {
         this.props.mapConfig.tooltipUseCustomLabels = tooltipUseCustomLabels
             ? true
@@ -176,7 +176,7 @@ class TooltipSection extends React.Component<{ mapConfig: MapConfig }> {
 @observer
 export class EditorMapTab<
     Editor extends AbstractChartEditor,
-> extends React.Component<{ editor: Editor }> {
+> extends Component<{ editor: Editor }> {
     @computed get grapher() {
         return this.props.editor.grapher
     }
@@ -198,7 +198,7 @@ export class EditorMapTab<
                     parentConfig={this.props.editor.activeParentConfig}
                 />
                 {isReady && (
-                    <React.Fragment>
+                    <Fragment>
                         <TimelineSection mapConfig={mapConfig} />
                         <EditorColorScaleSection
                             scale={colorScale}
@@ -210,7 +210,7 @@ export class EditorMapTab<
                             }}
                         />
                         <TooltipSection mapConfig={mapConfig} />
-                    </React.Fragment>
+                    </Fragment>
                 )}
             </div>
         )
diff --git a/adminSiteClient/EditorMarimekkoTab.tsx b/adminSiteClient/EditorMarimekkoTab.tsx
index bc816a149e..2e1ffd7c30 100644
--- a/adminSiteClient/EditorMarimekkoTab.tsx
+++ b/adminSiteClient/EditorMarimekkoTab.tsx
@@ -6,11 +6,11 @@ import { excludeUndefined } from "@ourworldindata/utils"
 import lodash from "lodash"
 import { action, computed, IReactionDisposer, observable, reaction } from "mobx"
 import { observer } from "mobx-react"
-import React from "react"
+import { Component } from "react"
 import { NumberField, Section, SelectField, Toggle } from "./Forms.js"
 
 @observer
-export class EditorMarimekkoTab extends React.Component<{ grapher: Grapher }> {
+export class EditorMarimekkoTab extends Component<{ grapher: Grapher }> {
     @observable xOverrideTimeInputField: number | undefined
     constructor(props: { grapher: Grapher }) {
         super(props)
diff --git a/adminSiteClient/EditorReferencesTab.tsx b/adminSiteClient/EditorReferencesTab.tsx
index 3fc2d0b6d2..5e91f17300 100644
--- a/adminSiteClient/EditorReferencesTab.tsx
+++ b/adminSiteClient/EditorReferencesTab.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component, Fragment } from "react"
 import { observer } from "mobx-react"
 import {
     ChartEditor,
@@ -28,7 +28,7 @@ const BASE_URL = BAKED_GRAPHER_URL.replace(/^https?:\/\//, "")
 @observer
 export class EditorReferencesTab<
     Editor extends AbstractChartEditor,
-> extends React.Component<{
+> extends Component<{
     editor: Editor
 }> {
     render() {
@@ -163,7 +163,7 @@ export const ReferencesSection = (props: {
 }
 
 @observer
-export class EditorReferencesTabForChart extends React.Component<{
+export class EditorReferencesTabForChart extends Component<{
     editor: ChartEditor
 }> {
     @computed get isPersisted() {
@@ -232,7 +232,7 @@ export class EditorReferencesTabForChart extends React.Component<{
                 <section>
                     <h5>Alternative URLs for this chart</h5>
                     {this.redirects.length ? (
-                        <React.Fragment>
+                        <Fragment>
                             <p>The following URLs redirect to this chart:</p>
                             <ul className="list-group">
                                 {this.redirects.map((redirect) => (
@@ -254,7 +254,7 @@ export class EditorReferencesTabForChart extends React.Component<{
                                 ))}
                             </ul>
                             <hr />
-                        </React.Fragment>
+                        </Fragment>
                     ) : null}
                     {this.isPersisted && (
                         <AddRedirectForm
@@ -269,9 +269,7 @@ export class EditorReferencesTabForChart extends React.Component<{
 }
 
 @observer
-class AddRedirectForm<
-    Editor extends AbstractChartEditor,
-> extends React.Component<{
+class AddRedirectForm<Editor extends AbstractChartEditor> extends Component<{
     editor: Editor
     onSuccess: (redirect: ChartRedirect) => void
 }> {
@@ -356,7 +354,7 @@ class AddRedirectForm<
 }
 
 @observer
-export class EditorReferencesTabForIndicator extends React.Component<{
+export class EditorReferencesTabForIndicator extends Component<{
     editor: IndicatorChartEditor
 }> {
     render() {
diff --git a/adminSiteClient/EditorScatterTab.tsx b/adminSiteClient/EditorScatterTab.tsx
index 9692b6cd6d..582f4489d1 100644
--- a/adminSiteClient/EditorScatterTab.tsx
+++ b/adminSiteClient/EditorScatterTab.tsx
@@ -9,11 +9,11 @@ import { Grapher } from "@ourworldindata/grapher"
 import { debounce, excludeUndefined } from "@ourworldindata/utils"
 import { action, computed, observable } from "mobx"
 import { observer } from "mobx-react"
-import React from "react"
+import { Component } from "react"
 import { NumberField, Section, SelectField, Toggle } from "./Forms.js"
 
 @observer
-export class EditorScatterTab extends React.Component<{ grapher: Grapher }> {
+export class EditorScatterTab extends Component<{ grapher: Grapher }> {
     @observable comparisonLine: ComparisonLineConfig = { yEquals: undefined }
 
     constructor(props: { grapher: Grapher }) {
diff --git a/adminSiteClient/EditorTextTab.tsx b/adminSiteClient/EditorTextTab.tsx
index da032de3bd..b259827bdd 100644
--- a/adminSiteClient/EditorTextTab.tsx
+++ b/adminSiteClient/EditorTextTab.tsx
@@ -5,7 +5,7 @@ import { getErrorMessageRelatedQuestionUrl } from "@ourworldindata/grapher"
 import { slugify } from "@ourworldindata/utils"
 import { action, computed } from "mobx"
 import { observer } from "mobx-react"
-import React from "react"
+import { Component } from "react"
 import { isChartEditorInstance } from "./ChartEditor.js"
 import {
     AutoTextField,
@@ -23,7 +23,7 @@ import { ErrorMessages } from "./ChartEditorTypes.js"
 @observer
 export class EditorTextTab<
     Editor extends AbstractChartEditor,
-> extends React.Component<{ editor: Editor; errorMessages: ErrorMessages }> {
+> extends Component<{ editor: Editor; errorMessages: ErrorMessages }> {
     @action.bound onSlug(slug: string) {
         this.props.editor.grapher.slug = slugify(slug)
     }
diff --git a/adminSiteClient/ExplorerTagsPage.tsx b/adminSiteClient/ExplorerTagsPage.tsx
index ea25262789..6390bae3f8 100644
--- a/adminSiteClient/ExplorerTagsPage.tsx
+++ b/adminSiteClient/ExplorerTagsPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { action, computed, observable, runInAction } from "mobx"
 
@@ -19,7 +19,7 @@ type ExplorerWithTags = {
 }
 
 @observer
-export class ExplorerTagsPage extends React.Component {
+export class ExplorerTagsPage extends Component {
     static contextType = AdminAppContext
     context!: AdminAppContextType
     @observable explorersWithTags: ExplorerWithTags[] = []
diff --git a/adminSiteClient/Forms.tsx b/adminSiteClient/Forms.tsx
index 5db987cd77..5dcd325c58 100644
--- a/adminSiteClient/Forms.tsx
+++ b/adminSiteClient/Forms.tsx
@@ -4,7 +4,7 @@
  * Reusable React components to keep admin UI succint and consistent
  */
 
-import React from "react"
+import * as React from "react"
 import { bind } from "decko"
 import { action } from "mobx"
 import { observer } from "mobx-react"
diff --git a/adminSiteClient/GdocsAdd.tsx b/adminSiteClient/GdocsAdd.tsx
index 6a01770cef..503820b745 100644
--- a/adminSiteClient/GdocsAdd.tsx
+++ b/adminSiteClient/GdocsAdd.tsx
@@ -1,5 +1,5 @@
 import { GDOCS_URL_PLACEHOLDER, gdocUrlRegex } from "@ourworldindata/utils"
-import React from "react"
+import * as React from "react"
 import {
     GDOCS_BASIC_ARTICLE_TEMPLATE_URL,
     GDOCS_CLIENT_EMAIL,
diff --git a/adminSiteClient/GdocsBreadcrumbsInput.tsx b/adminSiteClient/GdocsBreadcrumbsInput.tsx
index bed28d0255..094e7188cb 100644
--- a/adminSiteClient/GdocsBreadcrumbsInput.tsx
+++ b/adminSiteClient/GdocsBreadcrumbsInput.tsx
@@ -6,7 +6,6 @@ import {
     OwidGdocPostInterface,
 } from "@ourworldindata/utils"
 import { Button, Col, Input, Row } from "antd"
-import React from "react"
 import { getPropertyMostCriticalError } from "./gdocsValidation.js"
 import { GdocsErrorHelp } from "./GdocsErrorHelp.js"
 
diff --git a/adminSiteClient/GdocsDateline.tsx b/adminSiteClient/GdocsDateline.tsx
index 3c38fb94b5..67bbb192a8 100644
--- a/adminSiteClient/GdocsDateline.tsx
+++ b/adminSiteClient/GdocsDateline.tsx
@@ -1,7 +1,6 @@
 import { Col, DatePicker } from "antd"
 import { Dayjs } from "dayjs"
 import { dayjs, OwidGdocErrorMessage, OwidGdoc } from "@ourworldindata/utils"
-import React from "react"
 import { PUBLISHED_AT_FORMAT } from "../settings/clientSettings"
 import { getPropertyMostCriticalError } from "./gdocsValidation.js"
 import { GdocsErrorHelp } from "./GdocsErrorHelp.js"
diff --git a/adminSiteClient/GdocsDiff.tsx b/adminSiteClient/GdocsDiff.tsx
index b056d34229..15c2048ac9 100644
--- a/adminSiteClient/GdocsDiff.tsx
+++ b/adminSiteClient/GdocsDiff.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import ReactDiffViewer, { DiffMethod } from "react-diff-viewer-continued"
 import { stringify } from "safe-stable-stringify"
 import { omit, OwidGdoc } from "@ourworldindata/utils"
diff --git a/adminSiteClient/GdocsDiffButton.tsx b/adminSiteClient/GdocsDiffButton.tsx
index 26c934a31b..5805e6b10e 100644
--- a/adminSiteClient/GdocsDiffButton.tsx
+++ b/adminSiteClient/GdocsDiffButton.tsx
@@ -1,5 +1,4 @@
 import { Badge, Button } from "antd"
-import React from "react"
 
 export const GdocsDiffButton = ({
     hasChanges,
diff --git a/adminSiteClient/GdocsEditLink.tsx b/adminSiteClient/GdocsEditLink.tsx
index a1562625c4..37c3e4499c 100644
--- a/adminSiteClient/GdocsEditLink.tsx
+++ b/adminSiteClient/GdocsEditLink.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { faEdit } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 
diff --git a/adminSiteClient/GdocsErrorHelp.tsx b/adminSiteClient/GdocsErrorHelp.tsx
index e9e3045cbc..1e6775046c 100644
--- a/adminSiteClient/GdocsErrorHelp.tsx
+++ b/adminSiteClient/GdocsErrorHelp.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Help } from "./Forms.js"
 import { OwidGdocErrorMessage } from "@ourworldindata/utils"
 
diff --git a/adminSiteClient/GdocsIndexPage.tsx b/adminSiteClient/GdocsIndexPage.tsx
index b6dfce756e..77046b3c58 100644
--- a/adminSiteClient/GdocsIndexPage.tsx
+++ b/adminSiteClient/GdocsIndexPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import cx from "classnames"
 import { AdminLayout } from "./AdminLayout.js"
 import { Modal, SearchField } from "./Forms.js"
diff --git a/adminSiteClient/GdocsMoreMenu.tsx b/adminSiteClient/GdocsMoreMenu.tsx
index 2c203f8222..0cf48939a8 100644
--- a/adminSiteClient/GdocsMoreMenu.tsx
+++ b/adminSiteClient/GdocsMoreMenu.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useState } from "react"
 import { Dropdown, Button, Modal, Form, Checkbox, Input } from "antd"
 import {
diff --git a/adminSiteClient/GdocsPreviewPage.tsx b/adminSiteClient/GdocsPreviewPage.tsx
index 62f1fac5df..49844dd7ba 100644
--- a/adminSiteClient/GdocsPreviewPage.tsx
+++ b/adminSiteClient/GdocsPreviewPage.tsx
@@ -1,10 +1,5 @@
-import React, {
-    useCallback,
-    useContext,
-    useEffect,
-    useRef,
-    useState,
-} from "react"
+import { useCallback, useContext, useEffect, useRef, useState } from "react"
+import * as React from "react"
 import { AdminLayout } from "./AdminLayout.js"
 import { GdocsMatchProps } from "./GdocsIndexPage.js"
 import {
diff --git a/adminSiteClient/GdocsPublicationContext.tsx b/adminSiteClient/GdocsPublicationContext.tsx
index b217e22307..d9af1afb95 100644
--- a/adminSiteClient/GdocsPublicationContext.tsx
+++ b/adminSiteClient/GdocsPublicationContext.tsx
@@ -3,7 +3,6 @@ import {
     OwidGdocPublicationContext,
     OwidGdocPostInterface,
 } from "@ourworldindata/utils"
-import React from "react"
 import { GdocsErrorHelp } from "./GdocsErrorHelp.js"
 
 export const GdocsPublicationContext = ({
diff --git a/adminSiteClient/GdocsSaveButtons.tsx b/adminSiteClient/GdocsSaveButtons.tsx
index 204307d63e..663845f1c5 100644
--- a/adminSiteClient/GdocsSaveButtons.tsx
+++ b/adminSiteClient/GdocsSaveButtons.tsx
@@ -1,5 +1,4 @@
 import { Badge, Button, Modal, Space } from "antd"
-import React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import {
     faExclamationTriangle,
diff --git a/adminSiteClient/GdocsSettingsContentField.tsx b/adminSiteClient/GdocsSettingsContentField.tsx
index b9954d7a88..1352e78c63 100644
--- a/adminSiteClient/GdocsSettingsContentField.tsx
+++ b/adminSiteClient/GdocsSettingsContentField.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Input, InputProps } from "antd"
 import {
     OwidGdocPostInterface,
diff --git a/adminSiteClient/GdocsSettingsForms.tsx b/adminSiteClient/GdocsSettingsForms.tsx
index abe21772f0..a191106806 100644
--- a/adminSiteClient/GdocsSettingsForms.tsx
+++ b/adminSiteClient/GdocsSettingsForms.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import {
     OwidGdocPostInterface,
     OwidGdocErrorMessage,
diff --git a/adminSiteClient/GdocsSlug.tsx b/adminSiteClient/GdocsSlug.tsx
index f5231be281..4e79f111f8 100644
--- a/adminSiteClient/GdocsSlug.tsx
+++ b/adminSiteClient/GdocsSlug.tsx
@@ -1,5 +1,5 @@
 import { Col, Input, Row, Space, Switch } from "antd"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import { slugify, OwidGdocErrorMessage, OwidGdoc } from "@ourworldindata/utils"
 import { Help } from "./Forms.js"
 import { getPropertyMostCriticalError } from "./gdocsValidation.js"
diff --git a/adminSiteClient/GdocsStore.tsx b/adminSiteClient/GdocsStore.tsx
index 1a7b11c387..996b1e6e7b 100644
--- a/adminSiteClient/GdocsStore.tsx
+++ b/adminSiteClient/GdocsStore.tsx
@@ -1,4 +1,5 @@
-import React, { useContext, createContext, useState } from "react"
+import { useContext, createContext, useState } from "react"
+import * as React from "react"
 import { action, observable } from "mobx"
 import {
     getOwidGdocFromJSON,
diff --git a/adminSiteClient/GrapherConfigGridEditor.tsx b/adminSiteClient/GrapherConfigGridEditor.tsx
index 4c7ae6f7cf..d4539d9b76 100644
--- a/adminSiteClient/GrapherConfigGridEditor.tsx
+++ b/adminSiteClient/GrapherConfigGridEditor.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import {
     Bounds,
     stringifyUnknownError,
diff --git a/adminSiteClient/GrapherConfigGridEditorTypesAndUtils.tsx b/adminSiteClient/GrapherConfigGridEditorTypesAndUtils.tsx
index 7b64b39587..3de0bbc428 100644
--- a/adminSiteClient/GrapherConfigGridEditorTypesAndUtils.tsx
+++ b/adminSiteClient/GrapherConfigGridEditorTypesAndUtils.tsx
@@ -36,7 +36,6 @@ import {
     EditorOption,
     FieldDescription,
 } from "../adminShared/schemaProcessing.js"
-import React from "react"
 import { IconDefinition } from "@fortawesome/fontawesome-common-types"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 
diff --git a/adminSiteClient/IconBadge.tsx b/adminSiteClient/IconBadge.tsx
index 1fac97ae4a..4c084474b1 100644
--- a/adminSiteClient/IconBadge.tsx
+++ b/adminSiteClient/IconBadge.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import {
     faExclamationTriangle,
diff --git a/adminSiteClient/ImagesIndexPage.tsx b/adminSiteClient/ImagesIndexPage.tsx
index ecd8a452f9..1de6114e21 100644
--- a/adminSiteClient/ImagesIndexPage.tsx
+++ b/adminSiteClient/ImagesIndexPage.tsx
@@ -1,4 +1,5 @@
-import React, {
+import {
+    createContext,
     useCallback,
     useContext,
     useEffect,
@@ -503,7 +504,7 @@ function PutImageButton({
     )
 }
 
-const NotificationContext = React.createContext(null)
+const NotificationContext = createContext(null)
 
 export function ImageIndexPage() {
     const { admin } = useContext(AdminAppContext)
diff --git a/adminSiteClient/Link.tsx b/adminSiteClient/Link.tsx
index e6baf1260b..d9648e74d6 100644
--- a/adminSiteClient/Link.tsx
+++ b/adminSiteClient/Link.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { NavLink } from "react-router-dom"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 
diff --git a/adminSiteClient/NotFoundPage.tsx b/adminSiteClient/NotFoundPage.tsx
index 99ebc68f5c..eefc12af9a 100644
--- a/adminSiteClient/NotFoundPage.tsx
+++ b/adminSiteClient/NotFoundPage.tsx
@@ -1,9 +1,9 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { AdminLayout } from "./AdminLayout.js"
 
 @observer
-export class NotFoundPage extends React.Component {
+export class NotFoundPage extends Component {
     render() {
         return (
             <AdminLayout>
diff --git a/adminSiteClient/OriginList.tsx b/adminSiteClient/OriginList.tsx
index 19e8ec28e4..ffb36c46f3 100644
--- a/adminSiteClient/OriginList.tsx
+++ b/adminSiteClient/OriginList.tsx
@@ -1,11 +1,11 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 import { OwidOrigin } from "@ourworldindata/utils"
 import { BindString, FieldsRow } from "./Forms.js"
 
 @observer
-export class OriginList extends React.Component<{
+export class OriginList extends Component<{
     origins: OwidOrigin[]
 }> {
     static contextType = AdminAppContext
diff --git a/adminSiteClient/PostEditorPage.tsx b/adminSiteClient/PostEditorPage.tsx
index b7e13e752d..c1c03f6091 100644
--- a/adminSiteClient/PostEditorPage.tsx
+++ b/adminSiteClient/PostEditorPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { observable, runInAction } from "mobx"
 
@@ -15,7 +15,7 @@ interface Post {
     content: string
 }
 
-class PostEditor extends React.Component<{ post: Post }> {
+class PostEditor extends Component<{ post: Post }> {
     render() {
         const { post } = this.props
         return (
@@ -29,7 +29,7 @@ class PostEditor extends React.Component<{ post: Post }> {
 }
 
 @observer
-export class PostEditorPage extends React.Component<{ postId?: number }> {
+export class PostEditorPage extends Component<{ postId?: number }> {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
diff --git a/adminSiteClient/PostsIndexPage.tsx b/adminSiteClient/PostsIndexPage.tsx
index 6393a19efb..e06771ceb6 100644
--- a/adminSiteClient/PostsIndexPage.tsx
+++ b/adminSiteClient/PostsIndexPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { observable, computed, action, runInAction } from "mobx"
 
@@ -54,7 +54,7 @@ interface PostRowProps {
 }
 
 @observer
-class PostRow extends React.Component<PostRowProps> {
+class PostRow extends Component<PostRowProps> {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
@@ -240,7 +240,7 @@ class PostRow extends React.Component<PostRowProps> {
 }
 
 @observer
-export class PostsIndexPage extends React.Component {
+export class PostsIndexPage extends Component {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
diff --git a/adminSiteClient/RedirectsIndexPage.tsx b/adminSiteClient/RedirectsIndexPage.tsx
index 57b000ead8..0f5a0a2a7c 100644
--- a/adminSiteClient/RedirectsIndexPage.tsx
+++ b/adminSiteClient/RedirectsIndexPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { observable, action, runInAction } from "mobx"
 import { AdminLayout } from "./AdminLayout.js"
@@ -14,7 +14,7 @@ interface RedirectListItem {
 }
 
 @observer
-class RedirectRow extends React.Component<{
+class RedirectRow extends Component<{
     redirect: RedirectListItem
     onDelete: (redirect: RedirectListItem) => void
 }> {
@@ -46,7 +46,7 @@ class RedirectRow extends React.Component<{
 }
 
 @observer
-export class RedirectsIndexPage extends React.Component {
+export class RedirectsIndexPage extends Component {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
diff --git a/adminSiteClient/SaveButtons.tsx b/adminSiteClient/SaveButtons.tsx
index dbb9ed7171..ce63127a91 100644
--- a/adminSiteClient/SaveButtons.tsx
+++ b/adminSiteClient/SaveButtons.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { ChartEditor, isChartEditorInstance } from "./ChartEditor.js"
 import { action, computed } from "mobx"
 import { observer } from "mobx-react"
@@ -19,9 +19,7 @@ import {
 } from "./ChartViewEditor.js"
 
 @observer
-export class SaveButtons<
-    Editor extends AbstractChartEditor,
-> extends React.Component<{
+export class SaveButtons<Editor extends AbstractChartEditor> extends Component<{
     editor: Editor
     errorMessages: ErrorMessages
     errorMessagesForDimensions: ErrorMessagesForDimensions
@@ -50,7 +48,7 @@ export class SaveButtons<
 }
 
 @observer
-class SaveButtonsForChart extends React.Component<{
+class SaveButtonsForChart extends Component<{
     editor: ChartEditor
     errorMessages: ErrorMessages
     errorMessagesForDimensions: ErrorMessagesForDimensions
@@ -140,7 +138,7 @@ class SaveButtonsForChart extends React.Component<{
 }
 
 @observer
-class SaveButtonsForIndicatorChart extends React.Component<{
+class SaveButtonsForIndicatorChart extends Component<{
     editor: IndicatorChartEditor
     errorMessages: ErrorMessages
     errorMessagesForDimensions: ErrorMessagesForDimensions
@@ -189,7 +187,7 @@ class SaveButtonsForIndicatorChart extends React.Component<{
 }
 
 @observer
-class SaveButtonsForChartView extends React.Component<{
+class SaveButtonsForChartView extends Component<{
     editor: ChartViewEditor
     errorMessages: ErrorMessages
     errorMessagesForDimensions: ErrorMessagesForDimensions
diff --git a/adminSiteClient/SiteRedirectsIndexPage.tsx b/adminSiteClient/SiteRedirectsIndexPage.tsx
index 30fdc567fb..1fea807c0c 100644
--- a/adminSiteClient/SiteRedirectsIndexPage.tsx
+++ b/adminSiteClient/SiteRedirectsIndexPage.tsx
@@ -1,5 +1,5 @@
 import cx from "classnames"
-import React, { useContext, useEffect, useState } from "react"
+import { useContext, useEffect, useState } from "react"
 import { useForm } from "react-hook-form"
 
 import { BAKED_BASE_URL } from "../settings/clientSettings.js"
diff --git a/adminSiteClient/SourceEditPage.tsx b/adminSiteClient/SourceEditPage.tsx
index 62b1424ee1..98fd43f282 100644
--- a/adminSiteClient/SourceEditPage.tsx
+++ b/adminSiteClient/SourceEditPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { observable, computed, runInAction } from "mobx"
 import { Prompt } from "react-router-dom"
@@ -43,7 +43,7 @@ class SourceEditable {
 }
 
 @observer
-class SourceEditor extends React.Component<{ source: SourcePageData }> {
+class SourceEditor extends Component<{ source: SourcePageData }> {
     @observable newSource!: SourceEditable
     @observable isDeleted: boolean = false
 
@@ -162,7 +162,7 @@ class SourceEditor extends React.Component<{ source: SourcePageData }> {
 }
 
 @observer
-export class SourceEditPage extends React.Component<{ sourceId: number }> {
+export class SourceEditPage extends Component<{ sourceId: number }> {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
diff --git a/adminSiteClient/SourceList.tsx b/adminSiteClient/SourceList.tsx
index b304b23cfc..a5e9a23ef6 100644
--- a/adminSiteClient/SourceList.tsx
+++ b/adminSiteClient/SourceList.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 import { OwidSource } from "@ourworldindata/utils"
@@ -7,7 +7,7 @@ import { BindString } from "./Forms.js"
 const MAX_SOURCES = 10
 
 @observer
-export class SourceList extends React.Component<{
+export class SourceList extends Component<{
     sources: OwidSource[]
 }> {
     static contextType = AdminAppContext
diff --git a/adminSiteClient/TagBadge.tsx b/adminSiteClient/TagBadge.tsx
index c55d7427f5..5b2842d2d3 100644
--- a/adminSiteClient/TagBadge.tsx
+++ b/adminSiteClient/TagBadge.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import { KeyChartLevel, DbChartTagJoin } from "@ourworldindata/utils"
 
diff --git a/adminSiteClient/TagBucketSortingIcon.tsx b/adminSiteClient/TagBucketSortingIcon.tsx
index cc62391ce2..d91302402c 100644
--- a/adminSiteClient/TagBucketSortingIcon.tsx
+++ b/adminSiteClient/TagBucketSortingIcon.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { KeyChartLevel } from "@ourworldindata/utils"
 
 export const TagBucketSortingIcon = ({ level }: { level?: number }) => {
diff --git a/adminSiteClient/TagEditPage.tsx b/adminSiteClient/TagEditPage.tsx
index 374bab4a4d..cfb8faff08 100644
--- a/adminSiteClient/TagEditPage.tsx
+++ b/adminSiteClient/TagEditPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { observable, computed, runInAction } from "mobx"
 import { Prompt, Redirect } from "react-router-dom"
@@ -33,7 +33,7 @@ class TagEditable {
 }
 
 @observer
-class TagEditor extends React.Component<{ tag: TagPageData }> {
+class TagEditor extends Component<{ tag: TagPageData }> {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
@@ -177,7 +177,7 @@ class TagEditor extends React.Component<{ tag: TagPageData }> {
 }
 
 @observer
-export class TagEditPage extends React.Component<{ tagId: number }> {
+export class TagEditPage extends Component<{ tagId: number }> {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
diff --git a/adminSiteClient/TagGraphPage.tsx b/adminSiteClient/TagGraphPage.tsx
index a1cef3caf5..de64571844 100644
--- a/adminSiteClient/TagGraphPage.tsx
+++ b/adminSiteClient/TagGraphPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import { observable, action, runInAction, toJS, computed } from "mobx"
 import * as lodash from "lodash"
diff --git a/adminSiteClient/TagsIndexPage.tsx b/adminSiteClient/TagsIndexPage.tsx
index 1c6412de2b..1dcd5078a7 100644
--- a/adminSiteClient/TagsIndexPage.tsx
+++ b/adminSiteClient/TagsIndexPage.tsx
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react"
-import React from "react"
+import { Component } from "react"
 import { AdminLayout } from "./AdminLayout.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 import { observable, runInAction } from "mobx"
@@ -9,7 +9,7 @@ import { Link } from "react-router-dom"
 import { Button, Modal } from "antd"
 
 @observer
-export class TagsIndexPage extends React.Component {
+export class TagsIndexPage extends Component {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
diff --git a/adminSiteClient/TestIndexPage.tsx b/adminSiteClient/TestIndexPage.tsx
index 69753bd433..1810d3c8a6 100644
--- a/adminSiteClient/TestIndexPage.tsx
+++ b/adminSiteClient/TestIndexPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 
 import { AdminLayout } from "./AdminLayout.js"
@@ -6,7 +6,7 @@ import { Link } from "./Link.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 
 @observer
-export class TestIndexPage extends React.Component {
+export class TestIndexPage extends Component {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
diff --git a/adminSiteClient/UserEditPage.tsx b/adminSiteClient/UserEditPage.tsx
index dee6b69875..30f209d234 100644
--- a/adminSiteClient/UserEditPage.tsx
+++ b/adminSiteClient/UserEditPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { observable, runInAction } from "mobx"
 import { BindString, Toggle } from "./Forms.js"
@@ -8,7 +8,7 @@ import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 import { UserIndexMeta } from "./UserMeta.js"
 
 @observer
-export class UserEditPage extends React.Component<{ userId: number }> {
+export class UserEditPage extends Component<{ userId: number }> {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
diff --git a/adminSiteClient/UsersIndexPage.tsx b/adminSiteClient/UsersIndexPage.tsx
index 09291cf3cc..88a47492d2 100644
--- a/adminSiteClient/UsersIndexPage.tsx
+++ b/adminSiteClient/UsersIndexPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import { observable, action, runInAction } from "mobx"
 
diff --git a/adminSiteClient/VariableEditPage.tsx b/adminSiteClient/VariableEditPage.tsx
index 3632ce1b58..2fd99236e2 100644
--- a/adminSiteClient/VariableEditPage.tsx
+++ b/adminSiteClient/VariableEditPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import {
     observable,
@@ -125,7 +125,7 @@ class VariableEditable
 
 // XXX refactor with DatasetEditPage
 @observer
-class VariableEditor extends React.Component<{
+class VariableEditor extends Component<{
     variable: VariablePageData
 }> {
     @observable newVariable!: VariableEditable
@@ -727,7 +727,7 @@ class VariableEditor extends React.Component<{
 }
 
 @observer
-export class VariableEditPage extends React.Component<{ variableId: number }> {
+export class VariableEditPage extends Component<{ variableId: number }> {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
diff --git a/adminSiteClient/VariableList.tsx b/adminSiteClient/VariableList.tsx
index 8ac334ee2c..994280f925 100644
--- a/adminSiteClient/VariableList.tsx
+++ b/adminSiteClient/VariableList.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 
 import { Link } from "./Link.js"
diff --git a/adminSiteClient/VariableSelector.tsx b/adminSiteClient/VariableSelector.tsx
index 6d8b885824..5b35f0eb26 100644
--- a/adminSiteClient/VariableSelector.tsx
+++ b/adminSiteClient/VariableSelector.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import * as lodash from "lodash"
 import {
     groupBy,
diff --git a/adminSiteClient/VariablesAnnotationPage.tsx b/adminSiteClient/VariablesAnnotationPage.tsx
index e7c8a5fc3a..fb28929173 100644
--- a/adminSiteClient/VariablesAnnotationPage.tsx
+++ b/adminSiteClient/VariablesAnnotationPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { DimensionProperty } from "@ourworldindata/utils"
 import { AdminLayout } from "./AdminLayout.js"
 import { GrapherConfigGridEditor } from "./GrapherConfigGridEditor.js"
@@ -148,7 +148,7 @@ const config: GrapherConfigGridEditorConfig = {
     }),
 }
 
-export class VariablesAnnotationPage extends React.Component {
+export class VariablesAnnotationPage extends Component {
     render() {
         return (
             <AdminLayout title="Indicators">
diff --git a/adminSiteClient/VariablesIndexPage.tsx b/adminSiteClient/VariablesIndexPage.tsx
index 5009a42bf4..2d688d2aff 100644
--- a/adminSiteClient/VariablesIndexPage.tsx
+++ b/adminSiteClient/VariablesIndexPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import {
     observable,
@@ -16,7 +16,7 @@ import { VariableList, VariableListItem } from "./VariableList.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 
 @observer
-export class VariablesIndexPage extends React.Component {
+export class VariablesIndexPage extends Component {
     static contextType = AdminAppContext
     context!: AdminAppContextType
 
diff --git a/adminSiteClient/VisionDeficiencies.tsx b/adminSiteClient/VisionDeficiencies.tsx
index d2b4fbea2f..5c236a6f37 100644
--- a/adminSiteClient/VisionDeficiencies.tsx
+++ b/adminSiteClient/VisionDeficiencies.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import Select, { GroupBase, components, OptionProps } from "react-select"
 import classNames from "classnames"
 import { observer } from "mobx-react"
@@ -119,7 +119,7 @@ const VisionDeficiencyOption = (
 )
 
 @observer
-export class VisionDeficiencyDropdown extends React.Component<VisionDeficiencyDropdownProps> {
+export class VisionDeficiencyDropdown extends Component<VisionDeficiencyDropdownProps> {
     noDeficiencyOption = {
         label: "No deficiencies",
         value: "none",
diff --git a/adminSiteClient/gdocsNotifications.tsx b/adminSiteClient/gdocsNotifications.tsx
index 0ce8b97c3e..6d415bfa37 100644
--- a/adminSiteClient/gdocsNotifications.tsx
+++ b/adminSiteClient/gdocsNotifications.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { notification } from "antd"
 import { OwidGdocErrorMessageType } from "@ourworldindata/utils"
 import { match } from "ts-pattern"
diff --git a/adminSiteServer/IndexPage.tsx b/adminSiteServer/IndexPage.tsx
index 2cded50346..5a58509e04 100644
--- a/adminSiteServer/IndexPage.tsx
+++ b/adminSiteServer/IndexPage.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import {
     ENV,
     GITHUB_USERNAME,
diff --git a/adminSiteServer/LoginPage.tsx b/adminSiteServer/LoginPage.tsx
index d95292b740..def4d2d1a2 100644
--- a/adminSiteServer/LoginPage.tsx
+++ b/adminSiteServer/LoginPage.tsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 export const LoginPage = (props: { next?: string; errorMessage?: string }) => {
     const style = `
         html, body {
diff --git a/adminSiteServer/adminRouter.tsx b/adminSiteServer/adminRouter.tsx
index 4ec2039fb6..f239b00ea5 100644
--- a/adminSiteServer/adminRouter.tsx
+++ b/adminSiteServer/adminRouter.tsx
@@ -2,7 +2,7 @@
 import express, { Request, Response, Router } from "express"
 import rateLimit from "express-rate-limit"
 import filenamify from "filenamify"
-import React from "react"
+import * as React from "react"
 import { Writable } from "stream"
 import { expectInt, renderToHtmlPage } from "../serverUtils/serverUtil.js"
 import { logInWithCredentials, logOut } from "./authentication.js"
diff --git a/adminSiteServer/appClass.tsx b/adminSiteServer/appClass.tsx
index c2467c13c4..1ef3cc0546 100644
--- a/adminSiteServer/appClass.tsx
+++ b/adminSiteServer/appClass.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { simpleGit } from "simple-git"
 import express, { NextFunction } from "express"
 // eslint-disable-next-line @typescript-eslint/no-require-imports
diff --git a/adminSiteServer/testPageRouter.tsx b/adminSiteServer/testPageRouter.tsx
index 2ac528a2fc..93199b4c70 100644
--- a/adminSiteServer/testPageRouter.tsx
+++ b/adminSiteServer/testPageRouter.tsx
@@ -1,7 +1,6 @@
 // Testing pages for comparing local charts against live versions
 
 import { Router } from "express"
-import React from "react"
 
 import { renderToHtmlPage, expectInt } from "../serverUtils/serverUtil.js"
 import {
diff --git a/baker/GrapherBaker.tsx b/baker/GrapherBaker.tsx
index 313b45c7ee..2f65b46899 100644
--- a/baker/GrapherBaker.tsx
+++ b/baker/GrapherBaker.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { GrapherPage } from "../site/GrapherPage.js"
 import { DataPageV2 } from "../site/DataPageV2.js"
 import { renderToHtmlPage } from "../baker/siteRenderers.js"
diff --git a/baker/MultiDimBaker.tsx b/baker/MultiDimBaker.tsx
index 9ceb90e81a..db04ecdb3c 100644
--- a/baker/MultiDimBaker.tsx
+++ b/baker/MultiDimBaker.tsx
@@ -16,7 +16,6 @@ import {
 import * as db from "../db/db.js"
 import { renderToHtmlPage } from "./siteRenderers.js"
 import { MultiDimDataPage } from "../site/multiDim/MultiDimDataPage.js"
-import React from "react"
 import {
     BAKED_BASE_URL,
     BAKED_GRAPHER_URL,
diff --git a/baker/algolia/utils/pages.ts b/baker/algolia/utils/pages.ts
index 1045100000..f9b16b1ce6 100644
--- a/baker/algolia/utils/pages.ts
+++ b/baker/algolia/utils/pages.ts
@@ -27,7 +27,7 @@ import {
 } from "../../../site/search/searchTypes.js"
 import { getAnalyticsPageviewsByUrlObj } from "../../../db/model/Pageview.js"
 import { ArticleBlocks } from "../../../site/gdocs/components/ArticleBlocks.js"
-import React from "react"
+import { createElement } from "react"
 import {
     getFullPost,
     getPostTags,
@@ -224,10 +224,10 @@ function generateGdocRecords(
         if (!gdoc.content.body) continue
         // Only rendering the blocks - not the page nav, title, byline, etc
         const renderedPostContent = ReactDOMServer.renderToStaticMarkup(
-            React.createElement(
+            createElement(
                 "div",
                 null,
-                React.createElement(ArticleBlocks, {
+                createElement(ArticleBlocks, {
                     blocks: gdoc.content.body,
                 })
             )
diff --git a/baker/countryProfiles.tsx b/baker/countryProfiles.tsx
index 358b762606..946d9699fb 100644
--- a/baker/countryProfiles.tsx
+++ b/baker/countryProfiles.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import * as db from "../db/db.js"
 import { CountriesIndexPage } from "../site/CountriesIndexPage.js"
 import {
diff --git a/baker/formatWordpressPost.tsx b/baker/formatWordpressPost.tsx
index de045d7cf5..40b6621e39 100644
--- a/baker/formatWordpressPost.tsx
+++ b/baker/formatWordpressPost.tsx
@@ -1,6 +1,5 @@
 import cheerio from "cheerio"
 import urlSlug from "url-slug"
-import React from "react"
 import ReactDOMServer from "react-dom/server.js"
 import { HTTPS_ONLY } from "../settings/serverSettings.js"
 import { GrapherExports } from "../baker/GrapherBakingUtils.js"
diff --git a/baker/siteRenderers.tsx b/baker/siteRenderers.tsx
index de8bd8deaa..f2df79ef18 100644
--- a/baker/siteRenderers.tsx
+++ b/baker/siteRenderers.tsx
@@ -10,7 +10,6 @@ import { ExplorerIndexPage } from "../site/ExplorerIndexPage.js"
 import { ThankYouPage } from "../site/ThankYouPage.js"
 import TombstonePage from "../site/TombstonePage.js"
 import OwidGdocPage from "../site/gdocs/OwidGdocPage.js"
-import React from "react"
 import ReactDOMServer from "react-dom/server.js"
 import * as lodash from "lodash"
 import { formatCountryProfile, isCanonicalInternalUrl } from "./formatting.js"
diff --git a/explorerAdminClient/ExplorerCreatePage.jsdom.test.tsx b/explorerAdminClient/ExplorerCreatePage.jsdom.test.tsx
index 686a9c91ba..21fdb3cbb5 100755
--- a/explorerAdminClient/ExplorerCreatePage.jsdom.test.tsx
+++ b/explorerAdminClient/ExplorerCreatePage.jsdom.test.tsx
@@ -1,7 +1,4 @@
-#! /usr/bin/env jest
-
-import React from "react"
-import { ExplorerCreatePage } from "./ExplorerCreatePage.js"
+#! /usr/bin/env jestimport { ExplorerCreatePage } from "./ExplorerCreatePage.js"
 
 import Enzyme from "enzyme"
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
diff --git a/explorerAdminClient/ExplorerCreatePage.tsx b/explorerAdminClient/ExplorerCreatePage.tsx
index 96ff261a1a..73fb57da87 100644
--- a/explorerAdminClient/ExplorerCreatePage.tsx
+++ b/explorerAdminClient/ExplorerCreatePage.tsx
@@ -11,7 +11,7 @@ import Handsontable from "handsontable"
 import { registerAllModules } from "handsontable/registry"
 import { action, computed, observable } from "mobx"
 import { observer } from "mobx-react"
-import React from "react"
+import { Component, createRef } from "react"
 import { Prompt } from "react-router-dom"
 import {
     DefaultNewExplorerSlug,
@@ -39,7 +39,7 @@ const RESERVED_NAMES = [DefaultNewExplorerSlug, "index", "new", "create"] // don
 registerAllModules()
 
 @observer
-export class ExplorerCreatePage extends React.Component<{
+export class ExplorerCreatePage extends Component<{
     slug: string
     gitCmsBranchName: string
     manager?: AdminManager
@@ -325,12 +325,12 @@ export class ExplorerCreatePage extends React.Component<{
     }
 }
 
-class HotEditor extends React.Component<{
+class HotEditor extends Component<{
     onChange: (code: string) => void
     program: ExplorerProgram
     programOnDisk: ExplorerProgram
 }> {
-    private hotTableComponent = React.createRef<HotTableClass>()
+    private hotTableComponent = createRef<HotTableClass>()
 
     @computed private get program() {
         return this.props.program
@@ -467,7 +467,7 @@ class HotEditor extends React.Component<{
     }
 }
 
-class PictureInPicture extends React.Component<{
+class PictureInPicture extends Component<{
     previewLink: string
 }> {
     render() {
@@ -480,7 +480,7 @@ class PictureInPicture extends React.Component<{
     }
 }
 
-class TemplatesComponent extends React.Component<{
+class TemplatesComponent extends Component<{
     isNewFile: boolean
     onChange: (code: string) => void
 }> {
diff --git a/explorerAdminClient/ExplorersListPage.tsx b/explorerAdminClient/ExplorersListPage.tsx
index 225995eb94..d4e1b079c6 100644
--- a/explorerAdminClient/ExplorersListPage.tsx
+++ b/explorerAdminClient/ExplorersListPage.tsx
@@ -14,7 +14,7 @@ import {
     runInAction,
 } from "mobx"
 import { observer } from "mobx-react"
-import React from "react"
+import { Component } from "react"
 import {
     DefaultNewExplorerSlug,
     ExplorersRouteResponse,
@@ -35,7 +35,7 @@ import { BAKED_BASE_URL } from "../settings/clientSettings.js"
 import { AdminManager } from "./AdminManager.js"
 
 @observer
-class ExplorerRow extends React.Component<{
+class ExplorerRow extends Component<{
     explorer: ExplorerProgram
     indexPage: ExplorersIndexPage
     gitCmsBranchName: string
@@ -148,7 +148,7 @@ class ExplorerRow extends React.Component<{
 }
 
 @observer
-class ExplorerList extends React.Component<{
+class ExplorerList extends Component<{
     explorers: ExplorerProgram[]
     searchHighlight?: (text: string) => any
     indexPage: ExplorersIndexPage
@@ -185,7 +185,7 @@ class ExplorerList extends React.Component<{
 }
 
 @observer
-export class ExplorersIndexPage extends React.Component<{
+export class ExplorersIndexPage extends Component<{
     manager?: AdminManager
 }> {
     @observable explorers: ExplorerProgram[] = []
diff --git a/packages/@ourworldindata/components/src/Button/Button.tsx b/packages/@ourworldindata/components/src/Button/Button.tsx
index ee31c82545..aaf4213483 100644
--- a/packages/@ourworldindata/components/src/Button/Button.tsx
+++ b/packages/@ourworldindata/components/src/Button/Button.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import cx from "classnames"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { IconDefinition, faArrowRight } from "@fortawesome/free-solid-svg-icons"
diff --git a/packages/@ourworldindata/components/src/Checkbox.tsx b/packages/@ourworldindata/components/src/Checkbox.tsx
index d3af557fde..787fd8b4a8 100644
--- a/packages/@ourworldindata/components/src/Checkbox.tsx
+++ b/packages/@ourworldindata/components/src/Checkbox.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faCheck } from "@fortawesome/free-solid-svg-icons"
 
diff --git a/packages/@ourworldindata/components/src/CodeSnippet/CodeSnippet.stories.tsx b/packages/@ourworldindata/components/src/CodeSnippet/CodeSnippet.stories.tsx
index 68275f415b..79b74cb16b 100644
--- a/packages/@ourworldindata/components/src/CodeSnippet/CodeSnippet.stories.tsx
+++ b/packages/@ourworldindata/components/src/CodeSnippet/CodeSnippet.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { CodeSnippet } from "./CodeSnippet.js"
 
 export default {
diff --git a/packages/@ourworldindata/components/src/CodeSnippet/CodeSnippet.tsx b/packages/@ourworldindata/components/src/CodeSnippet/CodeSnippet.tsx
index 50a97ff17e..bbd26e0c25 100644
--- a/packages/@ourworldindata/components/src/CodeSnippet/CodeSnippet.tsx
+++ b/packages/@ourworldindata/components/src/CodeSnippet/CodeSnippet.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import ReactDOM from "react-dom"
 import ReactDOMServer from "react-dom/server.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
diff --git a/packages/@ourworldindata/components/src/DataCitation/DataCitation.tsx b/packages/@ourworldindata/components/src/DataCitation/DataCitation.tsx
index 055f7015ad..5931346197 100644
--- a/packages/@ourworldindata/components/src/DataCitation/DataCitation.tsx
+++ b/packages/@ourworldindata/components/src/DataCitation/DataCitation.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { CodeSnippet } from "../CodeSnippet/CodeSnippet.js"
 
 export const DataCitation = (props: {
diff --git a/packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.tsx b/packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.tsx
index fde1c3bc1c..f6d63fabf5 100644
--- a/packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.tsx
+++ b/packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.tsx
@@ -1,6 +1,7 @@
 import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import React, { useState } from "react"
+import { useState } from "react"
+import * as React from "react"
 import cx from "classnames"
 
 export const ExpandableToggle = ({
diff --git a/packages/@ourworldindata/components/src/Halo/Halo.tsx b/packages/@ourworldindata/components/src/Halo/Halo.tsx
index 6732a911d0..92a42cf73c 100644
--- a/packages/@ourworldindata/components/src/Halo/Halo.tsx
+++ b/packages/@ourworldindata/components/src/Halo/Halo.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Color } from "@ourworldindata/types"
 
 const defaultHaloStyle: React.CSSProperties = {
diff --git a/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx b/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx
index a04d4d8604..9f308e195a 100644
--- a/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx
+++ b/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import {
     OwidProcessingLevel,
     getPhraseForProcessingLevel,
diff --git a/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx b/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx
index 7ddf380185..e110148ced 100644
--- a/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx
+++ b/packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { SimpleMarkdownText } from "../SimpleMarkdownText.js"
 import { faArrowDown } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
diff --git a/packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.tsx b/packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.tsx
index c632cf301d..2df7948de9 100644
--- a/packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.tsx
+++ b/packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import cx from "classnames"
 import { ExpandableToggle } from "../ExpandableToggle/ExpandableToggle.js"
 import { DisplaySource, uniqBy, formatSourceDate } from "@ourworldindata/utils"
diff --git a/packages/@ourworldindata/components/src/LabeledSwitch/LabeledSwitch.tsx b/packages/@ourworldindata/components/src/LabeledSwitch/LabeledSwitch.tsx
index 4a65531fe7..bad6ed0ef7 100644
--- a/packages/@ourworldindata/components/src/LabeledSwitch/LabeledSwitch.tsx
+++ b/packages/@ourworldindata/components/src/LabeledSwitch/LabeledSwitch.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"
diff --git a/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.stories.tsx b/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.stories.tsx
index 5f9755c56f..de160e284e 100644
--- a/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.stories.tsx
+++ b/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.stories.tsx
@@ -1,4 +1,5 @@
-import React, { createRef } from "react"
+import { createRef } from "react"
+import * as React from "react"
 import { action, computed, observable } from "mobx"
 import { observer } from "mobx-react"
 import {
diff --git a/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx b/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx
index 1baff419ea..494e67e4a0 100644
--- a/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx
+++ b/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties } from "react"
+import { CSSProperties } from "react"
+import * as React from "react"
 import { computed } from "mobx"
 import {
     excludeUndefined,
diff --git a/packages/@ourworldindata/components/src/OverlayHeader.tsx b/packages/@ourworldindata/components/src/OverlayHeader.tsx
index 2a9ec83750..f81fc15c40 100644
--- a/packages/@ourworldindata/components/src/OverlayHeader.tsx
+++ b/packages/@ourworldindata/components/src/OverlayHeader.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import cx from "classnames"
 import { CloseButton } from "./closeButton/CloseButton.js"
 
diff --git a/packages/@ourworldindata/components/src/RadioButton.tsx b/packages/@ourworldindata/components/src/RadioButton.tsx
index 638559ae47..94e1dc934a 100644
--- a/packages/@ourworldindata/components/src/RadioButton.tsx
+++ b/packages/@ourworldindata/components/src/RadioButton.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 
 export class RadioButton extends React.Component<{
     checked: boolean
diff --git a/packages/@ourworldindata/components/src/SimpleMarkdownText.tsx b/packages/@ourworldindata/components/src/SimpleMarkdownText.tsx
index b36a879b91..8c92eb0b78 100644
--- a/packages/@ourworldindata/components/src/SimpleMarkdownText.tsx
+++ b/packages/@ourworldindata/components/src/SimpleMarkdownText.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed } from "mobx"
 import { Remark, useRemarkSync, UseRemarkSyncOptions } from "react-remark"
 import { remarkPlainLinks } from "./markdown/remarkPlainLinks.js"
diff --git a/packages/@ourworldindata/components/src/TextWrap/TextWrap.stories.tsx b/packages/@ourworldindata/components/src/TextWrap/TextWrap.stories.tsx
index 369959ec64..33ec426984 100644
--- a/packages/@ourworldindata/components/src/TextWrap/TextWrap.stories.tsx
+++ b/packages/@ourworldindata/components/src/TextWrap/TextWrap.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 
 import { TextWrap } from "./TextWrap"
 
diff --git a/packages/@ourworldindata/components/src/TextWrap/TextWrap.tsx b/packages/@ourworldindata/components/src/TextWrap/TextWrap.tsx
index 87ba9eddfe..7912d62acc 100644
--- a/packages/@ourworldindata/components/src/TextWrap/TextWrap.tsx
+++ b/packages/@ourworldindata/components/src/TextWrap/TextWrap.tsx
@@ -1,6 +1,6 @@
 import { max, stripHTML, Bounds, FontFamily, last } from "@ourworldindata/utils"
 import { computed } from "mobx"
-import React from "react"
+import * as React from "react"
 import { Fragment, joinFragments, splitIntoFragments } from "./TextWrapUtils"
 
 declare type FontSize = number
diff --git a/packages/@ourworldindata/components/src/TextWrap/TextWrapGroup.tsx b/packages/@ourworldindata/components/src/TextWrap/TextWrapGroup.tsx
index 05a4f16eda..d540132ed7 100644
--- a/packages/@ourworldindata/components/src/TextWrap/TextWrapGroup.tsx
+++ b/packages/@ourworldindata/components/src/TextWrap/TextWrapGroup.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed } from "mobx"
 import { TextWrap } from "./TextWrap"
 import { splitIntoFragments } from "./TextWrapUtils"
diff --git a/packages/@ourworldindata/components/src/closeButton/CloseButton.tsx b/packages/@ourworldindata/components/src/closeButton/CloseButton.tsx
index d8be4ca885..45a1894697 100644
--- a/packages/@ourworldindata/components/src/closeButton/CloseButton.tsx
+++ b/packages/@ourworldindata/components/src/closeButton/CloseButton.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import cx from "classnames"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faXmark } from "@fortawesome/free-solid-svg-icons"
diff --git a/packages/@ourworldindata/explorer/src/Explorer.sample.tsx b/packages/@ourworldindata/explorer/src/Explorer.sample.tsx
index 53cb8bff93..7c90092016 100644
--- a/packages/@ourworldindata/explorer/src/Explorer.sample.tsx
+++ b/packages/@ourworldindata/explorer/src/Explorer.sample.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { DimensionProperty } from "@ourworldindata/utils"
 import { GRAPHER_TAB_OPTIONS } from "@ourworldindata/types"
 import { GrapherProgrammaticInterface } from "@ourworldindata/grapher"
diff --git a/packages/@ourworldindata/explorer/src/ExplorerControls.jsdom.test.tsx b/packages/@ourworldindata/explorer/src/ExplorerControls.jsdom.test.tsx
index 8be4b11d13..19bfa65ae2 100755
--- a/packages/@ourworldindata/explorer/src/ExplorerControls.jsdom.test.tsx
+++ b/packages/@ourworldindata/explorer/src/ExplorerControls.jsdom.test.tsx
@@ -1,7 +1,4 @@
-#! /usr/bin/env jest
-
-import React from "react"
-import { ExplorerControlType } from "./ExplorerConstants.js"
+#! /usr/bin/env jestimport { ExplorerControlType } from "./ExplorerConstants.js"
 import { ExplorerControlPanel } from "./ExplorerControls.js"
 
 import Enzyme from "enzyme"
diff --git a/packages/@ourworldindata/explorer/src/ExplorerControls.tsx b/packages/@ourworldindata/explorer/src/ExplorerControls.tsx
index f1d8b5016a..1e76b270cd 100644
--- a/packages/@ourworldindata/explorer/src/ExplorerControls.tsx
+++ b/packages/@ourworldindata/explorer/src/ExplorerControls.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { observer } from "mobx-react"
 import { action, computed } from "mobx"
 import Select, { components, SingleValueProps } from "react-select"
@@ -17,7 +17,7 @@ const SELECTED_OPTION_CLASS = "SelectedOption"
 const EXPLORER_DROPDOWN_CLASS = "ExplorerDropdown"
 const HIDDEN_CONTROL_HEADER_CLASS = "HiddenControlHeader"
 
-export class ExplorerControlBar extends React.Component<{
+export class ExplorerControlBar extends Component<{
     isMobile?: boolean
     showControls?: boolean
     closeControls?: () => void
@@ -105,7 +105,7 @@ const ExplorerDropdown = (props: {
 }
 
 @observer
-export class ExplorerControlPanel extends React.Component<{
+export class ExplorerControlPanel extends Component<{
     choice: ExplorerChoice
     explorerSlug?: string
     onChange?: (value: string) => void
diff --git a/packages/@ourworldindata/grapher/src/axis/AxisViews.jsdom.test.tsx b/packages/@ourworldindata/grapher/src/axis/AxisViews.jsdom.test.tsx
index a6eda45a4b..bb6ac66a29 100755
--- a/packages/@ourworldindata/grapher/src/axis/AxisViews.jsdom.test.tsx
+++ b/packages/@ourworldindata/grapher/src/axis/AxisViews.jsdom.test.tsx
@@ -1,8 +1,5 @@
-#! /usr/bin/env jest
-
-import { AxisConfig } from "./AxisConfig"
+#! /usr/bin/env jestimport { AxisConfig } from "./AxisConfig"
 import { DualAxisComponent, HorizontalAxisGridLines } from "./AxisViews"
-import React from "react"
 import { ScaleType } from "@ourworldindata/types"
 import { DualAxis } from "./Axis"
 
diff --git a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
index bd4c533dc9..362cd2153c 100644
--- a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
+++ b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed } from "mobx"
 import { observer } from "mobx-react"
 import {
diff --git a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.stories.tsx b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.stories.tsx
index 577196e387..5ba2e1b35c 100644
--- a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { DiscreteBarChart } from "./DiscreteBarChart"
 import {
     SampleColumnSlugs,
diff --git a/packages/@ourworldindata/grapher/src/bodyDiv/BodyDiv.tsx b/packages/@ourworldindata/grapher/src/bodyDiv/BodyDiv.tsx
index f7445d9844..b2101e0afd 100644
--- a/packages/@ourworldindata/grapher/src/bodyDiv/BodyDiv.tsx
+++ b/packages/@ourworldindata/grapher/src/bodyDiv/BodyDiv.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import ReactDOM from "react-dom"
 
 interface BodyDivProps {
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.stories.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.stories.tsx
index 830ed48469..1cc2db9e3f 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.stories.tsx
@@ -6,7 +6,7 @@ import {
     SeriesStrategy,
 } from "@ourworldindata/types"
 import { DEFAULT_BOUNDS } from "@ourworldindata/utils"
-import React from "react"
+import * as React from "react"
 import {
     CaptionedChart,
     CaptionedChartManager,
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
index babbce9753..b7fc5140dd 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
+++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed } from "mobx"
 import { observer } from "mobx-react"
 import {
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/Logos.tsx b/packages/@ourworldindata/grapher/src/captionedChart/Logos.tsx
index 2d5273fc4d..ff8c3acc64 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/Logos.tsx
+++ b/packages/@ourworldindata/grapher/src/captionedChart/Logos.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed } from "mobx"
 import {
     OWID_LOGO_SVG,
diff --git a/packages/@ourworldindata/grapher/src/chart/ChartManager.ts b/packages/@ourworldindata/grapher/src/chart/ChartManager.ts
index 630db5820e..3173fc20b6 100644
--- a/packages/@ourworldindata/grapher/src/chart/ChartManager.ts
+++ b/packages/@ourworldindata/grapher/src/chart/ChartManager.ts
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import {
     EntitySelectionMode,
     FacetStrategy,
diff --git a/packages/@ourworldindata/grapher/src/chart/ChartTypeSwitcher.tsx b/packages/@ourworldindata/grapher/src/chart/ChartTypeSwitcher.tsx
index 0e1886d7a8..7ba3da16b3 100644
--- a/packages/@ourworldindata/grapher/src/chart/ChartTypeSwitcher.tsx
+++ b/packages/@ourworldindata/grapher/src/chart/ChartTypeSwitcher.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import {
     ALL_GRAPHER_CHART_TYPES,
     GrapherChartType,
diff --git a/packages/@ourworldindata/grapher/src/chart/ChartUtils.tsx b/packages/@ourworldindata/grapher/src/chart/ChartUtils.tsx
index 08810daa58..36357a0c80 100644
--- a/packages/@ourworldindata/grapher/src/chart/ChartUtils.tsx
+++ b/packages/@ourworldindata/grapher/src/chart/ChartUtils.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { areSetsEqual, Box, getCountryByName } from "@ourworldindata/utils"
 import {
     SeriesStrategy,
diff --git a/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx b/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx
index 4b81087e96..dadc693d30 100644
--- a/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from "react"
+import { useState } from "react"
+import * as React from "react"
 import { computed, action } from "mobx"
 import { observer } from "mobx-react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
diff --git a/packages/@ourworldindata/grapher/src/controls/ChartIcons.tsx b/packages/@ourworldindata/grapher/src/controls/ChartIcons.tsx
index 6ca49c648f..aa653dd953 100644
--- a/packages/@ourworldindata/grapher/src/controls/ChartIcons.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/ChartIcons.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import {
     faChartBar,
diff --git a/packages/@ourworldindata/grapher/src/controls/CommandPalette.stories.tsx b/packages/@ourworldindata/grapher/src/controls/CommandPalette.stories.tsx
index 7a5dfbb695..59b4698b01 100644
--- a/packages/@ourworldindata/grapher/src/controls/CommandPalette.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/CommandPalette.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { CommandPalette, Command } from "../controls/CommandPalette"
 
 export default {
diff --git a/packages/@ourworldindata/grapher/src/controls/CommandPalette.tsx b/packages/@ourworldindata/grapher/src/controls/CommandPalette.tsx
index f2c39b1218..8bf3363178 100644
--- a/packages/@ourworldindata/grapher/src/controls/CommandPalette.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/CommandPalette.tsx
@@ -1,7 +1,7 @@
 import { BodyDiv } from "../bodyDiv/BodyDiv"
 import { sortBy } from "@ourworldindata/utils"
 import { observer } from "mobx-react"
-import React from "react"
+import * as React from "react"
 
 declare type keyboardCombo = string
 
diff --git a/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx b/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx
index 848f434051..78ed5aa34a 100644
--- a/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { action, computed } from "mobx"
 import { observer } from "mobx-react"
 import classnames from "classnames"
diff --git a/packages/@ourworldindata/grapher/src/controls/Dropdown.tsx b/packages/@ourworldindata/grapher/src/controls/Dropdown.tsx
index 445e1b237f..3ec4867cd5 100644
--- a/packages/@ourworldindata/grapher/src/controls/Dropdown.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/Dropdown.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import Select, { Props } from "react-select"
 import cx from "classnames"
 
diff --git a/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx b/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
index efff60da4e..23d80f5d59 100644
--- a/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed } from "mobx"
 import { observer } from "mobx-react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
diff --git a/packages/@ourworldindata/grapher/src/controls/MapProjectionMenu.tsx b/packages/@ourworldindata/grapher/src/controls/MapProjectionMenu.tsx
index 5b7621e73d..eabe02d0d7 100644
--- a/packages/@ourworldindata/grapher/src/controls/MapProjectionMenu.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/MapProjectionMenu.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed, action } from "mobx"
 import { observer } from "mobx-react"
 import { MapConfig } from "../mapCharts/MapConfig"
diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
index 961863e4d6..b1d5dca342 100644
--- a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed, action, observable } from "mobx"
 import { observer } from "mobx-react"
 import classnames from "classnames"
diff --git a/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx b/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx
index 46cf518d4a..c99e0a6e2e 100644
--- a/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react"
-import React from "react"
+import * as React from "react"
 import { computed, action } from "mobx"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faXTwitter, faFacebook } from "@fortawesome/free-brands-svg-icons"
diff --git a/packages/@ourworldindata/grapher/src/controls/SortIcon.tsx b/packages/@ourworldindata/grapher/src/controls/SortIcon.tsx
index c17d1d2ae4..e08865f987 100644
--- a/packages/@ourworldindata/grapher/src/controls/SortIcon.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/SortIcon.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import classnames from "classnames"
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core/index"
 import {
diff --git a/packages/@ourworldindata/grapher/src/controls/VerticalScrollContainer.tsx b/packages/@ourworldindata/grapher/src/controls/VerticalScrollContainer.tsx
index 4b3c05f390..d561aa86a3 100644
--- a/packages/@ourworldindata/grapher/src/controls/VerticalScrollContainer.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/VerticalScrollContainer.tsx
@@ -1,5 +1,7 @@
 /* eslint-disable react/prop-types */
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
+
+import * as React from "react"
 import classnames from "classnames"
 
 type VerticalScrollContainerProps = React.DetailedHTMLProps<
diff --git a/packages/@ourworldindata/grapher/src/controls/controlsRow/ControlsRow.tsx b/packages/@ourworldindata/grapher/src/controls/controlsRow/ControlsRow.tsx
index 740acec567..f621c4a941 100644
--- a/packages/@ourworldindata/grapher/src/controls/controlsRow/ControlsRow.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/controlsRow/ControlsRow.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Component } from "react"
 import { computed } from "mobx"
 import { observer } from "mobx-react"
 
@@ -29,7 +29,7 @@ export interface ControlsRowManager
 }
 
 @observer
-export class ControlsRow extends React.Component<{
+export class ControlsRow extends Component<{
     manager: ControlsRowManager
     maxWidth?: number
     settingsMenuTop?: number
diff --git a/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx b/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx
index 0f8a7fae88..f7c4dfc93e 100644
--- a/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { action, computed, observable, runInAction, reaction } from "mobx"
 import { observer } from "mobx-react"
 import { Flipper, Flipped } from "react-flip-toolkit"
diff --git a/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.jsdom.test.tsx b/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.jsdom.test.tsx
index 76c2e22b52..bdadf0d6e0 100644
--- a/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.jsdom.test.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.jsdom.test.tsx
@@ -1,8 +1,4 @@
-#! /usr/bin/env jest
-
-import React from "react"
-
-import Enzyme from "enzyme"
+#! /usr/bin/env jestimport Enzyme from "enzyme"
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
 import { GlobalEntitySelector } from "./GlobalEntitySelector"
 import { SelectionArray } from "../../selection/SelectionArray"
diff --git a/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.stories.tsx b/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.stories.tsx
index b658ec4c11..face91d2ee 100644
--- a/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { SelectionArray } from "../../selection/SelectionArray"
 import { GlobalEntitySelector } from "./GlobalEntitySelector"
 
diff --git a/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.tsx b/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.tsx
index 9075c55762..cf8a28c7b6 100644
--- a/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import ReactDOM from "react-dom"
 import { action, observable, IReactionDisposer, reaction, computed } from "mobx"
 import { observer } from "mobx-react"
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx
index d24ce59e35..55ad25476d 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/AbsRelToggle.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed, action } from "mobx"
 import { observer } from "mobx-react"
 import {
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/AxisScaleToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/AxisScaleToggle.tsx
index 0821960163..8afe6e2379 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/AxisScaleToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/AxisScaleToggle.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { action } from "mobx"
 import { observer } from "mobx-react"
 import { ScaleType } from "@ourworldindata/types"
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/FacetStrategySelector.tsx b/packages/@ourworldindata/grapher/src/controls/settings/FacetStrategySelector.tsx
index a96e11782e..a6d9c97973 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/FacetStrategySelector.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/FacetStrategySelector.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed } from "mobx"
 import { observer } from "mobx-react"
 import { DEFAULT_GRAPHER_ENTITY_TYPE } from "../../core/GrapherConstants"
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx
index 359fb224b2..d8cc3ef872 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/FacetYDomainToggle.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed, action } from "mobx"
 import { observer } from "mobx-react"
 import { FacetAxisDomain, FacetStrategy } from "@ourworldindata/types"
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx
index 2c0af0baba..0b58e8e0ca 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/NoDataAreaToggle.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed, action } from "mobx"
 import { observer } from "mobx-react"
 import { LabeledSwitch } from "@ourworldindata/components"
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx
index d0aefe432f..c3c96c1136 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/TableFilterToggle.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { action, computed } from "mobx"
 import { observer } from "mobx-react"
 import { DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL } from "../../core/GrapherConstants"
diff --git a/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx b/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx
index cbbaf5871b..0c0d40bdd6 100644
--- a/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/settings/ZoomToggle.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { action } from "mobx"
 import { observer } from "mobx-react"
 import { LabeledSwitch } from "@ourworldindata/components"
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.stories.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.stories.tsx
index e7b31d2b84..88836052b2 100644
--- a/packages/@ourworldindata/grapher/src/core/Grapher.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/core/Grapher.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Grapher, GrapherProgrammaticInterface } from "./Grapher"
 import {
     SampleColumnSlugs,
diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.jsdom.test.tsx b/packages/@ourworldindata/grapher/src/dataTable/DataTable.jsdom.test.tsx
index de5bcd27e3..322192eb7b 100755
--- a/packages/@ourworldindata/grapher/src/dataTable/DataTable.jsdom.test.tsx
+++ b/packages/@ourworldindata/grapher/src/dataTable/DataTable.jsdom.test.tsx
@@ -1,8 +1,4 @@
-#! /usr/bin/env jest
-
-import React from "react"
-
-import { DataTable } from "./DataTable"
+#! /usr/bin/env jestimport { DataTable } from "./DataTable"
 import { GRAPHER_CHART_TYPES, GRAPHER_TAB_OPTIONS } from "@ourworldindata/types"
 import {
     childMortalityGrapher,
diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.stories.tsx b/packages/@ourworldindata/grapher/src/dataTable/DataTable.stories.tsx
index 495e3140c5..5ad59d8828 100644
--- a/packages/@ourworldindata/grapher/src/dataTable/DataTable.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/dataTable/DataTable.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { DataTable, DataTableManager } from "./DataTable"
 import { SynthesizeGDPTable } from "@ourworldindata/core-table"
 import { GRAPHER_CHART_TYPES, GRAPHER_TAB_OPTIONS } from "@ourworldindata/types"
diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx b/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx
index 3e1af11460..f7113ced87 100644
--- a/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx
+++ b/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed, observable, action } from "mobx"
 import { observer } from "mobx-react"
 import classnames from "classnames"
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
index 3d547020bb..6aa4875123 100644
--- a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
+++ b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import { computed, action, reaction } from "mobx"
 import cx from "classnames"
diff --git a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.stories.tsx b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.stories.tsx
index 1bc6a3243b..b5e883f499 100644
--- a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { FacetChart } from "./FacetChart"
 import {
     SampleColumnSlugs,
diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.stories.tsx b/packages/@ourworldindata/grapher/src/footer/Footer.stories.tsx
index 2fc97a9d33..db0aefc565 100644
--- a/packages/@ourworldindata/grapher/src/footer/Footer.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/footer/Footer.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Footer } from "../footer/Footer"
 import { FooterManager } from "./FooterManager"
 
diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.tsx b/packages/@ourworldindata/grapher/src/footer/Footer.tsx
index b1a9807e2e..d2132d46b0 100644
--- a/packages/@ourworldindata/grapher/src/footer/Footer.tsx
+++ b/packages/@ourworldindata/grapher/src/footer/Footer.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observable, computed, action } from "mobx"
 import { observer } from "mobx-react"
 import parseUrl from "url-parse"
diff --git a/packages/@ourworldindata/grapher/src/fullScreen/FullScreen.tsx b/packages/@ourworldindata/grapher/src/fullScreen/FullScreen.tsx
index 341d94474d..8acd8a6507 100644
--- a/packages/@ourworldindata/grapher/src/fullScreen/FullScreen.tsx
+++ b/packages/@ourworldindata/grapher/src/fullScreen/FullScreen.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { action } from "mobx"
 import { observer } from "mobx-react"
 import { BodyDiv } from "../bodyDiv/BodyDiv"
diff --git a/packages/@ourworldindata/grapher/src/header/Header.stories.tsx b/packages/@ourworldindata/grapher/src/header/Header.stories.tsx
index 12e0c9b4a9..c9594f5781 100644
--- a/packages/@ourworldindata/grapher/src/header/Header.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/header/Header.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Header } from "./Header"
 import { HeaderManager } from "./HeaderManager"
 
diff --git a/packages/@ourworldindata/grapher/src/header/Header.tsx b/packages/@ourworldindata/grapher/src/header/Header.tsx
index 286198bc7a..f961a6d1b0 100644
--- a/packages/@ourworldindata/grapher/src/header/Header.tsx
+++ b/packages/@ourworldindata/grapher/src/header/Header.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import {
     DEFAULT_BOUNDS,
     range,
diff --git a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
index 37ed032586..31ad4e8050 100644
--- a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
+++ b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { action, computed } from "mobx"
 import { observer } from "mobx-react"
 import {
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.stories.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.stories.tsx
index 9ad72efc4f..f46badff80 100644
--- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { LineChart } from "../lineCharts/LineChart"
 import { OwidTableSlugs, ScaleType } from "@ourworldindata/types"
 import {
diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.stories.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.stories.tsx
index f0d8628269..3b947697b6 100644
--- a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.stories.tsx
@@ -1,6 +1,6 @@
 import { DualAxis } from "../axis/Axis"
 import { AxisConfig } from "../axis/AxisConfig"
-import React from "react"
+import * as React from "react"
 import { LineLegend, LineLegendManager } from "./LineLegend"
 
 export default {
diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
index f36393b9e9..ed14c1c17d 100644
--- a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
@@ -1,5 +1,5 @@
 // This implements the line labels that appear to the right of the lines/polygons in LineCharts/StackedAreas.
-import React from "react"
+import * as React from "react"
 import {
     Bounds,
     noop,
diff --git a/packages/@ourworldindata/grapher/src/loadingIndicator/LoadingIndicator.stories.tsx b/packages/@ourworldindata/grapher/src/loadingIndicator/LoadingIndicator.stories.tsx
index 3ba8766b4b..7b81590e5f 100644
--- a/packages/@ourworldindata/grapher/src/loadingIndicator/LoadingIndicator.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/loadingIndicator/LoadingIndicator.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { LoadingIndicator } from "./LoadingIndicator"
 
 export default {
diff --git a/packages/@ourworldindata/grapher/src/loadingIndicator/LoadingIndicator.tsx b/packages/@ourworldindata/grapher/src/loadingIndicator/LoadingIndicator.tsx
index 527ae3274c..6fb69ff665 100644
--- a/packages/@ourworldindata/grapher/src/loadingIndicator/LoadingIndicator.tsx
+++ b/packages/@ourworldindata/grapher/src/loadingIndicator/LoadingIndicator.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Bounds } from "@ourworldindata/utils"
 
 const DEFAULT_COLOR = "#333"
diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.stories.tsx b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.stories.tsx
index c5c24bc159..c91a3b06e3 100644
--- a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { MapChart } from "./MapChart"
 import { SynthesizeGDPTable } from "@ourworldindata/core-table"
 
diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapSparkline.tsx b/packages/@ourworldindata/grapher/src/mapCharts/MapSparkline.tsx
index 72977920cd..bab838ac45 100644
--- a/packages/@ourworldindata/grapher/src/mapCharts/MapSparkline.tsx
+++ b/packages/@ourworldindata/grapher/src/mapCharts/MapSparkline.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed } from "mobx"
 import { observer } from "mobx-react"
 import {
diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.jsdom.test.tsx b/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.jsdom.test.tsx
index 2344e68090..9b4dcfc244 100755
--- a/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.jsdom.test.tsx
+++ b/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.jsdom.test.tsx
@@ -1,7 +1,4 @@
-#! /usr/bin/env jest
-
-import React from "react"
-import { Grapher } from "../core/Grapher"
+#! /usr/bin/env jestimport { Grapher } from "../core/Grapher"
 import { legacyMapGrapher } from "./MapChart.sample"
 
 import Enzyme from "enzyme"
diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.stories.tsx b/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.stories.tsx
index d8307c808c..d0090c2174 100644
--- a/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { MapTooltip } from "./MapTooltip"
 import { Grapher } from "../core/Grapher"
 import { legacyMapGrapher } from "./MapChart.sample"
diff --git a/packages/@ourworldindata/grapher/src/modal/DownloadIcons.tsx b/packages/@ourworldindata/grapher/src/modal/DownloadIcons.tsx
index 85ce38ac4f..44d456c02f 100644
--- a/packages/@ourworldindata/grapher/src/modal/DownloadIcons.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/DownloadIcons.tsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 export const DownloadIconFullDataset = () => (
     <svg
         width="34"
diff --git a/packages/@ourworldindata/grapher/src/modal/DownloadModal.stories.tsx b/packages/@ourworldindata/grapher/src/modal/DownloadModal.stories.tsx
index 7e637e0bef..c55a266e2e 100644
--- a/packages/@ourworldindata/grapher/src/modal/DownloadModal.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/DownloadModal.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import {
     DEFAULT_GRAPHER_HEIGHT,
     DEFAULT_GRAPHER_WIDTH,
diff --git a/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx b/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx
index e6315422f7..e8c9930dab 100644
--- a/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx
@@ -1,4 +1,5 @@
-import React, { useCallback, useMemo, useState } from "react"
+import { useCallback, useMemo, useState } from "react"
+import * as React from "react"
 import { observable, computed, action } from "mobx"
 import { observer } from "mobx-react"
 import {
diff --git a/packages/@ourworldindata/grapher/src/modal/EmbedModal.tsx b/packages/@ourworldindata/grapher/src/modal/EmbedModal.tsx
index 919024e58d..c82623ce80 100644
--- a/packages/@ourworldindata/grapher/src/modal/EmbedModal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/EmbedModal.tsx
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react"
-import React from "react"
+import * as React from "react"
 import { computed, action } from "mobx"
 import { Bounds, DEFAULT_BOUNDS } from "@ourworldindata/utils"
 import { Modal } from "./Modal"
diff --git a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx
index b83d6ed6ec..d546dd9607 100644
--- a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import { computed, action } from "mobx"
 import { Bounds, DEFAULT_BOUNDS } from "@ourworldindata/utils"
diff --git a/packages/@ourworldindata/grapher/src/modal/Modal.tsx b/packages/@ourworldindata/grapher/src/modal/Modal.tsx
index 79b78735c1..a53bf513c1 100644
--- a/packages/@ourworldindata/grapher/src/modal/Modal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/Modal.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import { action, computed } from "mobx"
 import { Bounds } from "@ourworldindata/utils"
diff --git a/packages/@ourworldindata/grapher/src/modal/ModalHeader.tsx b/packages/@ourworldindata/grapher/src/modal/ModalHeader.tsx
index 2cbf22a517..11c8a63c70 100644
--- a/packages/@ourworldindata/grapher/src/modal/ModalHeader.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/ModalHeader.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { CloseButton } from "@ourworldindata/components"
 
 export function ModalHeader({
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.tsx
index 7773fa017e..523bd81ef7 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { faArrowDown } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import {
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.tsx
index 23006ec089..3fc4dbecfb 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Fragment } from "react"
 import cx from "classnames"
 import { OwidProcessingLevel, chunk, excludeNull } from "@ourworldindata/utils"
 import {
@@ -59,7 +59,7 @@ export const SourcesKeyDataTable = (props: SourcesKeyDataTableProps) => {
                 </div>
             )}
             {rows.map(([first, second]) => (
-                <React.Fragment key={first.label}>
+                <Fragment key={first.label}>
                     <div
                         className={cx("key-data", {
                             "key-data--span": !second,
@@ -78,7 +78,7 @@ export const SourcesKeyDataTable = (props: SourcesKeyDataTableProps) => {
                             </div>
                         </div>
                     )}
-                </React.Fragment>
+                </Fragment>
             ))}
         </div>
     )
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.stories.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesModal.stories.tsx
index 237c93f04d..9df4c26fa3 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.stories.tsx
@@ -1,5 +1,5 @@
 import { SynthesizeGDPTable } from "@ourworldindata/core-table"
-import React from "react"
+import * as React from "react"
 import { SourcesModal } from "./SourcesModal"
 
 export default {
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
index 049449ea53..d3f2d1aeda 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
@@ -25,7 +25,7 @@ import {
     CLOSE_BUTTON_WIDTH,
     CloseButton,
 } from "@ourworldindata/components"
-import React from "react"
+import * as React from "react"
 import cx from "classnames"
 import { action, computed } from "mobx"
 import { observer } from "mobx-react"
diff --git a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.stories.tsx b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.stories.tsx
index 2da5875525..d4ab0913db 100644
--- a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { NoDataModal } from "./NoDataModal"
 
 export default {
diff --git a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx
index 2aa2811e0b..675d72a9db 100644
--- a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx
+++ b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed } from "mobx"
 import { observer } from "mobx-react"
 import a from "indefinite"
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx
index d1e6156d99..456b09f106 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx
@@ -5,7 +5,7 @@ import {
     PointVector,
     makeIdForHumanConsumption,
 } from "@ourworldindata/utils"
-import React from "react"
+import * as React from "react"
 import { computed } from "mobx"
 import { observer } from "mobx-react"
 import { DualAxis } from "../axis/Axis"
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ConnectedScatterLegend.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ConnectedScatterLegend.tsx
index 1705a965cc..fc3e9726e3 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ConnectedScatterLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ConnectedScatterLegend.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed } from "mobx"
 import { Triangle } from "./Triangle"
 import { TextWrap } from "@ourworldindata/components"
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/MultiColorPolyline.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/MultiColorPolyline.tsx
index d44a1e3ec9..26757962cf 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/MultiColorPolyline.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/MultiColorPolyline.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed } from "mobx"
 import { observer } from "mobx-react"
 
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx
index 9041e4ee8f..da0b23e7f6 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { Bounds, HorizontalAlign } from "@ourworldindata/utils"
 import {
     GRAPHER_FONT_SCALE_11,
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.stories.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.stories.tsx
index 1d79d92b0d..ba0787d120 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.stories.tsx
@@ -5,7 +5,7 @@ import {
 } from "@ourworldindata/core-table"
 import { ScaleType } from "@ourworldindata/types"
 import { DEFAULT_BOUNDS } from "@ourworldindata/utils"
-import React from "react"
+import * as React from "react"
 import { ScatterPlotChart } from "./ScatterPlotChart"
 import { ScatterPlotManager } from "./ScatterPlotChartConstants"
 
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPoints.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPoints.tsx
index e6a4921047..e580b4ffca 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPoints.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPoints.tsx
@@ -5,7 +5,7 @@ import {
     makeIdForHumanConsumption,
 } from "@ourworldindata/utils"
 import { observer } from "mobx-react"
-import React from "react"
+import * as React from "react"
 import { MultiColorPolyline } from "./MultiColorPolyline"
 import {
     ScatterRenderSeries,
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
index fd8d306752..92dc8bc639 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
@@ -17,7 +17,7 @@ import {
 } from "@ourworldindata/utils"
 import { computed, action, observable } from "mobx"
 import { observer } from "mobx-react"
-import React from "react"
+import * as React from "react"
 import { Halo } from "@ourworldindata/components"
 import { MultiColorPolyline } from "./MultiColorPolyline"
 import {
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
index 8dded0dd24..ff7c4a887a 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed } from "mobx"
 import { scaleLinear, ScaleLinear } from "d3-scale"
 import { TextWrap, Halo } from "@ourworldindata/components"
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/Triangle.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/Triangle.tsx
index 2f4065da9a..612b1ca35e 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/Triangle.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/Triangle.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 
 type TriangleProps = Readonly<{
diff --git a/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.tsx b/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.tsx
index 2aec229465..31ff205d88 100644
--- a/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.tsx
+++ b/packages/@ourworldindata/grapher/src/sidePanel/SidePanel.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { observer } from "mobx-react"
 import { computed } from "mobx"
 import { Bounds } from "@ourworldindata/utils"
diff --git a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx
index c620a9b14b..5db0224244 100644
--- a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx
+++ b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import cx from "classnames"
 import { computed, action, observable } from "mobx"
 import { observer } from "mobx-react"
diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.stories.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.stories.tsx
index 2db3a06828..de0ac6a2e8 100644
--- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.stories.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { SlopeChart } from "./SlopeChart"
 import {
     SampleColumnSlugs,
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.stories.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.stories.tsx
index 9b0be6ab0e..2a019f9b5e 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.stories.tsx
@@ -4,7 +4,7 @@ import {
     SynthesizeFruitTable,
     SynthesizeGDPTable,
 } from "@ourworldindata/core-table"
-import React from "react"
+import * as React from "react"
 import { StackedAreaChart } from "./StackedAreaChart"
 
 export default {
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
index a45e91b3c5..538f16d368 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import {
     extend,
     reverse,
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.stories.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.stories.tsx
index f00cedebd1..68bd5f9a2d 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { StackedBarChart } from "./StackedBarChart"
 import {
     SampleColumnSlugs,
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
index 6dcbab4f96..c950aa58ac 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { computed, action, observable } from "mobx"
 import { observer } from "mobx-react"
 import {
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.stories.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.stories.tsx
index e04db971e5..041115562c 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { StackedDiscreteBarChart } from "./StackedDiscreteBarChart"
 import { SynthesizeFruitTable } from "@ourworldindata/core-table"
 
diff --git a/packages/@ourworldindata/grapher/src/tabs/ExpandableTabs.tsx b/packages/@ourworldindata/grapher/src/tabs/ExpandableTabs.tsx
index bd7a4a795d..c60655b5f0 100644
--- a/packages/@ourworldindata/grapher/src/tabs/ExpandableTabs.tsx
+++ b/packages/@ourworldindata/grapher/src/tabs/ExpandableTabs.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faPlus, faMinus } from "@fortawesome/free-solid-svg-icons"
 import cx from "classnames"
diff --git a/packages/@ourworldindata/grapher/src/tabs/Tabs.tsx b/packages/@ourworldindata/grapher/src/tabs/Tabs.tsx
index b2b5f3165b..71b5baf00f 100644
--- a/packages/@ourworldindata/grapher/src/tabs/Tabs.tsx
+++ b/packages/@ourworldindata/grapher/src/tabs/Tabs.tsx
@@ -1,4 +1,5 @@
-import React, { useRef } from "react"
+import { useRef } from "react"
+import * as React from "react"
 import cx from "classnames"
 
 export interface TabLabel {
diff --git a/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.stories.tsx b/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.stories.tsx
index f765deff3e..e46d670425 100644
--- a/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { TimelineComponent } from "./TimelineComponent"
 import { action, computed, observable } from "mobx"
 import { range } from "@ourworldindata/utils"
diff --git a/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.tsx b/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.tsx
index f78014f1a0..5d290561d5 100644
--- a/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.tsx
+++ b/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { select } from "d3-selection"
 import cx from "classnames"
 import {
diff --git a/packages/@ourworldindata/grapher/src/tooltip/Tooltip.tsx b/packages/@ourworldindata/grapher/src/tooltip/Tooltip.tsx
index 01d1101282..ea928fa6a5 100644
--- a/packages/@ourworldindata/grapher/src/tooltip/Tooltip.tsx
+++ b/packages/@ourworldindata/grapher/src/tooltip/Tooltip.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import classnames from "classnames"
 import { observable, computed, action } from "mobx"
 import { observer } from "mobx-react"
diff --git a/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx b/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx
index a3a8b7f0f1..18fad5e9d4 100644
--- a/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx
+++ b/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import classnames from "classnames"
 import { CoreColumn } from "@ourworldindata/core-table"
 import { NO_DATA_LABEL } from "../color/ColorScale.js"
diff --git a/packages/@ourworldindata/grapher/src/tooltip/TooltipProps.ts b/packages/@ourworldindata/grapher/src/tooltip/TooltipProps.ts
index 9fae113da6..925f2b224a 100644
--- a/packages/@ourworldindata/grapher/src/tooltip/TooltipProps.ts
+++ b/packages/@ourworldindata/grapher/src/tooltip/TooltipProps.ts
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { CoreColumn } from "@ourworldindata/core-table"
 import {
     GrapherTooltipAnchor,
diff --git a/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.stories.tsx b/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.stories.tsx
index 42d9e94b5c..c96b017216 100644
--- a/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.stories.tsx
+++ b/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import {
     VerticalColorLegend,
     VerticalColorLegendManager,
diff --git a/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.tsx b/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.tsx
index ea659e517e..00ce48d6aa 100644
--- a/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { sum, max, makeIdForHumanConsumption } from "@ourworldindata/utils"
 import { TextWrap } from "@ourworldindata/components"
 import { computed } from "mobx"
diff --git a/packages/@ourworldindata/utils/src/Tippy.tsx b/packages/@ourworldindata/utils/src/Tippy.tsx
index 37f24c7f56..41fb833da2 100644
--- a/packages/@ourworldindata/utils/src/Tippy.tsx
+++ b/packages/@ourworldindata/utils/src/Tippy.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { default as OriginalTippy, TippyProps } from "@tippyjs/react"
 
 interface CustomTippyProps extends TippyProps {
diff --git a/packages/@ourworldindata/utils/src/Util.ts b/packages/@ourworldindata/utils/src/Util.ts
index 9908fd2875..0cc04c6a6f 100644
--- a/packages/@ourworldindata/utils/src/Util.ts
+++ b/packages/@ourworldindata/utils/src/Util.ts
@@ -179,7 +179,7 @@ import {
     GRAPHER_CHART_TYPES,
 } from "@ourworldindata/types"
 import { PointVector } from "./PointVector.js"
-import React from "react"
+import * as React from "react"
 import { match, P } from "ts-pattern"
 
 export type NoUndefinedValues<T> = {
diff --git a/site/AboutThisData.tsx b/site/AboutThisData.tsx
index 67b533b8f2..2cea09941a 100644
--- a/site/AboutThisData.tsx
+++ b/site/AboutThisData.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faArrowDown } from "@fortawesome/free-solid-svg-icons"
 import dayjs from "dayjs"
diff --git a/site/AlertBanner.tsx b/site/AlertBanner.tsx
index 5da3b51599..a43c7d3540 100644
--- a/site/AlertBanner.tsx
+++ b/site/AlertBanner.tsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 export const AlertBanner = () => {
     // 2023-03-23: This banner is now disabled, since we no longer want to highlight
     // the COVID-19 data this way. If we don't reuse this banner later for something
diff --git a/site/BackToTopic.tsx b/site/BackToTopic.tsx
index e522a17e27..7480a5393f 100644
--- a/site/BackToTopic.tsx
+++ b/site/BackToTopic.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { SubNavId } from "@ourworldindata/types"
 import { getSubnavItem, subnavs } from "./SiteSubnavigation.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
diff --git a/site/BlogIndexPage.tsx b/site/BlogIndexPage.tsx
index 72ec99d9d8..29d224d91d 100644
--- a/site/BlogIndexPage.tsx
+++ b/site/BlogIndexPage.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Head } from "./Head.js"
 import { SiteHeader } from "./SiteHeader.js"
 import { SiteFooter } from "./SiteFooter.js"
diff --git a/site/Breadcrumb/Breadcrumb.tsx b/site/Breadcrumb/Breadcrumb.tsx
index 07791a4830..01b84afbb5 100644
--- a/site/Breadcrumb/Breadcrumb.tsx
+++ b/site/Breadcrumb/Breadcrumb.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Fragment } from "react"
 import { BreadcrumbItem } from "@ourworldindata/utils"
 import { SubNavId } from "@ourworldindata/types"
 import { getSubnavItem, SubnavItem, subnavs } from "../SiteSubnavigation.js"
@@ -80,10 +80,10 @@ export const Breadcrumbs = ({
                 )
 
             return (
-                <React.Fragment key={item.label}>
+                <Fragment key={item.label}>
                     {breadcrumb}
                     {!isLast && <BreadcrumbSeparator />}
-                </React.Fragment>
+                </Fragment>
             )
         })}
     </div>
diff --git a/site/Byline.tsx b/site/Byline.tsx
index 063b07f64b..0042eaff21 100644
--- a/site/Byline.tsx
+++ b/site/Byline.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { formatAuthors } from "./clientFormatting.js"
 
 export const Byline = ({
diff --git a/site/ChartListItemVariant.tsx b/site/ChartListItemVariant.tsx
index 7579f02107..d78fe12a6d 100644
--- a/site/ChartListItemVariant.tsx
+++ b/site/ChartListItemVariant.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { BasicChartInformation } from "@ourworldindata/utils"
 
 export const ChartListItemVariant = ({
diff --git a/site/CitationMeta.tsx b/site/CitationMeta.tsx
index 584428d5fd..c312f4db6e 100644
--- a/site/CitationMeta.tsx
+++ b/site/CitationMeta.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Fragment } from "react"
 import { dayjs } from "@ourworldindata/utils"
 
 export const CitationMeta = (props: {
@@ -15,7 +15,7 @@ export const CitationMeta = (props: {
         authors = authors.concat(["Max Roser"])
 
     return (
-        <React.Fragment>
+        <Fragment>
             <meta name="citation_title" content={title} />
             <meta name="citation_fulltext_html_url" content={canonicalUrl} />
             <meta name="citation_fulltext_world_readable" content="" />
@@ -32,6 +32,6 @@ export const CitationMeta = (props: {
             {authors.map((author) => (
                 <meta key={author} name="citation_author" content={author} />
             ))}
-        </React.Fragment>
+        </Fragment>
     )
 }
diff --git a/site/CookieNotice.tsx b/site/CookieNotice.tsx
index 226548dba6..9cc5c838f1 100644
--- a/site/CookieNotice.tsx
+++ b/site/CookieNotice.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import classnames from "classnames"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faCheck } from "@fortawesome/free-solid-svg-icons"
diff --git a/site/CookiePreferencesManager.tsx b/site/CookiePreferencesManager.tsx
index 44f9552f33..605629a0b6 100644
--- a/site/CookiePreferencesManager.tsx
+++ b/site/CookiePreferencesManager.tsx
@@ -1,5 +1,5 @@
 import ReactDOM from "react-dom"
-import React, { useEffect, useMemo, useReducer } from "react"
+import { useEffect, useMemo, useReducer } from "react"
 import Cookies from "js-cookie"
 import { CookiePreferences } from "../site/blocks/CookiePreferences.js"
 import { CookieNotice } from "../site/CookieNotice.js"
diff --git a/site/CountriesIndexPage.tsx b/site/CountriesIndexPage.tsx
index 80f8295868..b454f9057e 100644
--- a/site/CountriesIndexPage.tsx
+++ b/site/CountriesIndexPage.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Head } from "./Head.js"
 import { SiteHeader } from "./SiteHeader.js"
 import { SiteFooter } from "./SiteFooter.js"
diff --git a/site/CountryProfilePage.tsx b/site/CountryProfilePage.tsx
index 9cf15071f0..78995a1f59 100644
--- a/site/CountryProfilePage.tsx
+++ b/site/CountryProfilePage.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Head } from "./Head.js"
 import { SiteHeader } from "./SiteHeader.js"
 import { SiteFooter } from "./SiteFooter.js"
diff --git a/site/DataCatalog/DataCatalog.tsx b/site/DataCatalog/DataCatalog.tsx
index e0188c964e..411a99738e 100644
--- a/site/DataCatalog/DataCatalog.tsx
+++ b/site/DataCatalog/DataCatalog.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useMemo, useReducer, useRef, useState } from "react"
+import { useEffect, useMemo, useReducer, useRef, useState } from "react"
+import * as React from "react"
 import ReactDOM from "react-dom"
 import cx from "classnames"
 import {
diff --git a/site/DataCatalog/DataCatalogPage.tsx b/site/DataCatalog/DataCatalogPage.tsx
index 0ff28a1a7c..20a4b53cc5 100644
--- a/site/DataCatalog/DataCatalogPage.tsx
+++ b/site/DataCatalog/DataCatalogPage.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Head } from "../Head.js"
 import { SiteHeader } from "../SiteHeader.js"
 import { SiteFooter } from "../SiteFooter.js"
diff --git a/site/DataCatalog/DataCatalogSkeletons.tsx b/site/DataCatalog/DataCatalogSkeletons.tsx
index 731ab1853e..8d116eb830 100644
--- a/site/DataCatalog/DataCatalogSkeletons.tsx
+++ b/site/DataCatalog/DataCatalogSkeletons.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import cx from "classnames"
 
 // 💀 Beware! Spooky skeletons for the data catalog 💀
diff --git a/site/DataInsightsIndexPage.tsx b/site/DataInsightsIndexPage.tsx
index 1c77a98247..de12b2f3bb 100644
--- a/site/DataInsightsIndexPage.tsx
+++ b/site/DataInsightsIndexPage.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Head } from "./Head.js"
 import { SiteHeader } from "./SiteHeader.js"
 import { SiteFooter } from "./SiteFooter.js"
diff --git a/site/DataInsightsIndexPageContent.tsx b/site/DataInsightsIndexPageContent.tsx
index ba39a1c16a..622d85b04b 100644
--- a/site/DataInsightsIndexPageContent.tsx
+++ b/site/DataInsightsIndexPageContent.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import cx from "classnames"
 import ReactDOM from "react-dom"
 import {
diff --git a/site/DataInsightsNewsletterBanner.tsx b/site/DataInsightsNewsletterBanner.tsx
index aebce5284e..9bdea248a0 100644
--- a/site/DataInsightsNewsletterBanner.tsx
+++ b/site/DataInsightsNewsletterBanner.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useState, useEffect } from "react"
 import Cookies from "js-cookie"
 import cx from "classnames"
diff --git a/site/DataPageV2.tsx b/site/DataPageV2.tsx
index e3c4814ca7..84af379842 100644
--- a/site/DataPageV2.tsx
+++ b/site/DataPageV2.tsx
@@ -17,7 +17,6 @@ import {
     Url,
 } from "@ourworldindata/utils"
 import { MarkdownTextWrap } from "@ourworldindata/components"
-import React from "react"
 import urljoin from "url-join"
 import {
     ADMIN_BASE_URL,
diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx
index 8cb1c99693..5b46203187 100644
--- a/site/DataPageV2Content.tsx
+++ b/site/DataPageV2Content.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from "react"
+import { useState, useEffect, useMemo } from "react"
 import { Grapher, GrapherProgrammaticInterface } from "@ourworldindata/grapher"
 import {
     REUSE_THIS_WORK_SECTION_ID,
@@ -73,7 +73,7 @@ export const DataPageV2Content = ({
     grapherConfig: GrapherInterface
     imageMetadata: Record<string, ImageMetadata>
 }) => {
-    const [grapher, setGrapher] = React.useState<Grapher | undefined>(undefined)
+    const [grapher, setGrapher] = useState<Grapher | undefined>(undefined)
 
     const titleFragments = joinTitleFragments(
         datapageData.attributionShort,
diff --git a/site/DataToken.tsx b/site/DataToken.tsx
index b1fb784c06..0bf738031b 100644
--- a/site/DataToken.tsx
+++ b/site/DataToken.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { dictionary } from "./runDataTokens.js"
 
 export const DataToken_name = "DataToken"
diff --git a/site/DonateForm.tsx b/site/DonateForm.tsx
index d6e910660f..a914fee14e 100644
--- a/site/DonateForm.tsx
+++ b/site/DonateForm.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import ReactDOM from "react-dom"
 import cx from "classnames"
 import { observable, action, computed } from "mobx"
diff --git a/site/DonatePage.tsx b/site/DonatePage.tsx
index b9fdb0d6ab..972387bff1 100644
--- a/site/DonatePage.tsx
+++ b/site/DonatePage.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Head } from "./Head.js"
 import { SiteHeader } from "./SiteHeader.js"
 import { SiteFooter } from "./SiteFooter.js"
diff --git a/site/ExplorerIndex.tsx b/site/ExplorerIndex.tsx
index f71adbad07..4e21042c8b 100644
--- a/site/ExplorerIndex.tsx
+++ b/site/ExplorerIndex.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { useState } from "react"
 import ReactDOM from "react-dom"
 import { MinimalExplorerInfo } from "@ourworldindata/types"
 import { EXPLORER_DYNAMIC_THUMBNAIL_URL } from "../settings/clientSettings.js"
@@ -11,7 +11,7 @@ function ExplorerIndexPageCard(props: {
     explorer: MinimalExplorerInfo
 }) {
     const { baseUrl, explorer } = props
-    const [hasError, setHasError] = React.useState(false)
+    const [hasError, setHasError] = useState(false)
     return (
         <li key={explorer.slug}>
             <a
diff --git a/site/ExplorerIndexPage.tsx b/site/ExplorerIndexPage.tsx
index 2ddaf4a61c..2d5a8216ad 100644
--- a/site/ExplorerIndexPage.tsx
+++ b/site/ExplorerIndexPage.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Head } from "./Head.js"
 import { Html } from "./Html.js"
 import { EXPLORERS_ROUTE_FOLDER } from "@ourworldindata/explorer"
diff --git a/site/ExplorerPage.tsx b/site/ExplorerPage.tsx
index 28445d1e4b..54b2edccc1 100644
--- a/site/ExplorerPage.tsx
+++ b/site/ExplorerPage.tsx
@@ -7,7 +7,6 @@ import {
     SiteFooterContext,
     GrapherInterface,
 } from "@ourworldindata/utils"
-import React from "react"
 import {
     EMBEDDED_EXPLORER_DELIMITER,
     EMBEDDED_EXPLORER_GRAPHER_CONFIGS,
diff --git a/site/Feedback.stories.tsx b/site/Feedback.stories.tsx
index 3b30208e5a..cea21118b2 100644
--- a/site/Feedback.stories.tsx
+++ b/site/Feedback.stories.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { FeedbackForm } from "../site/Feedback.js"
 
 export default {
diff --git a/site/Feedback.tsx b/site/Feedback.tsx
index 628f349579..81f632b68e 100644
--- a/site/Feedback.tsx
+++ b/site/Feedback.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import ReactDOM from "react-dom"
 import { observer } from "mobx-react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
diff --git a/site/FeedbackPage.tsx b/site/FeedbackPage.tsx
index 1f0529a49a..3321f58093 100644
--- a/site/FeedbackPage.tsx
+++ b/site/FeedbackPage.tsx
@@ -1,11 +1,11 @@
-import React from "react"
+import { Component } from "react"
 import { Head } from "./Head.js"
 import { SiteHeader } from "./SiteHeader.js"
 import { SiteFooter } from "./SiteFooter.js"
 import { FeedbackForm } from "../site/Feedback.js"
 import { Html } from "./Html.js"
 
-export class FeedbackPage extends React.Component<{ baseUrl: string }> {
+export class FeedbackPage extends Component<{ baseUrl: string }> {
     render() {
         const { baseUrl } = this.props
         return (
diff --git a/site/Footnote.tsx b/site/Footnote.tsx
index 43a87f6a75..cd933ca400 100644
--- a/site/Footnote.tsx
+++ b/site/Footnote.tsx
@@ -1,5 +1,4 @@
 import { isNil, parseIntOrUndefined, Tippy } from "@ourworldindata/utils"
-import React from "react"
 import ReactDOM from "react-dom"
 
 export const Footnote = ({
diff --git a/site/GrapherFigureView.tsx b/site/GrapherFigureView.tsx
index 46b567e4b1..8f1d472f56 100644
--- a/site/GrapherFigureView.tsx
+++ b/site/GrapherFigureView.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react"
+import { useRef } from "react"
 
 import { Grapher, GrapherProgrammaticInterface } from "@ourworldindata/grapher"
 import {
diff --git a/site/GrapherImage.tsx b/site/GrapherImage.tsx
index 8d14c518b5..95e0d34fde 100644
--- a/site/GrapherImage.tsx
+++ b/site/GrapherImage.tsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 import {
     DEFAULT_GRAPHER_HEIGHT,
     DEFAULT_GRAPHER_WIDTH,
diff --git a/site/GrapherPage.jsdom.test.tsx b/site/GrapherPage.jsdom.test.tsx
index 4f2a9b3f3b..f6c16d91c1 100755
--- a/site/GrapherPage.jsdom.test.tsx
+++ b/site/GrapherPage.jsdom.test.tsx
@@ -1,12 +1,9 @@
-#! /usr/bin/env jest
-
-import { GrapherInterface } from "@ourworldindata/types"
+#! /usr/bin/env jestimport { GrapherInterface } from "@ourworldindata/types"
 import {
     DimensionProperty,
     KeyChartLevel,
     RelatedChart,
 } from "@ourworldindata/utils"
-import React from "react"
 import { ChartListItemVariant } from "./ChartListItemVariant.js"
 import { GrapherPage } from "./GrapherPage.js"
 import { SiteFooter } from "./SiteFooter.js"
diff --git a/site/GrapherPage.tsx b/site/GrapherPage.tsx
index 22e1dceb5a..c5c3929fc2 100644
--- a/site/GrapherPage.tsx
+++ b/site/GrapherPage.tsx
@@ -14,7 +14,6 @@ import {
     Url,
 } from "@ourworldindata/utils"
 import { MarkdownTextWrap } from "@ourworldindata/components"
-import React from "react"
 import urljoin from "url-join"
 import {
     ADMIN_BASE_URL,
diff --git a/site/GrapherWithFallback.tsx b/site/GrapherWithFallback.tsx
index 3849df575f..fc0bc1d9c9 100644
--- a/site/GrapherWithFallback.tsx
+++ b/site/GrapherWithFallback.tsx
@@ -1,5 +1,4 @@
 import { Grapher } from "@ourworldindata/grapher"
-import React from "react"
 import { GrapherFigureView } from "./GrapherFigureView.js"
 import cx from "classnames"
 import { GRAPHER_PREVIEW_CLASS } from "./SiteConstants.js"
diff --git a/site/Head.tsx b/site/Head.tsx
index 575c57774b..29b9683892 100644
--- a/site/Head.tsx
+++ b/site/Head.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { viteAssetsForSite } from "./viteUtils.js"
 import { GOOGLE_TAG_MANAGER_ID } from "../settings/clientSettings.js"
 import { NoJSDetector } from "./NoJSDetector.js"
diff --git a/site/Html.tsx b/site/Html.tsx
index a3373f270a..2a31bb0fba 100644
--- a/site/Html.tsx
+++ b/site/Html.tsx
@@ -1,5 +1,5 @@
 import cx from "classnames"
-import React, { HtmlHTMLAttributes } from "react"
+import { HtmlHTMLAttributes } from "react"
 
 /**
  * Renders a <html> element with the class "js-disabled" to indicate that JavaScript is disabled.
diff --git a/site/IframeDetector.tsx b/site/IframeDetector.tsx
index c7706fb28e..9f695d94e3 100644
--- a/site/IframeDetector.tsx
+++ b/site/IframeDetector.tsx
@@ -1,5 +1,4 @@
 import { GRAPHER_IS_IN_IFRAME_CLASS } from "@ourworldindata/grapher"
-import React from "react"
 
 export const IFrameDetector = () => (
     <script
diff --git a/site/InteractionNotice.tsx b/site/InteractionNotice.tsx
index 00c9348ece..3ffbad6461 100644
--- a/site/InteractionNotice.tsx
+++ b/site/InteractionNotice.tsx
@@ -1,7 +1,3 @@
-import React from "react"
-
-// A modified FontAwesome icon. This is a string instead of JSX, so it can be
-// also used outside of React when baking WordPress content.
 export const INTERACTIVE_ICON_SVG = `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="hand-pointer" class="svg-inline--fa fa-hand-pointer fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 617">
     <path fill="currentColor" d="M448,344.59v96a40.36,40.36,0,0,1-1.06,9.16l-32,136A40,40,0,0,1,376,616.59H168a40,40,0,0,1-32.35-16.47l-128-176a40,40,0,0,1,64.7-47.06L104,420.58v-276a40,40,0,0,1,80,0v200h8v-40a40,40,0,1,1,80,0v40h8v-24a40,40,0,1,1,80,0v24h8a40,40,0,1,1,80,0Zm-256,80h-8v96h8Zm88,0h-8v96h8Zm88,0h-8v96h8Z" transform="translate(0 -0.41)"/>
     <path fill="currentColor" opacity="0.6" d="M239.76,234.78A27.5,27.5,0,0,1,217,192a87.76,87.76,0,1,0-145.9,0A27.5,27.5,0,1,1,25.37,222.6,142.17,142.17,0,0,1,1.24,143.17C1.24,64.45,65.28.41,144,.41s142.76,64,142.76,142.76a142.17,142.17,0,0,1-24.13,79.43A27.47,27.47,0,0,1,239.76,234.78Z" transform="translate(0 -0.41)"/>
diff --git a/site/KeyDataTable.tsx b/site/KeyDataTable.tsx
index 86f6e3e22a..2ebd5bd642 100644
--- a/site/KeyDataTable.tsx
+++ b/site/KeyDataTable.tsx
@@ -1,5 +1,3 @@
-import * as React from "react"
-
 import { DataPageDataV2, joinTitleFragments } from "@ourworldindata/types"
 import {
     makeSource,
diff --git a/site/Lightbox.tsx b/site/Lightbox.tsx
index b8417aa48d..951b564f40 100644
--- a/site/Lightbox.tsx
+++ b/site/Lightbox.tsx
@@ -8,7 +8,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { LoadingIndicator } from "@ourworldindata/grapher"
 import cx from "classnames"
-import React, { useCallback, useRef, useState } from "react"
+import { useCallback, useRef, useState } from "react"
 import ReactDOM from "react-dom"
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch"
 import { useTriggerOnEscape } from "./hooks.js"
diff --git a/site/LongFormPage.tsx b/site/LongFormPage.tsx
index 602dd110da..63f8f0e0ba 100644
--- a/site/LongFormPage.tsx
+++ b/site/LongFormPage.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Fragment } from "react"
 import { Head } from "./Head.js"
 import { CitationMeta } from "./CitationMeta.js"
 import { SiteHeader } from "./SiteHeader.js"
@@ -258,7 +258,7 @@ export const LongFormPage = (props: {
                                                     />
                                                 )}
                                                 {post.footnotes.length ? (
-                                                    <React.Fragment>
+                                                    <Fragment>
                                                         <h3
                                                             id={endNotes.slug}
                                                             className="h3-bold"
@@ -287,7 +287,7 @@ export const LongFormPage = (props: {
                                                                 )
                                                             )}
                                                         </ol>
-                                                    </React.Fragment>
+                                                    </Fragment>
                                                 ) : undefined}
                                                 {withCitation && (
                                                     <>
diff --git a/site/MetadataSection.tsx b/site/MetadataSection.tsx
index 621ac6dc80..2c213c2829 100644
--- a/site/MetadataSection.tsx
+++ b/site/MetadataSection.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import dayjs from "dayjs"
 
 import {
diff --git a/site/NewsletterSubscription.tsx b/site/NewsletterSubscription.tsx
index 062fa62b23..5ecadda5bb 100644
--- a/site/NewsletterSubscription.tsx
+++ b/site/NewsletterSubscription.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from "react"
+import { useState } from "react"
+import * as React from "react"
 import { faTimes, faEnvelopeOpenText } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { SiteAnalytics } from "./SiteAnalytics.js"
diff --git a/site/NoJSDetector.tsx b/site/NoJSDetector.tsx
index 775b86ae70..8b5d0c73a5 100644
--- a/site/NoJSDetector.tsx
+++ b/site/NoJSDetector.tsx
@@ -1,21 +1,3 @@
-import React from "react"
-
-/**
- * For more details about these components, see `browser-support.md`.
- */
-
-// Detect if JavaScript is enabled and set a class on the HTML element.
-// Also detect if the browser doesn't support `<script type="module">`, or if there's a parsing error
-// happening in old browsers because "relatively new" syntax is being used.
-// Sets the `js-enabled` class if JavaScript is enabled, and `js-disabled` if not or if an error ocurred.
-
-// The `"noModule" in HTMLScriptElement` check serves as a good proxy to disregard
-// any browsers that will _definitely_ throw a SyntaxError early:
-// See https://caniuse.com/mdn-api_htmlscriptelement_nomodule:
-// - Chrome/Edge <61
-// - Safari <11
-// - Firefox <60
-// - All Internet Explorer
 export const NoJSDetector = ({ baseUrl }: { baseUrl: string }) => (
     <script
         dangerouslySetInnerHTML={{
diff --git a/site/NotFoundPage.tsx b/site/NotFoundPage.tsx
index 05eb6f4eb7..e7f6380e43 100644
--- a/site/NotFoundPage.tsx
+++ b/site/NotFoundPage.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { Head } from "./Head.js"
 import { SiteHeader } from "./SiteHeader.js"
 import { SiteFooter } from "./SiteFooter.js"
diff --git a/site/NotFoundPageForm.tsx b/site/NotFoundPageForm.tsx
index ed5c91fd99..8f913b9a06 100644
--- a/site/NotFoundPageForm.tsx
+++ b/site/NotFoundPageForm.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useState, useRef, useEffect } from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faSearch, faCircleXmark } from "@fortawesome/free-solid-svg-icons"
diff --git a/site/NotFoundPageIcon.tsx b/site/NotFoundPageIcon.tsx
index d54c2ef566..250e5f6f13 100644
--- a/site/NotFoundPageIcon.tsx
+++ b/site/NotFoundPageIcon.tsx
@@ -1,5 +1,3 @@
-import * as React from "react"
-
 export default function NotFoundPageIcon() {
     return (
         <svg
diff --git a/site/NotFoundPageMain.tsx b/site/NotFoundPageMain.tsx
index 0c70a5f5da..8a5d7b2fc7 100644
--- a/site/NotFoundPageMain.tsx
+++ b/site/NotFoundPageMain.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { hydrate } from "react-dom"
 import NotFoundPageForm from "./NotFoundPageForm.js"
 import { SiteAnalytics } from "./SiteAnalytics.js"
diff --git a/site/PageInfo.tsx b/site/PageInfo.tsx
index bcb85c7428..a28db22152 100644
--- a/site/PageInfo.tsx
+++ b/site/PageInfo.tsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 export const PageInfo = ({ info }: { info: string }) => {
     return (
         <div
diff --git a/site/PostCard/PostCard.tsx b/site/PostCard/PostCard.tsx
index bd80db1f3c..1fa274ea27 100644
--- a/site/PostCard/PostCard.tsx
+++ b/site/PostCard/PostCard.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { IndexPost, formatDate } from "@ourworldindata/utils"
 import { formatUrls } from "../formatting.js"
 import { formatAuthors } from "../clientFormatting.js"
diff --git a/site/RelatedArticles/RelatedArticles.tsx b/site/RelatedArticles/RelatedArticles.tsx
index 87aaf0be4a..daa77c5f92 100644
--- a/site/RelatedArticles/RelatedArticles.tsx
+++ b/site/RelatedArticles/RelatedArticles.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { PostReference } from "@ourworldindata/utils"
 
 export const RelatedArticles = ({
diff --git a/site/SearchCountry.tsx b/site/SearchCountry.tsx
index c7ea2b2ff4..2244288110 100644
--- a/site/SearchCountry.tsx
+++ b/site/SearchCountry.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import ReactDOM from "react-dom"
 import Select from "react-select"
 import { countries, sortBy } from "@ourworldindata/utils"
diff --git a/site/SectionHeading.tsx b/site/SectionHeading.tsx
index f27d7c40c5..bd7769bdeb 100644
--- a/site/SectionHeading.tsx
+++ b/site/SectionHeading.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faArrowDown } from "@fortawesome/free-solid-svg-icons"
 import { TocHeading } from "@ourworldindata/utils"
diff --git a/site/SiteAbout.tsx b/site/SiteAbout.tsx
index 768a09c84d..a419d9da18 100644
--- a/site/SiteAbout.tsx
+++ b/site/SiteAbout.tsx
@@ -1,5 +1,3 @@
-import * as React from "react"
-
 export const ABOUT_LINKS = [
     { title: "About Us", href: "/about" },
     { title: "Organization", href: "/organization" },
diff --git a/site/SiteFooter.tsx b/site/SiteFooter.tsx
index f0f9b21dd5..dad026d8a2 100644
--- a/site/SiteFooter.tsx
+++ b/site/SiteFooter.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons"
 import { SiteFooterContext } from "@ourworldindata/utils"
diff --git a/site/SiteHeader.tsx b/site/SiteHeader.tsx
index b8be36d8fd..c9317fafa5 100644
--- a/site/SiteHeader.tsx
+++ b/site/SiteHeader.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { SiteNavigation } from "./SiteNavigation.js"
 
 interface SiteHeaderProps {
diff --git a/site/SiteLogos.tsx b/site/SiteLogos.tsx
index b12a784191..0d166d09ea 100644
--- a/site/SiteLogos.tsx
+++ b/site/SiteLogos.tsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 export const SiteLogos = ({ baseUrl }: { baseUrl: string }) => {
     return (
         <div className="site-logos">
diff --git a/site/SiteMobileCategory.tsx b/site/SiteMobileCategory.tsx
index b4be790be5..c94f5e1ccc 100644
--- a/site/SiteMobileCategory.tsx
+++ b/site/SiteMobileCategory.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react"
+import { useEffect, useRef } from "react"
 import { CategoryWithEntries } from "@ourworldindata/utils"
 import { SiteNavigationToggle } from "./SiteNavigationToggle.js"
 import { SiteNavigationTopic } from "./SiteNavigationTopic.js"
diff --git a/site/SiteMobileMenu.tsx b/site/SiteMobileMenu.tsx
index 3baaa94057..3ca99dae2d 100644
--- a/site/SiteMobileMenu.tsx
+++ b/site/SiteMobileMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import { CategoryWithEntries } from "@ourworldindata/utils"
 import classnames from "classnames"
 import { SiteNavigationToggle } from "./SiteNavigationToggle.js"
diff --git a/site/SiteNavigation.tsx b/site/SiteNavigation.tsx
index 7d357c46c8..dc810809c5 100644
--- a/site/SiteNavigation.tsx
+++ b/site/SiteNavigation.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react"
+import { useState, useCallback, useEffect } from "react"
 import ReactDOM from "react-dom"
 import {
     faListUl,
@@ -46,8 +46,8 @@ export const SiteNavigation = ({
     hideDonationFlag?: boolean
     isOnHomepage?: boolean
 }) => {
-    const [menu, setActiveMenu] = React.useState<Menu | null>(null)
-    const [query, setQuery] = React.useState<string>("")
+    const [menu, setActiveMenu] = useState<Menu | null>(null)
+    const [query, setQuery] = useState<string>("")
 
     const isActiveMobileMenu =
         menu !== null &&
diff --git a/site/SiteNavigationToggle.tsx b/site/SiteNavigationToggle.tsx
index 2d3ae0e08d..56f698cd14 100644
--- a/site/SiteNavigationToggle.tsx
+++ b/site/SiteNavigationToggle.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons"
 import cx from "classnames"
diff --git a/site/SiteNavigationTopic.tsx b/site/SiteNavigationTopic.tsx
index 37a274cc0c..62b8e4021b 100644
--- a/site/SiteNavigationTopic.tsx
+++ b/site/SiteNavigationTopic.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { EntryMeta } from "@ourworldindata/utils"
 
 export const SiteNavigationTopic = ({ topic }: { topic: EntryMeta }) => {
diff --git a/site/SiteNavigationTopics.tsx b/site/SiteNavigationTopics.tsx
index c95c0aca68..b58325090d 100644
--- a/site/SiteNavigationTopics.tsx
+++ b/site/SiteNavigationTopics.tsx
@@ -1,19 +1,11 @@
-import React, { useLayoutEffect, useState } from "react"
+import { useLayoutEffect, useState } from "react"
+import * as React from "react"
 import { CategoryWithEntries, EntryMeta } from "@ourworldindata/utils"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons"
 import classnames from "classnames"
 import { SiteNavigationTopic } from "./SiteNavigationTopic.js"
 
-// suppress useLayoutEffect (and its warnings) when not running in a browser
-// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85?permalink_comment_id=4150784#gistcomment-4150784
-
-// this is ok here because the layout effect below doesn't do anything until an
-// other effect already triggered a paint, so there is no mismatch between the
-// server and client on first paint (which is what the warning is about)
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-if (typeof window === "undefined") React.useLayoutEffect = () => {}
-
 export const SiteNavigationTopics = ({
     topics,
     onClose,
diff --git a/site/SiteResources.tsx b/site/SiteResources.tsx
index 522a5615ad..c4ae95650c 100644
--- a/site/SiteResources.tsx
+++ b/site/SiteResources.tsx
@@ -1,5 +1,3 @@
-import React from "react"
-
 export const SiteResources = () => {
     return (
         <ul>
diff --git a/site/SiteSearchNavigation.tsx b/site/SiteSearchNavigation.tsx
index f66f63359d..3cead742ac 100644
--- a/site/SiteSearchNavigation.tsx
+++ b/site/SiteSearchNavigation.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import cx from "classnames"
 import { Autocomplete } from "./search/Autocomplete.js"
 
diff --git a/site/SiteSubnavigation.tsx b/site/SiteSubnavigation.tsx
index f4b19f9232..0d3a753a24 100644
--- a/site/SiteSubnavigation.tsx
+++ b/site/SiteSubnavigation.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons"
 import { SubNavId } from "@ourworldindata/types"
diff --git a/site/SiteTools.tsx b/site/SiteTools.tsx
index 24d7dafaba..8954977719 100644
--- a/site/SiteTools.tsx
+++ b/site/SiteTools.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import ReactDOM from "react-dom"
 import cx from "classnames"
 import { FeedbackPrompt } from "./Feedback.js"
diff --git a/site/TableOfContents.tsx b/site/TableOfContents.tsx
index e60d9840dd..03397f559e 100644
--- a/site/TableOfContents.tsx
+++ b/site/TableOfContents.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react"
+import { useState, useEffect, useRef } from "react"
 import ReactDOM from "react-dom"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faBars, faTimes } from "@fortawesome/free-solid-svg-icons"
diff --git a/site/Tablepress.tsx b/site/Tablepress.tsx
index 8a509c3095..65c404f2e8 100644
--- a/site/Tablepress.tsx
+++ b/site/Tablepress.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import ReactDOMServer from "react-dom/server.js"
 
 interface Cell {
diff --git a/site/ThankYouPage.tsx b/site/ThankYouPage.tsx
index 9098aafdf7..c7200a602d 100644
--- a/site/ThankYouPage.tsx
+++ b/site/ThankYouPage.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Head } from "./Head.js"
 import { SiteHeader } from "./SiteHeader.js"
 import { SiteFooter } from "./SiteFooter.js"
diff --git a/site/TombstonePage.tsx b/site/TombstonePage.tsx
index 588155e545..19787e9d8f 100644
--- a/site/TombstonePage.tsx
+++ b/site/TombstonePage.tsx
@@ -1,5 +1,4 @@
 import cx from "classnames"
-import * as React from "react"
 import urljoin from "url-join"
 
 import { TombstonePageData } from "@ourworldindata/types"
diff --git a/site/TopicTags.tsx b/site/TopicTags.tsx
index 2dd0513078..62ef0050bf 100644
--- a/site/TopicTags.tsx
+++ b/site/TopicTags.tsx
@@ -1,5 +1,3 @@
-import * as React from "react"
-
 export default function TopicTags({
     className,
     topicTagsLinks,
diff --git a/site/bakeGlobalEntitySelector.tsx b/site/bakeGlobalEntitySelector.tsx
index 1b50c98cf9..64f68137cb 100644
--- a/site/bakeGlobalEntitySelector.tsx
+++ b/site/bakeGlobalEntitySelector.tsx
@@ -4,7 +4,6 @@ import {
     GLOBAL_ENTITY_SELECTOR_ELEMENT,
     SelectionArray,
 } from "@ourworldindata/grapher"
-import React from "react"
 import ReactDOMServer from "react-dom/server.js"
 import { ENV } from "../settings/serverSettings.js"
 
diff --git a/site/blocks/AdditionalInformation.tsx b/site/blocks/AdditionalInformation.tsx
index 5c36cda400..4a8dd0fea1 100644
--- a/site/blocks/AdditionalInformation.tsx
+++ b/site/blocks/AdditionalInformation.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react"
+import { useState, useRef, useEffect } from "react"
 import ReactDOM from "react-dom"
 import ReactDOMServer from "react-dom/server.js"
 import AnimateHeight from "react-animate-height"
diff --git a/site/blocks/AllChartsListItem.tsx b/site/blocks/AllChartsListItem.tsx
index 2473a59ead..f6fefa3301 100644
--- a/site/blocks/AllChartsListItem.tsx
+++ b/site/blocks/AllChartsListItem.tsx
@@ -1,5 +1,5 @@
 import { BasicChartInformation } from "@ourworldindata/utils"
-import React from "react"
+import * as React from "react"
 import { BAKED_BASE_URL } from "../../settings/clientSettings.js"
 import GrapherImage from "../GrapherImage.js"
 
diff --git a/site/blocks/CookiePreferences.tsx b/site/blocks/CookiePreferences.tsx
index 5323c47c1e..d5fdcf9470 100644
--- a/site/blocks/CookiePreferences.tsx
+++ b/site/blocks/CookiePreferences.tsx
@@ -1,5 +1,6 @@
 import { dayjs, slugify } from "@ourworldindata/utils"
-import React, { ReactPortal } from "react"
+import { ReactPortal } from "react"
+import * as React from "react"
 import ReactDOM from "react-dom"
 import {
     Action,
diff --git a/site/blocks/ExpandableParagraph.stories.tsx b/site/blocks/ExpandableParagraph.stories.tsx
index 14a4323687..6ecf0d672c 100644
--- a/site/blocks/ExpandableParagraph.stories.tsx
+++ b/site/blocks/ExpandableParagraph.stories.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { ExpandableParagraph } from "./ExpandableParagraph.js"
 
 export default {
diff --git a/site/blocks/ExpandableParagraph.tsx b/site/blocks/ExpandableParagraph.tsx
index f7b2cb081b..7b5046d874 100644
--- a/site/blocks/ExpandableParagraph.tsx
+++ b/site/blocks/ExpandableParagraph.tsx
@@ -1,4 +1,5 @@
-import React, { CSSProperties, useRef, useState } from "react"
+import { CSSProperties, useRef, useState } from "react"
+import * as React from "react"
 import cx from "classnames"
 
 export const ExpandableParagraph = (
diff --git a/site/blocks/GalleryArrow.tsx b/site/blocks/GalleryArrow.tsx
index 02cde62e1b..9bd90fcb92 100644
--- a/site/blocks/GalleryArrow.tsx
+++ b/site/blocks/GalleryArrow.tsx
@@ -1,6 +1,5 @@
 import { faArrowLeftLong } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import React from "react"
 
 export enum GalleryArrowDirection {
     prev = "prev",
diff --git a/site/blocks/Help.tsx b/site/blocks/Help.tsx
index a318887e4a..56dfc109a6 100644
--- a/site/blocks/Help.tsx
+++ b/site/blocks/Help.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import ReactDOMServer from "react-dom/server.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faLightbulb } from "@fortawesome/free-solid-svg-icons"
diff --git a/site/blocks/ProminentLink.tsx b/site/blocks/ProminentLink.tsx
index 1b3f646d6d..25b31b865a 100644
--- a/site/blocks/ProminentLink.tsx
+++ b/site/blocks/ProminentLink.tsx
@@ -10,7 +10,7 @@ import {
 import { union, Url } from "@ourworldindata/utils"
 import { computed } from "mobx"
 import { observer } from "mobx-react"
-import React from "react"
+import { Component } from "react"
 import ReactDOM from "react-dom"
 
 export const PROMINENT_LINK_CLASSNAME = "wp-block-owid-prominent-link"
@@ -23,7 +23,7 @@ export enum ProminentLinkStyles {
 export const WITH_IMAGE = "with-image"
 
 @observer
-export class ProminentLink extends React.Component<{
+export class ProminentLink extends Component<{
     href: string
     style: string | null
     title: string | null
diff --git a/site/blocks/RelatedCharts.jsdom.test.tsx b/site/blocks/RelatedCharts.jsdom.test.tsx
index 6e49166210..c3cad379c8 100755
--- a/site/blocks/RelatedCharts.jsdom.test.tsx
+++ b/site/blocks/RelatedCharts.jsdom.test.tsx
@@ -1,7 +1,4 @@
-#! /usr/bin/env jest
-
-import React from "react"
-import { RelatedCharts } from "./RelatedCharts.js"
+#! /usr/bin/env jestimport { RelatedCharts } from "./RelatedCharts.js"
 
 import Enzyme from "enzyme"
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
diff --git a/site/blocks/RelatedCharts.tsx b/site/blocks/RelatedCharts.tsx
index ec817f1bb1..b718cb4505 100644
--- a/site/blocks/RelatedCharts.tsx
+++ b/site/blocks/RelatedCharts.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useRef } from "react"
+import { useState, useRef } from "react"
+import * as React from "react"
 import { orderBy, RelatedChart } from "@ourworldindata/utils"
 import { useEmbedChart } from "../hooks.js"
 import { GalleryArrow, GalleryArrowDirection } from "./GalleryArrow.js"
diff --git a/site/blocks/StickyNav.tsx b/site/blocks/StickyNav.tsx
index 9cebb6629e..3cef2c1779 100644
--- a/site/blocks/StickyNav.tsx
+++ b/site/blocks/StickyNav.tsx
@@ -1,4 +1,4 @@
-import React, { createRef } from "react"
+import { Component, createRef } from "react"
 import cx from "classnames"
 import { throttle } from "@ourworldindata/utils"
 
@@ -36,7 +36,7 @@ interface StickyNavProps {
     links: StickyNavLink[]
     className?: string
 }
-class StickyNav extends React.Component<
+class StickyNav extends Component<
     StickyNavProps,
     {
         headingPositions: HeadingPosition[]
diff --git a/site/collections/DynamicCollection.tsx b/site/collections/DynamicCollection.tsx
index 70222932a1..95c8a141a7 100644
--- a/site/collections/DynamicCollection.tsx
+++ b/site/collections/DynamicCollection.tsx
@@ -1,5 +1,5 @@
 import cx from "classnames"
-import React from "react"
+import * as React from "react"
 import ReactDOM from "react-dom"
 import { BAKED_BASE_URL } from "../../settings/clientSettings.js"
 import { DYNAMIC_COLLECTION_PAGE_CONTAINER_ID } from "@ourworldindata/utils"
diff --git a/site/collections/DynamicCollectionPage.tsx b/site/collections/DynamicCollectionPage.tsx
index c37e60cc94..81b5ff008d 100644
--- a/site/collections/DynamicCollectionPage.tsx
+++ b/site/collections/DynamicCollectionPage.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Head } from "../Head.js"
 import { SiteHeader } from "../SiteHeader.js"
 import { SiteFooter } from "../SiteFooter.js"
diff --git a/site/collections/StaticCollectionPage.tsx b/site/collections/StaticCollectionPage.tsx
index 1c30682f14..6556a41993 100644
--- a/site/collections/StaticCollectionPage.tsx
+++ b/site/collections/StaticCollectionPage.tsx
@@ -1,5 +1,4 @@
 import cx from "classnames"
-import React from "react"
 import { Head } from "../Head.js"
 import { GRAPHER_PREVIEW_CLASS } from "../SiteConstants.js"
 import { SiteHeader } from "../SiteHeader.js"
diff --git a/site/covid/FullWidthRawHtml.tsx b/site/covid/FullWidthRawHtml.tsx
index 9e4533d053..b4ffa1ea63 100644
--- a/site/covid/FullWidthRawHtml.tsx
+++ b/site/covid/FullWidthRawHtml.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 
 export const RawHtml = ({ url }: { url: string }) => {
     const [html, setHtml] = useState<null | string>(null)
diff --git a/site/covid/LastUpdated.tsx b/site/covid/LastUpdated.tsx
index a3f6f1e4ee..412cfc2bb3 100644
--- a/site/covid/LastUpdated.tsx
+++ b/site/covid/LastUpdated.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import { dayjs, Dayjs } from "@ourworldindata/utils"
 
 export interface LastUpdatedTokenProps {
diff --git a/site/detailsOnDemand.tsx b/site/detailsOnDemand.tsx
index ea11228bf2..16e52fdd72 100644
--- a/site/detailsOnDemand.tsx
+++ b/site/detailsOnDemand.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { tippy } from "@tippyjs/react"
 import { Instance } from "tippy.js"
 import { BAKED_BASE_URL } from "../settings/clientSettings.js"
diff --git a/site/formatting.tsx b/site/formatting.tsx
index c3c275ec5c..8123e7ca8b 100644
--- a/site/formatting.tsx
+++ b/site/formatting.tsx
@@ -1,5 +1,4 @@
 import cheerio from "cheerio"
-import React from "react"
 import ReactDOMServer from "react-dom/server.js"
 import {
     FormattedPost,
diff --git a/site/gdocs/DebugContext.tsx b/site/gdocs/DebugContext.tsx
index 4ecf532ace..5f962884b4 100644
--- a/site/gdocs/DebugContext.tsx
+++ b/site/gdocs/DebugContext.tsx
@@ -1,4 +1,5 @@
-import React, { createContext } from "react"
+import { createContext } from "react"
+import * as React from "react"
 
 const DebugContext = createContext<boolean | undefined>(undefined)
 
diff --git a/site/gdocs/OwidGdoc.tsx b/site/gdocs/OwidGdoc.tsx
index 0380c0cf0c..f1e3ae70fd 100644
--- a/site/gdocs/OwidGdoc.tsx
+++ b/site/gdocs/OwidGdoc.tsx
@@ -1,4 +1,5 @@
-import React, { createContext } from "react"
+import { createContext } from "react"
+import * as React from "react"
 import ReactDOM from "react-dom"
 import {
     LatestDataInsight,
diff --git a/site/gdocs/OwidGdocPage.tsx b/site/gdocs/OwidGdocPage.tsx
index 7f8270e58f..71e039e53e 100644
--- a/site/gdocs/OwidGdocPage.tsx
+++ b/site/gdocs/OwidGdocPage.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Head } from "../Head.js"
 import { SiteHeader } from "../SiteHeader.js"
 import { SiteFooter } from "../SiteFooter.js"
diff --git a/site/gdocs/components/AdditionalCharts.tsx b/site/gdocs/components/AdditionalCharts.tsx
index ad1adf5310..1539c5d4d6 100644
--- a/site/gdocs/components/AdditionalCharts.tsx
+++ b/site/gdocs/components/AdditionalCharts.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Span } from "@ourworldindata/utils"
 import { renderSpans } from "../utils.js"
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons"
diff --git a/site/gdocs/components/AllCharts.tsx b/site/gdocs/components/AllCharts.tsx
index 6e04a7b217..83f610885a 100644
--- a/site/gdocs/components/AllCharts.tsx
+++ b/site/gdocs/components/AllCharts.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import { useContext } from "react"
 import cx from "classnames"
 import {
     EnrichedBlockAllCharts,
diff --git a/site/gdocs/components/ArticleBlock.tsx b/site/gdocs/components/ArticleBlock.tsx
index b499861802..296485b127 100644
--- a/site/gdocs/components/ArticleBlock.tsx
+++ b/site/gdocs/components/ArticleBlock.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import cx from "classnames"
 
 import Callout from "./Callout.js"
diff --git a/site/gdocs/components/ArticleBlocks.tsx b/site/gdocs/components/ArticleBlocks.tsx
index 14f84ad5c9..1c1913b341 100644
--- a/site/gdocs/components/ArticleBlocks.tsx
+++ b/site/gdocs/components/ArticleBlocks.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import ArticleBlock, { Container } from "./ArticleBlock.js"
 import {
     OwidEnrichedGdocBlock,
diff --git a/site/gdocs/components/AtomArticleBlocks.tsx b/site/gdocs/components/AtomArticleBlocks.tsx
index 016b767e42..a105ee90a2 100644
--- a/site/gdocs/components/AtomArticleBlocks.tsx
+++ b/site/gdocs/components/AtomArticleBlocks.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { match } from "ts-pattern"
 
 import { OwidEnrichedGdocBlock } from "@ourworldindata/types"
diff --git a/site/gdocs/components/BlockErrorBoundary.tsx b/site/gdocs/components/BlockErrorBoundary.tsx
index 77ee73de88..c66b07a81b 100644
--- a/site/gdocs/components/BlockErrorBoundary.tsx
+++ b/site/gdocs/components/BlockErrorBoundary.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { ErrorBoundary } from "react-error-boundary"
 import { useDebug } from "../DebugContext.js"
 
diff --git a/site/gdocs/components/Byline.tsx b/site/gdocs/components/Byline.tsx
index a1180a05d7..6c601633a9 100644
--- a/site/gdocs/components/Byline.tsx
+++ b/site/gdocs/components/Byline.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import { Fragment } from "react"
 import LinkedAuthor from "./LinkedAuthor.js"
 
 export const Byline = ({ names }: { names: string[] }) => {
@@ -6,14 +6,14 @@ export const Byline = ({ names }: { names: string[] }) => {
         <>
             {"By: "}
             {names.map((name, idx) => (
-                <React.Fragment key={name}>
+                <Fragment key={name}>
                     <LinkedAuthor name={name} />
                     {idx === names.length - 1
                         ? ""
                         : idx === names.length - 2
                           ? " and "
                           : ", "}
-                </React.Fragment>
+                </Fragment>
             ))}
         </>
     )
diff --git a/site/gdocs/components/Callout.tsx b/site/gdocs/components/Callout.tsx
index 898ef2443b..e95f9f48ac 100644
--- a/site/gdocs/components/Callout.tsx
+++ b/site/gdocs/components/Callout.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { EnrichedBlockCallout } from "@ourworldindata/types"
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
diff --git a/site/gdocs/components/Chart.tsx b/site/gdocs/components/Chart.tsx
index 386dfd25d5..c426d4be85 100644
--- a/site/gdocs/components/Chart.tsx
+++ b/site/gdocs/components/Chart.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react"
+import { useRef } from "react"
 import { useEmbedChart } from "../../hooks.js"
 import {
     grapherInterfaceWithHiddenControls,
diff --git a/site/gdocs/components/ChartStory.tsx b/site/gdocs/components/ChartStory.tsx
index e2f92a37cc..394ecc96c7 100644
--- a/site/gdocs/components/ChartStory.tsx
+++ b/site/gdocs/components/ChartStory.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react"
+import { useState, useRef } from "react"
 import {
     faCircleArrowRight,
     faCircleArrowLeft,
diff --git a/site/gdocs/components/DataInsightDateline.tsx b/site/gdocs/components/DataInsightDateline.tsx
index d23900a07a..1c3687afee 100644
--- a/site/gdocs/components/DataInsightDateline.tsx
+++ b/site/gdocs/components/DataInsightDateline.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import cx from "classnames"
 import { faCalendarDay } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
diff --git a/site/gdocs/components/DataInsightsNewsletter.tsx b/site/gdocs/components/DataInsightsNewsletter.tsx
index 0f1651ff9c..1c1dddcada 100644
--- a/site/gdocs/components/DataInsightsNewsletter.tsx
+++ b/site/gdocs/components/DataInsightsNewsletter.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import cx from "classnames"
 import { faXmark } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
diff --git a/site/gdocs/components/Donors.tsx b/site/gdocs/components/Donors.tsx
index f3d05db247..56b7021d2c 100644
--- a/site/gdocs/components/Donors.tsx
+++ b/site/gdocs/components/Donors.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { groupBy, removeDiacritics } from "@ourworldindata/utils"
 import { useDonors } from "../utils.js"
 
diff --git a/site/gdocs/components/ExplorerTiles.tsx b/site/gdocs/components/ExplorerTiles.tsx
index c01a5e3264..39d28f4e89 100644
--- a/site/gdocs/components/ExplorerTiles.tsx
+++ b/site/gdocs/components/ExplorerTiles.tsx
@@ -1,6 +1,6 @@
 import { EnrichedBlockExplorerTiles } from "@ourworldindata/types"
 import { Button } from "@ourworldindata/components"
-import React, { useContext } from "react"
+import { useContext } from "react"
 import { useLinkedChart } from "../utils.js"
 import { DocumentContext } from "../OwidGdoc.js"
 import { BAKED_BASE_URL } from "../../../settings/clientSettings.js"
diff --git a/site/gdocs/components/Footnotes.tsx b/site/gdocs/components/Footnotes.tsx
index fe04c615ed..d4fbb7d082 100644
--- a/site/gdocs/components/Footnotes.tsx
+++ b/site/gdocs/components/Footnotes.tsx
@@ -1,5 +1,4 @@
 import { ENDNOTES_ID, RefDictionary } from "@ourworldindata/utils"
-import React from "react"
 import ArticleBlock from "./ArticleBlock.js"
 import cx from "classnames"
 
diff --git a/site/gdocs/components/HomepageIntro.tsx b/site/gdocs/components/HomepageIntro.tsx
index 5eb4b8cdd8..476ec6bb75 100644
--- a/site/gdocs/components/HomepageIntro.tsx
+++ b/site/gdocs/components/HomepageIntro.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import { useContext } from "react"
 import cx from "classnames"
 import {
     EnrichedBlockHomepageIntro,
diff --git a/site/gdocs/components/HomepageSearch.tsx b/site/gdocs/components/HomepageSearch.tsx
index dd492c5ef8..7637291f0b 100644
--- a/site/gdocs/components/HomepageSearch.tsx
+++ b/site/gdocs/components/HomepageSearch.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import { useContext } from "react"
 import { Autocomplete } from "../../search/Autocomplete.js"
 import { AttachmentsContext } from "../OwidGdoc.js"
 import { commafyNumber } from "@ourworldindata/utils"
diff --git a/site/gdocs/components/Image.tsx b/site/gdocs/components/Image.tsx
index f6345f7f5a..cd08ccbab8 100644
--- a/site/gdocs/components/Image.tsx
+++ b/site/gdocs/components/Image.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from "react"
+import { useCallback, useContext } from "react"
 import {
     generateSourceProps,
     ImageMetadata,
diff --git a/site/gdocs/components/KeyIndicator.tsx b/site/gdocs/components/KeyIndicator.tsx
index d11df00418..7c0bdf3f72 100644
--- a/site/gdocs/components/KeyIndicator.tsx
+++ b/site/gdocs/components/KeyIndicator.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import cx from "classnames"
 
 import {
diff --git a/site/gdocs/components/KeyIndicatorCollection.tsx b/site/gdocs/components/KeyIndicatorCollection.tsx
index e2347ac622..7c922fbb87 100644
--- a/site/gdocs/components/KeyIndicatorCollection.tsx
+++ b/site/gdocs/components/KeyIndicatorCollection.tsx
@@ -1,4 +1,5 @@
-import React, { useContext, useEffect, useRef, useState } from "react"
+import { useContext, useEffect, useRef, useState } from "react"
+import * as React from "react"
 import cx from "classnames"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import {
diff --git a/site/gdocs/components/KeyInsights.jsdom.test.tsx b/site/gdocs/components/KeyInsights.jsdom.test.tsx
index cf6bbf6a1f..bc6bf750a2 100755
--- a/site/gdocs/components/KeyInsights.jsdom.test.tsx
+++ b/site/gdocs/components/KeyInsights.jsdom.test.tsx
@@ -1,7 +1,4 @@
-#! /usr/bin/env jest
-
-import React from "react"
-import { KEY_INSIGHTS_INSIGHT_PARAM } from "./KeyInsights.js"
+#! /usr/bin/env jestimport { KEY_INSIGHTS_INSIGHT_PARAM } from "./KeyInsights.js"
 
 import {
     EnrichedBlockKeyInsights,
diff --git a/site/gdocs/components/KeyInsights.tsx b/site/gdocs/components/KeyInsights.tsx
index 00362816e2..f10fb6d15c 100644
--- a/site/gdocs/components/KeyInsights.tsx
+++ b/site/gdocs/components/KeyInsights.tsx
@@ -1,4 +1,5 @@
-import React, { useCallback, useContext, useEffect, useState } from "react"
+import { useCallback, useContext, useEffect, useState } from "react"
+import * as React from "react"
 import { ScrollMenu, VisibilityContext } from "react-horizontal-scrolling-menu"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons"
diff --git a/site/gdocs/components/LatestDataInsights.tsx b/site/gdocs/components/LatestDataInsights.tsx
index 72ccc6930d..df673fb6eb 100644
--- a/site/gdocs/components/LatestDataInsights.tsx
+++ b/site/gdocs/components/LatestDataInsights.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { memo, useState, useCallback, useEffect, useMemo } from "react"
 import { useMediaQuery } from "usehooks-ts"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
diff --git a/site/gdocs/components/LatestDataInsightsBlock.tsx b/site/gdocs/components/LatestDataInsightsBlock.tsx
index ed39a930dd..2442e50613 100644
--- a/site/gdocs/components/LatestDataInsightsBlock.tsx
+++ b/site/gdocs/components/LatestDataInsightsBlock.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import { useContext } from "react"
 import cx from "classnames"
 
 import { AttachmentsContext } from "../OwidGdoc.js"
diff --git a/site/gdocs/components/LinkedAuthor.tsx b/site/gdocs/components/LinkedAuthor.tsx
index 01b66b409c..a15657c364 100644
--- a/site/gdocs/components/LinkedAuthor.tsx
+++ b/site/gdocs/components/LinkedAuthor.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { getCanonicalUrl } from "@ourworldindata/components"
 import { OwidGdocType } from "@ourworldindata/types"
 import { useLinkedAuthor } from "../utils.js"
diff --git a/site/gdocs/components/List.tsx b/site/gdocs/components/List.tsx
index 3cb4b8602f..50efec3f74 100644
--- a/site/gdocs/components/List.tsx
+++ b/site/gdocs/components/List.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { EnrichedBlockList, EnrichedBlockText } from "@ourworldindata/utils"
 import { renderSpans } from "../utils.js"
 export default function List({
diff --git a/site/gdocs/components/MissingData.tsx b/site/gdocs/components/MissingData.tsx
index b45316bf48..8eb8089804 100644
--- a/site/gdocs/components/MissingData.tsx
+++ b/site/gdocs/components/MissingData.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons"
 
diff --git a/site/gdocs/components/NumberedList.tsx b/site/gdocs/components/NumberedList.tsx
index 678151032d..c915613577 100644
--- a/site/gdocs/components/NumberedList.tsx
+++ b/site/gdocs/components/NumberedList.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import {
     EnrichedBlockNumberedList,
     EnrichedBlockText,
diff --git a/site/gdocs/components/OwidGdocHeader.tsx b/site/gdocs/components/OwidGdocHeader.tsx
index 413f5eeabd..6874ae3fdb 100644
--- a/site/gdocs/components/OwidGdocHeader.tsx
+++ b/site/gdocs/components/OwidGdocHeader.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import cx from "classnames"
 import {
     BreadcrumbItem,
diff --git a/site/gdocs/components/Paragraph.tsx b/site/gdocs/components/Paragraph.tsx
index 6716fd515a..a35a781750 100644
--- a/site/gdocs/components/Paragraph.tsx
+++ b/site/gdocs/components/Paragraph.tsx
@@ -1,5 +1,4 @@
 import { EnrichedBlockText, Span } from "@ourworldindata/utils"
-import React from "react"
 import { renderSpans } from "../utils.js"
 
 function isOnlyEmptySpans(spans: Span[]) {
diff --git a/site/gdocs/components/Person.tsx b/site/gdocs/components/Person.tsx
index c64750b226..915e461e1d 100644
--- a/site/gdocs/components/Person.tsx
+++ b/site/gdocs/components/Person.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { useMediaQuery } from "usehooks-ts"
 
 import { getCanonicalUrl } from "@ourworldindata/components"
diff --git a/site/gdocs/components/PillRow.tsx b/site/gdocs/components/PillRow.tsx
index c094191dea..dac0af1eac 100644
--- a/site/gdocs/components/PillRow.tsx
+++ b/site/gdocs/components/PillRow.tsx
@@ -1,5 +1,5 @@
 import { EnrichedBlockPillRow } from "@ourworldindata/types"
-import React, { useContext } from "react"
+import { useContext } from "react"
 import { useLinkedDocument } from "../utils.js"
 import { DocumentContext } from "../OwidGdoc.js"
 
diff --git a/site/gdocs/components/ProminentLink.tsx b/site/gdocs/components/ProminentLink.tsx
index a084b1e513..55d5c7422c 100644
--- a/site/gdocs/components/ProminentLink.tsx
+++ b/site/gdocs/components/ProminentLink.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import { useContext } from "react"
 import cx from "classnames"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons"
diff --git a/site/gdocs/components/PullQuote.tsx b/site/gdocs/components/PullQuote.tsx
index 8984983449..a29af33458 100644
--- a/site/gdocs/components/PullQuote.tsx
+++ b/site/gdocs/components/PullQuote.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { EnrichedBlockPullQuote } from "@ourworldindata/utils"
 export default function PullQuote({
     d,
diff --git a/site/gdocs/components/Recirc.tsx b/site/gdocs/components/Recirc.tsx
index 9170818234..c5ab933d76 100644
--- a/site/gdocs/components/Recirc.tsx
+++ b/site/gdocs/components/Recirc.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { EnrichedBlockRecirc } from "@ourworldindata/utils"
 import { renderSpan, useLinkedDocument } from "../utils.js"
 import { formatAuthors } from "../../clientFormatting.js"
diff --git a/site/gdocs/components/ResearchAndWriting.tsx b/site/gdocs/components/ResearchAndWriting.tsx
index 806f273e80..bf9ca1999d 100644
--- a/site/gdocs/components/ResearchAndWriting.tsx
+++ b/site/gdocs/components/ResearchAndWriting.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import { useContext } from "react"
 import cx from "classnames"
 import {
     EnrichedBlockResearchAndWriting,
diff --git a/site/gdocs/components/SDGGrid.tsx b/site/gdocs/components/SDGGrid.tsx
index 0908455c76..58dc89d761 100644
--- a/site/gdocs/components/SDGGrid.tsx
+++ b/site/gdocs/components/SDGGrid.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { EnrichedBlockSDGGrid } from "@ourworldindata/utils"
 import cx from "classnames"
 import { BAKED_BASE_URL } from "../../../settings/clientSettings.js"
diff --git a/site/gdocs/components/Scroller.tsx b/site/gdocs/components/Scroller.tsx
index 0a09d3e2c6..35cdd6cf08 100644
--- a/site/gdocs/components/Scroller.tsx
+++ b/site/gdocs/components/Scroller.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react"
+import { useState, useRef } from "react"
 import { InView } from "react-intersection-observer"
 import {
     EnrichedBlockScroller,
diff --git a/site/gdocs/components/Socials.tsx b/site/gdocs/components/Socials.tsx
index 039cbf8c04..2c8ca38019 100644
--- a/site/gdocs/components/Socials.tsx
+++ b/site/gdocs/components/Socials.tsx
@@ -1,5 +1,4 @@
 import { EnrichedSocialLink, SocialLinkType } from "@ourworldindata/types"
-import React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import {
     IconDefinition,
diff --git a/site/gdocs/components/Table.tsx b/site/gdocs/components/Table.tsx
index 9370305cb9..f8034db55a 100644
--- a/site/gdocs/components/Table.tsx
+++ b/site/gdocs/components/Table.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import { EnrichedBlockTable } from "@ourworldindata/utils"
 import { ArticleBlocks } from "./ArticleBlocks.js"
 
diff --git a/site/gdocs/components/TableOfContents.tsx b/site/gdocs/components/TableOfContents.tsx
index d5c9499df7..eae94444c6 100644
--- a/site/gdocs/components/TableOfContents.tsx
+++ b/site/gdocs/components/TableOfContents.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import { TocHeadingWithTitleSupertitle } from "@ourworldindata/utils"
 import { faArrowDown, faPlus, faMinus } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
diff --git a/site/gdocs/components/TopicPageIntro.tsx b/site/gdocs/components/TopicPageIntro.tsx
index f1b6cd606c..f3b6bf75a8 100644
--- a/site/gdocs/components/TopicPageIntro.tsx
+++ b/site/gdocs/components/TopicPageIntro.tsx
@@ -2,7 +2,7 @@ import {
     EnrichedTopicPageIntroRelatedTopic,
     EnrichedBlockTopicPageIntro,
 } from "@ourworldindata/utils"
-import React, { useContext } from "react"
+import { useContext } from "react"
 import { useLinkedDocument } from "../utils.js"
 import { DocumentContext } from "../OwidGdoc.js"
 import Paragraph from "./Paragraph.js"
diff --git a/site/gdocs/components/Video.tsx b/site/gdocs/components/Video.tsx
index e300b6f1dd..fd838b9fa5 100644
--- a/site/gdocs/components/Video.tsx
+++ b/site/gdocs/components/Video.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import cx from "classnames"
 import { LARGEST_IMAGE_WIDTH, Span } from "@ourworldindata/utils"
 import { renderSpans, useImage } from "../utils.js"
diff --git a/site/gdocs/pages/AboutPage.tsx b/site/gdocs/pages/AboutPage.tsx
index f5cc3d4482..6b9af237b5 100644
--- a/site/gdocs/pages/AboutPage.tsx
+++ b/site/gdocs/pages/AboutPage.tsx
@@ -1,6 +1,5 @@
 import cx from "classnames"
 import { isEmpty } from "lodash"
-import * as React from "react"
 import { useEffect, useRef } from "react"
 
 import { OwidGdocAboutInterface } from "@ourworldindata/types"
diff --git a/site/gdocs/pages/Author.tsx b/site/gdocs/pages/Author.tsx
index d185c74184..2f996002f7 100644
--- a/site/gdocs/pages/Author.tsx
+++ b/site/gdocs/pages/Author.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import {
     OwidEnrichedGdocBlock,
     OwidGdocAuthorContent,
diff --git a/site/gdocs/pages/DataInsight.tsx b/site/gdocs/pages/DataInsight.tsx
index a285122c6d..2d707078aa 100644
--- a/site/gdocs/pages/DataInsight.tsx
+++ b/site/gdocs/pages/DataInsight.tsx
@@ -5,7 +5,8 @@ import {
     copyToClipboard,
     MinimalTag,
 } from "@ourworldindata/utils"
-import React, { useContext, useState } from "react"
+import { useContext, useState } from "react"
+import * as React from "react"
 import {
     faArrowRight,
     faChevronRight,
diff --git a/site/gdocs/pages/Fragment.tsx b/site/gdocs/pages/Fragment.tsx
index 16b5f8eb87..e8f123fba1 100644
--- a/site/gdocs/pages/Fragment.tsx
+++ b/site/gdocs/pages/Fragment.tsx
@@ -1,5 +1,5 @@
 import { OwidGdocPostInterface } from "@ourworldindata/utils"
-import React from "react"
+import * as React from "react"
 
 /**
  * We would like to handle Fragments better in the future
diff --git a/site/gdocs/pages/GdocPost.tsx b/site/gdocs/pages/GdocPost.tsx
index cd73f0e840..48ddb81c05 100644
--- a/site/gdocs/pages/GdocPost.tsx
+++ b/site/gdocs/pages/GdocPost.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import cx from "classnames"
 import { useIntersectionObserver } from "usehooks-ts"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
diff --git a/site/gdocs/pages/Homepage.tsx b/site/gdocs/pages/Homepage.tsx
index a8d3312a28..bc1e2e2c94 100644
--- a/site/gdocs/pages/Homepage.tsx
+++ b/site/gdocs/pages/Homepage.tsx
@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 
-import React from "react"
+import * as React from "react"
 import { NewsletterSubscriptionContext } from "../../newsletter.js"
 import { NewsletterSubscriptionForm } from "../../NewsletterSubscription.js"
 import { ArticleBlocks } from "../components/ArticleBlocks.js"
diff --git a/site/gdocs/utils.tsx b/site/gdocs/utils.tsx
index cbeb58774e..41454b3af9 100644
--- a/site/gdocs/utils.tsx
+++ b/site/gdocs/utils.tsx
@@ -1,4 +1,5 @@
-import React, { useContext } from "react"
+import { useContext } from "react"
+import * as React from "react"
 
 import { getLinkType, getUrlTarget } from "@ourworldindata/components"
 import {
diff --git a/site/multiDim/MultiDimDataPage.tsx b/site/multiDim/MultiDimDataPage.tsx
index ebb7102491..b056d786bc 100644
--- a/site/multiDim/MultiDimDataPage.tsx
+++ b/site/multiDim/MultiDimDataPage.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Head } from "../Head.js"
 import { IFrameDetector } from "../IframeDetector.js"
 import { SiteHeader } from "../SiteHeader.js"
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 4266623bff..54eca868f2 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import {
     Grapher,
     GrapherAnalytics,
diff --git a/site/multiDim/MultiDimDataPageSettingsPanel.tsx b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
index 6f81f10b3c..4c02f21737 100644
--- a/site/multiDim/MultiDimDataPageSettingsPanel.tsx
+++ b/site/multiDim/MultiDimDataPageSettingsPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import {
     DimensionEnriched,
     MultiDimDimensionChoices,
diff --git a/site/multiembedder/MultiEmbedder.tsx b/site/multiembedder/MultiEmbedder.tsx
index 3abc824771..9e8d92d826 100644
--- a/site/multiembedder/MultiEmbedder.tsx
+++ b/site/multiembedder/MultiEmbedder.tsx
@@ -23,7 +23,6 @@ import {
     fetchWithRetry,
 } from "@ourworldindata/utils"
 import { action } from "mobx"
-import React from "react"
 import ReactDOM from "react-dom"
 import {
     Explorer,
diff --git a/site/multiembedder/MultiEmbedderTestPage.tsx b/site/multiembedder/MultiEmbedderTestPage.tsx
index ce289d77d0..ceeb18d152 100644
--- a/site/multiembedder/MultiEmbedderTestPage.tsx
+++ b/site/multiembedder/MultiEmbedderTestPage.tsx
@@ -2,7 +2,6 @@ import {
     GLOBAL_ENTITY_SELECTOR_DATA_ATTR,
     GRAPHER_EMBEDDED_FIGURE_ATTR,
 } from "@ourworldindata/grapher"
-import React from "react"
 import { EXPLORER_EMBEDDED_FIGURE_SELECTOR } from "@ourworldindata/explorer"
 import { Head } from "../../site/Head.js"
 import { SiteFooter } from "../../site/SiteFooter.js"
diff --git a/site/runDataTokens.tsx b/site/runDataTokens.tsx
index d9a7811c16..a7def8f8b3 100644
--- a/site/runDataTokens.tsx
+++ b/site/runDataTokens.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import ReactDOM from "react-dom"
 import { DataToken_name } from "../site/DataToken.js"
 import { LastUpdated } from "./covid/LastUpdated.js"
diff --git a/site/search/Autocomplete.tsx b/site/search/Autocomplete.tsx
index 72ab02859e..43c3fd5ee9 100644
--- a/site/search/Autocomplete.tsx
+++ b/site/search/Autocomplete.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
+import * as React from "react"
 import { render } from "react-dom"
 import {
     AutocompleteApi,
diff --git a/site/search/ChartHit.tsx b/site/search/ChartHit.tsx
index 607f489322..3008fc9807 100644
--- a/site/search/ChartHit.tsx
+++ b/site/search/ChartHit.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import cx from "classnames"
 import { Region } from "@ourworldindata/utils"
 import { ChartRecordType, IChartHit, SearchIndexName } from "./searchTypes.js"
diff --git a/site/search/SearchPage.tsx b/site/search/SearchPage.tsx
index fd844290c4..1d32eac2a7 100644
--- a/site/search/SearchPage.tsx
+++ b/site/search/SearchPage.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import { Head } from "../Head.js"
 import { SiteHeader } from "../SiteHeader.js"
 import { SiteFooter } from "../SiteFooter.js"
diff --git a/site/search/SearchPanel.tsx b/site/search/SearchPanel.tsx
index 26833ed4bf..9c89359153 100644
--- a/site/search/SearchPanel.tsx
+++ b/site/search/SearchPanel.tsx
@@ -1,5 +1,6 @@
 import ReactDOM from "react-dom"
-import React, { useCallback, useEffect, useMemo } from "react"
+import { useCallback, useEffect, useMemo } from "react"
+import * as React from "react"
 import cx from "classnames"
 import {
     keyBy,
diff --git a/site/typography.stories.tsx b/site/typography.stories.tsx
index 8e88318294..0ffef64131 100644
--- a/site/typography.stories.tsx
+++ b/site/typography.stories.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
+import * as React from "react"
 import webfontloader from "webfontloader"
 
 export default {
diff --git a/site/viteUtils.tsx b/site/viteUtils.tsx
index 7e0455c465..5cb4c25924 100644
--- a/site/viteUtils.tsx
+++ b/site/viteUtils.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import * as React from "react"
 import findBaseDir from "../settings/findBaseDir.js"
 import fs from "fs-extra"
 import {

From 55860250694088fe98cc4ee5e01aca1e7739995a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <martin.racak@ourworldindata.org>
Date: Thu, 26 Dec 2024 14:27:01 +0100
Subject: [PATCH 20/29] Update to ESlint 9 and flat config

---
 .eslintignore                                 |   12 -
 .eslintrc.cjs                                 |   74 -
 adminShared/patchHelper.ts                    |    5 +-
 adminShared/schemaProcessing.ts               |   18 +-
 adminSiteClient/.eslintrc.yaml                |    2 -
 adminSiteClient/Admin.tsx                     |    1 -
 .../GrapherConfigGridEditorTypesAndUtils.tsx  |    2 +-
 adminSiteClient/SiteRedirectsIndexPage.tsx    |    4 +-
 adminSiteClient/VariablesIndexPage.tsx        |    4 +-
 adminSiteClient/gdocsValidation.ts            |    2 +-
 adminSiteServer/.eslintrc.yaml                |    2 -
 adminSiteServer/app.test.tsx                  |    2 +-
 baker/.eslintrc.yaml                          |    2 -
 baker/batchTagWithGpt.ts                      |   11 +-
 baker/pageOverrides.tsx                       |    6 +-
 baker/siteRenderers.tsx                       |    4 +-
 db/.eslintrc.yaml                             |    4 -
 db/model/Gdoc/htmlToEnriched.ts               |    2 +-
 db/refreshPageviewsFromDatasette.ts           |    1 -
 .../cloudflareImagesSync.ts                   |   10 +-
 devTools/explorerTools/extractGrapherIds.ts   |    2 +-
 devTools/explorerTools/rewriteAllExplorers.ts |    2 +-
 devTools/flagUpdater/update.ts                |    2 +-
 devTools/gdocs/fetch-by-id.ts                 |    8 +-
 devTools/graphersToGit/tasks.ts               |    6 +-
 devTools/markdownTest/markdown.ts             |   13 +-
 devTools/navigationTest/navigationTest.ts     |    4 +-
 .../reconstructPostsGdocsComponents.ts        |   10 +-
 devTools/regionsUpdater/update.ts             |   73 +-
 .../generate-default-object-from-schema.ts    |   14 +-
 devTools/schemaProcessor/schemaProcessor.ts   |    4 +-
 devTools/svgTester/create-compare-view.ts     |    2 +-
 devTools/svgTester/dump-chart-ids.ts          |    2 +-
 devTools/svgTester/dump-data.ts               |    2 +-
 devTools/svgTester/export-graphs.ts           |    2 +-
 devTools/svgTester/utils.ts                   |   17 +-
 devTools/svgTester/verify-graphs.ts           |    2 +-
 devTools/syncGraphersToR2/syncGraphersToR2.ts |    2 +-
 devTools/tsconfigs/tsconfig.base.json         |    2 +-
 devTools/wayback/wayback.ts                   |    4 +-
 eslint.config.mjs                             |  187 +++
 explorerAdminClient/.eslintrc.yaml            |    2 -
 .../ExplorerCreatePage.jsdom.test.tsx         |    4 +-
 explorerAdminClient/ExplorersListPage.tsx     |    2 +-
 explorerAdminServer/.eslintrc.yaml            |    2 -
 functions/.eslintrc.yml                       |    2 -
 functions/donation/thank-you.ts               |    8 +-
 gitCms/GitCmsServer.ts                        |    6 +-
 package.json                                  |   14 +-
 .../@ourworldindata/components/package.json   |    4 +-
 .../src/markdown/remarkPlainLinks.ts          |    2 +-
 .../@ourworldindata/core-table/.eslintrc.yaml |    3 -
 .../@ourworldindata/core-table/package.json   |    2 +-
 .../core-table/src/CoreTableColumns.ts        |    2 +-
 .../@ourworldindata/explorer/package.json     |    4 +-
 .../src/ExplorerControls.jsdom.test.tsx       |    3 +-
 .../explorer/src/ExplorerProgram.ts           |    1 +
 .../src/gridLang/GridLangConstants.ts         |   10 +-
 .../ExplorerUrlMigrationUtils.ts              |    2 +-
 packages/@ourworldindata/grapher/package.json |    4 +-
 .../grapher/src/axis/.eslintrc.yaml           |    3 -
 .../grapher/src/axis/AxisViews.jsdom.test.tsx |    4 +-
 .../grapher/src/barCharts/.eslintrc.yaml      |    3 -
 .../grapher/src/bodyDiv/.eslintrc.yaml        |    3 -
 .../grapher/src/captionedChart/.eslintrc.yaml |    3 -
 .../src/captionedChart/CaptionedChart.tsx     |    4 +-
 .../captionedChart/StaticChartRasterizer.tsx  |    4 +-
 .../grapher/src/chart/.eslintrc.yaml          |    3 -
 .../grapher/src/color/.eslintrc.yaml          |    3 -
 .../grapher/src/controls/.eslintrc.yaml       |    3 -
 .../grapher/src/controls/ContentSwitchers.tsx |    3 +-
 .../controls/entityPicker/EntityPicker.tsx    |    7 +-
 .../GlobalEntitySelector.jsdom.test.tsx       |    3 +-
 .../GlobalEntitySelector.tsx                  |    4 +-
 .../grapher/src/core/.eslintrc.yaml           |    3 -
 .../grapher/src/core/EntityUrlBuilder.ts      |    2 +-
 .../grapher/src/core/Grapher.tsx              |    1 +
 .../grapher/src/dataTable/.eslintrc.yaml      |    3 -
 .../src/dataTable/DataTable.jsdom.test.tsx    |    4 +-
 .../src/entitySelector/EntitySelector.tsx     |    4 +-
 .../grapher/src/facetChart/.eslintrc.yaml     |    3 -
 .../grapher/src/footer/.eslintrc.yaml         |    3 -
 .../grapher/src/header/.eslintrc.yaml         |    3 -
 .../grapher/src/lineCharts/.eslintrc.yaml     |    3 -
 .../src/loadingIndicator/.eslintrc.yaml       |    3 -
 .../grapher/src/mapCharts/.eslintrc.yaml      |    3 -
 .../src/mapCharts/MapTooltip.jsdom.test.tsx   |    5 +-
 .../grapher/src/noDataModal/.eslintrc.yaml    |    3 -
 .../grapher/src/scatterCharts/.eslintrc.yaml  |    3 -
 .../grapher/src/selection/.eslintrc.yaml      |    3 -
 .../grapher/src/stackedCharts/.eslintrc.yaml  |    3 -
 .../src/stackedCharts/MarimekkoChart.tsx      |    3 +-
 .../stackedCharts/StackedDiscreteBarChart.tsx |    3 +-
 .../grapher/src/timeline/.eslintrc.yaml       |    3 -
 .../grapher/src/tooltip/.eslintrc.yaml        |    3 -
 .../src/verticalColorLegend/.eslintrc.yaml    |    3 -
 packages/@ourworldindata/types/package.json   |    4 +-
 .../types/src/gdocTypes/GdocConstants.ts      |    2 +-
 packages/@ourworldindata/utils/.eslintrc.yaml |    3 -
 packages/@ourworldindata/utils/package.json   |    4 +-
 .../utils/src/PromiseCache.test.ts            |   12 +-
 .../utils/src/PromiseSwitcher.test.ts         |    4 +-
 packages/@ourworldindata/utils/src/Util.ts    |   13 +-
 .../utils/src/persistable/.eslintrc.yaml      |    3 -
 packages/@ourworldindata/utils/src/string.ts  |    2 +-
 settings/.eslintrc.yaml                       |    4 -
 site/CookiePreferencesManager.tsx             |    4 +-
 site/GrapherPage.jsdom.test.tsx               |    3 +-
 site/blocks/RelatedCharts.jsdom.test.tsx      |    3 +-
 .../components/KeyInsights.jsdom.test.tsx     |    3 +-
 site/owid.entry.ts                            |    4 +-
 site/runSiteFooterScripts.ts                  |    3 +
 tsconfig.eslint.json                          |    9 +-
 yarn.lock                                     | 1316 +++++++++++++----
 114 files changed, 1440 insertions(+), 678 deletions(-)
 delete mode 100644 .eslintignore
 delete mode 100644 .eslintrc.cjs
 delete mode 100644 adminSiteClient/.eslintrc.yaml
 delete mode 100644 adminSiteServer/.eslintrc.yaml
 delete mode 100644 baker/.eslintrc.yaml
 delete mode 100644 db/.eslintrc.yaml
 create mode 100644 eslint.config.mjs
 delete mode 100644 explorerAdminClient/.eslintrc.yaml
 delete mode 100644 explorerAdminServer/.eslintrc.yaml
 delete mode 100644 functions/.eslintrc.yml
 delete mode 100644 packages/@ourworldindata/core-table/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/axis/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/barCharts/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/bodyDiv/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/captionedChart/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/chart/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/color/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/controls/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/core/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/dataTable/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/facetChart/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/footer/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/header/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/lineCharts/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/loadingIndicator/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/mapCharts/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/noDataModal/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/scatterCharts/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/selection/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/stackedCharts/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/timeline/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/tooltip/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/grapher/src/verticalColorLegend/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/utils/.eslintrc.yaml
 delete mode 100644 packages/@ourworldindata/utils/src/persistable/.eslintrc.yaml
 delete mode 100644 settings/.eslintrc.yaml

diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index de55771e24..0000000000
--- a/.eslintignore
+++ /dev/null
@@ -1,12 +0,0 @@
-**/*.js
-bakedSite/**
-coverage/**
-itsJustJavascript/**
-devtools/**
-jest.config.js
-knexfile.ts
-ormconfig.js
-postcss.config.js
-packages/@ourworldindata/*/dist/
-dist/
-.vscode/
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
deleted file mode 100644
index f8a7126838..0000000000
--- a/.eslintrc.cjs
+++ /dev/null
@@ -1,74 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const path = require("node:path")
-
-module.exports = {
-    extends: [
-        "plugin:react/recommended",
-        "plugin:react-hooks/recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:import/recommended",
-        "plugin:import/typescript",
-        "prettier",
-    ],
-    parser: "@typescript-eslint/parser",
-    parserOptions: {
-        ecmaFeatures: {
-            jsx: true,
-        },
-        project: path.join(__dirname, "tsconfig.eslint.json"),
-        ecmaVersion: "latest",
-    },
-    overrides: [
-        {
-            files: ["*.ts", "*.tsx"],
-        },
-    ],
-    rules: {
-        // These rules are only preliminary to ease the migration from tslint, many of them might make sense to have enabled!
-        // use `export type` whenever applicable
-        "@typescript-eslint/consistent-type-exports": [
-            "warn",
-            { fixMixedExportsWithInlineTypeSpecifier: true },
-        ],
-        "@typescript-eslint/explicit-function-return-type": "off", // This rule is enabled on a folder by folder basis and should be enabled project wide soon
-        "@typescript-eslint/explicit-module-boundary-types": "off", // This rule is enabled on a folder by folder basis and should be enabled project wide soon
-        "@typescript-eslint/no-empty-function": "warn",
-        "@typescript-eslint/no-empty-interface": "warn",
-        "@typescript-eslint/no-explicit-any": "off", // TODO: enable this rule
-        "@typescript-eslint/no-for-in-array": "warn",
-        "@typescript-eslint/no-non-null-assertion": "off", // TODO: enable this rule
-        "@typescript-eslint/no-unused-vars": [
-            "warn",
-            { varsIgnorePattern: "^_", argsIgnorePattern: "^_" },
-        ],
-        "@typescript-eslint/prefer-for-of": "warn",
-        "@typescript-eslint/restrict-plus-operands": "warn",
-        eqeqeq: "warn",
-        // Turn off import rules covered by typescript-eslint.
-        // https://typescript-eslint.io/troubleshooting/performance-troubleshooting/#eslint-plugin-import
-        "import/named": "off",
-        "import/namespace": "off",
-        "import/default": "off",
-        "import/no-named-as-default-member": "off",
-        "import/no-unresolved": "off",
-        "no-console": ["warn", { allow: ["warn", "error"] }],
-        "prefer-const": ["warn", { destructuring: "all" }],
-        "react/display-name": "warn",
-        "react/jsx-key": "warn",
-        "react/jsx-no-target-blank": ["warn", { allowReferrer: true }],
-        "react/no-render-return-value": "warn",
-        "react/no-unescaped-entities": ["warn", { forbid: [">", "}"] }],
-        "react/prop-types": "warn",
-        "@typescript-eslint/no-floating-promises": "error",
-        "no-constant-binary-expression": "error",
-    },
-    settings: {
-        "import/resolver": {
-            typescript: true,
-            node: true,
-        },
-        react: {
-            version: "detect",
-        },
-    },
-}
diff --git a/adminShared/patchHelper.ts b/adminShared/patchHelper.ts
index 5f4defb63d..9526d5f190 100644
--- a/adminShared/patchHelper.ts
+++ b/adminShared/patchHelper.ts
@@ -71,7 +71,10 @@ export function setValueRecursive(
             let newObject: any = {}
             if (json !== undefined && checkIsPlainObjectWithGuard(json))
                 newObject = { ...json }
-            const currentValue = newObject.hasOwnProperty(currentPart)
+            const currentValue = Object.prototype.hasOwnProperty.call(
+                newObject,
+                currentPart
+            )
                 ? newObject[currentPart]
                 : undefined
             const updatedValue = setValueRecursive(
diff --git a/adminShared/schemaProcessing.ts b/adminShared/schemaProcessing.ts
index 6577878f1e..70f52f0a5e 100644
--- a/adminShared/schemaProcessing.ts
+++ b/adminShared/schemaProcessing.ts
@@ -128,9 +128,9 @@ function extractSchemaRecursive(
         // then do not emit anything directly and recurse over the
         // described properties
         if (
-            schema.hasOwnProperty("type") &&
+            Object.prototype.hasOwnProperty.call(schema, "type") &&
             schema.type === "object" &&
-            schema.hasOwnProperty("properties") &&
+            Object.prototype.hasOwnProperty.call(schema, "properties") &&
             checkIsPlainObjectWithGuard(schema.properties)
         ) {
             // Color scales are complex objects that are treated as opaque objects with a special
@@ -166,15 +166,15 @@ function extractSchemaRecursive(
             // paternProperties is ".*" and the type of those
             // is string (interpreted as a color)
             // We yield something like this as a single entry
-            schema.hasOwnProperty("type") &&
+            Object.prototype.hasOwnProperty.call(schema, "type") &&
             schema.type === "object" &&
-            schema.hasOwnProperty("patternProperties") &&
+            Object.prototype.hasOwnProperty.call(schema, "patternProperties") &&
             Object.values(
                 schema.patternProperties as Record<string, any>
             ).every(
                 (item: any) =>
                     checkIsPlainObjectWithGuard(item) &&
-                    item.hasOwnProperty("type") &&
+                    Object.prototype.hasOwnProperty.call(item, "type") &&
                     isPlainTypeString((item as any).type)
             )
         ) {
@@ -234,7 +234,7 @@ function extractSchemaRecursive(
             // a primitive type. If so we collect all the types
             // and yield a single FieldDefinition with the merged
             // type
-            schema.hasOwnProperty("oneOf") &&
+            Object.prototype.hasOwnProperty.call(schema, "oneOf") &&
             isArray(schema.oneOf) &&
             schema.oneOf.map((item) => item.type).every(isPlainTypeStringOrNull)
         ) {
@@ -264,13 +264,13 @@ function recursiveDereference(
         schema !== undefined &&
         checkIsPlainObjectWithGuard(schema)
     ) {
-        if (schema.hasOwnProperty("$ref")) {
+        if (Object.prototype.hasOwnProperty.call(schema, "$ref")) {
             const ref = schema["$ref"] as string
             const localPrefix = "#/$defs/"
             if (!ref.startsWith(localPrefix))
                 throw "Only local refs are supported at the moment!"
             const refName = ref.substring(localPrefix.length)
-            if (!defs.hasOwnProperty(refName)) {
+            if (!Object.prototype.hasOwnProperty.call(defs, refName)) {
                 console.error("Reference not found", refName)
                 return schema
             } else return defs[refName] // Note: we are not using recursive dereferencing, i.e. if there are refs in the $defs section we don't resolve them here
@@ -281,7 +281,7 @@ function recursiveDereference(
 }
 
 function dereference(schema: Record<string, unknown>): any {
-    if (!schema.hasOwnProperty("$defs")) return
+    if (!Object.prototype.hasOwnProperty.call(schema, "$defs")) return
     const defs = schema["$defs"] as Record<string, unknown>
 
     const dereferenced = recursiveDereference(schema, defs)
diff --git a/adminSiteClient/.eslintrc.yaml b/adminSiteClient/.eslintrc.yaml
deleted file mode 100644
index adf76b5060..0000000000
--- a/adminSiteClient/.eslintrc.yaml
+++ /dev/null
@@ -1,2 +0,0 @@
-rules:
-    no-console: "off"
diff --git a/adminSiteClient/Admin.tsx b/adminSiteClient/Admin.tsx
index 307513c79e..6658e39229 100644
--- a/adminSiteClient/Admin.tsx
+++ b/adminSiteClient/Admin.tsx
@@ -162,7 +162,6 @@ export class Admin {
     }
 
     @action.bound private removeRequest(request: Promise<Response>): void {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this.currentRequests = this.currentRequests.filter(
             (req) => req !== request
         )
diff --git a/adminSiteClient/GrapherConfigGridEditorTypesAndUtils.tsx b/adminSiteClient/GrapherConfigGridEditorTypesAndUtils.tsx
index 3de0bbc428..ebba11e932 100644
--- a/adminSiteClient/GrapherConfigGridEditorTypesAndUtils.tsx
+++ b/adminSiteClient/GrapherConfigGridEditorTypesAndUtils.tsx
@@ -136,7 +136,7 @@ export function fetchVariablesParametersFromQueryString(
     sExpressionContext: OperationContext
 ): FetchVariablesParameters {
     let filterQuery: Operation | undefined = undefined
-    if (params.hasOwnProperty("filter")) {
+    if (Object.prototype.hasOwnProperty.call(params, "filter")) {
         filterQuery = parseToOperation(params.filter!, sExpressionContext)
     }
     return {
diff --git a/adminSiteClient/SiteRedirectsIndexPage.tsx b/adminSiteClient/SiteRedirectsIndexPage.tsx
index 1fea807c0c..1c550e0d4f 100644
--- a/adminSiteClient/SiteRedirectsIndexPage.tsx
+++ b/adminSiteClient/SiteRedirectsIndexPage.tsx
@@ -7,10 +7,10 @@ import { AdminAppContext } from "./AdminAppContext.js"
 import { AdminLayout } from "./AdminLayout.js"
 import { Link } from "./Link.js"
 
-const SOURCE_PATTERN = /^\/$|^\/.*[^\/]+$/
+const SOURCE_PATTERN = /^\/$|^\/.*[^/]+$/
 const INVALID_SOURCE_MESSAGE =
     "URL must start with a slash and cannot end with a slash, unless it's the root."
-const TARGET_PATTERN = /^\/$|^(https?:\/\/|\/).*[^\/]+$/
+const TARGET_PATTERN = /^\/$|^(https?:\/\/|\/).*[^/]+$/
 const INVALID_TARGET_MESSAGE =
     "URL must start with a slash or http(s):// and cannot end with a slash, unless it's the root."
 
diff --git a/adminSiteClient/VariablesIndexPage.tsx b/adminSiteClient/VariablesIndexPage.tsx
index 2d688d2aff..114fedccb0 100644
--- a/adminSiteClient/VariablesIndexPage.tsx
+++ b/adminSiteClient/VariablesIndexPage.tsx
@@ -8,7 +8,7 @@ import {
     reaction,
     IReactionDisposer,
 } from "mobx"
-import * as lodash from "lodash"
+import lodash from "lodash"
 
 import { AdminLayout } from "./AdminLayout.js"
 import { SearchField, FieldsRow } from "./Forms.js"
@@ -42,7 +42,7 @@ export class VariablesIndexPage extends Component {
                 const html = text.replace(
                     new RegExp(
                         this.highlightSearch.replace(
-                            /[-\/\\^$*+?.()|[\]{}]/g,
+                            /[-/\\^$*+?.()|[\]{}]/g,
                             "\\$&"
                         ),
                         "i"
diff --git a/adminSiteClient/gdocsValidation.ts b/adminSiteClient/gdocsValidation.ts
index 58ac938059..0ad8da3f38 100644
--- a/adminSiteClient/gdocsValidation.ts
+++ b/adminSiteClient/gdocsValidation.ts
@@ -33,7 +33,7 @@ function validatePublishedAt(gdoc: OwidGdoc, errors: OwidGdocErrorMessage[]) {
 }
 
 function validateSlug(gdoc: OwidGdoc, errors: OwidGdocErrorMessage[]) {
-    if (!gdoc.slug.match(/^[a-z0-9-\/]+$/)) {
+    if (!gdoc.slug.match(/^[a-z0-9-/]+$/)) {
         errors.push({
             property: "slug",
             type: OwidGdocErrorMessageType.Error,
diff --git a/adminSiteServer/.eslintrc.yaml b/adminSiteServer/.eslintrc.yaml
deleted file mode 100644
index adf76b5060..0000000000
--- a/adminSiteServer/.eslintrc.yaml
+++ /dev/null
@@ -1,2 +0,0 @@
-rules:
-    no-console: "off"
diff --git a/adminSiteServer/app.test.tsx b/adminSiteServer/app.test.tsx
index 120673d870..e35184c905 100644
--- a/adminSiteServer/app.test.tsx
+++ b/adminSiteServer/app.test.tsx
@@ -39,7 +39,7 @@ jest.mock("googleapis", () => {
 import { OwidAdminApp } from "./appClass.js"
 
 import { logInAsUser } from "./authentication.js"
-import knex, { Knex } from "knex"
+import { Knex, knex } from "knex"
 import { dbTestConfig } from "../db/tests/dbTestConfig.js"
 import {
     TransactionCloseMode,
diff --git a/baker/.eslintrc.yaml b/baker/.eslintrc.yaml
deleted file mode 100644
index adf76b5060..0000000000
--- a/baker/.eslintrc.yaml
+++ /dev/null
@@ -1,2 +0,0 @@
-rules:
-    no-console: "off"
diff --git a/baker/batchTagWithGpt.ts b/baker/batchTagWithGpt.ts
index 50940696ae..79c30e7dc8 100644
--- a/baker/batchTagWithGpt.ts
+++ b/baker/batchTagWithGpt.ts
@@ -81,13 +81,10 @@ if (require.main === module) {
                     })
             },
             async (argv) => {
-                try {
-                    await db.knexReadonlyTransaction(
-                        (trx) => batchTagChartsWithGpt(trx, argv),
-                        db.TransactionCloseMode.Close
-                    )
-                } finally {
-                }
+                await db.knexReadonlyTransaction(
+                    (trx) => batchTagChartsWithGpt(trx, argv),
+                    db.TransactionCloseMode.Close
+                )
             }
         )
         .help()
diff --git a/baker/pageOverrides.tsx b/baker/pageOverrides.tsx
index 1e8e91a69d..fb1a90a999 100644
--- a/baker/pageOverrides.tsx
+++ b/baker/pageOverrides.tsx
@@ -14,13 +14,11 @@ export const getPostBySlugLogToSlackNoThrow = async (
     knex: KnexReadonlyTransaction,
     slug: string
 ) => {
-    let post
     try {
-        post = await getFullPostBySlugFromSnapshot(knex, slug)
+        return await getFullPostBySlugFromSnapshot(knex, slug)
     } catch (err) {
         void logErrorAndMaybeSendToBugsnag(err)
-    } finally {
-        return post
+        return undefined
     }
 }
 
diff --git a/baker/siteRenderers.tsx b/baker/siteRenderers.tsx
index f2df79ef18..75d24feeee 100644
--- a/baker/siteRenderers.tsx
+++ b/baker/siteRenderers.tsx
@@ -11,7 +11,7 @@ import { ThankYouPage } from "../site/ThankYouPage.js"
 import TombstonePage from "../site/TombstonePage.js"
 import OwidGdocPage from "../site/gdocs/OwidGdocPage.js"
 import ReactDOMServer from "react-dom/server.js"
-import * as lodash from "lodash"
+import lodash from "lodash"
 import { formatCountryProfile, isCanonicalInternalUrl } from "./formatting.js"
 import {
     bakeGrapherUrls,
@@ -621,9 +621,9 @@ export const renderProminentLinks = async (
                         )
                     )
                     $block.remove()
-                    return
                 }
             }
+            if (!title) return
 
             const image =
                 $block.find("figure").html() ||
diff --git a/db/.eslintrc.yaml b/db/.eslintrc.yaml
deleted file mode 100644
index 3da8d3df28..0000000000
--- a/db/.eslintrc.yaml
+++ /dev/null
@@ -1,4 +0,0 @@
-rules:
-    no-console: "off"
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/db/model/Gdoc/htmlToEnriched.ts b/db/model/Gdoc/htmlToEnriched.ts
index 0d3e555a6b..8e5ea39c08 100644
--- a/db/model/Gdoc/htmlToEnriched.ts
+++ b/db/model/Gdoc/htmlToEnriched.ts
@@ -317,7 +317,7 @@ interface ParseContext {
     to some html tags like <br />
     */
 const wpTagRegex =
-    /wp:(?<tag>([\w\/-]+))\s*(?<attributes>{.*})?\s*(?<isVoidElement>\/)?$/
+    /wp:(?<tag>([\w/-]+))\s*(?<attributes>{.*})?\s*(?<isVoidElement>\/)?$/
 
 /** Unwraps a CheerioElement in the sense that it applies
     cheerioElementsToArchieML on the children, returning the result. In effect
diff --git a/db/refreshPageviewsFromDatasette.ts b/db/refreshPageviewsFromDatasette.ts
index 333c91fc13..f144aea520 100644
--- a/db/refreshPageviewsFromDatasette.ts
+++ b/db/refreshPageviewsFromDatasette.ts
@@ -76,7 +76,6 @@ const main = async (): Promise<void> => {
         )
     } catch (e) {
         console.error(e)
-    } finally {
     }
 }
 
diff --git a/devTools/cloudflareImagesSync/cloudflareImagesSync.ts b/devTools/cloudflareImagesSync/cloudflareImagesSync.ts
index a43ea14fa3..36aaa4d3c0 100644
--- a/devTools/cloudflareImagesSync/cloudflareImagesSync.ts
+++ b/devTools/cloudflareImagesSync/cloudflareImagesSync.ts
@@ -9,7 +9,7 @@ import {
     CLOUDFLARE_IMAGES_API_KEY,
     IMAGE_HOSTING_R2_CDN_URL,
 } from "../../settings/serverSettings.js"
-import { excludeNullish, keyBy } from "@ourworldindata/utils"
+import { keyBy } from "@ourworldindata/utils"
 
 type CloudflareImageDirectory = Record<string, { id: string; filename: string }>
 
@@ -89,6 +89,7 @@ async function validateDirectory(
     }
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 async function purgeRecords(trx: db.KnexReadWriteTransaction) {
     await new Promise<void>((resolve) => {
         const readlineInterface = readline.createInterface({
@@ -449,4 +450,9 @@ You need to set "CLOUDFLARE_IMAGES_ACCOUNT_ID" and "CLOUDFLARE_IMAGES_API_KEY" i
     })
 }
 
-main().then(() => process.exit(0))
+main()
+    .then(() => process.exit(0))
+    .catch((e) => {
+        console.error(e)
+        process.exit(1)
+    })
diff --git a/devTools/explorerTools/extractGrapherIds.ts b/devTools/explorerTools/extractGrapherIds.ts
index 5fb96e8f62..28181c117d 100644
--- a/devTools/explorerTools/extractGrapherIds.ts
+++ b/devTools/explorerTools/extractGrapherIds.ts
@@ -35,4 +35,4 @@ async function main(): Promise<void> {
     console.log(csvRows.join("\n"))
 }
 
-main()
+void main()
diff --git a/devTools/explorerTools/rewriteAllExplorers.ts b/devTools/explorerTools/rewriteAllExplorers.ts
index 52401f5c8e..4b02e98efd 100644
--- a/devTools/explorerTools/rewriteAllExplorers.ts
+++ b/devTools/explorerTools/rewriteAllExplorers.ts
@@ -18,4 +18,4 @@ const rewriteAllExplorers = async () => {
     console.log("Finished rewriting", allExplorers.length, "explorers")
 }
 
-rewriteAllExplorers()
+void rewriteAllExplorers()
diff --git a/devTools/flagUpdater/update.ts b/devTools/flagUpdater/update.ts
index 353d89f1db..d0022707f5 100644
--- a/devTools/flagUpdater/update.ts
+++ b/devTools/flagUpdater/update.ts
@@ -74,4 +74,4 @@ const main = async () => {
     }
 }
 
-main()
+void main()
diff --git a/devTools/gdocs/fetch-by-id.ts b/devTools/gdocs/fetch-by-id.ts
index 709618cabe..c0e09cb059 100644
--- a/devTools/gdocs/fetch-by-id.ts
+++ b/devTools/gdocs/fetch-by-id.ts
@@ -1,9 +1,5 @@
 #! /usr/bin/env node
 
-import { TransactionCloseMode, knexReadonlyTransaction } from "../../db/db.js"
-
-import fs from "fs-extra"
-
 import parseArgs from "minimist"
 
 import { OwidGoogleAuth } from "../../db/OwidGoogleAuth.js"
@@ -19,7 +15,7 @@ async function main(parsedArgs: parseArgs.ParsedArgs) {
             suggestionsViewMode: "PREVIEW_WITHOUT_SUGGESTIONS",
         })
         // Remove the Authorization header from the response before printing it
-        delete response.config.headers.Authorization
+        delete response.config?.headers?.Authorization
         process.stdout.write(JSON.stringify(response, null, 2))
     } catch (error) {
         console.error("Encountered an error: ", error)
@@ -40,5 +36,5 @@ Usage:
     `)
     process.exit(0)
 } else {
-    main(parsedArgs)
+    void main(parsedArgs)
 }
diff --git a/devTools/graphersToGit/tasks.ts b/devTools/graphersToGit/tasks.ts
index cc555c3ad3..55828a54f1 100755
--- a/devTools/graphersToGit/tasks.ts
+++ b/devTools/graphersToGit/tasks.ts
@@ -71,7 +71,7 @@ const dumpGraphers = async () => {
         JSON.stringify(mapToObjectLiteral(graphersById), null, 2),
         "utf8"
     )
-    closeTypeOrmAndKnexConnections()
+    void closeTypeOrmAndKnexConnections()
 }
 
 // If an author changes the map variable then removes that variable, we don't remove it from map config.
@@ -205,7 +205,7 @@ const dumpComplexSelections = async () => {
             }),
         "utf8"
     )
-    closeTypeOrmAndKnexConnections()
+    void closeTypeOrmAndKnexConnections()
 }
 
 const getArgsOrErrorMessage = () => {
@@ -240,4 +240,4 @@ const tasks = [
     dumpColorScales,
 ]
 
-main()
+void main()
diff --git a/devTools/markdownTest/markdown.ts b/devTools/markdownTest/markdown.ts
index 4f694ff6d0..b00fdbebea 100644
--- a/devTools/markdownTest/markdown.ts
+++ b/devTools/markdownTest/markdown.ts
@@ -1,16 +1,9 @@
-import {
-    TransactionCloseMode,
-    knexReadWriteTransaction,
-    knexReadonlyTransaction,
-} from "../../db/db.js"
+import { TransactionCloseMode, knexReadonlyTransaction } from "../../db/db.js"
 import { getPostRawBySlug } from "../../db/model/Post.js"
 import { enrichedBlocksToMarkdown } from "../../db/model/Gdoc/enrichedToMarkdown.js"
 
-import fs from "fs-extra"
-
 import parseArgs from "minimist"
-import { OwidEnrichedGdocBlock } from "@ourworldindata/utils"
-import { parsePostArchieml } from "@ourworldindata/utils"
+import { OwidEnrichedGdocBlock, parsePostArchieml } from "@ourworldindata/utils"
 import { getAndLoadGdocBySlug } from "../../db/model/Gdoc/GdocFactory.js"
 
 async function main(parsedArgs: parseArgs.ParsedArgs) {
@@ -58,4 +51,4 @@ async function main(parsedArgs: parseArgs.ParsedArgs) {
 }
 
 const parsedArgs = parseArgs(process.argv.slice(2))
-main(parsedArgs)
+void main(parsedArgs)
diff --git a/devTools/navigationTest/navigationTest.ts b/devTools/navigationTest/navigationTest.ts
index 63de2df8f8..a191b52f66 100644
--- a/devTools/navigationTest/navigationTest.ts
+++ b/devTools/navigationTest/navigationTest.ts
@@ -17,7 +17,7 @@ const testSiteNavigation = async () => {
         return categorySlugs
     })
 
-    let promises = slugs.map((slug) => {
+    const promises = slugs.map((slug) => {
         return fetch(`https://ourworldindata.org/${slug}`, {
             method: "HEAD",
         })
@@ -36,4 +36,4 @@ const testSiteNavigation = async () => {
     console.log("✅ All fetches completed")
 }
 
-testSiteNavigation()
+void testSiteNavigation()
diff --git a/devTools/reconstructPostsGdocsComponents/reconstructPostsGdocsComponents.ts b/devTools/reconstructPostsGdocsComponents/reconstructPostsGdocsComponents.ts
index bd06063a45..7fec1504d7 100644
--- a/devTools/reconstructPostsGdocsComponents/reconstructPostsGdocsComponents.ts
+++ b/devTools/reconstructPostsGdocsComponents/reconstructPostsGdocsComponents.ts
@@ -1,13 +1,9 @@
 import parseArgs from "minimist"
 import { knexRaw, knexReadWriteTransaction } from "../../db/db.js"
-import {
-    DbInsertPostGdocComponent,
-    DbRawPostGdoc,
-    parsePostGdocContent,
-} from "@ourworldindata/types"
+import { DbRawPostGdoc, parsePostGdocContent } from "@ourworldindata/types"
 import { getGdocComponentsWithoutChildren } from "../../db/model/Gdoc/extractGdocComponentInfo.js"
 
-async function main(parsedArgs: parseArgs.ParsedArgs) {
+async function main() {
     await knexReadWriteTransaction(async (trx) => {
         await knexRaw(trx, `DELETE FROM posts_gdocs_components`)
         console.log("Deleted all rows from posts_gdocs_components")
@@ -47,5 +43,5 @@ if (parsedArgs["h"]) {
         `reconstructPostsGdocsComponents - Reconstruct posts_gdocs_components table from posts_gdocs table`
     )
 } else {
-    main(parsedArgs)
+    void main()
 }
diff --git a/devTools/regionsUpdater/update.ts b/devTools/regionsUpdater/update.ts
index e99077b4e4..634d12c8b1 100644
--- a/devTools/regionsUpdater/update.ts
+++ b/devTools/regionsUpdater/update.ts
@@ -70,16 +70,16 @@ function csvToJson(val: string, col: string) {
     }
 }
 
-function prettifiedTopology(geoJson: FeatureCollection): Promise<string> {
+async function prettifiedTopology(geoJson: FeatureCollection): Promise<string> {
     // make sure the MapTopology.ts file will be diff-able even after running prettier on the repo
-    let topoData = topology({ world: geoJson }),
+    const topoData = topology({ world: geoJson }),
         arcs = _.remove(topoData.arcs),
         arcJson = arcs
             .map((vector) => `${JSON.stringify(vector)},`)
             .join("\n      ")
 
     // sort the countries by name and make sure their properties are consistently ordered
-    let geomKey = "objects.world.geometries"
+    const geomKey = "objects.world.geometries"
     _.set(topoData, geomKey, _.sortBy(_.get(topoData, geomKey), "id"))
     _.set(
         topoData,
@@ -89,29 +89,29 @@ function prettifiedTopology(geoJson: FeatureCollection): Promise<string> {
         )
     )
 
-    return prettier
-        .format(`export const MapTopology = ${JSON.stringify(topoData)}`, {
+    const formatted = await prettier.format(
+        `export const MapTopology = ${JSON.stringify(topoData)}`,
+        {
             parser: "typescript",
             tabWidth: 4,
             semi: false,
-        })
-        .then((formatted) =>
-            formatted.replace(
-                /^(    arcs:\s*\[)\]/m,
-                `\n    // prettier-ignore\n$1\n      ${arcJson}\n    ]`
-            )
-        )
+        }
+    )
+    return formatted.replace(
+        /^( {4}arcs:\s*\[)\]/m,
+        `\n    // prettier-ignore\n$1\n      ${arcJson}\n    ]`
+    )
 }
 
 function transformGeography(orig: FeatureCollection): FeatureCollection {
-    let type = "Feature",
-        properties = {},
-        greenlandCoords // to be pulled out of Denmark
+    const type = "Feature"
+    const properties = {}
+    let greenlandCoords // to be pulled out of Denmark
 
     let features = orig.features.map(({ id, geometry }) => {
-        if (id == "DNK") {
+        if (id === "DNK") {
             // remove Greenland from Denmark and save for later
-            let { coordinates } = geometry as MultiPolygon
+            const { coordinates } = geometry as MultiPolygon
             greenlandCoords = coordinates.pop()
         } else if (id === "-99") {
             // use owid code for Kosovo
@@ -180,10 +180,10 @@ function transformGeography(orig: FeatureCollection): FeatureCollection {
 }
 
 async function didChange(path: string, newData: string): Promise<boolean> {
-    let oldData = await readFile(path).catch((e) => ""),
-        newHash = createHash("md5").update(newData).digest("hex"),
-        oldHash = createHash("md5").update(oldData).digest("hex"),
-        message = newHash === oldHash ? "No changes" : "Contents changed"
+    const oldData = await readFile(path).catch(() => "")
+    const newHash = createHash("md5").update(newData).digest("hex")
+    const oldHash = createHash("md5").update(oldData).digest("hex")
+    const message = newHash === oldHash ? "No changes" : "Contents changed"
     console.log(`${message}: ${path}`)
 
     return newHash !== oldHash
@@ -192,28 +192,29 @@ async function didChange(path: string, newData: string): Promise<boolean> {
 async function main() {
     // fetch geojson outlines
     console.log(`Fetching ${GEO_JSON_URL}`)
-    let wsGeoJson = await (await fetch(GEO_JSON_URL)).json(),
-        owidGeoJson = transformGeography(wsGeoJson),
-        mappableCodes = _.map(owidGeoJson.features, "id")
+    const wsGeoJson = await (await fetch(GEO_JSON_URL)).json()
+    const owidGeoJson = transformGeography(wsGeoJson)
 
     // fetch csv and js-ify non-string fields
     console.log(`Fetching ${ETL_REGIONS_URL}`)
-    let response = await fetch(ETL_REGIONS_URL),
-        { data, errors, meta } = parse(await response.text(), {
-            header: true,
-            transform: csvToJson,
-        })
+    const response = await fetch(ETL_REGIONS_URL)
+    let { data } = parse(await response.text(), {
+        header: true,
+        transform: csvToJson,
+    })
 
     // strip out empty rows and make sure entities are sorted
     data = _.sortBy(data, "code").filter((c: any) => !!c.code)
 
-    let entities = _.map(data as Entity[], (entity) => {
+    const entities = _.map(data as Entity[], (entity) => {
         // drop redundant attrs
         if (entity.short_name === entity.name) delete entity.short_name
         if (entity.region_type !== "country") delete entity.is_mappable
 
         // update geojson with canonical names & validate mappability flag
-        let outline = owidGeoJson.features.find(({ id }) => id == entity.code)
+        const outline = owidGeoJson.features.find(
+            ({ id }) => id === entity.code
+        )
         if (outline) {
             outline.id = entity.name
         } else if (entity.is_mappable) {
@@ -234,7 +235,7 @@ async function main() {
         entity.variant_names = _.get(SEARCH_ALIASES, entity.code)
 
         return _.chain(entity)
-            .mapKeys((val, key) =>
+            .mapKeys((_val, key) =>
                 // rename keys to camelCase
                 _.camelCase(key)
             )
@@ -260,16 +261,16 @@ async function main() {
     })
 
     // generate new MapTopology.ts file and compare to old version
-    let newTopology = await prettifiedTopology(owidGeoJson)
+    const newTopology = await prettifiedTopology(owidGeoJson)
     if (await didChange(GRAPHER_TOPOLOGY_PATH, newTopology)) {
         await writeFile(GRAPHER_TOPOLOGY_PATH, newTopology)
     }
 
     // generate new regions.json file and compare to old version
-    let regionsJson = await prettifiedJson(entities)
+    const regionsJson = await prettifiedJson(entities)
     if (await didChange(GRAPHER_REGIONS_PATH, regionsJson)) {
         await writeFile(GRAPHER_REGIONS_PATH, regionsJson)
-        let diff = execFileSync("git", [
+        const diff = execFileSync("git", [
             "diff",
             "--color=always",
             GRAPHER_REGIONS_PATH,
@@ -281,4 +282,4 @@ async function main() {
     }
 }
 
-main()
+void main()
diff --git a/devTools/schema/generate-default-object-from-schema.ts b/devTools/schema/generate-default-object-from-schema.ts
index 9ef00ad59d..ec27edc54f 100644
--- a/devTools/schema/generate-default-object-from-schema.ts
+++ b/devTools/schema/generate-default-object-from-schema.ts
@@ -20,13 +20,17 @@ function generateDefaultObjectFromSchema(
 ) {
     const defaultObject: Record<string, any> = {}
     if (schema.type === "object") {
-        for (let key in schema.properties) {
+        for (const key in schema.properties) {
             // substitute $ref with the actual definition
             const ref = schema.properties[key].$ref
+            // FIXME: Not sure whether != is necessary here.
+            // eslint-disable-next-line eqeqeq
             if (ref != undefined) {
                 const regex = /#\/\$defs\/([a-zA-Z]+)/
                 const [_, defKey] = ref.match(regex) ?? []
                 const def = defs[defKey]
+                // FIXME: Not sure whether == is necessary here.
+                // eslint-disable-next-line eqeqeq
                 if (def == undefined)
                     throw new Error(`Definition "${ref}" not found`)
                 schema.properties[key] = def
@@ -38,6 +42,8 @@ function generateDefaultObjectFromSchema(
                     defs
                 )
                 if (Object.keys(defaults).length) defaultObject[key] = defaults
+                // FIXME: Not sure whether != is necessary here.
+                // eslint-disable-next-line eqeqeq
             } else if (schema.properties[key].default != undefined) {
                 defaultObject[key] = schema.properties[key].default
             }
@@ -48,12 +54,14 @@ function generateDefaultObjectFromSchema(
 
 async function main(parsedArgs: parseArgs.ParsedArgs) {
     const schemaFilename = parsedArgs._[0]
+    // FIXME: Not sure whether == is necessary here.
+    // eslint-disable-next-line eqeqeq
     if (schemaFilename == undefined) {
         help()
         process.exit(0)
     }
 
-    let schema = fs.readJSONSync(schemaFilename)
+    const schema = fs.readJSONSync(schemaFilename)
     const defs = schema.$defs || {}
     const defaultConfig = generateDefaultObjectFromSchema(schema, defs)
     const defaultConfigJSON = JSON.stringify(defaultConfig, undefined, 2)
@@ -96,5 +104,5 @@ if (parsedArgs["h"] || parsedArgs["help"]) {
     help()
     process.exit(0)
 } else {
-    main(parsedArgs)
+    void main(parsedArgs)
 }
diff --git a/devTools/schemaProcessor/schemaProcessor.ts b/devTools/schemaProcessor/schemaProcessor.ts
index b1a2000ef7..6941abc5fb 100644
--- a/devTools/schemaProcessor/schemaProcessor.ts
+++ b/devTools/schemaProcessor/schemaProcessor.ts
@@ -5,7 +5,7 @@ import {
 } from "../../adminShared/schemaProcessing.js"
 import parseArgs from "minimist"
 
-async function main(parsedArgs: parseArgs.ParsedArgs) {
+async function main() {
     const schema = await fs.readJson("schema.json")
 
     const fields: FieldDescription[] =
@@ -17,5 +17,5 @@ const parsedArgs = parseArgs(process.argv.slice(2))
 if (parsedArgs["h"]) {
     console.log(`schemaProcessor.js - extract schema info`)
 } else {
-    main(parsedArgs)
+    void main()
 }
diff --git a/devTools/svgTester/create-compare-view.ts b/devTools/svgTester/create-compare-view.ts
index 3ae0b451f2..b8885d636e 100644
--- a/devTools/svgTester/create-compare-view.ts
+++ b/devTools/svgTester/create-compare-view.ts
@@ -78,7 +78,7 @@ Options:
     --compare-url   Base URL to compare against prod [default: ${LOCAL_URL}]
     `)
 } else {
-    main(parsedArgs)
+    void main(parsedArgs)
 }
 
 function createComparisonView(
diff --git a/devTools/svgTester/dump-chart-ids.ts b/devTools/svgTester/dump-chart-ids.ts
index 16055805e5..77796bab74 100644
--- a/devTools/svgTester/dump-chart-ids.ts
+++ b/devTools/svgTester/dump-chart-ids.ts
@@ -50,5 +50,5 @@ Options:
     `)
     process.exit(0)
 } else {
-    main(parsedArgs)
+    void main(parsedArgs)
 }
diff --git a/devTools/svgTester/dump-data.ts b/devTools/svgTester/dump-data.ts
index 49a26ae98c..435d203f54 100644
--- a/devTools/svgTester/dump-data.ts
+++ b/devTools/svgTester/dump-data.ts
@@ -52,5 +52,5 @@ Options:
     `)
     process.exit(0)
 } else {
-    main(parsedArgs)
+    void main(parsedArgs)
 }
diff --git a/devTools/svgTester/export-graphs.ts b/devTools/svgTester/export-graphs.ts
index 0fea693e01..7744a42069 100644
--- a/devTools/svgTester/export-graphs.ts
+++ b/devTools/svgTester/export-graphs.ts
@@ -179,5 +179,5 @@ Other options:
     `)
     process.exit(0)
 } else {
-    main(parsedArgs)
+    void main(parsedArgs)
 }
diff --git a/devTools/svgTester/utils.ts b/devTools/svgTester/utils.ts
index 746e94a7bb..12d20a1c1d 100644
--- a/devTools/svgTester/utils.ts
+++ b/devTools/svgTester/utils.ts
@@ -3,6 +3,7 @@ import {
     GrapherChartType,
     GrapherTabName,
     ALL_GRAPHER_CHART_TYPES,
+    GrapherInterface,
 } from "@ourworldindata/types"
 import {
     MultipleOwidVariableDataDimensionsMap,
@@ -20,7 +21,6 @@ import {
 } from "../../baker/GrapherImageBaker.js"
 import { getVariableData } from "../../db/model/Variable.js"
 
-import { GrapherInterface } from "@ourworldindata/types"
 import _ from "lodash"
 import util from "util"
 import { getHeapStatistics } from "v8"
@@ -121,7 +121,7 @@ export function logIfVerbose(verbose: boolean, message: string, param?: any) {
 }
 
 function findFirstDiffIndex(a: string, b: string): number {
-    var i = 0
+    let i = 0
     while (i < a.length && i < b.length && a[i] === b[i]) i++
     if (a.length === b.length && a.length === i) {
         console.warn("No difference found even though hash was different!")
@@ -165,11 +165,14 @@ export async function verifySvg(
     return resultDifference({
         chartId: newSvgRecord.chartId,
         startIndex: firstDiffIndex,
-        referenceSvgFragment: preparedReferenceSvg.substr(
+        referenceSvgFragment: preparedReferenceSvg.substring(
             firstDiffIndex - 20,
-            40
+            firstDiffIndex + 20
+        ),
+        newSvgFragment: preparedNewSvg.substring(
+            firstDiffIndex - 20,
+            firstDiffIndex + 20
         ),
-        newSvgFragment: preparedNewSvg.substr(firstDiffIndex - 20, 40),
     })
 }
 
@@ -620,7 +623,7 @@ export async function renderAndVerifySvg({
         // verifySvg returns a Result type - if it is success we don't care any further
         // but if there was an error then we write the svg and a message to stderr
         switch (validationResult.kind) {
-            case "difference":
+            case "difference": {
                 if (verbose)
                     logDifferencesToConsole(svgRecord, validationResult)
                 const pathFragments = path.parse(svgRecord.svgFilename)
@@ -630,6 +633,8 @@ export async function renderAndVerifySvg({
                 )
                 const cleanedSvg = prepareSvgForComparision(svg)
                 await fs.writeFile(outputPath, cleanedSvg)
+                break
+            }
         }
         return Promise.resolve(validationResult)
     } catch (err) {
diff --git a/devTools/svgTester/verify-graphs.ts b/devTools/svgTester/verify-graphs.ts
index ff11b28bb1..ad350314f7 100644
--- a/devTools/svgTester/verify-graphs.ts
+++ b/devTools/svgTester/verify-graphs.ts
@@ -160,5 +160,5 @@ Other options:
     `)
     process.exit(0)
 } else {
-    main(parsedArgs)
+    void main(parsedArgs)
 }
diff --git a/devTools/syncGraphersToR2/syncGraphersToR2.ts b/devTools/syncGraphersToR2/syncGraphersToR2.ts
index 8a17747f5a..3ffc4508a4 100644
--- a/devTools/syncGraphersToR2/syncGraphersToR2.ts
+++ b/devTools/syncGraphersToR2/syncGraphersToR2.ts
@@ -309,5 +309,5 @@ if (parsedArgs["h"]) {
 --dry-run: Don't make any actual changes to R2`
     )
 } else {
-    main(parsedArgs, parsedArgs["dry-run"])
+    void main(parsedArgs, parsedArgs["dry-run"])
 }
diff --git a/devTools/tsconfigs/tsconfig.base.json b/devTools/tsconfigs/tsconfig.base.json
index c51deb079c..9b13020b1f 100644
--- a/devTools/tsconfigs/tsconfig.base.json
+++ b/devTools/tsconfigs/tsconfig.base.json
@@ -24,7 +24,7 @@
         "allowJs": false,
         "sourceMap": true,
         "moduleResolution": "node",
-        "jsx": "react",
+        "jsx": "react-jsx",
 
         "experimentalDecorators": true,
         "useDefineForClassFields": false,
diff --git a/devTools/wayback/wayback.ts b/devTools/wayback/wayback.ts
index 766e002783..ff7607cd50 100755
--- a/devTools/wayback/wayback.ts
+++ b/devTools/wayback/wayback.ts
@@ -20,7 +20,7 @@ const needsRewrite = (mimeType: string) =>
     mimeType === "image/svg+xml"
 
 const fixPaths = (fileContent: string) =>
-    fileContent.replace(/https?\:\/\/ourworldindata\.org\//g, "/")
+    fileContent.replace(/https?:\/\/ourworldindata\.org\//g, "/")
 
 app.get("*", async (req, res) => {
     const filepath = path.resolve(staticFolder + req.path)
@@ -33,7 +33,7 @@ app.get("*", async (req, res) => {
 
     const mimeType = mime.lookup(filepath) || "text/plain"
 
-    if (needsRewrite(mimeType)) {
+    if (typeof mimeType === "string" && needsRewrite(mimeType)) {
         const fileContent = await fs.readFile(filepath, "utf8")
         const rewritten = fixPaths(fileContent)
         res.setHeader("Content-Type", mimeType)
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000000..c7ea780d1e
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,187 @@
+// @ts-check
+
+import eslint from "@eslint/js"
+// TODO: Remove this when the lib adds type declarations.
+// @ts-ignore
+import importPlugin from "eslint-plugin-import"
+import prettier from "eslint-config-prettier"
+import react from "eslint-plugin-react"
+// TODO: Remove this when the lib adds type declarations.
+// https://github.com/facebook/react/issues/30119
+// @ts-ignore
+import reactHooks from "eslint-plugin-react-hooks"
+import tseslint from "typescript-eslint"
+
+export default tseslint.config(
+    eslint.configs.recommended,
+    tseslint.configs.recommended,
+    importPlugin.flatConfigs.recommended,
+    importPlugin.flatConfigs.typescript,
+    // @ts-ignore
+    react.configs.flat.recommended,
+    // @ts-ignore
+    react.configs.flat["jsx-runtime"],
+    prettier,
+    {
+        plugins: {
+            // They don't have a compatible flat config at the moment. Update to
+            // a flat one when they do.
+            "react-hooks": reactHooks,
+        },
+        languageOptions: {
+            parserOptions: {
+                project: "./tsconfig.eslint.json",
+            },
+        },
+        settings: {
+            "import/resolver": {
+                typescript: true,
+                node: true,
+            },
+            react: {
+                version: "detect",
+            },
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            "@typescript-eslint/consistent-type-exports": [
+                "warn",
+                {
+                    fixMixedExportsWithInlineTypeSpecifier: true,
+                },
+            ],
+
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off",
+            "@typescript-eslint/no-empty-function": "warn",
+            "@typescript-eslint/no-empty-interface": "warn",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-for-in-array": "warn",
+            "@typescript-eslint/no-non-null-assertion": "off",
+
+            "@typescript-eslint/no-unused-vars": [
+                "warn",
+                {
+                    varsIgnorePattern: "^_",
+                    argsIgnorePattern: "^_",
+                },
+            ],
+
+            "@typescript-eslint/prefer-for-of": "warn",
+            "@typescript-eslint/restrict-plus-operands": "warn",
+            eqeqeq: "warn",
+            "import/named": "off",
+            "import/namespace": "off",
+            "import/default": "off",
+            "import/no-named-as-default-member": "off",
+            "import/no-unresolved": "off",
+
+            "no-console": [
+                "warn",
+                {
+                    allow: ["warn", "error"],
+                },
+            ],
+
+            "prefer-const": [
+                "warn",
+                {
+                    destructuring: "all",
+                },
+            ],
+
+            "react/display-name": "warn",
+            "react/jsx-key": "warn",
+
+            "react/jsx-no-target-blank": [
+                "warn",
+                {
+                    allowReferrer: true,
+                },
+            ],
+
+            "react/no-render-return-value": "warn",
+
+            "react/no-unescaped-entities": [
+                "warn",
+                {
+                    forbid: [">", "}"],
+                },
+            ],
+
+            "react/prop-types": "warn",
+            "@typescript-eslint/no-floating-promises": "error",
+            "no-constant-binary-expression": "error",
+        },
+    },
+    {
+        files: [
+            "adminSiteClient/**/*",
+            "adminSiteServer/**/*",
+            "baker/**/*",
+            "db/**/*",
+            "devTools/**/*",
+            "functions/**/*",
+            "explorerAdminClient/**/*",
+            "explorerAdminServer/**/*",
+            "settings/**/*",
+        ],
+        rules: {
+            "no-console": "off",
+        },
+    },
+    {
+        files: [
+            "db/**/*",
+            "packages/@ourworldindata/core-table/**/*",
+            "packages/@ourworldindata/grapher/src/axis/**/*",
+            "packages/@ourworldindata/grapher/src/barCharts/**/*",
+            "packages/@ourworldindata/grapher/src/bodyDiv/**/*",
+            "packages/@ourworldindata/grapher/src/captionedChart/**/*",
+            "packages/@ourworldindata/grapher/src/chart/**/*",
+            "packages/@ourworldindata/grapher/src/color/**/*",
+            "packages/@ourworldindata/grapher/src/controls/**/*",
+            "packages/@ourworldindata/grapher/src/core/**/*",
+            "packages/@ourworldindata/grapher/src/dataTable/**/*",
+            "packages/@ourworldindata/grapher/src/facetChart/**/*",
+            "packages/@ourworldindata/grapher/src/footer/**/*",
+            "packages/@ourworldindata/grapher/src/header/**/*",
+            "packages/@ourworldindata/grapher/src/lineCharts/**/*",
+            "packages/@ourworldindata/grapher/src/loadingIndicator/**/*",
+            "packages/@ourworldindata/grapher/src/mapCharts/**/*",
+            "packages/@ourworldindata/grapher/src/noDataModal/**/*",
+            "packages/@ourworldindata/grapher/src/scatterCharts/**/*",
+            "packages/@ourworldindata/grapher/src/selection/**/*",
+            "packages/@ourworldindata/grapher/src/stackedCharts/**/*",
+            "packages/@ourworldindata/grapher/src/timeline/**/*",
+            "packages/@ourworldindata/grapher/src/tooltip/**/*",
+            "packages/@ourworldindata/grapher/src/verticalColorLegend/**/*",
+            "packages/@ourworldindata/utils/**/*",
+            "packages/@ourworldindata/utils/src/persistable/**/*",
+            "settings/**/*",
+        ],
+        rules: {
+            "@typescript-eslint/explicit-function-return-type": "warn",
+            "@typescript-eslint/explicit-module-boundary-types": "warn",
+        },
+    },
+    {
+        ignores: [
+            "**/.*",
+            "**/*.cjs",
+            "**/*.js",
+            "**/dist/",
+            "**/jest.config.js",
+            "**/knexfile.ts",
+            "bakedSite/**/*",
+            "coverage/**/*",
+            "devtools/**/*",
+            "eslint.config.mjs",
+            "itsJustJavascript/**/*",
+            "localBake/**/*",
+            "packages/@ourworldindata/*/dist/",
+            "packages/@ourworldindata/grapher/tsup.config.bundled_*.mjs",
+            "vite.*.mjs",
+        ],
+    }
+)
diff --git a/explorerAdminClient/.eslintrc.yaml b/explorerAdminClient/.eslintrc.yaml
deleted file mode 100644
index adf76b5060..0000000000
--- a/explorerAdminClient/.eslintrc.yaml
+++ /dev/null
@@ -1,2 +0,0 @@
-rules:
-    no-console: "off"
diff --git a/explorerAdminClient/ExplorerCreatePage.jsdom.test.tsx b/explorerAdminClient/ExplorerCreatePage.jsdom.test.tsx
index 21fdb3cbb5..9810020ec8 100755
--- a/explorerAdminClient/ExplorerCreatePage.jsdom.test.tsx
+++ b/explorerAdminClient/ExplorerCreatePage.jsdom.test.tsx
@@ -1,7 +1,9 @@
-#! /usr/bin/env jestimport { ExplorerCreatePage } from "./ExplorerCreatePage.js"
+#! /usr/bin/env jest
 
 import Enzyme from "enzyme"
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
+import { ExplorerCreatePage } from "./ExplorerCreatePage.js"
+
 Enzyme.configure({ adapter: new Adapter() })
 
 describe(ExplorerCreatePage, () => {
diff --git a/explorerAdminClient/ExplorersListPage.tsx b/explorerAdminClient/ExplorersListPage.tsx
index d4e1b079c6..341a480047 100644
--- a/explorerAdminClient/ExplorersListPage.tsx
+++ b/explorerAdminClient/ExplorersListPage.tsx
@@ -225,7 +225,7 @@ export class ExplorersIndexPage extends Component<{
                 const html = text.replace(
                     new RegExp(
                         this.highlightSearch.replace(
-                            /[-\/\\^$*+?.()|[\]{}]/g,
+                            /[-/\\^$*+?.()|[\]{}]/g,
                             "\\$&"
                         ),
                         "i"
diff --git a/explorerAdminServer/.eslintrc.yaml b/explorerAdminServer/.eslintrc.yaml
deleted file mode 100644
index adf76b5060..0000000000
--- a/explorerAdminServer/.eslintrc.yaml
+++ /dev/null
@@ -1,2 +0,0 @@
-rules:
-    no-console: "off"
diff --git a/functions/.eslintrc.yml b/functions/.eslintrc.yml
deleted file mode 100644
index adf76b5060..0000000000
--- a/functions/.eslintrc.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-rules:
-    no-console: "off"
diff --git a/functions/donation/thank-you.ts b/functions/donation/thank-you.ts
index fd795a7a50..f6538ace6a 100644
--- a/functions/donation/thank-you.ts
+++ b/functions/donation/thank-you.ts
@@ -157,7 +157,7 @@ export const onRequestPost: PagesFunction = async ({
         )
 
         switch (event.type) {
-            case "checkout.session.completed":
+            case "checkout.session.completed": {
                 const session = event.data.object
                 await sendThankYouEmail(
                     {
@@ -183,7 +183,11 @@ export const onRequestPost: PagesFunction = async ({
                     env
                 )
                 break
-            default: // do not process other event types
+            }
+            default: {
+                // do not process other event types
+                break
+            }
         }
 
         return new Response(null, {
diff --git a/gitCms/GitCmsServer.ts b/gitCms/GitCmsServer.ts
index c45251cd6a..23b5253cd9 100644
--- a/gitCms/GitCmsServer.ts
+++ b/gitCms/GitCmsServer.ts
@@ -152,7 +152,7 @@ export class GitCmsServer {
         globStr: string,
         folder: string
     ): Promise<GitCmsGlobResponse> {
-        const query = globStr.replace(/[^a-zA-Z\*]/, "")
+        const query = globStr.replace(/[^a-zA-Z*]/, "")
         const cwd = this.baseDir + folder
         const results = sync(query, {
             cwd,
@@ -173,7 +173,7 @@ export class GitCmsServer {
         authorName = GIT_DEFAULT_USERNAME,
         authorEmail = GIT_DEFAULT_EMAIL
     ): Promise<GitCmsResponse> {
-        const filepath = rawFilepath.replace(/\~/g, "/")
+        const filepath = rawFilepath.replace(/~/g, "/")
         try {
             ensureNoParentLinksInFilePath(filepath)
 
@@ -258,7 +258,7 @@ export class GitCmsServer {
         } = {}
 
         routes[GIT_CMS_PULL_ROUTE] = async (
-            req: Request,
+            _req: Request,
             res: ResponseWithUserInfo
         ) => res.send(await this.pullCommand()) // Pull latest from github
 
diff --git a/package.json b/package.json
index 02d066479a..fe2e6598e6 100644
--- a/package.json
+++ b/package.json
@@ -176,6 +176,7 @@
         "yaml": "^2.4.2"
     },
     "devDependencies": {
+        "@eslint/js": "^9.17.0",
         "@rmp135/sql-ts": "^2.1.0",
         "@testing-library/jest-dom": "^6.1.3",
         "@testing-library/react": "^12.1.5",
@@ -219,18 +220,16 @@
         "@types/url-parse": "^1.4.8",
         "@types/webfontloader": "^1.6.34",
         "@types/workerpool": "^6.1.0",
-        "@typescript-eslint/eslint-plugin": "^8.10.0",
-        "@typescript-eslint/parser": "^8.10.0",
         "@vitejs/plugin-react": "^4.3.1",
         "@yarnpkg/types": "^4.0.0",
         "bundlewatch": "^0.4.0",
         "cypress": "9.3.1",
-        "eslint": "^8.57.1",
+        "eslint": "^9.17.0",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-import-resolver-typescript": "^3.6.3",
-        "eslint-plugin-import": "^2.30.0",
-        "eslint-plugin-react": "^7.36.1",
-        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-import-resolver-typescript": "^3.7.0",
+        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-react": "^7.37.2",
+        "eslint-plugin-react-hooks": "^5.1.0",
         "flag-icons": "^7.2.3",
         "http-server": "^14.1.1",
         "husky": "^9.0.11",
@@ -243,6 +242,7 @@
         "tmex": "^1.0.8",
         "topojson-server": "^3.0.1",
         "tsx": "^4.16.2",
+        "typescript-eslint": "^8.18.1",
         "vite": "^5.4.2",
         "vite-plugin-checker": "^0.7.2",
         "wrangler": "^3.81.0"
diff --git a/packages/@ourworldindata/components/package.json b/packages/@ourworldindata/components/package.json
index 7c716f9212..862831abde 100644
--- a/packages/@ourworldindata/components/package.json
+++ b/packages/@ourworldindata/components/package.json
@@ -31,8 +31,8 @@
         "@types/react": "^17.0.69",
         "@types/react-dom": "^17.0.22",
         "esbuild-sass-plugin": "^3.3.1",
-        "eslint": "^8.57.1",
-        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint": "^9.17.0",
+        "eslint-plugin-react-hooks": "^5.1.0",
         "typescript": "~5.7.2"
     },
     "license": "MIT"
diff --git a/packages/@ourworldindata/components/src/markdown/remarkPlainLinks.ts b/packages/@ourworldindata/components/src/markdown/remarkPlainLinks.ts
index b0b112b58c..2c2564d57e 100644
--- a/packages/@ourworldindata/components/src/markdown/remarkPlainLinks.ts
+++ b/packages/@ourworldindata/components/src/markdown/remarkPlainLinks.ts
@@ -14,7 +14,7 @@ import findAndReplace from "mdast-util-find-and-replace"
 //       period should not be part of the URL)
 //       Finally, the very last part is a lone forward slash which would not be matched by the previous subgroup.
 export const urlRegex =
-    /https?:\/\/([\w-]+\.)+[\w-]+((\/[\p{L}\p{N}_\-.\+/?:%&=~#]*[\p{L}\p{N}_\-\+/%&=~#])|\/)?/gu
+    /https?:\/\/([\w-]+\.)+[\w-]+((\/[\p{L}\p{N}_\-.+/?:%&=~#]*[\p{L}\p{N}_\-+/%&=~#])|\/)?/gu
 
 export function remarkPlainLinks() {
     const turnIntoLink = (value: any, _match: string) => {
diff --git a/packages/@ourworldindata/core-table/.eslintrc.yaml b/packages/@ourworldindata/core-table/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/core-table/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/core-table/package.json b/packages/@ourworldindata/core-table/package.json
index 2332ce3d22..88860fcff8 100644
--- a/packages/@ourworldindata/core-table/package.json
+++ b/packages/@ourworldindata/core-table/package.json
@@ -23,7 +23,7 @@
   "devDependencies": {
     "@types/d3": "^6",
     "@types/papaparse": "^5.3.15",
-    "eslint": "^8.57.1",
+    "eslint": "^9.17.0",
     "typescript": "~5.7.2"
   },
   "license": "MIT"
diff --git a/packages/@ourworldindata/core-table/src/CoreTableColumns.ts b/packages/@ourworldindata/core-table/src/CoreTableColumns.ts
index 8c08d7f248..72bfe436e0 100644
--- a/packages/@ourworldindata/core-table/src/CoreTableColumns.ts
+++ b/packages/@ourworldindata/core-table/src/CoreTableColumns.ts
@@ -987,7 +987,7 @@ export const ColumnTypeMap = {
 // Keep this in. This is used as a compile-time check that ColumnTypeMap covers all
 // column names defined in ColumnTypeNames, since that is quite difficult to ensure
 // otherwise without losing inferred type information.
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 const _ColumnTypeMap: {
     [key in ColumnTypeNames]: unknown
 } = ColumnTypeMap
diff --git a/packages/@ourworldindata/explorer/package.json b/packages/@ourworldindata/explorer/package.json
index cecede0f3b..524449cd8a 100644
--- a/packages/@ourworldindata/explorer/package.json
+++ b/packages/@ourworldindata/explorer/package.json
@@ -69,8 +69,8 @@
     "enzyme": "^3.11.0",
     "esbuild": "^0.21.5",
     "esbuild-sass-plugin": "^3.3.1",
-    "eslint": "^8.57.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "tsup": "^8.1.0",
diff --git a/packages/@ourworldindata/explorer/src/ExplorerControls.jsdom.test.tsx b/packages/@ourworldindata/explorer/src/ExplorerControls.jsdom.test.tsx
index 19bfa65ae2..31268bd61e 100755
--- a/packages/@ourworldindata/explorer/src/ExplorerControls.jsdom.test.tsx
+++ b/packages/@ourworldindata/explorer/src/ExplorerControls.jsdom.test.tsx
@@ -1,4 +1,5 @@
-#! /usr/bin/env jestimport { ExplorerControlType } from "./ExplorerConstants.js"
+#! /usr/bin/env jest
+import { ExplorerControlType } from "./ExplorerConstants.js"
 import { ExplorerControlPanel } from "./ExplorerControls.js"
 
 import Enzyme from "enzyme"
diff --git a/packages/@ourworldindata/explorer/src/ExplorerProgram.ts b/packages/@ourworldindata/explorer/src/ExplorerProgram.ts
index c00007cc62..fecb5b2e4b 100644
--- a/packages/@ourworldindata/explorer/src/ExplorerProgram.ts
+++ b/packages/@ourworldindata/explorer/src/ExplorerProgram.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-sparse-arrays */
 import {
     CoreMatrix,
     ColumnTypeNames,
diff --git a/packages/@ourworldindata/explorer/src/gridLang/GridLangConstants.ts b/packages/@ourworldindata/explorer/src/gridLang/GridLangConstants.ts
index 570a29faa0..2dbc3d3909 100644
--- a/packages/@ourworldindata/explorer/src/gridLang/GridLangConstants.ts
+++ b/packages/@ourworldindata/explorer/src/gridLang/GridLangConstants.ts
@@ -149,7 +149,7 @@ export const SubTableValueCellDef: CellDef = {
 }
 
 const MatchUrlsOnlyRegex =
-    /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/
+    /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/
 
 export const UrlCellDef: CellDef = {
     keyword: "",
@@ -175,7 +175,7 @@ export const CommentCellDef: CellDef = {
     keyword: "",
     cssClass: "CommentType",
     description: "Just a comment.",
-    regex: /^(\#\#|💬)/,
+    regex: /^(##|💬)/,
 }
 
 export const WorkInProgressCellDef: CellDef = {
@@ -207,7 +207,7 @@ export const EtlPathCellDef: CellDef = {
     keyword: "",
     cssClass: "IndicatorIdOrEtlPath",
     description: "Path to an ETL indicator.",
-    regex: /^$|^[\w\d_/\-]+#[\w\d_/\-]+$/,
+    regex: /^$|^[\w\d_/-]+#[\w\d_/-]+$/,
     requirementsDescription: `Can only contain the characters a-zA-Z0-9-_/#`,
 }
 
@@ -215,7 +215,7 @@ export const IndicatorIdOrEtlPathCellDef: CellDef = {
     keyword: "",
     cssClass: "IndicatorIdOrEtlPath",
     description: "A single indicator ID or a path to an ETL indicator.",
-    regex: /^\d+|[\w\d_/\-]+#[\w\d_/\-]+$/,
+    regex: /^\d+|[\w\d_/-]+#[\w\d_/-]+$/,
     requirementsDescription: `Can only contain the characters a-zA-Z0-9-_/#`,
 }
 
@@ -223,7 +223,7 @@ export const IndicatorIdsOrEtlPathsCellDef: CellDef = {
     keyword: "",
     cssClass: "IndicatorIdOrEtlPath",
     description: "One or more indicator IDs or paths to an ETL indicator.",
-    regex: /^((\d+|[\w\d_/\-]*#[\w\d_/\-]+)( +|$))+$/,
+    regex: /^((\d+|[\w\d_/-]*#[\w\d_/-]+)( +|$))+$/,
     requirementsDescription: `Can only contain the characters a-zA-Z0-9-_/# `,
 }
 
diff --git a/packages/@ourworldindata/explorer/src/urlMigrations/ExplorerUrlMigrationUtils.ts b/packages/@ourworldindata/explorer/src/urlMigrations/ExplorerUrlMigrationUtils.ts
index 1e8eac81ec..9c2d272eed 100644
--- a/packages/@ourworldindata/explorer/src/urlMigrations/ExplorerUrlMigrationUtils.ts
+++ b/packages/@ourworldindata/explorer/src/urlMigrations/ExplorerUrlMigrationUtils.ts
@@ -37,7 +37,7 @@ export const transformQueryParams = (
 export const getExplorerSlugFromUrl = (url: Url): string | undefined => {
     if (!url.pathname) return undefined
     const match = url.pathname.match(
-        new RegExp(`^\/+${EXPLORERS_ROUTE_FOLDER}\/+([^\/]+)`)
+        new RegExp(`^/+${EXPLORERS_ROUTE_FOLDER}/+([^/]+)`)
     )
     if (match && match[1]) return match[1]
     return undefined
diff --git a/packages/@ourworldindata/grapher/package.json b/packages/@ourworldindata/grapher/package.json
index 0590529f80..93122fac45 100644
--- a/packages/@ourworldindata/grapher/package.json
+++ b/packages/@ourworldindata/grapher/package.json
@@ -68,8 +68,8 @@
     "enzyme": "^3.11.0",
     "esbuild": "^0.21.5",
     "esbuild-sass-plugin": "^3.3.1",
-    "eslint": "^8.57.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "tsup": "^8.1.0",
diff --git a/packages/@ourworldindata/grapher/src/axis/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/axis/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/axis/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/axis/AxisViews.jsdom.test.tsx b/packages/@ourworldindata/grapher/src/axis/AxisViews.jsdom.test.tsx
index bb6ac66a29..ba071966af 100755
--- a/packages/@ourworldindata/grapher/src/axis/AxisViews.jsdom.test.tsx
+++ b/packages/@ourworldindata/grapher/src/axis/AxisViews.jsdom.test.tsx
@@ -1,4 +1,6 @@
-#! /usr/bin/env jestimport { AxisConfig } from "./AxisConfig"
+#! /usr/bin/env jest
+
+import { AxisConfig } from "./AxisConfig"
 import { DualAxisComponent, HorizontalAxisGridLines } from "./AxisViews"
 import { ScaleType } from "@ourworldindata/types"
 import { DualAxis } from "./Axis"
diff --git a/packages/@ourworldindata/grapher/src/barCharts/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/barCharts/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/barCharts/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/bodyDiv/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/bodyDiv/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/bodyDiv/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/captionedChart/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/captionedChart/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
index b7fc5140dd..251e344923 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
+++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
@@ -549,7 +549,9 @@ export class StaticCaptionedChart extends CaptionedChart {
         try {
             if (this.manager.bakedGrapherURL)
                 origin = new URL(this.manager.bakedGrapherURL).origin
-        } catch {}
+        } catch {
+            // ignore
+        }
         const css = `@import url(${origin}/fonts.css)`
         return (
             <defs>
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/StaticChartRasterizer.tsx b/packages/@ourworldindata/grapher/src/captionedChart/StaticChartRasterizer.tsx
index b3d3820692..711dc2245a 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/StaticChartRasterizer.tsx
+++ b/packages/@ourworldindata/grapher/src/captionedChart/StaticChartRasterizer.tsx
@@ -1,5 +1,5 @@
 export const EMBEDDED_FONTS_CSS = "/fonts/embedded.css"
-export const IMPORT_FONTS_REGEX = /@import url\([^\)]*?fonts\.css\)/
+export const IMPORT_FONTS_REGEX = /@import url\([^)]*?fonts\.css\)/
 
 export interface GrapherExport {
     url: string
@@ -92,7 +92,7 @@ export class StaticChartRasterizer {
             // otherwise, keep retrying until we reach the time limit
             console.warn(
                 "preloading fonts...",
-                faces.filter((f, i) => !outcomes[i]).map((f) => f.font)
+                faces.filter((_f, i) => !outcomes[i]).map((f) => f.font)
             )
             await new Promise((res) =>
                 setTimeout(res, RETRY_DELAY_MS + (retry * RETRY_DELAY_MS) / 2)
diff --git a/packages/@ourworldindata/grapher/src/chart/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/chart/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/chart/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/color/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/color/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/color/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/controls/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/controls/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/controls/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx b/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx
index 78ed5aa34a..33282da9db 100644
--- a/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx
@@ -177,13 +177,14 @@ function TabIcon({
             return <FontAwesomeIcon icon={faTable} />
         case GRAPHER_TAB_NAMES.WorldMap:
             return <FontAwesomeIcon icon={faEarthAmericas} />
-        default:
+        default: {
             const chartIcon =
                 tab === GRAPHER_TAB_NAMES.LineChart &&
                 isLineChartThatTurnedIntoDiscreteBar
                     ? chartIcons[GRAPHER_CHART_TYPES.DiscreteBar]
                     : chartIcons[tab]
             return chartIcon
+        }
     }
 }
 
diff --git a/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx b/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx
index f7c4dfc93e..1136af66bd 100644
--- a/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/entityPicker/EntityPicker.tsx
@@ -202,7 +202,9 @@ export class EntityPicker extends React.Component<{
             ).map((region) => region.name)
 
             if (userRegionNames) this.localEntityNames = userRegionNames
-        } catch {}
+        } catch {
+            // ignore
+        }
     }
 
     @computed
@@ -329,7 +331,7 @@ export class EntityPicker extends React.Component<{
         // The hover will be unblocked iff the user moves the mouse (relative to the menu).
         this.blockHover()
         switch (event.key) {
-            case "Enter":
+            case "Enter": {
                 if (event.keyCode === 229) {
                     // ignore the keydown event from an Input Method Editor(IME)
                     // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
@@ -341,6 +343,7 @@ export class EntityPicker extends React.Component<{
                 this.clearSearchInput()
                 this.manager.analytics?.logEntityPickerEvent("enter", name)
                 break
+            }
             case "ArrowUp":
                 this.focusOptionDirection(FocusDirection.up)
                 break
diff --git a/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.jsdom.test.tsx b/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.jsdom.test.tsx
index bdadf0d6e0..76d3fbf2d3 100644
--- a/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.jsdom.test.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.jsdom.test.tsx
@@ -1,4 +1,5 @@
-#! /usr/bin/env jestimport Enzyme from "enzyme"
+#! /usr/bin/env jest
+import Enzyme from "enzyme"
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
 import { GlobalEntitySelector } from "./GlobalEntitySelector"
 import { SelectionArray } from "../../selection/SelectionArray"
diff --git a/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.tsx b/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.tsx
index cf8a28c7b6..348c69ac0e 100644
--- a/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.tsx
@@ -196,7 +196,9 @@ export class GlobalEntitySelector extends React.Component<{
                 (entity): boolean => entity.code === localCountryCode.code
             )
             if (country) this.localEntityName = country.name
-        } catch {}
+        } catch {
+            // ignore
+        }
     }
 
     @action.bound private prepareOptionGroups(): GroupBase<DropdownEntity>[] {
diff --git a/packages/@ourworldindata/grapher/src/core/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/core/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/core/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/core/EntityUrlBuilder.ts b/packages/@ourworldindata/grapher/src/core/EntityUrlBuilder.ts
index 9382f54e33..fbc3e92831 100644
--- a/packages/@ourworldindata/grapher/src/core/EntityUrlBuilder.ts
+++ b/packages/@ourworldindata/grapher/src/core/EntityUrlBuilder.ts
@@ -89,7 +89,7 @@ const migrateV1Delimited: UrlMigration = (url) => {
  */
 
 // Pattern for a entity name - number pair, where the entity name contains at least one non-digit character.
-const LegacyDimensionRegex = /^(.*\D.*)\-\d+$/
+const LegacyDimensionRegex = /^(.*\D.*)-\d+$/
 
 const injectEntityNamesInLegacyDimension = (
     entityNames: EntityName[]
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
index a7d8a97493..94407af5a9 100644
--- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx
+++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -606,6 +606,7 @@ export class Grapher
 
     @action.bound downloadData(): void {
         if (this.manuallyProvideData) {
+            // ignore
         } else if (this.owidDataset) {
             this._receiveOwidDataAndApplySelection(this.owidDataset)
         } else void this.downloadLegacyDataFromOwidVariableIds()
diff --git a/packages/@ourworldindata/grapher/src/dataTable/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/dataTable/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/dataTable/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.jsdom.test.tsx b/packages/@ourworldindata/grapher/src/dataTable/DataTable.jsdom.test.tsx
index 322192eb7b..4cb13dd95f 100755
--- a/packages/@ourworldindata/grapher/src/dataTable/DataTable.jsdom.test.tsx
+++ b/packages/@ourworldindata/grapher/src/dataTable/DataTable.jsdom.test.tsx
@@ -1,4 +1,4 @@
-#! /usr/bin/env jestimport { DataTable } from "./DataTable"
+#! /usr/bin/env jest
 import { GRAPHER_CHART_TYPES, GRAPHER_TAB_OPTIONS } from "@ourworldindata/types"
 import {
     childMortalityGrapher,
@@ -10,6 +10,8 @@ import {
 import Enzyme, { ReactWrapper } from "enzyme"
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
 import { LifeExpectancyGrapher } from "../testData/OwidTestData.sample.js"
+import { DataTable } from "./DataTable.js"
+
 Enzyme.configure({ adapter: new Adapter() })
 
 describe("when you render a table", () => {
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
index 6aa4875123..d209ce1858 100644
--- a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
+++ b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
@@ -213,7 +213,9 @@ export class EntitySelector extends React.Component<{
             )
 
             if (localEntityNames) this.set({ localEntityNames })
-        } catch {}
+        } catch {
+            // ignore
+        }
     }
 
     private clearSearchInput(): void {
diff --git a/packages/@ourworldindata/grapher/src/facetChart/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/facetChart/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/facetChart/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/footer/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/footer/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/footer/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/header/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/header/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/header/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/lineCharts/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/lineCharts/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/loadingIndicator/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/loadingIndicator/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/loadingIndicator/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/mapCharts/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/mapCharts/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/mapCharts/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.jsdom.test.tsx b/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.jsdom.test.tsx
index 9b4dcfc244..ad85afe950 100755
--- a/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.jsdom.test.tsx
+++ b/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.jsdom.test.tsx
@@ -1,5 +1,6 @@
-#! /usr/bin/env jestimport { Grapher } from "../core/Grapher"
-import { legacyMapGrapher } from "./MapChart.sample"
+#! /usr/bin/env jest
+import { Grapher } from "../core/Grapher.js"
+import { legacyMapGrapher } from "./MapChart.sample.js"
 
 import Enzyme from "enzyme"
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
diff --git a/packages/@ourworldindata/grapher/src/noDataModal/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/noDataModal/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/noDataModal/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/scatterCharts/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/scatterCharts/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/selection/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/selection/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/selection/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/stackedCharts/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/stackedCharts/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx
index c95f9cc3c7..f456d3609e 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx
@@ -784,7 +784,7 @@ export class MarimekkoChart
             case SortBy.entityName:
                 sortByFuncs = [(item: Item): string => item.entityName]
                 break
-            case SortBy.column:
+            case SortBy.column: {
                 const sortColumnSlug = sortConfig.sortColumnSlug
                 sortByFuncs = [
                     (item: Item): number =>
@@ -793,6 +793,7 @@ export class MarimekkoChart
                     (item: Item): string => item.entityName,
                 ]
                 break
+            }
             default:
             case SortBy.total:
                 sortByFuncs = [
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
index 493cba5fca..a52e26fac3 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
@@ -438,7 +438,7 @@ export class StackedDiscreteBarChart
             case SortBy.entityName:
                 sortByFunc = (item: Item): string => item.entityName
                 break
-            case SortBy.column:
+            case SortBy.column: {
                 const owidRowsByEntityName =
                     this.sortColumn?.owidRowsByEntityName
                 sortByFunc = (item: Item): number => {
@@ -446,6 +446,7 @@ export class StackedDiscreteBarChart
                     return rows?.[0]?.value ?? 0
                 }
                 break
+            }
             default:
             case SortBy.total:
                 sortByFunc = (item: Item): number => {
diff --git a/packages/@ourworldindata/grapher/src/timeline/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/timeline/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/timeline/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/tooltip/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/tooltip/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/tooltip/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/grapher/src/verticalColorLegend/.eslintrc.yaml b/packages/@ourworldindata/grapher/src/verticalColorLegend/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/grapher/src/verticalColorLegend/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/types/package.json b/packages/@ourworldindata/types/package.json
index 4cd8572ad9..033857717d 100644
--- a/packages/@ourworldindata/types/package.json
+++ b/packages/@ourworldindata/types/package.json
@@ -14,8 +14,8 @@
   "keywords": [],
   "author": "",
   "devDependencies": {
-    "eslint": "^8.57.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "jest": "^29.7.0",
     "typescript": "~5.7.2"
   },
diff --git a/packages/@ourworldindata/types/src/gdocTypes/GdocConstants.ts b/packages/@ourworldindata/types/src/gdocTypes/GdocConstants.ts
index ef3b7f657a..28d1f00328 100644
--- a/packages/@ourworldindata/types/src/gdocTypes/GdocConstants.ts
+++ b/packages/@ourworldindata/types/src/gdocTypes/GdocConstants.ts
@@ -20,7 +20,7 @@ export const RESEARCH_AND_WRITING_DEFAULT_HEADING = "Research & Writing"
  * https://docs.google.com/spreadsheets/d/abcd1234
  */
 export const gdocUrlRegex =
-    /https:\/\/docs\.google\.com\/document(?:\/u\/\d)?\/d\/([\-\w]+)\/?(edit)?(\?tab=[\w\.]+)?#?/
+    /https:\/\/docs\.google\.com\/document(?:\/u\/\d)?\/d\/([-\w]+)\/?(edit)?(\?tab=[\w.]+)?#?/
 
 export const GDOCS_BASE_URL = "https://docs.google.com"
 export const GDOCS_URL_PLACEHOLDER = `${GDOCS_BASE_URL}/document/d/****/edit`
diff --git a/packages/@ourworldindata/utils/.eslintrc.yaml b/packages/@ourworldindata/utils/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/utils/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/utils/package.json b/packages/@ourworldindata/utils/package.json
index 2b41e03975..ba3f323d2d 100644
--- a/packages/@ourworldindata/utils/package.json
+++ b/packages/@ourworldindata/utils/package.json
@@ -40,8 +40,8 @@
     "@types/react-tag-autocomplete": "^6.1.1",
     "@types/string-pixel-width": "^1.7.2",
     "@types/url-parse": "^1.4.8",
-    "eslint": "^8.57.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "jest": "^29.7.0",
     "typescript": "~5.7.2"
   },
diff --git a/packages/@ourworldindata/utils/src/PromiseCache.test.ts b/packages/@ourworldindata/utils/src/PromiseCache.test.ts
index 663702db75..3b46f28c4a 100644
--- a/packages/@ourworldindata/utils/src/PromiseCache.test.ts
+++ b/packages/@ourworldindata/utils/src/PromiseCache.test.ts
@@ -31,14 +31,18 @@ it("promise is discarded if it rejects", async () => {
     try {
         await firstPromise
         fail()
-    } catch {}
+    } catch {
+        // ignore
+    }
 
     expect(cache.has("key")).toBeFalsy()
 
     try {
         await cache.get("key")
         fail()
-    } catch {}
+    } catch {
+        // ignore
+    }
 
     const thirdPromise = cache.get("key")
     expect(thirdPromise).not.toBe(firstPromise)
@@ -46,5 +50,7 @@ it("promise is discarded if it rejects", async () => {
     try {
         await thirdPromise
         fail()
-    } catch {}
+    } catch {
+        // ignore
+    }
 })
diff --git a/packages/@ourworldindata/utils/src/PromiseSwitcher.test.ts b/packages/@ourworldindata/utils/src/PromiseSwitcher.test.ts
index 4c7a7a1f30..d91782cdd7 100644
--- a/packages/@ourworldindata/utils/src/PromiseSwitcher.test.ts
+++ b/packages/@ourworldindata/utils/src/PromiseSwitcher.test.ts
@@ -62,7 +62,9 @@ it("handles clearing pending promise", async () => {
     selector.clear()
     try {
         await reject
-    } catch {}
+    } catch {
+        // ignore
+    }
 
     expect(onResolve).not.toHaveBeenCalled()
     expect(onReject).not.toHaveBeenCalled()
diff --git a/packages/@ourworldindata/utils/src/Util.ts b/packages/@ourworldindata/utils/src/Util.ts
index 0cc04c6a6f..cd2978a218 100644
--- a/packages/@ourworldindata/utils/src/Util.ts
+++ b/packages/@ourworldindata/utils/src/Util.ts
@@ -474,7 +474,7 @@ export const slugifySameCase = (
     let slug = str
         .trim()
         .replace(/\s*\*.+\*/, "")
-        .replace(/[^\w\- \/]+/g, "")
+        .replace(/[^\w\- /]+/g, "")
         .replace(/ +/g, "-")
     if (!allowSlashes) {
         slug = slug.replace(/\//g, "")
@@ -559,7 +559,7 @@ export interface Json {
 export const csvEscape = (value: unknown): string => {
     const valueStr = toString(value)
     return valueStr.includes(",")
-        ? `"${valueStr.replace(/\"/g, '""')}"`
+        ? `"${valueStr.replace(/"/g, '""')}"`
         : valueStr
 }
 
@@ -581,6 +581,7 @@ export const trimObject = <Obj>(
         if (isObject(val) && isEmpty(val)) {
             // Drop empty objects
         } else if (trimStringEmptyStrings && val === "") {
+            // ignore
         } else if (val !== undefined) clone[key] = obj[key]
     }
     return clone
@@ -1256,7 +1257,7 @@ export function stringifyUnknownError(error: unknown): string | undefined {
     }
 
     if (typeof error === "object" && !Array.isArray(error) && error !== null) {
-        if (error.hasOwnProperty("message")) {
+        if (Object.prototype.hasOwnProperty.call(error, "message")) {
             // Within this branch, `error` is an object with the `message`
             // property, so we can access the object's `message` property.
             return (error as any).message
@@ -1385,7 +1386,9 @@ export const canWriteToClipboard = async (): Promise<boolean> => {
 
             // Asking permission was successful, we may use clipboard-write methods if permission wasn't denied.
             return ["granted", "prompt"].includes(res.state)
-        } catch {}
+        } catch {
+            // ignore
+        }
     }
     // navigator.clipboard is available, but we couldn't check for permissions -- assume we can use it.
     return true
@@ -1438,7 +1441,7 @@ export function findDuplicates<T>(arr: T[]): T[] {
 
 // Memoization for immutable getters. Run the function once for this instance and cache the result.
 export const imemo = <Type>(
-    target: unknown,
+    _target: unknown,
     propertyName: string,
     descriptor: TypedPropertyDescriptor<Type>
 ): void => {
diff --git a/packages/@ourworldindata/utils/src/persistable/.eslintrc.yaml b/packages/@ourworldindata/utils/src/persistable/.eslintrc.yaml
deleted file mode 100644
index 2972fb8a9d..0000000000
--- a/packages/@ourworldindata/utils/src/persistable/.eslintrc.yaml
+++ /dev/null
@@ -1,3 +0,0 @@
-rules:
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/packages/@ourworldindata/utils/src/string.ts b/packages/@ourworldindata/utils/src/string.ts
index 056fe1e7c8..6928fccc51 100644
--- a/packages/@ourworldindata/utils/src/string.ts
+++ b/packages/@ourworldindata/utils/src/string.ts
@@ -1,5 +1,5 @@
 const snakeToCamel = (str: string): string =>
-    str.replace(/(\_\w)/g, (char) => char[1].toUpperCase())
+    str.replace(/(_\w)/g, (char) => char[1].toUpperCase())
 
 export const camelCaseProperties = (
     obj: Record<string, unknown>
diff --git a/settings/.eslintrc.yaml b/settings/.eslintrc.yaml
deleted file mode 100644
index 3da8d3df28..0000000000
--- a/settings/.eslintrc.yaml
+++ /dev/null
@@ -1,4 +0,0 @@
-rules:
-    no-console: "off"
-    "@typescript-eslint/explicit-function-return-type": "warn"
-    "@typescript-eslint/explicit-module-boundary-types": "warn"
diff --git a/site/CookiePreferencesManager.tsx b/site/CookiePreferencesManager.tsx
index 605629a0b6..4c1428e6ac 100644
--- a/site/CookiePreferencesManager.tsx
+++ b/site/CookiePreferencesManager.tsx
@@ -158,7 +158,9 @@ const getInitialState = (): State => {
         cookieValue = parseRawCookieValue(
             Cookies.get(COOKIE_PREFERENCES_COOKIE_NAME)
         )
-    } catch {}
+    } catch {
+        // ignore
+    }
 
     if (!cookieValue || arePreferencesOutdated(cookieValue.date, POLICY_DATE))
         return defaultState
diff --git a/site/GrapherPage.jsdom.test.tsx b/site/GrapherPage.jsdom.test.tsx
index f6c16d91c1..27af039b31 100755
--- a/site/GrapherPage.jsdom.test.tsx
+++ b/site/GrapherPage.jsdom.test.tsx
@@ -1,4 +1,5 @@
-#! /usr/bin/env jestimport { GrapherInterface } from "@ourworldindata/types"
+#! /usr/bin/env jest
+import { GrapherInterface } from "@ourworldindata/types"
 import {
     DimensionProperty,
     KeyChartLevel,
diff --git a/site/blocks/RelatedCharts.jsdom.test.tsx b/site/blocks/RelatedCharts.jsdom.test.tsx
index c3cad379c8..d99454b480 100755
--- a/site/blocks/RelatedCharts.jsdom.test.tsx
+++ b/site/blocks/RelatedCharts.jsdom.test.tsx
@@ -1,4 +1,4 @@
-#! /usr/bin/env jestimport { RelatedCharts } from "./RelatedCharts.js"
+#! /usr/bin/env jest
 
 import Enzyme from "enzyme"
 import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
@@ -7,6 +7,7 @@ import {
     BAKED_GRAPHER_EXPORTS_BASE_URL,
 } from "../../settings/clientSettings.js"
 import { KeyChartLevel } from "@ourworldindata/utils"
+import { RelatedCharts } from "./RelatedCharts.js"
 Enzyme.configure({ adapter: new Adapter() })
 
 const charts = [
diff --git a/site/gdocs/components/KeyInsights.jsdom.test.tsx b/site/gdocs/components/KeyInsights.jsdom.test.tsx
index bc6bf750a2..39d2da05db 100755
--- a/site/gdocs/components/KeyInsights.jsdom.test.tsx
+++ b/site/gdocs/components/KeyInsights.jsdom.test.tsx
@@ -1,4 +1,4 @@
-#! /usr/bin/env jestimport { KEY_INSIGHTS_INSIGHT_PARAM } from "./KeyInsights.js"
+#! /usr/bin/env jest
 
 import {
     EnrichedBlockKeyInsights,
@@ -11,6 +11,7 @@ import "@testing-library/jest-dom"
 
 import { jest } from "@jest/globals"
 import ArticleBlock from "./ArticleBlock.js"
+import { KEY_INSIGHTS_INSIGHT_PARAM } from "./KeyInsights.js"
 
 const KEY_INSIGHTS_SLUG = "key-insights"
 
diff --git a/site/owid.entry.ts b/site/owid.entry.ts
index 225ba89918..3198c969e3 100644
--- a/site/owid.entry.ts
+++ b/site/owid.entry.ts
@@ -149,6 +149,8 @@ try {
             }
         }
     }
-} catch {}
+} catch {
+    // ignore
+}
 
 analytics.startClickTracking()
diff --git a/site/runSiteFooterScripts.ts b/site/runSiteFooterScripts.ts
index a5c540e426..4251e691ba 100644
--- a/site/runSiteFooterScripts.ts
+++ b/site/runSiteFooterScripts.ts
@@ -86,11 +86,14 @@ export const runSiteFooterScripts = (
         case SiteFooterContext.dynamicCollectionPage:
             // Don't break, run default case too
             hydrateDynamicCollectionPage()
+        // falls through
         case SiteFooterContext.dataInsightsIndexPage:
             // Don't break, run default case too
             hydrateDataInsightsIndexPage()
+        // falls through
         case SiteFooterContext.dataCatalogPage:
             hydrateDataCatalogPage()
+        // falls through
         default:
             // Features that were not ported over to gdocs, are only being run on WP pages:
             // - global entity selector
diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json
index 6bdcb4e1d5..bb70576df4 100644
--- a/tsconfig.eslint.json
+++ b/tsconfig.eslint.json
@@ -1,13 +1,12 @@
 {
     "extends": "./tsconfig.json",
     "include": [
-        ".eslintrc.cjs",
-        "**/*.ts",
-        "**/*.tsx",
+        "**/*.cts",
+        "**/*.ctsx",
         "**/*.mts",
         "**/*.mtsx",
-        "**/*.cts",
-        "**/*.ctsx"
+        "**/*.ts",
+        "**/*.tsx"
     ],
     "compilerOptions": {
         // ensure that nobody can accidentally use this config for a build
diff --git a/yarn.lock b/yarn.lock
index fd5bece4c7..f18f1e0978 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2177,34 +2177,77 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/regexpp@npm:^4.10.0, @eslint-community/regexpp@npm:^4.6.1":
+"@eslint-community/regexpp@npm:^4.10.0":
   version: 4.11.1
   resolution: "@eslint-community/regexpp@npm:4.11.1"
   checksum: 10/934b6d3588c7f16b18d41efec4fdb89616c440b7e3256b8cb92cfd31ae12908600f2b986d6c1e61a84cbc10256b1dd3448cd1eec79904bd67ac365d0f1aba2e2
   languageName: node
   linkType: hard
 
-"@eslint/eslintrc@npm:^2.1.4":
-  version: 2.1.4
-  resolution: "@eslint/eslintrc@npm:2.1.4"
+"@eslint-community/regexpp@npm:^4.12.1":
+  version: 4.12.1
+  resolution: "@eslint-community/regexpp@npm:4.12.1"
+  checksum: 10/c08f1dd7dd18fbb60bdd0d85820656d1374dd898af9be7f82cb00451313402a22d5e30569c150315b4385907cdbca78c22389b2a72ab78883b3173be317620cc
+  languageName: node
+  linkType: hard
+
+"@eslint/config-array@npm:^0.19.0":
+  version: 0.19.1
+  resolution: "@eslint/config-array@npm:0.19.1"
+  dependencies:
+    "@eslint/object-schema": "npm:^2.1.5"
+    debug: "npm:^4.3.1"
+    minimatch: "npm:^3.1.2"
+  checksum: 10/1243b01f463de85c970c18f0994f9d1850dafe8cc8c910edb64105d845edd3cacaa0bbf028bf35a6daaf5a179021140b6a8b1dc7a2f915b42c2d35f022a9c201
+  languageName: node
+  linkType: hard
+
+"@eslint/core@npm:^0.9.0":
+  version: 0.9.1
+  resolution: "@eslint/core@npm:0.9.1"
+  dependencies:
+    "@types/json-schema": "npm:^7.0.15"
+  checksum: 10/f2263f8f94fdf84fc34573e027de98f1fce6287120513ae672ddf0652c75b9fa77c314d565628fc58e0a6f959766acc34c8191f9b94f1757b910408ffa04adde
+  languageName: node
+  linkType: hard
+
+"@eslint/eslintrc@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "@eslint/eslintrc@npm:3.2.0"
   dependencies:
     ajv: "npm:^6.12.4"
     debug: "npm:^4.3.2"
-    espree: "npm:^9.6.0"
-    globals: "npm:^13.19.0"
+    espree: "npm:^10.0.1"
+    globals: "npm:^14.0.0"
     ignore: "npm:^5.2.0"
     import-fresh: "npm:^3.2.1"
     js-yaml: "npm:^4.1.0"
     minimatch: "npm:^3.1.2"
     strip-json-comments: "npm:^3.1.1"
-  checksum: 10/7a3b14f4b40fc1a22624c3f84d9f467a3d9ea1ca6e9a372116cb92507e485260359465b58e25bcb6c9981b155416b98c9973ad9b796053fd7b3f776a6946bce8
+  checksum: 10/b32dd90ce7da68e89b88cd729db46b27aac79a2e6cb1fa75d25a6b766d586b443bfbf59622489efbd3c6f696f147b51111e81ec7cd23d70f215c5d474cad0261
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:8.57.1":
-  version: 8.57.1
-  resolution: "@eslint/js@npm:8.57.1"
-  checksum: 10/7562b21be10c2adbfa4aa5bb2eccec2cb9ac649a3569560742202c8d1cb6c931ce634937a2f0f551e078403a1c1285d6c2c0aa345dafc986149665cd69fe8b59
+"@eslint/js@npm:9.17.0, @eslint/js@npm:^9.17.0":
+  version: 9.17.0
+  resolution: "@eslint/js@npm:9.17.0"
+  checksum: 10/1a89e62f5c50e75d44565b7f3b91701455a999132c991e10bac59c118fbb54bdd54be22b9bda1ac730f78a2e64604403d65ce5dd7726d80b2632982cfc3d84ac
+  languageName: node
+  linkType: hard
+
+"@eslint/object-schema@npm:^2.1.5":
+  version: 2.1.5
+  resolution: "@eslint/object-schema@npm:2.1.5"
+  checksum: 10/bb07ec53357047f20de923bcd61f0306d9eee83ef41daa32e633e154a44796b5bd94670169eccb8fd8cb4ff42228a43b86953a6321f789f98194baba8207b640
+  languageName: node
+  linkType: hard
+
+"@eslint/plugin-kit@npm:^0.2.3":
+  version: 0.2.4
+  resolution: "@eslint/plugin-kit@npm:0.2.4"
+  dependencies:
+    levn: "npm:^0.4.1"
+  checksum: 10/e34d02ea1dccd716e51369620263a4b2167aff3c0510ed776e21336cc3ad7158087449a76931baf07cdc33810cb6919db375f2e9f409435d2c6e0dd5f4786b25
   languageName: node
   linkType: hard
 
@@ -2293,14 +2336,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/config-array@npm:^0.13.0":
-  version: 0.13.0
-  resolution: "@humanwhocodes/config-array@npm:0.13.0"
+"@humanfs/core@npm:^0.19.1":
+  version: 0.19.1
+  resolution: "@humanfs/core@npm:0.19.1"
+  checksum: 10/270d936be483ab5921702623bc74ce394bf12abbf57d9145a69e8a0d1c87eb1c768bd2d93af16c5705041e257e6d9cc7529311f63a1349f3678abc776fc28523
+  languageName: node
+  linkType: hard
+
+"@humanfs/node@npm:^0.16.6":
+  version: 0.16.6
+  resolution: "@humanfs/node@npm:0.16.6"
   dependencies:
-    "@humanwhocodes/object-schema": "npm:^2.0.3"
-    debug: "npm:^4.3.1"
-    minimatch: "npm:^3.0.5"
-  checksum: 10/524df31e61a85392a2433bf5d03164e03da26c03d009f27852e7dcfdafbc4a23f17f021dacf88e0a7a9fe04ca032017945d19b57a16e2676d9114c22a53a9d11
+    "@humanfs/core": "npm:^0.19.1"
+    "@humanwhocodes/retry": "npm:^0.3.0"
+  checksum: 10/6d43c6727463772d05610aa05c83dab2bfbe78291022ee7a92cb50999910b8c720c76cc312822e2dea2b497aa1b3fef5fe9f68803fc45c9d4ed105874a65e339
   languageName: node
   linkType: hard
 
@@ -2311,10 +2360,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/object-schema@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "@humanwhocodes/object-schema@npm:2.0.3"
-  checksum: 10/05bb99ed06c16408a45a833f03a732f59bf6184795d4efadd33238ff8699190a8c871ad1121241bb6501589a9598dc83bf25b99dcbcf41e155cdf36e35e937a3
+"@humanwhocodes/retry@npm:^0.3.0":
+  version: 0.3.1
+  resolution: "@humanwhocodes/retry@npm:0.3.1"
+  checksum: 10/eb457f699529de7f07649679ec9e0353055eebe443c2efe71c6dd950258892475a038e13c6a8c5e13ed1fb538cdd0a8794faa96b24b6ffc4c87fb1fc9f70ad7f
+  languageName: node
+  linkType: hard
+
+"@humanwhocodes/retry@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "@humanwhocodes/retry@npm:0.4.1"
+  checksum: 10/39fafc7319e88f61befebd5e1b4f0136534ea6a9bd10d74366698187bd63544210ec5d79a87ed4d91297f1cc64c4c53d45fb0077a2abfdce212cf0d3862d5f04
   languageName: node
   linkType: hard
 
@@ -2971,7 +3027,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8":
+"@nodelib/fs.walk@npm:^1.2.3":
   version: 1.2.8
   resolution: "@nodelib/fs.walk@npm:1.2.8"
   dependencies:
@@ -3469,8 +3525,8 @@ __metadata:
     "@types/react": "npm:^17.0.69"
     "@types/react-dom": "npm:^17.0.22"
     esbuild-sass-plugin: "npm:^3.3.1"
-    eslint: "npm:^8.57.1"
-    eslint-plugin-react-hooks: "npm:^4.6.2"
+    eslint: "npm:^9.17.0"
+    eslint-plugin-react-hooks: "npm:^5.1.0"
     mobx: "npm:^5.15.7"
     mobx-formatters: "npm:^1.0.2"
     mobx-react: "npm:5"
@@ -3491,7 +3547,7 @@ __metadata:
     "@types/papaparse": "npm:^5.3.15"
     d3: "npm:^6.1.1"
     dayjs: "npm:^1.11.11"
-    eslint: "npm:^8.57.1"
+    eslint: "npm:^9.17.0"
     papaparse: "npm:^5.4.1"
     typescript: "npm:~5.7.2"
   languageName: unknown
@@ -3533,8 +3589,8 @@ __metadata:
     enzyme: "npm:^3.11.0"
     esbuild: "npm:^0.21.5"
     esbuild-sass-plugin: "npm:^3.3.1"
-    eslint: "npm:^8.57.1"
-    eslint-plugin-react-hooks: "npm:^4.6.2"
+    eslint: "npm:^9.17.0"
+    eslint-plugin-react-hooks: "npm:^5.1.0"
     expr-eval: "npm:^2.0.2"
     fuzzysort: "npm:^1.1.4"
     jest: "npm:^29.7.0"
@@ -3593,8 +3649,8 @@ __metadata:
     enzyme: "npm:^3.11.0"
     esbuild: "npm:^0.21.5"
     esbuild-sass-plugin: "npm:^3.3.1"
-    eslint: "npm:^8.57.1"
-    eslint-plugin-react-hooks: "npm:^4.6.2"
+    eslint: "npm:^9.17.0"
+    eslint-plugin-react-hooks: "npm:^5.1.0"
     expr-eval: "npm:^2.0.2"
     fuzzysort: "npm:^1.1.4"
     jest: "npm:^29.7.0"
@@ -3623,8 +3679,8 @@ __metadata:
   resolution: "@ourworldindata/types@workspace:packages/@ourworldindata/types"
   dependencies:
     "@sinclair/typebox": "npm:^0.28.5"
-    eslint: "npm:^8.57.1"
-    eslint-plugin-react-hooks: "npm:^4.6.2"
+    eslint: "npm:^9.17.0"
+    eslint-plugin-react-hooks: "npm:^5.1.0"
     jest: "npm:^29.7.0"
     mobx: "npm:^5.15.7"
     typescript: "npm:~5.7.2"
@@ -3647,8 +3703,8 @@ __metadata:
     "@types/url-parse": "npm:^1.4.8"
     d3: "npm:^6.1.1"
     dayjs: "npm:^1.11.11"
-    eslint: "npm:^8.57.1"
-    eslint-plugin-react-hooks: "npm:^4.6.2"
+    eslint: "npm:^9.17.0"
+    eslint-plugin-react-hooks: "npm:^5.1.0"
     jest: "npm:^29.7.0"
     lodash: "npm:^4.17.21"
     mobx: "npm:^5.15.7"
@@ -5348,6 +5404,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/estree@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "@types/estree@npm:1.0.6"
+  checksum: 10/9d35d475095199c23e05b431bcdd1f6fec7380612aed068b14b2a08aa70494de8a9026765a5a91b1073f636fb0368f6d8973f518a31391d519e20c59388ed88d
+  languageName: node
+  linkType: hard
+
 "@types/express-rate-limit@npm:^5.1.0":
   version: 5.1.0
   resolution: "@types/express-rate-limit@npm:5.1.0"
@@ -5521,6 +5584,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/json-schema@npm:^7.0.15":
+  version: 7.0.15
+  resolution: "@types/json-schema@npm:7.0.15"
+  checksum: 10/1a3c3e06236e4c4aab89499c428d585527ce50c24fe8259e8b3926d3df4cfbbbcf306cfc73ddfb66cbafc973116efd15967020b0f738f63e09e64c7d260519e7
+  languageName: node
+  linkType: hard
+
 "@types/json5@npm:^0.0.29":
   version: 0.0.29
   resolution: "@types/json5@npm:0.0.29"
@@ -5990,15 +6060,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:^8.10.0":
-  version: 8.10.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:8.10.0"
+"@typescript-eslint/eslint-plugin@npm:8.18.1":
+  version: 8.18.1
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.18.1"
   dependencies:
     "@eslint-community/regexpp": "npm:^4.10.0"
-    "@typescript-eslint/scope-manager": "npm:8.10.0"
-    "@typescript-eslint/type-utils": "npm:8.10.0"
-    "@typescript-eslint/utils": "npm:8.10.0"
-    "@typescript-eslint/visitor-keys": "npm:8.10.0"
+    "@typescript-eslint/scope-manager": "npm:8.18.1"
+    "@typescript-eslint/type-utils": "npm:8.18.1"
+    "@typescript-eslint/utils": "npm:8.18.1"
+    "@typescript-eslint/visitor-keys": "npm:8.18.1"
     graphemer: "npm:^1.4.0"
     ignore: "npm:^5.3.1"
     natural-compare: "npm:^1.4.0"
@@ -6006,110 +6076,99 @@ __metadata:
   peerDependencies:
     "@typescript-eslint/parser": ^8.0.0 || ^8.0.0-alpha.0
     eslint: ^8.57.0 || ^9.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10/7a53a40b16188c95651b3d69facbfdeacba93da42850a3fb35dfc08318a5db063f42fea2b22bf8756c54bc26edeefcab8fabc39ce3d717d5f9bc765f4922b58a
+    typescript: ">=4.8.4 <5.8.0"
+  checksum: 10/ec061a9c64477260d1ef0fc6283d8754838181e17aa90b3b8b9a70936a2ca4bae11607070917a7701e13f5301ced2b6da4b4b6e5cf525c484f97481e540b5111
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:^8.10.0":
-  version: 8.10.0
-  resolution: "@typescript-eslint/parser@npm:8.10.0"
+"@typescript-eslint/parser@npm:8.18.1":
+  version: 8.18.1
+  resolution: "@typescript-eslint/parser@npm:8.18.1"
   dependencies:
-    "@typescript-eslint/scope-manager": "npm:8.10.0"
-    "@typescript-eslint/types": "npm:8.10.0"
-    "@typescript-eslint/typescript-estree": "npm:8.10.0"
-    "@typescript-eslint/visitor-keys": "npm:8.10.0"
+    "@typescript-eslint/scope-manager": "npm:8.18.1"
+    "@typescript-eslint/types": "npm:8.18.1"
+    "@typescript-eslint/typescript-estree": "npm:8.18.1"
+    "@typescript-eslint/visitor-keys": "npm:8.18.1"
     debug: "npm:^4.3.4"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10/b3059e112f1b85176bb5abdd403adb0b19a7560d3bcd5a6efc414d06d9aeef70d00fb6f0fd8e4923d914d4d15de35a681bdf8f55301457b5b244d7027c38f330
+    typescript: ">=4.8.4 <5.8.0"
+  checksum: 10/09a601ef8b837962e5bb2687358520f337f9d0bbac5c6d5e159654faa5caaffb24d990e8d6bc4dc51ff5008dd9e182315c35bc5e9e3789090ccef8b8040e7659
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:8.10.0":
-  version: 8.10.0
-  resolution: "@typescript-eslint/scope-manager@npm:8.10.0"
+"@typescript-eslint/scope-manager@npm:8.18.1":
+  version: 8.18.1
+  resolution: "@typescript-eslint/scope-manager@npm:8.18.1"
   dependencies:
-    "@typescript-eslint/types": "npm:8.10.0"
-    "@typescript-eslint/visitor-keys": "npm:8.10.0"
-  checksum: 10/02cf2afc57bd048639d876030f6826e7b522bf36db40b7dd7b8e1b8c6f853e8c41b41044b7a32f118bac1b721aff4dfe660d5891e0a9ee103ef87c5ee1792b4c
+    "@typescript-eslint/types": "npm:8.18.1"
+    "@typescript-eslint/visitor-keys": "npm:8.18.1"
+  checksum: 10/14f7c09924c3a006b20752e5204b33c2b6974fc00bea16c23f471e65f2fb089fcbd3fb5296bcfd6727ac95c32ba24ebb15ba84fbf1deadc17b4cc5ca7f41c72a
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:8.10.0":
-  version: 8.10.0
-  resolution: "@typescript-eslint/type-utils@npm:8.10.0"
+"@typescript-eslint/type-utils@npm:8.18.1":
+  version: 8.18.1
+  resolution: "@typescript-eslint/type-utils@npm:8.18.1"
   dependencies:
-    "@typescript-eslint/typescript-estree": "npm:8.10.0"
-    "@typescript-eslint/utils": "npm:8.10.0"
+    "@typescript-eslint/typescript-estree": "npm:8.18.1"
+    "@typescript-eslint/utils": "npm:8.18.1"
     debug: "npm:^4.3.4"
     ts-api-utils: "npm:^1.3.0"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10/d173232b8bb1738eeb107a76d6e8b5afdfa97b62bff23db22f8a132db01c560b7d9c2c658e3c2bdccd2e7f5dfdf75ddb70d362a44d713a8c7bacdd56e29fd2ee
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0
+    typescript: ">=4.8.4 <5.8.0"
+  checksum: 10/cde53d05f4ca6e172239918cba2b560b9f837aa1fc7d5220784b1a6af9c8c525db020a5160822087e320305492fe359b7fb191420789b5f1e47a01e0cda21ac9
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:8.10.0":
-  version: 8.10.0
-  resolution: "@typescript-eslint/types@npm:8.10.0"
-  checksum: 10/2701711c87181553b68cdeba9d8ea55e0ae8ac441b5fe9667ee8be1dbac20386698930239a0e210b73d14961110ab128559a162abaed6e890a851543b6617c97
+"@typescript-eslint/types@npm:8.18.1":
+  version: 8.18.1
+  resolution: "@typescript-eslint/types@npm:8.18.1"
+  checksum: 10/57a6141ba17be929291a644991f3a76f94fce330376f6a079decb20fb53378d636ad6878f8f9b6fcb8244cf1ca8b118f9e8901ae04cf3de2aa9f9ff57791d97a
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:8.10.0":
-  version: 8.10.0
-  resolution: "@typescript-eslint/typescript-estree@npm:8.10.0"
+"@typescript-eslint/typescript-estree@npm:8.18.1":
+  version: 8.18.1
+  resolution: "@typescript-eslint/typescript-estree@npm:8.18.1"
   dependencies:
-    "@typescript-eslint/types": "npm:8.10.0"
-    "@typescript-eslint/visitor-keys": "npm:8.10.0"
+    "@typescript-eslint/types": "npm:8.18.1"
+    "@typescript-eslint/visitor-keys": "npm:8.18.1"
     debug: "npm:^4.3.4"
     fast-glob: "npm:^3.3.2"
     is-glob: "npm:^4.0.3"
     minimatch: "npm:^9.0.4"
     semver: "npm:^7.6.0"
     ts-api-utils: "npm:^1.3.0"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10/7513fbc43a0d5f06f45e20d18b6855a3e52bd4124283a4b704bb53c6d2c7edfa783cd4fa2c35217bf8562a6bc80892067fa4780aec97d99580624cbd05cde471
+  peerDependencies:
+    typescript: ">=4.8.4 <5.8.0"
+  checksum: 10/8ecc1b50b9fc32116eee1b3b00f3fb29cf18026c0bbb50ab5f6e01db58ef62b8ac01824f2950f132479be6e1b82466a2bfd1e2cb4525aa8dbce4c27fc2494cfc
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:8.10.0":
-  version: 8.10.0
-  resolution: "@typescript-eslint/utils@npm:8.10.0"
+"@typescript-eslint/utils@npm:8.18.1":
+  version: 8.18.1
+  resolution: "@typescript-eslint/utils@npm:8.18.1"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.4.0"
-    "@typescript-eslint/scope-manager": "npm:8.10.0"
-    "@typescript-eslint/types": "npm:8.10.0"
-    "@typescript-eslint/typescript-estree": "npm:8.10.0"
+    "@typescript-eslint/scope-manager": "npm:8.18.1"
+    "@typescript-eslint/types": "npm:8.18.1"
+    "@typescript-eslint/typescript-estree": "npm:8.18.1"
   peerDependencies:
     eslint: ^8.57.0 || ^9.0.0
-  checksum: 10/a28f9fbec67b92bfb9c58445f9cfeb3208d48ecfda4c3ce649e70291af1d23a05466ce76bae9f6aff1270f40a434c8b6a7a71267108b6c32b1c059758f879cc0
+    typescript: ">=4.8.4 <5.8.0"
+  checksum: 10/7b33d2ac273ad606a3dcb776bcf02c901812952550cdc93d4ece272b3b0e5d2a4e05fa92f9bd466f4a296ddd5992902d3b6623aa1c29d09e8e392897103e42a8
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:8.10.0":
-  version: 8.10.0
-  resolution: "@typescript-eslint/visitor-keys@npm:8.10.0"
+"@typescript-eslint/visitor-keys@npm:8.18.1":
+  version: 8.18.1
+  resolution: "@typescript-eslint/visitor-keys@npm:8.18.1"
   dependencies:
-    "@typescript-eslint/types": "npm:8.10.0"
-    eslint-visitor-keys: "npm:^3.4.3"
-  checksum: 10/637d4f2a812e5dcf12b2342ebb296fda5e87e425430623c31660d60e09f87fc8dc9843cc0d9b81fe4963e25ce9a44a4418e8b7878b73773f4c1375fb68006b16
-  languageName: node
-  linkType: hard
-
-"@ungap/structured-clone@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "@ungap/structured-clone@npm:1.2.0"
-  checksum: 10/c6fe89a505e513a7592e1438280db1c075764793a2397877ff1351721fe8792a966a5359769e30242b3cd023f2efb9e63ca2ca88019d73b564488cc20e3eab12
+    "@typescript-eslint/types": "npm:8.18.1"
+    eslint-visitor-keys: "npm:^4.2.0"
+  checksum: 10/00e88b1640a68c3afea08731395eb09a8216892248fee819cb7526e99093256743239d6b9e880a499f1c0ddfe2ffa4d1ad895d9e778b5d42e702d5880db1a594
   languageName: node
   linkType: hard
 
@@ -6275,7 +6334,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.1.0, acorn@npm:^8.8.0, acorn@npm:^8.8.1, acorn@npm:^8.9.0":
+"acorn@npm:^8.1.0, acorn@npm:^8.8.0, acorn@npm:^8.8.1":
   version: 8.11.3
   resolution: "acorn@npm:8.11.3"
   bin:
@@ -6284,6 +6343,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn@npm:^8.14.0":
+  version: 8.14.0
+  resolution: "acorn@npm:8.14.0"
+  bin:
+    acorn: bin/acorn
+  checksum: 10/6df29c35556782ca9e632db461a7f97947772c6c1d5438a81f0c873a3da3a792487e83e404d1c6c25f70513e91aa18745f6eafb1fcc3a43ecd1920b21dd173d2
+  languageName: node
+  linkType: hard
+
 "add-stream@npm:^1.0.0":
   version: 1.0.0
   resolution: "add-stream@npm:1.0.0"
@@ -6592,6 +6660,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"array-buffer-byte-length@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "array-buffer-byte-length@npm:1.0.2"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    is-array-buffer: "npm:^3.0.5"
+  checksum: 10/0ae3786195c3211b423e5be8dd93357870e6fb66357d81da968c2c39ef43583ef6eece1f9cb1caccdae4806739c65dea832b44b8593414313cd76a89795fca63
+  languageName: node
+  linkType: hard
+
 "array-differ@npm:^3.0.0":
   version: 3.0.0
   resolution: "array-differ@npm:3.0.0"
@@ -6735,6 +6813,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"arraybuffer.prototype.slice@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "arraybuffer.prototype.slice@npm:1.0.4"
+  dependencies:
+    array-buffer-byte-length: "npm:^1.0.1"
+    call-bind: "npm:^1.0.8"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.5"
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.6"
+    is-array-buffer: "npm:^3.0.4"
+  checksum: 10/4821ebdfe7d699f910c7f09bc9fa996f09b96b80bccb4f5dd4b59deae582f6ad6e505ecef6376f8beac1eda06df2dbc89b70e82835d104d6fcabd33c1aed1ae9
+  languageName: node
+  linkType: hard
+
 "arrify@npm:^1.0.1":
   version: 1.0.1
   resolution: "arrify@npm:1.0.1"
@@ -7286,6 +7379,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "call-bind-apply-helpers@npm:1.0.1"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    function-bind: "npm:^1.1.2"
+  checksum: 10/6e30c621170e45f1fd6735e84d02ee8e02a3ab95cb109499d5308cbe5d1e84d0cd0e10b48cc43c76aa61450ae1b03a7f89c37c10fc0de8d4998b42aab0f268cc
+  languageName: node
+  linkType: hard
+
 "call-bind@npm:^1.0.2, call-bind@npm:^1.0.5, call-bind@npm:^1.0.6, call-bind@npm:^1.0.7":
   version: 1.0.7
   resolution: "call-bind@npm:1.0.7"
@@ -7299,6 +7402,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"call-bind@npm:^1.0.8":
+  version: 1.0.8
+  resolution: "call-bind@npm:1.0.8"
+  dependencies:
+    call-bind-apply-helpers: "npm:^1.0.0"
+    es-define-property: "npm:^1.0.0"
+    get-intrinsic: "npm:^1.2.4"
+    set-function-length: "npm:^1.2.2"
+  checksum: 10/659b03c79bbfccf0cde3a79e7d52570724d7290209823e1ca5088f94b52192dc1836b82a324d0144612f816abb2f1734447438e38d9dafe0b3f82c2a1b9e3bce
+  languageName: node
+  linkType: hard
+
+"call-bound@npm:^1.0.2, call-bound@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "call-bound@npm:1.0.3"
+  dependencies:
+    call-bind-apply-helpers: "npm:^1.0.1"
+    get-intrinsic: "npm:^1.2.6"
+  checksum: 10/c39a8245f68cdb7c1f5eea7b3b1e3a7a90084ea6efebb78ebc454d698ade2c2bb42ec033abc35f1e596d62496b6100e9f4cdfad1956476c510130e2cda03266d
+  languageName: node
+  linkType: hard
+
 "callsites@npm:^3.0.0":
   version: 3.1.0
   resolution: "callsites@npm:3.1.0"
@@ -8201,7 +8326,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3":
+"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.6":
   version: 7.0.6
   resolution: "cross-spawn@npm:7.0.6"
   dependencies:
@@ -8731,6 +8856,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"data-view-buffer@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "data-view-buffer@npm:1.0.2"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    es-errors: "npm:^1.3.0"
+    is-data-view: "npm:^1.0.2"
+  checksum: 10/c10b155a4e93999d3a215d08c23eea95f865e1f510b2e7748fcae1882b776df1afe8c99f483ace7fc0e5a3193ab08da138abebc9829d12003746c5a338c4d644
+  languageName: node
+  linkType: hard
+
 "data-view-byte-length@npm:^1.0.1":
   version: 1.0.1
   resolution: "data-view-byte-length@npm:1.0.1"
@@ -8742,6 +8878,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"data-view-byte-length@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "data-view-byte-length@npm:1.0.2"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    es-errors: "npm:^1.3.0"
+    is-data-view: "npm:^1.0.2"
+  checksum: 10/2a47055fcf1ab3ec41b00b6f738c6461a841391a643c9ed9befec1117c1765b4d492661d97fb7cc899200c328949dca6ff189d2c6537d96d60e8a02dfe3c95f7
+  languageName: node
+  linkType: hard
+
 "data-view-byte-offset@npm:^1.0.0":
   version: 1.0.0
   resolution: "data-view-byte-offset@npm:1.0.0"
@@ -8753,6 +8900,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"data-view-byte-offset@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "data-view-byte-offset@npm:1.0.1"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    es-errors: "npm:^1.3.0"
+    is-data-view: "npm:^1.0.1"
+  checksum: 10/fa3bdfa0968bea6711ee50375094b39f561bce3f15f9e558df59de9c25f0bdd4cddc002d9c1d70ac7772ebd36854a7e22d1761e7302a934e6f1c2263bcf44aa2
+  languageName: node
+  linkType: hard
+
 "dateformat@npm:^3.0.3":
   version: 3.0.3
   resolution: "dateformat@npm:3.0.3"
@@ -8776,7 +8934,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:^4.3.5, debug@npm:~4.4.0":
+"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:^4.3.7, debug@npm:~4.4.0":
   version: 4.4.0
   resolution: "debug@npm:4.4.0"
   dependencies:
@@ -9027,15 +9185,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"doctrine@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "doctrine@npm:3.0.0"
-  dependencies:
-    esutils: "npm:^2.0.2"
-  checksum: 10/b4b28f1df5c563f7d876e7461254a4597b8cabe915abe94d7c5d1633fed263fcf9a85e8d3836591fc2d040108e822b0d32758e5ec1fe31c590dc7e08086e3e48
-  languageName: node
-  linkType: hard
-
 "dom-accessibility-api@npm:^0.5.6, dom-accessibility-api@npm:^0.5.9":
   version: 0.5.14
   resolution: "dom-accessibility-api@npm:0.5.14"
@@ -9132,6 +9281,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dunder-proto@npm:^1.0.0, dunder-proto@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "dunder-proto@npm:1.0.1"
+  dependencies:
+    call-bind-apply-helpers: "npm:^1.0.1"
+    es-errors: "npm:^1.3.0"
+    gopd: "npm:^1.2.0"
+  checksum: 10/5add88a3d68d42d6e6130a0cac450b7c2edbe73364bbd2fc334564418569bea97c6943a8fcd70e27130bf32afc236f30982fc4905039b703f23e9e0433c29934
+  languageName: node
+  linkType: hard
+
 "duplexer@npm:^0.1.1, duplexer@npm:^0.1.2":
   version: 0.1.2
   resolution: "duplexer@npm:0.1.2"
@@ -9455,6 +9615,61 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-abstract@npm:^1.23.5, es-abstract@npm:^1.23.6":
+  version: 1.23.7
+  resolution: "es-abstract@npm:1.23.7"
+  dependencies:
+    array-buffer-byte-length: "npm:^1.0.2"
+    arraybuffer.prototype.slice: "npm:^1.0.4"
+    available-typed-arrays: "npm:^1.0.7"
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
+    data-view-buffer: "npm:^1.0.2"
+    data-view-byte-length: "npm:^1.0.2"
+    data-view-byte-offset: "npm:^1.0.1"
+    es-define-property: "npm:^1.0.1"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.0.0"
+    es-set-tostringtag: "npm:^2.0.3"
+    es-to-primitive: "npm:^1.3.0"
+    function.prototype.name: "npm:^1.1.8"
+    get-intrinsic: "npm:^1.2.6"
+    get-symbol-description: "npm:^1.1.0"
+    globalthis: "npm:^1.0.4"
+    gopd: "npm:^1.2.0"
+    has-property-descriptors: "npm:^1.0.2"
+    has-proto: "npm:^1.2.0"
+    has-symbols: "npm:^1.1.0"
+    hasown: "npm:^2.0.2"
+    internal-slot: "npm:^1.1.0"
+    is-array-buffer: "npm:^3.0.5"
+    is-callable: "npm:^1.2.7"
+    is-data-view: "npm:^1.0.2"
+    is-regex: "npm:^1.2.1"
+    is-shared-array-buffer: "npm:^1.0.4"
+    is-string: "npm:^1.1.1"
+    is-typed-array: "npm:^1.1.15"
+    is-weakref: "npm:^1.1.0"
+    math-intrinsics: "npm:^1.1.0"
+    object-inspect: "npm:^1.13.3"
+    object-keys: "npm:^1.1.1"
+    object.assign: "npm:^4.1.7"
+    regexp.prototype.flags: "npm:^1.5.3"
+    safe-array-concat: "npm:^1.1.3"
+    safe-regex-test: "npm:^1.1.0"
+    string.prototype.trim: "npm:^1.2.10"
+    string.prototype.trimend: "npm:^1.0.9"
+    string.prototype.trimstart: "npm:^1.0.8"
+    typed-array-buffer: "npm:^1.0.3"
+    typed-array-byte-length: "npm:^1.0.3"
+    typed-array-byte-offset: "npm:^1.0.4"
+    typed-array-length: "npm:^1.0.7"
+    unbox-primitive: "npm:^1.1.0"
+    which-typed-array: "npm:^1.1.18"
+  checksum: 10/c079f4e3fe25af0bccf483383a2dd170d69483f93cbd34ad534da0749d3634f59f907edfee898963a9fd5c507d16336fa3d5ce77e1d5d36eae6c00d835ebd423
+  languageName: node
+  linkType: hard
+
 "es-array-method-boxes-properly@npm:^1.0.0":
   version: 1.0.0
   resolution: "es-array-method-boxes-properly@npm:1.0.0"
@@ -9471,6 +9686,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-define-property@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "es-define-property@npm:1.0.1"
+  checksum: 10/f8dc9e660d90919f11084db0a893128f3592b781ce967e4fccfb8f3106cb83e400a4032c559184ec52ee1dbd4b01e7776c7cd0b3327b1961b1a4a7008920fe78
+  languageName: node
+  linkType: hard
+
 "es-errors@npm:^1.2.1, es-errors@npm:^1.3.0":
   version: 1.3.0
   resolution: "es-errors@npm:1.3.0"
@@ -9478,25 +9700,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-iterator-helpers@npm:^1.0.19":
-  version: 1.0.19
-  resolution: "es-iterator-helpers@npm:1.0.19"
+"es-iterator-helpers@npm:^1.1.0":
+  version: 1.2.1
+  resolution: "es-iterator-helpers@npm:1.2.1"
   dependencies:
-    call-bind: "npm:^1.0.7"
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
     define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.3"
+    es-abstract: "npm:^1.23.6"
     es-errors: "npm:^1.3.0"
     es-set-tostringtag: "npm:^2.0.3"
     function-bind: "npm:^1.1.2"
-    get-intrinsic: "npm:^1.2.4"
-    globalthis: "npm:^1.0.3"
+    get-intrinsic: "npm:^1.2.6"
+    globalthis: "npm:^1.0.4"
+    gopd: "npm:^1.2.0"
     has-property-descriptors: "npm:^1.0.2"
-    has-proto: "npm:^1.0.3"
-    has-symbols: "npm:^1.0.3"
-    internal-slot: "npm:^1.0.7"
-    iterator.prototype: "npm:^1.1.2"
-    safe-array-concat: "npm:^1.1.2"
-  checksum: 10/980a8081cf6798fe17fcea193b0448d784d72d76aca7240b10813207c67e3dc0d8a23992263870c4fc291da5a946935b0c56dec4fa1a9de8fee0165e4fa1fc58
+    has-proto: "npm:^1.2.0"
+    has-symbols: "npm:^1.1.0"
+    internal-slot: "npm:^1.1.0"
+    iterator.prototype: "npm:^1.1.4"
+    safe-array-concat: "npm:^1.1.3"
+  checksum: 10/802e0e8427a05ff4a5b0c70c7fdaaeff37cdb81a28694aeb7bfb831c6ab340d8f3deeb67b96732ff9e9699ea240524d5ea8a9a6a335fcd15aa3983b27b06113f
   languageName: node
   linkType: hard
 
@@ -9540,6 +9764,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-to-primitive@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "es-to-primitive@npm:1.3.0"
+  dependencies:
+    is-callable: "npm:^1.2.7"
+    is-date-object: "npm:^1.0.5"
+    is-symbol: "npm:^1.0.4"
+  checksum: 10/17faf35c221aad59a16286cbf58ef6f080bf3c485dff202c490d074d8e74da07884e29b852c245d894eac84f73c58330ec956dfd6d02c0b449d75eb1012a3f9b
+  languageName: node
+  linkType: hard
+
 "esbuild-sass-plugin@npm:^3.3.1":
   version: 3.3.1
   resolution: "esbuild-sass-plugin@npm:3.3.1"
@@ -9786,18 +10021,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-import-resolver-typescript@npm:^3.6.3":
-  version: 3.6.3
-  resolution: "eslint-import-resolver-typescript@npm:3.6.3"
+"eslint-import-resolver-typescript@npm:^3.7.0":
+  version: 3.7.0
+  resolution: "eslint-import-resolver-typescript@npm:3.7.0"
   dependencies:
     "@nolyfill/is-core-module": "npm:1.0.39"
-    debug: "npm:^4.3.5"
+    debug: "npm:^4.3.7"
     enhanced-resolve: "npm:^5.15.0"
-    eslint-module-utils: "npm:^2.8.1"
     fast-glob: "npm:^3.3.2"
     get-tsconfig: "npm:^4.7.5"
     is-bun-module: "npm:^1.0.2"
     is-glob: "npm:^4.0.3"
+    stable-hash: "npm:^0.0.4"
   peerDependencies:
     eslint: "*"
     eslint-plugin-import: "*"
@@ -9807,25 +10042,25 @@ __metadata:
       optional: true
     eslint-plugin-import-x:
       optional: true
-  checksum: 10/5f9956dbbd0becc3d6c6cb945dad0e5e6f529cfd0f488d5688f3c59840cd7f4a44ab6aee0f54b5c4188134dab9a01cb63c1201767bde7fc330b7c1a14747f8ac
+  checksum: 10/8158730c11e562c56ed9bf7236dc75bce35b6992dc32c39ac2f4177ab77fca97b95999850204a6458054243607b54aee88c028a61fed4184f24f425fa1afff01
   languageName: node
   linkType: hard
 
-"eslint-module-utils@npm:^2.8.1, eslint-module-utils@npm:^2.9.0":
-  version: 2.11.0
-  resolution: "eslint-module-utils@npm:2.11.0"
+"eslint-module-utils@npm:^2.12.0":
+  version: 2.12.0
+  resolution: "eslint-module-utils@npm:2.12.0"
   dependencies:
     debug: "npm:^3.2.7"
   peerDependenciesMeta:
     eslint:
       optional: true
-  checksum: 10/1ba42cf48c5f9ec3b76dfa42c16f1c24c10508313689425c05ccb1d0eaa34bdc5c5b9c0c033cd402e9c429666bd3eb8c6d0c66565b0c00949fae743ad3643c95
+  checksum: 10/dd27791147eca17366afcb83f47d6825b6ce164abb256681e5de4ec1d7e87d8605641eb869298a0dbc70665e2446dbcc2f40d3e1631a9475dd64dd23d4ca5dee
   languageName: node
   linkType: hard
 
-"eslint-plugin-import@npm:^2.30.0":
-  version: 2.30.0
-  resolution: "eslint-plugin-import@npm:2.30.0"
+"eslint-plugin-import@npm:^2.31.0":
+  version: 2.31.0
+  resolution: "eslint-plugin-import@npm:2.31.0"
   dependencies:
     "@rtsao/scc": "npm:^1.1.0"
     array-includes: "npm:^3.1.8"
@@ -9835,7 +10070,7 @@ __metadata:
     debug: "npm:^3.2.7"
     doctrine: "npm:^2.1.0"
     eslint-import-resolver-node: "npm:^0.3.9"
-    eslint-module-utils: "npm:^2.9.0"
+    eslint-module-utils: "npm:^2.12.0"
     hasown: "npm:^2.0.2"
     is-core-module: "npm:^2.15.1"
     is-glob: "npm:^4.0.3"
@@ -9844,32 +10079,33 @@ __metadata:
     object.groupby: "npm:^1.0.3"
     object.values: "npm:^1.2.0"
     semver: "npm:^6.3.1"
+    string.prototype.trimend: "npm:^1.0.8"
     tsconfig-paths: "npm:^3.15.0"
   peerDependencies:
-    eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-  checksum: 10/a5f85dfe76e27286c28a01d137769726ce3f758bcc03aa6b6f9e18700a40a08f57239f82e07efcab763c4b03a02d425edcc29fbecf40aad0124286978c6bc63c
+    eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
+  checksum: 10/6b76bd009ac2db0615d9019699d18e2a51a86cb8c1d0855a35fb1b418be23b40239e6debdc6e8c92c59f1468ed0ea8d7b85c817117a113d5cc225be8a02ad31c
   languageName: node
   linkType: hard
 
-"eslint-plugin-react-hooks@npm:^4.6.2":
-  version: 4.6.2
-  resolution: "eslint-plugin-react-hooks@npm:4.6.2"
+"eslint-plugin-react-hooks@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "eslint-plugin-react-hooks@npm:5.1.0"
   peerDependencies:
-    eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
-  checksum: 10/5a0680941f34e70cf505bcb6082df31a3e445d193ee95a88ff3483041eb944f4cefdaf7e81b0eb1feb4eeceee8c7c6ddb8a2a6e8c4c0388514a42e16ac7b7a69
+    eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+  checksum: 10/b6778fd9e1940b06868921309e8b269426e17eda555816d4b71def4dcf0572de1199fdb627ac09ce42160b9569a93cd9b0fd81b740ab4df98205461c53997a43
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:^7.36.1":
-  version: 7.36.1
-  resolution: "eslint-plugin-react@npm:7.36.1"
+"eslint-plugin-react@npm:^7.37.2":
+  version: 7.37.2
+  resolution: "eslint-plugin-react@npm:7.37.2"
   dependencies:
     array-includes: "npm:^3.1.8"
     array.prototype.findlast: "npm:^1.2.5"
     array.prototype.flatmap: "npm:^1.3.2"
     array.prototype.tosorted: "npm:^1.1.4"
     doctrine: "npm:^2.1.0"
-    es-iterator-helpers: "npm:^1.0.19"
+    es-iterator-helpers: "npm:^1.1.0"
     estraverse: "npm:^5.3.0"
     hasown: "npm:^2.0.2"
     jsx-ast-utils: "npm:^2.4.1 || ^3.0.0"
@@ -9884,72 +10120,80 @@ __metadata:
     string.prototype.repeat: "npm:^1.0.0"
   peerDependencies:
     eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
-  checksum: 10/bca154b446c35af4859a92fd043dcfe5c74851eb27652234020548570bb81d37cc9f1eb1795b3c9e7514de6c9b48f42fcc00153062eca879dab45ab84e49d0b1
+  checksum: 10/df2f7ab198018d3378f305a8a5ceceebc9bd31f019fc7567a2ef9c77789dc8a6a2c3c3957f8b0805f26c11c02f9f86c972e02cd0eda12f4d0370526c11f8a9a3
   languageName: node
   linkType: hard
 
-"eslint-scope@npm:^7.2.2":
-  version: 7.2.2
-  resolution: "eslint-scope@npm:7.2.2"
+"eslint-scope@npm:^8.2.0":
+  version: 8.2.0
+  resolution: "eslint-scope@npm:8.2.0"
   dependencies:
     esrecurse: "npm:^4.3.0"
     estraverse: "npm:^5.2.0"
-  checksum: 10/5c660fb905d5883ad018a6fea2b49f3cb5b1cbf2cd4bd08e98646e9864f9bc2c74c0839bed2d292e90a4a328833accc197c8f0baed89cbe8d605d6f918465491
+  checksum: 10/cd9ab60d5a68f3a0fcac04d1cff5a7383d0f331964d5f1c446259123caec5b3ccc542284d07846e4f4d1389da77750821cc9a6e1ce18558c674977351666f9a6
   languageName: node
   linkType: hard
 
-"eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.1, eslint-visitor-keys@npm:^3.4.3":
+"eslint-visitor-keys@npm:^3.3.0":
   version: 3.4.3
   resolution: "eslint-visitor-keys@npm:3.4.3"
   checksum: 10/3f357c554a9ea794b094a09bd4187e5eacd1bc0d0653c3adeb87962c548e6a1ab8f982b86963ae1337f5d976004146536dcee5d0e2806665b193fbfbf1a9231b
   languageName: node
   linkType: hard
 
-"eslint@npm:^8.57.1":
-  version: 8.57.1
-  resolution: "eslint@npm:8.57.1"
+"eslint-visitor-keys@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "eslint-visitor-keys@npm:4.2.0"
+  checksum: 10/9651b3356b01760e586b4c631c5268c0e1a85236e3292bf754f0472f465bf9a856c0ddc261fceace155334118c0151778effafbab981413dbf9288349343fa25
+  languageName: node
+  linkType: hard
+
+"eslint@npm:^9.17.0":
+  version: 9.17.0
+  resolution: "eslint@npm:9.17.0"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.2.0"
-    "@eslint-community/regexpp": "npm:^4.6.1"
-    "@eslint/eslintrc": "npm:^2.1.4"
-    "@eslint/js": "npm:8.57.1"
-    "@humanwhocodes/config-array": "npm:^0.13.0"
+    "@eslint-community/regexpp": "npm:^4.12.1"
+    "@eslint/config-array": "npm:^0.19.0"
+    "@eslint/core": "npm:^0.9.0"
+    "@eslint/eslintrc": "npm:^3.2.0"
+    "@eslint/js": "npm:9.17.0"
+    "@eslint/plugin-kit": "npm:^0.2.3"
+    "@humanfs/node": "npm:^0.16.6"
     "@humanwhocodes/module-importer": "npm:^1.0.1"
-    "@nodelib/fs.walk": "npm:^1.2.8"
-    "@ungap/structured-clone": "npm:^1.2.0"
+    "@humanwhocodes/retry": "npm:^0.4.1"
+    "@types/estree": "npm:^1.0.6"
+    "@types/json-schema": "npm:^7.0.15"
     ajv: "npm:^6.12.4"
     chalk: "npm:^4.0.0"
-    cross-spawn: "npm:^7.0.2"
+    cross-spawn: "npm:^7.0.6"
     debug: "npm:^4.3.2"
-    doctrine: "npm:^3.0.0"
     escape-string-regexp: "npm:^4.0.0"
-    eslint-scope: "npm:^7.2.2"
-    eslint-visitor-keys: "npm:^3.4.3"
-    espree: "npm:^9.6.1"
-    esquery: "npm:^1.4.2"
+    eslint-scope: "npm:^8.2.0"
+    eslint-visitor-keys: "npm:^4.2.0"
+    espree: "npm:^10.3.0"
+    esquery: "npm:^1.5.0"
     esutils: "npm:^2.0.2"
     fast-deep-equal: "npm:^3.1.3"
-    file-entry-cache: "npm:^6.0.1"
+    file-entry-cache: "npm:^8.0.0"
     find-up: "npm:^5.0.0"
     glob-parent: "npm:^6.0.2"
-    globals: "npm:^13.19.0"
-    graphemer: "npm:^1.4.0"
     ignore: "npm:^5.2.0"
     imurmurhash: "npm:^0.1.4"
     is-glob: "npm:^4.0.0"
-    is-path-inside: "npm:^3.0.3"
-    js-yaml: "npm:^4.1.0"
     json-stable-stringify-without-jsonify: "npm:^1.0.1"
-    levn: "npm:^0.4.1"
     lodash.merge: "npm:^4.6.2"
     minimatch: "npm:^3.1.2"
     natural-compare: "npm:^1.4.0"
     optionator: "npm:^0.9.3"
-    strip-ansi: "npm:^6.0.1"
-    text-table: "npm:^0.2.0"
+  peerDependencies:
+    jiti: "*"
+  peerDependenciesMeta:
+    jiti:
+      optional: true
   bin:
     eslint: bin/eslint.js
-  checksum: 10/5504fa24879afdd9f9929b2fbfc2ee9b9441a3d464efd9790fbda5f05738858530182029f13323add68d19fec749d3ab4a70320ded091ca4432b1e9cc4ed104c
+  checksum: 10/a48ee67dd4e737974bbb49ca5d12d0ce35bcd874507807599e3655bb398320ab27c9deed1aad508a963967815e626c21208f52158c2fc0796d0cc8186528efeb
   languageName: node
   linkType: hard
 
@@ -9960,14 +10204,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"espree@npm:^9.6.0, espree@npm:^9.6.1":
-  version: 9.6.1
-  resolution: "espree@npm:9.6.1"
+"espree@npm:^10.0.1, espree@npm:^10.3.0":
+  version: 10.3.0
+  resolution: "espree@npm:10.3.0"
   dependencies:
-    acorn: "npm:^8.9.0"
+    acorn: "npm:^8.14.0"
     acorn-jsx: "npm:^5.3.2"
-    eslint-visitor-keys: "npm:^3.4.1"
-  checksum: 10/255ab260f0d711a54096bdeda93adff0eadf02a6f9b92f02b323e83a2b7fc258797919437ad331efec3930475feb0142c5ecaaf3cdab4befebd336d47d3f3134
+    eslint-visitor-keys: "npm:^4.2.0"
+  checksum: 10/3412d44d4204c9e29d6b5dd0277400cfa0cd68495dc09eae1b9ce79d0c8985c1c5cc09cb9ba32a1cd963f48a49b0c46bdb7736afe395a300aa6bb1c0d86837e8
   languageName: node
   linkType: hard
 
@@ -9981,12 +10225,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esquery@npm:^1.4.2":
-  version: 1.5.0
-  resolution: "esquery@npm:1.5.0"
+"esquery@npm:^1.5.0":
+  version: 1.6.0
+  resolution: "esquery@npm:1.6.0"
   dependencies:
     estraverse: "npm:^5.1.0"
-  checksum: 10/e65fcdfc1e0ff5effbf50fb4f31ea20143ae5df92bb2e4953653d8d40aa4bc148e0d06117a592ce4ea53eeab1dafdfded7ea7e22a5be87e82d73757329a1b01d
+  checksum: 10/c587fb8ec9ed83f2b1bc97cf2f6854cc30bf784a79d62ba08c6e358bf22280d69aee12827521cf38e69ae9761d23fb7fde593ce315610f85655c139d99b05e5a
   languageName: node
   linkType: hard
 
@@ -10365,12 +10609,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-entry-cache@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "file-entry-cache@npm:6.0.1"
+"file-entry-cache@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "file-entry-cache@npm:8.0.0"
   dependencies:
-    flat-cache: "npm:^3.0.4"
-  checksum: 10/099bb9d4ab332cb93c48b14807a6918a1da87c45dce91d4b61fd40e6505d56d0697da060cb901c729c90487067d93c9243f5da3dc9c41f0358483bfdebca736b
+    flat-cache: "npm:^4.0.0"
+  checksum: 10/afe55c4de4e0d226a23c1eae62a7219aafb390859122608a89fa4df6addf55c7fd3f1a2da6f5b41e7cdff496e4cf28bbd215d53eab5c817afa96d2b40c81bfb0
   languageName: node
   linkType: hard
 
@@ -10468,13 +10712,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flat-cache@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "flat-cache@npm:3.0.4"
+"flat-cache@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "flat-cache@npm:4.0.1"
   dependencies:
-    flatted: "npm:^3.1.0"
-    rimraf: "npm:^3.0.2"
-  checksum: 10/9fe5d0cb97c988e3b25242e71346965fae22757674db3fca14206850af2efa3ca3b04a3ba0eba8d5e20fd8a3be80a2e14b1c2917e70ffe1acb98a8c3327e4c9f
+    flatted: "npm:^3.2.9"
+    keyv: "npm:^4.5.4"
+  checksum: 10/58ce851d9045fffc7871ce2bd718bc485ad7e777bf748c054904b87c351ff1080c2c11da00788d78738bfb51b71e4d5ea12d13b98eb36e3358851ffe495b62dc
   languageName: node
   linkType: hard
 
@@ -10487,10 +10731,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flatted@npm:^3.1.0":
-  version: 3.1.1
-  resolution: "flatted@npm:3.1.1"
-  checksum: 10/2ce58ed083be7f7ec4500deba0a58df0673487ddadf14ab197d149149e965db6b5d53bedb40d59dee180afba97b093326c6f836385004ea8929b7beb18bb6033
+"flatted@npm:^3.2.9":
+  version: 3.3.2
+  resolution: "flatted@npm:3.3.2"
+  checksum: 10/ac3c159742e01d0e860a861164bcfd35bb567ccbebb8a0dd041e61cf3c64a435b917dd1e7ed1c380c2ebca85735fb16644485ec33665bc6aafc3b316aa1eed44
   languageName: node
   linkType: hard
 
@@ -10684,7 +10928,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"function.prototype.name@npm:^1.1.0, function.prototype.name@npm:^1.1.2, function.prototype.name@npm:^1.1.5, function.prototype.name@npm:^1.1.6":
+"function.prototype.name@npm:^1.1.0, function.prototype.name@npm:^1.1.2, function.prototype.name@npm:^1.1.6":
   version: 1.1.6
   resolution: "function.prototype.name@npm:1.1.6"
   dependencies:
@@ -10696,6 +10940,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"function.prototype.name@npm:^1.1.8":
+  version: 1.1.8
+  resolution: "function.prototype.name@npm:1.1.8"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
+    define-properties: "npm:^1.2.1"
+    functions-have-names: "npm:^1.2.3"
+    hasown: "npm:^2.0.2"
+    is-callable: "npm:^1.2.7"
+  checksum: 10/25b9e5bea936732a6f0c0c08db58cc0d609ac1ed458c6a07ead46b32e7b9bf3fe5887796c3f83d35994efbc4fdde81c08ac64135b2c399b8f2113968d44082bc
+  languageName: node
+  linkType: hard
+
 "functions-have-names@npm:^1.2.3":
   version: 1.2.3
   resolution: "functions-have-names@npm:1.2.3"
@@ -10779,7 +11037,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.1.1, get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
+"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
   version: 1.2.4
   resolution: "get-intrinsic@npm:1.2.4"
   dependencies:
@@ -10792,6 +11050,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6":
+  version: 1.2.6
+  resolution: "get-intrinsic@npm:1.2.6"
+  dependencies:
+    call-bind-apply-helpers: "npm:^1.0.1"
+    dunder-proto: "npm:^1.0.0"
+    es-define-property: "npm:^1.0.1"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.0.0"
+    function-bind: "npm:^1.1.2"
+    gopd: "npm:^1.2.0"
+    has-symbols: "npm:^1.1.0"
+    hasown: "npm:^2.0.2"
+    math-intrinsics: "npm:^1.0.0"
+  checksum: 10/a1ffae6d7893a6fa0f4d1472adbc85095edd6b3b0943ead97c3738539cecb19d422ff4d48009eed8c3c27ad678c2b1e38a83b1a1e96b691d13ed8ecefca1068d
+  languageName: node
+  linkType: hard
+
 "get-package-type@npm:^0.1.0":
   version: 0.1.0
   resolution: "get-package-type@npm:0.1.0"
@@ -10871,6 +11147,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-symbol-description@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "get-symbol-description@npm:1.1.0"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.6"
+  checksum: 10/a353e3a9595a74720b40fb5bae3ba4a4f826e186e83814d93375182384265676f59e49998b9cdfac4a2225ce95a3d32a68f502a2c5619303987f1c183ab80494
+  languageName: node
+  linkType: hard
+
 "get-tsconfig@npm:^4.7.5":
   version: 4.7.5
   resolution: "get-tsconfig@npm:4.7.5"
@@ -11064,12 +11351,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globals@npm:^13.19.0":
-  version: 13.19.0
-  resolution: "globals@npm:13.19.0"
-  dependencies:
-    type-fest: "npm:^0.20.2"
-  checksum: 10/f365fc2a4eb21a264d0f2a6355ddf4ee32983e0817ec48a517a56d7d1944124c763e81cae13ae26fa9a7d6c7ab826b2e796f87b022a674336275da0e6249366e
+"globals@npm:^14.0.0":
+  version: 14.0.0
+  resolution: "globals@npm:14.0.0"
+  checksum: 10/03939c8af95c6df5014b137cac83aa909090c3a3985caef06ee9a5a669790877af8698ab38007e4c0186873adc14c0b13764acc754b16a754c216cc56aa5f021
   languageName: node
   linkType: hard
 
@@ -11082,6 +11367,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globalthis@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "globalthis@npm:1.0.4"
+  dependencies:
+    define-properties: "npm:^1.2.1"
+    gopd: "npm:^1.0.1"
+  checksum: 10/1f1fd078fb2f7296306ef9dd51019491044ccf17a59ed49d375b576ca108ff37e47f3d29aead7add40763574a992f16a5367dd1e2173b8634ef18556ab719ac4
+  languageName: node
+  linkType: hard
+
 "globby@npm:11.1.0, globby@npm:^11.0.3":
   version: 11.1.0
   resolution: "globby@npm:11.1.0"
@@ -11157,6 +11452,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"gopd@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "gopd@npm:1.2.0"
+  checksum: 10/94e296d69f92dc1c0768fcfeecfb3855582ab59a7c75e969d5f96ce50c3d201fd86d5a2857c22565764d5bb8a816c7b1e58f133ec318cd56274da36c5e3fb1a1
+  languageName: node
+  linkType: hard
+
 "graceful-fs@npm:4.2.11, graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.15, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
@@ -11184,6 +11486,7 @@ __metadata:
     "@bugsnag/plugin-express": "npm:^8.0.0"
     "@bugsnag/plugin-react": "npm:^8.0.0"
     "@dnd-kit/core": "npm:^6.1.0"
+    "@eslint/js": "npm:^9.17.0"
     "@fortawesome/fontawesome-svg-core": "npm:^6.5.2"
     "@fortawesome/free-brands-svg-icons": "npm:^6.5.2"
     "@fortawesome/free-solid-svg-icons": "npm:^6.5.2"
@@ -11243,8 +11546,6 @@ __metadata:
     "@types/url-parse": "npm:^1.4.8"
     "@types/webfontloader": "npm:^1.6.34"
     "@types/workerpool": "npm:^6.1.0"
-    "@typescript-eslint/eslint-plugin": "npm:^8.10.0"
-    "@typescript-eslint/parser": "npm:^8.10.0"
     "@vitejs/plugin-react": "npm:^4.3.1"
     "@wojtekmaj/enzyme-adapter-react-17": "npm:^0.8.0"
     "@yarnpkg/types": "npm:^4.0.0"
@@ -11269,12 +11570,12 @@ __metadata:
     embla-carousel-react: "npm:^8.1.7"
     entities: "npm:^4.4.0"
     enzyme: "npm:^3.11.0"
-    eslint: "npm:^8.57.1"
+    eslint: "npm:^9.17.0"
     eslint-config-prettier: "npm:^9.1.0"
-    eslint-import-resolver-typescript: "npm:^3.6.3"
-    eslint-plugin-import: "npm:^2.30.0"
-    eslint-plugin-react: "npm:^7.36.1"
-    eslint-plugin-react-hooks: "npm:^4.6.2"
+    eslint-import-resolver-typescript: "npm:^3.7.0"
+    eslint-plugin-import: "npm:^2.31.0"
+    eslint-plugin-react: "npm:^7.37.2"
+    eslint-plugin-react-hooks: "npm:^5.1.0"
     expr-eval: "npm:^2.0.2"
     express: "npm:^4.21.2"
     express-async-errors: "npm:^3.1.1"
@@ -11361,6 +11662,7 @@ __metadata:
     tsx: "npm:^4.16.2"
     typeorm: "npm:^0.3.20"
     typescript: "npm:~5.7.2"
+    typescript-eslint: "npm:^8.18.1"
     unist-util-visit: "npm:^2.0.0"
     url-join: "npm:^4.0.0"
     url-parse: "npm:^1.5.10"
@@ -11477,6 +11779,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"has-proto@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "has-proto@npm:1.2.0"
+  dependencies:
+    dunder-proto: "npm:^1.0.0"
+  checksum: 10/7eaed07728eaa28b77fadccabce53f30de467ff186a766872669a833ac2e87d8922b76a22cc58339d7e0277aefe98d6d00762113b27a97cdf65adcf958970935
+  languageName: node
+  linkType: hard
+
 "has-symbols@npm:^1.0.1, has-symbols@npm:^1.0.3":
   version: 1.0.3
   resolution: "has-symbols@npm:1.0.3"
@@ -11484,6 +11795,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"has-symbols@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "has-symbols@npm:1.1.0"
+  checksum: 10/959385c98696ebbca51e7534e0dc723ada325efa3475350951363cce216d27373e0259b63edb599f72eb94d6cde8577b4b2375f080b303947e560f85692834fa
+  languageName: node
+  linkType: hard
+
 "has-tostringtag@npm:^1.0.0, has-tostringtag@npm:^1.0.2":
   version: 1.0.2
   resolution: "has-tostringtag@npm:1.0.2"
@@ -12045,6 +12363,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"internal-slot@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "internal-slot@npm:1.1.0"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    hasown: "npm:^2.0.2"
+    side-channel: "npm:^1.1.0"
+  checksum: 10/1d5219273a3dab61b165eddf358815eefc463207db33c20fcfca54717da02e3f492003757721f972fd0bf21e4b426cab389c5427b99ceea4b8b670dc88ee6d4a
+  languageName: node
+  linkType: hard
+
 "interpret@npm:^1.0.0":
   version: 1.4.0
   resolution: "interpret@npm:1.4.0"
@@ -12103,6 +12432,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-array-buffer@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "is-array-buffer@npm:3.0.5"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
+    get-intrinsic: "npm:^1.2.6"
+  checksum: 10/ef1095c55b963cd0dcf6f88a113e44a0aeca91e30d767c475e7d746d28d1195b10c5076b94491a7a0cd85020ca6a4923070021d74651d093dc909e9932cf689b
+  languageName: node
+  linkType: hard
+
 "is-arrayish@npm:^0.2.1":
   version: 0.2.1
   resolution: "is-arrayish@npm:0.2.1"
@@ -12133,6 +12473,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-bigint@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "is-bigint@npm:1.1.0"
+  dependencies:
+    has-bigints: "npm:^1.0.2"
+  checksum: 10/10cf327310d712fe227cfaa32d8b11814c214392b6ac18c827f157e1e85363cf9c8e2a22df526689bd5d25e53b58cc110894787afb54e138e7c504174dba15fd
+  languageName: node
+  linkType: hard
+
 "is-binary-path@npm:~2.1.0":
   version: 2.1.0
   resolution: "is-binary-path@npm:2.1.0"
@@ -12152,6 +12501,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-boolean-object@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "is-boolean-object@npm:1.2.1"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/5a15524635c9334ebbd668f20a6cbf023adceed5725ec96a50056d21ae65f52759d04a8fa7d7febf00ff3bc4e6d3837638eb84be572f287bcfd15f8b8facde43
+  languageName: node
+  linkType: hard
+
 "is-buffer@npm:^2.0.0":
   version: 2.0.5
   resolution: "is-buffer@npm:2.0.5"
@@ -12211,6 +12570,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-data-view@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "is-data-view@npm:1.0.2"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    get-intrinsic: "npm:^1.2.6"
+    is-typed-array: "npm:^1.1.13"
+  checksum: 10/357e9a48fa38f369fd6c4c3b632a3ab2b8adca14997db2e4b3fe94c4cd0a709af48e0fb61b02c64a90c0dd542fd489d49c2d03157b05ae6c07f5e4dec9e730a8
+  languageName: node
+  linkType: hard
+
 "is-date-object@npm:^1.0.1, is-date-object@npm:^1.0.5":
   version: 1.0.5
   resolution: "is-date-object@npm:1.0.5"
@@ -12220,6 +12590,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-date-object@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "is-date-object@npm:1.1.0"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/3a811b2c3176fb31abee1d23d3dc78b6c65fd9c07d591fcb67553cab9e7f272728c3dd077d2d738b53f9a2103255b0a6e8dfc9568a7805c56a78b2563e8d1dec
+  languageName: node
+  linkType: hard
+
 "is-decimal@npm:^1.0.0":
   version: 1.0.4
   resolution: "is-decimal@npm:1.0.4"
@@ -12250,12 +12630,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-finalizationregistry@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "is-finalizationregistry@npm:1.0.2"
+"is-finalizationregistry@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "is-finalizationregistry@npm:1.1.1"
   dependencies:
-    call-bind: "npm:^1.0.2"
-  checksum: 10/1b8e9e1bf2075e862315ef9d38ce6d39c43ca9d81d46f73b34473506992f4b0fbaadb47ec9b420a5e76afe3f564d9f1f0d9b552ef272cc2395e0f21d743c9c29
+    call-bound: "npm:^1.0.3"
+  checksum: 10/0bfb145e9a1ba852ddde423b0926d2169ae5fe9e37882cde9e8f69031281a986308df4d982283e152396e88b86562ed2256cbaa5e6390fb840a4c25ab54b8a80
   languageName: node
   linkType: hard
 
@@ -12338,10 +12718,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-map@npm:^2.0.1":
-  version: 2.0.2
-  resolution: "is-map@npm:2.0.2"
-  checksum: 10/60ba910f835f2eacb1fdf5b5a6c60fe1c702d012a7673e6546992bcc0c873f62ada6e13d327f9e48f1720d49c152d6cdecae1fa47a261ef3d247c3ce6f0e1d39
+"is-map@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "is-map@npm:2.0.3"
+  checksum: 10/8de7b41715b08bcb0e5edb0fb9384b80d2d5bcd10e142188f33247d19ff078abaf8e9b6f858e2302d8d05376a26a55cd23a3c9f8ab93292b02fcd2cc9e4e92bb
   languageName: node
   linkType: hard
 
@@ -12359,6 +12739,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-number-object@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "is-number-object@npm:1.1.1"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/a5922fb8779ab1ea3b8a9c144522b3d0bea5d9f8f23f7a72470e61e1e4df47714e28e0154ac011998b709cce260c3c9447ad3cd24a96c2f2a0abfdb2cbdc76c8
+  languageName: node
+  linkType: hard
+
 "is-number@npm:^7.0.0":
   version: 7.0.0
   resolution: "is-number@npm:7.0.0"
@@ -12373,7 +12763,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-path-inside@npm:^3.0.2, is-path-inside@npm:^3.0.3":
+"is-path-inside@npm:^3.0.2":
   version: 3.0.3
   resolution: "is-path-inside@npm:3.0.3"
   checksum: 10/abd50f06186a052b349c15e55b182326f1936c89a78bf6c8f2b707412517c097ce04bc49a0ca221787bc44e1049f51f09a2ffb63d22899051988d3a618ba13e9
@@ -12441,10 +12831,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-set@npm:^2.0.1":
-  version: 2.0.2
-  resolution: "is-set@npm:2.0.2"
-  checksum: 10/d89e82acdc7760993474f529e043f9c4a1d63ed4774d21cc2e331d0e401e5c91c27743cd7c889137028f6a742234759a4bd602368fbdbf0b0321994aefd5603f
+"is-regex@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "is-regex@npm:1.2.1"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    gopd: "npm:^1.2.0"
+    has-tostringtag: "npm:^1.0.2"
+    hasown: "npm:^2.0.2"
+  checksum: 10/c42b7efc5868a5c9a4d8e6d3e9816e8815c611b09535c00fead18a1138455c5cb5e1887f0023a467ad3f9c419d62ba4dc3d9ba8bafe55053914d6d6454a945d2
+  languageName: node
+  linkType: hard
+
+"is-set@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "is-set@npm:2.0.3"
+  checksum: 10/5685df33f0a4a6098a98c72d94d67cad81b2bc72f1fb2091f3d9283c4a1c582123cd709145b02a9745f0ce6b41e3e43f1c944496d1d74d4ea43358be61308669
   languageName: node
   linkType: hard
 
@@ -12457,6 +12859,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-shared-array-buffer@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "is-shared-array-buffer@npm:1.0.4"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+  checksum: 10/0380d7c60cc692856871526ffcd38a8133818a2ee42d47bb8008248a0cd2121d8c8b5f66b6da3cac24bc5784553cacb6faaf678f66bc88c6615b42af2825230e
+  languageName: node
+  linkType: hard
+
 "is-ssh@npm:^1.4.0":
   version: 1.4.0
   resolution: "is-ssh@npm:1.4.0"
@@ -12489,6 +12900,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-string@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "is-string@npm:1.1.1"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/5277cb9e225a7cc8a368a72623b44a99f2cfa139659c6b203553540681ad4276bfc078420767aad0e73eef5f0bd07d4abf39a35d37ec216917879d11cebc1f8b
+  languageName: node
+  linkType: hard
+
 "is-subset@npm:^0.1.1":
   version: 0.1.1
   resolution: "is-subset@npm:0.1.1"
@@ -12505,6 +12926,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-symbol@npm:^1.0.4, is-symbol@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "is-symbol@npm:1.1.1"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    has-symbols: "npm:^1.1.0"
+    safe-regex-test: "npm:^1.1.0"
+  checksum: 10/db495c0d8cd0a7a66b4f4ef7fccee3ab5bd954cb63396e8ac4d32efe0e9b12fdfceb851d6c501216a71f4f21e5ff20fc2ee845a3d52d455e021c466ac5eb2db2
+  languageName: node
+  linkType: hard
+
 "is-text-path@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-text-path@npm:1.0.1"
@@ -12523,6 +12955,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15":
+  version: 1.1.15
+  resolution: "is-typed-array@npm:1.1.15"
+  dependencies:
+    which-typed-array: "npm:^1.1.16"
+  checksum: 10/e8cf60b9ea85667097a6ad68c209c9722cfe8c8edf04d6218366469e51944c5cc25bae45ffb845c23f811d262e4314d3b0168748eb16711aa34d12724cdf0735
+  languageName: node
+  linkType: hard
+
 "is-typedarray@npm:~1.0.0":
   version: 1.0.0
   resolution: "is-typedarray@npm:1.0.0"
@@ -12537,10 +12978,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-weakmap@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "is-weakmap@npm:2.0.1"
-  checksum: 10/289fa4e8ba1bdda40ca78481266f6925b7c46a85599e6a41a77010bf91e5a24dfb660db96863bbf655ecdbda0ab517204d6a4e0c151dbec9d022c556321f3776
+"is-weakmap@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "is-weakmap@npm:2.0.2"
+  checksum: 10/a7b7e23206c542dcf2fa0abc483142731788771527e90e7e24f658c0833a0d91948a4f7b30d78f7a65255a48512e41a0288b778ba7fc396137515c12e201fd11
   languageName: node
   linkType: hard
 
@@ -12553,13 +12994,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-weakset@npm:^2.0.1":
-  version: 2.0.2
-  resolution: "is-weakset@npm:2.0.2"
+"is-weakref@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "is-weakref@npm:1.1.0"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.1.1"
-  checksum: 10/8f2ddb9639716fd7936784e175ea1183c5c4c05274c34f34f6a53175313cb1c9c35a8b795623306995e2f7cc8f25aa46302f15a2113e51c5052d447be427195c
+    call-bound: "npm:^1.0.2"
+  checksum: 10/89e627cc1763ea110574bb408fcf060ede47e70437d9278858bc939e3b3f7e4b7c558610b733da5f2ad6084d9f12b9c714b011ccf3fa771ec87e221c22bed910
+  languageName: node
+  linkType: hard
+
+"is-weakset@npm:^2.0.3":
+  version: 2.0.4
+  resolution: "is-weakset@npm:2.0.4"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    get-intrinsic: "npm:^1.2.6"
+  checksum: 10/1d5e1d0179beeed3661125a6faa2e59bfb48afda06fc70db807f178aa0ebebc3758fb6358d76b3d528090d5ef85148c345dcfbf90839592fe293e3e5e82f2134
   languageName: node
   linkType: hard
 
@@ -12693,16 +13143,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iterator.prototype@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "iterator.prototype@npm:1.1.2"
+"iterator.prototype@npm:^1.1.4":
+  version: 1.1.4
+  resolution: "iterator.prototype@npm:1.1.4"
   dependencies:
-    define-properties: "npm:^1.2.1"
-    get-intrinsic: "npm:^1.2.1"
-    has-symbols: "npm:^1.0.3"
-    reflect.getprototypeof: "npm:^1.0.4"
-    set-function-name: "npm:^2.0.1"
-  checksum: 10/b5013967ad8f28c9ca1be8e159eb10f591b8e46deae87476fe39d668c04374fe9158c815e8b6d2f45885b0a3fd842a8ba13f497ec762b3a0eff49bec278670b1
+    define-data-property: "npm:^1.1.4"
+    es-object-atoms: "npm:^1.0.0"
+    get-intrinsic: "npm:^1.2.6"
+    has-symbols: "npm:^1.1.0"
+    reflect.getprototypeof: "npm:^1.0.8"
+    set-function-name: "npm:^2.0.2"
+  checksum: 10/3a7a4568437a67d5b1d863128fabf6cd0875d3a5cb36029036a72fa5ae4c97bad6423529d23083a4f6ae6c72c5d1d70b661124c3d6d964520325fd4ce753ee1a
   languageName: node
   linkType: hard
 
@@ -13322,6 +13773,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json-buffer@npm:3.0.1":
+  version: 3.0.1
+  resolution: "json-buffer@npm:3.0.1"
+  checksum: 10/82876154521b7b68ba71c4f969b91572d1beabadd87bd3a6b236f85fbc7dc4695089191ed60bb59f9340993c51b33d479f45b6ba9f3548beb519705281c32c3c
+  languageName: node
+  linkType: hard
+
 "json-logic-js@npm:^2.0.2":
   version: 2.0.2
   resolution: "json-logic-js@npm:2.0.2"
@@ -13554,6 +14012,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"keyv@npm:^4.5.4":
+  version: 4.5.4
+  resolution: "keyv@npm:4.5.4"
+  dependencies:
+    json-buffer: "npm:3.0.1"
+  checksum: 10/167eb6ef64cc84b6fa0780ee50c9de456b422a1e18802209234f7c2cf7eae648c7741f32e50d7e24ccb22b24c13154070b01563d642755b156c357431a191e75
+  languageName: node
+  linkType: hard
+
 "kind-of@npm:^6.0.2, kind-of@npm:^6.0.3":
   version: 6.0.3
   resolution: "kind-of@npm:6.0.3"
@@ -14168,6 +14635,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"math-intrinsics@npm:^1.0.0, math-intrinsics@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "math-intrinsics@npm:1.1.0"
+  checksum: 10/11df2eda46d092a6035479632e1ec865b8134bdfc4bd9e571a656f4191525404f13a283a515938c3a8de934dbfd9c09674d9da9fa831e6eb7e22b50b197d2edd
+  languageName: node
+  linkType: hard
+
 "md5@npm:^2.3.0":
   version: 2.3.0
   resolution: "md5@npm:2.3.0"
@@ -14452,7 +14926,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
+"minimatch@npm:^3.0.4, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
   dependencies:
@@ -15307,6 +15781,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object-inspect@npm:^1.13.3":
+  version: 1.13.3
+  resolution: "object-inspect@npm:1.13.3"
+  checksum: 10/14cb973d8381c69e14d7f1c8c75044eb4caf04c6dabcf40ca5c2ce42dc2073ae0bb2a9939eeca142b0c05215afaa1cd5534adb7c8879c32cba2576e045ed8368
+  languageName: node
+  linkType: hard
+
 "object-is@npm:^1.0.2, object-is@npm:^1.1.5":
   version: 1.1.5
   resolution: "object-is@npm:1.1.5"
@@ -15336,6 +15817,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object.assign@npm:^4.1.7":
+  version: 4.1.7
+  resolution: "object.assign@npm:4.1.7"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
+    define-properties: "npm:^1.2.1"
+    es-object-atoms: "npm:^1.0.0"
+    has-symbols: "npm:^1.1.0"
+    object-keys: "npm:^1.1.1"
+  checksum: 10/3fe28cdd779f2a728a9a66bd688679ba231a2b16646cd1e46b528fe7c947494387dda4bc189eff3417f3717ef4f0a8f2439347cf9a9aa3cef722fbfd9f615587
+  languageName: node
+  linkType: hard
+
 "object.entries@npm:^1.1.1, object.entries@npm:^1.1.8":
   version: 1.1.8
   resolution: "object.entries@npm:1.1.8"
@@ -17598,17 +18093,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"reflect.getprototypeof@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "reflect.getprototypeof@npm:1.0.4"
+"reflect.getprototypeof@npm:^1.0.6, reflect.getprototypeof@npm:^1.0.8, reflect.getprototypeof@npm:^1.0.9":
+  version: 1.0.9
+  resolution: "reflect.getprototypeof@npm:1.0.9"
   dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-    get-intrinsic: "npm:^1.2.1"
-    globalthis: "npm:^1.0.3"
-    which-builtin-type: "npm:^1.1.3"
-  checksum: 10/52ff881f62a9cb4acdd7f9a8f4ac88234056c4a6b1ed570c249cc085de5c313249b90251d16eb8e58302b82ae697eec19dde16ff62949f6b87f035a3a26dc5df
+    call-bind: "npm:^1.0.8"
+    define-properties: "npm:^1.2.1"
+    dunder-proto: "npm:^1.0.1"
+    es-abstract: "npm:^1.23.6"
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.6"
+    gopd: "npm:^1.2.0"
+    which-builtin-type: "npm:^1.2.1"
+  checksum: 10/652c82cc3b09a2aa489949beae2ee645ba57dba02729ddca3c43299fecb6a16ac5877ea4c9b5397aa2f3d82e653bc4f812a83aada46451ce48f80ca6596d8835
   languageName: node
   linkType: hard
 
@@ -17638,6 +18135,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regexp.prototype.flags@npm:^1.5.3":
+  version: 1.5.3
+  resolution: "regexp.prototype.flags@npm:1.5.3"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-errors: "npm:^1.3.0"
+    set-function-name: "npm:^2.0.2"
+  checksum: 10/fe17bc4eebbc72945aaf9dd059eb7784a5ca453a67cc4b5b3e399ab08452c9a05befd92063e2c52e7b24d9238c60031656af32dd57c555d1ba6330dbf8c23b43
+  languageName: node
+  linkType: hard
+
 "rehype-react@npm:^6.0.0":
   version: 6.2.1
   resolution: "rehype-react@npm:6.2.1"
@@ -18045,6 +18554,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"safe-array-concat@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "safe-array-concat@npm:1.1.3"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.2"
+    get-intrinsic: "npm:^1.2.6"
+    has-symbols: "npm:^1.1.0"
+    isarray: "npm:^2.0.5"
+  checksum: 10/fac4f40f20a3f7da024b54792fcc61059e814566dcbb04586bfefef4d3b942b2408933f25b7b3dd024affd3f2a6bbc916bef04807855e4f192413941369db864
+  languageName: node
+  linkType: hard
+
 "safe-buffer@npm:5.1.2, safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1":
   version: 5.1.2
   resolution: "safe-buffer@npm:5.1.2"
@@ -18077,6 +18599,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"safe-regex-test@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "safe-regex-test@npm:1.1.0"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    es-errors: "npm:^1.3.0"
+    is-regex: "npm:^1.2.1"
+  checksum: 10/ebdb61f305bf4756a5b023ad86067df5a11b26898573afe9e52a548a63c3bd594825d9b0e2dde2eb3c94e57e0e04ac9929d4107c394f7b8e56a4613bed46c69a
+  languageName: node
+  linkType: hard
+
 "safe-stable-stringify@npm:^2.4.1":
   version: 2.4.1
   resolution: "safe-stable-stringify@npm:2.4.1"
@@ -18248,7 +18781,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"set-function-length@npm:^1.2.1":
+"set-function-length@npm:^1.2.1, set-function-length@npm:^1.2.2":
   version: 1.2.2
   resolution: "set-function-length@npm:1.2.2"
   dependencies:
@@ -18407,6 +18940,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"side-channel-list@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "side-channel-list@npm:1.0.0"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    object-inspect: "npm:^1.13.3"
+  checksum: 10/603b928997abd21c5a5f02ae6b9cc36b72e3176ad6827fab0417ead74580cc4fb4d5c7d0a8a2ff4ead34d0f9e35701ed7a41853dac8a6d1a664fcce1a044f86f
+  languageName: node
+  linkType: hard
+
+"side-channel-map@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "side-channel-map@npm:1.0.1"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.5"
+    object-inspect: "npm:^1.13.3"
+  checksum: 10/5771861f77feefe44f6195ed077a9e4f389acc188f895f570d56445e251b861754b547ea9ef73ecee4e01fdada6568bfe9020d2ec2dfc5571e9fa1bbc4a10615
+  languageName: node
+  linkType: hard
+
+"side-channel-weakmap@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "side-channel-weakmap@npm:1.0.2"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.5"
+    object-inspect: "npm:^1.13.3"
+    side-channel-map: "npm:^1.0.1"
+  checksum: 10/a815c89bc78c5723c714ea1a77c938377ea710af20d4fb886d362b0d1f8ac73a17816a5f6640f354017d7e292a43da9c5e876c22145bac00b76cfb3468001736
+  languageName: node
+  linkType: hard
+
 "side-channel@npm:^1.0.4, side-channel@npm:^1.0.6":
   version: 1.0.6
   resolution: "side-channel@npm:1.0.6"
@@ -18419,6 +18987,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"side-channel@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "side-channel@npm:1.1.0"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    object-inspect: "npm:^1.13.3"
+    side-channel-list: "npm:^1.0.0"
+    side-channel-map: "npm:^1.0.1"
+    side-channel-weakmap: "npm:^1.0.2"
+  checksum: 10/7d53b9db292c6262f326b6ff3bc1611db84ece36c2c7dc0e937954c13c73185b0406c56589e2bb8d071d6fee468e14c39fb5d203ee39be66b7b8174f179afaba
+  languageName: node
+  linkType: hard
+
 "signal-exit@npm:3.0.7, signal-exit@npm:^3.0.0, signal-exit@npm:^3.0.2, signal-exit@npm:^3.0.3, signal-exit@npm:^3.0.7":
   version: 3.0.7
   resolution: "signal-exit@npm:3.0.7"
@@ -18740,6 +19321,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stable-hash@npm:^0.0.4":
+  version: 0.0.4
+  resolution: "stable-hash@npm:0.0.4"
+  checksum: 10/21c039d21c1cb739cf8342561753a5e007cb95ea682ccd452e76310bbb9c6987a89de8eda023e320b019f3e4691aabda75079cdbb7dadf7ab9013e931f2f23cd
+  languageName: node
+  linkType: hard
+
 "stack-generator@npm:^2.0.3":
   version: 2.0.5
   resolution: "stack-generator@npm:2.0.5"
@@ -18897,6 +19485,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string.prototype.trim@npm:^1.2.10":
+  version: 1.2.10
+  resolution: "string.prototype.trim@npm:1.2.10"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.2"
+    define-data-property: "npm:^1.1.4"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.5"
+    es-object-atoms: "npm:^1.0.0"
+    has-property-descriptors: "npm:^1.0.2"
+  checksum: 10/47bb63cd2470a64bc5e2da1e570d369c016ccaa85c918c3a8bb4ab5965120f35e66d1f85ea544496fac84b9207a6b722adf007e6c548acd0813e5f8a82f9712a
+  languageName: node
+  linkType: hard
+
 "string.prototype.trimend@npm:^1.0.8":
   version: 1.0.8
   resolution: "string.prototype.trimend@npm:1.0.8"
@@ -18908,6 +19511,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string.prototype.trimend@npm:^1.0.9":
+  version: 1.0.9
+  resolution: "string.prototype.trimend@npm:1.0.9"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.2"
+    define-properties: "npm:^1.2.1"
+    es-object-atoms: "npm:^1.0.0"
+  checksum: 10/140c73899b6747de9e499c7c2e7a83d549c47a26fa06045b69492be9cfb9e2a95187499a373983a08a115ecff8bc3bd7b0fb09b8ff72fb2172abe766849272ef
+  languageName: node
+  linkType: hard
+
 "string.prototype.trimstart@npm:^1.0.8":
   version: 1.0.8
   resolution: "string.prototype.trimstart@npm:1.0.8"
@@ -19208,13 +19823,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"text-table@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "text-table@npm:0.2.0"
-  checksum: 10/4383b5baaeffa9bb4cda2ac33a4aa2e6d1f8aaf811848bf73513a9b88fd76372dc461f6fd6d2e9cb5100f48b473be32c6f95bd983509b7d92bb4d92c10747452
-  languageName: node
-  linkType: hard
-
 "thenify-all@npm:^1.0.0":
   version: 1.6.0
   resolution: "thenify-all@npm:1.6.0"
@@ -19644,13 +20252,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-fest@npm:^0.20.2":
-  version: 0.20.2
-  resolution: "type-fest@npm:0.20.2"
-  checksum: 10/8907e16284b2d6cfa4f4817e93520121941baba36b39219ea36acfe64c86b9dbc10c9941af450bd60832c8f43464974d51c0957f9858bc66b952b66b6914cbb9
-  languageName: node
-  linkType: hard
-
 "type-fest@npm:^0.21.3":
   version: 0.21.3
   resolution: "type-fest@npm:0.21.3"
@@ -19700,6 +20301,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typed-array-buffer@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "typed-array-buffer@npm:1.0.3"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    es-errors: "npm:^1.3.0"
+    is-typed-array: "npm:^1.1.14"
+  checksum: 10/3fb91f0735fb413b2bbaaca9fabe7b8fc14a3fa5a5a7546bab8a57e755be0e3788d893195ad9c2b842620592de0e68d4c077d4c2c41f04ec25b8b5bb82fa9a80
+  languageName: node
+  linkType: hard
+
 "typed-array-byte-length@npm:^1.0.1":
   version: 1.0.1
   resolution: "typed-array-byte-length@npm:1.0.1"
@@ -19713,6 +20325,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typed-array-byte-length@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "typed-array-byte-length@npm:1.0.3"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    for-each: "npm:^0.3.3"
+    gopd: "npm:^1.2.0"
+    has-proto: "npm:^1.2.0"
+    is-typed-array: "npm:^1.1.14"
+  checksum: 10/269dad101dda73e3110117a9b84db86f0b5c07dad3a9418116fd38d580cab7fc628a4fc167e29b6d7c39da2f53374b78e7cb578b3c5ec7a556689d985d193519
+  languageName: node
+  linkType: hard
+
 "typed-array-byte-offset@npm:^1.0.2":
   version: 1.0.2
   resolution: "typed-array-byte-offset@npm:1.0.2"
@@ -19727,6 +20352,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typed-array-byte-offset@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "typed-array-byte-offset@npm:1.0.4"
+  dependencies:
+    available-typed-arrays: "npm:^1.0.7"
+    call-bind: "npm:^1.0.8"
+    for-each: "npm:^0.3.3"
+    gopd: "npm:^1.2.0"
+    has-proto: "npm:^1.2.0"
+    is-typed-array: "npm:^1.1.15"
+    reflect.getprototypeof: "npm:^1.0.9"
+  checksum: 10/c2869aa584cdae24ecfd282f20a0f556b13a49a9d5bca1713370bb3c89dff0ccbc5ceb45cb5b784c98f4579e5e3e2a07e438c3a5b8294583e2bd4abbd5104fb5
+  languageName: node
+  linkType: hard
+
 "typed-array-length@npm:^1.0.6":
   version: 1.0.6
   resolution: "typed-array-length@npm:1.0.6"
@@ -19741,6 +20381,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typed-array-length@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "typed-array-length@npm:1.0.7"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    for-each: "npm:^0.3.3"
+    gopd: "npm:^1.0.1"
+    is-typed-array: "npm:^1.1.13"
+    possible-typed-array-names: "npm:^1.0.0"
+    reflect.getprototypeof: "npm:^1.0.6"
+  checksum: 10/d6b2f0e81161682d2726eb92b1dc2b0890890f9930f33f9bcf6fc7272895ce66bc368066d273e6677776de167608adc53fcf81f1be39a146d64b630edbf2081c
+  languageName: node
+  linkType: hard
+
 "typedarray@npm:^0.0.6":
   version: 0.0.6
   resolution: "typedarray@npm:0.0.6"
@@ -19828,6 +20482,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript-eslint@npm:^8.18.1":
+  version: 8.18.1
+  resolution: "typescript-eslint@npm:8.18.1"
+  dependencies:
+    "@typescript-eslint/eslint-plugin": "npm:8.18.1"
+    "@typescript-eslint/parser": "npm:8.18.1"
+    "@typescript-eslint/utils": "npm:8.18.1"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0
+    typescript: ">=4.8.4 <5.8.0"
+  checksum: 10/2be2a14c10fc0988f50e63899e21980c53f6686b60bdda61750577e1481f3e857cf1d5de360849288a220cc053da84e678ca304935d885fe6365afc27e0b9fd2
+  languageName: node
+  linkType: hard
+
 "typescript@npm:>=3 < 6, typescript@npm:~5.7.2":
   version: 5.7.2
   resolution: "typescript@npm:5.7.2"
@@ -19876,6 +20544,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unbox-primitive@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "unbox-primitive@npm:1.1.0"
+  dependencies:
+    call-bound: "npm:^1.0.3"
+    has-bigints: "npm:^1.0.2"
+    has-symbols: "npm:^1.1.0"
+    which-boxed-primitive: "npm:^1.1.1"
+  checksum: 10/fadb347020f66b2c8aeacf8b9a79826fa34cc5e5457af4eb0bbc4e79bd87fed0fa795949825df534320f7c13f199259516ad30abc55a6e7b91d8d996ca069e50
+  languageName: node
+  linkType: hard
+
 "undici@npm:^5.28.4":
   version: 5.28.4
   resolution: "undici@npm:5.28.4"
@@ -20591,39 +21271,53 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-builtin-type@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "which-builtin-type@npm:1.1.3"
+"which-boxed-primitive@npm:^1.1.0, which-boxed-primitive@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "which-boxed-primitive@npm:1.1.1"
   dependencies:
-    function.prototype.name: "npm:^1.1.5"
-    has-tostringtag: "npm:^1.0.0"
+    is-bigint: "npm:^1.1.0"
+    is-boolean-object: "npm:^1.2.1"
+    is-number-object: "npm:^1.1.1"
+    is-string: "npm:^1.1.1"
+    is-symbol: "npm:^1.1.1"
+  checksum: 10/a877c0667bc089518c83ad4d845cf8296b03efe3565c1de1940c646e00a2a1ae9ed8a185bcfa27cbf352de7906f0616d83b9d2f19ca500ee02a551fb5cf40740
+  languageName: node
+  linkType: hard
+
+"which-builtin-type@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "which-builtin-type@npm:1.2.1"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+    function.prototype.name: "npm:^1.1.6"
+    has-tostringtag: "npm:^1.0.2"
     is-async-function: "npm:^2.0.0"
-    is-date-object: "npm:^1.0.5"
-    is-finalizationregistry: "npm:^1.0.2"
+    is-date-object: "npm:^1.1.0"
+    is-finalizationregistry: "npm:^1.1.0"
     is-generator-function: "npm:^1.0.10"
-    is-regex: "npm:^1.1.4"
+    is-regex: "npm:^1.2.1"
     is-weakref: "npm:^1.0.2"
     isarray: "npm:^2.0.5"
-    which-boxed-primitive: "npm:^1.0.2"
-    which-collection: "npm:^1.0.1"
-    which-typed-array: "npm:^1.1.9"
-  checksum: 10/d7823c4a6aa4fc8183eb572edd9f9ee2751e5f3ba2ccd5b298cc163f720df0f02ee1a5291d18ca8a41d48144ef40007ff6a64e6f5e7c506527086c7513a5f673
+    which-boxed-primitive: "npm:^1.1.0"
+    which-collection: "npm:^1.0.2"
+    which-typed-array: "npm:^1.1.16"
+  checksum: 10/22c81c5cb7a896c5171742cd30c90d992ff13fb1ea7693e6cf80af077791613fb3f89aa9b4b7f890bd47b6ce09c6322c409932359580a2a2a54057f7b52d1cbe
   languageName: node
   linkType: hard
 
-"which-collection@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "which-collection@npm:1.0.1"
+"which-collection@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "which-collection@npm:1.0.2"
   dependencies:
-    is-map: "npm:^2.0.1"
-    is-set: "npm:^2.0.1"
-    is-weakmap: "npm:^2.0.1"
-    is-weakset: "npm:^2.0.1"
-  checksum: 10/85c95fcf92df7972ce66bed879e53d9dc752a30ef08e1ca4696df56bcf1c302e3b9965a39b04a20fa280a997fad6c170eb0b4d62435569b7f6c0bc7be910572b
+    is-map: "npm:^2.0.3"
+    is-set: "npm:^2.0.3"
+    is-weakmap: "npm:^2.0.2"
+    is-weakset: "npm:^2.0.3"
+  checksum: 10/674bf659b9bcfe4055f08634b48a8588e879161b9fefed57e9ec4ff5601e4d50a05ccd76cf10f698ef5873784e5df3223336d56c7ce88e13bcf52ebe582fc8d7
   languageName: node
   linkType: hard
 
-"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.9":
+"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15":
   version: 1.1.15
   resolution: "which-typed-array@npm:1.1.15"
   dependencies:
@@ -20636,6 +21330,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.18":
+  version: 1.1.18
+  resolution: "which-typed-array@npm:1.1.18"
+  dependencies:
+    available-typed-arrays: "npm:^1.0.7"
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
+    for-each: "npm:^0.3.3"
+    gopd: "npm:^1.2.0"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/11eed801b2bd08cdbaecb17aff381e0fb03526532f61acc06e6c7b9370e08062c33763a51f27825f13fdf34aabd0df6104007f4e8f96e6eaef7db0ce17a26d6e
+  languageName: node
+  linkType: hard
+
 "which@npm:^2.0.1":
   version: 2.0.2
   resolution: "which@npm:2.0.2"

From e4e53d2e7b59db77299462a7adc01da2a1b9245b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <martin.racak@ourworldindata.org>
Date: Fri, 3 Jan 2025 16:13:19 +0100
Subject: [PATCH 21/29] Add eslint-plugin-react-refresh

Fast Refresh is a feature that lets you edit React components in a
running application without losing their state. It is similar to an old
feature known as "hot reloading", but Fast Refresh is more reliable and
officially supported by React.

Vite already supports Fast Refresh, but it works only under specific
conditions. This ESlint plugin helps us write components in a way that
ensures they can be reloaded using Fast Refresh. We don't enable it for
directories containing mostly class components, since it doesn't work
for them.

As part of this change I fixed the linter errors by refactoring the
code, which means now many more components will be working with Fast
Refresh, speeding up the local development.

https://github.com/ArnaudBarre/eslint-plugin-react-refresh
https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports
---
 adminSiteClient/AdminApp.tsx                  |    2 +-
 adminSiteClient/ChartRow.tsx                  |    2 +
 adminSiteClient/EditorBasicTab.tsx            |    2 +
 adminSiteClient/EditorHistoryTab.tsx          |    2 +
 adminSiteClient/GdocsAdd.tsx                  |    2 +-
 adminSiteClient/GdocsDiff.tsx                 |   14 +-
 adminSiteClient/GdocsIndexPage.tsx            |    2 +-
 adminSiteClient/GdocsPreviewPage.tsx          |    4 +-
 adminSiteClient/GdocsStore.tsx                |   32 -
 adminSiteClient/GdocsStoreContext.tsx         |   16 +
 adminSiteClient/GdocsStoreProvider.tsx        |   19 +
 adminSiteClient/GrapherConfigGridEditor.tsx   |    6 +-
 .../GrapherConfigGridEditorTypesAndUtils.tsx  |   14 +-
 adminSiteClient/QueryBuilderContainer.tsx     |   11 +
 adminSiteClient/TagGraphPage.tsx              |    2 +
 adminSiteClient/constants.ts                  |   12 +
 adminSiteClient/gdocsDeploy.ts                |    2 +-
 baker/formatWordpressPost.tsx                 |    8 +-
 baker/pageOverrides.tsx                       |    2 +-
 baker/siteRenderers.tsx                       |    5 +-
 db/model/Gdoc/GdocHomepage.ts                 |    2 +-
 db/model/Post.ts                              |    2 +-
 devTools/navigationTest/navigationTest.ts     |    2 +-
 eslint.config.mjs                             |   22 +-
 package.json                                  |    1 +
 .../src/CodeSnippet/CodeSnippet.tsx           |   28 -
 .../src/CodeSnippet/hydrateCodeSnippets.tsx   |   11 +
 .../src/CodeSnippet/renderCodeSnippets.tsx    |   18 +
 .../src/MarkdownTextWrap/MarkdownTextWrap.tsx |    2 +
 .../src/closeButton/CloseButton.tsx           |    6 +-
 .../@ourworldindata/components/src/index.ts   |    8 +-
 site/BackToTopic.tsx                          |    3 +-
 site/Breadcrumb/Breadcrumb.test.ts            |    4 +-
 site/Breadcrumb/Breadcrumb.tsx                |   33 +-
 site/Breadcrumb/breadcrumbUtils.tsx           |   33 +
 site/CookieNotice.tsx                         |    2 +-
 site/CookiePreferencesManager.test.ts         |    2 +-
 site/CookiePreferencesManager.tsx             |  176 +--
 site/DataCatalog/DataCatalog.tsx              |   12 -
 site/DataInsightsIndexPage.tsx                |    2 +-
 site/DataInsightsIndexPageContent.tsx         |   27 +-
 site/DataInsightsNewsletterBanner.tsx         |    2 +-
 site/DataPageV2.tsx                           |    2 +-
 site/DataPageV2Content.tsx                    |   22 +-
 site/ExplorerIndex.tsx                        |   13 -
 site/Footnote.tsx                             |   39 +-
 site/Lightbox.tsx                             |  156 +--
 site/LightboxImage.tsx                        |   35 +
 site/SearchCountry.tsx                        |   30 +-
 site/SiteAbout.tsx                            |   15 +-
 site/SiteConstants.ts                         | 1197 +++++++++++++++++
 site/SiteMobileCategory.tsx                   |    2 +-
 site/SiteMobileMenu.tsx                       |    2 +-
 site/SiteNavigation.tsx                       |  872 +-----------
 site/SiteNavigationTopics.tsx                 |   14 +-
 site/SiteSubnavigation.tsx                    |  343 +----
 site/SiteTools.tsx                            |   29 +-
 site/TableOfContents.tsx                      |   17 +-
 site/Tablepress.tsx                           |    6 -
 site/TombstonePage.tsx                        |    2 +-
 site/blocks/AdditionalInformation.tsx         |   76 +-
 site/blocks/CookiePreferences.tsx             |    4 +-
 site/blocks/GalleryArrow.tsx                  |    6 +-
 site/blocks/Help.tsx                          |   18 +-
 site/blocks/RelatedCharts.tsx                 |    7 +-
 site/blocks/renderAdditionalInformation.tsx   |   48 +
 site/blocks/renderHelp.tsx                    |   17 +
 site/cookiePreferences.ts                     |  156 +++
 site/countryProfileProjects.ts                |    2 +-
 site/gdocs/AttachmentsContext.tsx             |   37 +
 site/gdocs/DebugContext.tsx                   |   19 +-
 site/gdocs/DebugProvider.tsx                  |   13 +
 site/gdocs/DocumentContext.tsx                |    5 +
 site/gdocs/OwidGdoc.tsx                       |   58 +-
 site/gdocs/OwidGdocPage.tsx                   |    2 +-
 site/gdocs/components/AdditionalCharts.tsx    |    4 +-
 site/gdocs/components/AllCharts.tsx           |    2 +-
 site/gdocs/components/ArticleBlock.tsx        |  185 +--
 site/gdocs/components/ArticleBlocks.tsx       |    3 +-
 site/gdocs/components/AtomArticleBlocks.tsx   |    3 +-
 site/gdocs/components/Chart.tsx               |    7 +-
 site/gdocs/components/ChartStory.tsx          |    6 +-
 site/gdocs/components/ExplorerTiles.tsx       |    2 +-
 site/gdocs/components/HomepageIntro.tsx       |    2 +-
 site/gdocs/components/HomepageSearch.tsx      |    2 +-
 site/gdocs/components/Image.tsx               |    6 +-
 .../components/KeyIndicatorCollection.tsx     |    2 +-
 site/gdocs/components/KeyInsights.tsx         |    2 +-
 site/gdocs/components/LatestDataInsights.tsx  |    6 +-
 .../components/LatestDataInsightsBlock.tsx    |    2 +-
 site/gdocs/components/LinkedA.tsx             |   37 +
 site/gdocs/components/List.tsx                |    9 +-
 site/gdocs/components/NumberedList.tsx        |    9 +-
 site/gdocs/components/Paragraph.tsx           |    9 +-
 site/gdocs/components/PillRow.tsx             |    2 +-
 site/gdocs/components/ProminentLink.tsx       |    2 +-
 site/gdocs/components/Recirc.tsx              |    5 +-
 site/gdocs/components/ResearchAndWriting.tsx  |    3 +-
 site/gdocs/components/Scroller.tsx            |    4 +-
 site/gdocs/components/SpanElement.tsx         |   80 ++
 site/gdocs/components/SpanElements.tsx        |   22 +
 site/gdocs/components/TopicPageIntro.tsx      |    2 +-
 site/gdocs/components/Video.tsx               |    9 +-
 site/gdocs/components/layout.ts               |  144 ++
 site/gdocs/pages/AboutPage.tsx                |   10 +-
 site/gdocs/pages/Author.tsx                   |    3 +-
 site/gdocs/pages/DataInsight.tsx              |   20 +-
 site/gdocs/pages/Homepage.tsx                 |    7 +-
 site/gdocs/{utils.tsx => utils.ts}            |  153 +--
 site/lightboxUtils.tsx                        |  106 ++
 site/multiDim/MultiDimDataPageContent.tsx     |   20 -
 site/multiembedder/MultiEmbedder.tsx          |    2 +-
 site/owid.entry.ts                            |    9 +-
 site/renderTablePress.tsx                     |    6 +
 site/runSiteFooterScripts.ts                  |  120 --
 site/runSiteFooterScripts.tsx                 |  355 +++++
 site/runTableOfContents.tsx                   |   17 +
 site/search/SearchPanel.tsx                   |   24 +-
 site/search/runSearchPage.tsx                 |    6 +
 site/search/searchClient.ts                   |    5 +-
 yarn.lock                                     |   10 +
 121 files changed, 2725 insertions(+), 2540 deletions(-)
 create mode 100644 adminSiteClient/GdocsStoreContext.tsx
 create mode 100644 adminSiteClient/GdocsStoreProvider.tsx
 create mode 100644 adminSiteClient/QueryBuilderContainer.tsx
 create mode 100644 adminSiteClient/constants.ts
 create mode 100644 packages/@ourworldindata/components/src/CodeSnippet/hydrateCodeSnippets.tsx
 create mode 100644 packages/@ourworldindata/components/src/CodeSnippet/renderCodeSnippets.tsx
 create mode 100644 site/Breadcrumb/breadcrumbUtils.tsx
 create mode 100644 site/LightboxImage.tsx
 create mode 100644 site/blocks/renderAdditionalInformation.tsx
 create mode 100644 site/blocks/renderHelp.tsx
 create mode 100644 site/cookiePreferences.ts
 create mode 100644 site/gdocs/AttachmentsContext.tsx
 create mode 100644 site/gdocs/DebugProvider.tsx
 create mode 100644 site/gdocs/DocumentContext.tsx
 create mode 100644 site/gdocs/components/LinkedA.tsx
 create mode 100644 site/gdocs/components/SpanElement.tsx
 create mode 100644 site/gdocs/components/SpanElements.tsx
 create mode 100644 site/gdocs/components/layout.ts
 rename site/gdocs/{utils.tsx => utils.ts} (57%)
 create mode 100644 site/lightboxUtils.tsx
 create mode 100644 site/renderTablePress.tsx
 delete mode 100644 site/runSiteFooterScripts.ts
 create mode 100644 site/runSiteFooterScripts.tsx
 create mode 100644 site/runTableOfContents.tsx
 create mode 100644 site/search/runSearchPage.tsx

diff --git a/adminSiteClient/AdminApp.tsx b/adminSiteClient/AdminApp.tsx
index 72560499ae..4f61bf023c 100644
--- a/adminSiteClient/AdminApp.tsx
+++ b/adminSiteClient/AdminApp.tsx
@@ -40,7 +40,7 @@ import { AdminLayout } from "./AdminLayout.js"
 import { BulkGrapherConfigEditorPage } from "./BulkGrapherConfigEditor.js"
 import { GdocsIndexPage, GdocsMatchProps } from "./GdocsIndexPage.js"
 import { GdocsPreviewPage } from "./GdocsPreviewPage.js"
-import { GdocsStoreProvider } from "./GdocsStore.js"
+import { GdocsStoreProvider } from "./GdocsStoreProvider.js"
 import { IndicatorChartEditorPage } from "./IndicatorChartEditorPage.js"
 import { ChartViewEditorPage } from "./ChartViewEditorPage.js"
 import { ChartViewIndexPage } from "./ChartViewIndexPage.js"
diff --git a/adminSiteClient/ChartRow.tsx b/adminSiteClient/ChartRow.tsx
index f9564fd62d..410842032e 100644
--- a/adminSiteClient/ChartRow.tsx
+++ b/adminSiteClient/ChartRow.tsx
@@ -127,6 +127,8 @@ export class ChartRow extends React.Component<{
     }
 }
 
+// The rule doesn't support class components in the same file.
+// eslint-disable-next-line react-refresh/only-export-components
 function InheritanceStatus({ chart }: { chart: ChartListItem }) {
     // if no information is available, return an empty cell
     if (
diff --git a/adminSiteClient/EditorBasicTab.tsx b/adminSiteClient/EditorBasicTab.tsx
index 9b89b12bbf..6dc7fcacf0 100644
--- a/adminSiteClient/EditorBasicTab.tsx
+++ b/adminSiteClient/EditorBasicTab.tsx
@@ -498,6 +498,8 @@ export class EditorBasicTab<
     }
 }
 
+// The rule doesn't support class components in the same file.
+// eslint-disable-next-line react-refresh/only-export-components
 function IndicatorChartInfo(props: { editor: IndicatorChartEditor }) {
     const { variableId, grapher } = props.editor
 
diff --git a/adminSiteClient/EditorHistoryTab.tsx b/adminSiteClient/EditorHistoryTab.tsx
index 8eed5f62d4..677d5acbfc 100644
--- a/adminSiteClient/EditorHistoryTab.tsx
+++ b/adminSiteClient/EditorHistoryTab.tsx
@@ -6,6 +6,8 @@ import { computed, observable } from "mobx"
 import { Modal } from "antd"
 import ReactDiffViewer, { DiffMethod } from "react-diff-viewer-continued"
 
+// The rule doesn't support class components in the same file.
+// eslint-disable-next-line react-refresh/only-export-components
 function LogCompareModal({
     log,
     previousLog,
diff --git a/adminSiteClient/GdocsAdd.tsx b/adminSiteClient/GdocsAdd.tsx
index 503820b745..284e9b9189 100644
--- a/adminSiteClient/GdocsAdd.tsx
+++ b/adminSiteClient/GdocsAdd.tsx
@@ -4,7 +4,7 @@ import {
     GDOCS_BASIC_ARTICLE_TEMPLATE_URL,
     GDOCS_CLIENT_EMAIL,
 } from "../settings/clientSettings.js"
-import { useGdocsStore } from "./GdocsStore.js"
+import { useGdocsStore } from "./GdocsStoreContext.js"
 
 export const GdocsAdd = ({ onAdd }: { onAdd: (id: string) => void }) => {
     const [documentUrl, setDocumentUrl] = React.useState("")
diff --git a/adminSiteClient/GdocsDiff.tsx b/adminSiteClient/GdocsDiff.tsx
index 15c2048ac9..72adec719b 100644
--- a/adminSiteClient/GdocsDiff.tsx
+++ b/adminSiteClient/GdocsDiff.tsx
@@ -1,19 +1,7 @@
 import ReactDiffViewer, { DiffMethod } from "react-diff-viewer-continued"
 import { stringify } from "safe-stable-stringify"
 import { omit, OwidGdoc } from "@ourworldindata/utils"
-
-// Non-deterministic values which shouldn't be displayed in the diff viewer
-// Errors are already shown in the settings drawer, so we don't show those either
-export const GDOC_DIFF_OMITTABLE_PROPERTIES = [
-    "errors",
-    // imageMetadata *does* count as something that meaningfully contributes to whether a Gdoc is different,
-    // And it's checked in the checkIsLightningUpdate function,
-    // but for the preview, it's already captured by changes to the body text, so we don't need to show these objects in the diff also
-    "imageMetadata",
-    "linkedCharts",
-    "linkedDocuments",
-    "relatedCharts",
-]
+import { GDOC_DIFF_OMITTABLE_PROPERTIES } from "./constants.js"
 
 export const GdocsDiff = ({
     originalGdoc,
diff --git a/adminSiteClient/GdocsIndexPage.tsx b/adminSiteClient/GdocsIndexPage.tsx
index 77046b3c58..5764f87dea 100644
--- a/adminSiteClient/GdocsIndexPage.tsx
+++ b/adminSiteClient/GdocsIndexPage.tsx
@@ -31,7 +31,7 @@ import { Route, RouteComponentProps } from "react-router-dom"
 import { Link } from "./Link.js"
 import { GdocsAdd } from "./GdocsAdd.js"
 import { observer } from "mobx-react"
-import { GdocsStoreContext } from "./GdocsStore.js"
+import { GdocsStoreContext } from "./GdocsStoreContext.js"
 import { computed, observable } from "mobx"
 import { BAKED_BASE_URL } from "../settings/clientSettings.js"
 import { GdocsEditLink } from "./GdocsEditLink.js"
diff --git a/adminSiteClient/GdocsPreviewPage.tsx b/adminSiteClient/GdocsPreviewPage.tsx
index 49844dd7ba..aa5ab05139 100644
--- a/adminSiteClient/GdocsPreviewPage.tsx
+++ b/adminSiteClient/GdocsPreviewPage.tsx
@@ -33,11 +33,11 @@ import {
 } from "@fortawesome/free-solid-svg-icons"
 import { match as tsMatch, P } from "ts-pattern"
 
+import { useGdocsChanged, useLightningUpdate } from "./gdocsHooks.js"
 import { getErrors } from "./gdocsValidation.js"
 import { GdocsSaveButtons } from "./GdocsSaveButtons.js"
+import { useGdocsStore } from "./GdocsStoreContext.js"
 import { IconBadge } from "./IconBadge.js"
-import { useGdocsStore } from "./GdocsStore.js"
-import { useGdocsChanged, useLightningUpdate } from "./gdocsHooks.js"
 import { GdocsMoreMenu } from "./GdocsMoreMenu.js"
 import { GdocsEditLink } from "./GdocsEditLink.js"
 import { openSuccessNotification } from "./gdocsNotifications.js"
diff --git a/adminSiteClient/GdocsStore.tsx b/adminSiteClient/GdocsStore.tsx
index 996b1e6e7b..08d75faf25 100644
--- a/adminSiteClient/GdocsStore.tsx
+++ b/adminSiteClient/GdocsStore.tsx
@@ -1,5 +1,3 @@
-import { useContext, createContext, useState } from "react"
-import * as React from "react"
 import { action, observable } from "mobx"
 import {
     getOwidGdocFromJSON,
@@ -9,7 +7,6 @@ import {
     DbPlainTag,
     OwidGdocIndexItem,
 } from "@ourworldindata/utils"
-import { AdminAppContext } from "./AdminAppContext.js"
 import { Admin } from "./Admin.js"
 import {
     CreateTombstoneData,
@@ -98,32 +95,3 @@ export class GdocsStore {
         }
     }
 }
-
-export const GdocsStoreContext = createContext<GdocsStore | undefined>(
-    undefined
-)
-
-export const GdocsStoreProvider = ({
-    children,
-}: {
-    children: React.ReactNode
-}) => {
-    const { admin } = useContext(AdminAppContext)
-    const [store] = useState(() => new GdocsStore(admin))
-
-    return (
-        <GdocsStoreContext.Provider value={store}>
-            {children}
-        </GdocsStoreContext.Provider>
-    )
-}
-
-export const useGdocsStore = () => {
-    const context = React.useContext(GdocsStoreContext)
-    if (context === undefined) {
-        throw new Error(
-            "useGdocsStore must be used within a GdocsStoreProvider"
-        )
-    }
-    return context
-}
diff --git a/adminSiteClient/GdocsStoreContext.tsx b/adminSiteClient/GdocsStoreContext.tsx
new file mode 100644
index 0000000000..eb10213418
--- /dev/null
+++ b/adminSiteClient/GdocsStoreContext.tsx
@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react"
+import { GdocsStore } from "./GdocsStore.js"
+
+export const GdocsStoreContext = createContext<GdocsStore | undefined>(
+    undefined
+)
+
+export const useGdocsStore = () => {
+    const context = useContext(GdocsStoreContext)
+    if (context === undefined) {
+        throw new Error(
+            "useGdocsStore must be used within a GdocsStoreProvider"
+        )
+    }
+    return context
+}
diff --git a/adminSiteClient/GdocsStoreProvider.tsx b/adminSiteClient/GdocsStoreProvider.tsx
new file mode 100644
index 0000000000..d9eb5dd41e
--- /dev/null
+++ b/adminSiteClient/GdocsStoreProvider.tsx
@@ -0,0 +1,19 @@
+import React, { useContext, useState } from "react"
+import { AdminAppContext } from "./AdminAppContext.js"
+import { GdocsStore } from "./GdocsStore.js"
+import { GdocsStoreContext } from "./GdocsStoreContext.js"
+
+export function GdocsStoreProvider({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    const { admin } = useContext(AdminAppContext)
+    const [store] = useState(() => new GdocsStore(admin))
+
+    return (
+        <GdocsStoreContext.Provider value={store}>
+            {children}
+        </GdocsStoreContext.Provider>
+    )
+}
diff --git a/adminSiteClient/GrapherConfigGridEditor.tsx b/adminSiteClient/GrapherConfigGridEditor.tsx
index d4539d9b76..b064688980 100644
--- a/adminSiteClient/GrapherConfigGridEditor.tsx
+++ b/adminSiteClient/GrapherConfigGridEditor.tsx
@@ -81,7 +81,6 @@ import {
     initialFilterQueryValue,
     fieldDescriptionToFilterPanelFieldConfig,
     simpleColumnToFilterPanelFieldConfig,
-    renderBuilder,
     GrapherConfigGridEditorProps,
     GrapherConfigGridEditorConfig,
     ColumnDataSource,
@@ -93,6 +92,7 @@ import {
     fetchVariablesParametersToQueryParameters,
     postprocessJsonLogicTree,
 } from "./GrapherConfigGridEditorTypesAndUtils.js"
+import QueryBuilderContainer from "./QueryBuilderContainer.js"
 import {
     Query,
     Utils as QbUtils,
@@ -107,6 +107,8 @@ import jsonpointer from "json8-pointer"
 import { EditorColorScaleSection } from "./EditorColorScaleSection.js"
 import { Operation } from "../adminShared/SqlFilterSExpression.js"
 
+// The rule doesn't support class components in the same file.
+// eslint-disable-next-line react-refresh/only-export-components
 function HotColorScaleRenderer() {
     return <div style={{ color: "gray" }}>Color scale</div>
 }
@@ -1409,7 +1411,7 @@ export class GrapherConfigGridEditor extends React.Component<GrapherConfigGridEd
                             {...FilterPanelConfig}
                             value={filterState.tree}
                             onChange={this.updateFilterState}
-                            renderBuilder={renderBuilder}
+                            renderBuilder={QueryBuilderContainer}
                         />
                     )}
                     <small className="form-text text-muted">
diff --git a/adminSiteClient/GrapherConfigGridEditorTypesAndUtils.tsx b/adminSiteClient/GrapherConfigGridEditorTypesAndUtils.tsx
index ebba11e932..e15f3f36b8 100644
--- a/adminSiteClient/GrapherConfigGridEditorTypesAndUtils.tsx
+++ b/adminSiteClient/GrapherConfigGridEditorTypesAndUtils.tsx
@@ -1,3 +1,5 @@
+// FIXME: Don't mix components and business logic in this file.
+/* eslint-disable react-refresh/only-export-components */
 import {
     checkIsPlainObjectWithGuard,
     excludeUndefined,
@@ -43,8 +45,6 @@ import { GrapherInterface } from "@ourworldindata/types"
 import {
     AntdConfig,
     BasicConfig,
-    Builder,
-    BuilderProps,
     JsonTree,
     SimpleField,
     Utils as QbUtils,
@@ -551,16 +551,6 @@ export function fieldDescriptionToFilterPanelFieldConfig(
     } else return undefined
 }
 
-export function renderBuilder(props: BuilderProps) {
-    return (
-        <div className="query-builder-container" style={{ padding: "0" }}>
-            <div className="query-builder qb-lite">
-                <Builder {...props} />
-            </div>
-        </div>
-    )
-}
-
 export interface GrapherConfigGridEditorConfig {
     source: GrapherConfigGridEditorSource
     sExpressionContext: OperationContext
diff --git a/adminSiteClient/QueryBuilderContainer.tsx b/adminSiteClient/QueryBuilderContainer.tsx
new file mode 100644
index 0000000000..08307d81ce
--- /dev/null
+++ b/adminSiteClient/QueryBuilderContainer.tsx
@@ -0,0 +1,11 @@
+import { BuilderProps, Builder } from "@react-awesome-query-builder/antd"
+
+export default function QueryBuilderContainer(props: BuilderProps) {
+    return (
+        <div className="query-builder-container" style={{ padding: "0" }}>
+            <div className="query-builder qb-lite">
+                <Builder {...props} />
+            </div>
+        </div>
+    )
+}
diff --git a/adminSiteClient/TagGraphPage.tsx b/adminSiteClient/TagGraphPage.tsx
index de64571844..d89de085e9 100644
--- a/adminSiteClient/TagGraphPage.tsx
+++ b/adminSiteClient/TagGraphPage.tsx
@@ -25,6 +25,8 @@ import { AutoComplete, Button, Popconfirm } from "antd"
 import { FlatTagGraph, FlatTagGraphNode } from "@ourworldindata/types"
 import { Link } from "react-router-dom"
 
+// The rule doesn't support class components in the same file.
+// eslint-disable-next-line react-refresh/only-export-components
 function DraggableDroppable(props: {
     id: string
     children: React.ReactNode
diff --git a/adminSiteClient/constants.ts b/adminSiteClient/constants.ts
new file mode 100644
index 0000000000..aac38f56c2
--- /dev/null
+++ b/adminSiteClient/constants.ts
@@ -0,0 +1,12 @@
+// Non-deterministic values which shouldn't be displayed in the diff viewer
+// Errors are already shown in the settings drawer, so we don't show those either
+export const GDOC_DIFF_OMITTABLE_PROPERTIES = [
+    "errors",
+    // imageMetadata *does* count as something that meaningfully contributes to whether a Gdoc is different,
+    // And it's checked in the checkIsLightningUpdate function,
+    // but for the preview, it's already captured by changes to the body text, so we don't need to show these objects in the diff also
+    "imageMetadata",
+    "linkedCharts",
+    "linkedDocuments",
+    "relatedCharts",
+]
diff --git a/adminSiteClient/gdocsDeploy.ts b/adminSiteClient/gdocsDeploy.ts
index 7c738e4931..543e0c1f2e 100644
--- a/adminSiteClient/gdocsDeploy.ts
+++ b/adminSiteClient/gdocsDeploy.ts
@@ -12,8 +12,8 @@ import {
     OwidGdocHomepageContent,
     OwidGdocAuthorContent,
 } from "@ourworldindata/types"
-import { GDOC_DIFF_OMITTABLE_PROPERTIES } from "./GdocsDiff.js"
 import { match } from "ts-pattern"
+import { GDOC_DIFF_OMITTABLE_PROPERTIES } from "./constants.js"
 
 /**
  * This function checks if the article has changed in a way that is compatible
diff --git a/baker/formatWordpressPost.tsx b/baker/formatWordpressPost.tsx
index 40b6621e39..97f1798f4b 100644
--- a/baker/formatWordpressPost.tsx
+++ b/baker/formatWordpressPost.tsx
@@ -13,11 +13,9 @@ import { DataToken } from "../site/DataToken.js"
 import { DEEP_LINK_CLASS, formatImages } from "./formatting.js"
 import { replaceIframesWithExplorerRedirectsInWordPressPost } from "./replaceExplorerRedirects.js"
 import { EXPLORERS_ROUTE_FOLDER } from "@ourworldindata/explorer"
-import {
-    ADDITIONAL_INFORMATION_CLASS_NAME,
-    renderAdditionalInformation,
-} from "../site/blocks/AdditionalInformation.js"
-import { renderHelp } from "../site/blocks/Help.js"
+import { ADDITIONAL_INFORMATION_CLASS_NAME } from "../site/blocks/AdditionalInformation.js"
+import { renderAdditionalInformation } from "../site/blocks/renderAdditionalInformation.js"
+import { renderHelp } from "../site/blocks/renderHelp.js"
 import { renderCodeSnippets } from "@ourworldindata/components"
 import { formatUrls, getBodyHtml } from "../site/formatting.js"
 import { GRAPHER_PREVIEW_CLASS } from "../site/SiteConstants.js"
diff --git a/baker/pageOverrides.tsx b/baker/pageOverrides.tsx
index fb1a90a999..168a84766e 100644
--- a/baker/pageOverrides.tsx
+++ b/baker/pageOverrides.tsx
@@ -2,7 +2,7 @@ import { PageOverrides } from "../site/LongFormPage.js"
 import { BAKED_BASE_URL } from "../settings/serverSettings.js"
 import { urlToSlug, FullPost, JsonError } from "@ourworldindata/utils"
 import { FormattingOptions } from "@ourworldindata/types"
-import { getTopSubnavigationParentItem } from "../site/SiteSubnavigation.js"
+import { getTopSubnavigationParentItem } from "../site/gdocs/utils.js"
 import { logErrorAndMaybeSendToBugsnag } from "../serverUtils/errorLog.js"
 import {
     getFullPostBySlugFromSnapshot,
diff --git a/baker/siteRenderers.tsx b/baker/siteRenderers.tsx
index 75d24feeee..e53a9e3e52 100644
--- a/baker/siteRenderers.tsx
+++ b/baker/siteRenderers.tsx
@@ -99,7 +99,10 @@ import {
     getAndLoadPublishedDataInsightsPage,
 } from "../db/model/Gdoc/GdocFactory.js"
 import { transformExplorerProgramToResolveCatalogPaths } from "./ExplorerBaker.js"
-import { Attachments, AttachmentsContext } from "../site/gdocs/OwidGdoc.js"
+import {
+    Attachments,
+    AttachmentsContext,
+} from "../site/gdocs/AttachmentsContext.js"
 import AtomArticleBlocks from "../site/gdocs/components/AtomArticleBlocks.js"
 import { GdocDataInsight } from "../db/model/Gdoc/GdocDataInsight.js"
 
diff --git a/db/model/Gdoc/GdocHomepage.ts b/db/model/Gdoc/GdocHomepage.ts
index 8b082780a0..bf51ec4fbb 100644
--- a/db/model/Gdoc/GdocHomepage.ts
+++ b/db/model/Gdoc/GdocHomepage.ts
@@ -12,7 +12,7 @@ import {
     OwidGdocBaseInterface,
     OwidGdocHomepageMetadata,
 } from "@ourworldindata/types"
-import { getUniqueTopicCount } from "../../../site/SiteNavigation.js"
+import { getUniqueTopicCount } from "../../../site/gdocs/utils.js"
 import { getLatestDataInsights } from "./GdocFactory.js"
 
 export class GdocHomepage
diff --git a/db/model/Post.ts b/db/model/Post.ts
index dd1eb72966..d8a7788a2a 100644
--- a/db/model/Post.ts
+++ b/db/model/Post.ts
@@ -40,7 +40,7 @@ import {
     CLOUDFLARE_IMAGES_URL,
 } from "../../settings/clientSettings.js"
 import { BLOG_SLUG } from "../../settings/serverSettings.js"
-import { SiteNavigationStatic } from "../../site/SiteNavigation.js"
+import { SiteNavigationStatic } from "../../site/SiteConstants.js"
 import { decodeHTML } from "entities"
 import { getAndLoadListedGdocPosts } from "./Gdoc/GdocFactory.js"
 
diff --git a/devTools/navigationTest/navigationTest.ts b/devTools/navigationTest/navigationTest.ts
index a191b52f66..3d720fcc66 100644
--- a/devTools/navigationTest/navigationTest.ts
+++ b/devTools/navigationTest/navigationTest.ts
@@ -1,7 +1,7 @@
 // Test all the slugs in the SiteNavigationStatic object and makes sure
 // https://ourworldindata.org/{slug} returns a 200
 
-import { SiteNavigationStatic } from "../../site/SiteNavigation.js"
+import { SiteNavigationStatic } from "../../site/SiteConstants.js"
 
 const testSiteNavigation = async () => {
     const slugs = SiteNavigationStatic.categories.flatMap((category) => {
diff --git a/eslint.config.mjs b/eslint.config.mjs
index c7ea780d1e..a38421cbf9 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -10,6 +10,7 @@ import react from "eslint-plugin-react"
 // https://github.com/facebook/react/issues/30119
 // @ts-ignore
 import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
 import tseslint from "typescript-eslint"
 
 export default tseslint.config(
@@ -21,7 +22,25 @@ export default tseslint.config(
     react.configs.flat.recommended,
     // @ts-ignore
     react.configs.flat["jsx-runtime"],
-    prettier,
+    {
+        files: [
+            // TODO: Apply to all React files when we move off class components,
+            // since they are not supported.
+            "adminSiteClient/**/*.tsx",
+            "explorerAdminClient/**/*.tsx",
+            "packages/@ourworldindata/components/src/**/*.tsx",
+            "site/**/*.tsx",
+        ],
+        plugins: {
+            "react-refresh": reactRefresh,
+        },
+        rules: {
+            "react-refresh/only-export-components": [
+                "error",
+                { allowConstantExport: true },
+            ],
+        },
+    },
     {
         plugins: {
             // They don't have a compatible flat config at the moment. Update to
@@ -165,6 +184,7 @@ export default tseslint.config(
             "@typescript-eslint/explicit-module-boundary-types": "warn",
         },
     },
+    prettier,
     {
         ignores: [
             "**/.*",
diff --git a/package.json b/package.json
index fe2e6598e6..0424314c72 100644
--- a/package.json
+++ b/package.json
@@ -230,6 +230,7 @@
         "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-react": "^7.37.2",
         "eslint-plugin-react-hooks": "^5.1.0",
+        "eslint-plugin-react-refresh": "^0.4.16",
         "flag-icons": "^7.2.3",
         "http-server": "^14.1.1",
         "husky": "^9.0.11",
diff --git a/packages/@ourworldindata/components/src/CodeSnippet/CodeSnippet.tsx b/packages/@ourworldindata/components/src/CodeSnippet/CodeSnippet.tsx
index bbd26e0c25..6045ee7157 100644
--- a/packages/@ourworldindata/components/src/CodeSnippet/CodeSnippet.tsx
+++ b/packages/@ourworldindata/components/src/CodeSnippet/CodeSnippet.tsx
@@ -1,6 +1,4 @@
 import { useEffect, useState } from "react"
-import ReactDOM from "react-dom"
-import ReactDOMServer from "react-dom/server.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faCopy } from "@fortawesome/free-solid-svg-icons"
 import { canWriteToClipboard } from "@ourworldindata/utils"
@@ -75,29 +73,3 @@ export const CodeSnippet = ({
         </div>
     )
 }
-
-export const hydrateCodeSnippets = () => {
-    const codeSnippets = document.querySelectorAll("div.wp-code-snippet")
-
-    codeSnippets.forEach((snippet) => {
-        const code =
-            snippet.querySelector(".wp-block-code code")?.textContent || ""
-        ReactDOM.hydrate(<CodeSnippet code={code} />, snippet.parentElement)
-    })
-}
-
-export const renderCodeSnippets = ($: CheerioStatic) => {
-    const codeSnippets = $("div.wp-code-snippet")
-    codeSnippets.each((_, snippet) => {
-        const $el = $(snippet)
-        const $dry = $(
-            ReactDOMServer.renderToStaticMarkup(
-                <div>
-                    <CodeSnippet code={$el.text().trim()} />
-                </div>
-            )
-        )
-        $el.after($dry)
-        $el.remove()
-    })
-}
diff --git a/packages/@ourworldindata/components/src/CodeSnippet/hydrateCodeSnippets.tsx b/packages/@ourworldindata/components/src/CodeSnippet/hydrateCodeSnippets.tsx
new file mode 100644
index 0000000000..a3d7693b5b
--- /dev/null
+++ b/packages/@ourworldindata/components/src/CodeSnippet/hydrateCodeSnippets.tsx
@@ -0,0 +1,11 @@
+import { hydrate } from "react-dom"
+import { CodeSnippet } from "./CodeSnippet.js"
+
+export function hydrateCodeSnippets() {
+    const codeSnippets = document.querySelectorAll("div.wp-code-snippet")
+    codeSnippets.forEach((snippet) => {
+        const code =
+            snippet.querySelector(".wp-block-code code")?.textContent || ""
+        hydrate(<CodeSnippet code={code} />, snippet.parentElement)
+    })
+}
diff --git a/packages/@ourworldindata/components/src/CodeSnippet/renderCodeSnippets.tsx b/packages/@ourworldindata/components/src/CodeSnippet/renderCodeSnippets.tsx
new file mode 100644
index 0000000000..5532ad566c
--- /dev/null
+++ b/packages/@ourworldindata/components/src/CodeSnippet/renderCodeSnippets.tsx
@@ -0,0 +1,18 @@
+import { renderToStaticMarkup } from "react-dom/server"
+import { CodeSnippet } from "./CodeSnippet.js"
+
+export function renderCodeSnippets($: CheerioStatic) {
+    const codeSnippets = $("div.wp-code-snippet")
+    codeSnippets.each((_, snippet) => {
+        const $el = $(snippet)
+        const $dry = $(
+            renderToStaticMarkup(
+                <div>
+                    <CodeSnippet code={$el.text().trim()} />
+                </div>
+            )
+        )
+        $el.after($dry)
+        $el.remove()
+    })
+}
diff --git a/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx b/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx
index 494e67e4a0..ff1bfdf533 100644
--- a/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx
+++ b/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx
@@ -727,6 +727,8 @@ export class MarkdownTextWrap extends React.Component<MarkdownTextWrapProps> {
     }
 }
 
+// The rule doesn't support class components in the same file.
+// eslint-disable-next-line react-refresh/only-export-components
 function MarkdownTextWrapLine({
     line,
 }: {
diff --git a/packages/@ourworldindata/components/src/closeButton/CloseButton.tsx b/packages/@ourworldindata/components/src/closeButton/CloseButton.tsx
index 45a1894697..745d9ebd65 100644
--- a/packages/@ourworldindata/components/src/closeButton/CloseButton.tsx
+++ b/packages/@ourworldindata/components/src/closeButton/CloseButton.tsx
@@ -4,10 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faXmark } from "@fortawesome/free-solid-svg-icons"
 
 // keep in sync with $size in CloseButton.scss
-const CLOSE_BUTTON_SIZE = 32
-
-export const CLOSE_BUTTON_WIDTH = CLOSE_BUTTON_SIZE
-export const CLOSE_BUTTON_HEIGHT = CLOSE_BUTTON_SIZE
+export const CLOSE_BUTTON_WIDTH = 32
+export const CLOSE_BUTTON_HEIGHT = 32
 
 export function CloseButton({
     onClick,
diff --git a/packages/@ourworldindata/components/src/index.ts b/packages/@ourworldindata/components/src/index.ts
index 3f544ac904..cbe2a89077 100644
--- a/packages/@ourworldindata/components/src/index.ts
+++ b/packages/@ourworldindata/components/src/index.ts
@@ -45,11 +45,9 @@ export { OverlayHeader } from "./OverlayHeader.js"
 export { IndicatorSources } from "./IndicatorSources/IndicatorSources.js"
 export { TextInput } from "./TextInput.js"
 
-export {
-    CodeSnippet,
-    hydrateCodeSnippets,
-    renderCodeSnippets,
-} from "./CodeSnippet/CodeSnippet.js"
+export { CodeSnippet } from "./CodeSnippet/CodeSnippet.js"
+export { hydrateCodeSnippets } from "./CodeSnippet/hydrateCodeSnippets.js"
+export { renderCodeSnippets } from "./CodeSnippet/renderCodeSnippets.js"
 
 export { DataCitation } from "./DataCitation/DataCitation.js"
 
diff --git a/site/BackToTopic.tsx b/site/BackToTopic.tsx
index 7480a5393f..57d70f34c0 100644
--- a/site/BackToTopic.tsx
+++ b/site/BackToTopic.tsx
@@ -1,6 +1,7 @@
 import * as React from "react"
 import { SubNavId } from "@ourworldindata/types"
-import { getSubnavItem, subnavs } from "./SiteSubnavigation.js"
+import { getSubnavItem } from "./gdocs/utils.js"
+import { subnavs } from "./SiteConstants.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"
 
diff --git a/site/Breadcrumb/Breadcrumb.test.ts b/site/Breadcrumb/Breadcrumb.test.ts
index 8f4c33bac0..7bb679d06d 100755
--- a/site/Breadcrumb/Breadcrumb.test.ts
+++ b/site/Breadcrumb/Breadcrumb.test.ts
@@ -1,7 +1,7 @@
 #! /usr/bin/env jest
 
-import { getSubnavItem } from "../SiteSubnavigation.js"
-import { getBreadcrumbItems, getSubnavParent } from "./Breadcrumb.js"
+import { getSubnavItem } from "../gdocs/utils.js"
+import { getBreadcrumbItems, getSubnavParent } from "./breadcrumbUtils.js"
 
 const subnavs = {
     coronavirus: [
diff --git a/site/Breadcrumb/Breadcrumb.tsx b/site/Breadcrumb/Breadcrumb.tsx
index 01b84afbb5..b8d5b92f9c 100644
--- a/site/Breadcrumb/Breadcrumb.tsx
+++ b/site/Breadcrumb/Breadcrumb.tsx
@@ -1,39 +1,10 @@
 import { Fragment } from "react"
 import { BreadcrumbItem } from "@ourworldindata/utils"
 import { SubNavId } from "@ourworldindata/types"
-import { getSubnavItem, SubnavItem, subnavs } from "../SiteSubnavigation.js"
+import { subnavs } from "../SiteConstants.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons"
-
-export const getSubnavParent = (
-    currentItem: SubnavItem | undefined,
-    subnavItems: SubnavItem[]
-) => {
-    const parentId = currentItem?.parentId
-    // We want to avoid matching elements with potentially undefined id.
-    // Static typing prevents id from being undefined but this might not be
-    // the case in a future API powered version.
-    return parentId
-        ? subnavItems.find((item) => item.id === parentId)
-        : undefined
-}
-
-export const getBreadcrumbItems = (
-    subnavCurrentId: string | undefined,
-    subnavItems: SubnavItem[]
-): BreadcrumbItem[] | undefined => {
-    const breadcrumb = []
-    let currentItem = getSubnavItem(subnavCurrentId, subnavItems)
-    if (!currentItem) return
-    breadcrumb.push(currentItem)
-
-    while (currentItem && currentItem.parentId) {
-        currentItem = getSubnavParent(currentItem, subnavItems)
-        if (currentItem) breadcrumb.push(currentItem)
-    }
-    if (currentItem !== subnavItems[0]) breadcrumb.push(subnavItems[0]) // add topic as parent
-    return breadcrumb.reverse()
-}
+import { getBreadcrumbItems } from "./breadcrumbUtils.js"
 
 export const BreadcrumbsFromSubnav = ({
     subnavId,
diff --git a/site/Breadcrumb/breadcrumbUtils.tsx b/site/Breadcrumb/breadcrumbUtils.tsx
new file mode 100644
index 0000000000..effc527138
--- /dev/null
+++ b/site/Breadcrumb/breadcrumbUtils.tsx
@@ -0,0 +1,33 @@
+import { BreadcrumbItem } from "@ourworldindata/types"
+import { getSubnavItem } from "../gdocs/utils.js"
+import { SubnavItem } from "../SiteConstants.js"
+
+export const getSubnavParent = (
+    currentItem: SubnavItem | undefined,
+    subnavItems: SubnavItem[]
+) => {
+    const parentId = currentItem?.parentId
+    // We want to avoid matching elements with potentially undefined id.
+    // Static typing prevents id from being undefined but this might not be
+    // the case in a future API powered version.
+    return parentId
+        ? subnavItems.find((item) => item.id === parentId)
+        : undefined
+}
+
+export const getBreadcrumbItems = (
+    subnavCurrentId: string | undefined,
+    subnavItems: SubnavItem[]
+): BreadcrumbItem[] | undefined => {
+    const breadcrumb = []
+    let currentItem = getSubnavItem(subnavCurrentId, subnavItems)
+    if (!currentItem) return
+    breadcrumb.push(currentItem)
+
+    while (currentItem && currentItem.parentId) {
+        currentItem = getSubnavParent(currentItem, subnavItems)
+        if (currentItem) breadcrumb.push(currentItem)
+    }
+    if (currentItem !== subnavItems[0]) breadcrumb.push(subnavItems[0]) // add topic as parent
+    return breadcrumb.reverse()
+}
diff --git a/site/CookieNotice.tsx b/site/CookieNotice.tsx
index 9cc5c838f1..92f21f10ac 100644
--- a/site/CookieNotice.tsx
+++ b/site/CookieNotice.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react"
 import classnames from "classnames"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faCheck } from "@fortawesome/free-solid-svg-icons"
-import { Action, getTodayDate } from "./CookiePreferencesManager.js"
+import { Action, getTodayDate } from "./cookiePreferences.js"
 
 export const CookieNotice = ({
     accepted,
diff --git a/site/CookiePreferencesManager.test.ts b/site/CookiePreferencesManager.test.ts
index 7a7a4b773a..e8707a33d8 100755
--- a/site/CookiePreferencesManager.test.ts
+++ b/site/CookiePreferencesManager.test.ts
@@ -9,7 +9,7 @@ import {
     getPreferenceValue,
     serializeState,
     arePreferencesOutdated,
-} from "./CookiePreferencesManager.js"
+} from "./cookiePreferences.js"
 
 describe("cookie preferences", () => {
     const preferences = [
diff --git a/site/CookiePreferencesManager.tsx b/site/CookiePreferencesManager.tsx
index 4c1428e6ac..bded21516b 100644
--- a/site/CookiePreferencesManager.tsx
+++ b/site/CookiePreferencesManager.tsx
@@ -1,53 +1,23 @@
-import ReactDOM from "react-dom"
 import { useEffect, useMemo, useReducer } from "react"
 import Cookies from "js-cookie"
 import { CookiePreferences } from "../site/blocks/CookiePreferences.js"
 import { CookieNotice } from "../site/CookieNotice.js"
-import { dayjs } from "@ourworldindata/utils"
+import {
+    Action,
+    arePreferencesOutdated,
+    COOKIE_PREFERENCES_COOKIE_NAME,
+    defaultState,
+    getPreferenceValue,
+    POLICY_DATE,
+    PreferenceType,
+    serializeState,
+    State,
+    updatePreference,
+} from "./cookiePreferences.js"
 import { SiteAnalytics } from "./SiteAnalytics.js"
 
-export enum PreferenceType {
-    Analytics = "a",
-    Marketing = "m", // not used
-}
-
-export enum Action {
-    Accept,
-    TogglePreference,
-    Reset,
-    Persist,
-    Reject,
-}
-
-export interface Preference {
-    type: PreferenceType
-    value: boolean
-}
-
-export const POLICY_DATE: number = 20201009
-export const DATE_FORMAT = "YYYYMMDD"
-export const COOKIE_PREFERENCES_COOKIE_NAME = "cookie_preferences"
-const PREFERENCES_SEPARATOR = "|"
-const DATE_SEPARATOR = "-"
-const PREFERENCE_KEY_VALUE_SEPARATOR = ":"
-// e.g. p:1-20200910
-
-interface State {
-    date?: number
-    preferences: Preference[]
-}
-
 const analytics = new SiteAnalytics()
 
-const defaultState: State = {
-    preferences: [
-        {
-            type: PreferenceType.Analytics,
-            value: false,
-        },
-    ],
-}
-
 export const CookiePreferencesManager = ({
     initialState,
 }: {
@@ -148,125 +118,3 @@ const reducer = (
             return state
     }
 }
-
-const getInitialState = (): State => {
-    let cookieValue = undefined
-    try {
-        // Cookie access can be restricted by iframe sandboxing, in which case the below code will throw an error
-        // see https://github.com/owid/owid-grapher/pull/2452
-
-        cookieValue = parseRawCookieValue(
-            Cookies.get(COOKIE_PREFERENCES_COOKIE_NAME)
-        )
-    } catch {
-        // ignore
-    }
-
-    if (!cookieValue || arePreferencesOutdated(cookieValue.date, POLICY_DATE))
-        return defaultState
-    return cookieValue
-}
-
-export const parseRawCookieValue = (cookieValue?: string) => {
-    if (!cookieValue) return
-
-    const [preferencesRaw, dateRaw] = cookieValue.split(DATE_SEPARATOR)
-    const date = parseDate(dateRaw)
-    if (!date) return
-
-    const preferences = parsePreferences(preferencesRaw)
-    if (!preferences.length) return
-
-    return {
-        preferences,
-        date,
-    }
-}
-
-export const parsePreferences = (preferences?: string): Preference[] => {
-    if (!preferences) return []
-
-    return preferences
-        .split(PREFERENCES_SEPARATOR)
-        .map((preference) => {
-            const [type, , value] = preference // only supports 1 digit values
-            return {
-                type: type as PreferenceType,
-                value: value === "1",
-            }
-        })
-        .filter((preference) => isValidPreference(preference))
-}
-
-export const isValidPreference = ({ type, value }: Preference) => {
-    return (
-        Object.values(PreferenceType).includes(type as PreferenceType) &&
-        typeof value === "boolean"
-    )
-}
-
-export const parseDate = (date?: string): number | undefined => {
-    if (!date) return
-
-    return dayjs(date, DATE_FORMAT, true).isValid()
-        ? parseInt(date, 10)
-        : undefined
-}
-
-export const getPreferenceValue = (
-    type: PreferenceType,
-    preferences: Preference[] = getInitialState().preferences
-) => {
-    return (
-        preferences.find((preference) => {
-            return preference.type === type
-        })?.value ?? false
-    )
-}
-
-export const updatePreference = (
-    type: PreferenceType,
-    value: boolean,
-    preferences: Preference[]
-) => {
-    return preferences.map((preference) => {
-        if (preference.type !== type) return preference
-
-        return {
-            ...preference,
-            value,
-        }
-    })
-}
-
-export const arePreferencesOutdated = (
-    preferencesDate: number | undefined,
-    policyDate: number
-) => {
-    if (!preferencesDate) return false
-    return preferencesDate < policyDate
-}
-
-export const serializeState = (state: State) => {
-    const serializedPreferences = state.preferences
-        .map((preference) => {
-            return `${preference.type}${PREFERENCE_KEY_VALUE_SEPARATOR}${
-                preference.value ? 1 : 0
-            }`
-        })
-        .join(PREFERENCES_SEPARATOR)
-
-    return `${serializedPreferences}${DATE_SEPARATOR}${state.date}`
-}
-
-export const getTodayDate = () => dayjs().format(DATE_FORMAT)
-
-export const runCookiePreferencesManager = () => {
-    const div = document.createElement("div")
-    document.body.appendChild(div)
-
-    ReactDOM.render(
-        <CookiePreferencesManager initialState={getInitialState()} />,
-        div
-    )
-}
diff --git a/site/DataCatalog/DataCatalog.tsx b/site/DataCatalog/DataCatalog.tsx
index 411a99738e..e68f8d47a2 100644
--- a/site/DataCatalog/DataCatalog.tsx
+++ b/site/DataCatalog/DataCatalog.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useReducer, useRef, useState } from "react"
 import * as React from "react"
-import ReactDOM from "react-dom"
 import cx from "classnames"
 import {
     countriesByName,
@@ -964,14 +963,3 @@ export function DataCatalogInstantSearchWrapper({
         />
     )
 }
-
-export function hydrateDataCatalogPage() {
-    const root = document.getElementById("data-catalog-page-root")
-    const tagGraph = window._OWID_TAG_GRAPH as TagGraphRoot
-    if (root) {
-        ReactDOM.hydrate(
-            <DataCatalogInstantSearchWrapper tagGraph={tagGraph} />,
-            root
-        )
-    }
-}
diff --git a/site/DataInsightsIndexPage.tsx b/site/DataInsightsIndexPage.tsx
index de12b2f3bb..23e5f8b905 100644
--- a/site/DataInsightsIndexPage.tsx
+++ b/site/DataInsightsIndexPage.tsx
@@ -11,7 +11,7 @@ import {
     _OWID_DATA_INSIGHTS_INDEX_PAGE_DATA,
 } from "./DataInsightsIndexPageContent.js"
 import { DATA_INSIGHT_ATOM_FEED_PROPS } from "./SiteConstants.js"
-import { DebugProvider } from "./gdocs/DebugContext.js"
+import { DebugProvider } from "./gdocs/DebugProvider.js"
 import { Html } from "./Html.js"
 
 export interface DataInsightsIndexPageProps {
diff --git a/site/DataInsightsIndexPageContent.tsx b/site/DataInsightsIndexPageContent.tsx
index 622d85b04b..42224b6e43 100644
--- a/site/DataInsightsIndexPageContent.tsx
+++ b/site/DataInsightsIndexPageContent.tsx
@@ -1,5 +1,4 @@
 import cx from "classnames"
-import ReactDOM from "react-dom"
 import {
     ImageMetadata,
     LinkedChart,
@@ -9,15 +8,13 @@ import {
     uniqBy,
     getPaginationPageNumbers,
 } from "@ourworldindata/utils"
-import {
-    DataInsightBody,
-    dataInsightIndexToIdMap,
-} from "./gdocs/pages/DataInsight.js"
-import { AttachmentsContext, DocumentContext } from "./gdocs/OwidGdoc.js"
+import { DataInsightBody } from "./gdocs/pages/DataInsight.js"
+import { dataInsightIndexToIdMap } from "./SiteConstants.js"
+import { DocumentContext } from "./gdocs/DocumentContext.js"
+import { AttachmentsContext } from "./gdocs/AttachmentsContext.js"
 import { DataInsightsIndexPageProps } from "./DataInsightsIndexPage.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons"
-import { DebugProvider } from "./gdocs/DebugContext.js"
 import DataInsightsNewsletterBanner from "./DataInsightsNewsletterBanner.js"
 
 const Pagination = (props: { pageNumber: number; totalPageCount: number }) => {
@@ -153,19 +150,3 @@ export const DataInsightsIndexPageContent = (
 
 export const _OWID_DATA_INSIGHTS_INDEX_PAGE_DATA =
     "_OWID_DATA_INSIGHTS_INDEX_PAGE_DATA"
-
-export function hydrateDataInsightsIndexPage() {
-    const props = (window as any)[_OWID_DATA_INSIGHTS_INDEX_PAGE_DATA]
-    const container = document.querySelector(
-        `#data-insights-index-page-container`
-    )
-
-    if (container && props) {
-        ReactDOM.hydrate(
-            <DebugProvider>
-                <DataInsightsIndexPageContent {...props} />
-            </DebugProvider>,
-            container
-        )
-    }
-}
diff --git a/site/DataInsightsNewsletterBanner.tsx b/site/DataInsightsNewsletterBanner.tsx
index 9bdea248a0..96df4f2c5e 100644
--- a/site/DataInsightsNewsletterBanner.tsx
+++ b/site/DataInsightsNewsletterBanner.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react"
 import Cookies from "js-cookie"
 import cx from "classnames"
-import { COOKIE_PREFERENCES_COOKIE_NAME } from "./CookiePreferencesManager.js"
+import { COOKIE_PREFERENCES_COOKIE_NAME } from "./cookiePreferences.js"
 import { NewsletterSubscriptionContext } from "./newsletter.js"
 import DataInsightsNewsletter from "./gdocs/components/DataInsightsNewsletter.js"
 
diff --git a/site/DataPageV2.tsx b/site/DataPageV2.tsx
index 84af379842..f577ce0e7b 100644
--- a/site/DataPageV2.tsx
+++ b/site/DataPageV2.tsx
@@ -31,7 +31,7 @@ import { Head } from "./Head.js"
 import { SiteFooter } from "./SiteFooter.js"
 import { SiteHeader } from "./SiteHeader.js"
 import { IFrameDetector } from "./IframeDetector.js"
-import { DebugProvider } from "./gdocs/DebugContext.js"
+import { DebugProvider } from "./gdocs/DebugProvider.js"
 import { Html } from "./Html.js"
 
 export const DataPageV2 = (props: {
diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx
index 5b46203187..673dbc7a39 100644
--- a/site/DataPageV2Content.tsx
+++ b/site/DataPageV2Content.tsx
@@ -4,7 +4,6 @@ import {
     REUSE_THIS_WORK_SECTION_ID,
     DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
 } from "@ourworldindata/components"
-import ReactDOM from "react-dom"
 import { GrapherWithFallback } from "./GrapherWithFallback.js"
 import { RelatedCharts } from "./blocks/RelatedCharts.js"
 import {
@@ -16,9 +15,9 @@ import {
     ImageMetadata,
     DEFAULT_THUMBNAIL_FILENAME,
 } from "@ourworldindata/utils"
-import { AttachmentsContext, DocumentContext } from "./gdocs/OwidGdoc.js"
+import { DocumentContext } from "./gdocs/DocumentContext.js"
+import { AttachmentsContext } from "./gdocs/AttachmentsContext.js"
 import StickyNav from "./blocks/StickyNav.js"
-import { DebugProvider } from "./gdocs/DebugContext.js"
 import { BAKED_BASE_URL } from "../settings/clientSettings.js"
 import Image from "./gdocs/components/Image.js"
 import AboutThisData from "./AboutThisData.js"
@@ -274,20 +273,3 @@ export const DataPageV2Content = ({
         </AttachmentsContext.Provider>
     )
 }
-
-export const hydrateDataPageV2Content = (isPreviewing?: boolean) => {
-    const wrapper = document.querySelector(`#${OWID_DATAPAGE_CONTENT_ROOT_ID}`)
-    const props: DataPageV2ContentFields = window._OWID_DATAPAGEV2_PROPS
-    const grapherConfig = window._OWID_GRAPHER_CONFIG
-
-    ReactDOM.hydrate(
-        <DebugProvider debug={isPreviewing}>
-            <DataPageV2Content
-                {...props}
-                grapherConfig={grapherConfig}
-                isPreviewing={isPreviewing}
-            />
-        </DebugProvider>,
-        wrapper
-    )
-}
diff --git a/site/ExplorerIndex.tsx b/site/ExplorerIndex.tsx
index 4e21042c8b..b5f854316e 100644
--- a/site/ExplorerIndex.tsx
+++ b/site/ExplorerIndex.tsx
@@ -1,5 +1,4 @@
 import { useState } from "react"
-import ReactDOM from "react-dom"
 import { MinimalExplorerInfo } from "@ourworldindata/types"
 import { EXPLORER_DYNAMIC_THUMBNAIL_URL } from "../settings/clientSettings.js"
 import { faHeartBroken } from "@fortawesome/free-solid-svg-icons"
@@ -72,15 +71,3 @@ export function ExplorerIndex(props: ExplorerIndexPageProps) {
 
 export const __OWID_EXPLORER_INDEX_PAGE_PROPS =
     "__OWID_EXPLORER_INDEX_PAGE_PROPS"
-
-export function hydrateExplorerIndex() {
-    const explorerIndexPageProps = (window as any)[
-        __OWID_EXPLORER_INDEX_PAGE_PROPS
-    ]
-
-    if (!explorerIndexPageProps) return
-    ReactDOM.hydrate(
-        <ExplorerIndex {...explorerIndexPageProps} />,
-        document.querySelector(".explorer-index-page")
-    )
-}
diff --git a/site/Footnote.tsx b/site/Footnote.tsx
index cd933ca400..5ab41ff295 100644
--- a/site/Footnote.tsx
+++ b/site/Footnote.tsx
@@ -1,5 +1,4 @@
-import { isNil, parseIntOrUndefined, Tippy } from "@ourworldindata/utils"
-import ReactDOM from "react-dom"
+import { Tippy } from "@ourworldindata/utils"
 
 export const Footnote = ({
     index,
@@ -41,39 +40,3 @@ export const Footnote = ({
         </Tippy>
     )
 }
-
-interface FootnoteContent {
-    index: number
-    href: string
-    htmlContent: string
-}
-
-function getFootnoteContent(element: Element): FootnoteContent | null {
-    const href = element.closest("a.ref")?.getAttribute("href")
-    if (!href) return null
-
-    const index = parseIntOrUndefined(href.split("-")[1])
-    if (index === undefined) return null
-
-    const referencedEl = document.querySelector(href)
-    if (!referencedEl?.innerHTML) return null
-    return { index, href, htmlContent: referencedEl.innerHTML }
-}
-
-export function runFootnotes() {
-    const footnotes = document.querySelectorAll("a.ref")
-
-    footnotes.forEach((f) => {
-        const footnoteContent = getFootnoteContent(f)
-        if (isNil(footnoteContent)) return
-
-        ReactDOM.hydrate(
-            <Footnote
-                index={footnoteContent.index}
-                htmlContent={footnoteContent.htmlContent}
-                triggerTarget={f}
-            />,
-            f
-        )
-    })
-}
diff --git a/site/Lightbox.tsx b/site/Lightbox.tsx
index 951b564f40..d3be5ce7f4 100644
--- a/site/Lightbox.tsx
+++ b/site/Lightbox.tsx
@@ -1,43 +1,19 @@
+import { useCallback, useRef, useState } from "react"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
+    faSearchPlus,
+    faSearchMinus,
     faCompress,
     faDownload,
     faPlus,
-    faSearchMinus,
-    faSearchPlus,
 } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"
 import { LoadingIndicator } from "@ourworldindata/grapher"
-import cx from "classnames"
-import { useCallback, useRef, useState } from "react"
-import ReactDOM from "react-dom"
-import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch"
-import { useTriggerOnEscape } from "./hooks.js"
 import { triggerDownloadFromBlob } from "@ourworldindata/utils"
+import { unmountComponentAtNode } from "react-dom"
+import { useTriggerOnEscape } from "./hooks.js"
 
-export const LIGHTBOX_IMAGE_CLASS = "lightbox-image"
-
-/**
- * If the image is inside a <picture> element, get the URL of the largest
- * source image that matches the current viewport size.
- */
-function getActiveSourceImgUrl(img: HTMLImageElement): string | undefined {
-    if (img.closest("picture")) {
-        const sources = img.closest("picture")!.querySelectorAll("source")
-        const activeSource = Array.from(sources).find((s) =>
-            s.media ? window.matchMedia(s.media).matches : true
-        )
-        const sourceSrcset = activeSource?.getAttribute("srcset")
-        // split sourceSrcset into [src, width] pairs
-        const srcsetPairs = sourceSrcset
-            ?.split(",")
-            .map((pair) => pair.trim().split(" "))
-        const largestImgSrc = srcsetPairs?.at(-1)?.[0]
-        return largestImgSrc
-    }
-    return undefined
-}
-
-const Lightbox = ({
+export const Lightbox = ({
     children,
     containerNode,
     imgSrc,
@@ -55,7 +31,7 @@ const Lightbox = ({
 
     const close = useCallback(() => {
         if (containerNode) {
-            ReactDOM.unmountComponentAtNode(containerNode)
+            unmountComponentAtNode(containerNode)
         }
     }, [containerNode])
 
@@ -132,117 +108,3 @@ const Lightbox = ({
         </div>
     )
 }
-
-const LightboxImage = ({
-    src,
-    alt,
-    isLoaded,
-    setIsLoaded,
-    width,
-    height,
-}: {
-    src: string
-    alt: string
-    isLoaded: boolean
-    setIsLoaded: any
-    width: number
-    height: number
-}) => {
-    return (
-        <>
-            <img
-                width={width}
-                height={height}
-                onLoad={() => {
-                    setIsLoaded(true)
-                }}
-                className={cx({
-                    "lightbox__img--is-svg": src.endsWith(".svg"),
-                })}
-                src={src}
-                alt={alt}
-                style={{ opacity: !isLoaded ? 0 : 1, transition: "opacity 1s" }}
-            />
-        </>
-    )
-}
-
-const getImageDimensions = (url: string) => {
-    return new Promise<{ width: number; height: number } | undefined>(
-        (resolve, reject) => {
-            const img = new Image()
-
-            img.onload = () => {
-                resolve({
-                    width: img.naturalWidth,
-                    height: img.naturalHeight,
-                })
-            }
-
-            img.onerror = reject
-            img.src = url
-        }
-    )
-}
-
-export const runLightbox = () => {
-    let lightboxContainer = document.querySelector(".lightbox")
-    if (!lightboxContainer) {
-        lightboxContainer = document.createElement("div")
-        lightboxContainer.classList.add("lightbox")
-        document.body.appendChild(lightboxContainer)
-    }
-    Array.from(
-        document.querySelectorAll<HTMLImageElement>(
-            `.article-content img, .${LIGHTBOX_IMAGE_CLASS}`
-        )
-    ).forEach((img) => {
-        if (img.closest("[data-no-lightbox]")) return
-
-        img.classList.add("lightbox-enabled")
-        img.addEventListener("click", async () => {
-            // An attribute placed by our WP image formatter: the URL of the original image without any WxH suffix
-            const highResSrc = img.getAttribute("data-high-res-src")
-            // If the image is a Gdoc Image with a smallFilename, get the source that is currently active
-            const activeSourceImgUrl = getActiveSourceImgUrl(img)
-            const imgFilename =
-                img.getAttribute("data-filename") || "owid-image"
-
-            const imgSrc = highResSrc
-                ? // getAttribute doesn't automatically URI encode values, img.src does
-                  encodeURI(highResSrc)
-                : activeSourceImgUrl
-                  ? activeSourceImgUrl
-                  : img.src
-
-            // load image in advance and get naturalHeight and naturalWidth
-            // if the image doesn't load, use the dimensions of the img element
-            const dimensions = await getImageDimensions(imgSrc)
-            const width = dimensions?.width || img.width
-            const height = dimensions?.height || img.height
-
-            const imgAlt = img.alt
-            if (imgSrc) {
-                ReactDOM.render(
-                    <Lightbox
-                        imgSrc={imgSrc}
-                        imgFilename={imgFilename}
-                        containerNode={lightboxContainer}
-                    >
-                        {(isLoaded: boolean, setIsLoaded: any) => (
-                            <LightboxImage
-                                width={width}
-                                height={height}
-                                src={imgSrc}
-                                alt={imgAlt}
-                                isLoaded={isLoaded}
-                                setIsLoaded={setIsLoaded}
-                            />
-                        )}
-                    </Lightbox>,
-                    lightboxContainer
-                )
-            }
-        })
-    })
-}
diff --git a/site/LightboxImage.tsx b/site/LightboxImage.tsx
new file mode 100644
index 0000000000..c9bcabbc30
--- /dev/null
+++ b/site/LightboxImage.tsx
@@ -0,0 +1,35 @@
+import cx from "classnames"
+
+export const LightboxImage = ({
+    src,
+    alt,
+    isLoaded,
+    setIsLoaded,
+    width,
+    height,
+}: {
+    src: string
+    alt: string
+    isLoaded: boolean
+    setIsLoaded: any
+    width: number
+    height: number
+}) => {
+    return (
+        <>
+            <img
+                width={width}
+                height={height}
+                onLoad={() => {
+                    setIsLoaded(true)
+                }}
+                className={cx({
+                    "lightbox__img--is-svg": src.endsWith(".svg"),
+                })}
+                src={src}
+                alt={alt}
+                style={{ opacity: !isLoaded ? 0 : 1, transition: "opacity 1s" }}
+            />
+        </>
+    )
+}
diff --git a/site/SearchCountry.tsx b/site/SearchCountry.tsx
index 2244288110..cc9e1cd560 100644
--- a/site/SearchCountry.tsx
+++ b/site/SearchCountry.tsx
@@ -1,8 +1,6 @@
 import { useState } from "react"
-import ReactDOM from "react-dom"
 import Select from "react-select"
 import { countries, sortBy } from "@ourworldindata/utils"
-import { countryProfileSpecs } from "../site/countryProfileProjects.js"
 import { SiteAnalytics } from "./SiteAnalytics.js"
 
 interface CountrySelectOption {
@@ -12,7 +10,9 @@ interface CountrySelectOption {
 
 const analytics = new SiteAnalytics()
 
-const SearchCountry = (props: { countryProfileRootPath: string }) => {
+export default function SearchCountry(props: {
+    countryProfileRootPath: string
+}) {
     const [isLoading, setIsLoading] = useState(false)
     const sorted = sortBy(countries, "name")
     return (
@@ -32,27 +32,3 @@ const SearchCountry = (props: { countryProfileRootPath: string }) => {
         />
     )
 }
-
-export function runSearchCountry() {
-    const searchElements = document.querySelectorAll(
-        ".wp-block-search-country-profile"
-    )
-    searchElements.forEach((element) => {
-        const project = element.getAttribute("data-project")
-        if (project) {
-            const profileSpec = countryProfileSpecs.find(
-                (spec) => spec.project === project
-            )
-            if (profileSpec) {
-                ReactDOM.render(
-                    <SearchCountry
-                        countryProfileRootPath={profileSpec.rootPath}
-                    />,
-                    element
-                )
-            }
-        }
-    })
-}
-
-export default SearchCountry
diff --git a/site/SiteAbout.tsx b/site/SiteAbout.tsx
index a419d9da18..7a2e2db084 100644
--- a/site/SiteAbout.tsx
+++ b/site/SiteAbout.tsx
@@ -1,18 +1,11 @@
-export const ABOUT_LINKS = [
-    { title: "About Us", href: "/about" },
-    { title: "Organization", href: "/organization" },
-    { title: "Funding", href: "/funding" },
-    { title: "Team", href: "/team" },
-    { title: "Jobs", href: "/jobs" },
-    { title: "FAQs", href: "/faqs" },
-]
+import { ABOUT_LINKS } from "./SiteConstants.js"
 
 export function SiteAbout() {
     return (
         <ul>
-            {ABOUT_LINKS.map(({ title, href }) => (
-                <li key={href}>
-                    <a href={href}>{title}</a>
+            {ABOUT_LINKS.map(({ title, url }) => (
+                <li key={url}>
+                    <a href={url}>{title}</a>
                 </li>
             ))}
         </ul>
diff --git a/site/SiteConstants.ts b/site/SiteConstants.ts
index c24ca13902..98ae960491 100644
--- a/site/SiteConstants.ts
+++ b/site/SiteConstants.ts
@@ -7,6 +7,7 @@ import {
     faLinkedin,
     faBluesky,
 } from "@fortawesome/free-brands-svg-icons"
+import { CategoryWithEntries, SubNavId } from "@ourworldindata/types"
 
 // See https://cdnjs.cloudflare.com/polyfill/ for a list of all supported features
 const polyfillFeatures = [
@@ -88,3 +89,1199 @@ export const RSS_FEEDS = [
         icon: faRss,
     },
 ]
+
+export enum Menu {
+    Topics = "topics",
+    Resources = "resources",
+    About = "about",
+    Subscribe = "subscribe",
+    Search = "search",
+}
+
+export const ABOUT_LINKS = [
+    { title: "About Us", url: "/about" },
+    { title: "Organization", url: "/organization" },
+    { title: "Funding", url: "/funding" },
+    { title: "Team", url: "/team" },
+    { title: "Jobs", url: "/jobs" },
+    { title: "FAQs", url: "/faqs" },
+]
+
+export const SiteNavigationStatic: { categories: CategoryWithEntries[] } = {
+    categories: [
+        {
+            name: "Population and Demographic Change",
+            slug: "population",
+            entries: [],
+            subcategories: [
+                {
+                    name: "Population Change",
+                    slug: "population-change",
+                    entries: [
+                        {
+                            slug: "population-growth",
+                            title: "Population Growth",
+                        },
+                        {
+                            slug: "age-structure",
+                            title: "Age Structure",
+                        },
+                        {
+                            slug: "gender-ratio",
+                            title: "Gender Ratio",
+                        },
+                    ],
+                },
+                {
+                    name: "Births and Deaths",
+                    slug: "births-and-deaths",
+                    entries: [
+                        {
+                            slug: "life-expectancy",
+                            title: "Life Expectancy",
+                        },
+                        {
+                            slug: "fertility-rate",
+                            title: "Fertility Rate",
+                        },
+                        {
+                            slug: "child-mortality",
+                            title: "Child and Infant Mortality",
+                        },
+                    ],
+                },
+                {
+                    name: "Geography of the World Population",
+                    slug: "distribution-of-the-world-population",
+                    entries: [
+                        {
+                            slug: "urbanization",
+                            title: "Urbanization",
+                        },
+                        {
+                            slug: "migration",
+                            title: "Migration",
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: "Health",
+            slug: "health",
+            entries: [],
+            subcategories: [
+                {
+                    name: "Life and Death",
+                    slug: "life-and-death",
+                    entries: [
+                        {
+                            slug: "health-meta",
+                            title: "Global Health",
+                        },
+                        {
+                            slug: "causes-of-death",
+                            title: "Causes of Death",
+                        },
+                        {
+                            slug: "child-mortality",
+                            title: "Child and Infant Mortality",
+                        },
+                        {
+                            slug: "burden-of-disease",
+                            title: "Burden of Disease",
+                        },
+                        {
+                            slug: "life-expectancy",
+                            title: "Life Expectancy",
+                        },
+                        {
+                            slug: "mental-health",
+                            title: "Mental Health",
+                        },
+                        {
+                            slug: "suicide",
+                            title: "Suicides",
+                        },
+                        {
+                            slug: "cardiovascular-diseases",
+                            title: "Cardiovascular Diseases",
+                        },
+                        {
+                            slug: "cancer",
+                            title: "Cancer",
+                        },
+                        {
+                            slug: "maternal-mortality",
+                            title: "Maternal Mortality",
+                        },
+                    ],
+                },
+                {
+                    name: "Health Risks",
+                    slug: "health-risks",
+                    entries: [
+                        {
+                            slug: "air-pollution",
+                            title: "Air Pollution",
+                        },
+                        {
+                            slug: "outdoor-air-pollution",
+                            title: "Outdoor Air Pollution",
+                        },
+                        {
+                            slug: "indoor-air-pollution",
+                            title: "Indoor Air Pollution",
+                        },
+                        {
+                            slug: "lead-pollution",
+                            title: "Lead Pollution",
+                        },
+                        {
+                            slug: "alcohol-consumption",
+                            title: "Alcohol Consumption",
+                        },
+                        {
+                            slug: "illicit-drug-use",
+                            title: "Opioids, Cocaine, Cannabis, and Other Illicit Drugs",
+                        },
+
+                        {
+                            slug: "obesity",
+                            title: "Obesity",
+                        },
+                        {
+                            slug: "smoking",
+                            title: "Smoking",
+                        },
+                    ],
+                },
+                {
+                    name: "Infectious Diseases",
+                    slug: "infectious-diseases",
+                    entries: [
+                        {
+                            slug: "pandemics",
+                            title: "Pandemics",
+                        },
+                        {
+                            slug: "coronavirus",
+                            title: "Coronavirus Pandemic (COVID-19)",
+                        },
+                        {
+                            slug: "malaria",
+                            title: "Malaria",
+                        },
+                        {
+                            slug: "hiv-aids",
+                            title: "HIV/AIDS",
+                        },
+                        {
+                            slug: "diarrheal-diseases",
+                            title: "Diarrheal Diseases",
+                        },
+                        {
+                            slug: "tuberculosis",
+                            title: "Tuberculosis",
+                        },
+                        {
+                            slug: "polio",
+                            title: "Polio",
+                        },
+                        {
+                            slug: "neglected-tropical-diseases",
+                            title: "Neglected Tropical Diseases",
+                        },
+                        {
+                            slug: "influenza",
+                            title: "Influenza",
+                        },
+                        {
+                            slug: "pneumonia",
+                            title: "Pneumonia",
+                        },
+                        {
+                            slug: "tetanus",
+                            title: "Tetanus",
+                        },
+                        {
+                            slug: "monkeypox",
+                            title: "Mpox",
+                        },
+                        {
+                            slug: "smallpox",
+                            title: "Smallpox",
+                        },
+                    ],
+                },
+                {
+                    name: "Health Institutions and Interventions",
+                    slug: "health-institutions-and-interventions",
+                    entries: [
+                        {
+                            slug: "eradication-of-diseases",
+                            title: "Eradication of Diseases",
+                        },
+                        {
+                            slug: "vaccination",
+                            title: "Vaccination",
+                        },
+                        {
+                            slug: "antibiotics",
+                            title: "Antibiotics and Antibiotic Resistance",
+                        },
+                        {
+                            slug: "financing-healthcare",
+                            title: "Healthcare Spending",
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: "Energy and Environment",
+            slug: "environment",
+            entries: [],
+            subcategories: [
+                {
+                    name: "Climate and Air",
+                    slug: "climate-and-air",
+                    entries: [
+                        {
+                            slug: "climate-change",
+                            title: "Climate Change",
+                        },
+                        {
+                            slug: "co2-and-greenhouse-gas-emissions",
+                            title: "CO₂ and Greenhouse Gas Emissions",
+                        },
+                        {
+                            slug: "air-pollution",
+                            title: "Air Pollution",
+                        },
+                        {
+                            slug: "outdoor-air-pollution",
+                            title: "Outdoor Air Pollution",
+                        },
+                        {
+                            slug: "indoor-air-pollution",
+                            title: "Indoor Air Pollution",
+                        },
+                        {
+                            slug: "ozone-layer",
+                            title: "Ozone Layer",
+                        },
+                    ],
+                },
+                {
+                    name: "Energy Systems",
+                    slug: "energy-systems",
+                    entries: [
+                        {
+                            slug: "energy",
+                            title: "Energy",
+                        },
+                        {
+                            slug: "energy-access",
+                            title: "Access to Energy",
+                        },
+                        {
+                            slug: "fossil-fuels",
+                            title: "Fossil Fuels",
+                        },
+                        {
+                            slug: "renewable-energy",
+                            title: "Renewable Energy",
+                        },
+
+                        {
+                            slug: "nuclear-energy",
+                            title: "Nuclear Energy",
+                        },
+                        {
+                            slug: "metals-minerals",
+                            title: "Metals and Minerals",
+                        },
+                    ],
+                },
+                {
+                    name: "Environment and Ecosystems",
+                    slug: "land-and-ecosystems",
+                    entries: [
+                        {
+                            slug: "natural-disasters",
+                            title: "Natural Disasters",
+                        },
+                        {
+                            slug: "biodiversity",
+                            title: "Biodiversity",
+                        },
+                        {
+                            slug: "environmental-impacts-of-food",
+                            title: "Environmental Impacts of Food Production",
+                        },
+                        {
+                            slug: "fish-and-overfishing",
+                            title: "Fish and Overfishing",
+                        },
+                        {
+                            slug: "land-use",
+                            title: "Land Use",
+                        },
+                        {
+                            slug: "water-use-stress",
+                            title: "Water Use and Stress",
+                        },
+                        {
+                            slug: "forests-and-deforestation",
+                            title: "Forests and Deforestation",
+                        },
+                        {
+                            slug: "wildfires",
+                            title: "Wildfires",
+                        },
+                        {
+                            slug: "animal-welfare",
+                            title: "Animal Welfare",
+                        },
+                    ],
+                },
+                {
+                    name: "Waste and Pollution",
+                    slug: "waste-and-pollution",
+                    entries: [
+                        {
+                            slug: "plastic-pollution",
+                            title: "Plastic Pollution",
+                        },
+                        {
+                            slug: "oil-spills",
+                            title: "Oil Spills",
+                        },
+                        {
+                            slug: "lead-pollution",
+                            title: "Lead Pollution",
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: "Food and Agriculture",
+            slug: "food",
+            entries: [],
+            subcategories: [
+                {
+                    name: "Food Production",
+                    slug: "food-production",
+                    entries: [
+                        {
+                            slug: "agricultural-production",
+                            title: "Agricultural Production",
+                        },
+                        {
+                            slug: "meat-production",
+                            title: "Meat and Dairy Production",
+                        },
+                        {
+                            slug: "fish-and-overfishing",
+                            title: "Fish and Overfishing",
+                        },
+                        {
+                            slug: "crop-yields",
+                            title: "Crop Yields",
+                        },
+                        {
+                            slug: "animal-welfare",
+                            title: "Animal Welfare",
+                        },
+                        {
+                            slug: "environmental-impacts-of-food",
+                            title: "Environmental Impacts of Food Production",
+                        },
+                        {
+                            slug: "farm-size",
+                            title: "Farm Size and Productivity",
+                        },
+                    ],
+                },
+                {
+                    name: "Agricultural Inputs",
+                    slug: "agricultural-inputs",
+                    entries: [
+                        {
+                            slug: "land-use",
+                            title: "Land Use",
+                        },
+                        {
+                            slug: "fertilizers",
+                            title: "Fertilizers",
+                        },
+                        {
+                            slug: "pesticides",
+                            title: "Pesticides",
+                        },
+                        {
+                            slug: "employment-in-agriculture",
+                            title: "Employment in Agriculture",
+                        },
+                    ],
+                },
+                {
+                    name: "Nutrition",
+                    slug: "nutrition",
+                    entries: [
+                        {
+                            slug: "hunger-and-undernourishment",
+                            title: "Hunger and Undernourishment",
+                        },
+                        {
+                            slug: "food-supply",
+                            title: "Food Supply",
+                        },
+                        {
+                            slug: "food-prices",
+                            title: "Food Prices",
+                        },
+
+                        {
+                            slug: "obesity",
+                            title: "Obesity",
+                        },
+                        {
+                            slug: "famines",
+                            title: "Famines",
+                        },
+                        {
+                            slug: "diet-compositions",
+                            title: "Diet Compositions",
+                        },
+                        {
+                            slug: "micronutrient-deficiency",
+                            title: "Micronutrient Deficiency",
+                        },
+                        {
+                            slug: "human-height",
+                            title: "Human Height",
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: "Poverty and Economic Development",
+            slug: "growth-inequality",
+            entries: [],
+            subcategories: [
+                {
+                    name: "Poverty and Prosperity",
+                    slug: "poverty-and-prosperity",
+                    entries: [
+                        {
+                            slug: "poverty",
+                            title: "Poverty",
+                        },
+                        {
+                            slug: "economic-growth",
+                            title: "Economic Growth",
+                        },
+                        {
+                            slug: "economic-inequality",
+                            title: "Economic Inequality",
+                        },
+                        {
+                            slug: "foreign-aid",
+                            title: "Foreign Aid",
+                        },
+                        {
+                            slug: "economic-inequality-by-gender",
+                            title: "Economic Inequality by Gender",
+                        },
+                    ],
+                },
+                {
+                    name: "Public Sector",
+                    slug: "public-sector",
+                    entries: [
+                        {
+                            slug: "government-spending",
+                            title: "Government Spending",
+                        },
+                        {
+                            slug: "state-capacity",
+                            title: "State Capacity",
+                        },
+                        {
+                            slug: "taxation",
+                            title: "Taxation",
+                        },
+                        {
+                            slug: "corruption",
+                            title: "Corruption",
+                        },
+                        {
+                            slug: "financing-healthcare",
+                            title: "Healthcare Spending",
+                        },
+                        {
+                            slug: "financing-education",
+                            title: "Education Spending",
+                        },
+                        {
+                            slug: "military-personnel-spending",
+                            title: "Military Personnel and Spending",
+                        },
+                    ],
+                },
+
+                {
+                    name: "Labor",
+                    slug: "labor",
+                    entries: [
+                        {
+                            slug: "female-labor-supply",
+                            title: "Women’s Employment",
+                        },
+                        {
+                            slug: "child-labor",
+                            title: "Child Labor",
+                        },
+                        {
+                            slug: "working-hours",
+                            title: "Working Hours",
+                        },
+                    ],
+                },
+                {
+                    name: "Global Connections",
+                    slug: "trade-migration",
+                    entries: [
+                        {
+                            slug: "trade-and-globalization",
+                            title: "Trade and Globalization",
+                        },
+                        {
+                            slug: "migration",
+                            title: "Migration",
+                        },
+                        {
+                            slug: "tourism",
+                            title: "Tourism",
+                        },
+                    ],
+                },
+                {
+                    name: "Water",
+                    slug: "water",
+                    entries: [
+                        {
+                            slug: "clean-water-sanitation",
+                            title: "Clean Water and Sanitation",
+                        },
+                        {
+                            slug: "water-access",
+                            title: "Clean Water",
+                        },
+                        {
+                            slug: "sanitation",
+                            title: "Sanitation",
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: "Education and Knowledge",
+            slug: "education",
+            entries: [],
+            subcategories: [
+                {
+                    name: "Education",
+                    slug: "educational-outcomes",
+                    entries: [
+                        {
+                            slug: "global-education",
+                            title: "Global Education",
+                        },
+                        {
+                            slug: "literacy",
+                            title: "Literacy",
+                        },
+                        {
+                            slug: "financing-education",
+                            title: "Education Spending",
+                        },
+                    ],
+                },
+                {
+                    name: "Knowledge",
+                    slug: "inputs-to-education",
+                    entries: [
+                        {
+                            slug: "research-and-development",
+                            title: "Research and Development",
+                        },
+                        {
+                            slug: "internet",
+                            title: "Internet",
+                        },
+                        {
+                            slug: "books",
+                            title: "Books",
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: "Innovation and Technological Change",
+            slug: "technology",
+            entries: [
+                {
+                    slug: "technological-change",
+                    title: "Technological Change",
+                },
+                {
+                    slug: "research-and-development",
+                    title: "Research and Development",
+                },
+                {
+                    slug: "artificial-intelligence",
+                    title: "Artificial Intelligence",
+                },
+                {
+                    slug: "internet",
+                    title: "Internet",
+                },
+                {
+                    slug: "space-exploration-satellites",
+                    title: "Space Exploration and Satellites",
+                },
+                {
+                    slug: "transport",
+                    title: "Transport",
+                },
+            ],
+            subcategories: [],
+        },
+        {
+            name: "Living Conditions, Community, and Wellbeing",
+            slug: "work-life",
+            entries: [],
+            subcategories: [
+                {
+                    name: "Housing and Infrastructure",
+                    slug: "housing-and-infrastructure",
+                    entries: [
+                        {
+                            slug: "homelessness",
+                            title: "Homelessness",
+                        },
+                        {
+                            slug: "energy-access",
+                            title: "Access to Energy",
+                        },
+                        {
+                            slug: "indoor-air-pollution",
+                            title: "Indoor Air Pollution",
+                        },
+
+                        {
+                            slug: "clean-water-sanitation",
+                            title: "Clean Water and Sanitation",
+                        },
+                        {
+                            slug: "water-access",
+                            title: "Clean Water",
+                        },
+                        {
+                            slug: "sanitation",
+                            title: "Sanitation",
+                        },
+                        {
+                            slug: "light-at-night",
+                            title: "Light at Night",
+                        },
+                    ],
+                },
+                {
+                    name: "Time Use",
+                    slug: "time-use",
+                    entries: [
+                        {
+                            slug: "time-use",
+                            title: "Time Use",
+                        },
+                        {
+                            slug: "working-hours",
+                            title: "Working Hours",
+                        },
+                    ],
+                },
+                {
+                    name: "Relationships",
+                    slug: "relationships",
+                    entries: [
+                        {
+                            slug: "marriages-and-divorces",
+                            title: "Marriages and Divorces",
+                        },
+                        {
+                            slug: "social-connections-and-loneliness",
+                            title: "Loneliness and Social Connections",
+                        },
+                        {
+                            slug: "trust",
+                            title: "Trust",
+                        },
+                    ],
+                },
+                {
+                    name: "Happiness and Wellbeing",
+                    slug: "happiness-wellbeing",
+                    entries: [
+                        {
+                            slug: "happiness-and-life-satisfaction",
+                            title: "Happiness and Life Satisfaction",
+                        },
+                        {
+                            slug: "human-development-index",
+                            title: "Human Development Index (HDI)",
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: "Human Rights and Democracy",
+            slug: "politics",
+            entries: [
+                {
+                    slug: "human-rights",
+                    title: "Human Rights",
+                },
+                {
+                    slug: "democracy",
+                    title: "Democracy",
+                },
+                {
+                    slug: "state-capacity",
+                    title: "State Capacity",
+                },
+                {
+                    slug: "women-rights",
+                    title: "Women’s Rights",
+                },
+                {
+                    slug: "lgbt-rights",
+                    title: "LGBT+ Rights",
+                },
+                {
+                    slug: "corruption",
+                    title: "Corruption",
+                },
+                {
+                    slug: "economic-inequality-by-gender",
+                    title: "Economic Inequality by Gender",
+                },
+                {
+                    slug: "child-labor",
+                    title: "Child Labor",
+                },
+                {
+                    slug: "violence-against-rights-for-children",
+                    title: "Violence Against Children and Children’s Rights",
+                },
+            ],
+            subcategories: [],
+        },
+        {
+            name: "Violence and War",
+            slug: "violence-rights",
+            entries: [
+                {
+                    slug: "war-and-peace",
+                    title: "War and Peace",
+                },
+                {
+                    slug: "nuclear-weapons",
+                    title: "Nuclear Weapons",
+                },
+                {
+                    slug: "homicides",
+                    title: "Homicides",
+                },
+                {
+                    slug: "terrorism",
+                    title: "Terrorism",
+                },
+                {
+                    slug: "state-capacity",
+                    title: "State Capacity",
+                },
+                {
+                    slug: "military-personnel-spending",
+                    title: "Military Personnel and Spending",
+                },
+                {
+                    slug: "violence-against-rights-for-children",
+                    title: "Violence Against Children and Children’s Rights",
+                },
+            ],
+            subcategories: [],
+        },
+    ],
+}
+
+export interface SubnavItem {
+    label: string
+    href: string
+    id: string
+    highlight?: boolean
+    parentId?: string
+}
+
+export const landingPageSlugs: {
+    [key in SubNavId]: string
+} = {
+    about: "about",
+    coronavirus: "coronavirus",
+    co2: "co2-and-greenhouse-gas-emissions",
+    energy: "energy",
+    forests: "forests-and-deforestation",
+    biodiversity: "biodiversity",
+    water: "clean-water-sanitation",
+    explorers: "food-explorers",
+}
+
+export const subnavs: {
+    [key in SubNavId]: SubnavItem[]
+} = {
+    about: [
+        // `label` is shown in the UI, `id` is specified as a formatting option
+        // on a page (the top html comment in WordPress)
+        { label: "About", href: `/${landingPageSlugs.about}`, id: "about" },
+        { label: "Team", href: "/team", id: "team" },
+        { label: "Organization", href: "/organization", id: "organization" },
+        { label: "Funding", href: "/funding", id: "supporters" },
+        { label: "FAQs", href: "/faqs", id: "faqs" },
+        { label: "Audience & Coverage", href: "/coverage", id: "coverage" },
+        {
+            label: "History",
+            href: "/history-of-our-world-in-data",
+            id: "history",
+        },
+        { label: "Grapher", href: "/owid-grapher", id: "grapher" },
+        { label: "Jobs", href: "/jobs", id: "jobs" },
+        { label: "Contact", href: "/about#contact", id: "contact" },
+    ],
+    coronavirus: [
+        {
+            label: "Coronavirus",
+            href: `/${landingPageSlugs.coronavirus}`,
+            id: "coronavirus",
+        },
+        {
+            label: "By country",
+            href: "/coronavirus#coronavirus-country-profiles",
+            id: "by-country",
+            highlight: true,
+        },
+        {
+            label: "Data explorer",
+            href: "/explorers/coronavirus-data-explorer",
+            id: "data-explorer",
+            highlight: true,
+        },
+        { label: "Deaths", href: "/covid-deaths", id: "deaths" },
+        { label: "Cases", href: "/covid-cases", id: "cases" },
+        { label: "Tests", href: "/coronavirus-testing", id: "testing" },
+        {
+            label: "Hospitalizations",
+            href: "/covid-hospitalizations",
+            id: "hospitalizations",
+        },
+        {
+            label: "Vaccinations",
+            href: "/covid-vaccinations",
+            id: "vaccinations",
+        },
+        {
+            label: "Mortality risk",
+            href: "/mortality-risk-covid",
+            id: "mortality-risk",
+        },
+        {
+            label: "Excess mortality",
+            href: "/excess-mortality-covid",
+            id: "excess-mortality",
+        },
+        {
+            label: "Policy responses",
+            href: "/policy-responses-covid",
+            id: "policy-responses",
+        },
+    ],
+    co2: [
+        {
+            label: "CO₂ and GHG Emissions",
+            href: `/${landingPageSlugs.co2}`,
+            id: "co2-and-ghg-emissions",
+            highlight: true,
+        },
+        {
+            label: "By country",
+            href: "/co2-and-greenhouse-gas-emissions#co2-and-greenhouse-gas-emissions-country-profiles",
+            id: "by-country",
+        },
+        {
+            label: "Data explorer",
+            href: "/explorers/co2",
+            id: "co2-data-explorer",
+        },
+        { label: "CO₂ emissions", href: "/co2-emissions", id: "co2-emissions" },
+        { label: "CO₂ by fuel", href: "/emissions-by-fuel", id: "by-fuel" },
+        {
+            label: "GHG emissions",
+            href: "/greenhouse-gas-emissions",
+            id: "ghg-emissions",
+        },
+        { label: "By sector", href: "/emissions-by-sector", id: "by-sector" },
+        {
+            label: "Atmospheric concentrations",
+            href: "/atmospheric-concentrations",
+            id: "atm-concentrations",
+        },
+        {
+            label: "Climate impacts",
+            href: "/explorers/climate-change",
+            id: "climate-impacts",
+        },
+    ],
+    energy: [
+        {
+            label: "Energy",
+            href: `/${landingPageSlugs.energy}`,
+            id: "energy",
+            highlight: true,
+        },
+        {
+            label: "By country",
+            href: "/energy#country-profiles",
+            id: "by-country",
+        },
+        {
+            label: "Data explorer",
+            href: "/explorers/energy",
+            id: "energy-data-explorer",
+        },
+        { label: "Energy access", href: "/energy-access", id: "energy-access" },
+        {
+            label: "Production & Consumption",
+            href: "/energy-production-consumption",
+            id: "production-consumption",
+        },
+        { label: "Energy mix", href: "/energy-mix", id: "energy-mix" },
+        {
+            label: "Electricity mix",
+            href: "/electricity-mix",
+            id: "electricity-mix",
+        },
+        { label: "Fossil fuels", href: "/fossil-fuels", id: "fossil-fuels" },
+        {
+            label: "Renewables",
+            href: "/renewable-energy",
+            id: "renewable-energy",
+        },
+        { label: "Nuclear", href: "/nuclear-energy", id: "nuclear-energy" },
+        { label: "Transport", href: "/transport", id: "transport" },
+    ],
+    forests: [
+        {
+            label: "Forests",
+            href: `/${landingPageSlugs.forests}`,
+            id: "forests",
+        },
+        {
+            label: "Forest area",
+            href: "/forest-area",
+            id: "forest-area",
+        },
+        {
+            label: "Deforestation",
+            href: "/deforestation",
+            id: "deforestation",
+        },
+        {
+            label: "Afforestation",
+            href: "/afforestation",
+            id: "afforestation",
+        },
+        {
+            label: "Drivers of Deforestation",
+            href: "/drivers-of-deforestation",
+            id: "drivers-of-deforestation",
+        },
+        {
+            label: "Palm oil",
+            href: "/palm-oil",
+            id: "palm-oil",
+        },
+        {
+            label: "Soy",
+            href: "/soy",
+            id: "soy",
+        },
+    ],
+    biodiversity: [
+        {
+            label: "Biodiversity",
+            href: `/${landingPageSlugs.biodiversity}`,
+            id: "biodiversity",
+            highlight: true,
+        },
+        {
+            label: "Biodiversity and Wildlife",
+            href: "/biodiversity-and-wildlife",
+            id: "biodiversity-and-wildlife",
+        },
+        {
+            label: "Mammals",
+            href: "/mammals",
+            id: "mammals",
+        },
+        {
+            label: "Birds",
+            href: "/birds",
+            id: "birds",
+        },
+        {
+            label: "Fish and Overfishing",
+            href: "/fish-and-overfishing",
+            id: "fish",
+        },
+        {
+            label: "Coral reefs",
+            href: "/coral-reefs",
+            id: "coral-reefs",
+        },
+        {
+            label: "Living Planet Index",
+            href: "/living-planet-index",
+            id: "living-planet-index",
+        },
+        {
+            label: "Extinctions",
+            href: "/extinctions",
+            id: "extinctions",
+        },
+        {
+            label: "Threats to Wildlife",
+            href: "/threats-to-wildlife",
+            id: "threats-to-wildlife",
+        },
+        {
+            label: "Poaching",
+            href: "/poaching-and-wildlife-trade",
+            id: "poaching-and-wildlife-trade",
+        },
+        {
+            label: "Habitat Loss",
+            href: "/habitat-loss",
+            id: "habitat-loss",
+        },
+        {
+            label: "Protected areas and conservation",
+            href: "/protected-areas-and-conservation",
+            id: "protected-areas-and-conservation",
+        },
+    ],
+    water: [
+        {
+            label: "Clean Water and Sanitation",
+            href: `/${landingPageSlugs.water}`,
+            id: "wash",
+        },
+        {
+            label: "Data explorer",
+            href: "/explorers/water-and-sanitation",
+            id: "wash-data-explorer",
+        },
+        {
+            label: "Drinking water",
+            href: "/water-access",
+            id: "drinking-water",
+        },
+        {
+            label: "Sanitation",
+            href: "/sanitation",
+            id: "sanitation",
+        },
+        {
+            label: "Handwashing",
+            href: "/hygiene",
+            id: "hygiene",
+        },
+    ],
+    explorers: [
+        {
+            label: "Data Explorers",
+            href: `/${landingPageSlugs.explorers}`,
+            id: "food-explorers",
+            highlight: true,
+        },
+        {
+            label: "Global Food",
+            href: "/explorers/global-food",
+            id: "global-food",
+        },
+        {
+            label: "Environmental Impacts of Food",
+            href: "/explorers/food-footprints",
+            id: "food-footprints",
+        },
+        {
+            label: "Crop Yields",
+            href: "/explorers/crop-yields",
+            id: "crop-yields",
+        },
+        {
+            label: "Fertilizers",
+            href: "/explorers/fertilizers",
+            id: "fertilizers",
+        },
+        {
+            label: "Habitat Loss",
+            href: "/explorers/habitat-loss",
+            id: "habitat-loss",
+        },
+        {
+            label: "Food Prices",
+            href: "/explorers/food-prices",
+            id: "food-prices",
+        },
+    ],
+}
+
+export enum GalleryArrowDirection {
+    prev = "prev",
+    next = "next",
+}
+
+export const MOST_RECENT_DATA_INSIGHT = "most-recent-data-insight"
+export const SECOND_MOST_RECENT_INSIGHT = "second-most-recent-data-insight"
+export const THIRD_MOST_RECENT_INSIGHT = "third-most-recent-data-insight"
+export const FOURTH_MOST_RECENT_INSIGHT = "fourth-most-recent-data-insight"
+export const FIFTH_MOST_RECENT_INSIGHT = "fifth-most-recent-data-insight"
+export const SIXTH_MOST_RECENT_INSIGHT = "sixth-most-recent-data-insight"
+export const SEVENTH_MOST_RECENT_INSIGHT = "seventh-most-recent-data-insight"
+
+export const dataInsightIndexToIdMap: Record<number, string> = {
+    0: MOST_RECENT_DATA_INSIGHT,
+    1: SECOND_MOST_RECENT_INSIGHT,
+    2: THIRD_MOST_RECENT_INSIGHT,
+    3: FOURTH_MOST_RECENT_INSIGHT,
+    4: FIFTH_MOST_RECENT_INSIGHT,
+    5: SIXTH_MOST_RECENT_INSIGHT,
+    6: SEVENTH_MOST_RECENT_INSIGHT,
+}
diff --git a/site/SiteMobileCategory.tsx b/site/SiteMobileCategory.tsx
index c94f5e1ccc..01199370e2 100644
--- a/site/SiteMobileCategory.tsx
+++ b/site/SiteMobileCategory.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react"
 import { CategoryWithEntries } from "@ourworldindata/utils"
 import { SiteNavigationToggle } from "./SiteNavigationToggle.js"
 import { SiteNavigationTopic } from "./SiteNavigationTopic.js"
-import { allTopicsInCategory } from "./SiteNavigationTopics.js"
+import { allTopicsInCategory } from "./gdocs/utils.js"
 
 export const SiteMobileCategory = ({
     category,
diff --git a/site/SiteMobileMenu.tsx b/site/SiteMobileMenu.tsx
index 3ca99dae2d..f335b6d458 100644
--- a/site/SiteMobileMenu.tsx
+++ b/site/SiteMobileMenu.tsx
@@ -2,7 +2,7 @@ import { useState } from "react"
 import { CategoryWithEntries } from "@ourworldindata/utils"
 import classnames from "classnames"
 import { SiteNavigationToggle } from "./SiteNavigationToggle.js"
-import { Menu } from "./SiteNavigation.js"
+import { Menu } from "./SiteConstants.js"
 import { SiteAbout } from "./SiteAbout.js"
 import { SiteResources } from "./SiteResources.js"
 import { SiteMobileCategory } from "./SiteMobileCategory.js"
diff --git a/site/SiteNavigation.tsx b/site/SiteNavigation.tsx
index dc810809c5..c5e289952f 100644
--- a/site/SiteNavigation.tsx
+++ b/site/SiteNavigation.tsx
@@ -1,5 +1,4 @@
 import { useState, useCallback, useEffect } from "react"
-import ReactDOM from "react-dom"
 import {
     faListUl,
     faBars,
@@ -11,11 +10,6 @@ import { NewsletterSubscriptionForm } from "./NewsletterSubscription.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { SiteNavigationTopics } from "./SiteNavigationTopics.js"
 import { SiteLogos } from "./SiteLogos.js"
-import {
-    CategoryWithEntries,
-    OwidGdocType,
-    getOwidGdocFromJSON,
-} from "@ourworldindata/utils"
 import { SiteAbout } from "./SiteAbout.js"
 import { SiteResources } from "./SiteResources.js"
 import { SiteSearchNavigation } from "./SiteSearchNavigation.js"
@@ -24,14 +18,7 @@ import { SiteNavigationToggle } from "./SiteNavigationToggle.js"
 import classnames from "classnames"
 import { useTriggerOnEscape } from "./hooks.js"
 import { AUTOCOMPLETE_CONTAINER_ID } from "./search/Autocomplete.js"
-
-export enum Menu {
-    Topics = "topics",
-    Resources = "resources",
-    About = "about",
-    Subscribe = "subscribe",
-    Search = "search",
-}
+import { Menu, SiteNavigationStatic } from "./SiteConstants.js"
 
 // Note: tranforming the flag from an env string to a boolean in
 // clientSettings.ts is convoluted due to the two-pass SSR/Vite build process.
@@ -238,860 +225,3 @@ export const SiteNavigation = ({
         </>
     )
 }
-
-export const runSiteNavigation = (
-    baseUrl: string,
-    hideDonationFlag?: boolean
-) => {
-    let isOnHomepage = false
-    if (window._OWID_GDOC_PROPS) {
-        const props = getOwidGdocFromJSON(window._OWID_GDOC_PROPS)
-        isOnHomepage = props?.content?.type === OwidGdocType.Homepage
-    }
-    ReactDOM.render(
-        <SiteNavigation
-            baseUrl={baseUrl}
-            hideDonationFlag={hideDonationFlag}
-            isOnHomepage={isOnHomepage}
-        />,
-        document.querySelector(".site-navigation-root")
-    )
-}
-
-export const SiteNavigationStatic: { categories: CategoryWithEntries[] } = {
-    categories: [
-        {
-            name: "Population and Demographic Change",
-            slug: "population",
-            entries: [],
-            subcategories: [
-                {
-                    name: "Population Change",
-                    slug: "population-change",
-                    entries: [
-                        {
-                            slug: "population-growth",
-                            title: "Population Growth",
-                        },
-                        {
-                            slug: "age-structure",
-                            title: "Age Structure",
-                        },
-                        {
-                            slug: "gender-ratio",
-                            title: "Gender Ratio",
-                        },
-                    ],
-                },
-                {
-                    name: "Births and Deaths",
-                    slug: "births-and-deaths",
-                    entries: [
-                        {
-                            slug: "life-expectancy",
-                            title: "Life Expectancy",
-                        },
-                        {
-                            slug: "fertility-rate",
-                            title: "Fertility Rate",
-                        },
-                        {
-                            slug: "child-mortality",
-                            title: "Child and Infant Mortality",
-                        },
-                    ],
-                },
-                {
-                    name: "Geography of the World Population",
-                    slug: "distribution-of-the-world-population",
-                    entries: [
-                        {
-                            slug: "urbanization",
-                            title: "Urbanization",
-                        },
-                        {
-                            slug: "migration",
-                            title: "Migration",
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            name: "Health",
-            slug: "health",
-            entries: [],
-            subcategories: [
-                {
-                    name: "Life and Death",
-                    slug: "life-and-death",
-                    entries: [
-                        {
-                            slug: "health-meta",
-                            title: "Global Health",
-                        },
-                        {
-                            slug: "causes-of-death",
-                            title: "Causes of Death",
-                        },
-                        {
-                            slug: "child-mortality",
-                            title: "Child and Infant Mortality",
-                        },
-                        {
-                            slug: "burden-of-disease",
-                            title: "Burden of Disease",
-                        },
-                        {
-                            slug: "life-expectancy",
-                            title: "Life Expectancy",
-                        },
-                        {
-                            slug: "mental-health",
-                            title: "Mental Health",
-                        },
-                        {
-                            slug: "suicide",
-                            title: "Suicides",
-                        },
-                        {
-                            slug: "cardiovascular-diseases",
-                            title: "Cardiovascular Diseases",
-                        },
-                        {
-                            slug: "cancer",
-                            title: "Cancer",
-                        },
-                        {
-                            slug: "maternal-mortality",
-                            title: "Maternal Mortality",
-                        },
-                    ],
-                },
-                {
-                    name: "Health Risks",
-                    slug: "health-risks",
-                    entries: [
-                        {
-                            slug: "air-pollution",
-                            title: "Air Pollution",
-                        },
-                        {
-                            slug: "outdoor-air-pollution",
-                            title: "Outdoor Air Pollution",
-                        },
-                        {
-                            slug: "indoor-air-pollution",
-                            title: "Indoor Air Pollution",
-                        },
-                        {
-                            slug: "lead-pollution",
-                            title: "Lead Pollution",
-                        },
-                        {
-                            slug: "alcohol-consumption",
-                            title: "Alcohol Consumption",
-                        },
-                        {
-                            slug: "illicit-drug-use",
-                            title: "Opioids, Cocaine, Cannabis, and Other Illicit Drugs",
-                        },
-
-                        {
-                            slug: "obesity",
-                            title: "Obesity",
-                        },
-                        {
-                            slug: "smoking",
-                            title: "Smoking",
-                        },
-                    ],
-                },
-                {
-                    name: "Infectious Diseases",
-                    slug: "infectious-diseases",
-                    entries: [
-                        {
-                            slug: "pandemics",
-                            title: "Pandemics",
-                        },
-                        {
-                            slug: "coronavirus",
-                            title: "Coronavirus Pandemic (COVID-19)",
-                        },
-                        {
-                            slug: "malaria",
-                            title: "Malaria",
-                        },
-                        {
-                            slug: "hiv-aids",
-                            title: "HIV/AIDS",
-                        },
-                        {
-                            slug: "diarrheal-diseases",
-                            title: "Diarrheal Diseases",
-                        },
-                        {
-                            slug: "tuberculosis",
-                            title: "Tuberculosis",
-                        },
-                        {
-                            slug: "polio",
-                            title: "Polio",
-                        },
-                        {
-                            slug: "neglected-tropical-diseases",
-                            title: "Neglected Tropical Diseases",
-                        },
-                        {
-                            slug: "influenza",
-                            title: "Influenza",
-                        },
-                        {
-                            slug: "pneumonia",
-                            title: "Pneumonia",
-                        },
-                        {
-                            slug: "tetanus",
-                            title: "Tetanus",
-                        },
-                        {
-                            slug: "monkeypox",
-                            title: "Mpox",
-                        },
-                        {
-                            slug: "smallpox",
-                            title: "Smallpox",
-                        },
-                    ],
-                },
-                {
-                    name: "Health Institutions and Interventions",
-                    slug: "health-institutions-and-interventions",
-                    entries: [
-                        {
-                            slug: "eradication-of-diseases",
-                            title: "Eradication of Diseases",
-                        },
-                        {
-                            slug: "vaccination",
-                            title: "Vaccination",
-                        },
-                        {
-                            slug: "antibiotics",
-                            title: "Antibiotics and Antibiotic Resistance",
-                        },
-                        {
-                            slug: "financing-healthcare",
-                            title: "Healthcare Spending",
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            name: "Energy and Environment",
-            slug: "environment",
-            entries: [],
-            subcategories: [
-                {
-                    name: "Climate and Air",
-                    slug: "climate-and-air",
-                    entries: [
-                        {
-                            slug: "climate-change",
-                            title: "Climate Change",
-                        },
-                        {
-                            slug: "co2-and-greenhouse-gas-emissions",
-                            title: "CO₂ and Greenhouse Gas Emissions",
-                        },
-                        {
-                            slug: "air-pollution",
-                            title: "Air Pollution",
-                        },
-                        {
-                            slug: "outdoor-air-pollution",
-                            title: "Outdoor Air Pollution",
-                        },
-                        {
-                            slug: "indoor-air-pollution",
-                            title: "Indoor Air Pollution",
-                        },
-                        {
-                            slug: "ozone-layer",
-                            title: "Ozone Layer",
-                        },
-                    ],
-                },
-                {
-                    name: "Energy Systems",
-                    slug: "energy-systems",
-                    entries: [
-                        {
-                            slug: "energy",
-                            title: "Energy",
-                        },
-                        {
-                            slug: "energy-access",
-                            title: "Access to Energy",
-                        },
-                        {
-                            slug: "fossil-fuels",
-                            title: "Fossil Fuels",
-                        },
-                        {
-                            slug: "renewable-energy",
-                            title: "Renewable Energy",
-                        },
-
-                        {
-                            slug: "nuclear-energy",
-                            title: "Nuclear Energy",
-                        },
-                        {
-                            slug: "metals-minerals",
-                            title: "Metals and Minerals",
-                        },
-                    ],
-                },
-                {
-                    name: "Environment and Ecosystems",
-                    slug: "land-and-ecosystems",
-                    entries: [
-                        {
-                            slug: "natural-disasters",
-                            title: "Natural Disasters",
-                        },
-                        {
-                            slug: "biodiversity",
-                            title: "Biodiversity",
-                        },
-                        {
-                            slug: "environmental-impacts-of-food",
-                            title: "Environmental Impacts of Food Production",
-                        },
-                        {
-                            slug: "fish-and-overfishing",
-                            title: "Fish and Overfishing",
-                        },
-                        {
-                            slug: "land-use",
-                            title: "Land Use",
-                        },
-                        {
-                            slug: "water-use-stress",
-                            title: "Water Use and Stress",
-                        },
-                        {
-                            slug: "forests-and-deforestation",
-                            title: "Forests and Deforestation",
-                        },
-                        {
-                            slug: "wildfires",
-                            title: "Wildfires",
-                        },
-                        {
-                            slug: "animal-welfare",
-                            title: "Animal Welfare",
-                        },
-                    ],
-                },
-                {
-                    name: "Waste and Pollution",
-                    slug: "waste-and-pollution",
-                    entries: [
-                        {
-                            slug: "plastic-pollution",
-                            title: "Plastic Pollution",
-                        },
-                        {
-                            slug: "oil-spills",
-                            title: "Oil Spills",
-                        },
-                        {
-                            slug: "lead-pollution",
-                            title: "Lead Pollution",
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            name: "Food and Agriculture",
-            slug: "food",
-            entries: [],
-            subcategories: [
-                {
-                    name: "Food Production",
-                    slug: "food-production",
-                    entries: [
-                        {
-                            slug: "agricultural-production",
-                            title: "Agricultural Production",
-                        },
-                        {
-                            slug: "meat-production",
-                            title: "Meat and Dairy Production",
-                        },
-                        {
-                            slug: "fish-and-overfishing",
-                            title: "Fish and Overfishing",
-                        },
-                        {
-                            slug: "crop-yields",
-                            title: "Crop Yields",
-                        },
-                        {
-                            slug: "animal-welfare",
-                            title: "Animal Welfare",
-                        },
-                        {
-                            slug: "environmental-impacts-of-food",
-                            title: "Environmental Impacts of Food Production",
-                        },
-                        {
-                            slug: "farm-size",
-                            title: "Farm Size and Productivity",
-                        },
-                    ],
-                },
-                {
-                    name: "Agricultural Inputs",
-                    slug: "agricultural-inputs",
-                    entries: [
-                        {
-                            slug: "land-use",
-                            title: "Land Use",
-                        },
-                        {
-                            slug: "fertilizers",
-                            title: "Fertilizers",
-                        },
-                        {
-                            slug: "pesticides",
-                            title: "Pesticides",
-                        },
-                        {
-                            slug: "employment-in-agriculture",
-                            title: "Employment in Agriculture",
-                        },
-                    ],
-                },
-                {
-                    name: "Nutrition",
-                    slug: "nutrition",
-                    entries: [
-                        {
-                            slug: "hunger-and-undernourishment",
-                            title: "Hunger and Undernourishment",
-                        },
-                        {
-                            slug: "food-supply",
-                            title: "Food Supply",
-                        },
-                        {
-                            slug: "food-prices",
-                            title: "Food Prices",
-                        },
-
-                        {
-                            slug: "obesity",
-                            title: "Obesity",
-                        },
-                        {
-                            slug: "famines",
-                            title: "Famines",
-                        },
-                        {
-                            slug: "diet-compositions",
-                            title: "Diet Compositions",
-                        },
-                        {
-                            slug: "micronutrient-deficiency",
-                            title: "Micronutrient Deficiency",
-                        },
-                        {
-                            slug: "human-height",
-                            title: "Human Height",
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            name: "Poverty and Economic Development",
-            slug: "growth-inequality",
-            entries: [],
-            subcategories: [
-                {
-                    name: "Poverty and Prosperity",
-                    slug: "poverty-and-prosperity",
-                    entries: [
-                        {
-                            slug: "poverty",
-                            title: "Poverty",
-                        },
-                        {
-                            slug: "economic-growth",
-                            title: "Economic Growth",
-                        },
-                        {
-                            slug: "economic-inequality",
-                            title: "Economic Inequality",
-                        },
-                        {
-                            slug: "foreign-aid",
-                            title: "Foreign Aid",
-                        },
-                        {
-                            slug: "economic-inequality-by-gender",
-                            title: "Economic Inequality by Gender",
-                        },
-                    ],
-                },
-                {
-                    name: "Public Sector",
-                    slug: "public-sector",
-                    entries: [
-                        {
-                            slug: "government-spending",
-                            title: "Government Spending",
-                        },
-                        {
-                            slug: "state-capacity",
-                            title: "State Capacity",
-                        },
-                        {
-                            slug: "taxation",
-                            title: "Taxation",
-                        },
-                        {
-                            slug: "corruption",
-                            title: "Corruption",
-                        },
-                        {
-                            slug: "financing-healthcare",
-                            title: "Healthcare Spending",
-                        },
-                        {
-                            slug: "financing-education",
-                            title: "Education Spending",
-                        },
-                        {
-                            slug: "military-personnel-spending",
-                            title: "Military Personnel and Spending",
-                        },
-                    ],
-                },
-
-                {
-                    name: "Labor",
-                    slug: "labor",
-                    entries: [
-                        {
-                            slug: "female-labor-supply",
-                            title: "Women’s Employment",
-                        },
-                        {
-                            slug: "child-labor",
-                            title: "Child Labor",
-                        },
-                        {
-                            slug: "working-hours",
-                            title: "Working Hours",
-                        },
-                    ],
-                },
-                {
-                    name: "Global Connections",
-                    slug: "trade-migration",
-                    entries: [
-                        {
-                            slug: "trade-and-globalization",
-                            title: "Trade and Globalization",
-                        },
-                        {
-                            slug: "migration",
-                            title: "Migration",
-                        },
-                        {
-                            slug: "tourism",
-                            title: "Tourism",
-                        },
-                    ],
-                },
-                {
-                    name: "Water",
-                    slug: "water",
-                    entries: [
-                        {
-                            slug: "clean-water-sanitation",
-                            title: "Clean Water and Sanitation",
-                        },
-                        {
-                            slug: "water-access",
-                            title: "Clean Water",
-                        },
-                        {
-                            slug: "sanitation",
-                            title: "Sanitation",
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            name: "Education and Knowledge",
-            slug: "education",
-            entries: [],
-            subcategories: [
-                {
-                    name: "Education",
-                    slug: "educational-outcomes",
-                    entries: [
-                        {
-                            slug: "global-education",
-                            title: "Global Education",
-                        },
-                        {
-                            slug: "literacy",
-                            title: "Literacy",
-                        },
-                        {
-                            slug: "financing-education",
-                            title: "Education Spending",
-                        },
-                    ],
-                },
-                {
-                    name: "Knowledge",
-                    slug: "inputs-to-education",
-                    entries: [
-                        {
-                            slug: "research-and-development",
-                            title: "Research and Development",
-                        },
-                        {
-                            slug: "internet",
-                            title: "Internet",
-                        },
-                        {
-                            slug: "books",
-                            title: "Books",
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            name: "Innovation and Technological Change",
-            slug: "technology",
-            entries: [
-                {
-                    slug: "technological-change",
-                    title: "Technological Change",
-                },
-                {
-                    slug: "research-and-development",
-                    title: "Research and Development",
-                },
-                {
-                    slug: "artificial-intelligence",
-                    title: "Artificial Intelligence",
-                },
-                {
-                    slug: "internet",
-                    title: "Internet",
-                },
-                {
-                    slug: "space-exploration-satellites",
-                    title: "Space Exploration and Satellites",
-                },
-                {
-                    slug: "transport",
-                    title: "Transport",
-                },
-            ],
-            subcategories: [],
-        },
-        {
-            name: "Living Conditions, Community, and Wellbeing",
-            slug: "work-life",
-            entries: [],
-            subcategories: [
-                {
-                    name: "Housing and Infrastructure",
-                    slug: "housing-and-infrastructure",
-                    entries: [
-                        {
-                            slug: "homelessness",
-                            title: "Homelessness",
-                        },
-                        {
-                            slug: "energy-access",
-                            title: "Access to Energy",
-                        },
-                        {
-                            slug: "indoor-air-pollution",
-                            title: "Indoor Air Pollution",
-                        },
-
-                        {
-                            slug: "clean-water-sanitation",
-                            title: "Clean Water and Sanitation",
-                        },
-                        {
-                            slug: "water-access",
-                            title: "Clean Water",
-                        },
-                        {
-                            slug: "sanitation",
-                            title: "Sanitation",
-                        },
-                        {
-                            slug: "light-at-night",
-                            title: "Light at Night",
-                        },
-                    ],
-                },
-                {
-                    name: "Time Use",
-                    slug: "time-use",
-                    entries: [
-                        {
-                            slug: "time-use",
-                            title: "Time Use",
-                        },
-                        {
-                            slug: "working-hours",
-                            title: "Working Hours",
-                        },
-                    ],
-                },
-                {
-                    name: "Relationships",
-                    slug: "relationships",
-                    entries: [
-                        {
-                            slug: "marriages-and-divorces",
-                            title: "Marriages and Divorces",
-                        },
-                        {
-                            slug: "social-connections-and-loneliness",
-                            title: "Loneliness and Social Connections",
-                        },
-                        {
-                            slug: "trust",
-                            title: "Trust",
-                        },
-                    ],
-                },
-                {
-                    name: "Happiness and Wellbeing",
-                    slug: "happiness-wellbeing",
-                    entries: [
-                        {
-                            slug: "happiness-and-life-satisfaction",
-                            title: "Happiness and Life Satisfaction",
-                        },
-                        {
-                            slug: "human-development-index",
-                            title: "Human Development Index (HDI)",
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            name: "Human Rights and Democracy",
-            slug: "politics",
-            entries: [
-                {
-                    slug: "human-rights",
-                    title: "Human Rights",
-                },
-                {
-                    slug: "democracy",
-                    title: "Democracy",
-                },
-                {
-                    slug: "state-capacity",
-                    title: "State Capacity",
-                },
-                {
-                    slug: "women-rights",
-                    title: "Women’s Rights",
-                },
-                {
-                    slug: "lgbt-rights",
-                    title: "LGBT+ Rights",
-                },
-                {
-                    slug: "corruption",
-                    title: "Corruption",
-                },
-                {
-                    slug: "economic-inequality-by-gender",
-                    title: "Economic Inequality by Gender",
-                },
-                {
-                    slug: "child-labor",
-                    title: "Child Labor",
-                },
-                {
-                    slug: "violence-against-rights-for-children",
-                    title: "Violence Against Children and Children’s Rights",
-                },
-            ],
-            subcategories: [],
-        },
-        {
-            name: "Violence and War",
-            slug: "violence-rights",
-            entries: [
-                {
-                    slug: "war-and-peace",
-                    title: "War and Peace",
-                },
-                {
-                    slug: "nuclear-weapons",
-                    title: "Nuclear Weapons",
-                },
-                {
-                    slug: "homicides",
-                    title: "Homicides",
-                },
-                {
-                    slug: "terrorism",
-                    title: "Terrorism",
-                },
-                {
-                    slug: "state-capacity",
-                    title: "State Capacity",
-                },
-                {
-                    slug: "military-personnel-spending",
-                    title: "Military Personnel and Spending",
-                },
-                {
-                    slug: "violence-against-rights-for-children",
-                    title: "Violence Against Children and Children’s Rights",
-                },
-            ],
-            subcategories: [],
-        },
-    ],
-}
-
-export const getUniqueTopicCount = () =>
-    SiteNavigationStatic.categories
-        .flatMap((category) => {
-            const subcategoryEntries =
-                category?.subcategories?.flatMap(
-                    (subcategory) => subcategory.entries || []
-                ) || []
-            return [...category.entries, ...subcategoryEntries]
-        })
-        .map((entry) => entry.slug)
-        .filter((value, index, array) => array.indexOf(value) === index).length
diff --git a/site/SiteNavigationTopics.tsx b/site/SiteNavigationTopics.tsx
index b58325090d..7585cc40e7 100644
--- a/site/SiteNavigationTopics.tsx
+++ b/site/SiteNavigationTopics.tsx
@@ -1,10 +1,11 @@
 import { useLayoutEffect, useState } from "react"
 import * as React from "react"
-import { CategoryWithEntries, EntryMeta } from "@ourworldindata/utils"
+import { CategoryWithEntries } from "@ourworldindata/utils"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons"
 import classnames from "classnames"
 import { SiteNavigationTopic } from "./SiteNavigationTopic.js"
+import { allTopicsInCategory } from "./gdocs/utils.js"
 
 export const SiteNavigationTopics = ({
     topics,
@@ -83,14 +84,3 @@ export const SiteNavigationTopics = ({
         </div>
     ) : null
 }
-
-export const allTopicsInCategory = (
-    category: CategoryWithEntries
-): EntryMeta[] => {
-    return [
-        ...category.entries,
-        ...(category.subcategories ?? []).flatMap(
-            (subcategory) => subcategory.entries
-        ),
-    ]
-}
diff --git a/site/SiteSubnavigation.tsx b/site/SiteSubnavigation.tsx
index 0d3a753a24..f6c0f593fb 100644
--- a/site/SiteSubnavigation.tsx
+++ b/site/SiteSubnavigation.tsx
@@ -1,348 +1,7 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons"
 import { SubNavId } from "@ourworldindata/types"
-
-export interface SubnavItem {
-    label: string
-    href: string
-    id: string
-    highlight?: boolean
-    parentId?: string
-}
-
-export const landingPageSlugs: { [key in SubNavId]: string } = {
-    about: "about",
-    coronavirus: "coronavirus",
-    co2: "co2-and-greenhouse-gas-emissions",
-    energy: "energy",
-    forests: "forests-and-deforestation",
-    biodiversity: "biodiversity",
-    water: "clean-water-sanitation",
-    explorers: "food-explorers",
-}
-
-export const subnavs: { [key in SubNavId]: SubnavItem[] } = {
-    about: [
-        // `label` is shown in the UI, `id` is specified as a formatting option
-        // on a page (the top html comment in WordPress)
-        { label: "About", href: `/${landingPageSlugs.about}`, id: "about" },
-        { label: "Team", href: "/team", id: "team" },
-        { label: "Organization", href: "/organization", id: "organization" },
-        { label: "Funding", href: "/funding", id: "supporters" },
-        { label: "FAQs", href: "/faqs", id: "faqs" },
-        { label: "Audience & Coverage", href: "/coverage", id: "coverage" },
-        {
-            label: "History",
-            href: "/history-of-our-world-in-data",
-            id: "history",
-        },
-        { label: "Grapher", href: "/owid-grapher", id: "grapher" },
-        { label: "Jobs", href: "/jobs", id: "jobs" },
-        { label: "Contact", href: "/about#contact", id: "contact" },
-    ],
-    coronavirus: [
-        {
-            label: "Coronavirus",
-            href: `/${landingPageSlugs.coronavirus}`,
-            id: "coronavirus",
-        },
-        {
-            label: "By country",
-            href: "/coronavirus#coronavirus-country-profiles",
-            id: "by-country",
-            highlight: true,
-        },
-        {
-            label: "Data explorer",
-            href: "/explorers/coronavirus-data-explorer",
-            id: "data-explorer",
-            highlight: true,
-        },
-        { label: "Deaths", href: "/covid-deaths", id: "deaths" },
-        { label: "Cases", href: "/covid-cases", id: "cases" },
-        { label: "Tests", href: "/coronavirus-testing", id: "testing" },
-        {
-            label: "Hospitalizations",
-            href: "/covid-hospitalizations",
-            id: "hospitalizations",
-        },
-        {
-            label: "Vaccinations",
-            href: "/covid-vaccinations",
-            id: "vaccinations",
-        },
-        {
-            label: "Mortality risk",
-            href: "/mortality-risk-covid",
-            id: "mortality-risk",
-        },
-        {
-            label: "Excess mortality",
-            href: "/excess-mortality-covid",
-            id: "excess-mortality",
-        },
-        {
-            label: "Policy responses",
-            href: "/policy-responses-covid",
-            id: "policy-responses",
-        },
-    ],
-    co2: [
-        {
-            label: "CO₂ and GHG Emissions",
-            href: `/${landingPageSlugs.co2}`,
-            id: "co2-and-ghg-emissions",
-            highlight: true,
-        },
-        {
-            label: "By country",
-            href: "/co2-and-greenhouse-gas-emissions#co2-and-greenhouse-gas-emissions-country-profiles",
-            id: "by-country",
-        },
-        {
-            label: "Data explorer",
-            href: "/explorers/co2",
-            id: "co2-data-explorer",
-        },
-        { label: "CO₂ emissions", href: "/co2-emissions", id: "co2-emissions" },
-        { label: "CO₂ by fuel", href: "/emissions-by-fuel", id: "by-fuel" },
-        {
-            label: "GHG emissions",
-            href: "/greenhouse-gas-emissions",
-            id: "ghg-emissions",
-        },
-        { label: "By sector", href: "/emissions-by-sector", id: "by-sector" },
-        {
-            label: "Atmospheric concentrations",
-            href: "/atmospheric-concentrations",
-            id: "atm-concentrations",
-        },
-        {
-            label: "Climate impacts",
-            href: "/explorers/climate-change",
-            id: "climate-impacts",
-        },
-    ],
-    energy: [
-        {
-            label: "Energy",
-            href: `/${landingPageSlugs.energy}`,
-            id: "energy",
-            highlight: true,
-        },
-        {
-            label: "By country",
-            href: "/energy#country-profiles",
-            id: "by-country",
-        },
-        {
-            label: "Data explorer",
-            href: "/explorers/energy",
-            id: "energy-data-explorer",
-        },
-        { label: "Energy access", href: "/energy-access", id: "energy-access" },
-        {
-            label: "Production & Consumption",
-            href: "/energy-production-consumption",
-            id: "production-consumption",
-        },
-        { label: "Energy mix", href: "/energy-mix", id: "energy-mix" },
-        {
-            label: "Electricity mix",
-            href: "/electricity-mix",
-            id: "electricity-mix",
-        },
-        { label: "Fossil fuels", href: "/fossil-fuels", id: "fossil-fuels" },
-        {
-            label: "Renewables",
-            href: "/renewable-energy",
-            id: "renewable-energy",
-        },
-        { label: "Nuclear", href: "/nuclear-energy", id: "nuclear-energy" },
-        { label: "Transport", href: "/transport", id: "transport" },
-    ],
-    forests: [
-        {
-            label: "Forests",
-            href: `/${landingPageSlugs.forests}`,
-            id: "forests",
-        },
-        {
-            label: "Forest area",
-            href: "/forest-area",
-            id: "forest-area",
-        },
-        {
-            label: "Deforestation",
-            href: "/deforestation",
-            id: "deforestation",
-        },
-        {
-            label: "Afforestation",
-            href: "/afforestation",
-            id: "afforestation",
-        },
-        {
-            label: "Drivers of Deforestation",
-            href: "/drivers-of-deforestation",
-            id: "drivers-of-deforestation",
-        },
-        {
-            label: "Palm oil",
-            href: "/palm-oil",
-            id: "palm-oil",
-        },
-        {
-            label: "Soy",
-            href: "/soy",
-            id: "soy",
-        },
-    ],
-    biodiversity: [
-        {
-            label: "Biodiversity",
-            href: `/${landingPageSlugs.biodiversity}`,
-            id: "biodiversity",
-            highlight: true,
-        },
-        {
-            label: "Biodiversity and Wildlife",
-            href: "/biodiversity-and-wildlife",
-            id: "biodiversity-and-wildlife",
-        },
-        {
-            label: "Mammals",
-            href: "/mammals",
-            id: "mammals",
-        },
-        {
-            label: "Birds",
-            href: "/birds",
-            id: "birds",
-        },
-        {
-            label: "Fish and Overfishing",
-            href: "/fish-and-overfishing",
-            id: "fish",
-        },
-        {
-            label: "Coral reefs",
-            href: "/coral-reefs",
-            id: "coral-reefs",
-        },
-        {
-            label: "Living Planet Index",
-            href: "/living-planet-index",
-            id: "living-planet-index",
-        },
-        {
-            label: "Extinctions",
-            href: "/extinctions",
-            id: "extinctions",
-        },
-        {
-            label: "Threats to Wildlife",
-            href: "/threats-to-wildlife",
-            id: "threats-to-wildlife",
-        },
-        {
-            label: "Poaching",
-            href: "/poaching-and-wildlife-trade",
-            id: "poaching-and-wildlife-trade",
-        },
-        {
-            label: "Habitat Loss",
-            href: "/habitat-loss",
-            id: "habitat-loss",
-        },
-        {
-            label: "Protected areas and conservation",
-            href: "/protected-areas-and-conservation",
-            id: "protected-areas-and-conservation",
-        },
-    ],
-    water: [
-        {
-            label: "Clean Water and Sanitation",
-            href: `/${landingPageSlugs.water}`,
-            id: "wash",
-        },
-        {
-            label: "Data explorer",
-            href: "/explorers/water-and-sanitation",
-            id: "wash-data-explorer",
-        },
-        {
-            label: "Drinking water",
-            href: "/water-access",
-            id: "drinking-water",
-        },
-        {
-            label: "Sanitation",
-            href: "/sanitation",
-            id: "sanitation",
-        },
-        {
-            label: "Handwashing",
-            href: "/hygiene",
-            id: "hygiene",
-        },
-    ],
-    explorers: [
-        {
-            label: "Data Explorers",
-            href: `/${landingPageSlugs.explorers}`,
-            id: "food-explorers",
-            highlight: true,
-        },
-        {
-            label: "Global Food",
-            href: "/explorers/global-food",
-            id: "global-food",
-        },
-        {
-            label: "Environmental Impacts of Food",
-            href: "/explorers/food-footprints",
-            id: "food-footprints",
-        },
-        {
-            label: "Crop Yields",
-            href: "/explorers/crop-yields",
-            id: "crop-yields",
-        },
-        {
-            label: "Fertilizers",
-            href: "/explorers/fertilizers",
-            id: "fertilizers",
-        },
-        {
-            label: "Habitat Loss",
-            href: "/explorers/habitat-loss",
-            id: "habitat-loss",
-        },
-        {
-            label: "Food Prices",
-            href: "/explorers/food-prices",
-            id: "food-prices",
-        },
-    ],
-}
-
-export const getSubnavItem = (
-    id: string | undefined,
-    subnavItems: SubnavItem[]
-) => {
-    // We want to avoid matching elements with potentially undefined id.
-    // Static typing prevents id from being undefined but this might not be
-    // the case in a future API powered version.
-    return id ? subnavItems.find((item) => item.id === id) : undefined
-}
-
-export const getTopSubnavigationParentItem = (
-    subnavId: SubNavId
-): SubnavItem | undefined => {
-    return subnavs[subnavId]?.[0]
-}
+import { subnavs } from "./SiteConstants.js"
 
 export const SiteSubnavigation = ({
     subnavId,
diff --git a/site/SiteTools.tsx b/site/SiteTools.tsx
index 8954977719..8b36327cf2 100644
--- a/site/SiteTools.tsx
+++ b/site/SiteTools.tsx
@@ -1,19 +1,13 @@
-import ReactDOM from "react-dom"
 import cx from "classnames"
 import { FeedbackPrompt } from "./Feedback.js"
 import { ScrollDirection, useScrollDirection } from "./hooks.js"
-import { NewsletterSubscriptionContext } from "./newsletter.js"
-import {
-    // NewsletterSubscription,
-    NewsletterSubscriptionForm,
-} from "./NewsletterSubscription.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faHeart } from "@fortawesome/free-solid-svg-icons"
 // import { faHandshake } from "@fortawesome/free-solid-svg-icons"
 
-const SITE_TOOLS_CLASS = "site-tools"
+export const SITE_TOOLS_CLASS = "site-tools"
 
-const SiteTools = () => {
+export default function SiteTools() {
     const scrollDirection = useScrollDirection()
     const isDonatePage = window.location.pathname === "/donate"
 
@@ -43,22 +37,3 @@ const SiteTools = () => {
         </div>
     )
 }
-
-export const runSiteTools = () => {
-    ReactDOM.render(
-        <SiteTools />,
-        document.querySelector(`.${SITE_TOOLS_CLASS}`)
-    )
-
-    const newsletterSubscriptionFormRootHomepage = document.querySelector(
-        ".homepage-social-ribbon #newsletter-subscription-root"
-    )
-    if (newsletterSubscriptionFormRootHomepage) {
-        ReactDOM.hydrate(
-            <NewsletterSubscriptionForm
-                context={NewsletterSubscriptionContext.Homepage}
-            />,
-            newsletterSubscriptionFormRootHomepage
-        )
-    }
-}
diff --git a/site/TableOfContents.tsx b/site/TableOfContents.tsx
index 03397f559e..f8893166d4 100644
--- a/site/TableOfContents.tsx
+++ b/site/TableOfContents.tsx
@@ -1,14 +1,13 @@
 import { useState, useEffect, useRef } from "react"
-import ReactDOM from "react-dom"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faBars, faTimes } from "@fortawesome/free-solid-svg-icons"
 import { useTriggerWhenClickOutside } from "./hooks.js"
-import { wrapInDiv, TocHeading } from "@ourworldindata/utils"
+import { TocHeading } from "@ourworldindata/utils"
 import classNames from "classnames"
 
-const TOC_WRAPPER_CLASSNAME = "toc-wrapper"
+export const TOC_WRAPPER_CLASSNAME = "toc-wrapper"
 
-interface TableOfContentsData {
+export interface TableOfContentsData {
     headings: TocHeading[]
     pageTitle: string
     hideSubheadings?: boolean
@@ -220,13 +219,3 @@ export const TableOfContents = ({
         </div>
     )
 }
-
-export const runTableOfContents = (tocData: TableOfContentsData) => {
-    const tocWrapperEl = document.querySelector<HTMLElement>(
-        `.${TOC_WRAPPER_CLASSNAME}`
-    )
-    if (!tocWrapperEl) return
-
-    const sidebarRootEl = wrapInDiv(tocWrapperEl, ["sidebar-root"])
-    ReactDOM.hydrate(<TableOfContents {...tocData} />, sidebarRootEl)
-}
diff --git a/site/Tablepress.tsx b/site/Tablepress.tsx
index 65c404f2e8..9fa71544f0 100644
--- a/site/Tablepress.tsx
+++ b/site/Tablepress.tsx
@@ -1,5 +1,3 @@
-import ReactDOMServer from "react-dom/server.js"
-
 interface Cell {
     data: string
     colspan: number
@@ -51,10 +49,6 @@ function parseTable(table: string[][]): Cell[][] {
     return resultTable
 }
 
-export const renderTablePress = (table: string[][]) => {
-    return ReactDOMServer.renderToStaticMarkup(<Tablepress data={table} />)
-}
-
 export default function Tablepress(props: { data: string[][] }) {
     const { data } = props
     const table = parseTable(data)
diff --git a/site/TombstonePage.tsx b/site/TombstonePage.tsx
index 19787e9d8f..6d8039bee1 100644
--- a/site/TombstonePage.tsx
+++ b/site/TombstonePage.tsx
@@ -9,7 +9,7 @@ import { SiteFooter } from "./SiteFooter"
 import { SiteHeader } from "./SiteHeader"
 import NotFoundPageIcon from "./NotFoundPageIcon"
 import { ProminentLink } from "./gdocs/components/ProminentLink.js"
-import { getLayout } from "./gdocs/components/ArticleBlock.js"
+import { getLayout } from "./gdocs/components/layout.js"
 
 export default function TombstonePage({
     baseUrl,
diff --git a/site/blocks/AdditionalInformation.tsx b/site/blocks/AdditionalInformation.tsx
index 4a8dd0fea1..742c0eeed2 100644
--- a/site/blocks/AdditionalInformation.tsx
+++ b/site/blocks/AdditionalInformation.tsx
@@ -1,6 +1,4 @@
 import { useState, useRef, useEffect } from "react"
-import ReactDOM from "react-dom"
-import ReactDOMServer from "react-dom/server.js"
 import AnimateHeight from "react-animate-height"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons"
@@ -8,8 +6,8 @@ import { MultiEmbedderSingleton } from "../../site/multiembedder/MultiEmbedder.j
 
 export const ADDITIONAL_INFORMATION_CLASS_NAME =
     "wp-block-owid-additional-information"
-const VARIATION_MERGE_LEFT = "merge-left"
-const VARIATION_FULL_WIDTH = "full-width"
+export const VARIATION_MERGE_LEFT = "merge-left"
+export const VARIATION_FULL_WIDTH = "full-width"
 
 /*
  * This block has 2 variations (on large screens):
@@ -20,7 +18,7 @@ const VARIATION_FULL_WIDTH = "full-width"
  * assumed to be contained in the first h3 tag.
  */
 
-const AdditionalInformation = ({
+export const AdditionalInformation = ({
     content,
     title,
     image,
@@ -122,71 +120,3 @@ const AdditionalInformation = ({
 }
 
 export default AdditionalInformation
-
-export const renderAdditionalInformation = ($: CheerioStatic) => {
-    $("block[type='additional-information']").each(function (
-        this: CheerioElement
-    ) {
-        const $block = $(this)
-        const variation = $block.find(".is-style-merge-left").length
-            ? VARIATION_MERGE_LEFT
-            : VARIATION_FULL_WIDTH
-        const title =
-            $block.find("h3").remove().text() || "Additional information"
-        const image =
-            variation === VARIATION_MERGE_LEFT
-                ? $block
-                      .find(".wp-block-column:first-child img[src]") // Wordpress outputs empty <img> tags when none is selected so we need to filter those out
-                      .first()
-                      .parent() // Get the wrapping <figure>
-                      .html()
-                : null
-        const content =
-            variation === VARIATION_MERGE_LEFT
-                ? $block.find(".wp-block-column:last-child").html()
-                : $block.find("content").html() // the title has been removed so the rest of a variation "full width" block is content.
-        // Side note: "content" refers here to the <content> tag output by the block on the PHP side, not
-        // the ".content" class.
-        const defaultOpen = $block.attr("default-open") === "true"
-        const rendered = ReactDOMServer.renderToString(
-            <div className="block-wrapper">
-                <AdditionalInformation
-                    content={content}
-                    title={title}
-                    image={image}
-                    variation={variation}
-                    defaultOpen={defaultOpen}
-                />
-            </div>
-        )
-        $block.after(rendered)
-        $block.remove()
-    })
-}
-
-export const hydrate = () => {
-    document
-        .querySelectorAll<HTMLElement>(`.${ADDITIONAL_INFORMATION_CLASS_NAME}`)
-        .forEach((block) => {
-            const blockWrapper = block.parentElement
-            const titleEl = block.querySelector("h3")
-            const title = titleEl ? titleEl.textContent : null
-            const variation = block.getAttribute("data-variation") || ""
-            const defaultOpen =
-                block.getAttribute("data-default-open") === "true"
-            const figureEl = block.querySelector(".content-wrapper > figure")
-            const image = figureEl ? figureEl.innerHTML : null
-            const contentEl = block.querySelector(".content")
-            const content = contentEl ? contentEl.innerHTML : null
-            ReactDOM.hydrate(
-                <AdditionalInformation
-                    content={content}
-                    title={title}
-                    image={image}
-                    variation={variation}
-                    defaultOpen={defaultOpen}
-                />,
-                blockWrapper
-            )
-        })
-}
diff --git a/site/blocks/CookiePreferences.tsx b/site/blocks/CookiePreferences.tsx
index d5fdcf9470..1a5a7a5d48 100644
--- a/site/blocks/CookiePreferences.tsx
+++ b/site/blocks/CookiePreferences.tsx
@@ -9,10 +9,10 @@ import {
     getTodayDate,
     Preference,
     PreferenceType,
-} from "../../site/CookiePreferencesManager.js"
+} from "../cookiePreferences.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faCheck } from "@fortawesome/free-solid-svg-icons"
-import { SiteAnalytics } from "../../site/SiteAnalytics.js"
+import { SiteAnalytics } from "../SiteAnalytics.js"
 
 const ANALYTICS_ACTION = "cookie_preferences"
 const analytics = new SiteAnalytics()
diff --git a/site/blocks/GalleryArrow.tsx b/site/blocks/GalleryArrow.tsx
index 9bd90fcb92..b6e95a9b70 100644
--- a/site/blocks/GalleryArrow.tsx
+++ b/site/blocks/GalleryArrow.tsx
@@ -1,10 +1,6 @@
 import { faArrowLeftLong } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-
-export enum GalleryArrowDirection {
-    prev = "prev",
-    next = "next",
-}
+import { GalleryArrowDirection } from "../SiteConstants.js"
 
 export const GalleryArrow = ({
     disabled,
diff --git a/site/blocks/Help.tsx b/site/blocks/Help.tsx
index 56dfc109a6..245ad1b46d 100644
--- a/site/blocks/Help.tsx
+++ b/site/blocks/Help.tsx
@@ -1,8 +1,7 @@
-import ReactDOMServer from "react-dom/server.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 import { faLightbulb } from "@fortawesome/free-solid-svg-icons"
 
-const Help = ({
+export const Help = ({
     title,
     content,
 }: {
@@ -24,18 +23,3 @@ const Help = ({
         </div>
     )
 }
-
-export const renderHelp = (cheerioEl: CheerioStatic) =>
-    cheerioEl("block[type='help']").each(function (this: CheerioElement) {
-        const $block = cheerioEl(this)
-        const title = $block.find("h4").remove().text() || null
-        const content = $block.find("content").html() // the title has been removed so the rest of the block is content.
-        // Side note: "content" refers here to the <content> tag output by the block on the PHP side, not
-        // the ".content" class.
-
-        const rendered = ReactDOMServer.renderToStaticMarkup(
-            <Help title={title} content={content} />
-        )
-        $block.after(rendered)
-        $block.remove()
-    })
diff --git a/site/blocks/RelatedCharts.tsx b/site/blocks/RelatedCharts.tsx
index b718cb4505..8a0316c10e 100644
--- a/site/blocks/RelatedCharts.tsx
+++ b/site/blocks/RelatedCharts.tsx
@@ -2,10 +2,13 @@ import { useState, useRef } from "react"
 import * as React from "react"
 import { orderBy, RelatedChart } from "@ourworldindata/utils"
 import { useEmbedChart } from "../hooks.js"
-import { GalleryArrow, GalleryArrowDirection } from "./GalleryArrow.js"
+import { GalleryArrow } from "./GalleryArrow.js"
+import {
+    GalleryArrowDirection,
+    GRAPHER_PREVIEW_CLASS,
+} from "../SiteConstants.js"
 import { AllChartsListItem } from "./AllChartsListItem.js"
 import { BAKED_BASE_URL } from "../../settings/clientSettings.js"
-import { GRAPHER_PREVIEW_CLASS } from "../SiteConstants.js"
 import GrapherImage from "../GrapherImage.js"
 
 export const RELATED_CHARTS_CLASS_NAME = "related-charts"
diff --git a/site/blocks/renderAdditionalInformation.tsx b/site/blocks/renderAdditionalInformation.tsx
new file mode 100644
index 0000000000..69248230d2
--- /dev/null
+++ b/site/blocks/renderAdditionalInformation.tsx
@@ -0,0 +1,48 @@
+import ReactDOMServer from "react-dom/server.js"
+import {
+    VARIATION_MERGE_LEFT,
+    VARIATION_FULL_WIDTH,
+    AdditionalInformation,
+} from "./AdditionalInformation.js"
+
+export const renderAdditionalInformation = ($: CheerioStatic) => {
+    $("block[type='additional-information']").each(function (
+        this: CheerioElement
+    ) {
+        const $block = $(this)
+        const variation = $block.find(".is-style-merge-left").length
+            ? VARIATION_MERGE_LEFT
+            : VARIATION_FULL_WIDTH
+        const title =
+            $block.find("h3").remove().text() || "Additional information"
+        const image =
+            variation === VARIATION_MERGE_LEFT
+                ? $block
+                      .find(".wp-block-column:first-child img[src]") // Wordpress outputs empty <img> tags when none is selected so we need to filter those out
+                      .first()
+                      .parent() // Get the wrapping <figure>
+                      .html()
+                : null
+        const content =
+            variation === VARIATION_MERGE_LEFT
+                ? $block.find(".wp-block-column:last-child").html()
+                : $block.find("content").html() // the title has been removed so the rest of a variation "full width" block is content.
+
+        // Side note: "content" refers here to the <content> tag output by the block on the PHP side, not
+        // the ".content" class.
+        const defaultOpen = $block.attr("default-open") === "true"
+        const rendered = ReactDOMServer.renderToString(
+            <div className="block-wrapper">
+                <AdditionalInformation
+                    content={content}
+                    title={title}
+                    image={image}
+                    variation={variation}
+                    defaultOpen={defaultOpen}
+                />
+            </div>
+        )
+        $block.after(rendered)
+        $block.remove()
+    })
+}
diff --git a/site/blocks/renderHelp.tsx b/site/blocks/renderHelp.tsx
new file mode 100644
index 0000000000..a52d57db6e
--- /dev/null
+++ b/site/blocks/renderHelp.tsx
@@ -0,0 +1,17 @@
+import ReactDOMServer from "react-dom/server.js"
+import { Help } from "./Help.js"
+
+export const renderHelp = (cheerioEl: CheerioStatic) =>
+    cheerioEl("block[type='help']").each(function (this: CheerioElement) {
+        const $block = cheerioEl(this)
+        const title = $block.find("h4").remove().text() || null
+        const content = $block.find("content").html() // the title has been removed so the rest of the block is content.
+
+        // Side note: "content" refers here to the <content> tag output by the block on the PHP side, not
+        // the ".content" class.
+        const rendered = ReactDOMServer.renderToStaticMarkup(
+            <Help title={title} content={content} />
+        )
+        $block.after(rendered)
+        $block.remove()
+    })
diff --git a/site/cookiePreferences.ts b/site/cookiePreferences.ts
new file mode 100644
index 0000000000..a7b6b4a379
--- /dev/null
+++ b/site/cookiePreferences.ts
@@ -0,0 +1,156 @@
+import { dayjs } from "@ourworldindata/utils"
+import Cookies from "js-cookie"
+
+export enum PreferenceType {
+    Analytics = "a",
+    Marketing = "m", // not used
+}
+
+export enum Action {
+    Accept,
+    TogglePreference,
+    Reset,
+    Persist,
+    Reject,
+}
+
+export interface Preference {
+    type: PreferenceType
+    value: boolean
+}
+
+export const POLICY_DATE: number = 20201009
+export const DATE_FORMAT = "YYYYMMDD"
+export const COOKIE_PREFERENCES_COOKIE_NAME = "cookie_preferences"
+export const PREFERENCES_SEPARATOR = "|"
+export const DATE_SEPARATOR = "-"
+export const PREFERENCE_KEY_VALUE_SEPARATOR = ":"
+// e.g. p:1-20200910
+
+export interface State {
+    date?: number
+    preferences: Preference[]
+}
+
+export const defaultState: State = {
+    preferences: [
+        {
+            type: PreferenceType.Analytics,
+            value: false,
+        },
+    ],
+}
+
+export const getInitialState = (): State => {
+    let cookieValue = undefined
+    try {
+        // Cookie access can be restricted by iframe sandboxing, in which case the below code will throw an error
+        // see https://github.com/owid/owid-grapher/pull/2452
+
+        cookieValue = parseRawCookieValue(
+            Cookies.get(COOKIE_PREFERENCES_COOKIE_NAME)
+        )
+    } catch {
+        // ignore
+    }
+
+    if (!cookieValue || arePreferencesOutdated(cookieValue.date, POLICY_DATE))
+        return defaultState
+    return cookieValue
+}
+
+export const parseRawCookieValue = (cookieValue?: string) => {
+    if (!cookieValue) return
+
+    const [preferencesRaw, dateRaw] = cookieValue.split(DATE_SEPARATOR)
+    const date = parseDate(dateRaw)
+    if (!date) return
+
+    const preferences = parsePreferences(preferencesRaw)
+    if (!preferences.length) return
+
+    return {
+        preferences,
+        date,
+    }
+}
+
+export const parsePreferences = (preferences?: string): Preference[] => {
+    if (!preferences) return []
+
+    return preferences
+        .split(PREFERENCES_SEPARATOR)
+        .map((preference) => {
+            const [type, , value] = preference // only supports 1 digit values
+            return {
+                type: type as PreferenceType,
+                value: value === "1",
+            }
+        })
+        .filter((preference) => isValidPreference(preference))
+}
+
+export const isValidPreference = ({ type, value }: Preference) => {
+    return (
+        Object.values(PreferenceType).includes(type as PreferenceType) &&
+        typeof value === "boolean"
+    )
+}
+
+export const parseDate = (date?: string): number | undefined => {
+    if (!date) return
+
+    return dayjs(date, DATE_FORMAT, true).isValid()
+        ? parseInt(date, 10)
+        : undefined
+}
+
+export const getPreferenceValue = (
+    type: PreferenceType,
+    preferences: Preference[] = getInitialState().preferences
+) => {
+    return (
+        preferences.find((preference) => {
+            return preference.type === type
+        })?.value ?? false
+    )
+}
+
+// The rule doesn't support class components in the same file.
+
+export const updatePreference = (
+    type: PreferenceType,
+    value: boolean,
+    preferences: Preference[]
+) => {
+    return preferences.map((preference) => {
+        if (preference.type !== type) return preference
+
+        return {
+            ...preference,
+            value,
+        }
+    })
+}
+
+export const arePreferencesOutdated = (
+    preferencesDate: number | undefined,
+    policyDate: number
+) => {
+    if (!preferencesDate) return false
+    return preferencesDate < policyDate
+}
+
+export const serializeState = (state: State) => {
+    const serializedPreferences = state.preferences
+        .map((preference) => {
+            return `${preference.type}${PREFERENCE_KEY_VALUE_SEPARATOR}${
+                preference.value ? 1 : 0
+            }`
+        })
+        .join(PREFERENCES_SEPARATOR)
+
+    return `${serializedPreferences}${DATE_SEPARATOR}${state.date}`
+}
+
+export const getTodayDate = () => dayjs().format(DATE_FORMAT)
diff --git a/site/countryProfileProjects.ts b/site/countryProfileProjects.ts
index 072a25b14c..92062a2cdd 100644
--- a/site/countryProfileProjects.ts
+++ b/site/countryProfileProjects.ts
@@ -1,4 +1,4 @@
-import { landingPageSlugs } from "./SiteSubnavigation.js"
+import { landingPageSlugs } from "./SiteConstants.js"
 
 enum CountryProfileProject {
     coronavirus = "coronavirus",
diff --git a/site/gdocs/AttachmentsContext.tsx b/site/gdocs/AttachmentsContext.tsx
new file mode 100644
index 0000000000..e5b5747889
--- /dev/null
+++ b/site/gdocs/AttachmentsContext.tsx
@@ -0,0 +1,37 @@
+import { createContext } from "react"
+import {
+    LinkedAuthor,
+    LinkedChart,
+    LinkedIndicator,
+    OwidGdocMinimalPostInterface,
+    ImageMetadata,
+    RelatedChart,
+    LatestDataInsight,
+    OwidGdocHomepageMetadata,
+    DbEnrichedLatestWork,
+} from "@ourworldindata/types"
+
+export type Attachments = {
+    donors?: string[]
+    linkedAuthors?: LinkedAuthor[]
+    linkedCharts: Record<string, LinkedChart>
+    linkedIndicators: Record<number, LinkedIndicator>
+    linkedDocuments: Record<string, OwidGdocMinimalPostInterface>
+    imageMetadata: Record<string, ImageMetadata>
+    relatedCharts: RelatedChart[]
+    latestDataInsights?: LatestDataInsight[]
+    homepageMetadata?: OwidGdocHomepageMetadata
+    latestWorkLinks?: DbEnrichedLatestWork[]
+}
+
+export const AttachmentsContext = createContext<Attachments>({
+    linkedAuthors: [],
+    linkedDocuments: {},
+    imageMetadata: {},
+    linkedCharts: {},
+    linkedIndicators: {},
+    relatedCharts: [],
+    latestDataInsights: [],
+    homepageMetadata: {},
+    latestWorkLinks: [],
+})
diff --git a/site/gdocs/DebugContext.tsx b/site/gdocs/DebugContext.tsx
index 5f962884b4..f0de32c277 100644
--- a/site/gdocs/DebugContext.tsx
+++ b/site/gdocs/DebugContext.tsx
@@ -1,22 +1,9 @@
-import { createContext } from "react"
-import * as React from "react"
+import { createContext, useContext } from "react"
 
-const DebugContext = createContext<boolean | undefined>(undefined)
-
-export const DebugProvider = ({
-    children,
-    debug = false,
-}: {
-    children: React.ReactNode
-    debug?: boolean
-}) => {
-    return (
-        <DebugContext.Provider value={debug}>{children}</DebugContext.Provider>
-    )
-}
+export const DebugContext = createContext<boolean | undefined>(undefined)
 
 export const useDebug = () => {
-    const context = React.useContext(DebugContext)
+    const context = useContext(DebugContext)
 
     if (context === undefined) {
         throw new Error("useDebug must be used within a DebugProvider")
diff --git a/site/gdocs/DebugProvider.tsx b/site/gdocs/DebugProvider.tsx
new file mode 100644
index 0000000000..935c227548
--- /dev/null
+++ b/site/gdocs/DebugProvider.tsx
@@ -0,0 +1,13 @@
+import { DebugContext } from "./DebugContext.js"
+
+export function DebugProvider({
+    children,
+    debug = false,
+}: {
+    children: React.ReactNode
+    debug?: boolean
+}) {
+    return (
+        <DebugContext.Provider value={debug}>{children}</DebugContext.Provider>
+    )
+}
diff --git a/site/gdocs/DocumentContext.tsx b/site/gdocs/DocumentContext.tsx
new file mode 100644
index 0000000000..704c9572ad
--- /dev/null
+++ b/site/gdocs/DocumentContext.tsx
@@ -0,0 +1,5 @@
+import { createContext } from "react"
+
+export const DocumentContext = createContext<{ isPreviewing: boolean }>({
+    isPreviewing: false,
+})
diff --git a/site/gdocs/OwidGdoc.tsx b/site/gdocs/OwidGdoc.tsx
index f1e3ae70fd..da82c3a30f 100644
--- a/site/gdocs/OwidGdoc.tsx
+++ b/site/gdocs/OwidGdoc.tsx
@@ -1,22 +1,10 @@
-import { createContext } from "react"
 import * as React from "react"
-import ReactDOM from "react-dom"
 import {
-    LatestDataInsight,
-    LinkedAuthor,
-    LinkedChart,
-    LinkedIndicator,
-    ImageMetadata,
-    RelatedChart,
     OwidGdocType,
     OwidGdoc as OwidGdocInterface,
     OwidGdocAboutInterface,
-    OwidGdocMinimalPostInterface,
-    OwidGdocHomepageMetadata,
-    DbEnrichedLatestWork,
 } from "@ourworldindata/types"
-import { get, getOwidGdocFromJSON } from "@ourworldindata/utils"
-import { DebugProvider } from "./DebugContext.js"
+import { get } from "@ourworldindata/utils"
 import { match, P } from "ts-pattern"
 import { GdocPost } from "./pages/GdocPost.js"
 import { DataInsightPage } from "./pages/DataInsight.js"
@@ -24,35 +12,8 @@ import { Fragment } from "./pages/Fragment.js"
 import { Homepage } from "./pages/Homepage.js"
 import { Author } from "./pages/Author.js"
 import AboutPage from "./pages/AboutPage.js"
-
-export type Attachments = {
-    donors?: string[]
-    linkedAuthors?: LinkedAuthor[]
-    linkedCharts: Record<string, LinkedChart>
-    linkedIndicators: Record<number, LinkedIndicator>
-    linkedDocuments: Record<string, OwidGdocMinimalPostInterface>
-    imageMetadata: Record<string, ImageMetadata>
-    relatedCharts: RelatedChart[]
-    latestDataInsights?: LatestDataInsight[]
-    homepageMetadata?: OwidGdocHomepageMetadata
-    latestWorkLinks?: DbEnrichedLatestWork[]
-}
-
-export const AttachmentsContext = createContext<Attachments>({
-    linkedAuthors: [],
-    linkedDocuments: {},
-    imageMetadata: {},
-    linkedCharts: {},
-    linkedIndicators: {},
-    relatedCharts: [],
-    latestDataInsights: [],
-    homepageMetadata: {},
-    latestWorkLinks: [],
-})
-
-export const DocumentContext = createContext<{ isPreviewing: boolean }>({
-    isPreviewing: false,
-})
+import { AttachmentsContext } from "./AttachmentsContext.js"
+import { DocumentContext } from "./DocumentContext.js"
 
 function AdminLinks() {
     return (
@@ -141,16 +102,3 @@ export function OwidGdoc({
         </AttachmentsContext.Provider>
     )
 }
-
-export const hydrateOwidGdoc = (debug?: boolean, isPreviewing?: boolean) => {
-    const wrapper = document.querySelector("#owid-document-root")
-    const props = getOwidGdocFromJSON(window._OWID_GDOC_PROPS)
-    ReactDOM.hydrate(
-        <React.StrictMode>
-            <DebugProvider debug={debug}>
-                <OwidGdoc {...props} isPreviewing={isPreviewing} />
-            </DebugProvider>
-        </React.StrictMode>,
-        wrapper
-    )
-}
diff --git a/site/gdocs/OwidGdocPage.tsx b/site/gdocs/OwidGdocPage.tsx
index 71e039e53e..9f4525b363 100644
--- a/site/gdocs/OwidGdocPage.tsx
+++ b/site/gdocs/OwidGdocPage.tsx
@@ -12,7 +12,7 @@ import {
     get,
 } from "@ourworldindata/utils"
 import { getCanonicalUrl, getPageTitle } from "@ourworldindata/components"
-import { DebugProvider } from "./DebugContext.js"
+import { DebugProvider } from "./DebugProvider.js"
 import { match, P } from "ts-pattern"
 import {
     ARCHVED_THUMBNAIL_FILENAME,
diff --git a/site/gdocs/components/AdditionalCharts.tsx b/site/gdocs/components/AdditionalCharts.tsx
index 1539c5d4d6..a20c1fef0e 100644
--- a/site/gdocs/components/AdditionalCharts.tsx
+++ b/site/gdocs/components/AdditionalCharts.tsx
@@ -1,5 +1,5 @@
 import { Span } from "@ourworldindata/utils"
-import { renderSpans } from "../utils.js"
+import SpanElements from "./SpanElements.js"
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 
@@ -11,7 +11,7 @@ function AdditionalChartsLink({ item }: { item: Span[] }) {
     if (item.length === 1 && item[0].spanType === "span-link") {
         return (
             <a href={item[0].url}>
-                {renderSpans(item[0].children)}{" "}
+                <SpanElements spans={item[0].children} />{" "}
                 <FontAwesomeIcon icon={faArrowRight} />
             </a>
         )
diff --git a/site/gdocs/components/AllCharts.tsx b/site/gdocs/components/AllCharts.tsx
index 83f610885a..84ba561622 100644
--- a/site/gdocs/components/AllCharts.tsx
+++ b/site/gdocs/components/AllCharts.tsx
@@ -7,7 +7,7 @@ import {
     ALL_CHARTS_ID,
     KeyChartLevel,
 } from "@ourworldindata/utils"
-import { AttachmentsContext } from "../OwidGdoc.js"
+import { AttachmentsContext } from "../AttachmentsContext.js"
 import { RelatedCharts } from "../../blocks/RelatedCharts.js"
 
 type AllChartsProps = EnrichedBlockAllCharts & {
diff --git a/site/gdocs/components/ArticleBlock.tsx b/site/gdocs/components/ArticleBlock.tsx
index 296485b127..07539cd649 100644
--- a/site/gdocs/components/ArticleBlock.tsx
+++ b/site/gdocs/components/ArticleBlock.tsx
@@ -11,7 +11,6 @@ import List from "./List.js"
 import NumberedList from "./NumberedList.js"
 import Image, { ImageParentContainer } from "./Image.js"
 import {
-    get,
     OwidEnrichedGdocBlock,
     spansToUnformattedPlainText,
     TocHeadingWithTitleSupertitle,
@@ -21,7 +20,7 @@ import { CodeSnippet, convertHeadingTextToId } from "@ourworldindata/components"
 import SDGGrid from "./SDGGrid.js"
 import { BlockErrorBoundary, BlockErrorFallback } from "./BlockErrorBoundary.js"
 import { match } from "ts-pattern"
-import { renderSpans } from "../utils.js"
+import SpanElements from "./SpanElements.js"
 import Paragraph from "./Paragraph.js"
 import People from "./People.js"
 import TableOfContents from "./TableOfContents.js"
@@ -45,148 +44,7 @@ import { HomepageSearch } from "./HomepageSearch.js"
 import LatestDataInsightsBlock from "./LatestDataInsightsBlock.js"
 import { Socials } from "./Socials.js"
 import Person from "./Person.js"
-
-export type Container =
-    | "default"
-    | "sticky-right-left-column"
-    | "sticky-right-left-heading-column"
-    | "sticky-right-right-column"
-    | "sticky-left-left-column"
-    | "sticky-left-right-column"
-    | "side-by-side"
-    | "summary"
-    | "datapage"
-    | "key-insight"
-    | "about-page"
-    | "author-header"
-
-// Each container must have a default layout, usually just full-width
-type Layouts = { default: string; [key: string]: string }
-
-// no line-wrapping for easier alphabetisation
-// prettier-ignore
-const layouts: { [key in Container]: Layouts} = {
-    ["default"]: {
-        ["align"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
-        ["all-charts"]: "col-start-2 span-cols-12",
-        ["aside-left"]: "col-start-2 span-cols-3 span-md-cols-10 col-md-start-3",
-        ["aside-right"]: "col-start-11 span-cols-3 span-md-cols-10 col-md-start-3",
-        ["chart-story"]: "col-start-4 span-cols-8 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
-        ["chart"]: "col-start-4 span-cols-8 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
-        ["default"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
-        ["divider"]: "col-start-2 span-cols-12",
-        ["explorer"]: "col-start-2 span-cols-12",
-        ["explorer-tiles"]: "grid grid-cols-12 span-cols-12 col-start-2",
-        ["gray-section"]: "span-cols-14 grid grid-cols-12-full-width",
-        ["heading"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
-        ["homepage-search"]: "grid grid-cols-12-full-width span-cols-14",
-        ["homepage-intro"]: "grid grid-cols-12-full-width span-cols-14",
-        ["horizontal-rule"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
-        ["html"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
-        ["image--narrow"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 col-sm-start-2 span-sm-cols-12",
-        ["image--wide"]: "col-start-4 span-cols-8 col-md-start-2 span-md-cols-12",
-        ["image--widest"]: "col-start-2 span-cols-12 col-md-start-2 span-md-cols-12",
-        ["image-caption"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
-        ["key-indicator"]: "col-start-2 span-cols-12",
-        ["key-indicator-collection"]: "grid col-start-2 span-cols-12",
-        ["key-insights"]: "col-start-2 span-cols-12",
-        ["latest-data-insights"]: "grid grid-cols-12-full-width span-cols-14",
-        ["list"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
-        ["numbered-list"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
-        ["prominent-link"]: "grid grid-cols-6 span-cols-6 col-start-5 span-md-cols-10 col-md-start-3 grid-md-cols-10 span-sm-cols-12 col-sm-start-2 grid-sm-cols-12",
-        ["pill-row"]: "grid span-cols-14 grid-cols-12-full-width",
-        ["pull-quote"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
-        ["recirc"]: "col-start-11 span-cols-3 span-rows-3 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
-        ["research-and-writing"]: "col-start-2 span-cols-12",
-        ["scroller"]: "grid span-cols-12 col-start-2",
-        ["sdg-grid"]: "grid col-start-2 span-cols-12 col-lg-start-3 span-lg-cols-10 span-sm-cols-12 col-sm-start-2",
-        ["side-by-side"]: "grid span-cols-12 col-start-2",
-        ["sticky-left-left-column"]: "grid grid-cols-7 span-cols-7 span-md-cols-10 grid-md-cols-10",
-        ["sticky-left-right-column"]: "grid grid-cols-5 span-cols-5 span-md-cols-10 grid-md-cols-10",
-        ["sticky-left"]: "grid span-cols-12 col-start-2",
-        ["sticky-right-left-column"]: "grid span-cols-5 grid grid-cols-5 span-md-cols-10 grid-md-cols-10 col-md-start-2 span-sm-cols-12 grid-sm-cols-12 col-sm-start-1",
-        ["sticky-right-right-column"]: "span-cols-7 grid-cols-7 span-md-cols-10 grid-md-cols-10 col-md-start-2 span-sm-cols-12 grid-sm-cols-12 col-sm-start-1",
-        ["sticky-right"]: "grid span-cols-12 col-start-2",
-        ["table--narrow"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
-        ["table--wide"]: "col-start-2 span-cols-12",
-        ["text"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
-        ["toc"]: "grid grid-cols-8 col-start-4 span-cols-8 grid-md-cols-10 col-md-start-3 span-md-cols-10 grid-sm-cols-12 span-sm-cols-12 col-sm-start-2",
-        ["topic-page-intro"]: "grid col-start-2 span-cols-12",
-        ["video"]: "col-start-4 span-cols-8 col-md-start-2 span-md-cols-12",
-    },
-    ["datapage"]: {
-        ["default"]: "col-start-2 span-cols-6 col-lg-start-2 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12",
-        ["chart"]: "span-cols-8 span-lg-cols-9 span-md-cols-12",
-    },
-    ["about-page"]: {
-        ["default"]: "grid col-start-2 span-cols-12",
-        ["people"]: "col-start-2 span-cols-8 col-md-start-2 span-md-cols-12",
-        ["donors"]: "grid grid-cols-12-full-width col-start-1 col-end-limit",
-        ["sticky-left-left-column"]: "grid grid-cols-7 span-cols-7 span-md-cols-10 grid-md-cols-10",
-        ["sticky-left-right-column"]: "grid grid-cols-5 span-cols-5 span-md-cols-10 grid-md-cols-10",
-        ["sticky-left"]: "grid span-cols-12 col-start-2",
-        ["sticky-right-left-column"]: "grid span-cols-5 grid grid-cols-5 span-md-cols-10 grid-md-cols-10 col-md-start-2 span-sm-cols-12 grid-sm-cols-12 col-sm-start-1",
-        ["sticky-right-right-column"]: "span-cols-7 grid-cols-7 span-md-cols-10 grid-md-cols-10 col-md-start-2 span-sm-cols-12 grid-sm-cols-12 col-sm-start-1",
-        ["sticky-right"]: "grid span-cols-12 col-start-2",
-    },
-    ["author-header"]: {
-        ["default"]: "span-cols-8",
-        ["image"]: "span-cols-2 span-md-cols-3",
-        ["text"]: "span-cols-6 span-md-cols-8 col-sm-start-2 span-sm-cols-12",
-        ["socials"]: "span-cols-3 col-sm-start-2 span-sm-cols-12",
-    },
-    ["sticky-right-left-column"]: {
-        ["chart"]: "span-cols-5 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
-        ["explorer"]: "span-cols-5 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
-        ["default"]: "span-cols-5 col-start-1 span-md-cols-12",
-        ["prominent-link"]: "grid grid-cols-5 span-cols-5 span-md-cols-10 grid-md-cols-10 span-sm-cols-12 grid-sm-cols-12",
-    },
-    ["sticky-right-left-heading-column"]: {
-        ["default"]: "span-cols-5 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1"
-    },
-    ["sticky-right-right-column"]: {
-        ["chart"]: "span-cols-7 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
-        ["explorer"]: "span-cols-7 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
-        ["default"]: "span-cols-7 span-md-cols-10 span-md-cols-12",
-        ["prominent-link"]: "grid grid-cols-6 span-cols-6 span-md-cols-12 grid-md-cols-12",
-    },
-    ["sticky-left-left-column"]: {
-        ["chart"]: "span-cols-7 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
-        ["explorer"]: "span-cols-7 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
-        ["default"]: "span-cols-7 span-md-cols-12",
-        ["prominent-link"]: "grid grid-cols-6 span-cols-6 span-md-cols-12 grid-md-cols-12",
-    },
-    ["sticky-left-right-column"]: {
-        ["chart"]: "span-cols-5 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
-        ["explorer"]: "span-cols-5 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
-        ["default"]: "span-cols-5 span-md-cols-12",
-        ["prominent-link"]: "grid grid-cols-5 span-cols-5 span-md-cols-10 grid-md-cols-10 span-sm-cols-12 grid-sm-cols-12",
-    },
-    ["side-by-side"]: {
-        ["default"]: "span-cols-6 span-sm-cols-12",
-        ["prominent-link"]: "grid grid-cols-6 span-cols-6 grid-sm-cols-12 span-sm-cols-12 ",
-    },
-    ["summary"]: {
-        ["default"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
-    },
-    ["key-insight"]: {
-        ["default"]: "col-start-1 span-cols-5 col-md-start-1 span-md-cols-12",
-        ["prominent-link"]: "grid grid-cols-6 span-cols-6 span-md-cols-12 grid-md-cols-12",
-    },
-}
-
-export function getLayout(
-    blockType: string = "default",
-    containerType: Container = "default"
-): string {
-    const layout = get(
-        layouts,
-        [containerType, blockType],
-        // fallback to the default for the container
-        get(layouts, [containerType, "default"])
-    )
-    return cx(`article-block__${blockType}`, layout)
-}
+import { Container, getLayout } from "./layout.js"
 
 export default function ArticleBlock({
     b: block,
@@ -221,7 +79,10 @@ export default function ArticleBlock({
             >
                 {caption ? (
                     <figcaption>
-                        {renderSpans(caption, shouldRenderLinks)}
+                        <SpanElements
+                            spans={caption}
+                            shouldRenderLinks={shouldRenderLinks}
+                        />
                     </figcaption>
                 ) : null}
             </figure>
@@ -290,7 +151,10 @@ export default function ArticleBlock({
                     <figcaption
                         className={getLayout("image-caption", containerType)}
                     >
-                        {renderSpans(block.caption, shouldRenderLinks)}
+                        <SpanElements
+                            spans={block.caption}
+                            shouldRenderLinks={shouldRenderLinks}
+                        />
                     </figcaption>
                 ) : null}
             </figure>
@@ -361,7 +225,10 @@ export default function ArticleBlock({
                 )}
                 id={convertHeadingTextToId(block.text)}
             >
-                {renderSpans(block.text, shouldRenderLinks)}
+                <SpanElements
+                    spans={block.text}
+                    shouldRenderLinks={shouldRenderLinks}
+                />
                 {shouldRenderLinks && (
                     <a
                         className="deep-link"
@@ -400,10 +267,13 @@ export default function ArticleBlock({
                     >
                         {supertitle ? (
                             <div className="article-block__heading-supertitle overline-black-caps">
-                                {renderSpans(supertitle, shouldRenderLinks)}
+                                <SpanElements
+                                    spans={supertitle}
+                                    shouldRenderLinks={shouldRenderLinks}
+                                />
                             </div>
                         ) : null}
-                        {renderSpans(text)}
+                        <SpanElements spans={text} />
                         {shouldRenderLinks && (
                             <a className="deep-link" href={`#${id}`} />
                         )}
@@ -435,10 +305,13 @@ export default function ArticleBlock({
                 >
                     {supertitle ? (
                         <div className="article-block__heading-supertitle overline-black-caps">
-                            {renderSpans(supertitle)}
+                            <SpanElements spans={supertitle} />
                         </div>
                     ) : null}
-                    {renderSpans(text, shouldRenderLinks)}
+                    <SpanElements
+                        spans={text}
+                        shouldRenderLinks={shouldRenderLinks}
+                    />
                     {shouldRenderLinks && (
                         <a
                             className="deep-link"
@@ -457,7 +330,10 @@ export default function ArticleBlock({
                 )}
                 id={convertHeadingTextToId(block.text)}
             >
-                {renderSpans(block.text, shouldRenderLinks)}
+                <SpanElements
+                    spans={block.text}
+                    shouldRenderLinks={shouldRenderLinks}
+                />
             </h4>
         ))
         .with({ type: "heading", level: 5 }, (block) => (
@@ -468,7 +344,10 @@ export default function ArticleBlock({
                 )}
                 id={convertHeadingTextToId(block.text)}
             >
-                {renderSpans(block.text, shouldRenderLinks)}
+                <SpanElements
+                    spans={block.text}
+                    shouldRenderLinks={shouldRenderLinks}
+                />
             </h5>
         ))
         .with(
diff --git a/site/gdocs/components/ArticleBlocks.tsx b/site/gdocs/components/ArticleBlocks.tsx
index 1c1913b341..77abcee6da 100644
--- a/site/gdocs/components/ArticleBlocks.tsx
+++ b/site/gdocs/components/ArticleBlocks.tsx
@@ -1,4 +1,5 @@
-import ArticleBlock, { Container } from "./ArticleBlock.js"
+import ArticleBlock from "./ArticleBlock.js"
+import { Container } from "./layout.js"
 import {
     OwidEnrichedGdocBlock,
     TocHeadingWithTitleSupertitle,
diff --git a/site/gdocs/components/AtomArticleBlocks.tsx b/site/gdocs/components/AtomArticleBlocks.tsx
index a105ee90a2..837d6f193a 100644
--- a/site/gdocs/components/AtomArticleBlocks.tsx
+++ b/site/gdocs/components/AtomArticleBlocks.tsx
@@ -2,7 +2,8 @@ import { match } from "ts-pattern"
 
 import { OwidEnrichedGdocBlock } from "@ourworldindata/types"
 import { useImage } from "../utils.js"
-import ArticleBlock, { Container, getLayout } from "./ArticleBlock.js"
+import ArticleBlock from "./ArticleBlock.js"
+import { Container, getLayout } from "./layout.js"
 import { BlockErrorFallback } from "./BlockErrorBoundary.js"
 import { LARGEST_IMAGE_WIDTH } from "@ourworldindata/utils"
 import { CLOUDFLARE_IMAGES_URL } from "../../../settings/clientSettings.js"
diff --git a/site/gdocs/components/Chart.tsx b/site/gdocs/components/Chart.tsx
index c426d4be85..6e9a304781 100644
--- a/site/gdocs/components/Chart.tsx
+++ b/site/gdocs/components/Chart.tsx
@@ -15,7 +15,8 @@ import {
     isEmpty,
 } from "@ourworldindata/utils"
 import { ChartConfigType } from "@ourworldindata/types"
-import { renderSpans, useLinkedChart } from "../utils.js"
+import { useLinkedChart } from "../utils.js"
+import SpanElements from "./SpanElements.js"
 import cx from "classnames"
 import { GRAPHER_PREVIEW_CLASS } from "../../SiteConstants.js"
 import InteractionNotice from "../../InteractionNotice.js"
@@ -140,7 +141,9 @@ export default function Chart({
                 )}
             </figure>
             {d.caption ? (
-                <figcaption>{renderSpans(d.caption)}</figcaption>
+                <figcaption>
+                    <SpanElements spans={d.caption} />
+                </figcaption>
             ) : null}
         </div>
     )
diff --git a/site/gdocs/components/ChartStory.tsx b/site/gdocs/components/ChartStory.tsx
index 394ecc96c7..8b0950aaf8 100644
--- a/site/gdocs/components/ChartStory.tsx
+++ b/site/gdocs/components/ChartStory.tsx
@@ -7,7 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
 
 import { useEmbedChart } from "../../hooks.js"
 import { EnrichedBlockChartStory } from "@ourworldindata/utils"
-import { renderSpans } from "../utils.js"
+import SpanElements from "./SpanElements.js"
 import Chart from "./Chart.js"
 import cx from "classnames"
 
@@ -56,7 +56,7 @@ export default function ChartStory({
                     "chart-story__narrative-text span-cols-6 h3-bold align-center"
                 }
             >
-                {renderSpans(currentSlide.narrative.value)}
+                <SpanElements spans={currentSlide.narrative.value} />
             </div>
             <button
                 aria-label="Go to next slide"
@@ -96,7 +96,7 @@ export default function ChartStory({
                             {currentSlide.technical.map((d: any, i: number) => {
                                 return (
                                     <li className="body-3-medium" key={i}>
-                                        {renderSpans(d.value)}
+                                        <SpanElements spans={d.value} />
                                     </li>
                                 )
                             })}
diff --git a/site/gdocs/components/ExplorerTiles.tsx b/site/gdocs/components/ExplorerTiles.tsx
index 39d28f4e89..60e2fe978e 100644
--- a/site/gdocs/components/ExplorerTiles.tsx
+++ b/site/gdocs/components/ExplorerTiles.tsx
@@ -2,7 +2,7 @@ import { EnrichedBlockExplorerTiles } from "@ourworldindata/types"
 import { Button } from "@ourworldindata/components"
 import { useContext } from "react"
 import { useLinkedChart } from "../utils.js"
-import { DocumentContext } from "../OwidGdoc.js"
+import { DocumentContext } from "../DocumentContext.js"
 import { BAKED_BASE_URL } from "../../../settings/clientSettings.js"
 
 function ExplorerTile({ url }: { url: string }) {
diff --git a/site/gdocs/components/HomepageIntro.tsx b/site/gdocs/components/HomepageIntro.tsx
index 476ec6bb75..f5abb1ab2a 100644
--- a/site/gdocs/components/HomepageIntro.tsx
+++ b/site/gdocs/components/HomepageIntro.tsx
@@ -7,7 +7,7 @@ import {
 import { formatAuthors, groupBy } from "@ourworldindata/utils"
 import { Button } from "@ourworldindata/components"
 import { useLinkedDocument } from "../utils.js"
-import { DocumentContext } from "../OwidGdoc.js"
+import { DocumentContext } from "../DocumentContext.js"
 import Image, { ImageParentContainer } from "./Image.js"
 import { BlockErrorFallback } from "./BlockErrorBoundary.js"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
diff --git a/site/gdocs/components/HomepageSearch.tsx b/site/gdocs/components/HomepageSearch.tsx
index 7637291f0b..0d4d5897d8 100644
--- a/site/gdocs/components/HomepageSearch.tsx
+++ b/site/gdocs/components/HomepageSearch.tsx
@@ -1,6 +1,6 @@
 import { useContext } from "react"
 import { Autocomplete } from "../../search/Autocomplete.js"
-import { AttachmentsContext } from "../OwidGdoc.js"
+import { AttachmentsContext } from "../AttachmentsContext.js"
 import { commafyNumber } from "@ourworldindata/utils"
 
 export function HomepageSearch(props: { className?: string }) {
diff --git a/site/gdocs/components/Image.tsx b/site/gdocs/components/Image.tsx
index cd08ccbab8..8298d18250 100644
--- a/site/gdocs/components/Image.tsx
+++ b/site/gdocs/components/Image.tsx
@@ -5,16 +5,16 @@ import {
     triggerDownloadFromBlob,
 } from "@ourworldindata/utils"
 import cx from "classnames"
-import { LIGHTBOX_IMAGE_CLASS } from "../../Lightbox.js"
+import { LIGHTBOX_IMAGE_CLASS } from "../../lightboxUtils.js"
 import { CLOUDFLARE_IMAGES_URL } from "../../../settings/clientSettings.js"
-import { DocumentContext } from "../OwidGdoc.js"
-import { Container } from "./ArticleBlock.js"
+import { DocumentContext } from "../DocumentContext.js"
 import { useImage } from "../utils.js"
 import { BlockErrorFallback } from "./BlockErrorBoundary.js"
 import { SMALL_BREAKPOINT_MEDIA_QUERY } from "../../SiteConstants.js"
 import { useMediaQuery } from "usehooks-ts"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faDownload } from "@fortawesome/free-solid-svg-icons"
+import { Container } from "./layout.js"
 
 // generates rules that tell the browser:
 // below the medium breakpoint, the image will be 95vw wide
diff --git a/site/gdocs/components/KeyIndicatorCollection.tsx b/site/gdocs/components/KeyIndicatorCollection.tsx
index 7c922fbb87..e7a42a37b0 100644
--- a/site/gdocs/components/KeyIndicatorCollection.tsx
+++ b/site/gdocs/components/KeyIndicatorCollection.tsx
@@ -21,7 +21,7 @@ import { Url, urlToSlug, commafyNumber } from "@ourworldindata/utils"
 
 import { useLinkedChart, useLinkedIndicator } from "../utils.js"
 import KeyIndicator from "./KeyIndicator.js"
-import { AttachmentsContext } from "../OwidGdoc.js"
+import { AttachmentsContext } from "../AttachmentsContext.js"
 import { Button } from "@ourworldindata/components"
 
 // keep in sync with $duration in KeyIndicatorCollection.scss
diff --git a/site/gdocs/components/KeyInsights.tsx b/site/gdocs/components/KeyInsights.tsx
index f10fb6d15c..0b283c5bc4 100644
--- a/site/gdocs/components/KeyInsights.tsx
+++ b/site/gdocs/components/KeyInsights.tsx
@@ -26,7 +26,7 @@ const KEY_INSIGHTS_SLIDE_CONTENT_CLASS_NAME = "content"
 
 type scrollVisibilityApiType = React.ContextType<typeof VisibilityContext>
 
-export enum ArrowDirection {
+enum ArrowDirection {
     prev = "prev",
     next = "next",
 }
diff --git a/site/gdocs/components/LatestDataInsights.tsx b/site/gdocs/components/LatestDataInsights.tsx
index df673fb6eb..14df9f7207 100644
--- a/site/gdocs/components/LatestDataInsights.tsx
+++ b/site/gdocs/components/LatestDataInsights.tsx
@@ -17,11 +17,13 @@ import {
     OwidEnrichedGdocBlock,
     LatestDataInsight,
 } from "@ourworldindata/utils"
-import { dataInsightIndexToIdMap } from "../pages/DataInsight.js"
+import {
+    dataInsightIndexToIdMap,
+    SMALL_BREAKPOINT_MEDIA_QUERY,
+} from "../../SiteConstants.js"
 import Image from "./Image.js"
 import { ArticleBlocks } from "./ArticleBlocks.js"
 import DataInsightDateline from "./DataInsightDateline.js"
-import { SMALL_BREAKPOINT_MEDIA_QUERY } from "../../SiteConstants.js"
 
 export default function LatestDataInsights({
     className,
diff --git a/site/gdocs/components/LatestDataInsightsBlock.tsx b/site/gdocs/components/LatestDataInsightsBlock.tsx
index 2442e50613..1794af3a0d 100644
--- a/site/gdocs/components/LatestDataInsightsBlock.tsx
+++ b/site/gdocs/components/LatestDataInsightsBlock.tsx
@@ -1,7 +1,7 @@
 import { useContext } from "react"
 import cx from "classnames"
 
-import { AttachmentsContext } from "../OwidGdoc.js"
+import { AttachmentsContext } from "../AttachmentsContext.js"
 import { Button } from "@ourworldindata/components"
 import { NewsletterSubscriptionContext } from "../../newsletter.js"
 import LatestDataInsights from "./LatestDataInsights.js"
diff --git a/site/gdocs/components/LinkedA.tsx b/site/gdocs/components/LinkedA.tsx
new file mode 100644
index 0000000000..0be30484f0
--- /dev/null
+++ b/site/gdocs/components/LinkedA.tsx
@@ -0,0 +1,37 @@
+import { getLinkType } from "@ourworldindata/components"
+import { SpanLink } from "@ourworldindata/types"
+import { useLinkedDocument, useLinkedChart } from "../utils.js"
+import SpanElements from "./SpanElements.js"
+
+export default function LinkedA({ span }: { span: SpanLink }) {
+    const linkType = getLinkType(span.url)
+    const { linkedDocument } = useLinkedDocument(span.url)
+    const { linkedChart } = useLinkedChart(span.url)
+
+    if (linkType === "url") {
+        // Don't open in new tab if it's an anchor link
+        const linkProps = !span.url.startsWith("#")
+            ? { target: "_blank", rel: "noopener" }
+            : {}
+        return (
+            <a href={span.url} className="span-link" {...linkProps}>
+                <SpanElements spans={span.children} />
+            </a>
+        )
+    }
+    if (linkedChart) {
+        return (
+            <a href={linkedChart.resolvedUrl} className="span-link">
+                <SpanElements spans={span.children} />
+            </a>
+        )
+    }
+    if (linkedDocument && linkedDocument.published && linkedDocument.slug) {
+        return (
+            <a href={`/${linkedDocument.slug}`} className="span-link">
+                <SpanElements spans={span.children} />
+            </a>
+        )
+    }
+    return <SpanElements spans={span.children} />
+}
diff --git a/site/gdocs/components/List.tsx b/site/gdocs/components/List.tsx
index 50efec3f74..53511296c3 100644
--- a/site/gdocs/components/List.tsx
+++ b/site/gdocs/components/List.tsx
@@ -1,5 +1,6 @@
 import { EnrichedBlockList, EnrichedBlockText } from "@ourworldindata/utils"
-import { renderSpans } from "../utils.js"
+import SpanElements from "./SpanElements.js"
+
 export default function List({
     d,
     className = "",
@@ -10,7 +11,11 @@ export default function List({
     return (
         <ul className={className}>
             {d.items.map((_d: EnrichedBlockText, i: number) => {
-                return <li key={i}>{renderSpans(_d.value)}</li>
+                return (
+                    <li key={i}>
+                        <SpanElements spans={_d.value} />
+                    </li>
+                )
             })}
         </ul>
     )
diff --git a/site/gdocs/components/NumberedList.tsx b/site/gdocs/components/NumberedList.tsx
index c915613577..0c1020a9ae 100644
--- a/site/gdocs/components/NumberedList.tsx
+++ b/site/gdocs/components/NumberedList.tsx
@@ -2,7 +2,8 @@ import {
     EnrichedBlockNumberedList,
     EnrichedBlockText,
 } from "@ourworldindata/utils"
-import { renderSpans } from "../utils.js"
+import SpanElements from "./SpanElements.js"
+
 export default function NumberedList({
     d,
     className = "",
@@ -13,7 +14,11 @@ export default function NumberedList({
     return (
         <ol className={className}>
             {d.items.map((_d: EnrichedBlockText, i: number) => {
-                return <li key={i}>{renderSpans(_d.value)}</li>
+                return (
+                    <li key={i}>
+                        <SpanElements spans={_d.value} />
+                    </li>
+                )
             })}
         </ol>
     )
diff --git a/site/gdocs/components/Paragraph.tsx b/site/gdocs/components/Paragraph.tsx
index a35a781750..2ce5b418ad 100644
--- a/site/gdocs/components/Paragraph.tsx
+++ b/site/gdocs/components/Paragraph.tsx
@@ -1,5 +1,5 @@
 import { EnrichedBlockText, Span } from "@ourworldindata/utils"
-import { renderSpans } from "../utils.js"
+import SpanElements from "./SpanElements.js"
 
 function isOnlyEmptySpans(spans: Span[]) {
     return spans.every((span) => {
@@ -23,6 +23,11 @@ export default function Paragraph({
         return null
     }
     return (
-        <p className={className}>{renderSpans(d.value, shouldRenderLinks)}</p>
+        <p className={className}>
+            <SpanElements
+                spans={d.value}
+                shouldRenderLinks={shouldRenderLinks}
+            />
+        </p>
     )
 }
diff --git a/site/gdocs/components/PillRow.tsx b/site/gdocs/components/PillRow.tsx
index dac0af1eac..ee39333e3f 100644
--- a/site/gdocs/components/PillRow.tsx
+++ b/site/gdocs/components/PillRow.tsx
@@ -1,7 +1,7 @@
 import { EnrichedBlockPillRow } from "@ourworldindata/types"
 import { useContext } from "react"
 import { useLinkedDocument } from "../utils.js"
-import { DocumentContext } from "../OwidGdoc.js"
+import { DocumentContext } from "../DocumentContext.js"
 
 function Pill(props: { text?: string; url: string }) {
     const { linkedDocument, errorMessage } = useLinkedDocument(props.url)
diff --git a/site/gdocs/components/ProminentLink.tsx b/site/gdocs/components/ProminentLink.tsx
index 55d5c7422c..5870d81678 100644
--- a/site/gdocs/components/ProminentLink.tsx
+++ b/site/gdocs/components/ProminentLink.tsx
@@ -6,7 +6,7 @@ import { getLinkType } from "@ourworldindata/components"
 
 import Image from "./Image.js"
 import { useLinkedChart, useLinkedDocument } from "../utils.js"
-import { DocumentContext } from "../OwidGdoc.js"
+import { DocumentContext } from "../DocumentContext.js"
 import { BlockErrorFallback } from "./BlockErrorBoundary.js"
 import { BAKED_GRAPHER_EXPORTS_BASE_URL } from "../../../settings/clientSettings.js"
 import {
diff --git a/site/gdocs/components/Recirc.tsx b/site/gdocs/components/Recirc.tsx
index c5ab933d76..2657c141dc 100644
--- a/site/gdocs/components/Recirc.tsx
+++ b/site/gdocs/components/Recirc.tsx
@@ -1,5 +1,6 @@
 import { EnrichedBlockRecirc } from "@ourworldindata/utils"
-import { renderSpan, useLinkedDocument } from "../utils.js"
+import { useLinkedDocument } from "../utils.js"
+import SpanElement from "./SpanElement.js"
 import { formatAuthors } from "../../clientFormatting.js"
 
 function RecircItem({ url }: { url: string }) {
@@ -33,7 +34,7 @@ export default function Recirc({
         <div className={className}>
             <div className="recirc-content">
                 <span className="recirc-content__heading overline-black-caps">
-                    {renderSpan(d.title)}
+                    <SpanElement span={d.title} />
                 </span>
                 {d.links.map(({ url }) => {
                     return <RecircItem url={url} key={url} />
diff --git a/site/gdocs/components/ResearchAndWriting.tsx b/site/gdocs/components/ResearchAndWriting.tsx
index bf9ca1999d..8084121b17 100644
--- a/site/gdocs/components/ResearchAndWriting.tsx
+++ b/site/gdocs/components/ResearchAndWriting.tsx
@@ -10,7 +10,8 @@ import {
 import { useLinkedDocument } from "../utils.js"
 import { formatAuthors } from "../../clientFormatting.js"
 import Image from "./Image.js"
-import { AttachmentsContext, DocumentContext } from "../OwidGdoc.js"
+import { DocumentContext } from "../DocumentContext.js"
+import { AttachmentsContext } from "../AttachmentsContext.js"
 import {
     DEFAULT_GDOC_FEATURED_IMAGE,
     DbEnrichedLatestWork,
diff --git a/site/gdocs/components/Scroller.tsx b/site/gdocs/components/Scroller.tsx
index 35cdd6cf08..8e3971ff9e 100644
--- a/site/gdocs/components/Scroller.tsx
+++ b/site/gdocs/components/Scroller.tsx
@@ -6,7 +6,7 @@ import {
 } from "@ourworldindata/utils"
 
 import { useEmbedChart } from "../../hooks.js"
-import { renderSpans } from "../utils.js"
+import SpanElements from "./SpanElements.js"
 import cx from "classnames"
 export default function Scroller({
     d,
@@ -39,7 +39,7 @@ export default function Scroller({
                             }}
                         >
                             <p className="scroller__paragraph">
-                                {renderSpans(value.text.value)}
+                                <SpanElements spans={value.text.value} />
                             </p>
                         </InView>
                     )
diff --git a/site/gdocs/components/SpanElement.tsx b/site/gdocs/components/SpanElement.tsx
new file mode 100644
index 0000000000..b3026b07a7
--- /dev/null
+++ b/site/gdocs/components/SpanElement.tsx
@@ -0,0 +1,80 @@
+import { Span } from "@ourworldindata/types"
+import * as React from "react"
+import { match } from "ts-pattern"
+import LinkedA from "./LinkedA.js"
+import SpanElements from "./SpanElements.js"
+
+export default function SpanElement({
+    span,
+    shouldRenderLinks = true,
+}: {
+    span: Span
+    shouldRenderLinks?: boolean
+}): React.ReactElement {
+    return match(span)
+        .with({ spanType: "span-simple-text" }, (span) => (
+            <span>{span.text}</span>
+        ))
+        .with({ spanType: "span-link" }, (span) =>
+            shouldRenderLinks ? (
+                <LinkedA span={span} />
+            ) : (
+                <span>
+                    <SpanElements spans={span.children} />
+                </span>
+            )
+        )
+        .with({ spanType: "span-ref" }, (span) =>
+            shouldRenderLinks ? (
+                <a href={span.url} className="ref">
+                    <SpanElements spans={span.children} />
+                </a>
+            ) : (
+                <span className="ref">
+                    <SpanElements spans={span.children} />
+                </span>
+            )
+        )
+        .with({ spanType: "span-dod" }, (span) => (
+            <span className="dod-span" data-id={`${span.id}`} tabIndex={0}>
+                <SpanElements spans={span.children} />
+            </span>
+        ))
+        .with({ spanType: "span-newline" }, () => <br />)
+        .with({ spanType: "span-italic" }, (span) => (
+            <em>
+                <SpanElements spans={span.children} />
+            </em>
+        ))
+        .with({ spanType: "span-bold" }, (span) => (
+            <strong>
+                <SpanElements spans={span.children} />
+            </strong>
+        ))
+        .with({ spanType: "span-underline" }, (span) => (
+            <u>
+                <SpanElements spans={span.children} />
+            </u>
+        ))
+        .with({ spanType: "span-subscript" }, (span) => (
+            <sub>
+                <SpanElements spans={span.children} />
+            </sub>
+        ))
+        .with({ spanType: "span-superscript" }, (span) => (
+            <sup>
+                <SpanElements spans={span.children} />
+            </sup>
+        ))
+        .with({ spanType: "span-quote" }, (span) => (
+            <q>
+                <SpanElements spans={span.children} />
+            </q>
+        ))
+        .with({ spanType: "span-fallback" }, (span) => (
+            <span>
+                <SpanElements spans={span.children} />
+            </span>
+        ))
+        .exhaustive()
+}
diff --git a/site/gdocs/components/SpanElements.tsx b/site/gdocs/components/SpanElements.tsx
new file mode 100644
index 0000000000..adb58e5b93
--- /dev/null
+++ b/site/gdocs/components/SpanElements.tsx
@@ -0,0 +1,22 @@
+import { Span } from "@ourworldindata/types"
+import SpanElement from "./SpanElement.js"
+
+export default function SpanElements({
+    spans,
+    shouldRenderLinks = true,
+}: {
+    spans: Span[]
+    shouldRenderLinks?: boolean
+}) {
+    return (
+        <>
+            {spans.map((span, index) => (
+                <SpanElement
+                    key={index}
+                    span={span}
+                    shouldRenderLinks={shouldRenderLinks}
+                />
+            ))}
+        </>
+    )
+}
diff --git a/site/gdocs/components/TopicPageIntro.tsx b/site/gdocs/components/TopicPageIntro.tsx
index f3b6bf75a8..49d4598484 100644
--- a/site/gdocs/components/TopicPageIntro.tsx
+++ b/site/gdocs/components/TopicPageIntro.tsx
@@ -4,7 +4,7 @@ import {
 } from "@ourworldindata/utils"
 import { useContext } from "react"
 import { useLinkedDocument } from "../utils.js"
-import { DocumentContext } from "../OwidGdoc.js"
+import { DocumentContext } from "../DocumentContext.js"
 import Paragraph from "./Paragraph.js"
 
 type TopicPageIntroProps = EnrichedBlockTopicPageIntro & {
diff --git a/site/gdocs/components/Video.tsx b/site/gdocs/components/Video.tsx
index fd838b9fa5..f2a960e1b5 100644
--- a/site/gdocs/components/Video.tsx
+++ b/site/gdocs/components/Video.tsx
@@ -1,6 +1,7 @@
 import cx from "classnames"
 import { LARGEST_IMAGE_WIDTH, Span } from "@ourworldindata/utils"
-import { renderSpans, useImage } from "../utils.js"
+import { useImage } from "../utils.js"
+import SpanElements from "./SpanElements.js"
 import { CLOUDFLARE_IMAGES_URL } from "../../../settings/clientSettings.js"
 
 interface VideoProps {
@@ -31,7 +32,11 @@ export default function Video(props: VideoProps) {
             >
                 <source src={url} type="video/mp4" />
             </video>
-            {caption ? <figcaption>{renderSpans(caption)}</figcaption> : null}
+            {caption ? (
+                <figcaption>
+                    <SpanElements spans={caption} />
+                </figcaption>
+            ) : null}
         </figure>
     )
 }
diff --git a/site/gdocs/components/layout.ts b/site/gdocs/components/layout.ts
new file mode 100644
index 0000000000..9f8a063969
--- /dev/null
+++ b/site/gdocs/components/layout.ts
@@ -0,0 +1,144 @@
+import cx from "classnames"
+import { get } from "lodash"
+
+export type Container =
+    | "default"
+    | "sticky-right-left-column"
+    | "sticky-right-left-heading-column"
+    | "sticky-right-right-column"
+    | "sticky-left-left-column"
+    | "sticky-left-right-column"
+    | "side-by-side"
+    | "summary"
+    | "datapage"
+    | "key-insight"
+    | "about-page"
+    | "author-header"
+
+// Each container must have a default layout, usually just full-width
+type Layouts = { default: string; [key: string]: string }
+
+// no line-wrapping for easier alphabetisation
+// prettier-ignore
+const layouts: { [key in Container]: Layouts} = {
+    ["default"]: {
+        ["align"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
+        ["all-charts"]: "col-start-2 span-cols-12",
+        ["aside-left"]: "col-start-2 span-cols-3 span-md-cols-10 col-md-start-3",
+        ["aside-right"]: "col-start-11 span-cols-3 span-md-cols-10 col-md-start-3",
+        ["chart-story"]: "col-start-4 span-cols-8 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
+        ["chart"]: "col-start-4 span-cols-8 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
+        ["default"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
+        ["divider"]: "col-start-2 span-cols-12",
+        ["explorer"]: "col-start-2 span-cols-12",
+        ["explorer-tiles"]: "grid grid-cols-12 span-cols-12 col-start-2",
+        ["gray-section"]: "span-cols-14 grid grid-cols-12-full-width",
+        ["heading"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
+        ["homepage-search"]: "grid grid-cols-12-full-width span-cols-14",
+        ["homepage-intro"]: "grid grid-cols-12-full-width span-cols-14",
+        ["horizontal-rule"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
+        ["html"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
+        ["image--narrow"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 col-sm-start-2 span-sm-cols-12",
+        ["image--wide"]: "col-start-4 span-cols-8 col-md-start-2 span-md-cols-12",
+        ["image--widest"]: "col-start-2 span-cols-12 col-md-start-2 span-md-cols-12",
+        ["image-caption"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
+        ["key-indicator"]: "col-start-2 span-cols-12",
+        ["key-indicator-collection"]: "grid col-start-2 span-cols-12",
+        ["key-insights"]: "col-start-2 span-cols-12",
+        ["latest-data-insights"]: "grid grid-cols-12-full-width span-cols-14",
+        ["list"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
+        ["numbered-list"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
+        ["prominent-link"]: "grid grid-cols-6 span-cols-6 col-start-5 span-md-cols-10 col-md-start-3 grid-md-cols-10 span-sm-cols-12 col-sm-start-2 grid-sm-cols-12",
+        ["pill-row"]: "grid span-cols-14 grid-cols-12-full-width",
+        ["pull-quote"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
+        ["recirc"]: "col-start-11 span-cols-3 span-rows-3 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
+        ["research-and-writing"]: "col-start-2 span-cols-12",
+        ["scroller"]: "grid span-cols-12 col-start-2",
+        ["sdg-grid"]: "grid col-start-2 span-cols-12 col-lg-start-3 span-lg-cols-10 span-sm-cols-12 col-sm-start-2",
+        ["side-by-side"]: "grid span-cols-12 col-start-2",
+        ["sticky-left-left-column"]: "grid grid-cols-7 span-cols-7 span-md-cols-10 grid-md-cols-10",
+        ["sticky-left-right-column"]: "grid grid-cols-5 span-cols-5 span-md-cols-10 grid-md-cols-10",
+        ["sticky-left"]: "grid span-cols-12 col-start-2",
+        ["sticky-right-left-column"]: "grid span-cols-5 grid grid-cols-5 span-md-cols-10 grid-md-cols-10 col-md-start-2 span-sm-cols-12 grid-sm-cols-12 col-sm-start-1",
+        ["sticky-right-right-column"]: "span-cols-7 grid-cols-7 span-md-cols-10 grid-md-cols-10 col-md-start-2 span-sm-cols-12 grid-sm-cols-12 col-sm-start-1",
+        ["sticky-right"]: "grid span-cols-12 col-start-2",
+        ["table--narrow"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
+        ["table--wide"]: "col-start-2 span-cols-12",
+        ["text"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
+        ["toc"]: "grid grid-cols-8 col-start-4 span-cols-8 grid-md-cols-10 col-md-start-3 span-md-cols-10 grid-sm-cols-12 span-sm-cols-12 col-sm-start-2",
+        ["topic-page-intro"]: "grid col-start-2 span-cols-12",
+        ["video"]: "col-start-4 span-cols-8 col-md-start-2 span-md-cols-12",
+    },
+    ["datapage"]: {
+        ["default"]: "col-start-2 span-cols-6 col-lg-start-2 span-lg-cols-7 col-md-start-2 span-md-cols-10 col-sm-start-1 span-sm-cols-12",
+        ["chart"]: "span-cols-8 span-lg-cols-9 span-md-cols-12",
+    },
+    ["about-page"]: {
+        ["default"]: "grid col-start-2 span-cols-12",
+        ["people"]: "col-start-2 span-cols-8 col-md-start-2 span-md-cols-12",
+        ["donors"]: "grid grid-cols-12-full-width col-start-1 col-end-limit",
+        ["sticky-left-left-column"]: "grid grid-cols-7 span-cols-7 span-md-cols-10 grid-md-cols-10",
+        ["sticky-left-right-column"]: "grid grid-cols-5 span-cols-5 span-md-cols-10 grid-md-cols-10",
+        ["sticky-left"]: "grid span-cols-12 col-start-2",
+        ["sticky-right-left-column"]: "grid span-cols-5 grid grid-cols-5 span-md-cols-10 grid-md-cols-10 col-md-start-2 span-sm-cols-12 grid-sm-cols-12 col-sm-start-1",
+        ["sticky-right-right-column"]: "span-cols-7 grid-cols-7 span-md-cols-10 grid-md-cols-10 col-md-start-2 span-sm-cols-12 grid-sm-cols-12 col-sm-start-1",
+        ["sticky-right"]: "grid span-cols-12 col-start-2",
+    },
+    ["author-header"]: {
+        ["default"]: "span-cols-8",
+        ["image"]: "span-cols-2 span-md-cols-3",
+        ["text"]: "span-cols-6 span-md-cols-8 col-sm-start-2 span-sm-cols-12",
+        ["socials"]: "span-cols-3 col-sm-start-2 span-sm-cols-12",
+    },
+    ["sticky-right-left-column"]: {
+        ["chart"]: "span-cols-5 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
+        ["explorer"]: "span-cols-5 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
+        ["default"]: "span-cols-5 col-start-1 span-md-cols-12",
+        ["prominent-link"]: "grid grid-cols-5 span-cols-5 span-md-cols-10 grid-md-cols-10 span-sm-cols-12 grid-sm-cols-12",
+    },
+    ["sticky-right-left-heading-column"]: {
+        ["default"]: "span-cols-5 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1"
+    },
+    ["sticky-right-right-column"]: {
+        ["chart"]: "span-cols-7 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
+        ["explorer"]: "span-cols-7 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
+        ["default"]: "span-cols-7 span-md-cols-10 span-md-cols-12",
+        ["prominent-link"]: "grid grid-cols-6 span-cols-6 span-md-cols-12 grid-md-cols-12",
+    },
+    ["sticky-left-left-column"]: {
+        ["chart"]: "span-cols-7 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
+        ["explorer"]: "span-cols-7 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
+        ["default"]: "span-cols-7 span-md-cols-12",
+        ["prominent-link"]: "grid grid-cols-6 span-cols-6 span-md-cols-12 grid-md-cols-12",
+    },
+    ["sticky-left-right-column"]: {
+        ["chart"]: "span-cols-5 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
+        ["explorer"]: "span-cols-5 col-start-1 span-md-cols-10 col-md-start-2 span-sm-cols-12 col-sm-start-1",
+        ["default"]: "span-cols-5 span-md-cols-12",
+        ["prominent-link"]: "grid grid-cols-5 span-cols-5 span-md-cols-10 grid-md-cols-10 span-sm-cols-12 grid-sm-cols-12",
+    },
+    ["side-by-side"]: {
+        ["default"]: "span-cols-6 span-sm-cols-12",
+        ["prominent-link"]: "grid grid-cols-6 span-cols-6 grid-sm-cols-12 span-sm-cols-12 ",
+    },
+    ["summary"]: {
+        ["default"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
+    },
+    ["key-insight"]: {
+        ["default"]: "col-start-1 span-cols-5 col-md-start-1 span-md-cols-12",
+        ["prominent-link"]: "grid grid-cols-6 span-cols-6 span-md-cols-12 grid-md-cols-12",
+    },
+}
+
+export function getLayout(
+    blockType: string = "default",
+    containerType: Container = "default"
+): string {
+    const layout = get(
+        layouts,
+        [containerType, blockType],
+        // fallback to the default for the container
+        get(layouts, [containerType, "default"])
+    )
+    return cx(`article-block__${blockType}`, layout)
+}
diff --git a/site/gdocs/pages/AboutPage.tsx b/site/gdocs/pages/AboutPage.tsx
index 6b9af237b5..dbe4f18e8b 100644
--- a/site/gdocs/pages/AboutPage.tsx
+++ b/site/gdocs/pages/AboutPage.tsx
@@ -3,7 +3,7 @@ import { isEmpty } from "lodash"
 import { useEffect, useRef } from "react"
 
 import { OwidGdocAboutInterface } from "@ourworldindata/types"
-import { ABOUT_LINKS } from "../../SiteAbout.js"
+import { ABOUT_LINKS } from "../../SiteConstants.js"
 import { ArticleBlocks } from "../components/ArticleBlocks.js"
 import Footnotes from "../components/Footnotes.js"
 
@@ -50,16 +50,16 @@ function AboutNav({ slug }: { slug: string }) {
     return (
         <nav className="about-nav grid grid-cols-12-full-width col-start-1 col-end-limit">
             <ul className="about-nav-list col-start-2 col-end-14 col-sm-start-1">
-                {ABOUT_LINKS.map(({ title, href }) => {
-                    const isActive = href === `/${slug}`
+                {ABOUT_LINKS.map(({ title, url }) => {
+                    const isActive = url === `/${slug}`
                     return (
-                        <li key={href}>
+                        <li key={url}>
                             <a
                                 className={cx("about-nav-link", {
                                     "about-nav-link--is-active": isActive,
                                 })}
                                 ref={isActive ? activeLinkRef : undefined}
-                                href={href}
+                                href={url}
                                 aria-current={isActive ? "page" : undefined}
                             >
                                 {title}
diff --git a/site/gdocs/pages/Author.tsx b/site/gdocs/pages/Author.tsx
index 2f996002f7..a76a6e0bf8 100644
--- a/site/gdocs/pages/Author.tsx
+++ b/site/gdocs/pages/Author.tsx
@@ -6,7 +6,8 @@ import {
 } from "@ourworldindata/types"
 import { ArticleBlocks } from "../components/ArticleBlocks.js"
 import Image from "../components/Image.js"
-import ArticleBlock, { getLayout } from "../components/ArticleBlock.js"
+import ArticleBlock from "../components/ArticleBlock.js"
+import { getLayout } from "../components/layout.js"
 import cx from "classnames"
 
 export interface AuthorProps {
diff --git a/site/gdocs/pages/DataInsight.tsx b/site/gdocs/pages/DataInsight.tsx
index 2d707078aa..5ea013fe43 100644
--- a/site/gdocs/pages/DataInsight.tsx
+++ b/site/gdocs/pages/DataInsight.tsx
@@ -18,28 +18,10 @@ import { ArticleBlocks } from "../components/ArticleBlocks.js"
 import LinkedAuthor from "../components/LinkedAuthor.js"
 import DataInsightDateline from "../components/DataInsightDateline.js"
 import LatestDataInsights from "../components/LatestDataInsights.js"
-import { AttachmentsContext } from "../OwidGdoc.js"
+import { AttachmentsContext } from "../AttachmentsContext.js"
 import { BAKED_BASE_URL } from "../../../settings/clientSettings.js"
 import DataInsightsNewsletterBanner from "../../DataInsightsNewsletterBanner.js"
 
-export const MOST_RECENT_DATA_INSIGHT = "most-recent-data-insight"
-export const SECOND_MOST_RECENT_INSIGHT = "second-most-recent-data-insight"
-export const THIRD_MOST_RECENT_INSIGHT = "third-most-recent-data-insight"
-export const FOURTH_MOST_RECENT_INSIGHT = "fourth-most-recent-data-insight"
-export const FIFTH_MOST_RECENT_INSIGHT = "fifth-most-recent-data-insight"
-export const SIXTH_MOST_RECENT_INSIGHT = "sixth-most-recent-data-insight"
-export const SEVENTH_MOST_RECENT_INSIGHT = "seventh-most-recent-data-insight"
-
-export const dataInsightIndexToIdMap: Record<number, string> = {
-    0: MOST_RECENT_DATA_INSIGHT,
-    1: SECOND_MOST_RECENT_INSIGHT,
-    2: THIRD_MOST_RECENT_INSIGHT,
-    3: FOURTH_MOST_RECENT_INSIGHT,
-    4: FIFTH_MOST_RECENT_INSIGHT,
-    5: SIXTH_MOST_RECENT_INSIGHT,
-    6: SEVENTH_MOST_RECENT_INSIGHT,
-}
-
 export const LatestDataInsightCards = (props: {
     latestDataInsights?: LatestDataInsight[]
     className?: string
diff --git a/site/gdocs/pages/Homepage.tsx b/site/gdocs/pages/Homepage.tsx
index bc1e2e2c94..daf406dd9a 100644
--- a/site/gdocs/pages/Homepage.tsx
+++ b/site/gdocs/pages/Homepage.tsx
@@ -9,8 +9,11 @@ import {
     EntryMeta,
     OwidGdocHomepageContent,
 } from "@ourworldindata/types"
-import { SiteNavigationStatic } from "../../SiteNavigation.js"
-import { RSS_FEEDS, SOCIALS } from "../../SiteConstants.js"
+import {
+    SiteNavigationStatic,
+    RSS_FEEDS,
+    SOCIALS,
+} from "../../SiteConstants.js"
 
 export interface HomepageProps {
     content: OwidGdocHomepageContent
diff --git a/site/gdocs/utils.tsx b/site/gdocs/utils.ts
similarity index 57%
rename from site/gdocs/utils.tsx
rename to site/gdocs/utils.ts
index 41454b3af9..e5501b0299 100644
--- a/site/gdocs/utils.tsx
+++ b/site/gdocs/utils.ts
@@ -1,20 +1,20 @@
 import { useContext } from "react"
-import * as React from "react"
 
 import { getLinkType, getUrlTarget } from "@ourworldindata/components"
 import {
-    Span,
-    SpanLink,
     ImageMetadata,
     LinkedChart,
     OwidGdocPostContent,
     OwidGdocMinimalPostInterface,
     OwidGdocType,
     LinkedIndicator,
+    CategoryWithEntries,
+    EntryMeta,
+    SubNavId,
 } from "@ourworldindata/types"
 import { formatAuthors, Url } from "@ourworldindata/utils"
-import { match } from "ts-pattern"
-import { AttachmentsContext } from "./OwidGdoc.js"
+import { AttachmentsContext } from "./AttachmentsContext.js"
+import { SiteNavigationStatic, SubnavItem, subnavs } from "../SiteConstants.js"
 
 export const breadcrumbColorForCoverColor = (
     coverColor: OwidGdocPostContent["cover-color"]
@@ -148,110 +148,6 @@ export function useDonors(): string[] | undefined {
     return donors
 }
 
-const LinkedA = ({ span }: { span: SpanLink }): React.ReactElement => {
-    const linkType = getLinkType(span.url)
-    const { linkedDocument } = useLinkedDocument(span.url)
-    const { linkedChart } = useLinkedChart(span.url)
-
-    if (linkType === "url") {
-        // Don't open in new tab if it's an anchor link
-        const linkProps = !span.url.startsWith("#")
-            ? { target: "_blank", rel: "noopener" }
-            : {}
-        return (
-            <a href={span.url} className="span-link" {...linkProps}>
-                {renderSpans(span.children)}
-            </a>
-        )
-    }
-    if (linkedChart) {
-        return (
-            <a href={linkedChart.resolvedUrl} className="span-link">
-                {renderSpans(span.children)}
-            </a>
-        )
-    }
-    if (linkedDocument && linkedDocument.published && linkedDocument.slug) {
-        return (
-            <a href={`/${linkedDocument.slug}`} className="span-link">
-                {renderSpans(span.children)}
-            </a>
-        )
-    }
-    return <>{renderSpans(span.children)}</>
-}
-
-export function renderSpan(
-    span: Span,
-    key: React.Key | null | undefined = undefined,
-    shouldRenderLinks: boolean = true
-): React.ReactElement {
-    return match(span)
-        .with({ spanType: "span-simple-text" }, (span) => (
-            <span key={key}>{span.text}</span>
-        ))
-        .with({ spanType: "span-link" }, (span) =>
-            shouldRenderLinks ? (
-                <LinkedA span={span} key={key} />
-            ) : (
-                <span key={key}>{renderSpans(span.children)}</span>
-            )
-        )
-        .with({ spanType: "span-ref" }, (span) =>
-            shouldRenderLinks ? (
-                <a key={key} href={span.url} className="ref">
-                    {renderSpans(span.children)}
-                </a>
-            ) : (
-                <span key={key} className="ref">
-                    {renderSpans(span.children)}
-                </span>
-            )
-        )
-        .with({ spanType: "span-dod" }, (span) => (
-            <span
-                key={key}
-                className="dod-span"
-                data-id={`${span.id}`}
-                tabIndex={0}
-            >
-                {renderSpans(span.children)}
-            </span>
-        ))
-        .with({ spanType: "span-newline" }, () => <br key={key} />)
-        .with({ spanType: "span-italic" }, (span) => (
-            <em key={key}>{renderSpans(span.children)}</em>
-        ))
-        .with({ spanType: "span-bold" }, (span) => (
-            <strong key={key}>{renderSpans(span.children)}</strong>
-        ))
-        .with({ spanType: "span-underline" }, (span) => (
-            <u key={key}>{renderSpans(span.children)}</u>
-        ))
-        .with({ spanType: "span-subscript" }, (span) => (
-            <sub key={key}>{renderSpans(span.children)}</sub>
-        ))
-        .with({ spanType: "span-superscript" }, (span) => (
-            <sup key={key}>{renderSpans(span.children)}</sup>
-        ))
-        .with({ spanType: "span-quote" }, (span) => (
-            <q key={key}>{renderSpans(span.children)}</q>
-        ))
-        .with({ spanType: "span-fallback" }, (span) => (
-            <span key={key}>{renderSpans(span.children)}</span>
-        ))
-        .exhaustive()
-}
-
-export function renderSpans(
-    spans: Span[],
-    shouldRenderLinks: boolean = true
-): React.ReactElement[] {
-    return spans.map((span, index) =>
-        renderSpan(span, index, shouldRenderLinks)
-    )
-}
-
 export function getShortPageCitation(
     authors: string[],
     title: string,
@@ -261,3 +157,42 @@ export function getShortPageCitation(
         authors: authors,
     })} (${publishedAt?.getFullYear()}) - “${title}”`
 }
+
+export const allTopicsInCategory = (
+    category: CategoryWithEntries
+): EntryMeta[] => {
+    return [
+        ...category.entries,
+        ...(category.subcategories ?? []).flatMap(
+            (subcategory) => subcategory.entries
+        ),
+    ]
+}
+
+export const getUniqueTopicCount = () =>
+    SiteNavigationStatic.categories
+        .flatMap((category) => {
+            const subcategoryEntries =
+                category?.subcategories?.flatMap(
+                    (subcategory) => subcategory.entries || []
+                ) || []
+            return [...category.entries, ...subcategoryEntries]
+        })
+        .map((entry) => entry.slug)
+        .filter((value, index, array) => array.indexOf(value) === index).length
+
+export const getSubnavItem = (
+    id: string | undefined,
+    subnavItems: SubnavItem[]
+) => {
+    // We want to avoid matching elements with potentially undefined id.
+    // Static typing prevents id from being undefined but this might not be
+    // the case in a future API powered version.
+    return id ? subnavItems.find((item) => item.id === id) : undefined
+}
+
+export const getTopSubnavigationParentItem = (
+    subnavId: SubNavId
+): SubnavItem | undefined => {
+    return subnavs[subnavId]?.[0]
+}
diff --git a/site/lightboxUtils.tsx b/site/lightboxUtils.tsx
new file mode 100644
index 0000000000..9877746653
--- /dev/null
+++ b/site/lightboxUtils.tsx
@@ -0,0 +1,106 @@
+import ReactDOM from "react-dom"
+import { LightboxImage } from "./LightboxImage.js"
+import { Lightbox } from "./Lightbox.js"
+
+export const LIGHTBOX_IMAGE_CLASS = "lightbox-image"
+
+/**
+ * If the image is inside a <picture> element, get the URL of the largest
+ * source image that matches the current viewport size.
+ */
+function getActiveSourceImgUrl(img: HTMLImageElement): string | undefined {
+    if (img.closest("picture")) {
+        const sources = img.closest("picture")!.querySelectorAll("source")
+        const activeSource = Array.from(sources).find((s) =>
+            s.media ? window.matchMedia(s.media).matches : true
+        )
+        const sourceSrcset = activeSource?.getAttribute("srcset")
+        // split sourceSrcset into [src, width] pairs
+        const srcsetPairs = sourceSrcset
+            ?.split(",")
+            .map((pair) => pair.trim().split(" "))
+        const largestImgSrc = srcsetPairs?.at(-1)?.[0]
+        return largestImgSrc
+    }
+    return undefined
+}
+
+const getImageDimensions = (url: string) => {
+    return new Promise<{ width: number; height: number } | undefined>(
+        (resolve, reject) => {
+            const img = new Image()
+
+            img.onload = () => {
+                resolve({
+                    width: img.naturalWidth,
+                    height: img.naturalHeight,
+                })
+            }
+
+            img.onerror = reject
+            img.src = url
+        }
+    )
+}
+
+export const runLightbox = () => {
+    let lightboxContainer = document.querySelector(".lightbox")
+    if (!lightboxContainer) {
+        lightboxContainer = document.createElement("div")
+        lightboxContainer.classList.add("lightbox")
+        document.body.appendChild(lightboxContainer)
+    }
+    Array.from(
+        document.querySelectorAll<HTMLImageElement>(
+            `.article-content img, .${LIGHTBOX_IMAGE_CLASS}`
+        )
+    ).forEach((img) => {
+        if (img.closest("[data-no-lightbox]")) return
+
+        img.classList.add("lightbox-enabled")
+        img.addEventListener("click", async () => {
+            // An attribute placed by our WP image formatter: the URL of the original image without any WxH suffix
+            const highResSrc = img.getAttribute("data-high-res-src")
+            // If the image is a Gdoc Image with a smallFilename, get the source that is currently active
+            const activeSourceImgUrl = getActiveSourceImgUrl(img)
+            const imgFilename =
+                img.getAttribute("data-filename") || "owid-image"
+
+            const imgSrc = highResSrc
+                ? // getAttribute doesn't automatically URI encode values, img.src does
+                  encodeURI(highResSrc)
+                : activeSourceImgUrl
+                  ? activeSourceImgUrl
+                  : img.src
+
+            // load image in advance and get naturalHeight and naturalWidth
+            // if the image doesn't load, use the dimensions of the img element
+            const dimensions = await getImageDimensions(imgSrc)
+            const width = dimensions?.width || img.width
+            const height = dimensions?.height || img.height
+
+            const imgAlt = img.alt
+            if (imgSrc) {
+                ReactDOM.render(
+                    <Lightbox
+                        imgSrc={imgSrc}
+                        imgFilename={imgFilename}
+                        containerNode={lightboxContainer}
+                    >
+                        {(isLoaded: boolean, setIsLoaded: any) => (
+                            <LightboxImage
+                                width={width}
+                                height={height}
+                                src={imgSrc}
+                                alt={imgAlt}
+                                isLoaded={isLoaded}
+                                setIsLoaded={setIsLoaded}
+                            />
+                        )}
+                    </Lightbox>,
+                    lightboxContainer
+                )
+            }
+        })
+    })
+}
diff --git a/site/multiDim/MultiDimDataPageContent.tsx b/site/multiDim/MultiDimDataPageContent.tsx
index 54eca868f2..6edf6798f7 100644
--- a/site/multiDim/MultiDimDataPageContent.tsx
+++ b/site/multiDim/MultiDimDataPageContent.tsx
@@ -5,7 +5,6 @@ import {
     GrapherProgrammaticInterface,
     getVariableMetadataRoute,
 } from "@ourworldindata/grapher"
-import ReactDOM from "react-dom"
 import {
     DataPageDataV2,
     GrapherInterface,
@@ -18,7 +17,6 @@ import {
     OwidVariableWithSourceAndDimension,
     memoize,
     setWindowQueryStr,
-    getWindowQueryStr,
     compact,
     MultiDimDataPageConfig,
     extractMultiDimChoicesFromQueryStr,
@@ -28,7 +26,6 @@ import {
     fetchWithRetry,
 } from "@ourworldindata/utils"
 import cx from "classnames"
-import { DebugProvider } from "../gdocs/DebugContext.js"
 import { ADMIN_BASE_URL, DATA_API_URL } from "../../settings/clientSettings.js"
 import {
     FaqEntryKeyedByGdocIdAndFragmentId,
@@ -483,20 +480,3 @@ export const MultiDimDataPageContent = ({
         </div>
     )
 }
-
-export const hydrateMultiDimDataPageContent = (isPreviewing?: boolean) => {
-    const wrapper = document.querySelector(`#${OWID_DATAPAGE_CONTENT_ROOT_ID}`)
-    const props: MultiDimDataPageContentProps = window._OWID_MULTI_DIM_PROPS!
-    const initialQueryStr = getWindowQueryStr()
-
-    ReactDOM.hydrate(
-        <DebugProvider debug={isPreviewing}>
-            <MultiDimDataPageContent
-                {...props}
-                isPreviewing={isPreviewing}
-                initialQueryStr={initialQueryStr}
-            />
-        </DebugProvider>,
-        wrapper
-    )
-}
diff --git a/site/multiembedder/MultiEmbedder.tsx b/site/multiembedder/MultiEmbedder.tsx
index 9e8d92d826..45a41a0394 100644
--- a/site/multiembedder/MultiEmbedder.tsx
+++ b/site/multiembedder/MultiEmbedder.tsx
@@ -53,7 +53,7 @@ const figuresFromDOM = (
 // Determine whether this device is powerful enough to handle
 // loading a bunch of inline interactive charts
 // 680px is also used in CSS – keep it in sync if you change this
-export const shouldProgressiveEmbed = () => true
+const shouldProgressiveEmbed = () => true
 // disabling this behaviour for now until we have a better way to detect low power devices
 // https://github.com/owid/owid-grapher/issues/3661
 // !isMobile() || window.screen.width > 680 || pageContainsGlobalEntitySelector()
diff --git a/site/owid.entry.ts b/site/owid.entry.ts
index 3198c969e3..babcee3dd4 100644
--- a/site/owid.entry.ts
+++ b/site/owid.entry.ts
@@ -5,12 +5,12 @@ import "./owid.scss"
 // from a very large icon down to a properly sized one a moment later."
 import "@fortawesome/fontawesome-svg-core/styles.css"
 
-import { runSearchPage } from "./search/SearchPanel.js"
+import { runSearchPage } from "./search/runSearchPage.js"
 import { runNotFoundPage } from "./NotFoundPageMain.js"
 import { runFeedbackPage } from "./Feedback.js"
 import { runDonateForm } from "./DonateForm.js"
 import { runCountryProfilePage } from "./runCountryProfilePage.js"
-import { runTableOfContents } from "./TableOfContents.js"
+import { runTableOfContents } from "./runTableOfContents.js"
 import { Explorer } from "@ourworldindata/explorer"
 import {
     ENV,
@@ -28,10 +28,7 @@ import BugsnagPluginReact from "@bugsnag/plugin-react"
 import * as Sentry from "@sentry/react"
 import { runMonkeyPatchForGoogleTranslate } from "./hacks.js"
 import { runSiteFooterScripts } from "./runSiteFooterScripts.js"
-import {
-    PreferenceType,
-    getPreferenceValue,
-} from "./CookiePreferencesManager.js"
+import { PreferenceType, getPreferenceValue } from "./cookiePreferences.js"
 
 declare let window: any
 window.Grapher = Grapher
diff --git a/site/renderTablePress.tsx b/site/renderTablePress.tsx
new file mode 100644
index 0000000000..20b13648f0
--- /dev/null
+++ b/site/renderTablePress.tsx
@@ -0,0 +1,6 @@
+import { renderToStaticMarkup } from "react-dom/server"
+import Tablepress from "./Tablepress.js"
+
+export const renderTablePress = (table: string[][]) => {
+    return renderToStaticMarkup(<Tablepress data={table} />)
+}
diff --git a/site/runSiteFooterScripts.ts b/site/runSiteFooterScripts.ts
deleted file mode 100644
index 4251e691ba..0000000000
--- a/site/runSiteFooterScripts.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { SiteFooterContext } from "@ourworldindata/utils"
-import { BAKED_BASE_URL } from "../settings/clientSettings.js"
-import { hydrateProminentLink } from "./blocks/ProminentLink.js"
-import { runCookiePreferencesManager } from "./CookiePreferencesManager.js"
-import { hydrateDataPageV2Content } from "./DataPageV2Content.js"
-import { runFootnotes } from "./Footnote.js"
-import { hydrateOwidGdoc } from "./gdocs/OwidGdoc.js"
-import { runLightbox } from "./Lightbox.js"
-import { MultiEmbedderSingleton } from "./multiembedder/MultiEmbedder.js"
-import { runSiteNavigation } from "./SiteNavigation.js"
-import { runSiteTools } from "./SiteTools.js"
-import { runDetailsOnDemand } from "./detailsOnDemand.js"
-import { runDataTokens } from "./runDataTokens.js"
-import { runSearchCountry } from "./SearchCountry.js"
-import { hydrate as hydrateAdditionalInformation } from "./blocks/AdditionalInformation.js"
-import { hydrateCodeSnippets } from "@ourworldindata/components"
-import { hydrateDynamicCollectionPage } from "./collections/DynamicCollection.js"
-import {
-    _OWID_DATA_INSIGHTS_INDEX_PAGE_DATA,
-    hydrateDataInsightsIndexPage,
-} from "./DataInsightsIndexPageContent.js"
-import { runAllGraphersLoadedListener } from "./runAllGraphersLoadedListener.js"
-import { hydrateMultiDimDataPageContent } from "./multiDim/MultiDimDataPageContent.js"
-import { hydrateDataCatalogPage } from "./DataCatalog/DataCatalog.js"
-import { hydrateExplorerIndex } from "./ExplorerIndex.js"
-
-export const runSiteFooterScripts = (
-    args:
-        | {
-              debug?: boolean
-              isPreviewing?: boolean
-              context?: SiteFooterContext
-              container?: HTMLElement
-              hideDonationFlag?: boolean
-          }
-        | undefined
-) => {
-    // We used to destructure this in the function signature, but that caused
-    // a weird issue reported by bugsnag: https://app.bugsnag.com/our-world-in-data/our-world-in-data-website/errors/63ca39b631e8660009464eb4?event_id=63d384c500acc25fc0810000&i=sk&m=ef
-    // So now we define the object as potentially undefined and then destructure it here.
-    const { debug, context, isPreviewing, hideDonationFlag } = args || {}
-
-    switch (context) {
-        case SiteFooterContext.dataPageV2:
-            hydrateDataPageV2Content(isPreviewing)
-            runAllGraphersLoadedListener()
-            runLightbox()
-            runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
-            runSiteTools()
-            runCookiePreferencesManager()
-            void runDetailsOnDemand()
-            break
-        case SiteFooterContext.multiDimDataPage:
-            hydrateMultiDimDataPageContent(isPreviewing)
-            runAllGraphersLoadedListener()
-            runLightbox()
-            runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
-            runSiteTools()
-            runCookiePreferencesManager()
-            void runDetailsOnDemand()
-            break
-        case SiteFooterContext.grapherPage:
-        case SiteFooterContext.explorerPage:
-            runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
-            runAllGraphersLoadedListener()
-            runSiteTools()
-            runCookiePreferencesManager()
-            void runDetailsOnDemand()
-            break
-        case SiteFooterContext.explorerIndexPage:
-            hydrateExplorerIndex()
-            runSiteNavigation(BAKED_BASE_URL)
-            runCookiePreferencesManager()
-            runSiteTools()
-            break
-        case SiteFooterContext.gdocsDocument:
-            hydrateOwidGdoc(debug, isPreviewing)
-            runAllGraphersLoadedListener()
-            runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
-            runFootnotes()
-            void runDetailsOnDemand()
-            runLightbox()
-            runSiteTools()
-            runCookiePreferencesManager()
-            break
-        case SiteFooterContext.dynamicCollectionPage:
-            // Don't break, run default case too
-            hydrateDynamicCollectionPage()
-        // falls through
-        case SiteFooterContext.dataInsightsIndexPage:
-            // Don't break, run default case too
-            hydrateDataInsightsIndexPage()
-        // falls through
-        case SiteFooterContext.dataCatalogPage:
-            hydrateDataCatalogPage()
-        // falls through
-        default:
-            // Features that were not ported over to gdocs, are only being run on WP pages:
-            // - global entity selector
-            // - data tokens
-            // - country-aware prominent links
-            // - search country widget leading to topic country profiles
-            // - embedding charts through MultiEmbedderSingleton.embedAll()
-            runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
-            runDataTokens()
-            runSearchCountry()
-            hydrateAdditionalInformation()
-            hydrateCodeSnippets()
-            MultiEmbedderSingleton.setUpGlobalEntitySelectorForEmbeds()
-            MultiEmbedderSingleton.embedAll()
-            runAllGraphersLoadedListener()
-            runLightbox()
-            hydrateProminentLink(MultiEmbedderSingleton.selection)
-            runFootnotes()
-            runSiteTools()
-            runCookiePreferencesManager()
-            void runDetailsOnDemand()
-            break
-    }
-}
diff --git a/site/runSiteFooterScripts.tsx b/site/runSiteFooterScripts.tsx
new file mode 100644
index 0000000000..9070462483
--- /dev/null
+++ b/site/runSiteFooterScripts.tsx
@@ -0,0 +1,355 @@
+import { StrictMode } from "react"
+import { hydrate, render } from "react-dom"
+import {
+    DataPageV2ContentFields,
+    getOwidGdocFromJSON,
+    getWindowQueryStr,
+    isNil,
+    OwidGdocType,
+    parseIntOrUndefined,
+    SiteFooterContext,
+    TagGraphRoot,
+} from "@ourworldindata/utils"
+import { BAKED_BASE_URL } from "../settings/clientSettings.js"
+import { hydrateProminentLink } from "./blocks/ProminentLink.js"
+import {
+    DataPageV2Content,
+    OWID_DATAPAGE_CONTENT_ROOT_ID,
+} from "./DataPageV2Content.js"
+import { Footnote } from "./Footnote.js"
+import { OwidGdoc } from "./gdocs/OwidGdoc.js"
+import { runLightbox } from "./lightboxUtils.js"
+import { MultiEmbedderSingleton } from "./multiembedder/MultiEmbedder.js"
+import { SiteNavigation } from "./SiteNavigation.js"
+import SiteTools, { SITE_TOOLS_CLASS } from "./SiteTools.js"
+import { runDetailsOnDemand } from "./detailsOnDemand.js"
+import { runDataTokens } from "./runDataTokens.js"
+import SearchCountry from "./SearchCountry.js"
+import {
+    AdditionalInformation,
+    ADDITIONAL_INFORMATION_CLASS_NAME,
+} from "./blocks/AdditionalInformation.js"
+import { hydrateCodeSnippets } from "@ourworldindata/components"
+import { hydrateDynamicCollectionPage } from "./collections/DynamicCollection.js"
+import {
+    _OWID_DATA_INSIGHTS_INDEX_PAGE_DATA,
+    DataInsightsIndexPageContent,
+} from "./DataInsightsIndexPageContent.js"
+import { runAllGraphersLoadedListener } from "./runAllGraphersLoadedListener.js"
+import {
+    __OWID_EXPLORER_INDEX_PAGE_PROPS,
+    ExplorerIndex,
+} from "./ExplorerIndex.js"
+import { getInitialState } from "./cookiePreferences.js"
+import { CookiePreferencesManager } from "./CookiePreferencesManager.js"
+import { DataCatalogInstantSearchWrapper } from "./DataCatalog/DataCatalog.js"
+import { DebugProvider } from "./gdocs/DebugProvider.js"
+import { countryProfileSpecs } from "./countryProfileProjects.js"
+import { NewsletterSubscriptionForm } from "./NewsletterSubscription.js"
+import { NewsletterSubscriptionContext } from "./newsletter.js"
+import {
+    MultiDimDataPageContent,
+    MultiDimDataPageContentProps,
+} from "./multiDim/MultiDimDataPageContent.js"
+
+function hydrateDataCatalogPage() {
+    const root = document.getElementById("data-catalog-page-root")
+    const tagGraph = window._OWID_TAG_GRAPH as TagGraphRoot
+    if (root) {
+        hydrate(<DataCatalogInstantSearchWrapper tagGraph={tagGraph} />, root)
+    }
+}
+
+function hydrateDataInsightsIndexPage() {
+    const props = (window as any)[_OWID_DATA_INSIGHTS_INDEX_PAGE_DATA]
+    const container = document.querySelector(
+        `#data-insights-index-page-container`
+    )
+
+    if (container && props) {
+        hydrate(
+            <DebugProvider>
+                <DataInsightsIndexPageContent {...props} />
+            </DebugProvider>,
+            container
+        )
+    }
+}
+
+function hydrateDataPageV2Content(isPreviewing?: boolean) {
+    const wrapper = document.querySelector(`#${OWID_DATAPAGE_CONTENT_ROOT_ID}`)
+    const props: DataPageV2ContentFields = window._OWID_DATAPAGEV2_PROPS
+    const grapherConfig = window._OWID_GRAPHER_CONFIG
+
+    hydrate(
+        <DebugProvider debug={isPreviewing}>
+            <DataPageV2Content
+                {...props}
+                grapherConfig={grapherConfig}
+                isPreviewing={isPreviewing}
+            />
+        </DebugProvider>,
+        wrapper
+    )
+}
+
+function hydrateExplorerIndex() {
+    const explorerIndexPageProps = (window as any)[
+        __OWID_EXPLORER_INDEX_PAGE_PROPS
+    ]
+
+    if (!explorerIndexPageProps) return
+    hydrate(
+        <ExplorerIndex {...explorerIndexPageProps} />,
+        document.querySelector(".explorer-index-page")
+    )
+}
+
+function runCookiePreferencesManager() {
+    const div = document.createElement("div")
+    document.body.appendChild(div)
+
+    render(<CookiePreferencesManager initialState={getInitialState()} />, div)
+}
+
+interface FootnoteContent {
+    index: number
+    href: string
+    htmlContent: string
+}
+
+function getFootnoteContent(element: Element): FootnoteContent | null {
+    const href = element.closest("a.ref")?.getAttribute("href")
+    if (!href) return null
+
+    const index = parseIntOrUndefined(href.split("-")[1])
+    if (index === undefined) return null
+
+    const referencedEl = document.querySelector(href)
+    if (!referencedEl?.innerHTML) return null
+    return { index, href, htmlContent: referencedEl.innerHTML }
+}
+
+function runFootnotes() {
+    const footnotes = document.querySelectorAll("a.ref")
+
+    footnotes.forEach((f) => {
+        const footnoteContent = getFootnoteContent(f)
+        if (isNil(footnoteContent)) return
+
+        hydrate(
+            <Footnote
+                index={footnoteContent.index}
+                htmlContent={footnoteContent.htmlContent}
+                triggerTarget={f}
+            />,
+            f
+        )
+    })
+}
+
+function runSearchCountry() {
+    const searchElements = document.querySelectorAll(
+        ".wp-block-search-country-profile"
+    )
+    searchElements.forEach((element) => {
+        const project = element.getAttribute("data-project")
+        if (project) {
+            const profileSpec = countryProfileSpecs.find(
+                (spec) => spec.project === project
+            )
+            if (profileSpec) {
+                render(
+                    <SearchCountry
+                        countryProfileRootPath={profileSpec.rootPath}
+                    />,
+                    element
+                )
+            }
+        }
+    })
+}
+
+function runSiteNavigation(baseUrl: string, hideDonationFlag?: boolean) {
+    let isOnHomepage = false
+    if (window._OWID_GDOC_PROPS) {
+        const props = getOwidGdocFromJSON(window._OWID_GDOC_PROPS)
+        isOnHomepage = props?.content?.type === OwidGdocType.Homepage
+    }
+    render(
+        <SiteNavigation
+            baseUrl={baseUrl}
+            hideDonationFlag={hideDonationFlag}
+            isOnHomepage={isOnHomepage}
+        />,
+        document.querySelector(".site-navigation-root")
+    )
+}
+
+function runSiteTools() {
+    render(<SiteTools />, document.querySelector(`.${SITE_TOOLS_CLASS}`))
+
+    const newsletterSubscriptionFormRootHomepage = document.querySelector(
+        ".homepage-social-ribbon #newsletter-subscription-root"
+    )
+    if (newsletterSubscriptionFormRootHomepage) {
+        hydrate(
+            <NewsletterSubscriptionForm
+                context={NewsletterSubscriptionContext.Homepage}
+            />,
+            newsletterSubscriptionFormRootHomepage
+        )
+    }
+}
+
+const hydrateAdditionalInformation = () => {
+    document
+        .querySelectorAll<HTMLElement>(`.${ADDITIONAL_INFORMATION_CLASS_NAME}`)
+        .forEach((block) => {
+            const blockWrapper = block.parentElement
+            const titleEl = block.querySelector("h3")
+            const title = titleEl ? titleEl.textContent : null
+            const variation = block.getAttribute("data-variation") || ""
+            const defaultOpen =
+                block.getAttribute("data-default-open") === "true"
+            const figureEl = block.querySelector(".content-wrapper > figure")
+            const image = figureEl ? figureEl.innerHTML : null
+            const contentEl = block.querySelector(".content")
+            const content = contentEl ? contentEl.innerHTML : null
+            hydrate(
+                <AdditionalInformation
+                    content={content}
+                    title={title}
+                    image={image}
+                    variation={variation}
+                    defaultOpen={defaultOpen}
+                />,
+                blockWrapper
+            )
+        })
+}
+
+const hydrateOwidGdoc = (debug?: boolean, isPreviewing?: boolean) => {
+    const wrapper = document.querySelector("#owid-document-root")
+    const props = getOwidGdocFromJSON(window._OWID_GDOC_PROPS)
+    hydrate(
+        <StrictMode>
+            <DebugProvider debug={debug}>
+                <OwidGdoc {...props} isPreviewing={isPreviewing} />
+            </DebugProvider>
+        </StrictMode>,
+        wrapper
+    )
+}
+
+const hydrateMultiDimDataPageContent = (isPreviewing?: boolean) => {
+    const wrapper = document.querySelector(`#${OWID_DATAPAGE_CONTENT_ROOT_ID}`)
+    const props: MultiDimDataPageContentProps = window._OWID_MULTI_DIM_PROPS!
+    const initialQueryStr = getWindowQueryStr()
+
+    hydrate(
+        <DebugProvider debug={isPreviewing}>
+            <MultiDimDataPageContent
+                {...props}
+                isPreviewing={isPreviewing}
+                initialQueryStr={initialQueryStr}
+            />
+        </DebugProvider>,
+        wrapper
+    )
+}
+
+export const runSiteFooterScripts = (
+    args:
+        | {
+              debug?: boolean
+              isPreviewing?: boolean
+              context?: SiteFooterContext
+              container?: HTMLElement
+              hideDonationFlag?: boolean
+          }
+        | undefined
+) => {
+    // We used to destructure this in the function signature, but that caused
+    // a weird issue reported by bugsnag: https://app.bugsnag.com/our-world-in-data/our-world-in-data-website/errors/63ca39b631e8660009464eb4?event_id=63d384c500acc25fc0810000&i=sk&m=ef
+    // So now we define the object as potentially undefined and then destructure it here.
+    const { debug, context, isPreviewing, hideDonationFlag } = args || {}
+
+    switch (context) {
+        case SiteFooterContext.dataPageV2:
+            hydrateDataPageV2Content(isPreviewing)
+            runAllGraphersLoadedListener()
+            runLightbox()
+            runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
+            runSiteTools()
+            runCookiePreferencesManager()
+            void runDetailsOnDemand()
+            break
+        case SiteFooterContext.multiDimDataPage:
+            hydrateMultiDimDataPageContent(isPreviewing)
+            runAllGraphersLoadedListener()
+            runLightbox()
+            runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
+            runSiteTools()
+            runCookiePreferencesManager()
+            void runDetailsOnDemand()
+            break
+        case SiteFooterContext.grapherPage:
+        case SiteFooterContext.explorerPage:
+            runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
+            runAllGraphersLoadedListener()
+            runSiteTools()
+            runCookiePreferencesManager()
+            void runDetailsOnDemand()
+            break
+        case SiteFooterContext.explorerIndexPage:
+            hydrateExplorerIndex()
+            runSiteNavigation(BAKED_BASE_URL)
+            runCookiePreferencesManager()
+            runSiteTools()
+            break
+        case SiteFooterContext.gdocsDocument:
+            hydrateOwidGdoc(debug, isPreviewing)
+            runAllGraphersLoadedListener()
+            runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
+            runFootnotes()
+            void runDetailsOnDemand()
+            runLightbox()
+            runSiteTools()
+            runCookiePreferencesManager()
+            break
+        case SiteFooterContext.dynamicCollectionPage:
+            // Don't break, run default case too
+            hydrateDynamicCollectionPage()
+        // falls through
+        case SiteFooterContext.dataInsightsIndexPage:
+            // Don't break, run default case too
+            hydrateDataInsightsIndexPage()
+        // falls through
+        case SiteFooterContext.dataCatalogPage:
+            hydrateDataCatalogPage()
+        // falls through
+        default:
+            // Features that were not ported over to gdocs, are only being run on WP pages:
+            // - global entity selector
+            // - data tokens
+            // - country-aware prominent links
+            // - search country widget leading to topic country profiles
+            // - embedding charts through MultiEmbedderSingleton.embedAll()
+            runSiteNavigation(BAKED_BASE_URL, hideDonationFlag)
+            runDataTokens()
+            runSearchCountry()
+            hydrateAdditionalInformation()
+            hydrateCodeSnippets()
+            MultiEmbedderSingleton.setUpGlobalEntitySelectorForEmbeds()
+            MultiEmbedderSingleton.embedAll()
+            runAllGraphersLoadedListener()
+            runLightbox()
+            hydrateProminentLink(MultiEmbedderSingleton.selection)
+            runFootnotes()
+            runSiteTools()
+            runCookiePreferencesManager()
+            void runDetailsOnDemand()
+            break
+    }
+}
diff --git a/site/runTableOfContents.tsx b/site/runTableOfContents.tsx
new file mode 100644
index 0000000000..0a85b45d19
--- /dev/null
+++ b/site/runTableOfContents.tsx
@@ -0,0 +1,17 @@
+import { hydrate } from "react-dom"
+import { wrapInDiv } from "@ourworldindata/utils"
+import {
+    TableOfContents,
+    TableOfContentsData,
+    TOC_WRAPPER_CLASSNAME,
+} from "./TableOfContents.js"
+
+export const runTableOfContents = (tocData: TableOfContentsData) => {
+    const tocWrapperEl = document.querySelector<HTMLElement>(
+        `.${TOC_WRAPPER_CLASSNAME}`
+    )
+    if (!tocWrapperEl) return
+
+    const sidebarRootEl = wrapInDiv(tocWrapperEl, ["sidebar-root"])
+    hydrate(<TableOfContents {...tocData} />, sidebarRootEl)
+}
diff --git a/site/search/SearchPanel.tsx b/site/search/SearchPanel.tsx
index 9c89359153..bf18e0a502 100644
--- a/site/search/SearchPanel.tsx
+++ b/site/search/SearchPanel.tsx
@@ -1,4 +1,3 @@
-import ReactDOM from "react-dom"
 import { useCallback, useEffect, useMemo } from "react"
 import * as React from "react"
 import cx from "classnames"
@@ -51,10 +50,7 @@ import {
     getIndexName,
     logSiteSearchClickToAlgoliaInsights,
 } from "./searchClient.js"
-import {
-    PreferenceType,
-    getPreferenceValue,
-} from "../CookiePreferencesManager.js"
+import { PreferenceType, getPreferenceValue } from "../cookiePreferences.js"
 import type { SearchResults as AlgoliaSearchResultsType } from "algoliasearch-helper"
 import { SiteAnalytics } from "../SiteAnalytics.js"
 import {
@@ -65,6 +61,8 @@ import { ChartHit } from "./ChartHit.js"
 
 const siteAnalytics = new SiteAnalytics()
 
+// The rule doesn't support class components in the same file.
+// eslint-disable-next-line react-refresh/only-export-components
 function PagesHit({ hit }: { hit: IPageHit }) {
     return (
         <a
@@ -122,6 +120,8 @@ interface GroupedExplorerViews {
 const getNumberOfExplorerHits = (rawHits: IExplorerViewHit[]) =>
     uniqBy(rawHits, "explorerSlug").length
 
+// The rule doesn't support class components in the same file.
+// eslint-disable-next-line react-refresh/only-export-components
 function ExplorerViewHits({
     countriesRegionsToSelect,
 }: {
@@ -172,6 +172,8 @@ function ExplorerViewHits({
     )
 }
 
+// The rule doesn't support class components in the same file.
+// eslint-disable-next-line react-refresh/only-export-components
 function ExplorerHit({
     groupedHit,
     cardPosition,
@@ -286,6 +288,8 @@ function ExplorerHit({
     )
 }
 
+// The rule doesn't support class components in the same file.
+// eslint-disable-next-line react-refresh/only-export-components
 function ShowMore({
     category,
     cutoffNumber,
@@ -334,6 +338,8 @@ function ShowMore({
     )
 }
 
+// The rule doesn't support class components in the same file.
+// eslint-disable-next-line react-refresh/only-export-components
 function Filters({
     isHidden,
     categoryFilterContainerRef,
@@ -401,6 +407,8 @@ function Filters({
     )
 }
 
+// The rule doesn't support class components in the same file.
+// eslint-disable-next-line react-refresh/only-export-components
 function NoResultsBoundary({ children }: { children: React.ReactElement }) {
     const { results } = useInstantSearch()
 
@@ -429,6 +437,8 @@ const PAGES_ATTRIBUTES_TO_SEARCH_NO_FULLTEXT: (keyof PageRecord)[] = [
     "authors",
 ] // Should be a subset of the `searchableAttributes` set up in `configureAlgolia` for the `pages` index; minus the "content" attribute
 
+// The rule doesn't support class components in the same file.
+// eslint-disable-next-line react-refresh/only-export-components
 const SearchResults = (props: SearchResultsProps) => {
     const { scopedResults } = useInstantSearch()
     const { activeCategoryFilter, isHidden, handleCategoryFilterClick } = props
@@ -800,7 +810,3 @@ export class InstantSearchContainer extends React.Component {
         )
     }
 }
-
-export function runSearchPage() {
-    ReactDOM.render(<InstantSearchContainer />, document.querySelector("main"))
-}
diff --git a/site/search/runSearchPage.tsx b/site/search/runSearchPage.tsx
new file mode 100644
index 0000000000..d5ed790b7e
--- /dev/null
+++ b/site/search/runSearchPage.tsx
@@ -0,0 +1,6 @@
+import { render } from "react-dom"
+import { InstantSearchContainer } from "./SearchPanel.js"
+
+export function runSearchPage() {
+    render(<InstantSearchContainer />, document.querySelector("main"))
+}
diff --git a/site/search/searchClient.ts b/site/search/searchClient.ts
index f8a7fc5302..195c19846e 100644
--- a/site/search/searchClient.ts
+++ b/site/search/searchClient.ts
@@ -5,10 +5,7 @@ import {
 } from "../../settings/clientSettings.js"
 import insightsClient, { InsightsClient } from "search-insights"
 import type { InsightsSearchClickEvent } from "search-insights/dist/click.js"
-import {
-    getPreferenceValue,
-    PreferenceType,
-} from "../CookiePreferencesManager.js"
+import { getPreferenceValue, PreferenceType } from "../cookiePreferences.js"
 import { SearchIndexName } from "./searchTypes.js"
 
 let insightsInitialized = false
diff --git a/yarn.lock b/yarn.lock
index f18f1e0978..33dc4dcbba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10096,6 +10096,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-react-refresh@npm:^0.4.16":
+  version: 0.4.16
+  resolution: "eslint-plugin-react-refresh@npm:0.4.16"
+  peerDependencies:
+    eslint: ">=8.40"
+  checksum: 10/72f022097978a4efe161cd07fd30b65f441e102c3139dd58cb132ecbc756c7d8b2739b78408556bcfb2d38c0f703eeac7eaef756818d887230e2cb93925af5a5
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-react@npm:^7.37.2":
   version: 7.37.2
   resolution: "eslint-plugin-react@npm:7.37.2"
@@ -11576,6 +11585,7 @@ __metadata:
     eslint-plugin-import: "npm:^2.31.0"
     eslint-plugin-react: "npm:^7.37.2"
     eslint-plugin-react-hooks: "npm:^5.1.0"
+    eslint-plugin-react-refresh: "npm:^0.4.16"
     expr-eval: "npm:^2.0.2"
     express: "npm:^4.21.2"
     express-async-errors: "npm:^3.1.1"

From 5917ff0453de5bfd3b234944365d4490304260c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <martin.racak@ourworldindata.org>
Date: Fri, 3 Jan 2025 16:33:41 +0100
Subject: [PATCH 22/29] Rename adminSiteServer files from .tsx to .ts

Several files had the .tsx extension despite not containing any JSX.
---
 .vscode/launch.json                                           | 4 ++--
 adminSiteServer/{app.test.tsx => app.test.ts}                 | 0
 adminSiteServer/{app.tsx => app.ts}                           | 0
 adminSiteServer/{authentication.tsx => authentication.ts}     | 0
 ...functionalRouterHelpers.tsx => functionalRouterHelpers.ts} | 0
 adminSiteServer/{mockSiteRouter.tsx => mockSiteRouter.ts}     | 0
 .../{plainRouterHelpers.tsx => plainRouterHelpers.ts}         | 0
 package.json                                                  | 2 +-
 8 files changed, 3 insertions(+), 3 deletions(-)
 rename adminSiteServer/{app.test.tsx => app.test.ts} (100%)
 rename adminSiteServer/{app.tsx => app.ts} (100%)
 rename adminSiteServer/{authentication.tsx => authentication.ts} (100%)
 rename adminSiteServer/{functionalRouterHelpers.tsx => functionalRouterHelpers.ts} (100%)
 rename adminSiteServer/{mockSiteRouter.tsx => mockSiteRouter.ts} (100%)
 rename adminSiteServer/{plainRouterHelpers.tsx => plainRouterHelpers.ts} (100%)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 48b3df0074..b55be64837 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -94,7 +94,7 @@
         },
         {
             "name": "Launch admin server",
-            "program": "${workspaceFolder}/adminSiteServer/app.tsx",
+            "program": "${workspaceFolder}/adminSiteServer/app.ts",
             "request": "launch",
             "type": "node",
             "runtimeExecutable": "yarn",
@@ -113,7 +113,7 @@
         },
         {
             "name": "Launch admin server (via fnm)",
-            "program": "${workspaceFolder}/adminSiteServer/app.tsx",
+            "program": "${workspaceFolder}/adminSiteServer/app.ts",
             "request": "launch",
             "type": "node",
             "runtimeExecutable": "fnm",
diff --git a/adminSiteServer/app.test.tsx b/adminSiteServer/app.test.ts
similarity index 100%
rename from adminSiteServer/app.test.tsx
rename to adminSiteServer/app.test.ts
diff --git a/adminSiteServer/app.tsx b/adminSiteServer/app.ts
similarity index 100%
rename from adminSiteServer/app.tsx
rename to adminSiteServer/app.ts
diff --git a/adminSiteServer/authentication.tsx b/adminSiteServer/authentication.ts
similarity index 100%
rename from adminSiteServer/authentication.tsx
rename to adminSiteServer/authentication.ts
diff --git a/adminSiteServer/functionalRouterHelpers.tsx b/adminSiteServer/functionalRouterHelpers.ts
similarity index 100%
rename from adminSiteServer/functionalRouterHelpers.tsx
rename to adminSiteServer/functionalRouterHelpers.ts
diff --git a/adminSiteServer/mockSiteRouter.tsx b/adminSiteServer/mockSiteRouter.ts
similarity index 100%
rename from adminSiteServer/mockSiteRouter.tsx
rename to adminSiteServer/mockSiteRouter.ts
diff --git a/adminSiteServer/plainRouterHelpers.tsx b/adminSiteServer/plainRouterHelpers.ts
similarity index 100%
rename from adminSiteServer/plainRouterHelpers.tsx
rename to adminSiteServer/plainRouterHelpers.ts
diff --git a/package.json b/package.json
index 0424314c72..bb5b5f03cd 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "refreshPageviews": "tsx --tsconfig tsconfig.tsx.json db/refreshPageviewsFromDatasette.ts",
         "revertLastDbMigration": "tsx --tsconfig tsconfig.tsx.json node_modules/typeorm/cli.js migration:revert -d db/dataSource.ts",
         "startAdminServer": "node --enable-source-maps ./itsJustJavascript/adminSiteServer/app.js",
-        "startAdminDevServer": "tsx watch --ignore '**.mjs' --tsconfig tsconfig.tsx.json adminSiteServer/app.tsx",
+        "startAdminDevServer": "tsx watch --ignore '**.mjs' --tsconfig tsconfig.tsx.json adminSiteServer/app.ts",
         "startLocalCloudflareFunctions": "wrangler pages dev",
         "startDeployQueueServer": "node --enable-source-maps ./itsJustJavascript/baker/startDeployQueueServer.js",
         "startLernaWatcher": "lerna watch --scope '@ourworldindata/*' -- lerna run build --scope=\\$LERNA_PACKAGE_NAME --include-dependents",

From 62ccc94219e50e6b38f15daea1ab2c0bb69a11ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <rakyi@users.noreply.github.com>
Date: Tue, 7 Jan 2025 09:53:16 +0100
Subject: [PATCH 23/29] Fix missing link to grapher in image caption (#4381)

---
 db/model/Gdoc/GdocBase.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/db/model/Gdoc/GdocBase.ts b/db/model/Gdoc/GdocBase.ts
index 69fe5c4961..754471c247 100644
--- a/db/model/Gdoc/GdocBase.ts
+++ b/db/model/Gdoc/GdocBase.ts
@@ -312,6 +312,17 @@ export class GdocBase implements OwidGdocBaseInterface {
         block: OwidEnrichedGdocBlock
     ): DbInsertPostGdocLink[] | void {
         const links: DbInsertPostGdocLink[] = match(block)
+            .with({ type: "image" }, (block) => {
+                const links: DbInsertPostGdocLink[] = []
+                if (!block.caption) return links
+                for (const span of block.caption) {
+                    traverseEnrichedSpan(span, (span) => {
+                        const link = this.extractLinkFromSpan(span)
+                        if (link) links.push(link)
+                    })
+                }
+                return links
+            })
             .with({ type: "person" }, (block) => {
                 if (!block.url) return []
                 return [
@@ -563,7 +574,6 @@ export class GdocBase implements OwidGdocBaseInterface {
                         "heading",
                         "horizontal-rule",
                         "html",
-                        "image",
                         "key-indicator-collection",
                         "list",
                         "missing-data",

From b2adf1828b43d0e32b06f080326e567d5b4a9e19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <rakyi@users.noreply.github.com>
Date: Tue, 7 Jan 2025 10:07:16 +0100
Subject: [PATCH 24/29] Revert temporary giving season changes (#4385)

- Show Subscribe instead of Donate button again
- Remove call to action top banner
---
 site/SiteNavigation.tsx |  2 +-
 site/SiteTools.tsx      | 16 +++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/site/SiteNavigation.tsx b/site/SiteNavigation.tsx
index c5e289952f..92d79514b7 100644
--- a/site/SiteNavigation.tsx
+++ b/site/SiteNavigation.tsx
@@ -22,7 +22,7 @@ import { Menu, SiteNavigationStatic } from "./SiteConstants.js"
 
 // Note: tranforming the flag from an env string to a boolean in
 // clientSettings.ts is convoluted due to the two-pass SSR/Vite build process.
-const HAS_DONATION_FLAG = true
+const HAS_DONATION_FLAG = false
 
 export const SiteNavigation = ({
     baseUrl,
diff --git a/site/SiteTools.tsx b/site/SiteTools.tsx
index 8b36327cf2..a5e9798f73 100644
--- a/site/SiteTools.tsx
+++ b/site/SiteTools.tsx
@@ -1,15 +1,17 @@
 import cx from "classnames"
 import { FeedbackPrompt } from "./Feedback.js"
 import { ScrollDirection, useScrollDirection } from "./hooks.js"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import { faHeart } from "@fortawesome/free-solid-svg-icons"
+// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
+// import { faHeart } from "@fortawesome/free-solid-svg-icons"
 // import { faHandshake } from "@fortawesome/free-solid-svg-icons"
+import { NewsletterSubscriptionContext } from "./newsletter.js"
+import { NewsletterSubscription } from "./NewsletterSubscription.js"
 
 export const SITE_TOOLS_CLASS = "site-tools"
 
 export default function SiteTools() {
     const scrollDirection = useScrollDirection()
-    const isDonatePage = window.location.pathname === "/donate"
+    // const isDonatePage = window.location.pathname === "/donate"
 
     return (
         <div
@@ -17,7 +19,7 @@ export default function SiteTools() {
                 hide: scrollDirection === ScrollDirection.Down,
             })}
         >
-            {!isDonatePage && (
+            {/* {!isDonatePage && (
                 <a
                     className="prompt prompt-donate"
                     data-track-note="page_open_donate"
@@ -26,10 +28,10 @@ export default function SiteTools() {
                     <FontAwesomeIcon icon={faHeart} />
                     Donate
                 </a>
-            )}
-            {/* <NewsletterSubscription
+            )} */}
+            <NewsletterSubscription
                 context={NewsletterSubscriptionContext.Floating}
-            /> */}
+            />
             <FeedbackPrompt />
             {/* <a className="prompt" data-track-note="page_open_jobs" href="/jobs">
                 <FontAwesomeIcon icon={faHandshake} /> Jobs

From 3194a92e1627ce4e657eb2c3776750d31e67b1a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <rakyi@users.noreply.github.com>
Date: Tue, 7 Jan 2025 10:11:37 +0100
Subject: [PATCH 25/29] Remove Tablepress (#4386)

It should not be used anywhere.
---
 site/Tablepress.tsx       | 88 ---------------------------------------
 site/css/content.scss     | 21 ----------
 site/renderTablePress.tsx |  6 ---
 3 files changed, 115 deletions(-)
 delete mode 100644 site/Tablepress.tsx
 delete mode 100644 site/renderTablePress.tsx

diff --git a/site/Tablepress.tsx b/site/Tablepress.tsx
deleted file mode 100644
index 9fa71544f0..0000000000
--- a/site/Tablepress.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-interface Cell {
-    data: string
-    colspan: number
-    rowspan: number
-}
-
-function cell(data?: string) {
-    return {
-        data: data || "",
-        colspan: 1,
-        rowspan: 1,
-    }
-}
-
-const ROWSPAN_TOKEN = "#rowspan#"
-const COLSPAN_TOKEN = "#colspan#"
-
-function parseTable(table: string[][]): Cell[][] {
-    const resultTable: Cell[][] = []
-    table.forEach((row, r) => {
-        const resultRow: Cell[] = []
-        row.forEach((data, c) => {
-            if (data === ROWSPAN_TOKEN) {
-                let i = r - 1
-                while (i >= 0 && table[i][c] === ROWSPAN_TOKEN) {
-                    i--
-                }
-                if (i >= 0) {
-                    resultTable[i][c].rowspan++
-                } else {
-                    resultRow.push(cell())
-                }
-            } else if (data === COLSPAN_TOKEN) {
-                let j = c - 1
-                while (j >= 0 && row[j] === COLSPAN_TOKEN) {
-                    j--
-                }
-                if (j >= 0) {
-                    resultRow[j].colspan++
-                } else {
-                    resultRow.push(cell())
-                }
-            } else {
-                resultRow.push(cell(data))
-            }
-        })
-        resultTable.push(resultRow)
-    })
-    return resultTable
-}
-
-export default function Tablepress(props: { data: string[][] }) {
-    const { data } = props
-    const table = parseTable(data)
-    const [headerRow, ...body] = table
-    return (
-        <table>
-            <thead>
-                <tr>
-                    {headerRow.map((cell, i) => (
-                        <th
-                            key={i}
-                            scope="col"
-                            colSpan={cell.colspan}
-                            dangerouslySetInnerHTML={{ __html: cell.data }}
-                        />
-                    ))}
-                </tr>
-            </thead>
-            <tbody>
-                {body.map((row, i) => (
-                    <tr key={i}>
-                        {row.map((cell, j) => (
-                            <td
-                                key={j}
-                                colSpan={cell.colspan}
-                                rowSpan={cell.rowspan}
-                                dangerouslySetInnerHTML={{
-                                    __html: cell.data,
-                                }}
-                            />
-                        ))}
-                    </tr>
-                ))}
-            </tbody>
-        </table>
-    )
-}
diff --git a/site/css/content.scss b/site/css/content.scss
index 398ab7bb90..56c34653c0 100644
--- a/site/css/content.scss
+++ b/site/css/content.scss
@@ -124,27 +124,6 @@ figure[data-explorer-src] {
     }
 }
 
-.tablepress {
-    margin: 1em 0;
-    color: #000;
-}
-
-.tablepress th {
-    border-bottom: 1px solid #333;
-    background: $blue-20;
-}
-
-.tablepress th,
-.tablepress td {
-    padding: 0.4rem;
-    border: 1px solid #ddd;
-    text-align: center;
-}
-
-.tablepress tr {
-    background-color: $white;
-}
-
 /* Fix for title on really small screens */
 @media (max-width: 400px) {
     .logo {
diff --git a/site/renderTablePress.tsx b/site/renderTablePress.tsx
deleted file mode 100644
index 20b13648f0..0000000000
--- a/site/renderTablePress.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { renderToStaticMarkup } from "react-dom/server"
-import Tablepress from "./Tablepress.js"
-
-export const renderTablePress = (table: string[][]) => {
-    return renderToStaticMarkup(<Tablepress data={table} />)
-}

From 5d4c780bedea2403b6741df82cabd7cefca02dc6 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 7 Jan 2025 11:01:23 +0100
Subject: [PATCH 26/29] style: remove unused eslint annotation

---
 db/migration/1736209759039-RemoveHousekeepingSuggestedReviews.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/db/migration/1736209759039-RemoveHousekeepingSuggestedReviews.ts b/db/migration/1736209759039-RemoveHousekeepingSuggestedReviews.ts
index ad69c8ca05..609c108700 100644
--- a/db/migration/1736209759039-RemoveHousekeepingSuggestedReviews.ts
+++ b/db/migration/1736209759039-RemoveHousekeepingSuggestedReviews.ts
@@ -9,7 +9,6 @@ export class RemoveHousekeepingSuggestedReviews1736209759039
         )
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     public async down(_queryRunner: QueryRunner): Promise<void> {
         return
     }

From 1f249974de27f6859290fbde9e8460668323de38 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 7 Jan 2025 11:06:35 +0100
Subject: [PATCH 27/29] chore(deps): dedupe dependencies (#4391)

---
 yarn.lock | 619 ++++--------------------------------------------------
 1 file changed, 39 insertions(+), 580 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 33dc4dcbba..ccf6506384 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2177,14 +2177,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/regexpp@npm:^4.10.0":
-  version: 4.11.1
-  resolution: "@eslint-community/regexpp@npm:4.11.1"
-  checksum: 10/934b6d3588c7f16b18d41efec4fdb89616c440b7e3256b8cb92cfd31ae12908600f2b986d6c1e61a84cbc10256b1dd3448cd1eec79904bd67ac365d0f1aba2e2
-  languageName: node
-  linkType: hard
-
-"@eslint-community/regexpp@npm:^4.12.1":
+"@eslint-community/regexpp@npm:^4.10.0, @eslint-community/regexpp@npm:^4.12.1":
   version: 4.12.1
   resolution: "@eslint-community/regexpp@npm:4.12.1"
   checksum: 10/c08f1dd7dd18fbb60bdd0d85820656d1374dd898af9be7f82cb00451313402a22d5e30569c150315b4385907cdbca78c22389b2a72ab78883b3173be317620cc
@@ -5397,20 +5390,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:*, @types/estree@npm:1.0.5":
-  version: 1.0.5
-  resolution: "@types/estree@npm:1.0.5"
-  checksum: 10/7de6d928dd4010b0e20c6919e1a6c27b61f8d4567befa89252055fad503d587ecb9a1e3eab1b1901f923964d7019796db810b7fd6430acb26c32866d126fd408
-  languageName: node
-  linkType: hard
-
-"@types/estree@npm:^1.0.6":
+"@types/estree@npm:*, @types/estree@npm:^1.0.6":
   version: 1.0.6
   resolution: "@types/estree@npm:1.0.6"
   checksum: 10/9d35d475095199c23e05b431bcdd1f6fec7380612aed068b14b2a08aa70494de8a9026765a5a91b1073f636fb0368f6d8973f518a31391d519e20c59388ed88d
   languageName: node
   linkType: hard
 
+"@types/estree@npm:1.0.5":
+  version: 1.0.5
+  resolution: "@types/estree@npm:1.0.5"
+  checksum: 10/7de6d928dd4010b0e20c6919e1a6c27b61f8d4567befa89252055fad503d587ecb9a1e3eab1b1901f923964d7019796db810b7fd6430acb26c32866d126fd408
+  languageName: node
+  linkType: hard
+
 "@types/express-rate-limit@npm:^5.1.0":
   version: 5.1.0
   resolution: "@types/express-rate-limit@npm:5.1.0"
@@ -6334,16 +6327,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.1.0, acorn@npm:^8.8.0, acorn@npm:^8.8.1":
-  version: 8.11.3
-  resolution: "acorn@npm:8.11.3"
-  bin:
-    acorn: bin/acorn
-  checksum: 10/b688e7e3c64d9bfb17b596e1b35e4da9d50553713b3b3630cf5690f2b023a84eac90c56851e6912b483fe60e8b4ea28b254c07e92f17ef83d72d78745a8352dd
-  languageName: node
-  linkType: hard
-
-"acorn@npm:^8.14.0":
+"acorn@npm:^8.1.0, acorn@npm:^8.14.0, acorn@npm:^8.8.0, acorn@npm:^8.8.1":
   version: 8.14.0
   resolution: "acorn@npm:8.14.0"
   bin:
@@ -6650,17 +6634,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-buffer-byte-length@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "array-buffer-byte-length@npm:1.0.1"
-  dependencies:
-    call-bind: "npm:^1.0.5"
-    is-array-buffer: "npm:^3.0.4"
-  checksum: 10/53524e08f40867f6a9f35318fafe467c32e45e9c682ba67b11943e167344d2febc0f6977a17e699b05699e805c3e8f073d876f8bbf1b559ed494ad2cd0fae09e
-  languageName: node
-  linkType: hard
-
-"array-buffer-byte-length@npm:^1.0.2":
+"array-buffer-byte-length@npm:^1.0.1, array-buffer-byte-length@npm:^1.0.2":
   version: 1.0.2
   resolution: "array-buffer-byte-length@npm:1.0.2"
   dependencies:
@@ -6797,22 +6771,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arraybuffer.prototype.slice@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "arraybuffer.prototype.slice@npm:1.0.3"
-  dependencies:
-    array-buffer-byte-length: "npm:^1.0.1"
-    call-bind: "npm:^1.0.5"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.22.3"
-    es-errors: "npm:^1.2.1"
-    get-intrinsic: "npm:^1.2.3"
-    is-array-buffer: "npm:^3.0.4"
-    is-shared-array-buffer: "npm:^1.0.2"
-  checksum: 10/0221f16c1e3ec7b67da870ee0e1f12b825b5f9189835392b59a22990f715827561a4f4cd5330dc7507de272d8df821be6cd4b0cb569babf5ea4be70e365a2f3d
-  languageName: node
-  linkType: hard
-
 "arraybuffer.prototype.slice@npm:^1.0.4":
   version: 1.0.4
   resolution: "arraybuffer.prototype.slice@npm:1.0.4"
@@ -7389,20 +7347,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"call-bind@npm:^1.0.2, call-bind@npm:^1.0.5, call-bind@npm:^1.0.6, call-bind@npm:^1.0.7":
-  version: 1.0.7
-  resolution: "call-bind@npm:1.0.7"
-  dependencies:
-    es-define-property: "npm:^1.0.0"
-    es-errors: "npm:^1.3.0"
-    function-bind: "npm:^1.1.2"
-    get-intrinsic: "npm:^1.2.4"
-    set-function-length: "npm:^1.2.1"
-  checksum: 10/cd6fe658e007af80985da5185bff7b55e12ef4c2b6f41829a26ed1eef254b1f1c12e3dfd5b2b068c6ba8b86aba62390842d81752e67dcbaec4f6f76e7113b6b7
-  languageName: node
-  linkType: hard
-
-"call-bind@npm:^1.0.8":
+"call-bind@npm:^1.0.2, call-bind@npm:^1.0.7, call-bind@npm:^1.0.8":
   version: 1.0.8
   resolution: "call-bind@npm:1.0.8"
   dependencies:
@@ -8845,17 +8790,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"data-view-buffer@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "data-view-buffer@npm:1.0.1"
-  dependencies:
-    call-bind: "npm:^1.0.6"
-    es-errors: "npm:^1.3.0"
-    is-data-view: "npm:^1.0.1"
-  checksum: 10/5919a39a18ee919573336158fd162fdf8ada1bc23a139f28543fd45fac48e0ea4a3ad3bfde91de124d4106e65c4a7525f6a84c20ba0797ec890a77a96d13a82a
-  languageName: node
-  linkType: hard
-
 "data-view-buffer@npm:^1.0.2":
   version: 1.0.2
   resolution: "data-view-buffer@npm:1.0.2"
@@ -8867,17 +8801,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"data-view-byte-length@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "data-view-byte-length@npm:1.0.1"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    es-errors: "npm:^1.3.0"
-    is-data-view: "npm:^1.0.1"
-  checksum: 10/f33c65e58d8d0432ad79761f2e8a579818d724b5dc6dc4e700489b762d963ab30873c0f1c37d8f2ed12ef51c706d1195f64422856d25f067457aeec50cc40aac
-  languageName: node
-  linkType: hard
-
 "data-view-byte-length@npm:^1.0.2":
   version: 1.0.2
   resolution: "data-view-byte-length@npm:1.0.2"
@@ -8889,17 +8812,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"data-view-byte-offset@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "data-view-byte-offset@npm:1.0.0"
-  dependencies:
-    call-bind: "npm:^1.0.6"
-    es-errors: "npm:^1.3.0"
-    is-data-view: "npm:^1.0.1"
-  checksum: 10/96f34f151bf02affb7b9f98762fb7aca1dd5f4553cb57b80bce750ca609c15d33ca659568ef1d422f7e35680736cbccb893a3d4b012760c758c1446bbdc4c6db
-  languageName: node
-  linkType: hard
-
 "data-view-byte-offset@npm:^1.0.1":
   version: 1.0.1
   resolution: "data-view-byte-offset@npm:1.0.1"
@@ -9125,14 +9037,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-libc@npm:^2.0.0":
-  version: 2.0.2
-  resolution: "detect-libc@npm:2.0.2"
-  checksum: 10/6118f30c0c425b1e56b9d2609f29bec50d35a6af0b762b6ad127271478f3bbfda7319ce869230cf1a351f2b219f39332cde290858553336d652c77b970f15de8
-  languageName: node
-  linkType: hard
-
-"detect-libc@npm:^2.0.3":
+"detect-libc@npm:^2.0.0, detect-libc@npm:^2.0.3":
   version: 2.0.3
   resolution: "detect-libc@npm:2.0.3"
   checksum: 10/b4ea018d623e077bd395f168a9e81db77370dde36a5b01d067f2ad7989924a81d31cb547ff764acb2aa25d50bb7fdde0b0a93bec02212b0cb430621623246d39
@@ -9561,61 +9466,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-abstract@npm:^1.17.5, es-abstract@npm:^1.19.0, es-abstract@npm:^1.22.1, es-abstract@npm:^1.22.3, es-abstract@npm:^1.23.0, es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.3":
-  version: 1.23.3
-  resolution: "es-abstract@npm:1.23.3"
-  dependencies:
-    array-buffer-byte-length: "npm:^1.0.1"
-    arraybuffer.prototype.slice: "npm:^1.0.3"
-    available-typed-arrays: "npm:^1.0.7"
-    call-bind: "npm:^1.0.7"
-    data-view-buffer: "npm:^1.0.1"
-    data-view-byte-length: "npm:^1.0.1"
-    data-view-byte-offset: "npm:^1.0.0"
-    es-define-property: "npm:^1.0.0"
-    es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.0.0"
-    es-set-tostringtag: "npm:^2.0.3"
-    es-to-primitive: "npm:^1.2.1"
-    function.prototype.name: "npm:^1.1.6"
-    get-intrinsic: "npm:^1.2.4"
-    get-symbol-description: "npm:^1.0.2"
-    globalthis: "npm:^1.0.3"
-    gopd: "npm:^1.0.1"
-    has-property-descriptors: "npm:^1.0.2"
-    has-proto: "npm:^1.0.3"
-    has-symbols: "npm:^1.0.3"
-    hasown: "npm:^2.0.2"
-    internal-slot: "npm:^1.0.7"
-    is-array-buffer: "npm:^3.0.4"
-    is-callable: "npm:^1.2.7"
-    is-data-view: "npm:^1.0.1"
-    is-negative-zero: "npm:^2.0.3"
-    is-regex: "npm:^1.1.4"
-    is-shared-array-buffer: "npm:^1.0.3"
-    is-string: "npm:^1.0.7"
-    is-typed-array: "npm:^1.1.13"
-    is-weakref: "npm:^1.0.2"
-    object-inspect: "npm:^1.13.1"
-    object-keys: "npm:^1.1.1"
-    object.assign: "npm:^4.1.5"
-    regexp.prototype.flags: "npm:^1.5.2"
-    safe-array-concat: "npm:^1.1.2"
-    safe-regex-test: "npm:^1.0.3"
-    string.prototype.trim: "npm:^1.2.9"
-    string.prototype.trimend: "npm:^1.0.8"
-    string.prototype.trimstart: "npm:^1.0.8"
-    typed-array-buffer: "npm:^1.0.2"
-    typed-array-byte-length: "npm:^1.0.1"
-    typed-array-byte-offset: "npm:^1.0.2"
-    typed-array-length: "npm:^1.0.6"
-    unbox-primitive: "npm:^1.0.2"
-    which-typed-array: "npm:^1.1.15"
-  checksum: 10/2da795a6a1ac5fc2c452799a409acc2e3692e06dc6440440b076908617188899caa562154d77263e3053bcd9389a07baa978ab10ac3b46acc399bd0c77be04cb
-  languageName: node
-  linkType: hard
-
-"es-abstract@npm:^1.23.5, es-abstract@npm:^1.23.6":
+"es-abstract@npm:^1.17.5, es-abstract@npm:^1.19.0, es-abstract@npm:^1.22.1, es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.3, es-abstract@npm:^1.23.5, es-abstract@npm:^1.23.6":
   version: 1.23.7
   resolution: "es-abstract@npm:1.23.7"
   dependencies:
@@ -9677,23 +9528,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-define-property@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "es-define-property@npm:1.0.0"
-  dependencies:
-    get-intrinsic: "npm:^1.2.4"
-  checksum: 10/f66ece0a887b6dca71848fa71f70461357c0e4e7249696f81bad0a1f347eed7b31262af4a29f5d726dc026426f085483b6b90301855e647aa8e21936f07293c6
-  languageName: node
-  linkType: hard
-
-"es-define-property@npm:^1.0.1":
+"es-define-property@npm:^1.0.0, es-define-property@npm:^1.0.1":
   version: 1.0.1
   resolution: "es-define-property@npm:1.0.1"
   checksum: 10/f8dc9e660d90919f11084db0a893128f3592b781ce967e4fccfb8f3106cb83e400a4032c559184ec52ee1dbd4b01e7776c7cd0b3327b1961b1a4a7008920fe78
   languageName: node
   linkType: hard
 
-"es-errors@npm:^1.2.1, es-errors@npm:^1.3.0":
+"es-errors@npm:^1.3.0":
   version: 1.3.0
   resolution: "es-errors@npm:1.3.0"
   checksum: 10/96e65d640156f91b707517e8cdc454dd7d47c32833aa3e85d79f24f9eb7ea85f39b63e36216ef0114996581969b59fe609a94e30316b08f5f4df1d44134cf8d5
@@ -9753,17 +9595,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-to-primitive@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "es-to-primitive@npm:1.2.1"
-  dependencies:
-    is-callable: "npm:^1.1.4"
-    is-date-object: "npm:^1.0.1"
-    is-symbol: "npm:^1.0.2"
-  checksum: 10/74aeeefe2714cf99bb40cab7ce3012d74e1e2c1bd60d0a913b467b269edde6e176ca644b5ba03a5b865fb044a29bca05671cd445c85ca2cdc2de155d7fc8fe9b
-  languageName: node
-  linkType: hard
-
 "es-to-primitive@npm:^1.3.0":
   version: 1.3.0
   resolution: "es-to-primitive@npm:1.3.0"
@@ -10937,19 +10768,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"function.prototype.name@npm:^1.1.0, function.prototype.name@npm:^1.1.2, function.prototype.name@npm:^1.1.6":
-  version: 1.1.6
-  resolution: "function.prototype.name@npm:1.1.6"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-    functions-have-names: "npm:^1.2.3"
-  checksum: 10/4d40be44d4609942e4e90c4fff77a811fa936f4985d92d2abfcf44f673ba344e2962bf223a33101f79c1a056465f36f09b072b9c289d7660ca554a12491cd5a2
-  languageName: node
-  linkType: hard
-
-"function.prototype.name@npm:^1.1.8":
+"function.prototype.name@npm:^1.1.0, function.prototype.name@npm:^1.1.2, function.prototype.name@npm:^1.1.6, function.prototype.name@npm:^1.1.8":
   version: 1.1.8
   resolution: "function.prototype.name@npm:1.1.8"
   dependencies:
@@ -11046,20 +10865,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
-  version: 1.2.4
-  resolution: "get-intrinsic@npm:1.2.4"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    function-bind: "npm:^1.1.2"
-    has-proto: "npm:^1.0.1"
-    has-symbols: "npm:^1.0.3"
-    hasown: "npm:^2.0.0"
-  checksum: 10/85bbf4b234c3940edf8a41f4ecbd4e25ce78e5e6ad4e24ca2f77037d983b9ef943fd72f00f3ee97a49ec622a506b67db49c36246150377efcda1c9eb03e5f06d
-  languageName: node
-  linkType: hard
-
-"get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6":
+"get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6":
   version: 1.2.6
   resolution: "get-intrinsic@npm:1.2.6"
   dependencies:
@@ -11145,17 +10951,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-symbol-description@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "get-symbol-description@npm:1.0.2"
-  dependencies:
-    call-bind: "npm:^1.0.5"
-    es-errors: "npm:^1.3.0"
-    get-intrinsic: "npm:^1.2.4"
-  checksum: 10/e1cb53bc211f9dbe9691a4f97a46837a553c4e7caadd0488dc24ac694db8a390b93edd412b48dcdd0b4bbb4c595de1709effc75fc87c0839deedc6968f5bd973
-  languageName: node
-  linkType: hard
-
 "get-symbol-description@npm:^1.1.0":
   version: 1.1.0
   resolution: "get-symbol-description@npm:1.1.0"
@@ -11367,15 +11162,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globalthis@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "globalthis@npm:1.0.3"
-  dependencies:
-    define-properties: "npm:^1.1.3"
-  checksum: 10/45ae2f3b40a186600d0368f2a880ae257e8278b4c7704f0417d6024105ad7f7a393661c5c2fa1334669cd485ea44bc883a08fdd4516df2428aec40c99f52aa89
-  languageName: node
-  linkType: hard
-
 "globalthis@npm:^1.0.4":
   version: 1.0.4
   resolution: "globalthis@npm:1.0.4"
@@ -11452,16 +11238,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gopd@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "gopd@npm:1.0.1"
-  dependencies:
-    get-intrinsic: "npm:^1.1.3"
-  checksum: 10/5fbc7ad57b368ae4cd2f41214bd947b045c1a4be2f194a7be1778d71f8af9dbf4004221f3b6f23e30820eb0d052b4f819fe6ebe8221e2a3c6f0ee4ef173421ca
-  languageName: node
-  linkType: hard
-
-"gopd@npm:^1.2.0":
+"gopd@npm:^1.0.1, gopd@npm:^1.2.0":
   version: 1.2.0
   resolution: "gopd@npm:1.2.0"
   checksum: 10/94e296d69f92dc1c0768fcfeecfb3855582ab59a7c75e969d5f96ce50c3d201fd86d5a2857c22565764d5bb8a816c7b1e58f133ec318cd56274da36c5e3fb1a1
@@ -11782,13 +11559,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-proto@npm:^1.0.1, has-proto@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "has-proto@npm:1.0.3"
-  checksum: 10/0b67c2c94e3bea37db3e412e3c41f79d59259875e636ba471e94c009cdfb1fa82bf045deeffafc7dbb9c148e36cae6b467055aaa5d9fad4316e11b41e3ba551a
-  languageName: node
-  linkType: hard
-
 "has-proto@npm:^1.2.0":
   version: 1.2.0
   resolution: "has-proto@npm:1.2.0"
@@ -11798,14 +11568,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-symbols@npm:^1.0.1, has-symbols@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "has-symbols@npm:1.0.3"
-  checksum: 10/464f97a8202a7690dadd026e6d73b1ceeddd60fe6acfd06151106f050303eaa75855aaa94969df8015c11ff7c505f196114d22f7386b4a471038da5874cf5e9b
-  languageName: node
-  linkType: hard
-
-"has-symbols@npm:^1.1.0":
+"has-symbols@npm:^1.0.3, has-symbols@npm:^1.1.0":
   version: 1.1.0
   resolution: "has-symbols@npm:1.1.0"
   checksum: 10/959385c98696ebbca51e7534e0dc723ada325efa3475350951363cce216d27373e0259b63edb599f72eb94d6cde8577b4b2375f080b303947e560f85692834fa
@@ -12362,18 +12125,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"internal-slot@npm:^1.0.7":
-  version: 1.0.7
-  resolution: "internal-slot@npm:1.0.7"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    hasown: "npm:^2.0.0"
-    side-channel: "npm:^1.0.4"
-  checksum: 10/3e66720508831153ecf37d13def9f6856f9f2960989ec8a0a0476c98f887fca9eff0163127466485cb825c900c2d6fc601aa9117b7783b90ffce23a71ea5d053
-  languageName: node
-  linkType: hard
-
-"internal-slot@npm:^1.1.0":
+"internal-slot@npm:^1.0.7, internal-slot@npm:^1.1.0":
   version: 1.1.0
   resolution: "internal-slot@npm:1.1.0"
   dependencies:
@@ -12432,17 +12184,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-array-buffer@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "is-array-buffer@npm:3.0.4"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.2.1"
-  checksum: 10/34a26213d981d58b30724ef37a1e0682f4040d580fa9ff58fdfdd3cefcb2287921718c63971c1c404951e7b747c50fdc7caf6e867e951353fa71b369c04c969b
-  languageName: node
-  linkType: hard
-
-"is-array-buffer@npm:^3.0.5":
+"is-array-buffer@npm:^3.0.4, is-array-buffer@npm:^3.0.5":
   version: 3.0.5
   resolution: "is-array-buffer@npm:3.0.5"
   dependencies:
@@ -12476,13 +12218,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-bigint@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "is-bigint@npm:1.0.1"
-  checksum: 10/04aa6fde59d2b7929df865acb89c8d7f89f919cc149b8be11e3560b1aab8667e5d939cc8954097c496f7dda80fd5bb67f829ca80ab66cc68918e41e2c1b9c5d7
-  languageName: node
-  linkType: hard
-
 "is-bigint@npm:^1.1.0":
   version: 1.1.0
   resolution: "is-bigint@npm:1.1.0"
@@ -12501,17 +12236,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-boolean-object@npm:^1.0.1, is-boolean-object@npm:^1.1.0":
-  version: 1.1.2
-  resolution: "is-boolean-object@npm:1.1.2"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10/ba794223b56a49a9f185e945eeeb6b7833b8ea52a335cec087d08196cf27b538940001615d3bb976511287cefe94e5907d55f00bb49580533f9ca9b4515fcc2e
-  languageName: node
-  linkType: hard
-
-"is-boolean-object@npm:^1.2.1":
+"is-boolean-object@npm:^1.0.1, is-boolean-object@npm:^1.2.1":
   version: 1.2.1
   resolution: "is-boolean-object@npm:1.2.1"
   dependencies:
@@ -12544,7 +12269,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-callable@npm:^1.1.3, is-callable@npm:^1.1.4, is-callable@npm:^1.1.5, is-callable@npm:^1.2.7":
+"is-callable@npm:^1.1.3, is-callable@npm:^1.1.5, is-callable@npm:^1.2.7":
   version: 1.2.7
   resolution: "is-callable@npm:1.2.7"
   checksum: 10/48a9297fb92c99e9df48706241a189da362bff3003354aea4048bd5f7b2eb0d823cd16d0a383cece3d76166ba16d85d9659165ac6fcce1ac12e6c649d66dbdb9
@@ -12571,16 +12296,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-data-view@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "is-data-view@npm:1.0.1"
-  dependencies:
-    is-typed-array: "npm:^1.1.13"
-  checksum: 10/4ba4562ac2b2ec005fefe48269d6bd0152785458cd253c746154ffb8a8ab506a29d0cfb3b74af87513843776a88e4981ae25c89457bf640a33748eab1a7216b5
-  languageName: node
-  linkType: hard
-
-"is-data-view@npm:^1.0.2":
+"is-data-view@npm:^1.0.1, is-data-view@npm:^1.0.2":
   version: 1.0.2
   resolution: "is-data-view@npm:1.0.2"
   dependencies:
@@ -12591,16 +12307,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-date-object@npm:^1.0.1, is-date-object@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "is-date-object@npm:1.0.5"
-  dependencies:
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10/cc80b3a4b42238fa0d358b9a6230dae40548b349e64a477cb7c5eff9b176ba194c11f8321daaf6dd157e44073e9b7fd01f87db1f14952a88d5657acdcd3a56e2
-  languageName: node
-  linkType: hard
-
-"is-date-object@npm:^1.1.0":
+"is-date-object@npm:^1.0.5, is-date-object@npm:^1.1.0":
   version: 1.1.0
   resolution: "is-date-object@npm:1.1.0"
   dependencies:
@@ -12735,21 +12442,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-negative-zero@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "is-negative-zero@npm:2.0.3"
-  checksum: 10/8fe5cffd8d4fb2ec7b49d657e1691889778d037494c6f40f4d1a524cadd658b4b53ad7b6b73a59bcb4b143ae9a3d15829af864b2c0f9d65ac1e678c4c80f17e5
-  languageName: node
-  linkType: hard
-
-"is-number-object@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "is-number-object@npm:1.0.4"
-  checksum: 10/02939c84b28d2e4ec0ee2cb5fc8ac53ee3c4d67d801c280aa051c2392afd677fe47c84efd5d13ccd5e00f103041e58743b9fa535fe905a6f49b48315ae1ddcf8
-  languageName: node
-  linkType: hard
-
-"is-number-object@npm:^1.1.1":
+"is-number-object@npm:^1.0.4, is-number-object@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-number-object@npm:1.1.1"
   dependencies:
@@ -12831,17 +12524,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-regex@npm:^1.0.5, is-regex@npm:^1.1.4":
-  version: 1.1.4
-  resolution: "is-regex@npm:1.1.4"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10/36d9174d16d520b489a5e9001d7d8d8624103b387be300c50f860d9414556d0485d74a612fdafc6ebbd5c89213d947dcc6b6bff6b2312093f71ea03cbb19e564
-  languageName: node
-  linkType: hard
-
-"is-regex@npm:^1.2.1":
+"is-regex@npm:^1.0.5, is-regex@npm:^1.2.1":
   version: 1.2.1
   resolution: "is-regex@npm:1.2.1"
   dependencies:
@@ -12860,15 +12543,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-shared-array-buffer@npm:^1.0.2, is-shared-array-buffer@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "is-shared-array-buffer@npm:1.0.3"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-  checksum: 10/bc5402900dc62b96ebb2548bf5b0a0bcfacc2db122236fe3ab3b3e3c884293a0d5eb777e73f059bcbf8dc8563bb65eae972fee0fb97e38a9ae27c8678f62bcfe
-  languageName: node
-  linkType: hard
-
 "is-shared-array-buffer@npm:^1.0.4":
   version: 1.0.4
   resolution: "is-shared-array-buffer@npm:1.0.4"
@@ -12901,16 +12575,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-string@npm:^1.0.5, is-string@npm:^1.0.7":
-  version: 1.0.7
-  resolution: "is-string@npm:1.0.7"
-  dependencies:
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 10/2bc292fe927493fb6dfc3338c099c3efdc41f635727c6ebccf704aeb2a27bca7acb9ce6fd34d103db78692b10b22111a8891de26e12bfa1c5e11e263c99d1fef
-  languageName: node
-  linkType: hard
-
-"is-string@npm:^1.1.1":
+"is-string@npm:^1.0.5, is-string@npm:^1.0.7, is-string@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-string@npm:1.1.1"
   dependencies:
@@ -12927,15 +12592,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-symbol@npm:^1.0.2, is-symbol@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "is-symbol@npm:1.0.3"
-  dependencies:
-    has-symbols: "npm:^1.0.1"
-  checksum: 10/4854604be4abb5f9d885d4bbc9f9318b7dbda9402fbe172c09861bb8910d97e70fac6dabbf1023a7ec56986f457c92abb08f1c99decce83c06c944130a0b1cd1
-  languageName: node
-  linkType: hard
-
 "is-symbol@npm:^1.0.4, is-symbol@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-symbol@npm:1.1.1"
@@ -12956,16 +12612,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-typed-array@npm:^1.1.13":
-  version: 1.1.13
-  resolution: "is-typed-array@npm:1.1.13"
-  dependencies:
-    which-typed-array: "npm:^1.1.14"
-  checksum: 10/f850ba08286358b9a11aee6d93d371a45e3c59b5953549ee1c1a9a55ba5c1dd1bd9952488ae194ad8f32a9cf5e79c8fa5f0cc4d78c00720aa0bbcf238b38062d
-  languageName: node
-  linkType: hard
-
-"is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15":
+"is-typed-array@npm:^1.1.13, is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15":
   version: 1.1.15
   resolution: "is-typed-array@npm:1.1.15"
   dependencies:
@@ -12995,16 +12642,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-weakref@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "is-weakref@npm:1.0.2"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-  checksum: 10/0023fd0e4bdf9c338438ffbe1eed7ebbbff7e7e18fb7cdc227caaf9d4bd024a2dcdf6a8c9f40c92192022eac8391243bb9e66cccebecbf6fe1d8a366108f8513
-  languageName: node
-  linkType: hard
-
-"is-weakref@npm:^1.1.0":
+"is-weakref@npm:^1.0.2, is-weakref@npm:^1.1.0":
   version: 1.1.0
   resolution: "is-weakref@npm:1.1.0"
   dependencies:
@@ -15784,14 +15422,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-inspect@npm:^1.13.1, object-inspect@npm:^1.7.0":
-  version: 1.13.1
-  resolution: "object-inspect@npm:1.13.1"
-  checksum: 10/92f4989ed83422d56431bc39656d4c780348eb15d397ce352ade6b7fec08f973b53744bd41b94af021901e61acaf78fcc19e65bf464ecc0df958586a672700f0
-  languageName: node
-  linkType: hard
-
-"object-inspect@npm:^1.13.3":
+"object-inspect@npm:^1.13.3, object-inspect@npm:^1.7.0":
   version: 1.13.3
   resolution: "object-inspect@npm:1.13.3"
   checksum: 10/14cb973d8381c69e14d7f1c8c75044eb4caf04c6dabcf40ca5c2ce42dc2073ae0bb2a9939eeca142b0c05215afaa1cd5534adb7c8879c32cba2576e045ed8368
@@ -15815,19 +15446,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.assign@npm:^4.1.0, object.assign@npm:^4.1.2, object.assign@npm:^4.1.5":
-  version: 4.1.5
-  resolution: "object.assign@npm:4.1.5"
-  dependencies:
-    call-bind: "npm:^1.0.5"
-    define-properties: "npm:^1.2.1"
-    has-symbols: "npm:^1.0.3"
-    object-keys: "npm:^1.1.1"
-  checksum: 10/dbb22da4cda82e1658349ea62b80815f587b47131b3dd7a4ab7f84190ab31d206bbd8fe7e26ae3220c55b65725ac4529825f6142154211220302aa6b1518045d
-  languageName: node
-  linkType: hard
-
-"object.assign@npm:^4.1.7":
+"object.assign@npm:^4.1.0, object.assign@npm:^4.1.2, object.assign@npm:^4.1.7":
   version: 4.1.7
   resolution: "object.assign@npm:4.1.7"
   dependencies:
@@ -18133,19 +17752,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexp.prototype.flags@npm:^1.5.2":
-  version: 1.5.2
-  resolution: "regexp.prototype.flags@npm:1.5.2"
-  dependencies:
-    call-bind: "npm:^1.0.6"
-    define-properties: "npm:^1.2.1"
-    es-errors: "npm:^1.3.0"
-    set-function-name: "npm:^2.0.1"
-  checksum: 10/9fffc01da9c4e12670ff95bc5204364615fcc12d86fc30642765af908675678ebb0780883c874b2dbd184505fb52fa603d80073ecf69f461ce7f56b15d10be9c
-  languageName: node
-  linkType: hard
-
-"regexp.prototype.flags@npm:^1.5.3":
+"regexp.prototype.flags@npm:^1.5.2, regexp.prototype.flags@npm:^1.5.3":
   version: 1.5.3
   resolution: "regexp.prototype.flags@npm:1.5.3"
   dependencies:
@@ -18552,18 +18159,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-array-concat@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "safe-array-concat@npm:1.1.2"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    get-intrinsic: "npm:^1.2.4"
-    has-symbols: "npm:^1.0.3"
-    isarray: "npm:^2.0.5"
-  checksum: 10/a54f8040d7cb696a1ee38d19cc71ab3cfb654b9b81bae00c6459618cfad8214ece7e6666592f9c925aafef43d0a20c5e6fbb3413a2b618e1ce9d516a2e6dcfc5
-  languageName: node
-  linkType: hard
-
 "safe-array-concat@npm:^1.1.3":
   version: 1.1.3
   resolution: "safe-array-concat@npm:1.1.3"
@@ -18598,17 +18193,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-regex-test@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "safe-regex-test@npm:1.0.3"
-  dependencies:
-    call-bind: "npm:^1.0.6"
-    es-errors: "npm:^1.3.0"
-    is-regex: "npm:^1.1.4"
-  checksum: 10/b04de61114b10274d92e25b6de7ccb5de07f11ea15637ff636de4b5190c0f5cd8823fe586dde718504cf78055437d70fd8804976894df502fcf5a210c970afb3
-  languageName: node
-  linkType: hard
-
 "safe-regex-test@npm:^1.1.0":
   version: 1.1.0
   resolution: "safe-regex-test@npm:1.1.0"
@@ -18791,7 +18375,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"set-function-length@npm:^1.2.1, set-function-length@npm:^1.2.2":
+"set-function-length@npm:^1.2.2":
   version: 1.2.2
   resolution: "set-function-length@npm:1.2.2"
   dependencies:
@@ -18805,7 +18389,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"set-function-name@npm:^2.0.1, set-function-name@npm:^2.0.2":
+"set-function-name@npm:^2.0.2":
   version: 2.0.2
   resolution: "set-function-name@npm:2.0.2"
   dependencies:
@@ -18985,19 +18569,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"side-channel@npm:^1.0.4, side-channel@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "side-channel@npm:1.0.6"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    es-errors: "npm:^1.3.0"
-    get-intrinsic: "npm:^1.2.4"
-    object-inspect: "npm:^1.13.1"
-  checksum: 10/eb10944f38cebad8ad643dd02657592fa41273ce15b8bfa928d3291aff2d30c20ff777cfe908f76ccc4551ace2d1245822fdc576657cce40e9066c638ca8fa4d
-  languageName: node
-  linkType: hard
-
-"side-channel@npm:^1.1.0":
+"side-channel@npm:^1.0.4, side-channel@npm:^1.0.6, side-channel@npm:^1.1.0":
   version: 1.1.0
   resolution: "side-channel@npm:1.1.0"
   dependencies:
@@ -19483,19 +19055,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string.prototype.trim@npm:^1.2.1, string.prototype.trim@npm:^1.2.9":
-  version: 1.2.9
-  resolution: "string.prototype.trim@npm:1.2.9"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.0"
-    es-object-atoms: "npm:^1.0.0"
-  checksum: 10/b2170903de6a2fb5a49bb8850052144e04b67329d49f1343cdc6a87cb24fb4e4b8ad00d3e273a399b8a3d8c32c89775d93a8f43cb42fbff303f25382079fb58a
-  languageName: node
-  linkType: hard
-
-"string.prototype.trim@npm:^1.2.10":
+"string.prototype.trim@npm:^1.2.1, string.prototype.trim@npm:^1.2.10":
   version: 1.2.10
   resolution: "string.prototype.trim@npm:1.2.10"
   dependencies:
@@ -19510,18 +19070,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string.prototype.trimend@npm:^1.0.8":
-  version: 1.0.8
-  resolution: "string.prototype.trimend@npm:1.0.8"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-    es-object-atoms: "npm:^1.0.0"
-  checksum: 10/c2e862ae724f95771da9ea17c27559d4eeced9208b9c20f69bbfcd1b9bc92375adf8af63a103194dba17c4cc4a5cb08842d929f415ff9d89c062d44689c8761b
-  languageName: node
-  linkType: hard
-
-"string.prototype.trimend@npm:^1.0.9":
+"string.prototype.trimend@npm:^1.0.8, string.prototype.trimend@npm:^1.0.9":
   version: 1.0.9
   resolution: "string.prototype.trimend@npm:1.0.9"
   dependencies:
@@ -20300,17 +19849,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typed-array-buffer@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "typed-array-buffer@npm:1.0.2"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    es-errors: "npm:^1.3.0"
-    is-typed-array: "npm:^1.1.13"
-  checksum: 10/02ffc185d29c6df07968272b15d5319a1610817916ec8d4cd670ded5d1efe72901541ff2202fcc622730d8a549c76e198a2f74e312eabbfb712ed907d45cbb0b
-  languageName: node
-  linkType: hard
-
 "typed-array-buffer@npm:^1.0.3":
   version: 1.0.3
   resolution: "typed-array-buffer@npm:1.0.3"
@@ -20322,19 +19860,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typed-array-byte-length@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "typed-array-byte-length@npm:1.0.1"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    for-each: "npm:^0.3.3"
-    gopd: "npm:^1.0.1"
-    has-proto: "npm:^1.0.3"
-    is-typed-array: "npm:^1.1.13"
-  checksum: 10/e4a38329736fe6a73b52a09222d4a9e8de14caaa4ff6ad8e55217f6705b017d9815b7284c85065b3b8a7704e226ccff1372a72b78c2a5b6b71b7bf662308c903
-  languageName: node
-  linkType: hard
-
 "typed-array-byte-length@npm:^1.0.3":
   version: 1.0.3
   resolution: "typed-array-byte-length@npm:1.0.3"
@@ -20348,20 +19873,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typed-array-byte-offset@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "typed-array-byte-offset@npm:1.0.2"
-  dependencies:
-    available-typed-arrays: "npm:^1.0.7"
-    call-bind: "npm:^1.0.7"
-    for-each: "npm:^0.3.3"
-    gopd: "npm:^1.0.1"
-    has-proto: "npm:^1.0.3"
-    is-typed-array: "npm:^1.1.13"
-  checksum: 10/ac26d720ebb2aacbc45e231347c359e6649f52e0cfe0e76e62005912f8030d68e4cb7b725b1754e8fdd48e433cb68df5a8620a3e420ad1457d666e8b29bf9150
-  languageName: node
-  linkType: hard
-
 "typed-array-byte-offset@npm:^1.0.4":
   version: 1.0.4
   resolution: "typed-array-byte-offset@npm:1.0.4"
@@ -20377,20 +19888,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typed-array-length@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "typed-array-length@npm:1.0.6"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    for-each: "npm:^0.3.3"
-    gopd: "npm:^1.0.1"
-    has-proto: "npm:^1.0.3"
-    is-typed-array: "npm:^1.1.13"
-    possible-typed-array-names: "npm:^1.0.0"
-  checksum: 10/05e96cf4ff836743ebfc593d86133b8c30e83172cb5d16c56814d7bacfed57ce97e87ada9c4b2156d9aaa59f75cdef01c25bd9081c7826e0b869afbefc3e8c39
-  languageName: node
-  linkType: hard
-
 "typed-array-length@npm:^1.0.7":
   version: 1.0.7
   resolution: "typed-array-length@npm:1.0.7"
@@ -20542,18 +20039,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unbox-primitive@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "unbox-primitive@npm:1.0.2"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    has-bigints: "npm:^1.0.2"
-    has-symbols: "npm:^1.0.3"
-    which-boxed-primitive: "npm:^1.0.2"
-  checksum: 10/06e1ee41c1095e37281cb71a975cb3350f7cb470a0665d2576f02cc9564f623bd90cfc0183693b8a7fdf2d242963dcc3010b509fa3ac683f540c765c0f3e7e43
-  languageName: node
-  linkType: hard
-
 "unbox-primitive@npm:^1.1.0":
   version: 1.1.0
   resolution: "unbox-primitive@npm:1.1.0"
@@ -21268,19 +20753,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-boxed-primitive@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "which-boxed-primitive@npm:1.0.2"
-  dependencies:
-    is-bigint: "npm:^1.0.1"
-    is-boolean-object: "npm:^1.1.0"
-    is-number-object: "npm:^1.0.4"
-    is-string: "npm:^1.0.5"
-    is-symbol: "npm:^1.0.3"
-  checksum: 10/9c7ca7855255f25ac47f4ce8b59c4cc33629e713fd7a165c9d77a2bb47bf3d9655a5664660c70337a3221cf96742f3589fae15a3a33639908d33e29aa2941efb
-  languageName: node
-  linkType: hard
-
 "which-boxed-primitive@npm:^1.1.0, which-boxed-primitive@npm:^1.1.1":
   version: 1.1.1
   resolution: "which-boxed-primitive@npm:1.1.1"
@@ -21327,19 +20799,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15":
-  version: 1.1.15
-  resolution: "which-typed-array@npm:1.1.15"
-  dependencies:
-    available-typed-arrays: "npm:^1.0.7"
-    call-bind: "npm:^1.0.7"
-    for-each: "npm:^0.3.3"
-    gopd: "npm:^1.0.1"
-    has-tostringtag: "npm:^1.0.2"
-  checksum: 10/c3b6a99beadc971baa53c3ee5b749f2b9bdfa3b3b9a70650dd8511a48b61d877288b498d424712e9991d16019633086bd8b5923369460d93463c5825fa36c448
-  languageName: node
-  linkType: hard
-
 "which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.18":
   version: 1.1.18
   resolution: "which-typed-array@npm:1.1.18"

From 516d18ac7136f9b0038c63e6acbce0f96ef80592 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Sun, 22 Dec 2024 20:20:39 +0100
Subject: [PATCH 28/29] chore: use latest `whatwg-url` release

... to get rid of a Node 22 deprecation warning
---
 package.json |  3 +-
 yarn.lock    | 86 +++++++++-------------------------------------------
 2 files changed, 16 insertions(+), 73 deletions(-)

diff --git a/package.json b/package.json
index bb5b5f03cd..56208e9e7e 100644
--- a/package.json
+++ b/package.json
@@ -249,7 +249,8 @@
         "wrangler": "^3.81.0"
     },
     "resolutions": {
-        "@types/node": "20.8.3"
+        "@types/node": "20.8.3",
+        "whatwg-url": "14.1.0"
     },
     "prettier": {
         "trailingComma": "es5",
diff --git a/yarn.lock b/yarn.lock
index ccf6506384..754e95b69d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14081,13 +14081,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.sortby@npm:^4.7.0":
-  version: 4.7.0
-  resolution: "lodash.sortby@npm:4.7.0"
-  checksum: 10/38df19ae28608af2c50ac342fc1f414508309d53e1d58ed9adfb2c3cd17c3af290058c0a0478028d932c5404df3d53349d19fa364ef6bed6145a6bc21320399e
-  languageName: node
-  linkType: hard
-
 "lodash@npm:^4.0.1, lodash@npm:^4.17.11, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.21":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
@@ -16464,10 +16457,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"punycode@npm:^2.1.0, punycode@npm:^2.1.1":
-  version: 2.1.1
-  resolution: "punycode@npm:2.1.1"
-  checksum: 10/939daa010c2cacebdb060c40ecb52fef0a739324a66f7fffe0f94353a1ee83e3b455e9032054c4a0c4977b0a28e27086f2171c392832b59a01bd948fd8e20914
+"punycode@npm:^2.1.0, punycode@npm:^2.1.1, punycode@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "punycode@npm:2.3.1"
+  checksum: 10/febdc4362bead22f9e2608ff0171713230b57aff9dddc1c273aa2a651fbd366f94b7d6a71d78342a7c0819906750351ca7f2edd26ea41b626d87d6a13d1bd059
   languageName: node
   linkType: hard
 
@@ -19582,28 +19575,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tr46@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "tr46@npm:1.0.1"
-  dependencies:
-    punycode: "npm:^2.1.0"
-  checksum: 10/6e80d75480cb6658f7f283c15f5f41c2d4dfa243ca99a0e1baf3de6cc823fc4c829f89782a7a11e029905781fccfea42d08d8a6674ba7948c7dbc595b6f27dd3
-  languageName: node
-  linkType: hard
-
-"tr46@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "tr46@npm:3.0.0"
+"tr46@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "tr46@npm:5.0.0"
   dependencies:
-    punycode: "npm:^2.1.1"
-  checksum: 10/b09a15886cbfaee419a3469081223489051ce9dca3374dd9500d2378adedbee84a3c73f83bfdd6bb13d53657753fc0d4e20a46bfcd3f1b9057ef528426ad7ce4
-  languageName: node
-  linkType: hard
-
-"tr46@npm:~0.0.3":
-  version: 0.0.3
-  resolution: "tr46@npm:0.0.3"
-  checksum: 10/8f1f5aa6cb232f9e1bdc86f485f916b7aa38caee8a778b378ffec0b70d9307873f253f5cbadbe2955ece2ac5c83d0dc14a77513166ccd0a0c7fe197e21396695
+    punycode: "npm:^2.3.1"
+  checksum: 10/29155adb167d048d3c95d181f7cb5ac71948b4e8f3070ec455986e1f34634acae50ae02a3c8d448121c3afe35b76951cd46ed4c128fd80264280ca9502237a3e
   languageName: node
   linkType: hard
 
@@ -20685,20 +20662,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webidl-conversions@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "webidl-conversions@npm:3.0.1"
-  checksum: 10/b65b9f8d6854572a84a5c69615152b63371395f0c5dcd6729c45789052296df54314db2bc3e977df41705eacb8bc79c247cee139a63fa695192f95816ed528ad
-  languageName: node
-  linkType: hard
-
-"webidl-conversions@npm:^4.0.2":
-  version: 4.0.2
-  resolution: "webidl-conversions@npm:4.0.2"
-  checksum: 10/594187c36f2d7898f89c0ed3b9248a095fa549ecc1befb10a97bc884b5680dc96677f58df5579334d8e0d1018e5ef075689cfa2a6c459f45a61a9deb512cb59e
-  languageName: node
-  linkType: hard
-
 "webidl-conversions@npm:^7.0.0":
   version: 7.0.0
   resolution: "webidl-conversions@npm:7.0.0"
@@ -20722,34 +20685,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whatwg-url@npm:^11.0.0":
-  version: 11.0.0
-  resolution: "whatwg-url@npm:11.0.0"
+"whatwg-url@npm:14.1.0":
+  version: 14.1.0
+  resolution: "whatwg-url@npm:14.1.0"
   dependencies:
-    tr46: "npm:^3.0.0"
+    tr46: "npm:^5.0.0"
     webidl-conversions: "npm:^7.0.0"
-  checksum: 10/dfcd51c6f4bfb54685528fb10927f3fd3d7c809b5671beef4a8cdd7b1408a7abf3343a35bc71dab83a1424f1c1e92cc2700d7930d95d231df0fac361de0c7648
-  languageName: node
-  linkType: hard
-
-"whatwg-url@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "whatwg-url@npm:5.0.0"
-  dependencies:
-    tr46: "npm:~0.0.3"
-    webidl-conversions: "npm:^3.0.0"
-  checksum: 10/f95adbc1e80820828b45cc671d97da7cd5e4ef9deb426c31bcd5ab00dc7103042291613b3ef3caec0a2335ed09e0d5ed026c940755dbb6d404e2b27f940fdf07
-  languageName: node
-  linkType: hard
-
-"whatwg-url@npm:^7.0.0":
-  version: 7.1.0
-  resolution: "whatwg-url@npm:7.1.0"
-  dependencies:
-    lodash.sortby: "npm:^4.7.0"
-    tr46: "npm:^1.0.1"
-    webidl-conversions: "npm:^4.0.2"
-  checksum: 10/769fd35838b4e50536ae08d836472e86adbedda1d5493ea34353c55468147e7868b91d2535b59e01a9e7331ab7e4cdfdf5490c279c045da23c327cf33e32f755
+  checksum: 10/3afd325de6cf3a367820ce7c3566a1f78eb1409c4f27b1867c74c76dab096d26acedf49a8b9b71db53df7d806ec2e9ae9ed96990b2f7d1abe6ecf1fe753af6eb
   languageName: node
   linkType: hard
 

From 7563bb7636ef9e5d43b04ceda0ff2ddd26ed43fb Mon Sep 17 00:00:00 2001
From: Daniel Bachler <daniel@danielbachler.de>
Date: Tue, 7 Jan 2025 14:47:12 +0100
Subject: [PATCH 29/29] Merge pull request #4359 from owid/row-key-images-table
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐝 set row key on images table
---
 adminSiteClient/ImagesIndexPage.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/adminSiteClient/ImagesIndexPage.tsx b/adminSiteClient/ImagesIndexPage.tsx
index 1de6114e21..e18b000492 100644
--- a/adminSiteClient/ImagesIndexPage.tsx
+++ b/adminSiteClient/ImagesIndexPage.tsx
@@ -657,7 +657,11 @@ export function ImageIndexPage() {
                         />
                         <PostImageButton postImage={api.postImage} />
                     </Flex>
-                    <Table columns={columns} dataSource={filteredImages} />
+                    <Table
+                        columns={columns}
+                        dataSource={filteredImages}
+                        rowKey={(x) => x.id}
+                    />
                 </main>
             </NotificationContext.Provider>
         </AdminLayout>