Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: automating og:image for getFrameHtmlResponse and FrameMetadata. #109

Merged
merged 6 commits into from
Feb 10, 2024
Merged

feat: automating og:image for getFrameHtmlResponse and FrameMetadata. #109

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1b5c5c2
lol
Zizzamia Feb 9, 2024
993431a
feat: dope
Zizzamia Feb 9, 2024
19c62e1
ok
Zizzamia Feb 9, 2024
d0edd01
ok
Zizzamia Feb 9, 2024
1bca3e1
merge
Zizzamia Feb 10, 2024
a676a5e
done
Zizzamia Feb 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/curly-bottles-knock.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@coinbase/onchainkit': patch
---

- **feat**: ~~~~
3 changes: 2 additions & 1 deletion src/components/FrameMetadata.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,8 @@ export function FrameMetadata({
return (
<Wrapper>
<meta property="fc:frame" content="vNext" />
{!!image && <meta property="fc:frame:image" content={image} />}
<meta property="fc:frame:image" content={image} />
<meta property="og:image" content={image} />
{!!input && <meta property="fc:frame:input:text" content={input.text} />}

{!!button1 && <meta property="fc:frame:button:1" content={button1.label} />}
Expand Down
6 changes: 6 additions & 0 deletions src/core/getFrameHtmlResponse.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ describe('getFrameHtmlResponse', () => {
<meta property="fc:frame:button:3:action" content="post_redirect" />
<meta property="fc:frame:button:4" content="button4" />
<meta property="fc:frame:image" content="https://example.com/image.png" />
<meta property="og:image" content="https://example.com/image.png" />
<meta property="fc:frame:input:text" content="Enter a message..." />
<meta property="fc:frame:post_url" content="https://example.com/api/frame" />
<meta property="fc:frame:refresh_period" content="10" />
Expand All @@ -52,6 +53,7 @@ describe('getFrameHtmlResponse', () => {
<meta property="fc:frame:button:1:action" content="mint" />
<meta property="fc:frame:button:1:target" content="https://zizzamia.xyz/api/frame/mint" />
<meta property="fc:frame:image" content="https://zizzamia.xyz/park-1.png" />
<meta property="og:image" content="https://zizzamia.xyz/park-1.png" />

</head>
</html>`);
Expand All @@ -71,6 +73,7 @@ describe('getFrameHtmlResponse', () => {
<meta property="fc:frame:button:1:action" content="link" />
<meta property="fc:frame:button:1:target" content="https://zizzamia.xyz/api/frame/link" />
<meta property="fc:frame:image" content="https://zizzamia.xyz/park-1.png" />
<meta property="og:image" content="https://zizzamia.xyz/park-1.png" />

</head>
</html>`);
Expand All @@ -88,6 +91,7 @@ describe('getFrameHtmlResponse', () => {
expect(html).toContain(
'<meta property="fc:frame:image" content="https://example.com/image.png" />',
);
expect(html).toContain('<meta property="og:image" content="https://example.com/image.png" />');
expect(html).toContain(
'<meta property="fc:frame:post_url" content="https://example.com/api/frame" />',
);
Expand All @@ -104,6 +108,7 @@ describe('getFrameHtmlResponse', () => {
expect(html).toContain(
'<meta property="fc:frame:image" content="https://example.com/image.png" />',
);
expect(html).toContain('<meta property="og:image" content="https://example.com/image.png" />');
expect(html).toContain(
'<meta property="fc:frame:post_url" content="https://example.com/api/frame" />',
);
Expand All @@ -120,6 +125,7 @@ describe('getFrameHtmlResponse', () => {
expect(html).toContain(
'<meta property="fc:frame:image" content="https://example.com/image.png" />',
);
expect(html).toContain('<meta property="og:image" content="https://example.com/image.png" />');
expect(html).toContain('<meta property="fc:frame:button:1" content="button1" />');
expect(html).not.toContain('fc:frame:post_url');
});
Expand Down
6 changes: 3 additions & 3 deletions src/core/getFrameHtmlResponse.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ function getFrameHtmlResponse({
refreshPeriod,
refresh_period,
}: FrameMetadataType): string {
// Set the image metadata if it exists.
const imageHtml = image ? ` <meta property="fc:frame:image" content="${image}" />\n` : '';
const imageHtml = ` <meta property="fc:frame:image" content="${image}" />\n`;
const ogImageHtml = ` <meta property="og:image" content="${image}" />\n`;
Copy link

@spennyp spennyp Feb 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From my testing, og:title is also required to have warpcast render the frame from a GET response.
Can just set to empty string to satisfy this.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or, looks like they have some updated docs, and it seems maybe not necessary: https://docs.farcaster.xyz/reference/frames/spec#required-properties

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure i follow your point

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You added the og:image metadata here, but not og:title.

From my testing, without og:image AND og:title, warpcast won't render a frame from a GET request.

This works:

<!DOCTYPE html>
<html>
    <head>
	<meta property="og:image" content="https://paperclip.a.pinggy.link/images/nouns-auction-house.png" />
	<meta property="og:title" content="title" />
	<meta property="fc:frame" content="vNext" />
	<meta property="fc:frame:image" content="https://paperclip.a.pinggy.link/images/nouns-auction-house.png" />
	<meta property="fc:frame:post_url" content="https://paperclip.a.pinggy.link/auction/nouns?" />
	<meta property="fc:frame:button:1" content="View auction!" />
	<meta property="fc:frame:button:1:action" content="post" />
    </head>
</html>

This doesn't work (only difference is that it is missing the og:title tag)

<!DOCTYPE html>
<html>
    <head>
	<meta property="og:image" content="https://paperclip.a.pinggy.link/images/nouns-auction-house.png" />
	<meta property="fc:frame" content="vNext" />
	<meta property="fc:frame:image" content="https://paperclip.a.pinggy.link/images/nouns-auction-house.png" />
	<meta property="fc:frame:post_url" content="https://paperclip.a.pinggy.link/auction/nouns?" />
	<meta property="fc:frame:button:1" content="View auction!" />
	<meta property="fc:frame:button:1:action" content="post" />
    </head>
</html>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But the spec doesn't care about the title?!?

Is it the spec wrong?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let me loop back this to V

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But yeah, if it doesn't work, than yeah let me add og:title, and thank you for triple checking this.

Copy link

@spennyp spennyp Feb 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, thanks!

Oh, and content="" (empty string) doesn't work lol (very finicky), so just put "title" or something if you are going to hardcode

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the nits lol

This is the last thing stopping us from moving over to use onchainkit 🙏!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 I guess is fair to let people decide, and than yeah maybe the default is something like Frame title


// Set the input metadata if it exists.
const inputHtml = input
Expand Down Expand Up @@ -61,7 +61,7 @@ function getFrameHtmlResponse({
<html>
<head>
<meta property="fc:frame" content="vNext" />
${buttonsHtml}${imageHtml}${inputHtml}${postUrlHtml}${refreshPeriodHtml}
${buttonsHtml}${imageHtml}${ogImageHtml}${inputHtml}${postUrlHtml}${refreshPeriodHtml}
</head>
</html>`;

Expand Down
2 changes: 1 addition & 1 deletion src/version.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export const version = '0.5.3';
export const version = '0.5.4';
Loading