fix: change the default text for newsletter email editor, and use iframe instead of div for preview

This commit is contained in:
Dorian Niemiec 2024-09-08 06:50:02 +02:00
parent a177f423e2
commit 5048891b6e
2 changed files with 67 additions and 9 deletions

View file

@ -109,6 +109,8 @@ const EmailEditor = () => {
<Link href="/admin/email" className="text-blue-500 underline">
Back
</Link>
&ldquo;{"{unsubscribeId}"}&rdquo; will be replaced with an
unsubscription ID.
<input
type="text"
placeholder="Subject"
@ -135,9 +137,9 @@ const EmailEditor = () => {
<h2 className="text-2xl font-bold mb-4 text-secondary-foreground">
Email Preview
</h2>
<div
className="border rounded-md p-4"
dangerouslySetInnerHTML={{ __html: previewContent }}
<iframe
className="border rounded-md w-full h-2/3"
srcDoc={previewContent}
/>
</div>
</div>

View file

@ -263,9 +263,65 @@ export const emails = [
}
];
export const EXAMPLE_A1 = `
<div>
<h1>Test Email Preview</h1>
<p>This is a simple email preview test.</p>
export const EXAMPLE_A1 = `<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>{{title}} - SVR.JS Blog Newsletter</title>
<style>
body {
color: #000000;
background-color: #dfffdf;
margin: 1em 0;
padding: 0;
font-family: Poppins, FreeSans, Helvetica, Tahoma, Verdana, Arial, sans-serif;
}
.logo {
margin: 1em auto;
display: block;
width: 224px;
}
.unsubscribe {
text-align: center;
}
main {
width: 95%;
max-width: 1280px;
background-color: #ffffff;
border: 1px #c0c0c0 solid;
margin: auto;
}
.content {
padding: 0.5em 1em;
}
.content h1 {
margin: 0.25em 0;
}
.thumbnail {
width: 100%;
display: block;
}
</style>
</head>
<body>
<img class="logo" src="https://svrjs.org/logo-wide.png">
<main>
<div class="content">
<h1>Title</h1>
</div>
`;
<img class="thumbnail" src="https://svrjs.org/blog-missing.png" alt="Thumbnail">
<div class="content">
Put contents of the newsletter email here.
<p><a href="https://svrjs.org">Go to SVR.JS website</a></p>
</div>
</main>
<p class="unsubscribe">You can unsubscribe from the newsletter <a href="https://svrjs.org/unsubscribe?id={unsubscribeId}">here</a>.</p>
</body>
</html>`;