og.anuragroy.dev's Introduction

og.anuragroy.dev

OpenGraph Image Generator for anuragroy.dev using @vercel/og and Vercel Edge functions.

Usage

Enter your custom values, copy the generated URL or download the generated image and use it wherever you want.

Tips on usage:

To override default values and hide an element, pass a single space character (' ') as its input.
All fields which accept image URLs, accept emojis as well!

Using this repo as a template

If you want to create your own OG Image generator from this repo, you can do so very easily:

Prerequisites

Make sure you have the following installed before proceeding:

Node.js v14.18.0+ (v18+ recommended)
Package manager of your choice (npm, yarn, pnpm, etc.)

Steps

1. Clone this repo:

git clone https://github.com/anurag-roy/og.anuragroy.dev.git

2. Install dependencies

npm install

3. Start server locally

npm run dev

This will start a local development server where you will be able to make changes to the code and preview them live.

To customise the actual generated image, you have to edit pages/api/index.tsx.

Here, you can edit the fonts used, parameters accepted by the API, look and feel of the image, etc. The Vercel docs have a lot of examples which should cover most use cases.
To customise anything in the UI, you can start by looking at components/Main/index.tsx which contains the main form.

4. Building and previewing locally

To build the project and test the production build locally:

npm run build
npm start

This will start a local server with the final production build.

5. Deploying

Currently this can only be deployed on Vercel's Edge platform due to the dependency on @vercel/og. But on the bright side, they have a very generous Hobby plan and extremely simple deployments.

Create an account on Vercel, if you don't have one already.
Upload this repo to GitHub (or GitLab or whatever). Create a new project on Vercel and link it to your repo.
Thats it, no other configuration or env variables needed! (Just make sure your selected Node.js version is 18.x).
Visit the project URL and you should now have your own OG image generator!

Contact

License

og.anuragroy.dev's People

Contributors

Stargazers

Watchers

og.anuragroy.dev's Issues

Instructions to use this repo

Hi @anurag-roy, thanks for creating this OG service.

I'm unfamiliar with NextJS development and deployment. If you can include some documentation in your readme regarding how to setup this project, it will be great.

Basically I am looking for :

steps after I clone your repository
what are the prerequisites?
what commands do I have to run?
how do I preview locally?
how do I deploy it to Vercel (is it just connecting my repo or do I need to set some environment variables or any other steps?).

To simplify your job, I have created a draft below, which you can use if you wish.
Tip: you can click on the three dots -> Edit -> Select all the Markdown content -> Copy it. Now you can simply paste this in the readme to get started. Hope this will save you some time.

space between words

hi,

thanks for this great app.

if meta description is more then one word, example: test test2 test3, facebook does not fetch the image.

linkedin does.

But if added %20 between work it works.

So how can i add %20 between words for both title and description words?

thank you.

Recommend Projects

anurag-roy / og.anuragroy.dev Goto Github PK