feat: dynamic email template using markdown

apps/frontend/src/server/routes/_internal/templates/email/[template].ts

@@ -5,6 +5,14 @@ import emails from '~/templates/emails'
 
 export default defineEventHandler(async (event) => {
 	const template = event.context.params?.template as string
+
+	if (template === 'dynamic') {
+		throw createError({
+			statusCode: 404,
+			message: 'Email template not found',
+		})
+	}
+
 	try {
 		const component = (await emails[template]()).default as Component | undefined
 

apps/frontend/src/server/routes/_internal/templates/email/dynamic.ts

@@ -0,0 +1,40 @@
+import { render } from '@vue-email/render'
+import type { Component } from 'vue'
+
+import emails from '~/templates/emails'
+
+export default defineEventHandler(async (event) => {
+	try {
+		const body = await readBody<{ title: string; body: string }>(event)
+
+		if (!body.title || !body.body) {
+			throw createError({
+				statusCode: 400,
+				message: 'Missing required fields: title and body',
+			})
+		}
+
+		// Hacky, but cant explicitly import vue files in server side
+		const component = (await emails['dynamic']()).default as Component | undefined
+
+		if (!component) {
+			throw createError({
+				statusCode: 500,
+				message: 'Failed to load email template component',
+			})
+		}
+
+		const html = await render(component, {
+			title: body.title,
+			body: body.body,
+		})
+
+		return html
+	} catch (error) {
+		console.error('Error rendering dynamic email template:', error)
+		throw createError({
+			statusCode: 500,
+			message: 'Failed to render dynamic email template',
+		})
+	}
+})

apps/frontend/src/templates/emails/dynamic/MarkdownDynamicEmail.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { Heading, Markdown } from '@vue-email/components'
+
+import StyledEmail from '../shared/StyledEmail.vue'
+
+const props = defineProps<{
+	title: string
+	body: string
+}>()
+</script>
+
+<template>
+	<StyledEmail :title="props.title">
+		<Heading as="h1" class="mb-2 text-2xl font-bold">
+			{{ props.title }}
+		</Heading>
+
+		<Markdown :source="props.body" />
+	</StyledEmail>
+</template>

apps/frontend/src/templates/emails/index.ts

@@ -33,4 +33,7 @@ export default {
 
 	// Organization
 	'organization-invited': () => import('./organization/OrganizationInvited.vue'),
+
+	// Dynamic
+	dynamic: () => import('./dynamic/MarkdownDynamicEmail.vue'),
 } as Record<string, () => Promise<{ default: Component }>>