@littleeagle/images-node NPM

Little Eagle: Generate beautiful images on the fly.

Works with:

Remix
Next.js
Express

Get Started

npm add @littleeagle/images-node

Usage

As a GitHub User:

import { gitHubTemplateURL } from "@littleeagle/images-node";

const imageURL = gitHubTemplateURL({
  username: "BurntCaramel",
  backgroundColor: "#00b4ff",
  text: [
    { text: "First", size: 17, color: "#aaa" },
    { text: "Second", size: 23, color: "#bbb" },
  ],
  authorName: 'some-author',
  website: 'example.org',
});

// Use `imageURL` e.g. as the value in a `og:image` meta tag or src of an `<img>`.

`transformColor` option

import { gitHubTemplateURL } from "@littleeagle/images-node";

const imageURL = gitHubTemplateURL({
  username: "BurntCaramel",
  backgroundColor: "black",
  text: [
    { text: "First", size: 17, color: "red" },
    { text: "Second", size: 23, color: "red" },
  ],
  authorName: 'some-author',
  website: 'example.org',
}, {
  transformColor(input: string): string {
    switch (input) {
      case 'black': return '#000';
      case 'red': return '#f00';
      default: return input;
    }
  }
});

// Use `imageURL` e.g. as the value in a `og:image` meta tag or src of an `<img>`.

If you use Tailwind, you can use transformColor to transform say red-500 into the Tailwind color. Read out blog post on using Tailwind’s colors for more.

With a LittleEagle.io Project:

Sign up to create a free account on littleeagle.io
Find your project ID and secret in the Little Eagle dashboard. Set these as environment variables (suggested names: LITTLE_EAGLE_PROJECT_ID and LITTLE_EAGLE_PROJECT_SECRET).
- Here’s how you add environment variables using Vercel.
Install the Little Eagle node package: npm add @littleeagle/images-node
Call the littleEagleImagesURL() function to generate your images URL. An example is provided below. It’s recommended you do this on the server as your secret shouldn’t be made public.

import { littleEagleImagesURL } from "@littleeagle/images-node";

const imageURL = littleEagleImagesURL({
  id: process.env.LITTLE_EAGLE_PROJECT_ID,
  secret: process.env.LITTLE_EAGLE_PROJECT_SECRET,
}, {
  template: "plain", // "plain" or "overlay" supported.
  // Any of the below options can be dynamic.
  // e.g. Load your text or image from your database or content management system!
  backgroundColor: "#00b4ff",
  imageURL:
    "https://images.unsplash.com/photo-1606890658317-7d14490b76fd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHNuZWFrZXJ8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60",
  text: [
    { text: "First", size: 17, color: "#aaa" },
    { text: "Second", size: 23, color: "#bbb" },
  ],
});

// Use `imageURL` e.g. as the value in a `og:image` meta tag.