Pagination

Ion’s Pagination override doesn’t remove or change anything, it adds a Footer below the pagination buttons. This is useful for adding additional information or links. For more information, check out the configuration guide.

Pagination.astro

---
import Icon from 'starlight-ion-theme/components/user-components/Icon.astro';
import { Icon as AstroIcon } from 'astro-icon/components';
import type { Props } from '@astrojs/starlight/props';
import { footer } from 'ion:globals';

const { dir, pagination } = Astro.locals.starlightRoute;
const { prev, next } = pagination;
const isRtl = dir === 'rtl';

// @ts-ignore
const prevLink = Astro.locals.t("page.previousLink");
// @ts-ignore
const nextLink = Astro.locals.t("page.nextLink");
---

<div class="pagination-links" dir={dir}>
  {
    prev && (
      <a class="pagination" href={prev.href} rel="prev">
        <Icon name={isRtl ? 'right-arrow' : 'left-arrow'} size="1.5rem" />
        <span>
          {prevLink}
          <br />
          <span class="link-title">{prev.label}</span>
        </span>
      </a>
    )
  }
  {
    next && (
      <a class="pagination" href={next.href} rel="next">
        <Icon name={isRtl ? 'left-arrow' : 'right-arrow'} size="1.5rem" />
        <span>
          {nextLink}
          <br />
          <span class="link-title">{next.label}</span>
        </span>
      </a>
    )
  }
</div>

{footer && (
  <div class="page-footer">
    <div class="footer-links">
      <span>{footer.text}</span>
      {footer.links && (<span>—</span>)}
      {footer.links && footer.links.map((link) => (
        <a href={link.href} target={link.newTab ? '_blank' : '_self'}>{link.text}</a>
      ))}
    </div>
    <div class="social-footer-icons">
      {footer.icons?.map((icon) => (
        <a href={icon.href} aria-label={icon.name} target={icon.newTab ? '_blank' : '_self'}><AstroIcon name={icon.name as any} size='1.25rem' /></a>
      ))}
    </div>
  </div>
)}

<style>
  .pagination-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: 1rem;
    padding: 1.5rem var(--sl-content-pad-x);
  }

  .pagination-links:not(:has(a)) {
    padding: 0;
  }

  a.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    flex-basis: calc(50% - 0.5rem);
    flex-grow: 1;
    border: 1px solid var(--sl-color-gray-5);
    border-radius: 0.5rem;
    padding: 1rem;
    text-decoration: none;
    color: var(--sl-color-gray-2);
    box-shadow: var(--sl-shadow-md);
    overflow-wrap: anywhere;
    transition: all 0.1s ease;
  }

  a {
    text-decoration: none;
  }

  .footer-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .social-footer-icons a {
    display: inline-block !important;
    height: var(--sl-icon-size);
  }

  [rel='next'] {
    justify-content: end;
    text-align: end;
    flex-direction: row-reverse;
  }
  a:hover {
    border-color: var(--sl-color-gray-2);
  }

  .link-title {
    color: var(--sl-color-white);
    font-size: var(--sl-text-2xl);
    line-height: var(--sl-line-height-headings);
  }

  svg {
    flex-shrink: 0;
  }
</style>