What's Changed

• leaderboard variants by @notunderctrl
• chore: install yarn binary instead of using corepack by @twlite in #199
• Add invisible StatusData by @DylanDelobel in #201
• Guide translate rank card by @DylanDelobel in #203
• 🎨 Update NeoClassicalCard to include 'invisible' status color by @DylanDelobel in #202

New Contributors

• @DylanDelobel made their first contribution in #201

Full Changelog: v6.0.1...v6.0.2

Changes

• fix: leaderboard height adjustment issue

Full Changelog: v6.0.0...v6.0.1

Canvacord v6.0.0 is here!

🚀 Easily generate images using html and css in nodejs. Canvacord is suitable for creating dynamic images such as social media posts, greetings cards, memes, etc. It is also possible to create your own templates and builders to generate images. You are only limited by your imagination.

Features

• 🪟 Open source, no privacy issues, 100% transparent - Canvacord is completely open source and free to use. This makes everything transparent and you can even contribute to the project. Best of all, you dont have to worry about privacy issues 😊.
• 💪 Easy to use - Canvacord provides a simple api to generate images on-the-fly.
• 🎨 Customizable - You can create your own templates and builders to generate images. Canvacord allows you to define how your image should look using html and css. No more hassle learning complicated canvas api.
• 🚀 Fast - Canvacord is powered by highly optimized, battle tested libraries, which makes it fast and reliable.
• 🔒 Typescript support - Canvacord is written in typescript and provides type definitions out of the box.
• 📸 Wide formats support - Canvacord supports many image formats such as png, jpeg, webp, gif, svg, etc.
• 📄 Wide range of templates - Canvacord provides many built-in templates to generate images such as triggered gif, beautiful image, facepalm image, etc. to quickly generate that meme you saw on reddit 🤡. No need to touch complicated canvas api, just a simple schema object is enough.

Installation

$ npm install canvacord

Canvacord stays away from node-gyp based dependencies, so you don't have to worry about weird errors while installing the library. Although canvacord utilizes @napi-rs/canvas under the hood, it is recommended to use the builder api for image generation. Only utilize the canvas api if you need to perform image manipulation.

Documentation

https://canvacord.js.org

Discord support server

https://neplextech.com/discord

What's Changed

• feat!: canvacord next by @twlite in #171
• fix(JSX): monkey patch layout issues by @twlite in #172
• chore(deps): bump @napi-rs/image from 1.6.1 to 1.7.0 by @dependabot in #173
• Feat: Added missing templates: Jail, Bed and Colorfy by @carefreeav09 in #174
• feat: added missing factory methods by @Rizina in #175
• feat: added missing factory methods missing in rewrite by @FroostyCodes in #176
• feat: added new factory method by @FroostyCodes in #177
• refactor(loadImage): use stream/consumers by @twlite in #179
• refactor: update assets factory by @twlite in #180
• feat: leaderboard card builder by @twlite in #181
• Release 6.0.0-beta.0 by @twlite in #182
• chore: add jsdoc comments and update readme by @twlite in #183
• chore: monorepo setup by @twlite in #187
• feat: docs outline by @twlite in #188
• feat: v6 docs by @twlite in #189
• fix: render new types by @twlite in #190
• chore: update FUNDING.yml by @twlite in #193

New Contributors

• @dependabot made their first contribution in #173
• @carefreeav09 made their first contribution in #174
• @Rizina made their first contribution in #175
• @FroostyCodes made their first contribution in #176

Full Changelog: v5.4.10...v6.0.0

6.0.0-beta.0 (Experimental Release)

Documentation is a WIP.

New Image generation API (Partial)

import { canvacord } from 'canvacord';

// old image-generation methods
const triggered = await canvacord.triggered(img);
const trash = await canvacord.trash(img);

// image filterer methods (filters can be chained together)
// with 500x500 canvas size
const filtered = await canvacord.filters(500, 500).drawImage(img).hueRotate(70).encode();
// auto size detection
const filtered = await canvacord(img).hueRotate(70).encode();

Builders (Partial)

RankCardBuilder

import { RankCardBuilder } from 'canvacord';

const card = new RankCardBuilder()
    .setUsername('wumpus')
    .setDisplayName('Wumpus')
    .setDiscriminator('1234')
    .setAvatar('https://cdn.discordapp.com/embed/avatars/0.png?size=256')
    .setCurrentXP(300)
    .setRequiredXP(600)
    .setLevel(2)
    .setRank(5)
    .setStatus('online');

const image = await card.build({ format: 'png' }); // 'svg' generates svg image (best quality compared to other formats)

Leaderboard builder (prototype)

Builder API

Builder API allows you to create custom designs using react-like syntax and tailwindcss. You can use transpilers like babel or typescript to transpile jsx code.

import { JSX, Builder, Font } from 'canvacord';

interface Props {
  text: string;
}

class Design extends Builder<Props> {
  constructor() {
    // set width and height
    super(500, 500);
    // initialize props
    this.bootstrap({ text: '' });
  }

  setText(text: string) {
    this.options.set('text', text);
    return this;
  }

  // this is where you have to define output ui
  async render() {
    return (
      <div className="flex items-center justify-center h-full w-full bg-teal-500">
        <h1 className="text-white font-bold text-7xl">{this.options.get('text')}</h1>
      </div>
    );
  }
}

// usage

// load default font
Font.loadDefault();

// create design
const design = new Design().setText('Hello World');
const image = await design.build({ format: 'png' });

// do something with generated image

Output

For more info, join our discord server: https://neplextech.com/discord

What's Changed

• Discriminator update for RankCard by @21Z in #161

Full Changelog: v5.4.9...v5.4.10

What's Changed

• Add conditional discriminator rendering by @skdhg
• Create PULL_REQUEST_TEMPLATE.md by @slim-codes in #142
• [FEATURE] show specific progress from one level to the next by @Mittelblut9 in #151
• Add invisible type to Rank Card by @Damien111 in #149
• Fix: Failed to convert JavaScript value Undefined into rust type String by @21Z in #154

Possible Discriminator Styles

New Contributors

• @slim-codes made their first contribution in #142
• @Mittelblut9 made their first contribution in #151
• @Damien111 made their first contribution in #149
• @21Z made their first contribution in #154

Full Changelog: v5.4.8...v5.4.9

Fixes

• fix rank card gradient

Full Changelog: v5.4.7...v5.4.8

Updates

• Bump @napi-rs/canvas
• Use Intl formatter if available (module: abbrev)

Full Changelog: v5.4.6...v5.4.7

Assets

• bundle NotoColorEmoji font

Canvacord

• apply noto color emoji font
• fix typings

Full Changelog: v5.4.5...v5.4.6

Updates

• fix typings

Full Changelog: v5.4.4...v5.4.5