Getting Started

Add a nice credit to Starlight or Astro at the bottom of Table of Contents.

Prerequisites

You will need to have a Starlight website set up. If you don’t have one yet, you can follow the “Getting Started” guide in the Starlight docs to create one.

Installation

1. starlight-cooler-credit is a Starlight plugin. Install it by running the following command in your terminal:

   npm

   npm install starlight-cooler-credit

   pnpm

   pnpm add starlight-cooler-credit

   Yarn

   yarn add starlight-cooler-credit

2. Configure the plugin in your Starlight configuration in the astro.config.mjs file.

   astro.config.mjs

   import starlight from '@astrojs/starlight'
   import { defineConfig } from 'astro/config'
   import starlightCoolerCredit from 'starlight-cooler-credit'
   
   export default defineConfig({
     integrations: [
       starlight({
         plugins: [starlightCoolerCredit()],
         title: 'My Docs',
       }),
     ],
   })

3. Start the development server to preview the plugin in action.

The Starlight Cooler Credit plugin behavior can be tweaked using various configuration options.

Component overrides

The Starlight Cooler Credit plugin uses Starlight component overrides for the following components:

• TableOfContents to add the CreditReferenceCard component at the bottom of the table of contents on large viewports.
• Pagination to add the CreditReferenceCard component below the pagination links on smaller viewports where the table of contents sidebar is not visible.

If you have a custom override for one of these components in your Starlight project, you will need to manually render the matching component from the Starlight Cooler Credit plugin in your custom component.

For example, for a custom TableOfContents override, render the plugin component after the default Starlight component:

src/components/overrides/TableOfContents.astro

---
import Default from '@astrojs/starlight/components/TableOfContents.astro'
import StarlightCoolerCreditTableOfContents from 'starlight-cooler-credit/components/TableOfContents.astro'
---

<Default><slot /></Default>
<p>Custom content in the TableOfContents override</p>
<StarlightCoolerCreditTableOfContents />