welcomize 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Sploov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,149 @@
+<div align="center">
+
+# 🃏 Welcomize
+
+**Create stunning, customizable welcome images for your Discord communities in milliseconds.**
+
+[![npm version](https://img.shields.io/npm/v/welcomize?style=flat-square&color=5865F2)](https://www.npmjs.com/package/welcomize)
+[![Downloads](https://img.shields.io/npm/dt/welcomize?style=flat-square&color=blue)](https://www.npmjs.com/package/welcomize)
+[![License](https://img.shields.io/npm/l/welcomize?style=flat-square&color=green)](https://github.com/sploov/welcomize/blob/main/LICENSE)
+[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+
+<br />
+
+<img src="./assets/modern.png" width="800" alt="Welcomize Modern Theme Preview" />
+
+<br />
+
+[**Installation**](#-installation) •
+[**Quick Start**](#-quick-start) •
+[**Themes**](#-themes) •
+[**API Reference**](#-api-reference) •
+[**Contributing**](#-contributing)
+
+</div>
+
+---
+
+## ✨ Features
+
+- **🚀 High Performance:** Powered by `@napi-rs/canvas` for blazing fast image generation.
+- **🎨 Pre-built Themes:** Comes with `Classic`, `Modern`, and `Clean` themes out of the box.
+- **🛠 Fully Customizable:** Control colors, fonts, backgrounds, and layouts.
+- **📘 TypeScript:** Written in TypeScript with full type definitions included.
+- **📦 Lightweight:** Zero heavy dependencies (uses pre-compiled binaries).
+
+---
+
+## 📦 Installation
+
+Install `welcomize` using your favorite package manager:
+
+```bash
+# npm
+npm install welcomize
+
+# yarn
+yarn add welcomize
+
+# pnpm
+pnpm add welcomize
+```
+
+---
+
+## 🚀 Quick Start
+
+Generate your first welcome card in just a few lines of code.
+
+```typescript
+import { Welcomize } from 'welcomize';
+import { AttachmentBuilder } from 'discord.js';
+
+// 1. Create the card
+const card = new Welcomize({
+    username: 'SploovDev',
+    avatarUrl: 'https://github.com/sploov.png',
+    theme: 'modern',
+    title: 'Welcome!',
+    subtitle: 'To the Sploov Community',
+    borderColor: '#5865F2'
+});
+
+// 2. Render to buffer
+const buffer = await card.render();
+
+// 3. Send to Discord
+const attachment = new AttachmentBuilder(buffer, { name: 'welcome.png' });
+channel.send({ files: [attachment] });
+```
+
+---
+
+## 🎨 Themes
+
+Welcomize comes with beautiful built-in themes.
+
+### 🔹 Modern
+A sleek, gradient-based design with a glowing avatar.
+<img src="./assets/modern.png" width="100%" style="border-radius: 10px; margin-bottom: 20px;" alt="Modern Theme" />
+
+```typescript
+new Welcomize({ theme: 'modern', borderColor: '#00FFFF', ... });
+```
+
+### 🔹 Clean
+Minimalist, bright, and professional.
+<img src="./assets/clean.png" width="100%" style="border-radius: 10px; margin-bottom: 20px;" alt="Clean Theme" />
+
+```typescript
+new Welcomize({ theme: 'clean', borderColor: '#FF5733', ... });
+```
+
+### 🔹 Classic
+The timeless solid-color Discord style.
+<img src="./assets/classic.png" width="100%" style="border-radius: 10px; margin-bottom: 20px;" alt="Classic Theme" />
+
+```typescript
+new Welcomize({ theme: 'classic', backgroundColor: '#23272A', ... });
+```
+
+---
+
+## ⚙️ API Reference
+
+### `WelcomizeOptions`
+
+| Option | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `username` | `string` | **Required** | The username to display. |
+| `avatarUrl` | `string` | **Required** | The user's avatar URL (png/jpg). |
+| `theme` | `Theme` | `'classic'` | `'classic'`, `'modern'`, or `'clean'`. |
+| `title` | `string` | `'Welcome'` | Main heading text. |
+| `subtitle` | `string` | `'To the server!'` | Subtitle/message text. |
+| `backgroundColor` | `string` | *Theme Default* | Hex color background. |
+| `textColor` | `string` | `'#FFFFFF'` | Hex color for text. |
+| `borderColor` | `string` | *Theme Default* | Accent/Border color. |
+| `fontPath` | `string` | `undefined` | Custom font file path. |
+
+---
+
+## 🤝 Contributing
+
+We love contributions! Please read our [Contributing Guide](CONTRIBUTING.md) to get started.
+
+1. Fork the repo.
+2. Create your feature branch.
+3. Commit your changes.
+4. Push to the branch.
+5. Open a Pull Request.
+
+---
+
+<div align="center">
+
+Made with ❤️ by the **Sploov** Team
+
+[GitHub](https://github.com/sploov) • [Issues](https://github.com/sploov/welcomize/issues)
+
+</div>

package/dist/Welcomize.d.ts

@@ -0,0 +1,11 @@
+import { WelcomizeOptions } from './types';
+export declare class Welcomize {
+    private options;
+    private width;
+    private height;
+    constructor(options: WelcomizeOptions);
+    render(): Promise<Buffer>;
+    private drawClassic;
+    private drawModern;
+    private drawClean;
+}

package/dist/Welcomize.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Welcomize = void 0;
+const canvas_1 = require("@napi-rs/canvas");
+const utils_1 = require("./utils");
+class Welcomize {
+    constructor(options) {
+        this.width = 800;
+        this.height = 300;
+        this.options = {
+            theme: 'classic',
+            title: 'Welcome',
+            subtitle: 'To the server!',
+            backgroundColor: '#23272A',
+            textColor: '#FFFFFF',
+            borderColor: '#7289DA',
+            ...options
+        };
+    }
+    async render() {
+        const canvas = (0, canvas_1.createCanvas)(this.width, this.height);
+        const ctx = canvas.getContext('2d');
+        // Load Avatar
+        let avatar;
+        try {
+            avatar = await (0, canvas_1.loadImage)(this.options.avatarUrl);
+        }
+        catch (e) {
+            throw new Error('Failed to load avatar image.');
+        }
+        switch (this.options.theme) {
+            case 'modern':
+                this.drawModern(ctx, avatar);
+                break;
+            case 'clean':
+                this.drawClean(ctx, avatar);
+                break;
+            case 'classic':
+            default:
+                this.drawClassic(ctx, avatar);
+                break;
+        }
+        return canvas.toBuffer('image/png');
+    }
+    drawClassic(ctx, avatar) {
+        // Background
+        ctx.fillStyle = this.options.backgroundColor;
+        ctx.fillRect(0, 0, this.width, this.height);
+        // Border
+        ctx.strokeStyle = this.options.borderColor;
+        ctx.lineWidth = 15;
+        ctx.strokeRect(0, 0, this.width, this.height);
+        // Avatar
+        const avatarRadius = 100;
+        const avatarX = 150;
+        const avatarY = this.height / 2;
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(avatarX, avatarY, avatarRadius + 5, 0, Math.PI * 2);
+        ctx.fillStyle = this.options.borderColor;
+        ctx.fill();
+        ctx.restore();
+        (0, utils_1.drawCircularImage)(ctx, avatar, avatarX, avatarY, avatarRadius);
+        // Text
+        ctx.fillStyle = this.options.textColor;
+        ctx.textAlign = 'left';
+        // Welcome
+        ctx.font = 'bold 60px sans-serif';
+        ctx.fillText(this.options.title, 300, 130);
+        // Username
+        ctx.font = '40px sans-serif';
+        ctx.fillText(this.options.username, 300, 190);
+        // Subtitle
+        ctx.fillStyle = '#CCCCCC';
+        ctx.font = '25px sans-serif';
+        ctx.fillText(this.options.subtitle, 300, 230);
+    }
+    drawModern(ctx, avatar) {
+        // Gradient Background
+        const gradient = ctx.createLinearGradient(0, 0, this.width, this.height);
+        gradient.addColorStop(0, '#0F2027');
+        gradient.addColorStop(0.5, '#203A43');
+        gradient.addColorStop(1, '#2C5364');
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, this.width, this.height);
+        // Decoration
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
+        ctx.beginPath();
+        ctx.arc(this.width, 0, 300, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.beginPath();
+        ctx.arc(0, this.height, 200, 0, Math.PI * 2);
+        ctx.fill();
+        // Avatar (Centered)
+        const avatarRadius = 90;
+        const avatarX = this.width / 2;
+        const avatarY = 110;
+        // Glow
+        ctx.shadowColor = this.options.borderColor;
+        ctx.shadowBlur = 25;
+        (0, utils_1.drawCircularImage)(ctx, avatar, avatarX, avatarY, avatarRadius);
+        ctx.shadowBlur = 0; // Reset shadow
+        // Text
+        ctx.fillStyle = this.options.textColor;
+        ctx.textAlign = 'center';
+        ctx.font = 'bold 50px sans-serif';
+        ctx.fillText(`Welcome, ${this.options.username}`, this.width / 2, 240);
+        ctx.font = '25px sans-serif';
+        ctx.fillStyle = '#AAAAAA';
+        ctx.fillText(this.options.subtitle, this.width / 2, 275);
+    }
+    drawClean(ctx, avatar) {
+        // Background (Light usually, or custom)
+        const bgColor = this.options.backgroundColor === '#23272A' ? '#FFFFFF' : this.options.backgroundColor;
+        const textColor = this.options.textColor === '#FFFFFF' ? '#333333' : this.options.textColor;
+        ctx.fillStyle = bgColor;
+        ctx.fillRect(0, 0, this.width, this.height);
+        // Accent Bar
+        ctx.fillStyle = this.options.borderColor;
+        ctx.fillRect(0, 0, 20, this.height);
+        // Avatar (Rounded Rect)
+        const avatarSize = 200;
+        const avatarX = 60;
+        const avatarY = (this.height - avatarSize) / 2;
+        // Shadow for avatar
+        ctx.shadowColor = 'rgba(0,0,0,0.3)';
+        ctx.shadowBlur = 10;
+        ctx.shadowOffsetX = 5;
+        ctx.shadowOffsetY = 5;
+        (0, utils_1.drawRoundedImage)(ctx, avatar, avatarX, avatarY, avatarSize, avatarSize, 20);
+        ctx.shadowColor = 'transparent';
+        // Text
+        ctx.fillStyle = textColor;
+        ctx.textAlign = 'left';
+        ctx.font = 'bold 70px sans-serif';
+        ctx.fillText('WELCOME', 300, 140);
+        ctx.fillStyle = this.options.borderColor;
+        ctx.font = '40px sans-serif';
+        ctx.fillText(this.options.username, 300, 200);
+    }
+}
+exports.Welcomize = Welcomize;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './Welcomize';

package/dist/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./Welcomize"), exports);

package/dist/types.d.ts

@@ -0,0 +1,12 @@
+export type Theme = 'classic' | 'modern' | 'clean';
+export interface WelcomizeOptions {
+    username: string;
+    avatarUrl: string;
+    theme?: Theme;
+    title?: string;
+    subtitle?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    borderColor?: string;
+    fontPath?: string;
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+import { SKRSContext2D, Image } from '@napi-rs/canvas';
+export declare function drawRoundedImage(ctx: SKRSContext2D, image: Image, x: number, y: number, width: number, height: number, radius: number): void;
+export declare function drawCircularImage(ctx: SKRSContext2D, image: Image, x: number, y: number, radius: number): void;

package/dist/utils.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawRoundedImage = drawRoundedImage;
+exports.drawCircularImage = drawCircularImage;
+function drawRoundedImage(ctx, image, x, y, width, height, radius) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);
+    ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2);
+    ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5);
+    ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI);
+    ctx.closePath();
+    ctx.clip();
+    ctx.drawImage(image, x, y, width, height);
+    ctx.restore();
+}
+function drawCircularImage(ctx, image, x, y, radius) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.clip();
+    // drawImage takes top-left corner, so subtract radius
+    ctx.drawImage(image, x - radius, y - radius, radius * 2, radius * 2);
+    ctx.restore();
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "welcomize",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rimraf dist && tsc",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sploov/welcomize.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "bugs": {
+    "url": "https://github.com/sploov/welcomize/issues"
+  },
+  "homepage": "https://github.com/sploov/welcomize#readme",
+  "dependencies": {
+    "@napi-rs/canvas": "^0.1.88"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "rimraf": "^6.1.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3"
+  }
+}