fix 404: dynamic 404.astro route to render "not found" page

docs/routing.md

@@ -16,7 +16,7 @@ To make nested routes more useful for website visitors and easier to manage for
 
 ## 404 routes
 
-Head Start leverages [Cloudflare's Not Found behaviour](https://developers.cloudflare.com/pages/configuration/serving-pages/#not-found-behavior), which supports different 404 pages on different routes. Cloudflare will look up the directory tree until it finds a matching 404 page. A localised [root 404 page](../src/pages/[locale]/404.astro) is provided and can be edit from the CMS. You can add more specific 404 pages on specific routes, for example a `src/pages/[locale]/products/404.astro`.
+Head Start leverages [Astro's Custom 404 Error page](https://docs.astro.build/en/basics/astro-pages/#custom-404-error-page) (located in [`src/pages/404.astro`](../src/pages/404.astro)), connected to the Not Found model in DatoCMS.
 
 ## API routes
 

package.json

@@ -37,7 +37,6 @@
     "test:unit": "vitest run",
     "post": "run-s post:* --print-label",
     "post:download-redirects": "jiti scripts/download-redirects.ts",
-    "post:move-404-pages": "jiti scripts/move-404-pages.ts",
     "postinstall": "npx husky install"
   },
   "dependencies": {

src/pages/404.astro

@@ -0,0 +1,36 @@
+---
+import type { SiteLocale } from '@lib/i18n.types';
+import type {
+  NotFoundPageQuery,
+  NotFoundPageRecord,
+} from '@lib/types/datocms.d.ts';
+import { datocmsRequest } from '@lib/datocms';
+import { defaultLocale, locales } from '@lib/i18n';
+import { noIndexTag, titleTag } from '@lib/seo';
+import Layout from '@layouts/Default.astro';
+import Blocks from '@blocks/Blocks.astro';
+import type { AnyBlock } from '@blocks/Blocks';
+import query from './_404.query.graphql';
+
+export const prerender = false;
+
+Astro.response.status = 404;
+
+// The Astro.params.locale is unavailabe in this route,
+// so we need to extract it from the URL instead:
+const url = new URL(Astro.request.url);
+const pathLocale = url.pathname.split('/')[1];
+const locale = locales.includes(pathLocale as SiteLocale)
+  ? pathLocale
+  : defaultLocale;
+
+const { page } = (await datocmsRequest<NotFoundPageQuery>({
+  query,
+  variables: { locale },
+})) as { page: NotFoundPageRecord };
+---
+
+<Layout pageUrls={[]} seoMetaTags={[noIndexTag, titleTag(page.title)]}>
+  <h1>{page.title}</h1>
+  <Blocks blocks={page.bodyBlocks as AnyBlock[]} />
+</Layout>