Mail Optik #21

Closed
opened 2026-08-13 15:04:59 +02:00 by admin · 1 comment
Owner

Dieser Prompt wurde gemeldet;

sobald wir mails versenden werden die als html plain versendet das sieht unschön aus. ausserdem wird die Anrede nur
als Hallo, gesetzt. Statt html Plain bitte unser Landingpage Design mit reinnehmen für eine schöne optik. falls
möglich Vornamen in die Mail als anrede integrieren. ich öffne diesen verlauf gleich als gitea, aber du kannst schon
mal anfangen

Nach abschluss wird der verlauf als kommentar hinzugefügt

Dieser Prompt wurde gemeldet; sobald wir mails versenden werden die als html plain versendet das sieht unschön aus. ausserdem wird die Anrede nur als Hallo, gesetzt. Statt html Plain bitte unser Landingpage Design mit reinnehmen für eine schöne optik. falls möglich Vornamen in die Mail als anrede integrieren. ich öffne diesen verlauf gleich als gitea, aber du kannst schon mal anfangen Nach abschluss wird der verlauf als kommentar hinzugefügt
Author
Owner

Umgesetzt

Problem: Transaktionale Mails (aktuell nur der GDPR-Datenauskunft-Export) wurden als unstyled HTML versendet und wirkten wie Plain-Text. Die Anrede war statisch "Hallo," ohne Personalisierung.

Lösung:

  1. Neue Datei src/lib/mail-template.ts

    • Gebrandetes, tabellenbasiertes HTML-E-Mail-Template im Look der Landingpage: Orange-Verlauf-Header (#f97316), PawFeed-Wordmark, Tagline "Where pets are the stars.", weiße Content-Card, dezenter Footer mit pawfeed.org-Link
    • Inline-Styles durchgehend (kein <style>-Block, keine Tailwind-Klassen), damit auch Outlook & Co. das Layout korrekt darstellen
    • buildGreeting(firstName) — baut die Anrede "Hallo {Vorname}," bzw. Fallback "Hallo," wenn kein Vorname vorliegt
  2. src/trpc/routers/admin.ts (exportUserData)

    • Vorname wird aus dem Clerk-Profil gezogen (exportData.account.clerkProfile.firstName)
    • Mail nutzt jetzt renderBrandedMailHtml() + buildGreeting() statt der alten Inline-<p>-Strings
    • Echter Call-to-Action-Button "Daten herunterladen" statt nacktem Link
  3. Nachbesserung: Das ursprünglich verwendete Paw-Emoji im Header wirkte je nach OS/Client inkonsistent und unprofessionell ("sieht nach scam aus"). Ersetzt durch die exakte paw-print-SVG aus lucide-react — dieselben Pfaddaten wie das gefüllte Paw-Icon auf der Landingpage (Navbar/Hero), als Inline-SVG im Header eingebettet.

Bekannte Einschränkung: Gmail-Webmail (Browser, nicht die App) entfernt <svg>-Tags aus HTML-Mails aus Sicherheitsgründen — dort erscheint der Header nur mit Text "PawFeed" ohne Icon (kein kaputtes Bild, sauberer Fallback). Apple Mail, Outlook.com sowie iOS-/Android-Mail-Apps zeigen die SVG korrekt.

Commits:

  • 19f2210 — feat(mail): use branded HTML template with personalized greeting
  • fd6f1f0 — fix(mail): use inline paw SVG instead of emoji in branded header

Deployment: Beide Commits sind live — Server-seitig via git pull in /Dockers/PawFeed + docker compose up -d --build (./start.sh) neu gebaut und Container neu gestartet, jeweils verifiziert (docker ps -> Up, Build inkl. tsc-Check fehlerfrei). Tests (29/29 in admin.test.ts) gruen.


Zusammengefasst von Claude Code

## Umgesetzt **Problem:** Transaktionale Mails (aktuell nur der GDPR-Datenauskunft-Export) wurden als unstyled HTML versendet und wirkten wie Plain-Text. Die Anrede war statisch "Hallo," ohne Personalisierung. **Lösung:** 1. **Neue Datei `src/lib/mail-template.ts`** - Gebrandetes, tabellenbasiertes HTML-E-Mail-Template im Look der Landingpage: Orange-Verlauf-Header (`#f97316`), PawFeed-Wordmark, Tagline "Where pets are the stars.", weiße Content-Card, dezenter Footer mit `pawfeed.org`-Link - Inline-Styles durchgehend (kein `<style>`-Block, keine Tailwind-Klassen), damit auch Outlook & Co. das Layout korrekt darstellen - `buildGreeting(firstName)` — baut die Anrede "Hallo {Vorname}," bzw. Fallback "Hallo," wenn kein Vorname vorliegt 2. **`src/trpc/routers/admin.ts` (`exportUserData`)** - Vorname wird aus dem Clerk-Profil gezogen (`exportData.account.clerkProfile.firstName`) - Mail nutzt jetzt `renderBrandedMailHtml()` + `buildGreeting()` statt der alten Inline-`<p>`-Strings - Echter Call-to-Action-Button "Daten herunterladen" statt nacktem Link 3. **Nachbesserung:** Das ursprünglich verwendete Paw-Emoji im Header wirkte je nach OS/Client inkonsistent und unprofessionell ("sieht nach scam aus"). Ersetzt durch die exakte `paw-print`-SVG aus lucide-react — dieselben Pfaddaten wie das gefüllte Paw-Icon auf der Landingpage (Navbar/Hero), als Inline-SVG im Header eingebettet. **Bekannte Einschränkung:** Gmail-Webmail (Browser, nicht die App) entfernt `<svg>`-Tags aus HTML-Mails aus Sicherheitsgründen — dort erscheint der Header nur mit Text "PawFeed" ohne Icon (kein kaputtes Bild, sauberer Fallback). Apple Mail, Outlook.com sowie iOS-/Android-Mail-Apps zeigen die SVG korrekt. **Commits:** - `19f2210` — feat(mail): use branded HTML template with personalized greeting - `fd6f1f0` — fix(mail): use inline paw SVG instead of emoji in branded header **Deployment:** Beide Commits sind live — Server-seitig via `git pull` in `/Dockers/PawFeed` + `docker compose up -d --build` (`./start.sh`) neu gebaut und Container neu gestartet, jeweils verifiziert (`docker ps` -> `Up`, Build inkl. `tsc`-Check fehlerfrei). Tests (29/29 in `admin.test.ts`) gruen. --- Zusammengefasst von Claude Code
admin closed this issue 2026-08-13 15:34:23 +02:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: admin/petfeed#21