feat: dynamic email template using markdown (#4515)

* feat: markdown dynamic email template

* fix: lint and remove debug statements

* fix: lint issues

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.post.ts

@@ -0,0 +1,29 @@
+import { render } from '@vue-email/render'
+
+import MarkdownDynamicEmail from '~/templates/emails/dynamic/MarkdownDynamicEmail.vue'
+
+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',
+			})
+		}
+
+		const html = await render(MarkdownDynamicEmail, {
+			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>