🖼️ Building a Dynamic OG Image Generator with Cloudflare Workers: Edge-Powered Social Cards Made Easy

Mohammed Abdulatef — Thu, 23 Jan 2025 06:14:33 +0000

👋 Hey DEV community!

I’m excited to share Dynamic OG Image Generator, an open-source project I built to simplify generating dynamic Open Graph images for blogs, apps, and social media. It leverages Cloudflare Workers’ edge network for blazing-fast performance, and I’d love your feedback (and a star ⭐)!

The Problem

Social platforms like Twitter and LinkedIn rely on Open Graph images for rich link previews. But:

Static images get stale quickly
Dynamic solutions often require complex backends or paid services
Font/licensing issues can derail designs

This project solves those pain points with edge computing and flexible customization.

Key Features

✅ Edge-First Performance

Runs on Cloudflare Workers’ global network, generating images in <100ms.

✅ 4 Visual Styles

Pre-built templates for different use cases:

Modern gradients
Eco/tech themes
Branded designs (e.g., Cloudflare)
GitHub-style profile cards

✅ Font Loading Flexibility

Choose your strategy without licensing headaches:

// Example: Load Google Fonts  
const font = await googleFont(text, 'Noto Sans JP', 900, 'normal');  

// Or self-host fonts via GitHub  
const font = await githubFonts();

✅ Automatic Caching

Reduce compute costs by caching fonts and generated images:

// Enable cache middleware  
og.get('/og', ...middleware.cache());

✅ Tailwind CSS Integration

Style cards with familiar utility classes for rapid iteration.

How It Works

Send a GET request with parameters:

   /og?mainText=Hello World&description=Edge-Powered OG Magic&style=1

Get a 1200x630px social-ready image optimized for Twitter, LinkedIn, etc.

Sample Response:

Quickstart Guide

Clone the repo:

   git clone https://github.com/mohdlatif/og-image-generator-cloudflare-worker

Install dependencies (uses Bun 🚀):

   bun install

Deploy to Cloudflare:

   bun run deploy

For a detailed walkthrough, check out my Cloudflare Workers tutorial.

Why This Matters

Cost-effective: No need for dedicated image servers
Scalable: Workers handle spikes effortlessly
Customizable: Add your own styles/fonts in minutes

🔗 GitHub Repo

mohdlatif/og-image-generator-cloudflare-worker

If you find this useful:

⭐ Star the repo to help others discover it
💬 Share feedback – I’d love to hear your use cases!
🛠️ Contribute: PRs welcome for new styles, optimizations, or docs!

Let’s make dynamic OG images a solved problem for everyone! 🚀

P.S. Big thanks to the Hono and Vercel OG teams for their amazing tools!

EcoLedger: Rewarding Sustainable Actions

Mohammed Abdulatef — Sun, 18 Aug 2024 16:33:49 +0000

This is a submission for the Build Better on Stellar: Smart Contract Challenge : Build a dApp

What I Built

I developed EcoLedger, a sustainability tracking and rewards dApp designed to motivate individuals to adopt eco-friendly habits. EcoLedger allows users to log their sustainable actions, earn rewards, and visualize their collective impact on the environment. While I didn't fully integrate blockchain functionality due to time constraints, the app's core features are operational and demonstrate the potential for blockchain integration.

Demo

My Code

Code

Journey

Developing EcoLedger has been an exhilarating experience that pushed me to explore new technologies and concepts. My motivation stemmed from the desire to create a tangible solution to encourage sustainable living. I wanted to bridge the gap between individual actions and their collective impact, making sustainability more engaging and rewarding.

The implementation journey was both challenging and rewarding. I leveraged my experience with Astro.js and React to create a responsive and user-friendly interface. The core features I'm particularly proud of include:

A intuitive system for logging sustainable actions
A reward calculation mechanism based on user actions
A community dashboard showcasing collective impact

While I couldn't fully integrate blockchain functionality within the hackathon timeframe, this project has given me valuable insights into how blockchain can enhance transparency, security, and decentralization in sustainability tracking. I've learned a lot about the potential of smart contracts and tokenization in creating incentive systems.

My experience with the Stellar ecosystem, although limited in this iteration, has been enlightening. The resources provided for the hackathon were comprehensive and helped me understand the basics of blockchain technology and its applications.

Moving forward, I'm excited about the potential of EcoLedger. My next steps would be to fully integrate Stellar blockchain functionality, implement Soroban smart contracts for action logging and reward distribution, and create a custom token for the reward system. I also plan to enhance the AI-powered suggestions feature to provide more personalized sustainability goals.

This hackathon has been a fantastic learning experience, pushing me to think creatively about how technology can address real-world sustainability challenges. I'm grateful for the opportunity and look forward to continuing my journey in blockchain development and sustainable tech solutions.

DEV Community: Mohammed Abdulatef