feat(api): add api/v1/og route for OG Image; feat(website): update head to use og image content

[chukwumaokere]

To resolve: #22
Testable at: http://localhost:3000/api/v1/og
or
http://localhost:3000/api/v1/og?title=Some%20Random%20Title&subtitle=EnvShare2

This PR is still a work in progress because I'm finding issues with tailwind styles on OG Image routes
It works in their playground

wait  - compiling /api/v1/og (client and server)...
event - compiled successfully in 246 ms (67 modules)
`gradient-to-tr` unknown or invalid utility
`from-zinc-900/50` unknown or invalid utility
`to-zinc-700/30` unknown or invalid utility
`gradient-to-t` unknown or invalid utility
`clip-text` unknown or invalid utility
`from-zinc-100/50` unknown or invalid utility
`to-white` unknown or invalid utility
`whitespace-pre` unknown or invalid utility

Researching here: jaredh159/tailwind-react-native-classnames#121 and vercel/og-image#226 (comment)

And also need a suggestion for head component fetching hostname
In next 12 it was something with getServerSideProps -> req.hostname or something like that
And in next13 theres probably a different way to do it.
We cant use window.location.href to build the URL because window can be undefined which would probably result in some OG Image issues.
I'll check on this also

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @chronark on Vercel.

@chronark first needs to authorize it.

[chukwumaokere]

"Window can be undefined when static generated, however it will be updated when the page is hydrated"...
🤔
I wonder what that means for the OG Image embed then..

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
envshare	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Jan 19, 2023 at 9:58PM (UTC)

[chronark]

const host = new URL(req.url).hostname should work

[chronark]

ah you're inside a page.tsx, I'm not sure tbh, if we don't find anything I'll ask vercel

[chukwumaokere]

const host = new URL(req.url).hostname

Not in the endpoint, in the app/head.tsx implementation that makes a request to the API

Originally I did have it as:

const url = new URL(`${window.location.href}api/v1/og?title=${encodeURIComponent(title)}`);

I changed it back to think it over a bit more

And after some research I see im not the only one with this issue so theres: https://beta.nextjs.org/docs/api-reference/headers#headers

I have a feeling I did something incorrectly 🤨

It works but its hacky.

[chronark]

aah ok I see now, I think using the host from headers is fine

[chronark]

@chukwumaokere Actually, we can just use process.env.VERCEL_URL

const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000

[chukwumaokere]

Sounds good. Though, it might break if someone clones repo and hosts elsewhere though, but thats not for us to worry about LOL

It can be in the documentation that there are components like Head that expect this to be hosted on vercel, and if they're choosing to selfhost, they'll want to change this files environment variable to use their BASE_URL or whatever their environment variable name for host is

[chronark]

Yeah I had the same thoughts, maybe we can do use VERCEL_URL and if that is not available, then we fall back to the host in headers.
But let's worry about that later

[chukwumaokere]

I address this in the documentation

[chukwumaokere]

FYI the only issue i'm fixing now from this PR is the tailwind issue that is making the tailwind styles not work
Once thats done, the PR is ready I'll look into it more later today, gotta get back to my day job haha

wait  - compiling /api/v1/og (client and server)...
event - compiled successfully in 246 ms (67 modules)
`gradient-to-tr` unknown or invalid utility
`from-zinc-900/50` unknown or invalid utility
`to-zinc-700/30` unknown or invalid utility
`gradient-to-t` unknown or invalid utility
`clip-text` unknown or invalid utility
`from-zinc-100/50` unknown or invalid utility
`to-white` unknown or invalid utility
`whitespace-pre` unknown or invalid utility

[chronark]

Let's just do it without the gradient, then you can remove all of those I think

[chukwumaokere]

Fair enough, I'll remove them for now, we'll have a bit of an MVP and then modify it later

[chronark]

👍
Can you remove the draft status and then I'll merge

[chukwumaokere]

Had to inline style the tailwind

<div tw='w-[1200px] h-[630px] flex flex-col items-center justify-center text-center'>
                {/* backgroundImage: bg-gradient-to-tr from-zinc-900/50 to-zinc-700/30 */}
                <div tw="bg-black w-full h-full flex" style={{backgroundImage: 'linear-gradient(to top right, rgba(24,24,27,.5), rgba(63,63,70,.3))'}}>
                    <div tw="flex flex-col text-3xl tracking-tight text-gray-300 w-full items-center h-full justify-center text-center">
                        {/* font-semibold bg-gradient-to-t bg-clip-text from-zinc-100/50 to-white whitespace-pre */ }
                        <span tw="text-white text-7xl" 
                            style={{fontWeight: 700, 
                                color: 'transparent',
                                paddingLeft: '12rem',
                                paddingRight: '12rem',
                                backgroundImage: 'linear-gradient(to top, rgba(244, 244,  245, .5), rgba(255,255,255,1))', 
                                backgroundClip: 'text'}}>{title}</span>
                        <span tw="mt-4 font-bold">{subtitle}</span>
                    </div>
                </div>
            </div>

I'll figure out at another point WHY this doesnt work and fix it later