Initial Astro migration of vicidial.com off WordPress
Static brochure/marketing site: 55 pages, 5 posts, 82 attachments, and the 7-item nav, exported from the wordpress_vicidial DB via scripts/export-wp.mjs (re-runnable). Layout/styles ported from the small-business WP theme; homepage slideshow rebuilt as a Splide client island pulling the latest 5 posts at build time, replacing the old BJQS jQuery plugin.
This commit is contained in:
@@ -0,0 +1,57 @@
|
||||
---
|
||||
import { Image } from 'astro:assets';
|
||||
import { getCollection } from 'astro:content';
|
||||
import '@splidejs/splide/css/core';
|
||||
|
||||
const allPosts = await getCollection('posts');
|
||||
const slides = allPosts
|
||||
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
|
||||
.slice(0, 5);
|
||||
---
|
||||
|
||||
<div id="slider">
|
||||
<div id="slideshow" class="splide">
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
{slides.map((post) => (
|
||||
<li class="splide__slide">
|
||||
<a href={`/blog/${post.data.slug}`}>
|
||||
{post.data.featuredImage && (
|
||||
<Image src={post.data.featuredImage} alt={post.data.title} width={930} height={354} />
|
||||
)}
|
||||
<div class="post-slide">
|
||||
<h2>{post.data.title}</h2>
|
||||
<p>{post.data.excerpt}</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,
|
||||
}).mount();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#slideshow img {
|
||||
width: 100%;
|
||||
height: 354px;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user