DEV Community: gleamso

🎁 The Dev-First OpenGraph (OG) Image Tool You Need (50% Off Lifetime Access!)

gleamso — Tue, 24 Dec 2024 07:12:47 +0000

Hey dev community! Ever spent an hour in Figma just to create a simple social preview image? Yeah, me too. That frustration led me to build Gleam.so, and today I'm excited to share what we've created together (with lots of feedback from this amazing community!).

The Breaking Point 💭

Two months ago, I was updating social images for my blog. Open Figma, create new file, set dimensions, add text, export, test on Twitter, realize text is too small, repeat...

You know the drill. 2 hours later, I still wasn't happy with the results.

That's when I thought: "We're developers. We should be able to solve this better."

What We've Built 🛠️

Gleam.so is what I wish existed when I needed OG images:

Design everything in one place - no more jumping between tools
Preview instantly across different platforms
Export only when perfect - try everything for free
Developer-focused workflow - it just makes sense

Recent Updates ✨

Based on your feedback, we've made some major improvements:

Free Design Mode
- Preview ALL premium templates
- Try ALL preset sizes
- Design & customize everything
- See exactly how it looks
Performance Boost
- Generation time: 450ms → 200ms
- Instant previews
- Optimized outputs
Developer Experience

Simple, fast REST API

The Road Ahead 🗺️

I'm committed to making this the best tool for developers. Here's what's coming:

January 2025

CI/CD integration
Custom font support
Batch processing

Q1 2025

Framework-specific packages
Template API
Advanced customization
Performance analytics

Beyond

AI-powered suggestions
Dynamic content
Custom plugins

🎄 Holiday Gift for Devs!

To celebrate our launch and the holiday season:

50% OFF Lifetime Access with code: XMAS2024

What you get:

⚡️ Unlimited exports
🔧 Full API access
🎨 All premium templates
💫 Priority support
🚀 All future updates

Try It Today!

Visit gleam.so
Design your perfect OG image
Use code XMAS2024 at checkout

Let's Build Together! 🤝

This tool is built for developers, by a developer. I'd love to hear your:

Feature requests
Integration needs
Use cases
Feedback

Drop them in the comments or follow updates on Twitter/X

From 10s to 100ms: A Developer's Journey in Image Processing

gleamso — Wed, 18 Dec 2024 10:54:34 +0000

It started with a seemingly simple request: "Can we add social preview images to our blog posts?" Little did I know this innocent question would lead me down a path of deep technical exploration and performance optimization that would fundamentally change how I approach image processing.

The Initial Challenge

Ten seconds. That's how long it took to generate a single social preview image when I first implemented the feature. The console mockingly displayed the execution time, and I could almost hear our users' collective sighs as they waited for their previews to generate.

The initial implementation was straightforward but naive:

async function generatePreview(text: string) {
  // Load image and fonts
  const background = await loadImage('background.jpg');
  const font = await loadFont('Inter-Bold.ttf');

  // Create canvas
  const canvas = createCanvas(1200, 630);
  const ctx = canvas.getContext('2d');

  // Draw background
  ctx.drawImage(background, 0, 0);

  // Add text
  ctx.font = `bold 64px Inter`;
  ctx.fillText(text, 100, 315);

  return canvas.toBuffer();
}

The problem wasn't immediately apparent during development, but it became glaringly obvious in production. Each preview generation was loading resources from scratch, processing images synchronously, and handling text rendering inefficiently.

The First Breakthrough

The first significant improvement came from understanding the importance of resource caching. Instead of loading fonts and background images for each request, I implemented a preloading system:

// Preload resources once
const resources = {
  background: await loadImage('background.jpg'),
  font: await loadFont('Inter-Bold.ttf')
};

async function generatePreview(text: string) {
  const canvas = createCanvas(1200, 630);
  const ctx = canvas.getContext('2d');

  ctx.drawImage(resources.background, 0, 0);
  ctx.font = `bold 64px Inter`;
  ctx.fillText(text, 100, 315);

  return canvas.toBuffer();
}

This simple change reduced generation time from 10 seconds to 3 seconds. Progress, but not enough.

Understanding the Image Pipeline

The real breakthrough came from deeply understanding the image processing pipeline. Every operation - loading, processing, encoding - had optimization potential. I discovered that many operations could be parallelized or eliminated entirely.

Through careful profiling, I identified these key bottlenecks:

Image decoding
Canvas operations
Buffer encoding
Memory management

The Technical Evolution

The solution emerged as a multi-layered approach to optimization:

class ImageProcessor {
  private readonly cache = new LRUCache({
    max: 100,
    maxAge: 1000 * 60 * 60 // 1 hour
  });

  async generatePreview(text: string): Promise<Buffer> {
    const cacheKey = this.getCacheKey(text);

    if (this.cache.has(cacheKey)) {
      return this.cache.get(cacheKey);
    }

    const image = await this.createOptimizedPreview(text);
    this.cache.set(cacheKey, image);

    return image;
  }

  private async createOptimizedPreview(text: string): Promise<Buffer> {
    const canvas = await this.getPrewarmCanvas();

    // Batch canvas operations
    await this.batchProcess(canvas, [
      () => this.drawBackground(canvas),
      () => this.optimizeText(canvas, text),
      () => this.applyEffects(canvas)
    ]);

    return this.optimizedEncode(canvas);
  }
}

Each component of the system was optimized:

Canvas operations were batched to reduce context switches
Text rendering used pre-calculated layouts
Image encoding utilized hardware acceleration when available
Memory was carefully managed to prevent leaks

The Results

The improvements were dramatic:

Generation Time:

Initial implementation: 10,000ms
After basic caching: 3,000ms
After pipeline optimization: 800ms
Final optimized version: 100ms

Memory Usage:

Initial: 250MB per generation
Final: 50MB with efficient reuse

Key Learnings

This journey taught me several invaluable lessons about image processing and performance optimization:

Understanding the entire processing pipeline is crucial
Resource preloading and reuse dramatically impact performance
Memory management is as important as processing speed
Caching strategies need to match usage patterns

Moving Forward

These learnings haven't just improved one system; they've influenced how I approach all performance optimization challenges. The principles of resource management, operation batching, and pipeline optimization apply broadly across many development scenarios.

I've since applied these concepts to build more efficient image processing systems, including my work on Gleam.so, where we've achieved consistent sub-100ms generation times for dynamic social images.

Conclusion

The journey from 10 seconds to 100ms wasn't just about making images load faster. It was about understanding systems deeply, questioning assumptions, and continuously iterating toward better solutions.

For developers facing similar challenges, remember that dramatic performance improvements often come from understanding and optimizing the entire system, not just individual components.

What performance optimization journeys have you experienced? Share your stories and learnings in the comments.

Working to make the web faster, one optimization at a time.

/llms.txt: A Simple Way to Control How AI Bots See Your Site 🤖

gleamso — Tue, 17 Dec 2024 04:29:23 +0000

With the rise of AI web crawlers, many sites are looking for ways to control how their content is used for AI training. While robots.txt has been the standard for traditional crawlers, there's a growing adoption of LLMs.txt for AI-specific directives.

What is LLMs.txt?

https://llmstxt.org/

LLMs.txt is a proposed standard (similar to robots.txt) that lets website owners specify:

Whether AI models can train on their content
Which parts of the site are allowed/disallowed for training
Attribution requirements
Rate limiting for AI crawlers

Quick Implementation Guide

Add an LLMs.txt file to your root directory:

# Allow training but require attribution
Allow: /blog/*
Attribution: Required
Company: YourCompany

# Disallow training on specific sections
Disallow: /private/*
Disallow: /premium/*

# Rate limiting
Crawling-Rate: 10r/m

Real-World Examples

I looked at how major tech companies implement LLMs.txt.
You can check it here: https://llmstxt.site/

Here are some interesting patterns I found:

Most companies allow training on public blog content
Documentation is commonly restricted
Premium content is usually disallowed

Best Practices

Start with a default policy
Be explicit about attribution
Consider rate limits
Review periodically

Getting Started

Just create an LLMs.txt file in your site's root directory.
Here is my llms.txt: https://gleam.so/llms.txt

What are your thoughts on LLMs.txt? Are you planning to implement it on your sites?

Building CrossPost: A Publishing Tool for Technical Writers

gleamso — Sun, 15 Dec 2024 17:35:57 +0000

Hey devs! I'm building CrossPost to solve a common problem we face - the hassle of publishing technical content across multiple platforms.

What is CrossPost?

A publishing tool that lets you:

Write in Markdown
Publish to multiple platforms (Dev.to, Medium, etc.)
Maintain consistent formatting
Track performance metrics

Why?

As a developer who writes, I spend too much time reformatting and cross-posting content. CrossPost automates this process.

Current Status

Pre-launch phase
Building MVP
Collecting early access signups

Want to try it early? Join the waitlist: https://getcrosspost.com

gleam.so API - Programmatic OG Image Generation

gleamso — Wed, 11 Dec 2024 16:38:34 +0000

After months of development, I'm opening the gleam.so API beta for programmatic OpenGraph image generation.

Key Features

Generate OG images via API
Pre-built templates optimized for social sharing
2,000 monthly requests for lifetime members
Priority support & early features

Tech Stack

Next.js 14 App Router
TypeScript
Satori + Sharp for image generation
Deployed on Vercel

API Design Choices

Simple, predictable REST endpoints
Consistent error handling
Rate limiting with clear headers
Automatic image optimization

Try it out: gleam.so

Building a SaaS as a Solo Developer: Month 1 Learnings

gleamso — Wed, 11 Dec 2024 15:08:54 +0000

After a month of building gleam.so as a solo developer, I want to share my experience and key learnings. This journey has taught me valuable lessons about technical decisions, development processes, and overcoming challenges alone.

Flash Sale: 75% off all plans

The Initial Vision

When I started building gleam.so, I had a clear goal: create an OpenGraph image generator that developers would actually enjoy using. The existing solutions felt either too complex or too limiting, leaving a gap for a developer-focused tool that balanced simplicity with power.

Technical Foundation

The technical stack selection proved crucial for solo development. I chose:

// Tech Stack
const stack = {
  framework: 'Next.js 14',
  styling: 'Tailwind CSS + shadcn/ui',
  database: 'Supabase',
  deployment: 'Vercel',
  image_processing: {
    primary: '@vercel/og',
    optimization: 'sharp'
  }
};

This combination offered several advantages for solo development:

First, Next.js 14 with the App Router provided a robust foundation for rapid development. The built-in optimizations and edge runtime support meant I could focus on features rather than infrastructure.

The decision to use shadcn/ui with Tailwind CSS significantly accelerated UI development. Instead of spending days designing components, I could compose interfaces quickly while maintaining a professional look:

// Component-driven development
const ImagePreview = () => {
  return (
    <Card className="p-4">
      <CardHeader>
        <CardTitle>Preview</CardTitle>
        <CardDescription>
          See how your image will appear on social media
        </CardDescription>
      </CardHeader>
      <CardContent>
        <PreviewRenderer />
      </CardContent>
    </Card>
  );
};

Development Process

Working alone required a disciplined approach to development. I established a simple but effective process:

// Daily development cycle
interface DevelopmentCycle {
  morning: {
    review: 'Previous day\'s work',
    plan: 'Top 3 priorities',
    setup: 'Development environment'
  },
  development: {
    focus: '90-minute blocks',
    breaks: 'Every 90 minutes',
    documentation: 'As you code'
  },
  evening: {
    review: 'Day\'s progress',
    testing: 'New features',
    planning: 'Next day\'s goals'
  }
}

This structure helped maintain momentum while ensuring code quality didn't suffer from working solo.

Major Challenges

1. Feature Scope Control

The biggest challenge was managing feature scope. Without a team to provide perspective, it's easy to overcomplicate things. I implemented a simple rule:

// Feature evaluation framework
const evaluateFeature = (feature: Feature): boolean => {
  return (
    feature.implementationTime <= 1 day &&
    feature.solvesCriticalProblem &&
    feature.maintainableByOne
  );
};

2. Technical Debt Management

Working alone meant being extra careful about technical debt. I adopted a "pay as you go" approach:

// Technical debt management
interface TechDebtPolicy {
  immediate: 'Critical bugs, Security issues',
  weekly: 'Code refactoring, Performance optimization',
  monthly: 'Architecture review, Dependency updates'
}

3. Quality Assurance

Testing became crucial when working alone. I implemented an automated testing strategy:

// Test-driven development approach
describe('OG Image Generation', () => {
  test('generates correct dimensions', async () => {
    const image = await generateOGImage({
      title: 'Test Image',
      template: 'default'
    });
    expect(image.width).toBe(1200);
    expect(image.height).toBe(630);
  });

  test('handles errors gracefully', async () => {
    const result = await generateOGImage({
      title: null // Invalid input
    });
    expect(result.fallback).toBeDefined();
  });
});

Key Learnings

Technical Decisions Matter More Solo

When working alone, every technical decision has amplified impact. I learned to:

Choose mature, well-documented technologies
Prioritize developer experience for solo productivity
Implement automation early
Focus on maintainable code

Time Management is Critical

I developed a focused approach to time management:

interface TimeAllocation {
  development: '70% of time',
  planning: '15% of time',
  maintenance: '10% of time',
  exploration: '5% of time'
}

Community Support is Invaluable

The dev community provided crucial support through:

Technical feedback on architecture decisions
Early testing and bug reports
Feature suggestions and use cases
Moral support and encouragement

Moving Forward

After one month, gleam.so has evolved from an idea to a working product with real users. The focus now is on:

Expanding the template library based on user needs
Improving generation performance
Adding API access for automation
Building a sustainable revenue model

For Fellow Solo Developers

If you're considering the solo developer path, here are my recommendations:

Start with a clear, focused problem
Choose boring technology that lets you move fast
Build in public to get early feedback
Automate everything you can
Stay close to your users

Let's connect and share experiences! Drop your questions or share your solo development story in the comments.

Building gleam.so in public. Follow along as we make OpenGraph images less painful for developers!

Automating OG Images: From Manual Design to API-Driven Generation

gleamso — Sat, 07 Dec 2024 11:25:38 +0000

The journey from manually creating OpenGraph images to implementing an automated API-driven system represents a critical evolution for growing web applications. Today, I'll share how I transformed this process at gleam.so, moving from individual Figma designs to an automated system handling thousands of images.

The Manual Phase: Understanding the Baseline

Initially, like many developers, I created OG images manually:

// Early implementation
const getOGImage = (postId: string) => {
  return `/images/og/${postId}.png`;  // Manually created in Figma
};

This process typically involved:

Opening Figma for each new image
Adjusting text and elements
Exporting to the correct size
Uploading and linking the image

Average time per image: 15-20 minutes.

First Step: Templating System

The first automation step involved creating reusable templates:

interface OGTemplate {
  layout: string;
  styles: {
    title: TextStyle;
    description?: TextStyle;
    background: BackgroundStyle;
  };
  dimensions: {
    width: number;
    height: number;
  };
}

const generateFromTemplate = async (
  template: OGTemplate,
  content: Content
): Promise<Buffer> => {
  const svg = renderTemplate(template, content);
  return convertToImage(svg);
};

This reduced creation time to 5 minutes per image but still required manual intervention.

Building the API Layer

The next evolution introduced a proper API:

// api/og/route.ts
import { ImageResponse } from '@vercel/og';
import { getTemplate } from '@/lib/templates';

export const config = {
  runtime: 'edge',
};

export async function GET(request: Request) {
  try {
    const { searchParams } = new URL(request.url);
    const template = getTemplate(searchParams.get('template') || 'default');
    const content = {
      title: searchParams.get('title'),
      description: searchParams.get('description'),
    };

    const imageResponse = new ImageResponse(
      renderTemplate(template, content),
      {
        width: 1200,
        height: 630,
      }
    );

    return imageResponse;
  } catch (error) {
    console.error('OG Generation failed:', error);
    return new Response('Failed to generate image', { status: 500 });
  }
}

Implementing Caching Layers

Performance optimization required multiple caching layers:

class OGCache {
  private readonly memory = new Map<string, Buffer>();
  private readonly redis: Redis;
  private readonly cdn: CDNStorage;

  async getImage(key: string): Promise<Buffer | null> {
    // Memory cache
    if (this.memory.has(key)) {
      return this.memory.get(key);
    }

    // Redis cache
    const redisResult = await this.redis.get(key);
    if (redisResult) {
      this.memory.set(key, redisResult);
      return redisResult;
    }

    // CDN cache
    const cdnResult = await this.cdn.get(key);
    if (cdnResult) {
      await this.warmCache(key, cdnResult);
      return cdnResult;
    }

    return null;
  }
}

Resource Optimization

Handling increased load required careful resource management:

class ResourceManager {
  private readonly queue: Queue;
  private readonly maxConcurrent = 50;
  private activeJobs = 0;

  async processRequest(params: GenerationParams): Promise<Buffer> {
    if (this.activeJobs >= this.maxConcurrent) {
      return this.queue.add(params);
    }

    this.activeJobs++;
    try {
      return await this.generateImage(params);
    } finally {
      this.activeJobs--;
    }
  }
}

Integration Example

Here's how it all comes together in a Next.js application:

// components/OGImage.tsx
export function OGImage({ title, description, template = 'default' }) {
  const ogUrl = useMemo(() => {
    const params = new URLSearchParams({
      title,
      description,
      template,
    });
    return `/api/og?${params.toString()}`;
  }, [title, description, template]);

  return (
    <Head>
      <meta property="og:image" content={ogUrl} />
      <meta property="og:image:width" content="1200" />
      <meta property="og:image:height" content="630" />
    </Head>
  );
}

Performance Results

The automated system achieved significant improvements:

Generation time: <100ms (down from 15-20 minutes)
Cache hit rate: 95%
Error rate: <0.1%
CPU usage: 15% of previous implementation
Cost per image: $0.0001 (down from ~$5 in manual labor)

Key Learnings

Through this automation journey, several crucial insights emerged:

Image Generation Strategy
- Pre-warm caches for predictable content
- Implement fallbacks for failures
- Optimize template rendering first
Resource Management
- Implement request queuing
- Monitor memory usage
- Cache aggressively
Error Handling
- Provide fallback images
- Log failures comprehensively
- Monitor generation metrics

The Path Forward

The future of OG image automation lies in:

AI-enhanced template selection
Dynamic content optimization
Predictive cache warming
Real-time performance tuning

Simplifying Implementation

While building a custom solution offers valuable learning experiences, it requires significant development and maintenance effort. That's why I built gleam.so, which provides this entire automation stack as a service.

Now you can:

Design templates visually
Preview all options for free
Generate images via API (Open beta-test for lifetime users)
Focus on your core product

75% off lifetime access ending soon ✨

Share Your Experience

Have you automated your OG image generation? What challenges did you face? Share your experiences in the comments!

Part of the Making OpenGraph Work series. Follow for more web development insights!

7 Common OpenGraph Mistakes and How to Fix Them

gleamso — Wed, 04 Dec 2024 06:31:24 +0000

Hey developers! 👋 After helping hundreds of Gleam.so users with their OG images, I've noticed some common patterns. Here are the top mistakes and how to fix them.

1. Incorrect Image Dimensions 📏

The Problem

<!-- Common mistake -->
<meta property="og:image" content="https://example.com/image.png" />
<!-- Missing width/height -->
<!-- Using wrong dimensions like 800x600 -->

One user shared:

"My images looked perfect on Twitter but were cropped weirdly on LinkedIn."

The Fix

<!-- Correct implementation -->
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Pro Tip: Use 1200x630px as your default size. It works well across all platforms.

2. Text Readability Issues 👀

The Problem

// Common mistake: Not considering mobile view
const title = {
  fontSize: '32px',
  color: '#666666',  // Low contrast
  fontWeight: 'normal'
};

User feedback:

"Text was unreadable when shared on mobile devices."

The Fix

// Text optimization
const titleStyle = {
  fontSize: '72px',
  color: '#000000',
  fontWeight: 'bold',
  lineHeight: 1.2,
  maxWidth: '80%'  // Prevent edge bleeding
};

// Contrast checker
const hasGoodContrast = (bg: string, text: string): boolean => {
  return calculateContrast(bg, text) >= 4.5;
};

3. Missing Fallback Data 🔄

The Problem

<!-- Only including og:image -->
<meta property="og:image" content="/path/to/image.png" />

User experience:

"When OG image failed to load, posts looked broken."

The Fix

<!-- Complete fallback chain -->
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:image:alt" content="Description of your content" />
<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your Description" />

<!-- Twitter-specific fallbacks -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og.png" />

4. Cache Issues 🔄

The Problem

// Image updates not reflecting
const ogImage = '/static/og-image.png';

Common complaint:

"Updated my OG image but social platforms still show the old one."

The Fix

// Add version control
const getOGImageUrl = (baseUrl: string): string => {
  const version = Date.now();
  return `${baseUrl}?v=${version}`;
};

// Usage
<meta 
  property="og:image" 
  content={getOGImageUrl('https://example.com/og.png')}
/>

5. Poor Performance ⚡

The Problem

// Generating images on every request
const generateOG = async (text: string) => {
  const svg = createSVG(text);
  const png = await convertToPNG(svg);
  return png;
};

User feedback:

"OG image generation was slowing down my entire site."

The Fix

// Implement caching
const cachedGenerate = async (text: string) => {
  const cacheKey = createHash(text);
  const cached = await cache.get(cacheKey);

  if (cached) return cached;

  const image = await generateOG(text);
  await cache.set(cacheKey, image, '7d');

  return image;
};

6. Broken URLs 🔗

The Problem

<!-- Relative paths -->
<meta property="og:image" content="/images/og.png" />

Common issue:

"My OG images work locally but not in production."

The Fix

// Always use absolute URLs
const getAbsoluteUrl = (path: string): string => {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
  return new URL(path, baseUrl).toString();
};

// Usage
<meta 
  property="og:image" 
  content={getAbsoluteUrl('/images/og.png')}
/>

7. Missing Mobile Optimization 📱

The Problem

// Desktop-only testing
const testOG = async (url: string) => {
  const response = await fetch(url);
  return response.ok;
};

User experience:

"Images looked great on desktop but terrible on mobile shares."

The Fix

// Comprehensive testing
const testOGImage = async (url: string) => {
  const tests = [
    checkDimensions,
    checkMobileRendering,
    checkTextSize,
    checkContrast,
    checkLoadTime
  ];

  return Promise.all(tests.map(test => test(url)));
};

Quick Fix Checklist ✅

Use 1200x630px dimensions
Ensure text is 72px+ for titles
Implement proper fallbacks
Use absolute URLs
Add cache busting
Test on mobile
Monitor performance

Need a Reliable Solution?

If you're tired of dealing with these issues, try Gleam.so.

I handle all these optimizations automatically, and you can now design & preview everything for free!

Share Your Experience 🤝

What OG image issues have you encountered? Drop them in the comments and let's solve them together!

Part of the Making OpenGraph Work series. Follow for more web development insights!

Building an OpenGraph Image API with Next.js and Sharp

gleamso — Mon, 02 Dec 2024 02:25:44 +0000

In today's tutorial, I will guide you through creating a production-ready OpenGraph image API using Next.js and Sharp. This implementation draws from my experience building Gleam.so's image generation system, which now handles thousands of requests daily.

Setting Up the API Foundation

Let's begin with the basic API route structure in Next.js 14:

// app/api/og/route.ts
import { NextResponse } from 'next/server';
import sharp from 'sharp';
import { ImageProcessor } from '../../../lib/image-processor';

export const runtime = 'edge';

export async function GET(request: Request) {
  try {
    const { searchParams } = new URL(request.url);
    const title = searchParams.get('title');
    const theme = searchParams.get('theme') || 'light';

    if (!title) {
      return new NextResponse('Missing title parameter', { 
        status: 400 
      });
    }

    const image = await generateOGImage({
      title,
      theme
    });

    return new NextResponse(image, {
      headers: {
        'Content-Type': 'image/png',
        'Cache-Control': 'public, max-age=31536000, immutable'
      }
    });
  } catch (error) {
    console.error('OG Generation failed:', error);
    return new NextResponse('Image generation failed', { 
      status: 500 
    });
  }
}

Implementing Image Processing

The image processing logic requires careful consideration of performance and quality. Here's how we can implement it:

// lib/image-processor.ts
import sharp from 'sharp';

export class ImageProcessor {
  private readonly width = 1200;
  private readonly height = 630;
  private readonly padding = 60;

  async generateOGImage(options: GenerationOptions): Promise<Buffer> {
    const {
      title,
      theme = 'light',
      template = 'default'
    } = options;

    // Create base image
    const svg = await this.generateSVG({
      title,
      theme,
      template
    });

    // Convert SVG to PNG with optimizations
    return sharp(Buffer.from(svg))
      .resize(this.width, this.height)
      .png({
        compressionLevel: 9,
        quality: 80
      })
      .toBuffer();
  }

  private async generateSVG(options: SVGOptions): Promise<string> {
    const { title, theme } = options;
    const backgroundColor = theme === 'light' ? '#ffffff' : '#1a1a1a';
    const textColor = theme === 'light' ? '#000000' : '#ffffff';

    return `
      <svg
        width="${this.width}"
        height="${this.height}"
        viewBox="0 0 ${this.width} ${this.height}"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect width="100%" height="100%" fill="${backgroundColor}"/>
        <text
          x="${this.padding}"
          y="${this.height / 2}"
          font-family="Inter"
          font-size="64"
          font-weight="bold"
          fill="${textColor}"
        >
          ${this.escapeHTML(title)}
        </text>
      </svg>
    `;
  }

  private escapeHTML(text: string): string {
    return text
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
  }
}

Implementing Error Handling

Robust error handling is crucial for a production API. Here's a comprehensive approach:

// lib/error-handler.ts
export class ErrorHandler {
  async handleError(error: Error, context: ErrorContext): Promise<Buffer> {
    // Log error with context
    console.error('Image generation failed:', {
      error,
      context,
      timestamp: new Date().toISOString()
    });

    // Generate fallback image
    return this.generateFallbackImage(context);
  }

  private async generateFallbackImage(context: ErrorContext): Promise<Buffer> {
    // Create a simple fallback image
    const fallbackSVG = `
      <svg width="1200" height="630">
        <rect width="100%" height="100%" fill="#f8f9fa"/>
        <text
          x="50%"
          y="50%"
          text-anchor="middle"
          font-family="system-ui"
          font-size="48"
          fill="#343a40"
        >
          ${context.title || 'Image Unavailable'}
        </text>
      </svg>
    `;

    return sharp(Buffer.from(fallbackSVG))
      .png()
      .toBuffer();
  }
}

Performance Optimization

To ensure optimal performance, let's implement caching and optimization strategies:

// lib/cache-manager.ts
import { Redis } from 'ioredis';

export class CacheManager {
  private redis: Redis;
  private readonly TTL = 7 * 24 * 60 * 60; // 1 week

  constructor() {
    this.redis = new Redis(process.env.REDIS_URL);
  }

  async getFromCache(key: string): Promise<Buffer | null> {
    try {
      const cached = await this.redis.get(key);
      return cached ? Buffer.from(cached, 'base64') : null;
    } catch (error) {
      console.error('Cache fetch failed:', error);
      return null;
    }
  }

  async setInCache(key: string, image: Buffer): Promise<void> {
    try {
      await this.redis.set(
        key,
        image.toString('base64'),
        'EX',
        this.TTL
      );
    } catch (error) {
      console.error('Cache set failed:', error);
    }
  }
}

// Implementation in API route
import { CacheManager } from '../lib/cache-manager';

const cacheManager = new CacheManager();

export async function GET(request: Request) {
  const cacheKey = generateCacheKey(request.url);

  // Try cache first
  const cached = await cacheManager.getFromCache(cacheKey);
  if (cached) {
    return new NextResponse(cached, {
      headers: {
        'Content-Type': 'image/png',
        'Cache-Control': 'public, max-age=31536000, immutable'
      }
    });
  }

  // Generate and cache if not found
  const image = await generateOGImage(/* params */);
  await cacheManager.setInCache(cacheKey, image);

  return new NextResponse(image, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=31536000, immutable'
    }
  });
}

Monitoring and Analytics

To maintain and improve the system, implement monitoring:

// lib/analytics.ts
export class Analytics {
  async trackGeneration(params: {
    duration: number;
    success: boolean;
    cached: boolean;
    error?: Error;
  }) {
    await fetch(process.env.ANALYTICS_ENDPOINT, {
      method: 'POST',
      body: JSON.stringify({
        event: 'og_generation',
        ...params,
        timestamp: new Date().toISOString()
      })
    });
  }
}

Using the API

Here's how to use the API in your Next.js application:

// Example usage in your pages
const OGImage = ({ title }: { title: string }) => {
  const ogImageUrl = `${process.env.NEXT_PUBLIC_API_URL}/api/og?title=${
    encodeURIComponent(title)
  }&theme=light`;

  return (
    <Head>
      <meta property="og:image" content={ogImageUrl} />
      <meta property="og:image:width" content="1200" />
      <meta property="og:image:height" content="630" />
    </Head>
  );
};

Performance Considerations

A few key points to ensure optimal performance:

Edge Runtime usage for faster response times
Aggressive caching strategy
Image optimization with Sharp
Error handling with fallbacks
Monitoring for continuous improvement

Looking for a Ready Solution?

While building your own API is educational, you might want to consider using Gleam.so for a production-ready solution. It implements all these best practices and more, saving you development and maintenance time.

Questions?

Drop your questions in the comments! I'm here to help you implement this in your own projects.

Part of the Making OpenGraph Work series. Follow for more web development insights!

10 Advanced OG Image Techniques I Learned Building gleam.so 🔍

gleamso — Fri, 29 Nov 2024 08:00:00 +0000

Building an OG image generator taught me tricks that aren't widely documented. Here are 10 advanced techniques that will level up your OG image game.

1. Dynamic Font Scaling 📏

const calculateFontSize = (text: string, maxWidth: number): number => {
  const baseSize = 72;
  const ratio = maxWidth / measureTextWidth(text, baseSize);
  return Math.floor(baseSize * ratio);
};

// Usage
<text 
  fontSize={calculateFontSize(title, 600)}
  textAnchor="middle"
>
  {title}
</text>

2. Smart Image Composition 🎨

const composeImage = async (background: string, overlay: string) => {
  return sharp(background)
    .composite([{
      input: overlay,
      blend: 'overlay',
      gravity: 'center'
    }])
    .modulate({
      brightness: 1.1,
      saturation: 0.8
    })
    .toBuffer();
};

3. Gradient Text Effect 🌈

const GradientText = ({ text }) => (
  <svg>
    <defs>
      <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stopColor="#FF6B6B" />
        <stop offset="100%" stopColor="#4ECDC4" />
      </linearGradient>
    </defs>
    <text fill="url(#gradient)">{text}</text>
  </svg>
);

4. Automatic Content Balancing ⚖️

interface Layout {
  title: string;
  image?: string;
  logo?: string;
}

const balanceLayout = (layout: Layout): LayoutConfig => {
  const hasImage = !!layout.image;
  const hasLogo = !!layout.logo;

  return {
    titleSize: hasImage ? 'medium' : 'large',
    titlePosition: hasImage ? 'left' : 'center',
    imageWidth: hasImage ? '40%' : '0',
    padding: hasLogo ? '80px' : '60px'
  };
};

5. Responsive Text Wrapping 📝

const wrapText = (text: string, maxWidth: number, fontSize: number) => {
  const words = text.split(' ');
  const lines = [];
  let currentLine = [];

  words.forEach(word => {
    const testLine = [...currentLine, word].join(' ');
    if (measureWidth(testLine, fontSize) <= maxWidth) {
      currentLine.push(word);
    } else {
      lines.push(currentLine.join(' '));
      currentLine = [word];
    }
  });

  lines.push(currentLine.join(' '));
  return lines;
};

6. Edge Caching Strategy 🚀

export const config = {
  runtime: 'edge',
  headers: {
    'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400'
  }
};

const generateCacheKey = (params: Params): string => {
  const sorted = Object.keys(params)
    .sort()
    .reduce((acc, key) => ({
      ...acc,
      [key]: params[key]
    }), {});

  return createHash('sha256')
    .update(JSON.stringify(sorted))
    .digest('hex');
};

7. Fallback System 🛟

class OGGenerator {
  async generate(config: Config) {
    try {
      return await this.primaryGeneration(config);
    } catch (error) {
      console.error('Primary generation failed:', error);
      try {
        return await this.fallbackGeneration(config);
      } catch (fallbackError) {
        console.error('Fallback failed:', fallbackError);
        return this.staticFallback;
      }
    }
  }
}

8. Memory Management 🧠

const optimizeMemory = {
  beforeGeneration: () => {
    if (global.gc) global.gc();
  },

  cleanup: async (buffer: Buffer) => {
    buffer = null;
    if (global.gc) global.gc();

    await new Promise(resolve => setTimeout(resolve, 100));
  }
};

9. Loading State Optimization ⚡

const PreviewSystem = () => {
  const [preview, setPreview] = useState<string>();
  const generateDebounced = useCallback(
    debounce(async (config) => {
      const result = await generatePreview(config);
      setPreview(result);
    }, 300),
    []
  );

  return (
    <div className="preview">
      {preview ? (
        <img src={preview} alt="OG Preview" />
      ) : (
        <LoadingPlaceholder />
      )}
    </div>
  );
};

10. Quality Assurance System 🎯

const validateOGImage = async (url: string) => {
  const tests = [
    checkDimensions,
    checkFileSize,
    checkLoadTime,
    checkContrast,
    checkTextReadability
  ];

  const results = await Promise.all(
    tests.map(test => test(url))
  );

  return results.every(result => result.passed);
};

Real-World Impact 📊

These techniques helped achieve:

Generation time: 450ms
Cache hit rate: 85%
Failed generations: <0.5%
Memory usage: 90MB

Implementation Tips 💡

Start with fallbacks
Monitor performance
Cache aggressively
Test across platforms

Community Discussion 🤝

What challenges are you facing with OG images? Share your use cases in the comments!

Black Friday Special ✨

Try all these techniques implemented in gleam.so - now 75% off! Create perfect OG images instantly.

Part of the "Making OpenGraph Work" series. Follow for more advanced web development insights!

How I Optimized OG Image Generation: A Performance Case Study 📊

gleamso — Tue, 26 Nov 2024 07:56:25 +0000

Hey dev friends! 👋 Following our Making OpenGraph Work, let's dive into a real performance optimization journey. Here's what happened when I needed to optimize gleam.so's OG image generation from 2.5s to under 500ms.

Initial State: The Problem 📉

When I first launched gleam.so, performance wasn't great:

Initial Metrics:
- Average generation time: 2.5s
- P95 generation time: 4.2s
- Memory usage: ~250MB per image
- Cache hit rate: 35%
- Failed generations: 8%

Users were noticing:

"Preview takes too long to load"
"Sometimes images don't generate at all"
"System feels sluggish"

Measurement Setup 📏

First, I set up proper monitoring:

interface PerformanceMetrics {
  generation: {
    duration: number;    // Total time
    steps: {            // Step-by-step timing
      template: number;
      render: number;
      optimize: number;
      store: number;
    };
    memory: number;     // Memory usage
    success: boolean;   // Success/failure
  };
  cache: {
    hit: boolean;       // Cache hit/miss
    duration: number;   // Cache operation time
  };
}

// Monitoring implementation
const monitor = new PerformanceMonitor({
  metrics: ['generation', 'cache', 'memory'],
  interval: '1m',
  retention: '30d'
});

The Optimization Journey 🛠️

1. Template Preprocessing

Before:

// Parsing templates on every request
const renderTemplate = async (template, data) => {
  const parsed = await parseTemplate(template);
  return renderImage(parsed, data);
};

After:

// Precompiled templates
const templateCache = new Map<string, CompiledTemplate>();

const renderTemplate = async (templateId, data) => {
  if (!templateCache.has(templateId)) {
    templateCache.set(
      templateId,
      await compileTemplate(templates[templateId])
    );
  }
  return renderImage(templateCache.get(templateId), data);
};

// Result:
// - 300ms saved per generation
// - 40% less memory usage

2. Multi-Layer Caching

class OGImageCache {
  constructor() {
    this.memory = new QuickLRU({ maxSize: 100 });
    this.redis = new Redis(process.env.REDIS_URL);
    this.cdn = new CloudflareKV('og-images');
  }

  async get(key: string): Promise<Buffer | null> {
    // 1. Check memory cache
    const memoryCache = this.memory.get(key);
    if (memoryCache) return memoryCache;

    // 2. Check Redis
    const redisCache = await this.redis.get(key);
    if (redisCache) {
      this.memory.set(key, redisCache);
      return redisCache;
    }

    // 3. Check CDN
    const cdnCache = await this.cdn.get(key);
    if (cdnCache) {
      await this.warmCache(key, cdnCache);
      return cdnCache;
    }

    return null;
  }
}

// Result:
// - Cache hit rate: 35% → 85%
// - Average response time: 2.5s → 800ms

3. Resource Optimization

// Before: Loading fonts per request
const loadFonts = async () => {
  return Promise.all(
    fonts.map(font => fetch(font.url).then(res => res.arrayBuffer()))
  );
};

// After: Preloaded fonts
const FONTS = {
  inter: fs.readFileSync('./fonts/Inter.ttf'),
  roboto: fs.readFileSync('./fonts/Roboto.ttf')
};

// Result:
// - Font loading: 400ms → 0ms
// - Memory usage: -30%

4. Parallel Processing

// Before: Sequential processing
const generateOG = async (template, data) => {
  const image = await render(template, data);
  const optimized = await optimize(image);
  const stored = await store(optimized);
  return stored;
};

// After: Parallel processing
const generateOG = async (template, data) => {
  const [image, resources] = await Promise.all([
    render(template, data),
    loadResources(template)
  ]);

  const [optimized, stored] = await Promise.all([
    optimize(image),
    prepareStorage()
  ]);

  return finalize(optimized, stored);
};

// Result:
// - 30% faster generation
// - Better resource utilization

Current Performance 📈

After these optimizations:

Current Metrics:
- Average generation time: 450ms (-82%)
- P95 generation time: 850ms (-80%)
- Memory usage: 90MB (-64%)
- Cache hit rate: 85% (+50%)
- Failed generations: 0.5% (-7.5%)

Key Learnings 🎓

Measurement is Critical
- Set up monitoring first
- Track detailed metrics
- Make data-driven decisions
Cache Strategically
- Multiple cache layers
- Smart invalidation
- Warm cache for popular items
Resource Management
- Preload where possible
- Optimize memory usage
- Parallel processing
Error Handling
- Graceful degradation
- Detailed error tracking
- Automatic recovery

Implementation Tips 💡

Start with Monitoring

// Simple but effective monitoring
const track = metrics.track('og_generation', {
  duration: endTime - startTime,
  memory: process.memoryUsage().heapUsed,
  success: !error,
  cached: !!cacheHit
});

Cache Wisely

// Generate deterministic cache keys
const getCacheKey = (template, data) => {
  return crypto
    .createHash('sha256')
    .update(`${template.id}-${JSON.stringify(data)}`)
    .digest('hex');
};

Handle Errors Gracefully

// Always provide a fallback
const generateWithFallback = async (template, data) => {
  try {
    return await generateOG(template, data);
  } catch (error) {
    metrics.trackError(error);
    return generateFallback(template, data);
  }
};

Try It Yourself! 🚀

I've implemented all these optimizations in gleam.so, and for Black Friday, you can try the optimized system at 75% off! Generate blazing-fast OG images without worrying about performance.

Share Your Experience 🤝

What performance challenges have you faced with OG images?
Which optimization techniques worked for you?
Any tips to share with the community?

Let's discuss in the comments!

*This is part of the "Making OpenGraph Work" series. *

How I Built a Free Tool to Generate Play Store Screenshots 🎨

gleamso — Sun, 24 Nov 2024 16:13:44 +0000

Hey dev community! 👋

The Problem

As a developer, I've always found creating Play Store screenshots painful. Either spend hours in Figma/Photoshop or settle for basic screenshots. Neither option felt right.

The Solution

I built a simple tool that generates Play Store feature graphics in seconds - no design skills needed. Here's how it works:

Key Features

Perfect Dimensions: Auto-exports at 1024x500px
Templates: Start with professional layouts

Tech Stack

Next.js 14 (App Router)
TypeScript
shadcn/ui
Tailwind CSS
Sharp for image processing

Implementation Highlights

interface PlayStoreTemplate {
  id: string;
  name: string;
  category: 'game' | 'app' | 'business' | 'education';
  thumbnail: string;
  config: {
    background: BackgroundConfig;
    elements: PlayStoreElement[];
    safeZone: boolean;
    deviceFrame?: DeviceFrameConfig;
  };
}

interface PlayStoreElement {
  type: 'text' | 'image' | 'shape' | 'screenshot';
  id: string;
  props: {
    x: number;
    y: number;
    width?: number;
    height?: number;
    content?: string;
    style?: ElementStyle;
    constraints?: SafeZoneConstraints;
  };
}

Try It Out

The tool is completely free: gleam.so

What's Next

More templates
Additional platforms
Advanced customization
API access

Let me know what features you'd like to see! Drop your suggestions in the comments 👇