fix(profile): og images (#1814)

* fix(profile): og images

* chore(apps): consistent og images

* fix(profile): default og image import

* feat(images): cache og image

* chore(images): log getOgImage call

* no lodash

* some lodash

* no lodash

* test: caching strategy

* status checl

* b64 bgImage

* fix(profile): images binding

* feat(profile): cacheKey

* domain caches

* wip

* wip

* wip

* linter fix

* no need to manually cache bust

* minor fix

* display name

* wip

* wip

* wip

---------

Co-authored-by: Adrian Maurer <[email protected]>

apps/passport/app/root.tsx

@@ -49,6 +49,7 @@ export const meta: MetaFunction = () => ({
   viewport: 'width=device-width,initial-scale=1',
   'og:url': 'https://passport.rollup.id',
   'og:description': 'User identity in your control.',
+  // Hardcoded to not re-upload it every time
   'og:image': social,
   'twitter:card': 'summary_large_image',
   'twitter:site': '@rollupid_xyz',

apps/passport/app/routes/authorize.tsx

@@ -3,7 +3,7 @@ import { json } from '@remix-run/cloudflare'
 import { Outlet, useLoaderData } from '@remix-run/react'
 import { getAccountClient } from '~/platform.server'
 import { parseJwt, requireJWT } from '~/session.server'
-import { AccountURN } from '@kubelt/urns/account'
+import type { AccountURN } from '@kubelt/urns/account'
 
 // TODO: loader function check if we have a session already
 // redirect if logged in

apps/passport/app/utils/authenticate.server.ts

@@ -87,6 +87,12 @@ const provisionProfile = async (jwt: string, env: Env, address: AddressURN) => {
   if (!profile) {
     console.log(`Profile doesn't exist for account ${account}. Creating one...`)
     const addressClient = getAddressClient(address, env)
+    /**
+     * Hardcoded url for default cover image
+     * to not upload it every time on each new user
+     */
+    const cover =
+      'https://imagedelivery.net/VqQy1abBMHYDZwVsTbsSMw/55eea546-b14f-434e-16b4-e759e563ea00/public'
     const newProfile = await addressClient.getAddressProfile
       .query()
       .then(async (res) => {
@@ -98,7 +104,7 @@ const provisionProfile = async (jwt: string, env: Env, address: AddressURN) => {
               pfp: {
                 image: res.profile.avatar || gradient,
               },
-              cover: gradient,
+              cover,
             }
           }
           case OAuthAddressType.GitHub: {
@@ -108,37 +114,28 @@ const provisionProfile = async (jwt: string, env: Env, address: AddressURN) => {
               pfp: {
                 image: res.profile.avatar_url || gradient,
               },
-              cover: gradient,
+              cover,
             }
           }
           case OAuthAddressType.Google: {
-            const gradient = await generateGradient(res.profile.email, env)
             return {
               displayName: res.profile.name,
               pfp: {
                 image: res.profile.picture,
               },
-              cover: gradient,
+              cover,
             }
           }
           case OAuthAddressType.Twitter: {
-            const gradient = await generateGradient(
-              res.profile.id.toString(),
-              env
-            )
             return {
               displayName: res.profile.name,
               pfp: {
                 image: res.profile.profile_image_url_https,
               },
-              cover: gradient,
+              cover,
             }
           }
           case OAuthAddressType.Microsoft: {
-            const gradient = await generateGradient(
-              res.profile.sub.toString(),
-              env
-            )
             return {
               displayName:
                 res.profile.name ||
@@ -149,25 +146,21 @@ const provisionProfile = async (jwt: string, env: Env, address: AddressURN) => {
                 //Cached profile image
                 image: res.profile.rollupidImageUrl as string,
               },
-              cover: gradient,
+              cover,
             }
           }
           case OAuthAddressType.Apple: {
-            const gradient = await generateGradient(
-              res.profile.sub.toString(),
-              env
-            )
-            const { firstName, lastName } = res.profile.name
+            const { firstName, lastName } = res.profile.name!
             return {
-              cover: gradient,
+              cover,
               displayName: `${firstName} ${lastName}`,
             }
           }
           case OAuthAddressType.Discord: {
             const gradient = await generateGradient(res.profile.id, env)
             const { id, avatar } = res.profile
             return {
-              cover: gradient,
+              cover,
               displayName: res.profile.username,
               pfp: {
                 image: avatar

apps/profile/app/helpers/index.ts

@@ -1,15 +1,13 @@
 import * as clients from './clients'
 import hexStyle from './hex-style'
 import * as strings from './strings'
-import ogImage from './ogImage'
 import { imageFromAddressType } from './icons'
 import { normalizeProfileToLinks } from './profile'
 
 export {
   clients,
   hexStyle,
   strings,
-  ogImage,
   imageFromAddressType,
   normalizeProfileToLinks,
 }

apps/profile/app/helpers/ogImage.ts

@@ -1,30 +1,9 @@
 import createImageClient from '@kubelt/platform-clients/image'
 
-// TODO: turn into platform client
-export default async (
-  fgUrl: string | null | undefined,
-  gradientSeed: string
-) => {
-  const imageClient = createImageClient(Images)
-
-  const bg = await imageClient.getGradient.mutate({ gradientSeed })
-
-  const fg = fgUrl || bg
-
-  const ogImage = await imageClient.getOgImage.query({ fgUrl: fg, bgUrl: bg })
-
-  return {
-    ogImage,
-    cover: bg,
-    pfp: fg,
-  }
-}
-
-export const ogImageFromProfile = async (pfp: string, cover: string) => {
-  const imageClient = createImageClient(Images)
+export const ogImageFromProfile = async (pfp: string) => {
+  const imageClient = createImageClient(Images, { imagesURL: IMAGES_URL })
   const ogImage = await imageClient.getOgImage.query({
     fgUrl: pfp,
-    bgUrl: cover,
   })
   return ogImage
 }

apps/profile/app/root.tsx

@@ -21,29 +21,29 @@ import {
 import { useEffect } from 'react'
 
 import designStyles from '@kubelt/design-system/src/styles/global.css'
-import styles from './styles/tailwind.css'
-import baseStyles from './styles/base.css'
+import styles from '~/styles/tailwind.css'
+import baseStyles from '~/styles/base.css'
 
-import social from './assets/social.png'
-import appleIcon from './assets/apple-touch-icon.png'
-import icon32 from './assets/favicon-32x32.png'
-import icon16 from './assets/favicon-16x16.png'
-import faviconSvg from './assets/favicon.svg'
-import maskIcon from './assets/safari-pinned-tab.svg'
-import logo from './assets/rollup-id-logo.svg'
+import appleIcon from '~/assets/apple-touch-icon.png'
+import icon32 from '~/assets/favicon-32x32.png'
+import icon16 from '~/assets/favicon-16x16.png'
+import faviconSvg from '~/assets/favicon.svg'
+import social from '~/assets/social.png'
+import maskIcon from '~/assets/safari-pinned-tab.svg'
+import logo from '~/assets/rollup-id-logo.svg'
 
 import { ErrorPage } from '@kubelt/design-system/src/pages/error/ErrorPage'
 import { Loader } from '@kubelt/design-system/src/molecules/loader/Loader'
 
 import HeadNav, { links as headNavLink } from '~/components/head-nav'
 
 import * as gtag from '~/utils/gtags.client'
-import { getProfileSession } from './utils/session.server'
+import { getProfileSession } from '~/utils/session.server'
 import { AccountURNSpace } from '@kubelt/urns/account'
-import { parseJwt } from './utils/session.server'
-import { getAccountProfile } from './helpers/profile'
+import { parseJwt } from '~/utils/session.server'
+import { getAccountProfile } from '~/helpers/profile'
 import type { AccountURN } from '@kubelt/urns/account'
-import type { FullProfile } from './types'
+import type { FullProfile } from '~/types'
 
 export const meta: MetaFunction = () => ({
   charset: 'utf-8',
@@ -54,6 +54,7 @@ export const meta: MetaFunction = () => ({
   'og:url': 'https://my.rollup.id',
   'og:description':
     'Rollup turns your blockchain accounts into multi-chain decentralized identities with improved auth, secure messaging and more.',
+  // Hardcoded to not re-upload it every time
   'og:image': social,
   'twitter:card': 'summary_large_image',
   'twitter:site': '@rollupid',

apps/profile/app/routes/$type.$address.tsx

@@ -35,7 +35,7 @@ import { Cover } from '~/components/profile/cover/Cover'
 import ProfileTabs from '~/components/profile/tabs/tabs'
 import ProfileLayout from '~/components/profile/layout'
 
-import defaultOG from '~/assets/Rollup_profiles_OG.png'
+import defaultOG from '~/assets/social.png'
 import {
   CryptoAddressType,
   NodeType,
@@ -97,10 +97,7 @@ export const loader: LoaderFunction = async ({ request, params }) => {
       //TODO: Type-based resolvers to be tackled in separate PR
     }
 
-    const ogImage = await ogImageFromProfile(
-      profile.pfp?.image as string,
-      profile.cover as string
-    )
+    const ogImage = await ogImageFromProfile(profile.pfp?.image as string)
 
     const splittedUrl = request.url.split('/')
     const path = splittedUrl[splittedUrl.length - 1]
@@ -113,7 +110,7 @@ export const loader: LoaderFunction = async ({ request, params }) => {
     )
 
     return json({
-      uname: profile.handle || address,
+      uname: profile.displayName || address,
       ogImage: ogImage || defaultOG,
       profile,
       accountURN,
@@ -141,11 +138,11 @@ export const meta: MetaFunction = ({
     'og:description': 'Claim yours now!',
     'twitter:description': 'Claim yours now!',
     'og:url': `https://rollup.id`,
-    'og:image': data ? data.ogImage : defaultOG,
+    'og:image': data.ogImage,
     'og:image:alt': `Profile not found`,
     'og:site_name': 'Rollup',
     'og:type': 'profile',
-    'twitter:image': data ? data.ogImage : defaultOG,
+    'twitter:image': data.ogImage,
     'twitter:image:alt': `Profile not found`,
     'twitter:site': '@rollupid',
     'twitter:card': 'summary_large_image',

apps/profile/app/routes/account/profile.tsx

@@ -38,9 +38,11 @@ export const action: ActionFunction = async ({ request }) => {
   const location = formData.get('location')?.toString()
   const website = formData.get('website')?.toString()
   const bio = formData.get('bio')?.toString()
+  const image = formData.get('pfp_url') as string
   let computedIsToken =
     formData.get('pfp_isToken')?.toString() === '1' ? true : false
   const galaxyClient = await getGalaxyClient()
+
   // TODO: handle and return form errors
   await galaxyClient.updateProfile(
     {
@@ -52,7 +54,7 @@ export const action: ActionFunction = async ({ request }) => {
         bio,
         website,
         pfp: {
-          image: formData.get('pfp_url') as string,
+          image,
           isToken: computedIsToken,
         },
       },

apps/profile/app/routes/account/profile/update-cover.tsx

@@ -1,5 +1,6 @@
 import { getAuthzHeaderConditionallyFromToken } from '@kubelt/utils'
-import { ActionFunction, json } from '@remix-run/cloudflare'
+import type { ActionFunction } from '@remix-run/cloudflare'
+import { json } from '@remix-run/cloudflare'
 import { getGalaxyClient } from '~/helpers/clients'
 import { requireJWT } from '~/utils/session.server'
 

apps/profile/global.d.ts

@@ -5,6 +5,7 @@ declare global {
   const COOKIE_DOMAIN: string
   const SECRET_SESSION_SALT: string
   const PASSPORT_URL: string
+  const IMAGES_URL: string
   const PASSPORT_AUTH_URL: string
   const PASSPORT_TOKEN_URL: string
   const CONSOLE_APP_URL: string

apps/profile/wrangler.toml

@@ -28,6 +28,7 @@ services = [
 PASSPORT_URL = "http://localhost:9696"
 PASSPORT_AUTH_URL = "http://localhost:9696/authorize"
 PASSPORT_TOKEN_URL = "http://127.0.0.1:9696/token"
+IMAGES_URL = "http://localhost/trpc"
 CONSOLE_APP_URL = "http://localhost:9898"
 REDIRECT_URI = "http://localhost:9797/auth/callback"
 COOKIE_DOMAIN = "localhost"
@@ -48,7 +49,7 @@ command = "yarn build -- --sourcemap"
 port = 9797
 local_protocol = "http"
 
-# dev (development)
+# dev (development) 
 # ------------------------------------------------------------------------------
 [env.dev]
 routes = [
@@ -65,6 +66,7 @@ services = [
 CONSOLE_APP_URL = "https://console-dev.rollup.id"
 PASSPORT_URL = "https://passport-dev.rollup.id"
 PASSPORT_AUTH_URL = "https://passport-dev.rollup.id/authorize"
+IMAGES_URL = "https://images-dev.rollup.id/trpc"
 PASSPORT_TOKEN_URL = "https://passport-dev.pz3r0.com/token"
 CLIENT_ID = "<console client id>"
 REDIRECT_URI = "https://my-dev.rollup.id/auth/callback"
@@ -96,6 +98,7 @@ command = "yarn build"
 CONSOLE_APP_URL = "https://console-next.rollup.id"
 PASSPORT_URL = "https://passport-next.rollup.id"
 PASSPORT_AUTH_URL = "https://passport-next.rollup.id/authorize"
+IMAGES_URL = "https://images-next.rollup.id/trpc"
 PASSPORT_TOKEN_URL = "https://passport-next.pz3r0.com/token"
 CLIENT_ID = "<console client id>"
 REDIRECT_URI = "https://my-next.rollup.id/auth/callback"
@@ -125,6 +128,7 @@ command = "yarn build"
 PASSPORT_URL = "https://passport.rollup.id"
 CONSOLE_APP_URL = "https://console.rollup.id"
 PASSPORT_AUTH_URL = "https://passport.rollup.id/authorize"
+IMAGES_URL = "https://images.rollup.id/trpc"
 PASSPORT_TOKEN_URL = "https://passport.pz3r0.com/token"
 CLIENT_ID = "<console client id>"
 REDIRECT_URI = "https://my.rollup.id/auth/callback"

packages/platform-clients/image.ts

@@ -2,17 +2,23 @@ import { createTRPCProxyClient, httpBatchLink, loggerLink } from '@trpc/client'
 import { Router } from '@kubelt/types'
 import { trpcClientLoggerGenerator } from './utils'
 
-export default (fetcher: Fetcher, headers?: Record<string, string>) =>
+export default (
+  fetcher: Fetcher,
+  options?: {
+    imagesURL?: string
+    headers?: Record<string, string>
+  }
+) =>
   createTRPCProxyClient<Router.ImageRouter>({
     links: [
       loggerLink({
         logger: trpcClientLoggerGenerator('Image'),
       }),
       httpBatchLink({
-        url: 'http://localhost/trpc',
+        url: options?.imagesURL || 'http://localhost/trpc',
         fetch: fetcher.fetch.bind(fetcher), // NOTE: preflight middleware?
         headers() {
-          return headers || {}
+          return options?.headers || {}
         },
       }),
     ],