Fix autogenerated nav for pages of fallback content (#261)

4 files changed, 34 insertions, 3 deletions

diff --git a/.changeset/itchy-trees-wait.md b/.changeset/itchy-trees-wait.md
new file mode 100644
index 00000000..3723cc1a
--- /dev/null
+++ b/.changeset/itchy-trees-wait.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Fix autogenerated navigation for pages using fallback content
diff --git a/packages/starlight/utils/navigation.ts b/packages/starlight/utils/navigation.ts
index 8e9fea3e..2cf95466 100644
--- a/packages/starlight/utils/navigation.ts
+++ b/packages/starlight/utils/navigation.ts
@@ -69,9 +69,9 @@ function groupFromAutogenerateConfig(
   const dirDocs = routes.filter(
     (doc) =>
       // Match against `foo.md` or `foo/index.md`.
-      stripExtension(doc.entry.id) === localeDir ||
+      stripExtension(doc.id) === localeDir ||
       // Match against `foo/anything/else.md`.
-      doc.entry.id.startsWith(localeDir + '/')
+      doc.id.startsWith(localeDir + '/')
   );
   const tree = treeify(dirDocs, localeDir);
   return {
@@ -136,7 +136,7 @@ function getBreadcrumbs(path: string, baseDir: string): string[] {
 function treeify(routes: Route[], baseDir: string): Dir {
   const treeRoot: Dir = {};
   routes.forEach((doc) => {
-    const breadcrumbs = getBreadcrumbs(doc.entry.id, baseDir);
+    const breadcrumbs = getBreadcrumbs(doc.id, baseDir);
 
     // Walk down the route’s path to generate the tree.
     let currentDir = treeRoot;
diff --git a/packages/starlight/utils/routing.ts b/packages/starlight/utils/routing.ts
index ab8344f0..7c06c45d 100644
--- a/packages/starlight/utils/routing.ts
+++ b/packages/starlight/utils/routing.ts
@@ -3,6 +3,7 @@ import { CollectionEntry, getCollection } from 'astro:content';
 import config from 'virtual:starlight/user-config';
 import {
   LocaleData,
+  localizedId,
   localizedSlug,
   slugToLocaleData,
   slugToParam,
@@ -16,6 +17,7 @@ export interface Route extends LocaleData {
   entry: StarlightDocsEntry;
   entryMeta: LocaleData;
   slug: string;
+  id: string;
   isFallback?: true;
   [key: string]: unknown;
 }
@@ -41,6 +43,7 @@ function getRoutes(): Route[] {
   const routes: Route[] = docs.map((entry) => ({
     entry,
     slug: entry.slug,
+    id: entry.id,
     entryMeta: slugToLocaleData(entry.slug),
     ...slugToLocaleData(entry.slug),
   }));
@@ -61,11 +64,13 @@ function getRoutes(): Route[] {
       const localeDocs = getLocaleDocs(locale);
       for (const fallback of defaultLocaleDocs) {
         const slug = localizedSlug(fallback.slug, locale);
+        const id = localizedId(fallback.id, locale);
         const doesNotNeedFallback = localeDocs.some((doc) => doc.slug === slug);
         if (doesNotNeedFallback) continue;
         routes.push({
           entry: fallback,
           slug,
+          id,
           isFallback: true,
           lang: localeConfig.lang || 'en',
           locale,
diff --git a/packages/starlight/utils/slugs.ts b/packages/starlight/utils/slugs.ts
index a1dda264..9706b653 100644
--- a/packages/starlight/utils/slugs.ts
+++ b/packages/starlight/utils/slugs.ts
@@ -90,3 +90,24 @@ export function localizedSlug(
   }
   return slug ? locale + '/' + slug : locale;
 }
+
+/**
+ * Convert a collection entry ID to a different locale.
+ * For example, passing an ID of `en/home.md` and a locale of `fr` results in `fr/home.md`.
+ * An undefined locale is treated as the root locale, resulting in `home.md`.
+ * @param id A collection entry ID
+ * @param locale The target locale
+ * @example
+ * localizedSlug('en/home.md', 'fr')       // => 'fr/home.md'
+ * localizedSlug('en/home.md', undefined)  // => 'home.md'
+ */
+export function localizedId(id: string, locale: string | undefined): string {
+  const idLocale = slugToLocale(id);
+  if (idLocale) {
+    return id.replace(idLocale + '/', locale ? locale + '/' : '');
+  } else if (locale) {
+    return locale + '/' + id;
+  } else {
+    return id;
+  }
+}