Using v0.dev to build open graph images (and rip off Luma)

jonoroboto · September 3, 2024, 9:59am

Something that I haven’t seen folks mention yet that’s worth mentioning, is the ability to use v0.dev to create open graph images with OG image generation.

We have been a huge fan of Luma, the events platform, for quite a while and thought we would take inspiration from their dynamic OG. We may or may not have taken a little too much inspiration from this event and the OG

If you want to see our version, with a colour change and just enough differentiation that it might not be classed as blatant plagiarism.

The beauty of this, is with a little bit of prompting, you can quickly pull this into the OG Playground and test out some different content.

Where we’ll end up using this

We’d love to spoil the surprise but keep your eye out on the Roboot Studio projects in the next few weeks for the full write up. I’ll leave a hint in for what we are going to do with it for any of you Sanity nerds out there - did you know about this little piece of metadata

pawlean · September 3, 2024, 10:47am

The OG image generation is probably hands down one of my favourite Vercel functionalities. It’s just so good! For my personal blog which I recently added a fresh coat of paint to, it’s been so fun to be able to create an OG image with code to match.

In the past, I would manually do it with Photoshop or recently Figma. Too slow. Need to ship.

Also a big fan of Luma! I like the inspiration you got from them.

jonoroboto · September 3, 2024, 11:21am

Man, I really like the hand-drawn fonts on that page! Also we actually got the full code up and running. Looks pretty cool. Will be sharing code when I get two seconds to actually write up a minimal reproduction as it takes some code from Sanity, some from Next.js.

Also something I just found in a Github discussion that saved me so much time with using Google Fonts:

async function getTtfFont(family: string, axes: string[], value: number[]): Promise<ArrayBuffer> {
    const familyParam = axes.join(',') + '@' + value.join(',');

    // Get css style sheet with user agent Mozilla/5.0 Firefox/1.0 to ensure non-variable TTF is returned
    const cssCall = await fetch(`https://fonts.googleapis.com/css2?family=${family}:${familyParam}&display=swap`, {
        headers: {
            'User-Agent': 'Mozilla/5.0 Firefox/1.0',
        },
    });

    const css = await cssCall.text();
    const ttfUrl = css.match(/url\(([^)]+)\)/)?.[1];

    return await fetch(ttfUrl).then(res => res.arrayBuffer());
}

The result

Here’s the results, it’s taking dominant color, which actually looks pretty interesting on the flowers: