Add news pagination and logo asset
This commit is contained in:
Calum Muir
parent
655294e538
commit
14100d40f3
3 changed files with 251 additions and 1 deletions
BIN
public/news/900px-logo.png
Normal file
BIN
public/news/900px-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
|
|
@ -5,6 +5,12 @@ import SiteFooter from "../../components/SiteFooter.astro";
|
|||
import { navigationItems } from "../../lib/navigation";
|
||||
import { newsArticles, formatNewsDate } from "../../lib/news";
|
||||
|
||||
const PER_PAGE = 4;
|
||||
const totalPages = Math.ceil(newsArticles.length / PER_PAGE);
|
||||
const currentPage = 1;
|
||||
const pagedArticles = newsArticles.slice(0, PER_PAGE);
|
||||
const pageHref = (page) => (page === 1 ? "/events" : `/events/page/${page}`);
|
||||
|
||||
const pageSeo = {
|
||||
title: "News",
|
||||
description:
|
||||
|
|
@ -75,7 +81,7 @@ const pageSeo = {
|
|||
<div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
{
|
||||
newsArticles.map((item) => (
|
||||
pagedArticles.map((item) => (
|
||||
<article>
|
||||
<a
|
||||
class="group block bg-[#d6d6d6] border border-black/20 px-6 py-6 sm:py-8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/70"
|
||||
|
|
@ -108,6 +114,60 @@ const pageSeo = {
|
|||
))
|
||||
}
|
||||
</div>
|
||||
{
|
||||
totalPages > 1 ? (
|
||||
<nav class="mt-8 flex flex-wrap items-center justify-center gap-2">
|
||||
{currentPage > 1 ? (
|
||||
<a
|
||||
class="rounded-full border border-black/20 px-4 py-2 [font-family:'Public_Sans',Helvetica] font-semibold text-sm uppercase tracking-[0.2em] text-black"
|
||||
href={pageHref(currentPage - 1)}
|
||||
>
|
||||
Previous
|
||||
</a>
|
||||
) : (
|
||||
<span class="rounded-full border border-black/10 px-4 py-2 [font-family:'Public_Sans',Helvetica] font-semibold text-sm uppercase tracking-[0.2em] text-black/40">
|
||||
Previous
|
||||
</span>
|
||||
)}
|
||||
{Array.from(
|
||||
{ length: totalPages },
|
||||
(_, index) => {
|
||||
const page = index + 1;
|
||||
const isActive = page === currentPage;
|
||||
return (
|
||||
<a
|
||||
class={`h-10 w-10 rounded-full border text-sm font-semibold [font-family:'Public_Sans',Helvetica] flex items-center justify-center ${
|
||||
isActive
|
||||
? "border-black bg-black text-white"
|
||||
: "border-black/20 text-black"
|
||||
}`}
|
||||
href={pageHref(page)}
|
||||
aria-current={
|
||||
isActive
|
||||
? "page"
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{page}
|
||||
</a>
|
||||
);
|
||||
},
|
||||
)}
|
||||
{currentPage < totalPages ? (
|
||||
<a
|
||||
class="rounded-full border border-black/20 px-4 py-2 [font-family:'Public_Sans',Helvetica] font-semibold text-sm uppercase tracking-[0.2em] text-black"
|
||||
href={pageHref(currentPage + 1)}
|
||||
>
|
||||
Next
|
||||
</a>
|
||||
) : (
|
||||
<span class="rounded-full border border-black/10 px-4 py-2 [font-family:'Public_Sans',Helvetica] font-semibold text-sm uppercase tracking-[0.2em] text-black/40">
|
||||
Next
|
||||
</span>
|
||||
)}
|
||||
</nav>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
<SiteFooter fullBleedOnMobile />
|
||||
|
|
|
|||
190
src/pages/events/page/[page].astro
Normal file
190
src/pages/events/page/[page].astro
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
---
|
||||
import BaseLayout from "../../../layouts/BaseLayout.astro";
|
||||
import SiteHeader from "../../../components/SiteHeader.astro";
|
||||
import SiteFooter from "../../../components/SiteFooter.astro";
|
||||
import { navigationItems } from "../../../lib/navigation";
|
||||
import { newsArticles, formatNewsDate } from "../../../lib/news";
|
||||
|
||||
export function getStaticPaths() {
|
||||
const PER_PAGE = 4;
|
||||
const totalPages = Math.ceil(newsArticles.length / PER_PAGE);
|
||||
const pages = Array.from(
|
||||
{ length: totalPages },
|
||||
(_, index) => index + 1,
|
||||
).filter((page) => page > 1);
|
||||
|
||||
return pages.map((page) => ({
|
||||
params: { page: String(page) },
|
||||
}));
|
||||
}
|
||||
|
||||
const currentPage = Number(Astro.params.page ?? "1");
|
||||
const PER_PAGE = 4;
|
||||
const totalPages = Math.ceil(newsArticles.length / PER_PAGE);
|
||||
const start = (currentPage - 1) * PER_PAGE;
|
||||
const pagedArticles = newsArticles.slice(start, start + PER_PAGE);
|
||||
const pageHref = (page) => (page === 1 ? "/events" : `/events/page/${page}`);
|
||||
|
||||
const pageSeo = {
|
||||
title: `News - Page ${currentPage}`,
|
||||
description:
|
||||
"Stay updated with Highland Group RDA news, events, and stories. Discover how our riders, volunteers, and community are making a difference every day.",
|
||||
keywords:
|
||||
"Highland RDA news, RDA events, disability riding stories, RDA updates, equestrian therapy news, Highlands charity events",
|
||||
canonicalPath: `/events/page/${currentPage}`,
|
||||
};
|
||||
---
|
||||
|
||||
<BaseLayout {...pageSeo}>
|
||||
<div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
||||
<main class="w-full">
|
||||
<section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
|
||||
<div
|
||||
class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
|
||||
style="background-image: url(/news.webp);"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/45"></div>
|
||||
<SiteHeader
|
||||
navigationItems={navigationItems}
|
||||
theme="dark"
|
||||
className="px-6 sm:px-4"
|
||||
/>
|
||||
<div
|
||||
class="relative px-6 sm:px-8 pb-28 pt-6 sm:pb-20 sm:pt-8"
|
||||
>
|
||||
<div
|
||||
class="max-w-none sm:max-w-[760px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm"
|
||||
>
|
||||
<p
|
||||
class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90"
|
||||
>
|
||||
Latest News
|
||||
</p>
|
||||
<div class="mt-3 h-[2px] w-10 bg-white/70"></div>
|
||||
<h1
|
||||
class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]"
|
||||
>
|
||||
Updates from Highland Group RDA
|
||||
</h1>
|
||||
<p
|
||||
class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[700px]"
|
||||
>
|
||||
Stories, milestones, and updates from the yard,
|
||||
our riders, volunteers, and supporters.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 w-[190px] sm:w-[240px] h-[48px] sm:h-[50px]"
|
||||
href="https://www.justgiving.com/charity/highlandgrouprda"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
class="w-full h-full object-contain"
|
||||
alt="Donate via JustGiving"
|
||||
src="/Button.webp"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0"
|
||||
>
|
||||
<div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
{
|
||||
pagedArticles.map((item) => (
|
||||
<article>
|
||||
<a
|
||||
class="group block bg-[#d6d6d6] border border-black/20 px-6 py-6 sm:py-8 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/70"
|
||||
href={`/events/${item.slug}`}
|
||||
aria-label={`Read ${item.title}`}
|
||||
>
|
||||
<div class="flex flex-col gap-4">
|
||||
{item.image ? (
|
||||
<div
|
||||
class="h-[160px] rounded-[7px] bg-cover bg-[50%_35%]"
|
||||
style={`background-image: url(${item.image});`}
|
||||
/>
|
||||
) : null}
|
||||
<p class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-black/70">
|
||||
{formatNewsDate(item.date)}
|
||||
</p>
|
||||
<div class="h-px w-full bg-black/20" />
|
||||
<h2 class="mt-3 [font-family:'Merriweather',Helvetica] font-bold text-black text-xl sm:text-2xl leading-[1.2] group-hover:underline">
|
||||
{item.title}
|
||||
</h2>
|
||||
<p class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base leading-[1.6]">
|
||||
{item.summary}
|
||||
</p>
|
||||
<span class="mt-auto [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base underline">
|
||||
Read more
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
{
|
||||
totalPages > 1 ? (
|
||||
<nav class="mt-8 flex flex-wrap items-center justify-center gap-2">
|
||||
{currentPage > 1 ? (
|
||||
<a
|
||||
class="rounded-full border border-black/20 px-4 py-2 [font-family:'Public_Sans',Helvetica] font-semibold text-sm uppercase tracking-[0.2em] text-black"
|
||||
href={pageHref(currentPage - 1)}
|
||||
>
|
||||
Previous
|
||||
</a>
|
||||
) : (
|
||||
<span class="rounded-full border border-black/10 px-4 py-2 [font-family:'Public_Sans',Helvetica] font-semibold text-sm uppercase tracking-[0.2em] text-black/40">
|
||||
Previous
|
||||
</span>
|
||||
)}
|
||||
{Array.from(
|
||||
{ length: totalPages },
|
||||
(_, index) => {
|
||||
const page = index + 1;
|
||||
const isActive = page === currentPage;
|
||||
return (
|
||||
<a
|
||||
class={`h-10 w-10 rounded-full border text-sm font-semibold [font-family:'Public_Sans',Helvetica] flex items-center justify-center ${
|
||||
isActive
|
||||
? "border-black bg-black text-white"
|
||||
: "border-black/20 text-black"
|
||||
}`}
|
||||
href={pageHref(page)}
|
||||
aria-current={
|
||||
isActive
|
||||
? "page"
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{page}
|
||||
</a>
|
||||
);
|
||||
},
|
||||
)}
|
||||
{currentPage < totalPages ? (
|
||||
<a
|
||||
class="rounded-full border border-black/20 px-4 py-2 [font-family:'Public_Sans',Helvetica] font-semibold text-sm uppercase tracking-[0.2em] text-black"
|
||||
href={pageHref(currentPage + 1)}
|
||||
>
|
||||
Next
|
||||
</a>
|
||||
) : (
|
||||
<span class="rounded-full border border-black/10 px-4 py-2 [font-family:'Public_Sans',Helvetica] font-semibold text-sm uppercase tracking-[0.2em] text-black/40">
|
||||
Next
|
||||
</span>
|
||||
)}
|
||||
</nav>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
<SiteFooter fullBleedOnMobile />
|
||||
</main>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
Loading…
Reference in a new issue