feat: Add CldOgImage component

[taciturnaxolotl]

Description

Added the CldOgImage component in astro-cloudinary/src/components/ and exported it in the index.ts for the same directory.

Issue Ticket Number

Fixes #23

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Fix or improve the documentation
• This change requires a documentation update

Checklist

• I have followed the contributing guidelines of this project as mentioned in CONTRIBUTING.md
• I have created an issue ticket for this PR
• I have checked to ensure there aren't other open Pull Requests for the same update/change?
• I have performed a self-review of my own code
• I have run tests locally to ensure they all pass
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes needed to the documentation

[vercel]

@kcoderhtml is attempting to deploy a commit to the Cloudinary DevX Team on Vercel.

A member of the Team first needs to authorize it.

[taciturnaxolotl]

I'm holding off on the documentation for now until I'm sure this is how this should be implemented

[taciturnaxolotl]

I took the route of requiring the twitterTitle parameter and throwing an error when it isn't defined. I did double-check the Astro docs, but I didn't see any way to get the page title without the user passing it as a prop.

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
astro-cloudinary	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 1, 2024 4:11pm

[colbyfayock]

hey @kcoderhtml this seems to look good to me! want to create some basic documentation around it? you could largely copy a lot from Next Cloudinary if you'd like, it will also help ensure that its working properly

[taciturnaxolotl]

happy to! where should those docs go?

[taciturnaxolotl]

oh wait nvm; i got confused when I loaded the docs site lol

[taciturnaxolotl]

I added a configuration page and a basic usage page with an example of simple usage and then more complex usage using the AI API and transformations. I mainly just redirect the user to take a look at the CldImage component as the same options apply, and it seems silly to basically completely duplicate an existing page.

[taciturnaxolotl]

If you want me to add the rest of the options I can though!

[colbyfayock]

hey @kcoderhtml i pushed a change that uses the new component in the head of hte documentation to dogfood it. it seems to work. once it's merged, if you have time, would be great if you wouldn't mind spot checking the production website to help me double check

thanks for your contribution. this PR is eligible for free Cloudinary Hackatoberfest swag. Please send me an email at hacktoberfest@cloudinary.com with your name, GitHub username, and a link to the PR where I'll send further instructions.

Happy Hacktoberfest!

[colbyfayock]

@all-contributors please add @kcoderhtml for code

[allcontributors]

@colbyfayock

I've put up a pull request to add @kcoderhtml! 🎉

[github-actions]

🎉 This PR is included in version 1.2.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[taciturnaxolotl]

i'll check it right now! thanks for the swag :) I got some last year and have been wearing my tshirt super often lol

[taciturnaxolotl]

Tested and it seems to be working great! I don't notice anything weird.

[colbyfayock]

awesome thank you!!