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

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/(auth)/email-editor/page.tsx
View file

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

66
constants/index.tsx
View file

@ -263,9 +263,65 @@ export const emails = [
} }
]; ];
export const EXAMPLE_A1 = ` export const EXAMPLE_A1 = `<!DOCTYPE html>
<div> <html lang="en-US">
<h1>Test Email Preview</h1> <head>
<p>This is a simple email preview test.</p> <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> </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>`;