Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-07 20:02:23 +04:00
Code Issues Projects Releases Wiki Activity

Migrate preview and docs packages from Eleventy to Astro (#2694)

Browse Source 
Co-authored-by: Bartek <xbartoszdobija@gmail.com>
This commit is contained in:
Paweł Kuna
2026-07-28 00:09:02 +02:00
committed by GitHub
parent 9820d110f6
commit d8956a06d6
1150 changed files with 52147 additions and 32804 deletions
Download Patch File Download Diff File Expand all files Collapse all files
preview/pages/emails.astro
+111
View File
@@ -0,0 +1,111 @@
---
// Port of preview/pages/emails.html.
// Masonry auto-inits from the data-masonry attribute (page-lib, no init script,
// like cards-masonry.astro); fslightbox is a pure page-lib (no init script).
// The show.bs.modal handler is captured via {% capture_script %} → addPageScript.
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Icon from '@shared/components/Icon.astro';
import { site } from '@shared/lib/site';
import { addPageScript } from '@shared/lib/page-scripts';
import emails from '@data/emails.json';
const emailEntries = Object.entries(emails);
addPageScript(`<script>
const emailModal = document.getElementById("email-modal")
if (emailModal) {
emailModal.addEventListener("show.bs.modal", function (e) {
const button = e.relatedTarget
const image = button.getAttribute("data-bs-image"),
title = button.getAttribute("data-bs-title"),
description = button.getAttribute("data-bs-description")
emailModal.querySelector("[data-email-title]").textContent = title
emailModal.querySelector("[data-email-description]").textContent = description
emailModal.querySelector("[data-email-image]").src = image
modalTitle.textContent = \`New message to \${recipient}\`
modalBodyInput.value = recipient
})
}
</script>`);
---
<DefaultLayout
pageHeader="Email templates"
pageMenu="addons.emails"
pageLibs={['masonry', 'fslightbox']}
>
<div class="row row-cards">
<div class="col-12">
<div class="card card-md">
<div class="card-stamp card-stamp-lg">
<div class="card-stamp-icon bg-primary">
<Icon name="mail" />
</div>
</div>
<div class="card-body">
<div class="row align-items-center">
<div class="col-10">
<h3 class="h1">Tabler Emails</h3>
<div class="prose text-secondary fs-3">
{emailEntries.length} eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed.
</div>
<div class="mt-3">
<a href={site.emails.buy_link} class="btn btn-primary" target="_blank">Buy all emails for {site.emails.price}</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row row-cards" data-masonry={'{"percentPosition": true }'}>
{emailEntries.map(([key, email]) => (
<div class="col-4">
<a
href={`./static/emails/${key}.jpg`}
data-bs-toggle="modal"
data-bs-target="#email-modal"
data-bs-title={email.descriptionShort}
data-bs-description={email.descriptionLong}
data-bs-image={`./static/emails/${key}.jpg`}
>
<img src={`./static/emails/${key}.jpg`} class="img-fluid rounded" alt={email.descriptionShort} width={email.width} height={email.height} />
</a>
</div>
))}
</div>
</div>
</div>
<div class="modal fade" id="email-modal" aria-hidden="true" aria-labelledby="email-modal-label" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-body p-0">
<div class="row g-0">
<div class="col-6">
<div class="p-6 bg-surface-secondary rounded-start">
<img src="" class="img-fluid rounded-start" data-email-image />
</div>
</div>
<div class="col-6">
<div class="p-7">
<div class="prose">
<h3 data-email-title></h3>
<p data-email-description></p>
</div>
<div class="mt-6">
<a href={site.emails.buy_link} class="btn btn-primary w-100" target="_blank">Buy {site.emails.count} emails for {site.emails.price}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</DefaultLayout>