Components

Here you can find a list of all the components which are exported by the @trueberryless-org/starlight-plugins-docs-components package. These components are automatically used in the three injected routes /resources/sites, /resources/plugins and /resources/hiddeoo but you can also use them manually.

ResourcesIntro

The ResourcesIntro component is used to introduce the resources section. It centralizes the management of the introduction content, so it only needs to be changed in one place.

import ResourcesIntro from "@trueberryless-org/starlight-plugins-docs-components/components/ResourcesIntro.astro";

<ResourcesIntro />;

Preview

Plugins can customize Starlight configuration, UI, and behavior. Check out the Starlight Plugins and Integrations showcase for a list of available plugins.

You can find all the Starlight plugins, components and themes we developed in the list below.

Resources

The Resources component is used to display all resources of a specific type. The type property is one of the keys of the raw JSON data.

import Resources from "@trueberryless-org/starlight-plugins-docs-components/components/Resources.astro";

<Resources type="plugins" />;

Preview

starlight-view-modes Add view mode capabilities to your documentation website.

starlight-cooler-credit Add a nice credit to Starlight or Astro at the bottom of Table of Contents.

starlight-spell-checker Check your documentation for spelling mistakes; multilingual support.

starlight-toc-overview-customizer Enhance Starlight's table of contents with customizable overview title

starlight-plugin-show-latest-version Show the latest released version of your package in your documentation.

ResourcesList

The ResourcesList component is used to display all resources of all types with the keys as headings. It can be useful when you want to display all resources in a list but you don’t want to list all the types manually.

import ResourcesList from "@trueberryless-org/starlight-plugins-docs-components/components/ResourcesList.astro";

<ResourcesList />;

Preview

Plugins

starlight-view-modes Add view mode capabilities to your documentation website.

starlight-cooler-credit Add a nice credit to Starlight or Astro at the bottom of Table of Contents.

starlight-spell-checker Check your documentation for spelling mistakes; multilingual support.

starlight-toc-overview-customizer Enhance Starlight's table of contents with customizable overview title

starlight-plugin-show-latest-version Show the latest released version of your package in your documentation.

Components

starlight-sidebar-topics-dropdown Dropdown topic list for the Starlight Sidebar Topics plugin.

starlight-contributor-list Display a list of all contributors to your project.

starlight-save-file-component Quickly display a link to some download asset on your Starlight site.

Themes

starlight-nextjs-theme Starlight theme inspired by the NextJS docs.

ShowcaseIntro

The ShowcaseIntro component is used to introduce the showcase section. It centralizes the management of the introduction content, so it only needs to be changed in one place. Each introduction of the showcase page has its own “Call to action” text and href property, which is used to link to the source code of the showcase page.

import ShowcaseIntro from "@trueberryless-org/starlight-plugins-docs-components/components/ShowcaseIntro.astro";

<ShowcaseIntro
    cta="Have you built a website using YOUR_PLUGIN?"
    href="https://github.com/trueberryless-org/YOUR_PLUGIN/edit/main/docs/src/content/docs/showcase/sites.mdx"
/>;

Preview

Showcase

The Showcase component is used to display a list of showcase entries. These entries have to be listed manually in the entries property via JSON syntax.

import Showcase from "@trueberryless-org/starlight-plugins-docs-components/components/Showcase.astro";

<Showcase
    entries={[
        {
            thumbnail: import("../../assets/starlight-sidebar-topics-dropdown.png"),
            href: "https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown",
            title: "starlight-sidebar-topics-dropdown",
        },
        {
            thumbnail: import("../../assets/starlight-view-modes.png"),
            href: "https://github.com/trueberryless-org/starlight-view-modes",
            title: "starlight-view-modes",
        },
    ]}
/>;

Raw JSON Data

Here is the raw JSON data for all the components listed above. It’s stored in a GitHub Gist, so that every plugin can use it. You can find the Gist here.

{
  "plugins": [
    {
      "name": "starlight-view-modes",
      "description": "Add view mode capabilities to your documentation website."
    },
    {
      "name": "starlight-cooler-credit",
      "description": "Add a nice credit to Starlight or Astro at the bottom of Table of Contents."
    },
    {
      "name": "starlight-spell-checker",
      "description": "Check your documentation for spelling mistakes; multilingual support."
    },
    {
      "name": "starlight-toc-overview-customizer",
      "description": "Enhance Starlight's table of contents with customizable overview title"
    },
    {
      "name": "starlight-plugin-show-latest-version",
      "description": "Show the latest released version of your package in your documentation."
    }
  ],
  "components": [
    {
      "name": "starlight-sidebar-topics-dropdown",
      "description": "Dropdown topic list for the Starlight Sidebar Topics plugin."
    },
    {
      "name": "starlight-contributor-list",
      "description": "Display a list of all contributors to your project."
    },
    {
      "name": "starlight-save-file-component",
      "description": "Quickly display a link to some download asset on your Starlight site."
    }
  ],
  "themes": [
    {
      "name": "starlight-nextjs-theme",
      "description": "Starlight theme inspired by the NextJS docs."
    }
  ]
}