200 lines
11 KiB
Text
200 lines
11 KiB
Text
---
|
|
import BaseLayout from "../../../layouts/BaseLayout.astro";
|
|
import SiteHeader from "../../../components/SiteHeader.astro";
|
|
import SiteFooter from "../../../components/SiteFooter.astro";
|
|
import { navigationItems } from "../../../lib/navigation";
|
|
import { getArticles } from "../../../lib/news";
|
|
|
|
const allArticles = await getArticles();
|
|
const currentPage = Number(Astro.params.page ?? "1");
|
|
const PER_PAGE = 6;
|
|
const totalPages = Math.ceil(allArticles.length / PER_PAGE);
|
|
const start = (currentPage - 1) * PER_PAGE;
|
|
const pagedArticles = allArticles.slice(start, start + PER_PAGE);
|
|
const pageHref = (page: number) => (page === 1 ? "/events" : `/events/page/${page}`);
|
|
|
|
const pageSeo = {
|
|
title: `News — Page ${currentPage}`,
|
|
description:
|
|
"Stay updated with Highland Group RDA news, events, and stories.",
|
|
keywords:
|
|
"Highland RDA news, RDA events, disability riding stories, RDA updates",
|
|
canonicalPath: `/events/page/${currentPage}`,
|
|
};
|
|
|
|
const categoryColors: Record<string, { bg: string; text: string }> = {
|
|
News: { bg: "#e8f0e7", text: "#4a7040" },
|
|
Events: { bg: "#e7eaf5", text: "#3a4a80" },
|
|
Fundraising: { bg: "#fdf3cc", text: "#7a6010" },
|
|
};
|
|
|
|
function formatDate(date: string) {
|
|
const d = new Date(date);
|
|
if (isNaN(d.getTime())) return date;
|
|
return d.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" });
|
|
}
|
|
---
|
|
|
|
<BaseLayout {...pageSeo}>
|
|
<style>
|
|
#site-nav {
|
|
transition: background 0.4s ease, backdrop-filter 0.4s ease;
|
|
}
|
|
#site-nav.scrolled {
|
|
background: rgba(0, 0, 0, 0.82);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.post-card { transition: transform 0.28s ease; }
|
|
.post-card:hover { transform: translateY(-4px); }
|
|
.post-card:hover .post-title { text-decoration: underline; }
|
|
.post-card-img { transition: transform 0.5s ease; }
|
|
.post-card:hover .post-card-img { transform: scale(1.05); }
|
|
|
|
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 48px; }
|
|
@media (max-width: 767px) { .post-grid { grid-template-columns: 1fr; } }
|
|
</style>
|
|
|
|
<div id="site-nav" class="fixed top-0 left-0 right-0 z-50 px-4 sm:px-10">
|
|
<SiteHeader navigationItems={navigationItems} theme="dark" />
|
|
</div>
|
|
|
|
<div class="flex flex-col min-h-screen bg-[#e2e2e2]">
|
|
<main class="w-full">
|
|
|
|
<!-- ── HERO ── -->
|
|
<section class="relative w-full overflow-hidden" style="min-height: 50vh;">
|
|
<img
|
|
class="absolute inset-0 h-full w-full object-cover"
|
|
style="object-position: 50% 30%;"
|
|
alt=""
|
|
src="/hero-events.webp"
|
|
loading="eager"
|
|
fetchpriority="high"
|
|
decoding="async"
|
|
/>
|
|
<div
|
|
class="absolute inset-0"
|
|
style="background: linear-gradient(160deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.5) 100%);"
|
|
/>
|
|
<div
|
|
class="relative flex flex-col justify-end"
|
|
style="min-height: 50vh; padding: 120px 28px 64px;"
|
|
>
|
|
<div style="max-width: 600px;">
|
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 14px;">
|
|
Events & News — Page {currentPage}
|
|
</p>
|
|
<div style="width: 48px; height: 2px; background: #7DA371; margin-bottom: 20px;" />
|
|
<h1 style="font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(32px, 4.5vw, 52px); color: #F6F1E8; line-height: 1.1;">
|
|
What's on at Highland Group RDA.
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── ARTICLE GRID ── -->
|
|
<section style="background: #e2e2e2; padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 72px);">
|
|
<div style="max-width: 1200px; margin: 0 auto;">
|
|
|
|
<div class="post-grid">
|
|
{pagedArticles.map((post) => (
|
|
<a
|
|
class="post-card"
|
|
href={`/events/${post.slug}`}
|
|
style="background: #d6d6d6; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;"
|
|
>
|
|
<div style="height: 200px; overflow: hidden; position: relative; flex-shrink: 0;">
|
|
{post.image ? (
|
|
<img
|
|
src={post.image}
|
|
alt={post.title}
|
|
class="post-card-img"
|
|
style="width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
) : (
|
|
<div style="width: 100%; height: 100%; background: #1e2e1a;" />
|
|
)}
|
|
</div>
|
|
<div style="padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1;">
|
|
<div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
|
|
<span style={`padding: 4px 12px; border-radius: 9999px; background: ${categoryColors[post.category]?.bg ?? "#c8c8c8"}; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; color: ${categoryColors[post.category]?.text ?? "rgba(0,0,0,0.6)"}; letter-spacing: 0.06em; text-transform: uppercase;`}>
|
|
{post.category}
|
|
</span>
|
|
<span style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 12px; color: rgba(0,0,0,0.45);">
|
|
{formatDate(post.date)}
|
|
</span>
|
|
</div>
|
|
<h2 class="post-title" style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(16px, 1.5vw, 19px); color: #000; line-height: 1.3;">
|
|
{post.title}
|
|
</h2>
|
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(0,0,0,0.6); line-height: 1.65; flex: 1;">
|
|
{post.summary}
|
|
</p>
|
|
<span style="display: inline-flex; align-items: center; gap: 6px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 12px; color: #7DA371; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px;">
|
|
Read more
|
|
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="#7DA371" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M3 8h10M9 4l4 4-4 4"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{totalPages > 1 && (
|
|
<nav aria-label="Pagination" style="display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;">
|
|
{currentPage > 1 ? (
|
|
<a
|
|
href={pageHref(currentPage - 1)}
|
|
style="padding: 9px 22px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.2); font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: #000; text-decoration: none;"
|
|
>
|
|
Previous
|
|
</a>
|
|
) : (
|
|
<span style="padding: 9px 22px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.08); font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(0,0,0,0.3);">
|
|
Previous
|
|
</span>
|
|
)}
|
|
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
|
<a
|
|
href={pageHref(page)}
|
|
aria-current={page === currentPage ? "page" : undefined}
|
|
style={`width: 40px; height: 40px; border-radius: 9999px; border: 1.5px solid ${page === currentPage ? "#000" : "rgba(0,0,0,0.2)"}; background: ${page === currentPage ? "#000" : "transparent"}; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 14px; color: ${page === currentPage ? "#fff" : "#000"}; display: flex; align-items: center; justify-content: center; text-decoration: none;`}
|
|
>
|
|
{page}
|
|
</a>
|
|
))}
|
|
{currentPage < totalPages ? (
|
|
<a
|
|
href={pageHref(currentPage + 1)}
|
|
style="padding: 9px 22px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.2); font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: #000; text-decoration: none;"
|
|
>
|
|
Next
|
|
</a>
|
|
) : (
|
|
<span style="padding: 9px 22px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.08); font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(0,0,0,0.3);">
|
|
Next
|
|
</span>
|
|
)}
|
|
</nav>
|
|
)}
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
<SiteFooter fullBleedOnMobile />
|
|
</div>
|
|
|
|
<script>
|
|
const nav = document.getElementById("site-nav");
|
|
if (nav) {
|
|
window.addEventListener("scroll", () => {
|
|
nav.classList.toggle("scrolled", window.scrollY > 40);
|
|
}, { passive: true });
|
|
}
|
|
</script>
|
|
</BaseLayout>
|