Getting Started

This plugin provides the Giscus comment block for your documentation site.

Prerequisites

You will need to have a Starlight website set up. If you haven’t created one yet, you can refer to the Getting Started guide in the Starlight documentation to set it up.

Installation

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

   npm

   npm i starlight-giscus

   pnpm

   pnpm add starlight-giscus

   yarn

   yarn add starlight-giscus

2. Configure the Giscus app here.

3. 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 starlightGiscus from 'starlight-giscus'
   
   export default defineConfig({
     integrations: [
       starlight({
        plugins: [
          starlightGiscus({
              repo: 'username/github_repo_name',
              repoId: 'repository_id_from_giscus',
              category: 'category_name_from_github_discussions',
              categoryId: 'category_id_from_giscus'
          })
        ],
         title: 'My Docs',
       }),
     ],
   })

4. (Optional) If you’re already overriding or want to override the default Pagination component, add Comments.astro to your code:

   CustomPagination.astro

   ---
   import Comments from 'starlight-giscus/components/Comments.astro';
   import OriginalPagination from '@astrojs/starlight/components/Pagination.astro';
   ---
   
   <Comments />
   
   Provide your version of the pagination code
   
   or use default component: <OriginalPagination />

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