docs: render email previews from templates
This commit is contained in:
3252a8
+23
-139
@@ -288,142 +288,19 @@ const docsHref = '/getting-started/demo/';
|
||||
padding: 0.1rem 0 1.6rem;
|
||||
}
|
||||
|
||||
.mail-card {
|
||||
width: min(32rem, 100%);
|
||||
margin: 0 auto;
|
||||
padding: 1.35rem 1rem;
|
||||
.email-preview__frame-wrap {
|
||||
overflow: hidden;
|
||||
border: 1px solid rgb(148 163 184 / 20%);
|
||||
border-radius: 8px;
|
||||
background: #05070a;
|
||||
color: #e6e9ef;
|
||||
font-family:
|
||||
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.mail-card__brand {
|
||||
margin-bottom: 1rem;
|
||||
color: #00fe7a;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 850;
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mail-card__panel {
|
||||
border: 1px solid #1a1f27;
|
||||
border-radius: 8px;
|
||||
padding: 1.4rem;
|
||||
background: #0e1116;
|
||||
}
|
||||
|
||||
.mail-card__subject {
|
||||
margin: 0 0 0.7rem;
|
||||
color: #00fe7a;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 750;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.mail-card h2 {
|
||||
margin: 0 0 0.7rem;
|
||||
color: #ffffff;
|
||||
font-size: 1.16rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.mail-card__intro,
|
||||
.mail-card__note,
|
||||
.mail-card__footer {
|
||||
color: #9aa3b2;
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.mail-card__intro {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.mail-card__note {
|
||||
margin: 0.9rem 0 0;
|
||||
color: #707987;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.mail-card__footer {
|
||||
margin: 0.9rem 0 0;
|
||||
color: #5d6573;
|
||||
font-size: 0.72rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mail-card__code {
|
||||
margin: 0 0 1rem;
|
||||
border: 1px solid #1a1f27;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
background: #05070a;
|
||||
color: #00fe7a;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mail-card__rows {
|
||||
width: 100%;
|
||||
margin: 0 0 1rem;
|
||||
border: 1px solid #1a1f27;
|
||||
border-radius: 8px;
|
||||
padding: 0.3rem 0.9rem;
|
||||
background: #05070a;
|
||||
}
|
||||
|
||||
.mail-card__rows td {
|
||||
border-bottom: 1px solid #1a1f27;
|
||||
padding: 0.64rem 0;
|
||||
color: #5d6573;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 750;
|
||||
line-height: 1.2;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.mail-card__rows tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.mail-card__rows td:last-child {
|
||||
color: #e6e9ef;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 0.82rem;
|
||||
text-align: right;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.mail-card__message {
|
||||
margin: 0 0 1rem;
|
||||
border: 1px solid #1a1f27;
|
||||
border-radius: 8px;
|
||||
padding: 0.85rem 0.95rem;
|
||||
background: #05070a;
|
||||
color: #e6e9ef;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.mail-card__cta {
|
||||
.email-preview__frame {
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
padding: 0.9rem 1rem;
|
||||
background: #00fe7a;
|
||||
color: #05070a;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
height: 760px;
|
||||
border: 0;
|
||||
background: #05070a;
|
||||
}
|
||||
|
||||
@media (max-width: 42rem) {
|
||||
@@ -563,12 +440,8 @@ const docsHref = '/getting-started/demo/';
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.mail-card__panel {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.mail-card__code {
|
||||
font-size: 1.65rem;
|
||||
.email-preview__frame {
|
||||
height: 720px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -627,7 +500,8 @@ const docsHref = '/getting-started/demo/';
|
||||
<h1 id="email-previews-title">Превью email-писем</h1>
|
||||
<p>
|
||||
Все транзакционные письма собраны на одной странице и подписаны по
|
||||
сценарию отправки. Тексты берутся из русской локализации приложения.
|
||||
сценарию отправки. HTML-превью генерируются теми же шаблонами,
|
||||
которые отправляются пользователям.
|
||||
</p>
|
||||
</header>
|
||||
<nav class="email-previews__index" aria-label="Навигация по email-письмам">
|
||||
@@ -648,7 +522,17 @@ const docsHref = '/getting-started/demo/';
|
||||
</span>
|
||||
<span class="email-preview__meta">{preview.category}</span>
|
||||
</summary>
|
||||
<div class="email-preview__body" set:html={preview.html} />
|
||||
<div class="email-preview__body">
|
||||
<div class="email-preview__frame-wrap">
|
||||
<iframe
|
||||
class="email-preview__frame"
|
||||
title={`Email preview: ${preview.title}`}
|
||||
srcdoc={preview.html}
|
||||
loading="lazy"
|
||||
sandbox=""
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
))
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user