Skip to content

Instantly share code, notes, and snippets.

@jtgi

jtgi/util.ts

Last active January 29, 2024 20:32
Show Gist options
  • Save jtgi/1ee1f0a182587c4406add4e354fb1ffc to your computer and use it in GitHub Desktop.
Save jtgi/1ee1f0a182587c4406add4e354fb1ffc to your computer and use it in GitHub Desktop.
Download ZIP
Frame Response Helper - Use web standard response
Raw
util.ts
// next.js usage
export default function handler() {
return frameResponse({
image: `https://domain.com/image.gif`,
buttons: [
{ text: 'Action 1' },
{ text: 'Action 2' },
]
});
}
// remix.run usage
export function loader() {
return frameResponse({
image: `https://domain.com/image.gif`,
buttons: [
{ text: 'Action 1' },
{ text: 'Action 2' },
]
});
}
type FrameResponseArgs = {
title?: string;
description?: string;
version?: string;
image: string;
buttons?: Array<{
text: string;
}>;
postUrl?: string;
};
const frameResponse = (params: FrameResponseArgs) => {
const version = params.version || "vNext";
const html = `
<!DOCTYPE html>
<html>
<head>
${params.title ? `<title>${params.title}</title>` : ""}
${params.title ? `<meta name="og:title" content="${params.title}">` : ""}
${
params.description
? `<meta name="description" content="${params.description}">
<meta name="og:description" content="${params.description}">`
: ""
}
<meta name="fc:frame" content="${version}">
<meta name="fc:frame:image" content="${params.image}">
${
params.postUrl
? `<meta name="fc:frame:post_url" content="${params.postUrl}">`
: ""
}
${
params.buttons
? params.buttons
.map(
(b, index) =>
`<meta name="fc:frame:button:${index + 1}" content="${
b.text
}">`
)
.join("\n")
: ""
}
</head>
<body></body>
</html>
`;
return new Response(html, {
headers: {
"Content-Type": "text/html",
},
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment