Add cache implementation for images

This PR adds a caching implementation for images hosted as part of the Sanity project for built-with.

Author: kristianfreeman

app/components/project.jsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { Link } from "@remix-run/react"
+import { cacheableUrl } from "../utils"
 
 import "../styles/project.css"
 
@@ -13,7 +14,7 @@ const Project = ({ isInitialRoute, project }) => {
     >
       <div className="Project Project-fills-height">
         <div className="Project--image">
-          <img className="Project--image-img" src={project.image.asset.url} />
+          <img className="Project--image-img" src={cacheableUrl(project.image.asset.url)} />
         </div>
 
         <div className="Project--content">

app/routes/built-with.projects.$slug.jsx

@@ -5,6 +5,7 @@ import { Link, useLoaderData } from "@remix-run/react"
 import { json, redirect } from "@remix-run/cloudflare";
 import { ClientOnly } from "remix-utils/client-only"
 
+import { cacheableUrl } from "../utils"
 import { getSanityClient } from "../lib/sanity"
 import Layout from "../components/layout"
 import Markdown from "../components/markdown"
@@ -29,10 +30,10 @@ export const meta = ({ data }) => {
     { name: "description", content: shortDescription },
     { name: "og:title", content: title },
     { name: "og:description", content: shortDescription },
-    { name: "og:image", content: image.asset.url },
+    { name: "og:image", content: cacheableUrl(image.asset.url) },
     { name: "twitter:title", content: title },
     { name: "twitter:description", content: shortDescription },
-    { name: "twitter:image:src", content: image.asset.url }
+    { name: "twitter:image:src", content: cacheableUrl(image.asset.url) }
   ];
 };
 
@@ -146,11 +147,11 @@ const Project = () => {
             <Stream
               controls src={project.stream_video_id}
               letterboxColor="transparent"
-              poster={project.image.asset.url}
+              poster={cacheableUrl(project.image.asset.url)}
             />
           ) : (
             <img
-              src={project.image.asset.url}
+              src={cacheableUrl(project.image.asset.url)}
               style={{ objectFit: "cover", width: "100%" }}
             />
           )}

app/utils.jsx

@@ -148,8 +148,14 @@ const sortProjects = (collection) => {
   return projects;
 }
 
+// Take a Sanity asset image url and return a relative path that is cached by CF
+const cacheableUrl = u => {
+  return `/api/v1/image-proxy?url=${encodeURIComponent(u.toString())}`
+}
+
 export {
   PROJECTS_PER_COLLECTION,
+  cacheableUrl,
   flatten,
   normalizeCollection,
   resultTemplate,

server.js

@@ -36,6 +36,26 @@ export default {
       }
     }
 
+    if (url.pathname.startsWith("/api/v1/image-proxy")) {
+      const url = new URL(request.url)
+      const originalUrl = url.searchParams.get("url")
+      if (!originalUrl) {
+        return new Response("Missing url", { status: 400 })
+      }
+
+      let cache = caches.default
+      const cacheKey = originalUrl
+      const cachedResponse = await cache.match(cacheKey)
+      if (cachedResponse) {
+        return cachedResponse
+      }
+
+      const response = await fetch(originalUrl, request)
+      cache.put(cacheKey, response.clone())
+      return response
+    }
+
+
     // Handle with Remix
     try {
       const loadContext = {
@@ -61,4 +81,4 @@ export default {
       return new Response(error.toString(), { status: 500 });
     }
   },
-};
+};