Setting Astro build.format config breaks sidebar links

[jamescmartinez]

What version of starlight are you using?

0.1.2

What version of astro are you using?

2.6.1

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

Expected: sidebar links should not have a trailing slash when setting Astro's build.format config to file

Actual: they have a trailing slash, which causes the links to 404 in production builds

How to reproduce:

1. Clone the build-format-file branch of this repo
2. Comment out line 8 of the Astro config that sets the base path to /docs (sorry, it's a temporary workaround for GitHub pages)
3. npm run dev to see the trailing / OR npm run build && npm run preview to get the 404s
4. Click any link in the sidebar
5. Smile at everyone's favorite sad piece of paper :)

Link to Minimal Reproducible Example

https://github.com/mergentlabs/docs/tree/build-format-file

Participation

• I am willing to submit a pull request for this issue.

[delucis]

Thanks for the report @jamescmartinez! I can confirm we’re not currently respecting build.format or trailingSlash when building links. Should be do-able though and would welcome a PR!

Our general method for making user configuration from astro.config available to components etc. is via virtual modules and you can see that in place here:

starlight/packages/starlight/index.ts

Lines 85 to 94 in 7f4e948

	/** Expose the Starlight user config object via a virtual module. */
	function vitePluginStarlightUserConfig(
	opts: StarlightConfig,
	{ root }: AstroConfig
	): NonNullable<ViteUserConfig['plugins']>[number] {
	const modules = {
	'virtual:starlight/user-config': `export default ${JSON.stringify(opts)}`,
	'virtual:starlight/project-context': `export default ${JSON.stringify({
	root,
	})}`,

We currently expose the project root via the virtual:starlight/project-context virtual module, but could add trailingSlash and build.format to that module so that Starlight code can do something like:

import project from 'virtual:starlight/project-context';

const link = project.build.format === 'file' ? '/foo.html' : '/foo/';

[jamescmartinez]

I didn't have time to wrap this up tonight, but here's a start: #207

[kevinzunigacuellar]

I would like to take a swing at this one 🚀