<Pagination>

The <Pagination> component is an override of Starlight’s <Pagination>, which has been redefined to allow for better styling.

This code originally comes from HiDeoo’s Starlight Rapide Theme, the original source can be found here.

Usage

Overriding

If you want to extend the <Pagination> component for your own website, you can do so by creating your own override as seen below.

1. Create your own Pagination.astro component in the src/overrides directory (or src/components if you prefer).

   src/overrides/Pagination.astro

   ---
   import { Icon } from '@astrojs/starlight/components'
   
   const { dir, pagination } = Astro.locals.starlightRoute;
   const { prev, next } = pagination;
   const isRtl = dir === 'rtl'
   
   ---
   
   {/* CREDITS FOR CODE GO TO: @HiDeoo (original code: https://github.com/HiDeoo/starlight-theme-rapide/blob/main/packages/starlight-theme-rapide/overrides/Pagination.astro) */}
   {/* (STARLIGHT-THEME-OBSIDIAN): Redefine the style of the pagination elements */}
   
   {
     (prev || next) && (
       <div class="pagination-links" dir={dir}>
         {prev && (
           <a href={prev.href} rel="prev">
             <div>
               <Icon name={isRtl ? 'right-arrow' : 'left-arrow'} size="1.25rem" />
               {Astro.locals.t('page.previousLink')}
             </div>
             <p class="link-title">{prev.label}</p>
           </a>
         )}
         {next && (
           <a href={next.href} rel="next">
             <div>
               {Astro.locals.t('page.nextLink')}
               <Icon name={isRtl ? 'left-arrow' : 'right-arrow'} size="1.25rem" />
             </div>
             <p class="link-title">{next.label}</p>
           </a>
         )}
       </div>
     )
   }
   
   <style>
     @layer starlight.core {
       .pagination-links {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
         gap: 1rem;
       }
   
       a {
         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;
       }
       [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>

2. Add the override to your astro.config.mjs file.

   astro.config.mjs

   import starlight from '@astrojs/starlight';
   import { defineConfig } from 'astro/config';
   
   export default defineConfig({
     integrations: [
       starlight({
         title: 'My Docs',
         components: {
           // Override the theme's `Pagination` component.
           Pagination: './src/overrides/Pagination.astro'
         },
       }),
     ],
   })