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

og image update #656

Merged
merged 4 commits into from
Sep 28, 2023
Merged

og image update #656

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2414aa7
Update default og image
chrisdale-io Sep 28, 2023
a63eeed
Simplify route background artwork
chrisdale-io Sep 28, 2023
9e7dcb7
Fix image url
emmatown Sep 28, 2023
9dbf838
Merge branch 'main' into og-image-update
emmatown Sep 28, 2023
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
2 changes: 1 addition & 1 deletion docs/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const metadata = {
description: 'Content management for your codebase.',
images: [
{
url: 'https://thinkmill-labs.keystatic.net/keystatic-site/images/lok6jo6bsuca/og-image',
url: 'https://thinkmill-labs.keystatic.net/keystatic-site/images/hlworopofi3z/og-image',
width: 1200,
height: 630,
alt: 'Keystatic cover image',
Expand Down
100 changes: 5 additions & 95 deletions docs/src/app/og/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,104 +29,14 @@ export async function GET(req: NextRequest) {
display: 'flex',
height: '100%',
width: '100%',
backgroundImage:
'url(https://thinkmill-labs.keystatic.net/keystatic-site/images/km9uvzfb8fqo/og-image-bg)',
Copy link
Member

Choose a reason for hiding this comment

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

This background image doesn't seem to be used? so the background is just the colour? I did some investigation and it seems like it's because of vercel/satori#273 and Keystatic Cloud serving webp by default, you should be able to fix that by using https://thinkmill-labs.keystatic.net/keystatic-site/images/km9uvzfb8fqo/og-image-bg?format=png (from testing that seemed to solve the error from webp but the image still wasn't actually being displayed)

Copy link
Contributor Author

@chrisdale-io chrisdale-io Sep 28, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Hey Emma, thanks for looking into this. I had a bit of a look and test a few ideas from what you've come back with, with no success. I'm not sure why it's not loading up the background image, as it seemed to work fine from the implementation before the brand update work!?

The previous code for the background image in the original version was this:
backgroundImage: 'url(https://thinkmill-labs.keystatic.net/keystatic-site/images/nt24l5xes6jj/open-graph-bg)',

It's strange, if I add the old code into a fresh OG image playground, the image doesn't load up for 'SVG (Satori)' preview tab, but shows on the 'HTML (Native)' tab (which seems to be what's happening with my new implementation too), but the old code seemed to serve up dynamic og images (again before I adjusted things 🙈):

Original Dynamic OG Image

Copy link
Member

Choose a reason for hiding this comment

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

From checking out the commit before the brand updates (183e129) and trying it now, it seems as though it broke. I'm guessing that would have broke when we added image transforms to *.keystatic.net 😬 (though adding ?format=png to the url in 183e129 does seem to work)

Copy link
Member

Choose a reason for hiding this comment

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

Just pushed a commit that seems to fix it, it seems like having an image bigger than the image that's being created made something decide to not render it so resizing the image to be the same size as the output worked

backgroundRepeat: 'no-repeat',
backgroundAttachment: 'fixed',
backgroundSize: 'cover',
backgroundColor: '#F9F9F8',
}}
>
<svg
style={{ position: 'absolute', bottom: 0, right: 0 }}
width="1200"
height="630"
viewBox="0 0 1200 630"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_2_444)">
<path
d="M1302.32 -20.5L707.929 573.895L478.324 803.5"
stroke="url(#paint0_linear_2_444)"
strokeWidth="277.643"
/>
<path
d="M1603.04 69.2222L985.572 686.688V834.185"
stroke="url(#paint1_linear_2_444)"
strokeWidth="277.643"
/>
<path
d="M1137.41 335.296L1439.63 637.522V863.106"
stroke="url(#paint2_linear_2_444)"
strokeWidth="277.643"
/>
<path
opacity="0.4"
d="M1043.41 628.846L1529.29 142.971"
stroke="url(#paint3_linear_2_444)"
strokeWidth="277.643"
strokeLinejoin="round"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_2_444"
x1="942.19"
y1="297.699"
x2="707.929"
y2="575.341"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E4DEFC" />
<stop offset="1" stopColor="#FDD8D3" />
</linearGradient>
<linearGradient
id="paint1_linear_2_444"
x1="1167.77"
y1="518.945"
x2="985.572"
y2="692.472"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFE0A1" />
<stop offset="1" stopColor="#CEEBCF" />
</linearGradient>
<linearGradient
id="paint2_linear_2_444"
x1="1170.67"
y1="368.556"
x2="1439.63"
y2="643.305"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#E4DEFC" />
<stop offset="1" stopColor="#C4EAEF" />
</linearGradient>
<linearGradient
id="paint3_linear_2_444"
x1="1225.62"
y1="461.103"
x2="1043.41"
y2="634.63"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFE0A1" />
<stop offset="1" stopColor="#CEEBCF" />
</linearGradient>
<clipPath id="clip0_2_444">
<rect width="1200" height="630" fill="white" />
</clipPath>
</defs>
</svg>
<div
style={{
position: 'absolute',
top: 0,
left: 0,
display: 'flex',
height: '100%',
width: '100%',
mixBlendMode: 'soft-light',
opacity: 0.8,
backgroundImage: `url(../texture.png)`,
}}
/>
<div
style={{
position: 'relative',
Expand Down