Merge pull request #9 from depatchedmode/v0.3.1

 #6

Author: depatchedmode

api/index.js

@@ -5,8 +5,6 @@ import buildButtons from '../modules/buildButtons';
 import getTargetFrame from '../modules/getTargetFrame';
 
 export default async (req, context) => {
-    const debug = process.env.DEBUG_MODE;
-    const host = process.env.URL;
     const payload = await parseRequest(req);
     let from = 'poster';
     let buttonId = null;
@@ -17,7 +15,33 @@ export default async (req, context) => {
         buttonId = payload.untrustedData?.buttonIndex;
     } 
 
-    const { frameSrc, frameName } = getTargetFrame(from,buttonId,frames);
+    const { frameSrc, frameName, redirectUrl } = getTargetFrame(from,buttonId,frames);
+    if (redirectUrl) {
+        return await respondWithRedirect(redirectUrl);
+    } else if (frameSrc) {
+        return await respondWithFrame(frameName, frameSrc, payload);
+    } else {
+        console.error(`🤷🏻`)
+    }
+}
+
+const respondWithRedirect = (redirectUrl) => {
+    const internalRedirectUrl = new URL(`${process.env.URL}/redirect`) 
+    internalRedirectUrl.searchParams.set('redirectUrl',redirectUrl);
+    return new Response('<div>redirect</div>', 
+        {
+            status: 302,
+            headers: { 
+                'Location': internalRedirectUrl,
+            },
+        }
+    );
+}
+
+const respondWithFrame = async (frameName, frameSrc, payload) => {
+    const debug = process.env.DEBUG_MODE;
+    const host = process.env.URL;
+
     const frameContent = {
         image: ``,
         buttons: buildButtons(frameSrc.buttons),

api/redirect.js

@@ -0,0 +1,20 @@
+// GET /redirect
+// Redirects to an external URL based on buttonIndex parameter. Used to work
+// around the same origin policy  on frames, which is being removed soon.
+export default async (req, context) => {
+    const requestUrl = new URL(req.url);
+    const redirectUrl = requestUrl.searchParams.get('redirectUrl');
+    
+    return new Response('<div>redirect</div>', 
+        {
+            status: 302,
+            headers: { 
+                'Location': redirectUrl,
+            },
+        }
+    );
+}
+
+export const config = {
+    path: "/redirect"
+};

modules/buildButtons.js

@@ -1,5 +1,11 @@
 export default (buttons) => {
     return buttons
-        .map((button, index) => `<meta property="fc:frame:button:${index + 1}" content="${button.label}" />`)
+        .map((button, index) => {
+            let buttonMarkup = `<meta property="fc:frame:button:${index + 1}" content="${button.label}" />`;
+            if (button.url) {
+                buttonMarkup += `\n<meta property="fc:frame:button:${index + 1}:action" content="post_redirect" />`
+            }
+            return buttonMarkup;
+        })
         .join('\n');
 }

modules/getTargetFrame.js

@@ -2,13 +2,17 @@ const DEFAULT_FRAME = 'poster';
 
 export default (name, buttonId, frames) => {
     let frameName = DEFAULT_FRAME;
+    let redirectUrl = null;
     if (name && buttonId) {
         const originFrame = frames[name];
-        frameName = originFrame.buttons[buttonId-1].goTo;
+        const button = originFrame.buttons[buttonId-1];
+        frameName = button.goTo;
+        redirectUrl = button.url;
     }
     const frameSrc = frames[frameName];
     return {
         frameSrc,
-        frameName
+        frameName,
+        redirectUrl
     };
 }

src/frames/count.js

@@ -29,11 +29,11 @@ const build = async (frameData) => {
 
 export const buttons = [
     { 
-        label: 'Frame me!',
+        label: '🫵 Frame me!',
         goTo: 'count',
     },
     { 
-        label: 'View credits',
+        label: '🎬 View credits',
         goTo: 'credits',
     }
 ]

src/frames/credits.js

@@ -4,6 +4,10 @@ export default {
         { 
             label: '⬅️ Back',
             goTo: 'count',
+        },
+        {
+            label: '{😺} View on Github',
+            url: 'https://github.com/depatchedmode/simplest-frame'
         }
     ]
 };

src/frames/poster.js

@@ -3,8 +3,12 @@ export default {
     image: `/images/poster.png`,
     buttons: [
         { 
-            label: 'Begin',
+            label: '🔳 Try Demo',
             goTo: 'count',
+        },
+        {
+            label: '{😺} View on Github',
+            url: 'https://github.com/depatchedmode/simplest-frame'
         }
     ]
 };