Conversation
mateusbrg
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR introduces an email template preview system with two separate applications: a basic email renderer (apps/email) and a more sophisticated email previewer application (apps/email-previewer). The main purpose is to provide tools for developing, previewing, and deploying email templates using Vue components.
Key changes:
- Added shared TypeScript types for email templates in
packages/types - Created a basic email renderer app with AWS SES integration
- Implemented a comprehensive email previewer application with device/variant previews
Reviewed Changes
Copilot reviewed 45 out of 50 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/types/src/email-template.ts | Defines core types for email templates, variants, and preview devices |
| packages/types/src/index.ts | Exports the new email template types |
| apps/email/* | Basic email rendering app with SES upload functionality |
| apps/email-previewer/* | Full-featured Vue app for previewing email templates with device/variant switching |
| package.json | Added workspace dependency reference |
| eslint.config.js | Added ignore rule for the email app |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -0,0 +1,29 @@ | |||
| # Email Service | |||
|
|
|||
| Esse projeto permite que renderize templates de vue-email, compile e faca upload para o SES. Além disso é possível fazer uma visualização dos temaplates em tempo real. | |||
There was a problem hiding this comment.
Corrected spelling of 'faca' to 'faça', 'temaplates' to 'templates'
| Esse projeto permite que renderize templates de vue-email, compile e faca upload para o SES. Além disso é possível fazer uma visualização dos temaplates em tempo real. | |
| Esse projeto permite que renderize templates de vue-email, compile e faça upload para o SES. Além disso é possível fazer uma visualização dos templates em tempo real. |
| console.log(`✅ Template ${templateName} criado no SES`); | ||
| } catch (error) { | ||
| if (error.name === 'AlreadyExistsException') { | ||
| // Se template ja existe, atualiza |
There was a problem hiding this comment.
Corrected spelling of 'ja' to 'já'
| // Se template ja existe, atualiza | |
| // Se template já existe, atualiza |
| }; | ||
|
|
||
| try { | ||
| // Tenta criar template |
There was a problem hiding this comment.
[nitpick] Comment lacks proper capitalization and punctuation. Should be: "Tenta criar template."
| // Tenta criar template | |
| // Tenta criar template. |
| "@vitejs/plugin-vue": "^6.0.1", | ||
| "@vue-email/components": "^0.0.21", | ||
| "@vue-email/render": "^0.0.9", | ||
| "add": "^2.0.6", |
There was a problem hiding this comment.
The 'add' package appears to be a development utility and shouldn't be in production dependencies. This package is commonly added accidentally via incorrect npm/yarn commands.
| "add": "^2.0.6", |
| "vue-router": "4", | ||
| "yarn": "^1.22.22" |
There was a problem hiding this comment.
The 'yarn' package should not be listed as a dependency. Package managers should be installed globally, not as project dependencies.
| "vue-router": "4", | |
| "yarn": "^1.22.22" | |
| "vue-router": "4" |
| label: 'Padrão', | ||
| description: 'Email de boas-vindas padrão', | ||
| props: { | ||
| confirmationUrl: 'https://google.com', // todo: mudar para url "real" |
There was a problem hiding this comment.
[nitpick] TODO comment uses placeholder URL. Consider using a more appropriate example domain like 'https://example.com' or the actual application domain.
| @@ -0,0 +1,51 @@ | |||
| <script setup lang="ts"> | |||
| import { computed } from 'vue' | |||
There was a problem hiding this comment.
Missing semicolon at end of import statement, inconsistent with other files in the codebase.
| import { computed } from 'vue' | |
| import { computed } from 'vue'; |
| @@ -0,0 +1,36 @@ | |||
| <script setup lang="ts"> | |||
| import { computed } from 'vue' | |||
There was a problem hiding this comment.
Missing semicolon at end of import statement, inconsistent with other files in the codebase.
| import { computed } from 'vue' | |
| import { computed } from 'vue'; |
| @@ -0,0 +1,13 @@ | |||
| <!doctype html> | |||
| <html lang=""> | |||
There was a problem hiding this comment.
The lang attribute is empty. It should specify a language code (e.g., 'pt-BR' or 'en') for accessibility and SEO.
| <html lang=""> | |
| <html lang="en"> |
| }; | ||
|
|
||
| // Render HTML when template or variant changes | ||
| // todo: refactor later |
There was a problem hiding this comment.
[nitpick] TODO comment lacks specificity. Consider describing what specific refactoring is needed or creating a tracking issue.
| // todo: refactor later | |
| // TODO: Refactor rendering logic into a composable (e.g., useEmailPreview) for better reusability and testability. See issue #123. |
|
@mateusbrg ping |
Descrição
Este pull request introduz a configuração inicial para o novo app email-previewer, fornecendo uma base para preview e teste de templates de email construídos com @vue-email/components.
Inclui configuração do projeto, documentação e a implementação de componentes principais de interface para seleção de templates, pré-visualização e alternância entre dispositivos, além de um primeiro template de email (ainda em wip).
preview (wip)