add api proxy route

[swyxio]

seems like a nice thing to always have by default? https://sami.website/blog/SvelteKit-API-reverse-proxy

from https://twitter.com/samijaber_/status/1566855729692250112

[ak4zh]

A slightly unrelated comment:

I recently added OG image feature using the proxy request method in svelte-git-cms-template
https://github.com/ak4zh/svelte-git-cms-template/blob/1fbcfe0d61752c588cb7cf255d4c3d0d58def615/src/hooks.server.js#L9

It came out really nice. (https://sw-yx--swyxkit.ak4zh.com/blog?tags=Published)
But it's using an external opensource API to generate the image. I do not like the idea of depending on an external API to generate the image which may shut down at any anytime. So haven't attempted to implement it on swyxkit.

So I am thinking of some better options, would like you to hear your thoughts.
The idea is if we can create a svelte component that will accept the props title, description, image, etc, and create the HTML markdown with tailwindcss using https://svelte.dev/docs#run-time-server-side-component-api, which we can convert to an image using dom-to-image and serve as an OG image.
This obviously will be a separate package we can import but yeah what are your thoughts about the whole idea?
Does it look like a viable solution?

[swyxio]

hmm! yeah i dont mind it. i m not familiar with dom-to-image though, but its worth a shot, i always think a nice og image is a mark of polish on a website.

[ak4zh]

Yes OG image really polishes the site.
I did some more tests and realised we can do this with pure SVG instead using <foreignObject> no need for dom-to-image dependency either.
Not sure if OG image supports svg format though, so may be I need to find a way to serve SVG as png in svelte