Merge pull request #3 from pkgdiff-dev/fix/blog-pagination-window

fix(blog): show a window of page links instead of every page

Author: fleizean

src/frontend/src/app/features/blog/blog-list/blog-list.html

@@ -84,14 +84,32 @@ <h2 class="text-xl font-bold text-slate-900 dark:text-white mb-2">No articles ye
 
     @if (totalPages() > 1) {
     <nav class="mt-16 flex flex-wrap justify-center gap-2" aria-label="Blog pages">
-      @for (page of pages(); track page) {
-      <a [routerLink]="['/blog']" [queryParams]="page > 1 ? { page: page } : {}"
-        [attr.aria-current]="currentPage() === page ? 'page' : null"
-        [class]="currentPage() === page
+      @if (currentPage() > 1) {
+      <a [routerLink]="['/blog']" [queryParams]="currentPage() > 2 ? { page: currentPage() - 1 } : {}"
+        rel="prev" aria-label="Previous page"
+        class="bg-white dark:bg-transparent text-slate-700 dark:text-slate-300 border-gray-200 dark:border-[#1f1f1f] hover:bg-slate-50 dark:hover:bg-slate-900 border px-2 md:px-3 py-2 rounded transition-colors flex items-center">
+        <lucide-icon [img]="PrevIcon" class="w-4 h-4"></lucide-icon>
+      </a>
+      }
+      @for (link of pages(); track link.kind === 'page' ? link.page : link.key) {
+      @if (link.kind === 'page') {
+      <a [routerLink]="['/blog']" [queryParams]="link.page > 1 ? { page: link.page } : {}"
+        [attr.aria-current]="currentPage() === link.page ? 'page' : null"
+        [class]="currentPage() === link.page
           ? 'bg-slate-900 text-white dark:bg-white dark:text-slate-900 border-slate-900 dark:border-white'
           : 'bg-white dark:bg-transparent text-slate-700 dark:text-slate-300 border-gray-200 dark:border-[#1f1f1f] hover:bg-slate-50 dark:hover:bg-slate-900'"
         class="font-mono text-xs font-bold border px-3 md:px-4 py-2 rounded transition-colors uppercase tracking-widest">
-        {{ page }}
+        {{ link.page }}
+      </a>
+      } @else {
+      <span class="font-mono text-xs font-bold px-1 py-2 text-slate-400 dark:text-slate-600" aria-hidden="true">…</span>
+      }
+      }
+      @if (currentPage() < totalPages()) {
+      <a [routerLink]="['/blog']" [queryParams]="{ page: currentPage() + 1 }"
+        rel="next" aria-label="Next page"
+        class="bg-white dark:bg-transparent text-slate-700 dark:text-slate-300 border-gray-200 dark:border-[#1f1f1f] hover:bg-slate-50 dark:hover:bg-slate-900 border px-2 md:px-3 py-2 rounded transition-colors flex items-center">
+        <lucide-icon [img]="NextIcon" class="w-4 h-4"></lucide-icon>
       </a>
       }
     </nav>

src/frontend/src/app/features/blog/blog-list/blog-list.ts

@@ -3,7 +3,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DatePipe } from '@angular/common';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { Subject, catchError, distinctUntilChanged, map, of, startWith, switchMap, tap } from 'rxjs';
-import { LucideAngularModule, BookOpen, AlertCircle } from 'lucide-angular';
+import { LucideAngularModule, BookOpen, AlertCircle, ChevronLeft, ChevronRight } from 'lucide-angular';
 import { ApiService } from '../../../core/services/api';
 import { SeoService } from '../../../core/services/seo.service';
 import { BlogPostSnippet } from '../../../core/models/blog.models';
@@ -13,7 +13,24 @@ import { stripMarkdown } from '../../../core/utils/markdown.utils';
 type PageState = 'loading' | 'loaded' | 'error';
 type Loaded = { page: PaginatedResult<BlogPostSnippet> } | { failure: unknown };
 
+type PageLink = { kind: 'page'; page: number } | { kind: 'gap'; key: string };
+
 const PAGE_SIZE = 10;
+const SIBLINGS = 1;
+
+function pageWindow(current: number, total: number): PageLink[] {
+  let start = Math.max(2, current - SIBLINGS);
+  let end = Math.min(total - 1, current + SIBLINGS);
+  if (start === 3) start = 2;
+  if (end === total - 2) end = total - 1;
+
+  const links: PageLink[] = [{ kind: 'page', page: 1 }];
+  if (start > 2) links.push({ kind: 'gap', key: 'gap-start' });
+  for (let page = start; page <= end; page++) links.push({ kind: 'page', page });
+  if (end < total - 1) links.push({ kind: 'gap', key: 'gap-end' });
+  if (total > 1) links.push({ kind: 'page', page: total });
+  return links;
+}
 
 @Component({
   selector: 'app-blog-list',
@@ -29,14 +46,16 @@ export class BlogListComponent {
 
   readonly BookOpenIcon = BookOpen;
   readonly AlertIcon = AlertCircle;
+  readonly PrevIcon = ChevronLeft;
+  readonly NextIcon = ChevronRight;
   readonly skeletonRows = [1, 2, 3];
   readonly stripMarkdown = stripMarkdown;
 
   posts = signal<BlogPostSnippet[]>([]);
   state = signal<PageState>('loading');
   currentPage = signal(1);
   totalPages = signal(0);
-  pages = computed(() => Array.from({ length: this.totalPages() }, (_, index) => index + 1));
+  pages = computed(() => pageWindow(this.currentPage(), this.totalPages()));
 
   private reload$ = new Subject<void>();