A package/plugin for Starlight and Astro which allows you to add a graph to your website, visualizing connections between pages.

📑 Table of Contents

• 📑 Table of Contents
• 🧰 Set-up
• 💬 Discussion and Feedback
• 💎 Acknowledgements
• 🤝 Contributors
• ❤️ Support

🧰 Set-up

You can install this package from npm from your favourite package manager:

npm install starlight-site-graph

If you are using Starlight, you can just add the following to your astro.config.mjs:

// astro.config.mjs
import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import starlightSiteGraph from 'starlight-site-graph'

export default defineConfig({
    integrations: [
        starlight({ 
            plugins: [starlightSiteGraph({ ... })],
            title: 'My Docs',
        }),
    ],
})

If you are just using Astro, you will instead need to register it as follows:

// astro.config.mjs
import sitegraphSitemapIntegration from 'starlight-site-graph/integration';
import { defineConfig } from 'astro/config'
export default defineConfig({
    prefetch: true,
    integrations: [
      // ...
      sitegraphSitemapIntegration({ ... })
    ]
})

For more information, check out the Getting Started guide.

💬 Discussion and Feedback

Any feedback would very much be appreciated. Please use the GitHub issue tracker to report bugs, request features, or suggest improvements, or message me over on Discord (@fevol).

💎 Acknowledgements

This plugin makes use of existing projects such as:

• D3.js - For the graph visualization
• PixiJS - For the canvas rendering
• Pixi Stats - For the FPS counter
• micromatch - For glob pattern matching

And was originally inspired by Quartz's graph component.

This README makes use of shields.io for adding badges to display some cursory information about the project.

🤝 Contributors

mProjectsCode - For making large improvements to the graph's rendering logic and fixing many bugs.
HiDeoo and Delucis - For helping me to figure out how to solve some of the more difficult problems I encountered, and giving many helpful suggestions on how to improve the project.

❤️ Support

If you like this project, please consider giving it a star on GitHub, contributing some code, or sponsoring me via GitHub Sponsors.