Merge pull request #4175 from owid/explorer-index-page

🎉 Explorers index page

adminSiteServer/mockSiteRouter.tsx

@@ -20,6 +20,7 @@ import {
     renderThankYouPage,
     makeDataInsightsAtomFeed,
     renderGdocTombstone,
+    renderExplorerIndexPage,
 } from "../baker/siteRenderers.js"
 import {
     BAKED_BASE_URL,
@@ -164,6 +165,14 @@ mockSiteRouter.get("/assets/embedCharts.js", async (req, res) => {
 
 const explorerAdminServer = new ExplorerAdminServer(GIT_CMS_DIR)
 
+getPlainRouteWithROTransaction(
+    mockSiteRouter,
+    `/${EXPLORERS_ROUTE_FOLDER}`,
+    async (_, res, trx) => {
+        return res.send(await renderExplorerIndexPage(trx))
+    }
+)
+
 getPlainRouteWithROTransaction(
     mockSiteRouter,
     `/${EXPLORERS_ROUTE_FOLDER}/:slug`,

baker/SiteBaker.tsx

@@ -31,6 +31,7 @@ import {
     renderThankYouPage,
     makeDataInsightsAtomFeed,
     renderGdocTombstone,
+    renderExplorerIndexPage,
 } from "../baker/siteRenderers.js"
 import {
     bakeGrapherUrls,
@@ -704,6 +705,10 @@ export class SiteBaker {
             `${this.bakedSiteDir}/search.html`,
             await renderSearchPage()
         )
+        await this.stageWrite(
+            `${this.bakedSiteDir}/explorers.html`,
+            await renderExplorerIndexPage(knex)
+        )
         await this.stageWrite(
             `${this.bakedSiteDir}/collection/custom.html`,
             await renderDynamicCollectionPage()

baker/siteRenderers.tsx

@@ -6,6 +6,7 @@ import { StaticCollectionPage } from "../site/collections/StaticCollectionPage.j
 import { SearchPage } from "../site/search/SearchPage.js"
 import NotFoundPage from "../site/NotFoundPage.js"
 import { DonatePage } from "../site/DonatePage.js"
+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"
@@ -64,6 +65,7 @@ import {
     KnexReadonlyTransaction,
     getHomepageId,
     getFlatTagGraph,
+    getPublishedExplorersBySlug,
 } from "../db/db.js"
 import { getPageOverrides, isPageOverridesCitable } from "./pageOverrides.js"
 import { ProminentLink } from "../site/blocks/ProminentLink.js"
@@ -677,6 +679,19 @@ export const renderReusableBlock = async (
     return cheerioEl("body").html() ?? undefined
 }
 
+export const renderExplorerIndexPage = async (
+    knex: KnexReadonlyTransaction
+): Promise<string> => {
+    const explorersBySlug = await getPublishedExplorersBySlug(knex)
+    const explorers = Object.values(explorersBySlug).sort((a, b) =>
+        a.title.localeCompare(b.title)
+    )
+
+    return renderToHtmlPage(
+        <ExplorerIndexPage baseUrl={BAKED_BASE_URL} explorers={explorers} />
+    )
+}
+
 interface ExplorerRenderOpts {
     urlMigrationSpec?: ExplorerPageUrlMigrationSpec
     isPreviewing?: boolean

baker/sitemap.ts

@@ -98,13 +98,20 @@ export const makeSitemap = async (
         `
     )
 
+    const STATIC_PAGES = ["/explorers", "/data", "/search", "/donate"]
+
     const explorers = await explorerAdminServer.getAllPublishedExplorers()
 
     let urls = countries.map((c) => ({
         loc: urljoin(BAKED_BASE_URL, "country", c.slug),
     })) as SitemapUrl[]
 
     urls = urls
+        .concat(
+            ...STATIC_PAGES.map((path) => {
+                return [{ loc: urljoin(BAKED_BASE_URL, path) }]
+            })
+        )
         .concat(
             ...countryProfileSpecs.map((spec) => {
                 return countries.map((c) => ({

site/ExplorerIndexPage.scss

@@ -0,0 +1,53 @@
+.explorer-index-page {
+    .explorer-index-page__header {
+        background-color: #f0f4fa;
+        margin-bottom: 16px;
+        padding-bottom: 24px;
+        .h1-semibold {
+            margin-top: 24px;
+            margin-bottom: 8px;
+            @include sm-up {
+                font-size: 2rem;
+            }
+        }
+        p {
+            margin: 0;
+            color: #46688f;
+        }
+    }
+    .explorer-index-page-list {
+        background-color: #fff;
+        list-style: none;
+        row-gap: var(--grid-gap);
+        .explorer-index-page__card {
+            display: block;
+            height: 100%;
+            padding: 8px;
+            display: flex;
+            flex-direction: column;
+            &:hover {
+                h2 {
+                    text-decoration: none;
+                }
+                img {
+                    box-shadow: 0px 0px 20px 0px rgba(49, 37, 2, 0.07);
+                }
+            }
+            img {
+                transition: 150ms;
+                box-shadow: 0px 0px 12px 0px rgba(49, 37, 2, 0.05);
+            }
+            h2 {
+                @include owid-link-90;
+                @include h3-bold;
+                font-weight: bold;
+                margin-top: 8px;
+                margin-bottom: 8px;
+            }
+            p {
+                color: $blue-90;
+                margin-top: 0;
+            }
+        }
+    }
+}

site/ExplorerIndexPage.tsx

@@ -0,0 +1,63 @@
+import React from "react"
+import { Head } from "./Head.js"
+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[]
+}
+
+export const ExplorerIndexPage = ({
+    baseUrl,
+    explorers,
+}: ExplorerIndexPageProps) => {
+    return (
+        <Html>
+            <Head
+                canonicalUrl={`${baseUrl}/${EXPLORERS_ROUTE_FOLDER}`}
+                pageTitle={`Data Explorers`}
+                pageDesc={"An index of all Our World in Data data explorers"}
+                baseUrl={baseUrl}
+            ></Head>
+            <body>
+                <SiteHeader baseUrl={baseUrl} />
+                <main className="explorer-index-page grid grid-cols-12-full-width">
+                    <header className="explorer-index-page__header grid grid-cols-12-full-width span-cols-14">
+                        <h1 className="h1-semibold span-cols-12 col-start-2 collection-title">
+                            Data Explorers
+                        </h1>
+                        <p className="span-cols-8 col-start-2 span-md-cols-12 col-md-start-2 body-2-regular collection-explanation">
+                            Our data explorers gather many indicators together
+                            to provide comprehensive overviews of their topics.
+                        </p>
+                    </header>
+                    <ul className="explorer-index-page-list span-cols-12 col-start-2 grid grid-cols-4 grid-md-cols-2 grid-sm-cols-1">
+                        {explorers.map((explorer) => (
+                            <li key={explorer.slug}>
+                                <a
+                                    className="explorer-index-page__card"
+                                    href={`${baseUrl}/${EXPLORERS_ROUTE_FOLDER}/${explorer.slug}`}
+                                >
+                                    <img
+                                        width="850"
+                                        height="600"
+                                        loading="lazy"
+                                        src={`${EXPLORER_DYNAMIC_THUMBNAIL_URL}/${explorer.slug}.png`}
+                                    />
+                                    <h2>{explorer.title}</h2>
+                                    <p>{explorer.subtitle}</p>
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </main>
+                <SiteFooter baseUrl={baseUrl} />
+            </body>
+        </Html>
+    )
+}

site/gdocs/components/ExplorerTiles.tsx

@@ -60,7 +60,7 @@ export function ExplorerTiles({
             </h2>
             <Button
                 className="span-cols-4 col-start-9 span-md-cols-5 col-md-start-8 col-sm-start-1 span-sm-cols-12 body-3-medium explorer-tiles__cta"
-                href="/search?q=%20"
+                href="/explorers"
                 text="See all our Data Explorers"
                 theme="outline-vermillion"
             />

site/owid.scss

@@ -40,6 +40,7 @@
 @import "css/layout.scss";
 @import "css/general.scss";
 @import "css/noscript.scss";
+@import "./site/ExplorerIndexPage.scss";
 @import "./collections/CollectionsPage.scss";
 @import "./SiteSearchNavigation.scss";
 @import "./DataCatalog/DataCatalog.scss";