85 lines
2.6 KiB
Plaintext
85 lines
2.6 KiB
Plaintext
---
|
|
import { Image } from 'astro:assets';
|
|
import release from '../data/release.json';
|
|
import slideStable from '../assets/slides/slide-vicibox-12.png';
|
|
import slideBeta from '../assets/slides/slide-vicibox-13-beta.png';
|
|
import slideDocs from '../assets/slides/slide-docs.png';
|
|
import slideCluster from '../assets/slides/slide-cluster.png';
|
|
|
|
// Unlike VICIdial/VICIhost (which rotate their latest blog posts), ViciBox has
|
|
// only a handful of posts, so the slides are a fixed list. Banners are 930x354
|
|
// in the same style as the other sites: artwork on the left, text box on the right.
|
|
const slides = [
|
|
{
|
|
title: `ViciBox Server v.${release.stable.version}`,
|
|
text: 'The official installation ISO for the VICIdial Contact Center Suite. Download the standard or MD Software RAID1 installer and have VICIdial running in no time.',
|
|
href: '/server',
|
|
image: slideStable,
|
|
},
|
|
{
|
|
title: `ViciBox v.${release.beta.version} available for testing`,
|
|
text: 'The next major ViciBox release is in beta. Help us test it on non-production systems and report what you find on the forum.',
|
|
href: release.beta.post,
|
|
image: slideBeta,
|
|
},
|
|
{
|
|
title: 'Installation Manual',
|
|
text: 'Step-by-step instructions for express single-server installs, multi-server clusters, and everything in between.',
|
|
href: 'https://docs.vicibox.com/',
|
|
image: slideDocs,
|
|
},
|
|
{
|
|
title: 'Multi-Server Clusters',
|
|
text: 'ViciBox automatically configures new servers into a VICIdial cluster, so scaling from a few agents to hundreds is straightforward.',
|
|
href: '/server',
|
|
image: slideCluster,
|
|
},
|
|
];
|
|
---
|
|
|
|
<div id="slider">
|
|
<div id="slideshow" class="splide">
|
|
<div class="splide__track">
|
|
<ul class="splide__list">
|
|
{slides.map((slide) => (
|
|
<li class="splide__slide">
|
|
<a href={slide.href}>
|
|
<Image src={slide.image} alt={slide.title} width={930} height={354} />
|
|
<div class="post-slide">
|
|
<h2>{slide.title}</h2>
|
|
<p>{slide.text}<span class="read-more">Read More...</span></p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
import Splide from '@splidejs/splide';
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const el = document.getElementById('slideshow');
|
|
if (el) {
|
|
new Splide(el, {
|
|
type: 'loop',
|
|
autoplay: true,
|
|
interval: 5000,
|
|
arrows: true,
|
|
pagination: true,
|
|
height: 354,
|
|
}).mount();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
#slideshow img {
|
|
width: 100%;
|
|
height: 354px;
|
|
object-fit: cover;
|
|
}
|
|
</style>
|