svrjs/svrjs-nextjs-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

escapehtml

Browse source
This commit is contained in:
Cypro Freelance 2024-07-04 00:00:11 +05:30
parent 1b16108d55
commit 6dd363fa4a
1 changed files with 66 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
app/api/contact/route.ts
View file

@ -7,77 +7,88 @@ const CONTACT_MESSAGE_FIELDS: Record<string, string> = {
message: "Message", message: "Message",
}; };
const escapeHtml = (text: string) => {
return text
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/\n/g, "<br/>");
};
const generateEmailContent = (data: Record<string, string>) => { const generateEmailContent = (data: Record<string, string>) => {
const stringData = Object.entries(data).reduce( const stringData = Object.entries(data).reduce(
(str, [key, val]) => (str, [key, val]) =>
str + `${CONTACT_MESSAGE_FIELDS[key] || key}: \n${val} \n\n`, str +
`${CONTACT_MESSAGE_FIELDS[key] || escapeHtml(key)}: \n${escapeHtml(
val
)} \n\n`,
"" ""
); );
const htmlData = Object.entries(data).reduce( const htmlData = Object.entries(data).reduce(
(str, [key, val]) => (str, [key, val]) =>
str + str +
`<h3 class="form-heading">${ `<h3 class="form-heading">${escapeHtml(
CONTACT_MESSAGE_FIELDS[key] || key CONTACT_MESSAGE_FIELDS[key] || key
}</h3><p class="form-answer">${val}</p>`, )}</h3><p class="form-answer">${escapeHtml(val)}</p>`,
"" ""
); );
return { return {
text: stringData, text: stringData,
html: `<!DOCTYPE html> html: `<!DOCTYPE html>
<html> <html>
<head> <head>
<title>Contact Email</title> <title>Contact Email</title>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<style type="text/css"> <style type="text/css">
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table { border-collapse: collapse !important; } table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
@media screen and (max-width: 525px) { @media screen and (max-width: 525px) {
.wrapper { width: 100% !important; max-width: 100% !important; } .wrapper { width: 100% !important; max-width: 100% !important; }
.responsive-table { width: 100% !important; } .responsive-table { width: 100% !important; }
.padding { padding: 10px 5% 15px 5% !important; } .padding { padding: 10px 5% 15px 5% !important; }
.section-padding { padding: 0 15px 50px 15px !important; } .section-padding { padding: 0 15px 50px 15px !important; }
} }
.form-container { margin-bottom: 24px; padding: 20px; border: 1px dashed #ccc; } .form-container { margin-bottom: 24px; padding: 20px; border: 1px dashed #ccc; }
.form-heading { color: #2a2a2a; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight: 400; text-align: left; line-height: 20px; font-size: 18px; margin: 0 0 8px; padding: 0; } .form-heading { color: #2a2a2a; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight: 400; text-align: left; line-height: 20px; font-size: 18px; margin: 0 0 8px; padding: 0; }
.form-answer { color: #2a2a2a; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight: 300; text-align: left; line-height: 20px; font-size: 16px; margin: 0 0 24px; padding: 0; } .form-answer { color: #2a2a2a; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight: 300; text-align: left; line-height: 20px; font-size: 16px; margin: 0 0 24px; padding: 0; }
div[style*="margin: 16px 0;"] { margin: 0 !important; } div[style*="margin: 16px 0;"] { margin: 0 !important; }
</style> </style>
</head> </head>
<body style="margin: 0 !important; padding: 0 !important; background: #fff"> <body style="margin: 0 !important; padding: 0 !important; background: #fff">
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"></div> <div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"></div>
<table border="0" cellpadding="0" cellspacing="0" width="100%"> <table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr> <tr>
<td bgcolor="#ffffff" align="center" style="padding: 10px 15px 30px 15px" class="section-padding"> <td bgcolor="#ffffff" align="center" style="padding: 10px 15px 30px 15px" class="section-padding">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 500px" class="responsive-table"> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 500px" class="responsive-table">
<tr> <tr>
<td> <td>
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr> <tr>
<td> <td>
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr> <tr>
<td style="padding: 0 0 0 0; font-size: 16px; line-height: 25px; color: #232323;" class="padding message-content"> <td style="padding: 0 0 0 0; font-size: 16px; line-height: 25px; color: #232323;" class="padding message-content">
<h2>New Contact Message</h2> <h2>New Contact Message</h2>
<div class="form-container">${htmlData}</div> <div class="form-container">${htmlData}</div>
</td> </td>
</tr> </tr>
</table> </table>
</td> </td>
</tr> </tr>
</table> </table>
</td> </td>
</tr> </tr>
</table> </table>
</td> </td>
</tr> </tr>
</table> </table>
</body> </body>
</html>`, </html>`,
}; };
}; };