Visitar URL original
API/email-templates at develop · OpenShock/API · GitHub
Skip to content

Latest commit

 

History

History

email-templates

README.md

OpenShock Email Templates

The API's transactional email templates, authored as React components via react-email and exported to Liquid ({{ name }} variables) for the Fluid-based SmtpTemplate runtime loader.

Rendered .liquid files live in Cron/SmtpTemplates/ and are committed to the repo as static files — no Node/pnpm is needed during dotnet build or in CI/Docker.

Workflow

When you edit a template source (emails/*.tsx), re-render and commit:

pnpm install      # first time only
pnpm dev          # live preview at http://localhost:3000
pnpm export       # overwrites Cron/SmtpTemplates/*.liquid

Each exported file is a Fluid/Liquid template: line 1 is the subject, the rest is the HTML body — the format expected by the runtime template handling in API/Services/Email/EmailTemplate.cs / EmailServiceTemplates.

Authoring a template

Each emails/*.tsx file should export:

  • a named PascalCase React component (the parameterised template),
  • a subject string — emitted as the first line of the exported .liquid file (Fluid reads line 1 as the subject template),
  • a sampleProps object — keys define which props get placeholder-substituted on export; values are used by the live preview,
  • a default export wrapping the component with sampleProps so email dev can render it.

Example:

export interface VerifyEmailProps {
  'To.Name': string;
  VerifyLink: string;
}

export const subject = 'Hi! Verify your Email!';

export const sampleProps: VerifyEmailProps = {
  'To.Name': 'shockee',
  VerifyLink: 'https://openshock.app/verify?token=preview',
};

export function EmailVerification(props: VerifyEmailProps) {
  /* ... */
}

export default function Preview_EmailVerification() {
  return <EmailVerification {...sampleProps} />;
}

On export, prop values become {{ To.Name }} / {{ VerifyLink }} etc. Prop names must match the variable names the API passes into Fluid at send time.

Layout

  • emails/*.tsx — templates (files starting with _ are ignored by the exporter).
  • emails/_lib/ — shared helpers.
  • scripts/export-templates.ts — Liquid exporter.
  • ../Cron/SmtpTemplates/*.liquid — pre-rendered templates (committed, re-generated by pnpm export).

License

AGPL-3.0