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 "@astrojs/starlight/components";
import { Icon as AstroIcon } from "astro-icon/components";
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>
  @layer starlight.core {
    .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>