Headless Chrome kullanarak alıntı kartları, Spotify kartları ve rank/seviye kartları PNG buffer olarak üretir. Discord botları için yapıldı, her Node projesinde çalışır.

Önizleme

Alıntı Kartı — Sinema Stili

Alıntı Kartı — Poster Stili

Alıntı Kartı — Minimal Stili

Spotify Kartı

Rank Kartı

Kurulum

npm install luhux-card

puppeteer-core kullanır — Chromium indirmez, bilgisayarındaki kurulu Chrome'u otomatik bulur. Chrome kurulu değilse PUPPETEER_EXECUTABLE_PATH ortam değişkeniyle yolu belirtebilirsin.

Alıntı Kartı

Hızlı başlangıç

import { generateQuoteCard } from 'luhux-card';
import fs from 'fs';

const buffer = await generateQuoteCard({
    avatarUrl: 'https://cdn.discordapp.com/avatars/.../avatar.png',
    displayName: 'luhux1337',
    username: 'luhux',
    text: 'selamun aleyküm :D',
    style: 'cinema',       // 'cinema' | 'poster' | 'minimal'
    accent: '#10b981',
    bg: '#0a0a0f',
    fontKey: 'inter',
    watermark: 'my-bot.dev',
});

fs.writeFileSync('quote.png', buffer);

Tekrarlı render (Discord butonları)

Kullanıcı butonlarla stil/renk değiştiriyorsa QuoteCardRenderer kullan — browser'ı açık tutar, her render çok daha hızlı olur.

import { QuoteCardRenderer } from 'luhux-card';

const renderer = new QuoteCardRenderer();

// Her buton tıklamasında:
const buffer = await renderer.render(state);

// Collector bittiğinde:
await renderer.close();

Discord.js örneği

import { QuoteCardRenderer, type QuoteCardOptions } from 'luhux-card';
import { AttachmentBuilder } from 'discord.js';

const renderer = new QuoteCardRenderer();

const state: QuoteCardOptions = {
    avatarUrl: user.displayAvatarURL({ size: 512, extension: 'png' }),
    displayName: user.globalName ?? user.username,
    username: user.username,
    text: interaction.options.getString('text', true),
    style: 'cinema',
};

const buf = await renderer.render(state);
await interaction.reply({ files: [new AttachmentBuilder(buf, { name: 'quote.png' })] });

await renderer.close();

Seçenekler (QuoteCardOptions)

| Seçenek | Tip | Varsayılan | Açıklama | |---|---|---|---| | avatarUrl | string | — | zorunlu | | displayName | string | — | zorunlu | | username | string | — | zorunlu, @kullaniciadi olarak gösterilir | | text | string | — | zorunlu, alıntı metni | | style | 'cinema' \| 'poster' \| 'minimal' | 'cinema' | | | fontKey | FONTS içindeki bir anahtar | 'inter' | aşağıya bak | | customFont | { label, css, family } | — | kendi Google Font'unu kullanmak için | | bg | hex renk | #0a0a0f | arka plan rengi | | accent | hex renk | #10b981 | vurgu / gradient rengi | | tc | hex renk | #f0ece4 | metin rengi (poster ve minimal stilleri) | | fontSize | number | 22 | temel boyut; sinema modunda metin uzunluğuna göre otomatik ölçeklenir | | dim | number (10–90) | 55 | fotoğrafın karartılma miktarı | | watermark | string | 'luhux-card' | sinema stilinde sol alt köşedeki yazı | | width / height | number | 920 / 460 | tuval boyutu | | scale | number | 2 | ekran görüntüsü ölçek çarpanı (netlik / hız dengesi) |

Hazır presetler

import { FONTS, ACCENT_COLORS, BG_COLORS, TEXT_COLORS } from 'luhux-card';

Object.keys(FONTS);
// 'cormorant' | 'playfair' | 'eb' | 'cinzel' | 'raleway' | 'inter' | 'mono' | 'baloo'

Object.keys(ACCENT_COLORS);
// 'Altın' | 'Gümüş' | 'Mor' | 'Mavi' | 'Yeşil' | 'Kırmızı'

Spotify Kartı

Spotify "şu an çalıyor" kartı — albüm kapağı, blur arka plan, progress bar ve öneri listesiyle.

Hızlı başlangıç

import { generateSpotifyCard } from 'luhux-card';
import fs from 'fs';

const buffer = await generateSpotifyCard({
    title: 'Şarkı Adı',
    artist: 'Sanatçı',
    album: 'Albüm Adı',
    cover: 'https://i.scdn.co/image/...',
    username: 'luhux',
    startTime: Date.now() - 60_000,
    endTime: Date.now() + 180_000,
    recommendations: [
        { name: 'Başka Şarkı', artists: 'Başka Sanatçı', url: 'https://open.spotify.com/track/...' },
    ],
});

fs.writeFileSync('spotify.png', buffer);

Discord.js örneği (presence üzerinden)

import { generateSpotifyCard } from 'luhux-card';
import { AttachmentBuilder, ActivityType } from 'discord.js';

const status = member.presence?.activities?.find(
    a => a.name === 'Spotify' && a.type === ActivityType.Listening
);

if (status) {
    const albumArt = `https://i.scdn.co/image/${status.assets?.largeImage?.slice(8)}`;

    const buf = await generateSpotifyCard({
        title: status.details ?? '',
        artist: status.state ?? '',
        album: status.assets?.largeText ?? '',
        cover: albumArt,
        username: member.displayName,
        startTime: status.timestamps?.start ?? Date.now(),
        endTime: status.timestamps?.end ?? Date.now(),
    });

    await interaction.reply({
        files: [new AttachmentBuilder(buf, { name: 'spotify.png' })],
    });
}

Seçenekler (GenerateSpotifyCardOptions)

| Seçenek | Tip | Varsayılan | Açıklama | |---|---|---|---| | title | string | — | zorunlu, şarkı adı | | artist | string | — | zorunlu, sanatçı adı | | album | string | '' | albüm adı | | cover | string \| Buffer | — | albüm kapağı URL, base64 data URL veya dosya yolu | | username | string | 'Kullanıcı' | dinleyen kişinin adı | | startTime | number \| Date | — | şarkının başladığı zaman (timestamp) | | endTime | number \| Date | — | şarkının biteceği zaman (timestamp) | | progressMs | number | — | geçen süre ms (startTime/endTime yerine kullanılabilir) | | durationMs | number | — | toplam süre ms (startTime/endTime yerine kullanılabilir) | | recommendations | SpotifyCardRecommendation[] | [] | benzer şarkı önerileri (en fazla 3) | | theme | SpotifyCardTheme | — | renk özelleştirme | | theme.accent | string | '#1DB954' | Spotify yeşili (progress bar rengi) | | theme.accentLight | string | '#20e565' | progress bar gradient sonu | | theme.background | string | '#0f0f0f' | kart arka plan rengi | | labels | SpotifyCardLabels | — | metin özelleştirme | | labels.nowPlaying | string | 'Şu anda çalıyor' | badge yazısı | | labels.listener | string | 'Dinleyen' | dinleyen etiketi | | labels.suggestions | string | 'Benzer Şarkı Önerileri' | öneri başlığı | | width | number | 780 | kart genişliği | | scale | number | 2 | ekran görüntüsü ölçek çarpanı | | outputPath | string | — | belirtilirse dosyaya da kaydeder |

Rank Kartı

Kullanıcı seviye/XP kartı — avatar, sunucu sırası, istatistikler, XP progress bar ve rozetlerle.

Hızlı başlangıç

import { generateRankCard } from 'luhux-card';
import fs from 'fs';

const buffer = await generateRankCard({
    displayName: 'luhux1337',
    username: 'luhux',
    rank: 4,
    level: 38,
    xp: 72_450,
    levelStartXp: 50_000,
    nextLevelXp: 100_000,
    messageCount: 1284,
    voiceHours: 62,
    streak: 14,
    accent: '#7c3aed',
    badges: [
        { label: 'Aktif Üye',     color: 'purple', emoji: '⚡' },
        { label: 'Top 10',        color: 'gold',   emoji: '🏆' },
        { label: 'Sohbet Ustası', color: 'blue',   emoji: '💬' },
        { label: 'Ses Dostu',     color: 'green',  emoji: '🎵' },
    ],
});

fs.writeFileSync('rank.png', buffer);

Discord.js örneği

import { generateRankCard } from 'luhux-card';
import { AttachmentBuilder } from 'discord.js';

const buf = await generateRankCard({
    avatarUrl: member.displayAvatarURL({ size: 512, extension: 'png' }),
    displayName: member.displayName,
    username: member.user.username,
    rank: 4,           
    level: 38,
    xp: 72_450,
    levelStartXp: 50_000,
    nextLevelXp: 100_000,
    messageCount: 1284,
    voiceHours: 62,
    streak: 14,
    accent: '#7c3aed',
});

await interaction.reply({
    files: [new AttachmentBuilder(buf, { name: 'rank.png' })],
});

Seçenekler (RankCardOptions)

| Seçenek | Tip | Varsayılan | Açıklama | |---|---|---|---| | displayName | string | — | zorunlu, görünen ad | | level | number | — | zorunlu, mevcut seviye | | xp | number | — | zorunlu, mevcut toplam XP | | nextLevelXp | number | — | zorunlu, sonraki seviye için gereken XP | | avatarUrl | string | — | avatar URL (yoksa baş harf gösterilir) | | username | string | — | @handle olarak gösterilir | | rank | number | — | sunucu sırası | | levelStartXp | number | 0 | bu seviyenin başlangıç XP'si | | messageCount | number | — | toplam mesaj sayısı | | voiceHours | number | — | toplam ses saati | | streak | number | — | günlük aktiflik serisi | | badges | RankCardBadge[] | — | rozetler (aşağıya bak) | | accent | hex renk | '#7c3aed' | kart accent rengi | | width | number | 780 | kart genişliği | | scale | number | 2 | ekran görüntüsü ölçek çarpanı | | outputPath | string | — | belirtilirse dosyaya da kaydeder |

Rozetler (RankCardBadge)

| Alan | Tip | Açıklama | |---|---|---| | label | string | rozet yazısı | | color | 'purple' \| 'gold' \| 'blue' \| 'green' \| 'red' | rozet rengi | | emoji | string | isteğe bağlı emoji |

Lisans

MIT © Utku 'luhux' KÖSEM