Getting Started

Show the latest released version of your package in your Starlight documentation.

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-latest-version is a Starlight plugin. Install it by running the following command in your terminal:

   npm

   npm install starlight-latest-version

   pnpm

   pnpm add starlight-latest-version

   Yarn

   yarn add starlight-latest-version

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 starlightLatestVersion from 'starlight-latest-version'
   
   export default defineConfig({
     integrations: [
       starlight({
         plugins: [starlightLatestVersion({
           source: {
             slug: "starlight-latest-version",
           },
         })],
         title: 'My Docs',
       }),
     ],
   })

3. You can now use the plugin components in your Astro components or set the showInSiteTitle option to display the latest version in the site title.

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

The Starlight Latest Version plugin behavior can be tweaked using various configuration options.

Component overrides

The Starlight Latest Version plugin uses a Starlight component override for the SiteTitle component to add the VersionBadge to the site title.

If you have a custom SiteTitle component override in your Starlight project, you will need to manually render the DynamicVersionBadge component from the Starlight Latest Version plugin in your custom component:

src/components/overrides/SiteTitle.astro

---
import Default from '@astrojs/starlight/components/SiteTitle.astro'
import DynamicVersionBadge from 'starlight-latest-version/components/DynamicVersionBadge.astro'
---

<Default><slot /></Default>
<p>Custom content in the SiteTitle override</p>
<DynamicVersionBadge />