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 a Starlight component override for the TableOfContents component to add the CreditReferenceCard component to the bottom of the Table of Contents.

If you have a custom TableOfContents component override in your Starlight project, you will need to manually render the TableOfContents component from the Starlight Cooler Credit plugin in your custom 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 />