Skip to content
Starlight Plugins Docs Components

Getting Started

Set of opinionated Starlight components used in trueberryless-org’s Starlight plugins documentations.

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. @trueberryless-org/starlight-plugins-docs-components is a Starlight plugin. Install it by running the following command in your terminal:

    Terminal window
    npm install @trueberryless-org/starlight-plugins-docs-components

  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 starlightPluginsDocsComponents from "@trueberryless-org/starlight-plugins-docs-components";
    

    export default defineConfig({
      integrations: [
        starlight({
          title: 'My Docs',
          plugins: [
            starlightPluginsDocsComponents({
              githubOwner: "trueberryless-org", // default
              pluginName: "starlight-plugins-docs-components",
              showcaseFilepath: "./docs/astro.config.ts", // default
              showcaseProps: {
                entries: [
                  {
                    thumbnail: "./src/assets/starlight-sidebar-topics-dropdown.png",
                    href: "https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown",
                    title: "Starlight Sidebar Topics Dropdown",
                    description:
                        "Split your docs page into multiple subpages and switch between them with a dropdown menu in the sidebar.",
                  },
                  {
                    thumbnail: "./src/assets/starlight-view-modes.png",
                    href: "https://github.com/trueberryless-org/starlight-view-modes",
                    title: "Starlight View Modes",
                    description:
                        "Add different view mode capabilities to your documentation website.",
                  },
                ],
              },
            }),
          ],
        }),
      ],
    })

  4. That’s it! The routes will be injected automatically and the sidebar will be generated. Start the development server to preview the plugin in action.

You can check out a list of all components under “Components”.