Hollow Knight Title Generator

Bu proje, Hollow Knight (ve benzeri) stilde başlık / banner görselleri oluşturmanızı sağlayan küçük bir Svelte uygulamasıdır.

Özellikler

Hızlı başlangıç

1. Bağımlılıkları yükleyin:

npm install

2. Geliştirme sunucusunu başlatın:

npm run dev

3. Tarayıcıda http://localhost:5000 (veya rollup çıktısına göre) açın.

Proje yapısı

• components/CanvasPreview.svelte — Canvas render ve indirme işlemleri
• components/Controls.svelte — UI kontrolleri
• utils.js — yardımcı fonksiyonlar ve sınıflar

Notlar — modernizasyon

Lisans Bu depo örnek amaçlıdır.

Hollow Knight Title Generator

This project is a small Svelte application for creating Hollow Knight-style title/banner images.

Features

• Multiple built-in banner/logo templates
• Three editable text fields: super (top), main, and sub (bottom)
• Blur/shadow and bold font options
• Export as PNG

Quick start

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open the app in your browser (see rollup output for the exact localhost port).

How it works

• The app renders templates onto an HTML canvas and draws text using configurable sizes and shadow/blur settings.
• The UI is split into two components: CanvasPreview (renders canvas, handles download) and Controls (user input).

Project structure

• src/ — Svelte source files
  • src/components/CanvasPreview.svelte — Canvas rendering and download logic
  • src/components/Controls.svelte — Inputs and controls
  • src/App.svelte — App shell that wires components together
  • src/utils.js — Helper functions and classes (canvasHelper, BannerParams)

Modernization suggestions

• Migrate from Rollup to Vite for faster dev server and simpler config.
• Add TypeScript for safer refactors and better IDE support.
• Add a simple CI workflow (GitHub Actions) to build and smoke-test on push.

Contributing

• Small PRs are welcome. Prefer focused commits (refactor, chore, docs, feat).

License This repository is provided as an example project.

Hollow Knight Title Generator

Get started

npm install
npm run dev

Then Navigate to localhost:5000.

Building and running in production mode

To create an optimised version of the app:

npm run build

You can run the newly built app with npm run start. This uses sirv, which is included in your package.json's dependencies so that the app will work when you deploy to platforms like Heroku.