mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
Render Modal as real markup; drain scripts via CaptureScript (#2742)
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
This commit is contained in:
Paweł Kuna
@@ -1,39 +1,37 @@
|
||||
---
|
||||
// The ui/shape.html include is inlined: <div class="shape shape-md ..."><Icon /></div>
|
||||
// (shape class order: shape, shape-{size}, shape-{color}, {class}, rounded-circle).
|
||||
import SectionDivider from '../SectionDivider.astro'
|
||||
import Icon from '@ui/Icon.astro'
|
||||
import SectionDivider from '../SectionDivider.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
interface Props {
|
||||
background?: string
|
||||
class?: string
|
||||
divider?: string
|
||||
background?: string;
|
||||
class?: string;
|
||||
divider?: string;
|
||||
}
|
||||
|
||||
const { background, class: className, divider } = Astro.props
|
||||
const { background, class: className, divider } = Astro.props;
|
||||
|
||||
const sectionClass = ['section', background && `section-${background}`, className]
|
||||
---
|
||||
|
||||
<section class:list={sectionClass}>
|
||||
<SectionDivider divider={divider} />
|
||||
<div class="container">
|
||||
<div class="row items-center text-center g-lg-10">
|
||||
<div class="col-md-6 col-lg">
|
||||
<div class="shape shape-md mb-3"><Icon name="devices" /></div>
|
||||
<h2 class="h2">Mobile-optimized</h2>
|
||||
<p class="text-secondary">Our email templates are fully responsive, so you can be sure they will look great on any device and screen size.</p>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg">
|
||||
<div class="shape shape-md mb-3"><Icon name="mailbox" /></div>
|
||||
<h2 class="h2">Compatible with 90+ email clients</h2>
|
||||
<p class="text-secondary">Tested across 90+ email clients and devices, Tabler emails will help you make your email communication professional and reliable.</p>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg">
|
||||
<div class="shape shape-md mb-3"><Icon name="palette" /></div>
|
||||
<h2 class="h2">Unique, minimal design</h2>
|
||||
<p class="text-secondary">Draw recipients’ attention with beautiful, minimal email designs based on Bootstrap and Material Design principles.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SectionDivider divider={divider} />
|
||||
<div class="container">
|
||||
<div class="row items-center text-center g-lg-10">
|
||||
<div class="col-md-6 col-lg">
|
||||
<div class="shape shape-md mb-3"><Icon name="devices" /></div>
|
||||
<h2 class="h2">Mobile-optimized</h2>
|
||||
<p class="text-secondary">Our email templates are fully responsive, so you can be sure they will look great on any device and screen size.</p>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg">
|
||||
<div class="shape shape-md mb-3"><Icon name="mailbox" /></div>
|
||||
<h2 class="h2">Compatible with 90+ email clients</h2>
|
||||
<p class="text-secondary">Tested across 90+ email clients and devices, Tabler emails will help you make your email communication professional and reliable.</p>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg">
|
||||
<div class="shape shape-md mb-3"><Icon name="palette" /></div>
|
||||
<h2 class="h2">Unique, minimal design</h2>
|
||||
<p class="text-secondary">Draw recipients’ attention with beautiful, minimal email designs based on Bootstrap and Material Design principles.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,73 +1,77 @@
|
||||
---
|
||||
// The ui/svg.html placeholder (width=500 height=400 border=true) is inlined,
|
||||
// and ui/shape.html (size="md") as <div class="shape shape-md"><Icon /></div>.
|
||||
import SectionDivider from '../SectionDivider.astro'
|
||||
import Icon from '@ui/Icon.astro'
|
||||
import SectionDivider from '../SectionDivider.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
interface Props {
|
||||
background?: string
|
||||
class?: string
|
||||
divider?: string
|
||||
background?: string;
|
||||
class?: string;
|
||||
divider?: string;
|
||||
}
|
||||
|
||||
const { background, class: className, divider } = Astro.props
|
||||
const { background, class: className, divider } = Astro.props;
|
||||
|
||||
const sectionClass = ['section', background && `section-${background}`, className]
|
||||
---
|
||||
|
||||
<section class:list={sectionClass}>
|
||||
<SectionDivider divider={divider} />
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Everything you need to deploy your app</h2>
|
||||
<div class="section-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
||||
</div>
|
||||
<SectionDivider divider={divider} />
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Everything you need to deploy your app</h2>
|
||||
<div class="section-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-lg-10">
|
||||
<div class="col-lg-6 mb-3 mb-lg-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="500" height="400" viewBox="0 0 500 400" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)" style="width: 100%; height: auto">
|
||||
<rect x=".5" y=".5" width="499" height="399" rx="2"></rect>
|
||||
<line x1="0" y1="0" x2="500" y2="400"></line>
|
||||
<line x1="0" y1="400" x2="500" y2="0"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="shape shape-md"><Icon name="tools" /></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Designed with users in mind</h3>
|
||||
<p class="text-secondary m-0">Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love. Every UI element has been created with attention to detail to make your interface beautiful!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="shape shape-md"><Icon name="brand-bootstrap" /></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Built for developers</h3>
|
||||
<p class="text-secondary m-0">Having in mind what it takes to write high-quality code, we want to help you speed up the development process and keep your code clean. Based on Bootstrap 5, Tabler is a cutting-edge solution, compatible with all modern browsers and fully responsive.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="shape shape-md"><Icon name="paint" /></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Fully customizable</h3>
|
||||
<p class="text-secondary m-0">You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-lg-10">
|
||||
<div class="col-lg-6 mb-3 mb-lg-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="500" height="400" viewBox="0 0 500 400" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)" style="width: 100%; height: auto">
|
||||
<rect x=".5" y=".5" width="499" height="399" rx="2"></rect>
|
||||
<line x1="0" y1="0" x2="500" y2="400"></line>
|
||||
<line x1="0" y1="400" x2="500" y2="0"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="shape shape-md"><Icon name="tools" /></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Designed with users in mind</h3>
|
||||
<p class="text-secondary m-0">
|
||||
Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love. Every UI element has been created with
|
||||
attention to detail to make your interface beautiful!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="shape shape-md"><Icon name="brand-bootstrap" /></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Built for developers</h3>
|
||||
<p class="text-secondary m-0">
|
||||
Having in mind what it takes to write high-quality code, we want to help you speed up the development process and keep your code clean. Based on Bootstrap 5, Tabler is a cutting-edge solution, compatible with all modern
|
||||
browsers and fully responsive.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="shape shape-md"><Icon name="paint" /></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Fully customizable</h3>
|
||||
<p class="text-secondary m-0">You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,72 +1,77 @@
|
||||
---
|
||||
// placeholder svg on the right). ui/svg.html and ui/shape.html inlined.
|
||||
import SectionDivider from '../SectionDivider.astro'
|
||||
import Icon from '@ui/Icon.astro'
|
||||
import SectionDivider from '../SectionDivider.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
interface Props {
|
||||
background?: string
|
||||
class?: string
|
||||
divider?: string
|
||||
background?: string;
|
||||
class?: string;
|
||||
divider?: string;
|
||||
}
|
||||
|
||||
const { background, class: className, divider } = Astro.props
|
||||
const { background, class: className, divider } = Astro.props;
|
||||
|
||||
const sectionClass = ['section', background && `section-${background}`, className]
|
||||
---
|
||||
|
||||
<section class:list={sectionClass}>
|
||||
<SectionDivider divider={divider} />
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Everything you need to deploy your app</h2>
|
||||
<div class="section-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
||||
</div>
|
||||
<SectionDivider divider={divider} />
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Everything you need to deploy your app</h2>
|
||||
<div class="section-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-lg-10">
|
||||
<div class="col-lg-6">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="shape shape-md"><Icon name="tools" /></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Designed with users in mind</h3>
|
||||
<p class="text-secondary m-0">Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love. Every UI element has been created with attention to detail to make your interface beautiful!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="shape shape-md"><Icon name="brand-bootstrap" /></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Built for developers</h3>
|
||||
<p class="text-secondary m-0">Having in mind what it takes to write high-quality code, we want to help you speed up the development process and keep your code clean. Based on Bootstrap 5, Tabler is a cutting-edge solution, compatible with all modern browsers and fully responsive.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="shape shape-md"><Icon name="paint" /></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Fully customizable</h3>
|
||||
<p class="text-secondary m-0">You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 mt-3 mt-lg-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="500" height="400" viewBox="0 0 500 400" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)" style="width: 100%; height: auto">
|
||||
<rect x=".5" y=".5" width="499" height="399" rx="2"></rect>
|
||||
<line x1="0" y1="0" x2="500" y2="400"></line>
|
||||
<line x1="0" y1="400" x2="500" y2="0"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-lg-10">
|
||||
<div class="col-lg-6">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="shape shape-md"><Icon name="tools" /></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Designed with users in mind</h3>
|
||||
<p class="text-secondary m-0">
|
||||
Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love. Every UI element has been created with
|
||||
attention to detail to make your interface beautiful!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="shape shape-md"><Icon name="brand-bootstrap" /></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Built for developers</h3>
|
||||
<p class="text-secondary m-0">
|
||||
Having in mind what it takes to write high-quality code, we want to help you speed up the development process and keep your code clean. Based on Bootstrap 5, Tabler is a cutting-edge solution, compatible with all modern
|
||||
browsers and fully responsive.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="shape shape-md"><Icon name="paint" /></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h2 mb-2">Fully customizable</h3>
|
||||
<p class="text-secondary m-0">You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 mt-3 mt-lg-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="500" height="400" viewBox="0 0 500 400" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)" style="width: 100%; height: auto">
|
||||
<rect x=".5" y=".5" width="499" height="399" rx="2"></rect>
|
||||
<line x1="0" y1="0" x2="500" y2="400"></line>
|
||||
<line x1="0" y1="400" x2="500" y2="0"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,88 +1,89 @@
|
||||
---
|
||||
// Marketing pages live one level deep, so the avatar asset base is ".."
|
||||
// (reference uses "../static/avatars/...") — passed to Avatar via `base`.
|
||||
import testimonials from '@data/testimonials.json'
|
||||
import people from '@data/people.json'
|
||||
import Avatar from '@ui/Avatar.astro'
|
||||
import testimonials from '@data/testimonials.json';
|
||||
import people from '@data/people.json';
|
||||
import Avatar from '@ui/Avatar.astro';
|
||||
|
||||
interface Person {
|
||||
full_name?: string
|
||||
photo?: string
|
||||
job_title?: string
|
||||
[key: string]: unknown
|
||||
full_name?: string;
|
||||
photo?: string;
|
||||
job_title?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
background?: string
|
||||
class?: string
|
||||
limit?: number
|
||||
hideHeader?: boolean
|
||||
background?: string;
|
||||
class?: string;
|
||||
limit?: number;
|
||||
hideHeader?: boolean;
|
||||
}
|
||||
|
||||
const { background, class: className, limit = 99, hideHeader } = Astro.props
|
||||
const { background, class: className, limit = 99, hideHeader } = Astro.props;
|
||||
|
||||
const sectionClass = ['section', background && `section-${background}`, className]
|
||||
|
||||
// Liquid: testimonials | slice: 0, limit | split_to_n: 3
|
||||
const list = (testimonials as string[]).slice(0, limit)
|
||||
const n = 3
|
||||
const chunkSize = Math.round(list.length / n)
|
||||
const groups: string[][] = []
|
||||
// Slice testimonials and split into 3 columns.
|
||||
const list = (testimonials as string[]).slice(0, limit);
|
||||
const n = 3;
|
||||
const chunkSize = Math.round(list.length / n);
|
||||
const groups: string[][] = [];
|
||||
for (let i = 0; i < list.length; i += chunkSize) {
|
||||
groups.push(list.slice(i, i + chunkSize))
|
||||
groups.push(list.slice(i, i + chunkSize));
|
||||
}
|
||||
|
||||
// Liquid: {% assign i = 1 %} — a global counter incremented per testimonial,
|
||||
// used to index people[i] (people[0] is intentionally skipped).
|
||||
let i = 1
|
||||
// Global counter starting at 1 — indexes people[i] (people[0] is intentionally skipped).
|
||||
let i = 1;
|
||||
const cards = groups.map((group) =>
|
||||
group.map((testimonial) => {
|
||||
const person = (people as Person[])[i] ?? {}
|
||||
i += 1
|
||||
return { testimonial, person }
|
||||
}),
|
||||
)
|
||||
group.map((testimonial) => {
|
||||
const person = (people as Person[])[i] ?? {};
|
||||
i += 1;
|
||||
return { testimonial, person };
|
||||
}),
|
||||
);
|
||||
---
|
||||
|
||||
<section class:list={sectionClass}>
|
||||
<div class="container">
|
||||
{
|
||||
!hideHeader && (
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Trusted by hundreds</h2>
|
||||
<p class="section-description">Our Users send us bunch of smilies with our services, and we love them 😍</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div class="container">
|
||||
{
|
||||
!hideHeader && (
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Trusted by hundreds</h2>
|
||||
<p class="section-description">Our Users send us bunch of smilies with our services, and we love them 😍</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<div class="row g-lg-6">
|
||||
{
|
||||
cards.map((group) => (
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="row g-lg-6">
|
||||
{group.map(({ testimonial, person }) => (
|
||||
<div class="col-12">
|
||||
<a href="#" class="card bg-surface-secondary">
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col-auto">
|
||||
<Avatar person={person} size="md" base=".." />
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h3 m-0">{person.full_name}</h3>
|
||||
<div class="text-secondary">{person.job_title}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-lg-6">
|
||||
{
|
||||
cards.map((group) => (
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="row g-lg-6">
|
||||
{group.map(({ testimonial, person }) => (
|
||||
<div class="col-12">
|
||||
<a href="#" class="card bg-surface-secondary">
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col-auto">
|
||||
<Avatar person={person} size="md" base=".." />
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3 class="h3 m-0">{person.full_name}</h3>
|
||||
<div class="text-secondary">{person.job_title}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>{testimonial}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
{testimonial}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user