feat: move to cloudflare for image resizing (#1697)

heyxyz · Jan 30, 2023 · c3ec05f · c3ec05f · vercel · Jan 30, 2023
1 parent 3ee0c37
commit c3ec05f
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 31 deletions.
diff --git a/apps/api/src/components/Profile.tsx b/apps/api/src/components/Profile.tsx
@@ -1,6 +1,6 @@
 import getIPFSLink from '@lib/getIPFSLink';
 import getStampFyiURL from '@lib/getStampFyiURL';
-import { OG_MEDIA_PROXY_URL } from 'data/constants';
+import { DEFAULT_OG, IMAGE_PROXY_URL } from 'data/constants';
 import type { MediaSet, NftImage } from 'lens';
 import { Profile } from 'lens';
 import type { FC } from 'react';
@@ -23,10 +23,10 @@ const Profile: FC<Props> = ({ profile }) => {
     : `@${profile?.handle} • Lenster`;
   const description = profile?.bio ?? '';
   const image = profile
-    ? `${OG_MEDIA_PROXY_URL}/tr:n-avatar,tr:di-placeholder.webp/${getIPFSLink(
+    ? `${IMAGE_PROXY_URL}/?name=avatar&image=${getIPFSLink(
         profile?.picture?.original?.url ?? profile?.picture?.uri ?? getStampFyiURL(profile?.ownedBy)
       )}`
-    : 'https://assets.lenster.xyz/images/og/logo.jpeg';
+    : DEFAULT_OG;
 
   return (
     <>

diff --git a/apps/api/src/components/Publication.tsx b/apps/api/src/components/Publication.tsx
@@ -1,6 +1,6 @@
 import getIPFSLink from '@lib/getIPFSLink';
 import getStampFyiURL from '@lib/getStampFyiURL';
-import { OG_MEDIA_PROXY_URL } from 'data/constants';
+import { DEFAULT_OG, IMAGE_PROXY_URL } from 'data/constants';
 import { Publication } from 'lens';
 import type { FC } from 'react';
 
@@ -25,10 +25,10 @@ const Publication: FC<Props> = ({ publication }) => {
   const image = hasMedia
     ? getIPFSLink(publication.metadata?.media[0].original.url)
     : profile
-    ? `${OG_MEDIA_PROXY_URL}/tr:n-avatar,tr:di-placeholder.webp/${getIPFSLink(
+    ? `${IMAGE_PROXY_URL}/?name=avatar&image=${getIPFSLink(
         profile?.picture?.original?.url ?? profile?.picture?.uri ?? getStampFyiURL(profile?.ownedBy)
       )}`
-    : 'https://assets.lenster.xyz/images/og/logo.jpeg';
+    : DEFAULT_OG;
 
   return (
     <>

diff --git a/apps/web/src/lib/getThumbnailUrl.ts b/apps/web/src/lib/getThumbnailUrl.ts
@@ -1,4 +1,4 @@
-import { MEDIA_PROXY_URL } from 'data/constants';
+import { STATIC_IMAGES_URL } from 'data/constants';
 import type { Publication } from 'lens';
 
 import getIPFSLink from './getIPFSLink';
@@ -15,7 +15,7 @@ const getThumbnailUrl = (publication: Publication | undefined): string => {
   const url =
     publication.metadata?.cover?.original.url ||
     publication.metadata?.image ||
-    `${MEDIA_PROXY_URL}/placeholder.webp`;
+    `${STATIC_IMAGES_URL}/placeholder.webp`;
 
   return getIPFSLink(url);
 };

diff --git a/apps/web/src/lib/imageProxy.ts b/apps/web/src/lib/imageProxy.ts
@@ -1,4 +1,4 @@
-import { MEDIA_PROXY_URL } from 'data/constants';
+import { IMAGE_PROXY_URL } from 'data/constants';
 
 /**
  *
@@ -7,7 +7,7 @@ import { MEDIA_PROXY_URL } from 'data/constants';
  * @returns imgproxy URL
  */
 const imageProxy = (url: string, name?: string): string => {
-  return name ? `${MEDIA_PROXY_URL}/tr:n-${name}/${url}` : `${MEDIA_PROXY_URL}/${url}`;
+  return name ? `${IMAGE_PROXY_URL}/?name=${name}&image=${url}` : `${IMAGE_PROXY_URL}/?image=${url}`;
 };
 
 export default imageProxy;
diff --git a/apps/web/src/pages/_document.tsx b/apps/web/src/pages/_document.tsx
@@ -10,8 +10,8 @@ class LensterDocument extends Document {
           <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
 
           {/* Prefetch and Preconnect */}
-          <link rel="preconnect" href="https://media.lenster.xyz" />
-          <link rel="dns-prefetch" href="https://media.lenster.xyz" />
+          <link rel="preconnect" href="https://images.lenster.xyz" />
+          <link rel="dns-prefetch" href="https://images.lenster.xyz" />
           <link rel="preconnect" href="https://assets.lenster.xyz" />
           <link rel="dns-prefetch" href="https://assets.lenster.xyz" />
 

diff --git a/packages/data/constants.ts b/packages/data/constants.ts
@@ -37,7 +37,6 @@ export const XMTP_PREFIX = 'lens.dev/dm';
 export const APP_NAME = 'Lenster';
 export const DESCRIPTION =
   'Lenster is a composable, decentralized, and permissionless social media web app built with Lens Protocol 🌿';
-export const DEFAULT_OG = 'https://assets.lenster.xyz/images/og/logo.jpeg';
 export const APP_VERSION = packageJson.version;
 
 // Git
@@ -62,12 +61,12 @@ export const STATIC_ASSETS_URL = 'https://assets.lenster.xyz';
 export const STATIC_IMAGES_URL = `${STATIC_ASSETS_URL}/images`;
 export const POLYGONSCAN_URL = IS_MAINNET ? 'https://polygonscan.com' : 'https://mumbai.polygonscan.com';
 export const RARIBLE_URL = IS_MAINNET ? 'https://rarible.com' : 'https://testnet.rarible.com';
-export const MEDIA_PROXY_URL = 'https://media.lenster.xyz';
-export const OG_MEDIA_PROXY_URL = 'https://og-media.lenster.xyz';
+export const IMAGE_PROXY_URL = 'https://images.lenster.xyz';
 export const ARWEAVE_GATEWAY = 'https://arweave.net';
 export const IPFS_GATEWAY = 'https://gateway.ipfscdn.io/ipfs/';
 export const EVER_API = 'https://endpoint.4everland.co';
 export const SIMPLEANALYTICS_API = 'https://simpleanalytics.com/lenster.xyz.json';
+export const DEFAULT_OG = `${STATIC_IMAGES_URL}/og/logo.jpeg`;
 
 // Web3
 export const ALCHEMY_KEY = 'HHfOFn8jsYguteTVvL0cz4g9aydrbjTV';

diff --git a/packages/media-worker/src/index.ts b/packages/media-worker/src/index.ts
@@ -5,23 +5,41 @@ export default {
 };
 
 async function handleRequest(request: Request) {
-  const url = new URL(request.url);
-  const path = url.pathname;
-  let response = await fetch(`https://ik.imagekit.io/lensterimg/media${path}`, {
-    // @ts-ignore
+  let url = new URL(request.url);
+  let options: any = {
     cf: {
       cacheEverything: true,
-      cacheKey: path
+      cacheKey: url.pathname,
+      image: { quality: 90, format: 'auto' }
     }
+  };
+
+  if (url.searchParams.has('name')) {
+    if (url.searchParams.get('name') === 'avatar') {
+      options.cf.image.width = 300;
+      options.cf.image.height = 300;
+    } else if (url.searchParams.get('name') === 'cover') {
+      options.cf.image.height = 1000;
+    } else if (url.searchParams.get('name') === 'attachment') {
+      options.cf.image.height = 1000;
+    }
+  }
+
+  const accept = request.headers.get('Accept') as string;
+  if (/image\/avif/.test(accept)) {
+    options.cf.image.format = 'avif';
+  } else if (/image\/webp/.test(accept)) {
+    options.cf.image.format = 'webp';
+  }
+
+  const imageURL = url.searchParams.get('image');
+  if (!imageURL) {
+    return new Response('Missing "image" value', { status: 400 });
+  }
+
+  const imageRequest = new Request(imageURL, {
+    headers: request.headers
   });
-  const shouldCache = response.headers.get('access-control-allow-origin');
-  response = new Response(response.body, { ...response, status: shouldCache ? 200 : 408 });
-  response.headers.delete('via');
-  response.headers.delete('x-cache');
-  response.headers.delete('x-amz-cf-id');
-  response.headers.delete('x-request-id');
-  response.headers.delete('x-server');
-  response.headers.set('x-server', 'Lenster.xyz');
 
-  return response;
+  return fetch(imageRequest, options);
 }
diff --git a/packages/media-worker/wrangler.toml b/packages/media-worker/wrangler.toml
@@ -2,6 +2,5 @@ name = "media-worker"
 main = "src/index.ts"
 compatibility_date = "2023-01-25"
 routes = [
-	{ pattern = "media.lenster.xyz", custom_domain = true },
-	{ pattern = "og-media.lenster.xyz", custom_domain = true }
+	{ pattern = "media.lenster.xyz", custom_domain = true }
 ]