Skip to content
My Docs
Blog

ui

3 posts with the tag “ui”

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.

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!