Forem: Douglas Held Pacito

Adiar, entrar em pânico e recuperar

Douglas Held Pacito — Sun, 25 May 2025 20:02:03 +0000

Estudando Go, me deparei com o uso de 3 companheiros que parecem andar sempre juntos, ou quase...

Estou falando do defer, panic e o recover. Go tem uma maneira bem peculiar (e poderosa) de lidar com exceções, diferente do tradicional try/catch/finally

`defer`

Agenda uma função para ser executada no fim da função atual.

Se temos uma instrução defer no escopo de uma função, ela será adiada até que a função termine, seja normalmente, com return ou mesmo em caso de panic.

Para ficar mais claro, veremos alguns exemplos

1. Ao chegar no final da função normalmente

O defer é chamado no final da função

func main() {
    defer fmt.Println("defer executado")
    fmt.Println("fim da função")
}
// Saída:
// fim da função
// defer executado

2. Quando há um `return` explícito

Mesmo que você use return no meio da função, o defer que foi adiado (deferred) ainda será executado antes de sair.

Caso exista uma instrução defer após o return essa instrução não será adiada

func main() {
    defer fmt.Println("defer antes do return")
    if true {
        fmt.Println("faz algo e retorna")
        return
    }
    defer fmt.Println("defer após o return") // não será adiada
}
// Saída:
// faz algo e retorna
// defer antes do return

3. Quando ocorre um `panic`

Se a função entrar em pânico, o defer ainda é chamado

func main() {
    defer fmt.Println("defer mesmo com panic")
    panic("ops!")
}
// Saída:
// defer mesmo com panic
// panic: ops!

4. Quando há vários `defer`

Podem existir vários defer dentro de uma função mas temos que lembrar que a execução será na ordem inversa à que foram definidas ou seja em pilha (LIFO - Last In First Out).

func main() {
    defer fmt.Println("último")
    defer fmt.Println("segundo")
    defer fmt.Println("primeiro")
}
// Saída:
// primeiro
// segundo
// último

5. Quando `recover` é chamado dentro de um `defer`

Se o defer contiver um recover, ele pode capturar um panic e impedir o crash.

func main() {
    someFunction()
    fmt.Println("vida que segue...")
}

func someFunction() {
    defer func() {
        if r := recover(); r != nil {
            fmt.Println("recuperado:", r)
        }
    }()
    panic("algo deu errado")
}
// Saída
// recuperado: algo deu errado
// vida que segue...

`os.Exit()` interrompe a execução dos `defer`

Se você usar os.Exit() os defers não serão executados, pois o programa termina imediatamente.

func main() {
    defer fmt.Println("isso não será exibido")
    os.Exit(1)
}
// Saída
// exit status 1

A instrução defer é ideal para cleanup de recursos sendo usada com frequência em operações aos pares, como:

abrir e fechar;
conectar e desconectar;
travar e destravar.

O lugar correto para uma instrução defer que libera recurso é logo após este ter sido obtido com sucesso.

func main() {
    someFunction("https://www.google.com")
}

func someFunction(url string) error {
    resp, err := http.Get(url)
    if err != nil {
        return err
    }
    defer resp.Body.Close() // evita vazamento de recurso

    // restante do código que omiti

    return nil
}

Ufa, chegamos no fim da instrução defer espero que com esses exemplos consegui ajudar a clarear seu uso.

Agora, bora entrar em pânico? 😅

`panic`

Interrompe o fluxo normal do programa. Go possui um sistema de tipos que captura muitos erros em tempo de compilação mas existem outros erros que são capturados em runtime (tempo de execução), esses erros podem causar pânico.

Existem vários exemplos de erro sendo executado com panic em runtime, mostrarei 3

1. Acesso fora dos limites de um array

Go não permite acessar índices inválidos. Isso causa um panic imediato.

func main() {
    s := []int{1, 2, 3}
    fmt.Println(s[5])
}
// Saída
// panic: runtime error: index out of range [5] with length 3

2. Desreferenciar ponteiro `nil`

A tentativa de acessar o valor de um ponteiro que aponta para nil resulta em panic.

func main() {
    var p *int
    fmt.Println(*p)
}
// Saída
// panic: runtime error: invalid memory address or nil pointer dereference

3. Divisão por zero

Go trata divisão por zero como um erro em tempo de execução com panic.

func main() {
    x := 0
    fmt.Println(10 / x)
}
// Saída
// panic: runtime error: integer divide by zero

Podemos chamar a função `panic`

Nem todo o pânico é gerado pelo runtime, podemos chamar a função panic diretamente, ela aceita qualquer valor como argumento.

Mas quando devemos gerar um pânico?

O melhor momento de gerar um pânico é em situações "impossíveis" que do ponto de vista lógico não poderia acontecer, vamos simular algo randômico tendo os seguintes valores:

"Spades", "Hearts", "Diamonds", "Clubs"

Mas para fim didático colocaremos mais um valor "Joker" que pela lógica não deveria existir.

Copie o código e tente executar algumas vezes até cair na carta Coringa (Joker)

func main() {
    suits := []string{"Spades", "Hearts", "Diamonds", "Clubs", "Joker"}

    switch s := suits[rand.Intn(len(suits))]; s {
    case "Spades":
        fmt.Println("♠ Naipe: Spades")
    case "Hearts":
        fmt.Println("♥ Naipe: Hearts")
    case "Diamonds":
        fmt.Println("♦ Naipe: Diamonds")
    case "Clubs":
        fmt.Println("♣ Naipe: Clubs")
    default:
        panic(fmt.Sprintf("🤡 Naipe inválido: %q", s))
    }
}

Cautela

O pânico, quando é executado, faz o programa terminar, então devemos usa-lo somente em erros graves.

Erros como falhas de E/S ou erro de entrada incorreta são erros que podem ser considerados como "esperados", devemos evitar usar panic se esse for o caso use os valores de error, tornando o tratamento desses erros mais elegante. Deixe o panic para ser usado em erros inesperados ou fatais que tornam impossível continuar com o programa.

`recover`

Permite interceptar um panic e evitar que a aplicação morra.

Você pode estar se perguntado: Então, quando fazer um recover?

Vamos ver um exemplo simples onde a mensagem "FIM" só será exibida se:

não houver nenhum panic;
ou se houver um panic ter um tratamento usando recover

func main() {
    fmt.Println("Início")
    safe()
    fmt.Println("Fim") // Nesse caso, só será impresso se recover for chamado
}

func safe() {
    defer func() {
        if r := recover(); r != nil {
            fmt.Println("⚠️ Recuperado do pânico:", r)
        }
    }()

    fmt.Println("Executando algo perigoso...")
    panic("💥 Algo deu errado!") // Simulando erro grave
}
// Saída
// Início
// Executando algo perigoso...
// ⚠️ Recuperado do pânico: 💥 Algo deu errado!
// Fim

O que aconteceu?

safe() entra em ação
Um panic é disparado
O defer detecta o pânico com recover
A aplicação segue viva!

Esse padrão é útil em middlewares, servidores e até quando lidamos com recursos externos como arquivos ou conexões.

Agora que já entendeu, vejamos algo mais complexo.

`defer` + `panic` + `recover`

Pense no seguinte cenário:

o usuário faz uma requisição para uma alteração no banco de dados
essa alteração é custosa e precisamos abrir uma transação
antes de encerar a transação acontece um erro crítico, um panic

Isso pode levar a:

Deadlocks
Conexões penduradas
Consumo excessivo de recursos
Inconsistência de dados em alguns casos

Para esse caso podemos usar o defer + recover para fazer um rollback:

package main

import (
    "database/sql"
    "fmt"
    "log"

    _ "github.com/lib/pq"
)

func main() {
    connStr := "postgres://postgres:postgres@localhost:5432/db_name?sslmode=disable"
    db, err := sql.Open("postgres", connStr)
    if err != nil {
        log.Fatal(err)
    }
    defer db.Close()

    err = transferirComSeguranca(db, 1, 2, 100)
    if err != nil {
        log.Println("Erro:", err)
    } else {
        log.Println("Transferência concluída com sucesso!")
    }
}

func transferirComSeguranca(db *sql.DB, deID, paraID, valor int) (err error) {
    tx, err := db.Begin()
    if err != nil {
        return err
    }

    // Defer para rollback seguro
    defer func() {
        if r := recover(); r != nil {
            tx.Rollback()
            err = fmt.Errorf("panic recuperado: %v", r)
        } else if err != nil {
            tx.Rollback()
        } else {
            err = tx.Commit()
        }
    }()

    // Debita da conta de origem
    _, err = tx.Exec("UPDATE contas SET saldo = saldo - $1 WHERE id = $2", valor, deID)
    if err != nil {
        return err
    }

    // Simula erro crítico (como divisão por zero, ou nil pointer, ou qualquer erro que gere um panic)
    panic("falha catastrófica durante a transferência")

    // Credita na conta de destino
    _, err = tx.Exec("UPDATE contas SET saldo = saldo + $1 WHERE id = $2", valor, paraID)
    if err != nil {
        return err
    }

    return nil
}
// Saída
// 2025/05/23 14:40:07 Erro: panic recuperado: falha catastrófica durante a transferência

Legal né?
Mas vamos olhar melhor para essa parte do código:

defer func() {
    if r := recover(); r != nil { // 1 - se houver panic
        tx.Rollback()
        err = fmt.Errorf("panic recuperado: %v", r)
    } else if err != nil { // 2 - se houver erro comum
        tx.Rollback()
    } else { // 3 - se tudo der certo
        err = tx.Commit()
    }
}()

1 - `panic` -> `recover()` + `Rollback`

Se a função entrou em pânico, o recover() captura o erro e:

faz rollback para evitar transação presa
transforma o pânico em erro amigável com fmt.Errorf(...)

2 - `err != nil` -> erro esperado (ex: SQL inválido)

Se não houve panic, mas alguma linha antes retornou erro (ex: tx.Exec(...)), então:

a transação ainda não foi finalizada
precisamos fazer rollback() também

3 - `else` -> deu tudo certo

Só nesse caso fazemos commit(), salvamos tudo no banco

Dica

Use panic com moderação. Em geral, prefira retornar erros comuns (error). Mas saber lidar com um panic pode evitar muitos sustos.

How to Generate Social Images with Open Graph (OG)

Douglas Held Pacito — Thu, 01 May 2025 15:21:14 +0000

In this post, I want to share a quick experience I had using Remix and show you how to automatically generate social images with Open Graph in a practical way.

What is Open Graph (OG)?

We've all copied an interesting link and pasted it into a conversation with a friend on WhatsApp, Facebook, X (formerly Twitter), Linkedin or another social network. Before even sending it, the app already loads a preview with an image, title and description of the content, right? This is possible thanks to the Open Graph protocol, which uses HTML meta tags to provide this information about the page.

Example of the OG generated in this project

What a AI said about OG?
”Open Graph is a protocol that allows customization of the content displayed when a web page is shared on social networks like Facebook and Twitter. It uses HTML tags (meta tags) to provide specific information about the page, such a title, description and image, thus controlling the presentation of the shared link.”

To delve deeper, I recommend the official site: https://ogp.me/

My Experience implementing OG in Remix

Earlier this year, 2025, I needed to create an OG in a project where I was working as a freelancer, the project was using Remix, so implementing the feature was fun and surprisingly simple.

Until then, I had never done anything like it. I started searching and soon discovered the ogp site. Since the information is in meta tags, I did a hardcoded test just to see if it worked and... it did! Just like that.

But since a developer's life isn't always about hardcoding (sometimes we do, but let's face it: the challenge is what make everything more interesting), I decided to move on to the fun part...

Hands-On: Creating Dynamic OG Images with React Router V7

I tried to keep this project as simples as possible, feel free to expand it with your creativity. At the end of this article, I'will leave the link of the complete project.

Why React Router V7?

One of the vantage of using React Router V7 (or Remix, which comes with it under the hood) is the flexibility it gives to organize your routes declaratively and logical. Moreover, with React Router V7, it's easy to configure loaders, lazy loading and even prevent certain routes from being rendered in client side, perfect for this type of route that only serves to generate an image on the backend.

Setting Up the Project

First, let's start our environment

npx create-react-router@latest og-image-generation

Then I installed some dependencies

satori - convertes HTML and CSS to SVG (Tailwind is in an experimental version, maybe a future post!?!?)
@resvg/resvg-js - converts SVG to PNG
fast-average-color-node - extracts information from images (I added this dependency to create a gradient in the card's background based on the predominant color of the image)

npm install satori @resvg/resvg-js fast-average-color-node

After that, I used fast-average-color-node to get information from the image.

import { getAverageColor } from "fast-average-color-node";

const backgroundColor = await getAverageColor(image);

// backgroundColor {
//   value: [ 108, 98, 72, 255 ],
//   rgb: 'rgb(108,98,72)',
//   rgba: 'rgba(108,98,72,1)',
//   hex: '#6c6248',
//   hexa: '#6c6248ff',
//   isDark: true,
//   isLight: false,
//   error: undefined
// }

With this, I realized we can create a very cool effect with a gradient in the background color of our card, note that the hex, which has the predominant color, can be concatenated with E6 and 1A to tweak the color's opacity.

Percentage	Hex
100%	FF
90%	E6
80%	CC
70%	B3
60%	99
50%	80
40%	66
30%	4D
20%	33
10%	1A
0%	00

`linear-gradient(
  to top right,
  ${backgroundColor.hex}E6,
  ${backgroundColor.hex}1A
)`;

There are several ways to apply opacity to a gradient, but I chose this approach because I wanted to better understand how opacity works directly in the hex value. But for those who enjoy experimenting, I'll share two more ways to do it bellow.

const backgroundColor = {
  value: [108, 98, 72, 255],
  rgba: "rgba(108,98,72,1)",
};

const { value, rgba } = backgroundColor;

// Example 01
const [r, g, b] = value;
console.log(`rgba(${r}, ${g}, ${b}, 0.8)`);

// Example 02
console.log(
  rgba.replace(
    /rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/,
    `rgba($1, $2, $3, 0.8)`
  )
);

I used satori to build the SVG using HTML and CSS (and for those who love Tailwind like I do 😬, there is an experimental feature available)

const svg = await satori(
    <div
      style={{
        ..., // code omitted
        background: `linear-gradient(to top right, ${backgroundColor.hex}E6, ${backgroundColor.hex}1A)`,
        color: backgroundColor.isDark ? "white" : "black"
      }}
    >
      <div>
        <div
          style={{
            ..., // code omitted
            color: backgroundColor.isDark ? "white" : "black",
          }}
        >
          <img
            src="http://localhost:5173/my-logo.svg"
            alt="My Logo"
            style={{
              ..., // code omitted
              filter: backgroundColor.isDark ? "invert(0.8)" : "invert(0.4)",
            }}
          />
          <h1
            style={{
              ..., // code omitted
              color: backgroundColor.isDark ? "white" : "black",
            }}
          >
            {title}
          </h1>
          <p
            style={{
              ..., // code omitted
              color: backgroundColor.isDark ? "#dddddd" : "#636363",
            }}
          >
            {shortDescription}
          </p>
        </div>
        <img
          src={image}
          alt="OG Image"
        />
      </div>
    </div>,
    {
      width: 800,
      height: 420,
      fonts: [ // code omitted ],
    }
  );

I also used backgroundColor.isDark to invert colors like text and the logo

In the end I needed to convert SVG to PNG, so I used Resvg for that

From what I researched, the Open Graph protocol works best with

PNG
JPEG
GIF (usually only the first frame is rendered)

const pngData = new Resvg(svg).render().asPng();
return pngData;

Below is the full function that generates the image

import satori from "satori";
import { Resvg } from "@resvg/resvg-js";
import { getAverageColor } from "fast-average-color-node";

async function generateOgImage({
  title,
  shortDescription,
  image,
}: {
  title: string,
  shortDescription: string,
  image: string,
}) {
  const backgroundColor = await getAverageColor(image);
  const svg = await satori(
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        width: 800,
        height: 420,
        background: `linear-gradient(to top right, ${backgroundColor.hex}E6, ${backgroundColor.hex}1A)`,
        color: backgroundColor.isDark ? "white" : "black",
        fontFamily: "Inter, sans-serif",
      }}
    >
      <div
        style={{ display: "flex", width: "90%", maxWidth: 800, paddingLeft: 6 }}
      >
        <div
          style={{
            flex: 1,
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            alignItems: "flex-start",
            paddingTop: 24,
            paddingRight: 40,
            paddingBottom: 24,
            paddingLeft: 0,
            color: backgroundColor.isDark ? "white" : "black",
          }}
        >
          <img
            src="http://localhost:5173/my-logo.svg"
            alt="My Logo"
            style={{
              alignSelf: "flex-start",
              height: 24,
              filter: backgroundColor.isDark ? "invert(0.8)" : "invert(0.4)",
            }}
          />
          <h1
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "flex-start",
              flexGrow: 1,
              fontSize: 32,
              fontWeight: "600",
              marginTop: 20,
              lineHeight: "2.25rem",
              color: backgroundColor.isDark ? "white" : "black",
            }}
          >
            {title}
          </h1>
          <p
            style={{
              alignSelf: "flex-start",
              fontSize: 16,
              fontWeight: "400",
              color: backgroundColor.isDark ? "#dddddd" : "#636363",
            }}
          >
            {shortDescription}
          </p>
        </div>
        <img
          src={image}
          alt="OG Image"
          style={{ width: 350, height: 350, borderRadius: "1rem" }}
        />
      </div>
    </div>,
    {
      width: 800,
      height: 420,
      fonts: [
        {
          name: "Inter",
          data: await fetch(
            "https://cdn.jsdelivr.net/npm/@fontsource/inter/files/inter-latin-400-normal.woff"
          ).then((res) => res.arrayBuffer()),
          weight: 400,
          style: "normal",
        },
        {
          name: "Inter",
          data: await fetch(
            "https://cdn.jsdelivr.net/npm/@fontsource/inter/files/inter-latin-600-normal.woff"
          ).then((res) => res.arrayBuffer()),
          weight: 600,
          style: "normal",
        },
      ],
    }
  );

  const pngData = new Resvg(svg).render().asPng();
  return pngData;
}

export { generateOgImage };

Now, we need a route that call the generatedOgImage function and returns the generated image as a response. For that, we'll use a Remix's loader

❤️ Remix for making this kind of thing so straightforward!

I kept this example super simple, just an array with URLs, I'm randomly picking one using Math.random(), but in a real scenario, you could use route parameters to fetch data from your DB and generate the image based on post content, a product, or even a user profile. There's a lot of room to explore here, let your creativity run wild!

// app/routes/og.ts

import type { Route } from "./+types/og";
import { generateOgImage } from "~/components/generate-og-image";

const images = [
  "https://fastly.picsum.photos/id/857/800/800.jpg?hmac=BUGUS_K7Wesbr9xUV5ya8TfYHI04KBg_kWauQkuIgS0",
  "https://fastly.picsum.photos/id/835/800/800.jpg?hmac=PJZoPbB8PjU_6jPaR4U6KX7Mesx3F2_l-2tSCVeF2Cg",
  "https://fastly.picsum.photos/id/839/800/800.jpg?hmac=Rvd_0eo62Cj10Rsw4bxKOUjvU1qTc5fA6DfWEQ3cVSE",
  "https://fastly.picsum.photos/id/981/800/800.jpg?hmac=dL5YCGb-HqSsuYOPiCgADn_NjvaUsl6PJDR-FdSBvcU",
  "https://fastly.picsum.photos/id/34/3872/2592.jpg?hmac=4o5QGDd7eVRX8_ISsc5ZzGrHsFYDoanmcsz7kyu8A9A",
  "https://fastly.picsum.photos/id/102/4320/3240.jpg?hmac=ico2KysoswVG8E8r550V_afIWN963F6ygTVrqHeHeRc",
];
export async function loader({}: Route.LoaderArgs) {
  const pngData = await generateOgImage({
    title: "Find out how to generate an image for Open Graph.",
    shortDescription:
      "The Open Graph protocol enables any web page to become a rich object in a social graph.",
    image: images[Math.floor(Math.random() * images.length)],
  });

  return new Response(Buffer.from(pngData), {
    headers: {
      "Content-Type": "image/png",
    },
  });
}

Now all we need to do is fill in the tags with the necessary values, the basics are:

og:title
og:type
og:image
og:url

Keep in mind that each social media platform may have its own preferred tags for displaying data better

export function meta({}: Route.MetaArgs) {
  return [
    { title: "Open Graph Image Generation App" },
    { name: "description", content: "Welcome to Open Graph Image Generation!" },
    { name: "og:title", content: "Open Graph Image Generation App" },
    {
      name: "og:description",
      content: "Welcome to Open Graph Image Generation!",
    },
    { name: "og:image", content: "http://localhost:5173/og/" },
    { name: "og:url", content: "http://localhost:5173/" },
    { name: "og:type", content: "website" },
    { name: "og:site_name", content: "Open Graph Image Generation" },
    { name: "og:locale", content: "en_US" },
  ];
}

If you want to see the full project, just clone the repository, install the dependencies and run it.

git clone https://github.com/douglasheldpacito/og-image-generation.git

// inside the og-image-generation folder

npm install

npm run dev

To make things more visual, I created an example page that shows how the image will look. It's a simple way to test and understand how the final layout behaves with different images.

Every time you reload the page, a different image is used, great for testing the gradient effect, color contrast, and overall composition.

Enjoyed the idea? If you already use Open Graph on your site or blog, let me know in the comments! And if you have any questions, fell free to ask.

Cheers!

Como gerar imagens sociais com Open Graph (OG)

Douglas Held Pacito — Thu, 01 May 2025 15:20:58 +0000

Neste post, quero compartilhar uma experiência rápida que tive usando Remix e te mostrar como gerar imagens sociais automáticas com Open Graph de um jeito bem prático.

O que é Open Graph (OG)?

Todos nós já copiamos um link interessante e colamos numa conversa com um amigo no WhatsApp, Facebook, X (antigo Twitter), LinkedIn ou outra rede social. E antes mesmo de enviar, o app já carrega uma prévia com imagem, título e descrição do conteúdo, certo? Isso é possível graças ao protocolo Open Graph, que usa metatags HTML para fornecer essas informações sobre a página.

Exemplo da OG gerada nesse projeto

O que a IA diz sobre OG?
”Open Graph é um protocolo que permite a personalização do conteúdo exibido quando uma página web é compartilhada em redes sociais, como Facebook e Twitter. Ele utiliza tags HTML (metatags) para fornecer informações específicas sobre a página, como título, descrição e imagem, controlando assim a apresentação do link compartilhado.”

Para se aprofundar mais, recomendo o site oficial: https://ogp.me/

Minha experiência implementando OG no Remix

No início deste ano, 2025, precisei criar um OG em um projeto onde eu estava trabalhando como freelancer, o projeto estava utilizando Remix, por isso a implantação da feature foi divertida e surpreendentemente simples.

Até então, nunca havia feito algo do tipo. Comecei pesquisando e logo descobri o site do ogp. Como as informações ficam nas metatags, fiz um teste hardcoded só para ver se funcionava e... funcionou! Simples assim.

Mas como a vida de dev nem sempre é só hardcode (às vezes até usamos, mas convenhamos: o desafio é o que deixa tudo mais interessante), decidi partir para a parte divertida...

Mãos na massa: Criando OG Images Dinâmicas com React Router V7

Tentei deixar o mais simples esse projeto, fique à vontade para expandir com sua criatividade, no final desse artigo deixarei o link do projeto completo.

Por que React Router v7?

Uma das vantagens de usar o React Router v7 (ou o Remix, que já vem com ele por baixo dos panos) é a flexibilidade que ele dá pra organizar suas rotas de forma declarativa e lógica. Além disso, com o React Router v7 fica fácil configurar loaders, lazy loading e até evitar que certas rotas sejam renderizadas no cliente, perfeito pra esse tipo de rota que só serve pra gerar uma imagem no backend.

Configurando o projeto

Primeiro, vamos iniciar nosso ambiente

npx create-react-router@latest og-image-generation

Em seguida instalei algumas dependências

satori - converte HTML e CSS para SVG (Tailwind está em uma versão experimental, quem sabe um próximo post!?!?)
@resvg/resvg-js - converte SVG para PNG
fast-average-color-node - extrai informações de imagens (Coloquei essa dependência para fazer um degrade no background do card conforme a cor predominante da imagem)

npm install satori @resvg/resvg-js fast-average-color-node

Depois disso, utilizei o fast-average-color-node para pegar informações da imagem.

import { getAverageColor } from "fast-average-color-node";

const backgroundColor = await getAverageColor(image);

// backgroundColor {
//   value: [ 108, 98, 72, 255 ],
//   rgb: 'rgb(108,98,72)',
//   rgba: 'rgba(108,98,72,1)',
//   hex: '#6c6248',
//   hexa: '#6c6248ff',
//   isDark: true,
//   isLight: false,
//   error: undefined
// }

Com isso percebi que podemos criar um efeito bem legal com gradiente na cor de fundo do nosso card, note que o hex, onde possui a cor predominante, pode ser concatenado com E6 e 1A para mexermos na opacidade da cor.

Porcentagem	Hex
100%	FF
90%	E6
80%	CC
70%	B3
60%	99
50%	80
40%	66
30%	4D
20%	33
10%	1A
0%	00

`linear-gradient(
  to top right,
  ${backgroundColor.hex}E6,
  ${backgroundColor.hex}1A
)`

Existem várias formas de aplicar opacidade em um gradiente, mas optei por esse caminho porque queria explorar melhor como funciona a opacidade direto no valor hexadecimal. Mas, pra quem curte experimentar, vou deixar aqui mais duas formas de fazer isso.

const backgroundColor = {
  value: [108, 98, 72, 255],
  rgba: 'rgba(108,98,72,1)',
};

const { value, rgba } = backgroundColor

// Exemplo 01
const [r, g, b] = value
console.log(`rgba(${r}, ${g}, ${b}, 0.8)`)

// Exemplo 02
console.log(rgba.replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/, `rgba($1, $2, $3, 0.8)`))

Utilizei o satori para montar o SVG com HTML e CSS (para quem curte Tailwind, como eu 😬, existe uma feature experimental)

const svg = await satori(
    <div
      style={{
        ..., // código omitido
        background: `linear-gradient(to top right, ${backgroundColor.hex}E6, ${backgroundColor.hex}1A)`,
        color: backgroundColor.isDark ? "white" : "black"
      }}
    >
      <div>
        <div
          style={{
            ..., // código omitido
            color: backgroundColor.isDark ? "white" : "black",
          }}
        >
          <img
            src="http://localhost:5173/my-logo.svg"
            alt="My Logo"
            style={{
              ..., // código omitido
              filter: backgroundColor.isDark ? "invert(0.8)" : "invert(0.4)",
            }}
          />
          <h1
            style={{
              ..., // código omitido
              color: backgroundColor.isDark ? "white" : "black",
            }}
          >
            {title}
          </h1>
          <p
            style={{
              ..., // código omitido
              color: backgroundColor.isDark ? "#dddddd" : "#636363",
            }}
          >
            {shortDescription}
          </p>
        </div>
        <img
          src={image}
          alt="OG Image"
        />
      </div>
    </div>,
    {
      width: 800,
      height: 420,
      fonts: [ // código omitido ],
    }
  );

Também utilizei o backgroundColor.isDark para inverter cores como textos e a logo

No final precisava converter o SVG para PNG então utilizei o Resvg para isso

Pelas minhas pesquisas o protocolo og trabalha melhor com

PNG

JPEG

GIF (geralmente apenas o primeiro quadro é renderizado)

const pngData = new Resvg(svg).render().asPng();
return pngData;

Segue abaixo todo o código da função para gerar a imagem

import satori from "satori";
import { Resvg } from "@resvg/resvg-js";
import { getAverageColor } from "fast-average-color-node";

async function generateOgImage({
  title,
  shortDescription,
  image,
}: {
  title: string;
  shortDescription: string;
  image: string;
}) {
  const backgroundColor = await getAverageColor(image);
  const svg = await satori(
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        width: 800,
        height: 420,
        background: `linear-gradient(to top right, ${backgroundColor.hex}E6, ${backgroundColor.hex}1A)`,
        color: backgroundColor.isDark ? "white" : "black",
        fontFamily: "Inter, sans-serif",
      }}
    >
      <div
        style={{ display: "flex", width: "90%", maxWidth: 800, paddingLeft: 6 }}
      >
        <div
          style={{
            flex: 1,
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            alignItems: "flex-start",
            paddingTop: 24,
            paddingRight: 40,
            paddingBottom: 24,
            paddingLeft: 0,
            color: backgroundColor.isDark ? "white" : "black",
          }}
        >
          <img
            src="http://localhost:5173/my-logo.svg"
            alt="My Logo"
            style={{
              alignSelf: "flex-start",
              height: 24,
              filter: backgroundColor.isDark ? "invert(0.8)" : "invert(0.4)",
            }}
          />
          <h1
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "flex-start",
              flexGrow: 1,
              fontSize: 32,
              fontWeight: "600",
              marginTop: 20,
              lineHeight: "2.25rem",
              color: backgroundColor.isDark ? "white" : "black",
            }}
          >
            {title}
          </h1>
          <p
            style={{
              alignSelf: "flex-start",
              fontSize: 16,
              fontWeight: "400",
              color: backgroundColor.isDark ? "#dddddd" : "#636363",
            }}
          >
            {shortDescription}
          </p>
        </div>
        <img
          src={image}
          alt="OG Image"
          style={{ width: 350, height: 350, borderRadius: "1rem" }}
        />
      </div>
    </div>,
    {
      width: 800,
      height: 420,
      fonts: [
        {
          name: "Inter",
          data: await fetch(
            "https://cdn.jsdelivr.net/npm/@fontsource/inter/files/inter-latin-400-normal.woff"
          ).then((res) => res.arrayBuffer()),
          weight: 400,
          style: "normal",
        },
        {
          name: "Inter",
          data: await fetch(
            "https://cdn.jsdelivr.net/npm/@fontsource/inter/files/inter-latin-600-normal.woff"
          ).then((res) => res.arrayBuffer()),
          weight: 600,
          style: "normal",
        },
      ],
    }
  );

  const pngData = new Resvg(svg).render().asPng();
  return pngData;
}

export { generateOgImage };

Agora, precisamos de uma rota que chame a função generateOgImage e devolva a imagem gerada como resposta. Pra isso, vamos usar o loader do Remix

❤️ Remix por deixar esse tipo de coisa tão direto!

Deixei esse exemplo bem simples, somente um array com URLs de imagens, escolherei uma imagem aleatoriamente usando Math.random(), mas em um cenário real, você poderia pegar os parâmetros da rota para buscar dados do seu DB e gerar a imagem com base em informações do post, produto ou até perfil do usuário. Dá para viajar bastante aqui, use a criatividade!

// app/routes/og.ts

import type { Route } from "./+types/og";
import { generateOgImage } from "~/components/generate-og-image";

const images = [
  "https://fastly.picsum.photos/id/857/800/800.jpg?hmac=BUGUS_K7Wesbr9xUV5ya8TfYHI04KBg_kWauQkuIgS0",
  "https://fastly.picsum.photos/id/835/800/800.jpg?hmac=PJZoPbB8PjU_6jPaR4U6KX7Mesx3F2_l-2tSCVeF2Cg",
  "https://fastly.picsum.photos/id/839/800/800.jpg?hmac=Rvd_0eo62Cj10Rsw4bxKOUjvU1qTc5fA6DfWEQ3cVSE",
  "https://fastly.picsum.photos/id/981/800/800.jpg?hmac=dL5YCGb-HqSsuYOPiCgADn_NjvaUsl6PJDR-FdSBvcU",
  "https://fastly.picsum.photos/id/34/3872/2592.jpg?hmac=4o5QGDd7eVRX8_ISsc5ZzGrHsFYDoanmcsz7kyu8A9A",
  "https://fastly.picsum.photos/id/102/4320/3240.jpg?hmac=ico2KysoswVG8E8r550V_afIWN963F6ygTVrqHeHeRc",
];
export async function loader({}: Route.LoaderArgs) {
  const pngData = await generateOgImage({
    title: "Find out how to generate an image for Open Graph.",
    shortDescription:
      "The Open Graph protocol enables any web page to become a rich object in a social graph.",
    image: images[Math.floor(Math.random() * images.length)],
  });

  return new Response(Buffer.from(pngData), {
    headers: {
      "Content-Type": "image/png",
    },
  });
}

Agora tudo que temos que fazer é preencher as tags com os valores necessários, o básico é:

og:title
og:type
og:image
og:url

Lembrando que cada rede social pode possuir sua tag para melhor apresentar os dados

export function meta({}: Route.MetaArgs) {
  return [
    { title: "Open Graph Image Generation App" },
    { name: "description", content: "Welcome to Open Graph Image Generation!" },
    { name: "og:title", content: "Open Graph Image Generation App" },
    {
      name: "og:description",
      content: "Welcome to Open Graph Image Generation!",
    },
    { name: "og:image", content: "http://localhost:5173/og/" },
    { name: "og:url", content: "http://localhost:5173/" },
    { name: "og:type", content: "website" },
    { name: "og:site_name", content: "Open Graph Image Generation" },
    { name: "og:locale", content: "en_US" },
  ];
}

Caso queira ver o projeto completo faça o clone do repositório, instale as dependências e execute-o.

git clone https://github.com/douglasheldpacito/og-image-generation.git

// dentro da pasta og-image-generation

npm install

npm run dev

Pra deixar tudo mais visual, criei uma página de exemplo que mostra como ficaria a imagem gerada com elas. É uma forma simples de testar e entender como o layout final vai se comportar com diferentes imagens.

A cada vez que você recarrega, uma imagem diferente é usada, ótimo pra testar o efeito do gradiente, das cores e da composição geral.

Curtiu a ideia? Se você já usa o Open Graph no seu site ou blog, me conta nos comentários! E se tiver dúvidas, manda ver também.

Abraços!