https://github.com/dwinugroho/og

Generate stunning Open Graph Images Effortlessly!
https://github.com/dwinugroho/og

image-processing nextjs open-graph

Last synced: 11 months ago
JSON representation

Generate stunning Open Graph Images Effortlessly!

• Host: GitHub
• URL: https://github.com/dwinugroho/og
• Owner: dwinugroho
• License: mit
• Created: 2023-07-09T14:36:04.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-12-22T21:35:03.000Z (about 2 years ago)
• Last Synced: 2025-02-19T12:47:24.819Z (11 months ago)
• Topics: image-processing, nextjs, open-graph
• Language: TypeScript
• Homepage: https://og.krafan.com
• Size: 11.3 MB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Open Graph Image Generator 😎

![Open Graph Image Generator](https://og.krafan.com/api?title=Open%20Graph%20Image%20Generator%20%20%F0%9F%9A%80%20by%20Krafan&description=Generate%20stuning%20open%20graph%20image%20effortlessly!&information=og.krafan.com)

Yo, welcome to the Open Graph Image Generator! 🚀 This thing makes whipping up Open Graph images a piece of cake. Just toss in your title, description, drop the link to your image, and bam! You got yourself a slick Open Graph image. I built this baby using [Next.js](https://nextjs.org/) and worked some magic with the [@vercel/og](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation) library to make it happen.

**Table of Contents**

- [Demo Time 🎉](#demo-time-)

- [How to Use 🤙](#how-to-use-)

- [Getting Down and Dirty Locally 💻](#getting-down-and-dirty-locally-)

- [Contributing - Let's Make Magic Together 🤝](#contributing---lets-make-magic-together-)

- [License - Go Crazy 🎉](#license---go-crazy-)

## Demo Time 🎉

Peep the live demo over here: [og.krafan.com](https://og.krafan.com)

## How to Use 🤙

1. Hop on over to [og.krafan.com](https://og.krafan.com).

2. Throw in your title and a snazzy description for that Open Graph vibe.

3. Toss in the link to the image you want to show off.

4. Smash that "Generate" button to work our magic.

5. Right-click the resulting image and hit "Save image as" to snag your Open Graph masterpiece (Or you can just grab the link from the bottom of the picture.).

## Getting Down and Dirty Locally 💻

If you wanna mess around with this project on your own machine, follow these steps:

1. Make sure you've got Node.js and yarn installed. If not, sort that out.

2. Clone this repo: `git clone https://github.com/krafanid/og.git`

3. Pop open a terminal and navigate to the project directory: `cd og`

4. Slap in the dependencies: `yarn install`

5. Fire up the dev server: `yarn dev`

6. Open your browser and cruise on over to: `http://localhost:3000`

## Contributing - Let's Make Magic Together 🤝

Hey, if you're feelin' the vibe and wanna toss in your two cents, we're all ears! Here's how you can dive in:

1. Fork this repo like a champ.

2. Create a new branch: `git checkout -b feat/new-feature`

3. Work your magic with whatever changes you've got in mind.

4. Commit those changes: `git commit -m "Added some rad new feature"`

5. Push 'em up to your branch on your repo: `git push origin feat/new-feature`

6. Send us a pull request from your branch.

## License - Go Crazy 🎉

This project is licensed under the MIT License - check out the [LICENSE](LICENSE) file for more details.

---

Crafted with ❤️ by [Dwi Nugroho](https://github.com/DwiNugroho)