Pagy v9 to Pagy v43 with TailwindCss

[loust333]

Hello,

Thanks first of all for your work. The pagy v43 looks great ! 🥳

Here is the current config that we have in our project:

Rails: v7 (Rails v8 coming soon)
Ruby: v3.4.7
CSS Framework: TailwindCss v3
Javascript: Esbuild + StimulusJS

For the pagination, we did the following. An application helper method to display the pagination with our style:

module ApplicationHelper
  include Pagy::Frontend

  def pagy_nav(pagy, id: nil, aria_label: nil, **vars)
    return "" if pagy.pages == 1
    
    id = %( id="#{id}") if id
    a  = pagy_anchor(pagy)

    html = %(<nav#{id} class="pagy nav flex items-center justify-between border-t border-gray-200 px-4 sm:px-0" #{nav_aria_label(pagy, aria_label:)}>#{
      prev_a(pagy, a)}<div class="hidden md:-mt-px md:flex">)
    pagy.series(**vars).each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
      html << case item
              when Integer
                %(<a href="#{pagy_url_for(pagy, item)}" role="link" aria-disabled="true" aria-current="page" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">#{pagy.label_for(item)}</a>)
              when String
                %(<a role="link" aria-disabled="true" aria-current="page" class="current inline-flex items-center border-t-2 border-primary-500 px-4 pt-4 text-sm font-medium text-primary-600">#{pagy.label_for(item)}</a>)
              when :gap
                %(<span class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500">...</span>)
              else
                raise InternalError, "expected item types in series to be Integer, String or :gap; got #{item.inspect}"
              end
    end
    html << %(</div>#{next_a(pagy, a)}</nav>)
  end

  def prev_a(pagy, a, text: t("views.pagination.previous"), aria_label: pagy_t("pagy.aria_label.prev"))
    if (p_prev = pagy.prev)
      %(<div class="-mt-px flex w-0 flex-1"><a href="#{pagy_url_for(pagy, p_prev)}" role="link" aria-disabled="true" aria-label="#{aria_label}" class="inline-flex items-center border-t-2 border-transparent pr-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700"><svg class="mr-3 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a.75.75 0 01-.75.75H4.66l2.1 1.95a.75.75 0 11-1.02 1.1l-3.5-3.25a.75.75 0 010-1.1l3.5-3.25a.75.75 0 111.02 1.1l-2.1 1.95h12.59A.75.75 0 0118 10z" clip-rule="evenodd" /></svg>#{text}</a></div>)
    else
      %(<div class="-mt-px flex w-0 flex-1"></div>)
    end
  end

  def next_a(pagy, a, text: t("views.pagination.next"), aria_label: pagy_t("pagy.aria_label.next"))
    if (p_next = pagy.next)
      %(<div class="-mt-px flex w-0 flex-1 justify-end"><a href="#{pagy_url_for(pagy, p_next)}" role="link" aria-disabled="true" aria-label=#{aria_label} class="inline-flex items-center border-t-2 border-transparent pl-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">#{text}<svg class="ml-3 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd" /></svg></a></div>)
    else
      %(<div class="-mt-px flex w-0 flex-1 justify-end"></div>)
    end
  end
end

I'm interested in upgrading, and I tried, but it just did not work as expected.

The setup was fine, no worries. The last part was the most complicated.

I followed the article: https://ddnexus.github.io/pagy/guides/how-to/#using-your-pagination-templates

But I get errors like "undefined method a_lambda for Pagy::Offet

Here are my questions:

1. How do you recommend doing the configuration with TailwindCss ?
2. I'm a missing something, following the article "pagination-templates" ?
3. Is there another way to do the same template without using the pagination-templates to improve performance ?

Let me know if you need more infos 🙂

Best regards,

Lourenço Steve

[ddnexus]

@loust333 unless you really need very different nav helpers, v43 allows you to customize the look interactively. See https://ddnexus.github.io/pagy/resources/stylesheets/

[loust333]

It's a shame if it does not work, but I suppose I can try to figure out a way to have +/- the same display with Pagy v43.

Thanks ! :)

[Cosmo]

@loust333 were you able to fix the a_lambda issue?

[ddnexus]

Added docs note in 6db21f1

[loust333]

@ddnexus, @Cosmo thanks for the support!

I was wondering if there’s a way to measure the performance difference between using a custom template and the recommended series_nav method?

Also, would it be possible to wrap the page numbers in a

tag directly from series_nav? That way, I wouldn’t need a custom template partial anymore. I could just use with tailwindcss classes:

<%== @pagy.series_nav %>

[ddnexus]

was wondering if there’s a way to measure the performance difference between using a custom template and the recommended series_nav method?

Slower for sure, and not memory friendly: instead of a few lines of pure optimized ruby your output go through a generic template framework... which is relevant for high traffic apps, while probably negligible otherwise, (or if you just don't care).

to wrap the page numbers in a tag directly from series_nav? That way, I wouldn’t need a custom template partial anymore. I could just use with tailwindcss classes

No idea about what you mean with wrapping the page numbers!

Helpers are there exactly for being fast and fully supported, while templates are there just to give users a quick way to customize the structure or the HTML for really special requirements, and not so important apps (or quick drafts).

[loust333]

What I meant is for example modifying the following helper method:

pagy/gem/lib/pagy/toolbox/helpers/series_nav.rb

Line 7 in d3aea27

def series_nav(style = nil, **)

to include a wrapping

tag (as mentioned in the initial post).
That would allow adding a container with Tailwind CSS classes directly, without needing a separate custom template.

[ddnexus]

I still don't get it. You didn't post an image of your output.

BTW, did you even try the PagyWand?

Anyway you can totally change the look of anything with selectors and tailwind @apply. Why would you have to override a helper or even use a template?

[pbstriker38]

If you're just trying to change the look of the previous and next arrows then 1 way we have figured out how to do it is by overriding the I18n yml pagy.previous and pagy.next

en:
  pagy:
    p11n: 'OneOther'
    aria_label:
      nav:
        one: "Page"
        other: "Pages"
      previous: "Previous"
      next: "Next"
    previous: <svg class="pointer-events-none text-gray-400 h-5 w-5" viewBox="0 0 24 24" data-icon="chevron_left" fill="none" role="img"> <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /> </svg>
    next: <svg class="pointer-events-none text-gray-400 h-5 w-5" viewBox="0 0 24 24" data-icon="chevron_right" fill="none" role="img"> <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /> </svg>
    gap: "&hellip;"
    item_name:
      one: "item"
      other: "items"
    info_tag:
      no_count: "Page %{page} of %{pages}"
      no_items: "No %{item_name} found"
      single_page: "Displaying %{count} %{item_name}"
      multiple_pages: "Displaying %{item_name} %{from}-%{to} of %{count} in total"
    input_nav_js: "Page %{page_input} of %{pages}"
    limit_tag_js: "Show %{limit_input} %{item_name} per page"

If there is a better way to do this then I would love to know it.

[ddnexus]

That's changing the link text, not just its look/style, and it's the quick way to do it IMO.

The only fragility is that it's decoupled by the actual CSS, so, should you change one, you should coordinate it with the other.

Another way that you can try is using the specific selectors .pagy a:first-child and .pagy a:last-child, and @apply to them.

[pbstriker38]

True. Those CSS classes could be moved out to our CSS that targets pagy

[ddnexus]

I don't know how fundamental is replacing the texts with an SVG for you, but if using the text is not ok, you could just set the texts to an empty string in the dictionary, or better don't override the dictionary and use color: transparent and apply the bg-[url('...')] to the link selectors.