docs: Dynamic og image implementation

[mrhoodz]

Overview

What is it?

• Feature / enhancement
• Bug
• Docs / tests / types / typos

Description

• Improved Visibility: The dynamic og:images significantly enhance the appearance of Qwik documentation links on social media platforms, capturing the attention of a wider audience.

• Enhanced User Experience: The visually appealing og:images provide users with a quick and engaging preview of the shared content, improving the browsing experience.

• Clear Representation: The dynamic og:images accurately represent the content behind the link, conveying the value proposition of Qwik and attracting developers seeking efficient web app frameworks.

• Increased Engagement: With visually appealing previews, the chances of users clicking on Qwik documentation links and exploring the framework further are greatly improved.

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• Added new tests to cover the fix / functionality

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

👷 Deploy request for qwik-insights pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	8431ac5

[manucorporat]

Not sure i understand the purpose of the useTask!

[manucorporat]

This is very cool!

[manucorporat]

how does https://opengraphqwik.vercel.app/api/og work?

[mrhoodz]

@manucorporat With regards to this:

Not sure i understand the purpose of the useTask!

I used useTask$ because during development the linter showed me the following error.
QWIK WARN State mutation inside render function. Use useTask$() instead.

[mrhoodz]

P.S. A check was failing because l had set a variable but not used it, Ive made a commit to fix that.

[mrhoodz]

@manucorporat

how does https://opengraphqwik.vercel.app/api/og work?

This is the url to the edge function that generates the image. It takes the title and subtitle query params from the ogImage url and generates an image based on that. Check out the repo for that here.

Its a Next JS project however l will update that to make it work in a native qwik project, I'm doing this approach at the moment because lm having trouble getting Vite to compile the vercel/og package when l run pnpm build. I'm close to a solution and l will submit a PR for that when lm done.

[manucorporat]

This is cool! wonder if we could build a qwik app in vercel that does this, it might require a proxy that converts qwik JSX into react JSX. But it would be cool to have this feature as Qwik!

Does not need to be part of the same PR, but seems like a fun open source project! and something the qwik core team would love to promote!

[mrhoodz]

@manucorporat
I'm game, where should l start?

I think meanwhile we work on that, it would be useful to merge my current PR so that

• we get feedback on the designs
• we can test the overall performance of the edge function on different social media platforms
• and also to know/measure how many edge function invocations are used on average that way we could even move the edge function to the main docs package if the usage is reasonable.

Note: The vercel/og package is not tired to deploying the app using it on vercel, l believe it works on other edge providers too.

[manucorporat]

Very impressive piece of work, agreed, we can merge and try to selfhost it in qwik a bit later!