[Feature] CldOgImage Component

[colbyfayock]

Feature Request

Is your feature request related to a problem? Please describe.

Create a new CldOgImage component that allows for easy drop-in support for social cards

Describe the solution you'd like

The goal is to mostly replicate the CldOgImage component from Next Cloudinary: https://next.cloudinary.dev/cldogimage/basic-usage

Given Astro doesn't have a similar concept of a Head component out of the box like the Next.js Pages Router does, we can simply return a series of meta tags that will allow someone to easily drop in a Social Cards.

At its basics, the component should work as follows:

---
import { CldOgImage } from 'astro-cloudinary';
---
<CldOgImage
  src="<Public ID>"
/>

CldOgImage would be using the getCldOgImageUrl under the hood exposing all of the same APIs, which would allow for transformations.

https://github.com/cloudinary-community/next-cloudinary/blob/main/next-cloudinary/src/components/CldOgImage/CldOgImage.tsx

The meta tags that should be added are, at a minimum:

<meta property="og:image" content={ogImageUrl} />
<meta property="og:image:secure_url" content={ogImageUrl} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content={alt} />
<meta property="twitter:title" content={title} />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content={ogImageUrl} />

Twitter Title here is particularly interesting as the social card will not work without a Twitter Title, is there a way we can infer this from Astor without a user manually specifying this? Should we throw a warning if the prop is not defined?

[taciturnaxolotl]

i'll take a look and see if i can implement that today

[taciturnaxolotl]

is there a prettier or biome style config you would like me to follow?

[taciturnaxolotl]

made a pr! lmk if you want it to be implemented differently

[github-actions]

🎉 This issue has been resolved in version 1.2.0 🎉

The release is available on:

• pnpm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀