Translate 404 page automatically

Author: Fernando-A-Rocha

web/astro.config.mjs

@@ -11,10 +11,6 @@ export default defineConfig({
 		routing: {
 			prefixDefaultLocale: false,
 		},
-		fallback: {
-			"es": "en",
-			"fr": "en",
-		}
 	},
 	integrations: [
 		starlight({

web/src/content.config.ts

@@ -1,10 +1,15 @@
-import { defineCollection } from 'astro:content';
-import { docsLoader } from '@astrojs/starlight/loaders';
-import { docsSchema } from '@astrojs/starlight/schema';
+import { defineCollection, z } from 'astro:content';
+import { docsLoader, i18nLoader } from '@astrojs/starlight/loaders';
+import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
 import { glob } from 'astro/loaders';
 
 export const collections = {
 	docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+	i18n: defineCollection({ loader: i18nLoader(), schema: i18nSchema({
+		extend: z.object({
+			'custom.label': z.string().optional()
+		})
+	}) }),
 	elements: defineCollection({
 		loader: glob({
 			pattern: "**/*.yaml",

web/src/pages/404.astro

@@ -1,11 +1,12 @@
 ---
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
 ---
+
 <StarlightPage frontmatter={{
     template: 'splash',
-    title: 'Page not found (404)',
+    title: '404',
     hero: {
-        title: 'Page not found',
-        tagline: 'Check the URL or try using the search bar.'
+        title: '404',
+        tagline: Astro.locals.t('404.text')
     }
 }} />