x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<nav aria-label="Result pages" class="mt-6" data-pager-mode="numbered"> <ul class="flex flex-wrap items-center gap-1.5"> <li> <span class="inline-flex min-w-9 items-center justify-center rounded-md border px-2.5 py-1 text-sm transition-colors border-line bg-surface-sunk text-ink-muted cursor-not-allowed" aria-disabled="true"> Prev </span> </li> <li> <a href="/docs/google/run?page=1" class="inline-flex min-w-9 items-center justify-center rounded-md border px-2.5 py-1 text-sm transition-colors border-line bg-nav-active font-medium text-nav-active-ink" aria-current="page">1</a> </li> <li> <a href="/docs/google/run?page=2" class="inline-flex min-w-9 items-center justify-center rounded-md border px-2.5 py-1 text-sm transition-colors border-line bg-surface text-ink hover:bg-surface-subtle hover:border-line-strong" >2</a> </li> <li> <a href="/docs/google/run?page=3" class="inline-flex min-w-9 items-center justify-center rounded-md border px-2.5 py-1 text-sm transition-colors border-line bg-surface text-ink hover:bg-surface-subtle hover:border-line-strong" >3</a> </li> <li> <a href="/docs/google/run?page=2" class="inline-flex min-w-9 items-center justify-center rounded-md border px-2.5 py-1 text-sm transition-colors border-line bg-surface text-ink hover:bg-surface-subtle hover:border-line-strong"> Next </a> </li> </ul> <p class="mt-2 text-xs text-ink-muted">3 pages are recorded for this engine; the pager offers those and no others.</p></nav>1
2
3
4
5
6
render PagerComponent.new( api: api(engine), pages: (1..pages.to_i).to_a, current: current.to_i, href: ->(page) { "/docs/#{engine}/run?page=#{page}" })Pagination is a property of the engine, not of the screen, so the mode is
read off the catalog: google takes page and gets numbers, and
googleproductpage takes neither page nor a cursor and gets no pager at
all. Switching the engine here switches the mode without switching a flag.