Skip to content
My Docs
Blog

Blog

Auto-generated API Docs with Starlight TypeDoc

My Name
Content Creator

If you maintain a TypeScript project, keeping API documentation in sync with code is challenging. starlight-typedoc seamlessly integrates TypeDoc generated documentation into your Starlight sidebar.

Why use it?

Section titled “Why use it?”
  • Automation: Generates markdown notes from your TypeScript source.
  • Integration: Pages appear natively in your Starlight structure.
  • Type Safety: Documentation that accurately reflects your types.

Configuration

Section titled “Configuration”

It requires typedoc and the plugin:

Terminal window
npm install typedoc starlight-typedoc
import starlightTypeDoc from 'starlight-typedoc';


// ...
plugins: [
  starlightTypeDoc({
    entryPoints: ['./src/index.ts'],
    tsconfig: './tsconfig.json',
  }),
],

This will automatically create a new section in your documentation for your API reference!

Better Navigation with Starlight Sidebar Topics

My Name
Content Creator

As your documentation grows, the sidebar can become cluttered. starlight-sidebar-topics allows you to organize your sidebar items into distinct sections with icons, improving discoverability.

Key Benefits

Section titled “Key Benefits”
  • Section Headers: Group links under clear headers (e.g., “Concepts”, “Guides”, “API”).
  • Icons: Add visual cues to your sidebar sections.
  • Collapsible: Helps keep the navigation clean.

Setup

Section titled “Setup”
Terminal window
npm install starlight-sidebar-topics

In your configuration:

import starlightSidebarTopics from 'starlight-sidebar-topics';


// ...
plugins: [
  starlightSidebarTopics([
    {
      label: 'Getting Started',
      icon: 'rocket',
      items: ['intro', 'installation'],
    },
    {
      label: 'Core Concepts',
      icon: 'open-book',
      items: ['concepts/architecture', 'concepts/data-flow'],
    },
  ]),
],

This plugin completely transforms how users navigate your site structure.

Customizing Content Overviews in Starlight

My Name
Content Creator

The Table of Contents (TOC) is vital for long pages. starlight-toc-overview-customizer (or similar TOC plugins) gives you more control over how this navigation element appears.

Customization Options

Section titled “Customization Options”

While Starlight’s built-in TOC is great, plugins in this space often allow:

  • Depth Control: Changing how many heading levels are shown.
  • Styling: Custom highlight colors or markers for the active section.
  • Placement: Moving the TOC to the left or keeping it floating.

Implementation

Section titled “Implementation”

Note: Always check the latest community plugins list as TOC customization is a rapidly evolving area.

Typically, you install the package and add it to your plugins array.

// pseudo-code for a generic TOC plugin
import starlightTOC from 'starlight-toc-plugin';


plugins: [
  starlightTOC({
    minHeadingLevel: 2,
    maxHeadingLevel: 4,
  }),
]

Refining your TOC improves readability and helps users jump to the exact information they need.

Easy Icons with Starlight Plugin Icons

My Name
Content Creator

Icons add character and visual cues to your text. starlight-plugin-icons (or simply using astro-icon with Starlight) makes it effortless to include icons from popular sets like FontAwesome, Material Design, and more.

Why use an icon plugin?

Section titled “Why use an icon plugin?”
  • Zero SVG Clutter: Don’t paste raw SVG code into your markdown.
  • Huge Library: Access thousands of icons via Iconify.
  • Component Component: Use a simple <Icon name="..." /> syntax.

Usage

Section titled “Usage”

If using a dedicated Starlight wrapper or just astro-icon:

Terminal window
npm install astro-icon

In your MDX file:

import { Icon } from 'astro-icon/components';


Check out this cool star: <Icon name="mdi:star" />

This keeps your source code clean while making your rendered pages look professional and polished.

Enhancing Starlight with a Blog

My Name
Content Creator

Starlight is excellent for documentation, but sometimes you need a blog to go with it. starlight-blog is a community plugin that adds a full-featured blog to your Starlight site.

Key Features

Section titled “Key Features”
  • Blog Index: Automatically generates a paginated list of blog posts.
  • Recent Posts: Show recent posts in the sidebar.
  • Tags & Authors: Organize content by tags and credit authors.
  • RSS Feed: Automatic RSS feed generation.

Usage

Section titled “Usage”

Once installed and configured in astro.config.mjs, you simply create markdown or MDX files in your content directory (e.g., src/content/docs/blog/).

astro.config.mjs
import starlightBlog from 'starlight-blog';


export default defineConfig({
  integrations: [
    starlight({
      plugins: [
        starlightBlog({
          title: 'My Awesome Blog',
          authors: {
            me: {
              name: 'Me',
              title: 'Editor',
            },
          },
        }),
      ],
    }),
  ],
});