Merge pull request #40 from DimensionDev/feat/custom-font

DimensionDev · Sep 25, 2024 · 683b3f2 · 683b3f2
2 parents 8491a25 + dfc4e94
commit 683b3f2
Show file tree

Hide file tree

Showing 14 changed files with 164 additions and 114 deletions.
diff --git a/package.json b/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",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/Inter-Bold.ttf b/public/Inter-Bold.ttf
diff --git a/public/Inter-Regular.ttf b/public/Inter-Regular.ttf
diff --git a/public/checked.png b/public/checked.png
diff --git a/public/selected.png b/public/selected.png
diff --git a/src/components/PollCard.tsx b/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}
@@ -164,7 +165,7 @@ export function PollCard({ poll, locale, profileId }: PollCardProps) {
                 <div
                     style={{
                         display: 'flex',
-                        marginTop: 138 * IMAGE_ZOOM_SCALE,
+                        marginTop: 150 * IMAGE_ZOOM_SCALE,
                         justifyContent: 'center',
                         width: '100%',
                         fontSize: 24 * IMAGE_ZOOM_SCALE,
@@ -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) => {

diff --git a/src/config/frames.ts b/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]>;
diff --git a/src/config/lensFrame.ts b/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);