🐝 add WIP explorer CloudFlare Pages Functions

_routes.json

@@ -1,5 +1,5 @@
 {
  "version": 1,
- "include": ["/grapher/*", "/deleted/*", "/donation/*"],
+ "include": ["/grapher/*", "/deleted/*", "/donation/*", "/explorers/*"],
  "exclude": ["/grapher/_grapherRedirects.json"]
 }

functions/_common/reusableHandlers.ts

@@ -13,14 +13,18 @@ export async function handleThumbnailRequest(
  ctx: EventContext<unknown, any, Record<string, unknown>>,
  extension: "png" | "svg"
 ) {
+ console.log("handleThumbnailRequest")
  const url = new URL(env.url)
  const shouldCache = !url.searchParams.has("nocache")
+ console.log("shouldCache", shouldCache)
 
  const cache = caches.default
+ console.log("cache", cache)
  console.log("Handling", env.url, ctx.request.headers.get("User-Agent"))
  if (shouldCache) {
  console.log("Checking cache")
  const maybeCached = await cache.match(ctx.request)
+ console.log("maybeCached", maybeCached)
  console.log("Cache check result", maybeCached ? "hit" : "miss")
  if (maybeCached) return maybeCached
  }

functions/explorers/[slug].ts

@@ -0,0 +1,71 @@
+import { Env } from "../_common/env.js"
+import { Etag, handlePageNotFound } from "../_common/grapherRenderer.js"
+import { IRequestStrict, Router, StatusError, error, cors } from "itty-router"
+
+const { preflight, corsify } = cors({
+ allowMethods: ["GET", "OPTIONS", "HEAD"],
+})
+
+const router = Router<
+ IRequestStrict,
+ [URL, Env, Etag, EventContext<unknown, any, Record<string, unknown>>]
+>({
+ before: [preflight],
+ finally: [corsify],
+})
+router
+ .get(
+ "/explorers/:slug",
+ async ({ params: { slug } }, { searchParams }, env) => {
+ console.log("handling slug")
+ return handleHtmlPageRequest(slug, searchParams, env)
+ }
+ )
+ .all("*", () => error(404, "Route not defined"))
+
+async function handleHtmlPageRequest(
+ slug: string,
+ _searchParams: URLSearchParams,
+ env: Env
+) {
+ const url = env.url
+
+ // For local testing
+ // const grapherPageResp = await fetch(
+ // `https://ourworldindata.org/grapher/${currentSlug}`,
+ // { redirect: "manual" }
+ // )
+
+ const explorerPage = await env.ASSETS.fetch(url, {
+ redirect: "manual",
+ })
+
+ // read page body html
+ const body = await explorerPage.text()
+ console.log("body", body)
+
+ if (explorerPage.status === 404) {
+ return handlePageNotFound(env, explorerPage)
+ }
+
+ return explorerPage
+}
+
+export const onRequest: PagesFunction<Env> = async (context) => {
+ context.passThroughOnException()
+ const { request, env } = context
+ const url = new URL(request.url)
+
+ return router
+ .fetch(
+ request,
+ url,
+ { ...env, url },
+ request.headers.get("if-none-match"),
+ context
+ )
+ .catch(async (e) => {
+ console.log("Handling 404 for", url.pathname)
+ return error(500, e)
+ })
+}