https://github.com/meldiron/almost-bannerbear

Function to dynamically generate OG images for your web app.
https://github.com/meldiron/almost-bannerbear

appwrite

Last synced: 4 days ago
JSON representation

Function to dynamically generate OG images for your web app.

• Host: GitHub
• URL: https://github.com/meldiron/almost-bannerbear
• Owner: Meldiron
• License: mit
• Created: 2023-09-14T15:43:04.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-26T18:31:31.000Z (over 1 year ago)
• Last Synced: 2024-12-27T13:51:55.237Z (7 days ago)
• Topics: appwrite
• Language: HTML
• Homepage: https://og-image-generator.appwrite.global/
• Size: 4.19 MB
• Stars: 12
• Watchers: 2
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
![Cover](docs/og-image.png)

# ⚡ Node.js OG Image Generator Function

Function to dynamically generate OG images for your web app.

## 🧰 Usage

### GET /

Returns HTML website with form to build your OG image HTML tag.

**Response**

Sample `200` Response:

```html

 ...

```

![HTML page](docs/builder.png)

### GET /image.png

Returns PNG of generated OG image.

**Parameters**

| Name  | Description                                                                  | Location | Type   | Sample Value  |

| ----- | ---------------------------------------------------------------------------- | -------- | ------ | ------------- |

| title | Page title                                                                   | URL      | String | `Hello World` |

| url   | URL of page to genrate subtitle                                              | FormURL  | String | `/template`   |

| icon  | Icon name from [Heroicons](https://heroicons.com/) to use in OG image design | URL      | String | `globe-alt`   |

**Response**

`200` Response:

```json

(image buffer)

```

## ⚙️ Configuration

| Setting           | Value         |

| ----------------- | ------------- |

| Runtime           | Node (18.0)   |

| Entrypoint        | `src/main.js` |

| Build Commands    | `npm install` |

| Permissions       | `any`         |

| Timeout (Seconds) | 15            |

## 🔒 Environment Variables

### THEME

Toggle between dark and light theme for OG image.

| Question      | Answer            |

| ------------- | ----------------- |

| Required      | No                |

| Sample Value  | `dark` or `light` |

| Default Value | `dark`            |

### BRAND_COLOR

Hex color of your brand to personalize OG image color scheme.

| Question      | Answer    |

| ------------- | --------- |

| Required      | No        |

| Sample Value  | `#3b82f6` |

| Default Value | `#f02e65` |

### BRAND_NAME

Name of your company used when generating OG image.

| Question      | Answer     |

| ------------- | ---------- |

| Required      | No         |

| Sample Value  | `Appwrite` |

| Default Value | `Website`  |

## 📽️ Demo

https://github.com/Meldiron/og-image-generator/assets/19310830/726e1d96-e594-4be3-898a-6400bba82dc9