jamesp
4906364a65
Nav.astro was using the #smallbusiness-main-menu id/CSS (designed for the tall under-logo nav row) while rendered inside #top-menu-container (the compact top bar), causing items to overflow onto a second line. Switched to the matching #smallbusiness-top-menu styling and dropped the extra "Home" link that pushed it over. Single nav bar, as intended. Splide's core CSS import from Slideshow.astro's frontmatter was being silently dropped from the build (component-level bare CSS imports don't bundle the same way layout-level ones do) -- moved it to BaseLayout.astro where global.css already imports successfully, and switched to the full theme CSS for real arrow/pagination styling. Also fixed #slideshow .post-slide: position:absolute with no explicit top/left fell back to its hypothetical static position (right after the 354px image), pushing the caption overlay below the visible slide instead of on top of it. Pinned top:0; left:0 so the margin-based offset actually anchors to the slide. Verified visually via headless Chromium screenshot, not just HTML content -- the earlier "renders the 5 latest posts" check only confirmed the data was present, not that it displayed correctly.
58 lines
1.3 KiB
Plaintext
58 lines
1.3 KiB
Plaintext
---
|
|
import { Image } from 'astro:assets';
|
|
import { getCollection } from 'astro:content';
|
|
|
|
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,
|
|
height: 354,
|
|
}).mount();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
#slideshow img {
|
|
width: 100%;
|
|
height: 354px;
|
|
object-fit: cover;
|
|
}
|
|
</style>
|