update image generation

francisco-leal · Feb 23, 2024 · 6ba5714 · 6ba5714
1 parent 8d5da64
commit 6ba5714
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 7 deletions.
diff --git a/app/controllers/images_controller.ts b/app/controllers/images_controller.ts
@@ -3,12 +3,13 @@ import {
   generateScoreImage,
   generateLeaderboardImage,
   generateFollowersImage,
+  generateIntroMessage,
 } from '#services/generate_image'
 import sharp from 'sharp'
 
 export default class ImagesController {
-  async show({ params, response }: HttpContext) {
-    const svg = await generateScoreImage(params.id)
+  async show({ response }: HttpContext) {
+    const svg = await generateIntroMessage()
     const pngBuffer = await sharp(Buffer.from(svg)).toFormat('png').toBuffer()
 
     response.header('Content-type', 'image/png')

diff --git a/app/services/generate_image.ts b/app/services/generate_image.ts
@@ -65,7 +65,9 @@ export const generateScoreImage = async (fid: number) => {
           height: '100%',
           justifyContent: 'center',
           alignItems: 'center',
-          backgroundColor: 'black',
+          backgroundImage: "url('https://farscout.xyz/images/thumbnail.png')",
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
         },
       },
     },
@@ -167,7 +169,9 @@ export const generateLeaderboardImage = async () => {
           height: '100%',
           justifyContent: 'center',
           alignItems: 'center',
-          backgroundColor: 'black',
+          backgroundImage: "url('https://farscout.xyz/images/thumbnail.png')",
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
         },
       },
     },
@@ -272,7 +276,89 @@ export const generateFollowersImage = async (fid: number) => {
           height: '100%',
           justifyContent: 'center',
           alignItems: 'center',
-          backgroundColor: 'black',
+          backgroundImage: "url('https://farscout.xyz/images/thumbnail.png')",
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        },
+      },
+    },
+    {
+      width: 675,
+      height: 675,
+      fonts: [
+        {
+          data: regularFontData,
+          name: 'SpaceGrotesk-Regular',
+        },
+        {
+          data: boldFontData,
+          name: 'SpaceGrotesk-SemiBold',
+        },
+      ],
+    }
+  )
+}
+
+export const generateIntroMessage = async () => {
+  const regularFontPath = join(process.cwd(), '/public/font', 'SpaceGrotesk-Regular.ttf')
+  const regularFontData = fs.readFileSync(regularFontPath)
+
+  const boldFontPath = join(process.cwd(), '/public/font', 'SpaceGrotesk-SemiBold.ttf')
+  const boldFontData = fs.readFileSync(boldFontPath)
+
+  return await satori(
+    {
+      type: 'div',
+      props: {
+        children: [
+          {
+            type: 'p',
+            props: {
+              children: `farscout.xyz`,
+              style: {
+                fontSize: 24,
+                fontFamily: 'SpaceGrotesk-regular',
+                color: 'white',
+                zIndex: 1,
+              },
+            },
+          },
+          {
+            type: 'p',
+            props: {
+              children: `a simple reputation frame built on top of`,
+              style: {
+                fontSize: 24,
+                fontFamily: 'SpaceGrotesk-regular',
+                color: 'white',
+                zIndex: 1,
+              },
+            },
+          },
+          {
+            type: 'p',
+            props: {
+              children: `farcaster and airstack`,
+              style: {
+                fontSize: 24,
+                fontFamily: 'SpaceGrotesk-SemiBold',
+                color: 'white',
+                zIndex: 1,
+              },
+            },
+          },
+        ],
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundImage: "url('https://farscout.xyz/images/thumbnail.png')",
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
         },
       },
     },

diff --git a/public/images/main.png b/public/images/main.png
diff --git a/public/images/thumbnail.png b/public/images/thumbnail.png
diff --git a/resources/views/pages/home.edge b/resources/views/pages/home.edge
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>farscout</title>
   <meta property="fc:frame" content="vNext" />
-  <meta property="fc:frame:image" content="https://farscout.xyz/images/thumbnail.png" />
+  <meta property="fc:frame:image" content="https://farscout.xyz/images/main.png" />
   <meta property="fc:frame:image:aspect_ratio" content="1:1" />
   <meta property="fc:frame:button:1" content="Calculate my score" />
   <meta property="fc:frame:button:1:action" content="post" />
@@ -15,7 +15,7 @@
   <meta property="fc:frame:post_url" content="https://farscout.xyz/frames/main" />
   <meta property="og:title" content="farscout" />
   <meta property="og:description" content="revealing your farcaster score" />
-  <meta property="og:image" content="https://farscout.xyz/images/thumbnail.png" />
+  <meta property="og:image" content="https://farscout.xyz/images/main.png" />
 
   @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>