🎓 HUMG Banner Generator

Ứng dụng Node.js tạo banner chào mừng sinh viên HUMG với avatar, tên người dùng, trạng thái và thời gian. Hỗ trợ CLI và API.

🚀 Tính năng

✅ CLI Tool - Chạy trực tiếp từ command line
✅ JavaScript API - Tích hợp vào project
✅ 3 dòng text tùy chỉnh:
- 📝 "Chào mừng, [TÊN NGƯỜI DÙNG]"
- 📋 "[TRẠNG THÁI]" (ĐÃ THAM GIA / ĐÃ RỜI KHỎI)
- 🏫 "CỘNG ĐỒNG TÂN SINH VIÊN K70 HUMG"
✅ Avatar người dùng (hình tròn với viền)
✅ Thời gian hiện tại tự động
✅ Font UTM_Avo chuyên nghiệp
✅ Hỗ trợ avatar từ URL hoặc file local
✅ Vị trí và màu sắc có thể tùy chỉnh
✅ Xuất file JPG chất lượng cao

📦 Cài đặt

Cài đặt global (CLI)

npm install -g humg-banner-generator

Cài đặt local (API)

npm install humg-banner-generator

🎯 Cách sử dụng

1. CLI Tool (Dễ nhất)

Interactive Mode

npx humg-banner-generator
# Hoặc nếu đã cài global
humg-banner

Sẽ hỏi:

👤 Tên người dùng
📋 Trạng thái (1: ĐÃ THAM GIA, 2: ĐÃ RỜI KHỎI)
🖼️ URL avatar (tùy chọn)
💾 Tên file output

Sử dụng config file

npx humg-banner-generator --config config.json

Ví dụ config.json:

{
  "userName": "NGUYỄN VĂN A",
  "status": "ĐÃ THAM GIA",
  "avatarUrl": "https://example.com/avatar.jpg",
  "outputPath": "my-banner.jpg",
  "datetimeFormat": {
    "showDate": true,
    "showTime": true,
    "dateFormat": "dd/mm/yyyy",
    "timeFormat": "24h",
    "separator": " | "
  }
}

2. JavaScript API

Sử dụng cơ bản

const BannerGenerator = require('humg-banner-generator');

async function createBanner() {
  const generator = new BannerGenerator();
  await generator.initialize();

  await generator.generateBanner({
    userName: 'NGUYỄN VĂN A',
    status: 'ĐÃ THAM GIA',        // hoặc 'ĐÃ RỜI KHỎI'
    avatarUrl: 'https://example.com/avatar.jpg',
    outputPath: 'welcome-banner.jpg'
  });
}

createBanner();

Với font tùy chỉnh

const generator = new BannerGenerator();

// Đăng ký fonts
await generator.initialize([
  {
    path: './fonts/MyFont.ttf',
    family: 'MyFont',
    weight: 'bold'
  }
]);

await generator.generateBanner({
  userName: 'NGUYỄN VĂN A',
  status: 'ĐÃ RỜI KHỎI',
  avatarUrl: 'https://example.com/avatar.jpg',
  outputPath: 'custom-banner.jpg',
  datetimeFormat: {
    showDate: true,
    showTime: false
  }
});

⚙️ Tùy chỉnh nâng cao

Vị trí text

Chỉnh sửa file position-config.js:

module.exports = {
  text: {
    main: { x: 0.5, y: 0.55 },         // Vị trí tên chính
    status: { x: 0.5, y: 0.67 },       // Vị trí trạng thái
    community: { x: 0.5, y: 0.78 },    // Vị trí text cộng đồng
    datetime: { x: 0.52, y: 0.9 }      // Vị trí thời gian
  }
}

Style text

style: {
  mainText: {
    fontSize: 0.005,
    fontFamily: 'UTM_AvoBold, sans-serif',
    color: '#FFFFFF',
    strokeColor: '#004aad'
  },
  statusText: {
    fontSize: 0.025,
    fontFamily: 'UTM_AvoBold, sans-serif', 
    color: '#FFFFFF',         // Màu trắng
    strokeColor: '#004aad'
  },
  communityText: {
    fontSize: 0.025,
    fontFamily: 'UTM_AvoBold, sans-serif',
    color: '#FFFFFF',
    strokeColor: '#004aad',
    fontWeight: 'bold'
  }
}

API Options

Option	Type	Default	Description
`userName`	string	`'Tân Sinh Viên'`	Tên hiển thị
`status`	string	`'ĐÃ THAM GIA'`	Trạng thái tham gia
`avatarUrl`	string	`null`	URL avatar
`avatarFile`	string	`null`	Đường dẫn file avatar
`outputPath`	string	`'output-banner.jpg'`	File output
`datetimeFormat`	object	`{}`	Cấu hình thời gian

Status Options

"ĐÃ THAM GIA" - Thành viên hiện tại
"ĐÃ RỜI KHỎI" - Cựu thành viên

📁 Template Project

Để tạo project mới từ template:

npx create-humg-banner my-banner-project
cd my-banner-project
npm start

🔧 Development

# Clone repository
git clone https://github.com/Epchannel/humg-banner-generator.git
cd humg-banner-generator

# Cài đặt dependencies  
npm install

# Test CLI
npm run cli

# Test API
npm start

📝 Ví dụ kết quả

Banner sẽ bao gồm 4 dòng text:

"Chào mừng, NGUYỄN VĂN A" - Tên người dùng
"ĐÃ THAM GIA" - Trạng thái (có thể thay đổi)
"CỘNG ĐỒNG TÂN SINH VIÊN K70 HUMG" - Text cộng đồng
"25/07/2024 | 14:30" - Thời gian hiện tại

Cùng với:

Avatar người dùng (hình tròn có viền)
Font UTM_Avo chuyên nghiệp
Layout responsive

📄 License

🤝 Contributing

Pull requests welcome! Báo lỗi tại: https://github.com/Epchannel/humg-banner-generator/issues

Made with ❤️ for HUMG Community

Détail du package

humg-banner-generator

readme