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.

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

In useOgImage() hook adds searchParams option for setting arbitrary query string vars to generated URL #10677

Merged
merged 2 commits into from
May 23, 2024

Conversation

cannikin
Copy link
Member

Found a missing feature while working on adding og:image support to Cambium:

Right now setting the width or height of an og:image will add those properties as query string variables in the URL that's generated:

http://localhost:8910/photo.png?width=1000&height=800

But you may need variables that you'll use to modify the image you generate. We need a way to also add these to the final URL:

http://localhost:8910/photo.png?brightness=0.8&contrast=1.5

Right now I'm thinking of having useOgImage() accept a single argument, which is an object containing all of the vars you want to append to the URL. This can be a simple object or an instance of URLSearchParams and we'll do the right thing:

const { url } = useOgImage({ brightness: 0.9, contrast: 1.5 })
// url => http://localhost:8910/photo.png?brightness=0.9&contrast=1.5

@cannikin cannikin added the release:feature This PR introduces a new feature label May 22, 2024
@cannikin cannikin added this to the SSR milestone May 22, 2024
@cannikin cannikin requested a review from dac09 May 22, 2024 23:04
@cannikin cannikin self-assigned this May 22, 2024
@dac09
Copy link
Collaborator

dac09 commented May 23, 2024

Looking good Rob, looks like the implementation in the PR is different to your description though!

I like this idea

Right now I'm thinking of having useOgImage() accept a single argument, which is an object containing all of the vars you want to append to the URL.

because even though you specify width and height, they do just come through as searchParams, I don't think there's a point in separating these. We'll just have to ask people to be aware that setting width and height will change the size of the image being generated, in addition to whatever they might use it in their component for!

@cannikin
Copy link
Member Author

cannikin commented May 23, 2024

Yeah I was writing up my plan I forgot that it already accepted options (width, height, extension). Once I got back into the code I felt like width/height/extension were kind of "special" and so didn't want to lump them altogether with others. You may not even realize that width/height actually get added as query params behind the scenes so it felt kind of weird just mixing them together, which made of them feel like they had no special importance—having to set your query vars as a standalone searchParams key makes it very clear that this is a collection of special values that you need to pass through to the og:image component because you're going to use them for something internally. width/height are more of an implementation detail that og:image uses internally.

@cannikin cannikin merged commit de67ddf into main May 23, 2024
46 checks passed
@cannikin cannikin deleted the rc-useOgImage-searchParams branch May 23, 2024 15:54
@Josh-Walker-GM Josh-Walker-GM modified the milestones: SSR, v8.0.0 Sep 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
release:feature This PR introduces a new feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants