Skip to content
My Docs
Blog

plugins

10 posts with the tag “plugins”

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',
            },
          },
        }),
      ],
    }),
  ],
});

Interactive Images with Starlight Image Zoom

My Name
Content Creator

Documentation often contains diagrams and screenshots that can be hard to read at standard size. starlight-image-zoom addresses this by adding zoom capabilities to your images.

Features

Section titled “Features”
  • Click to Zoom: Lightbox-style zooming for images.
  • Configurable: Adjust background opacity and buttons.
  • Zero Config: Works out of the box for most Markdown images.

Installation

Section titled “Installation”
Terminal window
npm install starlight-image-zoom

Then add it to your Starlight config:

import starlightImageZoom from 'starlight-image-zoom';


// ...
plugins: [
  starlightImageZoom(),
],

Now, clicking on images in your content will open them in a zoomable view!

Keeping Links Healthy with Starlight Links Validator

My Name
Content Creator

Broken links are the bane of good documentation. The starlight-links-validator plugin helps you catch them before your users do.

What it does

Section titled “What it does”

This plugin checks internal links in your Starlight project during the build process. It ensures:

  • Links verify against existing files.
  • Anchors (hashes) exist on the target page.

Setup

Section titled “Setup”
Terminal window
npm install starlight-links-validator

Add it to your configuration:

import starlightLinksValidator from 'starlight-links-validator';


// ...
plugins: [
  starlightLinksValidator(),
],

Now, when you run astro build, the plugin will report any dead internal links, helping you maintain a high-quality knowledge base.

Showcasing APIs with Starlight OpenAPI

My Name
Content Creator

For REST APIs, an OpenAPI (Swagger) specification is the gold standard. starlight-openapi allows you to render these specifications directly within your Starlight documentation site.

Features

Section titled “Features”
  • Schema Rendering: Beautifully formatted API endpoints and models.
  • Sidebar Integration: Adds API categories to your navigation.
  • Multiple Schemas: Support for documenting multiple APIs.

How to use

Section titled “How to use”
  1. Have your openapi.json or openapi.yaml ready.
  2. Install the plugin:
Terminal window
npm install starlight-openapi
  1. Configure it:
import starlightOpenAPI from 'starlight-openapi';


// ...
plugins: [
  starlightOpenAPI([
    {
      base: 'api',
      label: 'My API',
      schema: './src/openapi.yaml',
    },
  ]),
],

Your API documentation will now be accessible under /api!

Supercharge Starlight with Starlight Utils

My Name
Content Creator

starlight-utils is a Swiss Army knife collection of components and utilities to enhance your documentation pages with common UI patterns.

Included Components

Section titled “Included Components”

It bundles several useful components that you would otherwise have to build yourself:

  • Card Grids with Icons: Enhanced display options.
  • Link Cards: Better visual links to other pages.
  • Timeline: Visual representation of chronological events.
  • Code Group: Group related code blocks (e.g., for different package managers).

Getting Started

Section titled “Getting Started”
Terminal window
npm install @lorenzolewis/starlight-utils

Usage in MDX:

import { Timeline, TimelineItem } from '@lorenzolewis/starlight-utils';


<Timeline>
  <TimelineItem date="2024-01-01" title="Launched">
    We released version 1.0!
  </TimelineItem>
  <TimelineItem date="2024-02-01" title="Update">
    Added more features.
  </TimelineItem>
</Timeline>

It’s a great way to add visual variety to your docs without heavy custom development.

Visualizing Content with Starlight Site Graph

My Name
Content Creator

Ever wondered how your documentation pages connect to each other? starlight-site-graph generates an interactive graph of your site’s internal links.

What it shows

Section titled “What it shows”
  • Nodes: Each page is a node in the graph.
  • Edges: Internal links connect the nodes.
  • Clusters: See which topics are heavily cross-referenced.

Integration

Section titled “Integration”
Terminal window
npm install starlight-site-graph

Add it to your plugins list. It typically adds a new page or component where you can view the graph.

import starlightSiteGraph from 'starlight-site-graph';


// ...
plugins: [
  starlightSiteGraph(),
],

This is fantastic for identifying isolated pages (orphans) or visualizing the “knowledge web” of your documentation.