Getting Started

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

   npm

   npm install starlight-fullview-mode

   pnpm

   pnpm add starlight-fullview-mode

   Yarn

   yarn add starlight-fullview-mode

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 starlightFullViewMode from 'starlight-fullview-mode'
   
   export default defineConfig({
     integrations: [
       starlight({
         plugins: [
           starlightFullViewMode({
              // Configuration options go here.
           })
          ],
         title: 'My Docs',
       }),
     ],
   })

Configuration

The plugin accepts the following configuration options:

leftSidebarEnabled

• Type: boolean
• Default: true
• Description: Controls whether the left sidebar can be toggled between collapsed and expanded states.

rightSidebarEnabled

• Type: boolean
• Default: true
• Description: Controls whether the right sidebar (table of contents) can be toggled between collapsed and expanded states.

Examples

Enable the left sidebar and disable the right sidebar:

starlightFullViewMode({
  leftSidebarEnabled: true,
  rightSidebarEnabled: false
})

Enable the right sidebar and disable the left sidebar:

starlightFullViewMode({
  leftSidebarEnabled: false,
  rightSidebarEnabled: true
})

Combine with other plugins:

pnpm add starlight-view-modes

TableofContents.astro

---
import StarlightFullviewModeTableOfContents from 'starlight-fullview-mode/overrides/TableOfContents.astro'
import StarlightViewModesTableOfContents from 'starlight-view-modes/components/TableOfContents.astro'
---

<StarlightFullviewModeTableOfContents><slot /></StarlightFullviewModeTableOfContents>
<StarlightViewModesTableOfContents />

astro.config.mjs

import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config';
import starlightFullViewMode from 'starlight-fullview-mode';
import starlightViewModes from 'starlight-view-modes';
...

export default defineConfig({
  ...
  integrations: [
    starlight({
      ...
     components: {
        TableOfContents: "./src/components/TableOfContents.astro",
      },
      plugins: [
        starlightViewModes(),
        starlightFullViewMode(),
        ...
      ]
      ...
    }),
  ]
})