Ein leistungsstarker WYSIWYG-Editor für die Erstellung und Verwaltung von HTML-E-Mail-Signaturen. Die Anwendung verwendet den Monaco-Editor (die gleiche Technologie wie VS Code) und bietet eine Echtzeit-Vorschau der Signatur während der Bearbeitung.

Diese Webanwendung ermöglicht es Benutzern, professionelle HTML-E-Mail-Signaturen zu erstellen, zu bearbeiten, zu speichern und zu exportieren. Die Anwendung kombiniert einen fortschrittlichen Code-Editor mit einer Live-Vorschau und bietet eine intuitive Benutzeroberfläche für die Verwaltung mehrerer Signaturvorlagen.

• Split-View Interface: Geteilte Ansicht mit Code-Editor links und Echtzeit-Vorschau rechts
• Monaco-Editor: Leistungsstarker HTML-Editor mit Syntax-Highlighting, Autovervollständigung und mehr
• Live-Vorschau: Sofortige Vorschau aller Änderungen am Code
• Vorlagenverwaltung: Speichern, Laden, Überschreiben und Löschen von Signaturvorlagen
• Code-Formatierung: "Beautify"-Funktion zur automatischen Formatierung des HTML-Codes
• Export-Funktionalität: Export von Signaturen als HTML-Dateien
• Responsives Design: Anpassung an verschiedene Bildschirmgrößen
• Benachrichtigungssystem: Toast-Benachrichtigungen für Benutzerrückmeldungen
• Persistente Datenspeicherung: Unterstützung für PostgreSQL (Produktion) und SQLite (Entwicklung)

• HTML5/CSS3/JavaScript: Basis der Benutzeroberfläche
• Bootstrap 5: CSS-Framework für das responsive Design
• Monaco Editor: Leistungsstarker Code-Editor (gleiche Technologie wie VS Code)
• Split.js: Für die geteilte Ansicht (Editor/Vorschau)
• js-beautify: Für die Code-Formatierung

• Node.js: JavaScript-Laufzeitumgebung
• Express: Web-Framework für Node.js
• PostgreSQL: Primäre Datenbank für Produktionsumgebungen (Railway)
• SQLite: Alternative Datenbank für lokale Entwicklung
• Sequelize: ORM für die Datenbankinteraktion

• server.js: Express-Server mit Datenbankintegration und REST-API-Endpunkten
• index.html: Haupt-HTML-Datei mit der UI-Struktur und den Modals
• app.js: Haupt-JavaScript-Datei, die die Anwendungslogik enthält
• storage.js: Manager für die Datenspeicherung, kommuniziert mit dem Backend
• styles.css: CSS-Styling für die Anwendung

1. Benutzerinteraktion: User interagiert mit der UI (Editor, Buttons)
2. Clientseitige Verarbeitung: app.js verarbeitet Benutzeraktionen, aktualisiert die UI
3. Datenspeicherung: storage.js kommuniziert mit dem Backend für CRUD-Operationen
4. Backend-Verarbeitung: server.js verarbeitet API-Anfragen und interagiert mit der Datenbank
5. Datenbank: PostgreSQL/SQLite speichert Templates und deren Metadaten

• GET /api/templates: Alle Templates abrufen
• GET /api/templates/:name: Einzelnes Template abrufen
• POST /api/templates: Template speichern/aktualisieren
• DELETE /api/templates/:name: Template löschen

Die Anwendung verwendet ein einheitliches Datenbankschema, unabhängig davon, ob PostgreSQL oder SQLite verwendet wird:

-- PostgreSQL-Version
CREATE TABLE templates (
    id SERIAL PRIMARY KEY,
    name TEXT UNIQUE NOT NULL,
    content TEXT NOT NULL,
    category TEXT DEFAULT 'default',
    tags JSONB DEFAULT '[]',
    updated_at TIMESTAMP DEFAULT NOW()
);

-- SQLite-Version (für lokale Entwicklung)
CREATE TABLE templates (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT UNIQUE NOT NULL,
    content TEXT NOT NULL,
    category TEXT DEFAULT 'default',
    tags TEXT DEFAULT '[]',
    updated_at TEXT
)

Die Anwendung erkennt automatisch, welche Datenbank verwendet werden soll:

• PostgreSQL wird für Produktionsumgebungen verwendet, wenn die Umgebungsvariable DATABASE_URL gesetzt ist
• SQLite wird als Fallback für lokale Entwicklung verwendet

• Node.js (Version 14 oder höher)
• npm (kommt mit Node.js)

1. Repository klonen:

   git clone https://github.com/username/html-email-signature-editor.git
   cd html-email-signature-editor

2. Abhängigkeiten installieren:

   npm install

3. Anwendung starten:

   npm start

4. Im Browser öffnen:

   http://localhost:3000
   

Für die Entwicklung kann der Server im Watch-Modus gestartet werden:

npm run dev

• Neu: Erstellt eine neue leere Signatur
• Beautify: Formatiert den HTML-Code für bessere Lesbarkeit
• Save: Speichert die aktuelle Signatur als Template
• Load: Lädt gespeicherte Templates
• Export: Exportiert die aktuelle Signatur als HTML-Datei

1. Neue Signatur erstellen:

   • Auf "Neu" klicken
   • HTML-Code eingeben oder bearbeiten
   • Änderungen in der Live-Vorschau überprüfen
   • Mit "Beautify" den Code formatieren
   • Mit "Save" speichern und Namen vergeben

2. Vorhandene Signatur bearbeiten:

   • Auf "Load" klicken
   • Template aus der Liste auswählen
   • Bearbeiten im Editor
   • Mit "Save" unter gleichem Namen speichern (Überschreiben) oder neuen Namen vergeben

3. Signatur exportieren:

   • Signatur im Editor erstellen/bearbeiten
   • Auf "Export" klicken
   • HTML-Datei wird heruntergeladen

• Bei der Bereitstellung auf Railway App kann es bei Deployments oder Application Restarts zu Datenverlust kommen, wenn keine PostgreSQL-Datenbank konfiguriert ist.
• Die lokale Speicherung im Browser ist als Fallback implementiert, aber nicht als primärer Speichermechanismus.
• Um das Datenverlust-Problem zu mildern, werden automatisch Standard-Templates eingefügt, wenn die Datenbank leer ist.

Diese Anwendung ist für das Deployment auf Railway.app optimiert. Folge diesen Schritten, um die Anwendung zu deployen:

• Ein Konto bei Railway.app
• Ein Git-Repository mit dem Projektcode (z.B. auf GitHub)

1. Verbinde dein Railway-Konto mit GitHub:

   • Melde dich bei Railway an
   • Gehe zu "Integrations" und verbinde dein GitHub-Konto

2. Erstelle ein neues Projekt:

   • Klicke auf "New Project" auf dem Railway Dashboard
   • Wähle "Deploy from GitHub repo"
   • Wähle das Repository mit dem HTML Email Signature Editor aus

3. Konfiguriere das Projekt:

   • Railway erkennt automatisch, dass es sich um eine Node.js-Anwendung handelt
   • Die railway.toml-Datei und Procfile im Repository stellen sicher, dass Railway die Anwendung korrekt startet
   • Keine weiteren Konfigurationen sind notwendig, da die Anwendung die PORT-Umgebungsvariable nutzt

4. Starte das Deployment:

   • Railway startet das Deployment automatisch
   • Warte, bis der Build-Prozess abgeschlossen ist
   • Die Anwendung ist nun unter der von Railway bereitgestellten URL erreichbar

Die Railway CLI ist ein leistungsstarkes Tool für die Interaktion mit Railway-Projekten. Dies ist besonders nützlich für LLMs (Large Language Models) und Entwickler, die Automatisierungen implementieren möchten.

# Installation mit npm
npm install -g @railway/cli

# Alternative: Installation mit Homebrew (macOS)
brew install railway

# Login mit Browser-Authentifizierung
railway login

# Login mit API-Token (ideal für CI/CD und LLMs)
railway login --token <API_TOKEN>

# Aktuelles Projekt anzeigen
railway status

# Liste aller Projekte
railway list

# Projekt wechseln
railway link

# Alle Umgebungsvariablen anzeigen
railway variables

# Umgebungsvariable setzen
railway variables set KEY=VALUE

# Mehrere Variablen setzen
railway variables set KEY1=VALUE1 KEY2=VALUE2

# Variable entfernen
railway variables delete KEY

# Live-Logs anzeigen
railway logs

# Logs mit Zeitstempeln
railway logs --timestamps

# Gefilterte Logs (nur Fehler)
railway logs --filter error

# Logs zu einem bestimmten Service
railway logs --service html-email-signature-editor

# Manuelles Deployment auslösen
railway up

# Deployment-Status anzeigen
railway status

# Deployment-Historie ansehen
railway list deployments

# Zu einem früheren Deployment zurückkehren
railway rollback --deployment <DEPLOYMENT_ID>

# Verbindung zur Postgres-Datenbank herstellen (falls konfiguriert)
railway connect

# Datenbank-Backup erstellen
railway backup

# SQL-Datei ausführen
railway run "psql -f ./schema.sql"

# Detaillierte Informationen zum Projekt
railway info

# Netzwerk-Konfiguration anzeigen
railway status --environment production

# Service-Status prüfen
railway service status

# Detaillierte Health-Checks
railway health

# Deployment-Status abfragen
deployment_status=$(railway status --json | jq -r '.deployments[0].status')

# Logs bei Fehlern extrahieren
railway logs --filter error --json > error_logs.json

# Automatische Skalierung anpassen
railway variables set SCALE_COUNT=3

# Umgebungswechsel mit einer Bedingung
if [ "$ENV" = "production" ]; then
  railway environment production
else
  railway environment development
fi

1. Statusabfragen systematisieren: Beginne mit railway status, um den aktuellen Projektzustand zu verstehen
2. Log-Analyse in Iterationen: Führe railway logs aus und identifiziere Muster oder Fehler
3. Variable Überprüfung: Überprüfe mit railway variables wichtige Konfigurationseinstellungen
4. Inkrementelles Debugging: Kombiniere railway logs mit spezifischen Filtern, um Probleme einzugrenzen
5. Zustandsanalyse: Nutze JSON-Ausgaben (--json), um strukturierte Daten für die Analyse zu erhalten
6. Fehlerbehebungsstrategien: Bei Deployment-Fehlern erst Logs prüfen, dann Konfiguration, dann Code
7. Datenbankzugriff: Bei Datenpersistenzproblemen überprüfe die DB-Verbindungen mit railway connect

1. Idempotente Startscripts: Stelle sicher, dass das Startscript mehrfach ausgeführt werden kann, ohne Fehler zu verursachen
2. Environment-Checks: Im Code die Umgebung überprüfen und entsprechend reagieren
3. Graceful Shutdowns: Implementiere ordnungsgemäße Shutdown-Handler
4. Fehlerprotokollierung: Strukturiertes Logging für einfachere Analyse
5. Statusmetriken: Expose von Health-Endpoints für besseres Monitoring
6. Datenbank-Migration: Automatisierte Datenbankmigrationen bei Deployment
7. Backup-Strategie: Regelmäßige Backups wichtiger Daten

Diese CLI-Befehle und Strategien ermöglichen eine effektive Verwaltung von Railway-Deployments und erleichtern die Fehlerbehebung. LLMs können diese Befehle nutzen, um den Zustand der Anwendung zu analysieren, Probleme zu diagnostizieren und Lösungen vorzuschlagen.

Für eine Production-Umgebung solltest du eine der folgenden Optionen in Betracht ziehen:

1. Railway Postgres-Datenbank:

   • Erstelle eine PostgreSQL-Datenbank über das Railway Dashboard
   • Verbinde die Anwendung mit der Datenbank über die generierte DATABASE_URL

2. Railway Volumes:

   • Erstelle ein Volume in Railway für persistente Datenspeicherung
   • Konfiguriere den Anwendungspfad für die SQLite-Datenbank so, dass er auf das Volume zeigt

Du kannst folgende Umgebungsvariablen in deinem Railway-Projekt konfigurieren:

• NODE_ENV: Setze auf "production" für Produktionsumgebung
• DATABASE_URL: PostgreSQL-Verbindungsstring (wird automatisch gesetzt, wenn eine Railway PostgreSQL-Datenbank verwendet wird)
• DB_PATH: Pfad zur SQLite-Datenbank (falls du ein Volume verwendest)

MIT

Erstellt und gepflegt von [Heiko Dietze]