Enable more customisation for editLink

[lgastler]

What version of starlight are you using?

0.17.2

What is your idea?

Enable additional customisations for generating the editLink when the content files are not in the default location or are part of a custom setup. This can be achieved by offering more options in astro.config.js for the edit link or by calling a function, for instance.

Why is this feature necessary?

We have a unique setup: our content (.md files) resides in a separate repository from the website/starlight app. This arrangement serves various purposes. In our pipeline, before generating different doc versions, we extract the necessary "content" from the other repo and copy it to the required location.

As a result, the base src/content/data portion added to the editUrl does not align with our structure, given the differing file organisation.

Do you have examples of this feature in other projects?

No response

Participation

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

[lgastler]

Managed to set it up using Overriding Components and a custom EditLink component which works but is a bit of a hack. Since we are doing something custom I am fine with it and do not see many other users in need of this. Still would be willing to look into it and submit a pull request.

---
import Default from '@astrojs/starlight/components/EditLink.astro';
import type { Props } from '@astrojs/starlight/props';

const { editUrl } = Astro.props;

let newEditUrl: URL | undefined;
if (editUrl) {
  newEditUrl = new URL(editUrl.toString().replace('src/content/docs', ''));
}
---
<Default {...Astro.props} editUrl={newEditUrl}/>

[chardskarth]

Awesome. Thanks alot!

[HiDeoo]

Adding an updated approach to entirely customize the edit link by relying on route data.

Route data is an object containing all the information required to render a single page, including the editUrl. Such data can be customized using a route data middleware.

// src/routeData.ts
import { defineRouteMiddleware } from "@astrojs/starlight/route-data";

export const onRequest = defineRouteMiddleware((context) => {
  const { starlightRoute } = context.locals;

  if (starlightRoute.editUrl) {
    starlightRoute.editUrl = new URL(
      // Update the edit URL
      starlightRoute.editUrl.href.replace("src/content/docs/", ""),
      starlightRoute.editUrl
    );
  }
});

Depending on the needs, all route data properties can be accessed to help customize the edit link.