feat: use custom fonts

package.json

@@ -17,7 +17,7 @@
         "@vercel/kv": "^1.0.1",
         "autoprefixer": "10.4.16",
         "clsx": "^2.1.0",
-        "frames.js": "^0.16.4",
+        "frames.js": "^0.19.3",
         "geist": "^1.2.1",
         "http-status-codes": "^2.3.0",
         "next": "latest",
@@ -49,4 +49,4 @@
         "prettier": "^3.2.5",
         "prettier-plugin-tailwindcss": "^0.5.14"
     }
-}
+}

src/components/PollCard.tsx

@@ -71,7 +71,8 @@ function VoteResult({ choice, theme, isMax }: VoteResultProps) {
                 backgroundColor: theme.optionBgColor,
                 borderRadius: 12 * IMAGE_ZOOM_SCALE,
                 fontSize: 20 * IMAGE_ZOOM_SCALE,
-                fontWeight: isMax ? 'bold' : 'normal',
+                fontFamily: 'Inter',
+                fontWeight: isMax ? 700 : 400,
                 color: theme.secondTextColor,
                 overflow: 'hidden',
             }}
@@ -107,7 +108,7 @@ function VoteResult({ choice, theme, isMax }: VoteResultProps) {
                     style={{
                         display: 'flex',
                         alignItems: 'center',
-                        width: '86%',
+                        width: choice.is_select ? '80%' : '86%',
                         overflow: 'hidden',
                         textOverflow: 'ellipsis',
                         whiteSpace: 'nowrap',
@@ -117,10 +118,10 @@ function VoteResult({ choice, theme, isMax }: VoteResultProps) {
                         <img
                             alt="selected"
                             style={{
-                                width: 24 * IMAGE_ZOOM_SCALE,
-                                height: 24 * IMAGE_ZOOM_SCALE,
+                                marginRight: 4 * IMAGE_ZOOM_SCALE,
+                                width: 16 * IMAGE_ZOOM_SCALE,
                             }}
-                            src={`${env.external.NEXT_PUBLIC_HOST}/selected.png`}
+                            src={`${env.external.NEXT_PUBLIC_HOST}/checked.png`}
                         />
                     ) : null}
                     {choice.name}
@@ -183,7 +184,6 @@ export function PollCard({ poll, locale, profileId }: PollCardProps) {
                         width: '100%',
                         color: themeConfig.secondTextColor,
                         fontSize: 28 * IMAGE_ZOOM_SCALE,
-                        fontWeight: 'bold',
                         textAlign: 'center',
                     }}
                 >
@@ -196,6 +196,8 @@ export function PollCard({ poll, locale, profileId }: PollCardProps) {
                             textOverflow: 'ellipsis',
                             wordBreak: 'break-word',
                             maxWidth: '100%',
+                            fontFamily: 'Inter',
+                            fontWeight: 700,
                         }}
                     >
                         {poll.title}
@@ -230,7 +232,7 @@ export function PollCard({ poll, locale, profileId }: PollCardProps) {
                         flexDirection: 'column',
                         width: '100%',
                         gap: 8 * IMAGE_ZOOM_SCALE,
-                        padding: `0 ${83 * IMAGE_ZOOM_SCALE}px`,
+                        padding: `0 ${(showResult ? 83 : 50) * IMAGE_ZOOM_SCALE}px`,
                     }}
                 >
                     {choice_detail.map((choice, index) => {

src/config/frames.ts

@@ -4,6 +4,7 @@ import { createFrames } from 'frames.js/next';
 
 import { lensFrame } from '@/config/lensFrame';
 import { env } from '@/constants/env';
+import { loadFonts } from '@/helpers/loadFonts';
 import { FrameContext } from '@/types';
 
 const hubRequestHeaders: Record<string, string> = {};
@@ -15,9 +16,7 @@ export const frames = createFrames({
     baseUrl: env.external.NEXT_PUBLIC_HOST,
     basePath: '/api/frames',
     middleware: [
-        imagesWorkerMiddleware({
-            imagesRoute: '/images',
-        }),
+        imagesWorkerMiddleware({}),
         farcasterHubContext({
             hubHttpUrl: env.external.NEXT_PUBLIC_HUB_URL,
             hubRequestOptions: {
@@ -26,6 +25,13 @@ export const frames = createFrames({
         }),
         lensFrame,
     ],
+    imageRenderingOptions: async () => {
+        const fonts = await loadFonts();
+
+        return {
+            imageOptions: { fonts },
+        };
+    },
 });
 
 export type FrameHandler = (ctx: FrameContext) => ReturnType<Parameters<typeof frames>[0]>;

src/config/lensFrame.ts

@@ -1,16 +1,14 @@
+import { getLensFrameMessage, isLensFrameActionPayload } from 'frames.js/lens';
 import { openframes } from 'frames.js/middleware';
 
-import { getLensFrameMessage } from '@/helpers/getLensFrameMessage';
-import { isLensFrameActionPayload } from '@/helpers/isLensFrameActionPayload';
-
 export const lensFrame = openframes({
     clientProtocol: {
         id: 'lens',
         version: '1.0.0',
     },
     handler: {
-        isValidPayload: (body: JSON) => isLensFrameActionPayload(body),
-        getFrameMessage: async (body: JSON) => {
+        isValidPayload: (body) => isLensFrameActionPayload(body),
+        getFrameMessage: async (body) => {
             if (!isLensFrameActionPayload(body)) return;
             const result = await getLensFrameMessage(body);
 

src/helpers/createFrameSuccessResponse.ts

@@ -1,3 +1,4 @@
+import { IMAGE_ZOOM_SCALE } from '@/constants';
 import { ImageQuery } from '@/constants/zod';
 import { getPollFrameButtons } from '@/helpers/getPollFrameButtons';
 import { getPollFrameImage } from '@/helpers/getPollFrameImage';
@@ -12,6 +13,10 @@ export const createFrameSuccessResponse = (poll: Poll, queryData: ImageQuery) =>
                 'Cache-Control': 'public, max-age=0',
             },
             aspectRatio: '1:1' as const,
+            sizes: {
+                '1.91:1': { width: 1085 * IMAGE_ZOOM_SCALE, height: 568 * IMAGE_ZOOM_SCALE },
+                '1:1': { width: 528 * IMAGE_ZOOM_SCALE, height: 528 * IMAGE_ZOOM_SCALE },
+            },
         },
     };
 };