Frontmatter

By default, the Starlight TypeDoc plugin generates documentation pages which include a frontmatter with various fields already set like the title of the page.

Customize the frontmatter

Using the typedoc-plugin-frontmatter plugin, you can customize the frontmatter of the generated documentation pages using a custom TypeDoc plugin.

1. Install the typedoc-plugin-frontmatter plugin using your favorite package manager:

   npm

   npm i typedoc-plugin-frontmatter

   pnpm

   pnpm add typedoc-plugin-frontmatter

   yarn

   yarn add typedoc-plugin-frontmatter

   ni

   ni typedoc-plugin-frontmatter

2. Create a custom TypeDoc plugin to customize the frontmatter of the generated documentation pages.

   The following example customizes the frontmatter of the variables/something.md page to include a sidebar badge with the text “New”:

   src/plugins/frontmatter.js

   import { MarkdownPageEvent } from 'typedoc-plugin-markdown'
   
   /** @param {import('typedoc-plugin-markdown').MarkdownApplication} app */
   export function load(app) {
     app.renderer.on(
       MarkdownPageEvent.BEGIN,
       /** @param {MarkdownPageEvent} page */
       (page) => {
         // Customize the frontmatter for a specific page.
         if (page.model.url === 'variables/something.md') {
          // Update the frontmatter of the generated page.
           page.frontmatter = {
             // Include a sidebar badge with the text 'New'.
             sidebar: {
               badge: {
                 text: 'New',
               },
             },
             ...page.frontmatter,
           }
         }
       },
     )
   }

3. Edit the Starlight TypeDoc plugin configuration in your astro.config.mjs file to include the typedoc-plugin-frontmatter plugin and the custom one you created in the previous step using the typeDoc option:

   astro.config.mjs

   import starlight from '@astrojs/starlight'
   import { defineConfig } from 'astro/config'
   import starlightTypeDoc from 'starlight-typedoc'
   
   export default defineConfig({
     integrations: [
       starlight({
         plugins: [
           starlightTypeDoc({
             entryPoints: ['../path/to/entry-point.ts'],
             tsconfig: '../path/to/tsconfig.json',
             // Add plugins to customize the frontmatter.
             typeDoc: {
               plugin: [
                 'typedoc-plugin-frontmatter',
                 './src/plugins/frontmatter.js'
               ],
             },
           }),
         ],
         title: 'My Docs',
       }),
     ],
   })

To learn more about the typedoc-plugin-frontmatter plugin, check out the documentation.