Not working on Edge

[jdgamble555]

I'm not getting this to work on Vercel Edge. Is anyone else experiencing this? Is this a Vercel problem?

https://github.com/orgs/vercel/discussions/5250

Getting this font noto-sans-v27-latin-regular.ttf error.

J

[theetherGit]

I have already tried to make it work with edge but i have failed to do so.

[jdgamble555]

Right. Just wondering if different results. Hope they fix this :)

[jdgamble555]

It looks like they may have fixed cloudflare - cloudflare/pages-plugins#36 (comment)

[theetherGit]

I have to test it and I'm not free before weekend.

[RickRyan26]

Any forward progress on getting sveltekit-og working on the edge? I would LOVE for this to happen. Feels like Vercel is intentionally holding Svelte back on this one...

[theetherGit]

Not yet, even though I want this to work on every runtime but I can't help. I have tried so many things on this but it didn't work out. Currently i want someone to take a look at this, as I'm not able to think of a solution on this.

If anyone wants to help with this please let me know. We can brainstorm a bit on this.

[jdgamble555]

Have you tried building off of satori? Looks like Nuxt did this - https://nuxt.com/modules/og-image

[jdgamble555]

This does not solve the problem. BTW Vercel Image optimization is extremely expensive, and not even necessary here. When you add cache headers, things automatically get added to the CDN. That is not the problem here. The problem is being able to generate the images if you host on Cloudflare or don't use Serverless.

[RickRyan26]

You're blowing my mind rn 😂 So you're saying the below will save the og image's to the CDN in theory?

// src/hooks.js
export async function handle({ request, resolve }) {
 const response = await resolve(request);
 if (request.path.startsWith('/og/')) {
    response.headers['Cache-Control'] = 'public, max-age=31536000, immutable';
 }
 return response;
}

Marketing language is going to be the end of me!

[jdgamble555]

I believe so yes, although I'm not going to judge you for not using TS. You have to return an image type, as if the file were an image I believe. Something like:

const data = await response.blob();

return new Response(data, {
    headers: {
        'content-type': 'image/png',
        'cache-control': 'public, immutable, no-transform, max-age=31536000'
    }
});

[theetherGit]

@RickRyan26 I got it how vercel cdn works but i don't need to do anything for that. As vercel.json config needs to be handled by developers. So we just need to mention in docs with examples how to do it. I don't need to implement anything in Library itself.

@jdgamble555 your provided code is not wrong but it is mainly meant for browsers not servers so only visited users will have that image in their own local cache not on the server. But in cloudflare scenario you can utilise same headers to cache images on there cache network.

For cloudflare developers can use Cache object cache an endpoint on cloudflare network.

From my PoV vercel image cdn somewhat similar to cloudflare Images but overpriced.

Other than that I don't think there is anything related to cache that i need to worry about.

[jdgamble555]

That code is meant to be in a +page.server.ts or +server.ts file. The caching depends on the headers. There are specific headers for cdns like Cloudflare-CDN-Cache-Control, but generally regular caching can handle more than one level. Look at the specifics to your cdn. Vercel Edge is Cloudflare btw (workers and pages) while vercel serverless is aws lambdas. I don't use serverless at all, so that is my problem at hand.

[theetherGit]

@jdgamble555 Thanks for Nuxt did this - nuxt.com/modules/og-image - I got pretty good idea how to handle things internally.

Any of you wanna help with designing docs for sveltekit-og and svelte-h2j?

[DarthGigi]

@theetherGit I see. I guess we could also just clone the docs folder and change the things we want? https://github.com/svecosystem/formsnap/tree/main/sites/docs

[theetherGit]

@DarthGigi I planned to do that but didn't had that much time to go through all things in the repo. If you can and provide a demo, then we can make it a template for docs.

[DarthGigi]

@theetherGit Sure, I'll see what I can do. I don't have a lot of time on my hands these days, so it might take a while before I can even get started on it 😅

[theetherGit]

Ohh, Let's see. I'm not free for next three weekend. That's the main problem (I'm just trying to fix og in weekdays. From 12 May to 31 May, I'm on a break.)

[jdgamble555]

@theetherGit - It looks like you rewrote the module to use just satori, were you able to see what the nuxt module does in order to get it working on edge functions?