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.
-
Install the
typedoc-plugin-frontmatter
plugin using your favorite package manager:Terminal window npm i typedoc-plugin-frontmatterTerminal window pnpm add typedoc-plugin-frontmatterTerminal window yarn add typedoc-plugin-frontmatterTerminal window ni typedoc-plugin-frontmatter -
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 sidebarbadge
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,}}},)} -
Edit the Starlight TypeDoc plugin configuration in your
astro.config.mjs
file to include thetypedoc-plugin-frontmatter
plugin and the custom one you created in the previous step using thetypeDoc
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.