Starlight Site Graph

https://fevol.github.io/starlight-site-graph
Admin
A Starlight plugin that seamlessly adds a customizable graph to your site, visualizing page links...
Tokens:85,860
Snippets:619
Trust Score:9.7
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Starlight Site Graph with bun

Source: https://fevol.github.io/starlight-site-graph/getting-started

Install the package using bun. This is the first step for both Starlight and Astro installations.

```bash
bun add starlight-site-graph
```

--------------------------------

### Sitemap Configuration Example

Source: https://fevol.github.io/starlight-site-graph/configuration/sitemap/general

A detailed example of a sitemap configuration, including node styles and backlinks.

```json
{
  "/node/": {
    "links": [
      "/custom-node/",
      "/external/"
    ],
    "tags": ["Tag"],
    "title": "Node",
    "exists": true
  },
  "/custom-node/": {
    "nodeStyle": {
      "shapeColor": "nodeColor3"
    },
    "title": "Custom Node",
    "exists": true,
    "backlinks": ["/node/"]
  },
  "/external/": {
    "external": true,
    "title": "External",
    "exists": true,
    "backlinks": ["/node/"]
  }
}
```

--------------------------------

### Graph Configuration Example

Source: https://fevol.github.io/starlight-site-graph/configuration/frontmatter/graph

This snippet shows a comprehensive example of graph configuration options, including various styling and behavior settings.

```json
{
  "graphConfig": {
    "actions": [],
    "tagStyles": {},
    "tagRenderMode": "none",
    "enableDrag": false,
    "enableZoom": false,
    "enablePan": false,
    "enableHover": true,
    "enableClick": "disable",
    "depth": 1,
    "depthDirection": "both",
    "followLink": "same",
    "scale": 3,
    "minZoom": 0.05,
    "maxZoom": 4,
    "renderLabels": false,
    "renderArrows": true,
    "renderUnresolved": false,
    "renderExternal": true,
    "scaleLinks": true,
    "scaleArrows": true,
    "minZoomArrows": 0.8,
    "labelOpacityScale": 1.3,
    "labelMutedOpacity": 0,
    "labelHoverOpacity": 1,
    "labelAdjacentOpacity": 1,
    "labelFontSize": 12,
    "labelHoverScale": 1,
    "labelOffset": 10,
    "labelHoverOffset": 14,
    "zoomDuration": 75,
    "zoomEase": "out_quad",
    "hoverDuration": 200,
    "hoverEase": "out_quad",
    "nodeDefaultStyle": {
      "shape": "circle",
      "shapeColor": "nodeColor",
      "shapeSize": 10,
      "strokeWidth": 0,
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.5
    },
    "nodeVisitedStyle": {
      "shapeColor": "nodeColorVisited"
    },
    "nodeCurrentStyle": {
      "shapeColor": "nodeColor"
    },
    "nodeUnresolvedStyle": {
      "shapeColor": "nodeColorUnresolved"
    },
    "nodeExternalStyle": {
      "shape": "square",
      "shapeColor": "nodeColorExternal",
      "strokeColor": "inherit",
      "nodeScale": 0.6
    },
    "tagDefaultStyle": {
      "shape": "circle",
      "shapeSize": 6,
      "shapeColor": "backgroundColor",
      "strokeColor": "nodeColorTag",
      "strokeWidth": 1,
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.7
    },
    "linkWidth": 1,
    "linkHoverWidth": 1,
    "arrowSize": 5,
    "arrowAngle": 0.5235987755982988,
    "centerForce": 0.001,
    "colliderPadding": 20,
    "repelForce": 200,
    "linkDistance": 0,
    "alphaDecay": 0.0228,
    "visibilityRules": ["**/*"],
    "prefetchPages": false
  },
  "sitemapConfig": {},
  "backlinksConfig": {}
}

```

--------------------------------

### Install Starlight Site Graph with pnpm

Source: https://fevol.github.io/starlight-site-graph/getting-started

Install the package using pnpm. This is the first step for both Starlight and Astro installations.

```bash
pnpm add starlight-site-graph
```

--------------------------------

### Install Starlight Site Graph with yarn

Source: https://fevol.github.io/starlight-site-graph/getting-started

Install the package using yarn. This is the first step for both Starlight and Astro installations.

```bash
yarn add starlight-site-graph
```

--------------------------------

### Install Starlight Site Graph with npm

Source: https://fevol.github.io/starlight-site-graph/getting-started

Install the package using npm. This is the first step for both Starlight and Astro installations.

```bash
npm i starlight-site-graph
```

--------------------------------

### Example Node Data

Source: https://fevol.github.io/starlight-site-graph/configuration/graph/general

An example of how node data might be structured, showing titles and existence for various paths.

```json
{
  "/1/": {
    "title": "/1/",
    "exists": true
  },
  "/2/": {
    "title": "/2/",
    "exists": true
  },
  "/a/1/": {
    "title": "/a/1/",
    "exists": true
  },
  "/a/x/1/": {
    "title": "/a/x/1/",
    "exists": true
  },
  "/a/x/2/": {
    "title": "/a/x/2/",
    "exists": true
  },
  "/a/y/1/": {
    "title": "/a/y/1/",
    "exists": true
  }
}
```

--------------------------------

### Full Graph Configuration Example

Source: https://fevol.github.io/starlight-site-graph/configuration/graph/interaction

A comprehensive configuration object for the graph, including interaction settings, rendering options, and styling.

```json
{
  "graphConfig": {
    "actions": [],
    "tagStyles": {},
    "tagRenderMode": "none",
    "enableDrag": false,
    "enableZoom": false,
    "enablePan": false,
    "enableHover": true,
    "enableClick": "auto",
    "depth": 1,
    "depthDirection": "both",
    "followLink": "graph",
    "scale": 1.1,
    "minZoom": 0.05,
    "maxZoom": 4,
    "renderLabels": true,
    "renderArrows": true,
    "renderUnresolved": false,
    "renderExternal": true,
    "scaleLinks": true,
    "scaleArrows": true,
    "minZoomArrows": 0.8,
    "labelOpacityScale": 1.3,
    "labelMutedOpacity": 0,
    "labelHoverOpacity": 1,
    "labelAdjacentOpacity": 1,
    "labelFontSize": 12,
    "labelHoverScale": 1,
    "labelOffset": 10,
    "labelHoverOffset": 14,
    "zoomDuration": 75,
    "zoomEase": "out_quad",
    "hoverDuration": 200,
    "hoverEase": "out_quad",
    "nodeDefaultStyle": {
      "shape": "circle",
      "shapeColor": "nodeColor",
      "shapeSize": 10,
      "strokeWidth": 0,
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.5
    },
    "nodeVisitedStyle": {
      "shapeColor": "nodeColorVisited"
    },
    "nodeCurrentStyle": {
      "shapeColor": "nodeColorCurrent"
    },
    "nodeUnresolvedStyle": {
      "shapeColor": "nodeColorUnresolved"
    },
    "nodeExternalStyle": {
      "shape": "square",
      "shapeColor": "nodeColorExternal",
      "strokeColor": "inherit",
      "nodeScale": 0.6
    },
    "tagDefaultStyle": {
      "shape": "circle",
      "shapeSize": 6,
      "shapeColor": "backgroundColor",
      "strokeColor": "nodeColorTag",
      "strokeWidth": 1,
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.7
    },
    "linkWidth": 1,
    "linkHoverWidth": 1,
    "arrowSize": 5,
    "arrowAngle": 0.5235987755982988,
    "centerForce": 0.05,
    "colliderPadding": 20,
    "repelForce": 200,
    "linkDistance": 0,
    "alphaDecay": 0.0228,
    "visibilityRules": ["**/*"],
    "prefetchPages": false
  },
  "sitemapConfig": {},
  "backlinksConfig": {}
}
```

--------------------------------

### Basic Graph Configuration

Source: https://fevol.github.io/starlight-site-graph/configuration/graph/hover

A basic example of a graph configuration object.

```json
{
  "graphConfig": {
    "zoomEase": "out_quad"
  }
}
```

--------------------------------

### Sitemap JSON Structure Example

Source: https://fevol.github.io/starlight-site-graph/concepts/sitemap

This example demonstrates the structure of the sitemap JSON object, including properties for pages, their metadata, and relationships.

```json
{
  "/": {
    "title": "Home",
    "exists": true,
    "external": false,
    "links": ["/about", "https://starlight.astro.build/"],
    "tags": ["home"],
    "nodeStyle": {
      "color": "red"
    }
  },
  "/about": {
    "title": "About",
    "exists": true,
    "external": false,
    "backlinks": ["/"],
    "tags": ["about"],
    "nodeStyle": {
      "shapeColor": "nodeColor2"
    }
  },
  "https://starlight.astro.build/": {
    "title": "Starlight",
    "exists": true,
    "external": true,
    "backlinks": ["/"]
  }
}
```

--------------------------------

### Full Graph Configuration Example

Source: https://fevol.github.io/starlight-site-graph/configuration/graph/tags

A comprehensive configuration for the graph, including tag rendering mode, various styling options for nodes, tags, and links, and interaction behaviors.

```json
{
  "graphConfig": {
    "actions": [],
    "tagStyles": {
      "Tag": {
        "shape": "square",
        "strokeWidth": 8,
        "cornerType": "round",
        "strokeCornerRadius": "80%"
      }
    },
    "tagRenderMode": "node",
    "enableDrag": false,
    "enableZoom": false,
    "enablePan": false,
    "enableHover": true,
    "enableClick": "disable",
    "depth": 1,
    "depthDirection": "both",
    "followLink": "same",
    "scale": 1.1,
    "minZoom": 0.05,
    "maxZoom": 4,
    "renderLabels": true,
    "renderArrows": true,
    "renderUnresolved": false,
    "renderExternal": true,
    "scaleLinks": true,
    "scaleArrows": true,
    "minZoomArrows": 0.8,
    "labelOpacityScale": 1.3,
    "labelMutedOpacity": 0,
    "labelHoverOpacity": 1,
    "labelAdjacentOpacity": 1,
    "labelFontSize": 12,
    "labelHoverScale": 1,
    "labelOffset": 10,
    "labelHoverOffset": 14,
    "zoomDuration": 75,
    "zoomEase": "out_quad",
    "hoverDuration": 200,
    "hoverEase": "out_quad",
    "nodeDefaultStyle": {
      "shape": "circle",
      "shapeColor": "nodeColor",
      "shapeSize": 10,
      "strokeWidth": 0,
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.5
    },
    "nodeVisitedStyle": {
      "shapeColor": "nodeColorVisited"
    },
    "nodeCurrentStyle": {
      "shapeColor": "nodeColorCurrent"
    },
    "nodeUnresolvedStyle": {
      "shapeColor": "nodeColorUnresolved"
    },
    "nodeExternalStyle": {
      "shape": "square",
      "shapeColor": "nodeColorExternal",
      "strokeColor": "inherit",
      "nodeScale": 0.6
    },
    "tagDefaultStyle": {
      "shape": "circle",
      "shapeSize": 6,
      "shapeColor": "backgroundColor",
      "strokeColor": "nodeColorTag",
      "strokeWidth": 1,
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.7
    },
    "linkWidth": 1,
    "linkHoverWidth": 1,
    "arrowSize": 5,
    "arrowAngle": 0.5235987755982988,
    "centerForce": 0.05,
    "colliderPadding": 20,
    "repelForce": 200,
    "linkDistance": 0,
    "alphaDecay": 0.0228,
    "visibilityRules": ["**/*"],
    "prefetchPages": false
  },
  "sitemapConfig": {},
  "backlinksConfig": {}
}
```

--------------------------------

### Node Style Configuration Example

Source: https://fevol.github.io/starlight-site-graph/configuration/frontmatter/graph

This example demonstrates a specific node style configuration where the shape is set to 'square' and rotated by 45 degrees. This is typically defined within the page's frontmatter.

```json
{
  "/node/": {
    "title": "Node",
    "exists": true,
    "nodeStyle": {
      "shape": "square",
      "shapeRotation": 45
    }
  }
}

```

--------------------------------

### Include Links Starting with /subdir/

Source: https://fevol.github.io/starlight-site-graph/configuration/frontmatter/sitemap

Includes only links where the target path starts exactly with '/subdir/'.

```markdown
---
title: A linked page
sitemap:
  linkInclusionRules: ["/subdir/**/*"]
---


This page links to [another page](/another-page),
and also to one in a [subdirectory](/subdir/page).
Finally, a link to a [different page](/abc/subdir/different-page).

```

--------------------------------

### Graph Configuration Settings

Source: https://fevol.github.io/starlight-site-graph/configuration/frontmatter/sitemap

Provides a comprehensive example of the `graphConfig` object, detailing various settings for customizing the appearance and behavior of the page graph.

```json
{
  "graphConfig": {
    "actions": [],
    "tagStyles": {},
    "tagRenderMode": "none",
    "enableDrag": false,
    "enableZoom": false,
    "enablePan": false,
    "enableHover": true,
    "enableClick": "disable",
    "depth": 1,
    "depthDirection": "both",
    "followLink": "same",
    "scale": 1.8,
    "minZoom": 0.05,
    "maxZoom": 4,
    "renderLabels": true,
    "renderArrows": true,
    "renderUnresolved": false,
    "renderExternal": true,
    "scaleLinks": true,
    "scaleArrows": true,
    "minZoomArrows": 0.8,
    "labelOpacityScale": 1.3,
    "labelMutedOpacity": 0,
    "labelHoverOpacity": 1,
    "labelAdjacentOpacity": 1,
    "labelFontSize": 12,
    "labelHoverScale": 1,
    "labelOffset": 10,
    "labelHoverOffset": 14,
    "zoomDuration": 75,
    "zoomEase": "out_quad",
    "hoverDuration": 200,
    "hoverEase": "out_quad",
    "nodeDefaultStyle": {
      "shape": "circle",
      "shapeColor": "nodeColor",
      "shapeSize": 10,
      "strokeWidth": 0,
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.5
    },
    "nodeVisitedStyle": {
      "shapeColor": "nodeColorVisited"
    },
    "nodeCurrentStyle": {
      "shapeColor": "nodeColorCurrent"
    },
    "nodeUnresolvedStyle": {
      "shapeColor": "nodeColorUnresolved"
    },
    "nodeExternalStyle": {
      "shape": "square",
      "shapeColor": "nodeColorExternal",
      "strokeColor": "inherit",
      "nodeScale": 0.6
    },
    "tagDefaultStyle": {
      "shape": "circle",
      "shapeSize": 6,
      "shapeColor": "backgroundColor",
      "strokeColor": "nodeColorTag",
      "strokeWidth": 1,
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.7
    },
    "linkWidth": 1,
    "linkHoverWidth": 1,
    "arrowSize": 5,
    "arrowAngle": 0.5235987755982988,
    "centerForce": 0.05,
    "colliderPadding": 20,
    "repelForce": 200,
    "linkDistance": 0,
    "alphaDecay": 0.0228,
    "visibilityRules": ["**/*"],
    "prefetchPages": false
  },
  "sitemapConfig": {},
  "backlinksConfig": {}
}

```

--------------------------------

### Sitemap Data Example

Source: https://fevol.github.io/starlight-site-graph/configuration/sitemap/processing

Provides an example of sitemap data, including page titles, links, backlinks, and tags. This data structure is used to generate the sitemap graph.

```json
{
  "/node/": {
    "title": "node/",
    "links": ["/dir/a/"],
    "exists": true,
    "tags": ["node"]
  },
  "/dir/a/": {
    "title": "dir/a/",
    "exists": true,
    "backlinks": [
      "/node/",
      "/dir/b/"
    ]
  },
  "/dir/b/": {
    "title": "dir/b/",
    "links": [
      "/dir/a/",
      "/dir/node/"
    ],
    "exists": true
  },
  "/dir/node/": {
    "title": "dir/node/",
    "exists": true,
    "backlinks": ["/dir/b/"],
    "tags": ["node"]
  }
}
```

--------------------------------

### Node Style Configuration Example

Source: https://fevol.github.io/starlight-site-graph/configuration/graph/nodestyle

Defines the visual properties for a node, including shape, size, color, and interactive states like hover, adjacent, and muted.

```json
{
      "sizingStrength": 0.5,
      "neighborScale": 4,
      "states": {
        "hovered": {
          "shapeColor": "nodeColorHover",
          "strokeColor": "inherit",
          "labelOffset": 14,
          "labelOpacity": 1,
          "labelScale": 1.3
        },
        "adjacent": {
          "shapeColor": "nodeColorAdjacent",
          "strokeColor": "inherit",
          "labelOffset": 10,
          "labelOpacity": 0
        },
        "muted": {
          "shapeColor": "nodeColorMuted",
          "strokeColor": "inherit",
          "labelOffset": 10,
          "labelOpacity": 0
        }
      }
    }
```

```json
{
      "shape": "star",
      "shapeSize": 6,
      "shapeColor": "nodeColor",
      "shapeRotation": "random",
      "shapeCornerRadius": "25%",
      "cornerType": "round",
      "strokeWidth": 0,
      "labelOffset": 10,
      "labelOpacity": 1,
      "labelScale": 1,
      "colliderScale": 1,
      "nodeScale": 1.6,
      "sizingStrength": 0.5,
      "neighborScale": 4,
      "states": {
        "hovered": {
          "shapeColor": "nodeColorHover",
          "strokeColor": "inherit",
          "labelOffset": 14,
          "labelOpacity": 1,
          "labelScale": 1.3
        },
        "adjacent": {
          "shapeColor": "nodeColorAdjacent",
          "strokeColor": "inherit",
          "labelOffset": 10,
          "labelOpacity": 0
        },
        "muted": {
          "shapeColor": "nodeColorMuted",
          "strokeColor": "inherit",
          "labelOffset": 10,
          "labelOpacity": 0
        }
      }
    }
```

--------------------------------

### Example Node Data with Tags

Source: https://fevol.github.io/starlight-site-graph/configuration/graph/tags

Illustrates the structure of node data, including how tags are associated with a specific node. Tags are listed in the 'tags' array.

```json
{
  "/node/": {
    "links": ["/other-node/"],
    "tags": ["Tag"],
    "title": "Node",
    "exists": true,
    "backlinks": ["/another-node/"]
  },
  "/other-node/": {
    "links": ["/another-node/"],
    "title": "Other Node",
    "exists": true,
    "backlinks": ["/node/"]
  },
  "/another-node/": {
    "links": ["/node/"],
    "title": "Another Node",
    "exists": true,
    "backlinks": ["/other-node/"]
  }
}
```

--------------------------------

### Configure Starlight Site Graph Plugin

Source: https://fevol.github.io/starlight-site-graph/configuration/general

Set up the Starlight Site Graph plugin with various configuration options in `astro.config.mjs`. This example shows all available boolean and enum options.

```javascript
import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import starlightSiteGraph from 'starlight-site-graph'
export default defineConfig({
  integrations: [
    starlight({
      plugins: [starlightSiteGraph({
         debug: boolean,
         overridePageSidebar: boolean,
         graph: boolean,
         backlinks: boolean,
         trackVisitedPages: 'disable' | 'session' | 'local',
      })],
     }),
   ],
 }) 

```

--------------------------------

### Node Data with Tags

Source: https://fevol.github.io/starlight-site-graph/configuration/graph/tags

Example node data demonstrating how tags are assigned to nodes. The order of tags in the `tags` list determines style precedence if a node has multiple tags.

```json
{
  "/node/": {
    "tags": ["Tag 1", "Tag 2"],
    "links": ["/other-node/"],
    "title": "Node",
    "exists": true
  },
  "/other-node/": {
    "tags": ["Tag 1"],
    "title": "Other Node",
    "exists": true,
    "backlinks": ["/node/"]
  },
  "/another-node/": {
    "tags": ["Tag 2", "Tag 1"],
    "title": "Another Node",
    "exists": true
  }
}
```

--------------------------------

### Custom Ignore Links Configuration Examples

Source: https://fevol.github.io/starlight-site-graph/configuration/sitemap/inclusion

Demonstrates various ways to configure the `ignoreLinksInSelectors` option, including an empty array to include all links, and specific tag, class, and ID selectors.

```javascript
[]
```

```javascript
["header", "raw"]
```

```javascript
[`.right-sidebar`]
```

```javascript
["#footer"]
```

--------------------------------

### Markdown Example with External Link

Source: https://fevol.github.io/starlight-site-graph/configuration/sitemap/inclusion

Demonstrates how an external link is rendered in Markdown. Ensure the `includeExternalLinks` option is enabled in your configuration to include such links in the sitemap.

```markdown
This is a *cool* document
  which links to [a boring page](/another-page).
Because I am a **very cool** document,
  I will also link to [Starlight](https://starlight.astro.build).

```

--------------------------------

### Static Sitemap Structure Example

Source: https://fevol.github.io/starlight-site-graph/configuration/sitemap/general

Define the sitemap structure with page paths, links, tags, titles, and existence status. This configuration is used when the `sitemap` option is set.

```json
{
  "sitemap": {
    "/node/": {
      "links": [
        "/custom-node/",
        "/external/"
      ],
      "tags": [
        "Tag"
      ],
      "title": "Node",
      "exists": true
    },
    "/custom-node/": {
      "nodeStyle": {
        "shapeColor": "nodeColor3"
      },
      "title": "Custom Node",
      "exists": true,
      "backlinks": [
        "/node/"
      ]
    },
    "/external/": {
      "external": true,
      "title": "External",
      "exists": true,
      "backlinks": [
        "/node/"
      ]
    }
  }
}
```

--------------------------------

### Comprehensive Graph Configuration

Source: https://fevol.github.io/starlight-site-graph/configuration/graph/zoom

A detailed example showcasing various configuration options for the graph, including zoom, pan, rendering, and styling parameters. The `minZoomArrows` is set to 0.8.

```json
{
  "graphConfig": {
    "actions": [],
    "tagStyles": {},
    "tagRenderMode": "none",
    "enableDrag": false,
    "enableZoom": true,
    "enablePan": true,
    "enableHover": true,
    "enableClick": "disable",
    "depth": 1,
    "depthDirection": "both",
    "followLink": "same",
    "scale": 1.1,
    "minZoom": 0.05,
    "maxZoom": 4,
    "renderLabels": true,
    "renderArrows": true,
    "renderUnresolved": false,
    "renderExternal": true,
    "scaleLinks": true,
    "scaleArrows": true,
    "minZoomArrows": 0.8,
    "labelOpacityScale": 1.3,
    "labelMutedOpacity": 0,
    "labelHoverOpacity": 1,
    "labelAdjacentOpacity": 1,
    "labelFontSize": 12,
    "labelHoverScale": 1,
    "labelOffset": 10,
    "labelHoverOffset": 14,
    "zoomDuration": 75,
    "zoomEase": "out_quad",
    "hoverDuration": 200,
    "hoverEase": "out_quad",
    "nodeDefaultStyle": {
      "shape": "circle",
      "shapeColor": "nodeColor",
      "shapeSize": 10,
      "strokeWidth": 0,
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.5
    },
    "nodeVisitedStyle": {
      "shapeColor": "nodeColorVisited"
    },
    "nodeCurrentStyle": {
      "shapeColor": "nodeColorCurrent"
    },
    "nodeUnresolvedStyle": {
      "shapeColor": "nodeColorUnresolved"
    },
    "nodeExternalStyle": {
      "shape": "square",
      "shapeColor": "nodeColorExternal",
      "strokeColor": "inherit",
      "nodeScale": 0.6
    },
    "tagDefaultStyle": {
      "shape": "circle",
      "shapeSize": 6,
      "shapeColor": "backgroundColor",
      "strokeColor": "nodeColorTag",
      "strokeWidth": 1,
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.7
    },
    "linkWidth": 1,
    "linkHoverWidth": 1,
    "arrowSize": 5,
    "arrowAngle": 0.5235987755982988,
    "centerForce": 0.05,
    "colliderPadding": 20,
    "repelForce": 200,
    "linkDistance": 0,
    "alphaDecay": 0.0228,
    "visibilityRules": ["**/*"],
    "prefetchPages": false
  },
  "sitemapConfig": {},
  "backlinksConfig": {}
}
```

--------------------------------

### Set Graph Depth Configuration

Source: https://fevol.github.io/starlight-site-graph/configuration/graph/general

Configure the graph to display nodes up to a specified depth. This example sets the depth to 1, showing the current node and its immediate neighbors.

```json
{
  "graphConfig": {
    "depth": 1
  }
}
```

--------------------------------

### Sitemap Configuration with No Tag Rules

Source: https://fevol.github.io/starlight-site-graph/configuration/sitemap/processing

This configuration demonstrates a sitemap setup where no specific tag rules are applied, resulting in no tags being automatically assigned to pages.

```json
{
  "graphConfig": {
    "tagRenderMode": "node"
  },
  "sitemapConfig": {
    "tagRules": {}
  }
}
```

```json
{
  "/node/": {
    "title": "node/",
    "links": ["/dir/a/"],
    "exists": true
  },
  "/dir/a/": {
    "title": "dir/a/",
    "exists": true,
    "backlinks": [
      "/node/",
      "/dir/b/"
    ]
  },
  "/dir/b/": {
    "title": "dir/b/",
    "links": [
      "/dir/a/",
      "/dir/node/"
    ],
    "exists": true
  },
  "/dir/node/": {
    "title": "dir/node/",
    "exists": true,
    "backlinks": ["/dir/b/"]
  }
}
```

--------------------------------

### Custom Page Title Configuration Example

Source: https://fevol.github.io/starlight-site-graph/configuration/frontmatter/sitemap

Shows the configuration for page titles when using the `pageTitle` frontmatter key. This custom name is reflected in components that utilize this setting.

```json
{
  "/my-page/": {
    "title": "Custom Name",
    "exists": true
  }
}

```

--------------------------------

### Full Graph Configuration Example

Source: https://fevol.github.io/starlight-site-graph/configuration/graph/interaction

A comprehensive configuration object demonstrating various settings for graph behavior, styling, and interaction. This includes link following, zoom, drag, hover, click, and detailed node and link styling.

```json
{
  "graphConfig": {
    "actions": [],
    "tagStyles": {},
    "tagRenderMode": "none",
    "enableDrag": false,
    "enableZoom": false,
    "enablePan": false,
    "enableHover": true,
    "enableClick": "auto",
    "depth": 5,
    "depthDirection": "both",
    "followLink": "graph",
    "scale": 1.1,
    "minZoom": 0.05,
    "maxZoom": 4,
    "renderLabels": true,
    "renderArrows": true,
    "renderUnresolved": false,
    "renderExternal": true,
    "scaleLinks": true,
    "scaleArrows": true,
    "minZoomArrows": 0.8,
    "labelOpacityScale": 1.3,
    "labelMutedOpacity": 0,
    "labelHoverOpacity": 1,
    "labelAdjacentOpacity": 1,
    "labelFontSize": 12,
    "labelHoverScale": 1,
    "labelOffset": 10,
    "labelHoverOffset": 14,
    "zoomDuration": 75,
    "zoomEase": "out_quad",
    "hoverDuration": 200,
    "hoverEase": "out_quad",
    "nodeDefaultStyle": {
      "shape": "circle",
      "shapeColor": "nodeColor",
      "shapeSize": 10,
      "strokeWidth": 0,
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.5
    },
    "nodeVisitedStyle": {
      "shapeColor": "nodeColorVisited"
    },
    "nodeCurrentStyle": {
      "shapeColor": "nodeColorCurrent"
    },
    "nodeUnresolvedStyle": {
      "shapeColor": "nodeColorUnresolved"
    },
    "nodeExternalStyle": {
      "shape": "square",
      "shapeColor": "nodeColorExternal",
      "strokeColor": "inherit",
      "nodeScale": 0.6
    },
    "tagDefaultStyle": {
      "shape": "circle",
      "shapeSize": 6,
      "shapeColor": "backgroundColor",
      "strokeColor": "nodeColorTag",
      "strokeWidth": 1,
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.7
    },
    "linkWidth": 1,
    "linkHoverWidth": 1,
    "arrowSize": 5,
    "arrowAngle": 0.5235987755982988,
    "centerForce": 0.05,
    "colliderPadding": 20,
    "repelForce": 200,
    "linkDistance": 0,
    "alphaDecay": 0.0228,
    "visibilityRules": ["**/*"],
    "prefetchPages": false
  },
  "sitemapConfig": {},
  "backlinksConfig": {}
}
```

--------------------------------

### Graph Data Structure Example

Source: https://fevol.github.io/starlight-site-graph/configuration/graph/interaction

An example of the data structure used to represent nodes and their links within the graph.

```json
{
  "/node/": {
    "backlinks": [
      "/node1/",
      "/node2/",
      "/node3/",
      "/node4/",
      "/node5/",
      "/node6/"
    ],
    "title": "Node",
    "exists": true
  },
  "/node1/": {
    "links": ["/node/"],
    "title": "Node1",
    "exists": true
  },
  "/node2/": {
    "links": ["/node/"],
    "title": "Node2",
    "exists": true
  },
  "/node3/": {
    "links": ["/node/"],
    "title": "Node3",
    "exists": true
  },
  "/node4/": {
    "links": ["/node/"],
    "title": "Node4",
    "exists": true
  },
  "/node5/": {
    "links": ["/node/"],
    "title": "Node5",
    "exists": true
  },
  "/node6/": {
    "links": ["/node/"],
    "title": "Node6",
    "exists": true
  }
}
```

--------------------------------

### Node Data Structure Example

Source: https://fevol.github.io/starlight-site-graph/configuration/graph/simulation

An example of the data structure used for nodes in the graph, including links, backlinks, title, and existence status.

```json
{
  "/node/": {
    "links": [
      "/node-8/",
      "/node-11/",
      "/node-20/",
      "/node-33/"
    ],
    "title": "Node",
    "exists": true,
    "backlinks": [
      "/node-25/",
      "/node-49/"
    ]
  },
  "/node-1/": {
    "exists": true,
    "external": false,
    "links": [
      "/node-42/",
      "/node-45/"
    ],
    "title": "Node 1",
    "backlinks": [
      "/node-10/",
      "/node-17/"
    ]
  },
  "/node-2/": {
    "exists": true,
    "external": false,
    "title": "Node 2"
  },
  "/node-3/": {
    "exists": true,
    "external": false,
    "links": [
      "/node-7/",
      "/node-27/"
    ],
    "title": "Node 3"
  },
  "/node-4/": {
    "exists": true,
    "external": false,
    "links": ["/node-27/"],
    "title": "Node 4",
    "backlinks": [
      "/node-19/",
      "/node-39/"
    ]
  },
  "/node-5/": {
    "exists": true,
    "external": false,
    "links": ["/node-9/"],
    "title": "Node 5"
  },
  "/node-6/": {
    "exists": true,
    "external": false,
    "links": ["/node-29/"],
    "title": "Node 6",
    "backlinks": [
      "/node-36/",
      "/node-37/",
      "/node-38/"
    ]
  },
  "/node-7/": {
    "exists": true,
    "external": false,
    "title": "Node 7",
    "backlinks": ["/node-3/"]
  },
  "/node-8/": {
    "exists": true,
    "external": false,
    "title": "Node 8",
    "backlinks": [
      "/node/",
      "/node-48/"
    ]
  },
  "/node-9/": {
    "exists": true,
    "external": false,
    "links": ["/node-31/"],
    "title": "Node 9",
    "backlinks": ["/node-5/"]
  },
  "/node-10/": {
    "exists": true,
    "external": false,
    "links": [
      "/node-1/",
      "/node-41/"
    ],
    "title": "Node 10"
  },
  "/node-11/": {
    "exists": true,
    "external": false,
    "title": "Node 11",
    "backlinks": [
      "/node/",
      "/node-23/",
      "/node-45/"
    ]
  },
  "/node-12/": {
    "exists": true,
    "external": false,
    "title": "Node 12",
    "backlinks": [
      "/node-43/",
      "/node-46/"
    ]
  },
  "/node-13/": {
    "exists": true,
    "external": false,
    "links": [
      "/node-19/",
      "/node-30/"
    ],
    "title": "Node 13",
    "backlinks": ["/node-18/"]
  },
  "/node-14/": {
    "exists": true,
    "external": false,
    "links": [
      "/node-26/",
      "/node-32/"
    ],
    "title": "Node 14"
  },
  "/node-15/": {
    "exists": true,
    "external": false,
    "title": "Node 15",
    "backlinks": ["/node-46/"]
  },
  "/node-16/": {
    "exists": true,
    "external": false,
    "title": "Node 16",
    "backlinks": ["/node-34/"]
  },
  "/node-17/": {
    "exists": true,
    "external": false,
    "links": [
      "/node-1/",
      "/node-20/",
      "/node-39/"
    ],
    "title": "Node 17"
  },
  "/node-18/": {
    "exists": true,
    "external": false,
    "links": ["/node-13/"],
    "title": "Node 18",
    "backlinks": ["/node-47/"]
  },
  "/node-19/": {
    "exists": true,
    "external": false,
    "links": [
      "/node-4/",
      "/node-21/"
    ],
    "title": "Node 19",
    "backlinks": [
      "/node-13/",
      "/node-22/"
    ]
  },
  "/node-20/": {
    "exists": true,
    "external": false,
    "title": "Node 20",
    "backlinks": [
      "/node/",
      "/node-17/"
    ]
  },
  "/node-21/": {
    "exists": true,
    "external": false,
    "title": "Node 21",
    "backlinks": ["/node-19/"]
  },
  "/node-22/": {
    "exists": true,
    "external": false,
    "links": ["/node-19/"],
    "title": "Node 22"
  },
  "/node-23/": {
    "exists": true,
    "external": false,
    "links": [
      "/node-11/",
      "/node-27/"
    ],
    "title": "Node 23"
  },
  "/node-24/": {
    "exists": true,
    "external": false,
    "links": ["/node-28/"],
    "title": "Node 24"
  },
  "/node-25/": {
    "exists": true,
    "external": false,
    "links": ["/node/"],
    "title": "Node 25"
  },
  "/node-26/": {
    "exists": true,
    "external": false,
    "links": ["/node-32/"],
    "title": "Node 26",
    "backlinks": ["/node-14/"]
  },
  "/node-27/": {
    "exists": true,
    "external": false,
    "title": "Node 27",
    "backlinks": [
      "/node-3/",
      "/node-4/",
      "/node-23/",
      "/node-39/"
    ]
  },
  "/node-28/": {
    "exists": true,
    "external": false,
    "title": "Node 28",
    "backlinks": [
      "/node-24/",
      "/node-35/"
    ]
  },
  "/node-29/": {
    "exists": true,
    "external": false,
    "links": ["/node-42/"],
    "title": "Node 29",
    "backlinks": ["/node-6/"]
  },
  "/node-30/": {
    "exists": true,
    "external": false,
    "title": "Node 30",
    "backlinks": [
      "/node-13/",
      "/node-34/",
      "/node-49/"
    ]
  }
}
```

--------------------------------

### Markdown Link Example

Source: https://fevol.github.io/starlight-site-graph/concepts/sitemap

This example demonstrates a standard markdown link within a page. Links in this format are included in the sitemap. Links from components like `<LinkCard>` are not.

```markdown
---
title: My Page
---


import { LinkCard } from '@astrojs/starlight/components';


This is a link to [another page](/another-page).
~~<LinkCard title='Link to another page' href='/another-page' />~~
```

--------------------------------

### Graph Configuration with Zoom Options

Source: https://fevol.github.io/starlight-site-graph/configuration/graph/zoom

A comprehensive example of graph configuration, demonstrating various zoom-related settings such as minimum and maximum zoom levels, zoom animation duration, and how scaling affects links and arrows. This is useful for fine-tuning the user's zoom experience.

```json
{
  "graphConfig": {
    "actions": [],
    "tagStyles": {},
    "tagRenderMode": "none",
    "enableDrag": false,
    "enableZoom": false,
    "enablePan": false,
    "enableHover": true,
    "enableClick": "disable",
    "depth": 1,
    "depthDirection": "both",
    "followLink": "same",
    "scale": 1.1,
    "minZoom": 0.05,
    "maxZoom": 4,
    "renderLabels": false,
    "renderArrows": true,
    "renderUnresolved": false,
    "renderExternal": true,
    "scaleLinks": true,
    "scaleArrows": true,
    "minZoomArrows": 0.8,
    "labelOpacityScale": 1.3,
    "labelMutedOpacity": 0,
    "labelHoverOpacity": 1,
    "labelAdjacentOpacity": 1,
    "labelFontSize": 12,
    "labelHoverScale": 1,
    "labelOffset": 10,
    "labelHoverOffset": 14,
    "zoomDuration": 75,
    "zoomEase": "out_quad",
    "hoverDuration": 200,
    "hoverEase": "out_quad",
    "nodeDefaultStyle": {
      "shape": "circle",
      "shapeColor": "nodeColor",
      "shapeSize": 10,
      "strokeWidth": 0,
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.5
    },
    "nodeVisitedStyle": {
      "shapeColor": "nodeColorVisited"
    },
    "nodeCurrentStyle": {
      "shapeColor": "nodeColor"
    },
    "nodeUnresolvedStyle": {
      "shapeColor": "nodeColorUnresolved"
    },
    "nodeExternalStyle": {
      "shape": "square",
      "shapeColor": "nodeColorExternal",
      "strokeColor": "inherit",
      "nodeScale": 0.6
    },
    "tagDefaultStyle": {
      "shape": "circle",
      "shapeSize": 6,
      "shapeColor": "backgroundColor",
      "strokeColor": "nodeColorTag",
      "strokeWidth": 1,
      "colliderScale": 1,
      "nodeScale": 1,
      "neighborScale": 0.7
    },
    "linkWidth": 1,
    "linkHoverWidth": 1,
    "arrowSize": 5,
    "arrowAngle": 0.5235987755982988,
    "centerForce": 0.001,
    "colliderPadding": 20,
    "repelForce": 200,
    "linkDistance": 0,
    "alphaDecay": 0.0228,
    "visibilityRules": ["**/*"],
    "prefetchPages": false
  },
  "sitemapConfig": {},
  "backlinksConfig": {}
}
```

--------------------------------

### Example Sitemap Data Structure

Source: https://fevol.github.io/starlight-site-graph/configuration/sitemap/processing

This JSON represents the structure of a sitemap, including nodes with links, titles, and external properties. It serves as an example of how sitemap data might be organized.

```json
{
  "/node/": {
    "links": [
      "https://astro.build/"
    ],
    "title": "Node",
    "exists": true
  },
  "https://astro.build/": {
    "title": "showcase",
    "external": true,
    "exists": true,
    "backlinks": ["/node/"]
  }
}
```
Tokens:
Raw