Skip to content
Starlight Site Graph

<PageGraph>

The <PageGraph> component extends the <Graph> component, and handles whether the graph should be displayed on this page, automatically sets the slug prop of the <Graph> component to the current page’s slug, and the passed frontmatter properties.

Import

import { PageGraph } from 'starlight-site-graph/components';

Usage

Display the graph component corresponding to the current page.

<PageGraph>
  <span slot="title">Fancy Graph Title</span>
</PageGraph>
Preview
Fancy Graph Title

Visibility

The visibility of the <PageGraph> component is determined, in order of precedence, by the following:

  1. This component’s showGraph prop
  2. The page’s visible frontmatter property
  3. The graphConfig’s visibilityRules configuration

<PageGraph> Props

The <PageGraph> component accepts the following props:

slug

type: string (optional)

Determines the slug of the current page. If not provided, the slug will be determined by the current page’s URL. When passing {...Astro.props} to this component, this is already set for you.

config

type: GraphConfig

The configuration object for the graph, for information on what can be passed, check out the configuration documentation.
This overrides any configuration applied via the plugin settings or frontmatter.

entry

type: { data: PageSiteGraphFrontmatter } (optional)

The frontmatter properties related to the current page, for more information of what properties can be passed via this object, check out the frontmatter config. When passing {...Astro.props} to this component, this might already be set for you.

class

type: string (optional)

Additional classes to apply to the component.

showGraph

type: boolean (optional)

Determines whether the graph should be displayed on this page. Will override both the page’s visible frontmatter property and the graphConfig’s visibilityRules configuration.

<PageGraph> Slots

title

The title of the graph, displayed at the top of the graph component.