;
+ containerId?: string;
+}) {
const { resolvedTheme } = useTheme();
+ const mountedRef = useRef(false);
useEffect(() => {
+ mountedRef.current = true;
+ return () => {
+ mountedRef.current = false;
+ };
+ }, []);
- const container = containerRef.current;
- if (!container) return;
+ useEffect(() => {
+ if (!mountedRef.current) return;
- let active = true;
- const injectedDivs: HTMLDivElement[] = [];
-
- const renderDiagrams = async () => {
- try {
- const preElements = Array.from(container.querySelectorAll('pre')).filter((pre) => {
- const code = pre.querySelector('code');
- return code && (code.classList.contains('language-mermaid') || code.classList.contains('lang-mermaid'));
- });
-
- if (preElements.length === 0) return;
-
- const mermaid = (await import('mermaid')).default;
-
- const isDark = resolvedTheme === 'dark';
- mermaid.initialize({
- startOnLoad: false,
- theme: isDark ? 'dark' : 'default',
- securityLevel: 'loose',
- fontFamily: 'var(--font-geist-sans), sans-serif',
- themeVariables: {
- fontFamily: 'var(--font-geist-sans), sans-serif',
- primaryColor: isDark ? '#1e293b' : '#f1f5f9',
- primaryTextColor: isDark ? '#f8fafc' : '#020617',
- primaryBorderColor: isDark ? '#334155' : '#cbd5e1',
- lineColor: isDark ? '#64748b' : '#94a3b8',
- secondaryColor: isDark ? '#0f172a' : '#f8fafc',
- tertiaryColor: isDark ? '#1e293b' : '#f1f5f9',
- },
- });
-
- for (let i = 0; i < preElements.length; i++) {
- if (!active) break;
-
- const pre = preElements[i];
- const codeEl = pre.querySelector('code');
- if (!codeEl) continue;
-
- let rawCode = pre.getAttribute('data-mermaid-code');
- if (!rawCode) {
- rawCode = codeEl.textContent || '';
- pre.setAttribute('data-mermaid-code', rawCode);
- }
+ let container: HTMLElement | null = null;
+ if (containerRef && containerRef.current) {
+ container = containerRef.current;
+ } else if (containerId) {
+ container = document.getElementById(containerId);
+ }
+
+ if (!container) return;
+ // Find all mermaid code blocks.
+ // Shiki wraps code in .
+ // Alternatively, without shiki, marked might output .
+ // We will look for code.language-mermaid.
+ const mermaidNodes = container.querySelectorAll('pre code.language-mermaid, pre.shiki code.language-mermaid');
+
+ if (mermaidNodes.length === 0) return;
+
+ let isActive = true;
+
+ async function renderDiagrams() {
+ // Dynamically import mermaid to avoid bloat on pages without diagrams
+ const mermaidModule = await import('mermaid');
+ const mermaid = mermaidModule.default;
+
+ if (!isActive) return;
+
+ // Ensure zero rounding rule is applied in mermaid configuration
+ mermaid.initialize({
+ startOnLoad: false,
+ theme: resolvedTheme === 'dark' ? 'dark' : 'default',
+ securityLevel: 'loose',
+ fontFamily: 'inherit',
+ themeVariables: {
+ // You can tweak colors here to match the Acite design system if needed
+ }
+ });
- const wrapperId = pre.getAttribute('data-mermaid-wrapper-id') || `mermaid-wrapper-${i}-${Math.random().toString(36).substr(2, 9)}`;
- pre.setAttribute('data-mermaid-wrapper-id', wrapperId);
+ Array.from(mermaidNodes).forEach(async (codeNode, index) => {
+ const preNode = codeNode.parentElement;
+ if (!preNode || preNode.tagName !== 'PRE') return;
- let wrapper = container.querySelector(`#${wrapperId}`) as HTMLDivElement | null;
- if (!wrapper) {
- wrapper = document.createElement('div');
- wrapper.id = wrapperId;
- wrapper.className = 'mermaid-diagram-wrapper w-full border border-border bg-slate-950/20 dark:bg-slate-950/40 p-6 overflow-x-auto flex flex-col justify-center items-center my-6 rounded-none transition-colors';
- pre.parentNode?.insertBefore(wrapper, pre.nextSibling);
+ // Extract original code. We save it in a data attribute to allow re-rendering on theme change.
+ if (!preNode.dataset.mermaidCode) {
+ preNode.dataset.mermaidCode = codeNode.textContent || '';
+ }
+ const code = preNode.dataset.mermaidCode;
+ if (!code) return;
+
+ const id = `mermaid-svg-${index}-${Math.random().toString(36).substring(2, 9)}`;
+
+ try {
+ const { svg } = await mermaid.render(id, code);
+ if (!isActive) return;
+
+ // Check if we already injected an SVG wrapper next to this PRE
+ let svgWrapper = preNode.nextElementSibling as HTMLElement;
+ if (!svgWrapper || !svgWrapper.classList.contains('mermaid-wrapper')) {
+ svgWrapper = document.createElement('div');
+ svgWrapper.className = 'mermaid-wrapper flex justify-center my-8 p-4 bg-zinc-50 dark:bg-zinc-900/50 border border-zinc-200 dark:border-zinc-800';
+ // zero rounding rule
+ svgWrapper.style.borderRadius = '0px';
+ preNode.parentNode?.insertBefore(svgWrapper, preNode.nextSibling);
}
- injectedDivs.push(wrapper);
-
- pre.style.display = 'none';
-
- const diagramId = `mermaid-svg-${i}-${Math.random().toString(36).substr(2, 9)}`;
- try {
- wrapper.innerHTML = 'Compilando diagrama...';
-
- const cleanedCode = rawCode
- .replace(/</g, '<')
- .replace(/>/g, '>')
- .replace(/&/g, '&')
- .trim();
-
- const { svg } = await mermaid.render(diagramId, cleanedCode);
- if (active) {
- wrapper.innerHTML = svg;
- const svgEl = wrapper.querySelector('svg');
- if (svgEl) {
- svgEl.style.maxWidth = '100%';
- svgEl.style.height = 'auto';
- svgEl.querySelectorAll('rect, polygon, path').forEach((shape) => {
- shape.setAttribute('rx', '0');
- shape.setAttribute('ry', '0');
- });
- }
- }
- } catch (err) {
- console.error('[Mermaid compile error]', err);
- if (active) {
- wrapper.innerHTML = `
-
-
Erro de renderização do diagrama
-
${err instanceof Error ? err.message : String(err)}
-
+
+
+
+ 
+ Aprenda lendo código
+ |
+
+
+
+ |
+ ${contentHtml}
+ |
+
+
+
+ |
+ Acite — Domine algoritmos de verdade
+ Você recebeu este e-mail porque criou uma conta no Acite. Se você não fez essa solicitação, por favor ignore este e-mail.
+ |
+
+
+
+`;
+}
diff --git a/lib/email/templates/welcome.ts b/lib/email/templates/welcome.ts
new file mode 100644
index 0000000..347a6ea
--- /dev/null
+++ b/lib/email/templates/welcome.ts
@@ -0,0 +1,136 @@
+import { getBaseEmailLayout } from './base';
+
+export interface WelcomeEmailData {
+ name: string;
+}
+
+/**
+ * Generates a highly engaging and comprehensive welcome onboarding email.
+ * Outlines the main platform features and sets clear next steps for the user.
+ */
+export function getWelcomeEmailTemplate({ name }: WelcomeEmailData): { subject: string; html: string } {
+ const appUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
+ const subject = 'Boas-vindas ao Acite! Sua jornada dev começa aqui 🚀';
+
+ const contentHtml = `
+
+
+ Olá, ${name}! Seu acesso ao Acite está liberado.
+
+
+ Ficamos muito empolgados em ter você aqui. A maioria das pessoas tenta aprender algoritmos e estruturas de dados decorando fórmulas e batendo a cabeça no teclado escrevendo código do zero sem entender o básico.
+
+
+ No Acite, nós fazemos o oposto. Acreditamos que a melhor forma de se tornar um programador de elite é lendo e analisando código de alta qualidade, linha por linha.
+
+
+
+
+
+
+
+
+ O que você vai encontrar na plataforma?
+
+
+
+
+
+ | 🧠 |
+
+
+ O Code Player Interativo
+
+
+ Nosso visualizador de código funciona como um reprodutor de vídeo. Dê play e veja o ponteiro de execução passar linha por linha, com comentários dinâmicos em 3 níveis de profundidade (Fácil, Médio e Avançado).
+
+ |
+
+
+
+
+
+
+ | ⚔️ |
+
+
+ Brute-Force vs. Solução Ótima
+
+
+ Compare implementações ineficientes diretamente contra os códigos de alta performance. Entenda no visual a real diferença teórica e prática na otimização de CPU e Memória (Big O).
+
+ |
+
+
+
+
+
+
+ | ⚡ |
+
+
+ Guias de Engenharia Aplicada
+
+
+ Esqueça problemas abstratos que nunca acontecem na prática. Nos nossos guias, conectamos estruturas de dados com a realidade: sistemas de cache, pipelines RAG para IA, arquitetura de multi-agentes e segurança em produção.
+
+ |
+
+
+
+
+
+
+ | 🗣️ |
+
+
+ Trilha de Inglês Técnico (Interview English)
+
+
+ Prepare-se para vagas internacionais. Aprenda o vocabulário técnico preciso para dinâmicas de System Design, live coding e comunicação profissional em reuniões de engenharia.
+
+ |
+
+
+
+
+
+
+ | 🔥 |
+
+
+ Desafio Diário (Daily Challenge)
+
+
+ Construa consistência sem esforço. Precisa de apenas 3 minutos diários na página de código ativa para manter seu streak e fogo de estudos ativo na plataforma.
+
+ |
+
+
+
+
Sua primeira missão:
+
+ Acesse a seção de Problemas, selecione o desafio clássico "Two Sum" e dê play na solução ótima para ver como o player ajuda a entender o funcionamento interno de hash maps.
+
+
+ 