API

This page documents the extension points available in Lumen for customizing and extending your documentation.

Starlight Integration

The starlight() configuration object accepts the following options:

interface StarlightConfig {
  /** Site title displayed in the header. */
  title: string;
  /** SEO description (optional). */
  description?: string;
  /** Custom logo. */
  logo?: {
    src: string;
    alt?: string;
    replacesTitle?: boolean;
  };
  /** Sidebar configuration. */
  sidebar?: SidebarGroup[];
  /** Social links displayed in the header. */
  social?: SocialLink[];
  /** Custom footer. */
  footer?: FooterConfig;
  /** Default theme. */
  defaultTheme?: 'light' | 'dark' | 'auto';
  /** Table of contents. */
  tableOfContents?: TableOfContentsConfig;
  /** Supported languages (i18n). */
  locales?: Record<string, LocaleConfig>;
  /** Custom CSS stylesheets. */
  customCss?: string[];
}

Built-in Components

Lumen exposes several reusable components for use in your MDX pages:

Card & CardGrid

import { Card, CardGrid } from '@astrojs/starlight/components';

<CardGrid stagger>
  <Card title="Title" icon="rocket">
    Card description.
  </Card>
  <Card title="Another title" icon="pencil">
    Another description.
  </Card>
</CardGrid>

Card Props:

Prop	Type	Description
title	string	Card title.
icon	string	Built-in icon name (optional).
href	string	Turns the card into a link.
variant	string	Alternative style ('minimal').

Tabs & TabItem

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
  <TabItem label="pnpm">pnpm add @astrojs/starlight</TabItem>
  <TabItem label="npm">npm install @astrojs/starlight</TabItem>
  <TabItem label="yarn">yarn add @astrojs/starlight</TabItem>
</Tabs>

Aside (callouts)

import { Aside } from '@astrojs/starlight/components';

<Aside type="caution">
  This operation is irreversible. Back up your data before continuing.
</Aside>

<Aside type="tip">Use the `Ctrl+K` shortcut to open search.</Aside>

Available types: note, tip, caution, danger.

Steps

import { Steps } from '@astrojs/starlight/components';

<Steps>
  1. Install dependencies with `pnpm install`. 2. Configure the
  `astro.config.mjs` file. 3. Start the server with `pnpm dev`.
</Steps>

Lifecycle Hooks

Lumen integrates with Astro’s hook system. The following hooks are particularly useful:

Hook	Description
astro:config:setup	Modify configuration before build.
astro:build:start	Run code before generation.
astro:build:done	Run code after generation.

Example usage in an integration:

export default {
  name: 'my-plugin',
  hooks: {
    'astro:config:setup': ({ injectRoute }) => {
      injectRoute({
        pattern: '/custom',
        entrypoint: './src/pages/custom.astro',
      });
    },
  },
};

---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.