austnv/remnawave-minishop
1
0
Fork 0
Code Issues 1 Pull Requests Activity

docs: add email preview demo section

Browse Source
This commit is contained in:
3252a8
2026-05-31 14:41:40 +03:00
parent eda5d3e633
commit b531d4de3b
4 changed files with 836 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-site/src/pages/demo.astro
+342
View File
@@ -1,4 +1,6 @@
---
import { emailPreviews } from '../lib/emailPreviews.mjs';
const defaultDemoSrc = '/demo/runtime/app/?path=/home&mock=tariffs';
const docsHref = '/getting-started/demo/';
---
@@ -44,6 +46,10 @@ const docsHref = '/getting-started/demo/';
background: #05080f;
}
body[data-demo-mode='emails'] {
overflow: auto;
}
.demo-topbar {
display: flex;
gap: 1rem;
@@ -151,6 +157,275 @@ const docsHref = '/getting-started/demo/';
background: #05080f;
}
.demo-frame[hidden],
.email-previews[hidden] {
display: none;
}
.email-previews {
min-height: 0;
overflow: auto;
background:
linear-gradient(180deg, rgb(15 23 42 / 32%), rgb(5 8 15 / 0) 14rem),
#05080f;
}
.email-previews__inner {
width: min(72rem, calc(100% - 2rem));
margin: 0 auto;
padding: 2rem 0 4rem;
}
.email-previews__header {
display: grid;
gap: 0.45rem;
max-width: 44rem;
margin-bottom: 1.25rem;
}
.email-previews__eyebrow {
color: #00fe7a;
font-size: 0.78rem;
font-weight: 800;
line-height: 1;
text-transform: uppercase;
}
.email-previews__header h1 {
margin: 0;
color: #ffffff;
font-size: 1.65rem;
line-height: 1.15;
}
.email-previews__header p {
margin: 0;
color: #a7b1c2;
font-size: 0.95rem;
line-height: 1.55;
}
.email-previews__index {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0 0 1.4rem;
}
.email-previews__index a {
border: 1px solid rgb(148 163 184 / 24%);
border-radius: 7px;
padding: 0.42rem 0.6rem;
background: rgb(15 23 42 / 62%);
color: #dbeafe;
font-size: 0.78rem;
font-weight: 650;
line-height: 1;
text-decoration: none;
}
.email-previews__index a:hover {
border-color: rgb(0 254 122 / 54%);
color: #00fe7a;
}
.email-preview {
border-top: 1px solid rgb(148 163 184 / 18%);
}
.email-preview:last-child {
border-bottom: 1px solid rgb(148 163 184 / 18%);
}
.email-preview summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
align-items: center;
padding: 1rem 0;
cursor: pointer;
list-style: none;
}
.email-preview summary::-webkit-details-marker {
display: none;
}
.email-preview__title {
min-width: 0;
}
.email-preview__title strong {
display: block;
color: #f8fafc;
font-size: 0.98rem;
line-height: 1.3;
}
.email-preview__title span {
display: block;
margin-top: 0.22rem;
color: #94a3b8;
font-size: 0.78rem;
line-height: 1.35;
}
.email-preview__meta {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgb(14 165 233 / 34%);
border-radius: 999px;
padding: 0.28rem 0.55rem;
color: #bae6fd;
font-size: 0.72rem;
font-weight: 750;
line-height: 1;
white-space: nowrap;
}
.email-preview__body {
padding: 0.1rem 0 1.6rem;
}
.mail-card {
width: min(32rem, 100%);
margin: 0 auto;
padding: 1.35rem 1rem;
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 {
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;
}
@media (max-width: 42rem) {
body {
display: block;
@@ -269,6 +544,32 @@ const docsHref = '/getting-started/demo/';
.demo-frame {
height: 100dvh;
}
.email-previews {
min-height: 100dvh;
}
.email-previews__inner {
width: min(calc(100% - 1rem), 72rem);
padding-top: 4rem;
}
.email-preview summary {
grid-template-columns: minmax(0, 1fr);
gap: 0.55rem;
}
.email-preview__meta {
width: fit-content;
}
.mail-card__panel {
padding: 1rem;
}
.mail-card__code {
font-size: 1.65rem;
}
}
</style>
</head>
@@ -296,6 +597,7 @@ const docsHref = '/getting-started/demo/';
<option value="devices">Лимит и докупка устройств</option>
<option value="notifications">Telegram-уведомления</option>
<option value="auth">Вход и регистрация</option>
<option value="emails">Email-письма</option>
</select>
</label>
<div class="demo-topbar__actions">
@@ -313,6 +615,46 @@ const docsHref = '/getting-started/demo/';
src={defaultDemoSrc}
loading="eager"
></iframe>
<section
id="email-previews"
class="email-previews"
aria-labelledby="email-previews-title"
hidden
>
<div class="email-previews__inner">
<header class="email-previews__header">
<div class="email-previews__eyebrow">Email preview</div>
<h1 id="email-previews-title">Превью email-писем</h1>
<p>
Все транзакционные письма собраны на одной странице и подписаны по
сценарию отправки. Тексты берутся из русской локализации приложения.
</p>
</header>
<nav class="email-previews__index" aria-label="Навигация по email-письмам">
{
emailPreviews.map((preview) => (
<a href={`#${preview.id}`}>{preview.title}</a>
))
}
</nav>
<div class="email-previews__list">
{
emailPreviews.map((preview, index) => (
<details class="email-preview" id={preview.id} open={index === 0}>
<summary>
<span class="email-preview__title">
<strong>{preview.title}</strong>
<span>{preview.subject}</span>
</span>
<span class="email-preview__meta">{preview.category}</span>
</summary>
<div class="email-preview__body" set:html={preview.html} />
</details>
))
}
</div>
</div>
</section>
<script is:inline src="/demo/demo-shell.js"></script>
</body>
</html>