feat(library): add static pagination and page-one redirects

www/src/components/LibraryPagination.astro

@@ -0,0 +1,53 @@
+---
+import {
+  libraryPageRoute,
+  type LibraryPageSlice
+} from '../utils/library-pagination';
+import type { LibraryLocale } from '../utils/library-catalog';
+
+interface Props {
+  locale: LibraryLocale;
+  page: LibraryPageSlice<unknown>;
+}
+
+const { locale, page } = Astro.props;
+const messages = {
+  en: { navigation: 'Library pagination', previous: 'Previous', next: 'Next', page: 'Page', current: 'current page' },
+  es: { navigation: 'Paginación de la biblioteca', previous: 'Anterior', next: 'Siguiente', page: 'Página', current: 'página actual' },
+  ar: { navigation: 'ترقيم صفحات المكتبة', previous: 'السابق', next: 'التالي', page: 'الصفحة', current: 'الصفحة الحالية' }
+}[locale];
+const pages = Array.from({ length: page.totalPages }, (_, index) => index + 1);
+---
+{page.totalPages > 1 && (
+  <nav class="library-pagination" aria-label={messages.navigation}>
+    <ul>
+      {page.previousPage && (
+        <li class="library-pagination__previous">
+          <a rel="prev" href={libraryPageRoute(locale, page.previousPage)}>{messages.previous}</a>
+        </li>
+      )}
+      {pages.map((number) => (
+        <li>
+          <a
+            href={libraryPageRoute(locale, number)}
+            aria-current={number === page.currentPage ? 'page' : undefined}
+            aria-label={`${messages.page} ${number}${number === page.currentPage ? `, ${messages.current}` : ''}`}
+          >{number}</a>
+        </li>
+      ))}
+      {page.nextPage && (
+        <li class="library-pagination__next">
+          <a rel="next" href={libraryPageRoute(locale, page.nextPage)}>{messages.next}</a>
+        </li>
+      )}
+    </ul>
+  </nav>
+)}
+
+<style>
+  .library-pagination { margin-top: 2rem; }
+  .library-pagination ul { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; list-style: none; margin: 0; padding: 0; }
+  .library-pagination a { align-items: center; border: 2px solid var(--color-primary); border-radius: 4px; color: var(--color-primary); display: inline-flex; font-weight: 700; justify-content: center; min-height: 44px; min-width: 44px; padding: .5rem .75rem; text-decoration: none; }
+  .library-pagination a[aria-current="page"] { background: var(--color-primary); color: white; }
+  .library-pagination a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
+</style>

www/src/components/pages/LibraryArabic.astro

@@ -1,13 +1,25 @@
 ---
 import { getLibraryCatalog } from '../../utils/library';
+import { paginateLibraryItems } from '../../utils/library-pagination';
 import BlogIndexLayout from '../../layouts/BlogIndexLayout.astro';
 import BlogCard from '../BlogCard.astro';
 import LibrarySearch from '../LibrarySearch.astro';
-const posts = (await getLibraryCatalog()).byLocale.ar.map(({ entry }) => entry);
-const popular = posts.slice(0, 5);
+import LibraryPagination from '../LibraryPagination.astro';
+interface Props { page?: number; }
+const { page = 1 } = Astro.props;
+const allPosts = (await getLibraryCatalog()).byLocale.ar;
+const pagination = paginateLibraryItems(allPosts, page);
+if (!pagination) throw new Error(`Invalid Arabic Library page: ${page}`);
+const posts = pagination.items.map(({ entry }) => entry);
+const popular = allPosts.slice(0, 5).map(({ entry }) => entry);
+const heading = 'مكتبة معهد أريزونا للتوحد';
+const title = page === 1 ? heading : `${heading} | الصفحة ${page}`;
 ---
-<BlogIndexLayout title="مكتبة معهد أريزونا للتوحد" description="مقالات إخبارية حول علاج تحليل السلوك التطبيقي والتعليم الخاص، ودراسات حالة، ووصفات، ومقالات افتتاحية، ودروس تعليمية." lang="ar">
+<BlogIndexLayout title={title} heading={heading} description="مقالات إخبارية حول علاج تحليل السلوك التطبيقي والتعليم الخاص، ودراسات حالة، ووصفات، ومقالات افتتاحية، ودروس تعليمية." lang="ar">
   <div id="library-results-ar" class="library-search-results" hidden></div>
-  <div id="library-archive-ar" class="blog-list">{posts.map((post) => <BlogCard post={post} prefix="/ar" />)}</div>
+  <div id="library-archive-ar" class="library-archive">
+    <div class="blog-list">{posts.map((post) => <BlogCard post={post} prefix="/ar" />)}</div>
+    <LibraryPagination locale="ar" page={pagination} />
+  </div>
   <aside class="library-sidebar"><LibrarySearch locale="ar" archiveId="library-archive-ar" resultsId="library-results-ar" /><h2>المقالات الشائعة</h2><ul>{popular.map((post) => <li><a href={`/ar/library/${post.data.slug}`}>{post.data.title}</a></li>)}</ul></aside>
 </BlogIndexLayout>

www/src/components/pages/LibraryEnglish.astro

@@ -1,13 +1,23 @@
 ---
 import { getLibraryCatalog } from '../../utils/library';
+import { paginateLibraryItems } from '../../utils/library-pagination';
 import BlogIndexLayout from '../../layouts/BlogIndexLayout.astro';
 import BlogCard from '../BlogCard.astro';
 import LibrarySearch from '../LibrarySearch.astro';
-const posts = (await getLibraryCatalog()).byLocale.en.map(({ entry }) => entry);
-const popular = posts.slice(0, 5);
+import LibraryPagination from '../LibraryPagination.astro';
+interface Props { page?: number; }
+const { page = 1 } = Astro.props;
+const allPosts = (await getLibraryCatalog()).byLocale.en;
+const pagination = paginateLibraryItems(allPosts, page);
+if (!pagination) throw new Error(`Invalid English Library page: ${page}`);
+const posts = pagination.items.map(({ entry }) => entry);
+const popular = allPosts.slice(0, 5).map(({ entry }) => entry);
+const heading = 'The Library at AZ Institute for Autism';
+const title = page === 1 ? heading : `${heading} | Page ${page}`;
 ---
 <BlogIndexLayout
-  title="The Library at AZ Institute for Autism"
+  title={title}
+  heading={heading}
   description="Welcome to the Library at AIA, where we share valuable insights, strategies, and resources to support individuals with autism, their families, and professionals in the field. Our articles explore key topics in Applied Behavior Analysis (ABA) therapy, community events, success stories, and expert guidance."
   intro={[
     "Welcome to the Library at AIA, where we share valuable insights, strategies, and resources to support individuals with autism, their families, and professionals in the field. Our articles explore key topics in Applied Behavior Analysis (ABA) therapy, including teaching self-advocacy, proactive and reactive strategies, and innovative intervention techniques.",
@@ -15,7 +25,10 @@ const popular = posts.slice(0, 5);
   ]}
 >
   <div id="library-results-en" class="library-search-results" hidden></div>
-  <div id="library-archive-en" class="blog-list">{posts.map((post) => <BlogCard post={post} />)}</div>
+  <div id="library-archive-en" class="library-archive">
+    <div class="blog-list">{posts.map((post) => <BlogCard post={post} />)}</div>
+    <LibraryPagination locale="en" page={pagination} />
+  </div>
   <aside class="library-sidebar">
     <LibrarySearch locale="en" archiveId="library-archive-en" resultsId="library-results-en" />
     <h2>Popular Posts</h2>

www/src/components/pages/LibrarySpanish.astro

@@ -1,13 +1,25 @@
 ---
 import { getLibraryCatalog } from '../../utils/library';
+import { paginateLibraryItems } from '../../utils/library-pagination';
 import BlogIndexLayout from '../../layouts/BlogIndexLayout.astro';
 import BlogCard from '../BlogCard.astro';
 import LibrarySearch from '../LibrarySearch.astro';
-const posts = (await getLibraryCatalog()).byLocale.es.map(({ entry }) => entry);
-const popular = posts.slice(0, 5);
+import LibraryPagination from '../LibraryPagination.astro';
+interface Props { page?: number; }
+const { page = 1 } = Astro.props;
+const allPosts = (await getLibraryCatalog()).byLocale.es;
+const pagination = paginateLibraryItems(allPosts, page);
+if (!pagination) throw new Error(`Invalid Spanish Library page: ${page}`);
+const posts = pagination.items.map(({ entry }) => entry);
+const popular = allPosts.slice(0, 5).map(({ entry }) => entry);
+const heading = 'La Biblioteca en AZ Institute for Autism';
+const title = page === 1 ? heading : `${heading} | Página ${page}`;
 ---
-<BlogIndexLayout title="La Biblioteca en AZ Institute for Autism" description="Noticias sobre terapia ABA y educación especial, casos de estudio, recetas, editoriales y tutoriales para y sobre nuestros estudiantes con autismo." lang="es">
+<BlogIndexLayout title={title} heading={heading} description="Noticias sobre terapia ABA y educación especial, casos de estudio, recetas, editoriales y tutoriales para y sobre nuestros estudiantes con autismo." lang="es">
   <div id="library-results-es" class="library-search-results" hidden></div>
-  <div id="library-archive-es" class="blog-list">{posts.map((post) => <BlogCard post={post} prefix="/es" />)}</div>
+  <div id="library-archive-es" class="library-archive">
+    <div class="blog-list">{posts.map((post) => <BlogCard post={post} prefix="/es" />)}</div>
+    <LibraryPagination locale="es" page={pagination} />
+  </div>
   <aside class="library-sidebar"><LibrarySearch locale="es" archiveId="library-archive-es" resultsId="library-results-es" /><h2>Publicaciones populares</h2><ul>{popular.map((post) => <li><a href={`/es/library/${post.data.slug}`}>{post.data.title}</a></li>)}</ul></aside>
 </BlogIndexLayout>