From 478b63ae09ede566d9e660432e390203e2962a54 Mon Sep 17 00:00:00 2001 From: Ike Saunders Date: Fri, 29 Nov 2024 13:51:03 -0500 Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8=20add=20fallback=20for=20explorer?= =?UTF-8?q?=20index=20page=20thumbnails?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../types/src/domainTypes/Various.ts | 1 + site/ExplorerIndex.tsx | 86 +++++++++++++++++++ site/ExplorerIndexPage.scss | 15 ++++ site/ExplorerIndexPage.tsx | 54 ++++-------- site/runSiteFooterScripts.ts | 4 + 5 files changed, 124 insertions(+), 36 deletions(-) create mode 100644 site/ExplorerIndex.tsx diff --git a/packages/@ourworldindata/types/src/domainTypes/Various.ts b/packages/@ourworldindata/types/src/domainTypes/Various.ts index 85e1e6cbacf..fd601e16449 100644 --- a/packages/@ourworldindata/types/src/domainTypes/Various.ts +++ b/packages/@ourworldindata/types/src/domainTypes/Various.ts @@ -34,6 +34,7 @@ export enum SiteFooterContext { multiDimDataPage = "multiDimDataPage", dynamicCollectionPage = "dynamicCollectionPage", explorerPage = "explorerPage", + explorerIndexPage = "explorerIndexPage", default = "default", dataInsightsIndexPage = "data-insights-index-page", dataCatalogPage = "data-catalog-page", diff --git a/site/ExplorerIndex.tsx b/site/ExplorerIndex.tsx new file mode 100644 index 00000000000..f71adbad07b --- /dev/null +++ b/site/ExplorerIndex.tsx @@ -0,0 +1,86 @@ +import React 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" +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import { EXPLORERS_ROUTE_FOLDER } from "@ourworldindata/explorer" + +function ExplorerIndexPageCard(props: { + baseUrl: string + explorer: MinimalExplorerInfo +}) { + const { baseUrl, explorer } = props + const [hasError, setHasError] = React.useState(false) + return ( +
  • + + {!hasError ? ( + setHasError(true)} + src={`${EXPLORER_DYNAMIC_THUMBNAIL_URL}/${explorer.slug}.png`} + /> + ) : ( +
    + + Explorer preview not available +
    + )} +

    {explorer.title}

    +

    {explorer.subtitle}

    +     +
    • + ) +} + +export interface ExplorerIndexPageProps { + baseUrl: string + explorers: MinimalExplorerInfo[] +} + +export function ExplorerIndex(props: ExplorerIndexPageProps) { + const { baseUrl, explorers } = props + return ( + <> +
    +

    + Data Explorers +

    +

    + Our data explorers gather many indicators together to + provide comprehensive overviews of their topics. +

    +
    + + + ) +} + +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( + , + document.querySelector(".explorer-index-page") + ) +} diff --git a/site/ExplorerIndexPage.scss b/site/ExplorerIndexPage.scss index 84945e1976a..426bdebec30 100644 --- a/site/ExplorerIndexPage.scss +++ b/site/ExplorerIndexPage.scss @@ -39,6 +39,7 @@ } } img { + background: $gray-5; transition: 150ms; box-shadow: 0px 0px 12px 0px rgba(49, 37, 2, 0.05); } @@ -55,4 +56,18 @@ } } } + .explorer-index-page__card-error { + width: 100%; + aspect-ratio: 850/600; + background-color: $gray-5; + color: $grey-text-color; + font-size: 1rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + svg { + margin-bottom: 16px; + } + } } diff --git a/site/ExplorerIndexPage.tsx b/site/ExplorerIndexPage.tsx index 8acfa1bbc21..2ddaf4a61cf 100644 --- a/site/ExplorerIndexPage.tsx +++ b/site/ExplorerIndexPage.tsx @@ -4,18 +4,23 @@ import { Html } from "./Html.js" import { EXPLORERS_ROUTE_FOLDER } from "@ourworldindata/explorer" import { SiteHeader } from "./SiteHeader.js" import { SiteFooter } from "./SiteFooter.js" -import { MinimalExplorerInfo } from "@ourworldindata/types" -import { EXPLORER_DYNAMIC_THUMBNAIL_URL } from "../settings/clientSettings.js" - -interface ExplorerIndexPageProps { - baseUrl: string - explorers: MinimalExplorerInfo[] -} +import { SiteFooterContext } from "@ourworldindata/types" +import { + __OWID_EXPLORER_INDEX_PAGE_PROPS, + ExplorerIndex, + ExplorerIndexPageProps, +} from "./ExplorerIndex.js" export const ExplorerIndexPage = ({ baseUrl, explorers, }: ExplorerIndexPageProps) => { + const inlineJs = `window.${__OWID_EXPLORER_INDEX_PAGE_PROPS} = ${JSON.stringify( + { + baseUrl, + explorers, + } + )}` return (
    -
    -

    - Data Explorers -

    -

    - Our data explorers gather many indicators together - to provide comprehensive overviews of their topics. -

    -
    - +
    - + +