portal/src/pages/news/[...page].astro

---
import { getCollection } from 'astro:content';
import Base from '../../layouts/Base.astro';

// Paginated archive via Astro's built-in paginate(): the [...page] rest route
// makes page 1 the bare /news URL, then /news/2 … /news/N.
export async function getStaticPaths({ paginate }) {
  const posts = (await getCollection('news', ({ data }) => !data.draft)).sort(
    (a, b) => b.data.date.valueOf() - a.data.date.valueOf(),
  );
  return paginate(posts, { pageSize: 24 });
}

const { page } = Astro.props;
const first = page.currentPage === 1;
const fmt = (d) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(d);
const iso = (d) => d.toISOString().slice(0, 10);
// Reading time from the Markdown body (~220 wpm) — differentiating card metadata;
// category/author are identical across all articles, so cards omit them (NN/g).
const readMin = (p) => Math.max(1, Math.round((p.body ?? '').split(/\s+/).length / 220));
// Windowed page list — 1 … n-1 n n+1 … last (0 marks an ellipsis)
const nums = [];
for (let n = 1; n <= page.lastPage; n++) {
  if (n === 1 || n === page.lastPage || Math.abs(n - page.currentPage) <= 1) nums.push(n);
  else if (nums.at(-1) !== 0) nums.push(0);
}
const hrefFor = (n) => (n === 1 ? '/news' : `/news/${n}`);
---
<Base
  title={first ? 'CTAO Science Portal — News' : `CTAO Science Portal — News, page ${page.currentPage}`}
  description={first ? 'News and announcements of the CTAO' : `News and announcements of the CTAO — page ${page.currentPage} of ${page.lastPage}`}
>
  {/* Section-landing archetype: white head, display Galaxy h1 + standfirst
      (the navy band is reserved for / and /login — DESIGN.md). */}
  <header class="container page-head">
    <h1>News &amp; Announcements</h1>
    <p class="standfirst">Science highlights and updates from the observatory and its partners.</p>
  </header>

  <section class="container page">
    <h2 class="sr-only">{first ? 'All news' : `All news — page ${page.currentPage}`}</h2>
    <div class="grid">
      {page.data.map((post, i) => (
        <article class={first && i === 0 ? 'card card--featured' : 'card'}>
          {post.data.cover && (
            <img class="cover" src={encodeURI(post.data.cover)} alt="" loading={first && i === 0 ? 'eager' : 'lazy'} />
          )}
          <div class="body">
            <h3><a href={`/news/${post.id}`}>{post.data.title}</a></h3>
            <p class="desc">{post.data.description}</p>
            <div class="meta"><time datetime={iso(post.data.date)}>{fmt(post.data.date)}</time> · {readMin(post)} min read</div>
          </div>
        </article>
      ))}
    </div>
    {page.lastPage > 1 && (
      <nav class="pagination" aria-label="News pages">
        {page.url.prev
          ? <a class="page-link page-step" href={page.url.prev} rel="prev">← Newer</a>
          : <span class="page-link page-step" aria-hidden="true">← Newer</span>}
        <ol>
          {nums.map((n) => (
            <li>
              {n === 0
                ? <span class="page-gap" aria-hidden="true">…</span>
                : <a class="page-link" href={hrefFor(n)} aria-current={n === page.currentPage ? 'page' : undefined}><span class="sr-only">Page </span>{n}</a>}
            </li>
          ))}
        </ol>
        {page.url.next
          ? <a class="page-link page-step" href={page.url.next} rel="next">Older →</a>
          : <span class="page-link page-step" aria-hidden="true">Older →</span>}
      </nav>
    )}
  </section>
</Base>